/* ==========================================================================
   HERO COMERCIAL REVUELTO — capa comercial posterior al 100/100
   Arquitectura C: NO crea superficie visual nueva. Toda la UI comercial vive
   dentro de la misma .stage que ya esta mostrando assets/hero-100.png.

   Este archivo NO modifica app.js, style.css, LEEME.md ni los 8 PNG.
   Solo anade reglas nuevas; no redefine ninguna regla de style.css.
   ========================================================================== */

:root{
  /* ---------- CALIBRACION DEL HOLD ----------
     Pantallas de HOLD TOTAL despues de alcanzar 100/100.
     Sustituye (no incrementa) las 0.6 pantallas que ya producia app.js.
     Unico valor a tocar para recalibrar la duracion del Hero comercial. */
  /* V4: 0.15. Ya NO es donde vive el Hero comercial —eso ocurre ahora dentro
     del 80->100 de la propia pelicula— sino una respiracion minima entre el
     Hero terminado y el momento en que la seccion empieza a liberarse.
     Antes: 1.5 pantallas de coche congelado. Ahora: 0.15. */
  --hero-hold-screens: 0.15;

  /* Constante de la presentacion. V4: 3.1875 = 1 pantalla de .stage
     + 2.1875 pantallas de recorrido (CONFIG.scrollScreens).
     ESTE VALOR Y app.js VAN SIEMPRE JUNTOS: codifica 1 + scrollScreens.
     Si se cambia scrollScreens sin cambiar este numero, la respiracion
     posterior al Hero deja de valer lo que dice --hero-hold-screens. */
  --hero-presentation-screens: 3.1875;

  /* ---------- PALETA COMERCIAL ----------
     Sobre el estudio naranja la jerarquia se construye con tamano, peso y
     opacidad, no con tono. Ver nota de contraste en el reporte. */
  --hero-ink: #F4F2ED;

  /* ---------- TIPOGRAFIA ----------
     Manrope entra automaticamente en cuanto exista en el sistema o se anada
     localmente. Hasta entonces cae al grotesco mas cercano del entorno.
     No se carga ninguna fuente remota. */
  --hero-font: 'Manrope', 'Segoe UI Variable Display', 'Segoe UI',
               system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;

  /* Mismo ritmo lateral que el HUD cinematografico aprobado. */
  --hero-gutter: clamp(22px, 4vw, 70px);
}

/* ==========================================================================
   1. EXTENSION DEL HOLD
   min-height gana sobre el height inline de app.js solo cuando es mayor;
   nunca lo acorta. distance sigue derivandose de stage.clientHeight, que no
   se toca, asi que la curva 0->100 queda intacta.
   La guarda evita scroll muerto cuando app.js colapsa #reveal a 1 pantalla.
   ========================================================================== */
@media not (prefers-reduced-motion: reduce){
  #reveal{
    min-height: calc((var(--hero-presentation-screens) + var(--hero-hold-screens)) * 100vh);
    min-height: calc((var(--hero-presentation-screens) + var(--hero-hold-screens)) * 100svh);
  }
}

/* ==========================================================================
   2. CAPA COMERCIAL
   Inyectada por hero.js dentro de .stage. z-index 3 = por encima del HUD
   cinematografico (z-index 2), dentro del mismo overflow:hidden.
   ========================================================================== */
.hero-commercial{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  font-family:var(--hero-font);
  color:var(--hero-ink);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  /* Sombra muy contenida, del mismo orden que la del HUD aprobado
     (style.css usa 0 1px 12px #0008). No es un gradiente de relleno. */
  text-shadow:0 1px 14px rgba(0,0,0,.34);
}
/* Mientras h = 0 la capa no existe para el foco ni para lectores. */
.hero-commercial[data-hero-visible="false"]{visibility:hidden}

/* --- bloque de identidad: superior izquierda, siempre por encima del capo --- */
.hero-identity{
  position:absolute;
  left:var(--hero-gutter);
  /* el borde inferior del bloque queda 26 px por encima del techo del coche,
     medido sobre la fotografia real, no sobre el viewport */
  bottom:calc(100% - var(--hero-car-top, 28%) + 26px);
  margin:0;
}
.hero-eyebrow{
  margin:0 0 14px;
  font-size:clamp(10px, .78vw, 12px);
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  opacity:.72;
}
.hero-model{
  margin:0;
  font-size:clamp(44px, 5vw, 86px);
  font-weight:300;
  line-height:.95;
  letter-spacing:.02em;
  text-transform:uppercase;
}

/* --- bloque de oferta: inferior izquierda, siempre a la izquierda del coche --- */
.hero-offer{
  position:absolute;
  left:var(--hero-gutter);
  bottom:clamp(48px, 6.5vh, 84px);
  /* nunca alcanza la rueda delantera izquierda: el limite lo fija la
     geometria real de la foto, no una media query */
  max-width:calc(var(--hero-car-left, 19.4%) - var(--hero-gutter) - 22px);
}
.hero-specs{
  margin:0 0 18px;
  font-size:clamp(11px, .85vw, 13px);
  font-weight:400;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.82;
  white-space:nowrap;
}
.hero-price{
  margin:0 0 26px;
  font-size:clamp(26px, 2.3vw, 38px);
  font-weight:400;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
}

/* --- CTA editorial: texto + flecha + linea contenida. No es un boton relleno --- */
.hero-cta{
  pointer-events:auto;
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  padding:0 0 10px;
  margin:0;
  border:0;
  border-bottom:1px solid rgba(244,242,237,.38);
  background:none;
  color:inherit;
  font:inherit;
  font-size:clamp(11px, .85vw, 13px);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  text-shadow:inherit;
  cursor:pointer;
}
.hero-cta .hero-cta-arrow{
  display:inline-block;
  transition:transform .22s ease;
}
.hero-cta:hover{border-bottom-color:rgba(244,242,237,.8)}
.hero-cta:hover .hero-cta-arrow{transform:translateX(5px)}
.hero-cta:focus-visible{outline:2px solid var(--hero-ink);outline-offset:8px}

/* ==========================================================================
   3. PREFERS-REDUCED-MOTION
   Sin extension de scroll (la guarda de arriba no aplica), asi que no hay
   recorrido POST-100 y hero.js resuelve h = 1: el Hero aparece en reposo,
   sin coreografia. Aqui solo se neutraliza el micro-motion residual.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .hero-cta .hero-cta-arrow{transition:none}
}

/* ==========================================================================
   4. DEBUG — solo con #debug en la URL. No contamina la vista normal.
   ========================================================================== */
#hero-debug{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:9999;
  width:236px;
  padding:12px 14px;
  background:rgba(8,8,8,.86);
  border:1px solid #2a2a2a;
  color:#F4F2ED;
  font:11px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing:.02em;
  pointer-events:none;
  white-space:pre;
}
#hero-debug b{color:#C8B89A;font-weight:600}
#hero-debug .hero-debug-rail{
  position:relative;
  display:block;
  height:16px;
  margin:9px 0 3px;
  border-top:1px solid #3a3a3a;
}
#hero-debug .hero-debug-tick{
  position:absolute;
  top:0;
  width:1px;
  height:5px;
  background:#5a5a5a;
}
#hero-debug .hero-debug-tick span{
  position:absolute;
  top:6px;
  left:50%;
  transform:translateX(-50%);
  font-size:8px;
  color:#8A8A86;
  letter-spacing:0;
}
#hero-debug .hero-debug-head{
  position:absolute;
  top:-3px;
  width:1px;
  height:11px;
  background:#F4F2ED;
}