/* ============================================
   ARCHIVO: index.css
   ============================================ */

/* /css/index.css */

/* ============================================
   ARCHIVO PRINCIPAL - IMPORTS EN ORDEN CORRECTO
   ============================================ */

/* 1. VARIABLES PRIMERO */
@import url('variables.css?v=1.0.0');

/* 2. ESTILOS BASE Y GLOBALES */
@import url('base.css?v=1.0.0');
@import url('layout.css?v=1.0.0');
@import url('components.css?v=1.0.0');
@import url('utilities.css?v=1.0.0');

/* 3. MÓDULOS INDEPENDIENTES */
@import url('header.css?v=1.0.0');
@import url('carousel-main.css?v=1.0.0');
@import url('nosotros-section.css?v=1.0.0'); 
@import url('featured-images.css?v=1.3.0'); /* 🔄 ACTUALIZADO - Botones responsive corregidos */
@import url('articulo-1-section.css?v=1.0.0');
@import url('articulo-2-section.css?v=1.0.0');
@import url('articulo-3-section.css?v=1.0.0');
@import url('carousel-featured.css?v=1.0.0');
@import url('categories-section.css?v=1.0.0');
@import url('weekly-section.css?v=1.0.0');
@import url('footer.css?v=1.0.0');

/* 
📝 NOTA SOBRE VERSIONADO:
- Incrementa la versión cada vez que modifiques un archivo CSS
- El navegador descargará automáticamente la nueva versión
- Formato recomendado: v=MAJOR.MINOR.PATCH
  * MAJOR: Cambios grandes que rompen compatibilidad
  * MINOR: Nuevas características compatibles
  * PATCH: Correcciones de bugs pequeños

Ejemplo de actualización:
- v=1.0.0 → v=1.0.1 (pequeña corrección)
- v=1.0.0 → v=1.1.0 (nueva característica)
- v=1.0.0 → v=2.0.0 (cambio mayor)
*/

/* Nota: responsive.css ha sido eliminado.
   Cada módulo ahora maneja su propio responsive inline. */

/* ============================================
   RESUMEN DE CAMBIOS REALIZADOS
   ============================================ */

/*
✅ CORRECCIONES APLICADAS:

1. utilities.css - CONSOLIDADO
   - Agregadas todas las @keyframes:
     * fadeInUp (ya existía)
     * slideDown (movida desde header.css)
     * shimmer (movida desde footer.css)
     * pulse (movida desde categories-section.css)
     * loading (movida desde carousel-featured.css)
     * spin (movida desde carousel-featured.css)
   - Agregada clase .mobile-device
   - Agregadas media queries de accesibilidad

2. components.css - MEJORADO
   - Agregados estilos reutilizables de modal-video
   - Movidos desde carousel-featured.css

3. header.css - CORREGIDO
   - Eliminada definición de @keyframes slideDown
   - Usa animación desde utilities.css
   - Agregado responsive inline

4. footer.css - CORREGIDO
   - Eliminada definición de @keyframes shimmer
   - Usa animación desde utilities.css
   - Responsive inline ya existía

5. carousel-main.css - MEJORADO
   - Agregado responsive inline
   - Sin otros cambios (ya estaba correcto)

   nosotros-section.css - NUEVO
   - Nuevo módulo para sección "Nosotros"
   - Incluye estilos y responsive inline

   articulo-1-section.css - NUEVO
   - Nuevo módulo para sección "Artículo 1"
   - Incluye estilos y responsive inline

   articulo-2-section.css - NUEVO
   - Nuevo módulo para sección "Artículo 2"
   - Incluye estilos y responsive inline

   articulo-3-section.css - NUEVO
   - Nuevo módulo para sección "Artículo 3"
   - Incluye estilos y responsive inline

6. carousel-featured.css - CORREGIDO
   - Eliminadas definiciones de @keyframes loading y spin
   - Usa animaciones desde utilities.css
   - Movidos estilos de modal a components.css
   - Agregado responsive inline completo

7. categories-section.css - CORREGIDO
   - Eliminada definición de @keyframes pulse
   - Usa animación desde utilities.css
   - Responsive inline ya existía

8. weekly-section.css - MEJORADO
   - Agregado responsive inline
   - Sin otros cambios (ya estaba correcto)

9. responsive.css - ELIMINADO
   - Distribuido en cada módulo correspondiente
   - Estilos globales movidos a layout.css

10. layout.css - MEJORADO
    - Agregado responsive global para .section-spacing
    - Mantiene solo estilos de estructura general

11. index.css - ACTUALIZADO
    - Eliminado import de responsive.css
    - Reordenados imports en orden lógico
    - Agregada documentación

============================================

✅ VALIDACIÓN DE INDEPENDENCIA:

📁 GLOBALES (No tocan módulos específicos):
   ✓ variables.css - Solo variables CSS
   ✓ base.css - Solo html, body, .content
   ✓ layout.css - Solo estructura general
   ✓ components.css - Solo componentes reutilizables
   ✓ utilities.css - Solo animaciones y utilidades

📁 MÓDULOS (100% independientes):
   ✓ header.css - Solo .modern-header, .navbar-*, .nav-link, etc.
   ✓ footer.css - Solo .modern-footer, .footer-*, .social-*, etc.
   ✓ carousel-main.css - Solo .carousel, .carousel-img, etc.
   ✓ nosotros-section.css - Solo .nosotros-section y descendientes
   ✓ articulo-1-section.css - Solo .articulo-1-section y descendientes
   ✓ articulo-2-section.css - Solo .articulo-2-section y descendientes
   ✓ articulo-3-section.css - Solo .articulo-3-section y descendientes
   ✓ carousel-featured.css - Solo .carousel-featured y descendientes
   ✓ categories-section.css - Solo .categories-* y descendientes
   ✓ weekly-section.css - Solo .weekly-section y descendientes

============================================

🎯 BENEFICIOS DE ESTA ESTRUCTURA:

1. MODULARIDAD TOTAL
   - Cada módulo es completamente independiente
   - Puedes eliminar un módulo sin afectar otros

2. MANTENIBILIDAD
   - Animaciones centralizadas en utilities.css
   - Fácil encontrar y modificar estilos específicos

3. PERFORMANCE
   - Sin código duplicado
   - Reutilización efectiva de componentes

4. ESCALABILIDAD
   - Fácil agregar nuevos módulos
   - Convenciones claras y consistentes

5. RESPONSIVE INLINE
   - Cada módulo controla su propio responsive
   - No hay dependencias entre archivos responsive

============================================

📋 CHECKLIST FINAL:

[✓] Todas las animaciones consolidadas en utilities.css
[✓] Módulos 100% independientes
[✓] Sin código duplicado
[✓] Responsive distribuido correctamente
[✓] Componentes compartidos en components.css
[✓] Variables CSS usadas consistentemente
[✓] Orden de imports correcto en index.css
[✓] Documentación completa incluida
[✓] Accesibilidad considerada (prefers-reduced-motion)
[✓] Optimizaciones de performance aplicadas

============================================
*/