:root{
    --azul:#20638D;
    --azul-c:#D2ECFB;
    --azul-t:#0C3855;
    --amarillo: #ffb10a;
    --gris: #453D3B;
    --blanco: #ffffff;
	--negro: #000000;
}
@media (max-width: 720px){
    body.no-scroll {
        overflow: hidden;
        height: 100%;
    }
    .hamburger{
        z-index: 999;
         position: fixed !important;
        top: 25px !important;
        display: block !important;
        transform: none !important;
        left: 30px;
    }
    .hamburger:focus-visible {
        outline: none;
    }
   /* Menú lateral oculto */
    .menu-movil {
        position: fixed !important;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        background: white;
        background: linear-gradient(to bottom, #ffffff 50%, #0C3855 50%);
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
        transform: translateX(-100%);
        transition: transform 0.4s ease-in-out;
        z-index: 9;
        overflow-y: auto;    
    }
    
     ul#menu-principal-movil-ul {
        height: auto;
        justify-content: start;
        background-color: #0C3855;
        padding: 0px 70px;
    }
    #menu-principal-movil-ul .sub-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        padding-left: 0;
    }
    #menu-principal-movil-ul .btn-agenda a {
        background-color: #97CFF2;
        border-radius: 8px;
        color: #0e2740 !important;
        padding: 10px 50px !important;
        margin-top: 10px;
    }
    /* Submenú visible cuando está activo */
    #menu-principal-movil-ul li.menu-item-has-children.active .sub-menu {
        max-height: 500px; /* Ajusta según necesidad */
    }
    #menu-principal-movil-ul li.menu-item-has-children.active{
        padding-bottom: 20px;
    }
    /* Flechita ▼ en los padres con submenú */
    #menu-principal-movil-ul li.menu-item-has-children > a::after {
        content: '\F282'; 
        font-family: bootstrap-icons !important;
        margin-left: 8px;
        display: inline-block;
        transition: transform 0.3s ease;
        font-size: 17px;
    }

    /* Flechita girada cuando está activo */
    #menu-principal-movil-ul li.menu-item-has-children.active > a::after {
        transform: rotate(180deg);
    }

    .menu-movil.show {
        transform: translateX(0);
    }
    .menu-movil .navbar-nav {
        padding: 0;
        list-style: none;
    }
    .menu-movil .navbar-nav a {
        color: white;
        font-size: 20px;
        font-weight: 500;
        text-decoration: none;
        display: block;
        padding: 18px 8px;
        text-align: center;
        transition: all 0.3s ease;
    }
    .menu-movil .sub-menu a {
        font-size: 17px;
        font-weight: 300;
        padding: 10px 5px;
    }
    .menu-item-has-children.active>a {
        padding-bottom: 3px;
    }
    .media-section, .banner-princ{
        background-color: #97CFF2;
    }
    .logo {
        width: auto;
    }
    .hamburger-inner, .hamburger-inner:after, .hamburger-inner:before,
    .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before{
        background-color: #0C3855;
            width: 35px;
    }
    .hamburger.is-active:hover, .hamburger:hover{
        opacity: 1;
    }
    .logo-menu-movil {
        display: flex;
        justify-content: center;
    }
    .div-lang-wrapper {
        position: fixed;
        right: 25px;
        top: 32px;
            z-index: 99;
    }
    section.banner-princ, 
    section.media-section, section.tt_int_blog {
        margin-top: 100px !important;
    }
    .cuidamos.servicios .text-sm-center.text-left p{
            font-size: 18px;
                line-height: 22px;
    }
    .div-mapa iframe{
        height: 290px;
    }
    .logo img.custom-logo, .logo-menu-movil img {
        height: auto;
        width: 110px;
    }
    .media-image {
        display: flex;
        flex-direction: column-reverse;
    }
    .media-section .card-img-overlay {
        width: 100%;
        position: relative;
    }
    .media-section .card-img-overlay h1 {
        background-color: white;
        text-align: center;
        font-size: 30px;
        padding-bottom: 1.25rem;
        padding-top: 1.25rem;
    }
    .trabaj .cont h2 {
        font-size: 20px;
    }
    button.f-prev.slick-arrow {
        display: none !important;
    }
    .trabaj .slider-arrows {
        width: 85px;
        height: 150px;
    }
    .slider-carnos .card-body{
         height: 150px;
         display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .slider-carnos .img-carr img{
        object-fit: cover;
    }
    .slider-carnos .img-carr{
        height: 300px;
    }
    .slider-carnos ul.slick-dots{
            height: 150px;
        right: 75px;
    }
    .slider-carnos .card-body h3 {
        font-size: 28px;
    }
    .slider-carnos .card-body p {
        font-size: 18px;
        margin: 0;
    }
    .especi h2{
        font-size: 25px;
    }
    .especi p{
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
    }
    .pupila .hr{
        display: none;
    }
    .text-hola, .btn-agenda{
        width: 100% !important;
        text-align: center;
    }
    .txtPupila{
        flex-direction: column;
        gap: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .text-hola p {
    font-size: 19px;
    }
    .text-hola h3 {
        font-size: 20px;
    }
    .pupila .btn-agenda a {
        font-size: 15px;
        padding: 5px 10px;
    }
    .imgPupila img{
        width: 90px;
    }
    .especi .card{
        height: 180px;
    }
   .especi .card h4{
        font-size: 15px;
        line-height: 17px;
                text-align: center;
   }
   .sectiframe h2, .bienestar h2, .equipo h2, footer h2 {
        font-size: 22px;
    }
    .sectiframe iframe {
        width: 100%;
        height: 250px;
    }
    a.btn-cont{
        padding: 5px 40px;
    }
    .pt-alt{
        margin-top: 0px !important;
    }
    .slider-testi .item-testi .w-25 {
        width: 40% !important;
    }
    .item-profe .txt1 {
        flex-direction: column;
    }
    .slider-profes .item-profe .w-25 {
        width: 50% !important;
    }
    .slider-profes.item-profe .card-body{
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .item-profe .txt1 .tt-esp p {
        font-size: 16px;
        text-align: center;
                line-height: 17px;
    }
    .item-profe .txt1 .tt-esp h4 {
        font-size: 20px;
        text-align: center;
        margin-bottom: 8px;
    }
    .item-profe .card-body p {
        text-align: center;
        font-size: 14px;
        line-height: 17px;
    }
    .slider-profes .slick-dots {
        bottom: -50px;
    }
    .div-btn {
        justify-content: center;
    }
    .btn-vermas {
        font-size: 17px;
        padding: 5px 40px;
    }
    .recupera h2 {
        font-size: 30px;
    }
    footer table, footer p{
        font-size: 15px;
    }
    footer h3 {
        font-size: 20px;
    }
    .copyrights>a img {
        width: 100px;
    }
    .copyrights>a {
        flex-direction: column;
    }
    #slider_serv-mov .slick-dots li button:before{
      font-size: 75px;
      opacity: 1;
        color: #E6E6E6;
    }
    #slider_serv-mov .slick-dots li.slick-active button:before {
      opacity: 1;
      color: #0C3855;
    }
    #slider_serv-mov .slick-dots{
            bottom: -35px;
    }
    .titulo-sobre-img{
        position: relative !important;
        font-size: 30px !important;
        padding-bottom: 1.25rem;
        padding-top: 1.25rem;
        margin: 0;
        text-align: center;
        left: 0;
    }
    .tercera .titulo-sobre-img h1,
    .infantil .titulo-sobre-img h1{
        font-size: 30px;
        margin: 0;
        padding: 0 30px;
                line-height: 1;
    }
    .imagen-destacada-con-titulo {
        border-radius: 0;
        background-color: white;
    }
    .atencion .position-absolute, .vivir .position-absolute {
        position: relative !important;
    }
    .vivir img {
        margin-top: -55px;
    }
    .vivir p {
        text-align: center;
        font-size: 14px;
        width: 100%;
    }
    .vivir h2 {
        text-align: center;
        font-size: 25px;
    }
    .atencion h2{
        font-size: 20px;
    }
    .atencion p, .atencion .items p{
                font-size: 13px;
        line-height: 16px;
         width: 100%;
    }
    .tercera .titulo-sobre-img, .int_enfer .titulo-sobre-img,
    .infantil .titulo-sobre-img {
        left: 0;
        top: 0;
        width: 100%;
    }
    .diferencia {
        border-radius: 0px;
    }
    .diferencia h2 {
        font-size: 22px;
    }
    .diferencia h3 {
        font-size: 15px !important;
    }
    .diferencia p {
        font-size: 11px;
        line-height: 14px;

    }
    .diferencia img {
        width: 65px;
    }
    .bk-8D {
        border-radius: 16px;
    }
    .tt-pro h2{
        font-size: 23px;
        line-height: 25px;
    }
    .tt-pro p{
        font-size: 14px;
    }
    .tt-pro .cont-pro p{
        font-size: 12px;
    }
    .list-info a {
        font-size: 20px;
        line-height: 25px;
    }
    .info-pro h3{
        font-size: 18px;
    }
    .info-pro li{
        font-size: 12px;
    }
    .info-pro ul {
        margin: 0;
        padding-left: 1rem;
    }
    .contact img {
        height: 170px !important;
        object-fit: cover;
        border-radius: 15px;
    }
    .texto-formu h3 {        
        font-size: 17px;
        font-weight: 600;
        line-height: 1.3;
    }
    .texto-formu {
        bottom: 5%;
    }
    .contacto input[type=checkbox] + span:before{
        top: 0;
        left: -23px;
    }
    span.wpcf7-list-item-label {
        position: relative;
    }
    .contacto input[type=checkbox] + span:after{
        top: -10px;
        left: -30px;
    }
    .contacto span.wpcf7-list-item {
        display: inline-block;
        margin: 0% 0% 0% 10%;
        font-size: 9px;
        line-height: 1.2;
    }
    .div-btn p {
        flex-direction: column;
            align-items: center;
    }
    .contacto .btn-enviar{
            padding: 2px 50px;
    }
    .contacto .form-control{
            padding: 0.375rem 0.8rem !important;
    }
    .page-template-servicios .banner-princ .titulo-sobre-img{
        left: 0;
        width: 100%;
    }
    .page-template-servicios .banner-princ h1{
        font-size: 30px;
        text-align: center;
    }
    .page-template-servicios .banner-princ h2{
        font-size: 25px;
        text-align: center;
    }
    .tratami h2, .t-pacientes h2{
        font-size: 30px;
    }
    .tratami p{
        font-size: 25px;
        line-height: 28px;
    }
    .t-pacientes h2{
        line-height: 32px;
    }
    .pacientes-slider h4{
        font-size: 15px;
        padding-bottom: 4px;
    }
    .pacientes-slider .btn-filtrar-paciente{
        width: 25px;
        height: 25px;
        font-size: 15px;
    }
    .page-template-servicios .banner-princ h2 br {
        display: none;
    }
    .servicios h2, .padeci h2, .n-serv h2{
        font-size: 25px;
        line-height: 27px;
    }
    .btn-filtrar-categoria {
        padding: 8px;
        font-weight: 500;
        font-size: 10px;
        line-height: 11px;
    }   
    #contenedor-posts .card {
        height: 180px;
    }
    .servicios .card h4, .n-serv .card h4{
            font-size: 13px;
    }
    .servicios .card p, .n-serv .card p{
        display: none;
    }
    .post-pagination{
        margin-top: 2rem;
    }
    .paginador-bullet {
        width: 30px;
        height: 30px;
        margin: 0 8px;
    }
    .causas .card .row, .sinto .card .row {
        margin-right: -15px;
        margin-left: -15px;
    }
    .int_enfer .titulo-sobre-img h1 {
        color: #20638D !important;
        font-size: 30px;
    }
    .que_esS h2, .beneficios_serv h2, .trata h2{
        font-size: 32px;
        line-height: 34px;
    }
    .w-30 {
        width: 30% !important;
    }
    .sinto .card h2, .causas .card h2 {
            font-size: 25px;
            font-weight: 600;
    }
    .sinto .card li, .causas .card li {
        font-size: 12px;
        line-height: 14px;
    }
    .margin-top-7{
            margin-top: -7.5rem;
    }
    .sinto .card{
            margin-bottom: -2.5rem;
    }
     .margin-top-4{
            margin-top: -4rem;
    }
     .margin-bottom-4{
            margin-bottom: -4rem;
    }
    .preg h2 {
            font-size: 30px;
    }
    .preg .item-pre p{
        font-size: 16px;
    }
    .int_enfer .titulo-sobre-img p{
        font-size: 14px;
        line-height: 16px;
        margin: 0;
    }
    .trata .card h3, .trata h4 {
        font-size: 32px;
        line-height: 34px;
    }
    .prepa h2 {
        font-size: 25px;
    }
    .prepa .fondo-prepa h2, .doc .fondo-doc h2 {
        font-size: 30px;
    }
    .prepa .fondo-prepa li, .doc .fondo-doc li {
         font-size: 18px;
        line-height: 22px;
    }
    .cuidados h2, .razones h2{
        font-size: 30px;
        line-height: 32px;
    }
    .razones .card h3{
        font-size: 14px;
        line-height: 16px;
    }
    .razones .card p{
        font-size: 12px;
        line-height: 14px;
    }
    .razones .card img.w-20{
        width: 30% !important;
    }
    .imagen-destacada-con-titulo img{
        border-radius: 0;
    }
    .n-serv .card {
        height: 170px !important;
    }
    .slider-n-serv .slick-dots {
        bottom: -35px;
    }
    .tercera .titulo-sobre-img p,  
    .infantil .titulo-sobre-img p {
        margin: 0;
        font-size: 17px;
        line-height: 20px;
    }
    .consejos h2{
        font-size: 25px;
        line-height: 27px;
    }
    .consejos h3{
        font-size: 30px;
        line-height: 32px;
    }
    .slider-servicio-item .card.h-100 {
        height: 170px !important;
    }
    .consejos li{
        font-size: 15px;
        line-height: 17px;
    }
    .slider-n-serv .slick-dots li button:before {
        font-size: 90px;
    }
    .slider-servicios .slick-dots li button:before,
    .slider-blog-movil .slick-dots li button:before {
        font-size: 100px !important;
        opacity: 1 !important;
        color: #E6E6E6 !important;
    }
    .slider-servicios .slick-dots li.slick-active button:before, 
    .slider-blog-movil .slick-dots li.slick-active button:before {
        opacity: 1 !important;
        color: #0C3855 !important;
    }
    .slider-padeci .slick-dots {
        bottom: -40px;
    }
    .slider-padeci .slick-dots li{
            margin: 0 11px;
    }
    .slider-padeci .slick-dots li button:before{
        width: 35px;
        height: 35px;
        font-size: 93px;
        line-height: 28px;
    }
    .padeci .card h4 {
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;
    }
    .padeci{
        border-radius: 0;
    }
    .pagos .row {
        border-radius: 16px;
    }
    .pagos h2 {
        color: #0C3855;
        font-size: 30px;
        line-height: 32px;
        text-align: center;
    }
    .item-pago p{
        text-align: center;
        font-size: 20px;
    }
    .pagos img{
        width: 40%;
    }
    .tt-blog h2{
	    font-size: 30px;
        line-height: 32px;
    }
    .tt-blog p{
        font-size: 20px;
    }
    .blog .card .btn-blog{
        display: none;
    }
    #buttons-filter button {
        font-size: 13px;
    }
    .blog .card h3{
        font-size: 15px;    
        line-height: 17px;
    }
    .blog .card p{
         font-size: 13px;
         line-height: 15px;
    }
    .tt_int_blog{
        background-color: #97CFF2;
    }
    .tt_int_blog .container{
        background-color: white;
    }
    .tt_int_blog h1{
        font-size: 25px;
        line-height: 28px;
    }
    .list-blogs .item-blog .card.h-100 {
        height: 280px !important;
    }
    .cont_blog h2 {
        font-size: 20px;    
        line-height: 22px;
    }
    .cont_blog h3 {
        font-size: 17px;    
        line-height: 19px;
    }
    .cont_blog p, .cont_blog li{
        font-size: 14px;
    }
    .blog h2 {
        font-size: 20px;
        line-height: 22px;
    }
    .slider-blog-movil .card.h-100 {
        height: 250px !important;
    }
    .slider-blog-movil ul.slick-dots {
        left: 0;
        bottom: -40px;
    }
    .slider-blog-movil ul.slick-dots li {
            width: 30px;
        height: 30px;
    }
}