:root{
  --navy:#073956;--deep:#042f49;--yellow:#f5c400;--paper:#f3f4f2;
  --white:#fff;--text:#17212b;--muted:#647078;--line:#d9dee1;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff}
img{max-width:100%}
.container{width:min(1180px,calc(100% - 40px));margin:auto}
.site-header{background:var(--deep);position:sticky;top:0;z-index:100}
.nav{min-height:78px;display:flex;align-items:center;gap:28px}
.brand{display:flex;flex-direction:column;color:#fff;text-decoration:none;line-height:.92;transition:opacity .2s ease}
.brand:hover{opacity:.82}
.brand-main{font-family:Georgia,serif;font-size:42px;font-weight:700;letter-spacing:2px}
.brand-sub{font-size:11px;font-weight:700;letter-spacing:.04em}
.nav-links{display:flex;align-items:center;gap:27px;margin-left:auto}

/* TRANSICIÓN: línea amarilla que se desliza al pasar el mouse por
   los links del menú. Usa "width" en un ::after absoluto (no en el
   link mismo), por eso no mueve ni recalcula el resto del layout. */
.nav-links a,.dropdown-trigger{position:relative;color:#fff;text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:700;transition:color .2s ease}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--yellow);transition:width .25s ease}
.nav-links a:hover::after{width:100%}
.nav-links a:hover,.dropdown-trigger:hover{color:var(--yellow)}
.dropdown{position:relative}
.dropdown-trigger{display:flex;gap:5px;align-items:center}
.dropdown-menu{display:none;position:absolute;top:100%;left:-18px;min-width:220px;padding:12px 0;background:var(--deep);box-shadow:0 10px 25px rgba(0,0,0,.18)}
.dropdown:hover .dropdown-menu,.dropdown:focus-within .dropdown-menu{display:block}
.dropdown-menu a{display:block;padding:10px 18px;white-space:nowrap}

/* CORRECCIÓN: le da un poco más de aire entre "Zonas" y el botón
   amarillo "Cotizar", sin tocar el espacio entre los otros botones
   del menú (que sigue controlado por el "gap:27px" de .nav-links) */
.nav-cta{ margin-left: 10px; }

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border:0;text-decoration:none;text-transform:uppercase;font-weight:800;font-size:12px;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,.2)}
.btn-yellow{background:var(--yellow);color:var(--deep)}
.btn-navy{background:var(--navy);color:#fff}
.btn-dark{background:var(--deep);color:#fff}
.section-kicker{margin:0 0 9px;color:#b89200;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.section-heading h2{margin:0;color:var(--navy);font-size:clamp(34px,4vw,52px);line-height:.98;letter-spacing:-.025em}
.site-footer{padding:42px 0;background:#03283e;color:#fff}
.footer-main{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;align-items:center}
.footer-brand{display:flex;flex-direction:column}
.footer-brand strong{font-family:Georgia,serif;font-size:34px;line-height:.9;letter-spacing:2px}
.footer-brand span{margin-top:5px;font-size:9px;font-weight:700;letter-spacing:.08em}
.footer-nav{display:flex;gap:20px;flex-wrap:wrap}
.footer-nav a{color:#d8e2e7;text-decoration:none;text-transform:uppercase;font-size:10px;font-weight:700}
.footer-contact{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.footer-contact a{color:var(--yellow);font-size:15px;font-weight:800;text-decoration:none}
.footer-contact span{color:#9eb0ba;font-size:11px}
@media(max-width:900px){
 .nav{position:relative}
 .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--deep);padding:8px 24px 18px;box-shadow:0 14px 24px rgba(0,0,0,.28);z-index:200}
 .nav-links.open{display:flex}
 .nav-links a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12);width:100%}
 .nav-links a::after{display:none}
 .dropdown{width:100%}
 .dropdown-trigger{width:100%;justify-content:space-between;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
 .dropdown-menu{display:none;position:static;background:transparent;box-shadow:none;padding:0 0 0 16px}
 .dropdown.open .dropdown-menu{display:block}
 .dropdown-menu a{color:#fff!important;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.08)}

 .nav-toggle{display:flex;flex-direction:column;justify-content:center;gap:5px;width:30px;height:30px;margin-left:auto;background:transparent;border:0;cursor:pointer;padding:0}
 .nav-toggle span{display:block;width:100%;height:2px;background:#fff}

 .nav-cta{margin-left:10px}
 .footer-main{grid-template-columns:1fr;gap:22px}.footer-contact{align-items:flex-start}
}
@media(min-width:901px){
 .nav-toggle{display:none}
}
@media(max-width:560px){
 .container{width:min(100% - 28px,1180px)}.nav{min-height:68px}
 .brand-main{font-size:33px}.brand-sub{font-size:9px}.nav-cta{font-size:10px;padding:0 11px}
}

/* ==================================================
   BOTÓN FLOTANTE DE WHATSAPP
   Fijo en pantalla, visible en todas las páginas que
   incluyan el HTML de .whatsapp-float (ver snippet).
================================================== */
.whatsapp-float{
  position:fixed;
  bottom:22px;
  right:22px;
  width:58px;
  height:58px;
  background:#25D366;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.3);
  z-index:999;
  transition:transform .2s ease;
}
.whatsapp-float:hover{transform:scale(1.08)}
.whatsapp-float svg{width:30px;height:30px;fill:#fff}
@media(max-width:560px){
  .whatsapp-float{width:52px;height:52px;bottom:16px;right:16px}
  .whatsapp-float svg{width:26px;height:26px}
}

/* ==================================================
   SCROLL REVEAL
   Funciona junto con /js/reveal.js — ese script agrega
   la clase .reveal--visible cuando el bloque entra en pantalla.
================================================== */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal--visible{opacity:1;transform:translateY(0)}

/* Escalonado dentro de una grilla: cada tarjeta se demora un
   poco más que la anterior en aparecer (efecto cascada). */
.material-grid .reveal:nth-child(1),.truck-grid .reveal:nth-child(1),.zone-cards .reveal:nth-child(1),.aridos-preview .reveal:nth-child(1){transition-delay:0s}
.material-grid .reveal:nth-child(2),.truck-grid .reveal:nth-child(2),.zone-cards .reveal:nth-child(2),.aridos-preview .reveal:nth-child(2){transition-delay:.1s}
.material-grid .reveal:nth-child(3),.truck-grid .reveal:nth-child(3),.zone-cards .reveal:nth-child(3),.aridos-preview .reveal:nth-child(3){transition-delay:.2s}
.material-grid .reveal:nth-child(4),.aridos-preview .reveal:nth-child(4){transition-delay:.3s}
.material-grid .reveal:nth-child(5){transition-delay:.4s}
.material-grid .reveal:nth-child(6){transition-delay:.5s}
.material-grid .reveal:nth-child(7){transition-delay:.6s}
.material-grid .reveal:nth-child(8){transition-delay:.7s}
.material-grid .reveal:nth-child(9){transition-delay:.8s}