/* vip.css — cumple_18_vip · Dark & Gold (encapsulado, prefijo ej4-) */

::-webkit-scrollbar{width:0;background:transparent}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* auto en rueda del mouse; smooth solo en anclas del menú (JS) */
html{scroll-behavior:auto}

:root{
    --ej4-fondo:#0a0a0a;
    --ej4-caja:#141414;
    --ej4-hero-top:#050505;
    --ej4-hero-bottom:#111111;
    --ej4-titulo:#d4af37;
    --ej4-texto:#e0e0e0;
    --ej4-secundario:#888888;
    --ej4-oro:#d4af37;
    --ej4-oro-brillo:#f9e596;
    --ej4-font-titulo:'Cormorant Garamond',Georgia,serif;
    --ej4-font-texto:'Montserrat',system-ui,sans-serif;
}

.ej4-body{
    font-family:var(--ej4-font-texto);
    color:var(--ej4-texto);
    background-color:var(--ej4-fondo);
    overflow-x:hidden;
    -ms-overflow-style:none;
    scrollbar-width:none;
    line-height:1.55;
}
.ej4-body.ej4-bloqueada{overflow:hidden;height:100dvh;width:100vw}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.ej4-wrap{
    width:100%;
    max-width:480px;
    margin:0 auto;
    background-color:var(--ej4-fondo);
    position:relative;
    box-shadow:0 0 50px rgba(212,175,55,0.05);
    overflow-x:hidden;
    min-height:100dvh;
}

.ej4-divisor{
    border:none;
    height:1px;
    background:linear-gradient(to right,transparent,#333,transparent);
    margin:0 auto;
    width:70%;
}

/* ── LOADER ─────────────────────────────────────────────────── */
#ej4-loader{
    position:fixed;inset:0;
    background-color:#050505;
    z-index:99999;
    display:flex;flex-direction:column;
    justify-content:center;align-items:center;
    transition:opacity .8s ease-out,visibility .8s ease-out;
}
#ej4-loader.ej4-oculto{opacity:0;visibility:hidden;pointer-events:none}
.ej4-loader-spin{
    width:50px;height:50px;
    border:2px solid rgba(212,175,55,0.2);
    border-top-color:var(--ej4-oro);
    border-radius:50%;
    animation:ej4Girar 1s linear infinite;
}
.ej4-loader-txt{
    margin-top:20px;
    color:var(--ej4-oro);
    font-size:.8rem;
    letter-spacing:4px;
    text-transform:uppercase;
    animation:ej4Pulso 1.5s infinite;
}
@keyframes ej4Girar{to{transform:rotate(360deg)}}
@keyframes ej4Pulso{50%{opacity:.5}}

/* ══════════════════════════════════════════════════════════════
   CARÁTULA VIP — Escenario de Fiesta
   Capas (de atrás hacia adelante):
   1. Fondo degradado oscuro profundo
   2. Focos de escenario (conos de luz, balanceo lento)
   3. Líneas láser de colores
   4. Chispas / glitter flotante
   5. Halo dorado central
   6. Humo de escenario (base)
   7. Contenido: logo → subtítulo → nombre → botón
   ══════════════════════════════════════════════════════════════ */
#ej4-caratula{
    position:fixed;inset:0;
    z-index:10000;
    background:radial-gradient(ellipse at 50% 80%, #1a0a2e 0%, #0d0515 40%, #020005 100%);
    display:flex;justify-content:center;align-items:center;
    overflow:hidden;
    transition:opacity .9s,visibility .9s;
}
#ej4-caratula.ej4-oculto{opacity:0;visibility:hidden;pointer-events:none}

/* ── 1. Focos de escenario ───────────────────────────────────── */
.ej4-cara-focos{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.ej4-cara-foco{
    position:absolute;
    top:-5%;
    width:160px;
    height:72%;
    clip-path:polygon(38% 0%,62% 0%,100% 100%,0% 100%);
    transform-origin:50% 0%;
    filter:blur(8px);
    mix-blend-mode:screen;
}
.ej4-cara-foco--1{
    left:3%;
    background:linear-gradient(to bottom,rgba(255,215,60,.65) 0%,rgba(255,200,40,.12) 60%,transparent);
    animation:ej4FocoOscila 8s ease-in-out infinite;
}
.ej4-cara-foco--2{
    left:22%;
    background:linear-gradient(to bottom,rgba(210,100,255,.55) 0%,rgba(180,60,255,.08) 60%,transparent);
    animation:ej4FocoOscila 11s ease-in-out -3.5s infinite reverse;
}
.ej4-cara-foco--3{
    left:50%;transform-origin:50% 0%;margin-left:-80px;
    background:linear-gradient(to bottom,rgba(255,240,160,.45) 0%,rgba(255,220,80,.06) 60%,transparent);
    animation:ej4FocoOscila 14s ease-in-out -7s infinite;
}
.ej4-cara-foco--4{
    right:22%;
    background:linear-gradient(to bottom,rgba(100,180,255,.50) 0%,rgba(60,140,255,.08) 60%,transparent);
    animation:ej4FocoOscila 10s ease-in-out -1.5s infinite reverse;
}
.ej4-cara-foco--5{
    right:3%;
    background:linear-gradient(to bottom,rgba(255,215,60,.60) 0%,rgba(255,200,40,.10) 60%,transparent);
    animation:ej4FocoOscila 9s ease-in-out -4s infinite;
}
@keyframes ej4FocoOscila{
    0%,100%{transform:rotate(-12deg);opacity:.75}
    50%{transform:rotate(12deg);opacity:1}
}

/* Láseres eliminados */

/* ── 3. Chispas / glitter flotante ──────────────────────────── */
.ej4-cara-sparks{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.ej4-spark{
    position:absolute;
    border-radius:50%;
    background:radial-gradient(circle,#fff 0%,rgba(255,215,60,.9) 35%,transparent 70%);
    opacity:0;
    animation:ej4SparkSube var(--dur,4s) ease-in var(--delay,0s) infinite;
}
/* Posiciones y tamaños de las 14 chispas */
.ej4-spark--1 {left:7%;  bottom:0; width:5px; height:5px; --dur:5.5s; --delay:0s}
.ej4-spark--2 {left:14%; bottom:0; width:3px; height:3px; --dur:4.2s; --delay:1.3s}
.ej4-spark--3 {left:24%; bottom:0; width:7px; height:7px; --dur:6.1s; --delay:.6s;  background:radial-gradient(circle,#fff 0%,rgba(200,100,255,.9) 40%,transparent 70%)}
.ej4-spark--4 {left:33%; bottom:0; width:4px; height:4px; --dur:4.8s; --delay:2.1s}
.ej4-spark--5 {left:42%; bottom:0; width:6px; height:6px; --dur:5.9s; --delay:.3s}
.ej4-spark--6 {left:50%; bottom:0; width:3px; height:3px; --dur:3.7s; --delay:1.8s; background:radial-gradient(circle,#fff 0%,rgba(100,200,255,.9) 40%,transparent 70%)}
.ej4-spark--7 {left:59%; bottom:0; width:5px; height:5px; --dur:5.2s; --delay:.9s}
.ej4-spark--8 {left:68%; bottom:0; width:4px; height:4px; --dur:4.5s; --delay:2.7s; background:radial-gradient(circle,#fff 0%,rgba(255,100,200,.9) 40%,transparent 70%)}
.ej4-spark--9 {left:76%; bottom:0; width:6px; height:6px; --dur:6.3s; --delay:.4s}
.ej4-spark--10{left:83%; bottom:0; width:3px; height:3px; --dur:4.1s; --delay:1.1s}
.ej4-spark--11{left:90%; bottom:0; width:5px; height:5px; --dur:5.7s; --delay:2.4s; background:radial-gradient(circle,#fff 0%,rgba(200,100,255,.9) 40%,transparent 70%)}
.ej4-spark--12{left:19%; bottom:0; width:8px; height:8px; --dur:7.2s; --delay:3.1s}
.ej4-spark--13{left:55%; bottom:0; width:4px; height:4px; --dur:4.9s; --delay:1.6s; background:radial-gradient(circle,#fff 0%,rgba(255,200,80,.9) 40%,transparent 70%)}
.ej4-spark--14{left:71%; bottom:0; width:6px; height:6px; --dur:5.4s; --delay:.7s}
@keyframes ej4SparkSube{
    0%{transform:translateY(0) scale(.5) rotate(0deg);opacity:0}
    10%{opacity:.9}
    60%{opacity:.7}
    100%{transform:translateY(-95vh) scale(1.4) rotate(180deg);opacity:0}
}

/* ── 4. Halo dorado central ─────────────────────────────────── */
.ej4-cara-halo{
    position:absolute;
    top:50%;left:50%;
    width:340px;height:340px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(212,175,55,.18) 0%,rgba(212,175,55,.06) 45%,transparent 70%);
    filter:blur(18px);
    z-index:4;pointer-events:none;
    animation:ej4HaloPulsa 3s ease-in-out infinite;
}
@keyframes ej4HaloPulsa{
    0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.8}
    50%{transform:translate(-50%,-50%) scale(1.25);opacity:1}
}

/* ── 5. Humo / niebla de escenario ─────────────────────────── */
.ej4-cara-humo{
    position:absolute;bottom:0;left:0;
    width:100%;height:220px;
    background:linear-gradient(to top,rgba(30,10,60,.75) 0%,rgba(20,5,40,.4) 40%,transparent);
    pointer-events:none;z-index:5;
}
.ej4-cara-humo::before{
    content:'';
    position:absolute;inset:0;
    background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(212,175,55,.12),transparent);
    animation:ej4HumoRespira 5s ease-in-out infinite;
}
@keyframes ej4HumoRespira{
    0%,100%{opacity:.7;transform:scaleX(1)}
    50%{opacity:1;transform:scaleX(1.1)}
}

/* ── 6. Contenido carátula ──────────────────────────────────── */
.ej4-caratula-inner{
    position:relative;z-index:10;
    text-align:center;padding:24px 20px;
    display:flex;flex-direction:column;align-items:center;gap:0;
}

/* Línea 1: Logo */
.ej4-caratula-logo{
    max-width:140px;height:auto;
    margin:0 auto 28px;
    filter:drop-shadow(0 0 12px rgba(212,175,55,.5));
    animation:ej4EntraDown .8s ease-out .3s forwards;
    opacity:0;
}

/* Línea 2: Subtítulo "Mis 18 años" */
.ej4-caratula-pre{
    font-family:var(--ej4-font-titulo);
    font-style:italic;
    color:rgba(255,255,255,.75);
    font-size:1.25rem;letter-spacing:6px;
    text-transform:uppercase;
    margin-bottom:10px;
    text-shadow:0 0 20px rgba(212,175,55,.4);
    animation:ej4EntraDown .8s ease-out .9s forwards;
    opacity:0;
}

/* Línea 3: Nombre — shimmer dorado */
.ej4-caratula-nombre{
    font-family:var(--ej4-font-titulo);
    font-size:clamp(2.8rem,10vw,4rem);
    letter-spacing:8px;font-weight:600;
    display:inline-block;
    background:linear-gradient(90deg,#b8860b 0%,#f9e596 20%,#d4af37 40%,#fff8d6 55%,#d4af37 70%,#f9e596 85%,#b8860b 100%);
    background-size:250% auto;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 0 8px rgba(212,175,55,.35));
    margin-bottom:44px;
    animation:ej4EntraWow 1s ease-out 1.6s forwards,ej4NombreShimmer 4s linear 3s infinite;
    opacity:0;
}

/* Línea 4: Botón */
.ej4-btn-abrir{
    position:relative;overflow:hidden;
    background:linear-gradient(135deg,#b8860b,#d4af37,#f9e596,#d4af37,#b8860b);
    background-size:200% auto;
    color:#0a0005;
    padding:18px 48px;border-radius:50px;
    font-size:.9rem;letter-spacing:4px;font-weight:700;
    text-transform:uppercase;
    box-shadow:0 0 0 0 rgba(212,175,55,.5);
    animation:ej4EntraBtn .9s ease-out 2.5s forwards,ej4BtnShimmer 3s linear 3.5s infinite,ej4BtnGlow 2s ease-in-out 3.5s infinite;
    opacity:0;z-index:10;
}
/* Destello doble en el botón (CD Aero) */
.ej4-btn-abrir::before,.ej4-btn-abrir::after{
    content:'';
    position:absolute;top:-10%;
    width:30%;height:120%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
    transform:skewX(-22deg);
    animation:ej4BtnDestelloBefore 3s ease-in-out 3.8s infinite;
    pointer-events:none;
}
.ej4-btn-abrir::after{
    animation-delay:4s;
    opacity:.6;
}
.ej4-btn-abrir:hover{
    transform:scale(1.05) translateY(-2px);
    box-shadow:0 8px 30px rgba(212,175,55,.7);
}
@keyframes ej4NombreShimmer{to{background-position:250% center}}
@keyframes ej4BtnShimmer{to{background-position:200% center}}
@keyframes ej4BtnGlow{
    0%,100%{box-shadow:0 0 16px rgba(212,175,55,.4),0 4px 20px rgba(0,0,0,.6)}
    50%{box-shadow:0 0 36px rgba(212,175,55,.8),0 4px 30px rgba(0,0,0,.7),0 0 60px rgba(212,175,55,.25)}
}
@keyframes ej4BtnDestelloBefore{
    0%{left:-50%;opacity:.6}100%{left:140%;opacity:0}
}
@keyframes ej4EntraDown{
    0%{opacity:0;transform:translateY(-20px)}
    100%{opacity:1;transform:translateY(0)}
}
@keyframes ej4EntraWow{
    0%{opacity:0;transform:scale(1.35) translateY(10px)}
    100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes ej4EntraBtn{
    0%{opacity:0;transform:translateY(30px) scale(.9)}
    100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes ej4LatidoNombre{0%,100%{transform:scale(1)}50%{transform:scale(1.02)}}
@keyframes ej4ResplandorBtn{0%{box-shadow:0 4px 15px rgba(212,175,55,.3)}100%{box-shadow:0 4px 25px rgba(212,175,55,.8),0 0 10px rgba(212,175,55,.5)}}

#ej4-app{opacity:0;visibility:hidden;pointer-events:none}
#ej4-app.ej4-visible{opacity:1;visibility:visible;pointer-events:auto}
.ej4-body.ej4-app-abierta .ej4-glitter{display:none}

/* ── GLITTER ─────────────────────────────────────────────────── */
.ej4-glitter{
    position:fixed;top:0;left:0;
    width:100%;height:100dvh;
    pointer-events:none;z-index:10;overflow:hidden;
}
.ej4-glitter-point{
    position:absolute;border-radius:50%;
    opacity:0;filter:blur(1px);
    animation:ej4GlitterFloat 6s infinite ease-in-out;
}
.ej4-gp-oro{background-color:var(--ej4-oro);box-shadow:0 0 5px var(--ej4-oro-brillo)}
.ej4-gp-blanco{background-color:#fff;box-shadow:0 0 5px #fff}
.ej4-gp-ambar{background-color:#d9751e;box-shadow:0 0 5px #ffaa00}
.ej4-gp-1{left:10%;width:5px;height:5px;animation-duration:7s}
.ej4-gp-2{left:35%;width:7px;height:7px;animation-duration:6s;animation-delay:2s}
.ej4-gp-3{left:60%;width:4px;height:4px;animation-duration:8s;animation-delay:1s}
.ej4-gp-4{left:85%;width:6px;height:6px;animation-duration:5s;animation-delay:3s}
@keyframes ej4GlitterFloat{
    0%{transform:translateY(100vh) scale(.5);opacity:0}
    20%,80%{opacity:.6}
    100%{transform:translateY(-20vh) scale(1.2);opacity:0}
}

/* ── HERO ─────────────────────────────────────────────────────── */
.ej4-hero{
    position:relative;
    width:100%;
    min-height:100dvh;
    background:linear-gradient(to bottom,var(--ej4-hero-top) 0%,var(--ej4-hero-bottom) 100%);
    display:flex;flex-direction:column;
    justify-content:center;align-items:center;
    overflow:hidden;
}
.ej4-hero-fondo{
    position:absolute;inset:0;
    background-size:cover;
    background-position:center top;
    opacity:.35;z-index:0;
}
.ej4-hero-titulos{
    z-index:4;text-align:center;padding:0 16px;
    transform:translateY(12%);
}
.ej4-hero-pre{
    font-family:var(--ej4-font-titulo);
    color:var(--ej4-secundario);
    font-size:1.5rem;letter-spacing:5px;
    text-transform:uppercase;margin-bottom:10px;
}
.ej4-hero-nombre{
    font-family:var(--ej4-font-titulo);
    font-size:3.5rem;letter-spacing:6px;
    color:var(--ej4-titulo);font-weight:600;
    text-shadow:2px 2px 10px rgba(0,0,0,.8);
}
.ej4-hero-scroll{
    position:absolute;
    /* Ajustado para dejar espacio al reproductor debajo */
    bottom:calc(var(--ej4-repro-h, 80px) + 28px);
    text-align:center;z-index:4;
    font-size:1.5rem;color:var(--ej4-oro);
    animation:ej4Flotar 1.5s infinite ease-in-out;
}
@keyframes ej4Flotar{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ── Reproductor anclado al fondo del hero ───────────────────── */
.ej4-hero-repro-slot{
    position:absolute;
    bottom:0;left:0;right:0;
    z-index:5;
    /* El reproductor tiene su propio padding interno */
}
/* Atenúa el fondo del reproductor para que se integre al hero oscuro */
.ej4-hero-repro-slot .gala-repro-wrap,
.ej4-hero-repro-slot [class*="repro-"]{
    border-radius:0 !important;
    box-shadow:none !important;
}

/* ══════════════════════════════════════════════════════════════
   HERO — 4 ESFERAS DE DISCO (imagen + rotación de textura)
   Mismo patrón que esferas.php:
   background-repeat:repeat-x + animación de background-position
   = textura que rota sobre la esfera 3D
   ══════════════════════════════════════════════════════════════ */
.ej4-esfera-disco{
    position:absolute;border-radius:50%;z-index:2;
    background-image:var(--ej4-disco-esfera);
    background-repeat:repeat-x;
    background-size:auto 100%;
    box-shadow:
        inset -25px -25px 40px rgba(0,0,0,.8),
        inset 10px 10px 20px rgba(255,255,255,.5),
        0 15px 30px rgba(0,0,0,.5);
    animation:ej4EsferaRota 20s linear infinite, ej4EsferaLatido 20s linear infinite;
}
/* Grande — superior izquierda, tono original */
.ej4-esfera-disco--1{
    top:5%;left:-8%;
    width:170px;height:170px;
    animation-duration:20s,20s;
}
/* Mediana — superior derecha, tono plateado/azul */
.ej4-esfera-disco--2{
    top:18%;right:-5%;
    width:130px;height:130px;
    filter:hue-rotate(195deg) saturate(1.2) brightness(1.1);
    animation-duration:26s,26s;
    animation-delay:0s,-7s;
}
/* Pequeña — inferior izquierda, tono rosado */
.ej4-esfera-disco--3{
    bottom:22%;left:4%;
    width:95px;height:95px;
    filter:hue-rotate(310deg) saturate(1.4) brightness(1.1);
    animation-duration:16s,16s;
    animation-delay:0s,-3s;
}
/* Chica — inferior derecha, tono verde-dorado */
.ej4-esfera-disco--4{
    bottom:30%;right:7%;
    width:68px;height:68px;
    filter:hue-rotate(130deg) saturate(1.2) brightness(1.2);
    animation-duration:14s,14s;
    animation-delay:0s,-5s;
}
/* Rotación de textura (idéntico a rotarTex de esferas.php) */
@keyframes ej4EsferaRota{
    0%  {background-position:0 center}
    50% {background-position:100% center}
    100%{background-position:0 center}
}
/* Latido / pulso (idéntico a latidoFinal de esferas.php) */
@keyframes ej4EsferaLatido{
    0%,37%  {transform:scale(1);opacity:1}
    38%,39% {transform:scale(.92);opacity:0}
    40%,41% {transform:scale(1);opacity:1}
    42%,100%{transform:scale(1);opacity:1}
}

/* ── NAVEGACIÓN ──────────────────────────────────────────────── */
.ej4-nav{
    position:sticky;top:0;z-index:500;
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;
    background:rgba(10,10,10,.92);
    border-bottom:1px solid rgba(212,175,55,.2);
}
.ej4-nav-logo{max-height:36px}
.ej4-nav-toggle{
    background:transparent;
    border:1px solid var(--ej4-oro);
    color:var(--ej4-oro);
    border-radius:8px;padding:6px 10px;
}
.ej4-nav-menu{
    position:fixed;top:0;right:-100%;
    width:min(280px,85vw);height:100%;
    background:#111;
    padding:60px 24px;
    transition:right .3s;
    z-index:600;
    border-left:1px solid rgba(212,175,55,.3);
}
.ej4-nav-menu.ej4-abierto{right:0}
.ej4-nav-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.6);
    z-index:550;opacity:0;visibility:hidden;
    transition:.3s;
}
.ej4-nav-overlay.ej4-activo{opacity:1;visibility:visible}
.ej4-nav-link{
    display:block;color:var(--ej4-texto);
    padding:12px 0;letter-spacing:2px;
    text-transform:uppercase;font-size:.75rem;
    border-bottom:1px solid #222;
}
.ej4-nav-link:hover{color:var(--ej4-oro)}

.gala-repro-inflow{margin:12px 16px}

/* ── SECCIONES ───────────────────────────────────────────────── */
.ej4-seccion{
    padding:80px 20px;
    text-align:center;
    max-width:600px;margin:0 auto;
    position:relative;
}
.ej4-titulo-seccion{
    font-family:var(--ej4-font-titulo);
    color:var(--ej4-titulo);
    font-size:2.2rem;letter-spacing:3px;
    margin-bottom:30px;text-transform:uppercase;
}
.ej4-subtitulo{font-size:.9rem;color:var(--ej4-secundario);letter-spacing:2px;margin-bottom:16px}
.ej4-texto{font-size:1rem;line-height:1.6;color:var(--ej4-texto);margin-bottom:10px}
.ej4-frase-vip{
    font-family:var(--ej4-font-titulo);
    font-style:italic;font-size:1.4rem;
    margin-bottom:30px;color:var(--ej4-oro);
}
.ej4-marco{
    border:1px solid rgba(212,175,55,.3);
    padding:40px 20px;border-radius:15px;
    background-color:var(--ej4-caja);
    box-shadow:0 10px 30px rgba(0,0,0,.5);
    margin-top:20px;
}

/* ── BOTONES ─────────────────────────────────────────────────── */
.ej4-btn{
    display:inline-block;
    padding:12px 30px;
    border:1px solid var(--ej4-secundario);
    border-radius:30px;color:var(--ej4-texto);
    font-size:.75rem;letter-spacing:2px;
    text-transform:uppercase;margin-top:10px;
    transition:.3s;background:transparent;cursor:pointer;
}
.ej4-btn:hover{background-color:var(--ej4-oro);color:#000;border-color:var(--ej4-oro)}
.ej4-btn-grupo{display:flex;flex-direction:column;align-items:center;gap:5px;margin-top:20px;text-align:center}

/* ── CUENTA REGRESIVA ────────────────────────────────────────── */
.ej4-crono-faltan{font-size:.8rem;letter-spacing:3px;color:var(--ej4-oro);text-transform:uppercase;margin-bottom:10px}
.ej4-crono-numeros{font-size:2.5rem;font-weight:300;color:#fff;letter-spacing:2px}
.ej4-crono-etiq{font-size:.65rem;color:var(--ej4-secundario);letter-spacing:2px;margin-top:5px}

/* ── CALENDARIO ──────────────────────────────────────────────── */
.ej4-cal-mes{font-family:var(--ej4-font-titulo);font-size:1.5rem;margin-bottom:15px;color:var(--ej4-texto);letter-spacing:2px}
.ej4-cal-grid{
    display:grid;grid-template-columns:repeat(7,1fr);
    gap:5px;font-size:.8rem;color:var(--ej4-secundario);
    margin-bottom:30px;max-width:300px;margin-inline:auto;
}
.ej4-cal-dia{padding:5px;text-align:center}
.ej4-cal-header{font-weight:600;color:var(--ej4-oro)}
.ej4-cal-marcado{
    background-color:var(--ej4-oro);color:#000;
    border-radius:50%;font-weight:bold;
    position:relative;box-shadow:0 0 15px rgba(212,175,55,.4);
}
.ej4-cal-marcado::after{
    content:'♥';position:absolute;
    top:-12px;right:-6px;
    color:var(--ej4-oro-brillo);font-size:.95rem;
    animation:ej4LatidoCorazon 1.5s infinite;
}
@keyframes ej4LatidoCorazon{0%,30%,60%,100%{transform:scale(1)}15%,45%{transform:scale(1.4)}}

.ej4-fiesta-fecha{font-family:var(--ej4-font-titulo);font-size:1.8rem;color:#fff;margin-bottom:5px}
.ej4-fiesta-lugar{color:var(--ej4-oro);font-weight:600;font-size:1.2rem;letter-spacing:1px;margin-bottom:20px}

/* ── ITINERARIO ──────────────────────────────────────────────── */
.ej4-itinerario-cabecera{color:var(--ej4-oro);letter-spacing:3px;margin-bottom:24px;text-transform:uppercase;font-size:.85rem}
.ej4-itinerario-linea{position:relative;padding-left:8px}
.ej4-itinerario-progreso{
    position:absolute;left:28px;top:0;
    width:2px;height:0;
    background:linear-gradient(var(--ej4-oro),transparent);
    transition:none;
}
.ej4-itinerario-item{
    display:flex;gap:16px;align-items:flex-start;
    text-align:left;margin-bottom:28px;
    position:relative;z-index:1;
}
/* Ícono como background-image — background-size:cover sin recortar SVG transparente */
.ej4-itinerario-nodo{
    width:56px;min-width:56px;
    height:56px;min-height:56px;
    border-radius:50%;
    border:1px solid rgba(212,175,55,.4);
    flex-shrink:0;
    background-color:#1a1a1a;
    overflow:hidden;
}
.ej4-itinerario-nodo--bg{
    background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
}
.ej4-itinerario-nodo-dot{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;color:var(--ej4-oro);font-size:1.1rem;
}
.ej4-itinerario-texto h4{font-family:var(--ej4-font-titulo);color:var(--ej4-oro);font-size:1.2rem;margin-bottom:4px}
.ej4-itinerario-texto p{font-size:.85rem;color:var(--ej4-secundario)}

/* ── DRESS CODE ──────────────────────────────────────────────── */
.ej4-dress-estilo{
    font-size:1.5rem;letter-spacing:4px;font-weight:700;
    background:linear-gradient(to right,#d4af37,#f9e596,#d4af37);
    -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ── REGALOS ─────────────────────────────────────────────────── */
.ej4-regalo-caja{
    border:1px dashed var(--ej4-oro);padding:15px;
    font-size:1.1rem;letter-spacing:2px;
    margin:20px auto;width:90%;max-width:320px;
    background-color:rgba(212,175,55,.05);color:#fff;
}
.ej4-datos-ocultos{display:none;margin-top:16px}
.ej4-datos-ocultos.ej4-visible{display:block}
.ej4-copy-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:8px 0}
.ej4-copy-msg{opacity:0;transition:.3s;font-size:.85rem;color:var(--ej4-oro)}
.ej4-copy-msg.ej4-ok{opacity:1}

/* ── PREVIA BANNER ───────────────────────────────────────────── */
.ej4-previa-banner{
    border-left:3px solid var(--ej4-oro);
    padding:16px 20px;text-align:left;
    background:rgba(212,175,55,.06);
    margin:0 auto 24px;max-width:340px;
    border-radius:0 12px 12px 0;
}

/* ── IMÁGENES Y PLACEHOLDERS ─────────────────────────────────── */
.ej4-evento-img,.ej4-dress-img,.ej4-separador{max-width:100%;border-radius:12px;margin:16px auto;display:block}
.ej4-separador{width:70%;opacity:.9}

.ej4-ph{
    display:inline-block;
    background:linear-gradient(135deg,#1a1a1a 0%,#2a2418 50%,#1a1a1a 100%);
    border:1px dashed rgba(212,175,55,.35);border-radius:12px;
}
.ej4-ph--logo{width:140px;height:48px}
.ej4-ph--evento{width:100%;max-width:360px;min-height:200px;margin:16px auto}
.ej4-ph--dress{width:120px;height:120px;border-radius:50%;margin:16px auto}
.ej4-ph--persona{width:88px;height:88px;border-radius:50%}
.ej4-ph--separador{width:70%;height:24px;margin:8px auto}

/* ── AGRADECIMIENTO ──────────────────────────────────────────── */
.ej4-personas-grid{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:16px}
.ej4-persona{text-align:center}
.ej4-persona-avatar{
    width:88px;height:88px;border-radius:50%;
    background-size:cover;background-position:center;background-color:#1a1a1a;
    margin:0 auto 8px;border:2px solid rgba(212,175,55,.3);
}
.ej4-persona span{font-size:.85rem;color:var(--ej4-secundario);display:block}

/* ── FORMULARIOS ─────────────────────────────────────────────── */
.ej4-form-grupo{text-align:left;margin-bottom:14px}
.ej4-form-grupo label{display:block;font-size:.75rem;letter-spacing:1px;margin-bottom:6px;color:var(--ej4-secundario)}
.ej4-input,.ej4-textarea{
    width:100%;padding:12px;
    border-radius:8px;border:1px solid #333;
    background:#141414;color:var(--ej4-texto);
    font-family:inherit;
}
.ej4-textarea{min-height:80px;resize:vertical}
.ej4-radio-grupo{text-align:left;margin:16px 0}
.ej4-radio-grupo label{display:block;margin:8px 0;cursor:pointer}

/* ── BOTÓN WHATSAPP ──────────────────────────────────────────── */
.ej4-btn-wp{
    display:flex;align-items:center;justify-content:center;gap:12px;
    background:linear-gradient(135deg,#1e1e1e,#2a2a2a);
    border:1px solid rgba(212,175,55,.4);
    color:var(--ej4-oro);
    padding:16px 30px;border-radius:50px;
    font-size:.95rem;font-weight:600;
    letter-spacing:1px;text-transform:uppercase;
    width:85%;margin:15px auto;
    box-shadow:0 8px 20px rgba(0,0,0,.6);
    transition:.3s;cursor:pointer;
}
.ej4-btn-wp:hover{transform:translateY(-4px);background:#25D366;color:#fff;border-color:#25D366}
.ej4-btn-wp svg{width:22px;height:22px;fill:currentColor}

/* ── LIGHTBOX ────────────────────────────────────────────────── */
.ej4-lightbox{
    position:fixed;inset:0;
    background:rgba(0,0,0,.92);
    z-index:20000;display:none;
    align-items:center;justify-content:center;padding:20px;
}
.ej4-lightbox.ej4-activo{display:flex}
.ej4-lightbox img{max-width:100%;max-height:90vh;border-radius:8px}
.ej4-lightbox-cerrar{
    position:absolute;top:16px;right:16px;
    background:var(--ej4-oro);color:#000;
    padding:10px 18px;border-radius:8px;cursor:pointer;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
.ej4-footer{text-align:center;padding:20px 20px 50px;background-color:var(--ej4-fondo);border-top:1px solid #222}
.ej4-footer p{font-size:.75rem;color:var(--ej4-secundario);letter-spacing:2px;margin-bottom:8px;text-transform:uppercase}
.ej4-footer a{color:var(--ej4-oro);text-decoration:none;font-weight:600}
.ej4-footer-frase{text-transform:none;font-size:.9rem;line-height:1.5;margin-bottom:16px}
.ej4-corazon{display:inline-block;color:var(--ej4-oro);animation:ej4LatidoCorazon 1.5s infinite;margin:0 4px}

/* ── REVELADO DE CONTENIDO (sección visible, hijos al entrar en vista) ── */
.ej4-seccion:not(.ej4-revelado) > *,
.ej4-footer:not(.ej4-revelado) > *{
    opacity:0;
}

#previa:not(.ej4-revelado) > *,#misa:not(.ej4-revelado) > *,#regalos:not(.ej4-revelado) > *,#playlist:not(.ej4-revelado) > *,#precioTarjeta:not(.ej4-revelado) > *,#dresscode:not(.ej4-revelado) > *{transform:translateX(-28px)}
#itinerario:not(.ej4-revelado) > *{transform:translateX(28px)}
#galeria:not(.ej4-revelado) > *,#album:not(.ej4-revelado) > *{transform:translateY(24px)}
#temporizador:not(.ej4-revelado) > *,#confirmacion:not(.ej4-revelado) > *{transform:scale(.94)}
#fiesta:not(.ej4-revelado) > *{transform:scale(.92)}
#agradecimiento:not(.ej4-revelado) > *{transform:translateY(20px)}

#previa.ej4-revelado > *,#misa.ej4-revelado > *,#regalos.ej4-revelado > *,#playlist.ej4-revelado > *,#precioTarjeta.ej4-revelado > *,#dresscode.ej4-revelado > *{
    animation:ej4EntraIzq .55s ease-out forwards;
}
#itinerario.ej4-revelado > .ej4-itinerario-cabecera{animation:ej4EntraDer .5s ease-out forwards}
#itinerario.ej4-revelado > .ej4-itinerario-linea{animation:ej4EntraDer .5s ease-out .06s forwards}
#galeria.ej4-revelado > *,#agradecimiento.ej4-revelado > *,#album.ej4-revelado > *{animation:ej4EntraSubir .55s ease-out forwards}
#temporizador.ej4-revelado > *,#confirmacion.ej4-revelado > *{animation:ej4EntraPulso .6s ease-out forwards}
#fiesta.ej4-revelado > *{animation:ej4EntraZoomVip .6s ease-out forwards}
#footer.ej4-revelado > *{animation:ej4EntraFade .5s ease-out forwards}

.ej4-seccion.ej4-revelado > *:nth-child(2){animation-delay:.07s}
.ej4-seccion.ej4-revelado > *:nth-child(3){animation-delay:.14s}
.ej4-seccion.ej4-revelado > *:nth-child(4){animation-delay:.21s}
.ej4-seccion.ej4-revelado > *:nth-child(5){animation-delay:.28s}
.ej4-seccion.ej4-revelado > *:nth-child(6){animation-delay:.35s}
.ej4-seccion.ej4-revelado > *:nth-child(7){animation-delay:.42s}

#itinerario:not(.ej4-revelado) .ej4-itinerario-item{opacity:0;transform:translateX(22px)}
#itinerario.ej4-revelado .ej4-itinerario-item{animation:ej4EntraDer .48s ease-out forwards}
#itinerario.ej4-revelado .ej4-itinerario-item:nth-child(2){animation-delay:.12s}
#itinerario.ej4-revelado .ej4-itinerario-item:nth-child(3){animation-delay:.22s}
#itinerario.ej4-revelado .ej4-itinerario-item:nth-child(4){animation-delay:.32s}
#itinerario.ej4-revelado .ej4-itinerario-item:nth-child(5){animation-delay:.42s}
#itinerario.ej4-revelado .ej4-itinerario-item:nth-child(6){animation-delay:.52s}
#itinerario.ej4-revelado .ej4-itinerario-item:nth-child(7){animation-delay:.62s}
#itinerario.ej4-revelado .ej4-itinerario-item:nth-child(8){animation-delay:.72s}

#agradecimiento:not(.ej4-revelado) .ej4-persona{opacity:0;transform:scale(.9)}
#agradecimiento.ej4-revelado .ej4-persona{animation:ej4AvatarLatido .5s ease-out forwards}
#agradecimiento.ej4-revelado .ej4-personas-grid .ej4-persona:nth-child(1){animation-delay:.1s}
#agradecimiento.ej4-revelado .ej4-personas-grid .ej4-persona:nth-child(2){animation-delay:.2s}
#agradecimiento.ej4-revelado .ej4-personas-grid .ej4-persona:nth-child(3){animation-delay:.3s}
#agradecimiento.ej4-revelado .ej4-personas-grid .ej4-persona:nth-child(4){animation-delay:.4s}
#agradecimiento.ej4-revelado .ej4-personas-grid .ej4-persona:nth-child(5){animation-delay:.5s}
#agradecimiento.ej4-revelado .ej4-personas-grid .ej4-persona:nth-child(6){animation-delay:.6s}

#fiesta.ej4-revelado .ej4-evento-img.ej4-img-entrada,
#misa.ej4-revelado .ej4-evento-img.ej4-img-entrada{
    animation:ej4ImgZoom .65s ease-out .18s forwards,ej4ImgOroGlow .9s ease-out .18s forwards;
}
#dresscode:not(.ej4-revelado) > .ej4-img-wipe{opacity:1;clip-path:inset(0 100% 0 0)}
#dresscode.ej4-revelado > .ej4-img-wipe{animation:ej4ImgWipe .75s ease-out .25s forwards}

@keyframes ej4EntraIzq{
    from{opacity:0;transform:translateX(-28px)}
    to{opacity:1;transform:none}
}
@keyframes ej4EntraDer{
    from{opacity:0;transform:translateX(28px)}
    to{opacity:1;transform:none}
}
@keyframes ej4EntraSubir{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:none}
}
@keyframes ej4EntraPulso{
    0%{opacity:0;transform:scale(.94)}
    55%{opacity:1;transform:scale(1.03)}
    100%{opacity:1;transform:scale(1)}
}
@keyframes ej4EntraZoomVip{
    from{opacity:0;transform:scale(.92)}
    to{opacity:1;transform:scale(1)}
}
@keyframes ej4EntraFade{
    from{opacity:0}
    to{opacity:1}
}
@keyframes ej4ImgZoom{
    from{opacity:0;transform:scale(1.06)}
    to{opacity:1;transform:scale(1)}
}
@keyframes ej4ImgOroGlow{
    0%{box-shadow:0 0 0 0 rgba(212,175,55,0)}
    45%{box-shadow:0 0 22px 3px rgba(212,175,55,.4)}
    100%{box-shadow:0 10px 28px rgba(0,0,0,.4)}
}
@keyframes ej4ImgWipe{
    from{clip-path:inset(0 100% 0 0)}
    to{clip-path:inset(0 0 0 0)}
}
@keyframes ej4AvatarLatido{
    0%{opacity:0;transform:scale(.9)}
    60%{opacity:1;transform:scale(1.05)}
    100%{opacity:1;transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
    .ej4-seccion > *,.ej4-footer > *{opacity:1 !important;transform:none !important;animation:none !important}
    #itinerario .ej4-itinerario-item,#agradecimiento .ej4-persona{opacity:1 !important;transform:none !important;animation:none !important}
    .ej4-img-wipe{clip-path:none !important}
}

/* ── BADGE DEMO ──────────────────────────────────────────────── */
.ej4-badge-demo{
    position:fixed;top:8px;left:8px;z-index:99998;
    background:rgba(0,0,0,.75);color:var(--ej4-oro);
    font-size:.65rem;padding:4px 10px;border-radius:6px;
    border:1px solid rgba(212,175,55,.3);
}

.gala-seccion--galeria{padding-bottom:40px}