:root {
  /* paleta sacada de los propios productos y del material del video */
  --negro: #000;
  --hueso: #e8e2d6;   /* color real del Phantom */
  --texto: #f2efe9;   /* blanco tinta */
  --humo: #c2473d;    /* muestreado del humo del video; uso mínimo */

  --margen: clamp(1.25rem, 4vw, 3.5rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- loader ---------- */

#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: var(--negro);
  transition: opacity .6s ease;
}

#loader.oculto {
  opacity: 0;
  pointer-events: none;
}

.loader-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 8vw, 4rem);
  letter-spacing: .15em;
  color: var(--texto);
  opacity: .9;
}

.loader-track {
  width: min(220px, 50vw);
  height: 1px;
  background: rgba(242, 239, 233, .18);
  overflow: hidden;
}

#loader-bar {
  width: 0;
  height: 100%;
  background: var(--humo);
  transition: width .2s linear;
}

/* ---------- hero ---------- */

#hero {
  /* la altura define cuánto scroll consume la animación */
  height: 500vh;
  position: relative;
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

#hero-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Texto del hero.

   Registro URBANO, no de lujo minimalista. La imagen es tonal y oscura;
   la tipografía es lo contrario: pesada, grande y de tracking cerrado.
   Ese contraste entre imagen callada y tipo que grita es la composición.

   Pila de fuentes: peso 900 sobre familias que existen de serie en cada
   plataforma — Helvetica Neue Black en Apple, Roboto Black en Android,
   Arial Black en Windows. Pendiente la display propia de marca. */

:root {
  --display: "Helvetica Neue", "Arial Black", Roboto, "Segoe UI",
             system-ui, sans-serif;
}

.hero-marca,
.hero-cierre {
  position: absolute;
  pointer-events: none;
}

/* separador tipográfico, más discreto que un punto medio suelto */
.hero-marca i,
.hero-variantes i {
  font-style: normal;
  opacity: .45;
  margin: 0 .4em;
}

/* --- velo: solo bajo el texto grande, para que despegue del humo --- */

.hero-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, .82) 0%,
    rgba(0, 0, 0, .55) 30%,
    rgba(0, 0, 0, .15) 52%,
    transparent 68%
  );
}

/* --- etiqueta permanente: legible desde el frame 1 --- */

.hero-marca {
  left: var(--margen);
  bottom: var(--margen);
  transition: opacity .3s linear;
  /* sombra larga y suave: contraste sin dibujar una caja */
  text-shadow: 0 2px 28px rgba(0, 0, 0, .95);
}

.hero-producto {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(.82rem, 1.5vw, 1.05rem);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto);
}

.hero-precio {
  margin: .35rem 0 0;
  font-size: clamp(.78rem, 1.3vw, .95rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hueso);
  opacity: .75;
}

/* --- HUD: señala la pieza de la que se habla --- */

.hero-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.hero-hud-trazo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

#hud-linea {
  fill: none;
  stroke: var(--hueso);
  stroke-width: 1.5;
  stroke-linecap: butt;
  /* Ojo: dasharray y dashoffset NO se declaran aquí. El JS los pone como
     atributos para dibujar el trazo, y una regla CSS les ganaría siempre
     —la línea salía punteada—, porque CSS pisa los atributos de SVG. */
}

/* remate vertical donde aterriza la línea: lo vuelve un llamado técnico
   en vez de una raya suelta */
#hud-ancla {
  stroke: var(--hueso);
  stroke-width: 1.5;
}

/* aro partido en cuatro arcos: lee como retícula, no como círculo */
#hud-aro {
  fill: none;
  stroke: var(--hueso);
  stroke-width: 1.5;
}

#hud-punto { fill: var(--humo); }

.hero-hud-texto {
  position: absolute;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(.78rem, 1.5vw, 1.1rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .95);
}

/* el barrido que descubre el texto lo aplica el JS con clip-path */
.hero-hud-texto span { display: inline-block; }

/* --- cierre: entra en la mitad que libera la figura --- */

.hero-cierre {
  left: var(--margen);
  top: 50%;
  transform: translateY(-50%);
  /* 90vw manda en móvil, 38rem pone el techo en escritorio (~42% de 1440).
     Ojo: min() coge siempre el menor, así que no sirve listar un valor
     "para móvil" y otro "para escritorio" en la misma función. */
  max-width: min(90vw, 38rem);
  opacity: 0;
}

.hero-nombre {
  margin: 0;
  font-family: var(--display);
  /* En vertical el nombre dispone de todo el ancho; en apaisado solo de la
     mitad que libera la figura. Son dos proporciones distintas, así que no
     hay un único valor en vw que sirva para ambas: va por media query. */
  font-size: clamp(3rem, 17vw, 7rem);
  font-weight: 900;
  line-height: .84;
  /* tracking negativo sobre mayúsculas pesadas: el gesto urbano */
  letter-spacing: -.045em;
  text-transform: uppercase;
  color: var(--texto);
}

.hero-nombre .linea {
  display: block;
  /* recorta la palabra mientras sube desde abajo */
  overflow: hidden;
}

.hero-nombre .palabra {
  display: block;
  will-change: transform;
}

.hero-variantes {
  margin: 1.4rem 0 0;
  font-family: var(--display);
  font-size: clamp(.72rem, 1.2vw, .88rem);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--hueso);
  opacity: .8;
}

.hero-desde {
  margin: .5rem 0 0;
  font-size: clamp(.95rem, 1.7vw, 1.25rem);
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto);
  opacity: .72;
}

.hero-desde strong {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.01em;
  opacity: 1;
}

/* CTA: bloque sólido. Máximo contraste sobre negro, que es lo que
   "resalta" de verdad; el rojo queda en reserva como acento. */
.hero-cierre .hero-cta {
  display: inline-block;
  margin-top: 1.8rem;
  padding: 1.05rem 2.4rem;
  background: var(--hueso);
  border: 2px solid var(--hueso);
  font-family: var(--display);
  font-size: clamp(.78rem, 1.2vw, .92rem);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--negro);
  transition: background-color .25s ease, color .25s ease;
}

.hero-cierre.activo { pointer-events: auto; }

.hero-cierre .hero-cta:hover,
.hero-cierre .hero-cta:focus-visible {
  background: transparent;
  color: var(--hueso);
}

@media (min-aspect-ratio: 1/1) {
  .hero-nombre { font-size: clamp(4rem, 11vw, 10.5rem); }
  /* el bloque se ensancha para que el nombre no tope antes de la figura */
  .hero-cierre { max-width: min(58vw, 52rem); }

  /* frente a un titular de ~158px, los secundarios a 11px quedaban
     tímidos: suben para sostener la jerarquía sin competir */
  .hero-variantes { margin-top: 2rem; font-size: 1rem; letter-spacing: .24em; }
  .hero-desde { margin-top: .9rem; font-size: 1.45rem; }
  .hero-cierre .hero-cta {
    margin-top: 2.4rem;
    padding: 1.25rem 3rem;
    font-size: 1.02rem;
  }
}

.hero-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  font-size: .6rem;
  letter-spacing: .35em;
  text-indent: .35em;
  text-transform: uppercase;
  opacity: .5;
  transition: opacity .4s ease;
}

.hero-hint.oculto { opacity: 0; }

.hero-hint-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, rgba(242, 239, 233, .6), transparent);
}

/* ---------- resto ---------- */

.after {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  opacity: .35;
  border-top: 1px solid rgba(242, 239, 233, .08);
}

@media (prefers-reduced-motion: reduce) {
  .hero-hint { display: none; }

  /* el scrub sigue (lo gobierna el scroll, no una animación), pero los
     fundidos del texto se vuelven instantáneos */
  .hero-marca,
  .hero-cierre .hero-cta,
  #loader {
    transition: none;
  }
}