/* 1. Capa de Superposición (Overlay) - Se mantiene */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-color: rgba(0, 0, 0, 0.8); 
    
    display: flex;
    justify-content: center;
    align-items: center;
    
    z-index: 9999;
    opacity: 1;
    transition: opacity 1.5s ease-out; 
}

/* 2. Clase para ocultar - Se mantiene */
.overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* 3. Estilos del Texto Contenedor */
.christmas-text {
    font-size: 5em; 
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    line-height: 1.2; 
    white-space: nowrap; 
}

/* 4. Estilos de la Letra Individual (.letter) - ¡El efecto de Guirnalda! */
.letter {
    color: #555; /* Color inicial oscuro (luz "apagada") */
    display: inline-block; 
    
    /* Animación de luces: Nombre | Duración | Repetición | Tipo de repetición */
    animation: christmasLight 1s infinite alternate;
}

/* Estilos para el espacio entre palabras (¡Importante!) */
.space {
    /* Define el tamaño del espacio en blanco. Puedes ajustarlo. */
    width: 0.5em; 
    /* Necesario para que el width funcione y mantenga el espacio */
    display: inline-block; 
}

/* 3. Estilos del Texto Contenedor */
.christmas-text {
    font-size: 5em; 
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    /* QUITAMOS white-space: nowrap; para permitir que el texto se rompa en varias líneas en móvil */
    line-height: 1.2; 
    max-width: 90%; /* Limita el ancho en general */
}

/* Media Query para Responsividad (móviles) */
@media (max-width: 600px) {
    .christmas-text {
        font-size: 2em; /* Reducido para que quepa el texto largo */
        /* Forzamos que quepa bien en pantallas pequeñas */
        max-width: 100%; 
        /* Añadimos padding horizontal para que no toque los bordes del móvil */
        padding: 0 5px; 
    }
}

/* @keyframes: La animación de Brillo y Color (Rojo y Verde) */
@keyframes christmasLight {
    0% {
        color: #555; 
        text-shadow: none;
    }
    50% {
        color: #e74c3c; /* Rojo brillante */
        text-shadow: 0 0 10px #e74c3c, 0 0 20px #e74c3c;
    }
    100% {
        color: #27ae60; /* Verde brillante */
        text-shadow: 0 0 10px #27ae60, 0 0 20px #27ae60;
    }
}

/* Media Query para Responsividad (móviles) */
@media (max-width: 600px) {
    .christmas-text {
        font-size: 3em; 
    }
}