/* Portada: una pantalla fija partida en dos, como las fotos. Arriba el color de la etapa y la persona que se
   asoma; abajo el tablero blanco con la línea de tiempo y el texto. El scroll recorre las 18 etapas en horizontal. */
:root { --banda: 46.42svh; }
@supports not (height: 1svh) { :root { --banda: 46.42vh; } }

.escena { position: relative; height: 100vh; height: 100svh; overflow: hidden; background: var(--tablero); }
.franja {
  position: absolute; inset: 0 0 auto 0; height: var(--banda); background: var(--etapa);
  overflow: hidden; will-change: background-color;
}

/* Personas con recorte (sin vídeo o mientras carga) */
.personas { position: absolute; inset: 0; }
.persona { position: absolute; inset: 0; pointer-events: none; }
.persona .cabeza {
  position: absolute; left: 50%; bottom: 0; height: 100%; aspect-ratio: 1926 / 713; translate: -50% 0; overflow: hidden;
}
.persona .cabeza img { height: 100%; width: auto; max-width: none; will-change: transform; transform: translateY(102%); }
.persona .manos {
  position: absolute; left: 50%; top: 100%; height: 34.4%; aspect-ratio: 1926 / 246; translate: -50% 0;
  opacity: 0; will-change: opacity;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px); mask-image: linear-gradient(to bottom, transparent 0, #000 10px);
}
.persona .manos img { height: 100%; width: auto; max-width: none; }
.persona.con-video .cabeza, .persona.con-video .manos { display: none; }
.persona a.ir {
  position: absolute; left: 50%; bottom: -8%; width: 34%; height: 78%; translate: -50% 0;
  pointer-events: auto; border-radius: 40% 40% 0 0;
}
.persona a.ir:focus-visible { outline-offset: -6px; }
.persona:not(.activa) a.ir { pointer-events: none; }

/* Tablero: el blanco es una capa debajo del vídeo; el contenido va encima y transparente */
.tablero-fondo { position: absolute; left: 0; right: 0; top: var(--banda); bottom: 0; background: var(--tablero); }
.tablero {
  position: absolute; left: 0; right: 0; top: var(--banda); bottom: 0; background: transparent;
  display: grid; grid-template-rows: 42% 1fr; overflow: hidden;
}

/* Vídeo de la persona recoloreado en WebGL al color de la franja (lienzo con la proporción del clip) */
.videos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.lienzo-persona {
  position: absolute; left: 50%; top: 0; height: 100%; aspect-ratio: 1280 / 714; width: auto; translate: -50% 0;
  opacity: 0;
}

/* Línea de tiempo */
.linea { position: relative; overflow: hidden; --figura: clamp(120px, 16svh, 230px); }
.pista { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; will-change: transform; }
.pista svg.trazo { position: absolute; top: 0; height: 100%; overflow: visible; }
.hito { position: absolute; top: 0; height: 100%; width: 0; }
.hito .lugar {
  position: absolute; left: 50%; bottom: 41.5%; translate: -50% 0;
  width: clamp(60px, 10svh, 104px); height: clamp(60px, 10svh, 104px);
}
.hito .lugar img { width: 100%; height: 100%; object-fit: contain; }
.hito .punto {
  position: absolute; left: 50%; bottom: 40%; width: 12px; height: 12px; translate: -50% 50%;
  border-radius: 50%; background: var(--tablero); border: 2.5px solid var(--linea);
  transition: background .3s ease, transform .3s ease;
}
.hito.actual .punto { background: var(--granate); border-color: var(--granate); transform: scale(1.25); }
.hito .nombre {
  position: absolute; left: 50%; top: 62%; translate: -50% 0; white-space: nowrap;
  font: 600 12px/1 var(--fuente-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave);
  transition: color .3s ease;
}
.hito.actual .nombre { color: var(--granate); }

/* Caricatura: 8 edades con el mismo lienzo (figura centrada, pies en el 82 % del alto) */
.silueta {
  position: absolute; left: calc(50% - clamp(70px, 7.5vw, 120px)); bottom: calc(40% - var(--figura) * .18);
  height: var(--figura); aspect-ratio: 1100 / 1536; margin-left: calc(var(--figura) * -0.358); pointer-events: none;
}
.silueta .edad { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; will-change: opacity; }
.silueta.camina .edad { animation: bote .36s ease-in-out infinite alternate; }
@keyframes bote { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-5px) rotate(1deg); } }
.video-crece {
  position: absolute; left: 50%; top: 0; height: 100%; width: auto; margin-left: calc(var(--figura) * -0.896);
  opacity: 0; pointer-events: none; mix-blend-mode: multiply;
}

/* Textos de cada etapa */
.textos { position: relative; }
.texto {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8px clamp(16px, 5vw, 64px) clamp(16px, 4svh, 40px);
  opacity: 0; will-change: opacity, transform;
}
.texto .etapa { margin: 0 0 10px; font: 600 12px/1 var(--fuente-texto); letter-spacing: .16em; text-transform: uppercase; color: var(--granate); }
.texto h2 {
  margin: 0; max-width: 20ch; text-wrap: balance;
  font: 500 clamp(26px, 4.4svh + .6vw, 52px)/1.06 var(--fuente-titulo); font-optical-sizing: auto;
  letter-spacing: -.01em; color: var(--tinta);
}
.texto p { margin: 14px 0 0; max-width: 46ch; font-size: clamp(15px, 1.9svh, 19px); color: var(--tinta-suave); }
.texto .boton { margin-top: clamp(14px, 2.6svh, 28px); }
.contador {
  position: absolute; right: clamp(16px, 4vw, 48px); bottom: clamp(12px, 2svh, 22px);
  font: 500 13px/1 var(--fuente-texto); letter-spacing: .1em; color: var(--tinta-suave); font-variant-numeric: tabular-nums;
  display: flex; gap: 14px; align-items: center;
}
.contador .teclas { opacity: .7; }
@media (max-width: 720px) {
  .contador .teclas { display: none; }
  .tablero { grid-template-rows: 38% 1fr; }
  .linea { --figura: clamp(100px, 14svh, 180px); }
}

/* ---------- Wish it ---------- */
.seccion { padding-block: clamp(56px, 10vh, 120px); padding-inline: clamp(16px, 5vw, 64px); }
.seccion .interior { max-width: 1120px; margin: 0 auto; }
.wishit { background: var(--crema); }
.wishit .encabezado { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); }
.wishit .titulo-script {
  margin: 0; font: 400 clamp(64px, 11vw, 132px)/.9 var(--fuente-script); color: var(--granate);
  letter-spacing: .01em;
}
.wishit .lema {
  margin: 14px 0 0; font: 500 clamp(20px, 2.6vw, 30px)/1.2 var(--fuente-titulo); color: var(--tinta);
  font-optical-sizing: auto;
}
.wishit .lema .ini { font: 400 1.55em/1 var(--fuente-script); color: var(--granate); margin-right: .04em; }
.wishit .lema .sep { color: var(--tinta-suave); margin: 0 .35em; }
.wishit .lema-es { margin: 10px 0 0; font: 600 13px/1.4 var(--fuente-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave); }
.wishit .intro { margin: 26px auto 0; max-width: 60ch; color: var(--tinta-suave); font-size: 18px; }
.pasos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.paso { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; min-width: 0; }
.paso .numero { font: 400 56px/1 var(--fuente-script); color: var(--granate); min-width: .8em; }
.paso h3 { margin: 10px 0 6px; font: 600 19px/1.3 var(--fuente-texto); }
.paso p { margin: 0; color: var(--tinta-suave); }

/* ---------- Cierre ---------- */
.cierre { background: var(--granate); color: #fff; text-align: center; }
.cierre .interior { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.cierre img { height: 120px; width: auto; }
.cierre h2 { margin: 0; font: 400 clamp(44px, 6vw, 76px)/1 var(--fuente-script); max-width: 16ch; }
.cierre p { margin: 0; max-width: 46ch; opacity: .9; font-size: 18px; }
.cierre .acciones { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cierre .boton--borde { color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
.cierre .boton--borde:hover { background: rgba(255, 255, 255, .12); }

@media (prefers-reduced-motion: reduce) {
  .silueta.camina .edad { animation: none; }
}