/* ==================================================================
   APEX MOTORS GT · sitio publico
   Garage premium: todo oscuro, tipografia condensada grande, hairlines
   finos, un solo acento color piel. Sin verde, sin dorado saturado.
   ================================================================== */

:root{
  --negro:#08080a; --carbon:#0d0e10; --grafito:#121315; --humo:#1b1c20;
  --gris:#65666b; --gris2:#8e9095; --gris3:#b9bbc0;
  --blanco:#ffffff; --hueso:#f3f1ee; --tinta:#101012; --tinta2:#55565b; --tinta3:#8a8b90;

  /* piel: el unico acento. Neutro calido, nada de amarillo */
  --piel:#dcc8b4; --piel2:#eddfd1; --piel3:#f6efe7; --piel-osc:#a68d78;

  --hilo:rgba(255,255,255,.085);
  --hilo2:rgba(255,255,255,.16);
  --ancho:1180px;
  --bisel:16px;
  --barra-h:64px;
  /* respiracion fluida: crece con el ancho en vez de saltar por tramos */
  --aire:clamp(56px,7.4vw,104px);
  --margen:clamp(18px,4.4vw,24px);

  --fibra:
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.24) 0 1px, transparent 1px 3px);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--barra-h);
  -webkit-text-size-adjust:100%; text-size-adjust:100%}
body{
  margin:0; background:var(--negro); color:var(--gris3);
  font:16px/1.68 "Barlow","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

h1,h2,h3{
  margin:0; font-family:"Barlow Condensed","Arial Narrow",Impact,sans-serif;
  font-weight:700; line-height:.98; letter-spacing:-.012em; text-transform:uppercase;
  color:var(--blanco);
}

.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--margen)}
.envoltura.angosta{max-width:840px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.ico .lleno,.lleno{fill:currentColor}

.saltar{position:absolute;left:-9999px;top:0;background:var(--piel);color:var(--negro);
  padding:10px 16px;z-index:100}
.saltar:focus{left:0}

/* rotulo tecnico */
.kicker{margin:0 0 18px;font-family:"Barlow Condensed",sans-serif;font-size:13.5px;
  font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--piel);
  display:flex;align-items:center;gap:14px}
.kicker::before{content:"";width:40px;height:1px;background:var(--piel);flex:0 0 auto;
  opacity:.55}

.titulo{font-size:clamp(34px,5.4vw,62px)}
.bajada{margin:22px 0 0;font-size:17.5px;color:var(--gris2);max-width:650px}

.banda{height:1px;background:linear-gradient(90deg,transparent,var(--hilo2) 20%,
  var(--hilo2) 80%,transparent)}

/* ---------------- barra ---------------- */
.barra{position:sticky;top:0;z-index:50;background:rgba(8,8,10,.86);
  backdrop-filter:saturate(150%) blur(16px);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  border-bottom:1px solid var(--hilo)}
.barra-fila{display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:var(--barra-h)}
.marca img{height:26px;width:auto;filter:brightness(0) invert(1);opacity:.94}

.menu{display:flex;align-items:center;gap:24px}
.menu a{color:var(--gris2);text-decoration:none;font-family:"Barlow Condensed",sans-serif;
  font-size:15.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;transition:color .16s}
.menu a:hover{color:var(--blanco)}

.hamburguesa{display:none;background:none;border:0;padding:10px;cursor:pointer}
.hamburguesa span{display:block;width:22px;height:1.5px;background:#fff;margin:5px 0;
  transition:transform .22s,opacity .22s}
.hamburguesa[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburguesa[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburguesa[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ---------------- botones ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border:1px solid transparent;cursor:pointer;text-decoration:none;
  font-family:"Barlow Condensed",sans-serif;font-size:17px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:transform .14s,background .2s,color .2s,border-color .2s}
.btn:active{transform:translateY(1px)}
.btn.grande{padding:17px 34px;font-size:19.5px}
.btn.bloque{width:100%}
.btn .ico{width:19px;height:19px}
.btn-solido{background:var(--piel);color:var(--negro)}
.btn-solido:hover{background:var(--blanco)}
.btn-linea{border-color:var(--hilo2);color:var(--hueso)}
.btn-linea:hover{border-color:var(--piel);color:var(--piel)}
.menu-wa{background:transparent;border:1px solid var(--hilo2);color:var(--hueso);
  padding:9px 18px;font-size:15.5px}
.menu-wa:hover{background:var(--piel);color:var(--negro);border-color:var(--piel)}

/* ---------------- portada ---------------- */
.portada{position:relative;overflow:hidden;padding:clamp(56px,9vw,112px) 0 0;
  background:var(--negro);
  border-bottom:1px solid var(--hilo)}

/* foto del taller o del carro. Si no existe portada.jpg no se muestra y
   queda el dibujo tecnico. Lo decide app.js. */
.portada-foto{position:absolute;inset:0;z-index:0;opacity:0;
  background:var(--negro) center/cover no-repeat;
  /* se desatura solo a medias: el cobre de las piezas es justo el color piel
     de la marca, y quitarlo del todo apagaria la foto */
  filter:grayscale(.4) saturate(.9) contrast(1.06) brightness(.44)}
.portada.con-foto .portada-foto{opacity:1;background-image:url("portada.jpg")}
.portada.con-foto .portada-auto{display:none}

/* dibujo tecnico del vehiculo, de respaldo */
.portada-auto{position:absolute;right:-70px;bottom:60px;width:min(1060px,88vw);height:auto;
  z-index:1;opacity:.34;pointer-events:none;
  fill:none;stroke:var(--gris3);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.portada-auto .vidrio{fill:rgba(220,200,180,.06);stroke:var(--piel);stroke-opacity:.8}
.portada-auto .fino{stroke-width:.9;stroke:var(--gris);stroke-opacity:.9}
.portada-auto .suelo{stroke:var(--piel);stroke-opacity:.3;stroke-width:1}

.portada-velo{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    linear-gradient(100deg, var(--negro) 4%, rgba(8,8,10,.94) 32%,
      rgba(8,8,10,.58) 64%, rgba(8,8,10,.34) 100%),
    linear-gradient(0deg, var(--negro) 1%, transparent 24%)}

.portada-caja{position:relative;z-index:3;max-width:1000px;padding-bottom:0}
.portada h1{font-size:clamp(50px,9.6vw,116px);line-height:.9;letter-spacing:-.028em;
  color:var(--blanco)}
.portada h1 em{font-style:normal;color:var(--piel);display:inline-block}
.entrada{margin:30px 0 0;font-size:clamp(16.5px,2vw,20px);color:var(--gris3);max-width:590px;
  line-height:1.6}
.acciones{display:flex;flex-wrap:wrap;gap:14px;margin:40px 0 84px}

/* ficha tecnica: pegada al fondo, ancho completo */
.ficha{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);
  gap:0;margin:0;border-top:1px solid var(--hilo)}
.ficha div{padding:26px 26px 30px;border-left:1px solid var(--hilo)}
.ficha div:first-child{padding-left:0;border-left:0}
.ficha dt{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--piel);margin-bottom:6px}
.ficha dd{margin:0;font-family:"Barlow Condensed",sans-serif;font-size:21px;font-weight:600;
  text-transform:uppercase;letter-spacing:.01em;color:var(--hueso);line-height:1.15}

/* ---------------- secciones ---------------- */
.seccion{position:relative;padding:var(--aire) 0;overflow:hidden;
  /* Al llegar desde un enlace del menu, el navegador alinea el borde de arriba
     de la seccion con la barra. Como la seccion tiene 104px de aire propio, el
     titulo quedaba hundido y encima asomaba una franja de la seccion anterior.
     Con el margen negativo se salta ese aire y el rotulo aterriza a 48px de la
     barra, que es donde se ve encuadrado. */
  scroll-margin-top:calc(64px - var(--aire))}
.lineas,.repuestos,.contacto{background:var(--negro);background-image:var(--fibra)}
.taller,.proceso,.porque{background:var(--carbon);background-image:var(--fibra)}
.preguntas{background:var(--grafito);background-image:var(--fibra)}
.seccion + .seccion{border-top:1px solid var(--hilo)}

/* numero de seccion enorme, al fondo */
.seccion::before{content:attr(data-n);position:absolute;top:52px;right:26px;
  font-family:"Barlow Condensed",sans-serif;font-size:clamp(110px,17vw,230px);
  font-weight:700;line-height:.8;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.045);pointer-events:none;z-index:0}
.seccion > .envoltura{position:relative;z-index:1}

/* ---------------- dos modulos ---------------- */
.dos-modulos{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--hilo)}
.modulo{position:relative;padding:52px 44px 44px;border-left:1px solid var(--hilo);
  transition:background .24s}
.modulo:first-child{border-left:0}
.modulo:hover{background:rgba(255,255,255,.022)}
.modulo::after{content:"";position:absolute;left:0;top:0;width:0;height:2px;
  background:var(--piel);transition:width .34s ease}
.modulo:hover::after{width:100%}
.ref{position:absolute;top:22px;right:28px;font-family:"Barlow Condensed",sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--piel);opacity:.55}
.modulo .ico-grande{width:34px;height:34px;fill:none;stroke:var(--piel);
  stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;margin-bottom:24px}
.modulo .ico-grande .lleno{fill:var(--piel)}
.modulo h2{font-size:clamp(28px,3.4vw,40px);margin-bottom:16px}
.modulo p{margin:0 0 28px;color:var(--gris2);font-size:15.5px}
.enlace-flecha{font-family:"Barlow Condensed",sans-serif;font-size:15.5px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--piel);text-decoration:none;
  border-bottom:1px solid rgba(220,200,180,.35);padding-bottom:4px}
.enlace-flecha::after{content:" →";transition:margin .18s}
.enlace-flecha:hover{color:var(--blanco);border-bottom-color:var(--blanco)}
.enlace-flecha:hover::after{margin-left:6px}

/* ---------------- servicios ---------------- */
.rejilla-servicios{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:56px;
  background:var(--hilo);border:1px solid var(--hilo)}
.serv{background:var(--carbon);padding:32px 28px 30px;position:relative;
  transition:background .2s}
.serv:hover{background:var(--humo)}
.serv .ico{width:26px;height:26px;stroke:var(--piel);margin-bottom:18px;opacity:.9}
.serv h3{font-size:23px;margin-bottom:10px}
.serv p{margin:0;font-size:14.5px;color:var(--gris2);line-height:1.62}

.nota-caja{margin-top:48px;padding:36px 38px;border:1px solid var(--hilo);
  border-left:2px solid var(--piel);
  background:linear-gradient(100deg,rgba(220,200,180,.07),transparent 62%);
  display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.nota-caja p{margin:0;flex:1 1 400px;color:var(--gris2);font-size:15.5px}
.nota-caja strong{color:var(--piel);font-weight:600}

/* ---------------- categorias de repuestos ---------------- */
.rejilla-cat{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:56px;
  background:var(--hilo);border:1px solid var(--hilo)}
.cat{background:var(--negro);padding:28px 22px;transition:background .2s}
.cat:hover{background:var(--humo)}
.cod{display:block;font-family:"Barlow Condensed",sans-serif;font-size:11.5px;
  font-weight:600;letter-spacing:.3em;color:var(--piel);opacity:.65;margin-bottom:12px}
.cat h3{font-size:21px;margin-bottom:8px}
.cat p{margin:0;font-size:13.5px;color:var(--gris);line-height:1.55}

.aviso-restringido{margin-top:44px;padding:32px 34px;border:1px solid var(--hilo);
  border-left:2px solid var(--piel-osc);background:rgba(255,255,255,.022)}
.aviso-restringido h3{font-size:23px;color:var(--piel);margin-bottom:12px}
.aviso-restringido p{margin:0;color:var(--gris2);font-size:15px}

/* ---------------- pasos ---------------- */
.pasos{list-style:none;margin:58px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:0 54px}
.pasos li{display:flex;gap:26px;padding:32px 0;border-top:1px solid var(--hilo)}
.paso-n{font-family:"Barlow Condensed",sans-serif;font-size:54px;font-weight:700;
  line-height:.9;color:transparent;-webkit-text-stroke:1px var(--piel);
  flex:0 0 auto;min-width:74px}
.pasos h3{font-size:25px;margin-bottom:12px}
.pasos p{margin:0;color:var(--gris2);font-size:15.5px}

/* ---------------- por que ---------------- */
.rejilla-por{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin-top:56px;
  background:var(--hilo);border:1px solid var(--hilo)}
.por{background:var(--carbon);padding:36px 34px;transition:background .2s}
.por:hover{background:var(--humo)}
.por h3{font-size:25px;margin-bottom:12px;color:var(--piel)}
.por p{margin:0;color:var(--gris2);font-size:15.5px}

/* ---------------- preguntas ---------------- */
details{border-bottom:1px solid var(--hilo)}
details:first-of-type{border-top:1px solid var(--hilo);margin-top:54px}
summary{padding:24px 48px 24px 2px;cursor:pointer;list-style:none;position:relative;
  font-family:"Barlow Condensed",sans-serif;font-size:24px;font-weight:600;
  text-transform:uppercase;letter-spacing:0;color:var(--hueso);transition:color .16s}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--piel)}
summary::after{content:"";position:absolute;right:8px;top:50%;width:15px;height:1px;
  background:var(--piel);transition:background .2s}
summary::before{content:"";position:absolute;right:15px;top:50%;width:1px;height:15px;
  margin-top:-7px;background:var(--piel);transition:transform .22s,opacity .22s}
details[open] summary{color:var(--piel)}
details[open] summary::before{opacity:0;transform:rotate(90deg)}
details p{margin:0 0 28px;color:var(--gris2);font-size:15.5px;max-width:700px}

/* ---------------- ubicacion ---------------- */
.ubicacion{background:var(--carbon);background-image:var(--fibra)}
/* El mapa va sin filtros de color: alterar el aspecto de Google Maps va contra
   sus condiciones de uso. En vez de eso se enmarca, para que se lea como una
   pantalla dentro de la pagina y no como un parche. */
.mapa-caja{margin-top:52px;border:1px solid var(--hilo2);padding:10px;
  background:rgba(255,255,255,.03);
  clip-path:polygon(var(--bisel) 0,100% 0,100% calc(100% - var(--bisel)),
    calc(100% - var(--bisel)) 100%,0 100%,0 var(--bisel))}
.mapa-caja iframe{display:block;width:100%;height:440px;border:0}
.mapa-acciones{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

/* ---------------- contacto ---------------- */
.contacto-fila{display:grid;grid-template-columns:1fr 440px;gap:64px;align-items:start}
.contacto-texto{min-width:0}
.datos{margin:44px 0 0;display:grid;gap:0;border-top:1px solid var(--hilo)}
.datos div{padding:18px 0 18px 20px;border-bottom:1px solid var(--hilo);
  border-left:1px solid var(--piel)}
.datos dt{font-family:"Barlow Condensed",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--piel);margin-bottom:4px}
.datos dd{margin:0;font-size:16.5px;color:var(--hueso)}
.datos a{color:var(--hueso);text-decoration:none;border-bottom:1px solid transparent}
.datos a:hover{color:var(--piel);border-bottom-color:var(--piel)}

/* el formulario es la unica pieza clara: contraste a proposito */
.formulario{background:var(--hueso);color:var(--tinta);padding:38px 34px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%)}
.formulario h3{font-size:28px;margin-bottom:6px;color:var(--tinta)}
.ayuda{margin:0 0 24px;font-size:13.5px;color:var(--tinta3)}
.formulario label{display:block;margin-bottom:16px;
  font-family:"Barlow Condensed",sans-serif;font-size:14px;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta2)}
.formulario label small{font-family:"Barlow",sans-serif;font-weight:400;font-size:12px;
  letter-spacing:0;text-transform:none;color:var(--tinta3);margin-left:6px}
.formulario input,.formulario select,.formulario textarea{
  width:100%;margin-top:7px;padding:12px 13px;border:0;border-bottom:1px solid #cfcbc5;
  background:transparent;color:var(--tinta);
  font:16px/1.5 "Barlow",Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:none;
  transition:border-color .16s}
.formulario textarea{resize:vertical;min-height:92px}
.formulario input:focus,.formulario select:focus,.formulario textarea:focus{
  outline:0;border-bottom-color:var(--tinta)}
.formulario input.malo{border-bottom-color:#9e3730}
.formulario .btn-solido{background:var(--tinta);color:var(--hueso);margin-top:10px}
.formulario .btn-solido:hover{background:var(--humo)}
.pie-form{margin:14px 0 0;text-align:center;min-height:18px}
.pie-form.error{color:#9e3730}

/* ---------------- pie ---------------- */
.pie{background:var(--negro);color:var(--gris);padding:0 0 44px;font-size:14px;
  border-top:1px solid var(--hilo)}
.pie .banda{margin-bottom:50px;background:none}
.pie-fila{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;align-items:start}
.pie-logo{height:24px;width:auto;filter:brightness(0) invert(1);opacity:.35;margin-bottom:16px}
.pie p{margin:0 0 6px}
.pie nav{display:flex;flex-direction:column;gap:11px}
.pie a{color:var(--gris);text-decoration:none;font-family:"Barlow Condensed",sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.pie a:hover{color:var(--piel)}
.pie-legal{text-align:right;font-size:13px}
.pie-legal a{font-size:13px;letter-spacing:.12em}

/* ---------------- boton flotante ---------------- */
.wa-flotante{position:fixed;right:22px;
  bottom:calc(22px + env(safe-area-inset-bottom,0px));width:54px;height:54px;
  background:var(--piel);color:var(--negro);display:grid;place-items:center;z-index:40;
  cursor:pointer;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:0 12px 30px rgba(0,0,0,.55);transition:transform .18s,background .18s}
.wa-flotante:hover{transform:translateY(-2px);background:var(--blanco)}
.wa-flotante svg{width:29px;height:29px;fill:currentColor}

/* ==================================================================
   RESPONSIVO
   Casi todo el ajuste ya viene de clamp() y de min(): el tamano crece
   con la pantalla en vez de saltar. Los cortes de abajo son solo para
   lo que si necesita cambiar de forma, no de tamano.

   Cortes:  1180  barra apretada (portatil chico)
            1024  iPad: menu de hamburguesa y rejillas mas cortas
             720  telefono: una sola columna
             430  telefono chico
   ================================================================== */

/* ---------- portatil chico: la barra se aprieta ---------- */
@media (max-width:1180px){
  .menu{gap:18px}
  .menu a{font-size:14.5px;letter-spacing:.1em}
}

/* ---------- iPad y abajo: menu desplegable ----------
   Con seis enlaces mas el boton, la barra no cabe en vertical en ninguna
   iPad. Antes de que se amontone, pasa a hamburguesa. */
@media (max-width:1024px){
  :root{--barra-h:58px}

  .menu{
    position:fixed;inset:var(--barra-h) 0 auto 0;background:var(--carbon);
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px var(--margen) calc(28px + env(safe-area-inset-bottom,0px));
    border-bottom:1px solid var(--hilo);
    transform:translateY(-130%);transition:transform .28s ease;
    max-height:calc(100vh - var(--barra-h));
    max-height:calc(100dvh - var(--barra-h));overflow-y:auto;
    overscroll-behavior:contain}
  .menu.abierto{transform:translateY(0)}
  .menu a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.055);
    font-size:19px;letter-spacing:.14em}
  .menu .menu-wa{margin-top:18px;border-bottom:0;justify-content:center;
    padding:14px 18px;font-size:17px}
  .hamburguesa{display:block;margin-right:-10px}

  .rejilla-cat{grid-template-columns:repeat(3,1fr)}
  .rejilla-servicios{grid-template-columns:repeat(2,1fr)}
  .contacto-fila{grid-template-columns:1fr;gap:44px}
  .formulario{max-width:560px}
  .ficha{grid-template-columns:repeat(2,1fr)}
  .ficha div:nth-child(3){padding-left:0;border-left:0}
  .ficha div{padding:22px 22px 26px}

  .portada-auto{right:-140px;bottom:70px;width:min(900px,105vw);opacity:.22}
  .acciones{margin:36px 0 68px}
  .mapa-caja iframe{height:400px}
}

/* ---------- telefono: una columna ---------- */
@media (max-width:720px){
  /* El banner es panoramico (2.7:1). En vertical, "cover" dejaria ver una
     franja angosta del centro. Se cambia por un recorte hecho aparte. */
  .portada.con-foto .portada-foto{background-image:url("portada-movil.jpg");
    background-position:center top}
  .portada{padding-top:44px}
  .portada h1{font-size:clamp(42px,12.5vw,64px);line-height:.94}
  .entrada{margin-top:22px}
  /* el carro se va al fondo, detras del texto, para que no compita */
  .portada-auto{right:-25vw;bottom:-4vw;width:150vw;opacity:.14}
  .portada-velo{background:
    linear-gradient(180deg, var(--negro) 8%, rgba(8,8,10,.78) 44%, rgba(8,8,10,.93) 100%)}
  .acciones{margin:30px 0 48px;gap:12px}
  .acciones .btn{flex:1 1 100%}
  .btn.grande{padding:16px 22px;font-size:18px}

  .kicker{font-size:12.5px;letter-spacing:.26em;gap:10px}
  .kicker::before{width:26px}
  .bajada{font-size:16.5px}
  .seccion::before{top:10px;right:10px;-webkit-text-stroke-width:.8px}

  .dos-modulos,.rejilla-servicios,.rejilla-por,.pasos{grid-template-columns:1fr}
  .modulo{border-left:0;border-top:1px solid var(--hilo);padding:36px 24px 30px}
  .modulo:first-child{border-top:0}
  .modulo h2{font-size:28px}
  .ref{top:18px;right:20px}

  .rejilla-cat{grid-template-columns:repeat(2,1fr)}
  .cat{padding:22px 18px}
  .serv{padding:28px 22px 26px}

  .nota-caja{padding:28px 22px;gap:20px}
  .aviso-restringido{padding:26px 22px}

  .pasos li{padding:24px 0;gap:16px}
  .paso-n{font-size:34px;min-width:46px}
  .pasos h3{font-size:22px}

  summary{font-size:20px;padding:20px 40px 20px 2px}

  .mapa-caja{padding:6px;margin-top:34px}
  .mapa-caja iframe{height:300px}
  .mapa-acciones{gap:12px}
  .mapa-acciones .btn{flex:1 1 100%}

  .formulario{padding:28px 22px;max-width:none}
  .datos div{padding:15px 0 15px 16px}

  .pie-fila{grid-template-columns:1fr;gap:26px}
  .pie-legal{text-align:left}
  .pie nav{flex-direction:row;flex-wrap:wrap;gap:10px 20px}

  .wa-flotante{width:52px;height:52px;right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}

/* ---------- telefono chico ---------- */
@media (max-width:430px){
  .rejilla-cat{grid-template-columns:1fr}
  .ficha{grid-template-columns:1fr}
  .ficha div{padding:18px 0;border-left:0;border-top:1px solid var(--hilo)}
  .ficha div:first-child{border-top:0}
  .marca img{height:23px}
}

/* ---------- telefono acostado: la portada no debe ocupar tres pantallas ---------- */
@media (max-height:520px) and (orientation:landscape){
  .portada{padding-top:34px}
  .portada h1{font-size:clamp(34px,7vw,48px)}
  .acciones{margin:22px 0 34px}
  .ficha div{padding:14px 18px 16px}
  .menu{max-height:calc(100dvh - var(--barra-h))}
}

/* ---------- pantallas grandes: que no se pierda en el ancho ---------- */
@media (min-width:1500px){
  :root{--ancho:1280px}
  .portada h1{font-size:124px}
}

/* ---------- dedos, no punteros ----------
   En tactil no hay hover: los estados de :hover se quedan pegados despues
   de tocar. Se apagan y se deja solo la respuesta al toque. */
@media (hover:none){
  .modulo:hover,.serv:hover,.cat:hover,.por:hover{background:inherit;transform:none}
  .modulo:hover::after{width:0}
  .btn-solido:hover{background:var(--piel)}
  .btn-linea:hover{border-color:var(--hilo2);color:var(--hueso)}
  .wa-flotante:hover{transform:none;background:var(--piel)}
  .btn:active{transform:scale(.985)}
  /* area de toque comoda en los enlaces del pie */
  .pie a{padding:4px 0;display:inline-block}
}

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

@media print{
  .barra,.wa-flotante,.formulario,.acciones,.portada-auto,.portada-foto,.portada-velo,
  .banda,.mapa-caja,.mapa-acciones,.seccion::before{display:none}
  body{background:#fff;color:#000}
  .seccion,.portada{background:#fff;color:#000}
  h1,h2,h3,.titulo,.kicker{color:#000}
}