@import url('fonts/fonts.css');

:root {
  --paper: #F6F1E6;
  --paper-2: #EDE6D6;
  --card: #FFFDF8;
  --ink: #0B1530;
  --mute: #566079;
  --line: rgba(11, 21, 48, .14);
  --gold: #D4A017;
  --gold-soft: #F3E2B0;
  --teal: #1E8C8C;
  --red: #D64545;
  --red-soft: #F6D9D6;
  --amber: #E9A21B;
  --amber-soft: #FBEBC4;
  --green: #2E9D6A;
  --green-soft: #D5EEDF;
  --display: 'Familjen Grotesk', 'Hanken Grotesk', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; background: #070D1F; overflow: hidden; }
body { font-family: var(--body); color: var(--ink); -webkit-font-smoothing: antialiased; }

#viewport { position: fixed; inset: 0; overflow: hidden; }
#stage { width: 1920px; height: 1080px; position: absolute; left: 50%; top: 50%; overflow: hidden; background: var(--paper); transform-origin: center center; }

/* ───── diapositivas ───── */
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility 0s linear .55s; }
.slide.on { opacity: 1; visibility: visible; transition: opacity .55s ease; }

.sec { position: absolute; left: 120px; right: 120px; top: 64px; display: flex; align-items: center; gap: 24px; font: 600 30px var(--display); color: var(--ink); }
.sec b { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.sec i { flex: 1; height: 1px; background: var(--line); }

.h1 { position: absolute; left: 120px; top: 150px; width: 1500px; font: 600 88px/1.02 var(--display); letter-spacing: -.012em; }
.h1 em { font-style: normal; color: var(--gold); }
.lead { font: 400 38px/1.38 var(--body); color: var(--mute); }
.lead strong { color: var(--ink); font-weight: 600; }
.t { position: absolute; }

/* ───── pie: el vale y el número ───── */
#foot { position: absolute; left: 120px; right: 120px; bottom: 44px; display: flex; justify-content: space-between; align-items: center; font: 500 26px var(--body); color: var(--mute); z-index: 20; pointer-events: none; }
#chip { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); padding: 10px 22px 10px 16px; border-radius: 999px; }
#chip .dot { width: 16px; height: 16px; border-radius: 50%; background: var(--chip, var(--red)); transition: background .6s; box-shadow: 0 0 0 6px color-mix(in srgb, var(--chip, var(--red)) 22%, transparent); }
#chip strong { color: var(--ink); font-weight: 600; }
#num { font-variant-numeric: tabular-nums; }

/* ───── aparición por pasos ───── */
[data-s] { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
[data-s].show { opacity: 1; transform: none; }
[data-s].from-left { transform: translateX(-60px); }
[data-s].from-right { transform: translateX(60px); }
[data-s].pop { transform: scale(.85); }
[data-s].show.from-left, [data-s].show.from-right, [data-s].show.pop { transform: none; }

/* personajes: llegan caminando */
.who { position: absolute; display: flex; flex-direction: column; align-items: center; }
.who img { display: block; height: 100%; width: auto; filter: drop-shadow(0 14px 10px rgba(11, 21, 48, .10)); }
.who .floor { position: absolute; bottom: -10px; left: 12%; right: 12%; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11, 21, 48, .18), transparent); z-index: -1; }
.who[data-s] { transform: translateX(-340px); opacity: 0; transition: opacity .4s ease, transform 1.5s cubic-bezier(.3, .7, .2, 1); }
.who[data-s].show { transform: none; opacity: 1; }
.who[data-s].rtl { transform: translateX(340px); }
.who[data-s].rtl.show { transform: none; }
.who .walk { height: 100%; transform-origin: 50% 100%; }
.who.show .walk { animation: paso .5s ease-in-out 3 alternate; }
@keyframes paso { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-14px) rotate(1deg); } }

/* globos de lo que dice cada quien */
.say { position: absolute; height: 170px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px 20px; font: 500 25px/1.28 var(--body); color: var(--ink); box-shadow: 0 10px 30px rgba(11, 21, 48, .07); }
.say::after { content: ''; position: absolute; left: 50%; bottom: -11px; width: 20px; height: 20px; margin-left: -10px; background: var(--card); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg); }
.say.bad { border-color: color-mix(in srgb, var(--red) 40%, transparent); }
.say .where { display: block; font: 600 22px var(--display); color: var(--red); margin-bottom: 4px; }

/* ───── tarjetas ───── */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 26px; box-shadow: 0 18px 50px rgba(11, 21, 48, .07); }
.chip { display: inline-flex; align-items: center; gap: 10px; font: 600 24px var(--display); padding: 8px 18px; border-radius: 999px; }
.chip::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }
.chip.gray { background: #E6E3DA; color: #5A6278; }
.chip.amber { background: var(--amber-soft); color: #9A6A00; }
.chip.green { background: var(--green-soft); color: #1C724B; }
.chip.red { background: var(--red-soft); color: #A92D2D; }
.chip.gold { background: var(--gold-soft); color: #7A5A00; }

.num-big { font: 600 150px/0.95 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ───── pista del vale (hilo de todo el recorrido) ───── */
#track { position: absolute; left: 0; right: 0; top: 128px; height: 150px; opacity: 0; pointer-events: none; transition: opacity .5s; z-index: 10; }
#track.show { opacity: 1; }
#track .line { position: absolute; left: 200px; right: 200px; top: 62px; height: 4px; background: var(--line); border-radius: 2px; }
#track .fill { position: absolute; left: 200px; top: 62px; height: 4px; background: var(--gold); border-radius: 2px; width: calc(var(--at, 0) * (1520px / 6)); transition: width 1s cubic-bezier(.4, .1, .2, 1); }
#track .st { position: absolute; top: 49px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--paper); border: 4px solid var(--line); transition: all .5s; }
#track .st.done { border-color: var(--gold); background: var(--gold); }
#track .st.cur { border-color: var(--ink); background: var(--ink); transform: scale(1.25); }
#track .st.later { border-style: dashed; }
#track .lbl { position: absolute; top: 96px; width: 220px; margin-left: -110px; text-align: center; font: 600 26px var(--display); color: var(--mute); transition: color .5s; }
#track .lbl.cur { color: var(--ink); }
#track .ph { position: absolute; top: 16px; height: 18px; border: 2px solid var(--line); border-bottom: none; border-radius: 10px 10px 0 0; }
#track .ph span { position: absolute; top: -34px; left: 0; white-space: nowrap; font: 600 24px var(--display); color: var(--gold); }
#track .ph.later span { color: var(--mute); }
#vale { position: absolute; top: 26px; left: calc(200px + var(--at, 0) * (1520px / 6)); transform: translateX(-50%); width: 130px; height: 50px; background: var(--ink); color: var(--paper); border-radius: 12px; display: grid; place-items: center; font: 600 24px var(--display); font-variant-numeric: tabular-nums; transition: left 1s cubic-bezier(.4, .1, .2, 1); box-shadow: 0 10px 24px rgba(11, 21, 48, .25); }
#vale::after { content: ''; position: absolute; bottom: -9px; left: 50%; margin-left: -9px; width: 18px; height: 18px; background: var(--ink); transform: rotate(45deg); border-radius: 3px; }

/* ───── puertas (reglas) ───── */
.gate { display: flex; align-items: flex-start; gap: 18px; background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 35%, transparent); color: #7C1F1F; border-radius: 20px; padding: 20px 26px; font: 500 28px/1.3 var(--body); }
.gate b { font: 600 28px var(--display); color: var(--red); }
.gate svg { flex: none; width: 34px; height: 34px; margin-top: 2px; }

/* ───── teléfono ───── */
.phone { position: absolute; width: 470px; height: 900px; background: #10192F; border-radius: 64px; padding: 18px; box-shadow: 0 40px 90px rgba(11, 21, 48, .28); }
.phone .scr { width: 100%; height: 100%; background: #ECE5DA; border-radius: 48px; overflow: hidden; position: relative; display: flex; flex-direction: column; }
.phone .bar { background: #1E5E57; color: #fff; padding: 40px 26px 14px; font: 600 28px var(--display); }
.phone .msgs { flex: 1; padding: 16px 14px; display: flex; flex-direction: column; gap: 10px; }
.msg { background: #fff; border-radius: 6px 22px 22px 22px; padding: 12px 16px; font: 400 22px/1.28 var(--body); max-width: 92%; box-shadow: 0 2px 0 rgba(0, 0, 0, .06); }
.msg b { display: block; font: 600 22px var(--display); color: #1E5E57; margin-bottom: 4px; }
.msg .btns { display: flex; gap: 10px; margin-top: 12px; }
.msg .btns span { flex: 1; text-align: center; padding: 10px 6px; border-radius: 12px; background: #E3F1EC; color: #1E5E57; font: 600 22px var(--display); }
.msg.urgent { border-left: 6px solid var(--red); }

/* ───── portada ───── */
.cover-title { position: absolute; left: 120px; top: 250px; font: 600 190px/0.92 var(--display); letter-spacing: -.025em; }
.cover-title em { font-style: normal; color: var(--gold); }
.cover-sub { position: absolute; left: 124px; top: 660px; width: 1000px; font: 400 44px/1.35 var(--body); color: var(--mute); }
.brandline { position: absolute; left: 124px; top: 70px; font: 600 34px var(--display); letter-spacing: .01em; }
.brandline span { color: var(--gold); }

/* ───── retícula de tarjetas del equipo ───── */
.grid4 { position: absolute; left: 120px; right: 120px; top: 290px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 320px); gap: 26px; }
.pcard { padding: 26px 28px; display: flex; flex-direction: column; gap: 6px; }
.pcard h3 { font: 600 34px var(--display); }
.pcard small { font: 500 22px var(--body); color: var(--mute); }
.pcard p { font: 400 26px/1.3 var(--body); margin-top: 6px; }
.pcard p + p { color: var(--mute); }
.pcard p span { font: 600 24px var(--display); margin-right: 6px; }
.pcard .hoy span { color: var(--red); }
.pcard .con span { color: var(--green); }

.grid5 { position: absolute; left: 120px; right: 120px; top: 330px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }

.hint { position: absolute; right: 120px; top: 70px; font: 500 26px var(--body); color: var(--mute); opacity: 1; transition: opacity 1s; }
.hint.off { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .who .walk { animation: none !important; }
  [data-s], .who[data-s] { transition-duration: .01s !important; }
}

/* retardos de llegada y contadores */
.who[data-s] { transition-delay: var(--d, 0s); }
.who.show .walk { animation-delay: var(--d, 0s); }
[data-flip][data-color] { color: var(--red); }
[data-flip][data-color].flipped { color: var(--green); }

/* avatares (solo la cabeza) */
.avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--paper-2); flex: none; position: relative; }
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar.two { width: auto; background: none; border-radius: 0; overflow: visible; display: flex; }
.avatar.two img { width: 72px; height: 72px; border-radius: 50%; background: var(--paper-2); }
.avatar.two img + img { margin-left: -16px; }

/* modo de revisión: sin transiciones */
.qa *, .qa *::before, .qa *::after { transition: none !important; animation: none !important; }

/* ocultar por paso: lo que llega su paso data-h se desvanece */
[data-h] { transition: opacity .5s ease, transform .6s ease; }
.gone { opacity: 0 !important; transform: scale(.85) !important; pointer-events: none; }

/* tablero de la diapositiva "No es magia" */
.nm-row { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); font: 500 30px var(--body); }
.nm-row .cell { position: relative; min-width: 230px; height: 46px; display: flex; justify-content: flex-end; align-items: center; }
.nm-row .empty { font: 400 24px var(--body); font-style: normal; color: var(--mute); border: 2px dashed var(--line); border-radius: 999px; padding: 4px 18px; }
.nm-row .chip { position: absolute; right: 0; transition-delay: calc(var(--i, 0) * .22s); }

/* varita que se agita y no hace nada (estrellas recortadas con clip-path) */
.wand { width: 300px; height: 300px; transform-origin: 14% 88%; animation: wave 1.1s ease-in-out infinite alternate; }
.wand .stick { position: absolute; left: 40px; bottom: 34px; width: 230px; height: 14px; border-radius: 8px; border: 1px solid var(--ink); background: linear-gradient(90deg, #fff 0 14%, var(--ink) 14% 100%); transform-origin: 0 50%; transform: rotate(-42deg); }
.wand .star, .wand .spark { position: absolute; background: var(--gold); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.wand .star { left: 182px; top: 74px; width: 60px; height: 60px; }
.wand .spark { width: 24px; height: 24px; opacity: 0; animation: twinkle 1.4s ease-in-out infinite; }
@keyframes wave { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } }

/* tarjetas de "lo que le toca" */
.pcard .task { font: 500 28px/1.3 var(--body); margin-top: 10px; }
@media (prefers-reduced-motion: reduce) { .wand, .wand .spark { animation: none !important; } }