@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');


:root{
    /* TIPOGRAFIAS */

    --font-1:  "Nunito Sans", sans-serif;
    --font-2:  "DM Sans", sans-serif;
    
   
    /* COLOR */

    --color-1: #00a099;
    --color-2: #a9d1ce;
    --color-3: #e6f2f0;

    --color-black: #141414;
    --color-white: #fafafa;
    --color-gris: #7B7B7B;
    


    --bg-1:#00a099;
    --bg-2:#a9d1ce;
    --bg-3:#e6f2f0;

    --bg-black: #141414;
    --bg-white: #fafafa;
    --bg-gris: #7B7B7B;
    --bg-transparent: transparent;

    /* SIZE */
    --font-s-50: 50px; 
    --font-s-48: 48px; 
    --font-s-41: 41px; 
    --font-s-40: 40px; 
    --font-s-33: 33px;
    --font-s-36: 36px;
    --font-s-30: 30px;
    --font-s-28: 28px;
    --font-s-25: 25px;
    --font-s-24: 24px;
    --font-s-22: 22px;
    --font-s-20: 20px;
    --font-s-18: 18px;
    --font-s-16: 16px;
    --font-s-14: 14px;
    --font-s-12: 12px;
    --font-s-10: 10px;

    /* LINE HEIGHT */

    --lh-auto: normal;
    --lh-100: 100%;
    --lh-110: 110%;
    --lh-120: 120%;
    --lh-140: 140%;

}

body {
    margin: 0;
    overflow-x: hidden; 
}

.font-1{
    font-family: var(--font-1);
}

.font-2{
    font-family: var(--font-2);
}



.color-1 {
    color: var(--color-1);
}

.color-2 {
    color: var(--color-2);
}

.color-3 {
    color: var(--color-3);
}

.color-4-degradado{
    background: rgb(230,242,240);
    background: linear-gradient(180deg, rgba(230,242,240,1) 0%, rgba(169,209,206,1) 68%);;
}



.color-black{
    color: var(--color-black);
}

.color-white{
    color: var(--color-white);
}

.color-gris-claro{
    color:  #fafafa;
}

.color-gris{
    color: var(--color-gris);
}

.bg-1 {
    background-color: var(--bg-1);
}

.bg-2 {
    background-color: var(--bg-2);
}

.bg-3 {
    background-color: var(--bg-3);
}

.bg-4-degradado {
    background: rgb(230,242,240);
    background: linear-gradient(180deg, rgba(230,242,240,1) 0%, rgba(169,209,206,1) 68%);
}


.bg-black{
    background-color: var(--bg-black);
}

.bg-white{
    background-color: var(--bg-white);
}

.bg-gris-claro{
    background-color: #fafafa;
}

.bg-gris{
    background-color: var(--bg-gris);
}

.bg-transparent {
    background-color: var(--bg-transparent);
}

.fs-50 {
    font-size: var(--font-s-50);
}

.fs-48 {
    font-size: var(--font-s-48);
}

.fs-41 {
    font-size: var(--font-s-41);
}

.fs-40 {
    font-size: var(--font-s-40);
}

.fs-36 {
    font-size: var(--font-s-36);
}

.fs-33 {
    font-size: var(--font-s-33);
}

.fs-30 {
    font-size: var(--font-s-30);
}

.fs-28 {
    font-size: var(--font-s-28);
}

.fs-25 {
    font-size: var(--font-s-25);
}

.fs-24 {
    font-size: var(--font-s-24);
}

.fs-22{
    font-size: var(--font-s-22);
}

.fs-20 {
    font-size: var(--font-s-20);
}

.fs-18 {
    font-size: var(--font-s-18);
}

.fs-16 {
    font-size: var(--font-s-16);
}

.fs-14 {
    font-size: var(--font-s-14);
}

.fs-12 {
    font-size: var(--font-s-12);
}

.fs-10 {
    font-size: var(--font-s-10);
}

.lh-auto {
    line-height: normal;
}

.lh-100 {
    line-height: var(--lh-100);
}

.lh-110 {
    line-height: var(--lh-110);
}

.lh-120 {
    line-height: var(--lh-120);
}

.lh-140 {
    line-height: var(--lh-140);
}

.border-radius_20{
    border-radius: 20px;
}

.texto-centrado{
    text-align: start;

}


 /* BOTONES PEIMARIOS */
 .boton-1 {
    background-color: transparent;
    border: solid 2px var(--bg-black);
    padding: 10px 30px;
    color: var(--color-black);
    transition: background-color 1s ease, color 1s ease, border-color 1s ease, transform 1s ease; 
    display: inline-block; 
}

.boton-1:hover {
    color: var(--color-white);
    background-color: var(--bg-1);
    border-color: transparent;  
    transform: scale(1.2); 
}

.boton-1:not(:hover) {
    border-color: var(--bg-black); 
}

.boton-2 {
    background-color: transparent;
    border: solid 2px var(--bg-white);
    padding: 10px 30px;
    color: var(--color-white);
    transition: background-color 1s ease, color 1s ease, border-color 1s ease, transform 1s ease; /* Cambia border a border-color para suavizar */
    display: inline-block; /* Asegúrate de que el botón mantenga su tamaño */
}

.boton-2:hover {
    color: var(--color-white);
    background-color:transparent;
    border-color: transparent; /* Cambia a color transparente para el efecto de desvanecimiento */
    transform: scale(1.2); /* Aumenta el tamaño del botón */
}

.boton-2:not(:hover) {
    border-color: var(--bg-white); /* Restaura el borde cuando no está en hover */
}

.boton-turqueza{
    background-color: var(--bg-1);
    color: var(--bg-3);
    padding:10px 30px ;
}

.boton-turqueza:hover{
    background-color: var(--bg-3);
    color: var(--bg-1);
    padding:10px 30px ;
}

.boton-celeste{
    background-color: var(--bg-3);
    color: var(--bg-1);
    padding:10px 30px ;
}

.boton-celeste:hover{
    background-color: var(--bg-1);
    color: var(--bg-3);
    padding:10px 30px ;
}


a{
    text-decoration: none;
}

.img-grandes-fisioterapia-avanzada{
    object-fit: cover;
    object-position: bottom;
    overflow: hidden;
    height: 542px;
}

.img-grandes-tratamientos{
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    height: 542px;
}

.img-pequeña{
    object-fit: cover;
    object-position: center;
    overflow: hidden;
    height: 282px;
}

    /* NAV */
    

.nav-item.active::after {
    content: "";
    display: block;
    width: 4px;
    height: 139px;
    background-color: var(--bg-1);
    margin: 7px 44px 0;
    position: absolute;
    
}


.nav-item.active::before {
    content: "";
    display: block;
    width: 10px; 
    height: 10px; 
    background-color:var(--bg-1);
    color: #a8c0bf; 
    position: relative;
    margin: 0 auto; 
    top: 37px; 
}


.enlace.active::after {
    content: "";
    display: block;
    width: 4px;
    height: 139px;
    background-color: var(--bg-1);
    
    margin: 7px 71px 0;
    position: absolute;

}
.enlace.active::before {
    content: "";
    display: block;
    width: 10px; 
    height: 10px; 
    background-color:var(--bg-1); 
    position: relative;
    margin: 0 auto;
    top: 35px; 

}


.ancho{
    width: 29%;
}


.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color:transparent;
    background-color: transparent;
    border: none;
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}

.dropdown-menu[data-bs-popper] {
    top: 100%;
    left: 16px;
    margin-top: var(--bs-dropdown-spacer);
}

.dropdown-item:focus, .dropdown-item:hover {
    color: #00a099;
    background-color:#e6f2f0 ;
}

.cajita-dropdown{
    background-color:#00a099 ;
}

.banner-home {
    background-image: url(../img/banner-home.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 700px;
}

.cuadrado {
    width: 132px;
    height: 132px;
    background-color: var(--bg-1);
    transition: transform 0.5s ease; 
   opacity: 50%;
}

.cuadrado:hover {
    transform: scale(1.5); 
}

.linea-vertical{
    width: 252px;
    height: 5px;
    background-color: var(--bg-1);
    border: none;
    transform: rotate(90deg);
    opacity: 50%;
    margin-top: -20px;
}

.texto-derecha{
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
}

.texto-izquierda{
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
}



/* SECCIÓN centro fisioterapia */


.slick-dots li button:before {
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color:var(--bg-1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.contenedor-hover {
    padding: 50px 60px;
    background-color: var(--bg-3);
    color: var(--color-1);
    transition: transform 0.5s ease, background-color 0.5s ease, color 0.5s ease;
    transform-origin: bottom center;
    
    display: inline-block; 
}

.contenedor-hover:hover {
    padding: 50px 60px;
    background-color: var(--bg-1);
    color: var(--color-white);
    opacity: 50% ;
    transform: scale(1.5);
}

.linea-gris-claro{
    width: 100%;
    height: 170px;
    position: absolute;
    z-index: -2;
    margin-top: -60px;
}

.texto-derecha-ruben {
    position: absolute;
    top: 19%;
    right: 13px;
    transform: translateY(-50%);
    width: 50%;
}

.texto-derecha-ruben-2 {
    position: absolute;
    top: 65%;
    right: 13px;
    transform: translateY(-50%);
    width: 42%;
}

.line-ruben {
    width: 4px;
    height: 96%;
    background-color: var(--bg-1);
    position: absolute;
    left: 63px;
    top: -71px;
    transform-origin: top;
   
}
  
  
.cuadrado-ruben{
    margin-left: 33px;
    width: 15px;
    height: 15px;
    background-color: var(--bg-1);

}

/* Sobre Nosotros */

.banner-sobre-nosotros{
    background-image: url(../img/banner-sobre-nosotros.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;

}

.texto-abajo-ruben{
    position: absolute;
    top: 132%;
    right: -45px;
    transform: translateY(-50%);
    width: 81%;
}

.imagenes-carrousel{
    width: 321px;
    height: 626px;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    transition: width 0.8s ease, height 0.5s ease;
}

.imagenes-carrousel:hover{
    width: 100%;
    height: 626px;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
}

.h-1260{
    height: 1300px;
}

.mt-411{
    margin-top: 411px;
}

.imagenes-carrousel-2 {
    width: 321px;
    height: 517px;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
    transition: width 0.5s ease, height 0.5s ease;
}


/* CAROUSEL */

.scroller {
    max-width: 100%;
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
    90deg,
    transparent,
    white 20%,
    white 80%,
    transparent
);
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 50s;
}

@keyframes scroll {
    to {
    transform: translate(calc(-50% - 0.5rem));
    }
} 


/* TRATAMIENTOS */

.banner-tratamientos{
    background-image: url(../img/banner-tratamientos.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;

}

/* FISIOTERAPIA */
.banner-fisioterapia{
    background-image: url(../img/banner-fisioterapia.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;

}

.banner-papel{
    background-image: url(../img/banner-papel.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 318px;
}

/* FISIOTERAPIA AVANZADA */
.banner-fisioterapia-avanzada{
    background-image: url(../img/banner-fisioterapia-avanzada.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
}

.fondo-papel{
    background-image: url(../img/fondo-papel.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 424px;
    padding: 140px;
}

/* CONTACTO */

.banner-contacto{
    background-image:url(../img/banner-contacto.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 350px;
}

.agrande-hover img {
    transition: transform 0.5s ease; /* Transición suave para el escalado */
}

.agrande-hover:hover img {
    transform: scale(0.8); /* Agranda la imagen un 20% al hacer hover */
}

.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-gris);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--bg-3);
    background-clip: padding-box;
    border: none;
    border-top: 3px solid var(--color-1);
    border-radius:0px;
    transition:none;
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color:transparent;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(156, 211, 212, 0.25);
}

.texto-derecha-contacto{
    position: absolute;
    top: 50%;
    right: 48px;
    transform: translateY(-50%);
    width: 43%;
}




/* FOOTER */
.linea-turqueza{
    height: 3px;
    background-color:var(--bg-1);
    border: none;  
}

.menu-footer{
    width: 100%;
}



@media (max-width: 1200px) {
    .texto-centrado{
        text-align: center;
    
    }

 
    
    .texto-izquierda {
        position: absolute;
        top: 50%;
        right: auto;
        transform: translateY(-50%);
    } 
    

    .texto-derecha{
        position: absolute;
        top: 50%;
        right: -44px;
        transform: translateY(-50%);
    }

    .texto-abajo-ruben {
        position: absolute;
        top: 145%;
        right: -45px;
        transform: translateY(-50%);
        width: 81%;
    }

    .h-1260{
        height: 1200px;
    }

    .mt-411{
        margin-top: 470px;
    }

    .texto-derecha-ruben-2 {
        position: absolute;
        top:83%;
        right: 13px;
        transform: translateY(-50%);
        width: 42%;
    }
    .h-730{
        height: 730px;
    }

}


@media (max-width: 1060px) { 
    .texto-derecha {
        position: relative;
        top: auto; 
        right: auto; 
        transform: none; 
        margin: 0 auto; 
      }
  
      .texto-izquierda {
          position: relative;
          top: auto; 
          left: auto; 
          transform: none; 
          margin: 0 auto; 
      }
  
      .texto-derecha-ruben {
          width: 100%;
      position: relative;
      top: auto; 
      right: auto; 
      transform: none; 
      margin: 0 auto; 
      }
  
      .texto-derecha-ruben-2{
          width: 100%;
      position: relative;
      top: auto; 
      right: auto; 
      transform: none; 
      margin: 0 auto; 
      }
  
      .texto-abajo-ruben{
          width: 100%;
      position: relative;
      top: auto; 
      right: auto; 
      transform: none; 
      margin: 0 auto; 
      }

      .h-1260{
        height: 1370px;
    }

    .mt-411{
        margin-top: 8px;
    }

    .line-ruben {
        width: 4px;
        height: 78%;
        background-color: var(--bg-1);
        position: absolute;
        left: 63px;
        top: -17px;
        transform-origin: top;
    }
    .texto-derecha-contacto {
        position: relative;
        top: auto; 
        left: 1px; 
        transform: none; 
        margin: 0 auto; 
        width: 100%;
    }

    .h-730{
        height:1140px;
    }

}





@media (max-width: 768px) { 
    :root{
        --font-s-50: 34px;
        
    }

        /* Estilo para la línea vertical con el cuadrado */
    .nav-item.active::after {
        content: "";
        display: none;
        width: 4px;
        height: 139px;
        background-color: var(--bg-1);
        margin: 7px 44px 0;
        position: absolute;
    }

    /* Cuadrado al final de la línea */
    .nav-item.active::before {
        content: "";
        display: none;
        width: 10px; /* Tamaño del cuadrado */
        height: 10px; /* Tamaño del cuadrado */
        background-color:var(--bg-1); /* Color del cuadrado */
        position: relative;
        margin: 0 auto; /* Centrado debajo de la línea */
        top: 37px; /* Ajuste para colocar el cuadrado en el extremo de la línea */
    }

    .enlace.active::after {
        content: "";
        display: none;
        width: 4px;
        height: 139px;
        background-color: var(--bg-1);
        color: #00a099;
        margin: 7px 71px 0;
        position: absolute;
    }
    .enlace.active::before {
        content: "";
        display: none;
        width: 10px; /* Tamaño del cuadrado */
        height: 10px; /* Tamaño del cuadrado */
        background-color:var(--bg-1); /* Color del cuadrado */
        position: relative;
        margin: 0 auto; /* Centrado debajo de la línea */
        top: 35px; /* Ajuste para colocar el cuadrado en el extremo de la línea */
    }

    .img-grandes-fisioterapia-avanzada{
        object-fit: cover;
        object-position: bottom;
        overflow: hidden;
        height: 295px;
    }
    
    .img-grandes-tratamientos{
        object-fit: cover;
        object-position: center;
        overflow: hidden;
        height: 295px;
    }

    .ancho{
        width: 75%;
    }
    
    .linea-gris-claro{
        width: 100%;
        height: 170px;
        position: absolute;
        z-index: -2;
        margin-top: -102px;
    }

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

    .texto-derecha {
      position: relative;
      top: auto; 
      right: auto; 
      transform: none; 
      margin: 0 auto; 
    }

    .texto-izquierda {
        position: relative;
        top: auto; 
        left: auto; 
        transform: none; 
        margin: 0 auto; 
    }

    .texto-derecha-ruben {
        width: 100%;
    position: relative;
    top: auto; 
    right: auto; 
    transform: none; 
    margin: 0 auto; 
    }

    .texto-derecha-ruben-2{
        width: 100%;
    position: relative;
    top: auto; 
    right: auto; 
    transform: none; 
    margin: 0 auto; 
    }

    .texto-abajo-ruben{
        width: 100%;
    position: relative;
    top: auto; 
    right: auto; 
    transform: none; 
    margin: 0 auto; 
    }

    .h-1260{
        height:1356px;
    }
    
    .mt-411{
        margin-top: 20px;
    }

    .h-730{
        height:990px;
    }

    .line-ruben {
        width: 4px;
        height: 76%;
        background-color: var(--bg-1);
        position: absolute;
        left: 55px;
        top: -7px;
        transform-origin: top;
    }

    .fondo-papel{
        background-image: url(../img/fondo-papel.png);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 424px;
        padding: 88px;
    }

    .texto-derecha-contacto {
        position: relative;
        top: auto; 
        left: 1px; 
        transform: none; 
        margin: 0 auto; 
        width: 100%;
    }

    .cuadrado {
        width: 70px;
        height: 70px;
        background-color: var(--bg-1);
        transition: transform 0.5s ease; /* Transición para el tamaño */
       opacity: 50%;
    }

    
  }