/* Regalo del Grado 5 del ICAM (6 nov 2026). Es el diseño de la invitación a la Cena de la Gratitud de Gimnasio
   Emocional Mentes Brillantes, que hizo la hermana de Sebastián: degradado vino -> naranja quemado -> crema, moño
   blanco de satín en la esquina, «Tienes un REGALO» con sus letras (como imagen: son de Canva) y Outfit para el resto.
   Cambia lo que pidió Leidy Franco: el nombre del colegio, la caja dice «GRADO 5» y su tapa es un birrete, las
   palabras del viaje son las del grado, y al final sale «¡Felicitaciones!» con la música de los grados. */

@font-face { font-family: "Allura"; src: url("/fuentes/Allura-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/fuentes/BodoniModa.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fuentes/Outfit.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --vino-hondo: #4a0613;
  --vino: #7b0e1d;
  --carmesi: #a3122c;
  --dorado: #e9b65c;
  --dorado-claro: #ffe3ad;
  --oro-linea: rgba(196, 146, 64, 0.8);
  --crema: #fffaf3;
  --tinta: #6e0b1f;          /* texto vino, como «Tócalo para abrirlo» */
  --tinta-suave: #8a3a44;
  --claro: #fff7ec;
  /* el degradado de la portada, medido sobre la imagen de la hermana de Sebastián */
  --degradado: linear-gradient(180deg, #7b0e1d 0%, #851026 12%, #9a1d26 22%, #b2402c 32%, #c96640 42%,
    #db8c5c 51%, #e6ad7f 61%, #ecc6a1 71%, #ebd5bb 81%, #e6d9c4 100%);
  --script: "Allura", "Segoe Script", cursive;
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Outfit", system-ui, sans-serif;
  --sale: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100svh;
  background: #0b0204;
  color: var(--claro);
  font: 400 1.0625rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
::selection { background: var(--dorado); color: var(--vino-hondo); }
img, video, canvas { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--dorado-claro); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.script { font-family: var(--script); font-weight: 400; letter-spacing: 0; }
/* La firma brilla como en la portada. */
.brilla { text-shadow: 0 0 6px rgba(255, 240, 220, 0.8), 0 0 22px rgba(255, 210, 160, 0.5); }
.sigla { font-weight: 600; letter-spacing: 0.3em; }

.etapa { position: relative; min-height: 100svh; }

/* ------------------------------------------------------------ botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 30px; border: 0; border-radius: 999px;
  font: 600 1.05rem/1 var(--sans); letter-spacing: 0.01em;
  transition: transform 160ms var(--sale), background-color 200ms, box-shadow 200ms;
}
.boton:active { transform: scale(0.97); }
.boton--oro {
  background: transparent; color: var(--dorado-claro);
  border: 1px solid rgba(255, 227, 173, 0.55);
  font-weight: 500; letter-spacing: 0.06em;
}
.boton--oro:hover { background: rgba(255, 227, 173, 0.08); }
.enlace {
  background: none; border: 0; padding: 12px 8px; min-height: 44px;
  font: 500 0.98rem/1.2 var(--sans); color: var(--tinta);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
}

/* ------------------------------------------------------------ 1. la portada */
.regalo { height: 100svh; overflow: hidden; background: var(--degradado); }
/* El lienzo tiene la forma del diseño (9:16). En el celular llena el alto y se recortan un poco los lados;
   en el PC va al centro con el degradado a los lados. */
.regalo__lienzo {
  position: absolute; z-index: 1; left: 50%; bottom: 0; transform: translateX(-50%);
  width: max(100%, 56.25svh); aspect-ratio: 9 / 16; overflow: hidden;
}
/* El túnel: en los últimos segundos la cámara se mete cada vez más rápido hacia el fondo de la caja (el punto donde
   termina el video, --boca) mientras la oscuridad se cierra alrededor. */
.regalo__tunel { position: absolute; inset: 0; transform-origin: var(--boca-x, 50%) var(--boca-y, 50%); }
.regalo--tunel .regalo__tunel { transform: scale(2); transition: transform 3.4s cubic-bezier(0.55, 0, 0.85, 0.35); }
.regalo__vineta {
  position: absolute; left: var(--boca-x, 50%); top: var(--boca-y, 50%); width: 320%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle, transparent 17%, rgba(0, 0, 0, 0.8) 27%, #000 36%); /* la boca del túnel */
  opacity: 0; transform: translate(-50%, -50%) scale(1);
}
.regalo--tunel .regalo__vineta {
  opacity: 1; transform: translate(-50%, -50%) scale(0.22);
  transition: opacity 1.2s ease-out, transform 3.4s cubic-bezier(0.5, 0, 0.8, 0.4);
}
/* El video de la caja va debajo de la foto, encuadrado igual (produccion/caja/plato.py). */
.regalo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.regalo__fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 650ms ease-in-out; }
/* Ya rueda el video: la foto se funde con él (la caja no se mueve). */
.regalo--rueda .regalo__fondo { opacity: 0; }
/* La luz que respira por la rendija del birrete, con chispas que suben (la caja y su texto no se tocan). */
.regalo__luz { position: absolute; left: 78%; top: 66%; width: 0; height: 0; pointer-events: none; }
.regalo__luz::before {
  content: ""; position: absolute; left: -90px; top: -90px; width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 228, 160, 0.75) 0%, rgba(255, 200, 120, 0.25) 35%, transparent 70%);
  mix-blend-mode: screen; animation: respira 3.2s ease-in-out infinite;
}
@keyframes respira { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
.regalo__luz span {
  position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0%, rgba(255, 210, 140, 0.9) 40%, transparent 70%);
  opacity: 0; animation: chispa 3.6s ease-out infinite;
}
.regalo__luz span:nth-child(1) { --x: -26px; animation-delay: 0s; }
.regalo__luz span:nth-child(2) { --x: 18px; animation-delay: 0.6s; width: 4px; height: 4px; }
.regalo__luz span:nth-child(3) { --x: -8px; animation-delay: 1.2s; }
.regalo__luz span:nth-child(4) { --x: 30px; animation-delay: 1.8s; width: 3px; height: 3px; }
.regalo__luz span:nth-child(5) { --x: -40px; animation-delay: 2.4s; width: 4px; height: 4px; }
.regalo__luz span:nth-child(6) { --x: 6px; animation-delay: 3s; }
@keyframes chispa {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x), -150px); }
}
.regalo__caja {
  position: absolute; left: 9%; right: 9%; top: 50%; bottom: 8%;
  background: none; border: 0; border-radius: 28px; padding: 0;
}
/* Dónde tocar: la caja misma parpadea con luz dorada (es la caja recortada, encima de la foto, que se aclara y brilla)
   y debajo dice «Dale clic aquí para abrir tu regalo». Ubicación: produccion/caja/plato.py, brillo. */
.regalo__brillo {
  position: absolute; left: 12.78%; top: 53.18%; width: 75.28%; height: auto; pointer-events: none;
  filter: brightness(1.16) drop-shadow(0 0 10px rgba(255, 222, 150, 0.95)) drop-shadow(0 0 30px rgba(255, 196, 110, 0.6));
  opacity: 0; animation: parpadea 2.2s ease-in-out infinite;
}
@keyframes parpadea { 0%, 100% { opacity: 0; } 45%, 55% { opacity: 1; } }
.regalo__clic {
  position: absolute; left: 0; right: 0; top: 91.6%; margin: 0; text-align: center; pointer-events: none;
  font: 600 clamp(13px, 3.7vw, 16px)/1.2 var(--sans); letter-spacing: 0.02em; color: var(--tinta);
  animation: llama 2.2s ease-in-out infinite;
}
@keyframes llama { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
/* Al tocar la caja: las letras y la luz se van suaves mientras el birrete sale volando. */
.regalo__texto, .regalo__luz, .regalo__clic { transition: opacity 600ms ease-out, transform 900ms var(--sale); }
.regalo__brillo { transition: opacity 400ms ease-out; }
.regalo--abierto .regalo__texto { opacity: 0; transform: translateY(-14px); }
.regalo--abierto .regalo__luz, .regalo--abierto .regalo__clic, .regalo--abierto .regalo__brillo { opacity: 0; animation: none; }
/* En el PC, a los lados del video el degradado se va apagando a negro mientras la cámara entra en la caja. */
.regalo__noche { position: absolute; inset: 0; z-index: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.8s ease-out; }
.regalo--tunel .regalo__noche { opacity: 1; }
.regalo__texto {
  position: absolute; z-index: 2; left: 0; right: 0; top: 11.5%;
  display: grid; justify-items: center; padding: 0 16px; text-align: center; pointer-events: none;
}
.regalo__titulo { margin: 0; width: min(84vw, 40svh); }
.regalo__titulo img { width: 100%; height: auto; }
.regalo__marca {
  margin: 2svh 0 0; font: 400 clamp(10.5px, 2.9vw, 13px)/1.55 var(--sans);
  letter-spacing: 0.2em; color: rgba(255, 244, 232, 0.94);
}
.regalo__ayuda {
  margin: 3svh 0 0; max-width: 22em; text-wrap: balance;
  font: 500 clamp(15px, 4.3vw, 19px)/1.3 var(--sans); color: var(--tinta);
}

/* ------------------------------------------------------------ 3. suspenso, ya dentro del túnel */
.pregunta {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 6svh;
  padding: 16px; text-align: center;
}
.pregunta__texto {
  margin: 0; font-size: clamp(3.4rem, 15vw, 5.6rem); line-height: 1.1; color: var(--claro);
  opacity: 0; filter: blur(14px); transform: scale(0.96);
}
.pregunta__texto:focus { outline: none; }
.pregunta__si { opacity: 0; pointer-events: none; }
.pregunta--lista .pregunta__texto { animation: aparece-lento 1.1s ease-out forwards; }
.pregunta--lista .pregunta__si { animation: aparece 700ms var(--sale) 0.9s forwards; pointer-events: auto; }
@keyframes aparece-lento { to { opacity: 1; filter: blur(0); transform: none; } }
/* Al decir que sí, la pregunta se agranda y se desenfoca, como si se pasara a través de ella hacia las estrellas. */
.pregunta--sale { pointer-events: none; }
.pregunta--sale .pregunta__si { pointer-events: none; animation: se-va 350ms ease-out forwards; }
.pregunta--sale .pregunta__texto { animation: atraviesa 1.1s ease-in forwards; }
@keyframes atraviesa {
  from { opacity: 1; filter: blur(0); transform: none; }
  to { opacity: 0; filter: blur(12px); transform: scale(1.35); }
}

/* ------------------------------------------------------------ 4. el viaje */
.cine { height: 100svh; background: #000; overflow: hidden; }
.cine__estrellas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cine__palabras { position: absolute; inset: 0; pointer-events: none; }
.palabra {
  position: absolute; left: 50%; top: 50%; white-space: pre; text-align: center; will-change: transform, opacity;
  color: var(--dorado-claro); opacity: 0;
  /* un contorno oscuro finito (solo se nota cuando la letra pasa por delante de la luz) y el brillo dorado */
  text-shadow: 0 0 1px rgba(50, 14, 0, 0.95), 0 0 4px rgba(50, 14, 0, 0.7),
    0 0 10px rgba(255, 210, 140, 0.7), 0 0 30px rgba(255, 170, 90, 0.35);
}
.palabra--firma { font: 400 clamp(2.6rem, 12vw, 4.4rem)/1.05 var(--script); }
.palabra--mayus { font: 500 clamp(0.95rem, 4.2vw, 1.9rem)/1.35 var(--serif); letter-spacing: 0.14em; text-transform: uppercase; }
/* El punto de luz al que se viaja; al final se abre y de ella sale el final. */
.cine__punto {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%;
  background: radial-gradient(circle, #fffaf0 0%, #ffe9c2 9%, rgba(255, 196, 112, 0.75) 20%, rgba(240, 150, 70, 0.35) 38%,
    rgba(200, 90, 40, 0.12) 56%, transparent 70%);
  will-change: transform, opacity; pointer-events: none;
}
.cine__destello {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; will-change: opacity;
  background: radial-gradient(circle at 50% 50%, #fffdf6 0%, #fff3dc 50%, #ffe4bc 100%); /* la luz */
}
.cine__saltar { display: none; }

/* ------------------------------------------------------------ 5. el final */
.final {
  padding: 0 16px max(28px, env(safe-area-inset-bottom)); display: grid; justify-items: center; align-content: start;
  overflow: hidden; background: var(--vino);
}
.final__cielo { position: absolute; inset: 0; z-index: 0; background: var(--degradado); }
.final > *:not(.final__cielo):not(.sonido):not(.final__mono) { position: relative; z-index: 1; }
.final__mono { position: absolute; z-index: 1; top: 0; right: 0; width: min(34vw, 210px); height: auto; pointer-events: none; }
/* Llega desde la luz del viaje: la misma luz queda encima y se va despacio dejando ver el final. */
.final::after {
  content: ""; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, #fffdf6 0%, #fff3dc 50%, #ffe4bc 100%);
}
.final.entra::after { animation: luz-se-va 1.9s ease-out both; }
@keyframes luz-se-va { from { opacity: 1; } to { opacity: 0; } }

/* Chispas doradas que suben despacio detrás de la tarjeta. Quedan fijas a la pantalla, no a la página. */
.chispas { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.chispas span {
  position: absolute; left: var(--x); bottom: -12px; width: var(--t); height: var(--t); border-radius: 50%;
  background: radial-gradient(circle, #fff3d6 0%, rgba(255, 210, 140, 0.85) 35%, rgba(233, 182, 92, 0) 70%);
  opacity: 0;
  animation: sube var(--d) linear var(--r) infinite;
}
@keyframes sube {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  12% { opacity: 0.9; }
  50% { transform: translate3d(var(--va), -55vh, 0); }
  80% { opacity: 0.55; }
  100% { transform: translate3d(0, -112vh, 0); opacity: 0; }
}

/* Botón de la música, arriba a la izquierda (a la derecha va el moño). */
.sonido {
  position: absolute; z-index: 5; top: max(14px, env(safe-area-inset-top)); left: 14px;
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 227, 173, 0.35);
  display: grid; place-items: center; padding: 0;
  background: rgba(60, 5, 15, 0.45); color: var(--dorado-claro);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: transform 160ms var(--sale), background-color 200ms;
}
.sonido:active { transform: scale(0.94); }
.sonido svg { width: 22px; height: 22px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sonido[aria-pressed="true"] .sonido__no, .sonido[aria-pressed="false"] .sonido__si { display: none; }

.final__titulo {
  margin: 0; padding: max(17svh, 104px) 0 0; text-align: center;
  font-size: clamp(3rem, 13.5vw, 5.4rem); line-height: 1.05; color: var(--claro);
}
.final__titulo:focus { outline: none; }
.final__marca {
  margin: 1.6vh 0 3.2vh; text-align: center; font: 400 clamp(10.5px, 2.9vw, 13px)/1.55 var(--sans);
  letter-spacing: 0.2em; color: rgba(255, 244, 232, 0.94);
}

.tarjeta {
  position: relative; width: 100%; max-width: 520px; text-align: center;
  background: var(--crema); color: var(--tinta); color-scheme: light;
  border-radius: 28px; padding: 40px 30px 34px;
  box-shadow: 0 24px 60px -24px rgba(90, 10, 20, 0.45); /* la tarjeta flota sobre el degradado */
}
/* El marco: una línea dorada doble por dentro del borde, como en las tarjetas impresas. */
.tarjeta::before {
  content: ""; position: absolute; inset: 11px; border-radius: 19px; pointer-events: none;
  border: 1.5px solid var(--oro-linea);
  box-shadow: inset 0 0 0 4px var(--crema), inset 0 0 0 5px rgba(196, 146, 64, 0.45);
}
.tarjeta__grado {
  margin: 0; font: 500 0.82rem/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--tinta);
}
.tarjeta__suenos { margin: 0.2rem 0 0.6rem; font-size: clamp(3rem, 13vw, 3.9rem); line-height: 1.05; color: var(--carmesi); }
/* Las palabras del viaje, en dos columnas con su punto dorado. */
.valores {
  margin: 0 auto; padding: 0; list-style: none; max-width: 340px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; text-align: left;
}
.valores li {
  position: relative; padding-left: 18px;
  font: 500 1.02rem/1.25 var(--serif); font-variation-settings: "opsz" 6; letter-spacing: 0.02em;
}
.valores li::before {
  content: ""; position: absolute; left: 1px; top: 0.5em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dorado); box-shadow: 0 0 0 2px rgba(233, 182, 92, 0.25);
}
/* La sigla del colegio al pie, entre dos líneas doradas. */
.tarjeta__sigla {
  display: flex; align-items: center; gap: 14px; margin: 24px 0 0;
  font: 600 1.15rem/1 var(--serif); font-variation-settings: "opsz" 6; letter-spacing: 0.42em; color: var(--tinta);
}
.tarjeta__sigla::before, .tarjeta__sigla::after { content: ""; flex: 1; height: 1px; background: var(--oro-linea); }
.tarjeta__sigla::after { margin-left: -0.42em; } /* la última letra también lleva su espacio: se compensa */

.final__repetir { margin-top: 14px; }

/* ------------------------------------------------------------ transiciones entre etapas */
/* Ninguna etapa se corta: la que se va queda fija encima, donde estaba, y se desvanece sobre la que llega. */
.etapa--sale {
  position: fixed; z-index: 30; left: 0; right: 0; top: var(--arriba, 0px);
  pointer-events: none; animation: se-va var(--dura, 700ms) ease-in-out forwards;
}
@keyframes se-va { from { opacity: 1; } to { opacity: 0; } }
@keyframes aparece { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* El final llega por partes, mientras la luz se va. */
.entra .final__mono { animation: aclara 1400ms ease-out 700ms both; }
.entra .final__titulo { animation: enfoca 1500ms var(--sale) 500ms both; }
.entra .final__marca { animation: aclara 1000ms ease-out 1100ms both; }
.entra .tarjeta { animation: sube-tarjeta 1200ms var(--sale) 1200ms both; }
.entra .valores li { animation: aparece 700ms var(--sale) both; }
.entra .valores li:nth-child(1) { animation-delay: 1700ms; }
.entra .valores li:nth-child(2) { animation-delay: 1780ms; }
.entra .valores li:nth-child(3) { animation-delay: 1860ms; }
.entra .valores li:nth-child(4) { animation-delay: 1940ms; }
.entra .valores li:nth-child(5) { animation-delay: 2020ms; }
.entra .valores li:nth-child(6) { animation-delay: 2100ms; }
.entra .valores li:nth-child(7) { animation-delay: 2180ms; }
.entra .valores li:nth-child(8) { animation-delay: 2260ms; }
.entra .valores li:nth-child(9) { animation-delay: 2340ms; }
.entra .valores li:nth-child(10) { animation-delay: 2420ms; }
.entra .final__repetir { animation: aparece 700ms var(--sale) 2600ms both; }
@keyframes aclara { from { opacity: 0; } to { opacity: 1; } }
@keyframes enfoca {
  from { opacity: 0; transform: scale(0.94); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes sube-tarjeta { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: none; } }

@media (min-width: 720px) {
  /* En el PC el diseño vertical va al centro; a los lados sigue el mismo degradado (o el negro del viaje). */
  .regalo__lienzo { /* los bordes del diseño (y del video de la caja) se funden con el degradado de los lados */
    width: 56.25svh;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .regalo__texto { top: 10.5%; }
  .regalo__titulo { width: 36svh; }
  .tarjeta { padding: 48px 52px 40px; }
  .tarjeta::before { inset: 16px; border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .regalo__brillo, .regalo__clic, .regalo__luz::before, .regalo__luz span { animation: none; }
  .regalo__brillo { opacity: 0.6; }
  .regalo__luz span { display: none; }
  .regalo__fondo, .regalo__texto, .regalo__brillo, .regalo__clic, .regalo__luz { transition: none; }
  .entra *, .final.entra::after, .chispas span { animation: none !important; }
  .pregunta__texto, .pregunta__si { animation: none !important; opacity: 1; filter: none; transform: none; pointer-events: auto; }
  .boton { transition: none; }
  .regalo__noche { transition: none; }
  .regalo--tunel .regalo__tunel, .regalo--tunel .regalo__vineta { transform: none; transition: none; }
  .regalo--tunel .regalo__vineta { opacity: 0; }
}