/* 
   ========================================
   SOLUCIÓN DEFINITIVA PARA EL LAYOUT
   ========================================
   
   Este archivo CSS específico contiene reglas con alta especificidad (!important)
   para asegurar que las categorías aparezcan debajo del contenido principal
   en la página de inicio, ignorando cualquier estructura de columnas.
*/

/* Esconder completamente las estructuras de columnas en la página principal */
body.homepage .three-column-grid {
    display: none !important;
}

body.homepage .left-sidebar,
body.homepage .right-sidebar {
    display: none !important;
}

/* Forzar que todo el contenido se muestre en una sola columna */
body.homepage .main-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Asegurar que cada sección ocupe todo el ancho */
body.homepage section {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    position: relative !important;
}

/* Asegurar que las categorías se muestren en grid */
body.homepage .categories-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 2rem !important;
}

/* Asegurar que el hero section está correctamente posicionado */
body.homepage .hero-section {
    margin-top: 0 !important;
    padding-top: 120px !important;
}

/* Ajustar el espacio entre secciones */
body.homepage .categories-section {
    margin-top: 3rem !important;
}

/* Estilos específicos para dispositivos móviles */
@media (max-width: 768px) {
    body.homepage .hero-content {
        flex-direction: column !important;
    }
    
    body.homepage .hero-visual {
        display: none !important;
    }
    
    body.homepage .categories-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Asegurar que la clase main-content no tenga estructura de columnas */
body.homepage .main-content {
    display: block !important;
    width: 100% !important;
}

/* Anular estilos específicos que puedan estar causando el problema */
body.homepage .main-content > .container {
    display: block !important;
}