/* ===================================================
   MAIN STYLES - AquaLive Index Page
   Archivo principal que importa todos los módulos CSS
   =================================================== */

/* Importar módulos CSS en el orden correcto */
@import url('variables.css');    /* Variables primero */
@import url('base.css');         /* Estilos base */
@import url('logo.css');         /* Estilos del logo */
@import url('components.css');   /* Componentes */
@import url('animations.css');   /* Animaciones */
@import url('responsive.css');   /* Responsive al final */

/* ===================================================
   FUENTES EXTERNAS
   =================================================== */

/* Fuentes optimizadas de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@700;900&family=Outfit:wght@400;600&display=swap');

/* ===================================================
   ESTILOS ADICIONALES GLOBALES
   Solo estilos que no encajan en otros módulos
   =================================================== */

/* Preloader para conexiones lentas */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.preloader.hidden {
    opacity: 0;
    pointer-events: none;
}

.preloader-logo {
    color: var(--primary-blue);
    font-size: 2rem;
    font-weight: 900;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* Estilos para debugging (solo en desarrollo) */
.debug-info {
    position: fixed;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-family: monospace;
    font-size: 12px;
    z-index: 1000;
    display: none;
}

body.debug .debug-info {
    display: block;
}

/* Clase para movimiento reducido */
body.reduced-motion * {
    animation-duration: 0.3s !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
}

body.reduced-motion .splash-container {
    animation: fadeInFast 0.3s ease-out forwards !important;
}

@keyframes fadeInFast {
    from { opacity: 0; }
    to { opacity: 1; }
}