/* style.css - Se mantienen los estilos anteriores con adición de Countdown */

:root {
    --turquesa-claro: rgba(0, 181, 184, 0.15);
    --turquesa-fuerte: #2A9D8F;
    --oro-metalico: linear-gradient(135deg, #D4AF37 0%, #FFF2CD 25%, #AA771C 50%, #FBF5B7 75%, #8A5A19 100%);
    --blanco-perla: #FAFAFA;
    --texto-oscuro: #2C3E50;
    --sombra-suave: 0 10px 30px rgba(0,0,0,0.08);
}

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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #E8F4F8;
    background-image: url('https://www.transparenttextures.com/patterns/rice-paper-2.png');
    display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 20px; color: var(--texto-oscuro);
}

/* --- OVERLAY DE INICIO --- */
#interaction-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(232, 244, 248, 0.9); backdrop-filter: blur(8px); z-index: 1000; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: opacity 0.5s ease;
}
#interaction-overlay.hidden { opacity: 0; pointer-events: none; }
.glass-panel { background: rgba(255, 255, 255, 0.6); padding: 40px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.8); box-shadow: var(--sombra-suave); text-align: center; }
.cursive-title { font-family: 'Great Vibes', cursive; font-size: 4rem; background: var(--oro-metalico); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* --- TARJETA --- */
.invitation-card { background-color: var(--blanco-perla); width: 100%; max-width: 550px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.15); border-radius: 10px; overflow: hidden; padding: 15px; }
.watercolor-blob { position: absolute; border-radius: 50%; filter: blur(40px); z-index: 1; }
.top-left { width: 250px; height: 250px; background: rgba(0, 181, 184, 0.3); top: -50px; left: -50px; }
.bottom-right { width: 300px; height: 300px; background: rgba(0, 181, 184, 0.25); bottom: -80px; right: -80px; }
.center-right { width: 150px; height: 150px; background: rgba(230, 200, 255, 0.3); top: 40%; right: -20px; }
.gold-frame { position: relative; z-index: 2; border: 3px solid transparent; border-image: var(--oro-metalico) 1; padding: 40px 20px; text-align: center; background: rgba(255,255,255,0.6); backdrop-filter: blur(2px); }

/* --- SECCIÓN CUENTA REGRESIVA --- */
.countdown-section { margin-bottom: 35px; }
.countdown-title { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.2rem; color: var(--gold); margin-bottom: 10px; }
.countdown-container { display: flex; justify-content: center; gap: 15px; }
.time-block { background: white; border: 1px solid rgba(197, 148, 52, 0.3); padding: 10px; border-radius: 8px; min-width: 65px; box-shadow: var(--sombra-suave); }
.time-block span { display: block; font-size: 1.5rem; font-weight: 700; color: var(--turquesa-fuerte); }
.time-block p { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; color: var(--texto-oscuro); }

/* --- OTROS TEXTOS --- */
.subtitle { letter-spacing: 3px; font-size: 0.85rem; font-weight: 600; color: var(--turquesa-fuerte); margin-bottom: 20px; }
.quince-name { font-family: 'Great Vibes', cursive; font-size: 4.5rem; line-height: 0.9; background: var(--oro-metalico); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.quince-last-name { font-family: 'Great Vibes', cursive; font-size: 3rem; color: var(--texto-oscuro); }
.quince-label { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-style: italic; margin-bottom: 25px; }
.quote-box { background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(212, 175, 55, 0.4); padding: 20px; font-family: 'Playfair Display', serif; margin-bottom: 30px; border-radius: 5px; }

/* --- BOTONES UNIFICADOS --- */
.btn-elegant, .btn-whatsapp {
    display: inline-flex; align-items: center; justify-content: center; background-color: white; color: var(--turquesa-fuerte);
    border: 3px solid transparent; background-image: linear-gradient(white, white), var(--oro-metalico); background-origin: border-box; background-clip: padding-box, border-box;
    padding: 12px 25px; border-radius: 30px; text-decoration: none; font-weight: 700; font-size: 0.85rem; transition: all 0.3s ease; box-shadow: var(--sombra-suave); margin-bottom: 10px; width: 80%;
}
.btn-elegant:hover, .btn-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 181, 184, 0.2); }
.divider { height: 1px; background: var(--oro-metalico); width: 40%; margin: 25px auto; opacity: 0.5; }

.dress-code { display: flex; align-items: center; justify-content: center; gap: 15px; margin: 30px 0; padding: 15px; background: rgba(0, 181, 184, 0.05); border-radius: 10px; }
.cocktail-icon { font-size: 2rem; }
.dress-text { text-align: left; font-size: 0.9rem; }

.music-btn { position: fixed; bottom: 20px; right: 20px; background: var(--oro-metalico); border: none; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; z-index: 1000; display: flex; justify-content: center; align-items: center; }

@media (max-width: 480px) { .quince-name { font-size: 3.5rem; } .quince-last-name { font-size: 2.5rem; } }