/* ============================================================
   LAVA — Mantenimiento y Soluciones Industriales
   Sistema visual alineado al catálogo oficial de LAVA:
   navy #001f42 + verde #60a826 (muestreados del catálogo de llantas).
   Regla de elegancia: el verde es ACENTO — etiquetas, filetes, hover.
   La tipografía display va en blanco; la jerarquía se hace con
   escala y peso, no con color.
   ============================================================ */

/* ===== TOKENS ===== */
/* Tema CLARO (solicitado por Gerardo, 2026-08-25): fondo blanco y la
   paleta tomada del logo oficial — navy #001f42 + verde #60a826.
   El hero es la única "isla oscura": redefine estos mismos tokens
   dentro de su bloque, así todo lo que vive adentro se re-tematiza solo. */
:root {
    /* marca */
    --green:      #60a826;          /* verde del logo: filetes, puntos, bordes */
    --green-lt:   #397210;          /* verde para TEXTO sobre claro (AA en los 4 fondos) */
    --green-dk:   #4a8419;          /* fondos verdes que llevan texto blanco */
    --navy:       #001f42;

    /* superficies claras */
    --bg:         #ffffff;
    --bg-2:       #f5f7fa;
    --bg-3:       #e8edf4;
    --surface:    rgba(0,31,66,0.035);
    --surface-h:  rgba(96,168,38,0.075);
    --paper:      #f2f5f9;          /* chips de logos de marcas */

    /* texto */
    --text:       #0b1a2e;          /* casi navy — cuerpo y titulares */
    --muted:      #4c5f78;          /* AA sobre blanco */
    --muted-dim:  #59697f;

    --line:       rgba(0,31,66,0.13);
    --line-h:     rgba(96,168,38,0.5);

    --ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --wrap:       1240px;
    --pad:        32px;

    --font-display: 'Bebas Neue', 'Barlow Condensed', sans-serif;
    --font-cond:    'Barlow Condensed', sans-serif;
    --font-body:    'Space Grotesk', system-ui, sans-serif;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; scroll-padding-top: 90px; }
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }
strong { font-weight: 700; color: var(--text); }
em { font-style: italic; }

.container { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }

/* foco visible y consistente en todo el sitio */
:focus-visible {
    outline: 2px solid var(--green-lt);
    outline-offset: 3px;
    border-radius: 3px;
}

.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--green-dk); color: #fff; padding: 12px 20px;
    font-size: 13px; font-weight: 700; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ===== ANIMACIONES DE ENTRADA ===== */
.reveal-up, .reveal-left, .reveal-right {
    opacity: 0;
    transition: opacity .75s var(--ease), transform .75s var(--ease);
    transition-delay: var(--d, 0ms);
}
.reveal-up    { transform: translateY(30px); }
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px); }
.reveal-up.active, .reveal-left.active, .reveal-right.active {
    opacity: 1; transform: none;
}

/* ===== PIEZAS COMPARTIDAS ===== */
.section-label {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--green-lt);
    margin-bottom: 18px;
}
.section-label::before {
    content: '';
    display: inline-block;
    width: 22px; height: 1px;
    background: var(--green);
    vertical-align: middle;
    margin-right: 10px;
}

/* fondos fotográficos de sección */
.section-photo {
    position: absolute; inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
}

/* botones */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    transition: background .25s var(--ease), border-color .25s var(--ease),
                color .25s var(--ease), transform .25s var(--ease);
}
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--green-dk); transform: translateY(-2px); }
.btn-ghost { border: 1px solid var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--line-h); background: var(--surface-h); }


/* ============================================================
   NAV
   ============================================================ */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    /* El hero ya es claro: el nav usa los tokens del tema desde el arranque
       y no cambia de aspecto al hacer scroll, solo se compacta y se asienta. */
    color: var(--text);
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 20px 0;
    border-bottom: 1px solid transparent;
    transition: padding .35s var(--ease), background .35s var(--ease),
                border-color .35s var(--ease);
}
.nav.scrolled {
    padding: 12px 0;
    background: rgba(255,255,255,0.94);
    box-shadow: 0 1px 20px rgba(0,31,66,0.07);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-color: var(--line);
}
.nav-inner {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--pad);
    display: flex;
    align-items: center;
    gap: 40px;
}
/* Logo oficial que mandó Gerardo (2026-08-25). Arriba el nav flota sobre el
   hero oscuro y usa el wordmark blanco; al hacer scroll cae sobre blanco y
   cambia al wordmark en navy+verde. La esfera se mantiene en ambos. */
.nav-brand { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.brand-mark { height: 36px; width: auto; }
.brand-word { height: 26px; width: auto; }
.brand-word--light { display: none; }   /* el hero ya es claro: siempre va en color */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 34px;
    margin-left: auto;
}
.nav-menu a {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.1px;
    transition: color .2s;
}
.nav-menu a:hover { color: var(--text); }
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--green);
    color: var(--green-lt);
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all .25s var(--ease);
    flex-shrink: 0;
}
.nav-cta:hover { background: var(--green-dk); color: #fff; }
/* El icono anterior eran dos rayitas, la de abajo mas corta. Una persona
   real abrio el sitio y pregunto "¿y donde esta todo eso?" — no lo reconocio
   como menu. Ahora lleva la palabra MENU al lado y tres lineas parejas.
   Aqui el borde SI es honesto: es un boton de verdad. */
.nav-burger {
    display: none;
    align-items: center;
    gap: 9px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 9px 13px;
    margin-left: auto;
    color: var(--text);
    transition: background .25s var(--ease), border-color .25s var(--ease);
}
.burger-ico { display: flex; flex-direction: column; gap: 4px; }
.burger-ico i {
    display: block; height: 2px; width: 19px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger-txt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
/* al abrir, las tres lineas se vuelven una X: dice "esto se cierra" */
.nav-burger[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.nav-burger[aria-expanded="true"] .burger-ico i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .burger-ico i:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .burger-ico i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .burger-ico i { transition: none; } }


/* ============================================================
   HERO
   ============================================================ */
.hero {
    /* Tema claro de principio a fin (Gerardo, 2026-08-25): el hero ya no es
       una isla oscura. La foto va en duotono navy sobre blanco, y un velo
       blanco de izquierda a derecha abre el espacio donde cae el texto. */
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--bg);
}
/* Velo BLANCO en degradado sobre la foto de los tres tractocamiones.
   El propio JPG ya trae el fondo lavado alrededor de los camiones, asi que
   aqui el velo solo protege la legibilidad del texto (izquierda) y se abre
   por completo del centro a la derecha: si se cargara la mano, se apagarian
   justo los camiones, que es lo que el cliente quiere que resalte.

   `right center` es deliberado: el lienzo mide 2100x1200 (proporcion 1.75,
   la del hero en un monitor normal), asi que `cover` casi nunca recorta a lo
   ancho — y cuando lo hace, con `right` se come el lado vacio de la izquierda
   y los tres camiones se quedan completos. Con `left` se perdia el azul. */
.hero-photo {
    background-image:
        linear-gradient(95deg,
            rgba(255,255,255,0.93) 0%,
            rgba(255,255,255,0.84) 26%,
            rgba(255,255,255,0.50) 48%,
            rgba(255,255,255,0.12) 70%,
            rgba(255,255,255,0.00) 100%),
        linear-gradient(to top, var(--bg) 0.5%, transparent 18%),
        url('../assets/backgrounds/bg_hero_trucks.jpg');
    background-position: center, center, right center;
}
/* Entre 721 y 1200 px (ventana partida, laptop chica) los camiones quedan
   proporcionalmente mas grandes y se metian debajo del parrafo. Aqui el velo
   se corre a la derecha: protege la columna de texto sin apagar la chapa. */
@media (min-width: 721px) and (max-width: 1200px) {
    .hero-photo {
        background-image:
            linear-gradient(95deg,
                rgba(255,255,255,0.95) 0%,
                rgba(255,255,255,0.91) 34%,
                rgba(255,255,255,0.66) 56%,
                rgba(255,255,255,0.20) 78%,
                rgba(255,255,255,0.00) 100%),
            linear-gradient(to top, var(--bg) 0.5%, transparent 18%),
            url('../assets/backgrounds/bg_hero_trucks.jpg');
    }
}

.hero-inner {
    position: relative;
    z-index: 2;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 150px var(--pad) 60px;
    width: 100%;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 26px;
}
.hero-eyebrow b { color: var(--green-lt); font-weight: 700; }
.hero-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--green-lt);
    box-shadow: 0 0 10px var(--green);
}
.hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(56px, 8.4vw, 122px);
    line-height: 0.86;
    letter-spacing: 1px;
    max-width: 15ch;
}
/* tercera línea más discreta: jerarquía por escala, no por color */
.hero-title .t-sub {
    display: block;
    font-size: 0.42em;
    letter-spacing: 3.5px;
    color: var(--muted);
    margin-top: 18px;
}
.hero-lead {
    max-width: 54ch;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--muted);
    margin-top: 28px;
}
.hero-lead .slogan {
    display: block;
    color: var(--text);
    font-size: 17px;
    font-style: italic;
    margin-bottom: 12px;
}
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 36px;
}
/* franja de credenciales al pie del hero */
.hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 60px;
    border-top: 1px solid var(--line);
    padding-top: 24px;
    max-width: 860px;
}
.hfact {
    flex: 1 1 auto;
    min-width: 150px;
    padding-right: 28px;
}
.hfact-n {
    display: block;
    font-family: var(--font-cond);
    font-size: 30px;
    font-weight: 900;
    line-height: 1;
    color: var(--text);
}
.hfact-l {
    display: block;
    font-size: 10.5px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muted-dim);
    margin-top: 7px;
}


/* ============================================================
   TICKER — banda discreta de alcance de catálogo
   ============================================================ */
.ticker {
    position: relative;
    z-index: 3;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg-2);
    overflow: hidden;
    padding: 13px 0;
}
.ticker-track { display: flex; width: max-content; animation: tick 55s linear infinite; }
.ticker-track span {
    font-family: var(--font-cond);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--muted-dim);
    white-space: nowrap;
}
.ticker-track .t-sep { color: var(--green-lt); opacity: .7; padding: 0 20px; }
@keyframes tick { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }


/* ============================================================
   NOSOTROS
   ============================================================ */
.about {
    position: relative;
    padding: 120px 0;
    background: var(--bg-2);
    overflow: hidden;
}
.about-photo {
    background-image:
        linear-gradient(100deg, rgba(255,255,255,0.99) 40%, rgba(255,255,255,0.86) 66%, rgba(255,255,255,0.62) 100%),
        url('../assets/backgrounds/bg_truck_hero_light.jpg');
    background-position: center, right center;
    opacity: .85;
}

.about > .container { position: relative; z-index: 1; }
.about-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 76px;
    align-items: start;
}
.about-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 4.6vw, 66px);
    font-weight: 400;
    line-height: 0.98;
    margin-bottom: 26px;
}
.about-title em {
    display: block;
    font-style: normal;
    color: var(--muted);
}
.about-body {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.82;
    margin-bottom: 16px;
    max-width: 58ch;
}
.about-quote {
    display: flex;
    gap: 18px;
    margin-top: 34px;
    align-items: stretch;
}
.about-quote::before {
    content: '';
    width: 2px;
    background: var(--green);
    border-radius: 2px;
    flex-shrink: 0;
}
.about-quote p {
    font-size: 16px;
    color: var(--text);
    font-style: italic;
    line-height: 1.6;
}
.about-quote cite {
    display: block;
    font-style: normal;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muted-dim);
    margin-top: 10px;
}
.about-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.acard {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 22px 18px;
    background: var(--surface);
    box-shadow: 0 1px 2px rgba(0,31,66,.04);
    border-radius: 9px;
    
}

.acard svg { width: 24px; height: 24px; color: var(--green-lt); }
.acard strong { font-size: 13.5px; }
.acard span { font-size: 12px; color: var(--muted); line-height: 1.5; }


/* ============================================================
   CATÁLOGO
   ============================================================ */
.catalog { background: var(--bg); padding: 120px 0 0; }
.catalog-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    margin-bottom: 64px;
}
.catalog-title {
    font-family: var(--font-display);
    font-size: clamp(44px, 5.4vw, 76px);
    font-weight: 400;
    line-height: 0.95;
}
.catalog-desc {
    max-width: 38ch;
    font-size: 14.5px;
    color: var(--muted);
    line-height: 1.7;
    padding-bottom: 6px;
}

/* cabecera fotográfica de cada categoría */
.cat-block { margin-bottom: 8px; }
.cat-media {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 68px 0;
}
/* Tema claro: velo BLANCO sobre la foto. La imagen queda como textura de
   fondo y el texto va en navy, sin la banda oscura que rompia la pagina. */
.cat-media::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(92deg,
        rgba(255,255,255,0.97) 0%, rgba(255,255,255,0.93) 42%, rgba(255,255,255,0.74) 100%);
}
.cat-media { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cat-media-inner {
    position: relative;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--pad);
}
.cat-media h3 {
    font-family: var(--font-display);
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 400;
    line-height: 1;
    margin: 10px 0 12px;
}
.cat-media p {
    max-width: 60ch;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
}

/* lista de productos — rejilla de 3 columnas: etiqueta / contenido / acción.
   Va dentro del contenedor para que no queden huecos muertos a lo ancho. */
.cat-list {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--pad);
}
.cat-item {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    padding: 22px 20px 22px 0;
    border-bottom: 1px solid var(--line);
    position: relative;
    transition: background .25s var(--ease), padding-left .25s var(--ease);
}
.cat-item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 2px;
    background: var(--green);
    transform: scaleY(0);
    transition: transform .3s var(--ease);
}
.cat-item:hover { background: var(--surface); padding-left: 18px; }
.cat-item:hover::before { transform: scaleY(1); }
.cat-item-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--green-lt);
}
.cat-item h4 {
    font-family: var(--font-cond);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.15;
    margin-bottom: 5px;
}
.cat-item p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}
.cat-item-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
    transition: color .25s var(--ease);
}
.cat-item:hover .cat-item-cta { color: var(--green-lt); }
.cat-item-cta svg { transition: transform .25s var(--ease); }
.cat-item:hover .cat-item-cta svg { transform: translateX(4px); }

/* banda CTA reutilizable */
.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    padding: 30px 34px;
    margin: 60px 0;
    background: linear-gradient(100deg, var(--bg-2), var(--bg-3));
    
    border-left: 2px solid var(--green);
    border-radius: 10px;
}
.cta-band strong {
    display: block;
    font-family: var(--font-cond);
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 6px;
}
.cta-band p { font-size: 13.5px; color: var(--muted); max-width: 62ch; line-height: 1.65; }
.cta-pdf { margin: 36px 0 0; }


/* ============================================================
   CATÁLOGO DE LLANTAS — el PDF oficial, navegable
   Las fichas viven en el HTML; el filtro sólo oculta las que no
   aplican, así que sin JS se ven las 18, que es el estado correcto.
   ============================================================ */
.tirecat { max-width: var(--wrap); margin: 0 auto; padding: 44px var(--pad) 0; }

.tirecat-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 26px;
}
.tfilters { display: flex; flex-wrap: wrap; gap: 8px; }
.tfilter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    background: none;
    border: 1px solid var(--line);
    border-radius: 100px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.tfilter span { font-size: 10px; color: var(--muted-dim); }
.tfilter:hover { border-color: var(--line-h); color: var(--text); }
.tfilter.is-on { background: var(--green-dk); border-color: var(--green-dk); color: #fff; }
.tfilter.is-on span { color: rgba(255,255,255,.78); }
.tcount { font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted-dim); }

.tire-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 16px;
    align-items: start;
}
/* La tarjeta completa abre la ficha (ver main.js), por eso vuelve a tener
   respuesta al mouse: aqui el movimiento SI corresponde a algo que se pica. */
.tire {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    box-shadow: 0 1px 2px rgba(0,31,66,.04);
    border-radius: 12px;
    overflow: hidden;
    
}

.tire[hidden] { display: none; }

/* fondo hueso: las llantas vienen recortadas sobre transparente */
.tshot {
    position: relative;
    height: 208px;
    padding: 18px;
    background: var(--paper);
    
    display: flex;
    align-items: center;
    justify-content: center;
}
.tshot img { max-height: 100%; width: auto; object-fit: contain; }
/* ya no hay excepciones: las 18 van recortadas sobre transparente.
   Las 4 que estaban fotografiadas sobre carretera se reemplazaron por
   tomas de estudio el 2026-08-31. */
.tpos {
    position: absolute;
    top: 12px; left: 12px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
}
.tpos-steer { background: var(--navy); }
.tpos-drive   { background: var(--green-dk); }
.tpos-allpos  { background: #1d4e89; }   /* toda posicion */
.tpos-mixed   { background: #6b5b1f; }   /* traccion mixta */
.tpos-trailer { background: #4a4f57; }   /* arrastre */

.tbody { display: flex; flex-direction: column; flex: 1; padding: 20px 20px 22px; }
/* chip claro: los logos de marca son oscuros y no se leen sobre el fondo.
   Usa las versiones de assets/brands/chip/ — recortadas al contenido — para
   que la pastilla abrace la marca; los originales traen tanto margen
   transparente que aquí el logo quedaba diminuto y el chip vacío. */
.tbrand {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 12px;
    background: var(--paper);
    
    border-radius: 5px;
    margin-bottom: 14px;
}
.tbrand-logo { height: 19px; width: auto; max-width: 104px; object-fit: contain; }
.tbrand-txt {
    font-family: var(--font-cond);
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .6px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--navy);
}
.tmodel {
    font-family: var(--font-cond);
    font-size: 27px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .4px;
}
.tsize { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; margin-top: 9px; }
.tsize b { font-size: 14.5px; font-weight: 700; color: var(--green-lt); }
.tsize span { font-size: 12px; color: var(--muted-dim); }
.tapps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.tapps li {
    padding: 4px 10px;
    background: var(--surface);   /* etiqueta, no boton: se llena en vez de contornearse */
    border-radius: 100px;
    font-size: 10px;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--muted);
}

/* ficha técnica: <details> nativo — accesible y funciona sin JS */
.tspec { margin-top: 16px; border-top: 1px solid var(--line); }
.tspec summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 13px;
    list-style: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--muted);
    transition: color .25s var(--ease);
}
.tspec summary::-webkit-details-marker { display: none; }
.tspec summary::after {
    content: '';
    width: 7px; height: 7px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .25s var(--ease);
}
.tspec[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.tspec summary:hover { color: var(--green-lt); }
.tspec-in { padding-top: 16px; }
.tspec-h {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--green-lt);
    margin-bottom: 10px;
}
.tben { list-style: none; display: grid; gap: 7px; margin-bottom: 20px; }
.tben li { position: relative; padding-left: 15px; font-size: 12.5px; color: var(--muted); line-height: 1.55; }
.tben li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--green);
}
.trow {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
}
.trow:last-child { border-bottom: none; }
.trow dt { color: var(--muted-dim); }
.trow dd { text-align: right; font-weight: 600; }
.tnote { margin-top: 12px; font-size: 11.5px; color: var(--muted-dim); line-height: 1.5; }

.tcta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: auto;
    padding: 13px;
    border: 1px solid var(--green);
    border-radius: 6px;
    color: var(--green-lt);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: background .25s var(--ease), color .25s var(--ease);
}
.tspec + .tcta { margin-top: 18px; }
.tcta:hover { background: var(--green-dk); color: #fff; }
.tcta svg { transition: transform .25s var(--ease); }
.tcta:hover svg { transform: translateX(3px); }

.tdisclaimer { margin-top: 24px; max-width: 72ch; font-size: 11.5px; color: var(--muted-dim); line-height: 1.6; }


/* ============================================================
   MARCAS
   ============================================================ */
.brands {
    position: relative;
    padding: 120px 0;
    background: var(--bg-2);
    overflow: hidden;
}
.brands-photo {
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.82) 45%, rgba(245,247,250,0.97) 92%),
        url('../assets/backgrounds/bg_refinery_brands_light.jpg');
    background-position: center, center 22%;
    opacity: .85;
}
.brands > .container { position: relative; z-index: 1; }
.brands-title {
    font-family: var(--font-display);
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 400;
    line-height: 0.98;
    margin-bottom: 14px;
}
.brands-sub { font-size: 14.5px; color: var(--muted); max-width: 56ch; margin-bottom: 46px; }

/* chips de logos: fondo hueso (no blanco puro) y tamaño óptico normalizado */
/* 3 columnas fijas: son 9 marcas y así la rejilla cierra 3×3 exacto.
   Con auto-fit quedaba 6+3 y la segunda fila se veía coja. */
.tire-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
/* Los 9 logos ahora SI son botones: cada uno abre WhatsApp con la marca ya
   escrita. Por eso el hover puede ser expresivo sin enganar a nadie — en
   reposo el logo va atenuado y al pasar el mouse toma color, se levanta y
   aparece "Cotizar <marca>". La grilla deja de ser decorado y se vuelve
   nueve puntos de conversion mas. */
.tbg {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 104px;
    padding: 18px 28px;
    background: var(--paper);
    border-radius: 10px;
    overflow: hidden;
    transition: transform .32s var(--ease), box-shadow .32s var(--ease),
                background .32s var(--ease);
}
.tbg img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    filter: saturate(.35) opacity(.72);
    transition: filter .32s var(--ease), transform .32s var(--ease);
}
.tbg:hover, .tbg:focus-visible {
    transform: translateY(-4px);
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,31,66,.07), 0 18px 40px rgba(0,31,66,.13);
}
.tbg:hover img, .tbg:focus-visible img {
    filter: saturate(1) opacity(1);
    transform: translateY(-7px) scale(1.03);
}
.tbg-cta {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 7px 6px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
    background: var(--green-dk);
    transform: translateY(100%);
    transition: transform .32s var(--ease);
}
.tbg:hover .tbg-cta, .tbg:focus-visible .tbg-cta { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .tbg, .tbg img, .tbg-cta { transition: none; }
    .tbg:hover, .tbg:hover img { transform: none; }
}
.tire-note {
    font-size: 12.5px;
    color: var(--muted-dim);
    margin-top: 18px;
    letter-spacing: .2px;
}

.brand-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin-top: 44px;
}
.bcard {
    padding: 26px 22px;
    background: var(--bg-3);
    box-shadow: 0 1px 2px rgba(0,31,66,.04);
    border-radius: 10px;
    
}

.bcard-name {
    font-family: var(--font-display);
    font-size: 28px;
    letter-spacing: 1.5px;
    line-height: 1;
    color: var(--text);
}
.bcard-sub {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--green-lt);
    margin: 6px 0 16px;
}
.bcard p { font-size: 12.5px; color: var(--muted); line-height: 1.65; }


/* ============================================================
   DIFERENCIADORES
   ============================================================ */


/* ============================================================
   CONTACTO
   ============================================================ */
.contact {
    position: relative;
    padding: 120px 0;
    background: var(--bg-2);
    overflow: hidden;
}
.contact-photo {
    background-image:
        linear-gradient(92deg, rgba(245,247,250,0.99) 30%, rgba(245,247,250,0.88) 60%, rgba(245,247,250,0.60) 100%),
        url('../assets/backgrounds/bg_truck_contact_light.jpg');
    background-position: center, center 12%;
    opacity: .9;
}
.contact > .container { position: relative; z-index: 1; }
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: start;
}
.contact-title {
    font-family: var(--font-display);
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 400;
    line-height: 0.98;
    margin-bottom: 16px;
}
.contact-title em { font-style: normal; color: var(--muted); display: block; }
.contact-sub { font-size: 15px; color: var(--muted); max-width: 46ch; margin-bottom: 40px; }

.team-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--green-lt);
    margin-bottom: 14px;
}
.agent {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 9px;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}
.agent:hover { border-color: var(--line-h); background: var(--surface-h); }
.agent-av {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(96,168,38,0.14);
    border: 1px solid var(--line-h);
    font-family: var(--font-cond);
    font-size: 14px;
    font-weight: 700;
    color: var(--green-lt);
    letter-spacing: .5px;
}
.agent-info { display: flex; flex-direction: column; line-height: 1.35; }
.agent-info strong { font-size: 14px; }
.agent-info span { font-size: 12.5px; color: var(--muted); }
.agent svg { margin-left: auto; color: var(--muted-dim); flex-shrink: 0; }

.contact-meta { margin-top: 30px; display: grid; gap: 18px; }
.meta-item { display: flex; flex-direction: column; gap: 4px; }
.meta-label {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted-dim);
}
.meta-item span, .meta-item a { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.meta-item a:hover { color: var(--green-lt); }

/* cotización de un toque — sustituye al formulario, que Gera señaló como
   fricción: el negocio corre por WhatsApp, no por captura de datos */
.quick {
    background: var(--bg-3);
    box-shadow: 0 1px 2px rgba(0,31,66,.04);
    border-radius: 12px;
    padding: 30px;
}
.quick-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--green-lt);
    margin-bottom: 12px;
}
.quick-title {
    font-family: var(--font-cond);
    font-size: 27px;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: .3px;
}
.quick-sub { font-size: 13.5px; color: var(--muted); line-height: 1.65; margin: 11px 0 22px; }

.qopt {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 9px;
    margin-bottom: 9px;
    transition: border-color .25s var(--ease), background .25s var(--ease),
                transform .25s var(--ease);
}
.qopt:hover { border-color: var(--line-h); background: var(--surface-h); transform: translateX(3px); }
.qopt-ic { width: 22px; height: 22px; flex-shrink: 0; color: var(--green-lt); }
.qopt-txt { display: flex; flex-direction: column; line-height: 1.4; min-width: 0; }
.qopt-txt strong { font-size: 14px; }
.qopt-txt span { font-size: 12px; color: var(--muted); }
.qopt-go { margin-left: auto; flex-shrink: 0; color: var(--muted-dim); transition: transform .25s var(--ease), color .25s var(--ease); }
.qopt:hover .qopt-go { transform: translateX(3px); color: var(--green-lt); }

.quick-hours {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}
.quick-hours > div { display: flex; flex-direction: column; gap: 5px; }
/* --muted, no --muted-dim: el panel es más claro que el fondo y --muted-dim
   caía a 4.31:1 cuando AA pide 4.5:1 */
.quick-hours span:not(.meta-label) { font-size: 12.5px; color: var(--muted); line-height: 1.55; }


/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bg); border-top: 1px solid var(--line); padding: 64px 0 28px; }
.footer-top {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 48px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--line);
}
.footer-brand img { height: 34px; width: auto; margin-bottom: 16px; }
.footer-brand p { font-size: 12.5px; color: var(--muted); line-height: 1.75; }
.footer-nav { display: flex; flex-direction: column; gap: 11px; }
.footer-nav a { font-size: 13px; color: var(--muted); transition: color .2s; }
.footer-nav a:hover { color: var(--green-lt); }
.footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 11px;
    line-height: 1.55;
}
.footer-contact svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 3px; color: var(--green); }
.footer-contact a:hover { color: var(--green-lt); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-top: 22px;
}
.footer-bottom p { font-size: 11.5px; color: var(--muted-dim); }


/* ============================================================
   WHATSAPP FLOTANTE
   ============================================================ */
.wa-float {
    position: fixed;
    right: 24px; bottom: 24px;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    background: #25d366;
    color: #06331a;
    border-radius: 100px;
    font-size: 13.5px;
    font-weight: 700;
    box-shadow: 0 10px 30px rgba(37,211,102,.32);
    transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(37,211,102,.45); }

.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    width: 0;
    background: var(--green);
    z-index: 200;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
    .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 52px; }
    .cat-item { grid-template-columns: 140px minmax(0,1fr) auto; gap: 20px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}

@media (max-width: 860px) {
    :root { --pad: 22px; }
    .nav-menu {
        position: fixed;
        inset: 0 0 auto;
        top: 62px;
        flex-direction: column;
        gap: 0;
        /* Panel BLANCO y opaco: con el tema claro el panel navy heredado
           dejaba transparentar el texto de la pagina y no se leia el menu.
           Redefine sus propios tokens porque el nav padre es "isla oscura". */
        --text:      #0b1a2e;
        --muted:     #33465e;
        --line:      rgba(0,31,66,0.13);
        background: #ffffff;
        border-bottom: 1px solid var(--line);
        box-shadow: 0 14px 30px rgba(0,31,66,0.13);
        padding: 6px 0;
        display: none;
    }
    .nav-menu.open { display: flex; }
    .nav-menu a { color: var(--muted); }
    .nav-menu li { border-bottom: 1px solid var(--line); }
    .nav-menu li:last-child { border-bottom: none; }
    .nav-menu a { padding: 16px var(--pad); font-size: 13px; min-height: 48px; }
    /* el ícono son dos líneas de 1.5px: sin este relleno el botón medía
       20px de alto y era el elemento más difícil de picar del sitio */
    .nav-burger { display: flex; }
    .nav-cta { display: none; }

    .hero-inner { padding-top: 122px; }
    /* En vertical se usa un recorte propio, centrado en el tractocamión:
       el recorte panorámico dejaba a la vista solo los cables del puente.
       El degradado va oscuro arriba (donde cae el texto) y se abre abajo. */
    /* En vertical no caben los tres sin que queden del tamano de una hormiga:
       el recorte va sobre el plateado y el azul, que son los dos que el
       cliente pidio destacar. El velo se abre en la mitad de abajo. */
    .hero-photo {
        background-image:
            linear-gradient(to bottom,
                rgba(255,255,255,0.94) 0%,
                rgba(255,255,255,0.86) 36%,
                rgba(255,255,255,0.32) 66%,
                rgba(255,255,255,0.20) 86%,
                rgba(255,255,255,0.62) 100%),
            url('../assets/backgrounds/bg_hero_trucks_sm.jpg');
        background-position: center, center bottom;
    }
    /* con el texto en 2 líneas el punto verde se despegaba al centrarse */
    .hero-eyebrow { font-size: 10px; letter-spacing: 1.7px; align-items: flex-start; }
    .hero-dot { margin-top: 5px; flex-shrink: 0; }
    .hero-facts { gap: 22px 0; }
    .hfact { min-width: 44%; }

    .catalog-top { flex-direction: column; align-items: flex-start; gap: 22px; }
    .cat-item {
        grid-template-columns: 1fr auto;
        grid-template-areas: 'tag tag' 'main cta';
        gap: 8px 16px;
        align-items: end;
    }
    .cat-item-tag { grid-area: tag; }
    .cat-item-main { grid-area: main; }
    .cat-item-cta  { grid-area: cta; }
    .tbg { height: 76px; padding: 12px 16px; }
    .tirecat-bar { align-items: flex-start; }
    .footer-top { grid-template-columns: 1fr; gap: 30px; }

    /* ---- Áreas de toque: mínimo 44px en pantalla táctil ----
       Se dimensionan con relleno, no con altura fija, para que el texto
       siga centrado si el usuario agranda la tipografía del sistema. */
    .nav-brand { padding: 7px 0; }
    .tfilter { padding: 12px 18px; }
    .tspec summary { padding-top: 16px; padding-bottom: 13px; }
    /* teléfonos y correos van dentro de párrafos: no pueden crecer a 44px
       sin romper el renglón, pero sí ganan margen suficiente para el dedo */
    .footer-contact a, .meta-item a { display: inline-block; padding: 6px 0; }
    .footer-nav { gap: 0; }
    .footer-nav a { padding: 10px 0; }
    .qopt { padding: 16px; }
    .agent { padding: 15px 16px; }

    /* ---- Legibilidad ----
       Las etiquetas en versalitas caían a 9.5–10.5px. En monitor se leen,
       en un teléfono no. Sólo suben en táctil; en escritorio se conserva
       la escala fina del diseño. */
    .tpos,
    .tspec-h,
    .meta-label,
    .quick-eyebrow,
    .tapps li,
    .tfilter span,
    .cat-item-tag { font-size: 11px; }

    .section-label,
    .team-label,
    .hfact-l,
    .tcount,
    .tcta { font-size: 11.5px; }

    .tdisclaimer, .tnote { font-size: 12.5px; }
    .wa-float span { display: none; }
    .wa-float { padding: 15px; border-radius: 50%; }
}

@media (max-width: 520px) {
    .about-cards { grid-template-columns: 1fr; }
    .tbg { height: 62px; padding: 10px 12px; }
    .hfact { min-width: 100%; padding-right: 0; }
    .cta-band { padding: 24px; }
    .quick { padding: 22px; }
    .quick-hours { grid-template-columns: 1fr; gap: 16px; }
    .tire-cards { grid-template-columns: 1fr; }
}


/* ===== MOVIMIENTO REDUCIDO ===== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .reveal-up, .reveal-left, .reveal-right { opacity: 1; transform: none; }
    .ticker-track { animation: none; }
}


/* ============================================================
   REFACCIONES Y FLOTA — mismo aire que el catálogo de llantas
   Antes las fichas de estos dos bloques nacían pegadas al
   separador fotográfico. Ahora reutilizan .tirecat, que ya trae
   el respiro, y la barra lleva una entradilla en vez de filtros.
   ============================================================ */
.tcat-lead {
    max-width: 62ch;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--muted);
}
.tirecat-bar .tcat-lead + .tcount { white-space: nowrap; }

/* el separador ya no queda a hueso con la primera fila de fichas */
.cat-block + .cat-block,
.cat-block .tirecat + .tirecat { margin-top: 0; }
.cat-block .tirecat { padding-bottom: 56px; }
.cat-block .cat-media { margin-bottom: 0; }

/* ============================================================
   EQUAL FLEXX — apartado propio
   Complementa el catálogo de llantas: explica en qué consiste el
   balanceo antes de que el cliente pregunte por WhatsApp.
   ============================================================ */
.equal {
    position: relative;
    padding: 88px 0 96px;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.equal-top { max-width: 74ch; margin-bottom: 44px; }
.equal-title {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.4vw, 74px);
    font-weight: 400;
    line-height: .95;
    margin: 10px 0 18px;
}
.equal-lead { font-size: 15px; line-height: 1.75; color: var(--muted); }
.equal-lead b { color: var(--text); font-weight: 600; }

.equal-grid {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

/* la ficha del producto: misma anatomía que una llanta */
.equal-card {
    background: var(--bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,31,66,.05);
    position: sticky;
    top: 104px;
}
.equal-shot {
    position: relative;
    height: 236px;
    padding: 18px;
    background: var(--paper);
    display: flex; align-items: center; justify-content: center;
}
.equal-shot img { max-height: 100%; width: auto; object-fit: contain; }
.equal-card-body { padding: 20px 20px 22px; }
.equal-card-t {
    font-family: var(--font-cond);
    font-size: 26px; font-weight: 700; letter-spacing: .3px; line-height: 1.1;
}
.equal-card-s { font-size: 12.5px; color: var(--muted); margin: 4px 0 12px; }
.equal-card-s b { color: var(--green-lt); font-weight: 700; }
.equal-card .tgrid { margin: 14px 0 18px; }
.equal-card .tcta { width: 100%; justify-content: center; }

/* los cuatro pilares */
/* 2x2: los cuatro pilares hacen bloque frente a la ficha del producto.
   Con auto-fit quedaban 3 arriba y el cuarto huerfano abajo. */
.equal-how {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-content: start;
}
.ehow {
    position: relative;
    background: var(--bg);
    border-radius: 12px;
    padding: 24px 22px 22px;
    box-shadow: 0 1px 2px rgba(0,31,66,.05);
    display: flex; flex-direction: column;
}
.ehow-n {
    font-family: var(--font-cond);
    font-size: 12px; font-weight: 700; letter-spacing: 2px;
    color: var(--green-lt);
}
.ehow-t {
    font-family: var(--font-cond);
    font-size: 21px; font-weight: 700; line-height: 1.15;
    margin: 6px 0 10px;
}
.ehow-p { font-size: 13.5px; line-height: 1.7; color: var(--muted); flex: 1; }
.ehow-p b { color: var(--text); font-weight: 600; }
.ehow-r {
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 13px; line-height: 1.55; font-weight: 600; color: var(--text);
}
.ehow-r span {
    display: block;
    font-family: var(--font-cond);
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px;
    text-transform: uppercase; color: var(--green-lt);
    margin-bottom: 5px;
}
.ehow-proof { background: var(--navy); color: #fff; }
.ehow-proof .ehow-n { color: var(--green); }
.ehow-proof .ehow-p { color: rgba(255,255,255,.76); }
.ehow-proof .ehow-p b { color: #fff; }
.ehow-badges {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.16);
    list-style: none;
}
.ehow-badges li {
    padding: 5px 11px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 100px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px;
    text-transform: uppercase; color: rgba(255,255,255,.86);
}

/* reparto de la resistencia al rodamiento por eje */
.ewheels {
    margin-top: 26px;
    background: var(--bg);
    border-radius: 12px;
    padding: 30px 30px 26px;
    box-shadow: 0 1px 2px rgba(0,31,66,.05);
}
.ewheels-txt h3 {
    font-family: var(--font-cond);
    font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; line-height: 1.15;
    margin-bottom: 8px;
}
.ewheels-txt p { font-size: 13.5px; line-height: 1.7; color: var(--muted); max-width: 62ch; }
.ewheels-nums {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 22px 0 18px;
}
.ewheel {
    display: flex; flex-direction: column; gap: 10px;
    padding: 18px 18px 16px;
    background: var(--bg-2);
    border-radius: 10px;
    border-left: 3px solid var(--line);
}
/* el filete repite el color del chip de posicion: se lee el eje de un vistazo */
.ewheel:nth-child(1) { border-left-color: var(--navy); }
.ewheel:nth-child(2) { border-left-color: var(--green-dk); }
.ewheel:nth-child(3) { border-left-color: #4a4f57; }
.ewheel .ewheel-pos {
    align-self: flex-start;
    padding: 5px 10px; border-radius: 4px;
    font-size: 9.5px; font-weight: 700; letter-spacing: 1.5px;
    text-transform: uppercase; color: #fff;
}
.ewheel-n {
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 54px); line-height: .85; letter-spacing: .5px;
}
.ewheel-n i { font-style: normal; font-size: .45em; margin-left: 3px; color: var(--muted); }
.ewheels-foot {
    font-size: 12.5px; line-height: 1.7; color: var(--muted);
    padding-top: 16px; border-top: 1px solid var(--line);
}
.ewheels-foot b { color: var(--text); font-weight: 600; }

.equal .cta-band { margin-top: 26px; }

/* ============================================================
   PRESENTACIONES — la familia de envases, compacta
   Willy la pidió toda junta, no producto por producto. Van
   dibujados en SVG y a escala relativa entre sí: se entiende el
   salto de tamaño de un vistazo y no depende de una foto.
   ============================================================ */
.pres {
    max-width: var(--wrap);
    margin: 44px auto 0;
    padding: 34px var(--pad) 30px;
    background: var(--bg-2);
    border-radius: 14px;
}
.pres-head { max-width: 68ch; margin-bottom: 30px; }
.pres-title {
    font-family: var(--font-cond);
    font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.12;
    margin: 9px 0 10px;
}
.pres-sub { font-size: 13.5px; line-height: 1.7; color: var(--muted); }

.pres-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 12px 30px;
    padding: 8px 0 4px;
}
.pres-item {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    flex: 0 0 auto;
}
/* la altura fija hace que los envases compartan piso y la escala se lea */
.pres-shape {
    display: flex; align-items: flex-end; justify-content: center;
    height: 148px;
    width: var(--pw);
}
.pres-shape svg { width: 100%; height: auto; max-height: 148px; display: block; }
.pres-g {
    fill: var(--bg-3);
    stroke: var(--navy);
    stroke-width: 3;
    stroke-linejoin: round;
    transform: translate(6px, 6px);
}
.pres-item:hover .pres-g { fill: rgba(96,168,38,.16); stroke: var(--green-dk); }
.pres-cap {
    display: flex; align-items: baseline; gap: 3px;
    font-family: var(--font-display);
    font-size: 27px; line-height: 1; letter-spacing: .5px;
}
.pres-cap i { font-style: normal; font-size: 13px; color: var(--muted); }
.pres-name {
    font-family: var(--font-cond);
    font-size: 12px; font-weight: 700; letter-spacing: 1.6px;
    text-transform: uppercase; color: var(--muted);
}
.pres-foot {
    margin-top: 24px; padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12px; color: var(--muted-dim); text-align: center;
}

/* enlace al mapa en el bloque de contacto */
.meta-map {
    display: inline-flex; align-items: center; gap: 7px;
    margin-top: 7px;
    font-size: 12.5px; font-weight: 600;
    color: var(--green-lt);
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease);
}
.meta-map:hover { border-bottom-color: var(--green); }
.meta-map svg { flex-shrink: 0; }

@media (max-width: 900px) {
    .equal-grid { grid-template-columns: 1fr; }
    .equal-how { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
    .equal-card { position: static; }
    .equal-shot { height: 210px; }
}
@media (max-width: 720px) {
    .equal { padding: 62px 0 68px; }
    .ewheels { padding: 24px 20px 22px; }
    .pres { padding: 26px 20px 24px; border-radius: 12px; }
    /* En móvil se pasa a rejilla de 5 columnas en vez de flex: con flex-wrap
       el tote se iba solo a un segundo renglón y se perdía la comparación de
       tamaños, que es justo lo que el cliente quería que se viera de un golpe.
       Los envases se encogen pero conservan su proporción entre sí. */
    .pres-row {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: end;
        gap: 12px 8px;
    }
    .pres-item { min-width: 0; }
    .pres-shape { height: 92px; width: 100%; max-width: calc(var(--pw) * .60); }
    .pres-shape svg { max-height: 92px; }
    .pres-name { font-size: 9.5px; letter-spacing: 1px; text-align: center; }
    .pres-cap { font-size: 19px; }
    .pres-cap i { font-size: 11px; }
    .tirecat-bar .tcat-lead { font-size: 13px; }
}


/* Refacciones y flota son 4 fichas exactas: van en una sola fila para que no
   quede una tarjeta huérfana al final. Los colores de .tpos-* son el código de
   posición de las LLANTAS (dirección, tracción, arrastre…); aquí las etiquetas
   dicen otra cosa, así que se unifican en navy y la palabra hace la distinción. */
#refacciones .tire-cards,
#flota .tire-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

#refacciones .tpos,
#flota .tpos { background: var(--navy); }

@media (max-width: 1080px) {
    #refacciones .tire-cards,
    #flota .tire-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    #refacciones .tire-cards,
    #flota .tire-cards { grid-template-columns: 1fr; }
}


/* ============================================================
   MAPA DE UBICACIÓN
   El mapa es DECORATIVO: `pointer-events: none` en el iframe hace
   que cualquier toque caiga en la liga que lo cubre y abra Google
   Maps. Un mapa incrustado que se deja panear confunde — la gente
   lo arrastra sin querer y nunca llega a la app.
   La tarjeta lleva alto propio, así que si el iframe no carga
   (sin red, bloqueador) el hueco se ve intencional, no roto.
   ============================================================ */
.mapa {
    position: relative;
    margin-top: 26px;
    height: 232px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-3);
    border: 1px solid var(--line);
    isolation: isolate;
}
.mapa-lienzo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
    /* sin desaturar: el pin rojo es el ancla visual de la tarjeta y con el
       filtro se apagaba hasta perderse contra las calles */
    filter: contrast(1.03);
}
.mapa-liga {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    align-content: end;
    padding: 46px 16px 14px;
    background: linear-gradient(to top,
        rgba(255,255,255,0.97) 0%,
        rgba(255,255,255,0.90) 46%,
        rgba(255,255,255,0.00) 100%);
    transition: background .25s var(--ease);
}
.mapa-liga:hover {
    background: linear-gradient(to top,
        rgba(255,255,255,0.99) 0%,
        rgba(255,255,255,0.94) 54%,
        rgba(255,255,255,0.10) 100%);
}
.mapa-liga:focus-visible { outline: 2px solid var(--green-dk); outline-offset: -3px; }
.mapa-pin {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--green-dk);
    color: #fff;
    flex-shrink: 0;
}
.mapa-pin svg { width: 18px; height: 18px; }
.mapa-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mapa-txt strong {
    font-family: var(--font-cond);
    font-size: 16px; font-weight: 700; letter-spacing: .2px; line-height: 1.2;
    color: var(--text);
}
.mapa-txt span { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.mapa-cta {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px;
    text-transform: uppercase; color: var(--green-lt);
    white-space: nowrap;
}
.mapa-cta svg { flex-shrink: 0; transition: transform .25s var(--ease); }
.mapa-liga:hover .mapa-cta svg { transform: translateX(3px); }

@media (max-width: 560px) {
    .mapa { height: 208px; }
    .mapa-liga {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: 'pin txt' 'cta cta';
        gap: 10px;
        padding: 40px 14px 13px;
    }
    .mapa-pin { grid-area: pin; }
    .mapa-txt { grid-area: txt; }
    .mapa-cta { grid-area: cta; margin-top: 2px; }
    .mapa-txt strong { font-size: 15px; }
}

/* ===== IMPRESIÓN ===== */
@media print {
    .nav, .wa-float, .ticker, .scroll-progress, .section-photo, .mapa-lienzo { display: none !important; }
    body { background: #fff; color: #000; }
}


/* ============================================================
   ÁREAS TÁCTILES — pase final 2026-08-25
   Gerardo abre el sitio en el celular, así que todo lo que se pica
   tiene que llegar a los 44px que recomienda Apple/WCAG. Se crece con
   RELLENO, nunca con altura fija, para que aguante si el usuario
   agranda la tipografía del sistema.
   ============================================================ */
@media (hover: none), (max-width: 860px) {
    .tfilter { min-height: 44px; padding-top: 10px; padding-bottom: 10px; }
    .nav-burger { min-height: 44px; }
    .footer-nav a,
    .footer-contact a,
    .meta-item a,
    .cta-pdf a { display: inline-block; min-height: 44px; line-height: 1.45; padding: 11px 0; }
    /* teléfonos y correo dentro de párrafos: no se puede crecer la caja sin
       romper el interlineado, así que se ensancha solo el área de toque */
    p a[href^="tel:"], p a[href^="mailto:"] {
        display: inline-block;
        padding: 7px 2px;
        margin: -7px -2px;
    }
}


/* ============================================================
   PESO Y MATERIALIDAD — pase de elegancia 2026-08-25
   El sitio estaba limpio pero todo flotaba en el mismo plano.
   Tres capas, dosificadas para que no se saturen entre si:
     1. dos anclas navy (banda de firma + pie) que enmarcan el blanco
     2. una retícula técnica finísima para que el blanco no sea plano
     3. mas aire y jerarquia editorial — SIN numeros de seccion,
        que Gerardo ya pidio quitar una vez
   ============================================================ */

/* ---------- 1. Retícula técnica: papel, no pantalla vacia ---------- */
/* Va en el <body> y es deliberadamente casi invisible: se percibe como
   textura, no como cuadricula. Sobre las bandas navy no se dibuja. */
/* Se probo con lineas y se leian como RAYAS, no como textura. Con puntos de
   1px cada 26px el ojo lo registra como grano de papel y no como cuadricula. */
body {
    background-color: var(--bg);
    background-image: radial-gradient(rgba(0,31,66,0.055) 1px, transparent 1px);
    background-size: 26px 26px;
    background-attachment: fixed;
}
/* las superficies que ya tienen color propio tapan la retícula: se ve el
   ritmo de bandas sin que la textura compita */
.about, .brands, .contact, .signature, .footer { position: relative; }

/* ---------- 2. Banda de firma: ancla navy a media pagina ---------- */
.signature {
    background: var(--navy);
    color: #fff;
    padding: 96px 0;
    overflow: hidden;
    position: relative;
}
/* filete verde arriba y abajo: el acento de marca, del grosor de un cabello */
.signature::before,
.signature::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: var(--green);
}
.signature::before { top: 0; }
.signature::after  { bottom: 0; }
/* la esfera enorme y tenue a la derecha: equilibra el bloque de texto y
   refuerza la marca sin competir con el eslogan */
.signature .container { position: relative; z-index: 1; }
/* Relieve seco: el emblema a color pero con el brillo aplastado, de modo que
   quede mas OSCURO que el navy en vez de mas claro. Antes iba en gris al 9%
   con brightness(2.1), o sea mas claro que el fondo, y por eso brillaba y
   competia con el eslogan: se leia como mancha, no como logo.
   Ojo con el numero: brightness() es un multiplicador y el punto de fuga esta
   en .16 (ahi el logo iguala la luminancia del navy y desaparece). Subirlo lo
   hace MENOS visible, no mas. Elegido .13 a proposito: se siente presente pero
   sigue perteneciendo al navy. */
.signature-mark {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    opacity: .77;
    filter: brightness(.13);
    pointer-events: none;
    user-select: none;
}
/* en tablet solo encoge; la receta de color se conserva */
@media (max-width: 1080px) { .signature-mark { width: 220px; right: -30px; } }
@media (max-width: 700px)  { .signature-mark { display: none; } }
.signature-quote {
    font-family: var(--font-display);
    font-size: clamp(34px, 4.6vw, 62px);
    font-weight: 400;
    line-height: 1.06;
    letter-spacing: .5px;
    color: #fff;
    max-width: 20ch;
}
.signature-by {
    margin-top: 26px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.62);
}

/* ---------- 3. Pie navy: el ancla del final ---------- */
.footer {
    /* isla oscura: redefine tokens y todo lo de adentro se adapta solo */
    --text:      #f2f6fa;
    --muted:     #b6c7da;
    --muted-dim: #8ea4bd;
    --line:      rgba(255,255,255,0.13);
    --green:     #7cc93a;
    background: var(--navy);
    color: var(--text);
    border-top: none;
    padding: 76px 0 30px;
}
.footer-brand img { height: 46px; margin-bottom: 10px; }

/* ---------- 4. Aire editorial ---------- */
.about, .brands, .contact { padding: 132px 0; }
.section-label, .signature-by { font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
    .signature { padding: 66px 0; }
    .about, .brands, .contact { padding: 84px 0; }
    body { background-size: 46px 46px; background-attachment: scroll; }
    .footer { padding: 56px 0 26px; }
    .footer-brand img { height: 38px; }
}


/* ---------- Catalogo de llantas: vida al pasar el mouse ---------- */
.tire {
    transition: transform .34s var(--ease), box-shadow .34s var(--ease);
}
.tire:hover,
.tire:focus-within {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,31,66,.08), 0 22px 46px rgba(0,31,66,.13);
}
.tire .tshot { overflow: hidden; }
.tire .tshot img { transition: transform .45s var(--ease); }
.tire:hover .tshot img { transform: scale(1.055); }
/* el renglon de la ficha se enciende junto con la tarjeta: dice "yo soy
   lo que se abre si le picas" */
.tire .tspec summary { transition: color .25s var(--ease); }
.tire:hover .tspec summary { color: var(--green-lt); }
.tire .tspec summary::after { transition: transform .3s var(--ease); }
.tire:hover .tspec summary::after { transform: translateY(2px) rotate(45deg); }
/* al abrirse, la tarjeta se queda "levantada" para que se note cual esta activa */
.tire:has(details[open]) {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0,31,66,.08), 0 22px 46px rgba(0,31,66,.13);
}
@media (prefers-reduced-motion: reduce) {
    .tire, .tire .tshot img, .tire .tspec summary::after { transition: none; }
    .tire:hover, .tire:has(details[open]) { transform: none; }
    .tire:hover .tshot img { transform: none; }
}

/* la bajada va como texto y no como imagen: nitida a cualquier tamano */
.footer-tagline {
    font-family: var(--font-cond);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2.6px;
    text-transform: uppercase;
    color: var(--green);
    margin-bottom: 20px;
}


/* ---------- Fichas sin fotografía (refacciones y flota) ----------
   Mismo componente que las llantas para que hereden la ficha desplegable,
   el clic en toda la tarjeta y el hover. Como todavía no hay foto de
   producto, la etiqueta de categoría va en línea arriba del título en
   vez de flotar sobre la imagen. */
.card-sin-foto .tbody { padding-top: 22px; }
.tpos-inline {
    position: static;
    display: inline-block;
    width: fit-content;
    align-self: flex-start;
    margin-bottom: 12px;
}
.card-sin-foto .tsize b { color: var(--muted); font-weight: 600; font-size: 13px; }


/* subtitulo que separa las marcas de llantas de las de refacciones */
.brands-sub2 {
    margin: 46px 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted-dim);
}