body { margin: 0; padding: 0; background-color: #eef5ea; overflow-x: hidden; font-family: 'Montserrat', sans-serif; }

/* INTRO MÁGICA ORIGINAL */
#pantalla-inicio {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh;
    background: linear-gradient(135deg, #071707 0%, #153a15 100%);
    background-size: 400% 400%;
    animation: movimientoFondo 12s ease infinite;
    display: flex; justify-content: center; align-items: center; z-index: 10000;
}
@keyframes movimientoFondo { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.contenido-intro { position: relative; z-index: 3; text-align: center; padding: 20px; }

/* CORONA Y TEXTOS */
.icono-flotante { font-size: 6rem; margin-bottom: 25px; filter: drop-shadow(0 0 15px rgba(212,175,55,0.7)); animation: flotarElegante 3s ease-in-out infinite; }
@keyframes flotarElegante { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

.titulo-intro { font-family: 'Cinzel', serif; font-size: 3rem; color: #d4af37; margin: 0 0 10px 0; }
.subtitulo-intro { font-size: 1.2rem; color: #ffffff; letter-spacing: 3px; margin-bottom: 20px; }
.mensaje-emotivo { font-family: 'Pinyon Script', cursive; font-size: 1.6rem; color: #ffffff; margin-bottom: 30px; font-style: italic; opacity: 0; animation: aparecerTexto 3s ease-in-out forwards; animation-delay: 0.8s; }
@keyframes aparecerTexto { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* BOTÓN INTRO */
#btn-iniciar { background: transparent; color: #d4af37; border: 2px solid #d4af37; padding: 15px 40px; border-radius: 50px; font-weight: bold; cursor: pointer; transition: all 0.4s ease; animation: parpadeo 2s infinite; box-shadow: 0 0 10px rgba(212, 175, 55, 0.3); }
#btn-iniciar:hover { background: #d4af37; color: #071707; box-shadow: 0 0 25px rgba(212, 175, 55, 0.8); transform: scale(1.05); }
@keyframes parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

/* TARJETAS CON BRILLO */
.img-wrapper { position: relative; overflow: hidden; width: 100%; }
.img-full { width: 100%; display: block; }
.img-wrapper::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); animation: brilloTarjeta 5s infinite; pointer-events: none;
}
@keyframes brilloTarjeta { 0% { left: -100%; } 20%, 100% { left: 150%; } }

/* BOTÓN TRANSPARENTE */
.btn-transparente {
    position: absolute;
    z-index: 10;
    display: block;
    background: rgba(0,0,0,0);
    cursor: pointer;
}

/* ESTRUCTURA */
#invitacion { transition: opacity 1.5s ease-in-out; opacity: 0; width: 100%; display: flex; justify-content: center; }
.oculto { display: none !important; }
/* ... resto de tu código ... */
.contenedor-tarjeta { width: 100%; max-width: 450px; display: flex; flex-direction: column; }
/* Asegúrate de que no haya una llave extra aquí debajo */