*{
    padding: 0;
    margin: 0;
}
:root{
    --9:90%;
    --MainColor:#b29472;
    --AllH:100%;
    --Sec:#5d5d5d;
}
html{
    overflow-x: hidden;
}
img{
    width: 100%;
    height: 100%;
}
@font-face {
    font-family: 'Sugar';
    src: url(/ASSETS/FONTS/brown-sugar.ttf);
}
@font-face {
    font-family: 'Campton';
    src: url(/ASSETS/FONTS/CamptonMedium.otf);
}

.Us{
    width: 100%;
    height: auto;
    display: flex;
    place-content: center;
    background-color: var(--MainColor);
}
.Us_img{
    width: 50%;
    height: auto;
}
.Us__Info{
    width: 45%;
    height: 100%;
    background-color: var(--MainColor);
    display: flex;
    place-content: center;
    flex-direction: column;
    text-align: left;
    padding: 2rem;
    gap: 0rem;
}
.Us__Info h1{
    font-family: Sugar;
    font-size: 5.5rem;
    color: white;
    text-align: left;
}
#tec{
    padding-top: 5rem;
}
#teca{
    padding-bottom: 5rem;
}
.Us__Info p{
    font-family: Campton;
    text-align: left;
    padding-right: 11rem;
    padding-bottom: 8rem;
    font-size:1.5rem;
    color: white;
}
.btn{
    height: auto;
    padding: 2rem;
}
.Us__btn{
    text-decoration: none;
    background-color: #3a3a3a;
    padding: 1.5rem 2.5rem;
    border-radius: 5rem;
    color: white;
    text-transform: uppercase;
    font-family: Campton;
    transition: .3s all ease-in-out;
    user-select: none;
}
.Us__btn:hover{
    color: #000000;
    background-color: transparent;
    border: 1px solid #ffffff;
    box-shadow: .1rem .1rem 1rem #ffffff;
}

.Clinics{
    width: 100%;
    height: auto;
    display: flex;
    place-content: top;
    flex-direction: column;
    user-select: none;
}
.Clinics__Title{
    width: 100%;
    height: auto;
    text-align: center;
    font-family: Sugar;
    font-size: 6rem;
    padding-top: 3.5rem;
    color: var(--MainColor);
}
.Clinics__Content{
    width: 100%;
    height:auto; 
    display: flex;
    place-content: center;
    flex-direction: column;
    text-align: center; 
}
.Clinics__img{
    width: 75%;
    height: auto;
    display: flex;
    place-content: center;
    gap: 3rem;
    margin: 0 auto;
    padding-top: 5rem;
}
@media only screen and (max-width: 600px) {
  .Clinics__Content{
    padding: 0rem 2rem;
  }
}
.Clinics-Left, .Clinics__Right{
     position: relative;
     transition: .3s all ease-in-out;
     width: 50%;
}
.Clinics-Left img,.Clinics__Right img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.Clinics__Decor{
    position: absolute;
    font-size: 2rem;
    font-family: Campton;
    color: rgb(255, 255, 255);
    bottom: 0;
    left:0;
    width: 100%;
    background-color: #3a3a3a;
    padding-top: 2rem;
    font-weight: lighter;
    text-transform: uppercase;
    text-align: left;
    padding-left: 1rem;
}

.Clinics__Hover{
    position: absolute;
    font-size: 2rem;
    font-family: Campton;
    color:white;
    bottom: 0;
    left:0;
    width: 100%;
    background-color: var(--MainColor);
    padding-top: 2rem;
    padding-bottom: 2rem;
    font-weight: lighter;
    
    /* ELIMINAMOS text-transform DE AQUÍ */
    /* text-transform: uppercase; */ 
    
    text-align: left;
    padding-left: 1rem;
    opacity: 0;
    transition: .3s all ease-in-out;
    display: flex;
    align-items: center;
    
    justify-content: flex-start;
}

.clinics-link {
    text-decoration: none;
    color: white; 
    
    /* Configuración para alinear la flecha junto al texto */
    display: inline-flex; 
    align-items: center; 
    
    /* ESPACIO ENTRE EL TEXTO y EL ICONO (como en tu ejemplo de "VER MAPA") */
    gap: 0.5rem; 
    
    /* Si el tamaño de fuente se pierde en el enlace, fuerzalo aquí: */
    font-size: 2rem; 
    font-weight: lighter;
}
.clinics-link {
    text-decoration: none;
    color: white; 
    
    /* Configuración Flexbox para alinear el texto y el icono */
    display: inline-flex; 
    align-items: center; 
    
    /* ESPACIO SENCILLO ENTRE EL TEXTO Y EL ICONO */
    margin-right: 0.5rem; /* Separación después del texto si el span no tiene margin-left */

    /* Agregamos el text-transform aquí */
    text-transform: uppercase; 
    
    /* Forzamos estilos */
    font-size: 2rem; 
    font-weight: lighter;
}

/* Estilo para el nuevo elemento de icono (<span>) */
.clinics-icon {
    /* Establecemos el margen para separar el icono del texto */
    margin-left: 0.5rem; 
    /* RUTA: Asegúrate de que esta ruta a tu icono sea correcta */
    background-image: url('/ASSETS/ICONS/maprow.svg'); 
    /* 

[Image of Simple Right Arrow Icon]
 */
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block; /* Necesario para que width/height funcione */
    
    /* Dimensiones del icono */
    width: 3.5rem; 
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Clinics__Hover a{
    width: 100%;
    text-decoration: none;
    color: white;
    transform: none !important;
    transition: .3s all ease-in-out;
}
.Clinics-Left:hover .Clinics__Hover,
.Clinics__Right:hover .Clinics__Hover {
    opacity: 1;
    /* QUITAMOS transform: translateY(0) y !important */
}




.Clinics__btn{
    width: 100%;
    height: auto;
    padding: 3rem;
    display: flex;
    place-content: center;
    padding-top: 11rem;
}
.Clinics__btn a{
    text-decoration: none;
    color: white;
    background-color: var(--MainColor);
    padding: 1rem 5.5rem;
    border-radius: 3rem;
    font-family: Campton;
    text-transform: uppercase;
    transition: .3s all ease-in-out;
}
.Clinics__btn a:hover{
    background-color: transparent;
    border: var(--MainColor) solid 1px;
    color: #3a3a3a;
    box-shadow: .1rem .1rem 1rem var(--MainColor);
}


.Talk{
    width: 100%;
    height: auto;
    background-color: #eaeaea;
    display: flex;
    place-content: center;
    flex-direction: column;
    user-select: none;
    padding-bottom: 15rem;
    padding-top: 10rem;
}
.Talk__Title{
    width: 100%;
    height: auto;
    text-align: center;
    padding-bottom: 5rem;
}
.Talk__Title h1{
    font-family: Sugar;
    font-size: 5rem;
    color: #3a3a3a;
}
.testimonials-slider {
    width: 100%;
    max-width: 900px;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1rem;
}

.slider-container {
    width: 100%;
    overflow: hidden;
}

.slider-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.45s ease;
}

.slide {    
    /* Define el ancho base de la card (ajusta 300px según el tamaño de tu tarjeta) */
    flex: 0 0 650px; 
    
    /* Margen entre cards (ajustamos a un valor fijo en px para simplicidad y precisión) */
    margin: 0 20px; 

    /* Por defecto, baja la opacidad */
    opacity: 0.35; 
    
    /* ELIMINAMOS EL SCALE EN EL ESTADO NORMAL, lo que evita errores de cálculo de ancho */
    /* transform: scale(0.95); <-- ELIMINADO */

    transition: opacity 0.3s ease, transform 0.3s ease;
    
    /* Asegura que el contenido (la tarjeta blanca) esté centrado dentro del slide (la parte roja) */
    display: flex;
    justify-content: center; 
    align-items: center;
    border-radius: 2rem;
    background-color: #f2f2f2 !important;
}

.slide.active {
    opacity: 1;
    /* MANTENEMOS SOLO LA ESCALA EN EL ESTADO ACTIVO SI LO NECESITAS */
    /* Si quieres que se vea más grande la card activa: */
    transform: scale(1.05); 
    
    /* Si no quieres que se vea más grande: */
    /* transform: scale(1); */ 
}

.slide img {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    object-fit: cover;
}

/* FLECHAS FUERA DEL SLIDER */
.arrow {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 0;
}

.arrow-left {
    position: relative;
    transform: rotateY(180deg);
    margin-right: 15px; /* AJUSTA EL ESPACIO */
}
.arrow-right { right: 0; }

.arrow img {
    width: 50px;
    height: 50px;
}

/* =============================
          MEDIA QUERIES
============================= */
@media (max-width: 768px) {

    /* ===== US ===== */
    .Us{
        flex-direction: column;
        text-align: center;
    }

    .Us__Info{
        width: 100%;
        padding: 2rem 1rem;
    }

    .Us__Info h1{
        font-size: 3rem;
        padding-top: 2rem;
    }

    .Us__Info p{
        font-size: 1.2rem;
        padding-left: 0;
        padding-right: 0;
    }

    .Us_img{
        width: 100%;
        margin-top: 2rem;
    }

    /* ===== CLINICS ===== */
    .Clinics__Title{
        font-size: 3rem;
        padding-top: 2rem;
    }

    .Clinics__img{
        flex-direction: column;
        gap: 2rem;
        width: 95%;
        padding-top: 2rem;
    }

    .Clinics-Left,
    .Clinics__Right{
        width: 100%;
    }

    .Clinics__Decor,
    .Clinics__Hover{
        font-size: 1.5rem;
        padding-left: 1rem;
    }

    /* ===== SLIDER ===== */
    .Talk{
        display: none;
    }
    .testimonials-slider{
        padding: 0 10px;
        display: none;
    }

    .slider-container{
        width: 100%;
        overflow: hidden;
    }

    .slider-track{
        display: flex;
        transition: transform 0.45s ease;
    }

    .slide{
        flex: 0 0 100%;
        margin: 0 5px;
        opacity: 1;
        transform: scale(1);
    }

    .slide img{
        width: 100%;
        height: auto;
    }

    .arrow{
        top: 50%;
        transform: translateY(-50%);
        padding: 0;
    }

    .arrow-left{
        left: 0;
        transform: translateY(-50%) rotateY(180deg);
    }

    .arrow-right{
        right: 5px;
        transform: translateY(-50%);
    }

    .arrow img{
        width: 35px;
        height: 35px;
    }

    .Talk{
        padding: 5rem 1rem;
    }

    .Talk__Title{
        display: none !important;
    }
}