/* ============================================================================
   WOLVES EARTHWORKS & SITE SERVICES — hoja de estilos del sitio
   Sistema visual tomado del modelo aprobado: Oswald + Barlow, coal / rojo /
   sand / paper, cortes diagonales en los botones.
   Compartida por todas las paginas para que editar una seccion no obligue a
   tocar 40 archivos.
   ========================================================================== */

:root{
  --coal:#141414;
  --coal-2:#1e1e1e;
  --steel:#2a2a2a;
  --red:#c8181f;
  --red-dark:#9e1319;
  --sand:#c9bfae;
  --sand-light:#e8e3d8;
  --paper:#f4f1ea;
  --white:#ffffff;
  --ink:#565046;
  --line:rgba(255,255,255,.10);
  --line-dark:rgba(20,20,20,.14);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  color:var(--coal);background:var(--paper);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,.display{font-family:'Oswald',Impact,'Arial Narrow',sans-serif;font-weight:700;line-height:1.02;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Placeholders de foto (se quitan al subir imagenes) ---------- */
.photo{
  background:repeating-linear-gradient(45deg,#26241f 0 14px,#2c2a24 14px 28px);
  position:relative;display:flex;align-items:center;justify-content:center;
  color:var(--sand);text-align:center;
  border:1px dashed rgba(201,191,174,.35);overflow:hidden;
}
.photo span{
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:8px 14px;background:rgba(20,20,20,.55);border-radius:2px;
}
/* Cuando .photo lleva una <img> real deja de comportarse como placeholder:
   se le quita el rayado y el borde punteado, y la imagen llena la caja.
   Asi el mismo marcado sirve para foto puesta y para hueco pendiente. */
.photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
.photo:has(img){background:var(--coal);border:none}
/* Pie de foto opcional, encima de la imagen */
.photo .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--white);
  padding:26px 14px 10px;text-align:left;background:none;border-radius:0;
  background-image:linear-gradient(transparent,rgba(20,20,20,.88));
}

/* ---------- Barra superior ---------- */
.topbar{
  background:var(--coal-2);color:var(--sand-light);
  font-size:.82rem;letter-spacing:.04em;border-bottom:1px solid var(--line);
}
/* min-height en vez de height fijo: si algun dia el contenido necesita dos
   lineas, la barra crece en vez de recortar el texto por arriba y por abajo. */
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px}
.topbar .tb-left{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.topbar b{color:var(--white);font-weight:600}
.topbar .lang a{color:var(--sand);font-weight:600;padding:0 6px}
.topbar .lang a[aria-current]{color:var(--red)}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(20,20,20,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
/* El logo es un lockup horizontal (lobo + WOLVES + subtitulo), asi que no
   lleva texto al lado: lo duplicaria. Usa la version -light porque el lobo y
   el subtitulo son negros y sobre el header #141414 desaparecen. */
.nav .logo{display:flex;align-items:center;color:var(--white)}
.nav .logo img{height:54px;width:auto}
.nav .logo .wordmark{font-family:'Oswald',sans-serif;font-weight:700;font-size:1.1rem;line-height:1.05;text-transform:uppercase;letter-spacing:.02em}
.nav .logo .wordmark small{display:block;font-size:.62rem;font-weight:500;letter-spacing:.18em;color:var(--sand)}

@media(max-width:560px){
  .nav .logo img{height:44px}
}

.nav-links{display:flex;gap:28px;align-items:center}
.nav-links a{color:var(--sand-light);font-weight:600;font-size:.95rem;transition:color .18s}
.nav-links a:hover{color:var(--white)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:1rem;letter-spacing:.02em;
  background:var(--red);color:var(--white);padding:14px 26px;border:none;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% 100%,10px 100%);
  transition:background .18s,transform .18s;
}
.btn:hover{background:var(--red-dark);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.35);clip-path:none}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,.06)}
.btn-dark{background:var(--coal);clip-path:none}
.btn-dark:hover{background:#000}
.menu-toggle{display:none;background:none;border:none;color:var(--white);cursor:pointer}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--coal);color:var(--white);overflow:hidden;padding:0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:620px;align-items:center}
.hero-copy{padding:72px 60px 72px 0}
.hero-tag{
  display:inline-block;font-family:'Oswald',sans-serif;font-weight:600;color:var(--red);
  font-size:.9rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:20px;
  padding-left:44px;position:relative;
}
.hero-tag::before{content:"";position:absolute;left:0;top:50%;width:32px;height:2px;background:var(--red);transform:translateY(-50%)}
.hero h1{font-size:clamp(2.3rem,4.8vw,4.1rem);text-transform:uppercase;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--red);display:block}
.hero .sub{font-size:1.14rem;color:var(--sand-light);max-width:46ch;margin-bottom:14px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:22px}
.hero-micro{color:var(--sand);font-size:.86rem;margin-top:14px}
.hero-rating{display:flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--sand-light);font-size:.95rem}
.hero-rating .stars{color:#f5b301;letter-spacing:2px}
/* Las portadas son verticales (1122x1402 = 4:5).
   La caja toma esa proporcion a partir del ANCHO de la columna, sin
   height:100% ni min-height: esos dos peleaban con aspect-ratio y hacian
   que la foto se desbordara por encima de la barra de estadisticas.
   Sin altura impuesta, la fila del grid crece para contenerla y no hay
   forma de que se salga. overflow:hidden es el cinturon de seguridad. */
.hero-photo{position:relative;aspect-ratio:4/5;height:auto;min-height:0;max-height:820px;
            align-self:center;margin-left:auto;width:100%;overflow:hidden}
.hero-photo .photo{position:absolute;inset:0;border:none;border-left:4px solid var(--red)}
.hero-stats{display:flex;border-top:1px solid var(--line);background:var(--coal-2);max-width:1200px;margin:0 auto}
.hero-stats .stat{flex:1;padding:24px 30px;border-right:1px solid var(--line)}
.hero-stats .stat:last-child{border-right:none}
.stat .num{font-family:'Oswald',sans-serif;font-weight:700;font-size:2.1rem;color:var(--white);line-height:1}
.stat .num span{color:var(--red)}
.stat .lbl{color:var(--sand);font-size:.88rem;margin-top:6px}

/* ---------- Barra de confianza ---------- */
.trustbar{background:var(--steel);color:var(--sand-light);padding:0;border-bottom:1px solid var(--line)}
.trustbar ul{display:flex;flex-wrap:wrap;list-style:none;margin:0}
.trustbar li{
  flex:1 1 auto;padding:16px 22px;font-size:.9rem;display:flex;align-items:center;gap:10px;
  border-right:1px solid var(--line);
}
.trustbar li:last-child{border-right:none}
.trustbar .dot{width:7px;height:7px;background:var(--red);flex:none;transform:rotate(45deg)}
.trustbar a{text-decoration:underline;text-underline-offset:3px}

/* ---------- Shell de seccion ---------- */
section{padding:88px 0}
.eyebrow{font-family:'Oswald',sans-serif;font-weight:600;color:var(--red);font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:14px}
.section-head{max-width:680px;margin-bottom:52px}
.section-head h2{font-size:clamp(1.9rem,3.6vw,2.9rem);text-transform:uppercase}
.section-head p{color:#4a463d;font-size:1.08rem;margin-top:16px}
.on-dark{background:var(--coal);color:var(--white)}
.on-dark .section-head p{color:var(--sand-light)}
.on-white{background:var(--white)}

/* ---------- Selector de carril B2C / B2B ---------- */
.lanes{background:var(--paper);padding:56px 0}
/* Cuatro carriles en 2x2. El gap de 1px sobre fondo oscuro dibuja las lineas
   divisorias solo, sin tener que calcular que borde quitar en cada celda. */
.lane-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;
           background:var(--line-dark);border:1px solid var(--line-dark)}
.lane{
  padding:34px 32px;background:var(--white);
  display:flex;flex-direction:column;gap:12px;transition:background .2s;
}
/* El primero es el dueno de terreno y va en claro. Los otros tres son los
   carriles B2B y van en oscuro: se leen como un bloque aparte, que es
   exactamente lo que son. */
.lane:not(:first-child){background:var(--coal);color:var(--white)}
.lane:first-child:hover{background:var(--paper)}
.lane:not(:first-child):hover{background:var(--coal-2)}
.lane h3{font-size:1.4rem;text-transform:uppercase}
.lane p{color:var(--ink);font-size:.99rem}
.lane:not(:first-child) p{color:var(--sand-light)}
.lane .btn{align-self:flex-start;margin-top:auto}

/* ---------- Servicios ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dark);border-left:1px solid var(--line-dark)}
.svc{
  padding:36px 32px;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);
  background:var(--white);transition:background .2s;position:relative;display:block;
}
.svc:hover{background:var(--paper)}
.svc-ico{width:52px;height:52px;margin-bottom:20px;display:flex;align-items:center;justify-content:center;background:var(--coal);color:var(--red)}
.svc-ico svg{width:28px;height:28px}
.svc h3{font-size:1.32rem;text-transform:uppercase;margin-bottom:10px}
.svc p{color:var(--ink);font-size:.99rem}
.svc .range{
  display:inline-block;margin-top:14px;font-family:'Oswald',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--red);
}

/* ---------- Precios ---------- */
.pricing{background:var(--coal);color:var(--white)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.price{padding:32px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.price h3{font-size:1.05rem;text-transform:uppercase;color:var(--sand);letter-spacing:.06em;margin-bottom:10px}
.price .fig{font-family:'Oswald',sans-serif;font-weight:700;font-size:2rem;color:var(--white);line-height:1.1}
.price .fig span{color:var(--red);font-size:1rem;display:block;font-weight:500;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.price p{color:var(--sand-light);font-size:.94rem;margin-top:12px}
.price-note{
  margin-top:34px;padding:26px 30px;background:var(--coal-2);border-left:4px solid var(--red);
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;
}
.price-note p{color:var(--sand-light);max-width:70ch}
.price-note strong{color:var(--white)}
.factors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.factor{border-top:3px solid var(--red);padding-top:16px}
.factor h4{font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:1.05rem;color:var(--white);margin-bottom:6px}
.factor p{color:var(--sand-light);font-size:.94rem}

/* ---------- Franja de fotos ---------- */
.band{background:var(--coal);padding:0}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr)}
/* Altura por PROPORCION, no fija. Con height:300px en pantalla ancha cada
   hueco quedaba en 2.2:1 y object-fit:cover se comia media foto. Con 3/2
   la caja tiene la proporcion de la imagen y no se corta nada; el clamp
   evita que en un monitor ultra ancho se vuelva un muro. */
.band-grid .photo{aspect-ratio:3/2;height:auto;max-height:clamp(300px,32vw,460px)}
.band-grid .photo:nth-child(2){border-left:1px solid #000;border-right:1px solid #000}

/* ---------- Proceso ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step{position:relative;padding-top:20px}
.step .n{font-family:'Oswald',sans-serif;font-weight:700;font-size:3rem;color:var(--red);line-height:1}
.step h3{font-size:1.2rem;text-transform:uppercase;margin:10px 0 8px}
.step p{color:var(--ink);font-size:.97rem}
.step .when{display:block;margin-top:10px;font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coal);background:var(--sand-light);padding:5px 10px}
.step::before{content:"";position:absolute;top:8px;left:0;width:40px;height:4px;background:var(--coal)}

/* ---------- Split / why us ---------- */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
/* Misma idea: la caja toma la proporcion de la foto (3:2) en vez de una
   altura fija que la recortaba arriba y abajo. */
.split-photo{height:auto;aspect-ratio:3/2}
.split-photo .photo{height:100%;border-left:4px solid var(--red)}
.why-list{list-style:none;margin-top:26px}
.why-list li{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-dark)}
.why-list li:last-child{border-bottom:none}
.why-list .mark{flex:none;width:34px;height:34px;background:var(--coal);color:var(--red);display:flex;align-items:center;justify-content:center;font-weight:700}
.why-list h3{font-size:1.12rem;text-transform:uppercase;margin-bottom:3px}
.why-list p{color:var(--ink);font-size:.97rem}

/* ---------- Testimonios ---------- */
.reviews{background:var(--paper)}
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.rev{background:var(--white);padding:28px 26px;border-top:3px solid var(--red)}
.rev .stars{color:#f5b301;letter-spacing:2px;margin-bottom:12px}
.rev p{color:var(--ink);font-size:1rem}
.rev .who{margin-top:16px;font-family:'Oswald',sans-serif;text-transform:uppercase;font-size:.88rem;letter-spacing:.06em}
.rev .who span{display:block;color:var(--red);font-size:.76rem;letter-spacing:.12em;margin-top:2px}

/* ---------- Equipo / flota ---------- */
.fleet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.fleet .photo{height:190px;margin-bottom:12px}
.fleet h3{font-size:1.02rem;text-transform:uppercase;margin-bottom:4px}
.fleet p{color:var(--sand-light);font-size:.9rem}

/* ---------- Permisos ---------- */
.permits{background:var(--white)}
.permit-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.permit-card{background:var(--paper);border-left:4px solid var(--red);padding:26px 28px;margin-bottom:18px}
.permit-card h3{font-size:1.15rem;text-transform:uppercase;margin-bottom:8px}
.permit-card p{color:var(--ink);font-size:.98rem}

/* ---------- Areas de servicio ---------- */
.areas{background:var(--coal);color:var(--white)}
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.area h3{font-size:1rem;text-transform:uppercase;color:var(--red);letter-spacing:.08em;margin-bottom:12px}
.area ul{list-style:none}
.area li{margin-bottom:6px}
.area a{color:var(--sand-light);font-size:.96rem}
.area a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px}
/* 2026-10-14: ciudades sin pagina todavia = texto sin link, mismo color que tenian */
.area li span{color:var(--sand-light);font-size:.96rem}

/* ---------- FAQ ---------- */
.faq{background:var(--paper)}
.faq details{background:var(--white);border-left:3px solid var(--line-dark);margin-bottom:10px;transition:border-color .2s}
.faq details[open]{border-left-color:var(--red)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 24px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:1.08rem;
  display:flex;justify-content:space-between;gap:18px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--red);font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"–"}
.faq .answer{padding:0 24px 22px;color:var(--ink)}
/* 2026-10-15: el FAQ de las paginas de servicio usa <button class="q"> dentro de
   .faq-item (no <details>). No tenia estilos: se veia como boton gris y las
   respuestas no se cerraban. Mismo look y comportamiento que el de la home. */
.faq .faq-item{background:var(--white);border-left:3px solid var(--line-dark);margin-bottom:10px;transition:border-color .2s}
.faq .faq-item.open{border-left-color:var(--red)}
.faq .faq-item .q{
  cursor:pointer;width:100%;text-align:left;background:none;border:0;color:inherit;padding:20px 24px;
  font-family:'Oswald',sans-serif;font-weight:600;font-size:1.08rem;
  display:flex;justify-content:space-between;gap:18px;align-items:center;
}
.faq .faq-item .q::after{content:"+";color:var(--red);font-size:1.5rem;line-height:1;flex:none}
.faq .faq-item.open .q::after{content:"–"}
.faq .faq-item .q:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.faq .faq-item .answer{display:none}
.faq .faq-item.open .answer{display:block}

/* ---------- Formulario ---------- */
.quote{background:var(--coal);color:var(--white)}
.quote-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.quote h2{font-size:clamp(1.9rem,3.6vw,2.9rem);text-transform:uppercase}
.quote .lede{color:var(--sand-light);font-size:1.08rem;margin-top:16px}
.quote-points{list-style:none;margin-top:26px}
.quote-points li{display:flex;gap:12px;padding:10px 0;color:var(--sand-light);font-size:.98rem}
.quote-points .mark{color:var(--red);font-weight:700;flex:none}
form.wew{background:var(--coal-2);padding:34px 32px;border-top:4px solid var(--red)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px}
.field label{display:block;font-family:'Oswald',sans-serif;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sand);margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%;padding:13px 14px;background:var(--coal);color:var(--white);
  border:1px solid var(--line);font-family:inherit;font-size:1rem;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.field textarea{min-height:110px;resize:vertical}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:var(--red);background:rgba(200,24,31,.08)}
.consent{display:flex;gap:11px;align-items:flex-start;margin-bottom:12px;font-size:.83rem;color:var(--sand);line-height:1.5}
.consent input{width:17px;height:17px;flex:none;margin-top:2px;accent-color:var(--red)}
.consent.has-error{color:#ff8b8f}
form.wew .btn{width:100%;padding:17px;font-size:1.06rem;margin-top:8px}
.form-fine{color:#7d766a;font-size:.76rem;margin-top:14px;line-height:1.5}

/* ---------- CTA ---------- */
.cta{background:var(--red);color:var(--white);text-align:center;position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,rgba(0,0,0,.06) 0 22px,transparent 22px 44px)}
.cta .wrap{position:relative}
.cta h2{font-size:clamp(1.9rem,3.8vw,3rem);text-transform:uppercase;margin-bottom:16px}
.cta p{font-size:1.15rem;max-width:54ch;margin:0 auto 30px;color:rgba(255,255,255,.92)}
.cta-phone{font-family:'Oswald',sans-serif;font-weight:700;font-size:clamp(1.9rem,5vw,3.2rem);margin-top:14px;display:block}

/* ---------- Footer ---------- */
footer{background:var(--coal);color:var(--sand);padding:60px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
footer .foot-logo{height:64px;width:auto;margin-bottom:16px}
footer h4{font-family:'Oswald',sans-serif;color:var(--white);font-size:1rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
footer a,footer li{color:var(--sand);font-size:.96rem;line-height:2;list-style:none}
footer a:hover{color:var(--white)}
.foot-bottom{border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#7d766a;font-size:.88rem}

/* ---------- Barra movil fija de llamada ---------- */
.mobile-bar{display:none}
@media(max-width:768px){
  .mobile-bar{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;
    box-shadow:0 -3px 16px rgba(0,0,0,.28);
  }
  .mobile-bar a{
    padding:15px 8px;text-align:center;font-family:'Oswald',sans-serif;font-weight:600;
    font-size:1rem;letter-spacing:.04em;color:var(--white);
  }
  .mobile-bar .call{background:var(--red)}
  .mobile-bar .quote-btn{background:var(--coal)}
  body{padding-bottom:54px}
}

/* ---------- Responsive ---------- */
@media(max-width:1000px){
  .fleet-grid{grid-template-columns:repeat(2,1fr)}
  .area-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
}
@media(max-width:900px){
  section{padding:64px 0}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{padding:52px 0 36px}
  /* En movil la columna ocupa todo el ancho y 4:5 la dejaria altisima,
     asi que se fija una altura acotada y manda object-fit:cover. */
  .hero-photo{min-height:0;height:clamp(380px,92vw,520px);margin-left:0;position:relative;overflow:hidden}
  .hero-photo .photo{position:absolute;inset:0;height:100%}
  .svc-grid{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .split-grid,.permit-grid,.quote-grid{grid-template-columns:1fr;gap:36px}
  .split-photo{height:auto;aspect-ratio:3/2}
  .band-grid{grid-template-columns:1fr}
  .lane-grid{grid-template-columns:1fr}
  .lane{border-right:none}
  .rev-grid{grid-template-columns:1fr}
  .factors{grid-template-columns:1fr}
  .price-note{grid-template-columns:1fr}
  .nav-links{display:none}
  .menu-toggle{display:block}
  /* En movil solo cabe UNA afirmacion al lado del selector de idioma.
     Antes se mostraban dos, se envolvian a dos lineas dentro de una barra
     de 38px de alto fijo, y el texto salia cortado por arriba y por abajo.
     Se deja la del seguro —la que mas pesa para quien va a contratar— y se
     prohibe el wrap para que nunca pueda volver a pasar. */
  .topbar .tb-left{flex-wrap:nowrap;gap:0}
  .topbar .tb-left b:nth-child(n+2){display:none}
  .topbar .tb-left b{white-space:nowrap}
}
@media(max-width:560px){
  /* En espanol la frase del seguro es mas larga que en ingles y en una
     pantalla de 320px rozaba el selector de idioma. */
  .topbar{font-size:.74rem}
  .topbar .wrap{padding:0 14px}
  .svc-grid,.price-grid,.steps,.fleet-grid,.area-grid,.foot-grid{grid-template-columns:1fr}
  .form-row{grid-template-columns:1fr}
  .hero-stats{flex-wrap:wrap}
  .hero-stats .stat{flex:1 1 50%;border-bottom:1px solid var(--line)}
}

/* ---------- Paginas legales (privacy / terms) ---------- */
.legal-hero{background:var(--coal);color:var(--white);padding:64px 0 56px}
.legal-hero .eyebrow{margin-bottom:12px}
.legal-hero h1{font-size:clamp(2rem,4.4vw,3.2rem);text-transform:uppercase}
.legal-hero .updated{color:var(--sand);margin-top:14px;font-size:.95rem}
.legal{background:var(--white);padding:64px 0 80px}
.legal .wrap{max-width:820px}
.legal h2{font-size:1.5rem;text-transform:uppercase;margin:44px 0 14px;padding-top:22px;border-top:1px solid var(--line-dark)}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:none}
.legal h3{font-size:1.1rem;text-transform:uppercase;margin:26px 0 10px}
.legal p{margin-bottom:16px;color:#3d3931}
.legal ul{margin:0 0 18px 22px}
.legal li{margin-bottom:8px;color:#3d3931}
.legal a{color:var(--red-dark);text-decoration:underline;text-underline-offset:3px}
.legal .callout{background:var(--paper);border-left:4px solid var(--red);padding:20px 24px;margin:22px 0}
.legal .callout p:last-child{margin-bottom:0}
.legal .quoted{font-style:italic;color:#4a463d;border-left:3px solid var(--line-dark);padding-left:18px;margin:18px 0}
.legal .contact-card{background:var(--coal);color:var(--sand-light);padding:30px 32px;margin-top:44px;border-top:4px solid var(--red)}
.legal .contact-card h3{color:var(--white);margin-top:0}
.legal .contact-card a{color:var(--white)}
.legal .contact-card p{color:var(--sand-light)}

/* ---------- 2026-10-14: arreglo celular / tablet (solo se agrega) ----------
   Dos rejillas traen columnas fijas escritas en el HTML (style="...") que le
   ganaban al responsive de arriba:
   1) Fotos de "Projects" del home EN/ES: 3 columnas siempre y cada foto con
      height:240px. Con aspect-ratio 3/2 cada foto media 360px de ancho aunque
      la columna midiera 103px: en celular y tablet se montaban una encima de
      otra y la pagina se movia de lado (623px de ancho en un iPhone).
   2) Tarjetas de permisos de las 7 paginas de servicio: 2 columnas fijas que
      en celular no caben; la pagina se movia de lado unos pixeles.
   En computadora (pantalla de 1161px o mas) esto no cambia nada. */
@media(max-width:1160px){
  .band-grid[style] .photo{height:auto!important}
}
@media(max-width:900px){
  .band-grid[style]{grid-template-columns:1fr 1fr!important}
}
@media(max-width:560px){
  .band-grid[style]{grid-template-columns:1fr!important}
  .permit-grid[style]{grid-template-columns:1fr!important}
}
@media(max-width:350px){
  /* En espanol "AUTOCONSTRUCTORES" no cabia en pantallas de 320px de ancho. */
  .lane{padding:28px 20px}
  .lane h3{font-size:1.2rem}
}
/* 2026-10-14: tarjetas de servicio SIN enlace (en /es/, hasta que existan las
   paginas en espanol): que no parezcan clicables. */
div.svc{cursor:default}
div.svc:hover{background:var(--white)}