/* ==========================================
   TABLET
========================================== */

@media (max-width: 1000px) {

    .planes-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .planes-grid {
        grid-template-columns: 1fr;
        max-width: 620px;
        margin: auto;
    }

    .menu,
    .btn-header {
        display: none;
    }


    .menu-toggle {
        display: block;
    }


    .menu.menu-activo {
        position: absolute;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        gap: 0;

        top: 82px;
        left: 0;

        width: 100%;

        padding: 20px 5%;

        background: #3e3022;

        box-shadow:
            0 20px 30px rgba(0,0,0,.20);
    }


    .menu.menu-activo a {
        width: 100%;

        padding: 15px 0;
    }


    .hero {
        min-height: auto;

        padding:
            130px 0 80px;
    }


    .hero-contenido {
        grid-template-columns:
            1fr;

        gap:
            60px;

        padding-top:
            0;
    }


    .hero-texto {
        text-align:
            center;
    }


    .hero-texto > p {
        margin-left:
            auto;

        margin-right:
            auto;
    }


    .hero-botones,
    .hero-confianza {
        justify-content:
            center;
    }


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


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


    .nosotros-grid {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .estadisticas-grid {
        grid-template-columns:
            repeat(2, 1fr);

        row-gap:
            45px;
    }


    .cta-contenido {
        flex-direction:
            column;

        text-align:
            center;
    }


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

    /* CONTACTO */
    .contacto-hero-grid {
        grid-template-columns:
            1fr;
    }

    .contacto-hero-beneficios {
        grid-template-columns:
            1fr;
    }

    .contacto-hero-summary,
    .contacto-hero-card {
        padding-left: 0;
        padding-right: 0;
    }

    .contacto-hero-card {
        min-height:
            auto;
    }

    .contacto-layout {
        grid-template-columns:
            1fr;
    }

    .contacto-informacion {
        position:
            relative;
        top:
            auto;
    }

}


/* ==========================================
   CELULAR
========================================== */

@media (max-width: 650px) {

    .plan-card {
        padding: 28px 23px;
    }

    .ruta-cotizacion {
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 20px;
    }

    .ruta-cotizacion > div:nth-child(2) {
        width: calc(100% - 66px);
    }

    .ruta-cotizacion .btn-principal {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }

    .navbar {
        height:
            72px;
    }

    .header-chatbot {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
    }

    .logo-imagen {
        width:
            155px;
        max-height:
            52px;
    }


    .menu.menu-activo {
        top:
            72px;
    }


    .logo-texto strong {
        font-size:
            18px;
    }


    .hero {
        padding:
            115px 0 65px;
    }


    .hero h1 {
        font-size:
            43px;

        letter-spacing:
            -1px;
    }

    /* CONTACTO */
    .contacto-hero-grid {
        grid-template-columns:
            1fr;
    }

    .contacto-hero-beneficios {
        grid-template-columns:
            1fr;
        gap:
            14px;
    }

    .contacto-hero-summary,
    .contacto-hero-card {
        padding:
            24px 18px;
        border-radius:
            20px;
    }

    .contacto-hero-card {
        min-height:
            auto;
        margin-top:
            20px;
    }

    .contacto-hero-panel-top strong {
        font-size:
            28px;
    }

    .contacto-hero-panel-list > div,
    .contacto-hero-card-item {
        grid-template-columns:
            1fr;
        gap:
            14px;
    }

    .contacto-hero-panel-list i,
    .contacto-hero-card-item i {
        width:
            44px;
        height:
            44px;
    }

    .contacto-hero-card-item {
        padding:
            16px 18px;
        border-radius:
            18px;
    }

    .contacto-hero-card-item div span {
        font-size:
            12px;
    }

    .contacto-hero-card-item div strong {
        font-size:
            15px;
        color:
            #0f172a;
    }

    .contacto-hero-card-footer {
        padding:
            18px;
    }

    .contacto-hero-panel-cta .btn-principal {
        width:
            100%;
    }

    .contacto-layout {
        grid-template-columns:
            1fr;
        gap:
            20px;
    }

    .contacto-informacion {
        position:
            static;
        top:
            auto;
        padding:
            24px;
    }

    .contacto-info-item {
        padding:
            16px 0;
    }

    .contacto-info-icono {
        width:
            44px;
        height:
            44px;
    }

    .contacto-info-item span {
        font-size:
            12px;
    }

    .contacto-info-item strong {
        font-size:
            14px;
    }

    .contacto-hero.summary p,
    .contacto-hero-card p {
        font-size:
            15px;
        color:
            #334155;
    }

    .contacto-hero-texto h1 {
        font-size:
            40px;
    }


    .hero-texto > p {
        font-size:
            16px;
    }


    .hero-botones {
        flex-direction:
            column;
    }


    .btn-principal,
    .btn-secundario {
        width:
            100%;
    }


    .panel-seguridad {
        padding:
            18px;
    }


    .panel-items {
        grid-template-columns:
            1fr;
    }


    .confianza-grid,
    .servicios-grid,
    .estadisticas-grid,
    .footer-grid {
        grid-template-columns:
            1fr;
    }


    .confianza-item {
        border-right:
            none;

        border-bottom:
            1px solid #edf1f5;
    }


    .seccion {
        padding:
            75px 0;
    }


    .servicio-card {
        padding:
            28px;
    }


    .nosotros-visual {
        min-height:
            410px;
    }


    .visual-principal {
        width:
            100%;

        height:
            350px;
    }


    .visual-principal i {
        font-size:
            80px;
    }


    .experiencia-card {
        right:
            10px;
    }


    .estadistica {
        border-right:
            none;
    }


    .cta h2 {
        font-size:
            30px;
    }


    .footer-grid {
        gap:
            35px;
    }

}


/* =========================================================
   NOSOTROS - PANEL CORPORATIVO RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .quienes-nosotros-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 46px;
    }

    .quienes-contenido {
        max-width: none;
    }

    .quienes-compromiso {
        width: 100%;
        max-width: 720px;
    }
}

@media (max-width: 650px) {

    .quienes-somos {
        padding: 66px 0 62px !important;
    }

    .quienes-contenido h2 {
        font-size: clamp(34px, 10vw, 43px);
        letter-spacing: -1px;
    }

    .quienes-contenido > p {
        font-size: 15px;
        line-height: 1.65;
    }

    .quienes-beneficios {
        grid-template-columns: 1fr;
        gap: 17px;
        margin-top: 27px;
    }

    .quienes-boton {
        width: 100%;
        margin-top: 29px;
    }

    .quienes-compromiso {
        padding: 28px 20px 20px;
        border-radius: 18px;
    }

    .quienes-compromiso-cabecera {
        padding-bottom: 20px;
    }

    .quienes-compromiso-cabecera h3 {
        font-size: 25px;
    }

    .compromiso-item {
        align-items: flex-start;
        gap: 13px;
        min-height: 0;
        padding: 16px 14px;
    }

    .compromiso-icono {
        flex-basis: 40px;
        width: 40px;
        height: 40px;
        border-radius: 11px;
        font-size: 18px;
    }

    .compromiso-item strong {
        font-size: 15px;
    }

    .compromiso-item p {
        font-size: 12.5px;
    }
}
/* ==========================================================
   TIENDAS Y LOCALES - RESPONSIVE
========================================================== */


@media (max-width: 1100px) {

    .comercio-hero-grid {
        grid-template-columns:
            1fr 0.9fr;

        gap: 45px;
    }


    .comercio-puntos-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .comercio-soluciones-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .comercio-momentos-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}



@media (max-width: 900px) {

    /* HERO */

    .comercio-hero {
        min-height: auto;

        padding:
            135px 0 75px;
    }


    .comercio-hero-grid {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .comercio-hero-visual {
        width: 100%;

        max-width: 620px;

        margin:
            0 auto;
    }



    /* DIAGNÓSTICO */

    .diagnostico-comercio-grid {
        grid-template-columns:
            1fr;
    }


    .resultado-comercio {
        position: relative;

        top: auto;
    }

}



@media (max-width: 650px) {

    /* HERO */

    .comercio-hero {
        padding:
            120px 0 60px;
    }


    .comercio-hero-contenido h1 {
        font-size: 39px;

        letter-spacing: -1.2px;
    }


    .comercio-hero-contenido > p {
        font-size: 15px;
    }


    .comercio-hero-botones {
        flex-direction: column;
    }


    .comercio-hero-botones .btn {
        width: 100%;

        justify-content: center;
    }


    .comercio-confianza {
        flex-direction: column;

        gap: 11px;
    }



    /* PANEL */

    .comercio-panel {
        padding: 18px;
    }


    .comercio-panel-superior {
        flex-direction: column;

        align-items: flex-start;
    }


    .local-mapa {
        grid-template-columns:
            1fr;
    }


    .local-zona {
        min-height: 85px;
    }


    .comercio-panel-items {
        grid-template-columns:
            1fr;
    }


    .comercio-panel-items > div {
        min-height: 75px;
    }



    /* PUNTOS */

    .comercio-puntos-grid {
        grid-template-columns:
            1fr;
    }


    .comercio-punto-card {
        min-height: auto;
    }



    /* DIAGNÓSTICO */

    .diagnostico-comercio-form {
        padding:
            25px 20px;
    }


    .diagnostico-preguntas {
        grid-template-columns:
            1fr;
    }


    .resultado-comercio {
        padding:
            25px 20px;
    }



    /* SOLUCIONES */

    .comercio-soluciones-grid {
        grid-template-columns:
            1fr;
    }


    .comercio-solucion-card {
        min-height: auto;
    }



    /* MOMENTOS */

    .comercio-momentos-grid {
        grid-template-columns:
            1fr;
    }


    .comercio-momento {
        min-height: auto;
    }

}



@media (max-width: 430px) {

    .comercio-hero-contenido h1 {
        font-size: 34px;
    }


    .resultado-comercio-cabecera h3 {
        font-size: 19px;
    }


    .resultado-comercio-cabecera > i {
        width: 45px;
        height: 45px;

        font-size: 18px;
    }

}


/* ==========================================================
   ==========================================================
   GRIFOS Y OTROS RUBROS - RESPONSIVE
   ==========================================================
========================================================== */


/* ==========================================================
   TABLET GRANDE
========================================================== */

@media (max-width: 1100px) {

    .grifos-hero-grid {
        grid-template-columns:
            1fr 0.9fr;

        gap: 45px;
    }


    .grifos-zonas-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .grifos-soluciones-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .grifos-operacion-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 18px;
    }


    .grifo-operacion-linea {
        display: none;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 900px) {

    .grifos-hero {
        min-height: auto;

        padding:
            135px 0 75px;
    }


    .grifos-hero-grid {
        grid-template-columns:
            1fr;

        gap: 45px;
    }


    .grifos-hero-visual {
        width: 100%;

        max-width: 650px;

        margin:
            0 auto;
    }


    .diagnostico-grifos-grid {
        grid-template-columns:
            1fr;
    }


    .resultado-grifos {
        position: relative;

        top: auto;
    }

}


/* ==========================================================
   CELULAR
========================================================== */

@media (max-width: 650px) {

    .grifos-hero {
        padding:
            120px 0 60px;
    }


    .grifos-hero-contenido h1 {
        font-size: 39px;

        letter-spacing: -1.2px;
    }


    .grifos-hero-contenido > p {
        font-size: 15px;
    }


    .grifos-hero-botones {
        flex-direction: column;
    }


    .grifos-hero-botones .btn {
        width: 100%;

        justify-content: center;
    }


    .grifos-confianza {
        flex-direction: column;

        gap: 11px;
    }


    /* PANEL */

    .grifos-panel {
        padding: 18px;
    }


    .grifos-panel-superior {
        flex-direction: column;

        align-items: flex-start;
    }


    .grifos-mapa {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .grifo-zona {
        min-height: 95px;
    }


    .grifos-panel-items {
        grid-template-columns:
            1fr;
    }


    .grifos-panel-items > div {
        min-height: 75px;
    }


    /* ZONAS */

    .grifos-zonas-grid {
        grid-template-columns:
            1fr;
    }


    .grifo-zona-card {
        min-height: auto;
    }


    /* DIAGNÓSTICO */

    .diagnostico-grifos-form {
        padding:
            25px 20px;
    }


    .grifos-preguntas {
        grid-template-columns:
            1fr;
    }


    .resultado-grifos {
        padding:
            25px 20px;
    }


    /* SOLUCIONES */

    .grifos-soluciones-grid {
        grid-template-columns:
            1fr;
    }


    .grifo-solucion-card {
        min-height: auto;
    }


    /* CICLO */

    .grifos-operacion-grid {
        grid-template-columns:
            1fr;
    }


    .grifo-operacion-card {
        min-height: auto;
    }

}


/* ==========================================================
   CELULAR PEQUEÑO
========================================================== */

@media (max-width: 430px) {

    .grifos-hero-contenido h1 {
        font-size: 34px;
    }


    .grifos-mapa {
        grid-template-columns:
            1fr;
    }


    .grifo-zona {
        min-height: 80px;
    }


    .resultado-grifos-cabecera h3 {
        font-size: 19px;
    }


    .resultado-grifos-cabecera > i {
        width: 45px;
        height: 45px;

        font-size: 18px;
    }

}

/* ==========================================================
   ==========================================================
   MENÚ SECTORES - RESPONSIVE
   CORRECCIÓN FINAL
   ==========================================================
========================================================== */


/* ==========================================================
   TABLET / MENÚ MÓVIL
========================================================== */

@media (max-width: 1000px) {

    .menu-sectores {
        width: 100% !important;

        margin: 0 !important;
    }


    .menu-sectores > summary {
        position: relative;

        width: 100% !important;

        min-height: auto;

        display: flex !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 10px;

        padding: 15px 0 !important;

        margin: 0 !important;

        color: rgba(255, 255, 255, 0.88) !important;

        font-size: 14px;

        font-weight: 600;

        list-style: none;

        cursor: pointer;

        background: transparent !important;

        border: none !important;
    }


    .menu-sectores > summary::-webkit-details-marker {
        display: none;
    }


    .menu-sectores > summary::marker {
        content: "";
    }


    .menu-sectores > summary i {
        font-size: 10px;

        transition:
            transform 0.25s ease;
    }


    .menu-sectores[open] > summary i {
        transform:
            rotate(180deg);
    }


    .menu-sectores > summary::after {
        content: "";

        position: absolute;

        left: 0;
        bottom: 5px;

        width: 40px;
        height: 2px;

        border-radius: 10px;

        background: #20a4f3;

        transform:
            scaleX(0);

        transform-origin:
            left center;

        transition:
            transform 0.25s ease;
    }


    .menu-sectores[open] > summary::after,
    .menu-sectores.activo > summary::after {
        transform:
            scaleX(1);
    }


    /* ======================================================
       SUBMENÚ
    ====================================================== */

    .menu-sectores
    .submenu-sectores {
        position: static !important;

        top: auto !important;
        left: auto !important;

        z-index: auto !important;

        width: 100% !important;

        display: none !important;

        margin:
            2px 0 10px !important;

        padding: 8px !important;

        border:
            1px solid
            rgba(255, 255, 255, 0.08) !important;

        border-radius:
            13px !important;

        background:
            rgba(255, 255, 255, 0.04) !important;

        box-shadow:
            none !important;

        transform:
            none !important;

        opacity: 1 !important;

        visibility: visible !important;

        pointer-events: auto !important;
    }


    .menu-sectores[open]
    .submenu-sectores {
        display: block !important;
    }


    .menu-sectores
    .submenu-sectores::before {
        display: none !important;
    }


    /* ======================================================
       CABECERA
    ====================================================== */

    .submenu-sectores-cabecera {
        display: block !important;

        padding:
            10px 10px 12px !important;

        margin-bottom:
            5px !important;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.07);
    }


    .submenu-sectores-cabecera span {
        display: block !important;

        margin-bottom:
            3px !important;

        color:
            #20a4f3 !important;

        font-size:
            8px !important;

        font-weight:
            800 !important;

        letter-spacing:
            1px;
    }


    .submenu-sectores-cabecera strong {
        display: block !important;

        color:
            #ffffff !important;

        font-size:
            13px !important;
    }


    /* ======================================================
       LINKS
    ====================================================== */

    .menu.menu-activo
    .submenu-sectores > a {
        width: 100% !important;

        min-height: 54px;

        display: flex !important;

        align-items: center !important;

        justify-content:
            flex-start !important;

        gap:
            11px !important;

        padding:
            9px 10px !important;

        margin:
            2px 0 !important;

        border:
            1px solid
            transparent !important;

        border-radius:
            10px !important;

        color:
            #ffffff !important;

        background:
            transparent !important;

        text-align:
            left !important;

        white-space:
            normal !important;
    }


    .menu.menu-activo
    .submenu-sectores > a::before,
    .menu.menu-activo
    .submenu-sectores > a::after {
        display:
            none !important;
    }


    .menu.menu-activo
    .submenu-sectores > a:hover {
        border-color:
            rgba(32, 164, 243, 0.14) !important;

        background:
            rgba(32, 164, 243, 0.08) !important;
    }


    .menu.menu-activo
    .submenu-sectores > a.submenu-activo {
        border-color:
            rgba(32, 164, 243, 0.20) !important;

        background:
            rgba(32, 164, 243, 0.11) !important;
    }


    /* ======================================================
       ICONOS
    ====================================================== */

    .submenu-sector-icono {
        width:
            38px !important;

        height:
            38px !important;

        display:
            grid !important;

        place-items:
            center !important;

        flex:
            0 0 38px;

        margin:
            0 !important;

        border-radius:
            10px;

        color:
            #42b7ff;

        background:
            rgba(32, 164, 243, 0.10);
    }


    .submenu-sector-icono i {
        margin:
            0 !important;

        font-size:
            14px !important;
    }


    /* ======================================================
       TEXTO
    ====================================================== */

    .submenu-sectores > a > div:last-child {
        flex:
            1;

        min-width:
            0;

        margin:
            0 !important;
    }


    .submenu-sectores > a > div:last-child strong {
        display:
            block !important;

        margin:
            0 !important;

        color:
            #ffffff !important;

        font-size:
            10px !important;

        line-height:
            1.35;
    }


    .submenu-sectores > a > div:last-child span {
        display:
            block !important;

        margin-top:
            3px !important;

        color:
            rgba(255, 255, 255, 0.48) !important;

        font-size:
            8px !important;

        line-height:
            1.35;
    }

}


/* ==========================================================
   CELULAR PEQUEÑO
========================================================== */

@media (max-width: 430px) {

    .submenu-sector-icono {
        width:
            35px !important;

        height:
            35px !important;

        flex-basis:
            35px;
    }


    .submenu-sectores-cabecera strong {
        font-size:
            12px !important;
    }


    .submenu-sectores > a > div:last-child strong {
        font-size:
            9px !important;
    }


    .submenu-sectores > a > div:last-child span {
        font-size:
            8px !important;
    }

}


/* ==========================================================
   REDISEÑO CLARO - MENÚ MÓVIL
   Mantiene el mismo menú, pero elimina el azul y el fondo oscuro.
========================================================== */

@media (max-width: 1000px) {

    .menu.menu-activo {
        background: #ffffff !important;
        border-top: 1px solid #e2e5e4 !important;
        box-shadow: 0 14px 28px rgba(39, 49, 58, .09) !important;
    }

    .menu.menu-activo > a,
    .menu-sectores > summary {
        color: #27313a !important;
    }

    .menu-sectores > summary::after {
        background: #b65045 !important;
    }

    .menu-sectores .submenu-sectores {
        border-color: #dfe3e2 !important;
        background: #f8f6f2 !important;
        box-shadow: 0 6px 18px rgba(39, 49, 58, .05) !important;
    }

    .submenu-sectores-cabecera {
        border-bottom-color: #dfe3e2 !important;
    }

    .submenu-sectores-cabecera span {
        color: #b65045 !important;
    }

    .submenu-sectores-cabecera strong,
    .submenu-sectores > a > div:last-child strong {
        color: #27313a !important;
    }

    .submenu-sectores > a > div:last-child span {
        color: #62707a !important;
    }

    .menu.menu-activo .submenu-sectores > a {
        color: #27313a !important;
        background: #ffffff !important;
        border-color: #e6e9e7 !important;
    }

    .menu.menu-activo .submenu-sectores > a:hover,
    .menu.menu-activo .submenu-sectores > a.submenu-activo {
        border-color: #dfb5af !important;
        background: #fff0ed !important;
    }

    .submenu-sector-icono {
        color: #b65045 !important;
        background: #fff0ed !important;
    }

    .hero-contenido,
    .pagina-hero-contenido,
    .contacto-hero-grid,
    .rubro-hero-grid,
    .casa-hero-grid,
    .comercio-hero-grid,
    .institucion-hero-grid,
    .grifos-hero-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 650px) {

    .hero,
    .pagina-hero,
    .rubro-hero,
    .casa-hero,
    .comercio-hero,
    .institucion-hero,
    .grifos-hero {
        min-height: auto !important;
        padding: 112px 0 58px !important;
    }

    .hero h1,
    .pagina-hero h1,
    .rubro-hero h1,
    .casa-hero h1,
    .comercio-hero h1,
    .institucion-hero h1,
    .grifos-hero h1 {
        font-size: clamp(32px, 10vw, 44px) !important;
        line-height: 1.07 !important;
    }
}
/* =========================================================
   NOSOTROS - IMÁGENES RESPONSIVE
========================================================= */

@media (max-width: 650px) {

    .identidad-empresa .identidad-imagen {
        width: 128px;
        height: 96px;
        margin-bottom: 14px;
    }

    .identidad-empresa .identidad-card:nth-child(1) .identidad-imagen img {
        width: 104px;
    }

    .identidad-empresa .identidad-card:nth-child(2) .identidad-imagen img {
        width: 126px;
    }

    .identidad-empresa .identidad-card:nth-child(3) .identidad-imagen img {
        width: 98px;
    }
}


/* =========================================================
   CORRECCIÓN FINAL - ASISTENTE EN CELULAR
   Escritorio no cambia. En móvil queda solamente el círculo IP.
========================================================= */

@media (max-width: 650px) {

    .asistente-seguridad {
        right: 14px !important;
        bottom: 16px !important;
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
    }

    .asistente-boton {
        width: 54px !important;
        min-width: 54px !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 6px !important;
        gap: 0 !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        border-radius: 50% !important;
    }

    .asistente-boton > span:last-child {
        display: none !important;
    }

    .asistente-boton-icono {
        width: 42px !important;
        min-width: 42px !important;
        height: 42px !important;
        flex: 0 0 42px !important;
        margin: 0 !important;

        display: grid !important;
        place-items: center !important;

        border-radius: 50% !important;
    }

    .asistente-panel {
        left: 10px !important;
        right: 10px !important;
        bottom: 80px !important;

        width: auto !important;
        max-width: none !important;
        height: calc(100dvh - 100px) !important;
        max-height: 720px !important;

        border-radius: 18px !important;
    }

    .asistente-form-fila {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   MENÚ MÓVIL - DISEÑO LIMPIO Y COMPACTO
   Corrige espacios, Sectores invisible y tarjeta de usuario angosta.
========================================================= */

@media (max-width: 1250px) {

    /* Panel del menú */
    .header .menu.menu-activo,
    #header .menu.menu-activo {
        position: fixed !important;
        top: 72px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: auto !important;
        max-height: none !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 5px !important;

        margin: 0 !important;
        padding: 16px 18px 28px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        background: #ffffff !important;
        background-image: none !important;
        backdrop-filter: none !important;

        border: 0 !important;
        border-top: 1px solid #e4e9f2 !important;
        box-shadow: 0 18px 35px rgba(15, 23, 42, 0.14) !important;

        z-index: 9998 !important;
    }

    /* Inicio / Servicios / Nosotros / Contacto */
    .header .menu.menu-activo > a,
    #header .menu.menu-activo > a {
        position: relative !important;

        width: 100% !important;
        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 12px 14px !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 11px !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-align: left !important;
        text-decoration: none !important;
    }

    .header .menu.menu-activo > a::after,
    #header .menu.menu-activo > a::after {
        display: none !important;
        content: none !important;
    }

    .header .menu.menu-activo > a:hover,
    .header .menu.menu-activo > a.activo,
    #header .menu.menu-activo > a:hover,
    #header .menu.menu-activo > a.activo {
        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        background: #eef4ff !important;
        border-color: #d8e4ff !important;
    }


    /* =====================================================
       SECTORES - SIEMPRE VISIBLE
    ===================================================== */

    .header .menu.menu-activo > details.menu-sectores,
    #header .menu.menu-activo > details.menu-sectores {
        position: relative !important;

        width: 100% !important;
        min-height: 46px !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .header .menu.menu-activo > details.menu-sectores > summary,
    #header .menu.menu-activo > details.menu-sectores > summary {
        position: relative !important;

        width: 100% !important;
        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;

        margin: 0 !important;
        padding: 12px 14px !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        background: transparent !important;
        border: 1px solid transparent !important;
        border-radius: 11px !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;

        list-style: none !important;
        cursor: pointer !important;
    }

    .header .menu.menu-activo > details.menu-sectores > summary span,
    .header .menu.menu-activo > details.menu-sectores > summary i,
    #header .menu.menu-activo > details.menu-sectores > summary span,
    #header .menu.menu-activo > details.menu-sectores > summary i {
        display: inline-block !important;
        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .header .menu.menu-activo > details.menu-sectores > summary::after,
    #header .menu.menu-activo > details.menu-sectores > summary::after {
        display: none !important;
        content: none !important;
    }

    .header .menu.menu-activo > details.menu-sectores[open] > summary,
    .header .menu.menu-activo > details.menu-sectores.activo > summary,
    #header .menu.menu-activo > details.menu-sectores[open] > summary,
    #header .menu.menu-activo > details.menu-sectores.activo > summary {
        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        background: #eef4ff !important;
        border-color: #d8e4ff !important;
    }

    .header .menu.menu-activo > details.menu-sectores[open] > summary span,
    .header .menu.menu-activo > details.menu-sectores[open] > summary i,
    #header .menu.menu-activo > details.menu-sectores[open] > summary span,
    #header .menu.menu-activo > details.menu-sectores[open] > summary i {
        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;
    }


    /* =====================================================
       SUBMENÚ DE SECTORES
    ===================================================== */

    .header .menu.menu-activo .submenu-sectores,
    #header .menu.menu-activo .submenu-sectores {
        position: static !important;

        width: 100% !important;

        margin: 6px 0 2px !important;
        padding: 8px !important;

        background: #f7f9fc !important;
        background-image: none !important;

        border: 1px solid #e1e7f0 !important;
        border-radius: 13px !important;
        box-shadow: none !important;

        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .header .menu.menu-activo details.menu-sectores:not([open]) .submenu-sectores,
    #header .menu.menu-activo details.menu-sectores:not([open]) .submenu-sectores {
        display: none !important;
    }

    .header .menu.menu-activo details.menu-sectores[open] .submenu-sectores,
    #header .menu.menu-activo details.menu-sectores[open] .submenu-sectores {
        display: block !important;
    }

    .header .menu.menu-activo .submenu-sectores::before,
    #header .menu.menu-activo .submenu-sectores::before {
        display: none !important;
        content: none !important;
    }

    .header .menu.menu-activo .submenu-sectores-cabecera,
    #header .menu.menu-activo .submenu-sectores-cabecera {
        padding: 8px 9px 10px !important;
        margin: 0 0 5px !important;

        border-bottom: 1px solid #e3e8f0 !important;
    }

    .header .menu.menu-activo .submenu-sectores-cabecera span,
    #header .menu.menu-activo .submenu-sectores-cabecera span {
        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;
    }

    .header .menu.menu-activo .submenu-sectores-cabecera strong,
    #header .menu.menu-activo .submenu-sectores-cabecera strong {
        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;
    }

    .header .menu.menu-activo .submenu-sectores > a,
    #header .menu.menu-activo .submenu-sectores > a {
        width: 100% !important;
        min-height: 52px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 11px !important;

        margin: 3px 0 !important;
        padding: 8px 10px !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        background: #ffffff !important;
        border: 1px solid #e7ebf2 !important;
        border-radius: 10px !important;
    }

    .header .menu.menu-activo .submenu-sectores > a::before,
    .header .menu.menu-activo .submenu-sectores > a::after,
    #header .menu.menu-activo .submenu-sectores > a::before,
    #header .menu.menu-activo .submenu-sectores > a::after {
        display: none !important;
        content: none !important;
    }

    .header .menu.menu-activo .submenu-sector-icono,
    #header .menu.menu-activo .submenu-sector-icono {
        width: 38px !important;
        height: 38px !important;
        flex: 0 0 38px !important;

        display: grid !important;
        place-items: center !important;

        margin: 0 !important;

        color: #153faf !important;
        background: #eef4ff !important;
        border-radius: 10px !important;
    }

    .header .menu.menu-activo .submenu-sectores > a > div:last-child strong,
    #header .menu.menu-activo .submenu-sectores > a > div:last-child strong {
        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;
    }

    .header .menu.menu-activo .submenu-sectores > a > div:last-child span,
    #header .menu.menu-activo .submenu-sectores > a > div:last-child span {
        color: #667085 !important;
        -webkit-text-fill-color: #667085 !important;
    }


    /* =====================================================
       CUENTA / ADMINISTRADOR EN MÓVIL
    ===================================================== */

    .header .menu.menu-activo .menu-acceso-movil,
    #header .menu.menu-activo .menu-acceso-movil {
        width: 100% !important;

        display: block !important;

        margin: 10px 0 0 !important;
        padding: 14px 0 0 !important;

        border-top: 1px solid #e2e8f0 !important;
    }

    .header .menu.menu-activo .menu-usuario-movil,
    #header .menu.menu-activo .menu-usuario-movil {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;

        margin: 0 !important;
        padding: 12px !important;

        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;
    }

    .header .menu.menu-activo .menu-usuario-movil-info,
    #header .menu.menu-activo .menu-usuario-movil-info {
        grid-column: 1 / -1 !important;

        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        gap: 10px !important;

        margin: 0 0 3px !important;
        padding: 0 2px 9px !important;

        color: #172033 !important;

        border-bottom: 1px solid #e4e9f1 !important;
    }

    .header .menu.menu-activo .menu-usuario-movil-info strong,
    #header .menu.menu-activo .menu-usuario-movil-info strong {
        display: block !important;
        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;
        font-size: 14px !important;
    }

    .header .menu.menu-activo .menu-usuario-movil-info small,
    #header .menu.menu-activo .menu-usuario-movil-info small {
        display: block !important;
        margin-top: 2px !important;

        color: #667085 !important;
        -webkit-text-fill-color: #667085 !important;

        font-size: 11px !important;
    }

    .header .menu.menu-activo .menu-usuario-movil > a,
    #header .menu.menu-activo .menu-usuario-movil > a {
        width: 100% !important;
        min-height: 42px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;

        margin: 0 !important;
        padding: 9px 10px !important;

        border-radius: 9px !important;

        font-size: 12px !important;
        font-weight: 750 !important;
        text-align: center !important;
        line-height: 1.25 !important;
    }

    .header .menu.menu-activo .menu-usuario-movil > a::after,
    #header .menu.menu-activo .menu-usuario-movil > a::after {
        display: none !important;
        content: none !important;
    }

    .header .menu.menu-activo .menu-usuario-movil .menu-ingresar,
    #header .menu.menu-activo .menu-usuario-movil .menu-ingresar {
        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        background: #ffffff !important;
        border: 1px solid #cfdcff !important;
    }

    .header .menu.menu-activo .menu-usuario-movil .menu-registro,
    #header .menu.menu-activo .menu-usuario-movil .menu-registro {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        background: #153faf !important;
        border: 1px solid #153faf !important;
    }

    /* Usuario no logueado: Ingresar / Regístrate a todo el ancho */
    .header .menu.menu-activo .menu-acceso-movil > a,
    #header .menu.menu-activo .menu-acceso-movil > a {
        width: 100% !important;
        min-height: 44px !important;

        margin: 6px 0 0 !important;
    }
}


/* =========================================================
   CELULAR PEQUEÑO - BOTONES DE CUENTA APILADOS
========================================================= */

@media (max-width: 430px) {

    .header .menu.menu-activo,
    #header .menu.menu-activo {
        padding: 13px 14px 24px !important;
    }

    .header .menu.menu-activo .menu-usuario-movil,
    #header .menu.menu-activo .menu-usuario-movil {
        grid-template-columns: 1fr !important;
    }

    .header .menu.menu-activo .menu-usuario-movil-info,
    #header .menu.menu-activo .menu-usuario-movil-info {
        grid-column: 1 !important;
    }
}


/* =========================================================
   MENÚ HAMBURGUESA - FORZAR EN TODAS LAS PÁGINAS PÚBLICAS
   El mismo botón se muestra siempre en tablet/celular.
========================================================= */

@media (max-width: 1250px) {

    .header .menu-toggle,
    #header .menu-toggle,
    #menuToggle {
        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;
        flex: 0 0 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        position: relative !important;
        z-index: 10001 !important;

        margin: 0 !important;
        padding: 0 !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        border-radius: 10px !important;

        box-shadow: none !important;
        cursor: pointer !important;
    }

    .header .menu-toggle i,
    #header .menu-toggle i,
    #menuToggle i {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 25px !important;
        line-height: 1 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }

    .header .navbar,
    #header .navbar {
        overflow: visible !important;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 650px) {

    .header .menu-toggle,
    #header .menu-toggle,
    #menuToggle {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex-basis: 44px !important;

        border-radius: 9px !important;
    }

    .header .menu-toggle i,
    #header .menu-toggle i,
    #menuToggle i {
        font-size: 24px !important;
    }
}


/* =========================================================
   SERVICIOS - RESPONSIVE FINAL
   Solo corrige la página servicios.php en tablet/celular.
========================================================= */

@media (max-width: 1000px) {

    /* -----------------------------------------------------
       HEADER / MENÚ HAMBURGUESA EN SERVICIOS
    ----------------------------------------------------- */

    body:has(.pagina-hero-servicios) .navbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    body:has(.pagina-hero-servicios) .header-acciones {
        display: none !important;
    }

    body:has(.pagina-hero-servicios) .menu-toggle,
    body:has(.pagina-hero-servicios) #menuToggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;

        margin-left: auto !important;
        padding: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        border-radius: 10px !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        position: relative !important;
        z-index: 10002 !important;
    }

    body:has(.pagina-hero-servicios) .menu-toggle i,
    body:has(.pagina-hero-servicios) #menuToggle i {
        display: block !important;
        margin: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 24px !important;
        line-height: 1 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* -----------------------------------------------------
       TARJETAS DE SERVICIOS
       Tablet: dos columnas cómodas
    ----------------------------------------------------- */

    .servicios-pagina .servicios-detalle-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }

    .servicios-pagina .servicio-detalle-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }


    /* -----------------------------------------------------
       CÓMO TRABAJAMOS
       Tablet: dos columnas, sin desbordarse
    ----------------------------------------------------- */

    .proceso-servicios .proceso-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .proceso-servicios .proceso-linea {
        display: none !important;
    }
}


/* =========================================================
   SERVICIOS - CELULAR
========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    body:has(.pagina-hero-servicios) .menu-toggle,
    body:has(.pagina-hero-servicios) #menuToggle {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
    }


    /* -----------------------------------------------------
       HERO
       Se conserva el diseño actual, solo evita desbordes.
    ----------------------------------------------------- */

    .pagina-hero-servicios .pagina-hero-contenido {
        width: 100% !important;
        min-width: 0 !important;
    }

    .pagina-hero-servicios .pagina-hero-contenido h1,
    .pagina-hero-servicios .pagina-hero-contenido p {
        max-width: 100% !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }


    /* -----------------------------------------------------
       NUESTROS SERVICIOS
       Una sola tarjeta por fila.
    ----------------------------------------------------- */

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

    .servicios-pagina .contenedor {
        width: min(100% - 30px, 1180px) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
    }

    .servicios-pagina .servicios-detalle-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 18px !important;
    }

    .servicios-pagina .servicio-detalle-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 18px !important;

        overflow: hidden !important;

        border-radius: 15px !important;
    }

    /* Imágenes de las seis tarjetas */
    .servicios-pagina .servicio-imagen-cctv,
    .servicios-pagina .servicio-imagen-alarmas,
    .servicios-pagina .servicio-imagen-acceso,
    .servicios-pagina .servicio-imagen-monitoreo,
    .servicios-pagina .servicio-imagen-cercos,
    .servicios-pagina .servicio-imagen-soporte {
        width: 100% !important;
        max-width: 100% !important;
        height: 190px !important;

        margin: 0 0 18px !important;

        overflow: hidden !important;

        border-radius: 12px !important;
    }

    .servicios-pagina .servicio-imagen-cctv img,
    .servicios-pagina .servicio-imagen-alarmas img,
    .servicios-pagina .servicio-imagen-acceso img,
    .servicios-pagina .servicio-imagen-monitoreo img,
    .servicios-pagina .servicio-imagen-cercos img,
    .servicios-pagina .servicio-imagen-soporte img {
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;

        display: block !important;

        object-fit: cover !important;
    }

    /* Mantiene encuadres que ya estaban trabajados */
    .servicios-pagina .servicio-imagen-cctv img {
        object-position: center center !important;
    }

    .servicios-pagina .servicio-imagen-alarmas img {
        object-position: center center !important;
    }

    .servicios-pagina .servicio-imagen-acceso img {
        object-position: center center !important;
    }

    .servicios-pagina .servicio-imagen-monitoreo img {
        object-position: center center !important;
    }

    .servicios-pagina .servicio-imagen-cercos img {
        object-position: center center !important;
    }

    .servicios-pagina .servicio-imagen-soporte img {
        object-position: 55% 18% !important;
    }

    /* Texto normal: nada de palabras partidas verticalmente */
    .servicios-pagina .servicio-detalle-card h3 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 0 10px !important;

        font-size: 22px !important;
        line-height: 1.2 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .servicios-pagina .servicio-detalle-card > p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 15px !important;
        line-height: 1.6 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .servicios-pagina .servicio-detalle-card ul {
        width: 100% !important;

        margin-top: 18px !important;

        gap: 10px !important;
    }

    .servicios-pagina .servicio-detalle-card li {
        width: 100% !important;

        align-items: flex-start !important;

        font-size: 14px !important;
        line-height: 1.45 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .servicios-pagina .servicio-detalle-link {
        width: 100% !important;

        margin-top: 20px !important;

        justify-content: flex-start !important;

        font-size: 14px !important;
    }


    /* -----------------------------------------------------
       CÓMO TRABAJAMOS
       Cuatro etapas verticales y completas.
    ----------------------------------------------------- */

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

    .proceso-servicios .proceso-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 520px !important;

        margin: 34px auto 0 !important;

        gap: 0 !important;
    }

    .proceso-servicios .proceso-card {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;
        padding: 24px 22px !important;

        text-align: center !important;

        background: #ffffff !important;
        border: 1px solid #dce5f0 !important;
        border-radius: 16px !important;

        box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055) !important;
    }

    .proceso-servicios .proceso-numero {
        top: 16px !important;
        right: 18px !important;

        color: #243246 !important;

        font-size: 24px !important;
        line-height: 1 !important;
    }

    .proceso-servicios .proceso-icono {
        width: 64px !important;
        height: 64px !important;

        margin: 0 auto 15px !important;

        border-radius: 17px !important;
    }

    .proceso-servicios .proceso-icono i {
        font-size: 25px !important;
    }

    .proceso-servicios .proceso-card h3 {
        font-size: 18px !important;
        line-height: 1.25 !important;
    }

    .proceso-servicios .proceso-card p {
        max-width: 300px !important;

        margin: 8px auto 0 !important;

        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    /* Línea vertical entre etapas */
    .proceso-servicios .proceso-linea {
        display: block !important;

        width: 2px !important;
        height: 28px !important;

        margin: 0 auto !important;

        background: linear-gradient(
            180deg,
            #c8d6e8,
            #4f8ff7
        ) !important;
    }
}


/* =========================================================
   SERVICIOS - CELULAR PEQUEÑO
========================================================= */

@media (max-width: 430px) {

    .servicios-pagina .contenedor {
        width: min(100% - 24px, 1180px) !important;
    }

    .servicios-pagina .servicio-detalle-card {
        padding: 16px !important;
    }

    .servicios-pagina .servicio-imagen-cctv,
    .servicios-pagina .servicio-imagen-alarmas,
    .servicios-pagina .servicio-imagen-acceso,
    .servicios-pagina .servicio-imagen-monitoreo,
    .servicios-pagina .servicio-imagen-cercos,
    .servicios-pagina .servicio-imagen-soporte {
        height: 175px !important;
    }

    .servicios-pagina .servicio-detalle-card h3 {
        font-size: 21px !important;
    }

    .proceso-servicios .proceso-card {
        padding: 22px 18px !important;
    }
}


/* =========================================================
   NOSOTROS - RESPONSIVE FINAL
   Corrige únicamente la página nosotros.php en tablet/celular.
   Mantiene intacto el diseño de escritorio.
========================================================= */


/* =========================================================
   TABLET / PANTALLAS MEDIANAS
========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------------------
       HEADER / HAMBURGUESA
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .header-acciones {
        display: none !important;
    }

    body:has(.pagina-hero-nosotros) .menu-toggle,
    body:has(.pagina-hero-nosotros) #menuToggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;

        margin-left: auto !important;
        padding: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        border-radius: 10px !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        position: relative !important;
        z-index: 10002 !important;
    }

    body:has(.pagina-hero-nosotros) .menu-toggle i,
    body:has(.pagina-hero-nosotros) #menuToggle i {
        display: block !important;
        margin: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 24px !important;
        line-height: 1 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* -----------------------------------------------------
       MISIÓN / VISIÓN / PROPÓSITO
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .identidad-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;

        width: 100% !important;
        max-width: 680px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 28px !important;
    }


    /* -----------------------------------------------------
       VALORES
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .valores-grid {
        grid-template-columns: 1fr !important;
        align-items: start !important;

        gap: 38px !important;
    }

    body:has(.pagina-hero-nosotros) .valores-contenido {
        width: 100% !important;
        max-width: 680px !important;

        margin: 0 auto !important;
    }

    body:has(.pagina-hero-nosotros) .valores-lista {
        width: 100% !important;
        max-width: 760px !important;

        margin: 0 auto !important;

        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }


    /* -----------------------------------------------------
       NUESTRO ENFOQUE
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .diferencia-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 22px !important;

        width: 100% !important;
        max-width: 760px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 0 !important;
    }
}


/* =========================================================
   NOSOTROS - CELULAR
========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .menu-toggle,
    body:has(.pagina-hero-nosotros) #menuToggle {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
    }


    /* -----------------------------------------------------
       HERO
       Mantiene la foto y diseño actual, solo mejora respiración.
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .pagina-hero-nosotros {
        min-height: auto !important;
        padding-bottom: 70px !important;
    }

    body:has(.pagina-hero-nosotros) .pagina-hero-contenido {
        width: 100% !important;
        min-width: 0 !important;
    }

    body:has(.pagina-hero-nosotros) .pagina-hero-contenido h1 {
        max-width: 100% !important;

        font-size: clamp(39px, 11vw, 48px) !important;
        line-height: 1.03 !important;
        letter-spacing: -1.2px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body:has(.pagina-hero-nosotros) .pagina-hero-contenido > p {
        max-width: 100% !important;

        font-size: 15px !important;
        line-height: 1.7 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body:has(.pagina-hero-nosotros) .pagina-hero-botones {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 12px !important;

        margin-top: 28px !important;
    }

    body:has(.pagina-hero-nosotros) .pagina-hero-botones .btn-principal,
    body:has(.pagina-hero-nosotros) .pagina-hero-botones .btn-secundario {
        width: 100% !important;
        min-height: 52px !important;

        justify-content: center !important;

        margin: 0 !important;
    }


    /* -----------------------------------------------------
       QUIÉNES SOMOS / COMPROMISO
       Conserva la estructura buena que ya tenías.
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .quienes-nosotros-grid {
        grid-template-columns: 1fr !important;

        width: 100% !important;

        gap: 34px !important;
    }

    body:has(.pagina-hero-nosotros) .quienes-contenido,
    body:has(.pagina-hero-nosotros) .quienes-compromiso {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       MISIÓN / VISIÓN / PROPÓSITO
       Una tarjeta completa debajo de otra.
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .identidad-empresa {
        overflow: hidden !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-empresa .contenedor {
        width: min(100% - 32px, 1180px) !important;
        max-width: 100% !important;

        margin-inline: auto !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 18px !important;

        margin: 30px 0 0 !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-card {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;

        display: grid !important;
        grid-template-columns: 118px minmax(0, 1fr) !important;
        grid-template-areas:
            "imagen numero"
            "imagen titulo"
            "imagen texto" !important;
        column-gap: 18px !important;
        row-gap: 5px !important;

        align-items: start !important;

        margin: 0 !important;
        padding: 22px !important;

        overflow: hidden !important;

        border-radius: 16px !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-empresa .identidad-imagen {
        grid-area: imagen !important;

        width: 118px !important;
        height: 105px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-empresa .identidad-imagen img {
        width: 100% !important;
        max-width: 112px !important;
        height: 100% !important;

        object-fit: contain !important;
        object-position: center !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-empresa .identidad-card:nth-child(1) .identidad-imagen img,
    body:has(.pagina-hero-nosotros) .identidad-empresa .identidad-card:nth-child(2) .identidad-imagen img,
    body:has(.pagina-hero-nosotros) .identidad-empresa .identidad-card:nth-child(3) .identidad-imagen img {
        width: 100% !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-numero {
        grid-area: numero !important;

        position: static !important;

        justify-self: end !important;

        margin: 0 !important;

        color: #23354d !important;

        font-size: 27px !important;
        line-height: 1 !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-card h3 {
        grid-area: titulo !important;

        margin: 0 !important;

        color: #17293f !important;

        font-size: 22px !important;
        line-height: 1.2 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-card p {
        grid-area: texto !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 5px 0 0 !important;

        font-size: 14px !important;
        line-height: 1.58 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* -----------------------------------------------------
       VALORES
       Título arriba y cuatro tarjetas completas.
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .valores-empresa {
        overflow: hidden !important;
    }

    body:has(.pagina-hero-nosotros) .valores-empresa .contenedor {
        width: min(100% - 32px, 1180px) !important;
        max-width: 100% !important;

        margin-inline: auto !important;
    }

    body:has(.pagina-hero-nosotros) .valores-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 30px !important;
    }

    body:has(.pagina-hero-nosotros) .valores-contenido {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
    }

    body:has(.pagina-hero-nosotros) .valores-contenido h2 {
        max-width: 100% !important;

        font-size: clamp(34px, 10vw, 42px) !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body:has(.pagina-hero-nosotros) .valores-contenido > p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 18px 0 24px !important;

        font-size: 15px !important;
        line-height: 1.65 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body:has(.pagina-hero-nosotros) .valores-contenido .btn-principal {
        width: 100% !important;
        min-height: 50px !important;

        justify-content: center !important;
    }

    body:has(.pagina-hero-nosotros) .valores-lista {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 14px !important;

        margin: 0 !important;
    }

    body:has(.pagina-hero-nosotros) .valor-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        display: grid !important;
        grid-template-columns: 48px minmax(0, 1fr) !important;
        align-items: start !important;

        gap: 14px !important;

        margin: 0 !important;
        padding: 18px !important;

        border-radius: 15px !important;
    }

    body:has(.pagina-hero-nosotros) .valor-icono {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;

        margin: 0 !important;
    }

    body:has(.pagina-hero-nosotros) .valor-card h3 {
        font-size: 17px !important;
        line-height: 1.25 !important;
    }

    body:has(.pagina-hero-nosotros) .valor-card p {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 5px !important;

        font-size: 13.5px !important;
        line-height: 1.55 !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* -----------------------------------------------------
       NUESTRO ENFOQUE
       01 → 02 → 03 → 04 vertical, sin textos chocándose.
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .diferencia {
        padding: 72px 0 !important;

        overflow: hidden !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia .contenedor {
        width: min(100% - 32px, 1180px) !important;
        max-width: 100% !important;

        margin-inline: auto !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia .encabezado-seccion {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto 32px !important;

        text-align: center !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia .encabezado-seccion h2 {
        max-width: 100% !important;

        font-size: clamp(34px, 9.7vw, 42px) !important;
        line-height: 1.08 !important;
        letter-spacing: -1px !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 560px !important;

        gap: 14px !important;

        margin: 0 auto !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-card {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 0 !important;

        display: grid !important;
        grid-template-columns: 68px minmax(0, 1fr) !important;
        grid-template-areas:
            "icono numero"
            "icono titulo"
            "icono texto" !important;

        column-gap: 16px !important;
        row-gap: 3px !important;

        align-items: start !important;

        margin: 0 !important;
        padding: 20px !important;

        text-align: left !important;

        background: #ffffff !important;
        border: 1px solid #dce6f1 !important;
        border-radius: 16px !important;

        box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05) !important;

        transform: none !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-card:hover {
        transform: none !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-card > i {
        grid-area: icono !important;

        width: 64px !important;
        height: 64px !important;

        margin: 0 !important;

        border-radius: 17px !important;

        font-size: 24px !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-card > span {
        grid-area: numero !important;

        position: static !important;

        justify-self: end !important;

        margin: 0 !important;

        color: #203553 !important;

        font-size: 25px !important;
        line-height: 1 !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-card h3 {
        grid-area: titulo !important;

        margin: 0 !important;

        font-size: 19px !important;
        line-height: 1.25 !important;

        text-align: left !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-card h3::before {
        display: none !important;
        content: none !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-card p {
        grid-area: texto !important;

        width: 100% !important;
        max-width: 100% !important;

        margin: 5px 0 0 !important;

        font-size: 14px !important;
        line-height: 1.55 !important;

        text-align: left !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* -----------------------------------------------------
       ESTADÍSTICAS
       Mantiene una sola columna limpia y centrada.
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .nosotros-estadisticas .estadisticas-grid {
        grid-template-columns: 1fr !important;

        gap: 0 !important;
    }

    body:has(.pagina-hero-nosotros) .nosotros-estadisticas .estadistica {
        width: 100% !important;

        padding: 28px 12px !important;

        border-right: 0 !important;
        border-bottom: 1px solid rgba(32, 53, 83, 0.08) !important;
    }

    body:has(.pagina-hero-nosotros) .nosotros-estadisticas .estadistica:last-child {
        border-bottom: 0 !important;
    }


    /* -----------------------------------------------------
       CTA FINAL
    ----------------------------------------------------- */

    body:has(.pagina-hero-nosotros) .cta .cta-contenido {
        width: min(100% - 24px, 1180px) !important;
        max-width: 100% !important;

        margin-inline: auto !important;

        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}


/* =========================================================
   NOSOTROS - CELULAR PEQUEÑO
========================================================= */

@media (max-width: 430px) {

    body:has(.pagina-hero-nosotros) .identidad-empresa .contenedor,
    body:has(.pagina-hero-nosotros) .valores-empresa .contenedor,
    body:has(.pagina-hero-nosotros) .diferencia .contenedor {
        width: min(100% - 24px, 1180px) !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-card {
        grid-template-columns: 92px minmax(0, 1fr) !important;

        column-gap: 14px !important;

        padding: 18px !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-empresa .identidad-imagen {
        width: 92px !important;
        height: 90px !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-empresa .identidad-imagen img {
        max-width: 90px !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-card h3 {
        font-size: 20px !important;
    }

    body:has(.pagina-hero-nosotros) .identidad-card p {
        font-size: 13.5px !important;
    }

    body:has(.pagina-hero-nosotros) .valor-card {
        grid-template-columns: 44px minmax(0, 1fr) !important;

        padding: 16px !important;
    }

    body:has(.pagina-hero-nosotros) .valor-icono {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-card {
        grid-template-columns: 58px minmax(0, 1fr) !important;

        column-gap: 13px !important;

        padding: 18px 16px !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-card > i {
        width: 56px !important;
        height: 56px !important;

        font-size: 22px !important;
    }

    body:has(.pagina-hero-nosotros) .diferencia-card > span {
        font-size: 23px !important;
    }
}


/* =========================================================
   CASAS - RESPONSIVE FINAL
   Corrige únicamente casas.php en tablet/celular.
   Mantiene el diseño de escritorio.
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    /* -----------------------------------------------------
       HEADER / MENÚ HAMBURGUESA
    ----------------------------------------------------- */

    body:has(.casa-hero) .header-acciones {
        display: none !important;
    }

    body:has(.casa-hero) .menu-toggle,
    body:has(.casa-hero) #menuToggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;

        margin-left: auto !important;
        padding: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        border-radius: 10px !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        position: relative !important;
        z-index: 10002 !important;
    }

    body:has(.casa-hero) .menu-toggle i,
    body:has(.casa-hero) #menuToggle i {
        display: block !important;

        margin: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 24px !important;
        line-height: 1 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* -----------------------------------------------------
       SOLUCIONES PARA EL HOGAR
       Tablet: dos columnas cómodas.
    ----------------------------------------------------- */

    body:has(.casa-hero) .casa-soluciones-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    body:has(.casa-hero) .casa-solucion-card {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
    }
}


/* =========================================================
   CASAS - CELULAR
========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    body:has(.casa-hero) .menu-toggle,
    body:has(.casa-hero) #menuToggle {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        flex: 0 0 44px !important;
    }


    /* -----------------------------------------------------
       HERO
       Mantiene el diseño actual y evita cortes.
    ----------------------------------------------------- */

    body:has(.casa-hero) .casa-hero {
        overflow: hidden !important;
    }

    body:has(.casa-hero) .casa-hero-grid,
    body:has(.casa-hero) .casa-hero-contenido {
        width: 100% !important;
        min-width: 0 !important;
    }

    body:has(.casa-hero) .casa-hero-contenido h1,
    body:has(.casa-hero) .casa-hero-contenido > p {
        max-width: 100% !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    body:has(.casa-hero) .casa-hero-botones {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        gap: 12px !important;
    }

    body:has(.casa-hero) .casa-hero-botones .btn {
        width: 100% !important;
        justify-content: center !important;
    }


    /* -----------------------------------------------------
       PUNTOS DEL HOGAR
       Mantiene las tarjetas una debajo de otra.
    ----------------------------------------------------- */

    body:has(.casa-hero) .casa-puntos-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    body:has(.casa-hero) .casa-punto-card {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;

        padding: 24px !important;
    }


    /* -----------------------------------------------------
       ASESOR INICIAL / RECOMENDACIÓN
    ----------------------------------------------------- */

    body:has(.casa-hero) .asesor-casa-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 24px !important;
    }

    body:has(.casa-hero) .asesor-casa-formulario,
    body:has(.casa-hero) .resultado-casa {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        padding: 24px 20px !important;
    }

    body:has(.casa-hero) .asesor-preguntas {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body:has(.casa-hero) .asesor-campo,
    body:has(.casa-hero) .asesor-campo select {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    body:has(.casa-hero) .resultado-casa-servicios {
        width: 100% !important;
    }

    body:has(.casa-hero) .resultado-servicio {
        width: 100% !important;
        min-width: 0 !important;
    }

    body:has(.casa-hero) .btn-casa-cotizar {
        width: 100% !important;
        justify-content: center !important;
    }


    /* -----------------------------------------------------
       SOLUCIONES PARA EL HOGAR
       Una tarjeta completa por fila.
    ----------------------------------------------------- */

    body:has(.casa-hero) .casa-soluciones {
        overflow: hidden !important;
    }

    body:has(.casa-hero) .casa-soluciones .contenedor {
        width: min(100% - 28px, 1180px) !important;
        max-width: 100% !important;

        margin-inline: auto !important;
    }

    body:has(.casa-hero) .casa-soluciones .encabezado-seccion {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:has(.casa-hero) .casa-soluciones .encabezado-seccion h2,
    body:has(.casa-hero) .casa-soluciones .encabezado-seccion p {
        max-width: 100% !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    body:has(.casa-hero) .casa-soluciones-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 16px !important;

        margin-top: 30px !important;
    }

    body:has(.casa-hero) .casa-solucion-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        min-height: 0 !important;
        height: auto !important;

        margin: 0 !important;
        padding: 24px !important;

        overflow: hidden !important;

        border-radius: 16px !important;
    }

    body:has(.casa-hero) .casa-solucion-icono {
        width: 54px !important;
        height: 54px !important;

        margin: 0 0 18px !important;
    }

    body:has(.casa-hero) .casa-solucion-card h3 {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 21px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    body:has(.casa-hero) .casa-solucion-card > p {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 10px !important;

        font-size: 14px !important;
        line-height: 1.65 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    body:has(.casa-hero) .casa-solucion-card ul {
        width: 100% !important;

        margin: 18px 0 20px !important;
        gap: 10px !important;
    }

    body:has(.casa-hero) .casa-solucion-card li {
        width: 100% !important;

        align-items: flex-start !important;

        font-size: 13px !important;
        line-height: 1.45 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    body:has(.casa-hero) .casa-solucion-card > a {
        width: 100% !important;

        margin-top: 6px !important;

        justify-content: flex-start !important;

        font-size: 13px !important;
    }


    /* -----------------------------------------------------
       ESCENARIOS / OTROS BLOQUES DE CASAS
       Evita tres columnas comprimidas.
    ----------------------------------------------------- */

    body:has(.casa-hero) .casa-escenarios-grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 16px !important;
    }

    body:has(.casa-hero) .casa-escenario {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
    }


    /* -----------------------------------------------------
       ASISTENTE IP
       Que nunca quede cortado por el borde.
    ----------------------------------------------------- */

    body:has(.casa-hero) .asistente-seguridad {
        right: 14px !important;
        left: auto !important;
        bottom: 16px !important;

        transform: none !important;
    }

    body:has(.casa-hero) .asistente-boton {
        transform: none !important;
    }
}


/* =========================================================
   CASAS - CELULAR PEQUEÑO
========================================================= */

@media (max-width: 430px) {

    body:has(.casa-hero) .casa-soluciones .contenedor {
        width: min(100% - 24px, 1180px) !important;
    }

    body:has(.casa-hero) .casa-solucion-card {
        padding: 20px !important;
    }

    body:has(.casa-hero) .casa-solucion-card h3 {
        font-size: 20px !important;
    }

    body:has(.casa-hero) .asesor-casa-formulario,
    body:has(.casa-hero) .resultado-casa {
        padding: 22px 18px !important;
    }

    body:has(.casa-hero) .asistente-seguridad {
        right: 12px !important;
        bottom: 14px !important;
    }
}
/* =========================================================
   UNIVERSIDADES E INSTITUCIONES
   SOLUCIONES INSTITUCIONALES - RESPONSIVE FINAL
   Corrige únicamente las tarjetas de soluciones.
   ========================================================= */


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .institucion-soluciones {
        overflow: hidden !important;
    }

    .institucion-soluciones .contenedor {
        max-width: 100% !important;
    }

    .institucion-soluciones-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 20px !important;
    }

    .institucion-solucion-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
    }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------------------
       SECCIÓN
       ----------------------------------------------------- */

    .institucion-soluciones {
        overflow-x: hidden !important;
    }

    .institucion-soluciones .contenedor {
        width: min(100% - 30px, 1180px) !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* -----------------------------------------------------
       TÍTULO DE LA SECCIÓN
       ----------------------------------------------------- */

    .institucion-soluciones .encabezado-seccion {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    .institucion-soluciones .encabezado-seccion h2,
    .institucion-soluciones .encabezado-seccion p {
        width: 100% !important;
        max-width: 100% !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* -----------------------------------------------------
       TARJETAS
       Una sola tarjeta por fila
       ----------------------------------------------------- */

    .institucion-soluciones-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 18px !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .institucion-solucion-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 24px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;
    }


    /* -----------------------------------------------------
       ICONO
       ----------------------------------------------------- */

    .institucion-solucion-icono {
        flex-shrink: 0 !important;
    }


    /* -----------------------------------------------------
       TÍTULOS
       Evita palabras partidas o comprimidas
       ----------------------------------------------------- */

    .institucion-solucion-card h3 {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        font-size: 21px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* -----------------------------------------------------
       DESCRIPCIÓN
       ----------------------------------------------------- */

    .institucion-solucion-card > p {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 14px !important;
        line-height: 1.6 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* -----------------------------------------------------
       LISTA
       ----------------------------------------------------- */

    .institucion-solucion-card ul {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .institucion-solucion-card li {
        width: 100% !important;
        max-width: 100% !important;

        align-items: flex-start !important;

        font-size: 13px !important;
        line-height: 1.45 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* -----------------------------------------------------
       ENLACE "CONSULTAR..."
       ----------------------------------------------------- */

    .institucion-solucion-card > a {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 20px !important;

        white-space: normal !important;
    }
}


/* =========================================================
   CELULAR PEQUEÑO
   ========================================================= */

@media (max-width: 430px) {

    .institucion-soluciones .contenedor {
        width: min(100% - 24px, 1180px) !important;
    }

    .institucion-solucion-card {
        padding: 20px !important;
    }

    .institucion-solucion-card h3 {
        font-size: 20px !important;
    }
}
/* =========================================================
   EDIFICIOS Y CONDOMINIOS - RESPONSIVE FINAL
   Solo afecta edificios-condominios.php
========================================================= */


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    /* SOLUCIONES */
    body:has(.rubro-hero-edificios) .soluciones-rubro-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 18px !important;
    }

    body:has(.rubro-hero-edificios) .solucion-rubro-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
    }

    body:has(.rubro-hero-edificios) .solucion-rubro-card.destacada {
        transform: none !important;
    }
}


/* =========================================================
   CELULAR
========================================================= */

@media (max-width: 650px) {

    /* -----------------------------------------------------
       HERO - BOTONES
    ----------------------------------------------------- */

    body:has(.rubro-hero-edificios) .rubro-hero-botones {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;
        gap: 12px !important;
    }

    body:has(.rubro-hero-edificios) .rubro-hero-botones .btn {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;
    }


    /* -----------------------------------------------------
       HERO - BENEFICIOS INFERIORES
    ----------------------------------------------------- */

    body:has(.rubro-hero-edificios) .rubro-confianza {
        display: grid !important;
        grid-template-columns: 1fr !important;

        width: 100% !important;

        gap: 10px !important;

        margin-top: 28px !important;
    }

    body:has(.rubro-hero-edificios) .rubro-confianza > div {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;

        gap: 9px !important;

        color: #ffffff !important;

        font-size: 13px !important;
        line-height: 1.35 !important;
    }

    body:has(.rubro-hero-edificios) .rubro-confianza > div span {
        color: #ffffff !important;
        opacity: 1 !important;
    }

    body:has(.rubro-hero-edificios) .rubro-confianza > div i {
        color: #45a9ff !important;

        flex: 0 0 auto !important;
    }


    /* =====================================================
       SOLUCIONES RECOMENDADAS
    ===================================================== */

    body:has(.rubro-hero-edificios) .soluciones-rubro {
        overflow-x: hidden !important;
    }

    body:has(.rubro-hero-edificios) .soluciones-rubro .contenedor {
        width: min(100% - 30px, 1180px) !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* ENCABEZADO */

    body:has(.rubro-hero-edificios)
    .soluciones-rubro
    .encabezado-seccion {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

    body:has(.rubro-hero-edificios)
    .soluciones-rubro
    .encabezado-seccion h2,

    body:has(.rubro-hero-edificios)
    .soluciones-rubro
    .encabezado-seccion p {
        width: 100% !important;
        max-width: 100% !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* -----------------------------------------------------
       UNA TARJETA POR FILA
    ----------------------------------------------------- */

    body:has(.rubro-hero-edificios) .soluciones-rubro-grid {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 18px !important;

        margin: 30px 0 0 !important;
    }


    body:has(.rubro-hero-edificios) .solucion-rubro-card {
        position: relative !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 24px !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* TARJETA DESTACADA */

    body:has(.rubro-hero-edificios)
    .solucion-rubro-card.destacada {
        transform: none !important;

        width: 100% !important;
        max-width: 100% !important;
    }


    /* -----------------------------------------------------
       TÍTULOS
    ----------------------------------------------------- */

    body:has(.rubro-hero-edificios)
    .solucion-rubro-card h3 {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        font-size: 21px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* -----------------------------------------------------
       DESCRIPCIÓN
    ----------------------------------------------------- */

    body:has(.rubro-hero-edificios)
    .solucion-rubro-card > p {
        width: 100% !important;
        max-width: 100% !important;

        font-size: 14px !important;
        line-height: 1.6 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* -----------------------------------------------------
       LISTAS
    ----------------------------------------------------- */

    body:has(.rubro-hero-edificios)
    .solucion-rubro-card ul {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body:has(.rubro-hero-edificios)
    .solucion-rubro-card li {
        width: 100% !important;
        max-width: 100% !important;

        align-items: flex-start !important;

        font-size: 13px !important;
        line-height: 1.45 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    /* -----------------------------------------------------
       ENLACES CONSULTAR...
    ----------------------------------------------------- */

    body:has(.rubro-hero-edificios)
    .solucion-rubro-card > a {
        width: 100% !important;
        max-width: 100% !important;

        margin-top: 20px !important;

        white-space: normal !important;
    }
}


/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width: 430px) {

    body:has(.rubro-hero-edificios)
    .soluciones-rubro .contenedor {
        width: min(100% - 24px, 1180px) !important;
    }

    body:has(.rubro-hero-edificios)
    .solucion-rubro-card {
        padding: 20px !important;
    }

    body:has(.rubro-hero-edificios)
    .solucion-rubro-card h3 {
        font-size: 20px !important;
    }
}
/* =========================================================
   CENTRADO GLOBAL EN MÓVIL
   TODAS LAS PÁGINAS + TODOS LOS SECTORES
   NO MODIFICA ESCRITORIO
========================================================= */

@media (max-width: 650px) {

    /* =====================================================
       HERO / CABECERA PRINCIPAL
       TODAS LAS PÁGINAS
    ===================================================== */

    .hero-texto,
    .pagina-hero-contenido,
    .rubro-hero-contenido,
    .casa-hero-contenido,
    .comercio-hero-contenido,
    .institucion-hero-contenido,
    .grifos-hero-contenido,
    .contacto-hero-texto {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* =====================================================
       TÍTULOS PRINCIPALES H1
    ===================================================== */

    .hero h1,
    .pagina-hero h1,
    .rubro-hero h1,
    .casa-hero h1,
    .comercio-hero h1,
    .institucion-hero h1,
    .grifos-hero h1,
    .contacto-hero h1 {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    /* =====================================================
       SPAN AZUL DENTRO DE LOS TÍTULOS
    ===================================================== */

    .hero h1 span,
    .pagina-hero h1 span,
    .rubro-hero h1 span,
    .casa-hero h1 span,
    .comercio-hero h1 span,
    .institucion-hero h1 span,
    .grifos-hero h1 span,
    .contacto-hero h1 span {
        text-align: center !important;
    }


    /* =====================================================
       DESCRIPCIÓN DEBAJO DEL TÍTULO
    ===================================================== */

    .hero-texto > p,
    .pagina-hero-contenido > p,
    .rubro-hero-contenido > p,
    .casa-hero-contenido > p,
    .comercio-hero-contenido > p,
    .institucion-hero-contenido > p,
    .grifos-hero-contenido > p,
    .contacto-hero-texto > p {
        width: 100% !important;
        max-width: 560px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* =====================================================
       ETIQUETAS SUPERIORES
       Ej:
       IP SEGURIDAD INTELIGENTE 24/7
       SEGURIDAD INSTITUCIONAL
       SEGURIDAD PARA EDIFICIOS...
    ===================================================== */

    .hero .etiqueta-seccion,
    .pagina-hero .etiqueta-seccion,
    .rubro-hero .etiqueta-seccion,
    .casa-hero .etiqueta-seccion,
    .comercio-hero .etiqueta-seccion,
    .institucion-hero .etiqueta-seccion,
    .grifos-hero .etiqueta-seccion,
    .contacto-hero .etiqueta-seccion {
        width: fit-content !important;
        max-width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* =====================================================
       BOTONES PRINCIPALES DEL HERO
    ===================================================== */

    .hero-botones,
    .pagina-hero-botones,
    .rubro-hero-botones,
    .casa-hero-botones,
    .comercio-hero-botones,
    .institucion-hero-botones,
    .grifos-hero-botones,
    .contacto-hero-botones {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 12px !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /* =====================================================
       TODOS LOS BOTONES PRINCIPALES
       TEXTO + ICONO CENTRADOS
    ===================================================== */

    .btn,
    .btn-principal,
    .btn-secundario,
    .btn-header,
    .btn-institucion-cotizar,
    .btn-casa-cotizar,
    .btn-casa-cotizar,
    .btn-cta-rubro,
    .btn-cta-rubro-secundario,
    .quienes-boton,
    .servicio-detalle-link {
        text-align: center !important;
    }


    .hero-botones .btn,
    .pagina-hero-botones .btn,
    .rubro-hero-botones .btn,
    .casa-hero-botones .btn,
    .comercio-hero-botones .btn,
    .institucion-hero-botones .btn,
    .grifos-hero-botones .btn,
    .contacto-hero-botones .btn,
    .btn-principal,
    .btn-secundario,
    .btn-institucion-cotizar,
    .btn-casa-cotizar,
    .btn-cta-rubro,
    .btn-cta-rubro-secundario {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;

        gap: 9px !important;
    }


    /* =====================================================
       BOTONES DEL HERO A TODO EL ANCHO
    ===================================================== */

    .hero-botones .btn,
    .pagina-hero-botones .btn,
    .rubro-hero-botones .btn,
    .casa-hero-botones .btn,
    .comercio-hero-botones .btn,
    .institucion-hero-botones .btn,
    .grifos-hero-botones .btn {
        width: 100% !important;
    }


    /* =====================================================
       BENEFICIOS DEBAJO DEL HERO
    ===================================================== */

    .hero-confianza,
    .rubro-confianza,
    .casa-confianza,
    .comercio-confianza,
    .institucion-confianza,
    .grifos-confianza {
        width: 100% !important;

        justify-content: center !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* =====================================================
       TÍTULOS DE TODAS LAS SECCIONES
       Ej:
       NUESTROS SERVICIOS
       SOLUCIONES RECOMENDADAS
       NUESTRO ENFOQUE
       ZONAS ESTRATÉGICAS
       ETC.
    ===================================================== */

    .encabezado-seccion {
        width: 100% !important;
        max-width: 760px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    .encabezado-seccion h1,
    .encabezado-seccion h2,
    .encabezado-seccion h3 {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    .encabezado-seccion > p {
        width: 100% !important;
        max-width: 650px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* =====================================================
       SUBTÍTULOS PEQUEÑOS
    ===================================================== */

    .encabezado-seccion .subtitulo,
    .encabezado-seccion .etiqueta-seccion {
        width: fit-content !important;
        max-width: 100% !important;

        display: inline-flex !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* =====================================================
       CTA FINAL DE TODAS LAS PÁGINAS / SECTORES
    ===================================================== */

    .cta-contenido,
    .cta-rubro-contenido {
        width: 100% !important;

        text-align: center !important;
    }


    .cta-contenido h2,
    .cta-contenido p,
    .cta-rubro-contenido h2,
    .cta-rubro-contenido p {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* =====================================================
       ETIQUETA CTA FINAL
    ===================================================== */

    .etiqueta-clara {
        width: fit-content !important;
        max-width: 100% !important;

        display: inline-flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin-left: auto !important;
        margin-right: auto !important;

        text-align: center !important;
    }


    /* =====================================================
       BOTONES CTA FINAL
    ===================================================== */

    .cta-rubro-botones {
        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 12px !important;
    }


    .cta-rubro-botones a {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        text-align: center !important;
    }

}

/* =========================================================
   BREADCRUMB GLOBAL - MÓVIL
   Inicio > Página actual
   Aplica a TODA la web y TODOS los sectores
========================================================= */

@media (max-width: 650px) {

    .breadcrumb {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        flex-wrap: wrap !important;
        gap: 8px !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        text-align: center !important;
    }


    /* INICIO */

    .breadcrumb a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 !important;

        text-align: center !important;
    }


    /* FLECHA > */

    .breadcrumb > i {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        margin: 0 2px !important;

        flex: 0 0 auto !important;
    }


    /* NOMBRE DE LA PÁGINA */

    .breadcrumb > span {
        display: inline-block !important;

        margin: 0 !important;

        text-align: center !important;

        white-space: normal !important;
        word-break: normal !important;
    }
}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 430px) {

    .breadcrumb {
        gap: 7px !important;

        font-size: 12px !important;
        line-height: 1.4 !important;
    }

}
/* =========================================================
   PROYECTOS REALIZADOS
   CORRECCIÓN FINAL PARA CELULAR
========================================================= */

@media (max-width: 650px) {

    /* EVITA DESBORDES HORIZONTALES */
    .proyectos-inicio {
        width: 100% !important;
        max-width: 100% !important;

        overflow-x: hidden !important;

        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }


    .proyectos-inicio .contenedor {
        width: calc(100% - 30px) !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 0 !important;
        padding-right: 0 !important;
    }


    /* =====================================================
       ENCABEZADO
    ===================================================== */

    .proyectos-inicio-encabezado {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 auto 34px !important;

        text-align: center !important;
    }


    .proyectos-inicio-encabezado .subtitulo {
        width: 100% !important;

        display: block !important;

        text-align: center !important;
    }


    .proyectos-inicio-encabezado h2 {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 31px !important;
        line-height: 1.1 !important;

        text-align: center !important;

        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }


    .proyectos-inicio-encabezado h2 span {
        display: inline !important;
    }


    .proyectos-inicio-encabezado p {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;

        font-size: 14px !important;
        line-height: 1.65 !important;

        text-align: center !important;
    }


    /* =====================================================
       AQUÍ ESTÁ LA CORRECCIÓN PRINCIPAL
       UNA SOLA TARJETA POR FILA
    ===================================================== */

    .proyectos-inicio-grid {
        display: grid !important;

        grid-template-columns: minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: 100% !important;

        gap: 20px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    /* =====================================================
       TARJETA
    ===================================================== */

    .proyecto-inicio-card {
        display: block !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;

        overflow: hidden !important;

        box-sizing: border-box !important;

        transform: none !important;
    }


    /* =====================================================
       IMAGEN
    ===================================================== */

    .proyecto-inicio-imagen {
        width: 100% !important;
        max-width: 100% !important;

        height: 235px !important;

        overflow: hidden !important;
    }


    .proyecto-inicio-imagen img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        object-position: center !important;
    }


    /* =====================================================
       ETIQUETA DE LA IMAGEN
    ===================================================== */

    .proyecto-inicio-categoria {
        left: 16px !important;
        bottom: 16px !important;

        width: auto !important;
        max-width: calc(100% - 32px) !important;

        white-space: normal !important;

        text-align: center !important;
    }


    /* =====================================================
       CONTENIDO
    ===================================================== */

    .proyecto-inicio-contenido {
        width: 100% !important;
        max-width: 100% !important;

        padding: 22px !important;

        box-sizing: border-box !important;
    }


    .proyecto-inicio-titulo {
        display: flex !important;

        align-items: center !important;

        width: 100% !important;

        gap: 13px !important;

        margin-bottom: 14px !important;
    }


    .proyecto-inicio-icono {
        flex: 0 0 44px !important;

        width: 44px !important;
        height: 44px !important;
    }


    .proyecto-inicio-titulo h3 {
        flex: 1 1 auto !important;

        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 20px !important;
        line-height: 1.25 !important;

        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }


    .proyecto-inicio-contenido > p {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        font-size: 14px !important;
        line-height: 1.65 !important;

        white-space: normal !important;
        word-break: normal !important;
    }


    /* =====================================================
       TECNOLOGÍAS
    ===================================================== */

    .proyecto-inicio-tecnologias {
        display: flex !important;
        flex-wrap: wrap !important;

        width: 100% !important;

        gap: 8px !important;

        margin-top: 20px !important;
    }


    .proyecto-inicio-tecnologias span {
        width: auto !important;
        max-width: 100% !important;
    }


    /* =====================================================
       CTA FINAL
    ===================================================== */

    .proyectos-inicio-cta {
        display: flex !important;
        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        margin-top: 28px !important;

        padding: 24px 20px !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }


    .proyectos-inicio-cta-icono {
        margin-left: auto !important;
        margin-right: auto !important;
    }


    .proyectos-inicio-cta-texto {
        width: 100% !important;

        text-align: center !important;
    }


    .proyectos-inicio-cta-texto strong,
    .proyectos-inicio-cta-texto span {
        width: 100% !important;

        text-align: center !important;
    }


    .proyectos-inicio-cta-boton {
        width: 100% !important;
        max-width: 100% !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        margin-top: 5px !important;

        text-align: center !important;
    }

}


/* =========================================================
   CELULARES PEQUEÑOS
========================================================= */

@media (max-width: 430px) {

    .proyectos-inicio .contenedor {
        width: calc(100% - 24px) !important;
    }


    .proyectos-inicio-encabezado h2 {
        font-size: 28px !important;
    }


    .proyecto-inicio-imagen {
        height: 215px !important;
    }


    .proyecto-inicio-contenido {
        padding: 20px !important;
    }


    .proyecto-inicio-titulo h3 {
        font-size: 19px !important;
    }

}
/* =========================================================
   HEADER TABLET - CORRECCIÓN FINAL GLOBAL
   En tablet usa menú hamburguesa igual que en móvil.
========================================================= */

@media (max-width: 1000px) {

    /* Mantiene logo + hamburguesa */
    .header .navbar,
    #header .navbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        width: 100% !important;
    }


    /* OCULTA MENÚ DE ESCRITORIO CUANDO ESTÁ CERRADO */
    .header .menu:not(.menu-activo),
    #header .menu:not(.menu-activo) {
        display: none !important;
    }


    /* OCULTA INGRESAR / REGÍSTRATE / COTIZA DEL HEADER */
    .header .header-acciones,
    #header .header-acciones,
    .header-acciones {
        display: none !important;
    }

    .header .header-chatbot,
    #header .header-chatbot {
        display: inline-flex !important;
        margin-left: auto;
        margin-right: 8px;
        min-height: 42px;
        padding: 10px 11px;
    }


    /* MUESTRA HAMBURGUESA */
    .header .menu-toggle,
    #header .menu-toggle,
    #menuToggle {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        min-width: 46px !important;

        height: 46px !important;
        min-height: 46px !important;

        margin-left: auto !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        color: #ffffff !important;

        background: rgba(255, 255, 255, 0.10) !important;
        border: 1px solid rgba(255, 255, 255, 0.20) !important;
        border-radius: 10px !important;

        cursor: pointer !important;
    }


    .header .menu-toggle i,
    #header .menu-toggle i,
    #menuToggle i {
        display: block !important;

        margin: 0 !important;

        color: #ffffff !important;

        font-size: 24px !important;
        line-height: 1 !important;
    }

}
/* =========================================================
   HEADER TABLET - CORRECCIÓN DEFINITIVA
   Desde 1100px hacia abajo usa menú hamburguesa.
========================================================= */

@media (max-width: 1100px) {

    /* =========================================
       NAVBAR
    ========================================= */

    .header .navbar,
    #header .navbar {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        overflow: visible !important;
    }


    /* =========================================
       OCULTAR MENÚ DE ESCRITORIO
    ========================================= */

    .header .menu:not(.menu-activo),
    #header .menu:not(.menu-activo) {
        display: none !important;
    }


    /* =========================================
       OCULTAR BOTONES DEL HEADER
       Ingresar / Regístrate / Administrador / Cotiza
    ========================================= */

    .header .header-acciones,
    #header .header-acciones,
    .header-acciones {
        display: none !important;
    }


    /* =========================================
       MOSTRAR HAMBURGUESA
    ========================================= */

    .header .menu-toggle,
    #header .menu-toggle,
    #menuToggle {
        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        width: 46px !important;
        min-width: 46px !important;
        height: 46px !important;
        min-height: 46px !important;

        flex: 0 0 46px !important;

        margin-left: auto !important;
        padding: 0 !important;

        position: relative !important;
        z-index: 10002 !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        background: rgba(255,255,255,0.10) !important;

        border: 1px solid rgba(255,255,255,0.20) !important;
        border-radius: 10px !important;

        cursor: pointer !important;
    }


    .header .menu-toggle i,
    #header .menu-toggle i,
    #menuToggle i {
        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 24px !important;
        line-height: 1 !important;

        opacity: 1 !important;
        visibility: visible !important;
    }


    /* =========================================
       MENÚ ABIERTO EN TABLET
    ========================================= */

    .header .menu.menu-activo,
    #header .menu.menu-activo {
        position: fixed !important;

        top: 72px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 16px 18px 28px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        background: #ffffff !important;
        background-image: none !important;

        border-top: 1px solid #e4e9f2 !important;

        box-shadow:
            0 18px 35px rgba(15, 23, 42, 0.14) !important;

        z-index: 9998 !important;
    }


    /* ENLACES PRINCIPALES */

    .header .menu.menu-activo > a,
    #header .menu.menu-activo > a {
        width: 100% !important;
        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 12px 14px !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        background: transparent !important;

        border: 1px solid transparent !important;
        border-radius: 11px !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        text-align: left !important;
        text-decoration: none !important;
    }


    .header .menu.menu-activo > a.activo,
    .header .menu.menu-activo > a:hover,
    #header .menu.menu-activo > a.activo,
    #header .menu.menu-activo > a:hover {
        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        background: #eef4ff !important;
        border-color: #d8e4ff !important;
    }


    /* SECTORES */

    .header .menu.menu-activo > details.menu-sectores,
    #header .menu.menu-activo > details.menu-sectores {
        width: 100% !important;

        display: block !important;

        margin: 0 !important;
    }


    .header .menu.menu-activo > details.menu-sectores > summary,
    #header .menu.menu-activo > details.menu-sectores > summary {
        width: 100% !important;
        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        padding: 12px 14px !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        background: transparent !important;

        border-radius: 11px !important;

        font-size: 14px !important;
        font-weight: 700 !important;
    }

}
/* =========================================================
   IP TECNOLOGÍA
   MEGA MENÚ SOLUCIONES - TABLET Y CELULAR
========================================================= */

@media (max-width: 1100px) {

    /* =====================================================
       CONTENEDOR PRINCIPAL SOLUCIONES
    ===================================================== */

    .header .menu.menu-activo > details.menu-soluciones,
    #header .menu.menu-activo > details.menu-soluciones {
        width: 100% !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        border: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       BOTÓN SOLUCIONES
    ===================================================== */

    .header .menu.menu-activo > details.menu-soluciones > summary,
    #header .menu.menu-activo > details.menu-soluciones > summary {
        width: 100% !important;
        min-height: 46px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;

        gap: 10px !important;

        margin: 0 !important;
        padding: 12px 14px !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        background: transparent !important;

        border: 1px solid transparent !important;
        border-radius: 11px !important;

        font-size: 14px !important;
        font-weight: 700 !important;

        list-style: none !important;

        cursor: pointer !important;
    }


    .header .menu.menu-activo > details.menu-soluciones > summary::after,
    #header .menu.menu-activo > details.menu-soluciones > summary::after {
        display: none !important;
        content: none !important;
    }


    .header .menu.menu-activo > details.menu-soluciones > summary::-webkit-details-marker,
    #header .menu.menu-activo > details.menu-soluciones > summary::-webkit-details-marker {
        display: none !important;
    }


    /* Flecha */

    .header .menu.menu-activo > details.menu-soluciones > summary i,
    #header .menu.menu-activo > details.menu-soluciones > summary i {
        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        font-size: 11px !important;

        transition: transform 0.22s ease !important;
    }


    .header .menu.menu-activo > details.menu-soluciones[open] > summary i,
    #header .menu.menu-activo > details.menu-soluciones[open] > summary i {
        transform: rotate(180deg) !important;
    }


    /* Estado abierto */

    .header .menu.menu-activo > details.menu-soluciones[open] > summary,
    #header .menu.menu-activo > details.menu-soluciones[open] > summary {
        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        background: #eef4ff !important;

        border-color: #d8e4ff !important;
    }



    /* =====================================================
       CAJA DEL MEGA MENÚ
    ===================================================== */

    .header .menu.menu-activo .menu-soluciones > .mega-soluciones,
    #header .menu.menu-activo .menu-soluciones > .mega-soluciones {
        position: static !important;

        top: auto !important;
        left: auto !important;
        right: auto !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        display: none !important;

        margin: 7px 0 4px !important;
        padding: 12px !important;

        background: #f8fafc !important;
        background-image: none !important;

        border: 1px solid #e2e8f0 !important;
        border-radius: 14px !important;

        box-shadow: none !important;

        overflow: hidden !important;

        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        transform: none !important;

        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }


    .header .menu.menu-activo .menu-soluciones[open] > .mega-soluciones,
    #header .menu.menu-activo .menu-soluciones[open] > .mega-soluciones {
        display: block !important;
    }


    .header .menu.menu-activo .menu-soluciones > .mega-soluciones::before,
    .header .menu.menu-activo .menu-soluciones > .mega-soluciones::after,
    #header .menu.menu-activo .menu-soluciones > .mega-soluciones::before,
    #header .menu.menu-activo .menu-soluciones > .mega-soluciones::after {
        display: none !important;
        content: none !important;
    }



    /* =====================================================
       GRID
       Tablet: 2 columnas
    ===================================================== */

    .header .mega-soluciones-grid,
    #header .mega-soluciones-grid {
        width: 100% !important;

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;

        margin: 0 !important;
        padding: 0 !important;
    }



    /* =====================================================
       CADA COLUMNA
    ===================================================== */

    .header .mega-soluciones-columna,
    #header .mega-soluciones-columna {
        width: 100% !important;
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 5px !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
    }


    .header .mega-soluciones-columna-sectores,
    #header .mega-soluciones-columna-sectores {
        padding-left: 12px !important;

        border-left: 1px solid #e2e8f0 !important;
    }



    /* =====================================================
       CABECERAS
    ===================================================== */

    .header .mega-soluciones-cabecera,
    #header .mega-soluciones-cabecera {
        width: 100% !important;

        display: block !important;

        margin: 0 0 7px !important;
        padding: 6px 6px 10px !important;

        border-bottom: 1px solid #e5eaf1 !important;
    }


    .header .mega-soluciones-cabecera span,
    #header .mega-soluciones-cabecera span {
        display: block !important;

        margin: 0 0 2px !important;

        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        font-size: 9px !important;
        font-weight: 900 !important;

        line-height: 1.3 !important;

        letter-spacing: 1px !important;

        text-transform: uppercase !important;
    }


    .header .mega-soluciones-cabecera strong,
    #header .mega-soluciones-cabecera strong {
        display: block !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        font-size: 13px !important;
        font-weight: 800 !important;

        line-height: 1.3 !important;
    }



    /* =====================================================
       TARJETAS / OPCIONES
    ===================================================== */

    .header .mega-solucion-item,
    #header .mega-solucion-item {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 54px !important;

        display: grid !important;

        grid-template-columns:
            36px
            minmax(0, 1fr)
            14px !important;

        align-items: center !important;

        gap: 9px !important;

        margin: 0 !important;
        padding: 7px 8px !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        background: #ffffff !important;

        border: 1px solid #e5eaf1 !important;
        border-radius: 10px !important;

        text-decoration: none !important;

        transform: none !important;

        box-shadow: none !important;
    }


    .header .mega-solucion-item::before,
    .header .mega-solucion-item::after,
    #header .mega-solucion-item::before,
    #header .mega-solucion-item::after {
        display: none !important;
        content: none !important;
    }



    /* =====================================================
       ICONOS
    ===================================================== */

    .header .mega-solucion-icono,
    #header .mega-solucion-icono {
        width: 36px !important;
        min-width: 36px !important;

        height: 36px !important;
        min-height: 36px !important;

        display: grid !important;
        place-items: center !important;

        margin: 0 !important;

        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        background: #eef4ff !important;

        border-radius: 9px !important;
    }


    .header .mega-solucion-icono i,
    #header .mega-solucion-icono i {
        margin: 0 !important;

        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;

        font-size: 15px !important;
    }



    /* =====================================================
       TEXTO
    ===================================================== */

    .header .mega-solucion-texto,
    #header .mega-solucion-texto {
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 2px !important;
    }


    .header .mega-solucion-texto strong,
    #header .mega-solucion-texto strong {
        display: block !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        font-size: 12px !important;
        font-weight: 800 !important;

        line-height: 1.25 !important;

        white-space: normal !important;
    }


    .header .mega-solucion-texto small,
    #header .mega-solucion-texto small {
        display: block !important;

        color: #667085 !important;
        -webkit-text-fill-color: #667085 !important;

        font-size: 9.5px !important;
        font-weight: 500 !important;

        line-height: 1.35 !important;

        white-space: normal !important;
    }



    /* Flecha derecha */

    .header .mega-solucion-flecha,
    #header .mega-solucion-flecha {
        margin: 0 !important;

        color: #98a2b3 !important;
        -webkit-text-fill-color: #98a2b3 !important;

        font-size: 9px !important;

        justify-self: end !important;
    }



    /* =====================================================
       VER TODOS
    ===================================================== */

    .header .mega-soluciones-ver-todos,
    #header .mega-soluciones-ver-todos {
        width: 100% !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 7px !important;

        margin: 6px 0 0 !important;
        padding: 9px !important;

        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        background: transparent !important;

        border: 0 !important;

        font-size: 11px !important;
        font-weight: 800 !important;

        text-decoration: none !important;
    }



    /* =====================================================
       CTA INFERIOR
    ===================================================== */

    .header .mega-soluciones-ayuda,
    #header .mega-soluciones-ayuda {
        width: 100% !important;
        min-height: 62px !important;

        display: grid !important;

        grid-template-columns:
            42px
            minmax(0, 1fr) !important;

        align-items: center !important;

        gap: 11px !important;

        margin: 12px 0 0 !important;
        padding: 10px 12px !important;

        color: #172033 !important;
        -webkit-text-fill-color: #172033 !important;

        background: #eef4ff !important;

        border: 1px solid #dce6fb !important;
        border-radius: 11px !important;

        text-decoration: none !important;
    }


    .header .mega-soluciones-ayuda::before,
    .header .mega-soluciones-ayuda::after,
    #header .mega-soluciones-ayuda::before,
    #header .mega-soluciones-ayuda::after {
        display: none !important;
        content: none !important;
    }


    .header .mega-soluciones-ayuda-icono,
    #header .mega-soluciones-ayuda-icono {
        width: 40px !important;
        min-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;

        display: grid !important;
        place-items: center !important;

        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        background: #153faf !important;

        border-radius: 9px !important;
    }


    .header .mega-soluciones-ayuda-icono i,
    #header .mega-soluciones-ayuda-icono i {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;

        font-size: 15px !important;
    }


    .header .mega-soluciones-ayuda-texto,
    #header .mega-soluciones-ayuda-texto {
        min-width: 0 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 2px !important;
    }


    .header .mega-soluciones-ayuda-texto small,
    #header .mega-soluciones-ayuda-texto small {
        color: #667085 !important;
        -webkit-text-fill-color: #667085 !important;

        font-size: 10px !important;

        line-height: 1.3 !important;
    }


    .header .mega-soluciones-ayuda-texto strong,
    #header .mega-soluciones-ayuda-texto strong {
        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        font-size: 12.5px !important;
        font-weight: 850 !important;

        line-height: 1.3 !important;
    }

}



/* =========================================================
   CELULAR
   Una sola columna, limpio y cómodo.
========================================================= */

@media (max-width: 650px) {

    .header .menu.menu-activo .menu-soluciones > .mega-soluciones,
    #header .menu.menu-activo .menu-soluciones > .mega-soluciones {
        padding: 10px !important;
    }


    /* Una columna */

    .header .mega-soluciones-grid,
    #header .mega-soluciones-grid {
        grid-template-columns: minmax(0, 1fr) !important;

        gap: 16px !important;
    }


    /* Quitar línea vertical */

    .header .mega-soluciones-columna-sectores,
    #header .mega-soluciones-columna-sectores {
        padding-left: 0 !important;

        border-left: 0 !important;

        padding-top: 5px !important;

        border-top: 1px solid #e2e8f0 !important;
    }


    /* Cabeceras */

    .header .mega-soluciones-cabecera,
    #header .mega-soluciones-cabecera {
        margin-bottom: 7px !important;
        padding: 6px 4px 9px !important;
    }


    /* Tarjetas */

    .header .mega-solucion-item,
    #header .mega-solucion-item {
        min-height: 58px !important;

        grid-template-columns:
            40px
            minmax(0, 1fr)
            15px !important;

        gap: 10px !important;

        padding: 8px 9px !important;

        border-radius: 10px !important;
    }


    .header .mega-solucion-icono,
    #header .mega-solucion-icono {
        width: 40px !important;
        min-width: 40px !important;

        height: 40px !important;
        min-height: 40px !important;
    }


    .header .mega-solucion-texto strong,
    #header .mega-solucion-texto strong {
        font-size: 12.5px !important;
    }


    .header .mega-solucion-texto small,
    #header .mega-solucion-texto small {
        font-size: 10px !important;
    }


    /* CTA */

    .header .mega-soluciones-ayuda,
    #header .mega-soluciones-ayuda {
        grid-template-columns:
            40px
            minmax(0, 1fr) !important;

        padding: 10px !important;
    }

}



/* =========================================================
   CELULAR PEQUEÑO
========================================================= */

@media (max-width: 430px) {

    .header .menu.menu-activo .menu-soluciones > .mega-soluciones,
    #header .menu.menu-activo .menu-soluciones > .mega-soluciones {
        padding: 8px !important;
    }


    .header .mega-solucion-item,
    #header .mega-solucion-item {
        grid-template-columns:
            38px
            minmax(0, 1fr)
            12px !important;

        padding: 8px !important;
    }


    .header .mega-solucion-icono,
    #header .mega-solucion-icono {
        width: 38px !important;
        min-width: 38px !important;

        height: 38px !important;
        min-height: 38px !important;
    }


    .header .mega-solucion-texto strong,
    #header .mega-solucion-texto strong {
        font-size: 12px !important;
    }


    .header .mega-solucion-texto small,
    #header .mega-solucion-texto small {
        font-size: 9.5px !important;
    }

}
/* =========================================================
   SOLUCIONES MÓVIL - CORRECCIÓN DE FLUJO FINAL
   Evita que Nosotros, Contacto y Usuario se superpongan.
========================================================= */

@media (max-width: 1100px) {

    /* =====================================================
       DETAILS SOLUCIONES
       Debe crecer según todo su contenido.
    ===================================================== */

    .header .menu.menu-activo > details.menu-soluciones,
    #header .menu.menu-activo > details.menu-soluciones {

        position: static !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        flex: 0 0 auto !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       PANEL COMPLETO
    ===================================================== */

    .header .menu.menu-activo
    > details.menu-soluciones
    > .mega-soluciones,

    #header .menu.menu-activo
    > details.menu-soluciones
    > .mega-soluciones {

        position: static !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        float: none !important;

        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 7px 0 8px !important;
        padding: 10px !important;

        overflow: visible !important;

        transform: none !important;

        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: auto !important;
    }


    /* Cerrado */

    .header .menu.menu-activo
    > details.menu-soluciones:not([open])
    > .mega-soluciones,

    #header .menu.menu-activo
    > details.menu-soluciones:not([open])
    > .mega-soluciones {

        display: none !important;
    }


    /* Abierto */

    .header .menu.menu-activo
    > details.menu-soluciones[open]
    > .mega-soluciones,

    #header .menu.menu-activo
    > details.menu-soluciones[open]
    > .mega-soluciones {

        display: block !important;
    }



    /* =====================================================
       GRID
       Se fuerza a flujo normal para evitar superposiciones.
    ===================================================== */

    .header .menu.menu-activo
    .menu-soluciones .mega-soluciones-grid,

    #header .menu.menu-activo
    .menu-soluciones .mega-soluciones-grid {

        position: static !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }



    /* =====================================================
       COLUMNAS
    ===================================================== */

    .header .menu.menu-activo
    .menu-soluciones .mega-soluciones-columna,

    #header .menu.menu-activo
    .menu-soluciones .mega-soluciones-columna {

        position: static !important;

        width: 100% !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;

        display: block !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;

        transform: none !important;
    }


    /* Separación entre Servicios y Sectores */

    .header .menu.menu-activo
    .menu-soluciones .mega-soluciones-columna-sectores,

    #header .menu.menu-activo
    .menu-soluciones .mega-soluciones-columna-sectores {

        position: static !important;

        margin-top: 18px !important;
        padding-top: 16px !important;

        border-left: 0 !important;
        border-top: 1px solid #dfe6ef !important;
    }



    /* =====================================================
       CABECERAS
    ===================================================== */

    .header .menu.menu-activo
    .menu-soluciones .mega-soluciones-cabecera,

    #header .menu.menu-activo
    .menu-soluciones .mega-soluciones-cabecera {

        position: static !important;

        display: block !important;

        width: 100% !important;

        margin: 0 0 9px !important;
        padding: 3px 4px 10px !important;
    }



    /* =====================================================
       TARJETAS
    ===================================================== */

    .header .menu.menu-activo
    .menu-soluciones .mega-solucion-item,

    #header .menu.menu-activo
    .menu-soluciones .mega-solucion-item {

        position: relative !important;

        width: 100% !important;

        margin: 0 0 7px !important;

        float: none !important;
    }



    /* =====================================================
       VER TODOS LOS SERVICIOS
       Selector fuerte para vencer el CSS antiguo.
    ===================================================== */

    .header .menu.menu-activo
    .menu-soluciones .mega-soluciones-columna
    > a.mega-soluciones-ver-todos,

    #header .menu.menu-activo
    .menu-soluciones .mega-soluciones-columna
    > a.mega-soluciones-ver-todos {

        position: static !important;

        width: 100% !important;
        min-height: 42px !important;

        display: flex !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 8px !important;

        margin: 6px 0 0 !important;
        padding: 10px 12px !important;

        color: #153faf !important;
        -webkit-text-fill-color: #153faf !important;

        background: transparent !important;

        border: 0 !important;

        font-size: 12px !important;
        font-weight: 800 !important;

        text-align: center !important;

        transform: none !important;
    }



    /* =====================================================
       CTA FINAL
    ===================================================== */

    .header .menu.menu-activo
    .menu-soluciones
    > .mega-soluciones
    > a.mega-soluciones-ayuda,

    #header .menu.menu-activo
    .menu-soluciones
    > .mega-soluciones
    > a.mega-soluciones-ayuda {

        position: static !important;

        width: 100% !important;
        min-height: 64px !important;

        display: grid !important;

        grid-template-columns:
            42px
            minmax(0, 1fr) !important;

        align-items: center !important;

        gap: 11px !important;

        margin: 14px 0 0 !important;
        padding: 10px 12px !important;

        background: #eef4ff !important;

        border: 1px solid #dce6fb !important;
        border-radius: 11px !important;

        transform: none !important;

        float: none !important;
    }



    /* =====================================================
       NOSOTROS Y CONTACTO
       Siempre después de todo Soluciones.
    ===================================================== */

    .header .menu.menu-activo
    > details.menu-soluciones
    ~ a,

    #header .menu.menu-activo
    > details.menu-soluciones
    ~ a {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;

        flex: 0 0 auto !important;

        float: none !important;

        z-index: auto !important;
    }



    /* =====================================================
       BLOQUE USUARIO / ADMIN
       Debe ir al final y nunca flotar encima.
    ===================================================== */

    .header .menu.menu-activo
    > .menu-acceso-movil,

    #header .menu.menu-activo
    > .menu-acceso-movil {

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;

        height: auto !important;

        flex: 0 0 auto !important;

        float: none !important;

        z-index: auto !important;

        margin-top: 10px !important;
    }

}

/* Evita que los controles de escritorio compriman el header en laptops y tablets. */
@media (max-width: 1250px) {
    .header .navbar,
    #header .navbar {
        height: 72px !important;
        min-height: 72px;
    }

    .header .menu:not(.menu-activo),
    #header .menu:not(.menu-activo) {
        display: none !important;
    }

    .header .header-busqueda,
    .header .header-chatbot,
    .header .header-acciones,
    #header .header-busqueda,
    #header .header-chatbot,
    #header .header-acciones {
        display: none !important;
    }

    .header .menu.menu-activo .menu-acceso-movil,
    #header .menu.menu-activo .menu-acceso-movil {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}