/*=========================================================
MAXALUD
RESPONSIVE
=========================================================*/

/*=========================================================
1200px — LAPTOP
=========================================================*/

@media(max-width:1200px){

    .container{
        padding:0 28px;
    }

    .header__menu{
        gap:18px;
    }

    .header__link{
        font-size:12px;
    }

    .hero__title{
        font-size:50px;
    }

    .medical-center__content,
    .private-office__content{
        gap:22px;
    }

    .technology__wrapper{
        gap:28px;
    }

    .footer__grid{
        gap:35px;
    }

}


/*=========================================================
992px — TABLET HORIZONTAL
=========================================================*/

@media(max-width:992px){

    .header{
        height:76px;
    }

    .header__navigation,
    .header__actions{
        display:none;
    }

    .header__mobile{
        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:5px;
        width:42px;
        height:42px;
        padding:8px;
        border:0;
        background:transparent;
        cursor:pointer;
    }

    .header__mobile span{
        display:block;
        width:100%;
        height:2px;
        background:var(--maxalud-blue);
        border-radius:2px;
    }

    .hero{
        padding-top:76px;
    }

    .hero__background{
        inset:76px 0 0;
    }

    .hero > .container{
        padding-left:28px;
        padding-right:28px;
    }

    .hero__wrapper{
        grid-template-columns:1fr;
        min-height:auto;
    }

    .hero__content{
        padding:80px 0 60px;
    }

    .hero__title{
        max-width:650px;
        font-size:48px;
    }

    .hero__visual{
        position:absolute;
        inset:76px 0 0;
        opacity:.32;
    }

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

    .ecosystem__wrapper,
    .technology__wrapper{
        grid-template-columns:1fr;
    }

    .ecosystem__visual{
        min-height:420px;
    }

    .technology__content p{
        max-width:700px;
    }

    .medical-center__content,
    .private-office__content{
        grid-template-columns:1fr;
    }

    .medical-center__visual,
    .private-office__visual{
        min-height:420px;
    }

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

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

    .cta__wrapper{
        flex-direction:column;
        align-items:flex-start;
    }

    .mobile-menu{
    display:block;
    position:fixed;
    top:76px;
    left:0;
    width:100%;
    max-height:calc(100vh - 76px);
    padding:25px;
    overflow-y:auto;
    background:#ffffff;
    z-index:999;
    box-shadow:0 15px 35px rgba(10,50,80,.12);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
    }

    .mobile-menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    }

    .mobile-menu__header{
        padding-bottom:20px;
        margin-bottom:15px;
        border-bottom:1px solid #e4edf5;
    }

    .mobile-menu__header img{
        width:170px;
        height:auto;
    }

    .mobile-menu__header p{
        margin:7px 0 0;
        font-size:12px;
    }

    .mobile-menu__nav{
        margin:0;
        padding:0;
        list-style:none;
    }

    .mobile-menu__nav li a{
        display:flex;
        align-items:center;
        gap:12px;
        padding:13px 5px;
        color:#17324d;
        font-family:"Manrope",sans-serif;
        font-size:14px;
        font-weight:600;
        border-bottom:1px solid #edf2f6;
    }

    .mobile-menu__nav li a i{
        width:20px;
        color:#0870c9;
    }

    .mobile-menu__actions{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:12px;
        margin-top:20px;
    }

    .mobile-menu__actions a{
        display:flex;
        align-items:center;
        justify-content:center;
        width:280px;
        min-height:46px;
        border-radius:12px;
        background:#12a94b;
        color:#ffffff;
        font-family:"Manrope",sans-serif;
        font-size:13px;
        font-weight:700;
    }

    .mobile-menu__actions a.btn--secondary{
        background:#ffffff;
        color:#063b73;
        border:1px solid #063b73;
    }

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

    .hero__feature{
        min-height:82px;
    }

    .hero__feature:nth-child(2){
        border-right:none;
    }

}


/*=========================================================
768px — TABLET
=========================================================*/

@media(max-width:768px){

    .container{
        padding:0 24px;
    }

    .hero > .container{
        padding-left:24px;
        padding-right:24px;
    }

    .hero__content{
        padding:70px 0 50px;
    }

    .hero__title{
        font-size:43px;
    }

    .hero__description{
        max-width:600px;
    }

    .ecosystem,
    .medical-center,
    .private-office,
    .technology,
    .specialties,
    .agreements,
    .testimonials{
        padding:70px 0;
    }

    .medical-center__title,
    .private-office__title{
        font-size:38px;
    }

    .medical-center__services,
    .private-office__services{
        grid-template-columns:1fr 1fr;
    }

    .ecosystem__stats{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .ecosystem__stats div{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.18);
    }

    .ecosystem__stats div:last-child{
        border-bottom:none;
    }

    .ecosystem__visual{
        min-height:350px;
    }

    .ecosystem__device--desktop{
        width:480px;
    }

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

}


/*=========================================================
640px — MÓVIL
=========================================================*/

@media(max-width:640px){

    .container{
        padding:0 20px;
    }

    .hero > .container{
        padding-left:20px;
        padding-right:20px;
    }

    .header__logo img{
        width:165px;
    }

    .hero__content{
        padding:65px 0 45px;
    }

    .hero__title{
        font-size:39px;
        line-height:1.12;
        letter-spacing:-1px;
    }

    .hero__description{
        font-size:15px;
        line-height:1.65;
    }

    .hero__buttons{
    flex-direction:column;
    align-items:flex-start;
    }

    .hero__buttons .btn{
    width:280px;
    }

    .hero__visual{
        opacity:.22;
    }

    .hero__features{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    margin-top:200px;
    transform:none;
    grid-template-columns:repeat(2,1fr);

    }

    .hero__feature{
        min-height:78px;
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.18);
    }

    .hero__feature:last-child{
        border-bottom:none;
    }

    .services{
        padding:35px 0;
    }

    .services__quick-grid{
        grid-template-columns:1fr;
        gap:12px;
    }

    .service-quick{
        min-height:105px;
    }

    .ecosystem,
    .medical-center,
    .private-office,
    .technology,
    .specialties,
    .agreements,
    .testimonials{
        padding:60px 0;
    }

    .ecosystem__content h2,
    .technology__content h2,
    .specialties__title,
    .agreements__header h2,
    .testimonials__header h2,
    .medical-center__title,
    .private-office__title{
        font-size:31px;
    }

    .medical-center__header,
    .private-office__header{
        margin-bottom:35px;
    }

    .medical-center__services,
    .private-office__services,
    .technology__features,
    .specialties__grid,
    .agreements__grid,
    .testimonials__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .technology__features,
    .specialties__grid,
    .agreements__grid,
    .testimonials__grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .medical-center__visual,
    .private-office__visual{
        min-height:320px;
    }

    .ecosystem__visual{
        min-height:300px;
    }

    .ecosystem__device--desktop{
        width:420px;
        left:-20px;
    }

    .ecosystem__device--mobile{
        width:125px;
        right:0;
    }

    .cta{
        padding:10px 0 60px;
    }

    .cta__wrapper{
        padding:38px 25px;
    }

    .cta__content h2{
        font-size:29px;
    }

    .cta__actions{
    width:100%;
    flex-direction:column;
    align-items:center;
    }

    .cta__actions .btn{
        width:280px;
    }

    .footer{
        padding:55px 0 25px;
    }

    .footer__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px 2px;
    }

    .footer__about{
    grid-column:1 / -1;
    text-align:center;
    }

    .footer__about .footer__logo{
        justify-content:center;
    }

    .footer__about .footer__description{
        margin-left:auto;
        margin-right:auto;
    }    

    .footer__bottom{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer__legal{
        flex-wrap:wrap;
        gap:12px;
    }

    .maxalud-popup__modal{
        padding:28px 20px;
    }

}

/*=========================================================
480px — MÓVIL PEQUEÑO
=========================================================*/

@media(max-width:480px){

    .container{
        padding:0 16px;
    }

    .hero > .container{
        padding-left:16px;
        padding-right:16px;
    }

    .header__logo img{
        width:145px;
    }

    .hero__title{
        font-size:34px;
    }

    .hero__description{
        font-size:14px;
    }

    .hero__feature{
        padding:14px 16px;
    }

    .hero__feature-icon{
        width:42px;
        height:42px;
        font-size:21px;
    }

    .hero__feature-content strong{
        font-size:13px;
    }

    .hero__feature-content small{
        font-size:10px;
    }

    .medical-center__title,
    .private-office__title,
    .ecosystem__content h2,
    .technology__content h2,
    .specialties__title,
    .agreements__header h2,
    .testimonials__header h2{
        font-size:28px;
    }

    .medical-center__service,
    .private-office__service,
    .technology-card{
        min-height:100px;
        padding:16px;
    }

    .medical-center__visual,
    .private-office__visual{
        min-height:260px;
    }

    .ecosystem__visual{
        min-height:240px;
    }

    .ecosystem__device--desktop{
        width:340px;
        left:-10px;
    }

    .ecosystem__device--mobile{
        width:105px;
    }

    .testimonial-card{
        padding:24px;
    }

    .cta__wrapper{
        padding:32px 20px;
        border-radius:18px;
    }

    .cta__content h2{
        font-size:27px;
    }

}

/*=========================================================
320px — MÓVIL EXTRA PEQUEÑO
=========================================================*/

@media(max-width:320px){

    .container{
        padding:0 12px;
    }

    .hero > .container{
        padding-left:12px;
        padding-right:12px;
    }

    .header__logo img{
        width:135px;
    }

    .hero__title{
        font-size:30px;
    }

    .hero__description{
        font-size:13px;
    }

    .hero__buttons .btn{
        width:100%;
        max-width:280px;
    }

    .hero__features{
        grid-template-columns:1fr;
    }

    .medical-center__services,
    .private-office__services,
    .technology__features,
    .specialties__grid,
    .agreements__grid,
    .testimonials__grid{
        grid-template-columns:1fr;
    }

    .footer__grid{
        grid-template-columns:1fr;
    }

}

.footer__contact li{
    min-width:0;
    overflow-wrap:anywhere;
}