:root {
    --crema-fondo: #FDFBF7;
    --crema-oscuro: #F5E6D3;
    --texto-suave: #7A6F64;
    --dorado-mate: #C5A16F;
}

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

body {
    background-color: var(--crema-fondo);
    font-family: 'Poppins', sans-serif;
    color: var(--texto-suave);
    overflow-x: hidden;
}

/* SEGURIDAD */
#login-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--crema-fondo);
    display: flex; justify-content: center; align-items: center;
    z-index: 5000;
    transition: opacity 0.6s ease;
}

.login-box {
    text-align: center; padding: 35px; background: white;
    border: 1px solid var(--crema-oscuro); border-radius: 8px;
    width: 90%; max-width: 350px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.login-box h2 { font-family: 'Playfair Display', serif; color: var(--dorado-mate); margin-bottom: 10px; }

.login-box input {
    padding: 12px; margin: 20px 0; width: 100%;
    border: 1px solid var(--crema-oscuro); border-radius: 4px;
    text-align: center; font-size: 1.1rem; outline: none;
}

/* CONTENIDO PRINCIPAL */
.main-content {
    display: flex; flex-direction: column; align-items: center;
    padding: 40px 20px; text-align: center;
}

.hidden-protected { display: none; }
.hidden { display: none !important; }

h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.8rem, 10vw, 4rem); color: var(--dorado-mate); }
.tagline { text-transform: uppercase; letter-spacing: 2px; font-size: clamp(0.6rem, 2.8vw, 0.8rem); color: #B2A595; }
.line { height: 1px; width: 80px; background: var(--dorado-mate); margin: 20px auto; }

.one-line { 
    font-size: clamp(0.65rem, 3.2vw, 0.9rem); 
    white-space: nowrap; 
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.timer { display: flex; justify-content: center; gap: 15px; margin: 25px 0; }
.time-unit span { font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: bold; color: var(--dorado-mate); line-height: 1; }
.time-unit p { font-size: 0.7rem; text-transform: uppercase; }

/* TARJETA QUE SE EXPANDE */
.card {
    background: white; padding: 30px; border-radius: 4px;
    border: 1px solid var(--crema-oscuro); width: 100%; max-width: 500px;
    transition: all 0.7s ease-in-out;
}

.quote { font-size: 0.9rem; font-style: italic; margin-bottom: 10px; line-height: 1.6; }

#hug-animation {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: all 0.8s ease-in-out;
}

#hug-animation.revelado { max-height: 500px; opacity: 1; margin-top: 25px; }

#hug-animation img {
    width: 220px; height: 220px; object-fit: cover;
    border-radius: 8px; border: 5px solid white;
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    animation: beat 1.2s infinite;
}

@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

button {
    padding: 12px 25px; background: transparent;
    border: 1px solid var(--dorado-mate); color: var(--dorado-mate);
    cursor: pointer; transition: 0.3s; font-family: inherit;
}

button:hover { background: var(--dorado-mate); color: white; }

.petalo { position: fixed; top: -50px; font-size: 1.5rem; pointer-events: none; z-index: 1000; animation: caer linear forwards; }
@keyframes caer { to { transform: translateY(110vh) rotate(360deg); opacity: 0; } }

.reveal-card {
    background: white; padding: 25px; border-radius: 8px; margin-top: 50px;
    border: 1px solid var(--crema-oscuro); opacity: 0;
    transform: translateY(20px); transition: 0.8s all ease;
}
.reveal-card.show { opacity: 1; transform: translateY(0); }
.reveal-card h3 { font-family: 'Playfair Display', serif; color: var(--dorado-mate); margin-bottom: 10px; }