/* =================================================================
   1. PRELOADER
================================================================= */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-dark-bg); /* Usa la variable de color */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.preloader-logo {
    max-width: 150px; /* Ajusta el tamaño de tu logo */
    width: 40%;
    animation: pulse-logo 1.5s infinite ease-in-out;
}

/* Estado cuando la página ha cargado */
.preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

@keyframes pulse-logo {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
/* ... el resto del archivo se mantiene igual ... */

/* =================================================================
   2. ANIMACIONES DE ENTRADA (para el Hero)
================================================================= */
.hero-title .line {
    display: block;
    overflow: hidden; /* Oculta el texto que se desborda */
}

.hero-title .line .word {
    display: inline-block;
    transform: translateY(110%); /* Mueve las palabras hacia abajo, fuera de la vista */
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}