/* 
   style.css - Archivo CSS Principal
   Manufacturas Angelitos SAC
   Importa todos los módulos CSS en el orden correcto
   
   CAMBIOS EN ESTA VERSIÓN:
   1. Archivos renombrados para evitar conflictos
   2. Archivos vacíos eliminados
   3. Orden de imports optimizado
*/

/* ===== IMPORTACIÓN DE UTILIDADES ===== */
/* 1. Variables CSS (colores, fuentes, tamaños) */
@import url('utilities/_variables.css');

/* 2. Reset CSS (normaliza estilos entre navegadores) */
@import url('utilities/_reset.css');

/* 3. Estilos globales y clases utilitarias */
@import url('utilities/_global.css');

/* 4. Utilidades adicionales */
@import url('utilities/_utilities.css');

/* ===== IMPORTACIÓN DE COMPONENTES ===== */
/* 5. Header (logo, información superior) */
@import url('components/_header.css');

/* 6. Navegación (menú principal) */
@import url('components/_nav.css');

/* 7. Footer (información de contacto, enlaces) */
@import url('components/_footer.css');

/* 8. Botones (estilos personalizados para botones) */
@import url('components/_buttons.css');

/* 9. Carrusel (componente de slider principal) */
@import url('components/_carousel.css');

/* 10. WhatsApp (botón flotante de contacto) */
@import url('components/_whatsapp.css');

/* 11. Product Cards (cards de productos reutilizables) */
@import url('components/_product-cards.css'); /* ← RENOMBRADO de _productos.css */

/* ===== IMPORTACIÓN DE PÁGINAS ===== */
/* NOTA: Solo crear archivos para estilos ESPECÍFICOS de página */
/* La mayoría usa componentes reutilizables */

/* 12. Marcas (estilos específicos para página marcas.html) */
@import url('pages/_marcas.css');

/* 13. Productos (estilos específicos para página productos.html) */
@import url('pages/_productos-page.css'); /* ← RENOMBRADO de _productos.css */

/* 14. Calidad (estilos específicos para página calidad.html) */
@import url('pages/_calidad.css');

/* ELIMINADOS (archivos vacíos):
   @import url('pages/_contacto.css');
   @import url('pages/_home.css'); 
   @import url('pages/_nosotros.css');
*/

/* ===== ESTILOS GLOBALES ADICIONALES ===== */
/* Correcciones específicas para Bootstrap si son necesarias */
.bootstrap-fix {
    /* Ejemplo: Sobreescribir estilos específicos de Bootstrap si es necesario */
}

/* Asegurar que todos los enlaces tengan cursor pointer */
a, button, .btn {
    cursor: pointer;
}

/* Mejorar scrolling suave */
html {
    scroll-behavior: smooth;
}

/* Optimizar imágenes por defecto */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Estilos para contenido tipográfico mejorado */
.content-rich h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.content-rich p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

.content-rich ul, .content-rich ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

/* ===== MEDIA QUERIES GLOBALES ===== */

/* Pantallas muy grandes */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* Pantallas pequeñas (optimización móvil) */
@media (max-width: 575.98px) {
    body {
        font-size: 0.95rem;
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

/* Modo alto contraste */
@media (prefers-contrast: high) {
    .btn,
    .nav-link,
    .card {
        border: 1px solid currentColor;
    }
}

/* Reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ===== REGLAS DE DEBUG (SOLO EN DESARROLLO) ===== */
/*
.debug * {
    outline: 1px solid red !important;
}

.debug-grid {
    background-image: linear-gradient(rgba(255,0,0,0.1) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255,0,0,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}
*/

/* ===== FIN DEL ARCHIVO PRINCIPAL ===== */