*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, sans-serif;
    overflow:hidden;
}

/* ================================= */
/* CONTRASEÑA */
/* ================================= */

#pantallaPassword{

    width:100%;
    height:100vh;

    background:linear-gradient(
    180deg,
    #fff1f7,
    #ecd6ff
);

    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:20px;
}

.foto-superior{
    width:200px;
    border-radius:20px;
}

#pantallaPassword h2{
    color:rgb(175, 0, 0);
}

.codigo{
    display:flex;
    gap:10px;
}

.casilla{
    width:50px;
    height:55px;

    border:3px solid rgb(255, 129, 160);
    border-radius:10px;

    color:rgb(175, 0, 0);
    font-size:34px;

    display:flex;
    justify-content:center;
    align-items:center;
}

.teclado{

    width:280px;

    display:grid;
    grid-template-columns:repeat(3,1fr);

    gap:15px;
}

.teclado button{

    height:70px;

    border:none;
    border-radius:20%;

    background:rgb(255, 129, 160);
    color:white;

    font-size:24px;
}

/* ================================= */
/* MAIL */
/* ================================= */

#pantallaMail{

    display:none;

    width:100%;
    height:100vh;

    background:linear-gradient(
    180deg,
    #fff1f7,
    #ecd6ff
);

    flex-direction:column;
    justify-content:center;
    align-items:center;
}

.titulo-mail{

    margin-bottom:60px;

    color:#a01527;
}

.mailbox{

    position:relative;

    width:320px;
    height:260px;
}

/* ranura */

.ranura{

    position:absolute;

    top:0;

    width:320px;
    height:40px;

    background:#5e85b8;

    border-radius:25px;

    z-index:10;
}

/* carta */

.carta{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:220px;

    top:-3px;

    z-index:1;
}

.carta img{

    width:100%;
    display:block;
}

/* boton */

#btnCarta{

    margin-top:40px;

    border:none;

    background:#fc7798;

    color:white;

    padding:15px 40px;

    border-radius:30px;

    font-size:18px;

    cursor:pointer;
}

/* ================================= */
/* ANIMACION */
/* ================================= */

.salirCarta{

    animation:salirDelBuzon 2s forwards;
}

@keyframes salirDelBuzon{

    from{

        top:10px;
    }

    to{

        top:120px;
    }
}

/* ================================= */
/* CARTA ABIERTA */
/* ================================= */

#pantallaCarta{

    display:none;

    width:100%;
    height:100vh;

    background:linear-gradient(
        180deg,
        #fff1f7,
        #ecd6ff
    );

    overflow:hidden;

    position:relative;

    flex-direction:column;

    justify-content:center;
    align-items:center;
}

.carta-completa{

    width:95%;
    max-width:450px;

    z-index:10;

    animation:aparecer .8s ease;
}

@keyframes aparecer{

    from{

        opacity:0;
        transform:scale(0.5);
    }

    to{

        opacity:1;
        transform:scale(1);
    }
}

/* ========================== */
/* POPUP ERROR */
/* ========================== */

.popup-fondo{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:rgba(0,0,0,0.4);

    display:none;

    justify-content:center;
    align-items:center;

    z-index:9999;
}

/* caja */

.popup{

    width:280px;

    background:#f8f8f8;

    border:3px solid #222;

    border-radius:18px;

    padding:20px;

    text-align:center;

    animation:popupEntrada .35s ease;
}

/* titulo */

.popup h2{

    color:#111;

    font-size:24px;

    margin-bottom:12px;
}

/* imagen */

.popup-imagen{

    width:110px;

    margin-bottom:12px;
}

/* texto */

.popup p{

    color:#333;

    margin-bottom:18px;
}

/* boton */

.popup button{

    border:none;

    background:#3045b5;

    color:white;

    padding:10px 25px;

    border-radius:20px;

    cursor:pointer;

    font-weight:bold;
}

@keyframes popupEntrada{

    0%{

        opacity:0;
        transform:scale(0.4);
    }

    70%{

        transform:scale(1.08);
    }

    100%{

        opacity:1;
        transform:scale(1);
    }
}

.errorShake{

    animation:shake .4s;
}

@keyframes shake{

    0% {transform:translateX(0);}
    20% {transform:translateX(-8px);}
    40% {transform:translateX(8px);}
    60% {transform:translateX(-8px);}
    80% {transform:translateX(8px);}
    100% {transform:translateX(0);}
}

/* ================================= */
/* BARRA DE CARGA */
/* ================================= */

.barra-carga{

    width:100%;
    height:18px;

    background:#d9d9d9;

    border-radius:20px;

    overflow:hidden;

    margin-top:10px;
}

.progreso{

    width:0%;

    height:100%;

    background:linear-gradient(
        90deg,
        #ff6ec7,
        #8f5fff
    );

    transition:.1s;
}

#porcentaje{

    display:block;

    margin-top:10px;

    font-weight:bold;
}

/* ================================= */
/* PARTICULAS MAGICAS */
/* ================================= */

.particula{

    position:absolute;

    width:35px;

    opacity:.8;

    pointer-events:none;

    filter:
    drop-shadow(0 0 5px white)
    drop-shadow(0 0 10px white)
    drop-shadow(0 0 15px gold);

    animation:flotar 3s ease-in-out infinite;
}

/* TAMAÑOS INDIVIDUALES */

.p1{
    width:25px;
}

.p2{
    width:40px;
}

.p3{
    width:30px;
}

.p4{
    width:45px;
}

.p5{
    width:28px;
}

.p6{
    width:35px;
}

/* POSICIONES */

.p1{
    top:15%;
    left:15%;
}

.p2{
    top:22%;
    right:15%;
    animation-delay:.5s;
}

.p3{
    top:60%;
    left:10%;
    animation-delay:1s;
}

.p4{
    top:70%;
    right:12%;
    animation-delay:1.5s;
}

.p5{
    top:40%;
    left:5%;
    animation-delay:2s;
}

.p6{
    top:45%;
    right:5%;
    animation-delay:2.5s;
}

/* movimiento */

@keyframes flotar{

    0%{

        transform:
        translateY(0px)
        scale(1);

        opacity:.5;
    }

    50%{

        transform:
        translateY(-15px)
        scale(1.3);

        opacity:1;
    }

    100%{

        transform:
        translateY(0px)
        scale(1);

        opacity:.5;
    }
}

/* ================================= */
/* PANTALLA DESEO */
/* ================================= */

#pantallaDeseo{

    display:none;

    position:relative;

    width:100%;
    height:100vh;

    overflow:hidden;

    background:linear-gradient(
    180deg,
    #5762f8,
    #2f2cf7
);

    flex-direction:column;

    justify-content:center;
    align-items:center;
}

.torta{

    width:260px;

    z-index:2;

    position:relative;
}

/* TEXTO */

.texto-deseo{

    color:white;

    margin-top:30px;

    text-align:center;

    font-size:25px;

    font-family:Arial, sans-serif;

    line-height:1.5;
}

/* LLAMA */

.llama{

    position:absolute;

    width:50px;
    height:50px;

    background:linear-gradient(
        to top,
        orange,
        yellow
    );

    border-radius:
        50% 50% 50% 50% /
        60% 60% 40% 40%;

    top:190px;

    left:50%;

    transform:
        translateX(-50%);

    box-shadow:
        0 0 10px yellow,
        0 0 20px orange,
        0 0 50px yellow;

    animation:fuego .6s infinite alternate;

    cursor:pointer;

    z-index:999;
}

/* BOTON SIGUIENTE */

#btnSiguiente{

    display:none;

    margin-top:35px;

    border:none;

    background:#ff7ca8;

    color:white;

    font-size:18px;

    padding:15px 35px;

    border-radius:30px;
}

@keyframes fuego{

    from{

        transform:
        translateX(-50%)
        rotate(-3deg)
        scale(1);
    }

    to{

        transform:
        translateX(-50%)
        rotate(3deg)
        scale(1.1);
    }
}

/* HUMO */

.humo{

    position:absolute;

    top:235px;

    left:50%;

    transform:translateX(-50%);

    font-size:35px;

    opacity:0;

    z-index:6;
}

/* MENSAJE */

.mensaje-deseo{

    position:absolute;

    top:140px;

    color:#fff4a9;

    font-size:30px;

    font-weight:bold;

    opacity:0;

    text-shadow:
    0 0 10px #fff,
    0 0 20px #ffe066,
    0 0 40px #ffd43b;

    z-index:6;
}

.humo-activo{

    animation:humoSube 1.8s forwards;
}

@keyframes humoSube{

    0%{

        opacity:1;

        transform:
        translateX(-50%)
        translateY(0px)
        scale(0.8);
    }

    100%{

        opacity:0;

        transform:
        translateX(-50%)
        translateY(-80px)
        scale(1.8);
    }

}

.mostrar-deseo{

    animation:
    deseoConcedido 1s forwards,
    flotarDeseo 2s ease-in-out infinite;
}

@keyframes flotarDeseo{

    0%{

        transform:
        translateY(0px);
    }

    50%{

        transform:
        translateY(-5px);
    }

    100%{

        transform:
        translateY(0px);
    }

}

@keyframes deseoConcedido{

    from{

        opacity:0;
        transform:scale(0.5);
    }

    to{

        opacity:1;
        transform:scale(1);
    }

}

#abrirDeseo{

    margin-top:25px;

    border:none;

    background:#ff8dbb;

    color:white;

    padding:15px 30px;

    border-radius:25px;

    font-size:18px;

    cursor:pointer;

    box-shadow:
    0 5px 15px rgba(0,0,0,.15);

    transition:.2s;
}

#abrirDeseo:hover{

    transform:scale(1.05);
}

#btnSiguiente{

    display:none;

    opacity:0;
}

.mostrarBoton{

    display:block !important;

    animation:aparecerBoton .8s forwards;
}

@keyframes aparecerBoton{

    from{

        opacity:0;
        transform:translateY(20px);
    }

    to{

        opacity:1;
        transform:translateY(0);
    }
}

/* ========================= */
/* REGALOS */
/* ========================= */

#pantallaRegalos{

    display:none;

    width:100%;
    height:100vh;

    background:linear-gradient(
    180deg,
    #fff1f7,
    #ecd6ff
);

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:20px;
}

.titulo-regalos{

    color:#a00029;

    margin-bottom:40px;
}

.contenedor-regalos{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:20px;

    width:100%;
}

.regalo{

    width:250px;

    height:120px;

    object-fit:cover;

    border:4px solid #a00029;

    border-radius:15px;

    cursor:pointer;

    transition:.3s;

    box-shadow:
    0 5px 15px rgba(0,0,0,.15);
}

.regalo:hover{

    transform:scale(1.08);
}

.texto-regalos{

    margin-top:15px;

    color:#555;

    text-align:center;

    font-size:18px;
}

#pantallaRegalo1,
#pantallaRegalo2,
#pantallaRegalo3{

    display:none;

    width:100%;
    height:100vh;

    justify-content:center;
    align-items:center;
    flex-direction:column;

    background:linear-gradient(
    180deg,
    #fff1f7,
    #ecd6ff
);
}

#btnFinal{

    margin-top:10px;

    border:none;

    background:#ff8dbb;

    color:white;

    padding:15px 25px;

    border-radius:25px;

    font-size:18px;

    cursor:pointer;

    box-shadow:
    0 5px 15px rgba(0,0,0,.15);

    transition:.3s;
}

#btnFinal:hover{

    transform:scale(1.05);
}

#pantallaFinal{

    display:none;

    width:100%;
    height:100vh;

    justify-content:center;
    align-items:center;
    flex-direction:column;

    background:linear-gradient(
    180deg,
    #fff1f7,
    #ecd6ff
);

    text-align:center;

    padding:20px;
}

/* ========================= */
/* REGALO 1 */
/* ========================= */

#pantallaRegalo1{

    display:none;

    position:relative;

    width:100%;
    height:100vh;

    background:linear-gradient(
    180deg,
    #fff1f7,
    #ecd6ff
);

    justify-content:center;
    align-items:center;
}

.contenido-regalo{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;
}

/* flecha */

.boton-volver{

    position:absolute;

    top:30px;

    left:20px;

    width:50px;
    height:50px;

    border:none;

    background:#5a63ff;

    color:white;

    font-size:28px;

    border-radius:14px;

    cursor:pointer;

    box-shadow:
    0 4px 12px rgba(0,0,0,.18);
}

/* frase */

.frase-regalo{

    margin-top:15px;

    font-size:28px;

    font-weight:bold;

    text-align:center;

    color:#222;
}

/* imagen */

.imagen-regalo{

    width:80%;

    max-width:420px;

    height:350px;

    margin-top:15px;

    object-fit:cover;

    cursor:pointer;

    transition:.3s;

    border-radius:20px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);
}

.imagen-regalo:hover{

    transform:scale(1.02);
}

/* texto */

.instruccion{

    margin-top:15px;

    color:#666;
}

/* ================================= */
/* REGALO 2 */
/* ================================= */

#pantallaRegalo2{

    display:none;

    position:relative;

    width:100%;
    height:100vh;

    background:linear-gradient(
    180deg,
    #fff1f7,
    #ecd6ff
);

    justify-content:center;
    align-items:center;
}

.contenido-recuerdos{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;
}

.titulo-recuerdos{

    font-size:32px;

    color:#222;

    margin-bottom:20px;
}

.imagen-recuerdo{

    width:80%;

    max-width:360px;

    height:380px;

    object-fit:cover;

    border-radius:20px;

    cursor:pointer;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);

    transition:.3s;
}

.texto-recuerdo{

    margin-top:20px;

    font-size:18px;

    text-align:center;

    color:#666;
}

.indicadores{

    display:flex;

    gap:10px;

    margin-top:15px;
}

.punto{

    width:12px;
    height:12px;

    border-radius:50%;

    background:#d6d6d6;
}

.punto.activo{

    background:#ff5f92;
}

/* ================================= */
/* REGALO 3 */
/* ================================= */

#pantallaRegalo3{

    display:none;

    position:relative;

    width:100%;
    height:100vh;

    background:linear-gradient(
    180deg,
    #fff1f7,
    #ecd6ff
);

    justify-content:center;
    align-items:center;
}

.contenido-regalo3{

    display:flex;

    justify-content:center;
    align-items:center;

    width:100%;

    height:100%;
}

/* imagen */

.imagen-regalo3{

    width:93%;

    max-width:420px;

    max-height:80vh;

    object-fit:contain;

    border-radius:20px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.20);

    animation:aparecerRegalo3 .8s ease;
}

@keyframes aparecerRegalo3{

    from{

        opacity:0;

        transform:scale(0.5);
    }

    to{

        opacity:1;

        transform:scale(1);
    }
}

/* ================================= */
/* PANTALLA FINAL */
/* ================================= */

#pantallaFinal{

    display:none;

    width:100%;
    height:100vh;

    background:linear-gradient(
    180deg,
    #6588fa,
    #2d2ae2
);

    position:relative;

    justify-content:center;
    align-items:center;
}

/* contenedor */

.contenido-final{

    width:100%;

    max-width:420px;

    position:relative;

    height:700px;
}

/* textos */

.texto-final{

    font-size:16px;

    font-weight:600;

    color:#faf8f8;

    line-height:1.5;
}

/* primer texto */

.texto-1{

    position:absolute;

    top:45px;
    left:10px;

    width:170px;
}

/* segunda foto */

.texto-2{

    position:absolute;

    top:200px;

    left:50%;

    transform:translateX(-50%);

    width:260px;

    text-align:center;
}

/* fotos */

.foto-final{

    object-fit:cover;

    border-radius:20px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);
}

/* foto superior */

.foto-1{

    position:absolute;

    top:20px;
    right:20px;

    width:140px;
    height:140px;
}

/* foto inferior */

.foto-2{

    position:absolute;

    top:330px;

    left:50%;

    transform:translateX(-50%);

    width:250px;
    height:300px;

    object-fit:cover;

    border-radius:20px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.15);
}