/* ==========================================================================
   HERO FUTURISTA · RUTA SEGURA PERÚ — prototipo local · iteración 3
   Negro absoluto, tipografía dominante, producto real, scan rojo.
   Sin dependencias. Todo el movimiento nace del canvas o de transiciones CSS.

   Cambios de esta iteración: el fondo vuelve a negro real (el halo radial que
   lo lavaba se sustituye por una línea de luz en la base), las dos dashcams
   comparten línea de apoyo y jerarquía, y cada una lleva su nombre y su ficha
   corta colocadas por JS bajo la pieza.
   ========================================================================== */

:root{
  --rs-rojo: #e11d2a;          /* rojo de marca, tomado del logotipo */
  --rs-negro: #000;
  --hero-alto: 100svh;
  /* Altura de la línea de apoyo, en % desde arriba. La escribe hero.js a
     partir de la base real de las piezas del canvas, para que la luz y los
     productos no se desincronicen al cambiar de viewport. */
  --rs-base: 88%;
}

*{ box-sizing: border-box; }

.hero-fx{
  position: relative;
  min-height: var(--hero-alto);
  background: var(--rs-negro);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
  /* Tipografía del sistema: geométrica, ancha y sin coste de descarga. Si el
     proyecto adopta una sans propia, basta cambiar esta línea. */
  font-family: "Helvetica Neue", "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ── fondo ─────────────────────────────────────────────────────────────────
   Negro real. El único rojo del fondo es un rescoldo muy bajo alrededor de la
   línea de apoyo; el halo radial amplio de antes subía el negro a gris y era
   justamente lo que quitaba sofisticación. */
.hero-fx__halo{
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(64% 26% at 50% var(--rs-base), rgba(225,29,42,.16), transparent 72%);
  opacity: 0; transition: opacity 1.6s ease .15s;
}
.hero-fx.is-listo .hero-fx__halo{ opacity: 1; }

/* Línea de luz: filo estrecho que cruza el hero a la altura en la que apoyan
   los productos. Da suelo a la escena sin dibujar un suelo. */
.hero-fx__linea{
  position: absolute; z-index: 2; left: 0; right: 0; top: var(--rs-base);
  height: 1px; pointer-events: none;
  background: linear-gradient(90deg,
    transparent 4%, rgba(225,29,42,.10) 18%, rgba(255,86,96,.85) 50%,
    rgba(225,29,42,.10) 82%, transparent 96%);
  opacity: 0; transform: scaleX(.4);
  transition: opacity 1.4s ease .55s, transform 1.8s cubic-bezier(.16,1,.3,1) .55s;
}
.hero-fx__linea::after{      /* el sangrado de la propia línea */
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 45px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(225,29,42,.26), transparent 70%);
}
.hero-fx.is-listo .hero-fx__linea{ opacity: 1; transform: none; }

/* Sombra de contacto. z-index 2.5: por encima del rescoldo de la línea y por
   debajo del canvas, de modo que oscurece la luz justo bajo cada pieza sin
   tocar el producto. No es un suelo ni un reflejo: es la luz que el aparato
   bloquea. `left`, `top` y `width` los escribe hero.js. */
.hero-fx__contacto{
  position: absolute; z-index: 2; pointer-events: none;
  transform: translate(-50%, -50%);
  aspect-ratio: 5 / 1;
  background: radial-gradient(50% 50% at 50% 50%, #000 38%, rgba(0,0,0,.72) 62%, transparent 78%);
  opacity: 0; transition: opacity 1.2s ease .8s;
}
.hero-fx.is-listo .hero-fx__contacto{ opacity: 1; }
.hero-fx.sin-webgl .hero-fx__contacto{ display: none; }

/* grano finísimo: quita el banding del degradado sin ensuciar */
.hero-fx__grano{
  position: absolute; inset: -50%; z-index: 1; pointer-events: none;
  opacity: .03; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* ── escenario: canvas de los productos ──────────────────────────────── */
.hero-fx__escena{
  position: absolute; inset: 0; z-index: 3;
  display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity 1.1s ease;
}
.hero-fx.is-listo .hero-fx__escena{ opacity: 1; transition-delay: .35s; }

/* Respaldo estático (nivel 3): si no hay WebGL, se ven los productos igual,
   en las mismas posiciones que ocupan en el canvas. */
.hero-fx__respaldo{ position: absolute; inset: 0; z-index: 3; display: none; pointer-events: none; }
.hero-fx.sin-webgl .hero-fx__respaldo{ display: block; }
.hero-fx.sin-webgl .hero-fx__escena{ display: none; }
.hero-fx__respaldo img{
  position: absolute;
  /* Sin esto el navegador toma la altura del atributo `height` del HTML y las
     piezas se estiran a su tamaño nativo, invadiendo el bloque comercial. */
  height: auto;
  filter: drop-shadow(0 0 70px rgba(225,29,42,.16));
}
/* Alineadas por su base, como en el canvas. */
/* Algo menores que en el canvas: el bloque comercial de dos líneas baja hasta
   media pantalla y, a tamaño completo, el respaldo llegaba a tocar el
   microcopy. Comparten `bottom`, así que siguen alineados por la base. */
.hero-fx__respaldo-a6{ left: 17vw; bottom: 12vh; width: min(19vw, 300px); }
.hero-fx__respaldo-jc{ left: 60vw; bottom: 12vh; width: min(18vw, 285px); }

/* ── bloque comercial: domina el tercio superior ──────────────────────── */
.hero-fx__texto{
  position: relative; z-index: 7;
  display: flex; flex-direction: column; align-items: center;
  /* El header fijo del sitio ocupa los primeros 64px del hero: el bloque
     comercial arranca por debajo de él para no rozar la navegación. */
  padding: clamp(36px, 5.5vh, 72px) clamp(16px, 4vw, 56px) 0;
  text-align: center;
  pointer-events: none;                 /* el texto no bloquea el parallax */
}
.hero-fx__texto > *{ pointer-events: auto; }

/* HEADLINE — el elemento dominante de la composición.
   El cuerpo se deriva de --titular-ch, el número de caracteres de la línea más
   larga de la variante: un titular de 19 y otro de 33 no pueden compartir
   tamaño si ambos deben llenar el mismo ancho, y sin esto la comparación
   A/B/C mediría el largo del texto en vez del copy. */
.hero-fx__titular{
  --ancho-util: 90;                      /* % del viewport que ocupa el titular */
  --avance: .60;                         /* ancho medio de carácter, en em */
  margin: 0;
  /* El tope depende de cuántas líneas ocupe la variante: 150 px está bien
     para una línea, pero dos líneas a ese cuerpo empujan los CTA encima de
     los productos. Lo fija --titular-tope, que escribe la variante. */
  font-size: clamp(
    2.4rem,
    calc(var(--ancho-util) * 1vw / (var(--titular-ch, 22) * var(--avance))),
    var(--titular-tope, 9.4rem)
  );
  line-height: .93;
  font-weight: 700;
  letter-spacing: -.024em;
  color: #fff;                           /* blanco puro, sin degradados */
  text-shadow: 0 6px 48px rgba(0,0,0,.6);
  text-transform: uppercase;
}
.hero-fx__titular .l{ display: block; white-space: nowrap; }
.hero-fx__titular .p{
  display: inline-block;
  opacity: 0; transform: translateY(.16em);
  filter: blur(9px);
  transition: opacity .82s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1), filter .82s ease;
}
.hero-fx.is-listo .hero-fx__titular .p{ opacity: 1; transform: none; filter: blur(0); }

/* LEMA */
.hero-fx__lema{
  margin: clamp(14px, 2.1vh, 26px) 0 0;
  font-size: clamp(.74rem, 1.32vw, 1.2rem);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.97);
  text-shadow: 0 2px 22px rgba(0,0,0,.85);
  text-wrap: balance;
  opacity: 0; transform: translateY(10px);
  transition: opacity .8s ease 1.28s, transform .8s ease 1.28s;
}
.hero-fx.is-listo .hero-fx__lema{ opacity: 1; transform: none; }
/* El subhead tiene dos redacciones y el viewport elige. La larga nombra la
   categoría («dashcams inteligentes»), que es lo que hace falta en escritorio;
   en móvil ocupa tres líneas y le roba el papel al titular, así que allí entra
   la corta, con la misma idea en la mitad de espacio. */
.hero-fx__lema-corto{ display: none; }

/* línea informativa: modelos y capacidades, separadas por puntos en rojo */
.hero-fx__modelos{
  margin: clamp(12px, 1.9vh, 22px) 0 0;
  font-size: clamp(.6rem, .84vw, .8rem);
  letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.52);
  text-shadow: 0 2px 18px rgba(0,0,0,.9);
  opacity: 0; transition: opacity .9s ease 1.6s;
}
.hero-fx__modelos i{ font-style: normal; color: var(--rs-rojo); opacity: .85; margin: 0 .2em; }
.hero-fx.is-listo .hero-fx__modelos{ opacity: 1; }

/* ── CTA ──────────────────────────────────────────────────────────────── */
.hero-fx__acciones{
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  margin: clamp(22px, 3.4vh, 42px) 0 0;
  opacity: 0; transform: translateY(10px);
  transition: opacity .8s ease 1.72s, transform .8s ease 1.72s;
}
.hero-fx.is-listo .hero-fx__acciones{ opacity: 1; transform: none; }
.hero-fx__cta{
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 48px; padding: 0 25px;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border-radius: 6px;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}
.hero-fx__chevron{ width: 7px; height: 11px; flex: none; opacity: .85; transition: transform .25s ease; }
.hero-fx__cta:hover .hero-fx__chevron{ transform: translateX(3px); }
.hero-fx__cta--primario{
  background: var(--rs-rojo); color: #fff; border: 1px solid var(--rs-rojo);
  box-shadow: 0 10px 34px rgba(225,29,42,.32);
}
.hero-fx__cta--primario:hover{ background: #f5313e; transform: translateY(-1px); box-shadow: 0 14px 40px rgba(225,29,42,.42); }
.hero-fx__cta--fantasma{
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(2px);
}
.hero-fx__cta--fantasma:hover{ border-color: rgba(255,255,255,.55); color: #fff; transform: translateY(-1px); }
.hero-fx__cta:focus-visible{ outline: 2px solid #fff; outline-offset: 3px; }

/* ── fichas de producto ───────────────────────────────────────────────────
   `left` y `top` los escribe hero.js con la posición real de cada pieza. */
.hero-fx__ficha{
  position: absolute; z-index: 7;
  transform: translateX(-50%);
  text-align: center; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .9s ease 2.05s;
  /* Sin posición todavía: hero.js la hace visible al colocarla. Antes, la
     transición las mostraba a los 2 s aunque el primer frame del canvas no
     hubiera corrido, y aparecían amontonadas en el borde izquierdo. */
  visibility: hidden;
}
.hero-fx.is-listo .hero-fx__ficha{ opacity: 1; }
.hero-fx__ficha-n{
  display: block;
  font-size: clamp(.82rem, 1.16vw, 1.06rem);
  font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #fff;
}
.hero-fx__ficha-n em{ font-style: normal; color: var(--rs-rojo); }
.hero-fx__ficha-d{
  display: block; margin-top: .55em;
  font-size: clamp(.54rem, .72vw, .68rem);
  font-weight: 500; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(255,255,255,.44);
}

/* En el respaldo estático no hay bucle de render que coloque las fichas:
   se posicionan por CSS junto a cada imagen de respaldo. */
.hero-fx.sin-webgl .hero-fx__ficha{ visibility: visible; top: auto; bottom: 6vh; white-space: normal; width: 230px; }
.hero-fx.sin-webgl .hero-fx__ficha[data-ficha="a6"]{ left: calc(17vw + min(9.5vw, 150px)); }
.hero-fx.sin-webgl .hero-fx__ficha[data-ficha="jc450"]{ left: calc(60vw + min(9vw, 142px)); }
@media (max-width: 720px){
  .hero-fx.sin-webgl .hero-fx__ficha[data-ficha="a6"]{ left: 32vw; bottom: 1.5vh; }
  .hero-fx.sin-webgl .hero-fx__ficha[data-ficha="jc450"]{ left: 65vw; bottom: auto; top: 36vh; }
}

/* ── indicador de scroll ──────────────────────────────────────────────── */
.hero-fx__scroll{
  position: absolute; z-index: 8; left: 50%; transform: translateX(-50%);
  bottom: clamp(12px, 2.2vh, 24px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: .56rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.34);
  opacity: 0; transition: opacity .9s ease 2.2s;
}
.hero-fx.is-listo .hero-fx__scroll{ opacity: 1; }
.hero-fx__flecha{ width: 1px; height: 24px; background: linear-gradient(rgba(255,255,255,.45), transparent); animation: rsBaja 2.4s ease-in-out infinite; }
@keyframes rsBaja{ 0%,100%{ transform: translateY(0); opacity:.5 } 50%{ transform: translateY(6px); opacity:1 } }

/* ── señal de confianza, abajo a la izquierda ─────────────────────────── */
.hero-fx__confianza{
  position: absolute; z-index: 8; margin: 0;
  left: clamp(20px, 3.2vw, 60px);
  bottom: clamp(20px, 3.8vh, 48px);
  font-size: clamp(.56rem, .74vw, .7rem);
  font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.46);
  opacity: 0; transform: translateY(8px);
  transition: opacity 1s ease 2.15s, transform 1s ease 2.15s;
  pointer-events: none;
}
.hero-fx__confianza i{ font-style: normal; color: var(--rs-rojo); opacity: .8; margin: 0 .35em; }
.hero-fx.is-listo .hero-fx__confianza{ opacity: 1; transform: none; }

/* ── firma: logotipo grande abajo a la derecha ────────────────────────── */
.hero-fx__firma{
  position: absolute; z-index: 8;
  right: clamp(20px, 3.2vw, 60px);
  bottom: clamp(18px, 3.4vh, 44px);
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s ease 1.9s, transform 1s ease 1.9s;
  pointer-events: none;
}
.hero-fx.is-listo .hero-fx__firma{ opacity: 1; transform: none; }
.hero-fx__firma img{ display: block; height: auto; width: clamp(200px, 21vw, 380px); }
.hero-fx.sin-webgl .hero-fx__firma img{ width: clamp(170px, 14vw, 210px); } /* cede sitio a la ficha JC450 */

/* ── viewport corto (1366×768, 1280×720): el hueco del header fijo empujaba
   el bloque comercial sobre los productos. Menos padding y titular más
   contenido devuelven el aire entre CTA y piezas. El !important es necesario
   porque --titular-tope llega por style inline en el HTML. ─────────────── */
@media (min-width: 721px) and (max-height: 820px){
  .hero-fx__texto{
    padding-top: clamp(24px, 3vh, 40px);
    --titular-tope: 5.4rem !important;
  }
  .hero-fx__lema{ margin-top: 10px; }
  .hero-fx__acciones{ margin-top: 16px; }
}

/* ── tablet ───────────────────────────────────────────────────────────── */
@media (max-width: 1024px){
  .hero-fx__titular{ --ancho-util: 93; }
  .hero-fx__texto{ padding-top: clamp(40px, 5.5vh, 68px); }
  /* Con el viewport estrecho la trust-line llegaba a rozar el indicador de
     scroll: se acorta y se aprieta el tracking en vez de moverla. */
  .hero-fx__confianza{ letter-spacing: .18em; }
  .hero-fx__firma img{ width: clamp(180px, 26vw, 300px); }
  .hero-fx__confianza-extra{ display: none; }
}

/* ── móvil: dos o tres líneas de titular, dos de lema, ambas dashcams ─── */
@media (max-width: 720px){
  .hero-fx__texto{ padding-top: clamp(68px, 9vh, 92px); } /* despeja el chip MENÚ en móvil */
  .hero-fx__titular{
    /* Aquí el ancho manda sobre el recuento de caracteres: el texto fluye y el
       cuerpo se fija por viewport, que es lo que mantiene el titular dominante
       en pantallas estrechas. */
    /* Cada frase del titular ocupa su línea y no se parte: el cuerpo se
       calcula para que quepa la más larga. Dejar fluir el texto rompía
       «EVIDENCIA / REAL.» y la última línea quedaba huérfana. */
    font-size: clamp(2.1rem, 10vw, 3.6rem);
    line-height: 1.0;
    letter-spacing: -.018em;
  }
  .hero-fx__lema{
    font-size: clamp(.66rem, 3.05vw, .92rem);
    letter-spacing: .08em;
    max-width: 34ch;      /* holgura para dos líneas, no tres */
    text-wrap: balance;
  }
  .hero-fx__lema-largo{ display: none; }
  .hero-fx__lema-corto{ display: inline; }
  /* Sólo los dos modelos: las capacidades ya están en la ficha de cada
     producto, y encajarlas aquí obligaba a una segunda línea con un «· IA»
     suelto. */
  .hero-fx__modelos{ letter-spacing: .18em; }
  .hero-fx__modelos-extra,
  .hero-fx__modelos-ia{ display: none; }
  /* Los dos CTA comparten fila: apilados empujaban los productos fuera de la
     zona en la que caben con sus fichas. */
  .hero-fx__acciones{ gap: 10px; flex-wrap: nowrap; width: 100%; }
  .hero-fx__cta{ flex: 1 1 0; min-height: 50px; padding: 0 12px; gap: 8px;
                 font-size: .7rem; letter-spacing: .08em; }
  /* Apiladas: las fichas irían encima de la otra pieza si conservaran el
     tamaño de escritorio. */
  .hero-fx__ficha-n{ font-size: .76rem; letter-spacing: .16em; }
  .hero-fx__ficha-d{ font-size: .5rem; letter-spacing: .12em; }
  /* La ficha del JC450 lleva siete capacidades: en móvil no caben en una
     línea, así que se deja fluir en dos en vez de desbordar la pantalla. */
  .hero-fx__ficha{ white-space: normal; width: 62vw; }
  .hero-fx__firma{ right: 14px; bottom: 14px; }
  .hero-fx__firma img{ width: clamp(140px, 40vw, 190px); }
  /* En móvil la trust-line se retira: su contenido vive en la banda de
     respaldo de la home, y aquí competía con la ficha del A6 apilado. */
  .hero-fx__confianza{ display: none; }
  .hero-fx__scroll{ display: none; }   /* en móvil estorba a la firma */
  .hero-fx__linea{ display: none; }    /* con las piezas apiladas no hay una base común */
  .hero-fx__respaldo-a6{ left: 6vw; bottom: 6vh;  width: 52vw; }
  .hero-fx__respaldo-jc{ left: 42vw; bottom: 40vh; width: 46vw; }
}

/* ── movimiento reducido: se conserva TODO menos el movimiento ────────── */
@media (prefers-reduced-motion: reduce){
  .hero-fx__halo,
  .hero-fx__linea,
  .hero-fx__escena,
  .hero-fx__titular .p,
  .hero-fx__lema,
  .hero-fx__modelos,
  .hero-fx__acciones,
  .hero-fx__ficha,
  .hero-fx__confianza,
  .hero-fx__firma,
  .hero-fx__scroll{
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .hero-fx__ficha{ transform: translateX(-50%) !important; }
  .hero-fx__scroll{ transform: translateX(-50%) !important; }
  .hero-fx__flecha{ animation: none; }
}