/**
 * FIX: Eliminar scroll horizontal no deseado en móviles
 * 
 * Problema común: Espacio en blanco a la derecha en vista móvil
 * Causa: Elementos que se salen del viewport
 * 
 * Solución: Controlar overflow y width en elementos principales
 */

/* ========================================================================
   SOLUCIÓN GLOBAL - Prevenir scroll horizontal
   ======================================================================== */

html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
}

/* Todos los contenedores principales */
#page,
#content,
.site,
.site-content {
    /* overflow-x: hidden; */
    max-width: 100%;
    width: 100%;
}

/* Contenedores de secciones */
section,
.elementor-section {
    max-width: 100%;
    overflow-x: hidden;
}

/* Contenedores de columnas */
.elementor-column,
.elementor-column-wrap {
    max-width: 100%;
    overflow-x: hidden;
}

/* Contenedores de widgets */
.elementor-widget-wrap {
    max-width: 100%;
    overflow-x: hidden;
}

/* Filas y contenedores */
.row,
.container,
.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

/* ========================================================================
   ELEMENTOS ESPECÍFICOS QUE SUELEN CAUSAR PROBLEMAS
   ======================================================================== */

/* Imágenes */
img {
    max-width: 100%;
    height: auto;
}

/* Videos y embeds */
iframe,
video,
embed,
object {
    max-width: 100%;
}

/* Pre y code blocks */
pre,
code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
}

/* Tablas */
table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* ========================================================================
   FIX ESPECÍFICO PARA ELEMENTOS COMUNES
   ======================================================================== */

/* Headers y footers */
header,
footer {
    max-width: 100%;
    /* overflow-x: hidden; */
}

/* Navegación */
nav {
    max-width: 100%;
    /* overflow-x: hidden; */
}

/* Divs genéricos */
div {
    max-width: 100%;
    box-sizing: border-box;
}

/* ========================================================================
   MODO DEBUG (Comentar en producción)
   ======================================================================== */

/* Descomentar para ver qué elemento causa el problema:
* {
    outline: 1px solid red !important;
}
*/

/* ========================================================================
   MOBILE ESPECÍFICO
   ======================================================================== */

@media (max-width: 1024px) {

    /* Asegurar que en móvil NO HAY scroll horizontal */
    html,
    body {
        /* overflow-x: hidden !important; */
        max-width: 100vw !important;
        width: 100% !important;
    }

    /* Contenedores principales */
    #page,
    #content,
    .site,
    .site-content,
    main {
        /* overflow-x: hidden !important; */
        max-width: 100vw !important;
    }

    /* Secciones de Elementor */
    .elementor-section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .elementor-container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ========================================================================
   FIX PARA ELEMENTOS CON POSICIÓN ABSOLUTA
   ======================================================================== */

*[style*="position: absolute"],
*[style*="position:absolute"] {
    max-width: 100vw;
}

/* ========================================================================
   FIX PARA MÁRGENES NEGATIVOS
   ======================================================================== */

@media (max-width: 768px) {

    /* Resetear márgenes negativos que causen overflow */
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}