/* =========================================================
   SITE.CSS — Grupo 3M
   Todo lo que tokens.css no cubre: layout de secciones,
   hero, split, grillas, franja de confianza, FAQ, prueba
   social, cotizador (contenedor), botón flotante de WhatsApp.
   No reescribe tokens.css: solo usa sus variables y clases.
   ========================================================= */

/* ---------- Utilidades ---------- */
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.skip-link{
  position:absolute;left:12px;top:-48px;z-index:100;
  background:var(--accent);color:var(--accent-ink);
  padding:10px 18px;border-radius:var(--radius-pill);
  font-family:var(--font-base);font-weight:var(--fw-ui);font-size:14px;
  transition:top .15s;
}
.skip-link:focus{top:12px;}

.wrap{max-width:var(--content-max);margin:0 auto;padding:0 40px;}

/* Ningún link ni botón lleva subrayado, en ningún estado; la interactividad
   se comunica por color y por los micro-movimientos de hover definidos
   más abajo (footer), no por text-decoration. */
a{text-decoration:none;}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.on-photo :focus-visible{outline-color:var(--accent-ink);}

/* ---------- Header: sticky, contenido en el contenedor de 1200 ---------- */
html{scroll-padding-top:var(--header-h);} /* header sticky: los saltos a #anclas no quedan tapados */
header{position:sticky;top:0;z-index:30;}
/* Barra flex: logo a la izquierda (margin-right:auto empuja el resto a la
   derecha), nav centrado de verdad (absoluto al centro; hay lugar de sobra en
   desktop) y a la derecha el CTA + las herramientas (selector de idioma y, en
   mobile, el hamburguesa). */
.header-inner{
  display:flex;align-items:center;gap:24px;padding:16px 0;
}
.logo-link{display:flex;align-items:center;margin-right:auto;}
.logo-link img{filter:none;}
/* nav centrado respecto del header (sticky = bloque contenedor): en desktop
   queda absolutamente centrado en la barra; en mobile vuelve al flujo dentro
   del panel desplegable (ver media query). */
.header-inner nav{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-right:0;
}
.nav-cta{flex-shrink:0;}
/* Herramientas siempre visibles en la barra (no dentro del hamburguesa):
   selector de idioma y, en mobile, el botón hamburguesa a su lado. */
.header-tools{display:flex;align-items:center;gap:12px;flex-shrink:0;}

/* ---------- Selector de idioma (bandera circular + mini menú) ----------
   Se ve solo la bandera del idioma actual (botón); al tocarla se abre el mini
   menú con los dos idiomas. Funciona igual en desktop y en mobile (en mobile
   queda en la barra, al lado del hamburguesa). */
.lang-switch{position:relative;flex-shrink:0;}
.lang-toggle{
  display:flex;align-items:center;justify-content:center;
  width:42px;height:42px;padding:0;cursor:pointer;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-pill);
  transition:border-color .15s;
}
.lang-toggle:hover{border-color:var(--accent);}
.flag{
  width:24px;height:24px;flex-shrink:0;border-radius:50%;overflow:hidden;
  display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.flag-svg{display:block;width:100%;height:100%;}
.lang-menu{
  display:none;list-style:none;margin:0;padding:6px;
  position:absolute;top:calc(100% + 8px);right:0;min-width:180px;z-index:40;
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-card);box-shadow:0 16px 28px rgba(0,0,0,.14);
}
.lang-switch.is-open .lang-menu{display:block;}
.lang-menu a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  color:var(--ink);font-weight:var(--fw-ui);font-size:14.5px;
}
.lang-menu a:hover{background:var(--bg);}
.lang-menu a[aria-current="true"]{color:var(--accent);}

/* Menú mobile: mismo <nav> y mismo CTA en las dos resoluciones. En desktop
   .nav-panel no genera caja propia (display:contents) para no romper el
   grid de 3 columnas de arriba; en mobile se convierte en el panel
   desplegable real. El toggle solo existe visualmente <900px. */
.nav-toggle{display:none;}
@media (min-width:900px){
  .nav-panel{display:contents;}
}

/* Corrección de contraste WCAG AA: --accent-2 (#BA9678) sobre fondos claros
   (--bg / --white) da ~2.5:1, por debajo del mínimo de texto (4.5:1) y de
   borde (3:1). Se mantiene --accent-2 donde SÍ pasa (icono de la franja de
   confianza, sobre fondo bordó oscuro), pero btn-secondary fuera de .on-photo
   usa --accent, que ya es el color de marca y da >10:1. El hover de
   tokens.css (color:ink/border:ink) no se toca porque ya pasa contraste. */
.btn-secondary{color:var(--accent);border-color:var(--accent);}

/* Botón "Escribinos por WhatsApp" del hero de Virutas: logo de WhatsApp +
   fondo translúcido oscuro para que no se pierda sobre la foto. Solo aplica
   sobre foto (.on-photo); el borde/texto claros los da .on-photo .btn-secondary. */
.btn-wa{display:inline-flex;align-items:center;gap:8px;}
.btn-wa .btn-wa-icon{
  width:18px;height:18px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.on-photo .btn-wa{background:rgba(11,11,11,.42);}
.on-photo .btn-wa:hover{background:rgba(11,11,11,.58);}

/* ---------- Ritmo general de secciones ---------- */
/* El horizontal lo da .wrap (--content-max); las secciones solo aportan
   el padding vertical, para no duplicar el inset en cada franja. */
main > section{padding:64px 0;}
section[aria-labelledby] > .eyebrow-plain,
section[aria-labelledby] > h2{max-width:760px;}
section .sub{color:var(--sub);font-size:16.5px;max-width:640px;margin-top:10px;}
h2{font-size:clamp(26px,3.4vw,36px);}

/* ---------- Destacado de palabras clave en títulos ----------
   Recuadro bordó, esquinas casi rectas, texto blanco y una leve
   inclinación de 10° (alternando lados con .hl-left / .hl-right).
   box-decoration-break:clone para que si la palabra parte en dos
   líneas cada fragmento conserve su recuadro. Las líneas de los
   títulos que lo contienen respiran un poco más (line-height) para
   que el recuadro rotado no pise la línea vecina. */
.hl{
  display:inline-block;background:var(--accent);color:#fff;
  padding:.02em .32em;border-radius:3px;margin:0 .1em;
  transform:rotate(-2deg);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  text-shadow:none;
}
.hl-right{transform:rotate(2deg);}
h1:has(.hl), h2:has(.hl){line-height:1.4;}

/* ---------- Hero ---------- */
/* Alto de pantalla (menos el header sticky), imagen recortada a cover y
   texto centrado verticalmente. min-height (no height fijo): si en un
   mobile chico el copy fuera más alto que la pantalla, el hero crece en
   vez de recortar texto. */
.hero{
  position:relative;overflow:hidden;
  min-height:calc(100dvh - var(--header-h));
  display:flex;align-items:center;
}
.hero-media{position:absolute;inset:0;background:var(--ink);}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center;}
/* Scrim parejo (no degradado): antes el texto vivía abajo y un degradado
   inferior alcanzaba; centrado, necesita un oscurecido uniforme sobre toda
   la foto para que el texto blanco + text-shadow lean con cualquier imagen. */
.hero-scrim{position:absolute;inset:0;background:rgba(11,11,11,.34);}
.hero-content{
  position:relative;z-index:1;width:100%;padding:48px 0;
  color:var(--accent-ink);
}
.hero-copy{max-width:760px;}
.hero-content h1{
  color:#fff;font-size:clamp(28px,4.6vw,46px);margin-bottom:14px;
  text-shadow:0 2px 12px rgba(0,0,0,.5);
}
.hero-content .sub{
  color:rgba(247,241,230,.92);max-width:56ch;
  text-shadow:0 1px 8px rgba(0,0,0,.45);
}
.hero-content .ctas{margin-top:24px;display:flex;flex-wrap:wrap;gap:14px;}

/* ---------- Split: foto + texto + botón, mitad y mitad ---------- */
.split{display:flex;align-items:center;gap:56px;}
.split-media{flex:1 1 46%;min-width:0;}
.split-media img{border-radius:var(--radius-card);width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.1;}
.split-content{flex:1 1 46%;min-width:0;}
.split-content h2{margin-bottom:14px;}
.split-content p{color:var(--sub);font-size:16.5px;margin-bottom:24px;max-width:46ch;}
.split.split-reverse{flex-direction:row-reverse;}

/* ---------- Grillas de tarjetas ---------- */
.cards-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:20px;margin-top:36px;
}
.cards-grid .card{padding:26px 24px;}
.card h3{font-size:18px;margin-bottom:10px;}
.card p{color:var(--sub);font-size:15px;line-height:1.6;}

/* ---------- Bloques SEO/landing (#granel, #cama-avicola) ----------
   Grilla texto + tarjeta de datos. Reusa tokens y clases existentes
   (.eyebrow-plain, .hl, .btn-*, .card). Sin colores ni tokens nuevos. */
.kw-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:start;}
@media(min-width:768px){
  /* Bloque 1 (#granel): texto izq. / tarjeta der. Tarjeta centrada vertical
     contra el texto (align-items:center: la columna corta queda al medio). */
  .kw-grid{grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:52px;align-items:center;}
  /* Bloque 2 (#cama-avicola): espejo por placement de grilla (sin tocar el DOM,
     que sigue texto→tarjeta para que en mobile ambos apilen texto primero). */
  #cama-avicola .kw-grid{grid-template-columns:minmax(0,45fr) minmax(0,55fr);}
  #cama-avicola .kw-grid > .kw-facts{grid-column:1;grid-row:1;}
  #cama-avicola .kw-grid > .kw-body{grid-column:2;grid-row:1;}
}
.kw-body{max-width:60ch;}
.kw-body h2{margin-bottom:18px;}
.kw-body p{color:var(--sub);font-size:16.5px;line-height:1.7;margin-bottom:16px;}
.kw-body p:last-of-type{margin-bottom:0;}
.kw-cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:14px;}
/* Igualar alturas: el borde transparente del primario compensa el 1.5px
   del secundario, y el inline-flex centra el ícono de WhatsApp. */
.kw-cta .btn-primary,.kw-cta .btn-secondary{display:inline-flex;align-items:center;border:1.5px solid transparent;}
.kw-cta .btn-secondary{border-color:var(--accent-2);}
/* Tarjeta de datos: reusa .card (fondo/borde/radio). Filas separadas por
   divisores hairline (--border), padding vertical generoso para que respire
   y gane altura. Ícono de línea más grande, alineado con el texto de la fila. */
.kw-facts{list-style:none;margin:0;padding:8px 32px;}
.kw-facts li{display:flex;align-items:center;gap:16px;color:var(--ink);font-size:15.5px;line-height:1.5;padding:22px 0;}
.kw-facts li + li{border-top:1px solid var(--border);}
.kw-facts .kw-check{flex-shrink:0;width:26px;height:26px;color:var(--accent);}
.kw-facts .kw-check svg{width:26px;height:26px;display:block;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- Flota (Transporte): 4 columnas, una destacada en bordó y la
   foto llenando su tarjeta (cover, sin padding), bordes redondeados ---------- */
.fleet-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px;align-items:stretch;
}
.fleet-grid .card{padding:26px 24px;}
.fleet-grid .card-accent{background:var(--accent);border-color:var(--accent-hover);}
.fleet-grid .card-accent h3, .fleet-grid .card-accent p{color:var(--accent-ink);}
/* La foto ocupa toda la tarjeta: cover para llenar sin borde blanco,
   overflow:hidden para que respete el radio de la tarjeta. */
.fleet-photo{
  border-radius:var(--radius-card);overflow:hidden;min-height:160px;
}
.fleet-photo img{width:100%;height:100%;object-fit:cover;display:block;}

/* ---------- Sección oscura (Diferenciales): corta el ritmo entre franjas
   claras vecinas. Tarjetas en bordó con texto claro sobre el fondo oscuro. */
.section-dark{background-color:var(--section-dark);}
.section-dark .eyebrow-plain{color:var(--accent-2);}
.section-dark h2{color:var(--accent-ink);}
.section-dark .cards-grid .card{background:var(--accent);border-color:var(--accent-hover);}
.section-dark .cards-grid .card h3{color:var(--accent-ink);}
.section-dark .cards-grid .card p{color:rgba(247,241,230,.85);}

/* ---------- Franja de confianza ---------- */
.trust-strip{color:var(--accent-ink);}
.trust-strip h2, .trust-strip .eyebrow-plain{color:var(--accent-ink);}
.trust-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:28px;margin-top:36px;
}
.trust-stat{display:flex;align-items:flex-start;gap:16px;}
.trust-stat .trust-icon{
  flex-shrink:0;width:44px;height:44px;color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;
}
.trust-stat .trust-icon svg{
  width:42px;height:42px;stroke:currentColor;fill:none;
  stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round;
}
.trust-stat strong{display:block;font-size:15.5px;color:#fff;margin-bottom:4px;}
.trust-stat span{font-size:14px;color:rgba(247,241,230,.82);}

/* ---------- FAQ: acordeón nativo (details/summary), accesible sin JS ---------- */
.faq-list{display:grid;gap:16px;margin-top:32px;max-width:820px;}
.faq-item{padding:0;}
.faq-item summary{
  list-style:none;cursor:pointer;padding:22px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--font-base);font-weight:var(--fw-ui);font-size:16px;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::marker{content:"";font-size:0;}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--radius-card);}
.faq-item .chevron{
  flex-shrink:0;width:20px;height:20px;
  stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .2s;
}
.faq-item[open] .chevron{transform:rotate(180deg);}
.faq-item p{padding:0 24px 22px;margin:0;color:var(--sub);font-size:15px;line-height:1.6;}

/* ---------- Prueba social ---------- */
.pending{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-style:normal;color:var(--sub);
}
.pending::before{
  content:"Pendiente";flex-shrink:0;
  background:var(--border);color:var(--ink);
  font-family:var(--font-base);font-weight:var(--fw-ui);font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;
  padding:3px 10px;border-radius:var(--radius-pill);
}
/* 6 logos: grid para altura y ancho parejos. 6 en fila (desktop) → 3+3
   (tablet) → 2 por fila (mobile). Las cajas llenan la celda (1fr) con alto
   fijo, así todas quedan alineadas sin depender del tamaño real del PNG. */
.social-proof-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:20px;margin-top:24px;align-items:center;}
.social-proof-logos img{
  height:150px;width:100%;object-fit:contain;
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);
  padding:20px;
}
@media (max-width:900px){
  .social-proof-logos{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:480px){
  .social-proof-logos{grid-template-columns:repeat(2,1fr);}
  .social-proof-logos img{height:130px;padding:16px;}
}

/* ---------- Cotizador (contenedor; el widget interactivo llega con loader.js) ---------- */
.cotizador-section{position:relative;}
.cotizador-widget{margin-top:32px;}
.cotizador-fallback{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius-card);
  padding:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;
}
.cotizador-fallback p{color:var(--sub);font-size:15px;max-width:44ch;}
.nota{
  margin-top:24px;background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius-card);padding:16px 20px;font-size:14px;color:var(--sub);
}
/* Sin subrayado en ningún link (Bloque C): estos van embebidos en texto
   corrido, así que necesitan diferenciarse por color (WCAG 1.4.1), no solo
   por underline. */
.nota a{color:var(--accent);font-weight:var(--fw-ui);}
.nota a:hover{color:var(--accent-hover);}
.foot-bottom a{color:rgba(255,255,255,.85);font-weight:var(--fw-ui);}
.foot-bottom a:hover{color:#fff;}

/* ---------- Footer: links con chevron/ícono e ícono de micro-movimiento ---------- */
.foot-col a.foot-link{
  display:flex;width:fit-content;align-items:center;gap:8px;
  transition:transform .15s;
}
.foot-col a.foot-link:hover{transform:translateX(-4px);color:#fff;}
.foot-col p.foot-address{display:flex;align-items:center;gap:8px;}
.chevron-right{
  width:14px;height:14px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.foot-icon{
  width:18px;height:18px;flex-shrink:0;
  stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
/* Íconos de marca (WhatsApp/Instagram): glifos oficiales rellenos, más nítidos
   que un trazo fino a este tamaño. Heredan el color del texto del footer. */
.foot-icon-brand{
  width:18px;height:18px;flex-shrink:0;
  fill:currentColor;
}

/* ---------- Acentos decorativos: virutas con fondo transparente ---------- */
/* Discretos, en esquinas/márgenes, siempre detrás del contenido (z-index
   negativo dentro del contexto de apilamiento que crea .section-accent) y
   ocultos en mobile para no competir con el texto en pantallas chicas. */
/* Sin overflow:hidden: el acento del split asoma a propósito por debajo del
   borde (bottom:-24px) y si la sección lo recorta queda cortado en seco. El
   overflow-x:hidden global del body ya es la red de seguridad horizontal. */
.section-accent{position:relative;}
.accent-viruta{
  position:absolute;z-index:-1;width:140px;height:auto;opacity:.9;
  pointer-events:none;user-select:none;
}
.accent-viruta-riesgo{right:20px;bottom:12px;}
/* z-index alto: asoma sobre el seam con la sección siguiente sin que el
   fondo con textura de esa sección lo tape (los otros dos van detrás). */
.accent-viruta-split{left:20px;bottom:-24px;transform:rotate(-8deg);z-index:2;}
.accent-viruta-cotizador{right:24px;top:0;transform:rotate(6deg);}
@media (max-width:900px){
  .accent-viruta{display:none;}
}

/* Aire vertical del bloque de columnas del footer (un poco arriba, más
   abajo). Longhand top/bottom para que el shorthand `padding:0 40px` de
   .wrap —que solo fija los laterales— no lo pise. */
.footer-inner{padding-top:12px;padding-bottom:44px;}

/* ---------- Decoraciones del footer: espacio reservado ---------- */
/* El árbol (Virutas) vive en un margen derecho reservado dentro del propio
   footer-inner, para que ningún texto de la columna de Contacto quede
   debajo. Escala entre 900px y pantallas anchas (clamp), oculto <900px. */
@media (min-width:900px){
  .footer-inner{padding-right:clamp(170px, 20vw, 250px);}
  .footer-decor-tree{height:clamp(200px, 22vw, 280px);}
  /* El contacto que precede al footer necesita más aire abajo para que
     ninguna decoración (árbol o camión) tape la tarjeta del formulario. */
  .form-section{padding-bottom:240px;}
}

/* Pantallas anchas: el eucalipto al doble de tamaño. Al crecer también
   ensancha, así que se agranda el margen derecho reservado del footer para
   que no pise las columnas, y el aire bajo el formulario para que la copa
   no llegue a la tarjeta. */
@media (min-width:1200px){
  .footer-decor-tree{height:540px;}
  .footer-inner{padding-right:440px;}
  .form-section{padding-bottom:320px;}
  /* Camión (Transporte) un poco más grande en pantallas anchas (720px). El
     aire extra sobre el footer se aplica solo a Transporte (.page-transporte)
     para no dejar un hueco enorme en Virutas; translateY escala para que las
     ruedas sigan apoyando sobre el negro. */
  .footer-decor-truck{width:936px;transform:translateY(85px);}
  .page-transporte .form-section{padding-bottom:380px;}
}

/* ---------- Formulario de contacto ---------- */
.contact-form{padding:32px;margin-top:28px;max-width:820px;display:flex;flex-wrap:wrap;gap:0 20px;}
.contact-form .field{flex:1 1 100%;}
.contact-form .field-half{flex:1 1 calc(50% - 10px);}
.contact-form .field-full{flex:1 1 100%;}
.contact-form .ctas{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;}
.form-status{margin-top:14px;font-size:14.5px;color:var(--accent);font-weight:var(--fw-ui);max-width:640px;}
.form-status:empty{display:none;}
.foot-slogan{margin-top:14px;}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-float{
  position:fixed;right:20px;bottom:20px;z-index:50;
  width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
  transition:filter .15s, transform .15s;
}
.whatsapp-float:hover{filter:brightness(1.08);transform:translateY(-2px);}
.whatsapp-float svg{width:28px;height:28px;fill:#fff;}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .wrap, .form-wrap{padding:0 20px;}
  /* La barra ya es flex (logo · margin-right:auto · header-tools). En mobile
     header-tools = selector de idioma + hamburguesa, siempre visibles en la
     barra (el selector NO va dentro del menú desplegable). */
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;
    background:none;border:none;color:var(--ink);cursor:pointer;padding:0;
  }
  /* Menú hamburguesa: solo las 3 líneas (sin la X), más grandes. */
  .nav-toggle svg{
    width:34px;height:34px;stroke:currentColor;fill:none;
    stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  }
  /* Panel desplegable: position:absolute (no participa de la barra flex),
     pegado justo debajo del header sticky, ancho completo, por encima del
     contenido. Contiene el nav + el CTA. */
  .nav-panel{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:6px;
    background:var(--bg);border-bottom:1px solid var(--border);
    padding:18px 20px 24px;box-shadow:0 16px 28px rgba(0,0,0,.14);
    z-index:29;
  }
  .nav-panel.is-open{display:flex;}
  /* El nav vuelve al flujo normal (en desktop es absoluto y centrado). */
  .nav-panel nav{
    position:static;transform:none;
    display:flex;flex-direction:column;gap:2px;width:100%;margin-right:0;
  }
  .nav-panel nav a{
    padding:13px 4px;border-bottom:1px solid var(--border);width:100%;
  }
  .nav-panel .nav-cta{width:100%;text-align:center;margin-top:12px;}
  main > section{padding:44px 0;}
  /* En celulares, en los bloques split (Continuidad garantizada / Qué
     hacemos) va primero el texto y después la imagen. El texto (.split-content)
     está último en el HTML, así que column-reverse lo sube al tope. */
  .split{flex-direction:column-reverse;gap:28px;}
  .split.split-reverse{flex-direction:column-reverse;}
  .split-media, .split-content{flex:1 1 auto;width:100%;}
  /* Header más compacto en celulares. */
  .header-inner{padding:.5em 1em;}
  /* Portadas a la mitad de alto para que luzca la foto de fondo. min-height
     (no height) sigue permitiendo que crezca si el copy no entra. */
  .hero{min-height:50dvh;}
  .hero-content{padding:28px 0;}
  /* Los dos botones de la portada, mismo ancho (full) apilados. */
  .hero-content .ctas{flex-direction:column;align-items:stretch;}
  .hero-content .ctas .btn-primary,
  .hero-content .ctas .btn-secondary{width:100%;justify-content:center;text-align:center;}
  /* Escalado tipográfico del hero en mobile: el copy no cambia, solo el
     tamaño, para que eyebrow + título + párrafo + botones respiren sin
     recortarse en 360-414px (el min-height del hero ya evita el clip). */
  .hero-content h1{font-size:clamp(25.6px, 7.2vw, 30.4px);}
  /* Bajada de la portada en celulares (doble del original, reducido un 25%). */
  .hero-content .sub{font-size:22.5px;line-height:1.35;}
  .trust-stats{grid-template-columns:1fr;}
  .fleet-grid{grid-template-columns:repeat(2,1fr);}
  .cotizador-fallback{flex-direction:column;align-items:flex-start;}
  /* El camión (Transporte) NO desaparece en celulares: se centra apoyado
     sobre el borde superior del footer, con su propio espacio reservado
     debajo del formulario (ver .page-transporte .form-section abajo). */
  .footer-decor-truck{
    display:block;width:min(82%,320px);
    right:auto;left:50%;
    transform:translateX(-50%) translateY(36px);
    bottom:100%;
  }
  .page-transporte .form-section{padding-bottom:170px;}
  /* El eucalipto (Virutas), contenido dentro del footer, un 25% más grande
     que antes (170px → 212px). */
  .footer-decor-tree{height:212px;right:6px;bottom:0;z-index:1;opacity:.8;}
}

/* Footer apilado en celulares (≤767px): logo y bajada centrados; Servicios y
   Contacto una debajo de la otra, alineadas a la izquierda. */
@media (max-width:767px){
  .footer-inner{flex-direction:column;gap:32px;}
  .footer-inner .foot-col:first-child{
    display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;
  }
  .footer-inner .foot-col:first-child .foot-slogan{max-width:none;}
}

@media (max-width:480px){
  .wrap, .form-wrap{padding:0 16px;}
  .header-inner{padding:.5em 1em;gap:10px;}
  .nav-cta{padding:11px 20px;font-size:13.5px;}
  main > section{padding:36px 0;}
  .hero-content{padding:22px 0;}
  .whatsapp-float{width:50px;height:50px;right:14px;bottom:14px;}
  .whatsapp-float svg{width:24px;height:24px;}
  .trust-stat{gap:10px;}
  .cards-grid{gap:14px;}
  .fleet-grid{grid-template-columns:1fr;}
  .contact-form .field-half{flex:1 1 100%;}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important;transition:none !important;animation:none !important;}
}