/*==========================================================
=
=               FISIO CEREZO
=
=               RESPONSIVE.CSS
=
=               PARTE 1 / 4
=
==========================================================*/


/*==========================================================
=
= <= 1400 px
=
==========================================================*/

@media (max-width:1400px){

    .container{

        width:min(1200px,94%);

    }

    .heroContent{

        max-width:760px;

    }

    .quickCards{

        width:min(1000px,94%);

        gap:1.5rem;

    }

    .quickCards article{

        padding:1.8rem;

    }

}


/*==========================================================
=
= <= 1200 px
=
==========================================================*/

@media (max-width:1200px){

    section{

        padding:6rem 0;

    }

    .container{

        width:92%;

    }

    .navbar .container{

        padding:.8rem 1.5rem;

    }

    .menu{

        gap:1.5rem;

    }

    .hero{

        min-height:900px;

    }

    .heroLogo img{

        width:220px;

    }

    .heroContent{

        max-width:700px;

    }

    .heroText{

        max-width:600px;

    }

    .quickCards{

        grid-template-columns:repeat(3,1fr);

        bottom:35px;

        gap:1.25rem;

    }

    .quickCards article{

        padding:1.5rem;

    }

    .why-grid{

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

    }

    .treatment-grid{

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

    }

    .featured{

        transform:none;

    }

    .featured:hover{

        transform:translateY(-10px);

    }

    .pricing{

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

    }

    .reviews{

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

    }

    .footer-grid{

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

    }

}


/*==========================================================
=
= <= 1100 px
=
==========================================================*/

@media (max-width:1100px){

    .clinic-grid{

        gap:3rem;

    }

    .two-columns{

        gap:3rem;

    }

    .reverse-grid{

        gap:3rem;

    }

    .benefit-list{

        grid-template-columns:1fr;

    }

    .price-card{

        padding:2rem;

    }

    .contact-grid{

        gap:2rem;

    }

}


/*==========================================================
=
= <= 992 px
=
==========================================================*/

@media (max-width:992px){

    html{

        font-size:15px;

    }

    .navbar{

        padding:1rem 0;

    }

    .logo img{

        width:150px;

    }

    .menu{

        gap:1rem;

    }

    .menu a{

        font-size:.95rem;

    }

    .hero{

        padding-top:140px;

    }

    .heroLogo img{

        width:200px;

    }

    .heroButtons{

        gap:1rem;

    }

    .btnPrimary,

    .btnSecondary{

        padding:

            .95rem

            1.8rem;

    }

    .quickCards{

        position:relative;

        transform:none;

        left:auto;

        bottom:auto;

        width:100%;

        margin-top:5rem;

    }

    .why-card{

        padding:2rem;

    }

    .clinic-grid{

        align-items:start;

    }

    .card-image{

        height:220px;

    }

    .map-wrapper iframe{

        height:420px;

    }

    .footer{

        padding-top:4rem;

    }

}

/*==========================================================
=
=               RESPONSIVE.CSS
=
=               PARTE 2 / 4
=
==========================================================*/


/*==========================================================
=
= <= 900 px
=
==========================================================*/

@media (max-width:900px){

    section{

        padding:5rem 0;

    }

    .hero{

        min-height:auto;

        padding-top:140px;

        padding-bottom:5rem;

    }

    .heroContent{

        max-width:100%;

    }

    .heroText{

        max-width:100%;

    }

    .heroButtons{

        flex-wrap:wrap;

    }

    .quickCards{

        grid-template-columns:1fr;

        gap:1.5rem;

        margin-top:4rem;

    }

    .quickCards article{

        padding:2rem;

    }

}


/*==========================================================
=
= <= 850 px
=
==========================================================*/

@media (max-width:850px){

    .clinic-grid,

    .two-columns,

    .reverse-grid{

        grid-template-columns:1fr;

        gap:3rem;

    }

    .reverse-grid{

        display:flex;

        flex-direction:column-reverse;

    }

    .clinic-image,

    .two-columns img,

    .reverse-grid img{

        max-width:700px;

        margin:auto;

    }

    .clinic-content,

    .two-columns div,

    .reverse-grid div{

        text-align:center;

    }

    .benefits{

        display:inline-block;

        text-align:left;

    }

    .benefit-list{

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

    }

}


/*==========================================================
=
= <= 768 px
=
==========================================================*/

@media (max-width:768px){

    html{

        font-size:15px;

    }

    body.menu-open{

        overflow:hidden;

    }

    .navbar .container{

        padding:.9rem 1.2rem;

    }

    .logo img{

        width:145px;

    }

    /*=====================
      MENÚ
    =====================*/

    .menuButton{

        display:flex;

        align-items:center;

        justify-content:center;

        width:48px;

        height:48px;

        border-radius:50%;

        background:rgba(255,255,255,.7);

        backdrop-filter:blur(12px);

        box-shadow:var(--shadow);

        z-index:10002;

    }

    .menu{

        position:fixed;

        top:0;

        right:-100%;

        width:min(340px,85vw);

        height:100vh;

        background:rgba(255,255,255,.88);

        backdrop-filter:blur(22px);

        display:flex;

        flex-direction:column;

        justify-content:center;

        align-items:center;

        gap:2rem;

        transition:.45s ease;

        box-shadow:-20px 0 50px rgba(0,0,0,.08);

        z-index:10001;

    }

    .menu.active{

        right:0;

    }

    .menu a{

        font-size:1.2rem;

    }

    /*=====================
      HERO
    =====================*/

    .hero{

        text-align:center;

    }

    .heroLogo img{

        width:180px;

    }

    .heroButtons{

        flex-direction:column;

        align-items:center;

        width:100%;

    }

    .btnPrimary,

    .btnSecondary{

        width:min(320px,100%);

        justify-content:center;

    }

    .scrollIndicator{

        display:none;

    }

    /*=====================
      TARJETAS
    =====================*/

    .why-grid{

        grid-template-columns:1fr;

    }

    .treatment-grid{

        grid-template-columns:1fr;

    }

    .pricing{

        grid-template-columns:1fr;

    }

    .reviews{

        grid-template-columns:1fr;

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        margin-inline:auto;

    }

    .social{

        justify-content:center;

    }

    .gallery{

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

    }

    .benefit-list{

        grid-template-columns:1fr;

    }

    .map-wrapper iframe{

        height:360px;

    }

}

/*==========================================================
=
=               RESPONSIVE.CSS
=
=               PARTE 3 / 4
=
==========================================================*/


/*==========================================================
=
= <= 576 px
=
==========================================================*/

@media (max-width:576px){

    html{

        font-size:14px;

    }

    section{

        padding:4rem 0;

    }

    .container{

        width:94%;

    }

    .navbar{

        padding:.8rem 0;

    }

    .navbar .container{

        border-radius:22px;

        padding:.75rem 1rem;

    }

    .logo img{

        width:130px;

    }

    .menu{

        width:100%;

        max-width:none;

    }

    .hero{

        padding-top:120px;

    }

    .heroLogo img{

        width:150px;

    }

    .heroSubtitle{

        letter-spacing:2px;

        font-size:.8rem;

    }

    .hero h1{

        line-height:1.15;

        margin-bottom:1.2rem;

    }

    .heroText{

        font-size:1rem;

    }

    .heroButtons{

        margin-top:2rem;

    }

    .btnPrimary,

    .btnSecondary{

        width:100%;

        max-width:320px;

        padding:1rem;

        font-size:1rem;

    }

    .quickCards{

        margin-top:3rem;

    }

    .quickCards article{

        padding:1.5rem;

    }

    .quickCards i{

        font-size:2rem;

    }

    .section-header{

        margin-bottom:3rem;

    }

    .section-tag{

        font-size:.8rem;

        padding:.45rem .9rem;

    }

    .why-card{

        padding:1.8rem;

    }

    .why-card i{

        font-size:2.3rem;

    }

    .card-image{

        height:220px;

    }

    .card-body{

        padding:1.6rem;

    }

    .badge{

        font-size:.75rem;

    }

    .btn-card{

        width:100%;

        text-align:center;

    }

    .clinic-image img,

    .two-columns img,

    .reverse-grid img{

        border-radius:24px;

    }

    .benefits{

        width:100%;

    }

    .benefits li{

        font-size:.95rem;

    }

    .benefit-list div{

        padding:.9rem;

        font-size:.92rem;

    }

    .pricing{

        gap:1.5rem;

    }

    .price-card{

        padding:2rem 1.5rem;

    }

    .price-card .price{

        font-size:2.5rem;

    }

    .gallery{

        grid-template-columns:1fr;

        gap:1rem;

    }

    .gallery img{

        border-radius:20px;

    }

    .review{

        padding:1.6rem;

    }

    .contact-card{

        padding:1.5rem;

    }

    .contact-item{

        align-items:flex-start;

    }

    .contact-item i{

        width:46px;

        height:46px;

        font-size:1rem;

    }

    .map-wrapper{

        border-radius:20px;

    }

    .map-wrapper iframe{

        height:300px;

    }

    .footer{

        margin-top:4rem;

    }

    .footer-grid{

        gap:2rem;

    }

    .footer-logo{

        width:150px;

    }

    .social a{

        width:46px;

        height:46px;

    }

    .floating-whatsapp{

        width:58px;

        height:58px;

        right:18px;

        bottom:18px;

        font-size:1.8rem;

    }

    .backToTop{

        width:46px;

        height:46px;

        right:22px;

        bottom:88px;

    }

    .modal{

        padding:1rem;

    }

    .modal-content{

        padding:2rem 1.5rem;

        border-radius:22px;

    }

}


/*==========================================================
=
= <= 430 px
=
==========================================================*/

@media (max-width:430px){

    .hero{

        padding-top:110px;

    }

    .heroLogo img{

        width:135px;

    }

    .heroButtons{

        gap:.8rem;

    }

    .quickCards{

        gap:1rem;

    }

    .quickCards article{

        padding:1.3rem;

    }

    .why-card{

        padding:1.5rem;

    }

    .card-image{

        height:200px;

    }

    .card-body{

        padding:1.4rem;

    }

    .price-card{

        padding:1.6rem 1.3rem;

    }

    .price-card .price{

        font-size:2.2rem;

    }

    .gallery img{

        aspect-ratio:4/3;

    }

    .review{

        padding:1.4rem;

    }

    .contact-card{

        padding:1.3rem;

    }

    .footer-bottom{

        padding:1.5rem 1rem;

        font-size:.9rem;

    }

}

/*==========================================================
=
=               RESPONSIVE.CSS
=
=               PARTE 4 / 4
=
==========================================================*/


/*==========================================================
=
= <= 390 px
=
==========================================================*/

@media (max-width:390px){

    html{

        font-size:13.5px;

    }

    .container{

        width:95%;

    }

    .navbar .container{

        padding:.65rem .9rem;

        border-radius:18px;

    }

    .logo img{

        width:120px;

    }

    .menuButton{

        width:44px;
        height:44px;

        font-size:1.3rem;

    }

    .hero{

        padding-top:100px;

    }

    .heroLogo img{

        width:120px;

    }

    .heroSubtitle{

        font-size:.75rem;

        letter-spacing:1.5px;

    }

    .heroButtons{

        margin-top:1.8rem;

    }

    .btnPrimary,
    .btnSecondary{

        min-height:52px;

        padding:.95rem;

    }

    .quickCards article{

        padding:1.2rem;

    }

    .quickCards i{

        font-size:1.8rem;

    }

    .why-card{

        padding:1.4rem;

    }

    .card-image{

        height:185px;

    }

    .card-body{

        padding:1.3rem;

    }

    .price-card{

        padding:1.4rem 1.2rem;

    }

    .price{

        font-size:2rem;

    }

    .gallery img{

        border-radius:18px;

    }

    .contact-item{

        gap:.8rem;

    }

    .floating-whatsapp{

        width:54px;
        height:54px;

        font-size:1.7rem;

    }

    .backToTop{

        width:44px;
        height:44px;

        bottom:82px;

    }

}


/*==========================================================
=
= <= 360 px
=
==========================================================*/

@media (max-width:360px){

    html{

        font-size:13px;

    }

    h1{

        word-break:balance;

    }

    h2{

        word-break:balance;

    }

    .section-tag{

        font-size:.72rem;

    }

    .heroText{

        font-size:.95rem;

    }

    .quickCards article{

        padding:1rem;

    }

    .why-card{

        padding:1.25rem;

    }

    .review{

        padding:1.2rem;

    }

    .contact-card{

        padding:1.2rem;

    }

    .modal-content{

        padding:1.5rem;

    }

}


/*==========================================================
=
= DISPOSITIVOS TÁCTILES
=
==========================================================*/

@media (hover:none){

    .btnPrimary:hover,
    .btnSecondary:hover,
    .btn-card:hover,
    .why-card:hover,
    .treatment-card:hover,
    .price-card:hover,
    .gallery img:hover{

        transform:none;

    }

    .menu a::after{

        display:none;

    }

}


/*==========================================================
=
= PANTALLAS MUY ALTAS
=
==========================================================*/

@media (min-height:900px){

    .hero{

        min-height:100svh;

    }

}


/*==========================================================
=
= PANTALLAS BAJAS
=
==========================================================*/

@media (max-height:650px){

    .hero{

        min-height:auto;

        padding-top:120px;

        padding-bottom:3rem;

    }

    .quickCards{

        margin-top:3rem;

    }

}


/*==========================================================
=
= REDUCIR ANIMACIONES
=
==========================================================*/

@media (prefers-reduced-motion:reduce){

    *{

        animation:none !important;

        transition:none !important;

        scroll-behavior:auto !important;

    }

}


/*==========================================================
=
= MODO IMPRESIÓN
=
==========================================================*/

@media print{

    header,
    footer,
    .floating-whatsapp,
    .backToTop,
    .scrollIndicator,
    .menuButton{

        display:none !important;

    }

    body{

        background:white;

        color:black;

    }

    section{

        padding:1.5rem 0;

        break-inside:avoid;

    }

}


/*==========================================================
=
= IMÁGENES RESPONSIVE
=
==========================================================*/

img{

    max-width:100%;

    height:auto;

}


/*==========================================================
=
= IFRAMES
=
==========================================================*/

iframe{

    max-width:100%;

}


/*==========================================================
=
= EVITAR DESBORDAMIENTOS
=
==========================================================*/

h1,
h2,
h3,
p,
a,
button{

    overflow-wrap:break-word;

}


/*==========================================================
=
= SAFE AREA (iPhone)
=
==========================================================*/

@supports (padding:max(0px)){

    body{

        padding-left:max(0px, env(safe-area-inset-left));

        padding-right:max(0px, env(safe-area-inset-right));

    }

    .floating-whatsapp{

        bottom:calc(18px + env(safe-area-inset-bottom));

    }

    .backToTop{

        bottom:calc(82px + env(safe-area-inset-bottom));

    }

}

/*==========================================================
=
= CARRUSEL DE OPINIONES RESPONSIVE
=
==========================================================*/

@media (max-width:768px){

    .reviews-track .review{
        padding:0 .5rem;
    }

    .review-card{
        padding:1.7rem;
    }

    .reviews-controls{
        gap:.9rem;
    }

}

@media (max-width:430px){

    .reviews-viewport{
        padding-bottom:1.2rem;
    }

    .review-card{
        padding:1.4rem;
        border-radius:20px;
    }

    .reviews-previous,
    .reviews-next{
        width:44px;
        height:44px;
    }

}

.hero{
    padding-top:
        calc(
            var(--header-height, 110px)
            + 50px
        );
}

/*==========================================================
=
= HORARIO RESPONSIVE
=
==========================================================*/

@media (max-width:576px){

    .schedule-card{
        padding:1.5rem;
    }

    .schedule-card__header{
        align-items:flex-start;
    }

    .schedule-card__icon{
        width:54px;
        height:54px;
        border-radius:16px;
    }

    .schedule-row{
        grid-template-columns:1fr;
        gap:.35rem;
        padding:.9rem 1rem;
    }

    .schedule-row span{
        justify-self:start;
        text-align:left;
    }

}

/*==========================================================
=
= FOOTER RESPONSIVE
=
==========================================================*/

@media (max-width:992px){

    .footer-grid{

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

        gap:2.5rem;

    }

}

@media (max-width:768px){

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-logo{

        margin-inline:auto;

    }

    .social{

        justify-content:center;

    }

}

/*==========================================================
=
= FIN RESPONSIVE
=
==========================================================*/


/* =========================================================
   MÁS AIRE ENTRE EL HEADER Y EL HERO EN MÓVIL
========================================================= */

@media (max-width: 768px){

    .hero{
        padding-top:
            calc(
                var(--header-height, 150px)
                + 85px
            ) !important;
    }

    .heroContent{
        padding-top: 1.5rem;
    }

    .heroSubtitle{
        margin-top: 1rem;
        margin-bottom: 1.4rem;
    }

}

@media (max-width: 430px){

    .hero{
        padding-top:
            calc(
                var(--header-height, 150px)
                + 105px
            ) !important;
    }

    .heroContent{
        padding-top: 1.8rem;
    }

}

/* =========================================================
   INDIBA / TRATAMIENTO ESPECÍFICO RESPONSIVE
========================================================= */

@media (max-width: 850px){

    .indiba-section .two-columns{
        display:grid;
        grid-template-columns:1fr;
        gap:2.5rem;
        align-items:stretch;
    }

    .indiba-section .two-columns > div{
        width:100%;
        min-width:0;
    }

    .indiba-section .two-columns > div:first-child{
        order:1;
        text-align:left;
    }

    .indiba-section .two-columns > div:last-child{
        order:2;
    }

    .indiba-section .two-columns img{
        display:block;
        width:100%;
        max-width:100%;
        height:auto;
        max-height:none;
        margin:0;
        object-fit:cover;
        border-radius:24px;
        transform:none !important;
    }

    .indiba-section .benefits{
        display:grid;
        width:100%;
        margin-top:1.5rem;
        text-align:left;
    }

    .indiba-section .benefits li{
        display:flex;
        align-items:flex-start;
        gap:.7rem;
        width:100%;
        margin-bottom:.9rem;
    }

    .indiba-section .btnPrimary{
        width:100%;
        justify-content:center;
        margin-top:1rem;
    }

}

@media (max-width: 576px){

    .indiba-section{
        overflow:hidden;
    }

    .indiba-section .two-columns{
        gap:2rem;
    }

    .indiba-section .two-columns > div{
        min-width:0;
        overflow-wrap:anywhere;
    }

    .indiba-section h2{
        font-size:clamp(2.2rem, 11vw, 3.25rem);
        line-height:1.05;
    }

    .indiba-section p{
        font-size:.98rem;
    }

    .indiba-section .two-columns img{
        aspect-ratio:4 / 3;
        object-fit:cover;
        border-radius:20px;
    }

    .indiba-section .benefits li{
        font-size:.93rem;
        line-height:1.55;
    }

}

/* =========================================================
   DRENAJE / TÉCNICA MANUAL SUAVE RESPONSIVE
========================================================= */

@media (max-width: 850px){

    .lymphatic-section .reverse-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:2.5rem;
        align-items:stretch;
    }

    .lymphatic-section .reverse-grid > div{
        width:100%;
        min-width:0;
    }

    /* Texto primero, imagen después */
    .lymphatic-section .reverse-grid > div:first-child{
        order:2;
    }

    .lymphatic-section .reverse-grid > div:last-child{
        order:1;
        text-align:left;
    }

    .lymphatic-section .reverse-grid img{
        display:block;
        width:100%;
        max-width:100%;
        height:auto;
        max-height:none;
        margin:0;
        object-fit:cover;
        border-radius:24px;
        transform:none !important;
    }

    .lymphatic-section .benefit-list{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
        margin-top:1.5rem;
    }

    .lymphatic-section .benefit-list div{
        width:100%;
        min-width:0;
        text-align:left;
    }

    .lymphatic-section .btnPrimary{
        width:100%;
        justify-content:center;
        margin-top:1.2rem;
    }

}

@media (max-width: 576px){

    .lymphatic-section{
        overflow:hidden;
    }

    .lymphatic-section .reverse-grid{
        gap:2rem;
    }

    .lymphatic-section .reverse-grid > div{
        min-width:0;
        overflow-wrap:anywhere;
    }

    .lymphatic-section h2{
        font-size:clamp(2.2rem, 11vw, 3.25rem);
        line-height:1.05;
    }

    .lymphatic-section p{
        font-size:.98rem;
    }

    .lymphatic-section .reverse-grid img{
        aspect-ratio:4 / 3;
        object-fit:cover;
        border-radius:20px;
    }

    .lymphatic-section .benefit-list div{
        padding:.95rem;
        font-size:.93rem;
        line-height:1.5;
    }

}