/* =========================================
   ESTILOS GENERALES
   ========================================= */
body {
    background-color: #050505;
    color: white;
    overflow-x: hidden; /* Evita scroll lateral accidental */
}

/* =========================================
   LÓGICA DE NAVEGACIÓN (Single Page App)
   ========================================= */

/* 1. Ocultar todas las secciones que NO tengan la clase 'active' */
/* El !important asegura que esto mande sobre cualquier otra regla de visualización */
.page-section:not(.active) {
    display: none !important;
}

/* 2. Animación de entrada para la sección activa */
.page-section.active {
    animation: fadeIn 0.4s ease-out;
    min-height: 100vh; /* Asegura que cubra al menos toda la pantalla */
}

/* 3. Ajuste de Padding (Espaciado Superior) */
/* Las páginas internas necesitan espacio arriba para que el menú no tape el título */
.page-section.active:not(#inicio) {
    padding-top: 80px; 
}

/* La portada (Inicio) NO lleva padding para que la imagen sea full screen */
#inicio.active {
    padding-top: 0; 
}

/* Definición de la animación de entrada (aparece suavemente desde abajo) */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(5px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* =========================================
   EFECTOS VISUALES ESPECIALES
   ========================================= */

/* --- TEXTURA DE RUIDO (Noise Overlay) --- */
.noise-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    pointer-events: none; /* Permite hacer clic a través de ella */
    z-index: 50; /* Siempre encima de todo */
    
    /* Imagen generada por código (SVG) para no cargar archivos externos pesados */
    background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%221.0%22/%3E%3C/svg%3E');
    
    /* >>> CONTROL DE INTENSIDAD <<< */
    /* 0.05 es sutil. Súbalo a 0.1 o 0.2 para un efecto más "sucio/urbano" */
    opacity: 0.05; 
}

/* --- TEXTO BRILLANTE (Glow) --- */
/* Se usa en el título principal "EL PODER" */
.text-glow {
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}