/* ZSPORT · portada (inicio.css) [ZSPORT-portada-nueva]
   Regla de materiales: oscuro = instrumento, claro = informe.
   El naranja es la causa y la acción, nada más.
   Sin dependencias: las fuentes y las fotos se sirven desde el propio sitio. */

/* ============ Fuentes ============ */
/* Archivo variable, con los dos ejes (ancho 62 a 125, peso 100 a 900), servida desde el sitio: la CSP no deja pedirla a
   Google Fonts. Licencia SIL Open Font License 1.1. IBM Plex Mono 400 reutiliza los archivos que ya estaban en /fuentes/.
   No se carga /css/fuentes.css: ahí Archivo esta declarada solo al 100% de ancho y los titulares se angostarian. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fuentes/archivo-var-latin-ext.woff2?v=5717f37059) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(/fuentes/archivo-var-latin.woff2?v=e3a28eade2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/-F63fjptAgt5VM-kVkqdyU8n1iEq129k.woff2?v=6bc0f226a5) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fuentes/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2?v=08949f728d) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@property --barrido{syntax:"<percentage>";inherits:true;initial-value:62%}

/* ============ Tokens ============ */
:root{
  --negro:#0B0A09;
  --carbon:#121110;
  --grafito:#1A1917;
  --grafito-alto:#232220;
  --hueso:#ECE7DF;
  --texto:#D6D1C8;
  --piedra:#B4AFA6;
  --linea:rgba(236,231,223,.14);
  --linea-fuerte:rgba(236,231,223,.28);
  --borde-boton:rgba(236,231,223,.42);
  --eje:rgba(236,231,223,.18);

  --papel:#ECE8E0;
  --hoja:#F6F3EE;
  --blanco:#FBFAF7;
  --tinta:#1A1917;
  --tinta-2:#55514A;
  --linea-tinta:rgba(26,25,23,.16);
  --linea-tinta-fuerte:rgba(26,25,23,.55);

  --aguja:#FF5A1F;
  --aguja-luz:#FF7040;
  --wa:#25D366;

  --f:"Archivo",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  --max:1320px;
  --margen:clamp(20px,5vw,80px);
  --col-gap:clamp(16px,2vw,32px);
  --seccion:clamp(84px,9.6vw,148px);
  --barra-alto:72px;
  --borde-wrap:max(var(--margen),calc((100vw - var(--max))/2));

  --ease-luz:cubic-bezier(.16,1,.3,1);
  --ease-traza:cubic-bezier(.65,0,.35,1);
  --ease-aguja:cubic-bezier(.3,1.35,.5,1);
  --sombra-hoja:0 1px 0 rgba(0,0,0,.35),0 28px 56px -28px rgba(0,0,0,.7);
  --grano:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* colores de contexto: oscuro por defecto */
  --c-tit:var(--hueso);
  --c-txt:var(--texto);
  --c-sec:var(--piedra);
  --c-ln:var(--linea);
  --c-lnf:var(--linea-fuerte);
  --c-borde:var(--borde-boton);
  --c-marca:rgba(236,231,223,.17);
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--barra-alto) + 20px);color-scheme:dark;scrollbar-color:#4A4742 var(--negro)}
body{
  margin:0;background:var(--grafito);color:var(--texto);
  font-family:var(--f);font-size:18px;line-height:1.6;font-stretch:100%;
  font-kerning:normal;font-synthesis:none;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
@media (min-width:900px){body{font-size:19px}}
h1,h2,h3,h4,p,figure,ol,ul,dl,dd,blockquote{margin:0}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit;text-wrap:balance}
p,li,dd{text-wrap:pretty}
ol,ul{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
b,strong{font-weight:600}
:focus-visible{outline:2px solid var(--aguja);outline-offset:3px}
::selection{background:var(--aguja);color:var(--carbon)}
.nb{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:12px;top:-80px;z-index:60;background:var(--hueso);color:var(--carbon);padding:12px 16px;border-radius:2px;font-size:15px;text-decoration:none}
.saltar:focus{top:12px}

.wrap{width:100%;max-width:calc(var(--max) + 2*var(--margen));margin-inline:auto;padding-inline:var(--margen)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.seccion{padding-block:var(--seccion)}
.carbon{background:var(--carbon)}
.grafito{background:var(--grafito)}
.papel,.hoja{
  position:relative;color:var(--tinta);
  --c-tit:var(--tinta);--c-txt:var(--tinta);--c-sec:var(--tinta-2);--c-ln:var(--linea-tinta);--c-lnf:var(--linea-tinta-fuerte);
  --c-borde:var(--linea-tinta-fuerte);--c-marca:rgba(26,25,23,.10);
}
.papel{background:var(--papel)}
.hoja{background:var(--hoja)}
/* fibra del papel: apenas, sin mezcla */
.papel::before,.hoja::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.045;background:var(--grano) 0 0/220px 220px}
.papel>.wrap,.hoja>.wrap{position:relative}
.papel :focus-visible,.hoja :focus-visible,.hoja-x :focus-visible{outline-color:var(--tinta)}

/* ============ Tipografía ============ */
.h1{font-stretch:125%;font-weight:540;font-size:clamp(52px,8.4vw,132px);line-height:.93;letter-spacing:-.034em;color:var(--hueso)}
.h1 span{display:block}
/* en notebooks el alto manda: el titular no puede montarse sobre el auto */
@media (min-width:821px){.h1{font-size:clamp(52px,min(8.4vw,13.2vh),132px)}}
.h2{font-stretch:125%;font-weight:520;font-size:clamp(38px,4.8vw,76px);line-height:1;letter-spacing:-.03em;color:var(--c-tit)}
.lead{font-size:clamp(20px,1.6vw,25px);line-height:1.42;letter-spacing:-.006em;color:var(--c-tit)}
.ley{font-stretch:92%;font-weight:500;font-size:14px;line-height:1.3;letter-spacing:.01em}
.mono{font-family:var(--mono);font-size:14px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:0}
.num{font-stretch:125%;font-weight:320;font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums lining-nums;color:var(--c-tit)}
.uni{font-size:15px;color:var(--c-sec);margin-left:.4em}
.atrib{margin-top:12px;font-size:14px;line-height:1.35;color:var(--c-sec)}
/* la comilla de apertura cuelga fuera de la caja */
.cuelga{text-indent:-.44em}
mark{background:none;color:inherit;text-decoration:underline;text-decoration-thickness:.5em;text-decoration-color:var(--c-marca);text-underline-offset:-.32em;text-decoration-skip-ink:none}

.enlace{
  color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.32em;
  text-decoration-color:var(--c-lnf);transition:text-decoration-color .2s ease;
}
.enlace:hover{text-decoration-color:currentColor}
.boton,.boton-sec{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:0 28px;
  border-radius:2px;font-weight:600;font-size:16px;line-height:1.1;text-decoration:none;white-space:nowrap;
}
.boton{background:var(--aguja);color:var(--carbon);transition:background-color .2s ease}
.boton:hover{background:var(--aguja-luz)}
.boton:focus-visible{outline-color:var(--hueso)}
.papel .boton:focus-visible{outline-color:var(--tinta)}
.boton .wa{width:20px;height:20px;flex:none;fill:currentColor}
.boton-sec{min-height:52px;padding:0 24px;font-weight:500;color:var(--c-tit);border:1px solid var(--c-borde);transition:border-color .2s ease}
.boton-sec:hover{border-color:currentColor}
.boton-tinta{
  display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:2px;
  background:var(--tinta);color:var(--hueso);font-weight:600;font-size:16px;line-height:1.1;text-decoration:none;white-space:nowrap;transition:background-color .2s ease;
}
.boton-tinta:hover{background:var(--negro)}

/* ============ Fotografía: un solo tratamiento ============ */
.foto{position:relative;overflow:hidden;background:var(--negro);margin:0}
.foto img{
  width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%);
  filter:grayscale(var(--g,.88)) sepia(var(--s,.16)) contrast(var(--c,1.08)) brightness(var(--b,.86));
}
.foto::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.075;mix-blend-mode:overlay;background:var(--grano) 0 0/220px 220px}
.credito{position:absolute;z-index:5;font-size:12px;line-height:1;padding:4px 7px;color:rgba(236,231,223,.85);background:rgba(11,10,9,.72)}

/* ============ Barra ============ */
/* un solo tono, sin transparencia: la barra no cambia de color según lo que pasa por debajo */
.barra{position:sticky;top:0;z-index:40;height:var(--barra-alto);background:var(--negro)}
.barra-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.marca{font-stretch:125%;font-weight:700;font-size:19px;line-height:1;letter-spacing:.06em;color:var(--hueso);text-decoration:none}
.nav ul{display:flex;gap:clamp(18px,2vw,32px)}
.nav a,.barra-der .txt{
  font-size:15px;color:var(--piedra);text-decoration:none;padding:8px 0;
  background:linear-gradient(currentColor,currentColor) left calc(100% - 2px) / 0 1px no-repeat;
  transition:color .2s ease,background-size .25s ease;
}
.nav a:hover,.barra-der .txt:hover{color:var(--hueso)}
.nav a[aria-current="true"]{color:var(--hueso);background-size:100% 1px}
.barra-der{display:flex;align-items:center;gap:clamp(16px,1.7vw,24px)}
/* la entrada a la tienda: mayúsculas chicas, angostas y con aire, para que el rótulo largo no pese más que el menú */
.rot-tienda{font-stretch:88%;font-weight:600;font-size:12px;line-height:1.3;letter-spacing:.09em;white-space:nowrap}
/* a pedido del taller, la entrada a la tienda es un botón naranja como la acción principal: es la puerta que factura */
.barra-tienda{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:2px;
  background:var(--aguja);color:var(--carbon);text-decoration:none;text-align:center;
  font-weight:700;letter-spacing:.07em;transition:background-color .2s ease;
}
.barra-tienda span{display:inline}
.barra-tienda:hover{background:var(--aguja-luz)}
.barra-tienda:focus-visible{outline-color:var(--hueso)}
@media (min-width:1360px){.barra-tienda{flex-direction:row;gap:.3em}}
@media (min-width:1101px) and (max-width:1359px){
  .barra-tienda{font-size:11px;line-height:1.25;padding:0 13px;height:44px}
  .barra-tienda span{display:block}
  .nav ul{gap:20px}
}
/* idioma: un desplegable con la bandera del idioma actual. Abre solo (es un <details>); el JS lo cierra al salir */
.bandera{width:21px;height:14px;flex:none;border-radius:1.5px;box-shadow:0 0 0 1px rgba(236,231,223,.26)}
.idioma{position:relative}
.idioma summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;height:40px;padding:0 2px;
  font-size:14px;line-height:1;letter-spacing:.04em;color:var(--hueso);border-radius:2px;user-select:none;
}
.idioma summary::-webkit-details-marker{display:none}
.idioma summary::after{content:"";width:6px;height:6px;margin:-4px 2px 0 1px;border-right:1px solid var(--piedra);border-bottom:1px solid var(--piedra);transform:rotate(45deg)}
.idioma[open] summary::after{margin-top:4px;transform:rotate(-135deg)}
.idioma summary:hover::after{border-color:var(--hueso)}
.idioma-lista{
  position:absolute;right:-14px;top:calc(100% + 16px);z-index:2;min-width:204px;padding:6px;
  background:var(--carbon);border:1px solid var(--linea-fuerte);box-shadow:0 28px 56px -24px rgba(0,0,0,.85);
}
.idioma-lista a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;font-size:15px;line-height:1.2;color:var(--texto);text-decoration:none;transition:background-color .15s ease,color .15s ease}
.idioma-lista a:hover{background:rgba(236,231,223,.07);color:var(--hueso)}
.idioma-lista a[aria-current="page"]{color:var(--hueso)}
.idioma-lista a[aria-current="page"]::after{content:"";margin-left:auto;width:9px;height:5px;border-left:1.5px solid var(--hueso);border-bottom:1.5px solid var(--hueso);transform:translateY(-2px) rotate(-45deg)}
/* WhatsApp: el logo va en su verde; el naranja queda para la acción principal */
.barra-wa{
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 15px 0 13px;border:1px solid var(--borde-boton);
  border-radius:2px;font-size:15px;font-weight:500;color:var(--hueso);text-decoration:none;transition:border-color .2s ease;
}
.barra-wa:hover{border-color:var(--hueso)}
.barra-wa .wa,.menu-wa .wa,.boton-wa .wa{width:19px;height:19px;flex:none;fill:var(--wa)}
.boton-wa{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 14px;border-radius:2px;
  background:var(--grafito-alto);border:1px solid var(--linea-fuerte);color:var(--hueso);font-weight:600;font-size:15px;line-height:1.1;text-decoration:none;white-space:nowrap;
}
.menu-movil{display:none}
.nav a{white-space:nowrap}
@media (pointer:coarse){.nav a,.barra-der .txt{padding:14px 0}.barra-wa{height:44px}.idioma summary{height:44px}.barra-tienda{height:44px}}

@media (max-width:1100px){
  .nav,.barra-der .txt,.barra-der .barra-tienda,.barra-der .idioma{display:none}
  .barra-in{justify-content:flex-start}
  .barra-der{margin-left:auto}
  .menu-movil{display:block}
  .menu-movil>summary{
    list-style:none;cursor:pointer;font-size:15px;color:var(--hueso);
    min-height:44px;padding:0 0 0 8px;display:flex;align-items:center;gap:10px;
  }
  .menu-movil>summary::-webkit-details-marker{display:none}
  .menu-movil>summary::after{content:"";width:18px;height:7px;border-top:1px solid currentColor;border-bottom:1px solid currentColor}
  .menu-movil[open]>summary::after{height:0;border-bottom:0}
  .menu-movil .cerrar{display:none}
  .menu-movil[open] .abrir{display:none}
  .menu-movil[open] .cerrar{display:inline}
  .menu-panel{
    position:absolute;left:0;right:0;top:var(--barra-alto);height:calc(100vh - var(--barra-alto));height:calc(100dvh - var(--barra-alto));
    background:var(--negro);padding:20px var(--margen) 140px;overflow:auto;border-top:1px solid var(--linea);
  }
  .menu-panel > ul a{
    display:block;font-stretch:125%;font-weight:500;font-size:30px;letter-spacing:-.02em;line-height:1.1;
    color:var(--hueso);padding:18px 0;border-bottom:1px solid var(--linea);text-decoration:none;
  }
  /* la tienda y el idioma siguen la lista, en cuerpo chico */
  .menu-extra .rot-tienda{display:flex;align-items:center;justify-content:center;min-height:56px;margin:24px 0 8px;padding:0 16px;border-radius:2px;background:var(--aguja);color:var(--carbon);font-size:13px;font-weight:700;letter-spacing:.07em;text-align:center;text-decoration:none;white-space:normal}
  .menu-extra .rot-tienda:focus-visible{outline-color:var(--hueso)}
  .menu-extra .idioma summary{height:62px;padding:0;gap:12px;font-size:17px;letter-spacing:0;border-bottom:1px solid var(--linea);border-radius:0}
  .menu-extra .idioma summary::after{margin-left:auto;margin-right:5px}
  .menu-extra .idioma[open] summary{border-bottom-color:transparent}
  .menu-extra .idioma-lista{position:static;min-width:0;padding:0 0 10px;background:none;border:0;border-bottom:1px solid var(--linea);box-shadow:none}
  .menu-extra .idioma-lista a{min-height:48px;padding:0 5px 0 0;font-size:17px}
  .menu-cta{margin-top:32px}
  .menu-cta .boton{width:100%}
  .menu-wa{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;margin-top:10px;font-size:16px;color:var(--hueso);text-decoration:none}
  .menu-wa .tel{color:var(--piedra);font-variant-numeric:tabular-nums}
  .menu-cta p{margin-top:6px;text-align:center;font-size:15px;line-height:1.45;color:var(--piedra)}
  .menu-cta p span{display:block}
  body:has(.menu-movil[open]){overflow:hidden}
}

/* ============ 1. Hero ============ */
.hero{
  position:relative;margin-top:calc(-1*var(--barra-alto));min-height:100vh;min-height:100svh;background:var(--negro);overflow:hidden;
  display:flex;flex-direction:column;padding:calc(var(--barra-alto) + clamp(28px,5vh,52px)) 0 clamp(28px,4.4vh,44px);
}
/* La escena: el auto va anclado al eje de la traza, no al alto de la pantalla.
   --fw es el ancho de la foto, --pant el alto del visor y --sube cuánto queda el auto por encima del eje.
   El relleno de arriba le reserva su lugar: el titular nunca se monta sobre el techo. */
.hero{--pant:clamp(140px,19.5vh,190px);--fw:min(100vw,1760px,200vh);--sube:clamp(0px,calc((100vh - 730px)*.25),calc(var(--fw)*.028))}
.hero-escena{position:relative;margin:auto 0 0;padding-top:max(0px,calc(var(--fw)*.128 + var(--sube) - var(--pant)/2))}
.hero-foto{
  position:absolute;left:50%;bottom:calc(var(--pant)/2 - var(--fw)*.22 + var(--sube));width:var(--fw);height:calc(var(--fw)/2);
  transform:translateX(-50%);--pos:50% 50%;--c:1.2;--b:.98;
}
.hero-foto picture{display:block;width:100%;height:100%}
/* [ZSPORT-limpieza-C] se retiró .hero-r32a: la foto del R32 ya no está */

/* --- El hero: el Golf R32 negro en tres cuartos ---
   La caja va del piso del auto, que queda debajo del eje de la traza, hasta un poco por encima del pie del titular. El auto va apoyado abajo
   y crece cuando sobra alto; la máscara apaga el techo y el parabrisas, así lo que llega al titular ya es negro y el capot emerge por debajo.
   Abajo, la rueda se apaga donde cruza la traza. --ex es dónde cae el escudo en la foto: queda sobre la línea de "La causa".
   El tope de alto (.306) es la proporción de la foto: la caja nunca es más alta que la imagen. */
@media (min-width:821px){
  .hero .hero-escena{flex:1 0 auto;display:flex;flex-direction:column;justify-content:flex-end;margin-top:0;padding-top:max(0px,calc(var(--fw)*.142 + var(--sube) - var(--pant)/2))}
  /* la línea de "La causa" sube hacia el escudo y se apaga antes de tocarlo */
  .hero .pantalla .cur{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);mask-image:linear-gradient(180deg,transparent 0,#000 38%)}
  .hero .hero-foto{
    --ex:.7715;--caja:calc(var(--fw)*.5);--piso:calc(var(--pant)/2 - min(var(--fw)*.055 - var(--sube),var(--fw)*.044));
    left:calc(58.125% - var(--caja)*var(--ex));bottom:var(--piso);width:var(--caja);height:min(calc(100% - var(--piso) + var(--fw)*.075),calc(var(--fw)*.306));
    transform:none;--pos:77.15% 100%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 15%,#000 36%,#000 74%,rgba(0,0,0,.45) 88%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,transparent 15%,#000 36%,#000 74%,rgba(0,0,0,.45) 88%,transparent 100%);
  }
}

.hero-velo{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(11,10,9,.55) 0,rgba(11,10,9,0) 28%,rgba(11,10,9,0) 58%,rgba(11,10,9,.92) 100%)}
.hero>.wrap,.pantalla{position:relative;z-index:4}
.hero-cab{align-items:start}
.hero-cab .h1{grid-column:1 / span 8}
.hero-txt{grid-column:9 / span 4;padding-top:.62em}
.bajada{color:var(--hueso);font-size:clamp(18px,1.45vw,22px);line-height:1.45;letter-spacing:-.004em}
.hero-firma{margin-top:16px;font-size:15px;line-height:1.45;color:var(--piedra);text-wrap:balance}
.hero-firma a{color:var(--hueso);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:var(--linea-fuerte);transition:text-decoration-color .2s ease}
.hero-firma a:hover{text-decoration-color:currentColor}

.pantalla{margin:0;height:var(--pant);--xc:58.125%}
.pantalla svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pantalla .eje{
  position:absolute;left:0;right:0;top:50%;height:9px;margin-top:-4px;background:
    linear-gradient(var(--eje),var(--eje)) 0 4px/100% 1px no-repeat,
    repeating-linear-gradient(90deg,var(--eje) 0 1px,transparent 1px 20px) var(--borde-wrap) 0;
}
.pantalla .cur{position:absolute;left:var(--xc);top:-14px;bottom:-24px;border-left:1px dashed var(--linea-fuerte)}
.ruido{fill:none;stroke:#B4AFA6;stroke-opacity:.8;stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.limpia{fill:none;stroke:#ECE7DF;stroke-width:1.9;stroke-linejoin:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 5px rgba(236,231,223,.28))}
.pto{position:absolute;left:var(--xc);top:50%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--aguja);box-shadow:0 0 0 7px rgba(255,90,31,.16),0 0 0 8px rgba(255,90,31,.35)}
.anot{position:absolute;top:calc(100% - 14px);white-space:nowrap;color:var(--piedra)}
.anot.a1{right:calc(100% - var(--xc) + 64px)}
.anot.a2{left:var(--xc);transform:translateX(-50%);color:var(--hueso)}
.anot.a3{left:calc(var(--xc) + 64px)}
html.sonda .pantalla{cursor:crosshair}

.hero-pie{margin-top:clamp(36px,5.4vh,52px);align-items:end}
.acciones{grid-column:1 / span 5;display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;column-gap:28px;row-gap:12px}
.acciones .enlace{color:var(--hueso);font-size:17px;white-space:nowrap}
@media (min-width:1101px) and (max-width:1240px){
  .acciones{column-gap:18px}
  .acciones .boton{padding:0 22px}
}
.micro{grid-column:1 / -1;font-size:14px;line-height:1.3;color:var(--piedra)}
.micro-g{display:none}
.lecturas{
  grid-column:6 / span 7;position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.8fr) minmax(0,1.45fr) minmax(0,1.95fr);border-top:1px solid var(--linea-fuerte);
}
.lecturas>div{padding:14px 18px 0;border-left:1px solid var(--linea)}
.lecturas>div:first-child{padding-left:0;border-left:0}
.lecturas>div:last-child{padding-right:0}
.lecturas dt{display:flex;justify-content:space-between;gap:12px;font:500 14px/1.3 var(--f);font-stretch:92%;letter-spacing:.01em;color:var(--piedra);margin-bottom:8px}
.lec-google{text-decoration:none;white-space:nowrap}
.lec-google::after{content:"";position:absolute;left:0;top:0;bottom:-6px;width:34.615%}
.lec-dist{display:block;font-size:17px;line-height:1.25;font-weight:500;color:var(--hueso);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;text-decoration-color:var(--linea-fuerte);transition:text-decoration-color .2s ease}
.lec-dist:hover{text-decoration-color:currentColor}
.lec-google:hover .num{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.estado-h{font-stretch:100%;color:var(--piedra)}
.estado-t{display:block;font-size:17px;line-height:1.25;font-weight:500;color:var(--hueso)}
.estado-n{display:block;margin-top:3px;font-size:15px;line-height:1.3;color:var(--piedra)}
.estado-n:empty{display:none}
.hero .credito{right:calc(var(--margen) - 7px);bottom:8px;background:none}
@media (min-width:821px) and (max-height:720px){
  .hero{padding-top:calc(var(--barra-alto) + 20px);padding-bottom:32px;--pant:118px}
  .hero-pie{margin-top:26px}
}

@media (prefers-reduced-motion:no-preference){
  .hero-foto img{animation:encender 1.8s var(--ease-luz) backwards}
  .pantalla svg{animation:entrar 1.8s var(--ease-traza) .5s backwards}
  .pto,.pantalla .cur,.anot{animation:aparecer .45s ease 1.55s backwards}
}
@keyframes encender{
  from{filter:grayscale(.88) sepia(.16) contrast(1.2) brightness(.34);transform:scale(1.045)}
  to{filter:grayscale(.88) sepia(.16) contrast(1.2) brightness(.98);transform:scale(1)}
}
@keyframes entrar{from{clip-path:inset(-20px 100% -20px 0)}to{clip-path:inset(-20px 0 -20px 0)}}
@keyframes aparecer{from{opacity:0}to{opacity:1}}

/* más ancho que la foto: los bordes se funden con el negro de la sala */
@media (min-width:1761px){
  .hero-foto{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
}
/* sin foto propia todavía: el hero queda como instrumento puro */
.hero[data-foto="no"] .hero-foto,.hero[data-foto="no"] .hero-velo,.hero[data-foto="no"]>.credito{display:none}
.hero[data-foto="no"] .hero-escena{padding-top:0}

/* ============ El taller ============ */
.esp .visor{grid-column:1 / span 5;grid-row:1;aspect-ratio:4/5;--g:1;--s:.14;--b:.9}
/* foto elegida por el taller: va a color (el punto encendido repite el naranja de la causa) y encuadrada sobre el equipo y la placa */
.esp .visor-real{--g:0;--s:0;--c:1.05;--b:.98;--pos:50% 58%}
.visor .velo{position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(11,10,9,.82) 0,rgba(11,10,9,0) 42%)}
.visor .tercios{
  position:absolute;inset:0;z-index:3;background:
  linear-gradient(90deg,transparent calc(33.333% - .5px),rgba(236,231,223,.10) 0,rgba(236,231,223,.10) calc(33.333% + .5px),transparent 0,transparent calc(66.666% - .5px),rgba(236,231,223,.10) 0,rgba(236,231,223,.10) calc(66.666% + .5px),transparent 0),
  linear-gradient(180deg,transparent calc(33.333% - .5px),rgba(236,231,223,.10) 0,rgba(236,231,223,.10) calc(33.333% + .5px),transparent 0,transparent calc(66.666% - .5px),rgba(236,231,223,.10) 0,rgba(236,231,223,.10) calc(66.666% + .5px),transparent 0);
}
/* la guía de tercios se apaga antes del epígrafe */
.visor .tercios{-webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 80%);mask-image:linear-gradient(180deg,#000 0,#000 70%,transparent 80%)}
.visor .foco{
  position:absolute;z-index:4;left:46%;top:40%;width:64px;height:64px;margin:-32px;opacity:.7;background:
   linear-gradient(var(--hueso),var(--hueso)) 0 0/12px 1px no-repeat,linear-gradient(var(--hueso),var(--hueso)) 0 0/1px 12px no-repeat,
   linear-gradient(var(--hueso),var(--hueso)) 100% 0/12px 1px no-repeat,linear-gradient(var(--hueso),var(--hueso)) 100% 0/1px 12px no-repeat,
   linear-gradient(var(--hueso),var(--hueso)) 0 100%/12px 1px no-repeat,linear-gradient(var(--hueso),var(--hueso)) 0 100%/1px 12px no-repeat,
   linear-gradient(var(--hueso),var(--hueso)) 100% 100%/12px 1px no-repeat,linear-gradient(var(--hueso),var(--hueso)) 100% 100%/1px 12px no-repeat;
}
.pie-visor{position:absolute;z-index:4;left:28px;right:28px;bottom:28px;color:var(--hueso)}
.pie-visor b{display:block;font-weight:500;font-size:17px;line-height:1.3}
.pie-visor .estado-foto{display:block;margin-top:2px;font-size:16px;line-height:1.3;color:var(--texto)}
.credito-papel{grid-column:1 / span 5;grid-row:2;margin-top:12px;font-size:14px;line-height:1.35;color:var(--tinta-2)}
.esp-txt{grid-column:7 / span 6;grid-row:1;align-self:center}
.esp-txt .h2{font-size:clamp(38px,4.4vw,66px)}
.esp-txt .lead{margin-top:clamp(28px,2.8vw,40px);max-width:27em}
.esp-txt .seg{margin-top:18px;max-width:31em;color:var(--tinta-2);font-size:18px;line-height:1.55}
.cita-m{margin-top:clamp(32px,3vw,44px);padding-top:24px;border-top:1px solid var(--linea-tinta);max-width:none}
.cita-m p{font-stretch:106%;font-size:clamp(22px,1.9vw,28px);line-height:1.3;letter-spacing:-.012em;text-wrap:balance}
.cita-m .atrib{margin-top:14px}
.esp[data-foto="no"] .visor,.esp[data-foto="no"] .credito-papel{display:none}
.esp[data-foto="no"] .esp-txt{grid-column:1 / span 9}

/* ============ 3. El barrido ============ */
.placa{position:relative;height:160vh;background:var(--negro);--barrido:62%}
.placa-fija{position:sticky;top:0;height:100vh;height:100svh;min-height:640px;overflow:hidden}
.placa-cruda,.placa-leida{position:absolute;inset:0}
.placa picture{display:contents}
/* la foto se ancla en el punto de la causa: el poste atornillado, un punto de masa, queda bajo el punto naranja en cualquier pantalla */
.placa{--cx:68.4%;--cy:32.9%}
.placa img{width:100%;height:100%;object-fit:cover;object-position:var(--cx) var(--cy)}
.placa-cruda img{filter:grayscale(1) sepia(.12) contrast(1.05) brightness(.5) blur(1.2px)}
.placa-leida{clip-path:inset(0 calc(100% - var(--barrido)) 0 0)}
.placa-leida img{filter:grayscale(.2) sepia(.1) contrast(1.12) brightness(.95)}
.placa-grano{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.075;mix-blend-mode:overlay;background:var(--grano) 0 0/220px 220px}
.placa-velo{position:absolute;inset:0;z-index:2;background:
  linear-gradient(0deg,rgba(11,10,9,.96) 0,rgba(11,10,9,.9) 30%,rgba(11,10,9,.6) 46%,rgba(11,10,9,0) 68%),
  linear-gradient(180deg,rgba(11,10,9,.6) 0,rgba(11,10,9,0) 22%)}
.placa-cursor{position:absolute;top:0;bottom:0;left:var(--barrido);width:1px;background:rgba(236,231,223,.55);z-index:3}
.placa-causa{position:absolute;z-index:4;left:var(--cx);top:var(--cy);width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--aguja);box-shadow:0 0 0 7px rgba(255,90,31,.18)}
.placa-rot{position:absolute;z-index:4;left:calc(var(--cx) + 26px);top:var(--cy);transform:translateY(-50%);color:var(--hueso);font-stretch:112%;font-weight:520;font-size:17px;line-height:1;text-shadow:0 0 14px rgba(11,10,9,.95),0 1px 3px rgba(11,10,9,.9)}
.placa-zona{position:absolute;z-index:4;top:calc(var(--barra-alto) + 26px);white-space:nowrap;color:var(--piedra);text-shadow:0 1px 10px rgba(11,10,9,.9);font-size:16px;font-stretch:108%;font-weight:520;letter-spacing:0}
@media (min-width:821px){.placa-cursor{background:linear-gradient(180deg,rgba(236,231,223,.55) 0,rgba(236,231,223,.55) 54%,rgba(236,231,223,0) 62%)}}
.placa-zona.zm{right:calc(100% - var(--barrido) + 14px);color:var(--hueso)}
.placa-zona.zs{left:calc(var(--barrido) + 14px)}
.placa-txt{position:absolute;z-index:4;left:0;right:0;bottom:clamp(44px,7vh,72px)}
.placa-txt .h2{grid-column:1 / span 5;color:var(--hueso);align-self:end}
.placa-lista{align-self:end;color:var(--hueso)}
.placa-lista.l1{grid-column:6 / span 3}
.placa-lista.l2{grid-column:9 / span 4}
.placa-lista p{font-size:17px;line-height:1.5}
.placa-lista p + p{margin-top:12px}
.placa-lista .remate{font-stretch:112%;font-weight:540;font-size:clamp(20px,1.7vw,26px);line-height:1.15;letter-spacing:-.012em;padding-bottom:18px;border-bottom:1px solid var(--linea-fuerte)}
.placa-lista .caso{margin-top:18px;font-size:16.5px;line-height:1.5}
.placa-lista .caso .enlace{white-space:nowrap}
.placa-lista>.enlace{display:inline-block;margin-top:18px;font-size:16px}
.placa .credito{right:var(--margen);bottom:14px}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:821px){
    .placa{view-timeline:--placa block;view-timeline-inset:0}
    .placa-fija{animation:barrer linear both;animation-timeline:--placa;animation-range:contain 0% contain 100%}
    .placa-causa,.placa-rot{animation:aparecer linear both;animation-timeline:--placa;animation-range:contain 66% contain 71%}
    .placa-lista.l2{animation:encender-txt linear both;animation-timeline:--placa;animation-range:contain 66% contain 78%}
  }
  /* en el teléfono la placa se lee mientras entra en pantalla */
  @media (prefers-reduced-motion:no-preference) and (max-width:820px){
    .placa{view-timeline:--placa block}
    .placa-fija{animation:barrer linear both;animation-timeline:--placa;animation-range:entry 30% entry 85%}
    .placa-causa,.placa-rot{animation:aparecer linear both;animation-timeline:--placa;animation-range:entry 71% entry 77%}
  }
}
@keyframes barrer{from{--barrido:8%}to{--barrido:100%}}
@keyframes encender-txt{from{opacity:.72}to{opacity:1}}
/* anchos intermedios: el título arriba y las dos columnas a la par, para que el texto no suba hasta la causa */
@media (min-width:821px) and (max-width:1100px){
  .placa-txt .h2{grid-column:1 / -1;margin-bottom:24px}
  .placa-lista.l1{grid-column:1 / span 6}
  .placa-lista.l2{grid-column:7 / span 6}
  .placa-fija{min-height:760px}
}
/* pantallas bajas (un teléfono acostado, una notebook chica): la placa no se fija, se recorre */
@media (min-width:821px) and (max-height:620px),(min-width:821px) and (max-width:1100px) and (max-height:759px){
  .placa{height:auto}
  .placa-fija{position:relative}
}
/* respaldo por JS (navegadores sin animation-timeline) */
.placa.js .placa-causa,.placa.js .placa-rot,.placa.js .placa-lista{transition:opacity .3s ease}
.placa.js.sin-causa .placa-causa,.placa.js.sin-causa .placa-rot{opacity:0}
.placa.js.sin-causa .placa-lista.l2{opacity:.72}

/* ============ 4. Cómo trabajamos ============ */
.tiempo{position:relative;margin-top:clamp(72px,7vw,104px);display:grid;grid-template-columns:minmax(0,1fr);--hueco:clamp(48px,5vw,72px)}
.tiempo>*{grid-column:1}
.regla{
  grid-row:1;position:relative;height:19px;border-bottom:1px solid var(--tinta);border-right:1px solid var(--tinta);background:
  repeating-linear-gradient(90deg,var(--linea-tinta) 0 1px,transparent 1px calc(100%/48)) 0 100%/100% 8px no-repeat,
  repeating-linear-gradient(90deg,var(--tinta) 0 1px,transparent 1px 25%) 0 100%/100% 18px no-repeat;
}
.zona{
  grid-row:2;display:flex;align-items:center;height:30px;width:75%;padding-left:12px;color:var(--tinta-2);
  background:repeating-linear-gradient(135deg,rgba(26,25,23,.09) 0 1px,transparent 1px 7px);
}
.decide{grid-row:1 / 4;grid-column:1;justify-self:start;position:relative;z-index:2;width:3px;margin:-34px 0 calc(-1*var(--hueco)) calc(75% - 1px);background:var(--aguja)}
.decide::before{content:"";position:absolute;left:-5px;top:-6px;width:13px;height:13px;border-radius:50%;background:var(--aguja);box-shadow:0 0 0 1px var(--tinta)}
.decide span{position:absolute;left:18px;top:-10px;white-space:nowrap;font-weight:560;font-size:16px;line-height:1.3;color:var(--tinta)}
.pasos{grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.paso{padding:22px 28px 12px 0}
.paso:nth-child(4){padding-left:28px;padding-right:0}
.paso .n{display:block;color:var(--tinta-2);line-height:1}
.paso h3{margin-top:12px;font-stretch:112%;font-weight:540;font-size:clamp(20px,1.7vw,26px);line-height:1.15;letter-spacing:-.012em}
.paso p{margin-top:10px;font-size:17px;line-height:1.5;color:var(--tinta-2);max-width:18em}

.decision{
  grid-row:4;margin-top:var(--hueco);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);
  background:var(--carbon);color:var(--hueso);padding:clamp(32px,3.6vw,56px);
  --c-tit:var(--hueso);--c-txt:var(--texto);--c-sec:var(--piedra);--c-ln:var(--linea);--c-lnf:var(--linea-fuerte);
}
.decision h3{grid-column:1 / span 4;font-stretch:125%;font-weight:520;font-size:clamp(26px,2.4vw,38px);line-height:1.05;letter-spacing:-.025em}
.decision ul{grid-column:5 / span 5;align-self:start}
.decision li{padding:16px 0;border-top:1px solid var(--linea);font-stretch:112%;font-size:clamp(20px,1.75vw,26px);font-weight:450;line-height:1.25;letter-spacing:-.008em}
.decision li:last-child{border-bottom:1px solid var(--linea)}
.decision .costo{grid-column:10 / span 3;font-size:17px;line-height:1.5;color:var(--texto)}
.decision .costo b{display:block;color:var(--hueso);font-weight:560;margin-bottom:6px}
.decide-m{display:none}

.lejos{margin-top:clamp(64px,7vw,104px);border-top:1px solid var(--linea-tinta-fuerte);padding-top:clamp(40px,4.4vw,64px);scroll-margin-top:calc(var(--barra-alto) + 8px)}
.lejos-cab{grid-column:1 / span 5}
.lejos-cab h3{font-stretch:125%;font-weight:520;font-size:clamp(26px,2.5vw,40px);line-height:1.05;letter-spacing:-.025em}
.lejos-cab>p{margin-top:18px;font-size:18px;line-height:1.5;max-width:24em}
/* adónde llega la unidad: la dirección a la vista, antes de despachar nada */
.lejos-dest{margin-top:clamp(28px,3vw,44px);padding-top:22px;border-top:1px solid var(--linea-tinta);max-width:25em}
.lejos-dest .ley{color:var(--tinta-2)}
.lejos-dir{margin-top:10px;font-stretch:106%;font-size:clamp(21px,1.75vw,26px);line-height:1.28;letter-spacing:-.012em;text-wrap:balance}
.lejos-cuerpo{grid-column:7 / span 6}
.lejos-pasos li{display:grid;grid-template-columns:36px minmax(0,1fr);padding:16px 0;border-top:1px solid var(--linea-tinta);font-size:18px;line-height:1.45}
.lejos-pasos li:first-child{border-top-color:var(--linea-tinta-fuerte)}
.lejos-pasos li:last-child{border-bottom:1px solid var(--linea-tinta)}
.lejos-pasos .n{color:var(--tinta-2);padding-top:.38em;line-height:1}
.lejos-antes{margin-top:22px;font-size:17px;line-height:1.5;max-width:33em}
.lejos-quien,.lejos-caso{margin-top:14px;font-size:16.5px;line-height:1.5;color:var(--tinta-2);max-width:33em}
.lejos-quien .enlace,.lejos-caso .enlace{color:var(--tinta)}
.lejos-caso .enlace{white-space:nowrap}
.lejos .boton-tinta{margin-top:28px}

/* ============ 5. Lo que resolvemos ============ */
.serv-foto{grid-column:1 / span 4;position:sticky;top:calc(var(--barra-alto) + 32px);aspect-ratio:4/5;align-self:start;--g:.22;--s:.12;--b:.92;--c:1.06}
.serv-foto .credito{left:16px;bottom:12px}
.serv{border-top:1px solid var(--linea)}
.serv-lista{grid-column:6 / span 7}
.h2s{font-stretch:125%;font-weight:520;font-size:clamp(28px,2.7vw,40px);line-height:1.05;letter-spacing:-.025em;color:var(--hueso)}
.serv-baj{margin-top:14px;font-size:18px;line-height:1.5;color:var(--texto);max-width:30em}
.marcas{margin-top:clamp(28px,3vw,44px);padding-bottom:clamp(32px,3.4vw,52px)}
.marcas .ley{color:var(--piedra)}
.marcas-l{margin-top:10px;font-stretch:125%;font-weight:460;font-size:clamp(20px,2vw,30px);line-height:1.28;letter-spacing:-.02em;color:var(--hueso);text-wrap:balance}
.fila{padding:clamp(28px,3vw,44px) 0;border-top:1px solid var(--linea);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px;row-gap:12px;align-items:baseline}
.fila h3{grid-column:1 / -1;font-stretch:125%;font-weight:500;font-size:clamp(30px,3.4vw,52px);line-height:1.02;letter-spacing:-.03em;color:var(--hueso)}
.fila p{max-width:31em;font-size:18px;line-height:1.5;color:var(--texto)}
.fila p b{font-weight:500;color:var(--hueso)}
.fila .enlace{font-size:16px;color:var(--hueso)}
.alcance{border-top:1px solid var(--linea)}
.alcance div{display:grid;grid-template-columns:11em minmax(0,1fr);padding:18px 0;border-bottom:1px solid var(--linea);font-size:17px;line-height:1.45;align-items:baseline}
.alcance dt{color:var(--piedra)}

/* ============ 6. Expedientes ============ */
.exp-cab{align-items:end}
.exp-cab .h2{grid-column:1 / span 6}
.exp-cab .lead{grid-column:8 / span 5;font-size:clamp(18px,1.4vw,21px);line-height:1.45}
.exp{display:grid;grid-template-columns:7fr 5fr;gap:var(--col-gap);margin-top:clamp(48px,5vw,80px)}
.hoja-x{
  position:relative;background:var(--hoja);color:var(--tinta);padding:clamp(28px,3vw,48px);box-shadow:var(--sombra-hoja);scroll-margin-top:calc(var(--barra-alto) + 24px);
  --c-tit:var(--tinta);--c-txt:var(--tinta);--c-sec:var(--tinta-2);--c-ln:var(--linea-tinta);--c-lnf:var(--linea-tinta-fuerte);
  --c-borde:var(--linea-tinta-fuerte);--c-marca:rgba(26,25,23,.10);
}
.hoja-x::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,var(--linea-tinta) 0 1px,transparent 1px 8px)}
.hoja-x::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;mix-blend-mode:multiply;background:var(--grano) 0 0/220px 220px}
.hoja-x{display:flex;flex-direction:column}
.hoja-x.prin{grid-column:1 / -1;padding:clamp(32px,3.4vw,56px);display:grid;grid-template-columns:5fr 7fr;column-gap:clamp(32px,4vw,64px)}
.hx-izq,.hx-der{display:flex;flex-direction:column;min-width:0}
.hx-izq .hx-lect{margin-top:auto;padding-top:clamp(36px,4vw,64px)}
.prin .hx-big{font-size:clamp(96px,12vw,184px);letter-spacing:-.055em}
.prin .hx-big small{font-size:.3em;margin-left:.16em}
.hx-cab{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.hx-cab h3{font-stretch:125%;font-weight:540;font-size:clamp(26px,2.5vw,40px);line-height:1.08;letter-spacing:-.022em}
.hx-cab .mono{color:var(--tinta-2)}
.hx-modo{margin-top:6px;font-size:16px;line-height:1.35;color:var(--tinta-2)}
.hx-lect{display:block}
.hx-pre{display:block;font-size:15px;line-height:1.2;color:var(--tinta-2);margin-bottom:10px}
.hx-big{font-stretch:125%;font-weight:300;font-size:clamp(72px,8.4vw,124px);line-height:.82;letter-spacing:-.045em;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.hx-big small{font-size:.4em;font-stretch:100%;font-weight:400;letter-spacing:0;color:var(--tinta-2);margin-left:.2em}
.hx-nota{margin-top:12px;font-size:15px;line-height:1.4;color:var(--tinta-2)}
.hx-lect + .hx-nota{margin-top:16px;max-width:18em}
.hx-dl{margin-top:8px}
.prin .hx-dl{margin-top:-14px}
.hx-dl .clave dd{font-weight:600}
.hx-dl div{display:grid;grid-template-columns:9.4em minmax(0,1fr);column-gap:16px;padding:14px 0;border-bottom:1px solid var(--linea-tinta)}
.hx-dl dt{font:500 14px/1.3 var(--f);font-stretch:92%;letter-spacing:.01em;color:var(--tinta-2);padding-top:3px}
.hx-dl dd{font-size:16.5px;line-height:1.45}
.prin .hx-dl dd{font-size:17.5px}
.hx-cita p{font-size:16.5px;line-height:1.45}
.hx-cita{margin-top:auto;padding-top:clamp(22px,2.4vw,32px)}
.hoja-x.prin .hx-cita{padding-top:clamp(28px,3vw,44px)}
.hoja-x.prin .hx-cita p{font-stretch:106%;font-size:clamp(20px,1.75vw,25px);line-height:1.36;letter-spacing:-.008em}
.hx-cita .atrib{margin-top:10px}
.hx-enl{margin-top:auto;padding-top:clamp(22px,2.4vw,32px);font-size:16.5px;line-height:1.45}
.hx-med{margin-top:22px;font-stretch:125%;font-weight:300;font-size:clamp(40px,3.5vw,54px);line-height:1;letter-spacing:-.04em}
.exp-pie{display:grid;grid-template-columns:7fr 5fr;gap:var(--col-gap);align-items:start;margin-top:clamp(28px,3vw,44px)}
.exp-nota{font-size:14px;line-height:1.45;color:var(--piedra);max-width:34em}
.exp-remate{font-stretch:112%;font-weight:540;font-size:clamp(20px,1.7vw,26px);line-height:1.15;letter-spacing:-.012em;color:var(--hueso)}
.exp-remate + .enlace{display:inline-block;margin-top:10px;font-size:17px;color:var(--hueso)}

/* ============ 7. Reseñas ============ */
.res-cab{align-items:end}
.res-cab .h2{grid-column:1 / span 8}
.res-cab .lead{grid-column:1 / span 7;margin-top:22px}
.res-cab .enlace{grid-column:9 / span 4;grid-row:2;justify-self:end;align-self:end;font-size:17px}
.medida{margin-top:clamp(48px,5vw,80px);align-items:end}
.medida .valor{grid-column:1 / span 4;display:flex;align-items:flex-end;gap:16px}
.medida .big{font-stretch:125%;font-weight:300;font-size:clamp(88px,9.6vw,152px);line-height:.8;letter-spacing:-.05em;font-variant-numeric:tabular-nums lining-nums}
.medida .valor p{font-size:17px;line-height:1.3;color:var(--tinta-2);padding-bottom:2px}
.medida .valor p b{display:block;color:var(--tinta);font-weight:500}
.escala{grid-column:5 / span 8}
.escala-regla{
  position:relative;height:30px;border-bottom:1px solid var(--tinta);border-right:1px solid var(--tinta);background:
  repeating-linear-gradient(90deg,var(--tinta) 0 1px,transparent 1px 20%) 0 100%/100% 18px no-repeat,
  repeating-linear-gradient(90deg,rgba(26,25,23,.4) 0 1px,transparent 1px 2%) 0 100%/100% 8px no-repeat;
}
.escala-carro{position:absolute;inset:0;transform:translateX(-6%)}
.escala-aguja{position:absolute;right:-1px;bottom:-1px;width:3px;height:64px;background:var(--aguja)}
.escala-aguja::before{content:"";position:absolute;left:-5px;top:-3px;border:6.5px solid transparent;border-top-color:var(--aguja)}
.escala-nums{display:flex;justify-content:space-between;margin-top:10px;color:var(--tinta-2);line-height:1}
.escala.anima .escala-carro{transform:translateX(-100%)}
.escala.anima.visto .escala-carro{transform:translateX(-6%);transition:transform 1.6s var(--ease-aguja)}
.dudas{margin-top:clamp(56px,6vw,96px)}
.duda{padding-block:clamp(36px,4vw,64px);border-top:1px solid var(--linea-tinta)}
.duda:first-child{border-top-color:var(--linea-tinta-fuerte)}
.duda:last-child{padding-bottom:0}
.duda h3{grid-column:1 / span 3;grid-row:1;font-stretch:125%;font-weight:520;font-size:clamp(24px,2.2vw,34px);line-height:1.08;letter-spacing:-.022em}
.duda .c-g{grid-column:5 / span 8}
.duda .c-g p{font-stretch:108%;font-size:clamp(28px,3vw,46px);line-height:1.16;letter-spacing:-.022em}
.duda .c1{grid-column:5 / span 4}
.duda .c2{grid-column:9 / span 4}
.duda .c1 p,.duda .c2 p{font-size:clamp(21px,1.7vw,26px);line-height:1.4}
.duda .atrib{margin-top:14px}
.duda .c-g ~ .c1,.duda .c-g ~ .c2{margin-top:clamp(32px,3.4vw,52px)}
.duda-cta{align-self:end;font-size:17px;line-height:1.4}

/* ============ 8. Instrumental ============ */
.banco-foto{height:clamp(320px,38vw,560px);--pos:70% 50%}
@media (min-width:821px){.banco-foto{height:clamp(260px,27vw,400px);--pos:70% 62%}}
.banco-foto .velo{position:absolute;inset:0;z-index:3;background:
  linear-gradient(90deg,rgba(11,10,9,.92) 0,rgba(11,10,9,.72) 34%,rgba(11,10,9,0) 66%),
  linear-gradient(0deg,var(--grafito) 0,rgba(26,25,23,0) 30%)}
.banco-foto .wrap{position:absolute;z-index:4;left:0;right:0;bottom:clamp(32px,4vw,56px)}
.banco-foto .h2{color:var(--hueso)}
.banco-foto .credito{right:var(--margen);bottom:14px}
.banco-cuerpo{padding:clamp(40px,4.4vw,64px) 0 var(--seccion)}
.banco-cuerpo .lead{grid-column:1 / span 6;color:var(--hueso)}
.banco-para{grid-column:8 / span 5;align-self:end;font-size:17px;line-height:1.5;color:var(--texto)}
/* lámina de instrumental: uso arriba, marca y qué hace abajo */
.creditos{grid-column:1 / -1;margin-top:clamp(40px,4.4vw,64px);border-top:1px solid var(--linea-fuerte);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.creditos div{grid-column:span 4;display:flex;flex-direction:column;min-height:216px;padding:20px 0 26px;border-bottom:1px solid var(--linea)}
.creditos div:nth-child(4){grid-column:span 8}
.creditos dt{margin-bottom:30px;font-size:15px;line-height:1.3;color:var(--piedra)}
.creditos dd{margin-top:auto;font-stretch:118%;font-weight:500;font-size:clamp(26px,2.7vw,40px);line-height:1.12;letter-spacing:-.022em;color:var(--hueso)}
.creditos dd:not(.que){text-wrap:balance}
.creditos dd.que{margin-top:12px;max-width:24em;min-height:2.9em;font-stretch:100%;font-weight:400;font-size:16px;line-height:1.45;letter-spacing:0;color:var(--texto)}

/* ============ 9. Tienda de servicios para talleres ============ */
.panel{border-top:1px solid var(--linea-fuerte);padding:clamp(40px,4.4vw,64px) 0 0;align-items:end;row-gap:40px}
.panel-txt{grid-column:1 / span 7}
.panel-txt h2{font-stretch:125%;font-weight:520;font-size:clamp(26px,2.5vw,40px);line-height:1.05;letter-spacing:-.025em;color:var(--hueso)}
.panel-txt p{margin-top:18px;font-size:18px;line-height:1.55;max-width:33em}
.panel-acc{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.panel-acc .enlace{font-size:16px;color:var(--hueso)}
.panel-dato{grid-column:9 / span 4;font-size:18px;line-height:1.35;color:var(--texto)}
.panel-dato b{display:block;margin:6px 0 10px -.04em;font-stretch:125%;font-weight:300;font-size:clamp(64px,7vw,112px);line-height:.86;letter-spacing:-.05em;font-variant-numeric:tabular-nums lining-nums;color:var(--hueso)}
.panel-dato span{display:block}

/* ============ 10. Contacto ============ */
.cto{align-items:start}
.cto-izq{grid-column:1 / span 7}
.cto-frase{font-stretch:125%;font-weight:520;font-size:clamp(34px,4.2vw,62px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.sintomas{margin-top:clamp(40px,4.4vw,64px);border-top:1px solid var(--linea-tinta-fuerte)}
.sintomas li{border-bottom:1px solid var(--linea-tinta)}
.sintomas a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:21px 0;font-stretch:112%;font-weight:500;font-size:20px;line-height:1.2;text-decoration:none}
.sintomas a::after{content:"WhatsApp";flex:none;font-stretch:92%;font-weight:500;font-size:14px;letter-spacing:.01em;color:var(--tinta-2)}
.sintomas a:hover{box-shadow:inset 0 -2px 0 var(--aguja)}
.sintomas a:hover::after{color:var(--tinta)}
.cto-der{grid-column:9 / span 4}
.cto-der h3{font-stretch:112%;font-weight:540;font-size:clamp(20px,1.7vw,26px);line-height:1.15;letter-spacing:-.012em}
.msj{margin-top:20px;background:var(--blanco);border:1px solid var(--linea-tinta);padding:24px 28px;font-size:17px;line-height:1.6}
.msj p + p{margin-top:2px}
.msj .campo{display:flex;align-items:baseline;gap:10px}
.msj .campo::after{content:"";flex:1;min-width:24px;border-bottom:1px solid var(--linea-tinta)}
.sigue{margin-top:8px}
.sigue li{display:grid;grid-template-columns:30px minmax(0,1fr);padding:16px 0;border-bottom:1px solid var(--linea-tinta);font-size:17px;line-height:1.45}
.sigue .n{color:var(--tinta-2);padding-top:.36em;line-height:1}
.cto-der .boton{margin-top:28px;width:100%}
.lugar{margin-top:clamp(72px,8vw,128px);align-items:stretch}
.dir{grid-column:1 / span 7}
.dir h2{font-stretch:125%;font-weight:520;font-size:clamp(44px,6.6vw,108px);line-height:.96;letter-spacing:-.034em}
.dir h2 span{display:block}
.dir h2 .ciudad{font-size:.42em;line-height:1.1;letter-spacing:-.02em;margin-top:.5em;font-weight:460}
.datos-p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr);border-top:1px solid var(--linea-tinta-fuerte);margin-top:clamp(36px,4vw,56px)}
.datos-p div{padding:16px 20px 0;border-left:1px solid var(--linea-tinta)}
.datos-p div:first-child{padding-left:0;border-left:0}
.datos-p dt{font:500 14px/1.3 var(--f);font-stretch:92%;letter-spacing:.01em;color:var(--tinta-2);margin-bottom:8px}
.datos-p dd{font-size:18px;line-height:1.35}
.datos-p dd a{text-decoration:none}
.datos-p dd a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em}
.datos-p .tel{font-variant-numeric:tabular-nums;white-space:nowrap}
.lugar-enlaces{display:flex;flex-wrap:wrap;gap:12px 32px;margin-top:32px;font-size:17px}
/* el mapa de Google, montado como una lámina: filete, margen de papel y epígrafe */
.mapa{grid-column:8 / span 5;display:flex;flex-direction:column;margin:0}
.mapa-marco{position:relative;flex:1;min-height:380px;background:var(--blanco);border:1px solid var(--linea-tinta-fuerte)}
.mapa-marco iframe{position:absolute;left:6px;top:6px;width:calc(100% - 12px);height:calc(100% - 12px);border:0;background:var(--papel)}
.mapa figcaption{margin-top:10px;font-size:14px;line-height:1.35;color:var(--tinta-2)}
/* en escritorio el mapa gana alto y los enlaces de la dirección bajan hasta la línea del epígrafe */
@media (min-width:821px){.mapa-marco{min-height:470px}.dir{display:flex;flex-direction:column}.dir .lugar-enlaces{margin-top:auto;padding-top:32px}}

/* ============ 11. Pie ============ */
.pie{background:var(--negro);color:var(--piedra);font-size:15px;line-height:1.5;padding-bottom:clamp(36px,4vw,56px)}
.pie-senal{width:100%;height:64px;overflow:visible}
.pie-senal path{fill:none;stroke:var(--hueso);stroke-width:1.4;stroke-opacity:.5;vector-effect:non-scaling-stroke}
.pie-firma{margin-top:clamp(56px,6vw,96px);font-stretch:125%;font-weight:540;font-size:clamp(40px,7vw,112px);line-height:.95;letter-spacing:-.034em;color:var(--hueso)}
.pie-grid{margin-top:clamp(36px,4vw,56px);padding-top:24px;border-top:1px solid var(--linea);row-gap:24px}
.pie-grid .marca{grid-column:1 / span 2;align-self:start;padding-top:3px}
.pie-legal{grid-column:4 / span 6;max-width:46em}
.pie-legal p + p{margin-top:10px}
.pie-der{grid-column:10 / span 3;justify-self:end;text-align:right}
.pie-der li + li{margin-top:6px}
.pie-der a{text-decoration:none}
.pie-der a:hover{color:var(--hueso)}
.pie-der .rot-tienda{font-size:11.5px;color:var(--texto)}
.pie-copy{margin-top:16px}

/* ============ Barra fija de abajo ============ */
/* en todos los anchos y siempre a la vista: sus reglas están en [ZSPORT-barra-llamar], al final */

/* ============ Selector de idioma del servidor ============ */
/* vestir() (backend/idiomas.py) agrega su propio selector ES/EN/PT después del primer </nav>. La página ya trae el
   desplegable con banderas, así que ese queda oculto, igual que en la portada anterior. */
.nav + .idiomas{display:none !important}

/* ============ Responsive ============ */
@media (max-width:1100px){
  .prin .hx-dl div{grid-template-columns:1fr;row-gap:2px}
  .decision{display:block}
  .decision ul{margin:28px 0}
  .decision .costo{max-width:30em}
}
@media (min-width:821px) and (max-width:1100px){
  .hero-cab .h1{grid-column:1 / span 7}
  .hero-txt{grid-column:8 / span 5}
  .acciones{grid-column:1 / -1}
  .lecturas{grid-column:1 / -1;margin-top:28px}
  .cto-izq{grid-column:1 / span 6}
  .cto-der{grid-column:8 / span 5}
  .banco-cuerpo .lead{grid-column:1 / span 7}
  .banco-para{grid-column:1 / span 9;margin-top:20px}
  .datos-p{grid-template-columns:1fr}
  .datos-p div,.datos-p div:first-child{display:grid;grid-template-columns:11em 1fr;align-items:baseline;padding:12px 0;border-left:0;border-bottom:1px solid var(--linea-tinta)}
  .datos-p dt{margin:0}
}
@media (max-width:820px){
  /* acá la barra no queda fija: los anclajes no le reservan lugar */
  html{scroll-padding-top:12px}
  .lejos,.hoja-x{scroll-margin-top:0}
  .barra{position:absolute;left:0;right:0;background:none}
  /* con el menú abierto la barra vuelve a ser opaca: la foto del hero no asoma entre la barra y el panel */
  .barra:has(.menu-movil[open]){background:var(--negro)}
  .barra-in{gap:6px}
  /* WhatsApp queda como logo solo, al lado del menú */
  .barra-wa{width:44px;height:44px;padding:0;border:0;justify-content:center}
  .barra-wa span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .barra-wa .wa{width:23px;height:23px}
  .grid{row-gap:0}

  /* en el teléfono el auto va arriba y el titular le pisa el piso */
  .hero{margin-top:0;padding:calc(var(--foto-alto) - var(--solape)) 0 32px;min-height:0;--foto-alto:min(100vw,42svh);--solape:106px;--pant:96px}
  .hero[data-foto="no"]{--foto-alto:calc(var(--barra-alto) + 130px)}
  .hero-escena{position:static;margin:0;padding:0}
  .hero-foto{left:0;top:0;bottom:auto;transform:none;width:100%;height:var(--foto-alto)}
  /* el R32 entra entero entre la barra y el titular, apoyado abajo */
  .hero .hero-foto{top:calc(var(--barra-alto) - 6px);height:calc(var(--foto-alto) - var(--solape) - var(--barra-alto) + 2px);--pos:34% 100%}
  .hero-velo{background:linear-gradient(180deg,rgba(11,10,9,.5) 0,rgba(11,10,9,0) 90px)}
  .hero-cab .h1{grid-column:1 / -1;font-size:clamp(46px,13.6vw,64px)}
  .hero-txt{grid-column:1 / -1;padding-top:20px}
  .bajada{font-size:18px}
  .hero-firma{margin-top:12px}
  .pantalla{margin-top:18px}
  .anot.a1,.anot.a3{display:none}
  .ruido{stroke-width:2.2}
  .limpia{stroke-width:2.4}
  .hero-pie{margin-top:30px;row-gap:32px}
  .acciones,.lecturas{grid-column:1 / -1}
  .acciones{grid-template-columns:1fr;row-gap:12px}
  .acciones .boton{width:100%}
  .acciones .micro{order:2;text-align:center;line-height:1.45}
  .micro-g{display:inline}
  .acciones .enlace{order:3;justify-self:start;margin-top:12px}
  .lecturas{grid-template-columns:1fr 1fr}
  .lecturas>div{padding:14px 0 16px}
  .lecturas>div:nth-child(2){padding-left:18px}
  .lecturas>div:nth-child(n+3){grid-column:1 / -1;padding-left:0;border-left:0;border-top:1px solid var(--linea)}
  .lecturas>div:last-child{padding-bottom:0}
  .lec-google::after{width:100%;bottom:auto;height:84px}
  .hero .credito{right:calc(var(--margen) - 7px);top:calc(var(--foto-alto) - var(--solape) - 26px);bottom:auto}

  .esp .visor,.esp-txt,.credito-papel{grid-column:1 / -1;grid-row:auto}
  .esp-txt{order:-1;margin-bottom:44px}
  .pie-visor{left:20px;right:20px;bottom:20px}

  .placa{height:auto;overflow:hidden;--cx:76.3%;--cy:calc(112vw*.33)}
  .placa-fija{position:relative;height:auto;min-height:0;overflow:visible}
  .placa-cruda,.placa-leida{height:112vw}
  .placa img{object-position:50% 50%}
  .placa-cruda{position:relative}
  .placa-velo{height:112vw;inset:0 0 auto 0;background:linear-gradient(0deg,#0B0A09 0,rgba(11,10,9,0) 30%)}
  .placa-grano,.placa-cursor{height:112vw;bottom:auto}
  .placa-rot{left:auto;right:calc(100% - var(--cx) + 24px)}
  .placa-zona{top:18px}
  .placa-txt{position:relative;bottom:auto;padding:8px 0 64px;background:var(--negro)}
  .placa-txt .h2,.placa-lista.l1,.placa-lista.l2{grid-column:1 / -1}
  .placa-lista{margin-top:24px}
  .placa-lista p{font-size:18px}
  .placa-lista .caso{font-size:17.5px}
  .placa .credito{top:calc(112vw - 22px);bottom:auto}

  /* el método en vertical: la regla graduada baja por la izquierda y el punto naranja marca dónde decide el cliente */
  .tiempo{margin-top:40px;display:flex;flex-direction:column;position:relative;padding-left:30px}
  .tiempo::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:11px;background:
      linear-gradient(var(--tinta),var(--tinta)) 0 0/1px 100% no-repeat,
      repeating-linear-gradient(180deg,var(--linea-tinta-fuerte) 0 1px,transparent 1px 64px) 0 0/11px 100%,
      repeating-linear-gradient(180deg,var(--linea-tinta) 0 1px,transparent 1px 16px) 0 0/6px 100%;
  }
  .tiempo .regla,.tiempo .decide{display:none}
  .tiempo .zona{display:flex;order:4;width:auto;height:36px;margin:0 0 0 -30px;padding-left:30px}
  .pasos{display:contents}
  .paso,.paso:nth-child(4){padding:22px 0;border-top:1px solid var(--linea-tinta)}
  .paso:nth-child(1){order:1;border-top-color:var(--linea-tinta-fuerte)}
  .paso:nth-child(2){order:2}
  .paso:nth-child(3){order:3}
  .paso:nth-child(4){order:6;border-bottom:1px solid var(--linea-tinta)}
  .paso p{max-width:none}
  .decision{order:5;position:relative;margin:0 0 28px -30px;padding:30px 24px 32px}
  .decision::before{content:"";position:absolute;left:-5px;top:-7px;width:13px;height:13px;border-radius:50%;background:var(--aguja);box-shadow:0 0 0 1px var(--tinta)}
  .decide-m{display:block;margin-bottom:20px;font-weight:560;font-size:16px;line-height:1.3;color:var(--hueso)}
  .lejos-cab,.lejos-cuerpo{grid-column:1 / -1}
  .lejos-cuerpo{margin-top:36px}
  .lejos .boton-tinta{width:100%}

  .serv-foto,.serv-lista{grid-column:1 / -1}
  .serv-foto{position:relative;top:auto;aspect-ratio:4/3;margin-bottom:40px;--pos:50% 58%}
  .fila{grid-template-columns:1fr}
  .fila .enlace{justify-self:start;margin-top:4px;padding:6px 0}
  .alcance div{grid-template-columns:1fr;row-gap:2px}
  .marcas-l{font-size:21px}

  .exp-cab .h2,.exp-cab .lead{grid-column:1 / -1}
  .exp-cab .lead{margin-top:18px}
  .exp{grid-template-columns:minmax(0,1fr);row-gap:20px}
  .hoja-x.prin{display:flex}
  .hx-izq .hx-lect{margin-top:0;padding-top:28px}
  .hx-der{margin-top:28px}
  .prin .hx-dl{margin-top:0;border-top:1px solid var(--linea-tinta)}
  .hoja-x,.hoja-x.prin{padding:32px 22px 28px}
  .hx-dl div{grid-template-columns:1fr;row-gap:2px}
  .hoja-x.prin .hx-cita{padding-top:28px}
  .exp-pie{grid-template-columns:1fr;row-gap:36px}
  .exp-pie .exp-cierre{order:-1}

  .res-cab .h2,.res-cab .lead,.res-cab .enlace,.medida .valor,.escala,.duda h3,.duda .c-g,.duda .c1,.duda .c2{grid-column:1 / -1;grid-row:auto}
  .res-cab .enlace{justify-self:start;margin-top:20px}
  .escala{margin-top:36px}
  .duda blockquote,.duda .c-g ~ .c1,.duda .c-g ~ .c2{margin-top:24px}
  .duda-cta{margin-top:28px}
  .cuelga{text-indent:-.4em}

  .banco-foto{height:320px;--pos:50% 50%}
  .banco-cuerpo .lead,.banco-para{grid-column:1 / -1}
  .banco-para{margin-top:18px}
  .creditos{display:block}
  .creditos div{min-height:0;padding:18px 0 20px}
  .creditos dt{margin-bottom:0}
  .creditos dd:not(.que){margin-top:8px;font-size:26px}
  .creditos dd.que{margin-top:8px;max-width:none;min-height:0}

  .panel-txt,.panel-dato{grid-column:1 / -1}
  .panel-acc .boton-sec{width:100%}
  .panel-dato{margin-top:40px}

  .cto-izq,.cto-der,.dir,.mapa{grid-column:1 / -1}
  .cto-der{margin-top:56px}
  .datos-p{grid-template-columns:1fr}
  .datos-p div,.datos-p div:first-child{padding:12px 0;border-left:0;border-bottom:1px solid var(--linea-tinta)}
  .datos-p dt{margin-bottom:0}
  .mapa{margin-top:40px}
  .mapa-marco{flex:none;min-height:0;aspect-ratio:4/3.4}

  .pie{overflow:hidden}
  .pie-senal{width:320%;max-width:none;height:48px}
  .pie-firma{font-size:clamp(40px,11.6vw,56px)}
  .pie-firma span{display:block}
  .pie-grid .marca,.pie-legal,.pie-der{grid-column:1 / -1}
  .pie-der{justify-self:start;text-align:left}
  .pie-grid{row-gap:20px}
  /* el lugar que el pie le deja a la barra fija de abajo: [ZSPORT-barra-llamar], al final */
}
/* toques: en el teléfono y en cualquier pantalla táctil, 44 px de alto como mínimo en todo enlace suelto */
@media (max-width:820px),(pointer:coarse){
  .barra .marca,.pie-grid .marca{display:inline-flex;align-items:center;min-height:44px;justify-self:start}
  .acciones .enlace,.placa-lista>.enlace,.fila .enlace,.hx-enl .enlace,.exp-cierre .enlace,.res-cab .enlace,.duda-cta .enlace,.panel-acc .enlace,.lugar-enlaces .enlace,.datos-p dd a,.pie-der a,.lec-dist{display:inline-flex;align-items:center;min-height:44px}
  .fila .enlace{padding:0;margin-top:0}
  .placa-lista>.enlace{margin-top:8px}
  .exp-remate + .enlace{margin-top:2px}
  .hx-enl{padding-top:14px}
  .lugar-enlaces{gap:0 28px;margin-top:20px}
  .pie-der li + li{margin-top:0}
}
/* tablet vertical: la foto es más ancha que alta y el titular sube un poco más */
@media (min-width:561px) and (max-width:820px){
  .hero{--solape:150px}
}
/* teléfonos bajos: el botón principal tiene que entrar en el primer pantallazo */
@media (max-width:820px) and (max-height:700px){
  .hero{--foto-alto:min(100vw,36svh);--solape:80px;--pant:72px}
  .hero-foto{--pos:50% 60%}
  .pantalla{margin-top:10px}
  /* la línea de "La causa" nace más abajo: con la señal tan cerca de la firma, en 360 px de ancho subía hasta el punto final de "país."
     y se pegaba al subrayado del enlace; así arranca 6 px por debajo de la firma */
  .pantalla .cur{top:-4px}
  .hero-pie{margin-top:22px}
}
@media (max-width:560px){
  .sintomas a{font-size:19px}
  .msj{padding:20px 20px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  /* sin barrido no hay por qué retener el scroll */
  .placa{height:auto}
  .placa-fija{position:relative}
}

/* Titular largo (a pedido del taller): tres líneas equilibradas en escritorio, cuatro en el teléfono */
.h1.h1-largo{font-size:clamp(40px,4.6vw,72px);line-height:.96;letter-spacing:-.03em;text-wrap:balance}
@media (min-width:821px){.h1.h1-largo{font-size:clamp(40px,min(4.6vw,7.6vh),72px)}}
@media (max-width:820px){.hero-cab .h1.h1-largo{font-size:clamp(26px,8.1vw,40px);letter-spacing:-.032em}}
.pie-firma.pie-firma-larga{font-size:clamp(34px,4.6vw,74px)}
@media (max-width:820px){.pie-firma.pie-firma-larga{font-size:clamp(30px,8.4vw,40px)}}

/* [ZSPORT-tienda-movil] A pedido del taller (2026-10-02): la tienda para talleres se ve apenas se entra y no deja de
   verse en ningún tramo de la página, también en celulares y tablets.
   - Arriba: el botón naranja deja de esconderse en el menú y va en la barra (44 px de alto, 11 a 11,5 px de letra desde
     360 px). El menú queda como ícono, con su nombre para lectores de pantalla, y abierto se dibuja como una cruz.
     Las distancias naranja → WhatsApp → menú son parejas (unos 23 px de aire visible) y las rayas del menú quedan al
     ras del margen, como ZSPORT del otro lado.
   - Abajo: la barra fija suma la tienda entre WhatsApp y Cómo llegar. Desde [ZSPORT-barra-llamar] (2026-10-04) la barra
     se ve siempre, ya no se corre ni pierde el logo de WhatsApp, y sus reglas están en ese bloque, al final.
   - Con el menú abierto, la tienda ya está en la barra: no se repite adentro.
   - Bloque de talleres: va justo después de Especialidades, sobre su mismo fondo carbón (un solo espacio de sección
     y el filete del panel entre los dos), y su botón principal es el naranja de la tienda.
   - De 300 a 359 px se achican logo, márgenes y separaciones (solo ahí) para que nada se salga de la pantalla. */
/* el bloque de talleres va después de Especialidades, sobre su mismo fondo: un solo espacio de sección y el filete */
#talleres{padding-top:0}
.panel-acc .rot-tienda{white-space:normal;text-align:center;font-size:14px;font-weight:700;line-height:1.25;letter-spacing:.07em}
@media (max-width:1100px){
  .barra-der .barra-tienda{display:inline-flex;flex-direction:column;height:44px;padding:0 12px;font-size:11.5px;line-height:1.2;letter-spacing:.05em}
  .barra-der .barra-tienda span{display:block}
  .barra-der{gap:12px}
  .menu-extra .rot-tienda{display:none}
  .menu-extra{margin-top:8px}
}
@media (max-width:820px){
  .menu-movil{margin-left:-6px}
  .menu-movil>summary{padding:0;width:44px;justify-content:center;margin-right:-13px}
  .menu-movil>summary .abrir,.menu-movil>summary .cerrar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  /* abierto: una cruz con el mismo trazo de 1 px y el mismo ancho que las rayas */
  .menu-movil[open]>summary::after{height:18px;border:0;background:linear-gradient(currentColor,currentColor) 50%/100% 1px no-repeat,linear-gradient(currentColor,currentColor) 50%/1px 100% no-repeat;transform:rotate(45deg) scale(.86)}
  .barra-der .barra-tienda:active{background:var(--aguja-luz)}

  .panel-acc .boton{width:100%;padding:12px 20px}
}
@media (max-width:400px){.barra .marca{font-size:16px;letter-spacing:.05em}}
@media (max-width:383px){
  .barra .marca{font-size:15px}
  .barra-der{gap:10px}
  .menu-movil{margin-left:-8px}
  .barra-der .barra-tienda{padding:0 9px;font-size:11px;letter-spacing:.04em}
}
/* 300 a 359 px: logo, márgenes y separaciones más chicos, solo acá; las rayas del menú siguen al ras del margen */
@media (max-width:359px){
  .barra .wrap{padding-inline:12px}
  .barra .marca{font-size:14px;letter-spacing:.03em}
  .barra-in{gap:4px}
  .barra-der{gap:8px}
  .menu-movil{margin-left:-9px}
  .menu-movil>summary{margin-right:-12px}
  .barra-der .barra-tienda{padding:0 7px;font-size:10.5px;letter-spacing:.04em}
}
@media (max-width:319px){
  .barra .marca{font-size:13px;letter-spacing:.02em}
  .barra-der{gap:6px}
  .barra-der .barra-tienda{padding:0 6px;font-size:10px;letter-spacing:.03em}
  .barra-der .barra-wa,.menu-movil>summary{width:40px}
  .menu-movil>summary{margin-right:-11px}
}

/* [ZSPORT-barra-llamar] A pedido del taller (2026-10-04): la barra fija de abajo se ve siempre, desde que carga la
   página y en todos los anchos (teléfono, tablet y computadora).
   - Cuatro piezas: WhatsApp (solo el logo verde; el nombre queda para lectores de pantalla), la llamada, la tienda
     para talleres (el naranja de siempre) y Cómo llegar (ícono de ubicación y rótulo).
   - Teléfono (hasta 820 px): una fila. Desde 600 px las piezas quedan al centro con anchos fijos.
   - Desde 821 px: una franja con las cuatro piezas al centro, 44 px de alto, como la barra de arriba. El hero termina
     donde empieza la franja, así su botón y sus lecturas no quedan debajo.
   - En el teléfono, si la ventana es baja, el hero se compacta para que su botón principal no quede bajo la barra.
   - --abajo es el alto de la barra sin la zona segura del iPhone: el pie y los anclajes le dejan ese lugar.
   - Blancos de toque de 44 px o más; ninguna letra por debajo de 11 px. */
:root{--abajo:65px}
html{scroll-padding-bottom:calc(var(--abajo) + 16px + env(safe-area-inset-bottom))}
.pie{padding-bottom:calc(clamp(36px,4vw,56px) + var(--abajo) + env(safe-area-inset-bottom))}
.barra-movil{
  position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;gap:6px;align-items:stretch;
  padding:8px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  background:var(--negro);border-top:1px solid var(--linea);
}
.barra-movil a{
  display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;padding:0 10px;border-radius:2px;
  color:var(--hueso);text-decoration:none;-webkit-tap-highlight-color:transparent;transition:border-color .2s ease,background-color .2s ease;
}
.barra-movil .boton-wa,.barra-movil .boton-tel,.barra-movil .boton-llegar{border:1px solid var(--borde-boton);background:none}
.barra-movil .boton-wa:hover,.barra-movil .boton-tel:hover,.barra-movil .boton-llegar:hover{border-color:var(--hueso)}
.barra-movil .boton-wa:active,.barra-movil .boton-tel:active,.barra-movil .boton-llegar:active{background:rgba(236,231,223,.1)}
.barra-movil .boton-wa{padding:0}
.barra-movil .boton-wa .wa{width:24px;height:24px;fill:var(--wa)}
.barra-movil .ico{width:19px;height:19px;flex:none;fill:currentColor}
.barra-movil .boton-tel .ico{color:var(--aguja)}
/* lo dibuja inicio.js con esta letra y este color, en el ancho que le da el CSS (así nada se corre al aparecer); el
   filete y el ícono se ven desde el primer pintado */
.barra-movil .tel-num{display:block;flex:0 1 auto;min-width:0;width:6.4em;max-width:100%;height:20px;font-family:var(--f);font-weight:600;font-size:15px;font-stretch:100%;letter-spacing:.02em;color:var(--hueso);visibility:hidden}
.barra-movil .boton-tel.listo .tel-num{visibility:visible}
@media (scripting:none){.barra-movil .boton-tel{display:none}}
.barra-movil .boton-tienda{flex-direction:column;gap:0;background:var(--aguja);color:var(--carbon);font-stretch:88%;font-weight:700;font-size:12.5px;line-height:1.2;letter-spacing:.05em;text-align:center}
.barra-movil .boton-tienda span{display:block}
.barra-movil .boton-tienda:hover,.barra-movil .boton-tienda:active{background:var(--aguja-luz)}
.barra-movil .boton-tienda:focus-visible{outline-color:var(--hueso)}
.barra-movil .boton-llegar{font-stretch:88%;font-weight:600;font-size:12px;line-height:1.15;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}

/* ---- teléfono, variante A: una fila ----
   La llamada se lleva el ancho que sobra; la tienda va en tres renglones cortos y Cómo llegar con el ícono arriba. */
@media (max-width:820px){
  .barra-a{grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-rows:48px}
  .barra-a .boton-tel{gap:7px;padding:0 8px}
  .barra-a .boton-tel .ico{width:17px;height:17px}
  .barra-a .tel-num{height:18px;font-size:14px;letter-spacing:.01em}
  .barra-a .boton-tienda{padding:0 9px;font-size:11.5px;line-height:1.13;letter-spacing:.04em}
  .barra-a .boton-llegar{flex-direction:column;gap:2px;padding:0 7px;font-size:11px;line-height:1.1;letter-spacing:.04em}
  .barra-a .boton-llegar span{width:min-content;white-space:normal;text-align:center}
  .barra-a .boton-llegar .ico{width:16px;height:16px}
}
/* desde 600 px (celular apaisado, tablet vertical) las piezas van al centro con anchos fijos: la llamada no se estira */
@media (min-width:600px) and (max-width:820px){
  .barra-a{grid-template-columns:48px minmax(0,220px) auto auto;justify-content:center;gap:8px}
}
/* hasta 429 px la llamada va con el ícono arriba, como Cómo llegar, y mide lo que mide el número; la tienda se lleva el
   resto del ancho (en dos renglones si entra, en tres si no: "PARA TALLERES" nunca se corta) */
@media (max-width:429px){
  .barra-a{grid-template-columns:44px auto minmax(0,1fr) auto}
  .barra-a .boton-tienda span:first-child{white-space:normal}
  .barra-a .boton-tienda span:last-child{white-space:nowrap}
  .barra-a .boton-tel{flex-direction:column;gap:3px;padding:0 6px}
  .barra-a .boton-tel .ico{width:16px;height:16px}
  .barra-a .tel-num{height:17px;font-size:14px;letter-spacing:0;font-stretch:87.5%}
}
/* en inglés "DIRECTIONS" es una sola palabra larga: hasta 379 px queda en su ícono, como abajo */
@media (max-width:379px){
  .barra-a .boton-llegar:lang(en){width:44px;padding:0}
  .barra-a .boton-llegar:lang(en) span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .barra-a .boton-llegar:lang(en) .ico{width:19px;height:19px}
}
/* teléfonos muy angostos: Cómo llegar queda en su ícono (el rótulo sigue para lectores de pantalla) */
@media (max-width:339px){
  .barra-movil{gap:5px;padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .barra-a .boton-tienda{padding:0 7px;font-size:11px}
  .barra-a .boton-llegar{width:44px;padding:0}
  .barra-a .boton-llegar span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .barra-a .boton-llegar .ico{width:19px;height:19px}
}

/* ---- teléfono bajo: el botón principal del hero entra entero por encima de la barra ---- */
@media (max-width:820px) and (max-height:780px){
  .hero{--foto-alto:min(100vw,35svh);--solape:80px;--pant:52px}
  .hero-foto{--pos:50% 60%}
  .hero-cab .h1.h1-largo{font-size:clamp(26px,7.4vw,36px)}
  .hero-txt{padding-top:12px}
  .bajada{font-size:17px;line-height:1.4}
  .pantalla{margin-top:6px}
  .pantalla .cur{top:-4px}
  .hero-pie{margin-top:12px}
}
/* ventanas muy bajas (iPhone SE con la barra del navegador): un poco más */
@media (max-width:820px) and (max-height:600px){
  .hero{--foto-alto:min(100vw,31svh);--solape:72px;--pant:44px}
  .hero-cab .h1.h1-largo{font-size:clamp(24px,6.9vw,32px)}
  .bajada{font-size:16px}
}

/* ---- tablet y computadora: la franja ---- */
@media (min-width:821px){
  :root{--abajo:61px}
  .barra-movil{grid-template-columns:44px 214px auto auto;grid-template-rows:44px;justify-content:center;gap:10px;
    padding:8px var(--margen);background:rgba(11,10,9,.96)}
  .barra-movil .boton-tel{gap:10px;padding:0 16px}
  .barra-movil .tel-num{height:22px;font-size:17px;letter-spacing:.03em}
  .barra-movil .boton-tienda{flex-direction:row;gap:.3em;padding:0 22px;font-size:12px;letter-spacing:.09em}
  .barra-movil .boton-llegar{gap:9px;padding:0 18px;font-stretch:100%;font-weight:500;font-size:15px;letter-spacing:0;text-transform:none}
  /* El hero es una pantalla entera con su botón y sus lecturas al pie: ahora esa pantalla es la que queda por encima de
     la franja. Las medidas que el hero toma del alto de la ventana (vh) se toman de ese alto (--vh) y el aire de abajo
     lo da la franja. Lo mismo la placa fija de "lo caro es adivinar". */
  .hero{
    --vh:calc((100vh - var(--abajo)) / 100);
    min-height:calc(100vh - var(--abajo));min-height:calc(100svh - var(--abajo));
    padding:calc(var(--barra-alto) + clamp(28px,calc(var(--vh) * 5),52px)) 0 20px;
    --pant:clamp(140px,calc(var(--vh) * 19.5),190px);--fw:min(100vw,1760px,calc(var(--vh) * 200));
    --sube:clamp(0px,calc((var(--vh) * 100 - 730px) * .25),calc(var(--fw) * .028));
  }
  .hero .h1{font-size:clamp(52px,min(8.4vw,calc(var(--vh) * 13.2)),132px)}
  .hero .h1.h1-largo{font-size:clamp(40px,min(4.6vw,calc(var(--vh) * 7.6)),72px)}
  .hero .hero-pie{margin-top:clamp(36px,calc(var(--vh) * 5.4),52px)}
  .placa-fija{height:calc(100vh - var(--abajo));height:calc(100svh - var(--abajo))}
}
/* la pantalla baja del hero (antes hasta 720 px de alto) cuenta sin la franja */
@media (min-width:821px) and (max-height:781px){
  .hero{padding-top:calc(var(--barra-alto) + 20px);--pant:118px}
  .hero .hero-pie{margin-top:26px}
}
/* notebooks bajas (1366x768 o 1280x720 con las barras del navegador): el botón del hero entra entero sobre la franja */
@media (min-width:821px) and (max-height:740px){
  .hero{padding-top:calc(var(--barra-alto) + 10px);--pant:92px;--fw:min(100vw,1760px,calc(var(--vh) * 170))}
  .hero .bajada{font-size:17px;line-height:1.4}
  .hero .hero-firma{margin-top:10px}
  .hero .hero-pie{margin-top:14px}
}
@media (min-width:821px) and (max-height:620px){
  .hero{--pant:76px;--fw:min(100vw,1760px,calc(var(--vh) * 150))}
}

/* ===== [ZSPORT-hero-rs3] el hero: un Audi RS3 negro con las balizas encendidas (reemplaza al Golf R32) =====
   Foto fija retocada (sin patente, fondo a negro puro, laca negra con reflejos marcados, la tira LED de arriba del faro
   APAGADA y el bloque de abajo encendido en blanco) y tres capas de luz del mismo encuadre encima: la tira en blanco de
   posición, la misma tira en ámbar de baliza con su halo corto, y el halo ancho ámbar con el reflejo cálido en la óptica
   y en la laca de al lado. Las capas se SUMAN a la foto (plus-lighter: la luz ilumina, no tapa). Todas van en
   .rs3-marco, que tiene la proporción de la foto (2400x1348): se superponen exactas en cualquier ancho.
   .rs3-marco se ubica en la caja de la foto con unidades de contenedor: "contain" en la computadora (apoyada abajo y con
   el faro sobre la línea de "La causa", --ex) y "cover" con punto de interés en el faro en el teléfono.
   Entrada: la foto se enciende, la tira blanca prende (1,1 s) y baja al 10 % cuando arranca la baliza (2 s), como hace
   el auto: con el intermitente puesto, la luz diurna de ese lado queda reducida mientras dure.
   Baliza: 90 destellos por minuto (ciclo de 0,667 s, encendida la mitad); el ámbar barre la tira de adentro (junto a
   la parrilla) hacia afuera en 0,2 s y se apaga de golpe a la mitad del ciclo. El barrido es una ventana que se corre
   (.rs3-barre, transform) con la capa corrida al revés adentro: lo mueve la placa de video, sin repintar. El halo ancho
   no barre (un corte vertical en el resplandor se vería falso): crece con la tira y se apaga con ella. Todo CSS.
   Con movimiento reducido: la tira blanca fija y la baliza apagada. */
.hero-rs3{--rs3:1.7804;--fx:.5;--fy:1}
.rs3-marco{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:2400/1348}
@supports (width:1cqw){
  .hero-rs3{container-type:size}
  .rs3-marco{--w:min(100cqw,calc(100cqh * var(--rs3)));bottom:auto;width:var(--w);
    left:calc((100cqw - var(--w)) * var(--fx));top:calc((100cqh - var(--w) / var(--rs3)) * var(--fy))}
}
.hero-rs3 .rs3-foto{display:block;width:100%;height:100%}
.hero-rs3 .rs3-foto img{mix-blend-mode:lighten;filter:grayscale(1) contrast(1.1) brightness(1)}
.hero-rs3 .rs3-luz,.hero-rs3 .rs3-barre{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.hero-rs3 .rs3-luz img{display:block;width:100%;height:100%;object-fit:fill;filter:none;animation:none}
.hero-rs3 .rs3-blanca,.hero-rs3 .rs3-halo,.hero-rs3 .rs3-barre{mix-blend-mode:plus-lighter}
.hero-rs3 .rs3-halo,.hero-rs3 .rs3-barre{opacity:0}
.hero-rs3 .rs3-barre{overflow:hidden}

@media (min-width:821px){
  /* la caja es la foto entera (84 % del ancho de la escena): el faro (centro en el 45,5 % de la foto) cae sobre la línea
     de "La causa" y entre el titular y la traza; la foto baja un 19 % de su alto por debajo del piso del R32 (el faro
     queda a la misma altura que con el 72 %, pero más grande) y la máscara apaga el techo y el capó de atrás (lo que
     queda detrás del titular) y el pie de la foto; la rueda ya viene apagada en el retoque */
  .hero .hero-foto.hero-rs3{
    --ex:.455;--caja:calc(var(--fw)*.84);--alto:calc(var(--caja) / 1.7804);--fx:var(--ex);--fy:1;
    left:calc(58.125% - var(--caja)*var(--ex));width:var(--caja);height:var(--alto);bottom:calc(var(--piso) - var(--alto)*.19);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 22%,#000 40%,#000 76%,rgba(0,0,0,.5) 88%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,transparent 22%,#000 40%,#000 76%,rgba(0,0,0,.5) 88%,transparent 100%);
  }
}
/* tablet apaisada y notebook angosta (821-1100 px): la bajada va en una columna más alta y el titular en cuatro renglones;
   la foto se achica y baja para que el faro quede entre la firma y la traza */
@media (min-width:821px) and (max-width:1100px){
  .hero .hero-foto.hero-rs3{--caja:calc(var(--fw)*.6);bottom:calc(var(--piso) - var(--alto)*.2)}
}
@media (max-width:820px){
  /* teléfono: la foto arranca bajo la barra y sigue un poco por debajo del titular, apagándose; el faro va arriba,
     entre la barra y el titular, corrido a la derecha: los primeros renglones del titular son cortos y no lo tapan */
  .hero .hero-foto.hero-rs3{--bajo:64px;--zoom:1.3;--px:.455;--py:.47;--ax:.64;--ay:.36;
    height:calc(var(--foto-alto) - var(--solape) - var(--barra-alto) + 2px + var(--bajo));
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 calc(100% - var(--bajo) - 12px),transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 calc(100% - var(--bajo) - 12px),transparent 100%)}
  @supports (width:1cqw){
    .hero-rs3 .rs3-marco{--w:max(calc(100cqw * var(--zoom)),calc(100cqh * var(--rs3)));
      left:calc(100cqw * var(--ax) - var(--w) * var(--px));top:calc(100cqh * var(--ay) - var(--w) / var(--rs3) * var(--py))}
  }
}
/* teléfonos comunes (375 px o más de ancho y 640 o más de alto): hay lugar para un faro más grande; sube un poco para
   que el bloque de abajo del faro no llegue al primer renglón del titular (que en portugués e inglés es más largo) */
@media (max-width:820px) and (min-width:375px) and (min-height:640px){
  .hero .hero-foto.hero-rs3{--zoom:1.5;--ay:.31}
}

/* teléfonos bajos (iPhone SE con la barra del navegador): el faro sube un poco, a la derecha de "Soluciones" */
@media (max-width:820px) and (max-height:600px){
  .hero .hero-foto.hero-rs3{--ay:.3}
}
/* teléfonos angostos y bajos (320x568): el faro sube un poco más, sobre "Soluciones" */
@media (max-width:374px) and (max-height:600px){
  .hero .hero-foto.hero-rs3{--ay:.24}
}
/* teléfono apaisado: casi no hay alto sobre el titular; el faro va chico, a la derecha del primer renglón */
@media (max-width:820px) and (max-height:500px){
  .hero .hero-foto.hero-rs3{--zoom:.8;--ax:.84;--ay:.3}
}

@media (prefers-reduced-motion:no-preference){
  .hero-rs3 .rs3-foto img{animation:rs3-encender 1.6s var(--ease-luz) backwards}
  .hero-rs3 .rs3-blanca{animation:rs3-dlr-entra .45s ease-out 1.1s backwards,rs3-dlr-baja .1s linear 1.95s forwards}
  /* la ventana del barrido tiene el borde de adelante apenas suave (0,8 % del ancho de la foto) */
  .hero-rs3 .rs3-barre{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 .8%);mask-image:linear-gradient(90deg,transparent 0,#000 .8%);
    animation:rs3-barre .6667s linear 2s infinite}
  .hero-rs3 .rs3-barre .rs3-ambar{animation:rs3-contra .6667s linear 2s infinite}
  .hero-rs3 .rs3-halo{animation:rs3-halo .6667s linear 2s infinite}
}
@keyframes rs3-encender{
  from{filter:grayscale(1) contrast(1.1) brightness(.3);transform:scale(1.04)}
  to{filter:grayscale(1) contrast(1.1) brightness(1);transform:scale(1)}
}
@keyframes rs3-dlr-entra{from{opacity:0}to{opacity:1}}
@keyframes rs3-dlr-baja{to{opacity:.1}}
/* el borde de la ventana va del 67 % al 37 % del ancho de la foto (la tira entera, de la punta de adentro a la de
   afuera) en 0,2 s; después se abre entera (el halo de afuera) y a la mitad del ciclo se apaga en 33 ms, como un LED */
@keyframes rs3-barre{
  0%{opacity:1;transform:translateX(67%)}
  30%{transform:translateX(37%)}
  37%{transform:translateX(-1%)}
  48%{opacity:1}
  53%{opacity:0}
  100%{opacity:0;transform:translateX(-1%)}
}
/* el halo ancho y el reflejo crecen mientras la tira se llena y se apagan con ella */
@keyframes rs3-halo{0%{opacity:.12}30%{opacity:.9}37%{opacity:1}48%{opacity:1}53%{opacity:0}100%{opacity:0}}
@keyframes rs3-contra{
  0%{transform:translateX(-67%)}
  30%{transform:translateX(-37%)}
  37%{transform:translateX(1%)}
  100%{transform:translateX(1%)}
}
/* ===== fin [ZSPORT-hero-rs3] ===== */

/* [ZSPORT-soluciones-nav-estrecha] Con "Soluciones" el menu tiene seis enlaces: entre 1101 y
   1180 px la barra se pasaba (el boton de WhatsApp quedaba cortado). */
@media (min-width:1101px) and (max-width:1180px){
  .barra .nav ul{gap:11px}
}