/* ═══════════════════════════════════════════════════════════════════
   CAR SERVICE · LONCOCHE — hoja única
   Demo de presentación preparada por Yordy Serna.

   PALETA · «cobre bruñido sobre grafito»
   La sala de máquinas de noche. El cobre es el metal del auto —radiadores,
   bujes, bobinados— y además es el metal de Chile. Nada de rojo-negro de
   taller de barrio ni de amarillo precaución: el rojo ya lo pone el logo del
   negocio, que entra por mix-blend-mode y no compite con el resto.

   TIPOGRAFÍA · por qué esta combinación y no otra
   · Chakra Petch 700 (titulares): grotesca con los vértices cortados en
     diagonal, el mismo gesto de un tablero de instrumentos. Aguanta tildes,
     eñes y textos largos en español, cosa que Michroma —la otra candidata—
     no hace: es tan ancha que sólo sirve para tres palabras.
   · Hanken Grotesk (texto): altura de x alta y formas abiertas, que es lo que
     se necesita para leer gris sobre negro en un celular.
   · Martian Mono 400 (cifras, patentes, cotas y metadatos): monoespaciada de
     verdad, con cero rebanado. Es la letra de la ficha técnica; se usa chica
     y con letter-spacing propio, nunca en párrafos.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --grafito:      #16181B;
  --grafito-alto: #1F2226;
  --acero:        #2C3036;
  --hueso:        #EDE8E0;
  --humo:         #9BA0A8;
  --cobre:        #C97C3F;
  --cobre-claro:  #E29A5C;
  --neumatico:    #0D0E10;

  --display: "Chakra Petch", system-ui, sans-serif;
  --cuerpo:  "Hanken Grotesk", system-ui, sans-serif;
  --dato:    "Martian Mono", ui-monospace, "Courier New", monospace;

  --ancho: 1180px;
  --canal: clamp(1.25rem, 5vw, 3rem);

  /* Movimiento. Manda la salida: lo que entra frena, no arranca.
     rápido = respuesta a un dedo; medio = un panel; lento = una entrada. */
  --t-rapido: 160ms;
  --t-medio:  320ms;
  --t-lento:  700ms;
  --ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ease-suave: cubic-bezier(.4, 0, .2, 1);

  /* contrastes medidos sobre --grafito:
     hueso 14,6:1 · humo 6,8:1 · cobre-claro 7,6:1 · cobre 5,5:1
     el cobre sólido queda para áreas y cifras grandes; el texto chico en
     cobre usa siempre --cobre-claro. */
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--grafito);
  color:var(--hueso);
  font-family:var(--cuerpo);
  font-size:clamp(1rem, .96rem + .2vw, 1.08rem);
  line-height:1.65;
  overflow-x:hidden;
}

img,svg,video{ max-width:100%; display:block; }
img{ height:auto; }

a{ color:inherit; }

[hidden]{ display:none !important; }

::selection{ background:var(--cobre); color:var(--neumatico); }

:focus-visible{
  outline:2px solid var(--cobre-claro);
  outline-offset:3px;
  border-radius:2px;
}

.mono{ font-family:var(--dato); }

.caja{ width:min(100% - var(--canal) * 2, var(--ancho)); margin-inline:auto; }
.caja--angosta{ width:min(100% - var(--canal) * 2, 780px); }

.saltar{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--cobre); color:var(--neumatico);
  padding:.7rem 1.1rem; font-weight:700;
}
.saltar:focus{ left:.5rem; top:.5rem; }

/* ── marcador de dato de ejemplo ─────────────────────────────────────
   Todo lo que lleva .ej es relleno plausible, no dato del negocio. Se ve
   a simple vista para poder decir en la reunión «esto se completa con sus
   datos reales», y se borra junto con la clase cuando el dato llega.     */
.ej{
  position:relative;
  outline:1px dashed color-mix(in srgb, var(--cobre) 55%, transparent);
  outline-offset:10px;
  border-radius:2px;
}
.ej::after{
  content:"ejemplo";
  position:absolute; top:-10px; right:-10px;
  transform:translateY(-100%);
  font-family:var(--dato); font-size:.58rem; letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--cobre-claro);
  background:var(--grafito);
  padding:0 .4rem;
  pointer-events:none;
}
.ej--inline{ display:inline; outline-offset:3px; color:var(--cobre-claro); font-weight:700; }
.ej--inline::after{ content:none; }

/* En una tarjeta el rótulo va DENTRO, arriba a la derecha: si queda
   flotando afuera se lee como si marcara la tarjeta de arriba. */
.tarjeta.ej::after,
.precios.ej::after{ top:.55rem; right:.7rem; transform:none; background:transparent; }
.tarjeta.ej,
.precios.ej{ outline-offset:0; border-color:color-mix(in srgb, var(--cobre) 45%, var(--acero)); }

/* y en una línea suelta, el rótulo baja al flujo del texto */
.rubro__marcas.ej::after{
  position:static; transform:none; display:block; padding:0;
  margin-top:.35rem; background:transparent;
}

/* ── títulos y textos comunes ───────────────────────────────────────── */
.h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.8rem, 1.25rem + 2.4vw, 3rem);
  line-height:1.06; letter-spacing:-.02em;
  margin:.4rem 0 1rem;
}
.h2 em{ font-style:normal; color:var(--cobre-claro); }

.meta{
  font-family:var(--dato);
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--humo);
  margin:0 0 .3rem;
  display:flex; flex-wrap:wrap; gap:.55rem;
}
.meta--cobre{ color:var(--cobre-claro); }
.meta--cabeza{ margin-bottom:1.6rem; }

.entrada{ color:var(--humo); max-width:60ch; margin:0 0 2.2rem; }
.entrada--ancha{ max-width:76ch; }

.enlace{ color:var(--cobre-claro); text-underline-offset:.25em; }

/* ── botones ────────────────────────────────────────────────────────── */
.boton{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:46px; padding:.7rem 1.4rem;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  letter-spacing:.01em; text-decoration:none;
  border:1px solid transparent; border-radius:3px;
  cursor:pointer;
  transition:background-color var(--t-rapido) var(--ease-suave),
             color var(--t-rapido) var(--ease-suave),
             border-color var(--t-rapido) var(--ease-suave),
             transform var(--t-rapido) var(--ease-out),
             box-shadow var(--t-medio) var(--ease-out);
}
.boton--cobre{ background:var(--cobre); color:var(--neumatico); }
.boton--cobre:hover{
  background:var(--cobre-claro); transform:translateY(-2px);
  box-shadow:0 10px 26px -12px color-mix(in srgb, var(--cobre) 85%, transparent);
}
.boton--cobre:active{ transform:translateY(0) scale(.985); }

.boton--linea{ background:transparent; color:var(--hueso); border-color:var(--acero); }
.boton--linea:hover{
  border-color:var(--cobre); color:var(--cobre-claro);
  transform:translateY(-2px);
  box-shadow:0 10px 24px -16px color-mix(in srgb, var(--cobre) 70%, transparent);
}

.boton--wsp{ background:var(--grafito-alto); color:var(--hueso); border-color:var(--acero); }
.boton--wsp::before{
  content:""; width:.55rem; height:.55rem; border-radius:50%;
  background:#4FD06A; box-shadow:0 0 0 3px rgba(79,208,106,.18);
}
.boton--wsp:hover{ border-color:#4FD06A; transform:translateY(-2px); }

/* ── banda de propuesta (de Yordy, no del negocio) ─────────────────── */
.propuesta{ background:var(--cobre); color:var(--neumatico); }
.propuesta__cinta{
  width:min(100% - var(--canal) * 2, var(--ancho));
  margin-inline:auto;
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .9rem;
  padding:.6rem 0;
  font-size:.84rem; font-weight:500;
}
.propuesta__sello{
  font-family:var(--dato); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase;
  border:1px solid rgba(13,14,16,.45); border-radius:2px;
  padding:.2rem .45rem;
}
.propuesta__ancla{ margin-left:auto; color:var(--neumatico); font-weight:700; }

/* ── cabecera ───────────────────────────────────────────────────────── */
.cabecera{
  position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--grafito) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--acero);
}
.cabecera__caja{
  width:min(100% - var(--canal) * 2, var(--ancho));
  margin-inline:auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:"marca conmutador wsp" "nav nav nav";
  align-items:center; gap:.5rem 1.2rem;
  padding:.6rem 0 0;
}

.marca{ grid-area:marca; display:flex; flex-direction:column; gap:.15rem; text-decoration:none; }
.marca__logo{
  width:clamp(128px, 20vw, 176px); height:auto;
  mix-blend-mode:screen;  /* el logo viene con fondo negro: screen lo borra */
}
.marca__zona{
  font-family:var(--dato); font-size:.55rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--humo);
}

.conmutador{
  grid-area:conmutador; justify-self:center;
  display:flex; border:1px solid var(--acero); border-radius:3px; overflow:hidden;
}
.conmutador__op{
  display:flex; align-items:center; gap:.4rem;
  min-height:44px; padding:.4rem .9rem;
  font-family:var(--display); font-weight:600; font-size:.85rem;
  color:var(--humo); text-decoration:none;
  background:transparent;
  transition:background-color .2s ease, color .2s ease;
}
.conmutador__op + .conmutador__op{ border-left:1px solid var(--acero); }
.conmutador__n{ font-family:var(--dato); font-size:.6rem; color:var(--cobre); }
.conmutador__op:hover{ color:var(--hueso); background:var(--grafito-alto); }
.conmutador__op[aria-current="true"]{ background:var(--cobre); color:var(--neumatico); }
.conmutador__op[aria-current="true"] .conmutador__n{ color:var(--neumatico); }

.cabecera__wsp{ grid-area:wsp; min-height:44px; padding:.5rem 1rem; font-size:.85rem; }

.nav{
  grid-area:nav;
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none;
  border-top:1px solid var(--acero);
  margin-top:.4rem;
}
.nav::-webkit-scrollbar{ display:none; }
.nav__lista{
  display:flex; gap:.2rem; list-style:none; margin:0; padding:0;
  width:max-content; min-width:100%;
}
.nav__lista a{
  display:flex; align-items:center; min-height:44px; padding:.3rem .8rem;
  font-size:.83rem; color:var(--humo); text-decoration:none;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.nav__lista a:hover{ color:var(--hueso); border-bottom-color:var(--cobre); }

/* ── secciones con fondo fotográfico que se difumina al hacer scroll ──
   Dos capas: la foto nítida y encima su versión de 40 px pre-renderizada,
   que el navegador amplía sola (ese suavizado ya es medio desenfoque) más
   un blur estático. Al hacer scroll SÓLO se cruza la opacidad de la capa
   de arriba: opacity la compone la GPU, mientras que animar filter:blur()
   obliga a repintar en cada cuadro. background-attachment:fixed queda
   prohibido —se rompe en iOS—; acá el fondo se fija con position:sticky. */
.hito{
  position:relative; isolation:isolate;
  min-height:100svh;
  /* clip y no hidden: overflow:hidden convertiría la sección en contenedor
     de scroll y el position:sticky del fondo dejaría de pegarse */
  overflow:clip;
}
.hito__fondo{
  position:sticky; top:0;
  height:100svh; margin-bottom:-100svh;
  z-index:0; overflow:hidden;
  pointer-events:none;
}
.hito__capa{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
}
.hito__capa--borrosa{
  opacity:0;
  filter:blur(18px);
  transform:scale(1.14);
  will-change:opacity;
  transition:opacity .45s linear;  /* suaviza los saltos del respaldo por umbrales */
}
/* El velo tiene dos trabajos opuestos: dejar ver la foto y garantizar que
   el texto se lea encima. Se resuelve por zonas en vez de bajando la luz
   de todo: la franja izquierda —donde vive el texto— va cerrada, y el
   centro-derecha queda casi limpio para que la foto se vea de verdad. */
.hito__velo{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--grafito) 88%, transparent) 0%,
      color-mix(in srgb, var(--grafito) 42%, transparent) 30%,
      color-mix(in srgb, var(--grafito) 48%, transparent) 64%,
      color-mix(in srgb, var(--grafito) 92%, transparent) 100%),
    linear-gradient(90deg,
      color-mix(in srgb, var(--neumatico) 88%, transparent) 0%,
      color-mix(in srgb, var(--neumatico) 74%, transparent) 42%,
      color-mix(in srgb, var(--neumatico) 24%, transparent) 74%,
      transparent 100%);
}
/* en celular el texto ocupa todo el ancho, así que la franja cerrada
   tiene que llegar hasta el borde derecho */
@media (max-width: 860px){
  .hito__velo{
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--grafito) 88%, transparent) 0%,
        color-mix(in srgb, var(--grafito) 52%, transparent) 26%,
        color-mix(in srgb, var(--grafito) 58%, transparent) 70%,
        color-mix(in srgb, var(--grafito) 94%, transparent) 100%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--neumatico) 82%, transparent) 0%,
        color-mix(in srgb, var(--neumatico) 66%, transparent) 60%,
        color-mix(in srgb, var(--neumatico) 52%, transparent) 100%);
  }
}
.hito__contenido{ position:relative; z-index:1; }


.hito[data-fondo="fachada-sol"]   .hito__capa--nitida{ background-image:url("../imagenes/fachada-sol.jpg"); }
.hito[data-fondo="fachada-sol"]   .hito__capa--borrosa{ background-image:url("../imagenes/fachada-sol-lq.jpg"); }
.hito[data-fondo="salon-ventas"]  .hito__capa--nitida{ background-image:url("../imagenes/salon-ventas.jpg"); }
.hito[data-fondo="salon-ventas"]  .hito__capa--borrosa{ background-image:url("../imagenes/salon-ventas-lq.jpg"); }
.hito[data-fondo="neumaticos"]    .hito__capa--nitida{ background-image:url("../imagenes/neumaticos.jpg"); }
.hito[data-fondo="neumaticos"]    .hito__capa--borrosa{ background-image:url("../imagenes/neumaticos-lq.jpg"); }
.hito[data-fondo="fachada-tarde"] .hito__capa--nitida{ background-image:url("../imagenes/fachada-tarde.jpg"); }
.hito[data-fondo="fachada-tarde"] .hito__capa--borrosa{ background-image:url("../imagenes/fachada-tarde-lq.jpg"); }

/* respaldo por JS: la variable la escribe el observer */
.hito__capa--borrosa{ opacity:var(--enfoque, 0); }

/* camino preferido: animaciones ligadas al scroll, sin JS de por medio */
@supports (animation-timeline: view()){
  .hito{ view-timeline-name:--hito; }
  .hito__capa--borrosa{
    opacity:0;
    transition:none;
    animation:enfocar linear both;
    animation-timeline:--hito;
    animation-range:cover 35% cover 95%;
  }
}
@keyframes enfocar{ from{ opacity:0 } to{ opacity:1 } }

/* ── portada ────────────────────────────────────────────────────────── */
.portada{ padding-block:clamp(3.5rem, 10vh, 7rem) clamp(4rem, 12vh, 8rem); }
.portada__caja{
  width:min(100% - var(--canal) * 2, var(--ancho));
  margin-inline:auto;
  min-height:min(78svh, 640px);
  display:flex; flex-direction:column; justify-content:center;
}
.portada__h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.4rem, 1.2rem + 5.4vw, 5rem);
  line-height:.98; letter-spacing:-.03em;
  margin:0 0 1.2rem; max-width:16ch;
}
.portada__h1 em{ font-style:normal; color:var(--cobre-claro); }
.portada__bajada{ color:var(--hueso); max-width:52ch; margin:0 0 2rem; }
.portada__acciones{ display:flex; flex-wrap:wrap; gap:.7rem; margin:0 0 2.6rem; }

/* la portada entra con @keyframes puros: nada de observer ni rAF, porque
   Chrome no corre requestAnimationFrame en pestañas de fondo y el cliente
   abriría el enlace de WhatsApp en una pestaña que mira después */
.js .portada__caja > *{
  animation:subir var(--t-lento) var(--ease-out) both;
}
.js .meta--cabeza{ animation-delay:.05s; }
.js .portada__bajada{ animation-delay:.52s; }
.js .portada__acciones{ animation-delay:.64s; }
.js .portada__ficha{ animation-delay:.76s; }

/* La foto de portada pasea, pero el que manda es el scroll: un paneo en
   bucle de 24 s sería movimiento automático de más de 5 s sin control de
   pausa, que es justo lo que pide detener la pauta de accesibilidad.
   Ligado a la línea de tiempo del scroll no hay autoplay: si el visitante
   no mueve la rueda, la imagen no se mueve. */
@supports (animation-timeline: view()){
  .js .portada .hito__capa--nitida{
    transform-origin:65% 55%;
    animation:pasear linear both;
    animation-timeline:view();
    animation-range:cover 0% cover 100%;
  }
}
@keyframes pasear{
  from{ transform:scale(1.005); }
  to{ transform:scale(1.07); }
}
@keyframes subir{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:none; }
}

/* ── ficha de datos (mono, tipo documento) ──────────────────────────── */
.ficha{
  margin:0; display:grid; gap:0;
  border-top:1px solid var(--acero);
  max-width:640px;
}
.ficha__par{
  display:grid; grid-template-columns:9.5rem 1fr; gap:.4rem 1rem;
  padding:.7rem 0; border-bottom:1px solid var(--acero);
}
.ficha__par dt{
  font-family:var(--dato); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--humo);
  padding-top:.2rem;
}
.ficha__par dd{ margin:0; font-weight:500; }
.ficha__par dd a{ color:var(--cobre-claro); }
/* dentro de una ficha el rótulo «ejemplo» no puede ir arriba: quedaría
   pegado a la fila anterior y parecería que marca ese dato. Va debajo,
   dentro de la misma fila que está marcando. */
.ficha__par.ej{ outline-offset:4px; padding-bottom:1.7rem; }
.ficha__par.ej::after{ top:auto; bottom:.3rem; right:auto; left:0; transform:none; }

.ficha--chica{ margin-top:1.2rem; font-size:.92rem; }
.ficha--chica .ficha__par{ grid-template-columns:6rem 1fr; padding:.55rem 0; }

/* ── bandas ─────────────────────────────────────────────────────────── */
/* las bandas llevan fondo propio y opaco: si quedaran transparentes, el
   fondo fotográfico de la sección anterior asomaría por debajo */
.banda{ padding-block:clamp(3.5rem, 9vw, 6.5rem); position:relative; background:var(--grafito); }
.banda + .banda{ border-top:1px solid var(--acero); }

/* ── dos estaciones ─────────────────────────────────────────────────── */
.estaciones__par{
  display:grid; gap:1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.estacion{
  background:var(--grafito-alto);
  border:1px solid var(--acero);
  border-radius:4px;
  padding:clamp(1.3rem, 3vw, 2.1rem);
  display:flex; flex-direction:column;
  scroll-margin-top:8rem;
}
.estacion__n{
  font-family:var(--dato); font-size:1.5rem; color:var(--cobre);
  margin:0; line-height:1;
}
.estacion__h{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  letter-spacing:-.01em; margin:.3rem 0 .2rem;
}
.estacion__que{ color:var(--humo); font-size:.95rem; margin:0 0 1.2rem; }
.estacion__foto{
  width:100%; aspect-ratio:16 / 10; object-fit:cover;
  border-radius:3px; border:1px solid var(--acero);
  filter:saturate(.85) contrast(1.05);
}
/* el fotograma de la nave es vertical y trae rótulos arriba y abajo:
   se encuadra la franja central, que es el galpón */
.estacion__foto--nave{ object-position:center 45%; }
.estacion__lista{
  list-style:none; margin:1.3rem 0 0; padding:0;
  display:grid; gap:.55rem;
}
.estacion__lista li{
  position:relative; padding-left:1.4rem; font-size:.95rem;
}
.estacion__lista li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:.6rem; height:1px; background:var(--cobre);
}
.estacion__cta{ margin:0; padding-top:1.6rem; margin-top:auto; }
.estacion--servicios{ border-color:color-mix(in srgb, var(--cobre) 35%, var(--acero)); }

/* ── pieza firma: la geometría ──────────────────────────────────────── */
.geometria{ background:var(--neumatico); }
.laminas{
  display:grid; gap:1.2rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 270px), 1fr));
}
.lamina{
  border:1px solid var(--acero);
  border-radius:4px;
  padding:1.2rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--grafito-alto) 70%, transparent), transparent 40%);
  display:flex; flex-direction:column;
}
.lamina__eje{
  font-family:var(--dato); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--humo); margin:0;
}
.lamina__h{
  font-family:var(--display); font-weight:700; font-size:1.25rem;
  margin:.2rem 0 .9rem; display:flex; align-items:baseline; gap:.5rem;
  flex-wrap:wrap;
}
.lamina__alias{
  font-family:var(--dato); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--cobre-claro);
}
.lamina__sintoma{
  margin:1.1rem 0 0; font-size:.92rem; color:var(--hueso);
  border-top:1px solid var(--acero); padding-top:.9rem;
}
.lamina__etiqueta{
  display:block;
  font-family:var(--dato); font-size:.55rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cobre-claro); margin-bottom:.35rem;
}
.lamina--extra{ grid-column:1 / -1; }
.lamina--extra .dibujo{ max-width:420px; }

/* dibujos técnicos */
.dibujo{ width:100%; height:auto; margin-top:auto; }
.d-cuerpo{ fill:none; stroke:var(--humo); stroke-width:1.6; }
.d-linea{ fill:none; stroke:var(--acero); stroke-width:1.2; }
/* las líneas de referencia van sobre fondo casi negro: con --acero
   desaparecen, así que se dibujan con humo rebajado */
.d-eje{ stroke:color-mix(in srgb, var(--humo) 62%, transparent); stroke-width:1; stroke-dasharray:5 5; }
.d-suelo{ stroke:var(--humo); stroke-width:1.2; }
.d-rueda{ fill:color-mix(in srgb, var(--cobre) 12%, transparent); stroke:var(--humo); stroke-width:1.4; }
.d-rueda--viva{ stroke:var(--cobre); fill:color-mix(in srgb, var(--cobre) 18%, transparent); }
.d-llanta{ fill:none; stroke:var(--cobre-claro); stroke-width:1.2; }
.d-punto{ fill:var(--cobre-claro); stroke:none; }
.d-cota line{ stroke:var(--cobre-claro); stroke-width:1; }
.d-cota path{ fill:var(--cobre-claro); }
.d-guia{ stroke:color-mix(in srgb, var(--humo) 55%, transparent); stroke-width:1; stroke-dasharray:3 3; }
.d-arco{ fill:none; stroke:var(--cobre-claro); stroke-width:2; }
.d-mando{ stroke:var(--cobre); stroke-width:1.6; stroke-dasharray:7 4; }
.d-peso{ fill:var(--cobre); stroke:none; }
.d-onda{ fill:none; stroke:var(--cobre-claro); stroke-width:1.6; }
.d-rotulo{
  font-family:var(--dato); font-size:11px; fill:var(--cobre-claro);
  letter-spacing:.04em;
}
.d-nota,.d-flecha{
  font-family:var(--dato); font-size:9px; fill:var(--humo); letter-spacing:.08em;
}
.geometria__cierre{ margin:2.4rem 0 0; color:var(--humo); }

/* ── el taller (video) ──────────────────────────────────────────────── */
.visor{
  margin:0 0 2rem;
  border:1px solid var(--acero); border-radius:4px; overflow:hidden;
  background:var(--neumatico);
  position:relative;
}
.visor__video{
  width:100%;
  aspect-ratio:2 / 1;
  object-fit:cover;
  /* el video es vertical y lleva rótulos arriba y abajo: se muestra sólo la
     franja central, que es donde está la nave */
  object-position:center 42%;
  background:var(--neumatico);
}
.visor__pie{
  font-family:var(--dato); font-size:.6rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--humo);
  padding:.7rem 1rem; border-top:1px solid var(--acero);
}

.tarjetas{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.tarjeta{
  border:1px solid var(--acero); border-radius:4px;
  padding:1.2rem; background:var(--grafito-alto);
}
.tarjeta__cifra{
  font-family:var(--display); font-weight:700; font-size:2.4rem;
  color:var(--cobre); margin:0; line-height:1;
}
.tarjeta__pie{ margin:.5rem 0 0; color:var(--humo); font-size:.9rem; }

/* ── lista de servicios ─────────────────────────────────────────────── */
.servicios{
  list-style:none; margin:0 0 2.6rem; padding:0;
  display:grid; gap:0;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  border-top:1px solid var(--acero);
}
.servicio{
  display:flex; align-items:baseline; gap:.9rem;
  padding:.85rem .2rem;
  border-bottom:1px solid var(--acero);
  font-size:.98rem;
}
.servicio__n{ font-family:var(--dato); font-size:.68rem; color:var(--cobre); }

.precios{ border:1px solid var(--acero); border-radius:4px; padding:1.4rem; max-width:640px; }
.precios__ojo{
  font-family:var(--dato); font-size:.6rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--humo); margin:0 0 .8rem;
}
.precios__lista{ margin:0; display:grid; gap:0; }
.precios__lista > div{
  display:flex; justify-content:space-between; gap:1rem;
  padding:.55rem 0; border-bottom:1px solid var(--acero);
}
.precios__lista dt{ color:var(--hueso); }
.precios__lista dd{ margin:0; font-family:var(--dato); font-size:.9rem; color:var(--cobre-claro); }
.precios__nota{ margin:.9rem 0 0; font-size:.82rem; color:var(--humo); }

/* ── la tienda ──────────────────────────────────────────────────────── */
.tienda,.oferta,.visitanos{ padding-block:clamp(4rem, 12vw, 8rem); }
.rubros{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.rubro{
  border:1px solid var(--acero); border-radius:4px;
  padding:1.2rem;
  background:color-mix(in srgb, var(--grafito) 82%, transparent);
  backdrop-filter:blur(2px);
}
.rubro__h{
  font-family:var(--display); font-weight:700; font-size:1.1rem;
  margin:0 0 .5rem;
}
.rubro p{ margin:0 0 .6rem; font-size:.93rem; color:var(--humo); }
.rubro__marcas{
  font-family:var(--dato); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cobre-claro); margin:0;
}

/* ── oferta publicada ───────────────────────────────────────────────── */
.oferta__caja{
  max-width:520px;
  background:color-mix(in srgb, var(--neumatico) 88%, transparent);
  border:1px solid var(--acero); border-radius:4px;
  padding:clamp(1.4rem, 4vw, 2.4rem);
}
.oferta__h{ margin:.4rem 0 1rem; display:flex; flex-direction:column; gap:.2rem; }
.oferta__medida{ font-family:var(--dato); font-size:.95rem; color:var(--hueso); letter-spacing:.06em; }
.oferta__precio{
  font-family:var(--display); font-weight:700;
  font-size:clamp(2.6rem, 1.6rem + 4vw, 4.2rem);
  color:var(--cobre); line-height:1;
}
.oferta__texto{ margin:0 0 1rem; }
.oferta__pie{ font-size:.84rem; color:var(--humo); margin:0 0 1.4rem; }

/* ── formulario ─────────────────────────────────────────────────────── */
.pestanas{ display:flex; gap:.4rem; margin-bottom:-1px; flex-wrap:wrap; }
.pestana{
  display:flex; align-items:center; gap:.5rem;
  min-height:46px; padding:.6rem 1.1rem;
  font-family:var(--display); font-weight:600; font-size:.95rem;
  color:var(--humo); background:transparent;
  border:1px solid var(--acero); border-bottom-color:transparent;
  border-radius:3px 3px 0 0;
  cursor:pointer;
}
.pestana__n{ font-family:var(--dato); font-size:.6rem; color:var(--cobre); }
.pestana[aria-selected="true"]{
  color:var(--hueso); background:var(--grafito-alto);
  border-color:var(--acero);
}
.formulario{
  border:1px solid var(--acero); border-radius:0 4px 4px 4px;
  background:var(--grafito-alto);
  padding:clamp(1.2rem, 3vw, 2rem);
}
.panel__titulo{
  font-family:var(--dato); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--cobre-claro);
  margin:0 0 1.2rem;
}
.campos{
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.campo{ margin:0; display:flex; flex-direction:column; gap:.35rem; }
.campo--ancho{ grid-column:1 / -1; }
.campo label{
  font-family:var(--dato); font-size:.58rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--humo);
}
.campo__opc{ text-transform:none; letter-spacing:0; }
.campo input,.campo select,.campo textarea{
  font-family:inherit; font-size:1rem; color:var(--hueso);
  background:var(--grafito); border:1px solid var(--acero); border-radius:3px;
  padding:.65rem .75rem; min-height:46px;
  width:100%;
}
.campo textarea{ resize:vertical; min-height:88px; line-height:1.5; }
/* 80 % y no menos: por debajo, el texto de ayuda no llega a 4,5:1 */
.campo input::placeholder,.campo textarea::placeholder{ color:color-mix(in srgb, var(--humo) 80%, var(--grafito)); }
.campo input:focus,.campo select:focus,.campo textarea:focus{ border-color:var(--cobre); }
.campo input.mono{ font-family:var(--dato); letter-spacing:.1em; }

.resumen{
  margin-top:1.6rem; border-top:1px solid var(--acero); padding-top:1.2rem;
}
.resumen__ojo{
  font-family:var(--dato); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--humo); margin:0 0 .6rem;
}
.resumen__texto{
  display:block;
  background:var(--grafito); border:1px solid var(--acero); border-left:2px solid var(--cobre);
  border-radius:3px;
  padding:.9rem 1rem;
  font-size:.78rem; line-height:1.9; color:var(--hueso);
  white-space:pre-wrap; word-break:break-word;
}
.formulario__acciones{ display:flex; flex-wrap:wrap; gap:.7rem; margin:1.4rem 0 0; }
.formulario__aviso{
  margin:.9rem 0 0; font-size:.68rem; letter-spacing:.08em;
  color:var(--cobre-claro);
}

/* ── cómo llegar ────────────────────────────────────────────────────── */
.visitanos__par{
  display:grid; gap:2rem;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  align-items:start;
}
.visitanos__foto{ margin:0; }
.visitanos__foto img{
  width:100%; border-radius:4px; border:1px solid var(--acero);
  aspect-ratio:4 / 3; object-fit:cover;
}
.visitanos__foto figcaption{
  font-family:var(--dato); font-size:.58rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--humo); margin-top:.6rem;
}
.visitanos .ficha{ margin-bottom:1.6rem; }

/* ── para el dueño ──────────────────────────────────────────────────── */
.dueno{ background:var(--neumatico); }
.dueno__grilla{
  display:grid; gap:1.6rem;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  margin-bottom:2.4rem;
}
.dueno__h{
  font-family:var(--display); font-weight:700; font-size:1.05rem;
  color:var(--cobre-claro); margin:0 0 .5rem;
}
.dueno__grilla p{ margin:0; color:var(--humo); font-size:.95rem; }
.dueno__acciones{ display:flex; flex-wrap:wrap; gap:.7rem; margin:0; }

/* ── pie ────────────────────────────────────────────────────────────── */
.pie{ border-top:1px solid var(--acero); padding-block:2.6rem; }
.pie__caja{ display:grid; gap:.5rem; }
.pie__marca{ font-family:var(--display); font-weight:700; font-size:1.1rem; margin:0; }
.pie__nota{ font-size:.6rem; letter-spacing:.1em; color:var(--humo); margin:0; text-transform:uppercase; }
.pie__firma{ margin:.6rem 0 0; font-size:.9rem; color:var(--humo); }
.pie__firma a{ color:var(--cobre-claro); }

/* ── reveals: la clase la pone el JS, nunca el HTML ─────────────────── */
.js .revelable{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),
             transform .7s cubic-bezier(.22,.61,.36,1);
}
.js .revelable.visible{ opacity:1; transform:none; }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 860px){
  .cabecera__caja{
    grid-template-columns:1fr auto;
    grid-template-areas:"marca wsp" "conmutador conmutador" "nav nav";
    gap:.4rem .8rem;
  }
  .conmutador{ justify-self:stretch; }
  .conmutador__op{ flex:1; justify-content:center; }
  /* la cabecera pegada no puede comerse un tercio de la pantalla del
     celular: el logo baja de tamaño y la línea de zona se va */
  .marca__logo{ width:clamp(104px, 26vw, 150px); }
  .marca__zona{ display:none; }
  .cabecera__caja{ padding-top:.45rem; }
  .visitanos__par{ grid-template-columns:1fr; }
  .ficha__par{ grid-template-columns:1fr; gap:.1rem; }
  .ficha--chica .ficha__par{ grid-template-columns:1fr; }
}

@media (max-width: 520px){
  .ej{ outline-offset:6px; }
  .ej::after{ top:-6px; right:-6px; }
  /* 3/2 y no 4/3: con más alto empieza a asomar el rótulo azul que el
     video trae quemado abajo */
  .visor__video{ aspect-ratio:3 / 2; }
  .propuesta__ancla{ margin-left:0; }
}


/* ═══════════════════════════════════════════════════════════════════
   SISTEMA DE MOVIMIENTO · «el instrumento que se calibra»

   En un taller nada aparece con un fundido: el tablero barre, la aguja
   se asienta, la cota se dibuja, el número sube hasta su lectura. Ese es
   el vocabulario de esta página, y se repite en todas partes para que
   se lea como un sistema y no como efectos sueltos.

   Dónde va el gesto grande: en la lámina de geometría, que se dibuja
   sola como un plano. Todo lo demás se mantiene corto y disciplinado.

   Qué NO se anima, a propósito: nada en bucle infinito, nada de
   width/height/margin (reflow), nada de filter:blur() al hacer scroll
   (repinta cada cuadro). Sólo transform, opacity y stroke-dashoffset.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* un tiempo por trabajo, no un tiempo para todo */
  --t-toque:   140ms;   /* respuesta al dedo o al clic */
  --t-estado:  260ms;   /* hover, foco, cambios de estado */
  --t-entrada: 620ms;   /* algo que llega a escena */
  --t-dibujo: 1100ms;   /* el plano dibujándose */

  --curva:       cubic-bezier(.22,.61,.36,1);   /* salida franca */
  --curva-larga: cubic-bezier(.16,1,.3,1);      /* llegada larga, sin rebote */
  --curva-reten: cubic-bezier(.34,1.28,.64,1);  /* el clic mecánico */
}

/* ── portada: entra desenfocada y enfoca sola ────────────────────────
   La foto arranca borrosa y se aclara. Es una capa propia y no la del
   scroll, para que no se peleen por la misma opacidad.               */
.portada .hito__capa--nitida{
  filter:brightness(1.24) saturate(.96) contrast(1.02);
}
.portada .hito__capa--arranque{
  background-image:url("../imagenes/fachada-sol-lq.jpg");
  filter:blur(24px); transform:scale(1.18);
  opacity:1;
  animation:enfocar-portada 1.6s var(--curva-larga) .05s both;
}
@keyframes enfocar-portada{ from{ opacity:1 } to{ opacity:0 } }

/* el velo de la portada es más liviano que el del resto: acá la foto
   tiene que verse, y el texto vive en la mitad izquierda */
.portada .hito__velo{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--grafito) 88%, transparent) 0%,
      color-mix(in srgb, var(--grafito) 48%, transparent) 34%,
      color-mix(in srgb, var(--grafito) 58%, transparent) 66%,
      color-mix(in srgb, var(--grafito) 96%, transparent) 100%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--neumatico) 90%, transparent) 0%,
      color-mix(in srgb, var(--neumatico) 62%, transparent) 38%,
      color-mix(in srgb, var(--neumatico) 18%, transparent) 74%,
      transparent 100%);
}

/* ── titular por persianas ───────────────────────────────────────── */
.linea{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.js .linea__int{ display:block; transform:translateY(105%); }
.js .portada__h1{ animation-name:aparecer; }   /* el bloque sólo funde */
.js .linea:nth-child(1) .linea__int{ animation:persiana .9s var(--curva-larga) .16s both; }
.js .linea:nth-child(2) .linea__int{ animation:persiana .9s var(--curva-larga) .28s both; }
@keyframes persiana{ from{ transform:translateY(105%) } to{ transform:none } }
@keyframes aparecer{ from{ opacity:0 } to{ opacity:1 } }

/* la línea de metadatos se "calibra": entra abierta y cierra al valor */
.js .meta--cabeza{ animation:calibrar .9s var(--curva-larga) both; }
@keyframes calibrar{
  from{ opacity:0; letter-spacing:.42em; }
  to{ opacity:1; letter-spacing:.18em; }
}

/* ── encabezados: la cota se dibuja debajo ───────────────────────────
   El mismo gesto en todas las secciones. Es una regla de plano, no un
   subrayado decorativo: arranca en cobre y sigue en acero.            */
.h2{ position:relative; padding-bottom:.7rem; }
.h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:min(100%, 360px); height:2px;
  background:linear-gradient(90deg, var(--cobre) 0 32%, var(--acero) 32%);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s var(--curva-larga) .12s;
}
.js .h2.visible::after{ transform:scaleX(1); }
html:not(.js) .h2::after{ transform:none; }

/* ── reveals: no todos entran igual ──────────────────────────────────
   El texto sube poco; las tarjetas suben y se asientan; el escalonado
   lo da --i, que escribe el JS por posición dentro de su grupo.       */
.js .revelable{
  transition-duration:var(--t-entrada);
  transition-timing-function:var(--curva-larga);
  transition-delay:calc(var(--i, 0) * 70ms);
}
.js :is(.estacion,.lamina,.tarjeta,.rubro,.visor).revelable{
  transform:translateY(28px) scale(.985);
}
.js :is(.estacion,.lamina,.tarjeta,.rubro,.visor).revelable.visible{ transform:none; }
.js .h2.revelable{ transform:translateY(12px); }

/* ── tarjetas vivas: el foco de taller sigue al cursor ───────────────
   El halo es un radial que se posiciona con --mx/--my. Sólo se enciende
   donde hay puntero de verdad: en touch no existe el hover.           */
:is(.estacion,.lamina,.tarjeta,.rubro,.precios,.visor,.oferta__caja){
  transition:transform var(--t-estado) var(--curva),
             border-color var(--t-estado) ease,
             box-shadow var(--t-estado) ease;
}
:is(.estacion,.lamina,.tarjeta,.rubro,.visor)::before{
  content:""; position:absolute; inset:0; z-index:0;
  border-radius:inherit; opacity:0; pointer-events:none;
  transition:opacity var(--t-estado) ease;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),
             color-mix(in srgb, var(--cobre) 16%, transparent), transparent 62%);
}
:is(.estacion,.lamina,.tarjeta,.rubro,.visor){ position:relative; isolation:isolate; }
:is(.estacion,.lamina,.tarjeta,.rubro,.visor) > *{ position:relative; z-index:1; }

@media (hover: hover){
  :is(.estacion,.lamina,.tarjeta,.rubro):hover{
    transform:translateY(-4px);
    border-color:color-mix(in srgb, var(--cobre) 55%, var(--acero));
    box-shadow:0 16px 34px rgba(0,0,0,.42);
  }
  :is(.estacion,.lamina,.tarjeta,.rubro,.visor):hover::before{ opacity:1; }
  .visor:hover{ border-color:color-mix(in srgb, var(--cobre) 50%, var(--acero)); }
}

/* ── botones: barrido y retén ────────────────────────────────────────
   El relleno entra desde la izquierda como una compuerta y el :active
   hunde el botón 2,5 %: es el clic mecánico de un interruptor.        */
.boton{ position:relative; overflow:hidden; isolation:isolate; }
.boton::after{
  content:""; position:absolute; inset:0; z-index:-1;
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-estado) var(--curva);
}
.boton--cobre::after{ background:var(--cobre-claro); }
.boton--linea::after{ background:color-mix(in srgb, var(--cobre) 20%, transparent); }
.boton--wsp::after{ background:color-mix(in srgb, #4FD06A 16%, transparent); }
.boton:hover::after{ transform:scaleX(1); }
.boton:active{ transform:scale(.975); transition-duration:var(--t-toque); }
.boton--cobre:hover{ background:var(--cobre); }  /* el color lo pone el barrido */
.boton--wsp::before{ transition:box-shadow var(--t-estado) ease; }
.boton--wsp:hover::before{ box-shadow:0 0 0 5px rgba(79,208,106,.22); }

/* mismo retén para el conmutador y las pestañas */
.conmutador__op:active,.pestana:active{ transform:scale(.98); }
.conmutador__op,.pestana{ transition:background-color var(--t-estado) ease,
                                     color var(--t-estado) ease,
                                     transform var(--t-toque) var(--curva-reten); }

/* ── navegación: el subrayado crece desde el centro ─────────────────── */
.nav__lista a{ position:relative; border-bottom-color:transparent !important; }
.nav__lista a::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:6px; height:2px;
  background:var(--cobre); transform:scaleX(0);
  transition:transform var(--t-estado) var(--curva);
}
.nav__lista a:hover::after{ transform:scaleX(1); }

/* ── cabecera: se compacta al pasar el pliegue ───────────────────────
   Lo dispara un testigo con IntersectionObserver, no un listener de
   scroll: la cabecera no tiene por qué pagar cada cuadro.             */
.sentinela{ display:block; height:1px; margin-bottom:-1px; }
.marca__logo{ transition:transform var(--t-estado) var(--curva); transform-origin:left center; }
.marca__zona{ transition:opacity var(--t-estado) ease; }
.compacta .marca__logo{ transform:scale(.84); }
.compacta .marca__zona{ opacity:0; }
.compacta .cabecera{ box-shadow:0 12px 34px rgba(0,0,0,.5); }

/* ── lista de servicios: la fila se activa ──────────────────────────── */
.servicio{ position:relative; transition:transform var(--t-estado) var(--curva); }
.servicio::before{
  content:""; position:absolute; left:-.6rem; top:.35rem; bottom:.35rem; width:2px;
  background:var(--cobre); transform:scaleY(0); transform-origin:center bottom;
  transition:transform var(--t-estado) var(--curva);
}
@media (hover: hover){
  .servicio:hover{ transform:translateX(7px); }
  .servicio:hover::before{ transform:scaleY(1); }
}

/* ── LA FIRMA · la lámina se dibuja sola ─────────────────────────────
   Cada trazo lleva pathLength="1" en el HTML, así que el largo está
   normalizado y el dibujo es CSS puro: no hace falta getTotalLength()
   ni un solo cálculo en JS. El orden lo da --i.                        */
.js .dibujo .traza{
  stroke-dasharray:1; stroke-dashoffset:1; fill-opacity:0;
  transition:stroke-dashoffset var(--t-dibujo) var(--curva-larga),
             fill-opacity .5s ease;
  transition-delay:calc(var(--i, 0) * 55ms), calc(var(--t-dibujo) * .6);
}
.js .lamina.visible .dibujo .traza{ stroke-dashoffset:0; fill-opacity:1; }
.js .dibujo :is(text,.d-cota,.d-punto,.d-peso){
  opacity:0; transition:opacity .5s ease;
  transition-delay:calc(var(--t-dibujo) * .75);
}
.js .lamina.visible .dibujo :is(text,.d-cota,.d-punto,.d-peso){ opacity:1; }

/* ── cifras: la aguja se asienta ─────────────────────────────────────
   El número final está escrito en el HTML; el JS sólo lo hace subir al
   entrar en pantalla y lo devuelve tal cual al terminar.              */
.cifra-viva{ font-variant-numeric:tabular-nums; }

/* ── formulario: el campo se enciende ───────────────────────────────── */
.campo input,.campo select,.campo textarea{
  transition:border-color var(--t-estado) ease, background-color var(--t-estado) ease;
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  background:color-mix(in srgb, var(--cobre) 6%, var(--grafito));
}
.resumen__texto{ transition:border-color var(--t-estado) ease; }
.formulario:focus-within .resumen__texto{ border-left-color:var(--cobre-claro); }

/* el aviso de "copiado" entra desde abajo en vez de aparecer de golpe */
.formulario__aviso{ animation:asomar .35s var(--curva) both; }
@keyframes asomar{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } }

/* ── movimiento reducido ────────────────────────────────────────────
   Se apaga lo intrusivo (el cruce de enfoque al scroll y los reveals),
   no los fundidos ni los hovers: un sitio sin ninguna transición se ve
   muerto, y en Windows esta preferencia viene activada de fábrica.     */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .js .portada__caja > *{ animation:none; }
  .js .revelable{ opacity:1; transform:none; transition:none; }
  .hito__capa--borrosa{
    animation:none !important;
    transition:none;
    opacity:.5 !important;   /* difuminado estático, sin cruce */
  }
}

/* Añadidos de movimiento reducido: se apaga lo que desplaza cosas
   —persianas, el dibujo del plano, el halo que sigue al cursor, las
   tarjetas que se levantan—. Se dejan los cambios de color, el foco y
   el barrido de los botones: eso es respuesta a una acción del
   visitante, no movimiento ambiental. */
@media (prefers-reduced-motion: reduce){
  .hito__capa--arranque{ display:none; }
  .js .linea__int{ transform:none; animation:none; }
  .js .meta--cabeza{ animation:none; }
  .h2::after{ transition:none; transform:none !important; }
  .js .dibujo .traza{
    stroke-dasharray:none; stroke-dashoffset:0; fill-opacity:1; transition:none;
  }
  .js .dibujo text,
  .js .dibujo .d-cota,
  .js .dibujo .d-punto,
  .js .dibujo .d-peso{ opacity:1; transition:none; }
  .estacion::before,.lamina::before,.tarjeta::before,.rubro::before,.visor::before{ display:none; }
  .estacion:hover,.lamina:hover,.tarjeta:hover,.rubro:hover{ transform:none; }
  .servicio:hover{ transform:none; }
  .boton:active,.conmutador__op:active,.pestana:active{ transform:none; }
  .compacta .marca__logo{ transform:none; }
  .formulario__aviso{ animation:none; }
  /* el paseo de la foto de portada también se detiene */
  .js .portada .hito__capa--nitida{ animation:none !important; }
}

/* En celular el texto del hero ocupa todo el ancho, así que la franja
   cerrada del velo tiene que llegar hasta el borde derecho: si no, el
   titular queda sobre la parte clara de la foto. Va acá abajo a
   propósito, después de la regla de escritorio, porque comparten
   especificidad y manda el orden. */
@media (max-width: 860px){
  .portada .hito__velo{
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--grafito) 86%, transparent) 0%,
        color-mix(in srgb, var(--grafito) 56%, transparent) 26%,
        color-mix(in srgb, var(--grafito) 62%, transparent) 70%,
        color-mix(in srgb, var(--grafito) 94%, transparent) 100%),
      linear-gradient(100deg,
        color-mix(in srgb, var(--neumatico) 84%, transparent) 0%,
        color-mix(in srgb, var(--neumatico) 68%, transparent) 55%,
        color-mix(in srgb, var(--neumatico) 54%, transparent) 100%);
  }
}

/* ── placa de datos de la portada ────────────────────────────────────
   Con la foto más clara, el cobre del teléfono se quedaba en 3,8:1
   contra los píxeles más luminosos del fondo (medido componiendo foto
   y velo en un canvas). La ficha pasa a ser una placa con fondo propio:
   sube a ~6:1 y de paso se parece más a lo que es, una chapa de datos. */
.portada__ficha{
  background:color-mix(in srgb, var(--neumatico) 74%, transparent);
  backdrop-filter:blur(6px);
  border:1px solid var(--acero);
  border-radius:4px;
  padding:.2rem 1.1rem;
  max-width:min(100%, 520px);
}
.portada__ficha .ficha__par:last-child{ border-bottom:none; }

/* ── portada: panel de vidrio bajo el texto ──────────────────────────
   Con el velo aligerado la foto se ve de verdad, pero medí el cielo de
   esa foto y en las zonas claras el texto secundario caía a 2,7:1.
   En vez de volver a apagar la imagen entera, el bloque de texto se
   apoya en un panel ahumado con el fondo difuminado detrás: la foto
   queda clara alrededor y el texto se lee sobre vidrio, que es además
   el gesto de una ficha pegada al parabrisas.                         */
.portada__caja{ position:relative; isolation:isolate; }
.portada__caja::before{
  content:"";
  position:absolute; z-index:-1;
  inset:-1.6rem -2.4rem -1.6rem -2.4rem;
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--neumatico) 82%, transparent) 0%,
    color-mix(in srgb, var(--neumatico) 66%, transparent) 55%,
    color-mix(in srgb, var(--neumatico) 34%, transparent) 85%,
    transparent 100%);
  backdrop-filter:blur(7px) saturate(.92);
  border-left:2px solid var(--cobre);
  border-radius:2px;
}
/* sobre el panel, los secundarios suben de gris a hueso: el gris cumple
   sobre grafito plano, no sobre una foto clara */
.portada .meta,
.portada .ficha__par dt{ color:var(--hueso); }
.portada .ficha__par dd a{
  color:var(--hueso);
  text-decoration:none;
  border-bottom:1px solid var(--cobre);
  padding-bottom:1px;
}
.portada .ficha,
.portada .ficha__par{ border-color:color-mix(in srgb, var(--hueso) 26%, transparent); }

@media (max-width: 860px){
  .portada__caja::before{ inset:-1.1rem -1.2rem; }
}

/* el velo de la portada se abre todavía más: el trabajo de contraste lo
   hace ahora el panel, no la oscuridad general */
.portada .hito__velo{
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--grafito) 78%, transparent) 0%,
      color-mix(in srgb, var(--grafito) 30%, transparent) 32%,
      color-mix(in srgb, var(--grafito) 38%, transparent) 68%,
      color-mix(in srgb, var(--grafito) 92%, transparent) 100%),
    linear-gradient(100deg,
      color-mix(in srgb, var(--neumatico) 55%, transparent) 0%,
      color-mix(in srgb, var(--neumatico) 30%, transparent) 45%,
      transparent 80%);
}
@media (max-width: 860px){
  .portada .hito__velo{
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--grafito) 80%, transparent) 0%,
        color-mix(in srgb, var(--grafito) 40%, transparent) 26%,
        color-mix(in srgb, var(--grafito) 46%, transparent) 70%,
        color-mix(in srgb, var(--grafito) 92%, transparent) 100%),
      linear-gradient(100deg,
        color-mix(in srgb, var(--neumatico) 58%, transparent) 0%,
        color-mix(in srgb, var(--neumatico) 40%, transparent) 60%,
        color-mix(in srgb, var(--neumatico) 28%, transparent) 100%);
  }
}

/* ── detalles de manipulación ────────────────────────────────────────
   touch-action:manipulation le quita al navegador el medio segundo que
   espera por un posible doble toque, y el resaltado propio de Android se
   apaga porque acá el :active ya hunde el botón.                       */
a,button,select,input,textarea,summary,[role="tab"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* la cabecera está pegada arriba: sin este margen, al saltar a una
   sección con el teclado el título queda debajo de ella */
section[id],[id]:target{ scroll-margin-top:9.5rem; }
@media (max-width: 860px){
  section[id],[id]:target{ scroll-margin-top:11rem; }
}