/* =================================================================
   RESPONSIVE FIXES - Mobile & Tablet
   Aplicado globalmente para corregir overflow y mejorar UX en
   pantallas < 900px, < 768px, < 480px

   Este archivo NO modifica nada en desktop (>= 901px).
   Para revertir, simplemente eliminar la referencia a este archivo.
   ================================================================= */

/* --- FIX GLOBAL: Prevent horizontal overflow on mobile/tablet --- */
@media (max-width: 900px) {
    /* Clip all top-level containers so AOS animations and nav overflow don't cause body scrollWidth > viewport */
    nav, main, footer {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* --- FIX CRITICO: flex-basis overflow en info sections --- */
@media (max-width: 900px) {
    /* Clip AOS fade-left/fade-right and floating-img rotation that cause horizontal overflow */
    .servicios-nuevo {
        overflow: hidden !important;
    }

    .servicios-nuevo__image {
        overflow: hidden !important;
    }

    .servicios-nuevo__text {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .servicios-nuevo__image {
        flex: 1 1 auto !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .servicios-nuevo__content {
        gap: 2rem !important;
    }
}

@media (max-width: 480px) {
    .servicios-nuevo {
        padding: 3rem 1rem !important;
    }

    .servicios-nuevo__title {
        font-size: 1.6rem !important;
    }

    .servicios-nuevo__subtitle {
        font-size: 0.95rem !important;
    }
}

/* --- FIX: .servicios grid overflow (item-1, item-3) --- */
@media (max-width: 768px) {
    .servicios .item-1 {
        grid-column: auto !important;
    }

    .servicios .item-3 {
        grid-area: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* --- FIX: ventaja section padding en mobile --- */
@media (max-width: 768px) {
    .ventajas-container {
        gap: 20px !important;
        padding: 2rem 1rem !important;
    }

    .ventaja-card {
        padding: 1.5rem !important;
    }
}

/* --- FIX: servicios-grid cards en mobile --- */
@media (max-width: 480px) {
    .servicios-grid {
        gap: 20px !important;
    }

    .servicio-inner {
        min-height: auto !important;
        padding: 20px 15px !important;
    }

    .servicio-imagen {
        width: 100px !important;
        height: 100px !important;
    }
}

/* --- FIX: soluciones section imagen fija --- */
@media (max-width: 480px) {
    .soluciones-section .w-24 {
        width: 4rem !important;
        height: 4rem !important;
    }
}