/* ========================================
   INVITACIÓN PRIMER CUMPLEAÑOS DE MAURO
   ESTILO DRAGON BALL
   ======================================== */
 
* {
    box-sizing: border-box;
}
 
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
    background:
        radial-gradient(
            circle at center,
            #fff3b0 0%,
            #87ceeb 45%,
            #4aa3df 100%
        );
    padding: 20px;
}
 
.invitacion {
    width: 100%;
    max-width: 600px;
}
 
 
/* ========================================
   PORTADA
   ======================================== */
 
.portada {
    background-image:
        url("imagenes/portada.jpg");
 
    background-size:
        cover;
 
    background-position:
        center;
 
    background-repeat:
        no-repeat;
 
    width:
        100%;
 
    max-width:
        600px;
 
    aspect-ratio:
        2 / 3;
 
    border:
        8px solid #d18b00;
 
    border-radius:
        25px;
 
    padding:
        8% 14% 20%;
 
    display:
        flex;
 
    flex-direction:
        column;
 
    justify-content:
        center;
 
    align-items:
        center;
 
    text-align:
        center;
 
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3);
}
 
 
/* ========================================
   TÍTULO PORTADA
   ======================================== */
 
h1 {
    margin:
        0;
 
    width:
        100%;
 
    max-width:
        420px;
 
    font-family:
        "Bangers",
        sans-serif;
 
    font-size:
        clamp(28px, 6vw, 46px);
 
    line-height:
        1.05;
 
    color:
        #d62828;
 
    letter-spacing:
        1px;
 
    text-shadow:
        2px 2px 0 white,
        3px 3px 0 #7a0000;
}
 
 
/* ========================================
   TEXTO EXPLICATIVO
   ======================================== */
 
.portada p {
    width:
        100%;
 
    max-width:
        390px;
 
    font-family:
        Arial,
        sans-serif;
 
    font-size:
        clamp(15px, 3vw, 20px);
 
    line-height:
        1.45;
 
    margin:
        22px 0 28px;
 
    color:
        #111;
 
    font-weight:
        600;
 
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5);
}
 
 
/* ========================================
   BOTONES GENERALES
   ======================================== */
 
button {
    position:
        relative;
 
    overflow:
        hidden;
 
    font-family:
        "Bangers",
        sans-serif;
 
    letter-spacing:
        1.5px;
 
    padding:
        14px 30px;
 
    font-size:
        clamp(20px, 4vw, 27px);
 
    font-weight:
        normal;
 
    border:
        3px solid #8c5700;
 
    border-radius:
        15px;
 
    background:
        linear-gradient(
            to bottom,
            #ffe56b 0%,
            #ffc229 35%,
            #f39a00 70%,
            #d97800 100%
        );
 
    color:
        white;
 
    text-shadow:
        2px 2px 0 #704000;
 
    cursor:
        pointer;
 
    box-shadow:
        0 5px 0 #8a5700,
        0 8px 12px rgba(0, 0, 0, 0.3);
 
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
 
    -webkit-tap-highlight-color:
        transparent;
}
 
button::before {
    content:
        "";
 
    position:
        absolute;
 
    top:
        -80%;
 
    left:
        -40%;
 
    width:
        35%;
 
    height:
        260%;
 
    background:
        rgba(255, 255, 255, 0.35);
 
    transform:
        rotate(25deg);
 
    transition:
        left 0.5s ease;
 
    pointer-events:
        none;
}
 
button:hover::before {
    left:
        115%;
}
 
button:hover {
    transform:
        translateY(-4px)
        scale(1.04);
 
    box-shadow:
        0 8px 0 #8a5700,
        0 12px 20px rgba(0, 0, 0, 0.35);
 
    filter:
        brightness(1.08);
}
 
button:active {
    transform:
        translateY(3px)
        scale(0.97);
 
    box-shadow:
        0 2px 0 #8a5700,
        0 4px 8px rgba(0, 0, 0, 0.25);
}
 
 
/* ========================================
   PREGUNTAS
   ======================================== */
 
.preguntas {
    display:
        none;
 
    position:
        relative;
 
    background-image:
        url("imagenes/preguntas.jpg");
 
    background-size:
        cover;
 
    background-position:
        center;
 
    background-repeat:
        no-repeat;
 
    width:
        100%;
 
    max-width:
        600px;
 
    aspect-ratio:
        2 / 3;
 
    border:
        8px solid #d18b00;
 
    border-radius:
        25px;
 
    padding:
        10% 12%;
 
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3);
}
 
.contenido-pregunta {
    width:
        100%;
 
    height:
        100%;
 
    display:
        flex;
 
    flex-direction:
        column;
 
    justify-content:
        center;
 
    align-items:
        center;
 
    text-align:
        center;
}
 
 
/* ========================================
   NÚMERO DE PREGUNTA
   ======================================== */
 
.contenido-pregunta h3 {
    margin:
        0 0 20px;
 
    position:
        relative;
 
    top:
        40px;
 
    font-family:
        "Bangers",
        sans-serif;
 
    font-size:
        clamp(20px, 4vw, 30px);
 
    letter-spacing:
        1px;
 
    color:
        #f05a00;
 
    text-shadow:
        1px 1px 0 #7a2600;
}
 
 
/* ========================================
   TEXTO DE PREGUNTA
   ======================================== */
 
.contenido-pregunta h2 {
    margin:
        0 0 30px;
    font-family:
        "Bangers",
        sans-serif;
    font-size:
        clamp(20px, 4vw, 30px);
    line-height:
        1.15;
    color:
        #f05a00;
 
    text-shadow:
        2px 2px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        3px 3px 4px rgba(0, 0, 0, 0.5);
}
 
 
/* ========================================
   RESPUESTAS
   ======================================== */
 
.respuestas {
    width:
        100%;
 
    display:
        flex;
 
    flex-direction:
        column;
 
    gap:
        13px;
}
 
.respuestas button {
    width:
        100%;
 
    min-height:
        58px;
 
    padding:
        12px 14px;
 
    font-size:
        clamp(17px, 4vw, 23px);
 
    line-height:
        1.1;
 
    border:
        3px solid #a86600;
 
    border-radius:
        14px;
 
    background:
        linear-gradient(
            to bottom,
            #ffd85a 0%,
            #ffc12a 40%,
            #e88900 100%
        );
 
    color:
        white;
 
    text-shadow:
        2px 2px 0 #704000;
 
    box-shadow:
        0 5px 0 #895500,
        0 7px 12px rgba(0, 0, 0, 0.25);
 
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        filter 0.15s ease;
}
 
 
/* ========================================
   RESPUESTA CORRECTA
   ======================================== */
 
.respuestas button.respuesta-correcta {
    background:
        linear-gradient(
            to bottom,
            #fff36b,
            #65d65a,
            #259b2a
        );
 
    border-color:
        #176c20;
 
    box-shadow:
        0 5px 0 #14551a,
        0 0 25px rgba(72, 220, 80, 0.8);
 
    transform:
        scale(1.04);
}
 
 
/* ========================================
   RESPUESTA INCORRECTA
   ======================================== */
 
.respuestas button.respuesta-incorrecta {
    background:
        linear-gradient(
            to bottom,
            #ff7777,
            #e53935,
            #a40000
        );
 
    border-color:
        #700000;
 
    box-shadow:
        0 5px 0 #560000,
        0 0 20px rgba(255, 0, 0, 0.7);
 
    animation:
        sacudida 0.45s ease;
}
 
@keyframes sacudida {
 
    0% {
        transform:
            translateX(0);
    }
 
    20% {
        transform:
            translateX(-8px);
    }
 
    40% {
        transform:
            translateX(8px);
    }
 
    60% {
        transform:
            translateX(-6px);
    }
 
    80% {
        transform:
            translateX(6px);
    }
 
    100% {
        transform:
            translateX(0);
    }
}
 
 
/* ========================================
   EFECTO KAMEHAME
   ======================================== */
 
.efecto-ki {
    position:
        absolute;
 
    top:
        50%;
 
    left:
        50%;
 
    transform:
        translate(-50%, -50%)
        scale(0);
 
    z-index:
        20;
 
    pointer-events:
        none;
 
    font-family:
        "Bangers",
        sans-serif;
 
    font-size:
        clamp(35px, 9vw, 65px);
 
    letter-spacing:
        2px;
 
    color:
        white;
 
    text-shadow:
        3px 3px 0 #0055a5,
        -2px -2px 0 #00aaff,
        0 0 20px #ffffff;
 
    opacity:
        0;
}
 
.efecto-ki.mostrar {
    animation:
        kamehame 0.85s ease-out;
}
 
@keyframes kamehame {
 
    0% {
        opacity:
            0;
 
        transform:
            translate(-50%, -50%)
            scale(0.2)
            rotate(-8deg);
    }
 
    25% {
        opacity:
            1;
 
        transform:
            translate(-50%, -50%)
            scale(1.25)
            rotate(3deg);
    }
 
    55% {
        opacity:
            1;
 
        transform:
            translate(-50%, -50%)
            scale(1)
            rotate(-2deg);
    }
 
    100% {
        opacity:
            0;
 
        transform:
            translate(-50%, -50%)
            scale(1.5);
    }
}
 
 
/* ========================================
   PANTALLA INCORRECTA
   ======================================== */
 
.incorrecto {
    display:
        none;
 
    background-image:
        url("imagenes/incorrecto.jpg");
 
    background-size:
        cover;
 
    background-position:
        center;
 
    background-repeat:
        no-repeat;
 
    width:
        100%;
 
    max-width:
        600px;
 
    aspect-ratio:
        832 / 1792;
 
    border:
        8px solid #8b0000;
 
    border-radius:
        25px;
 
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.5);
}
 
 
/* ========================================
   PANTALLA APROBADA
   ======================================== */
 
.aprobado {
    display:
        none;
 
    position:
        relative;
 
    background-image:
        url("imagenes/aprobado.jpg");
 
    background-size:
        cover;
 
    background-position:
        center;
 
    background-repeat:
        no-repeat;
 
    width:
        100%;
 
    max-width:
        600px;
 
    aspect-ratio:
        832 / 1792;
 
    border:
        8px solid #d18b00;
 
    border-radius:
        25px;
 
    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.4);
}
 
.contenido-aprobado {
    width:
        100%;
 
    height:
        100%;
}
 
 
/* ========================================
   DATOS DE LA FIESTA
   ======================================== */

   .datos-fiesta {
    position:
        absolute;
 
    left:
        8%;
 
    width:
        84%;
 
    top:
        69%;
 
    padding:
        10px;
 
    text-align:
        center;
}
 
.datos-fiesta p {
    margin:
        8px 0;
 
    font-family:
        Arial,
        sans-serif;
 
    font-size:
        clamp(19px, 5vw, 28px);
 
    line-height:
        1.25;
 
    font-weight:
        bold;
 
    color:
        white;
 
    text-shadow:
        2px 2px 3px black;
}
 
#boton-mapa {
    margin-top:
        12px;
 
    font-family:
        "Bangers",
        sans-serif;
 
    font-size:
        clamp(18px, 4.5vw, 26px);
 
    padding:
        12px 25px;
}
 
 
/* ========================================
   ESFERA SECRETA
   ======================================== */
 
.esfera-secreta {
    position:
        absolute;
 
    top:
        92%;
 
    left:
        88%;
 
    width:
        110px;
 
    height:
        110px;
 
    transform:
        translate(-50%, -50%);
 
    z-index:
        30;
 
    cursor:
        pointer;
 
    border-radius:
        50%;
 
    -webkit-tap-highlight-color:
        transparent;
}
 
.esfera-secreta.toque-secreto {
    animation:
        toque-esfera 0.15s ease;
}
 
@keyframes toque-esfera {
 
    0% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }
 
    50% {
        transform:
            translate(-50%, -50%)
            scale(1.18);
    }
 
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}
 
 
/* ========================================
   SHENLONG
   ======================================== */
 
.mensaje-secreto {
    display:
        none;
 
    position:
        fixed !important;
 
    top:
        0 !important;
 
    left:
        0 !important;
 
    width:
        100vw !important;
 
    height:
        100vh !important;
 
    margin:
        0 !important;
 
    padding:
        0 !important;
 
    z-index:
        99999;
 
    background:
        rgba(0, 0, 0, 0.92);
 
    align-items:
        center;
 
    justify-content:
        center;
 
    overflow:
        hidden;
}
 
.mensaje-secreto.mostrar {
    display:
        flex;
 
    animation:
        fondo-shenlong
        1s ease-out
        forwards;
}
 
 
/* ========================================
   IMAGEN SHENLONG
   ======================================== */
 
.mensaje-secreto img {
    display:
        block;
 
    position:
        absolute;
 
    top:
        50%;
 
    left:
        50%;
 
    width:
        auto;
 
    height:
        auto;
 
    max-width:
        96vw;
 
    max-height:
        94vh;
 
    margin:
        0;
 
    object-fit:
        contain;
 
    opacity:
        0;
 
    transform:
        translate(-50%, -50%)
        scale(0.25);
 
    border-radius:
        10px;
 
    box-shadow:
        0 0 25px rgba(95, 255, 70, 0.7),
        0 0 70px rgba(95, 255, 70, 0.45);
 
    animation:
        aparecer-shenlong
        1.3s
        cubic-bezier(0.17, 0.89, 0.32, 1.25)
        forwards;
}
 
 
/* ========================================
   FONDO SHENLONG
   ======================================== */
 
@keyframes fondo-shenlong {
 
    0% {
        background:
            rgba(0, 0, 0, 0);
    }
 
    100% {
        background:
            rgba(0, 0, 0, 0.92);
    }
}
 
 
/* ========================================
   APARICIÓN SHENLONG
   ======================================== */
 
@keyframes aparecer-shenlong {
 
    0% {
        opacity:
            0;
 
        transform:
            translate(-50%, -50%)
            scale(0.25);
    }
 
    40% {
        opacity:
            1;
 
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }
 
    65% {
        transform:
            translate(-50%, -50%)
            scale(0.96);
    }
 
    100% {
        opacity:
            1;
 
        transform:
            translate(-50%, -50%)
            scale(1);
    }
}
 
 
/* ========================================
   BOTONES DESACTIVADOS
   ======================================== */
 
button:disabled {
    cursor:
        default;
 
    pointer-events:
        none;
}
 
 
/* ========================================
   FOCO DE TECLADO
   ======================================== */
 
button:focus-visible {
    outline:
        4px solid white;
 
    outline-offset:
        3px;
}
 
 
/* ========================================
   CELULARES
   ======================================== */
 
@media (max-width: 600px) {
 
    body {
        padding:
            8px;
    }
 
 
    /* ------------------------------------
       PORTADA
       ------------------------------------ */
 
    .portada {
        border-width:
            5px;
 
        border-radius:
            18px;
 
        padding:
            8% 13% 20%;
    }
 
 
    .portada h1 {
        width:
            100%;
 
        max-width:
            310px;
 
        font-size:
            28px;
 
        line-height:
            1.05;
    }
 
 
    .portada p {
        width:
            100%;
 
        max-width:
            320px;
 
        font-size:
            15px;
 
        line-height:
            1.4;
 
        margin:
            18px 0 25px;
    }
 
 
    /* ------------------------------------
       PREGUNTAS
       ------------------------------------ */
 
    .preguntas {
        border-width:
            5px;
 
        border-radius:
            18px;
 
        padding:
            8% 10%;
    }
 
 
    .contenido-pregunta h3 {
        top:
            20px;
 
        font-size:
            22px;
 
        margin-bottom:
            20px;
 
        color:
            #f05a00;
 
        text-shadow:
            1px 1px 0 #7a2600;
    }
 
 
    .contenido-pregunta h2 {
        font-size:
            24px;
 
        color:
            #f05a00;
 
        text-shadow:
            2px 2px 0 rgba(255, 255, 255, 0.55),
            1px 1px 0 #7a2600;
    }

    /* ------------------------------------
       INCORRECTO
       ------------------------------------ */
 
    .incorrecto {
        border-width:
            5px;
 
        border-radius:
            18px;
    }
 
 
    /* ------------------------------------
       APROBADO
       ------------------------------------ */
 
    .aprobado {
        border-width:
            5px;
 
        border-radius:
            18px;
    }
 
 
    /* ------------------------------------
       BOTONES
       ------------------------------------ */
 
    button {
        font-size:
            19px;
 
        padding:
            12px 25px;
    }
 
 
    /* ------------------------------------
       RESPUESTAS
       ------------------------------------ */
 
    .respuestas {
        gap:
            8px;
    }
 
    .respuestas button {
        min-height:
            48px;
 
        padding:
            8px 10px;
 
        font-size:
            17px;
    }
 
 
    /* ------------------------------------
       KAMEHAME
       ------------------------------------ */
 
    .efecto-ki {
        font-size:
            40px;
    }
 
 
    /* ------------------------------------
       ESFERA SECRETA
       ------------------------------------ */
 
    .esfera-secreta {
        width:
            100px;
 
        height:
            100px;
 
        top:
            92%;
 
        left:
            88%;
    }
 
 
    /* ------------------------------------
       SHENLONG
       ------------------------------------ */
 
    .mensaje-secreto {
        width:
            100vw !important;
 
        height:
            100vh !important;
 
        padding:
            5px;
    }
 
    .mensaje-secreto img {
        max-width:
            96vw;
 
        max-height:
            94vh;
 
        width:
            auto;
 
        height:
            auto;
    }

    /* BORDE NEGRO PARA LOS TEXTOS DE LAS PREGUNTAS */
.contenido-pregunta h2,
.contenido-pregunta h3 {
    color: #f05a00;
 
    text-shadow:
        2px 2px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        3px 3px 4px rgba(0, 0, 0, 0.5);
}

/* AJUSTE FINAL DE LA PORTADA EN CELULAR */
 
@media (max-width: 600px) {
 
    .portada h1 {
        width: 78%;
        max-width: 290px;
        font-size: 27px;
        line-height: 1.05;
        margin: 0 auto;
    }
 
    .portada p {
        width: 78%;
        max-width: 290px;
        font-size: 15px;
        line-height: 1.35;
        margin: 18px auto 24px;
    }
 
    .portada #boton-comenzar {
        font-size: 19px;
        padding: 11px 25px;
    }
 /* ========================================
   EFECTOS SHENLONG - EASTER EGG
   ======================================== */
 
.shenlong-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
 
    display: flex;
    justify-content: center;
    align-items: center;
 
    background:
        radial-gradient(
            circle,
            rgba(80, 255, 80, 0.25) 0%,
            rgba(0, 80, 20, 0.75) 55%,
            rgba(0, 0, 0, 0.92) 100%
        );
 
    opacity: 0;
    visibility: hidden;
 
    pointer-events: none;
 
    transition:
        opacity 0.4s ease,
        visibility 0.4s ease;
}
 
.shenlong-overlay.activo {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation:
        shenlong-entrada 1s ease-out;
}
 
/* Resplandor verde que cubre toda la pantalla */
.shenlong-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
 
    background:
        radial-gradient(
            circle at center,
            rgba(130, 255, 100, 0.35),
            transparent 60%
        );
 
    opacity: 0;
 
    animation:
        aura-shenlong 2s ease-in-out infinite;
}
 
/* Imagen de Shenlong */
.shenlong-imagen {
    position: relative;
    z-index: 2;
 
    width: 90vw;
    max-width: 500px;
    max-height: 88vh;
 
    object-fit: contain;
 
    border-radius: 20px;
 
    box-shadow:
        0 0 20px rgba(80, 255, 80, 0.9),
        0 0 50px rgba(50, 255, 50, 0.7),
        0 0 100px rgba(0, 255, 100, 0.4);
 
    transform: scale(0.2);
    opacity: 0;
 
    animation:
        shenlong-aparece 1.2s
        0.15s
        cubic-bezier(0.17, 0.67, 0.2, 1.25)
        forwards;
}
 
/* Texto */
.shenlong-texto {
    position: absolute;
 
    z-index: 3;
 
    left: 50%;
    bottom: 8%;
 
    width: 90%;
    max-width: 500px;
 
    transform:
        translateX(-50%)
        translateY(30px);
 
    text-align: center;
 
    font-family:
        "Bangers",
        sans-serif;
 
    color: white;
 
    text-shadow:
        3px 3px 0 #000,
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        0 0 15px #36ff36;
 
    opacity: 0;
 
    animation:
        texto-shenlong 0.8s
        1s
        ease-out
        forwards;
}
 
.shenlong-texto .invocado {
    display: block;
 
    font-size:
        clamp(30px, 8vw, 52px);
 
    color:
        #9cff6b;
 
    margin-bottom: 8px;
}
 
.shenlong-texto .deseo {
    display: block;
 
    font-size:
        clamp(22px, 5vw, 34px);
 
    line-height:
        1.1;
}
 
/* Entrada general */
@keyframes shenlong-entrada {
 
    0% {
        background-color:
            rgba(255, 255, 255, 1);
 
        transform:
            scale(1.08);
    }
 
    15% {
        background-color:
            rgba(120, 255, 80, 0.7);
    }
 
    35% {
        transform:
            scale(0.98);
    }
 
    55% {
        transform:
            scale(1.02);
    }
 
    100% {
        transform:
            scale(1);
    }
}
 
/* Aparición de Shenlong */
@keyframes shenlong-aparece {
 
    0% {
        opacity: 0;
        transform:
            scale(0.2)
            rotate(-4deg);
        filter:
            brightness(2)
            blur(8px);
    }
 
    35% {
        opacity: 1;
        transform:
            scale(1.08)
            rotate(1deg);
        filter:
            brightness(1.5)
            blur(0);
    }
 
    60% {
        transform:
            scale(0.97);
    }
 
    100% {
        opacity: 1;
        transform:
            scale(1);
        filter:
            brightness(1);
    }
}
 
/* Aura pulsante */
@keyframes aura-shenlong {
 
    0%,
    100% {
        opacity: 0.25;
        transform:
            scale(0.95);
    }
 
    50% {
        opacity: 0.8;
        transform:
            scale(1.08);
    }
}
 
/* Texto */
@keyframes texto-shenlong {
 
    0% {
        opacity: 0;
        transform:
            translateX(-50%)
            translateY(30px)
            scale(0.8);
    }
 
    100% {
        opacity: 1;
        transform:
            translateX(-50%)
            translateY(0)
            scale(1);
    }
}
 
/* Sacudida durante la invocación */
body.shenlong-sacudida {
    animation:
        temblor-shenlong 0.65s ease;
}
 
@keyframes temblor-shenlong {
 
    0%   { transform: translate(0, 0); }
    15%  { transform: translate(-5px, 3px); }
    30%  { transform: translate(5px, -3px); }
    45%  { transform: translate(-4px, -2px); }
    60%  { transform: translate(4px, 2px); }
    75%  { transform: translate(-2px, 1px); }
    100% { transform: translate(0, 0); }
}
 
/* Salida */
.shenlong-overlay.cerrando {
    animation:
        shenlong-salida 0.5s ease-in forwards;
}
 
@keyframes shenlong-salida {
 
    0% {
        opacity: 1;
        transform: scale(1);
    }
 
    100% {
        opacity: 0;
        transform: scale(0.92);
    }
}
 
@media (max-width: 600px) {
 
    .shenlong-imagen {
        width: 94vw;
        max-height: 82vh;
    }
 
    .shenlong-texto {
        bottom: 5%;
    }

/* ========================================
   TRANSICIÓN ESFERA DE 4 ESTRELLAS
   ======================================== */
 
.transicion-esfera {
    position: fixed !important;
 
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
 
    z-index: 99999 !important;
 
    display: flex;
    justify-content: center;
    align-items: center;
 
    background:
        radial-gradient(
            circle,
            rgba(255, 180, 0, 0.95) 0%,
            rgba(255, 120, 0, 0.9) 25%,
            rgba(0, 0, 0, 0.98) 75%
        );
 
    opacity: 0;
    visibility: hidden;
 
    pointer-events: none;
 
    box-sizing: border-box;
}
 
 
/* ========================================
   CUANDO APARECE
   ======================================== */
 
.transicion-esfera.mostrar {
    opacity: 1;
    visibility: visible;
}
 
 
/* ========================================
   AURA
   ======================================== */
 
.aura-esfera {
    position: absolute;
 
    width: 220px;
    height: 220px;
 
    border-radius: 50%;
 
    background:
        radial-gradient(
            circle,
            rgba(255, 255, 180, 0.95) 0%,
            rgba(255, 180, 0, 0.55) 35%,
            rgba(255, 100, 0, 0.15) 60%,
            transparent 72%
        );
 
    filter: blur(7px);
 
    opacity: 0;
}
 
 
/* ========================================
   ESFERA
   ======================================== */
 
.dragon-ball {
    position: relative;
 
    width: 115px;
    height: 115px;
 
    border-radius: 50%;
 
    display: flex;
    justify-content: center;
    align-items: center;
 
    background:
        radial-gradient(
            circle at 35% 30%,
            #fff7a0 0%,
            #ffcf32 12%,
            #ff8c00 45%,
            #d84a00 78%,
            #8d2500 100%
        );
 
    border: 4px solid #ffd34d;
 
    box-shadow:
        0 0 20px #fff3a0,
        0 0 45px #ffb000,
        0 0 90px #ff6500;
 
    opacity: 0;
 
    transform:
        scale(0)
        rotate(-180deg);
}
 
 
/* ========================================
   ESTRELLAS
   ======================================== */
 
.estrella {
    position: absolute;
 
    color: #b80000;
 
    font-family: Arial, sans-serif;
    font-size: 25px;
 
    text-shadow:
        1px 1px 2px #650000;
 
    opacity: 0;
 
    transform: scale(0);
}
 
.estrella-1 {
    top: 21px;
    left: 40px;
}
 
.estrella-2 {
    top: 39px;
    left: 67px;
}
 
.estrella-3 {
    top: 62px;
    left: 39px;
}
 
.estrella-4 {
    top: 38px;
    left: 21px;
}
 
 
/* ========================================
   DESTELLO
   ======================================== */
 
.destello-esfera {
    position: absolute;
 
    width: 25px;
    height: 25px;
 
    border-radius: 50%;
 
    background: white;
 
    opacity: 0;
 
    box-shadow:
        0 0 20px white,
        0 0 50px white,
        0 0 100px #ffd84a;
}
 
 
/* ========================================
   ANIMACIONES
   ======================================== */
 
/* Aura */
 
.transicion-esfera.mostrar .aura-esfera {
    animation:
        aura-esfera 0.75s ease-out forwards;
}
 
 
/* Esfera */
 
.transicion-esfera.mostrar .dragon-ball {
    animation:
        esfera-entrada 0.75s ease-out forwards;
}
 
 
/* Estrellas */
 
.transicion-esfera.mostrar .estrella {
    animation:
        estrellas-aparecer 0.35s ease-out forwards;
}
 
.transicion-esfera.mostrar .estrella-1 {
    animation-delay: 0.20s;
}
 
.transicion-esfera.mostrar .estrella-2 {
    animation-delay: 0.27s;
}
 
.transicion-esfera.mostrar .estrella-3 {
    animation-delay: 0.34s;
}
 
.transicion-esfera.mostrar .estrella-4 {
    animation-delay: 0.41s;
}
 
 
/* Destello */
 
.transicion-esfera.mostrar .destello-esfera {
    animation:
        destello-esfera 0.55s ease-out 0.42s forwards;
}
 
 
/* ========================================
   KEYFRAMES
   ======================================== */
 
@keyframes aura-esfera {
 
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
 
    30% {
        opacity: 1;
    }
 
    70% {
        transform: scale(1.25);
        opacity: 0.8;
    }
 
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}
 
 
@keyframes esfera-entrada {
 
    0% {
        transform:
            scale(0)
            rotate(-180deg);
 
        opacity: 0;
    }
 
    40% {
        transform:
            scale(1.2)
            rotate(18deg);
 
        opacity: 1;
    }
 
    65% {
        transform:
            scale(0.95)
            rotate(-6deg);
 
        opacity: 1;
    }
 
    100% {
        transform:
            scale(1)
            rotate(0deg);
 
        opacity: 1;
    }
}
 
 
@keyframes estrellas-aparecer {
 
    0% {
        transform: scale(0);
        opacity: 0;
    }
 
    60% {
        transform: scale(1.25);
        opacity: 1;
    }
 
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
 
 
@keyframes destello-esfera {
 
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
 
    40% {
        transform: scale(2);
        opacity: 1;
    }
 
    100% {
        transform: scale(7);
        opacity: 0;
    }
}
 
 
/* ========================================
   CELULAR
   ======================================== */
 
@media (max-width: 600px) {
 
    .dragon-ball {
        width: 100px;
        height: 100px;
    }
 
    .aura-esfera {
        width: 175px;
        height: 175px;
    }
 
    .estrella {
        font-size: 22px;
    }
 
    .estrella-1 {
        top: 17px;
        left: 22px;
    }
 
    .estrella-2 {
        top: 17px;
        right: 22px;
        left: auto;
    }
 
    .estrella-3 {
        bottom: 17px;
        left: 22px;
        top: auto;
    }
 
    .estrella-4 {
        bottom: 17px;
        right: 22px;
        left: auto;
        top: auto;
    }

    
}