/* ============================================
   MOBILE FIXES V2 - Arreglos de Overflow y Centrado
   ============================================ */

/* RESET GLOBAL PARA PREVENIR OVERFLOW */
* {
    box-sizing: border-box;
}

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

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

/* ============================================
   MOBILE: 0px - 768px
   ============================================ */
@media screen and (max-width: 768px) {

    /* CONTENEDORES */
    .container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        overflow-x: hidden !important;
    }

    /* TODAS LAS SECCIONES */
    .section {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* SECCIONES ELEVADAS */
    .section-elevated,
    .section-elevated-1,
    .section-elevated-2,
    .section-elevated-3 {
        width: 100% !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden !important;
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* IMÁGENES Y MEDIA */
    img,
    video,
    iframe,
    svg {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* GRIDS Y LAYOUTS */
    .grid {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* STATS SECTION */
    .stats__container {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 0 1rem !important;
    }

    .stats__card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* SERVICES SECTION */
    .services__grid,
    .services__detailed-grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        width: 100% !important;
    }

    .service__card,
    .service__detailed-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* BENEFITS SECTION */
    .benefits__container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .benefits__list {
        width: 100% !important;
    }

    .benefit__item {
        width: 100% !important;
        font-size: 0.95rem !important;
    }

    .benefits__image {
        text-align: center !important;
        width: 100% !important;
    }

    /* SECTORES - PRINCIPAL FIX */
    .sectors__grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .sector__card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 1.5rem !important;
    }

    .sector__services-list,
    .sector__benefits {
        width: 100% !important;
        padding-left: 0 !important;
    }

    /* APPROACH SECTION (SECTORES) */
    .approach__container {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .approach__data,
    .approach__image {
        width: 100% !important;
        max-width: 100% !important;
    }

    .approach__tabs {
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }

    .approach__tab {
        width: 100% !important;
        text-align: center !important;
    }

    .approach__content-wrapper {
        width: 100% !important;
        padding: 1.5rem 1rem !important;
    }

    .approach__steps {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .approach__step {
        width: 100% !important;
        padding: 1.5rem !important;
    }

    /* REASONS GRID */
    .reasons__grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .reason__card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1.5rem !important;
    }

    /* MVV SECTION (NOSOTROS) */
    .mvv__grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .mvv__card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 2rem 1.5rem !important;
    }

    /* ABOUT SECTION */
    .about__content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }

    .about__features {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .feature__item {
        width: 100% !important;
        flex-direction: column !important;
        text-align: center !important;
    }

    /* CONTACT SECTION */
    .contact__container {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }

    .contact__details {
        width: 100% !important;
    }

    .contact__form {
        width: 100% !important;
    }

    .form__group {
        width: 100% !important;
    }

    .form__group--half {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    /* PROCESS TIMELINE */
    .process__timeline {
        width: 100% !important;
        padding: 0 !important;
    }

    .timeline__item {
        width: 100% !important;
        padding: 1.5rem 1rem !important;
    }

    /* ADDITIONAL SERVICES */
    .additional__grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .additional__card {
        width: 100% !important;
        padding: 1.5rem !important;
    }

    /* CTA SECTION */
    .cta__container {
        width: 100% !important;
        padding: 2rem 1.5rem !important;
        text-align: center !important;
    }

    .cta__title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    .cta__description {
        font-size: 1rem !important;
    }

    /* FOOTER */
    .footer__content {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        text-align: center !important;
    }

    /* PAGE HERO */
    .page-hero__container {
        padding: 2rem 1rem !important;
        width: 100% !important;
    }

    .page-hero__title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }

    .page-hero__description {
        font-size: 1rem !important;
    }

    /* SECTORS LIST EN HERO */
    .sectors-list {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    .sectors-list > div {
        font-size: 0.9rem !important;
    }

    .sectors-list > div span {
        font-size: 0.85rem !important;
    }

    /* TÍTULOS Y TEXTOS */
    .section__title {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        text-align: center !important;
        padding: 0 1rem !important;
    }

    .section__description {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        text-align: center !important;
        padding: 0 1rem !important;
    }

    /* BOTONES */
    .button,
    .button-premium,
    .button-secondary,
    .button-outline {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem 1.5rem !important;
        font-size: 0.95rem !important;
        justify-content: center !important;
    }

    /* TABS BADGES (SECTORES) */
    .tab__badge {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.75rem !important;
        white-space: nowrap !important;
    }

    /* APPROACH ICON WRAPPER */
    .approach__icon-wrapper {
        width: 60px !important;
        height: 60px !important;
        font-size: 1.75rem !important;
    }

    /* UTILITY CLASSES MOBILE OVERRIDES */
    .img-diagram-container {
        padding: 1rem !important;
        margin: 1.5rem 0 !important;
        width: 100% !important;
    }

    .img-corporate,
    .img-hero,
    .img-elevated {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0.75rem !important;
    }

    /* CENTRADO DE TODO */
    .center-mobile {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* QUITAR ANIMACIONES EN MÓVIL PARA MEJOR PERFORMANCE */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   SMALL MOBILE: 0px - 480px
   ============================================ */
@media screen and (max-width: 480px) {

    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .section__title {
        font-size: 1.5rem !important;
    }

    .page-hero__title {
        font-size: 1.75rem !important;
    }

    .stats__card,
    .service__card,
    .sector__card,
    .reason__card {
        padding: 1.25rem !important;
    }

    .cta__container {
        padding: 1.5rem 1rem !important;
    }

    .cta__title {
        font-size: 1.5rem !important;
    }

    .button,
    .button-premium,
    .button-secondary {
        padding: 0.9rem 1.25rem !important;
        font-size: 0.9rem !important;
    }
}

/* ============================================
   TABLET: 769px - 1024px
   ============================================ */
@media screen and (min-width: 769px) and (max-width: 1024px) {

    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }

    .sectors__grid {
        grid-template-columns: 1fr !important;
    }

    .services__grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ============================================
   HELPER CLASSES
   ============================================ */
.mobile-hide {
    display: none !important;
}

@media screen and (min-width: 769px) {
    .mobile-hide {
        display: block !important;
    }
}

.mobile-show {
    display: block !important;
}

@media screen and (min-width: 769px) {
    .mobile-show {
        display: none !important;
    }
}