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

html, body {height: 100%;margin: 0;padding: 0;}
body {font-family: "Plus Jakarta Sans", sans-serif; color: #174673; background-color: #fff;}
.container {width: 94%; max-width: 1200px; margin: auto; position: relative;}
h2 {margin-top: 0px; margin-bottom: 25px; font-size: 22px;}
h3 {margin-bottom: 5px;}
p {margin-bottom: 20px; line-height: 22px;}

header {position: absolute; width: 100%; padding: 20px 0px; padding-top: 25px; z-index: 1;}
header a {color: #fff;}
header .container {display: flex; justify-content: space-between; align-items: center;}
.logo-top { height: 50px; width: auto;}
.logo-top path {fill: #fff !important;}

.contact-top {display: flex; align-items: center; gap: 30px;}
.contact-top a {display: inline-flex; align-items: center; text-decoration: none; gap: 5px; font-weight: 500;}
.contact-top a svg {height: 14px;}
.contact-top a svg path {fill: #fff;}
.contact-top .phone path {stroke: #fff;}
.contact-top .whatsapp {border: 1px solid #fff; padding: 8px 15px; border-radius: 4px;}

.intro {background-color: #DDE5F5; padding-top: 95px; position: relative;}
.intro::before {position: absolute; top: 0px; z-index: 0; content: ''; width: 100%; height: 100%;
background: rgb(128,203,188); background: linear-gradient(0deg, rgba(128,203,188,0) 0%, rgba(128,203,188,1) 100%);}
.intro .container {z-index: 2; display: flex; align-items: center;}
.intro .text {min-width: 42%;}
.intro h1 {font-size: 35px; margin-bottom: 12px; margin-top: 25px;}
.intro p {line-height: 27px; font-size: 18px; width: 90%;}
.intro .adress {font-weight: 600; margin-top: 25px;}
.intro .adress svg {height: 16px;}

.intro .cont-swiper {width: 58%; margin-bottom: -30px; position: relative;}
.swiper_intro {border-radius: 6px; overflow: hidden; }
.swiper-slide img {width: 100%; display: block;}
.swiper-slide .caption {position: absolute; left: 15px; bottom: 15px; font-weight: 600; font-size: 19px; background: rgba(255, 255, 255, .9); padding: 10px 30px; border-radius: 4px;}
.cont-swiper .swiper-pagination {position: absolute; right: 0px; bottom: -25px; text-align: right;}
.swiper-pagination-bullet {width: 24px; height: 6px; border-radius: 2px; background-color: #DDE5F5; opacity: 1;}
.swiper-pagination-bullet-active {background-color: #174673;}

.profesionales {padding: 50px 0px; padding-top: 60px;}
.mod-prof {display: flex; background-color: #DDE5F5; align-items: center; border-radius: 4px; overflow: hidden; margin-bottom: 20px;}
.mod-prof h3 {min-width: 200px; padding: 0px 20px; font-weight: 600; margin: 0px;}
.mod-prof .cont-info {width: 100%; color: #fff;}
.mod-prof .cont-info .info {display: flex; gap: 20px; width: auto; padding: 25px 30px; align-items: center; background-color: #174673;}
.mod-prof .cont-info .info:nth-child(2) {border-top: 1px solid rgba(255, 255, 255, .2);}
.mod-prof .cont-info .info h4 {font-weight: 500; font-size: 20px;}
.mod-prof .cont-info .info h4 small {display: block; font-size: 14px; color: #80CBBC; font-weight: 400;}
.mod-prof .cont-info .info a {margin-left: auto; background-color: #80CBBC; color: #fff; font-weight: 500; padding: 10px 15px; border-radius: 4px; display: inline-flex; gap: 6px; align-items: center; text-decoration: none;}
.mod-prof .cont-info .info a svg {height: 16px; width: auto;}

.ubicacion {padding: 50px 0px;  padding-bottom: 60px; background: rgb(122,206,190); background: linear-gradient(0deg, rgba(122,206,190,1) 0%, rgba(254,243,227,1) 100%);}
.ubicacion .box {display: flex; align-items: end; gap: 30px; background-color: #fff; border-radius: 4px; padding: 15px;}
.ubicacion .box .info {max-width: 400px; padding: 20px;}
.ubicacion .box .mapa {width: 100%;}

.especialidades {padding: 50px 0px; padding-bottom: 60px;}

.especialidades .cont-swiper {position: relative;}
.especialidades .cont-swiper .swiper_especialidades-next {top: -30px; right: 0px;}
.especialidades .cont-swiper .swiper_especialidades-prev {top: -30px; left: inherit; right: 40px}

.swiper_especialidades, .swiper_especialidades .swiper-wrapper {height: 100%;}
.swiper_especialidades .swiper-slide {line-height: 22px; height: auto; box-sizing: border-box; padding: 40px 40px; background-color: #DDE5F5; border-radius: 4px; }
.swiper_especialidades .swiper-slide h3 {margin-top: 0px;}
.swiper_especialidades .swiper-slide p {width: 95%;}
.swiper_especialidades .swiper-slide ul {margin: 0px; padding-left: 15px;}

.swiper_especialidades-next:after, .swiper_especialidades-prev:after {content: none;}
.swiper_especialidades-prev svg {transform: rotate(180deg);}

.redes {background: rgb(221,229,245); background: linear-gradient(90deg, rgba(221,229,245,1) 0%, rgba(255,239,236,1) 100%);
padding: 30px 0px; display: flex; justify-content: center; align-items: center; }
.redes a {font-weight: 600; display: inline-flex; align-items: self-end; gap: 5px; color: #174673; text-decoration: none;}
.redes a svg {height: 14px;}

footer {background-color: #F8F8F8; text-align: center; padding: 50px 0px; padding-bottom: 0px;}
footer .container {display: flex; justify-content: center; font-weight: 600; font-size: 18px;}
footer .container .col {text-align: center; display: flex; align-items: center; gap: 5px; min-width: 20%; justify-content: center;}
footer .container .col svg {height: 14px;}
footer .container .col2 svg {height: 50px; width: auto; }
footer .container .col2 svg path {fill: #80CBBC !important;}

.cont-logo-zurbrand {text-align: center; padding-top: 40px; padding-bottom: 40px;}

@media screen and (max-width: 767px) {

.container {width: 90%;}
h2 {font-size: 19px; margin-bottom: 20px;}
h3 {font-size: 17px; margin-bottom: 10px;}
p {font-size: 15px; line-height: 21px;}

.logo-top {height: 46px; margin-top: 2px;}

.contact-top .phone {display: none;}
.contact-top .whatsapp {padding: 12px 13px;}
.contact-top .whatsapp span {display: none;}
.contact-top a svg {height: 20px; width: auto;}

.intro .container {flex-wrap: wrap;}
.intro .text {padding-bottom: 40px;}
.intro .cont-swiper {width: 100%; order: -1; margin-bottom: 0px;}

.intro h1 {font-size: 28px;margin-bottom: 10px;margin-top: 35px;}
.intro p {line-height: 25px; font-size: 17px; width: 99%; margin-top: 0px;}
.intro .adress {font-size: 16px;}
.intro .adress svg {height: 14px;}

.swiper-slide .caption {left: 10px; bottom: 10px;}

.profesionales {padding: 30px 0px;padding-top: 40px;}

.mod-prof {flex-wrap: wrap;}
.mod-prof h3 {width: auto; padding: 0px 15px; margin: 15px 0px;}
.mod-prof .cont-info .info {justify-content: space-between; gap: 15px; padding: 0px 15px; padding-top: 15px; padding-bottom: 20px; flex-wrap:wrap;}
.mod-prof .cont-info .info h4 {width: 80%; order: -1; margin-top: 0px; margin-bottom: 0px;}
.mod-prof .cont-info .info h4 small {margin-bottom: 3px;}
.mod-prof .cont-info .info > svg {height: 40px; width: auto;}
.mod-prof .cont-info .info a {margin-left: inherit;}

.ubicacion .box {flex-wrap: wrap; padding: 20px; gap: 15px;}
.ubicacion .box .info {padding: 0px; padding-top: 20px;}

.swiper_especialidades .swiper-slide {padding: 30px 30px; padding-bottom: 40px;}

footer {padding-top: 45px;}
footer .container {flex-wrap: wrap; position: relative;}
footer .container .col {justify-content: start; width: 95%; margin-bottom: 10px; text-align: left; font-size: 18px;}
footer .container .col2 {position: absolute; width: auto; right: -10px; margin: 0px; top: 5px;}
footer .container .col2 svg {height: 44px;}

.cont-logo-zurbrand {border-top: 1px solid rgba(0, 0, 0, .1); padding-top: 25px; padding-bottom: 25px; margin-top: 30px;}
.cont-logo-zurbrand svg {height: 12px; width: auto;}

}