/* --- RESET Y BASE --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --- FONDO CIELO NORUEGO --- */
body {
    /* Gradiente nocturno profundo (Aurora vibes sutiles) */
    background: radial-gradient(circle at center, #0b1026 0%, #000000 100%);
    color: white;
    font-family: 'Montserrat', sans-serif;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    /* La transición mágica de 1.5s cuando cambiemos a la foto */
    transition: background-image 1.5s ease-in-out, background-color 1.5s ease-in-out;
    background-size: cover;
    background-position: center;
}

/* --- ESTRELLAS (STARS) --- */
#star-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    /* Detrás de la nieve (z-index 5) y del contenido */
    pointer-events: none;
}

.star {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.3;
    animation: twinkle infinite alternate;
}

@keyframes twinkle {
    0% {
        opacity: 0.2;
        transform: scale(0.8);
        box-shadow: 0 0 2px white;
    }

    100% {
        opacity: 1;
        transform: scale(1.2);
        box-shadow: 0 0 5px white;
    }
}

/* ... (Mantén tu CSS de nieve, vistas y tarjetas igual) ... */
/* --- VISTAS --- */
.view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: opacity 1s ease;
}

/* Clase utilitaria para ocultar la tarjeta al inicio */
.hidden {
    display: none !important;
    opacity: 0;
}

/* --- ANIMACIÓN DE SALIDA (ZOOM + FADE) --- */
.zoom-out {
    animation: zoomExit 1.5s forwards ease-in-out;
}

@keyframes zoomExit {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(5);
        opacity: 0;
    }
}

/* --- CAJAS DE CRISTAL --- */
.glass-box,
.glass-card {
    /* 1. DEGRADADO MÁS OSCURO */
    /* Usamos un degradado sutil de negro muy oscuro a un gris oscuro semitransparente */
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(54, 53, 53, 0.65));

    /* El blur se mantiene para el efecto vidrio */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    /* Borde más sutil para que contraste con el fondo oscuro */
    border: 1px solid rgba(255, 255, 255, 0.252);
    border-radius: 25px;
    text-align: center;

    /* 2. PADDING MÁS AMPLIO */
    /* Antes era aprox 2rem o 3rem. Ahora 4rem (aprox 64px) da mucha elegancia */
    padding: 4rem;

    /* Aseguramos que no se salga de la pantalla */
    width: 90%;
    max-width: 600px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.8);
    /* Sombra más fuerte */
}

/* --- NIEVE --- */
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    /* Detrás del texto */
}

.snowflake {
    position: absolute;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(110vh);
    }
}

/* --- TIPOGRAFÍA --- */
#countdown {
    font-size: 4rem;
    font-weight: bold;
    color: #ffd700;
    margin-top: 10px;
}

#card-title {
    font-family: 'Great Vibes', cursive;
    font-size: 3rem;
    color: #ffd700;
}

#card-text {
    font-size: 1.2rem;
    line-height: 1.5;
}

.divider {
    font-size: 2rem;
    margin: 15px 0;
}

.loader {
    font-size: 60px;
}

/* --- OPCIÓN B: CAÍDA DESDE ARRIBA --- */
@keyframes dropDown {
    0% {
        opacity: 0;
        /* Empieza 200px arriba */
        transform: translateY(-200px) scale(0.9);
    }

    70% {
        /* Rebote suave al caer */
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.glass-card.animate-in {
    animation: dropDown 1.5s ease-out forwards;
}

/* IMPORTANTE: Ajuste para móviles */
/* En el móvil 4rem es demasiado grande, así que lo reducimos un poco */
@media (max-width: 600px) {

    .glass-box,
    .glass-card {
        padding: 2.5rem;
        /* En celular se mantiene cómodo */
    }
}