/* ══════════════════════════════════════════════════════════════
   ACADEMIA DE MAGIA · INVITACIÓN ASTRAL
   Khal Calloway Studio © 2026 · Da Vinci Mode 🔥
   ══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=Cinzel:wght@400;700;900&family=Great+Vibes&family=IM+Fell+English:ital@0;1&display=swap');

:root {
    --pergamino: #F2E8C9;
    --pergamino-s: #E8D9A8;
    --pergamino-o: #D4C080;
    --tinta: #1A1008;
    --tinta-s: #3A2818;
    --oscuro: #030108;
    --oro: #C8980A;
    --oro-v: #E8B820;
    --fuego: #C84010;
    --plata-base: #8B9B7A;
    --plata-clara: #B0BFA0;
    --plata-oscura: #4A5440;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
#pantalla-desbloqueo, .sobre-escena, .lacre, .sobre-label { user-select: none; -webkit-user-select: none; }
html { scroll-behavior: smooth; }

body {
    font-family: 'IM Fell English', serif;
    background: var(--oscuro);
    color: var(--pergamino);
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
}
body.desbloqueado { overflow-y: auto; overflow-x: hidden; }

/* ════════════════════════════════════════════
   0. PANTALLA DE DESBLOQUEO
════════════════════════════════════════════ */
#pantalla-desbloqueo {
    position: fixed; inset: 0; z-index: 10000;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    cursor: pointer; overflow: hidden;
}

/* Fondo cinemático del castillo */
.desbloqueo-bg {
    position: absolute; inset: 0; z-index: 0;
    background: url('Fotos/CastilloH1.jpg') center/cover no-repeat;
    filter: brightness(.35) saturate(.7);
    animation: kb-lento 30s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes kb-lento {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.08) translate(-1%, -1%); }
}

/* Overlay atmosférico */
.desbloqueo-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(to top, rgba(3,1,8,1) 0%, rgba(3,1,8,.6) 30%, transparent 60%),
        radial-gradient(ellipse at 50% 20%, rgba(200,152,10,.06) 0%, transparent 50%);
}

/* Niebla baja */
.niebla-baja {
    position: absolute; bottom: 0; left: 0; right: 0; height: 35%; z-index: 2;
    background: linear-gradient(to top, rgba(180,200,220,.08) 0%, transparent 100%);
    animation: niebla-drift 12s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes niebla-drift {
    0% { transform: translateX(-3%) scaleY(1); opacity: .6; }
    100% { transform: translateX(3%) scaleY(1.1); opacity: .9; }
}

/* Partículas de polvo estelar en el desbloqueo */
#polvo-desbloqueo {
    position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden;
}
.polvo-p {
    position: absolute; border-radius: 50%;
    background: rgba(232, 184, 32, .7);
    animation: polvo-flotar var(--dur) var(--del) ease-in-out infinite;
    opacity: 0;
}
@keyframes polvo-flotar {
    0% { opacity: 0; transform: translateY(0) scale(.5); }
    20% { opacity: .8; }
    50% { opacity: .4; transform: translateY(var(--dy)) scale(1); }
    80% { opacity: .2; }
    100% { opacity: 0; transform: translateY(calc(var(--dy) * 2)) scale(.3); }
}

/* Contenido del desbloqueo — CENTRADO VERTICAL + HORIZONTAL */
.desbloqueo-contenido {
    position: relative; z-index: 4;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    animation: aparecer-suave 2s ease forwards;
}
@keyframes aparecer-suave {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}



.desbloqueo-titulo {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(.75em, 2.2vw, 1em);
    letter-spacing: 6px; text-transform: uppercase;
    color: #F5D878;
    margin-bottom: 24px;
    text-shadow: 0 0 20px rgba(232,184,32,.6), 0 2px 10px rgba(0,0,0,.9);
}

.varita-hint {
    font-family: 'Cinzel', serif;
    color: rgba(255,230,160,.8);
    font-size: clamp(.65em, 1.6vw, .78em);
    letter-spacing: 4px; text-transform: uppercase;
    animation: parpadeo-hint 2.5s ease-in-out infinite;
    text-shadow: 0 0 15px rgba(255,225,100,.5), 0 2px 8px rgba(0,0,0,.8);
}
@keyframes parpadeo-hint {
    0%, 100% { opacity: .3; }
    50% { opacity: 1; }
}

/* Fade out del desbloqueo */
#pantalla-desbloqueo.oculto {
    opacity: 0; pointer-events: none;
    transition: opacity 1.5s ease;
}

/* ════════════════════════════════════════════
   1. SOBRE MÁGICO — ACTO PRINCIPAL
════════════════════════════════════════════ */
#sobre-wrapper {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    background: radial-gradient(ellipse at 50% 40%, rgba(8,5,20,.9) 0%, #000 70%);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 1.2s ease, visibility 1.2s ease;
}
#sobre-wrapper.activo { opacity: 1; visibility: visible; pointer-events: all; }
#sobre-wrapper.saliendo { opacity: 0; pointer-events: none; transition: opacity 1.5s ease; }

/* Polvo estelar del sobre */
#polvo-sobre { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.dust-s {
    position: absolute; width: var(--ds, 2px); height: var(--ds, 2px); border-radius: 50%;
    background: rgba(232,184,32,.6);
    box-shadow: 0 0 calc(var(--ds, 2px) * 2) rgba(232,184,32,.4);
    animation: dust-s-float var(--dd, 8s) var(--ddelay, 0s) ease-in-out infinite;
    opacity: 0;
}
@keyframes dust-s-float {
    0% { opacity: 0; transform: translate(0,0) scale(.5); }
    15% { opacity: .7; }
    50% { opacity: .4; transform: translate(var(--dx, 30px), var(--dy, -40px)) scale(1); }
    85% { opacity: .2; }
    100% { opacity: 0; transform: translate(var(--dx2, -20px), var(--dy2, 30px)) scale(.3); }
}

/* Escena del sobre (flotar) */
.sobre-escena {
    position: relative; z-index: 5;
    animation: flotar-sobre 3.5s ease-in-out infinite;
    cursor: default;
}
@keyframes flotar-sobre {
    0%   { transform: translateY(0)    rotate(-0.8deg); }
    10%  { transform: translateY(-5px)  rotate(-0.3deg); }
    25%  { transform: translateY(-12px) rotate(0.4deg);  }
    40%  { transform: translateY(-15px) rotate(1deg);    }
    55%  { transform: translateY(-11px) rotate(0.6deg);  }
    70%  { transform: translateY(-7px)  rotate(-0.2deg); }
    85%  { transform: translateY(-3px)  rotate(-0.6deg); }
    100% { transform: translateY(0)     rotate(-0.8deg); }
}

.sobre {
    width: clamp(280px, 72vw, 420px);
    position: relative;
    filter:
        drop-shadow(0 20px 50px rgba(0,0,0,.8))
        drop-shadow(0 0 30px rgba(200,152,10,.1))
        drop-shadow(0 8px 20px rgba(0,0,0,.6));
}

/* Base del sobre */
.sobre-base {
    position: relative; z-index: 2;
    height: clamp(165px, 30vw, 220px);
    background: linear-gradient(160deg, #F2E8C9 0%, #E8D9A8 25%, #E0D098 50%, #D4C080 80%, #C8B870 100%);
    border-radius: 3px 3px 7px 7px;
    overflow: hidden;
    box-shadow:
        inset 0 -4px 12px rgba(0,0,0,.1),
        inset 0 2px 0 rgba(255,255,255,.25),
        inset 3px 0 8px rgba(0,0,0,.04),
        inset -3px 0 8px rgba(0,0,0,.04);
}
/* Textura fibra de papel */
.sobre-base::before {
    content: ''; position: absolute; inset: 0;
    background:
        repeating-linear-gradient(0deg, rgba(120,80,20,.025) 0, rgba(120,80,20,.025) 1px, transparent 1px, transparent 5px),
        repeating-linear-gradient(90deg, rgba(120,80,20,.015) 0, rgba(120,80,20,.015) 1px, transparent 1px, transparent 7px),
        repeating-linear-gradient(45deg, transparent 0, transparent 10px, rgba(120,80,20,.01) 10px, rgba(120,80,20,.01) 11px);
    z-index: 1;
}
/* Dirección del sobre */
.sobre-base::after {
    content: 'Sr. Mago Invitado';
    position: absolute; top: 38%; left: 50%; transform: translate(-50%,-50%);
    font-family: 'IM Fell English', serif; font-style: italic;
    font-size: clamp(.55em, 1.4vw, .75em); color: rgba(42,24,8,.3);
    letter-spacing: 2px; z-index: 2; white-space: nowrap;
}

/* Escudo impreso como tinta */
.sobre-escudo-img {
    position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);
    width: clamp(70px, 18vw, 100px); height: auto;
    opacity: .18; mix-blend-mode: multiply;
    filter: sepia(40%) contrast(1.4) brightness(.9);
    z-index: 2; pointer-events: none;
}

/* Solapa superior */
.sobre-solapa {
    width: 100%; height: 0;
    border-left: clamp(140px, 36vw, 210px) solid transparent;
    border-right: clamp(140px, 36vw, 210px) solid transparent;
    border-top: clamp(82px, 15vw, 110px) solid #C8B060;
    transform-origin: top center;
    transition: transform 1s cubic-bezier(.4,0,.15,1), z-index 0s 0s;
    position: absolute; top: 0; left: 0; z-index: 5;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,.15));
}
.sobre-solapa::after {
    content: ''; position: absolute;
    top: clamp(-110px, -15vw, -82px); left: 50%; transform: translateX(-50%);
    width: 0; height: 0;
    border-left: clamp(128px, 33vw, 195px) solid transparent;
    border-right: clamp(128px, 33vw, 195px) solid transparent;
    border-top: clamp(72px, 13vw, 98px) solid #D8C470;
}

/* Triángulos inferiores */
.sobre-triangulos {
    position: absolute; bottom: 0; left: 0; right: 0;
    height: clamp(95px, 17vw, 130px); overflow: hidden; z-index: 4;
}
.sobre-triangulos::before, .sobre-triangulos::after {
    content: ''; position: absolute; bottom: 0; width: 50%; height: 100%;
}
.sobre-triangulos::before { left: 0; background: linear-gradient(to top right, #C8B060 0%, transparent 52%); }
.sobre-triangulos::after { right: 0; background: linear-gradient(to top left, #C8B060 0%, transparent 52%); }

/* Carta de aceptación */
.sobre-carta {
    position: absolute; left: 6%; right: 6%; bottom: 0; height: 82%;
    border-radius: 4px 4px 0 0; z-index: 3;
    transition: transform 1.4s cubic-bezier(.22,1,.36,1);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: clamp(14px, 4vw, 30px) clamp(12px, 3.5vw, 26px);
    overflow: hidden;
    /* Pergamino envejecido premium */
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255,248,215,.95) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 80%, rgba(210,185,130,.6) 0%, transparent 50%),
        linear-gradient(160deg, #FBF4DC 0%, #F2E8C0 30%, #EAD9A8 60%, #E2CC90 100%);
    box-shadow:
        0 -6px 30px rgba(0,0,0,.2),
        inset 0 0 40px rgba(120,80,20,.08),
        inset 0 0 0 1px rgba(180,140,60,.15);
}
/* Textura fibra + veladura aged */
.sobre-carta::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        repeating-linear-gradient(0deg,   rgba(80,50,10,.022) 0, rgba(80,50,10,.022) 1px, transparent 1px, transparent 18px),
        repeating-linear-gradient(90deg,  rgba(80,50,10,.014) 0, rgba(80,50,10,.014) 1px, transparent 1px, transparent 22px),
        repeating-linear-gradient(143deg, rgba(80,50,10,.008) 0, rgba(80,50,10,.008) 1px, transparent 1px, transparent 30px);
}
/* Quemado de bordes + viñeta aged */
.sobre-carta::after {
    content: ''; position: absolute; inset: -2px; pointer-events: none; z-index: 4;
    background:
        radial-gradient(ellipse at   0%   0%, rgba(90,50, 5,.55) 0%, transparent 22%),
        radial-gradient(ellipse at 100%   0%, rgba(90,50, 5,.50) 0%, transparent 20%),
        radial-gradient(ellipse at   0% 100%, rgba(90,50, 5,.45) 0%, transparent 20%),
        radial-gradient(ellipse at 100% 100%, rgba(90,50, 5,.55) 0%, transparent 22%),
        radial-gradient(ellipse at  50%  50%, transparent 55%, rgba(60,35, 5,.12) 100%);
}

.carta-contenido {
    position: relative; z-index: 2; text-align: center; color: var(--tinta); width: 100%;
    opacity: 0; transition: opacity .8s ease .6s;
}
.sobre-escena.abierto .carta-contenido { opacity: 1; }
.carta-escudo { font-size: clamp(2em, 6vw, 2.8em); margin-bottom: 6px; filter: drop-shadow(0 2px 8px rgba(180,80,0,.35)); }
.carta-colegio {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(.65em, 2vw, .85em); color: var(--tinta);
    text-align: center; letter-spacing: clamp(2px, .5vw, 4px); line-height: 1.4;
    margin-bottom: 3px; text-transform: uppercase;
}
.carta-director {
    font-family: 'IM Fell English', serif; font-style: italic;
    font-size: clamp(.55em, 1.5vw, .68em); color: var(--tinta-s);
    letter-spacing: 1px; margin-bottom: clamp(8px, 2vw, 14px);
}
.carta-linea { border: none; border-top: 1px solid rgba(42,24,8,.2); width: 80%; margin: 0 auto clamp(8px, 2vw, 14px); }
.carta-cuerpo {
    font-family: 'Great Vibes', cursive;
    font-size: clamp(1em, 3vw, 1.5em); color: var(--tinta);
    line-height: 1.35; margin-bottom: clamp(6px, 1.5vw, 10px); max-width: 92%;
    text-shadow: 0 1px 3px rgba(80,40,0,.15);
}
.carta-firma {
    font-family: 'Cinzel', serif;
    font-size: clamp(.55em, 1.4vw, .68em); color: var(--tinta-s);
    letter-spacing: 2px; font-weight: 700;
}

/* ════════════════════════════════════════════
   SELLO DE CERA (LACRE) — Sobre la zona de cierre
════════════════════════════════════════════ */
.lacre {
    position: absolute;
    /* Se posiciona en la punta de la solapa (donde la V se cierra) */
    top: clamp(82px, 15vw, 110px); left: 50%;
    transform: translate(-50%, -15%);
    width: clamp(60px, 14vw, 85px); height: clamp(60px, 14vw, 85px);
    cursor: pointer; z-index: 6;
    transition: transform .3s ease, filter .3s ease;
}
.lacre img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.7)) drop-shadow(0 0 8px rgba(180,50,10,.3));
    transition: filter .3s ease;
}
.lacre:hover img {
    filter:
        drop-shadow(0 5px 12px rgba(0,0,0,.7))
        drop-shadow(0 0 20px rgba(232,184,32,.5))
        drop-shadow(0 0 40px rgba(200,64,16,.3));
}
/* Glow pulsante alrededor del sello */
.lacre::before {
    content: ''; position: absolute; inset: -8px; border-radius: 50%;
    background: radial-gradient(circle, rgba(200,64,16,.15) 40%, transparent 70%);
    animation: lacre-pulso 2.5s ease-in-out infinite;
    z-index: -1;
}
@keyframes lacre-pulso {
    0%, 100% { opacity: .4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* Label "Toca el sello" */
.sobre-label {
    position: absolute; bottom: -50px; left: 0; width: 100%; text-align: center; z-index: 6;
    font-family: 'IM Fell English', serif; font-style: italic;
    font-size: clamp(.7em, 1.8vw, .85em); letter-spacing: 3px;
    color: rgba(232,184,32,.9);
    text-shadow: 0 0 12px rgba(232,184,32,.5), 0 2px 8px rgba(0,0,0,.9);
    animation: parpadeo-hint 2.5s ease-in-out infinite;
    transition: opacity .5s;
}

/* Estado: sello roto */
.sobre-escena.abierto .lacre {
    opacity: 0; transform: translate(-50%, -15%) scale(2.5) rotate(45deg);
    pointer-events: none; transition: all .6s cubic-bezier(.4,0,1,.5);
    filter: blur(4px);
}
/* Solapa abierta (pasa a z-index 1 hacia atrás) */
.sobre-escena.abierto .sobre-solapa { 
    transform: rotateX(180deg); 
    z-index: 1; 
    transition: transform 1s cubic-bezier(.4,0,.15,1), z-index 0s .4s; 
}
/* Triángulos bajan detrás para no tapar el boleto */
.sobre-escena.abierto .sobre-triangulos { z-index: 2; }
/* Carta sube con z-index alto para estar siempre encima del boleto */
.sobre-escena.abierto .sobre-carta {
    transform: translateY(-90%); transition-delay: .5s;
    z-index: 6;
}
/* Label REALMENTE desaparece — visibility evita que manche el boleto */
.sobre-escena.abierto .sobre-label { opacity: 0; visibility: hidden; pointer-events: none; }

/* ════════════════════════════════════════════
   BOLETO 9¾ — METAL GRABADO PREMIUM
   Fiel a la referencia: pátina plata-verde
════════════════════════════════════════════ */
.boleto-9 {
    position: absolute; left: 4%; right: 4%; bottom: 8px;
    height: clamp(145px, 26vw, 200px);
    background: linear-gradient(135deg,
        #B0BFA0 0%, #98A88A 12%, #8B9B7A 25%, #7A8A6A 38%,
        #6B7B5C 50%, #7A8A6A 62%, #8B9B7A 75%, #A0B090 88%, #B8C8A8 100%);
    border-radius: 5px;
    border: 2.5px solid var(--plata-oscura);
    box-shadow:
        0 12px 35px rgba(0,0,0,.8), 0 4px 15px rgba(0,0,0,.5),
        inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.3),
        inset 2px 0 4px rgba(255,255,255,.08), inset -2px 0 4px rgba(0,0,0,.12);
    padding: 5px;
    opacity: 1; pointer-events: none;
    transform: translateY(0);
    z-index: 1;
}
/* Textura metálica brushed */
.boleto-9::before {
    content: ''; position: absolute; inset: 0; border-radius: 3px;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.02) 0, rgba(0,0,0,.02) 1px, transparent 1px, transparent 4px);
    z-index: 1; pointer-events: none;
}

/* Borde ornamental interior doble */
.boleto-borde {
    width: 100%; height: 100%; position: relative;
    border: 2.5px solid var(--plata-oscura);
    border-image: repeating-linear-gradient(90deg, #5A6A50 0, #5A6A50 4px, #7A8A6A 4px, #7A8A6A 8px) 3;
    display: flex; overflow: hidden;
}
.boleto-borde::before {
    content: ''; position: absolute; inset: 3px;
    border: 1.5px solid rgba(74,84,64,.5);
    pointer-events: none; z-index: 2;
}
/* Reflejo metálico */
.boleto-borde::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 40%, transparent 60%, rgba(255,255,255,.05) 100%);
    pointer-events: none; z-index: 3;
}

/* Info del boleto */
.boleto-info {
    width: 65%; color: #2A3025; font-family: 'Cinzel', serif;
    text-align: center; position: relative; z-index: 4;
    padding: clamp(6px, 1.5vw, 14px) clamp(8px, 2vw, 16px);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.txt-metal {
    text-shadow: 1px 1px 0 rgba(255,255,255,.35), -1px -1px 0 rgba(0,0,0,.4), 0 0 2px rgba(0,0,0,.1);
}
.boleto-top {
    display: flex; justify-content: space-between; width: 100%;
    font-size: clamp(.42em, 1.1vw, .55em); font-weight: 900; letter-spacing: 1px;
    border-bottom: 1px solid var(--plata-oscura); padding-bottom: 3px; margin-bottom: clamp(4px, 1vw, 8px);
}
.boleto-oneway {
    font-size: clamp(.4em, .9vw, .5em); letter-spacing: 2px; color: #3A4A30; margin-bottom: 2px;
}
.boleto-destino {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(1.2em, 3.5vw, 1.8em); font-weight: 900;
    line-height: 1; color: #1A2418; margin: clamp(2px, .5vw, 6px) 0;
}
.boleto-destino span {
    display: block; font-family: 'Cinzel', serif;
    font-size: .45em; letter-spacing: 3px; font-weight: 400; color: #3A4A30; margin: 2px 0;
}
.boleto-bottom {
    font-size: clamp(.32em, .8vw, .42em); letter-spacing: 1px; color: #4A5A40;
    border-top: 1px solid var(--plata-oscura); padding-top: 3px; margin-top: clamp(2px, .5vw, 6px);
    line-height: 1.3;
}

/* Textos laterales "Platform 9¾" */
.boleto-lat {
    position: absolute; top: 50%; font-size: clamp(.4em, 1vw, .52em);
    font-weight: 900; letter-spacing: 2px; white-space: nowrap;
    color: #3A4A30; writing-mode: vertical-rl;
}
.boleto-lat.izq { left: clamp(2px, .5vw, 8px); transform: translateY(-50%) rotate(180deg); }
.boleto-lat.der { right: clamp(2px, .5vw, 8px); transform: translateY(-50%); }

/* Ornamentos esquinas */
.boleto-esq {
    position: absolute; width: clamp(16px, 4vw, 24px); height: clamp(16px, 4vw, 24px);
    z-index: 5; pointer-events: none;
}
.boleto-esq::before, .boleto-esq::after {
    content: ''; position: absolute; border-radius: 50%; border: 1.5px solid #5A6A50;
}
.boleto-esq::before { inset: 0; }
.boleto-esq::after { inset: 3px; }
.boleto-esq.tl { top: 6px; left: 6px; }
.boleto-esq.tr { top: 6px; right: 6px; }
.boleto-esq.bl { bottom: 6px; left: 6px; }
.boleto-esq.br { bottom: 6px; right: 6px; }

/* Espacio montaje fotográfico */
.boleto-foto {
    width: 35%; height: 100%; position: relative; z-index: 4;
    background: #0A0E08;
    border-left: 2px solid var(--plata-oscura);
    box-shadow: inset 0 4px 12px rgba(0,0,0,.7), inset 0 -2px 8px rgba(0,0,0,.5);
    overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.boleto-foto img {
    width: 100%; height: 100%; object-fit: cover;
    filter: sepia(15%) contrast(1.15) brightness(.95);
}
.boleto-foto-label {
    position: absolute; bottom: 0; left: 0; right: 0;
    text-align: center; font-family: 'Cinzel', serif;
    font-size: clamp(.38em, .9vw, .5em); letter-spacing: 2px;
    color: var(--plata-clara); background: rgba(10,14,8,.85);
    padding: 3px 0; text-transform: uppercase;
}

/* Animación cinematográfica del boleto — trayectoria mejorada */
.sobre-escena.abierto .boleto-9 {
    z-index: 4; /* Por encima de triángulos(2) pero detrás de la carta(6) */
    animation: boleto-cine 11s 4.5s forwards;
}
@keyframes boleto-cine {
    0%   { transform: translateY(0)      scale(1)    rotate(0deg);    opacity: 1; }
    20%  { transform: translateY(-320px) scale(1.05) rotate(-1.5deg); opacity: 1; }
    38%  { transform: translateY(120px)  scale(1.35) rotate(.5deg);   opacity: 1; }
    52%  { transform: translateY(114px)  scale(1.35) rotate(1deg);    opacity: 1; }
    68%  { transform: translateY(120px)  scale(1.35) rotate(.3deg);   opacity: 1; }
    82%  { transform: translateY(80px)   scale(1.45) rotate(-3deg);   opacity: .85; }
    100% { transform: translateY(-150vh) scale(1.9)  rotate(-18deg);  opacity: 0; }
}

/* Chispas del sello */
#sello-chispas { position: fixed; inset: 0; z-index: 99999; pointer-events: none; overflow: hidden; }
.chispa {
    position: absolute; border-radius: 50%;
    background: var(--ch-color, var(--oro-v));
    box-shadow: 0 0 6px 2px var(--ch-color, rgba(232,184,32,.8));
    animation: chispa-volar var(--ch-dur, .8s) ease-out forwards;
    opacity: 0;
}
@keyframes chispa-volar {
    0% { opacity: 1; transform: translate(0,0) scale(1); }
    40% { opacity: .9; }
    100% { opacity: 0; transform: translate(var(--ch-tx), var(--ch-ty)) scale(0); }
}

/* Onda expansiva */
.shockwave {
    position: absolute; border-radius: 50%;
    border: 2px solid rgba(232,184,32,.7);
    animation: shockwave-exp .8s ease-out forwards;
    pointer-events: none; z-index: 9;
}
@keyframes shockwave-exp {
    0% { width: 0; height: 0; opacity: 1; border-width: 3px; }
    100% { width: 300px; height: 300px; opacity: 0; border-width: 0; margin-left: -150px; margin-top: -150px; }
}

/* ════════════════════════════════════════════
   TRANSICIÓN ACTO FINAL
════════════════════════════════════════════ */
#transicion-final {
    position: fixed; inset: 0; z-index: 10000;
    background: #000; opacity: 0; pointer-events: none;
    transition: opacity 1s ease;
}
#transicion-final.activo { opacity: 1; pointer-events: all; }
#transicion-final.saliendo { opacity: 0; transition: opacity 1.5s ease; }

/* ════════════════════════════════════════════
   CONTENIDO FINAL — POST SOBRE
════════════════════════════════════════════ */
#contenido-final {
    min-height: 100vh; min-height: 100svh;
    display: none; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 40px 20px; position: relative; z-index: 5;
    opacity: 0; transition: opacity 2s ease;
}
#contenido-final.visible {
    display: flex; opacity: 1;
}

.final-fondo {
    position: fixed; inset: 0; z-index: 0;
    background: url('Fotos/CastilloH1.jpg') center/cover no-repeat;
    filter: brightness(.15) saturate(.4) blur(2px);
}
.final-overlay {
    position: fixed; inset: 0; z-index: 1;
    background:
        linear-gradient(to bottom, rgba(3,1,8,.7) 0%, rgba(3,1,8,.4) 50%, rgba(3,1,8,.8) 100%),
        radial-gradient(ellipse at 50% 40%, rgba(200,152,10,.05) 0%, transparent 50%);
    pointer-events: none;
}

.final-titulo {
    font-family: 'Cinzel Decorative', serif;
    font-size: clamp(2.5em, 8vw, 4.5em);
    color: var(--oro-v);
    text-shadow: 0 0 30px rgba(200,152,10,.5), 2px 2px 4px #000;
    margin-bottom: 12px; line-height: 1.1;
    position: relative; z-index: 5;
    animation: titulo-reveal 2s ease forwards;
}
@keyframes titulo-reveal {
    from { opacity: 0; transform: translateY(30px); filter: blur(8px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.final-titulo .nombre-cursiva {
    display: block; font-family: 'Great Vibes', cursive;
    font-size: .6em; color: var(--pergamino); margin-top: 8px;
}

.final-texto {
    font-size: 1.15em; max-width: 550px; color: var(--pergamino-s);
    text-shadow: 0 2px 6px #000; line-height: 1.7;
    position: relative; z-index: 5;
    animation: titulo-reveal 2s .5s ease both;
    margin-bottom: 32px;
}

.final-desliza {
    font-family: 'Cinzel', serif;
    color: rgba(200,152,10,.85);
    font-size: .6em; letter-spacing: 5px; text-transform: uppercase;
    position: relative; z-index: 5;
    text-shadow: 0 0 12px rgba(200,152,10,.5), 0 2px 8px rgba(0,0,0,.9);
    animation: parpadeo-hint 2.5s ease-in-out infinite;
}

/* Velas flotantes CSS */
#velas-ambiente { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 3s; }
#velas-ambiente.activo { opacity: 1; }
.vela-f {
    position: absolute; width: 6px; background: rgba(255,236,179,.5); border-radius: 3px;
    box-shadow: 0 0 12px 2px rgba(255,193,7,.2);
    animation: oscilar-vela 6s ease-in-out infinite alternate;
}
.vela-f::before {
    content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    width: 5px; height: 10px; background: #ffca28; border-radius: 50% 50% 20% 20%;
    box-shadow: 0 0 8px 2px #ff9100, 0 -4px 12px rgba(255,200,50,.6);
    animation: llama-f .15s infinite alternate;
}
@keyframes oscilar-vela {
    0% { transform: rotate(-2deg) translateY(0); }
    100% { transform: rotate(2deg) translateY(-15px); }
}
@keyframes llama-f {
    0% { transform: translateX(-50%) scaleY(1) scaleX(1); }
    100% { transform: translateX(-50%) scaleY(1.15) scaleX(.9); }
}

/* ════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════ */
@media (max-width: 480px) {
    .sobre { width: clamp(260px, 85vw, 340px); }
    .sobre-base { height: clamp(145px, 35vw, 185px); }
    .boleto-9 { height: clamp(125px, 30vw, 165px); }
    .boleto-info { padding: 4px 6px; }
    .boleto-destino { font-size: clamp(1em, 5vw, 1.4em); }
    .lacre { width: clamp(50px, 13vw, 68px); height: clamp(50px, 13vw, 68px); }
    .sobre-label { bottom: -40px; font-size: .7em; }
    @keyframes boleto-cine {
        0%   { transform: translateY(0)      scale(1)    rotate(0deg);    opacity: 1; }
        20%  { transform: translateY(-260px) scale(1.05) rotate(-1.5deg); opacity: 1; }
        38%  { transform: translateY(90px)   scale(1.2)  rotate(.5deg);   opacity: 1; }
        52%  { transform: translateY(84px)   scale(1.2)  rotate(1deg);    opacity: 1; }
        68%  { transform: translateY(90px)   scale(1.2)  rotate(.3deg);   opacity: 1; }
        82%  { transform: translateY(60px)   scale(1.3)  rotate(-3deg);   opacity: .85; }
        100% { transform: translateY(-120vh) scale(1.6)  rotate(-15deg);  opacity: 0; }
    }
}