/* ═══════════════════════════════════════════════════════════════
   HERO DEL CAR · scroll-scrub

   Todo el movimiento cuelga de UNA custom property, `--car-p`, que va
   de 0 a 1 a lo largo de los 300vh de la sección. La escribe
   `car-hero.js` una vez por fotograma; el resto es CSS.

   Nada de esto sale de este archivo: el hero está scopeado bajo
   `.car-hero` y no toca ni un token ni un componente compartido.
   ═══════════════════════════════════════════════════════════════ */

.car-hero{
  --car-black:#0A0A0B;   /* = --carbon */
  --car-orange:#FD6500;
  --car-cream:var(--hueso);
  --car-navy:#00294F;
  --car-p:0;
  --car-bar:104px;

  /* Sub-progresos. Cada tramo del guion es un número de 0 a 1. */
  --car-ui:   clamp(0, calc(var(--car-p) / .35), 1);          /* 0 → .35  se va la UI   */
  --car-marco:clamp(0, calc(var(--car-p) / .50), 1);          /* 0 → .50  se abre el marco */
  --car-noche:clamp(0, calc((var(--car-p) - .5) / .5), 1);    /* .5 → 1   entra la noche  */

  position:relative;
  height:240vh;
  background:var(--car-navy);
  /* La regla global `section{padding-block:clamp(72px,10vw,148px)}` le
     metía 144px arriba y abajo: el contenedor pegado arrancaba 144px
     más abajo y la barra de datos quedaba fuera de la pantalla. */
  padding:0;
}

.car-hero-fijo{
  /* Se pega DEBAJO del header, no en 0. El header es fijo y mide
     --header-h: con top:0 y 100vh el contenedor sobresalía por abajo
     esa misma altura, y la barra de datos quedaba cortada. */
  position:sticky;top:var(--header-h);
  /* El render es 2560×1623 = 1.577. El alto ideal sería ancho/1.577
     más la barra; se capa con la pantalla para que la barra siempre
     entre en la primera vista. */
  height:min(calc(100svh - var(--header-h)), calc(100vw / 1.577 + 104px));
  overflow:hidden;
}

/* ── El marco: de recuadro con aire a sangrado completo ───────────
   Va con `inset` real y NO con clip-path. Con clip-path el marco medía
   toda la pantalla y el recorte se comía 32px del borde inferior: la
   barra de datos, anclada justo ahí, quedaba partida. Era una altura
   fija peleándose con un elemento absoluto, y no se arreglaba tocando
   la barra. Ahora la caja del marco ES la tarjeta visible, y la barra
   vive dentro, en el flujo. */
.car-hero-marco{
  position:absolute;
  inset:calc((1 - var(--car-marco)) * 32px);
  border-radius:calc((1 - var(--car-marco)) * 24px);
  overflow:hidden;
  background:var(--car-navy);
}
/* La imagen ocupa lo que sobra; la barra de datos se lleva su alto
   completo y nunca queda cortada. */
.car-media{position:absolute;inset:0;overflow:hidden}

/* ── Las tres capas de imagen, apiladas sin desplazamiento ────────
   Comparten encuadre pixel a pixel, así que van con el mismo
   `object-fit:cover` y el mismo origen: cualquier diferencia de
   tamaño o posición rompería el calce del recorte con el fondo. */
.car-capa{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;object-position:center 26%;
  display:block;
}
.car-dia{z-index:1}
.car-noche{z-index:2;opacity:var(--car-noche);will-change:opacity}
.car-recorte{
  z-index:5;
  opacity:calc(1 - var(--car-ui));
  /* SIN translate: el recorte tiene que quedar clavado al fondo. Al
     moverlo se veía el edificio duplicado y corrido. */
  will-change:opacity;
}

/* ── Capas de texto ──────────────────────────────────────────────
   El h1 va DEBAJO del recorte —por eso el techo del edificio le tapa
   el pie a las letras— pero sigue siendo texto real en el DOM. */
.car-ui{
  position:absolute;z-index:6;
  opacity:calc(1 - var(--car-ui));
  transform:translateY(calc(var(--car-ui) * 24px));
  will-change:transform,opacity;
}
.car-ui-titulo{
  z-index:6;inset:0 auto auto 0;
  padding:clamp(12px,1.6vh,22px) 0 48px;width:100%;
  /* Velo suave sólo en la banda del titular: el crema tiene que leerse
     tanto sobre el cielo como sobre el techo oscuro. Se desvanece antes
     de llegar al edificio, así el render sigue luminoso. */
  background:linear-gradient(to bottom,rgba(0,26,50,.52) 0%,rgba(0,26,50,.34) 52%,rgba(0,26,50,.10) 82%,transparent 100%);
}
.car-ui-titulo{
}

.car-hero .miga{margin:0 0 24px;padding-inline:48px;color:rgba(255,250,243,.72)}
.car-hero .miga a{color:rgba(255,250,243,.62)}
.car-hero .miga a[aria-current],.car-hero .miga span[aria-current]{color:var(--car-cream)}

.car-h1{
  margin:0;
  font-family:var(--cuerpo);
  font-weight:700;
  text-transform:uppercase;
  color:var(--car-cream);
  font-size:clamp(26px,4.5vw,84px);
  padding-inline:48px;
  max-width:92%;
  line-height:1.02;
  letter-spacing:-.004em;
  text-wrap:nowrap;
  text-wrap:balance;
}

.car-bajada{
  margin:clamp(10px,1.6vh,20px) 0 0;padding:0 48px;
  max-width:44ch;
  color:var(--car-cream);
  font-size:clamp(17px,1.7vw,24px);
  font-weight:500;
  line-height:1.42;
  letter-spacing:-.005em;
}

/* ── Barra de datos al pie ───────────────────────────────────────
   Crema a la izquierda para el plano, negro a la derecha para los
   tres datos. */
/* Se desvanece con el resto de la UI: si queda, la línea de progreso
   le pasa por encima y tacha los valores. */
/* Va ABSOLUTA sobre el pie de la imagen, no ocupando su propio lugar
   en la columna: es opaca, así que a la vista es igual una banda al
   pie, pero al desvanecerse el render ocupa todo y no queda una franja
   vacía. */
.car-datos{
  display:grid;grid-template-columns:clamp(118px,12vw,176px) 1fr;
  position:absolute;inset:auto 0 0 0;z-index:6;min-height:var(--car-bar);
  opacity:calc(1 - var(--car-ui));
  will-change:opacity;
}
.car-datos-plano{
  background:var(--car-cream);
  display:block;padding:0;
  /* El panel es un enlace: sin esto hereda el azul del navegador. */
  text-decoration:none;color:inherit;
}
.car-datos-plano .et{
  font-size:clamp(12px,1vw,14px);letter-spacing:.02em;
  color:rgba(0,0,0,.62);font-weight:500;
}
/* El plano: miniatura que invita, y el panel entero abre el archivo
   completo. A 100px de alto un plano técnico no se lee. */
.car-datos-plano img{
  /* El dibujo llena su recuadro, sin rótulo al lado. */
  width:100%;height:100%;display:block;
  object-fit:contain;object-position:center;
  padding:8px;background:var(--car-cream);
  transition:transform var(--t-ui) var(--sal);
}
@media (hover:hover) and (pointer:fine){
  a.car-datos-plano:hover img{transform:scale(1.04)}
  a.car-datos-plano:hover .et{color:var(--naranja-texto)}
}
.car-datos-plano .et{transition:color var(--t-ui) var(--sal)}

.car-datos-vals{
  background:var(--car-black);
  display:grid;grid-template-columns:repeat(3,1fr);
  align-items:center;gap:20px;
  padding:20px clamp(18px,2.6vw,40px);
  min-height:112px;
}
.car-datos-vals .et{
  display:block;
  font-size:clamp(12px,1vw,14px);letter-spacing:.01em;
  font-weight:400;color:var(--car-cream);opacity:.62;
  margin-bottom:4px;
}
.car-datos-vals .val{
  display:block;
  font-weight:700;color:var(--car-cream);text-transform:uppercase;
  font-size:clamp(17px,1.9vw,28px);line-height:1.1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
/* La superficie va en minúscula: «m²», no «M²». Es la convención en
   español, y las versalitas se la comerían. */
.car-datos-vals > div:last-child .val{text-transform:none}

/* ── Barra de progreso · aparece con la noche ────────────────────
   `scaleX` y no `width`: animar el ancho fuerza recálculo de layout
   en cada fotograma, y el guion pide sólo transform y opacity. */
.car-progreso{
  position:absolute;z-index:6;inset:auto 0 0 0;
  display:flex;align-items:center;gap:12px;
  padding:0 48px 26px;
  opacity:var(--car-noche);
}
.car-progreso-riel{position:relative;flex:1 1 auto;height:2px;background:rgba(255,250,243,.22)}
.car-progreso-linea{
  position:absolute;inset:0;
  background:var(--car-cream);
  transform:scaleX(var(--car-noche));transform-origin:left center;
  will-change:transform;
}
.car-progreso-num{
  flex:0 0 auto;
  font-weight:500;font-size:13px;color:var(--car-cream);
  font-variant-numeric:tabular-nums;min-width:4ch;text-align:right;
}

/* ── Sin las imágenes todavía en el repo ─────────────────────────
   El hero no se rompe: queda el fondo navy y el texto encima. */
.car-capa:not([src]),.car-capa[src=""]{display:none}

/* ── Móvil: hero fijo, sin pin y sin scrub ───────────────────────
   El recorte no se usa acá: sin la altura del pin no hay recorrido
   donde el techo tape las letras, y taparlas sin movimiento sólo
   estorba la lectura. */
@media (max-width:767px){
  /* Sin pin ni scrub. Y sobre todo: nada absoluto. En escritorio la
     imagen es una capa absoluta que llena el marco y el titular va
     encima; acá todo vuelve al flujo normal, apilado, o el título
     queda atrapado dentro de una caja absoluta y no se ve. */
  .car-hero{height:auto}
  .car-hero-fijo{position:static;height:auto;min-height:0}
  /* En el DOM el titular va DESPUÉS de la imagen —tiene que quedar
     por debajo del recorte en escritorio—, así que en móvil el orden
     se restablece acá: titular, foto, datos. */
  .car-hero-marco{position:relative;inset:auto;clip-path:none;display:flex;flex-direction:column}
  .car-media{position:relative;inset:auto;min-height:46svh;order:2}
  .car-recorte,.car-noche,.car-progreso{display:none}

  .car-ui,.car-ui-titulo{position:static;inset:auto;opacity:1;transform:none}
  .car-ui-titulo{
    order:1;background:var(--car-navy);
    padding:calc(var(--header-h) + 22px) 0 22px;
  }
  .car-h1{font-size:clamp(30px,8.4vw,50px);padding-inline:20px;max-width:100%;text-wrap:balance}
  .car-hero .miga{padding-inline:20px;margin-bottom:16px;color:rgba(255,250,243,.72)}
  .car-bajada{padding:0 20px;margin-top:14px}

  .car-datos{position:static;order:3;grid-template-columns:1fr}
  .car-datos-plano{min-height:96px}
  .car-datos-vals{grid-template-columns:1fr;gap:16px;padding:22px 20px}
}

/* ── Reducir movimiento: hero estático, sin pin ni cruce ─────────── */
@media (prefers-reduced-motion:reduce){
  .car-hero{height:auto}
  .car-hero-fijo{position:static;height:auto;min-height:88svh}
  .car-hero-marco{clip-path:none}
  .car-noche,.car-progreso{display:none}
  .car-ui,.car-recorte{opacity:1;transform:none}
  .car-capa,.car-ui,.car-recorte,.car-progreso-linea{will-change:auto}
}