/* ===================================
   MAIN.CSS - Archivo Principal
   =================================== */

/* Base - Estilos fundamentales */
@import url('base/variables.css');
@import url('base/reset.css');
@import url('base/typography.css');

/* Components - Componentes reutilizables */
@import url('components/navbar.css');
@import url('components/footer.css');
@import url('components/buttons.css');
@import url('components/forms.css');
@import url('components/cards.css');
@import url('components/cookies-banner.css');

/* Layout - Estructura de página */
@import url('layout/sections.css');

/* Pages - Estilos específicos por página */
@import url('pages/home.css');
@import url('pages/proyectos.css');
@import url('pages/memorias.css');
@import url('pages/legal-pages.css');

/* ===================================
   UTILIDADES GLOBALES
   =================================== */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

/* ===================================
   HELPERS
   =================================== */

.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

/* Accesibilidad */
body.keyboard-nav *:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ===================================
   RESPONSIVE UTILITIES
   =================================== */

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .section {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .section {
        padding: 40px 0;
    }
}