:root{

    --rosa:#ff008c;
    --azul:#113d87;
    --gris:#f7f8fc;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Poppins',sans-serif;
    line-height:1.6;
}

header{
    position:fixed;
    width:100%;
    background:white;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:1000;
    box-shadow:0 2px 15px rgba(0,0,0,.08);
}

.logo img{
    height:60px;
}

.hamburger{
    background:none;
    border:none;
    font-size:26px;
    color:var(--azul);
}

nav{
    display:none;
    position:absolute;
    top:90px;
    left:0;
    width:100%;
    background:white;
}

nav.active{
    display:block;
}

nav ul{
    list-style:none;
}

nav li{
    border-bottom:1px solid #eee;
}

nav a{
    display:block;
    padding:15px;
    color:var(--azul);
    text-decoration:none;
}

/* slider */
.hero{
    padding: 0;
    position:relative;
    height:100vh;
    overflow:hidden;
    width:100%;
}

.slider{
    width:100%;
    height:100%;
    position:relative;
}

.slides{
    width:100%;
    height:100%;
    position:relative;
}

.slide{
    position:absolute;
    width:100%;
    height:100%;
    opacity:0;
    transition:opacity .8s ease;
}

.slide.active{
    opacity:1;
    z-index:2;
}

.slide img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.caption{
    position:absolute;
    left:7%;
    bottom:7%;
    max-width:520px;
    color-scheme:white;
    /* padding: 25px; */
    border-radius: 25px;
}

.caption img{
    max-width:190px;
}

.cap-text {
    /* position:absolute; */
    max-width:520px;
    color-scheme:white;
    background: rgba(17, 61, 135,0.7);
    padding: 25px;
    border-radius: 25px;    
}

.cap-text h1{
    font-size:2rem;
    margin:15px 0;
    color: white;
}

.cap-text span{
    color: white;
    font-weight: 600;
    /* border-radius: 25px;
    padding: 15px;
    background-color: rgba(0,0,0,.35) */
}

.prev,
.next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border-radius:50%;
    border:none;
    background:rgba(0,0,0,.45);
    color:white;
    font-size:22px;
    cursor:pointer;
    z-index:20;
}

.prev{
    left:15px;
}

.next{
    right:15px;
}

.dots{
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:20;
}

.dot{
    -width:12px;
    height:12px;
    border-radius:50%;
    background:white;
    opacity:.5;
    cursor:pointer;
}

.dot.active{
    opacity:1;
    background:#ff0088;
}

.controls{
    position:absolute;
    bottom:20px;
    right:20px;
    display:flex;
    gap:10px;
    z-index:30;
}

.controls button{
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:white;
    color:#113d87;
    cursor:pointer;
    font-size:18px;
}
.btn{
    display:inline-block;
    margin-top:20px;
    padding:15px 30px;
    /* background:linear-gradient(90deg,var(--rosa),var(--azul)); */
    background-color: rgba(0,0,0,.35);
    color:white;
    text-decoration:none;
    border-radius:40px;
}
/* Fin slider */

section{
    padding:100px 25px;
    margin: 0 auto;
}

h2{
    text-align:center;
    color:var(--azul);
    margin-bottom:20px;
}

.subtitle{
    display: block;
    text-align: center;
    margin-bottom: 20px;
    line-height: 25px;
}

.benefits{
    max-width: 70rem;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.benefit-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}

.benefit{
    background:white;
    padding:20px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.benefit i{
    font-size:2rem;
    color:var(--rosa);
    margin-bottom:10px;
}

.doctor {
    max-width: 70rem;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.doctor p{
    text-align: center;
}

.doctor ul{
    margin: revert;
}

.doctor-cards {
    display:grid;
    grid-template-columns:3fr 2fr;
    gap:15px;
}
.doctor-card {
    background:white;
    padding:25px;
    border-radius:20px;
}
.doctor-card p{
    text-align: left;
    margin-bottom: 1.6em;
}
.doctor-card img {
    border-style: solid;
    border-width: 3px 3px 3px 3px;
    border-color: var(--azul);
    border-radius: 5px;
    max-width: 100%;
    height: auto;
    display: block; /* Removes unwanted baseline spacing */
}

.img-center {
    display: flex;
    justify-content: center; /* Centers horizontally */
    align-items: center;     /* Centers vertically */
}

.esp {
    max-width: 70rem;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.cards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:25px;
}

.card{
    background:white;
    padding:25px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.card a {
    text-decoration: none;
}

.card h3{
    color:var(--rosa);
    margin-bottom:10px;
    word-break: break-word;
}

.testimonios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}


.testimonials {
    max-width: 70rem;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

.testimonial{
    background:var(--gris);
    padding:25px;
    margin-bottom:15px;
    border-radius:20px;
    max-width: 70rem;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */ 
}

.testimonial-star {
    text-align: right;
    margin-top: 15px;
    color:var(--rosa);
}

.social-links{
    display:flex;
    justify-content:center;
    gap:20px;
}

.social-links a{
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--azul);
    color:white;
    border-radius:50%;
    font-size:1.5rem;
    text-decoration: none;
}

footer{
    background:var(--azul);
    color:white;
    text-align:center;
    padding:50px 20px;
}

footer h2{
    color:white;
}

footer iframe{
    width:100%;
    height:300px;
    border:0;
    margin-top:20px;
    border-radius:20px;
}

.credits{
    margin-top:20px;
}

.credits a{
    color:white;
}

.whatsapp{
    position:fixed;
    right:20px;
    bottom:20px;
    width:65px;
    height:65px;
    background:#25D366;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:2rem;
    border-radius:50%;
    box-shadow:0 5px 20px rgba(0,0,0,.2);
    z-index:999;
    text-decoration: none;
}

/*carousel quienes somos*/
.carousel {
    background: #fff;
    margin-bottom: 85px;
}

.carousel img {
    display: block;
    height: 400px;
    margin-right: 10px;
    border-radius: 5px;
}

@media (max-width: 767px) {
    .doctor-cards {
        grid-template-columns:1fr;
    }
    .caption {
        max-width:350px;
    }
    .caption img{
        position: relative;
        left: 40%;
    }
}

/*before - after*/
.image-compare {
	--splitter-color: rgb(255, 0, 140);
	--splitter-size: 0.125rem;
	--expand: 0.875rem;
	--handle-size: calc(var(--expand) + var(--splitter-size));
	position: relative;
}
.image-compare span {
	display: block;
	position: absolute;
	top: 0;
	left: calc(-1 * var(--expand));
	bottom: calc(-1 * var(--expand));
	width: calc(var(--expand) + 50% + var(--splitter-size) / 2);
	max-width: calc(var(--expand) + 100%);
	min-width: var(--handle-size);
	padding-left: var(--expand);
	padding-bottom: var(--expand);
	background: linear-gradient(135deg, transparent 0, transparent 50%, var(--splitter-color) 50%, var(--splitter-color)) 100% 100% / var(--handle-size) var(--handle-size) no-repeat;
	resize: horizontal;
	overflow: hidden;
}
.image-compare img {
	display: block;
	height: 100%;
	user-select: none;
}
.image-compare > img {
	max-width: 100%;
	height: auto;
}
.image-compare span::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: var(--expand);
	border-right: var(--splitter-size) solid var(--splitter-color);
}
.comparar {
    margin-top: 50px; 
    display: flex;
    justify-content: center;  /* Centra horizontalmente */
    align-items: center;      /* Centra verticalmente */
}