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

body{

    font-family:Arial, sans-serif;

    background:
    linear-gradient(
        135deg,
        #1e1b4b,
        #7f1d1d,
        #be185d
    );

    overflow-x:hidden;

    min-height:100vh;

    color:white;

}

/* 🔥 PARTÍCULAS DE FONDO */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
    radial-gradient(
        circle at top left,
        rgba(255,255,255,0.08),
        transparent 30%
    ),
    radial-gradient(
        circle at bottom right,
        rgba(255,255,255,0.08),
        transparent 30%
    );

    z-index:-1;

}

/* 🚀 PORTADA */

.pantallaInicio{

    position:fixed;

    inset:0;

    background:
    linear-gradient(
        135deg,
        #020617,
        #4c0519,
        #7e22ce
    );

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999;

}

.inicioContenido{

    text-align:center;

    animation:fadeZoom 2s ease;

}

/* 🔥 IMAGEN */

.imagenInicio{

    width:320px;

    max-width:90%;

    border-radius:25px;

    box-shadow:
    0 0 40px rgba(255,255,255,0.25);

    animation:flotar 5s ease-in-out infinite;

}

/* 🚀 BOTÓN */

.btnAbrir{

    margin-top:30px;

    padding:15px 35px;

    border:none;

    border-radius:50px;

    background:
    linear-gradient(
        90deg,
        #ec4899,
        #8b5cf6
    );

    color:white;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

    box-shadow:
    0 0 20px rgba(236,72,153,0.5);

}

.btnAbrir:hover{

    transform:
    scale(1.07)
    translateY(-3px);

    box-shadow:
    0 0 35px rgba(236,72,153,0.9);

}

/* 🔥 PANEL */

.panel{

    max-width:500px;

    margin:20px auto;

    background:
    rgba(255,255,255,0.08);

    backdrop-filter:blur(15px);

    padding:25px;

    border-radius:25px;

    box-shadow:
    0 0 35px rgba(0,0,0,0.3);

}

/* TITULO */

.panel h1{

    text-align:center;

    margin-bottom:20px;

    color:white;

    font-size:34px;

    text-shadow:
    0 0 15px rgba(255,255,255,0.8);

    animation:brilloTexto 2s infinite alternate;

}

/* INPUTS */

.panel input,
.panel button{

    width:100%;

    padding:14px;

    margin-top:12px;

    border:none;

    border-radius:15px;

    font-size:16px;

}

.panel input{

    background:
    rgba(255,255,255,0.12);

    color:white;

    outline:none;

    border:
    1px solid rgba(255,255,255,0.1);

}

.panel input::placeholder{

    color:rgba(255,255,255,0.7);

}

.panel input:focus{

    box-shadow:
    0 0 20px rgba(255,255,255,0.4);

}

/* BOTON */

.panel button{

    background:
    linear-gradient(
        90deg,
        #ec4899,
        #8b5cf6
    );

    color:white;

    cursor:pointer;

    font-weight:bold;

    transition:0.3s;

    box-shadow:
    0 0 20px rgba(236,72,153,0.4);

}

.panel button:hover{

    transform:
    translateY(-3px);

    box-shadow:
    0 0 30px rgba(236,72,153,0.8);

}

/* PAGINA */

.pagina{

    display:none;

    padding:20px;

}

/* MENSAJE PRINCIPAL */

.detalleEvento{

    max-width:900px;

    margin:0 auto 40px auto;

}

.cardEvento{

    background:
    rgba(255,255,255,0.08);

    backdrop-filter:blur(15px);

    padding:30px;

    border-radius:30px;

    text-align:center;

    box-shadow:
    0 0 35px rgba(0,0,0,0.25);

}

.mensajePrincipal h1{

    font-size:42px;

    margin-bottom:20px;

    text-shadow:
    0 0 20px rgba(255,255,255,0.9);

    animation:
    brilloTexto 2s infinite alternate;

}

.mensajePrincipal p{

    font-size:18px;

    line-height:1.9;

    color:white;

}

/* CONTENEDOR */

.contenedor{

    display:flex;

    justify-content:center;

}

/* TARJETA */

.tarjeta{

    width:420px;

    max-width:100%;

    position:relative;

    overflow:hidden;

    border-radius:30px;

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

    animation:flotar 5s ease-in-out infinite;

}

/* IMAGEN */

.tarjeta img{

    width:100%;

    display:block;

}

/* OVERLAY */

.overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.25)
    );

}

/* CONTENIDO */

.contenidoTarjeta{

    position:absolute;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:25px;

    overflow:hidden;

}

/* CENTRO */

.contenidoCentral{

    width:100%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:10px;

}

/* 💖 NOMBRE INVITADO */

/* NOMBRE INVITADO */

.nombre{

    position:absolute;

    left:50%;

    top:38%;

    transform:translate(-50%, -50%);

    width:85%;
    max-width:320px;

    text-align:center;

    color:white;
    font-weight:bold;

    font-size:clamp(18px,3vw,32px);

    line-height:1.2;
    letter-spacing:1px;

    word-break:break-word;
    overflow-wrap:break-word;

    padding:5px 10px;

    text-shadow:
        0 0 5px rgba(0,0,0,1),
        0 0 15px rgba(0,0,0,1),
        0 0 25px rgba(0,0,0,1);

    animation:brilloTexto 2s infinite alternate;
}
/* INFO DENTRO DE LA IMAGEN */

.infoInvitacion{

    margin-top:10px;

    text-align:center;

    color:white;

    width:90%;

    text-shadow:
        0 0 5px rgba(0,0,0,1),
        0 0 10px rgba(0,0,0,1),
        0 0 20px rgba(0,0,0,1);

}

.infoInvitacion h3{

    margin-top:14px;

    margin-bottom:6px;

    font-size:22px;

    letter-spacing:1px;

}

.infoInvitacion p{

    line-height:1.7;

    font-size:15px;

}

/* ❤️ CORAZONES */

.corazones{

    position:fixed;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.corazones::before,
.corazones::after{

    content:"❤ ❤ ❤ ❤ ❤ ❤ ❤ ❤";

    position:absolute;

    width:100%;

    color:rgba(255,255,255,0.2);

    font-size:30px;

    animation:caer 12s linear infinite;

}

.corazones::after{

    animation-delay:6s;

}

/* 🔥 BOTONES */

.acciones{

    display:flex;

    gap:12px;

    justify-content:center;

    margin-top:25px;

    margin-bottom:40px;

    flex-wrap:wrap;

}

.acciones button{

    padding:14px 24px;

    border:none;

    border-radius:50px;

    background:
    linear-gradient(
        90deg,
        #ec4899,
        #8b5cf6
    );

    color:white;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    box-shadow:
    0 0 20px rgba(236,72,153,0.4);

    transition:0.3s;

}

.acciones button:hover{

    transform:
    translateY(-3px)
    scale(1.05);

    box-shadow:
    0 0 35px rgba(236,72,153,0.9);

}

/* ✨ ANIMACIONES */

@keyframes caer{

    from{
        transform:translateY(-100%);
    }

    to{
        transform:translateY(120vh);
    }

}

@keyframes fadeZoom{

    from{
        opacity:0;
        transform:scale(0.8);
    }

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

}

@keyframes brilloTexto{

    from{
        text-shadow:
        0 0 10px white;
    }

    to{
        text-shadow:
        0 0 30px #ff9ff3,
        0 0 60px #f368e0;
    }

}

@keyframes flotar{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }

}

@keyframes latido{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.03);
    }

    100%{
        transform:scale(1);
    }

}

/* 📱 RESPONSIVE */

@media(max-width:768px){

    .imagenInicio{

        width:260px;

    }

    .acciones{

        flex-direction:column;

        padding:0 20px;

    }

    .acciones button{

        width:100%;

    }

    .panel{

        margin:15px;

    }

    .mensajePrincipal h1{

        font-size:30px;

    }

    .mensajePrincipal p{

        font-size:16px;

        line-height:1.7;

    }

    .contenidoTarjeta{

        padding:18px;

    }

    .nombre{

        width:95%;

        font-size:
        clamp(18px, 6vw, 32px);

        line-height:1.1;

    }

    .infoInvitacion{

        margin-top:14px;

    }

    .infoInvitacion h3{

        font-size:18px;

        margin-top:10px;

        margin-bottom:4px;

    }

    .infoInvitacion p{

        font-size:12px;

        line-height:1.4;

    }

}


/* CABECERA */

.cabeceraInvitacion{

    position:relative;

    z-index:5;

    width:100%;

    text-align:center;

}

/* NOMBRES */

.nombresNovios{

    color:white;

    font-size:14px;

    line-height:1.5;

    letter-spacing:1px;

    margin-bottom:10px;

    text-shadow:
        0 0 5px rgba(0,0,0,1),
        0 0 10px rgba(0,0,0,1),
        0 0 20px rgba(0,0,0,1);

}

/* AMPERSAND */

.and{

    font-size:18px;

    margin:2px 0;

    color:#ffd6e7;

}

/* INVITAN */

.invitanTexto{

    color:white;

    font-size:15px;

    letter-spacing:3px;

    margin-bottom:15px;

    text-transform:uppercase;

    text-shadow:
        0 0 5px rgba(0,0,0,1),
        0 0 10px rgba(0,0,0,1);

}