/* Estilo de cómic de la referencia, páginas interiores, pase de hoja y controles. */

/* Ajustes de la portada: lo que no está animado queda en su estado final, así la hoja se puede copiar para girarla. */
.flyball, #wipe, #bolt, #boltcore { opacity: 0; }
#shine { background-position: -40% 0; }
#burst { position: absolute; left: 0; width: 900px; transform-origin: 50% 55%; }
#burst > svg:first-child { width: 100%; height: 100%; display: block; }
#burst .corona { position: absolute; left: 50%; top: -2%; width: 118px; margin-left: -59px; }
#title .t-back { color: #e04a00; }
#title .t-front { background: linear-gradient(180deg, #fff 22%, #fff27a 52%, #ffc21a 78%); -webkit-background-clip: text; background-clip: text; }
.plate-edge { background: linear-gradient(100deg, #fff, #ffd60a 30%, #ffd60a 74%, #fff) !important; }
.plate-core { background: #0a2aa8 !important; }
.plate.is-dana .plate-core { background: #5a14c8 !important; }
.t-back { color: #fff; }
.plate .t-back { color: #0b0418; }
.t-front { background: #fff; -webkit-background-clip: text; background-clip: text; }

/* Portada por capas de arte */
#cam { background: linear-gradient(100deg,#5c28d6,#3470e8); }
#pie { position: absolute; left: 0; right: 0; bottom: 0; background: repeating-conic-gradient(from 0deg at 50% 62%, #ff77d2 0 11deg, #9a3cf0 11deg 22deg); }
#arte { position: absolute; left: 0; top: 0; width: 1024px; height: 1536px; transform-origin: 0 0; }
.capa { position: absolute; left: 0; top: 0; width: 1024px; height: 1536px; }
#capa-f-regalo img { -webkit-mask-image: linear-gradient(180deg,#000 72%,transparent); mask-image: linear-gradient(180deg,#000 72%,transparent); }
.vivo { position: absolute; left: 0; top: 0; width: 1024px; height: 1536px; pointer-events: none; }
.haz { position: absolute; transform-origin: 50% 0; clip-path: polygon(44% 0,56% 0,100% 100%,0 100%); mix-blend-mode: screen; }
.haz.sube { transform-origin: 50% 100%; clip-path: polygon(44% 100%,56% 100%,100% 0,0 0); }
.foto-flash { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 12px 5px #fff; opacity: 0; }
.ventana { position: absolute; width: 8px; height: 12px; background: #fff6c2; box-shadow: 0 0 8px 2px #ffd98a; opacity: 0; }
.energia-mano { position: absolute; left: 30px; top: 500px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.75),rgba(240,130,255,.55) 34%,transparent 68%); mix-blend-mode: screen; }
.energia-grande { position: absolute; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle,rgba(255,255,255,.85),rgba(240,120,255,.6) 32%,transparent 68%); mix-blend-mode: screen; }
#rayo { position: absolute; left: 0; top: 0; width: 1024px; height: 1536px; overflow: visible; pointer-events: none; opacity: 0; }
#rayo path { fill: none; stroke: #fff; stroke-width: 7; stroke-linejoin: round; }
#estallido { position: absolute; left: 0; top: 0; width: 1024px; height: 1536px; opacity: 0; pointer-events: none; background: radial-gradient(circle at 50% 12%,#fff,rgba(255,220,130,.4) 42%,transparent 72%); }
.flyball { z-index: 3; }
.lente { position: absolute; will-change: transform; }
.neon { position: absolute; inset: 0; opacity: .3; background: radial-gradient(ellipse at 50% 74%,rgba(214,90,255,.62),transparent 60%); mix-blend-mode: screen; pointer-events: none; }
.ola { position: absolute; left: 0; width: 360px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent); mix-blend-mode: screen; }
.mesa { position: absolute; left: -10px; right: -10px; bottom: -10px; background: linear-gradient(180deg,#ffbf52,#e87f28); border-top: 9px solid #0b0418; }
.figura img { user-select: none; -webkit-user-drag: none; }

#ball-eugenio { opacity: 1; }
.estela { position: absolute; width: 300px; transform-origin: 100% 50%; }
.estela svg { width: 100%; display: block; }
#regalo { position: absolute; left: 50%; width: 500px; margin-left: -250px; overflow: hidden; }
#regalo svg { width: 100%; height: auto; display: block; }
.plate-word { font-size: 122px; }
.plate-core { padding: 8px 64px 4px; }
.plate-edge { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); padding: 9px; }
.plate-core { clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.plate .t-back { -webkit-text-stroke: 11px #0b0418; text-shadow: 4px 5px 0 #0b0418, 7px 8px 0 #0b0418; }

/* Hojas */
#hojas, .hoja { position: absolute; inset: 0; }
.hoja { background: #fff8e6; overflow: hidden; }
.oculta { visibility: hidden !important; pointer-events: none; }
.vineta { position: absolute; inset: 16px; overflow: hidden; border: 8px solid #0b0418; background: #2a0a7a; }
.mundo { position: absolute; inset: 0; will-change: transform; }
.fx, .textos { position: absolute; inset: 0; pointer-events: none; }
.lienzo { position: absolute; left: -40px; top: -40px; display: block; }
.figura { position: absolute; will-change: transform; filter: drop-shadow(0 14px 12px rgba(4,0,20,.45)); }
.figura svg { display: block; width: 100%; height: 100%; overflow: visible; }
.capa-tela { transform-box: fill-box; transform-origin: 50% 0; }
.balon { position: absolute; left: 0; top: 0; will-change: transform; }
.balon svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Rótulos y globos */
.cartel { position: absolute; margin: 0; padding: 14px 26px 10px; background: #ffd60a; border: 7px solid #0b0418; box-shadow: 9px 9px 0 #0b0418; font: 400 92px/.98 var(--display); letter-spacing: .03em; color: #0b0418; text-align: center; text-wrap: balance; transform: rotate(-1.6deg); }
.cartel.violeta { background: #fff; color: #5a14c8; }
.cartel.celeste { background: #fff; color: #0a2aa8; }
.fugaz { opacity: 0; }
.globo { position: absolute; margin: 0; padding: 22px 30px; background: #fff; border: 7px solid #0b0418; border-radius: 52px; font: 700 49px/1.14 "Comic Neue", "Comic Sans MS", "Trebuchet MS", sans-serif; color: #0b0418; text-align: center; text-wrap: balance; box-shadow: 6px 7px 0 rgba(11,4,24,.8); }
.globo::after { content: ""; position: absolute; bottom: -49px; width: 62px; height: 52px; background: #0b0418; }
.globo::before { content: ""; position: absolute; z-index: 1; bottom: -34px; width: 44px; height: 42px; background: #fff; }
.cola-izq::after { left: 92px; clip-path: polygon(0 0, 100% 0, 16% 100%); }
.cola-izq::before { left: 98px; clip-path: polygon(0 0, 100% 0, 14% 100%); }
.cola-der::after { right: 92px; clip-path: polygon(0 0, 100% 0, 84% 100%); }
.cola-der::before { right: 98px; clip-path: polygon(0 0, 100% 0, 86% 100%); }

.siete { position: absolute; width: 276px; height: 276px; display: grid; place-items: center; font: 400 266px/1 var(--display); color: #fff27a; -webkit-text-stroke: 12px #0b0418; paint-order: stroke fill; text-shadow: 7px 8px 0 #5a14c8; }
.siete::before { content: ""; position: absolute; z-index: -1; inset: 0; background: #d14cff; border: 7px solid #0b0418; clip-path: polygon(50% 0, 62% 18%, 84% 8%, 82% 32%, 100% 42%, 84% 58%, 96% 80%, 70% 78%, 58% 100%, 44% 82%, 20% 94%, 22% 70%, 0 62%, 16% 46%, 4% 22%, 30% 22%); }
.gol { position: absolute; left: 0; right: 0; margin: 0; display: grid; place-items: center; }
.gol svg { position: absolute; width: 900px; height: 560px; }
.gol b { position: relative; font: 400 158px/1 var(--display); color: #fff; -webkit-text-stroke: 14px #0b0418; paint-order: stroke fill; text-shadow: 8px 9px 0 #e01438; letter-spacing: .012em; white-space: nowrap; }
.orbe { position: absolute; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%; background: radial-gradient(circle, #fff 18%, #ff8bf1 42%, rgba(138,43,226,.6) 66%, transparent 72%); pointer-events: none; }
.alerta { position: absolute; left: 50%; width: 156px; margin-left: -78px; }
.flood { position: absolute; inset: 0; background: rgba(214,60,255,.55); opacity: 0; }
.luces { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,0) 58%); mix-blend-mode: screen; }
.calido { position: absolute; inset: 0; opacity: 0; background: linear-gradient(180deg, rgba(255,186,64,.26), rgba(255,120,60,.08)); }
.destello-luz { position: absolute; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; background: radial-gradient(circle, #fff, rgba(230,180,255,.7) 34%, transparent 70%); opacity: 0; }
.papelito { position: absolute; top: -40px; will-change: transform; }

/* Gran encuentro */
.fila { position: absolute; left: 0; right: 0; border-block: 7px solid #0b0418; }
.torta { position: absolute; }
.llama { transform-box: fill-box; transform-origin: 50% 100%; }
.frase-final { position: absolute; left: 34px; right: 34px; margin: 0; text-align: center; font: 400 90px/.98 var(--display); letter-spacing: .03em; color: #fff; -webkit-text-stroke: 9px #0b0418; paint-order: stroke fill; text-shadow: 5px 6px 0 #0b0418; text-wrap: balance; }
.frase-final.primera { font-size: 64px; color: #ffd60a; }
.nombres { position: absolute; left: 30px; right: 30px; margin: 0; text-align: center; font: 700 50px/1.1 "Baloo 2", "Trebuchet MS", sans-serif; letter-spacing: .05em; color: #0b0418; background: #ffd60a; border: 6px solid #0b0418; padding: 8px 8px 2px; }


/* Pase de hoja: tiras anidadas que se curvan como papel */
#giro { position: absolute; inset: 0; perspective: 2300px; perspective-origin: 50% 50%; pointer-events: none; visibility: hidden; }
#giro.activo { visibility: visible; }
.tira { position: absolute; top: 0; height: 100%; transform-style: preserve-3d; transform-origin: 0 50%; will-change: transform; }
.tira-cara, .tira-dorso { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tira-dorso { transform: rotateY(180deg); background: #efe2c4; }
.tira-sombra { position: absolute; inset: 0; background: linear-gradient(90deg, #0b0418, #2a0a4a); opacity: 0; }
.tira-brillo { position: absolute; inset: 0; background: rgba(255,255,255,.5); opacity: 0; }
.clon { position: absolute; top: 0; left: 0; width: 900px; height: 100%; visibility: visible !important; }
.clon, .clon * { will-change: auto !important; filter: none !important; animation: none !important; }
#sombra-giro { position: absolute; top: 0; bottom: 0; width: 420px; left: 0; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(5,0,18,.75), rgba(5,0,18,0)); }
#puente, #calida { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#calida { background: radial-gradient(circle at 50% 66%, #fff, #ffe2a0 45%, #ffc05c); opacity: 0; }

/* Controles del lector */
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.ui-icono { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); width: 48px; height: 48px; padding: 9px; pointer-events: auto; color: #0b0418; background: #fff; border: 3px solid #0b0418; border-radius: 50%; box-shadow: 2px 3px 0 #0b0418; cursor: pointer; touch-action: manipulation; }
.ui-icono svg { display: block; width: 100%; height: 100%; }
#btn-atras { left: max(10px, env(safe-area-inset-left, 0px)); }
#btn-sonido { right: max(10px, env(safe-area-inset-right, 0px)); }
#btn-sonido .tacha { display: none; }
#btn-sonido[aria-pressed="false"] .tacha { display: block; }
#btn-sonido[aria-pressed="false"] .ondas { display: none; }
.ui-icono:focus-visible, #btn-seguir:focus-visible { outline: 4px solid #e5127d; outline-offset: 2px; }
.ui-icono[hidden], #btn-seguir[hidden] { display: none; }
#btn-seguir { position: absolute; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 8px 18px; white-space: nowrap; pointer-events: auto; color: #0b0418; background: #fff; border: 3px solid #0b0418; box-shadow: 3px 4px 0 #0b0418; font: 700 19px/1 "Baloo 2", "Trebuchet MS", sans-serif; cursor: pointer; touch-action: manipulation; animation: aparecer .32s ease-out both; }
#btn-seguir svg { width: 24px; height: 24px; }
#seguir-txt:empty { display: none; }
@keyframes aparecer { from { opacity: 0; transform: translate(-50%, 8px); } }
#stage { touch-action: pan-y; cursor: pointer; }
.manga svg { display: block; }
@media (prefers-reduced-motion: reduce) { #btn-seguir { animation: none; } }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#capa-f-regalo img { -webkit-mask-image: none; mask-image: none; }
#btn-seguir.esquina { left: auto; right: max(14px, env(safe-area-inset-right, 0px)); transform: none; animation: none; width: 54px; height: 54px; padding: 0; justify-content: center; border-radius: 50%; }
#techo { position: absolute; left: 0; right: 0; top: 0; background: radial-gradient(rgba(255,255,255,.22) 22%, transparent 24%) 0 0 / 15px 15px, repeating-conic-gradient(from 0deg at 50% 118%, rgba(11,4,24,.28) 0 1.2deg, transparent 1.2deg 13deg), linear-gradient(100deg, #6c2fe0, #7a36ea 50%, #3f7fec); }
#capa-f-dana img { -webkit-mask-image: linear-gradient(180deg, transparent, #000 90px); mask-image: linear-gradient(180deg, transparent, #000 90px); }
.pie-regalo { clip-path: polygon(0 1426px, 1024px 1280px, 1024px 100%, 0 100%); background: radial-gradient(rgba(255,255,255,.3) 22%, transparent 24%) 0 0 / 15px 15px, repeating-conic-gradient(from 0deg at 52% 86%, #ff8fdc 0 11deg, #a43ff2 11deg 22deg); }
.pie-regalo::before { content: ""; position: absolute; left: -10px; width: 1044px; top: 1421px; height: 14px; background: #fff; border-block: 5px solid #0b0418; transform-origin: 0 50%; transform: rotate(-8.1deg); }

/* Puerta de entrada: el toque que habilita el sonido */
#abrir { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 0; padding: 24px; cursor: pointer; color: #fff; background: radial-gradient(circle at 50% 44%, #6a1fd0, #2a0a7a 46%, #0c0330 100%); touch-action: manipulation; }
#abrir::before { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 50% 44%, rgba(255,214,90,.1) 0 7deg, transparent 7deg 18deg), radial-gradient(rgba(255,255,255,.1) 22%, transparent 24%) 0 0 / 11px 11px; }
#abrir > * { position: relative; }
#abrir img { width: min(66vw, 320px); height: auto; filter: drop-shadow(0 18px 26px rgba(0,0,0,.5)); }
.abrir-para { margin-top: 16px; font: 700 clamp(19px, 5.4vw, 24px)/1.15 "Baloo 2", "Trebuchet MS", sans-serif; }
.abrir-txt { font: 400 clamp(46px, 13.5vw, 64px)/1 var(--display); letter-spacing: .03em; color: #ffd60a; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; text-shadow: 3px 4px 0 var(--ink); }
.abrir-son { font: 500 clamp(15px, 4.2vw, 18px)/1.2 "Baloo 2", "Trebuchet MS", sans-serif; opacity: .85; }
#abrir:focus-visible { outline: 4px solid #ffd60a; outline-offset: -8px; }

/* Escenas */
.pantalla-titanes { position: absolute; padding: 0; border: 7px solid #0b0418; outline: 5px solid #d9a6ff; outline-offset: -12px; box-shadow: 8px 9px 0 rgba(11,4,24,.85); transform: rotate(-3deg); overflow: hidden; }
.pantalla-titanes img { display: block; width: 100%; height: auto; }
.mitad-cuartel { -webkit-mask-image: linear-gradient(104deg, #000 34%, transparent 62%); mask-image: linear-gradient(104deg, #000 34%, transparent 62%); }
.sombra-escena { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,6,70,.72), rgba(20,6,70,.12) 34%, transparent 60%); }
.aura-dana { position: absolute; width: 660px; height: 660px; border-radius: 50%; background: radial-gradient(circle, rgba(220,110,255,.68), rgba(138,43,226,.3) 46%, transparent 70%); mix-blend-mode: screen; pointer-events: none; }
.aura-dana.chica { width: 420px; height: 420px; }

/* Invitación final: tarjeta de gala sobre el estadio */
.fondo-final { position: absolute; inset: 0; background: #12063f; overflow: hidden; }
.fondo-final img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; filter: saturate(.85) blur(1.5px); transform: scale(1.04); }
.fondo-final::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,8,92,.9), rgba(52,16,140,.68) 32%, rgba(16,6,66,.84) 62%, #0b0432 100%); }
.fondo-final::before { content: ""; position: absolute; inset: 20px; z-index: 1; border: 3px solid #e7bc55; outline: 1px solid rgba(231,188,85,.55); outline-offset: -11px; pointer-events: none; }
.papelito.fino { border: 0; border-radius: 2px; }
.final { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding-block: 112px 74px; padding-inline: 58px; display: flex; flex-direction: column; align-items: center; touch-action: pan-y; }
.final > * { flex: none; }
.final h2 { margin: 0; font: 400 150px/.94 var(--display); letter-spacing: .025em; text-align: center; text-wrap: balance; color: transparent; background: linear-gradient(180deg, #fff6c9 8%, #ffd85c 44%, #e79a12 74%, #ffe08a 96%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 4px 0 #0b0418) drop-shadow(0 12px 14px rgba(0,0,0,.45)); }
.final .sub { margin: 14px 0 0; font: 700 44px/1.16 "Baloo 2", "Trebuchet MS", sans-serif; color: #fff; text-align: center; text-wrap: balance; }
.trio-final { position: relative; width: 784px; margin-top: 2px; height: 430px; }
.trio-final .figura { filter: none; }
.boleto { position: relative; z-index: 2; width: 100%; margin-top: -92px; padding: 24px 34px 26px; display: flex; flex-direction: column; align-items: center; color: #1b0d4a; background: linear-gradient(180deg, #fffdf5, #fff4d6); border: 5px solid #d3a23a; border-radius: 14px; box-shadow: 0 0 0 3px #fff4d6, 0 0 0 6px #b98522, 0 26px 40px rgba(0,0,0,.5); }
.b-dia { font: 700 40px/1 "Baloo 2", "Trebuchet MS", sans-serif; letter-spacing: .24em; margin-right: -.24em; color: #5a14c8; }
.b-num { font: 400 170px/.92 var(--display); letter-spacing: .02em; color: #2a0a7a; }
.b-mes { font: 700 39px/1.1 "Baloo 2", "Trebuchet MS", sans-serif; letter-spacing: .08em; text-align: center; color: #5a14c8; }
.b-hora { margin-top: 14px; padding: 10px 34px 4px; font: 400 66px/1 var(--display); letter-spacing: .05em; color: #ffe08a; background: #2a0a7a; border-radius: 10px; }
.b-corte { position: relative; align-self: stretch; margin: 24px -34px 20px; border-top: 4px dashed #cfa64c; }
.b-corte::before, .b-corte::after { content: ""; position: absolute; top: -21px; width: 38px; height: 38px; border-radius: 50%; background: #1a0a52; border: 5px solid #d3a23a; }
.b-corte::before { left: -24px; clip-path: inset(0 0 0 50%); }
.b-corte::after { right: -24px; clip-path: inset(0 50% 0 0); }
.b-lugar { font: 400 92px/1 var(--display); letter-spacing: .035em; color: #d9440f; text-align: center; }
.b-dir { margin-top: 6px; font: 500 37px/1.22 "Baloo 2", "Trebuchet MS", sans-serif; color: #1b0d4a; text-align: center; }
.ir { position: relative; z-index: 2; width: 100%; margin-top: 28px; min-height: 124px; display: flex; align-items: center; justify-content: center; gap: 14px; overflow: hidden; border-radius: 14px; border: 5px solid #0b0418; background: linear-gradient(180deg, #ffe58a, #ffc21a 52%, #eb980c); color: #1b0d4a; font: 400 70px/1 var(--display); letter-spacing: .05em; text-decoration: none; box-shadow: 0 7px 0 #8a5704, 0 16px 26px rgba(0,0,0,.45); transition: transform .08s ease-out, box-shadow .08s ease-out; }
.ir::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); animation: brillo 3.4s ease-in-out 1.6s 2; }
@keyframes brillo { to { left: 120%; } }
.ir:active { transform: translateY(6px); box-shadow: 0 1px 0 #8a5704, 0 6px 12px rgba(0,0,0,.45); }
.ir:focus-visible { outline: 6px solid #fff; outline-offset: 5px; }
.emotivo { margin: 30px 0 0; font: 700 44px/1.2 "Baloo 2", "Trebuchet MS", sans-serif; color: #fff; text-align: center; text-wrap: balance; }
.final.compacta { padding-block: 96px 56px; }
.final.compacta h2 { font-size: 108px; }
.final.compacta .sub { font-size: 38px; margin-top: 8px; }
.final.compacta .trio-final { height: 324px; }
.final.compacta .boleto { margin-top: -74px; padding-block: 16px 18px; }
.final.compacta .b-num { font-size: 118px; }
.final.compacta .b-hora { margin-top: 8px; font-size: 52px; }
.final.compacta .b-corte { margin-block: 16px 12px; }
.final.compacta .b-lugar { font-size: 74px; }
.final.compacta .ir { min-height: 104px; margin-top: 22px; font-size: 60px; }
.final.compacta .emotivo { margin-top: 20px; font-size: 38px; }
@media (prefers-reduced-motion: reduce) { .ir::after { animation: none; display: none; } }
.mesa { background: linear-gradient(180deg, #5a1cc0, #1f0a5e 70%); border-top: 8px solid #e7bc55; box-shadow: 0 -4px 0 #0b0418; }
.nombres { background: linear-gradient(180deg, #ffe58a, #ffc21a 55%, #eb980c); border: 5px solid #0b0418; border-radius: 10px; color: #1b0d4a; }

/* Integración: el decorado queda un paso atrás y todos comparten la misma luz */
.pintura { filter: blur(1.6px) saturate(.9) brightness(.86); }
.figura { filter: drop-shadow(0 0 2px rgba(11,4,24,.9)) drop-shadow(0 16px 22px rgba(6,0,28,.6)); }
.luz-grupo { position: absolute; left: -60px; right: -60px; height: 860px; background: radial-gradient(ellipse at 50% 56%, rgba(255,214,120,.72), rgba(255,170,90,.26) 42%, transparent 68%); mix-blend-mode: screen; pointer-events: none; }
.luz-sobre { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, rgba(255,150,50,.18) 66%, rgba(20,4,70,.6) 78%), radial-gradient(ellipse at 50% 46%, transparent 52%, rgba(10,2,44,.5)); pointer-events: none; }
.mesa { background: linear-gradient(180deg, #4c16aa, #1a0852 62%); border-top: 8px solid #e7bc55; box-shadow: 0 -5px 0 #0b0418, 0 -36px 42px rgba(6,0,28,.72); }
.frase-final { font-size: 86px; }
.nombres { left: 110px; right: 110px; font-size: 44px; padding: 6px 8px 0; }

/* Encuentro por viñetas */
.arte-encuentro { position: absolute; left: 0; top: 0; width: 1024px; height: 1536px; transform-origin: 0 0; }
.velo-encuentro { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,8,92,.94), rgba(52,16,140,.78) 26%, rgba(26,8,92,.5)); }
.barrido-luz { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(100deg, transparent 20%, rgba(214,90,255,.75) 46%, rgba(255,226,140,.7) 56%, transparent 80%); }
.mesa { bottom: -10px; }
.frase-final { font-size: 74px; line-height: 1; }
.frase-final.primera { font-size: 54px; }
.nombres { left: 130px; right: 130px; font-size: 40px; }
#btn-seguir.derecha { left: auto; right: max(10px, env(safe-area-inset-right, 0px)); transform: none; animation: none; }

/* Trío de la invitación, entero */
.trio-final { height: 408px; }
.boleto { margin-top: -22px; }
.final.compacta .trio-final { height: 326px; }
.final.compacta .boleto { margin-top: -18px; }
.trio-final .pantalla-titanes { transform: rotate(-2deg); box-shadow: 4px 5px 0 rgba(11,4,24,.8); border-width: 5px; outline: 0; }

/* Confirmación */
.rsvp { position: relative; z-index: 2; width: 100%; margin-top: 34px; padding: 26px 30px 30px; display: grid; gap: 14px; color: #fff; background: rgba(13,5,52,.86); border: 4px solid #e7bc55; border-radius: 14px; box-shadow: 0 20px 34px rgba(0,0,0,.45); }
.rsvp h3 { margin: 0; text-align: center; font: 400 58px/1 var(--display); letter-spacing: .04em; color: #ffd85c; }
.r-nombre, .rsvp legend { font: 700 40px/1.2 "Baloo 2", "Trebuchet MS", sans-serif; color: #fff; padding: 0; }
.rsvp input[type="text"] { width: 100%; min-height: 92px; padding: 10px 24px; font: 500 44px/1.1 "Baloo 2", "Trebuchet MS", sans-serif; color: #1b0d4a; background: #fffdf5; border: 4px solid #e7bc55; border-radius: 10px; touch-action: manipulation; }
.rsvp input[type="text"]::placeholder { color: #6d6390; }
.rsvp input[aria-invalid="true"] { border-color: #ff7a6b; }
.rsvp fieldset { margin: 6px 0 0; padding: 0; border: 0; display: grid; gap: 12px; }
.rsvp legend { margin-bottom: 10px; }
.r-op { display: flex; align-items: center; gap: 20px; min-height: 96px; padding: 12px 22px; font: 700 40px/1.14 "Baloo 2", "Trebuchet MS", sans-serif; color: #1b0d4a; background: #fff4d6; border: 4px solid #b98522; border-radius: 10px; cursor: pointer; touch-action: manipulation; transition: background .12s ease-out, border-color .12s ease-out; }
.r-op input { flex: none; width: 46px; height: 46px; margin: 0; accent-color: #5a14c8; }
.r-op:has(input:checked) { background: #ffd85c; border-color: #fff; box-shadow: 0 0 0 4px #5a14c8; }
.r-error { margin: 0; font: 700 36px/1.2 "Baloo 2", "Trebuchet MS", sans-serif; color: #ffb3a8; }
.r-enviar { min-height: 118px; margin-top: 8px; padding: 10px; border: 5px solid #0b0418; border-radius: 12px; cursor: pointer; font: 400 60px/1 var(--display); letter-spacing: .04em; color: #fff; background: linear-gradient(180deg, #38d66b, #1fa24d); box-shadow: 0 7px 0 #0e6a2f, 0 14px 22px rgba(0,0,0,.4); -webkit-text-stroke: 4px #0b3d1c; paint-order: stroke fill; touch-action: manipulation; transition: transform .08s ease-out, box-shadow .08s ease-out; }
.r-enviar:active { transform: translateY(6px); box-shadow: 0 1px 0 #0e6a2f, 0 5px 10px rgba(0,0,0,.4); }
.r-enviar:focus-visible, .rsvp input:focus-visible { outline: 6px solid #fff; outline-offset: 3px; }

/* Torta ilustrada: las llamas son piezas aparte para encenderse de a una */
.torta { filter: drop-shadow(0 16px 16px rgba(4,0,24,.55)); }
.torta-base { display: block; width: 100%; height: auto; }
.torta .llama { position: absolute; height: auto; transform-origin: 50% 100%; }

/* Marco común de gala en todas las páginas */
.hoja { background: #0b0432; }
.vineta { inset: 14px; border: 4px solid #e7bc55; outline: 3px solid #0b0418; outline-offset: -7px; }

/* Presentación de jugador: como una transmisión deportiva */
.capa-jugador { position: absolute; inset: 0; pointer-events: none; }
.velo-jugador { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,12,60,.62), rgba(4,12,60,.18) 34%, rgba(3,8,40,.08) 58%, rgba(3,8,40,.72)); pointer-events: none; }
.velo-jugador.calido { background: linear-gradient(180deg, rgba(40,10,60,.5), rgba(40,10,60,.1) 34%, rgba(16,6,30,.08) 58%, rgba(16,6,30,.72)); }
.foco-jugador { position: absolute; width: 1120px; height: 1120px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, rgba(170,225,255,.78), rgba(90,170,255,.3) 38%, transparent 68%); mix-blend-mode: screen; }
.foco-jugador.dorado { background: radial-gradient(circle, rgba(255,226,150,.85), rgba(255,160,70,.34) 38%, transparent 68%); }
.rayos-foco { position: absolute; inset: -10%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.2) 0 4deg, transparent 4deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 18%, transparent 62%); }
.nombre-gigante { position: absolute; left: 0; right: 0; text-align: center; white-space: nowrap; font: 400 232px/1 var(--display); letter-spacing: .02em; color: transparent; }
.nombre-gigante span { background: linear-gradient(180deg, #fffbe6 6%, #ffe08a 42%, #e79a12 78%, #fff0b8); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 5px 0 #0b0418) drop-shadow(0 16px 20px rgba(0,0,0,.6)); opacity: .95; }
.figura.astro { filter: drop-shadow(0 0 3px rgba(11,4,24,.95)) drop-shadow(0 0 16px rgba(190,230,255,.85)) drop-shadow(0 22px 26px rgba(4,0,24,.65)); }
.chispas-oro { position: absolute; inset: 0; overflow: hidden; }
.chispa-oro { position: absolute; border-radius: 50%; background: #ffe08a; box-shadow: 0 0 8px 2px rgba(255,205,90,.9); opacity: 0; }
.barra-jugador { position: absolute; left: -30px; right: -30px; min-height: 164px; display: flex; align-items: center; padding: 14px 70px 12px 80px; overflow: hidden; color: #fff; transform: skewX(-8deg); background: linear-gradient(100deg, #061a66, #0c3bb0 58%, #0a2a86); border-top: 6px solid #e7bc55; border-bottom: 6px solid #e7bc55; box-shadow: 0 -8px 26px rgba(0,0,0,.5), 0 14px 26px rgba(0,0,0,.5); }
.barra-jugador.dorado { background: linear-gradient(100deg, #3a0a78, #5a14c8 58%, #2a0a7a); }
.barra-jugador i { position: absolute; left: 0; top: 0; bottom: 0; width: 66px; background: repeating-linear-gradient(90deg, #6ec6f2 0 16px, #fff 16px 32px); box-shadow: 4px 0 0 #e7bc55; }
.barra-jugador p { position: relative; margin: 0; width: 100%; transform: skewX(8deg); text-align: center; font: 400 74px/1 var(--display); letter-spacing: .035em; text-wrap: balance; color: #fff; -webkit-text-stroke: 5px #0b0418; paint-order: stroke fill; }
.barra-jugador.dorado p { font-size: 118px; color: #ffe08a; letter-spacing: .08em; }

/* Ticket más bajo: fecha en una sola línea visual; los niños ganan altura */
.trio-final { height: 466px; }
.final.compacta .trio-final { height: 386px; }
.boleto { padding-block: 18px 22px; }
.b-fecha { display: flex; align-items: center; justify-content: center; gap: 28px; width: 100%; }
.b-num { font-size: 164px; line-height: .9; }
.b-resto { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.b-dia { font-size: 40px; letter-spacing: .2em; margin-right: 0; }
.b-mes { font-size: 34px; letter-spacing: .04em; text-align: left; white-space: nowrap; }
.b-hora { margin-top: 4px; padding: 8px 24px 3px; font-size: 52px; }
.b-corte { margin-block: 16px 14px; }
.b-lugar { font-size: 82px; }
.final.compacta .boleto { padding-block: 12px 16px; }
.final.compacta .b-num { font-size: 136px; }
.final.compacta .b-dia { font-size: 34px; }
.final.compacta .b-mes { font-size: 31px; }
.final.compacta .b-hora { margin-top: 2px; font-size: 44px; }
.final.compacta .b-corte { margin-block: 12px 10px; }
.final.compacta .b-lugar { font-size: 68px; }