/* Fix para prevenir scroll horizontal en móviles */

/* Prevenir overflow horizontal en todo el documento */
html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Clases de utilidad para el menú móvil */
.tw-translate-x-0 {
    transform: translateX(0) !important;
    transition: transform 0.3s ease-in-out;
}

.tw--translate-x-full {
    transition: transform 0.3s ease-in-out;
}

/* Asegurar que el menú móvil tenga el z-index correcto */
.mobile-menu {
    z-index: 9999;
}

/* Asegurar que los contenedores no causen overflow */
.container {
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
}

/* Fix específico para pantallas muy pequeñas (375px o menos) */
@media (max-width: 375px) {
    /* Reducir padding en contenedores */
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Asegurar que el nav no se desborde */
    nav {
        max-width: 100%;
    }

    /* Reducir gaps en elementos flex para pantallas muy pequeñas */
    .tw-gap-6 {
        gap: var(--size-4) !important;
    }

    /* Asegurar que las secciones no se desborden */
    section {
        overflow-x: hidden;
    }

    /* Ajustar el header para pantallas muy pequeñas */
    .header .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Fix adicional para todos los móviles */
@media (max-width: 767px) {
    /* Prevenir que las imágenes causen overflow */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Asegurar que las filas no se desborden */
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* Ajustar columnas */
    [class*="col-"] {
        padding-left: 10px;
        padding-right: 10px;
    }
}