/* =========================================================
   La Aventura de Mamá — estilos
   Reglas de rendimiento: solo se animan transform y opacity.
   Sin backdrop-filter, sin filter: blur(), sin animar sombras.
   ========================================================= */
:root {
  --bg1: #0d0221;
  --bg2: #1a0b3d;
  --bg3: #2d1060;
  --violeta: #8b5cf6;
  --violeta-b: #c084fc;
  --lila: #e9d5ff;
  --rosa: #f472b6;
  --oro: #fbbf24;
  --texto: #f7f0ff;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --elastic: cubic-bezier(0.34, 1.56, 0.64, 1);
  --titulo: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --cuerpo: 'Nunito', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden;
  background: #0d0221;
  background: linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 50%, var(--bg3) 100%);
  color: var(--texto);
  font-family: var(--cuerpo);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
  cursor: default;
}
button { font: inherit; color: inherit; }
button:focus { outline: none; }
[hidden] { display: none !important; }

/* ---------- Fondo vivo ---------- */
#blobs { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.blob {
  position: absolute; width: 1100px; height: 1100px; border-radius: 50%;
  will-change: transform;
  animation: blob 28s ease-in-out infinite alternate;
}
.b1 { left: -300px; top: -350px; background: radial-gradient(closest-side, rgba(139,92,246,.42), rgba(139,92,246,0)); }
.b2 { right: -350px; bottom: -400px; background: radial-gradient(closest-side, rgba(244,114,182,.22), rgba(244,114,182,0)); animation-duration: 34s; animation-delay: -8s; }
.b3 { left: 35%; top: 30%; width: 900px; height: 900px; background: radial-gradient(closest-side, rgba(192,132,252,.18), rgba(192,132,252,0)); animation-duration: 40s; animation-delay: -16s; }
@keyframes blob {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(180px,120px,0) scale(1.15); }
  100% { transform: translate3d(-120px,200px,0) scale(.92); }
}
body.q1 #blobs, body.q2 #blobs { display: none; }

#fx { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* ---------- Escenario ---------- */
#stage {
  position: absolute; left: 0; top: 0;
  width: 1920px; height: 1080px;
  transform-origin: 0 0;
  z-index: 2;
}
#shake, #screens { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; }
#shake.shake { animation: shake .55s var(--ease); }
@keyframes shake {
  0% { transform: translate(0,0); }
  15% { transform: translate(10px,-7px); }
  30% { transform: translate(-9px,6px); }
  45% { transform: translate(7px,4px); }
  60% { transform: translate(-5px,-3px); }
  80% { transform: translate(2px,1px); }
  100% { transform: translate(0,0); }
}

.screen {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
  padding: 54px 96px; /* 5% de margen de seguridad */
}
.screen.active { animation: scrIn 1s var(--ease) both; }
.screen.leaving { animation: scrOut .45s var(--ease) both; pointer-events: none; }
@keyframes scrIn { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: none; } }
@keyframes scrOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.95); } }

/* Entradas escalonadas */
.screen.active .in { animation: fadeUp .9s var(--ease) both; animation-delay: var(--d, 0s); }
.screen.active .in.zoom { animation-name: zoomIn; }
.screen.active .in.izq { animation-name: fromLeft; }
.screen.active .in.der { animation-name: fromRight; }
.screen.active .in.fade { animation-name: fadeOnly; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: none; } }
@keyframes fromLeft { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: none; } }
@keyframes fromRight { from { opacity: 0; transform: translateX(120px); } to { opacity: 1; transform: none; } }
@keyframes fadeOnly { from { opacity: 0; } to { opacity: 1; } }

/* Elementos que aparecen más tarde */
.later {
  opacity: 0; transform: translateY(36px) scale(.96); visibility: hidden;
  transition: opacity .8s var(--ease), transform .8s var(--ease), visibility 0s linear .8s;
}
.later.show { opacity: 1; transform: none; visibility: visible; transition: opacity .8s var(--ease), transform .8s var(--elastic), visibility 0s; }

/* ---------- Texto ---------- */
.t-huge, .t-big, .t-mid {
  font-family: var(--titulo); font-weight: 800; margin: 0; line-height: 1.12; letter-spacing: -.01em;
  position: relative; display: inline-block;
}
.t-huge { font-size: 140px; }
.t-big { font-size: 84px; }
.t-mid { font-size: 64px; }
.grad .ch, .grad.plain {
  color: #e9d5ff;
  background: linear-gradient(180deg, #fbf5ff 0%, #d8b4fe 40%, #c084fc 62%, #f472b6 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.grad .ch.emoji { background: none; -webkit-text-fill-color: initial; color: #fff; }
.w { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; animation: chIn .8s var(--elastic) both; }
@keyframes chIn {
  0% { opacity: 0; transform: translateY(.55em) scale(.4) rotate(-8deg); }
  100% { opacity: 1; transform: none; }
}
.ch-zoom .ch { animation-name: chZoom; animation-duration: 1s; animation-timing-function: var(--ease); }
@keyframes chZoom {
  0% { opacity: 0; transform: scale(2.6) translateY(-.2em); }
  100% { opacity: 1; transform: none; }
}
.ch-glow .ch { animation-name: chGlow; animation-duration: .9s; animation-timing-function: var(--ease); }
@keyframes chGlow {
  0% { opacity: 0; transform: translateY(.3em) scale(1.5); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
.instant .ch { animation: none !important; opacity: 1; transform: none; }

/* Destello sobre títulos (ventana que se mueve + copia del texto en sentido inverso: solo transform) */
.shine {
  position: absolute; top: 0; bottom: 0; left: 0; width: 25%;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 50%, rgba(0,0,0,0));
  mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000 50%, rgba(0,0,0,0));
  animation: shineWin 7s var(--ease) infinite;
  animation-delay: var(--shd, 2.6s);
  transform: translateX(-100%);
}
.shine-copy {
  position: absolute; top: 0; left: 0; width: 400%; height: 100%;
  color: #fff; -webkit-text-fill-color: #fff; background: none;
  white-space: inherit; text-align: inherit;
  animation: shineCopy 7s var(--ease) infinite;
  animation-delay: var(--shd, 2.6s);
  transform: translateX(25%);
  opacity: .85;
}
@keyframes shineWin { 0% { transform: translateX(-100%); opacity: 1; } 21.5% { opacity: 1; } 22%, 100% { transform: translateX(400%); opacity: 0; } }
@keyframes shineCopy { 0% { transform: translateX(25%); } 22%, 100% { transform: translateX(-100%); } }
body.q2 .shine { display: none; }

.sub { font-size: 40px; color: var(--lila); margin: 0; font-weight: 700; }
.txt { font-size: 38px; line-height: 1.45; margin: 0; color: var(--texto); }
.chip {
  display: inline-block; padding: 10px 28px; border-radius: 999px;
  font: 800 32px var(--titulo); letter-spacing: .05em; text-transform: uppercase;
  color: var(--lila); background: rgba(139,92,246,.22); border: 2px solid rgba(192,132,252,.55);
}
.chip.oro { color: #2a1400; background: linear-gradient(135deg, #fde68a, #fbbf24); border-color: #fff3c4; }

/* ---------- Light sweep genérico (.sw dentro de tarjetas/botones) ---------- */
.sw { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 3; }
.sw::after {
  content: ''; position: absolute; top: -30%; bottom: -30%; left: 0; width: 38%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 30%, rgba(255,255,255,.42) 50%, rgba(255,255,255,.08) 70%, rgba(255,255,255,0) 100%);
  transform: translateX(-160%) skewX(-18deg);
  animation: sweep var(--sw, 7s) var(--ease) infinite;
  animation-delay: var(--swd, 1.5s);
}
@keyframes sweep { 0% { transform: translateX(-160%) skewX(-18deg); } 20%, 100% { transform: translateX(420%) skewX(-18deg); } }
.focused > .face > .sw::after, .focused > .sw::after, .focused .card-sw::after {
  animation: sweepFocus 2.6s var(--ease) infinite; animation-delay: 0s;
}
@keyframes sweepFocus { 0% { transform: translateX(-160%) skewX(-18deg); } 35%, 100% { transform: translateX(420%) skewX(-18deg); } }
body.q1 .sw::after { --sw: 12s; }
body.q2 .sw::after { --sw: 18s; }

/* ---------- Tarjetas ---------- */
.card {
  position: relative; border-radius: 24px;
  background: linear-gradient(160deg, rgba(58,24,118,.92) 0%, rgba(24,9,56,.94) 100%);
  border: 2px solid rgba(192,132,252,.38);
  box-shadow: 0 0 70px rgba(139,92,246,.28), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---------- Elementos enfocables ---------- */
.foc { position: relative; transition: transform .6s var(--elastic); cursor: pointer; }
.foc > .halo {
  position: absolute; top: -40px; left: -40px; right: -40px; bottom: -40px;
  border-radius: 999px; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(192,132,252,.75), rgba(139,92,246,.28) 55%, rgba(139,92,246,0));
  opacity: 0; transition: opacity .4s var(--ease);
}
.foc.focused { transform: scale(var(--fs, 1.1)); z-index: 5; }
.foc.focused > .halo { opacity: 1; }

/* Botones */
.btn { display: inline-block; border: 0; background: none; padding: 0; margin: 0; font: 800 42px var(--titulo); color: #fff; }
.btn > .face {
  position: relative; z-index: 1; display: block;
  padding: 24px 64px; border-radius: 999px;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 45%, #ec4899 100%);
  border: 3px solid rgba(255,255,255,.28);
  animation: breathe 3.2s ease-in-out infinite;
  white-space: nowrap;
}
.btn.focused > .face { border-color: #fff; }
.btn .arrow { display: inline-block; margin-left: 18px; }
.btn.small { font-size: 36px; }
.btn.small > .face { padding: 18px 48px; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.foc.focused::after {
  content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px;
  border-radius: 999px; border: 4px solid rgba(255,255,255,.9); pointer-events: none; z-index: 2;
}
.foc.sq.focused::after { border-radius: 32px; }
.foc.circ.focused::after { border-radius: 50%; }

/* ---------- Barra de ayuda ---------- */
.help {
  position: absolute; left: 50%; bottom: 54px; transform: translateX(-50%);
  display: flex; align-items: center; white-space: nowrap;
  padding: 10px 34px; border-radius: 999px;
  background: rgba(13,2,33,.82); border: 2px solid rgba(192,132,252,.3);
  font: 700 32px var(--cuerpo); color: var(--lila); z-index: 20;
}
.help .k {
  display: inline-block; min-width: 46px; padding: 0 10px; margin: 0 4px; text-align: center;
  border-radius: 10px; background: rgba(139,92,246,.35); border: 2px solid rgba(192,132,252,.6);
  font: 800 26px/40px var(--titulo); color: #fff;
}
.help .sep { margin: 0 18px; opacity: .5; }
.help .lbl { margin-left: 8px; }

/* ---------- Mute / FPS / aviso ---------- */
#mute {
  position: absolute; top: 54px; right: 96px; width: 84px; height: 84px; border-radius: 50%;
  border: 2px solid rgba(192,132,252,.5); background: rgba(13,2,33,.7); z-index: 20; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
#mute svg { width: 44px; height: 44px; }
/* Mini reproductor de YouTube (visible, en la esquina) */
.yt-card {
  display: none; position: absolute; top: 54px; right: 96px; width: 288px; height: 162px; z-index: 20;
  border-radius: 18px; overflow: hidden; background: #000;
  border: 3px solid rgba(192,132,252,.6); box-shadow: 0 0 40px rgba(139,92,246,.45);
}
.yt-card.on { display: block; }
.yt-card iframe { display: block; width: 288px; height: 162px; border: 0; pointer-events: none; }
.yt-card.on ~ #mute { right: 404px; top: 93px; }
.fps {
  position: absolute; top: 54px; left: 96px; z-index: 30; padding: 6px 18px; border-radius: 12px;
  background: rgba(0,0,0,.7); color: #7CFC9A; font: 800 32px monospace;
}
.rotate {
  display: none; position: fixed; left: 0; right: 0; top: 0; z-index: 50; padding: 8px;
  text-align: center; font: 700 15px var(--cuerpo); color: #fff; background: rgba(139,92,246,.85);
}
@media (orientation: portrait) and (max-width: 820px) { .rotate { display: block; } }

/* ---------- Toast ---------- */
.toast {
  position: absolute; left: 50%; top: 866px; z-index: 25;
  padding: 18px 44px; border-radius: 999px; white-space: nowrap;
  font: 800 40px var(--titulo); color: #fff;
  background: linear-gradient(135deg, #7c3aed, #db2777); border: 3px solid rgba(255,255,255,.5);
  opacity: 0; transform: translate(-50%, -40px) scale(.9);
  transition: opacity .45s var(--ease), transform .6s var(--elastic);
  pointer-events: none;
}
.toast.oro { color: #2a1400; background: linear-gradient(135deg, #fde68a, #fbbf24); border-color: #fff8dc; }
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* =========================================================
   PANTALLAS
   ========================================================= */
.center-col { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.mb20 { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; } .mb40 { margin-bottom: 40px; } .mb60 { margin-bottom: 60px; }

/* ----- Inicio ----- */
#s-start .center-col { padding-bottom: 80px; }
.start-heart {
  position: absolute; left: 50%; top: 50%; width: 760px; height: 760px; margin: -440px 0 0 -380px;
  opacity: .16; animation: beat 2.4s ease-in-out infinite; pointer-events: none;
}
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.08); } 24% { transform: scale(.98); } 36% { transform: scale(1.05); } 50% { transform: scale(1); } }
.orbit { position: absolute; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; }
.orbit .ring { position: absolute; left: -620px; top: -620px; width: 1240px; height: 1240px; animation: spin 60s linear infinite; }
.orbit .ring.r2 { left: -470px; top: -470px; width: 940px; height: 940px; animation-duration: 44s; animation-direction: reverse; }
.orbit .ring i { position: absolute; width: 46px; height: 46px; }
.orbit .ring i svg { width: 100%; height: 100%; }
@keyframes spin { to { transform: rotate(360deg); } }
.line-glow { width: 900px; height: 4px; margin: 26px auto 30px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(192,132,252,0), #c084fc, #f472b6, rgba(244,114,182,0)); transform-origin: 50% 50%; }
.screen.active .line-glow { animation: lineIn 1.4s var(--ease) both; animation-delay: 1.2s; }
@keyframes lineIn { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ----- Personaje ----- */
.char-wrap { display: flex; align-items: stretch; justify-content: center; margin-top: 66px; }
.avatar-card { width: 560px; height: 720px; padding: 30px 40px; margin-right: 50px; text-align: center; }
.avatar {
  position: relative; width: 320px; height: 320px; margin: 0 auto 26px;
}
.avatar .ring-rot {
  position: absolute; top: -14px; left: -14px; right: -14px; bottom: -14px; border-radius: 50%;
  background: conic-gradient(from 0deg, #8b5cf6, #f472b6, #fbbf24, #c084fc, #8b5cf6);
  animation: spin 8s linear infinite;
}
.avatar .pic {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; overflow: hidden;
  background: #2d1060; border: 6px solid #1a0b3d;
}
.avatar .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.avatar .pic svg { width: 100%; height: 100%; display: block; }
.char-name { font: 800 96px/1 var(--titulo); margin: 0 0 6px; }
.char-title { font: 800 44px var(--titulo); color: var(--lila); margin: 0 0 18px; }
.char-class { font-size: 32px; color: var(--oro); font-weight: 800; }

.stats-card { width: 1060px; height: 720px; padding: 30px 56px 30px; display: flex; flex-direction: column; }
.stat { margin-bottom: 8px; }
.stat-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.stat-label { font-size: 33px; font-weight: 800; }
.stat-val { font: 800 36px var(--titulo); color: var(--oro); min-width: 120px; text-align: right; display: inline-block; }
.stat-val.pop { animation: pop .6s var(--elastic); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
.bar { position: relative; height: 22px; border-radius: 11px; background: rgba(255,255,255,.09); overflow: hidden; }
.bar .fill {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #7c3aed, #c084fc 60%, #f472b6);
  transition: transform 1.8s var(--ease);
}
.bar.go .fill { transform: scaleX(var(--p, 1)); }
.bar .fill.inf { background: linear-gradient(90deg, #f472b6, #fbbf24, #c084fc, #f472b6); }
.bar .gleam {
  position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  transform: translateX(-120%); opacity: 0;
}
.bar.go .gleam { animation: gleam 2.6s var(--ease) infinite; animation-delay: var(--gd, 1s); opacity: 1; }
@keyframes gleam { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(520%); } }
.stats-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.origin { display: flex; align-items: center; justify-content: center; margin-top: 18px; font: 800 36px var(--titulo); color: var(--lila); white-space: nowrap; }
.stats-foot .btn { transform-origin: 100% 50%; }
.origin svg { width: 46px; height: 46px; margin-right: 14px; }

/* ----- Mapa ----- */
.map-head { text-align: center; }
.map-svg { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; pointer-events: none; }
.node { position: absolute; width: 180px; height: 180px; margin: -90px 0 0 -90px; --fs: 1.14; }
.node .disc {
  position: absolute; top: 0; left: 0; width: 180px; height: 180px; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 30%, #b18cff 0%, #7c3aed 55%, #4c1d95 100%);
  border: 4px solid rgba(255,255,255,.35);
  overflow: hidden;
}
.node .num { font: 800 84px/1 var(--titulo); color: #fff; }
.node .disc svg.ico { width: 96px; height: 96px; }
.node.locked .disc { background: radial-gradient(circle at 35% 30%, #3b2470 0%, #22104a 70%); border-color: rgba(192,132,252,.25); }
.node.locked .num { opacity: .25; }
.node .lock { position: absolute; left: 50%; top: 50%; width: 92px; height: 104px; margin: -56px 0 0 -46px; z-index: 2; transition: opacity .5s var(--ease), transform .7s var(--elastic); }
.node .lock .shackle { transition: transform .5s var(--elastic); transform-origin: 70px 40px; }
.node.unlocking .lock .shackle { transform: translateY(-16px) rotate(30deg); }
.node.unlocking .lock { transform: scale(1.25); }
.node.open .lock { opacity: 0; transform: scale(1.8); }
.node:not(.locked):not(.unlocking) .lock { display: none; }
.node .check {
  position: absolute; right: -6px; top: -6px; width: 64px; height: 64px; z-index: 3; border-radius: 50%;
  background: linear-gradient(135deg, #fde68a, #fbbf24); border: 3px solid #fff;
  display: none; align-items: center; justify-content: center;
}
.node.done .check { display: flex; }
.node .check svg { width: 36px; height: 36px; }
.node .pulse {
  position: absolute; top: -6px; left: -6px; width: 192px; height: 192px; border-radius: 50%;
  border: 4px solid #f0abfc; opacity: 0; pointer-events: none;
}
.node.current .pulse { animation: ringPulse 1.9s ease-out infinite; }
@keyframes ringPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
.node .label {
  position: absolute; left: 50%; top: 196px; width: 340px; margin-left: -170px; text-align: center; z-index: 2;
}
.node .label small { display: block; font: 700 30px var(--cuerpo); color: var(--violeta-b); text-transform: uppercase; letter-spacing: .08em; }
.node .label b { display: block; font: 800 38px var(--titulo); color: #fff; }
.node.locked .label b { color: rgba(233,213,255,.45); }
.node.final .disc { background: radial-gradient(circle at 35% 30%, #fbcfe8 0%, #ec4899 55%, #9d174d 100%); }
.node.final.locked .disc { background: radial-gradient(circle at 35% 30%, #3b2470 0%, #22104a 70%); }
.node.final.locked .disc svg.ico { opacity: .2; }

/* ----- Nivel 1 ----- */
.l1-card { position: absolute; left: 96px; top: 84px; width: 920px; padding: 40px 56px; }
.l1-card .txt { margin-bottom: 14px; font-size: 36px; }
.l1-scene { position: absolute; right: 0; bottom: 0; width: 1100px; height: 1080px; pointer-events: none; }
.moon {
  position: absolute; right: 230px; top: 110px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,240,252,.95) 0%, rgba(233,213,255,.85) 28%, rgba(192,132,252,.25) 52%, rgba(192,132,252,0) 70%);
  animation: glowBreath 5s ease-in-out infinite;
}
@keyframes glowBreath { 0%, 100% { opacity: .75; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
.monument { position: absolute; right: 40px; bottom: 210px; width: 857px; height: 600px; }
.monument svg { width: 100%; height: 100%; display: block; }
.river { position: absolute; left: -1000px; right: 0; bottom: 0; height: 250px; overflow: hidden;
  background: linear-gradient(180deg, #4c1d95 0%, #2e1065 45%, #1a0b3d 100%); }
.wave { position: absolute; left: 0; width: 6000px; height: 60px; animation: waveMove 16s linear infinite; }
.wave svg { width: 100%; height: 100%; display: block; }
.wave.w1 { top: 10px; opacity: .55; }
.wave.w2 { top: 80px; opacity: .35; animation-duration: 22s; animation-direction: reverse; }
.wave.w3 { top: 150px; opacity: .25; animation-duration: 28s; }
@keyframes waveMove { from { transform: translateX(0); } to { transform: translateX(-1000px); } }
.l1-badge { display: flex; align-items: center; margin: 14px 0 22px; }
.l1-badge .chip { font-size: 32px; text-transform: none; letter-spacing: 0; }
.l1-badge svg { width: 70px; height: 70px; margin-right: 18px; }

/* ----- Nivel 2 ----- */
.lv-head { text-align: center; }
.lv-head .chip { margin-bottom: 10px; }
.mem-row { display: flex; justify-content: center; margin-top: 30px; }
.mem { width: 470px; height: 380px; margin: 0 30px; --fs: 1.06; perspective: 1800px; }
.mem .flip-inner { position: relative; z-index: 1; width: 100%; height: 100%; transition: transform 1s var(--ease); transform-style: preserve-3d; }
.mem.flipped .flip-inner { transform: rotateY(180deg); }
.mem .side {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 24px; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.mem .back {
  background: linear-gradient(150deg, #6d28d9 0%, #3b0f7a 60%, #2a0a5c 100%);
  border: 3px solid rgba(233,213,255,.45);
}
.mem .back .pattern { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .18; }
.mem .back .q { position: relative; font: 800 170px/1 var(--titulo); color: #fff; }
.mem .back .n { position: relative; font: 800 36px var(--titulo); color: var(--lila); margin-top: 10px; }
.mem .front { transform: rotateY(180deg); background: linear-gradient(160deg, #3b1580, #1d0a45); border: 3px solid #f0abfc; padding: 0 0 26px; justify-content: flex-start; }
.mem .front .ph { width: 100%; height: 200px; overflow: hidden; background: #2d1060; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.mem .front .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.mem .front .ph svg { width: 170px; height: 170px; }
.mem .front .mtxt { font: 800 38px/1.25 var(--titulo); padding: 0 30px; color: #fff; }
.mem-msg { text-align: center; margin-top: 26px; font: 800 46px/1.25 var(--titulo); min-height: 116px; padding: 0 60px; }
.lv-foot { position: absolute; left: 0; right: 0; bottom: 140px; text-align: center; }

/* ----- Nivel 3 ----- */
.mama-card { width: 820px; margin: 22px auto 0; padding: 18px 34px; display: flex; align-items: center; border-color: rgba(251,191,36,.7); }
.mama-card .av { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; flex: none; margin-right: 30px; border: 4px solid #fbbf24; background: #2d1060; }
.mama-card .av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.mama-card .av svg { width: 100%; height: 100%; display: block; }
.mama-card .nm { font: 800 60px/1.05 var(--titulo); }
.mama-card .rl { font: 800 34px var(--titulo); color: var(--oro); display: flex; align-items: center; }
.mama-card .rl svg { width: 40px; height: 40px; margin-right: 10px; }
.team-row { display: flex; justify-content: center; margin-top: 24px; }
.mate { width: 350px; height: 290px; margin: 0 18px; padding: 22px 16px; text-align: center; overflow: hidden; }
.mate .portrait { position: relative; width: 140px; height: 140px; margin: 0 auto 10px; }
.mate .portrait > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.mate .sil { transition: opacity .5s var(--ease); }
.mate .real { opacity: 0; transform: scale(.3); transition: opacity .5s var(--ease), transform .9s var(--elastic); }
.mate.unlocked .sil { opacity: 0; }
.mate.unlocked .real { opacity: 1; transform: none; }
.mate .portrait svg { width: 100%; height: 100%; display: block; }
.mate .mn { font: 800 40px/1.1 var(--titulo); }
.mate .mr { font-size: 30px; line-height: 1.15; color: var(--lila); font-weight: 700; }
.mate .heart { position: absolute; right: 18px; top: 18px; width: 54px; height: 54px; opacity: 0; transform: scale(0); transition: opacity .4s, transform .8s var(--elastic); }
.mate.unlocked .heart { opacity: 1; transform: none; }
.mate.unlocked .heart svg { animation: beat 1.8s ease-in-out infinite; }
.mate.unlocked { border-color: rgba(244,114,182,.75); }
.mate.locked .mn { color: rgba(233,213,255,.4); }
.team-msg { text-align: center; margin-top: 18px; font: 800 48px var(--titulo); min-height: 66px; }

/* ----- Nivel 4 ----- */
.joke-card { width: 1380px; margin: 30px 0 0 0; padding: 40px 60px 44px; text-align: center; min-height: 420px; }
.joke-count { font: 800 32px var(--titulo); color: var(--violeta-b); text-transform: uppercase; letter-spacing: .08em; }
.joke-q { font: 800 56px/1.25 var(--titulo); margin: 16px 0 24px; }
.joke-a { font: 800 66px/1.2 var(--titulo); min-height: 90px; }
.drum-zone { position: absolute; right: 110px; top: 360px; width: 260px; height: 260px; }
.drum-zone svg { width: 100%; height: 100%; }
.drum.hit { animation: drumHit .5s var(--ease); }
@keyframes drumHit { 0% { transform: none; } 20% { transform: translateY(10px) scale(1.06, .94); } 100% { transform: none; } }
.badum {
  position: absolute; left: 50%; top: -40px; width: 420px; margin-left: -210px; text-align: center;
  font: 800 52px var(--titulo); color: var(--oro); transform: scale(0) rotate(-12deg); opacity: 0;
}
.badum.show { animation: badum 1.7s var(--elastic) forwards; }
@keyframes badum { 0% { transform: scale(0) rotate(-12deg); opacity: 0; } 25% { transform: scale(1.15) rotate(-6deg); opacity: 1; } 75% { transform: scale(1) rotate(-6deg); opacity: 1; } 100% { transform: scale(1) rotate(-6deg); opacity: 0; } }
.meter-wrap { width: 1380px; margin: 30px 0 0 0; }
.meter-top { display: flex; justify-content: space-between; font: 800 36px var(--titulo); margin-bottom: 10px; }
.meter-top .mv { color: var(--oro); }
.meter { height: 40px; border-radius: 20px; }
.meter .fill { transition: transform .9s var(--ease); background: linear-gradient(90deg, #7c3aed, #f472b6 60%, #fbbf24); }

/* ----- Nivel 5 ----- */
.dots { display: flex; justify-content: center; margin-top: 18px; }
.dots i { width: 26px; height: 26px; border-radius: 50%; margin: 0 10px; background: rgba(233,213,255,.2); border: 2px solid rgba(233,213,255,.4); transition: transform .5s var(--elastic); }
.dots i.cur { background: #c084fc; transform: scale(1.35); border-color: #fff; }
.dots i.ok { background: #fbbf24; border-color: #fff3c4; }
.q-card { width: 1500px; margin: 26px auto 0; padding: 34px 50px; text-align: center; }
.q-num { font: 800 32px var(--titulo); color: var(--violeta-b); text-transform: uppercase; letter-spacing: .08em; }
.q-text { font: 800 64px/1.2 var(--titulo); margin-top: 8px; }
.opts { width: 1500px; margin: 44px auto 0; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 34px 50px; }
.opt { --fs: 1.06; height: 140px; }
.opt .face2 {
  position: relative; z-index: 1; height: 100%; display: flex; align-items: center; padding: 0 34px;
  border-radius: 28px; background: linear-gradient(150deg, rgba(76,29,149,.95), rgba(33,11,74,.95));
  border: 3px solid rgba(192,132,252,.45);
}
.opt .letter {
  flex: none; width: 76px; height: 76px; border-radius: 50%; margin-right: 26px;
  display: flex; align-items: center; justify-content: center;
  font: 800 40px var(--titulo); background: rgba(192,132,252,.25); border: 2px solid rgba(233,213,255,.6);
}
.opt .otxt { font: 800 44px/1.15 var(--titulo); text-align: left; }
.opt.focused .face2 { border-color: #fff; }
.opt.right .face2 { background: linear-gradient(135deg, #fde68a, #fbbf24); border-color: #fff; color: #2a1400; }
.opt.right .letter { background: #fff; color: #b45309; }
.opt.wrong .face2 { animation: wiggle .55s var(--ease); }
.opt.off { opacity: .35; }
.opt.off .face2 { border-style: dashed; }
@keyframes wiggle { 0%, 100% { transform: none; } 20% { transform: translateX(-16px) rotate(-1deg); } 40% { transform: translateX(14px) rotate(1deg); } 60% { transform: translateX(-9px); } 80% { transform: translateX(5px); } }

/* ----- Final ----- */
.fin-title { position: absolute; left: 0; right: 0; top: 330px; text-align: center; transition: transform 1.3s var(--ease); }
.fin-title.up { transform: translateY(-290px) scale(.66); }
.fin-heart {
  position: absolute; left: 50%; top: 50%; width: 900px; height: 900px; margin: -500px 0 0 -450px;
  opacity: .22; pointer-events: none; transition: opacity 1.2s var(--ease);
}
.fin-heart svg { width: 100%; height: 100%; animation: beat 1.6s ease-in-out infinite; }
.fin-heart.dim { opacity: .08; }
.letter-card { position: absolute; left: 50%; top: 230px; width: 1420px; margin-left: -710px; padding: 40px 70px 34px; --fs: 1.0; }
.letter-card.focused::after { border-radius: 32px; border-color: rgba(233,213,255,.35); }
.letter-text { font: 700 42px/1.42 var(--cuerpo); color: #fff; text-shadow: 0 0 18px rgba(192,132,252,.55); }
.letter-text .first { font-family: var(--titulo); font-weight: 800; }
.firma { text-align: right; font: 800 50px var(--titulo); margin-top: 6px; min-height: 64px; }
.fin-foot { position: absolute; left: 0; right: 0; top: 826px; text-align: center; }

/* ----- Fotos ----- */
.slides { position: absolute; left: 96px; right: 96px; top: 54px; bottom: 250px; }
.slide {
  position: absolute; left: 50%; top: 50%; border-radius: 26px; overflow: hidden;
  border: 4px solid rgba(233,213,255,.6); box-shadow: 0 0 80px rgba(139,92,246,.45);
  opacity: 0; transition: opacity 1.4s var(--ease);
  background: #1a0b3d;
}
.slide.on { opacity: 1; }
.slide img { width: 100%; height: 100%; display: block; object-fit: cover; }
.slide.on img { animation: kb1 7s var(--ease) both; }
.slide.on.alt img { animation-name: kb2; }
@keyframes kb1 { from { transform: scale(1) translate(0,0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
@keyframes kb2 { from { transform: scale(1.14) translate(2%, 1%); } to { transform: scale(1) translate(0,0); } }
.ph-foot { position: absolute; left: 0; right: 0; bottom: 128px; text-align: center; }

/* ----- Cierre ----- */
.quote { font: 800 76px/1.25 var(--titulo); max-width: 1500px; margin: 0 auto; }
.quote-ref { font: 800 44px var(--titulo); color: var(--oro); margin: 30px 0 60px; }

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #blobs { display: none; }
}