/* ===== /v3 — "Pulse": catálogo real + efectos interactivos estilo
   reactbits.dev, reimplementados en JS plano (sin React) ===== */

/* --tc-p-orange/--tc-p-surface/--tc-p-border/--tc-p-text-dim/--tc-p-bg y
   .tc-p-page viven en navbar-footer.css (compartido con todo el sitio, para
   que cualquier vista real pueda envolver su contenido en .tc-p-page). */
body { background: var(--tc-p-bg); }

/* ---- "ShinyText": degradado animado en movimiento sobre el texto.
   .tc-p-shiny es solo para texto sobre foto oscura (hero, foto "expand") —
   se queda blanco/naranja siempre. .tc-p-shiny-body es para el resto de los
   títulos (sobre el fondo de la página) y sí cambia con el tema, ver el
   bloque [data-theme="light"] más abajo. ---- */
.tc-p-shiny, .tc-p-shiny-body {
    background: linear-gradient(90deg, #fff 0%, var(--tc-p-orange) 35%, #fff 55%, var(--tc-p-orange) 80%, #fff 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: tcPShine 6s linear infinite;
}
@keyframes tcPShine { to { background-position: -300% 0; } }

/* ---- Navbar: pastilla flotante de vidrio ---- */
/* Navbar (.tc-p-navbar*, .tc-rd3-navbar-search-*, .tc-p-nav-icon-btn,
   .tc-p-toggler, .tc-p-burger) ahora vive en navbar-footer.css, compartido
   con todo el sitio. Sin padding-top en <body>: el navbar es una pastilla
   flotante y transparente, así que flota SOBRE el cover en vez de
   empujarlo hacia abajo — el cover llega hasta el borde superior real. */

/* ---- Hero: partículas + glow + texto "decrypt" ---- */
.tc-p-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}
.tc-p-hero-scrim { position: absolute; inset: 0; background: rgba(7,7,12,.72); }
.tc-p-particles { position: absolute; inset: 0; width: 100%; height: 100%; }
.tc-p-hero-glow {
    position: absolute;
    left: 50%; top: 40%;
    width: 900px; height: 900px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,92,0,.2) 0%, rgba(255,92,0,.06) 45%, transparent 72%);
    pointer-events: none;
}
.tc-p-hero:not(.tc-p-hero--alt) .tc-p-hero-inner { position: relative; z-index: 1; padding: 120px 20px 60px; max-width: 780px; }
.tc-p-hero--alt .tc-p-hero-inner { position: relative; z-index: 1; }
@media (min-width: 1921px) {
    /* Bootstrap centra el .container con margin:auto una vez que topa su
       ancho máximo (1320px) — en pantallas más anchas que 1920px (o con
       zoom reducido) eso sigue corriendo el texto hacia el centro. Pasado
       ese punto se fija el margen al valor que ya tenía a 1920px (verificado
       alineado con el navbar) para que no se siga moviendo. */
    .tc-p-hero--alt .tc-p-hero-inner { margin-left: 292px; margin-right: auto; }
}
.tc-p-hero-inner--split { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tc-p-hero:not(.tc-p-hero--alt) .tc-p-hero-inner--split { max-width: 1100px; margin: 0 auto; }
.tc-p-hero-left { flex: 0 1 auto; max-width: 720px; }
.tc-p-hero-right { flex: none; }
@media (max-width: 991.98px) {
    .tc-p-hero-inner--split { flex-direction: column; align-items: stretch; }
    .tc-p-hero-left { text-align: center; max-width: none; }
    .tc-p-hero-left .tc-p-forbes-mention,
    .tc-p-hero-countdown-card { margin-left: auto; margin-right: auto; }
    .tc-p-hero-sub { margin-left: auto; margin-right: auto; }
}

.tc-p-hero--alt {
    background-position: left bottom;
}

/* Caja ancla-a-imagen para la llanta (ver comentario en redesign/index.blade.php).
   En móvil/tablet (<992px) es inerte a propósito: la llanta ahí usa su
   propia foto e imagen (hero-bg-mobile.jpg, background-size:auto 100%) con
   una lógica ya afinada aparte — no tocar. */
.tc-p-hero-cover-inner {
    position: static;
    width: 100%;
    height: 100%;
}
@media (min-width: 992px) {
    .tc-p-hero-cover-inner {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 100%;
        width: auto;
        /* min-width:100% es respaldo por si algún día el ancho de pantalla
           superara al alto multiplicado por este aspect-ratio (no pasa con
           ninguna pantalla real hoy, hero-bg.jpg es panorámica 1920x814 —
           pero sin esto, en ese caso hipotético la caja no cubriría todo el
           ancho del hero). */
        min-width: 100%;
        aspect-ratio: 1920 / 814;
        background-image: url('/img/redesign/v3/hero-bg.jpg');
        background-size: 100% 100%;
        pointer-events: none;
    }
}
.tc-p-hero--alt .tc-p-hero-inner {
    /* Sin max-width propio: la regla base de arriba ya está scoped a
       :not(.tc-p-hero--alt), así que aquí no hay nada que le quite a este
       elemento el ancho real del .container de Bootstrap (mismo que usa
       .tc-p-navbar-row). padding-left:18px iguala el punto de arranque del
       texto con el texto del logo del navbar (que tiene ese mismo padding
       interno), no con el borde de la píldora. */
    font-size: 1vw;
    padding: 4.75em 3% 1.5em 18px;
}
/* Antes .tc-p-hero-inner--split (base) le ponía a este elemento un
   max-width:1100px/margin:0 auto propios, distinto del ancho real del
   .container de Bootstrap que ahora usa el navbar sin tope fijo — eso
   rompía la alineación en pantallas anchas. En vez de reproducir a mano el
   ancho de Bootstrap por breakpoint, se acota esa regla base para que NO
   aplique aquí (el hero por defecto la sigue usando), dejando que el propio
   .container (misma clase que trae este elemento en el blade) sea el único
   que decide el ancho — igual que el navbar. */
@media (min-width: 992px) {
    .tc-p-hero--alt .tc-p-hero-inner--split { flex-direction: column; align-items: flex-start; }
    .tc-p-hero--alt .tc-p-hero-left { max-width: 51%; }
}
.tc-p-hero--alt .tc-p-forbes-mention { gap: 0.625em; margin-bottom: 0.625em; }
.tc-p-hero--alt .tc-p-forbes-logo { height: 1.375em; }
.tc-p-hero--alt .tc-p-forbes-mention-text { font-size: 0.875em; padding-left: 0.75em; }
/* "Envío gratis · Garantía incluida" del mismo tamaño que "Mencionados en Forbes México" (0.875em, igual que arriba). */
.tc-p-hero--alt .tc-p-eyebrow { font-size: 0.875em; margin-bottom: 0.375em; }
@media (max-width: 767.98px) {
    /* "Mencionados en Forbes México" y "Envío gratis · Garantía incluida"
       un poco más grandes y del mismo tamaño entre sí — pedido explícito,
       solo en móvil (en PC se quedan en su tamaño original de arriba). */
    .tc-p-hero--alt .tc-p-forbes-logo { height: 1.5em; }
    .tc-p-hero--alt .tc-p-forbes-mention-text { font-size: 1.15em; }
    .tc-p-hero--alt .tc-p-eyebrow { font-size: 1.15em; }
    /* 3 clases para ganarle a ".tc-p-hero-left .tc-p-eyebrow" (misma
       especificidad de 2 clases que la regla de arriba — sin esto ganaba por
       orden de aparición y el eyebrow no escalaba en em junto con "Forbes"). */
    .tc-p-hero--alt .tc-p-hero-left .tc-p-eyebrow { font-size: 1.15em; }
}
/* Celular/tablet: más aire entre el navbar y "Mencionados en Forbes". */
@media (max-width: 991.98px) {
    .tc-p-hero--alt .tc-p-forbes-mention { padding-top: 14px; }
}
.tc-p-hero--alt .tc-p-hero-title {
    font-size: 3.4em;
    margin-bottom: 0.5em;
}
.tc-p-hero--alt .tc-p-hero-title-line { white-space: nowrap; }
.tc-p-hero--alt .tc-p-hero-sub { display: none; }
.tc-p-hero--alt .tc-p-hero-countdown-card { margin-bottom: 0; }
.tc-p-hero--alt .tc-p-hero-countdown-label { font-size: 0.75em; margin-bottom: 0.625em; }
.tc-p-hero--alt .tc-p-hero-countdown { gap: 0.625em; }
.tc-p-hero--alt .tc-p-countdown-box { padding: 0.625em 1em; border-radius: 0.75em; min-width: 3.75em; }
.tc-p-hero--alt .tc-p-countdown-box span { font-size: 1.5em; }
.tc-p-hero--alt .tc-p-countdown-box small { font-size: 0.625em; }
.tc-p-hero--alt .tc-p-hero-rating-card { gap: 0.3em; padding: 0.55em 0.8em; border-radius: 0.75em; }
@media (min-width: 992px) { .tc-p-hero--alt .tc-p-hero-rating-card { padding: 0.55em 1.6em; } }
.tc-p-hero--alt .tc-p-hero-rating-g { height: 1.3em; width: 1.3em; }
.tc-p-hero--alt .tc-p-hero-rating-stars2 { font-size: 0.75em; letter-spacing: 0; line-height: 1; }
.tc-p-hero--alt .tc-p-hero-rating-score2 { font-size: 1em; line-height: 1; display: inline-block; }
.tc-p-hero--alt .tc-p-hero-star {
    display: inline-block;
    opacity: 0;
    transform: scale(0) rotate(-45deg);
    animation: tc-p-star-pop .5s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: calc(1.3s + var(--star-i, 1) * .1s);
}
@keyframes tc-p-star-pop {
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
    .tc-p-hero--alt .tc-p-hero-star { animation: none; opacity: 1; transform: none; }
}
.tc-p-hero--alt .tc-p-hero-rating-sub { font-size: 0.7em; opacity: .75; }
/* Accesos directos del cover alterno, debajo de la calificación de Google: "Buscar por medida" (naranja sólido) y
   "Buscar por vehículo" (contorno naranja). Mismo radio que la tarjeta de calificación para leerse como una familia. */
.tc-p-hero--alt .tc-p-hero-actions { width: fit-content; max-width: 100%; }
.tc-p-hero--alt .tc-p-hero-cta-pair { display: flex; gap: 0.9em; margin-top: 1.1em; width: fit-content; }
.tc-p-hero--alt .tc-p-hero-cta { flex: 1 1 0; white-space: nowrap; }
.tc-p-hero-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
    padding: 0.85em 1.35em;
    border: 1.5px solid var(--tc-p-orange);
    border-radius: 0.75em;
    color: #fff;
    font-size: 1.05em; font-weight: 800; line-height: 1.1;
    cursor: pointer;
    transition: filter .15s ease, background .15s ease, transform .15s ease;
}
.tc-p-hero-cta i { font-size: 1.3em; line-height: 1; }
.tc-p-hero-cta:hover { transform: translateY(-2px); }
.tc-p-hero-cta--primary { background: var(--tc-p-orange); box-shadow: 0 6px 18px rgba(255,92,0,.35); }
.tc-p-hero-cta--primary:hover { filter: brightness(1.08); }
.tc-p-hero-cta--outline { background: rgba(16,16,24,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tc-p-hero-cta--outline i { color: var(--tc-p-orange); }
.tc-p-hero-cta--outline:hover { background: rgba(255,92,0,.18); }

.tc-p-hero--alt .tc-p-forbes-mention,
.tc-p-hero--alt .tc-p-eyebrow,
.tc-p-hero--alt .tc-p-hero-title,
.tc-p-hero--alt .tc-p-hero-countdown-card,
.tc-p-hero--alt .tc-p-hero-rating-card,
.tc-p-hero--alt .tc-p-hero-cta-pair {
    opacity: 0;
    animation: tc-p-content-in .8s cubic-bezier(.22,.66,.32,1) both;
}
.tc-p-hero--alt .tc-p-forbes-mention { animation-delay: .5s; }
.tc-p-hero--alt .tc-p-eyebrow { animation-delay: .62s; }
.tc-p-hero--alt .tc-p-hero-title { animation-delay: .74s; }
.tc-p-hero--alt .tc-p-hero-countdown-card { animation-delay: .92s; }
.tc-p-hero--alt .tc-p-hero-rating-card { animation-delay: 1s; }
.tc-p-hero--alt .tc-p-hero-cta-pair { animation-delay: 1.1s; }
@keyframes tc-p-content-in {
    from { opacity: 0; transform: translateY(1em); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .tc-p-hero--alt .tc-p-forbes-mention,
    .tc-p-hero--alt .tc-p-eyebrow,
    .tc-p-hero--alt .tc-p-hero-title,
    .tc-p-hero--alt .tc-p-hero-countdown-card,
    .tc-p-hero--alt .tc-p-hero-rating-card,
    .tc-p-hero--alt .tc-p-hero-cta-pair { animation: none; opacity: 1; }
}

@media (max-width: 991.98px) {
    .tc-p-hero--alt {
        background-image: url('/img/redesign/v3/hero-bg-mobile.jpg') !important;
        background-position: center bottom;
        /* "cover" (heredado de .tc-p-hero) recorta lo que haga falta para
           llenar el contenedor — en un teléfono más alto que el promedio
           (p.ej. Samsung S23 FE) eso recorta la foto por ARRIBA/ABAJO,
           corriendo la plataforma redonda del fondo a una posición distinta
           según el alto real de cada pantalla, así que la llanta (que se
           posiciona aparte, ver .tc-p-hero-tire-wrap) quedaba descuadrada en
           unos celulares sí y en otros no. "auto 100%" fuerza a que SIEMPRE
           se vea la foto completa de arriba a abajo (solo recorta a los
           lados si hace falta) — la plataforma queda a la misma altura
           relativa sin importar el alto de pantalla, así que un bottom fijo
           en .tc-p-hero-tire-wrap ya alcanza para que la llanta caiga
           siempre en el mismo lugar de la plataforma. */
        background-size: auto 100%;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        min-height: 100vh;
        min-height: 100svh;
        padding-bottom: 32px;
    }
    /* padding-top en max(): 5.5em solo (~62px en la mayoría de celulares) no
       alcanzaba a librar el navbar flotante fijo (~76px incluyendo su
       margen desde arriba) y el texto Forbes/eyebrow quedaba tapado por
       abajo del navbar. El mínimo fijo de 92px garantiza espacio libre sin
       importar el tamaño de pantalla; en pantallas grandes donde 5.5em ya
       es mayor a 92px, ese sigue ganando y no se pierde el escalado. */
    .tc-p-hero--alt .tc-p-hero-inner { font-size: clamp(11px, 3vw, 15px); padding: max(5.5em, 92px) 6% 0 6%; order: 1; }
    .tc-p-hero--alt .tc-p-hero-inner--split { max-width: none; }
    .tc-p-hero--alt .tc-p-hero-left { max-width: none; }
    .tc-p-hero--alt .tc-p-hero-title { font-size: 2.4em !important; }
    /* La palabra dinámica de la 2a línea (medida/vehículo/modelo/marca) tiene
       largos distintos — con wrap normal, la más larga ("vehículo") se salía
       a un 3er renglón y corría todo lo de abajo, mientras que "marca" (la
       más corta) se quedaba en la línea 2 — quedaban en lugares distintos
       según qué palabra tocara. nowrap la fija siempre en el mismo lugar,
       igual que ya hace la versión no-alt más abajo (font-size en em escala
       junto con el contenedor, así que no se desborda). */
    .tc-p-hero--alt .tc-p-hero-title-line { white-space: nowrap !important; }
    .tc-p-hero--alt .tc-p-hero-left { text-align: center; }
    /* El bloque de accesos mide lo que su contenido (fit-content), así que sin esto se quedaba pegado a la izquierda. */
    .tc-p-hero--alt .tc-p-hero-actions { margin-left: auto; margin-right: auto; }
    .tc-p-hero--alt .tc-p-forbes-mention,
    .tc-p-hero--alt .tc-p-hero-countdown-card,
    .tc-p-hero--alt .tc-p-hero-rating-card { margin-left: auto; margin-right: auto; }
    .tc-p-hero--alt .tc-p-hero-rating-card { align-items: center; }
    /* El cover alt no lleva scrim oscuro (solo la versión default lo trae,
       ver tc-p-hero-scrim en el blade) — contra una foto clara/con detalle
       el vidrio translúcido de .78 se perdía. Más opaco + sombra propia para
       que despeguen de la foto sin depender del contraste de cada foto. */
    .tc-p-hero--alt .tc-p-countdown-box,
    .tc-p-hero--alt .tc-p-hero-rating-card {
        background: rgba(10,10,16,.92);
        box-shadow: 0 4px 16px rgba(0,0,0,.5);
    }
    /* Contador y tarjeta de Google pedidos explícitamente más grandes que el
       0.85-1em heredado — quedaban chicos contra el título a 2.4em. */
    .tc-p-hero--alt .tc-p-countdown-box { padding: 0.75em 1.1em; min-width: 4.1em; }
    .tc-p-hero--alt .tc-p-countdown-box span { font-size: 1.75em; }
    .tc-p-hero--alt .tc-p-countdown-box small { font-size: 0.72em; }
    .tc-p-hero--alt .tc-p-hero-rating-card { padding: 0.75em 1.05em; }
    .tc-p-hero--alt .tc-p-hero-rating-g { height: 1.45em; width: 1.45em; }
    .tc-p-hero--alt .tc-p-hero-rating-stars2 { font-size: 1.05em; }
    .tc-p-hero--alt .tc-p-hero-rating-score2 { font-size: 1.2em; }
    .tc-p-hero--alt .tc-p-hero-rating-sub { font-size: 1em; }
    .tc-p-hero--alt .tc-p-hero-inner--split { gap: 14px; }
    /* Mismo espacio entre contador↔calificación que entre calificación↔botón
       (14px, el de .tc-p-hero-inner--split de arriba) — antes 12px propio de
       .tc-p-hero-highlight-row, se notaba desparejo. */
    .tc-p-hero--alt .tc-p-hero-highlight-row { gap: 14px; }
    /* Los dos accesos se apilan al ancho de la tarjeta de Google (hero-btn-width-sync.js fija ese ancho). */
    .tc-p-hero--alt .tc-p-hero-cta-pair { flex-direction: column; margin: 0.8em auto 0; }
    .tc-p-hero--alt .tc-p-hero-cta { flex: none; width: 100%; font-size: 1em; padding: 0.8em 1em; }
}
}
/* Pantallas "aplanadas" (celular en horizontal, o cualquier viewport bajo y
   ancho): "auto 100%" escala la foto para llenar el alto completo, pero si
   el contenedor es muy ancho respecto a ese alto, el ancho resultante de la
   foto no alcanza a cubrirlo — y como no hay "no-repeat" salvo aquí, se
   veía la foto repetida en mosaico a los lados. En estos casos ya no
   importa tanto mantener la plataforma a una altura relativa exacta (la
   llanta apenas es visible en tan poco alto), así que se vuelve a "cover"
   (recorta lo que haga falta, nunca repite). */
@media (max-width: 991.98px) and (max-height: 500px) {
    .tc-p-hero--alt { background-size: cover; }
}

.tc-p-hero-tire-wrap {
    position: absolute;
    z-index: 1;
    /* Desktop (992px+): el contenedor (.tc-p-hero-cover-inner) ya tiene el
       mismo aspect ratio real de hero-bg.jpg (1920x814) y está anclado
       igual que el fondo (left/bottom) — así que right/width aquí son % de
       ESA imagen (más ancha que el viewport), no del viewport directo, y
       quedan fijos para siempre sin importar el tamaño de pantalla.
       width bajó de 30% a 22.5%: ese 30% era correcto cuando era % del
       viewport, pero al pasar a ser % de una caja MÁS ANCHA que el
       viewport, el mismo número dejaba la llanta con más píxeles reales de
       los que tenía antes (se veía más grande). 22.5% de esta caja da
       aprox. el mismo tamaño en pantalla que el 30% de antes en una
       pantalla 16:9 típica.
       El punto real de la plataforma está en ~64% del ancho de la imagen
       (medido directo sobre el archivo). right:27% + width:22.5% deja el
       centro en 62% (borde derecho en 73%) — cerca del punto real con
       margen de sobra dentro del ~75.4% de la imagen que sigue siendo
       visible incluso en el peor caso realista (pantalla 16:9 sin
       recortar por navbar/chrome).
       right bajó de 25% a 23.5%: pedido explícito, en laptops (992-1366px
       aprox.) la llanta se seguía viendo corrida hacia la izquierda.
       Se probó cambiar esto a calc(247.43vh - 100vw) para que no se recorte
       en pantallas "cuadradas" (iPad landscape 1024x768) — revertido: en la
       laptop real del usuario se veía chueca/mal posicionada, aunque en las
       resoluciones probadas aquí (1024x768, 1366x800, 1920x1000) se veía
       bien. Volver a intentarlo solo con la resolución/zoom exactos del
       usuario confirmados primero. */
    right: 23.5%;
    bottom: 18%;
    width: 27%;
    pointer-events: none;
    transition: transform .5s cubic-bezier(.22,.66,.32,1);
    will-change: transform;
}
.tc-p-hero-tire {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 25px 35px rgba(0,0,0,.55));
    transform-origin: 50% 50%;
    opacity: 0;
    transform: translateX(260%) rotate(0deg);
}
.tc-p-hero-tire.is-in {
    animation: tc-p-tire-roll-in 2.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes tc-p-tire-roll-in {
    0% { opacity: 0; transform: translateX(260%) rotate(0deg); }
    8% { opacity: 1; }
    100% { opacity: 1; transform: translateX(0) rotate(-720deg); }
}
@media (prefers-reduced-motion: reduce) {
    .tc-p-hero-tire { animation: none; opacity: 1; transform: translateX(0) rotate(-720deg); }
}
@media (max-width: 991.98px) {
    /* .tc-p-hero--alt (única que aplica en móvil, ver arriba) usa
       background-size:auto 100% (ver arriba) para que la plataforma redonda
       del fondo quede SIEMPRE a la misma altura relativa, sin importar el
       alto de pantalla. Para que la llanta caiga justo ahí en cualquier
       celular, su separación del fondo también debe ser un % del alto del
       hero (bottom, position:absolute) y no un margen/padding en píxeles
       fijos — un valor fijo se queda corto en pantallas más altas que el
       promedio (se probó y la llanta quedaba flotando por debajo de la
       plataforma en un Galaxy S23 FE) y sobra en las más bajas. */
    .tc-p-hero--alt { justify-content: flex-start; }
    .tc-p-hero-tire-wrap {
        position: absolute;
        left: 50%;
        bottom: 9%;
        right: auto;
        /* Prueba: llanta más grande en celular — puede quedar detrás del
           texto/botón de arriba, aceptado a propósito. */
        width: 92%;
        margin: 0;
        transform: translateX(-50%);
    }
}
@media (max-width: 575.98px) {
    .tc-p-hero-tire-wrap {
        /* Antes 78%: se veía demasiado grande en celular. Sigue anclada
           por abajo (bottom:14%), así que no se sale de la plataforma. */
        width: 66%;
    }
}

.tc-p-blur-word { display: inline-block; filter: blur(0); opacity: 1; transform: translateY(0); transition: filter .42s ease, opacity .42s ease, transform .42s ease; }
.tc-p-blur-word.is-swapping { filter: blur(12px); opacity: 0; transform: translateY(8px); }

/* ---- Tarjetas de ofertas/más vendidos: entrada escalonada al hacer
   scroll (card-reveal.js), se repite si sales y vuelves a entrar. ---- */
[data-reveal-card] {
    opacity: 0;
    transform: translateY(36px) scale(.94);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.66,.32,1);
    transition-delay: calc(var(--i, 0) * 70ms);
}
[data-reveal-grid].is-in [data-reveal-card] {
    opacity: 1;
    transform: translateY(0) scale(1);
}
@media (max-width: 767.98px) {
    [data-reveal-card] { transition-delay: 0ms !important; }
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal-card] { transition: none; opacity: 1; transform: none; }
}

/* Contador tipo "tarjetas" (días/hrs/min/seg), portado de /v2 — reemplaza la
   píldora naranja de una sola línea que tenía antes. Usa countdown.js
   (compartido por v1/v2/v3), no promo-countdown.js. */
/* Contador + reseña de Google en la misma fila desde escritorio (antes
   quedaba apilada debajo, dejando un hueco horizontal grande a su derecha
   en el cover real). En móvil sigue apilada verticalmente, mismo look de
   siempre. */
/* Centrado como bloque en móvil (align-items, no solo text-align: son
   flexbox, no texto inline) — desde 992px pasan a fila y se alinean a la
   izquierda contra el contador, ver abajo. */
.tc-p-hero-highlight-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
@media (min-width: 992px) {
    /* flex-end (no "center"): la tarjeta del contador incluye la etiqueta
       "OFERTAS TERMINAN EN..." arriba de las cajas, así que su borde
       SUPERIOR no tiene equivalente en la tarjeta de reseñas — pero su
       borde INFERIOR sí (ambas terminan ahí). Alinear por abajo hace que
       las cajas de números y la tarjeta de reseñas queden a la misma
       altura sin depender de un margen fijo (que se desajusta apenas
       cambia el font-size en vw de .tc-p-hero--alt). */
    .tc-p-hero-highlight-row { flex-direction: row; align-items: flex-end; gap: 16px; }
    /* Cover alterno: la tarjeta de Google mide lo mismo que las cajas de números del contador (la altura la fija
       hero-btn-width-sync.js) y centra su contenido. */
    .tc-p-hero--alt .tc-p-hero-rating-card { justify-content: center; }
}

.tc-p-hero-countdown-card { width: fit-content; }
.tc-p-hero-countdown-label {
    display: block;
    font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px;
    color: #fff; opacity: .85;
    margin-bottom: 10px;
}
.tc-p-hero-countdown-label i { color: var(--tc-p-orange); }
.tc-p-hero-countdown { display: flex; gap: 10px; }
.tc-p-countdown-box {
    /* Mismo vidrio que el navbar (.tc-p-navbar-row) */
    background: rgba(16,16,24,.78);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 12px;
    padding: 10px 16px;
    text-align: center;
    min-width: 60px;
}
.tc-p-countdown-box span {
    display: block;
    font-size: 24px; font-weight: 800; color: #fff;
    font-family: 'Courier New', monospace;
    line-height: 1;
}
.tc-p-countdown-box small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: rgba(255,255,255,.6); }
@media (max-width: 575.98px) {
    .tc-p-countdown-box { min-width: 0; flex: 1; padding: 8px 6px; }
    .tc-p-countdown-box span { font-size: 19px; }
}
@media (max-width: 767.98px) {
    /* Sombra de texto para que el contador y la calificación se sigan
       leyendo bien contra fotos claras/brillantes en móvil, sin depender de
       subir la opacidad del vidrio (probado antes, seguía sin ser
       suficiente). */
    .tc-p-countdown-box span,
    .tc-p-countdown-box small,
    .tc-p-hero-countdown-label,
    .tc-p-hero-rating-score2,
    .tc-p-hero-rating-sub,
    .tc-p-hero-rating-stars2 {
        text-shadow: 0 1px 4px rgba(0,0,0,.65);
    }
}

/* Reseña de Google del hero: pill compacta de dos renglones (logo+estrellas+
   nota arriba, "calificado por..." abajo) — mismo vidrio que las cajas del
   contador (.tc-p-countdown-box) para que se lean como un mismo set, pero
   usa solo el ancho que su propio contenido necesita (fit-content), sin la
   caja/divisor grande de antes que dejaba espacio vacío de sobra. */
.tc-p-hero-rating-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: 5px;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    background: rgba(16,16,24,.78);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 14px;
    padding: 10px 16px;
}
.tc-p-hero-rating-top { display: flex; align-items: center; gap: 8px; }
.tc-p-hero-rating-g { height: 20px; width: 20px; object-fit: contain; flex: none; }
.tc-p-hero-rating-stars2 { display: inline-flex; gap: 1px; color: #fff; font-size: 13px; letter-spacing: 1px; }
.tc-p-hero-rating-stars2 .tc-p-hero-star { color: #fff; }
.tc-p-hero-rating-score2 { font-size: 16px; font-weight: 800; color: #fff; line-height: 1; }
.tc-p-hero-rating-sub { font-size: 12px; color: rgba(255,255,255,.75); margin: 0; display: flex; align-items: center; gap: 5px; white-space: nowrap; line-height: 1.3; }
.tc-p-hero-rating-sub i { color: #fff; font-size: 12px; flex: none; }

.tc-p-hero-search-ctas { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; }

/* CTA principal: la versión "vidrio" (dark glass) se perdía contra el fondo
   oscuro del hero, siendo la acción más importante de la página — vuelve a
   ser naranja sólido y bien visible, pero conserva la estructura de
   insignia + texto + flecha (en vez del pill plano de antes) y le suma un
   resplandor pulsante en TODO el botón para que salte a la vista incluso
   sobre foto oscura. La insignia ahora es blanca (invertida) para
   contrastar contra el relleno naranja. El secundario (--ghost) se queda
   oscuro/vidrio para no competir con el principal. */
.tc-p-hero-search-btn2 {
    position: relative;
    display: inline-flex; align-items: center; gap: 14px;
    width: fit-content;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff7a2e, var(--tc-p-orange));
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    /* Mismo padding vertical que .tc-p-hero-rating-card (12px) para que
       tengan la misma altura — antes era un botón "barra" de ancho
       completo y demasiado delgado (8px). Ya no estira al 100% del
       contenedor: se ajusta a su contenido, como la tarjeta de reseñas. */
    padding: 12px 26px 12px 12px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255,92,0,.35);
    animation: tc-p-btn-glow-pulse 2.4s ease-in-out infinite;
    transition: transform .15s ease, box-shadow .15s ease;
}
.tc-p-hero-search-btn2:hover { transform: translateY(-2px); }
@keyframes tc-p-btn-glow-pulse {
    0%, 100% { box-shadow: 0 4px 10px rgba(255,92,0,.35); }
    50% { box-shadow: 0 4px 14px rgba(255,92,0,.55); }
}
@media (prefers-reduced-motion: reduce) {
    .tc-p-hero-search-btn2 { animation: none; }
}
.tc-p-hero-btn-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.9em; height: 2.9em; flex: none;
    border-radius: 50%;
    background: #fff;
    color: var(--tc-p-orange);
    font-size: .8em;
    box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.tc-p-hero-btn-text { flex: 1; text-align: left; }
.tc-p-hero-btn-arrow { color: #fff; font-size: 1.1em; transition: transform .2s ease; }
.tc-p-hero-search-btn2:hover .tc-p-hero-btn-arrow { transform: translateX(4px); }
.tc-p-hero-search-btn2--ghost {
    background: rgba(16,16,24,.78);
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: none;
    animation: none;
}
.tc-p-hero-search-btn2--ghost:hover { border-color: rgba(255,146,64,.5); }
.tc-p-hero-search-btn2--ghost .tc-p-hero-btn-icon { background: rgba(255,255,255,.1); color: #fff; box-shadow: none; }
.tc-p-hero-search-btn2--ghost .tc-p-hero-btn-arrow { color: var(--tc-p-orange); }
.tc-p-hero-search-btn2--ghost .tc-p-hero-btn-icon {
    background: rgba(255,255,255,.1);
    box-shadow: none;
    animation: none;
    color: #fff;
}
.tc-p-hero-search-btn2--ghost:hover { border-color: rgba(255,255,255,.4); }
@media (max-width: 991.98px) {
    .tc-p-hero-rating-card { margin: 0 auto; }
    .tc-p-hero-search-ctas { align-items: center; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .tc-p-hero-search-ctas { flex-direction: row; justify-content: center; }
    /* Este rango (768-991px) también lo agarran los ajustes pensados para
       celular de arriba (auto 100% + llanta al 92%) — en una tablet, mucho
       menos angosta que un teléfono, eso se veía mal: la foto escalada a
       100% de alto no alcanzaba a cubrir el ancho (se notaba que no era
       "cover") y la llanta quedaba desproporcionadamente enorme. De vuelta
       a cover normal y a un tamaño de llanta más moderado, sin heredar el
       tratamiento de teléfono. */
    .tc-p-hero--alt { background-size: cover; }
    .tc-p-hero-tire-wrap { width: 45%; }

    /* En tablet, en vez de todo apilado en una sola columna (tratamiento de
       celular) o el split de escritorio (título+contador a la izquierda,
       solo el botón a la derecha), pasa a dos columnas propias: a la
       izquierda Forbes+eyebrow+título+botón (todo el "copy" y la acción
       principal juntos), a la derecha el contador+reseña centrados
       verticalmente contra esa columna, y la llanta abajo (igual que ahora,
       fuera de este grid). .tc-p-hero-left/-right se "desarman" con
       display:contents para que sus hijos entren directo al grid y se
       puedan reacomodar con grid-area sin duplicar el HTML. */
    .tc-p-hero--alt .tc-p-hero-inner--split {
        display: grid;
        /* minmax(0, ...) es necesario: sin él, cada columna de un grid
           nunca se encoge más allá del min-content de lo que tenga adentro
           — con el título en nowrap (heredado del bloque genérico de abajo
           de 991.98px) eso significa "tan ancho como el título completo en
           una sola línea", empujando la grilla entera fuera de la pantalla
           en vez de dejar que el título haga wrap dentro de su columna. */
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-areas:
            "forbes    highlight"
            "eyebrow   highlight"
            "title     highlight"
            "search    highlight";
        column-gap: 32px;
        row-gap: 10px;
        align-items: center;
        max-width: none;
    }
    .tc-p-hero--alt .tc-p-hero-title-line { white-space: normal !important; }
    .tc-p-hero--alt .tc-p-hero-left { display: contents; text-align: left; }
    .tc-p-hero--alt .tc-p-hero-actions { display: contents; }
    .tc-p-hero--alt .tc-p-forbes-mention { grid-area: forbes; margin-left: 0; margin-right: 0; align-self: end; }
    .tc-p-hero--alt .tc-p-eyebrow { grid-area: eyebrow; align-self: end; }
    /* Más grande que el resto del bloque en tablet — pedido explícito, se
       veía chico comparado con el espacio disponible. font-size en em sigue
       escalando con .tc-p-hero-inner (clamp(11px,3vw,15px) en este ancho). */
    .tc-p-hero--alt .tc-p-hero-title { grid-area: title; align-self: start; font-size: 2.6em !important; }
    .tc-p-hero--alt .tc-p-hero-cta-pair {
        grid-area: search;
        align-self: start;
        flex-direction: row;
        margin: 0;
    }
    .tc-p-hero--alt .tc-p-hero-cta { width: auto; }
    .tc-p-hero--alt .tc-p-hero-highlight-row {
        grid-area: highlight;
        flex-direction: column;
        align-items: stretch;
        justify-content: center;
        align-self: stretch;
        gap: 20px;
    }
    .tc-p-hero--alt .tc-p-hero-countdown-card,
    .tc-p-hero--alt .tc-p-hero-rating-card { margin-left: 0; margin-right: 0; width: 100%; }
    .tc-p-hero--alt .tc-p-hero-countdown { justify-content: space-between; }
    .tc-p-hero--alt .tc-p-hero-rating-card { align-items: center; }
    .tc-p-hero--alt .tc-p-hero-rating-top { justify-content: center; }
}

/* Mención de Forbes: sin fondo de badge, solo logo + texto con una línea
   divisoria sutil entre ambos (look editorial, no "pastilla"). */
.tc-p-forbes-mention {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
}
.tc-p-forbes-logo { height: 22px; width: auto; flex: none; display: block; }
.tc-p-forbes-mention-text {
    font-size: 14px; font-weight: 700; letter-spacing: .2px;
    color: rgba(255,255,255,.75);
    padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.25);
    white-space: nowrap;
}
.tc-p-eyebrow {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
    color: var(--tc-p-orange);
    margin-bottom: 14px;
}
.tc-p-hero-title { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.1; margin: 0 0 12px; color: #fff; }
.tc-p-hero-title-line { display: block; }
/* En móvil, la segunda línea cambia de palabra (medida/vehículo/modelo/...) y
   con la más larga se salía a un segundo renglón, corriendo todo lo de abajo
   (contador, etc.) — un tamaño más chico y sin wrap la deja fija en su lugar
   sin importar qué palabra esté mostrando. */
@media (max-width: 575.98px) {
    .tc-p-hero-title { font-size: clamp(1.5rem, 6.4vw, 2rem); }
    .tc-p-hero-title-line { white-space: nowrap; }
}
.tc-p-hero-sub { font-size: 15px; color: rgba(255,255,255,.68); max-width: 480px; margin-bottom: 16px; }
.tc-p-hero-left .tc-p-eyebrow { margin-bottom: 8px; text-transform: none; }
@media (max-width: 767.98px) {
    /* Mismo tamaño que "Mencionados en Forbes México" — pedido explícito,
       solo en móvil (en PC se quedan en su tamaño original). */
    .tc-p-forbes-mention-text,
    .tc-p-hero-left .tc-p-eyebrow { font-size: 16px; }
}

/* "Garantía incluida" del eyebrow: botón sin estilo propio que hereda el
   look del texto naranja de alrededor. Abre #warrantyInfoModal — ver el
   modal al final de redesign/index.blade.php. Sin subrayado (pedido
   explícito) — se distingue solo por el cursor y el hover a blanco. */
.tc-p-eyebrow-link {
    background: none;
    border: none;
    padding: 0;
    /* Un poco de aire respecto al "·" de la izquierda — pedido explícito,
       se veían pegados. */
    margin: 0 0 0 5px;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    cursor: pointer;
}
.tc-p-eyebrow-link:hover { color: #fff; }
.tc-p-eyebrow-link i { color: inherit; margin-left: 3px; vertical-align: -1px; }

/* ---- Modal "Garantía incluida" ---- */
.tc-warranty-modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
}
.tc-warranty-modal-cover {
    width: 100%;
    height: auto;
    display: block;
}
.tc-warranty-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    /* background-color, NO background: el shorthand "background" pisa el
       background-image (el SVG de la X) que pone .btn-close de Bootstrap,
       dejando el círculo blanco sin ícono — bug encontrado en producción. */
    background-color: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0;
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.tc-warranty-modal-body { padding: 24px 28px 28px; }
.tc-warranty-modal-badge {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--tc-p-border, #eeeef2);
}
.tc-warranty-modal-badge:last-of-type { border-bottom: none; }
.tc-warranty-modal-badge img { width: 48px; height: 48px; flex-shrink: 0; }
/* Sin color propio: hereda var(--tc-p-input-text) de .modal-content, que sí
   cambia con el tema — un color fijo aquí es lo que dejaba el título
   invisible en modo oscuro (texto oscuro fijo sobre el modal ya oscuro). */
.tc-warranty-modal-badge-title { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.tc-warranty-modal-badge-sub { font-size: 13px; color: var(--tc-p-text-dim); margin-bottom: 0; }

.tc-p-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex; align-items: center; gap: 8px;
    border: none;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14px;
    padding: 14px 28px;
    cursor: pointer;
    /* Sin sombra de texto aunque el botón viva sobre una foto con
       text-shadow (ej. el botón de .tc-p-expand-photo-caption):
       mismo botón en todo el sitio. */
    text-shadow: none;
}
.tc-p-btn--primary { background: var(--tc-p-orange); color: #fff; }
.tc-p-btn--primary:hover { box-shadow: 0 12px 26px rgba(255,92,0,.35); }

/* ---- ClickSpark: chispas que salen del punto de clic ---- */
.tc-p-spark {
    position: absolute;
    width: 6px; height: 2px;
    background: #fff;
    border-radius: 2px;
    pointer-events: none;
    transform-origin: left center;
    animation: tcPSpark .5s ease-out forwards;
}
@keyframes tcPSpark {
    from { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0); opacity: 1; }
    to { transform: translate(-50%, -50%) rotate(var(--angle)) translateX(28px); opacity: 0; }
}

/* ---- Promociones: texto + contador real a la izquierda (cambia con cada
   foto) + carrusel "depth" (tarjetas 3D apiladas) a la derecha ---- */
/* Sin border-bottom: la sección "Cómo funciona" justo después ahora tiene
   su propio fondo con foto de borde a borde (ver .tc-p-steps), y esa línea
   quedaba muy visible justo encima de esa foto. */
.tc-p-promos { padding: 60px 0; border-top: 1px solid var(--tc-p-border); }
.tc-p-promos-grid { max-width: 1320px; width: 100%; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: auto auto; justify-content: center; gap: 18px; align-items: center; }
.tc-p-promos-copy { width: 420px; max-width: 100%; min-width: 0; }
.tc-p-promos-copy [data-promo-eyebrow] { transition: opacity .25s ease; }
.tc-p-promos-copy h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 8px 0 14px; transition: opacity .25s ease; }
.tc-p-promos-copy p { font-size: 14.5px; color: var(--tc-p-text-dim); line-height: 1.65; margin: 0 0 24px; max-width: 420px; transition: opacity .25s ease; }
.tc-p-promos-countdown { display: flex; gap: 14px; margin-bottom: 26px; }
.tc-p-promos-countdown-unit {
    display: flex; flex-direction: column; align-items: center;
    width: 66px;
    padding: 10px 0;
    border-radius: 12px;
    background: var(--tc-p-surface);
    border: 1px solid var(--tc-p-border);
}
.tc-p-promos-countdown-unit span { font-family: 'Courier New', monospace; font-weight: 800; font-size: 22px; color: var(--tc-p-orange); line-height: 1; }
.tc-p-promos-countdown-unit small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--tc-p-text-dim); margin-top: 4px; }
.tc-p-promo-code { background: none; border: none; padding: 0; font-size: 14.5px; font-weight: 700; color: var(--tc-p-orange); cursor: pointer; }
.tc-p-promo-code strong { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.tc-p-promo-code:hover strong { text-decoration-color: transparent; }

.tc-p-depth-carousel { position: relative; width: 620px; max-width: 100%; min-width: 0; height: 580px; perspective: 1600px; }
.tc-p-depth-stage { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.tc-p-depth-card {
    position: absolute;
    top: 50%; left: 50%;
    width: 460px;
    height: 460px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,.55);
    will-change: transform, filter, opacity;
}
.tc-p-depth-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tc-p-depth-controls {
    position: absolute;
    left: 0; right: 0; bottom: -14px;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}
/* .tc-p-depth-nav / .tc-p-depth-dots ahora viven en navbar-footer.css
   (compartidas con brandInformation.blade.php y cualquier otro carrusel
   real que reuse este mismo estilo de flechas/puntos). */
@media (max-width: 991.98px) {
    .tc-p-promos-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .tc-p-promos-copy { width: 100%; text-align: center; }
    .tc-p-promos-copy p { max-width: none; }
    .tc-p-promos-countdown { justify-content: center; }
    /* El grid pasa a una sola columna a todo el ancho — sin esto el
       carrusel (ancho fijo de 620px) se quedaba pegado a la izquierda en
       vez de centrado bajo el texto. */
    .tc-p-depth-carousel { margin: 0 auto; }
}
@media (max-width: 575.98px) {
    /* Carrusel más ajustado a la tarjeta (antes 400px de alto para una
       tarjeta de 300: ~50px vacíos arriba y abajo) y menos aire en la
       sección y antes de "Cómo funciona". */
    /* position/z-index: con menos padding la sombra de la tarjeta llega
       hasta "Cómo funciona", cuyo fondo la tapaba y se veía cortada — así
       la sección de ofertas queda encima y la sombra se ve completa. */
    .tc-p-promos { padding: 28px 0 60px; position: relative; z-index: 2; }
    .tc-p-depth-carousel { height: 340px; }
    /* Con el carrusel más bajo, las flechas/puntos (bottom:-14px) quedaban
       encima de la tarjeta: se bajan para que queden debajo de ella. */
    .tc-p-depth-controls { bottom: -46px; }
    .tc-p-depth-card { width: 300px; height: 300px; box-shadow: 0 18px 36px rgba(0,0,0,.45); }
    .tc-p-promos + .tc-p-steps { padding-top: 36px; }
}

/* ---- Stats: contadores animados ---- */
.tc-p-stats { border-top: 1px solid var(--tc-p-border); border-bottom: 1px solid var(--tc-p-border); padding: 46px 0; }
.tc-p-stats-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px; }
.tc-p-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tc-p-stat i { font-size: 22px; color: var(--tc-p-orange); margin-bottom: 6px; }
.tc-p-stat-num { display: block; font-size: 40px; font-weight: 800; font-family: 'Courier New', monospace; color: #fff; line-height: 1; }
.tc-p-stat-label { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--tc-p-text-dim); }
.tc-p-stat-sep { width: 1px; height: 54px; background: var(--tc-p-border); }
@media (max-width: 575.98px) {
    .tc-p-stat-sep { display: none; }
    .tc-p-stats-row { flex-wrap: nowrap; justify-content: space-between; gap: 10px; }
    .tc-p-stat { flex: 1 1 0; min-width: 0; gap: 2px; }
    .tc-p-stat i { font-size: 16px; margin-bottom: 2px; }
    .tc-p-stat-num { font-size: 21px; }
    .tc-p-stat-label { font-size: 9px; line-height: 1.25; }
}

/* ---- Secciones genéricas ---- */
.tc-p-section { padding: 64px 0; }
.tc-p-section-head { text-align: center; max-width: 560px; margin: 0 auto 36px; }
.tc-p-section-head h2 { font-size: 1.9rem; margin: 6px 0 0; }

/* ---- Más vendidas: la llanta real, grande y rotada, se asoma detrás del
   contenido — mix-blend-mode:multiply sobre una tarjeta SIEMPRE blanca (no
   cambia con el tema, ni oscuro ni claro, portado tal cual de /v1) para que
   la línea de la foto se funda igual; texto oscuro fijo por la misma razón,
   y de paso resalta bien tanto sobre el fondo oscuro como el claro de la
   página. ---- */
/* .tc-p-bestseller-* y .tc-p-deal-* ahora viven en navbar-footer.css
   (compartidas con brandInformation.blade.php, showBySize.blade.php y
   cualquier otra vista real que reuse estas tarjetas). */

/* ---- Franja en movimiento debajo del cover: mensajes (envío gratis, ofertas, servicio) en loop lento. Cada grupo mide al
   menos el ancho de la pantalla para que el loop (-50%) no deje huecos en monitores anchos. ---- */
.tc-p-ticker {
    overflow: hidden;
    padding: 14px 0;
    background: #000;
}
.tc-p-ticker-track { display: flex; width: max-content; animation: tcPTicker 70s linear infinite; will-change: transform; }
.tc-p-ticker:hover .tc-p-ticker-track { animation-play-state: paused; }
.tc-p-ticker-group { display: flex; align-items: center; flex: 0 0 auto; min-width: 100vw; justify-content: space-around; gap: 48px; padding-right: 48px; }
.tc-p-ticker-item { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 14px; font-weight: 700; letter-spacing: .2px; color: rgba(255, 255, 255, .88); }
.tc-p-ticker-item i { color: var(--tc-p-orange, #ff6000); font-size: 16px; }
@keyframes tcPTicker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .tc-p-ticker-track { animation: none; }
}
@media (max-width: 575.98px) {
    .tc-p-ticker { padding: 10px 0; }
    .tc-p-ticker-item { font-size: 13px; }
}

/* ---- Marcas: marquee horizontal continuo, portado de /v1 (mismo patrón
   que .tc-p-review-marquee: máscara de degradado en los bordes + 2 filas
   duplicadas sobre sí mismas para el loop infinito sin salto). ---- */
.tc-p-brand-marquee { display: flex; flex-direction: column; gap: 14px; }
.tc-p-brand-row {
    overflow: hidden;
    padding: 6px 0;
    margin: -6px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tc-p-brand-row-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: tcPBrandMarquee 95s linear infinite;
    will-change: transform;
}
.tc-p-brand-row--b .tc-p-brand-row-track { animation-duration: 115s; animation-direction: reverse; }
.tc-p-brand-marquee:hover .tc-p-brand-row-track { animation-play-state: paused; }
@keyframes tcPBrandMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .tc-p-brand-row-track { animation: none; }
}
/* Los logos reales vienen con fondo blanco opaco (no transparente) — por
   eso viven sobre una placa blanca con sus colores originales, en vez del
   truco de filtro blanco que sí funciona para íconos con fondo transparente. */
.tc-p-brand-pill {
    flex: 0 0 auto;
    width: 150px;
    height: 88px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,.2);
    transition: transform .2s ease, box-shadow .2s ease;
}
.tc-p-brand-pill:hover { transform: translateY(-3px); box-shadow: 0 12px 22px rgba(0,0,0,.35); }
.tc-p-brand-pill img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 575.98px) {
    .tc-p-brand-pill { width: 120px; height: 72px; padding: 10px; }
}
.tc-p-brand-cta-row { display: flex; justify-content: center; margin-top: 28px; }
.tc-p-brand-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13.5px; color: #fff; text-decoration: none; transition: gap .2s ease, color .2s ease; }
.tc-p-brand-cta:hover { gap: 12px; color: var(--tc-p-orange); }

/* ---- Reseñas: tarjeta de calificación (portada de /v1) a la izquierda +
   el marquee horizontal que ya tenía esta versión a la derecha. ---- */
.tc-p-reviews-layout { display: grid; grid-template-columns: 280px 1fr; gap: 24px; align-items: center; }
@media (max-width: 767.98px) { .tc-p-reviews-layout { grid-template-columns: 1fr; } }
.tc-p-reviews-summary {
    background: #101018;
    border: 1px solid #1f1f2b;
    color: #fff;
    border-radius: 18px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
.tc-p-reviews-summary-icon { height: 40px; width: 40px; margin-bottom: 14px; }
.tc-p-reviews-summary-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #9a9aab; margin: 0 0 6px; }
.tc-p-reviews-summary-score { font-size: 48px; font-weight: 800; line-height: 1; color: #fff; }
.tc-p-reviews-summary-stars { color: var(--tc-p-orange); font-size: 16px; margin: 8px 0 6px; }
.tc-p-reviews-summary-count { font-size: 12px; color: #9a9aab; margin: 0 0 20px; }
.tc-p-reviews-summary-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 700; color: #fff;
    border: 1px solid #1f1f2b;
    border-radius: 999px;
    padding: 8px 16px;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tc-p-reviews-summary-link:hover { background: var(--tc-p-orange); border-color: var(--tc-p-orange); color: #fff; }

/* ---- Reseñas: marquee horizontal continuo (reales, duplicadas una vez
   para el loop sin salto), se pausa al pasar el mouse para poder leer. ---- */
.tc-p-review-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tc-p-review-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: tcPReviewMarquee 42s linear infinite;
}
.tc-p-review-marquee:hover .tc-p-review-track { animation-play-state: paused; }

.tc-p-review-mcard {
    flex: 0 0 320px;
    background: var(--tc-p-surface);
    border: 1px solid var(--tc-p-border);
    border-radius: 18px;
    padding: 24px 26px;
    transition: border-color .2s ease;
}
.tc-p-review-mcard:hover { border-color: rgba(255,92,0,.35); }
.tc-p-review-quote-icon { display: block; font-size: 22px; color: var(--tc-p-orange); opacity: .55; margin-bottom: 8px; }
.tc-p-review-stars { color: var(--tc-p-orange); font-size: 13px; margin-bottom: 10px; }
.tc-p-review-mcard p {
    font-size: 13.5px; line-height: 1.6; color: #d6d6de; margin: 0 0 12px;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
    min-height: calc(13.5px * 1.6 * 4);
}
.tc-p-review-author { display: flex; align-items: center; gap: 10px; }
.tc-p-review-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--tc-p-border); }
.tc-p-review-avatar--fallback { display: flex; align-items: center; justify-content: center; background: var(--tc-p-bg); color: var(--tc-p-text-dim); font-size: 14px; }
.tc-p-review-author span { font-size: 12.5px; font-weight: 700; color: var(--tc-p-text-dim); }

@keyframes tcPReviewMarquee { to { transform: translateX(-50%); } }

@media (max-width: 575.98px) {
    .tc-p-review-mcard { flex-basis: 78vw; }
}

.tc-p-steps, .tc-p-solution { position: relative; }
.tc-p-steps > *:not(.tc-p-steps-aura), .tc-p-solution > *:not(.tc-p-steps-aura):not(.tc-p-solution-photo-wrap) { position: relative; z-index: 1; }

/* Prueba: mismo fondo con foto que "El problema" — pedido explícito "a ver
   qué tal se ve", reemplaza el punteado de .tc-p-steps-aura mientras se
   evalúa. Mismo tratamiento completo que esa sección: fuera de .container
   (ver index.blade.php) para llegar a los bordes, y los mismos degradados
   arriba/abajo para fundirse con el fondo normal de la página. */
.tc-p-steps {
    background-image: url('/img/redesign/v3/problem-bg-dark.jpg');
    background-size: cover;
    background-position: center bottom;
}
/* En claro la foto (sobre todo el tramo naranja del camino) tapaba el
   texto de los pasos — un velo claro semitransparente encima la atenúa sin
   perderla del todo. */
:root[data-theme="light"] .tc-p-steps {
    background-image: linear-gradient(rgba(247,247,250,.18), rgba(247,247,250,.18)), url('/img/redesign/v3/problem-bg-light.jpg');
}
.tc-p-steps::before,
.tc-p-steps::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    z-index: 0;
    pointer-events: none;
}
.tc-p-steps::before {
    top: 0;
    height: 90px;
    background: linear-gradient(to bottom, var(--tc-p-bg), transparent);
}
.tc-p-steps::after {
    bottom: 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent, var(--tc-p-bg));
}
.tc-p-steps .tc-p-steps-aura { display: none; }
.tc-p-steps-aura {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: radial-gradient(currentColor 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    color: var(--tc-p-orange);
    opacity: .3;
    -webkit-mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 35%, transparent 100%);
    mask-image: radial-gradient(ellipse 65% 65% at 50% 50%, #000 35%, transparent 100%);
    animation: tc-p-dots-drift 30s linear infinite;
}
@keyframes tc-p-dots-drift {
    from { background-position: 0 0; }
    to { background-position: 260px 130px; }
}
@media (prefers-reduced-motion: reduce) {
    .tc-p-steps-aura { animation: none; }
}

.tc-p-steps-title {
    font-family: 'MontBold';
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    margin: 6px 0 10px;
}
.tc-p-steps-sub {
    position: relative;
    font-size: 14px; letter-spacing: .3px; text-transform: uppercase; color: var(--tc-p-text-dim); margin: 0 0 22px;
}
/* Línea divisora corta bajo el subtítulo, separando el encabezado de la
   sección de la grilla de pasos. */
.tc-p-steps-sub::after {
    content: '';
    display: block;
    width: 46px;
    height: 2px;
    margin: 16px auto 0;
    background: var(--tc-p-orange);
    opacity: .4;
}

.tc-p-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin: 56px 0 44px;
}
.tc-p-step { text-align: center; }
.tc-p-step-text { position: relative; }
/* Línea divisora vertical entre columnas (no en la última) — solo en
   escritorio, donde la grilla es de 4 columnas en una sola fila. Vive en
   .tc-p-step-text (num+título+párrafo), no en toda la columna, así siempre
   cubre exactamente el bloque de texto sin importar cuántas líneas ocupe
   cada párrafo (antes usaba offsets fijos en px que no calzaban igual en
   las 4 columnas). */
@media (min-width: 768px) {
    .tc-p-step:not(:last-child) .tc-p-step-text::after {
        content: '';
        position: absolute;
        top: 0; bottom: 0; right: -14px;
        width: 1px;
        background: var(--tc-p-orange);
        opacity: .4;
    }
}
.tc-p-step-stage {
    position: relative;
    height: 190px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin-bottom: 22px;
}
/* Base ovalada bajo cada icono: un disco plano permanente (no solo un
   destello al aterrizar), estilo "pedestal" — un anillo claro arriba y una
   sombra suave abajo dan la sensación de una plataforma vista en
   perspectiva, sin depender de que la imagen del icono ya traiga su propia
   base dibujada. */
.tc-p-step-platform {
    position: absolute;
    bottom: 4px; left: 50%;
    transform: translateX(-50%);
    width: 68%;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(rgba(255,124,42,.16), rgba(255,124,42,.16)) padding-box,
                radial-gradient(ellipse at center, rgba(255,124,42,.4) 0%, rgba(255,124,42,0) 75%);
    border: 1px solid rgba(255,124,42,.35);
    box-shadow: 0 10px 18px -6px rgba(0,0,0,.35);
    transition: background .5s ease, transform .5s ease, box-shadow .5s ease;
}
.tc-p-step-platform.is-hit {
    background: linear-gradient(rgba(255,124,42,.5), rgba(255,124,42,.5)) padding-box,
                radial-gradient(ellipse at center, rgba(255,124,42,.9) 0%, rgba(255,124,42,.15) 75%);
    transform: translateX(-50%) scale(1.15);
    box-shadow: 0 10px 22px -4px rgba(255,124,42,.5);
}
.tc-p-step-icon {
    position: relative;
    z-index: 1;
    height: 100%;
    max-width: 92%;
    width: auto;
    opacity: 0;
    transform: translateY(-160px);
    filter: drop-shadow(0 18px 14px rgba(60,30,10,.22));
}
.tc-p-step-icon.is-landed {
    animation: tc-p-step-drop 1.1s ease-out forwards;
}
@keyframes tc-p-step-drop {
    0% { opacity: 0; transform: translateY(-160px); }
    45% { opacity: 1; }
    58% { transform: translateY(0); }
    72% { transform: translateY(-26px); }
    84% { transform: translateY(0); }
    92% { transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}
.tc-p-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--tc-p-orange);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 12px;
}
.tc-p-step h3 { font-family: 'MontBold'; font-size: 1.1rem; margin: 0 0 8px; }
.tc-p-step p { font-size: .85rem; line-height: 1.5; color: var(--tc-p-text-dim); margin: 0 auto; max-width: 240px; }
/* El gris tenue de siempre se pierde contra la foto de fondo de esta
   sección (busy, tonos claros) — un tono más oscuro y sólido aquí, sin
   afectar el resto de las descripciones del sitio que sí quedan sobre un
   fondo plano. */
.tc-p-steps .tc-p-step p { color: rgba(255,255,255,.85); text-shadow: 0 1px 3px rgba(0,0,0,.5); }
:root[data-theme="light"] .tc-p-steps .tc-p-step p { color: #2b2b33; text-shadow: none; }
/* El celular (paso 1) es más angosto que las otras 3 fotos (aspecto vertical
   vs. horizontal) — con la misma altura de 100% del stage se veía bastante
   más chico. max-height no sirve aquí porque solo puede achicar, nunca
   agrandar, un height:100% ya fijado — hay que subir el height real. La
   plataforma (.tc-p-step-stage tiene overflow visible) permite que crezca
   por encima del stage sin recortarse. */
.tc-p-step:first-child .tc-p-step-icon { height: 150%; max-width: none; width: auto; top: 14px; }

.tc-p-steps-cta { text-align: center; }
.tc-p-steps-btn {
    display: inline-flex; align-items: center; gap: 12px;
    border: none; border-radius: 999px;
    background: linear-gradient(135deg, #ff7a2e, var(--tc-p-orange));
    color: #fff;
    font-family: 'MontBold';
    font-size: 18px;
    padding: 14px 40px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(255,92,0,.35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.tc-p-steps-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(255,92,0,.45); }

@media (prefers-reduced-motion: reduce) {
    .tc-p-step-icon, .tc-p-step-icon.is-landed { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 991.98px) {
    /* iPad (768-991px) también entra aquí a propósito: 4 columnas
       apretadas en ese ancho se veían muy chicas, 2 por fila (igual que
       celular) aprovecha mejor el espacio. */
    .tc-p-steps-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; }
    .tc-p-step-stage { height: 140px; }
}

/* ---- Por qué elegirnos: copy + grid de razones a la izquierda, llanta
   que entra girando (borrosa -> nítida) a la derecha (solution-tire.js). ---- */
.tc-p-solution { position: relative; overflow: hidden; }
.tc-p-solution-copy { max-width: 660px; }
.tc-p-solution-lead { font-size: .95rem; line-height: 1.6; color: var(--tc-p-text-dim); margin: 14px 0 32px; max-width: 600px; }
.tc-p-solution-reasons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; max-width: 660px; }
.tc-p-reason {
    background: rgba(255,255,255,.05);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: 18px 16px;
}
:root[data-theme="light"] .tc-p-reason {
    background: rgba(255,255,255,.55);
    border-color: rgba(0,0,0,.08);
}
.tc-p-reason-icon {
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(255,92,0,.12);
    border: 1px solid rgba(255,92,0,.25);
    display: flex; align-items: center; justify-content: center;
    color: var(--tc-p-orange);
    font-size: 22px;
    margin-bottom: 14px;
}
.tc-p-reason h3 { font-size: .95rem; font-weight: 800; margin: 0 0 4px; }
.tc-p-reason p { font-size: .8rem; line-height: 1.5; color: var(--tc-p-text-dim); margin: 0; }
.tc-p-reason { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease, background-color .3s ease, border-color .3s ease; }
.tc-p-reason.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .tc-p-reason { transition: none; opacity: 1; transform: none; }
}

.tc-p-stats-row--inline { justify-content: flex-start; gap: 32px; margin-bottom: 28px; }
.tc-p-stats-row--inline .tc-p-stat { align-items: flex-start; text-align: left; }
.tc-p-stats-row--inline .tc-p-stat-num { font-size: 28px; }
.tc-p-stats-row--inline .tc-p-stat-sep { height: 40px; }

.tc-p-solution-photo-wrap {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 62vw;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
    z-index: 0;
}
.tc-p-solution-photo-wrap::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 8%; bottom: 8%;
    left: -6%; right: -4%;
    background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    color: var(--tc-p-orange);
    opacity: .25;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 75%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 30%, #000 75%, transparent 100%);
}
.tc-p-solution-photo {
    position: relative;
    z-index: 1;
    height: auto;
    max-height: 900px;
    width: auto;
    max-width: 62vw;
    object-fit: contain;
    object-position: bottom right;
    filter: drop-shadow(-20px 20px 30px rgba(0,0,0,.35));
}
@media (max-width: 991.98px) {
    .tc-p-solution { padding-bottom: 32px; }
    .tc-p-solution-reasons { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
    .tc-p-solution-photo-wrap {
        position: relative;
        width: 100%;
        margin-top: 28px;
        justify-content: flex-end;
        padding-right: 0;
    }
    .tc-p-solution-photo-wrap::before {
        top: 10%; bottom: 10%;
        left: 4%; right: 46%;
        transform: none;
        width: auto; height: auto; max-width: none; max-height: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 65%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 65%, transparent 100%);
    }
    .tc-p-solution-photo { max-width: 86vw; max-height: 640px; }
}
/* Celular: menos aire arriba de la foto. solution-photo.webp trae ~16% de
   transparencia arriba (el contenido empieza en 211 de 1286px) que se veía
   como hueco bajo las cifras — el margen negativo se lo come. Abajo trae
   ~13% transparente que se deja tal cual: ahí cae la sombra (drop-shadow)
   sin que el overflow:hidden de la sección la corte, más un poco de aire
   antes de "Elige cómo la recibes". */
@media (max-width: 767.98px) {
    .tc-p-solution { padding-bottom: 20px; }
    .tc-p-solution-photo-wrap { margin-top: -56px; align-items: flex-start; }
    .tc-p-solution .container { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .tc-p-solution-reasons { grid-template-columns: repeat(3, 1fr); max-width: none; margin-left: 0; margin-right: 0; }
    .tc-p-solution-photo { max-width: 96vw; max-height: 900px; }
}
@media (max-width: 575.98px) {
    .tc-p-stats-row--inline { flex-wrap: wrap; justify-content: center; gap: 20px; }
    .tc-p-stats-row--inline .tc-p-stat { align-items: center; text-align: center; }
}

/* ---- Preguntas frecuentes: acordeón (Bootstrap collapse) + llanta que
   entra pasando detrás de las tarjetas y se acomoda a la izquierda
   (faq-tire.js). ---- */
.tc-p-faq-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; }
.tc-p-faq-intro { position: sticky; top: 112px; align-self: start; padding-bottom: 40px; }
@media (max-width: 1024px) {
    .tc-p-faq-intro { position: static; }
}
.tc-p-faq-badges { display: flex; flex-wrap: nowrap; gap: 14px; margin: 24px 0 28px; }
.tc-p-faq-badge { flex: 1 1 0; min-width: 0; }
.tc-p-faq-badge span { white-space: normal; }
.tc-p-faq-badge { display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 700; color: var(--tc-p-text-dim); }
.tc-p-faq-badge i { color: var(--tc-p-orange); font-size: 18px; }
@media (max-width: 575.98px) {
    .tc-p-faq-badges { flex-direction: column; flex-wrap: wrap; gap: 10px; }
}

.tc-p-faq-tire-wrap { position: relative; height: 300px; margin-top: 24px; z-index: 0; }
.tc-p-faq-tire-wrap::before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 6%; bottom: 6%;
    left: -12%; width: 55%;
    background-image: radial-gradient(currentColor 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    color: var(--tc-p-orange);
    opacity: .25;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 65%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 35%, #000 65%, transparent 100%);
}
.tc-p-faq-tire {
    position: absolute;
    z-index: 2;
    left: 18%; bottom: 0;
    width: 100%;
    max-width: 300px;
    height: auto;
    opacity: 0;
    filter: drop-shadow(0 20px 24px rgba(0,0,0,.3)) blur(10px);
    transform: translateX(620px) rotate(0deg) scale(.9);
    transition: opacity 1.8s ease, filter 1.8s ease, transform 2.6s cubic-bezier(.22,.61,.36,1);
}
.tc-p-faq-tire.is-in {
    opacity: 1;
    filter: drop-shadow(0 20px 24px rgba(0,0,0,.3)) blur(0);
    transform: translateX(0) rotate(-360deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .tc-p-faq-tire { transition: none; }
}

/* .tc-p-faq-accordion y .tc-p-faq-num (el acordeón puro, sin la decoración
   de esta página) ahora viven en navbar-footer.css — los reusa también
   /preguntas-frecuentes (ver RedesignHomeController::faqPage()). */
@media (max-width: 1024px) {
    .tc-p-faq-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 767.98px) {
    /* Mismo padding lateral que la sección de blog y el resto de secciones
       con .container — esta no trae .container propio y quedaba pegada a
       los bordes. */
    .tc-p-faq-grid { padding-left: 20px; padding-right: 20px; }
}

/* ---- El problema: 4 tarjetas de dudas alrededor de una llanta que "rueda"
   desde la derecha (mismo truco que .tc-p-faq-tire), justo antes de
   "Nuestra solución". Las tarjetas usan el mismo sistema de revelado
   escalonado que Ofertas/Modelos ([data-reveal-grid]/[data-reveal-card] +
   card-reveal.js, ver index.css más arriba) — solo se les agrega
   posición absoluta y un flotado continuo en .tc-p-problem-card-float una
   vez visibles. ---- */
/* Fondo con foto real (una por tema) en vez del patrón de puntos que tenía
   antes solo detrás de la llanta — ver theme-toggle.js, que alterna
   [data-theme="light"] en <html>; sin ese atributo el sitio está en oscuro
   por default. */
.tc-p-problem {
    position: relative;
    padding: 130px 0 100px;
    background-image: url('/img/redesign/v3/problem-bg-dark.jpg');
    background-size: cover;
    /* Las fotos traen un cielo liso blanco en su tercio superior (parte del
       diseño) — con "bottom" se prioriza recortar esa franja en vez del
       camino/dunas, que es la parte que sí debe verse. */
    background-position: center bottom;
}
:root[data-theme="light"] .tc-p-problem {
    background-image: url('/img/redesign/v3/problem-bg-light.jpg');
}
/* Se sale de .container para que la foto cubra todo el ancho — estos
   degradados (arriba y abajo) la funden con el fondo normal de la página
   (--tc-p-bg, distinto en claro/oscuro) en vez de cortar en seco contra
   "Nuestra solución" o dejar ver el borde de la franja blanca del cielo. */
.tc-p-problem::before,
.tc-p-problem::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    pointer-events: none;
}
.tc-p-problem::before {
    top: 0;
    height: 90px;
    background: linear-gradient(to bottom, var(--tc-p-bg), transparent);
}
.tc-p-problem::after {
    bottom: 0;
    height: 160px;
    background: linear-gradient(to bottom, transparent, var(--tc-p-bg));
}
/* align-items:center (antes "start") baja el título para que quede a la
   altura media de las tarjetas flotantes en vez de pegado arriba del todo
   del grid — pedido explícito, se veía muy alto respecto a la llanta/tarjetas. */
.tc-p-problem-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; }
.tc-p-problem-title {
    font-family: 'MontBold';
    font-size: clamp(1.8rem, 3.2vw, 2.5rem);
    line-height: 1.18;
    text-transform: uppercase;
    margin: 10px 0 16px;
}
.tc-p-problem-sub { font-size: 14px; line-height: 1.6; color: var(--tc-p-text-dim); max-width: 320px; margin: 0; }

.tc-p-problem-visual { position: relative; min-height: 480px; }
.tc-p-problem-tire-wrap {
    position: absolute;
    left: 50%; top: 62%;
    transform: translate(-50%, -50%);
    width: 250px;
    z-index: 0;
}
.tc-p-problem-tire {
    width: 100%; height: auto;
    opacity: 0;
    filter: drop-shadow(0 20px 24px rgba(0,0,0,.3)) blur(10px);
    transform: translateX(420px) rotate(0deg) scale(.9);
    transition: opacity 1.8s ease, filter 1.8s ease, transform 2.6s cubic-bezier(.22,.61,.36,1);
}
.tc-p-problem-tire.is-in {
    opacity: 1;
    filter: drop-shadow(0 20px 24px rgba(0,0,0,.3)) blur(0);
    transform: translateX(0) rotate(-360deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
    .tc-p-problem-tire { transition: none; }
}

/* La tarjeta completa (fondo + sombra incluidos) es la que flota, no solo
   su texto — por eso se le anula el transform del sistema de revelado
   genérico ([data-reveal-card], pensado para un slide-up de entrada) y en
   su lugar usa opacidad para aparecer y una animación propia para el
   flotado continuo, que si sigue usando "transform" pero ya sin pelear con
   ninguna transición. */
.tc-p-problem-card,
[data-reveal-grid].is-in .tc-p-problem-card {
    transform: none;
}
.tc-p-problem-card {
    --tilt: 0deg;
    position: absolute;
    width: 250px;
    max-width: 42vw;
    background: #1c1c22;
    border-radius: 18px;
    padding: 18px 20px;
    box-shadow: 0 18px 34px rgba(255,92,0,.4);
    z-index: 1;
    animation: tc-p-problem-float 4s ease-in-out infinite;
    /* El multiplicador genérico de [data-reveal-card] (70ms por tarjeta) las
       hacía aparecer casi juntas — para 4 tarjetas suma apenas 210ms de
       diferencia entre la 1a y la última, terminan casi antes de que el
       usuario termine de hacer scroll hasta verlas. 220ms las separa lo
       suficiente para que se note que salen una por una. */
    transition-delay: calc(var(--i, 0) * 220ms);
}
/* Blanca solo en modo claro — por default (sin [data-theme="light"]) el
   sitio está en oscuro, así que la tarjeta usa fondo oscuro + texto claro
   a juego con el resto de la sección. */
:root[data-theme="light"] .tc-p-problem-card { background: #fff; }
:root[data-theme="light"] .tc-p-problem-card h3 { color: #16161c; }
:root[data-theme="light"] .tc-p-problem-card p { color: #6b7280; }
:root[data-theme="light"] .tc-p-problem-card-icon { background: #fdfbf8; color: #16161c; }
/* Un pequeño giro fijo por tarjeta (no todas perfectamente horizontales),
   guardado en --tilt para que conviva con la animación de flotado — ver
   keyframes más abajo. */
.tc-p-problem-card--1 { left: 0; top: 0; --tilt: -4deg; }
.tc-p-problem-card--2 { right: 0; top: 4%; --tilt: 3deg; animation-delay: .9s; }
.tc-p-problem-card--3 { left: -10%; bottom: 0; --tilt: 2deg; animation-delay: .5s; }
.tc-p-problem-card--4 { right: 6%; bottom: -4%; --tilt: -3deg; animation-delay: 1.4s; }

@keyframes tc-p-problem-float {
    0%, 100% { transform: rotate(var(--tilt)) translateY(0); }
    50% { transform: rotate(var(--tilt)) translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
    .tc-p-problem-card { animation: none; transform: rotate(var(--tilt)); }
}

.tc-p-problem-card-icon {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 62px; height: 62px;
    border-radius: 50%;
    background: #2c2c34;
    box-shadow: 0 10px 22px rgba(0,0,0,.3);
    color: #fff;
    font-size: 22px;
    margin-bottom: 14px;
}
.tc-p-problem-card-badge {
    position: absolute; bottom: -4px; right: -4px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--tc-p-orange);
    color: #fff;
    font-size: 13px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2.5px solid #1c1c22;
    box-shadow: 0 3px 8px rgba(0,0,0,.25);
}
:root[data-theme="light"] .tc-p-problem-card-badge { border-color: #fff; }
.tc-p-problem-card h3 { font-size: .95rem; font-weight: 800; color: #fff; margin: 0 0 6px; }
.tc-p-problem-card p { font-size: .8rem; line-height: 1.45; color: rgba(255,255,255,.6); margin: 0; }

@media (max-width: 767.98px) {
    .tc-p-problem-grid { grid-template-columns: 1fr; }
    .tc-p-problem-visual { min-height: 0; display: flex; flex-direction: column; gap: 16px; align-items: center; }
    .tc-p-problem-tire-wrap { display: none; }
    /* Más angostas que la pantalla (antes 92%, casi todo el ancho) e
       intercaladas: 1ª y 3ª pegadas a la izquierda, 2ª y 4ª a la derecha. */
    .tc-p-problem-card { position: static; width: 78%; max-width: 320px; }
    .tc-p-problem-card--1, .tc-p-problem-card--3 { align-self: flex-start; }
    .tc-p-problem-card--2, .tc-p-problem-card--4 { align-self: flex-end; }
    .tc-p-problem-card-float { animation: none; }
    /* En moviles, 64px (fin de "Modelos más vendidos") + 130px (inicio de
       "El problema") dejaban un salto muy grande entre ambas secciones. */
    #showroom.tc-p-section { padding-bottom: 32px; }
    .tc-p-problem { padding-top: 56px; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    /* iPad: 2 tarjetas por fila (igual que "Cómo funciona" en este mismo
       ancho) en vez de apiladas de a una — aprovecha mejor el ancho de
       tablet sin llegar al posicionamiento absoluto/flotante de escritorio. */
    .tc-p-problem-grid { grid-template-columns: 1fr; }
    .tc-p-problem-visual { min-height: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .tc-p-problem-tire-wrap { display: none; }
    .tc-p-problem-card { position: static; width: 100%; max-width: none; }
    .tc-p-problem-card-float { animation: none; }
}

/* ---- Servicios: banda full-bleed de 2 columnas (foto + overlay de color +
   texto en blanco), mismo lenguaje visual que .tc-rd2-about de /v2 —
   theme-independent a propósito, como esa: es una banda de alto contraste
   sobre foto, no depende de si el sitio está en modo claro u oscuro. ---- */
.tc-p-services-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.tc-p-services-split-col {
    position: relative;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.tc-p-services-split-overlay { position: absolute; inset: 0; }
.tc-p-services-split-col--brand .tc-p-services-split-overlay { background: linear-gradient(100deg, rgba(255, 96, 0, .92) 0%, rgba(255, 96, 0, .78) 45%, rgba(255, 96, 0, .45) 100%); }
.tc-p-services-split-col--dark .tc-p-services-split-overlay { background: linear-gradient(100deg, rgba(11, 11, 11, .92) 0%, rgba(11, 11, 11, .78) 45%, rgba(11, 11, 11, .45) 100%); }
.tc-p-services-split-content { position: relative; z-index: 1; color: #fff; padding: 56px 64px; max-width: 480px; }
.tc-p-services-split-tag { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(255,255,255,.75); margin-bottom: 10px; }
.tc-p-services-split-content h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: 14px; }
.tc-p-services-split-content p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.85); margin-bottom: 18px; }
.tc-p-services-split-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 13px; color: #fff; transition: gap .2s ease; }
.tc-p-services-split-col:hover .tc-p-services-split-cta { gap: 12px; }
@media (max-width: 767.98px) {
    /* grid-auto-rows:1fr — apiladas, las dos tarjetas miden lo mismo (la
       más alta manda) en vez de cada una el alto de su texto. */
    .tc-p-services-split { grid-template-columns: 1fr; grid-auto-rows: 1fr; min-height: 0; }
    .tc-p-services-split-content { padding: 40px 24px; max-width: none; }
}

/* ---- Foto "expand": la frase vive dentro de la foto; al entrar al viewport
   la tarjeta crece hasta abarcar todo el ancho (IntersectionObserver +
   transición CSS — más confiable que un sticky con cálculo continuo de
   scroll). ---- */
/* Ya no "crece" al entrar al viewport (pedido explícito: dejarla estática,
   siempre a pantalla completa, sin sombra debajo). El fondo usa
   background-attachment:fixed — la foto se queda fija en su lugar en la
   ventana mientras el resto de la página se desplaza encima, el efecto de
   "fondo estático" pedido. iOS/Safari no soporta bien fixed sobre un
   elemento que no sea <body>, así que se desactiva en móvil (vuelve a un
   scroll normal, sin romper el layout). */
.tc-p-expand-photo { padding: 30px 0 60px; display: flex; justify-content: center; }
.tc-p-expand-photo-frame {
    position: relative;
    /* Antes ocupaba todo el ancho de la ventana (100vw) y 92vh de alto: muy grande.
       Ahora es una tarjeta contenida, con esquinas redondeadas. */
    width: min(1240px, calc(100% - 48px));
    height: 66vh;
    min-height: 420px;
    border-radius: 22px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
@media (max-width: 991.98px) {
    .tc-p-expand-photo-frame { background-attachment: scroll; }
}
.tc-p-expand-photo-scrim { position: absolute; inset: 0; background: rgba(7,7,12,.55); }
.tc-p-expand-photo-caption {
    position: absolute; inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,.7);
}
.tc-p-expand-photo-caption h2 { font-size: clamp(1.4rem, 3.6vw, 2.4rem); margin: 6px 0 0; }
.tc-p-expand-photo-caption--left { align-items: flex-start; text-align: left; padding-left: 60px; }
.tc-p-expand-photo-caption--left p { max-width: 420px; font-size: 15px; color: rgba(255,255,255,.75); margin: 14px 0 20px; }
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Tablet: caía en el 92vh de escritorio (la regla de celular corta en
       767.98px) — mismo criterio, menos vacío arriba/abajo del texto. */
    .tc-p-expand-photo { padding: 20px 0 40px; }
    .tc-p-expand-photo-frame { height: 56vh; min-height: 400px; }
}
@media (max-width: 767.98px) {
    /* Sección de camión en celular: antes 72vh de foto (mucho vacío
       arriba y abajo del texto) y 30/70px de margen de sección. */
    .tc-p-expand-photo { padding: 16px 0 32px; }
    /* min-height de 440px (no 340): con el texto de cotización el botón se cortaba abajo. */
    .tc-p-expand-photo-frame { width: calc(100% - 32px); height: 56vh; min-height: 440px; border-radius: 18px; }
    .tc-p-expand-photo-caption { padding: 20px; }
    .tc-p-expand-photo-caption--left { padding-left: 24px; }
}

/* ---- Blog: collage de tarjetas con foto de fondo, portado de /v2
   (reemplaza el destacado + lista editorial que tenía antes) ---- */
.tc-p-blog-collage {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: 200px 200px;
    gap: 20px;
}
.tc-p-blog-card--large { grid-column: 1; grid-row: 1 / 3; }
.tc-p-blog-collage > .tc-p-blog-card:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.tc-p-blog-collage > .tc-p-blog-card:nth-of-type(3) { grid-column: 3; grid-row: 1; }
.tc-p-blog-collage > .tc-p-blog-card:nth-of-type(4) { grid-column: 2 / 4; grid-row: 2; }
.tc-p-blog-card {
    position: relative;
    display: block;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    text-decoration: none;
    color: #fff;
    transition: transform .2s ease;
}
.tc-p-blog-card:hover { transform: translateY(-3px); color: #fff; }
.tc-p-blog-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,7,12,0) 15%, rgba(7,7,12,.95) 100%); }
.tc-p-blog-card-content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 18px; }
.tc-p-blog-date { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.8); margin-bottom: 6px; }
.tc-p-blog-card h3 { font-size: 15px; font-weight: 800; margin: 0 0 8px; line-height: 1.3; color: #fff; }
.tc-p-blog-card--large h3 { font-size: 19px; }
.tc-p-blog-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--tc-p-orange); }
/* Notas del newsletter sin foto (imagen_url vacío en la BD) — sin esto la
   tarjeta quedaba transparente sobre el fondo oscuro de la página y el
   título parecía flotar fuera de la tarjeta en vez de dentro de su propia
   franja, como sí pasa en las que sí tienen foto. */
.tc-p-blog-card--no-photo {
    background: linear-gradient(155deg, #2a2a35, #111116);
    display: flex;
    align-items: flex-end;
}
.tc-p-blog-card-fallback-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 64px;
    color: rgba(255,255,255,.06);
}
@media (max-width: 767.98px) {
    .tc-p-blog-collage { grid-template-columns: 1fr; grid-template-rows: none; }
    .tc-p-blog-card--large,
    .tc-p-blog-collage > .tc-p-blog-card:nth-of-type(2),
    .tc-p-blog-collage > .tc-p-blog-card:nth-of-type(3),
    .tc-p-blog-collage > .tc-p-blog-card:nth-of-type(4) { grid-column: 1; grid-row: auto; height: 220px; }
    .tc-p-blog-section .tc-p-section-head,
    .tc-p-blog-section .tc-p-blog-collage { padding-left: 20px; padding-right: 20px; }
}

/* ---- Modal progresivo (buscador), tema oscuro ---- */
.tc-rd-progressive-modal--dark .modal-content { background: var(--tc-p-surface); color: #f2f2f5; border: 1px solid var(--tc-p-border); border-radius: 18px; }
.tc-rd-progressive-modal--dark .btn-close { filter: invert(1); }
.tc-rd-progressive-modal--dark .tc-rd-breadcrumb-link { color: var(--tc-p-orange); }
.tc-rd-progressive-modal--dark .tc-rd-option-pill { background: #1a1a24; border-color: var(--tc-p-border); color: #f2f2f5; }
.tc-rd-progressive-modal--dark .tc-rd-option-pill:hover { border-color: var(--tc-p-orange); color: var(--tc-p-orange); }

/* ===== Modo claro: [data-theme="light"] en <html>, manejado por
   theme-toggle.js + localStorage (el estado inicial se aplica antes de
   pintar vía el script inline en @section('headers'), para no parpadear;
   el modo por defecto, sin nada guardado, es el oscuro). El cover (hero) y
   la foto "expand" se quedan siempre oscuros con texto blanco — van sobre
   foto real, no sobre el fondo de la página. El navbar y el fondo del resto
   del sitio sí cambian con el tema. ===== */
:root[data-theme="light"] .tc-p-shiny-body {
    /* background-image (no el shorthand "background") para no resetear
       background-clip/-size, que es justo lo que recorta el degradado a la
       forma del texto — con el shorthand se veía como un bloque de color
       sólido en vez de texto. */
    background-image: linear-gradient(90deg, #16161c 0%, var(--tc-p-orange) 35%, #16161c 55%, var(--tc-p-orange) 80%, #16161c 100%);
}

:root[data-theme="light"] .tc-p-stat-num { color: #16161c; }

:root[data-theme="light"] .tc-p-brand-pill { box-shadow: 0 1px 4px rgba(0,0,0,.06); }
:root[data-theme="light"] .tc-p-brand-pill:hover { box-shadow: 0 12px 22px rgba(0,0,0,.12); }
:root[data-theme="light"] .tc-p-brand-cta { color: #16161c; }


:root[data-theme="light"] .tc-p-review-mcard { box-shadow: 0 2px 10px rgba(0,0,0,.04); }
:root[data-theme="light"] .tc-p-review-mcard p { color: #3f3f48; }

:root[data-theme="light"] .tc-p-depth-card { box-shadow: 0 30px 60px rgba(0,0,0,.25); }

:root[data-theme="light"] .tc-p-promos-countdown-unit { box-shadow: 0 2px 8px rgba(0,0,0,.05); }

/* El resto del navbar en modo claro (.is-scrolled y variante transparente
   sobre el hero) y todo el footer (.tc-p-footer*, banner de cookies) ahora
   viven en navbar-footer.css, compartido con todo el sitio. Solo se queda
   aquí el "glass" transparente del navbar/countdown/botón sobre el hero,
   porque .tc-p-countdown-box y .tc-p-hero-search-btn2--ghost son propios de
   esta página. */
:root[data-theme="light"] .tc-p-countdown-box,
:root[data-theme="light"] .tc-p-hero-rating-card,
:root[data-theme="light"] .tc-p-hero-search-btn2--ghost {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.4);
    backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
:root[data-theme="light"] .tc-p-hero-search-btn2--ghost:hover { border-color: rgba(255,255,255,.7); }
/* Subir la opacidad del vidrio (probado en varias variantes) seguía sin
   leerse bien contra fotos muy claras/brillantes — en vez de eso, sombra de
   texto en el contenido de estas tarjetas en móvil (ver más abajo, bloque
   @media max-width:767.98px). */

/* ===== Tooltip del nombre completo (tarjetas de "Ofertas" del home) =====
   Se agrega a <body> vía deal-name-tooltip.js y se posiciona con
   position:fixed calculado en JS — no puede vivir dentro de la tarjeta
   porque .tc-p-bestseller-card usa overflow:hidden para recortar la
   llanta que se asoma por la izquierda (position:absolute, left:-34%). */
.tc-full-name-tip {
    display: none;
    position: fixed;
    z-index: 1200;
    max-width: 300px;
    width: max-content;
    background: linear-gradient(155deg, #1c1c24, #101014);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 32px rgba(0,0,0,.35);
    opacity: 0;
    transform: translateY(6px) scale(.97);
    transition: opacity .15s ease, transform .15s ease;
    pointer-events: none;
}
.tc-full-name-tip::before {
    content: '';
    position: absolute;
    left: var(--tc-tip-arrow-x, 50%);
    bottom: -6px;
    width: 12px; height: 12px;
    background: inherit;
    border-right: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 0 0 3px 0;
}
.tc-full-name-tip--flip { transform: translateY(-6px) scale(.97); }
.tc-full-name-tip--flip::before {
    top: -6px; bottom: auto;
    border-right: none; border-bottom: none;
    border-left: 1px solid rgba(255,255,255,.08);
    border-top: 1px solid rgba(255,255,255,.08);
    border-radius: 3px 0 0 0;
}
.tc-full-name-tip--in { opacity: 1; transform: translateY(0) scale(1); }
:root[data-theme="light"] .tc-full-name-tip {
    background: linear-gradient(155deg, #ffffff, #f3f4f6);
    color: #16161c;
    border-color: rgba(0,0,0,.06);
    box-shadow: 0 14px 32px rgba(0,0,0,.14);
}
:root[data-theme="light"] .tc-full-name-tip::before { border-color: rgba(0,0,0,.06); }


/* Cover principal (escritorio): la llanta va anclada a la foto de fondo, que se escala con el ALTO de la pantalla
   (caja de 1920x814 con ancho mínimo = ancho de pantalla), así que en pantallas bajas la llanta se corre a la izquierda
   (su borde queda en ~49.5% del ancho de esa caja) mientras el texto se queda fijo y la última palabra animada
   ("vehículo", la más larga) terminaba encima de la llanta. El tamaño del título se limita para que esa palabra deje
   siempre ≥40px antes de la llanta; en pantallas altas o anchas el límite no aplica y se ve igual que antes.
   12.22 = ancho de "vehículo" en em; 1320px/11px = ancho del contenedor y relleno izquierdo del texto. */
@media (min-width: 992px) {
    .tc-p-hero--alt .tc-p-hero-title {
        font-size: min(3.4em, calc((0.495 * max(100vw, 235.9vh) - 40px - max(0px, (100vw - 1320px) / 2) - 11px) / 12.22)) !important;
    }
}

/* ---- Franja de newsletter (home), antes de las reseñas: foto con velo oscuro, texto a la izquierda ---- */
.tc-p-newsletter {
    position: relative;
    min-height: 340px;
    display: flex; align-items: center;
    background-size: cover; background-position: center;
}
.tc-p-newsletter-scrim { position: absolute; inset: 0; background: rgba(11,11,11,.72); }
.tc-p-newsletter-content { position: relative; z-index: 1; max-width: 520px; padding: 48px 0; color: #fff; }
.tc-p-newsletter-content h2 { font-size: 1.9rem; margin: 6px 0 10px; color: #fff; }
.tc-p-newsletter-content p { font-size: 14px; color: rgba(255,255,255,.8); margin-bottom: 22px; }
.tc-p-newsletter-form { display: flex; gap: 10px; }
.tc-p-newsletter-input {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: 13px 20px;
    color: #fff; font-size: 14px;
}
.tc-p-newsletter-input::placeholder { color: rgba(255,255,255,.6); }
.tc-p-newsletter-input:focus { outline: none; border-color: var(--tc-p-orange); }
.tc-p-newsletter-btn {
    flex: none;
    background: var(--tc-p-orange); color: #fff;
    border: none; border-radius: 999px;
    padding: 13px 26px;
    font-size: 13px; font-weight: 800;
}
.tc-p-newsletter-btn:disabled { opacity: .6; }
.tc-p-newsletter-content .tc-p-newsletter-status { font-size: 13px; margin: 10px 0 0; min-height: 18px; }
.tc-p-newsletter-status.is-success { color: #2ecc71; }
.tc-p-newsletter-status.is-error { color: #ff7b7b; }
@media (max-width: 575.98px) {
    .tc-p-newsletter-form { flex-direction: column; }
}