:root {
    --primary: #327E8D;
    --primary--light: #19D1BC;
    --secondary: #6FAAB6;
    --secondary--light: #1B08C1;
    --secondary--complement: #31B7D6;
    --complement: #3A2117;
    --complement--secondary: #7E7359;
    --light: #FCFDFE;
    --dark: #2F3032;
    --white: #FFFFFF;
    --black: #000000;
    --complement--secondary----opacity: #7E7359;
    --verde: #95957A;
    --complement-2: #2B2114;
    --bg: #ECE7DE;
}
@font-face {
    font-family: 'Karlotte Regular';
    font-style: normal;
    font-weight: normal;
    src: local('../fonts/Karlotte Regular'), url('../fonts/Karlotte-MVq0x.woff') format('woff');
}
@font-face {
    font-family: 'Karlotte Italic';
    font-style: normal;
    font-weight: normal;
    src: local('../fonts/Karlotte Italic'), url('../fonts/KarlotteItalic-K7DoD.woff') format('woff');
}
@font-face {
    font-family: 'Graphik';
    src: url('../fonts/Graphik-Light.eot');
    src: local('Graphik Light'), local('Graphik-Light'),
        url('../fonts/Graphik-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Graphik-Light.woff2') format('woff2'),
        url('../fonts/Graphik-Light.woff') format('woff'),
        url('../fonts/Graphik-Light.ttf') format('truetype'),
        url('../fonts/Graphik-Light.svg#Graphik-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('../fonts/Graphik-LightItalic.eot');
    src: local('Graphik Light Italic'), local('Graphik-LightItalic'),
        url('../fonts/Graphik-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Graphik-LightItalic.woff2') format('woff2'),
        url('../fonts/Graphik-LightItalic.woff') format('woff'),
        url('../fonts/Graphik-LightItalic.ttf') format('truetype'),
        url('../fonts/Graphik-LightItalic.svg#Graphik-LightItalic') format('svg');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('../fonts/Graphik-Regular.eot');
    src: local('Graphik Regular'), local('Graphik-Regular'),
        url('../fonts/Graphik-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Graphik-Regular.woff2') format('woff2'),
        url('../fonts/Graphik-Regular.woff') format('woff'),
        url('../fonts/Graphik-Regular.ttf') format('truetype'),
        url('../fonts/Graphik-Regular.svg#Graphik-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Graphik';
    src: url('../fonts/Graphik-RegularItalic.eot');
    src: local('Graphik Regular Italic'), local('Graphik-RegularItalic'),
        url('../fonts/Graphik-RegularItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Graphik-RegularItalic.woff2') format('woff2'),
        url('../fonts/Graphik-RegularItalic.woff') format('woff'),
        url('../fonts/Graphik-RegularItalic.ttf') format('truetype'),
        url('../fonts/Graphik-RegularItalic.svg#Graphik-RegularItalic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/* ---------------------------------------
@@@@ html  
--------------------------------------- */
html, body {
    padding: 0;
    margin: 0;
    font-family: 'Graphik', 'Roboto', 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    color: var(--dark);
    background-color: var(--light);
}
html {
    scroll-behavior: smooth;
}
.text-primary {
    color: var(--primary)!important;
}
.text-secondary {
    color: var(--secondary)!important;
}
.text-white {
    color: var(--white)!important;
}
.title-primary {
    font-family: 'Karlotte Regular';
    font-size: clamp(3.5rem, -0.618rem + 6.6486vw, 6.5625rem);
    font-style: normal;
    font-weight: 400;
    line-height: 112%; /* 7.35rem */
}
.title-secondary {
    font-family: 'Graphik';
    font-weight: 300;
    font-size: clamp(2rem, 1.3277rem + 1.0855vw, 2.5rem);
}
.title-sub {
    font-size: clamp(1.5rem, 0.5756rem + 1.4925vw, 2.1875rem);
    font-weight: 300;
}
.title-sub small {
    font-family: 'Graphik';
    font-weight: 300;
    font-size: 70%;
}
.title-main {
    font-family: 'Karlotte Regular';
    font-size: clamp(3rem, 1.9915rem + 1.6282vw, 3.75rem);
}
.bg-primary {
    background-color: var(--primary)!important;
}
.bg-secondary {
    background-color: var(--secondary)!important;
}
.bg-complement {
    background-color: var(--complement);
}
.btn {
    font-size: clamp(1rem, 0.6409rem + 0.5797vw, 1.125rem);
    padding: 12px 26px;
    border-radius: 25px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.btn img {
    margin-left: 50px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.btn:hover img {
    margin-left: 65px;
}

.navbar {
    position: relative;
    background-color: transparent!important;
    padding: 30px 24px;
    z-index: 5;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.navbar .navbar-brand img {
    max-width: 13.48rem;
    width: 100%;
}
.navbar-light .navbar-nav .nav-link {
    font-size: clamp(1rem, 0.6638rem + 0.5427vw, 1.25rem);
    color: var(--dark);
    padding: 12px 20px;
    border-radius: 25px;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.navbar-light .navbar-nav .nav-link.nav-contacto {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    background-color: var(--secondary);
    color: var(--white);
}
.navbar-light .navbar-nav .nav-link.nav-contacto:hover, 
.navbar-light .navbar-nav .nav-link.nav-contacto:focus, 
.navbar-light .navbar-nav .nav-link.nav-contacto:active {
    background-color: var(--primary);
}
.dropdown-menu {
    border: 0;
    background-color: rgba(255, 255, 255, .5);
    backdrop-filter: blur(5px);
}
.dropdown-item.active, .dropdown-item:active {
    color: var(--primary)!important;
    background-color: transparent!important;
}
.navbar ul.navbar-nav.ml-auto.d-none.d-lg-flex li.nav-item.dropdown {
    display: none;
}


.footer {
    padding: 0;
}
.footer a {
    font-size: clamp(1rem, 0.6638rem + 0.5427vw, 1.25rem);
}
.footer ul {
    align-items: center;
    list-style-type: none;
    padding: 0;
    margin: 0;
    gap: 1rem 3rem;
}
.footer .bg-secondary {
    padding: 2.5rem 0;
}
.footer .bg-white {
    padding: 2.8rem 0;
}
.footer .d-lang {
    gap: 1.5rem;
}
.footer .d-lang a {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: var(--white);
    height: 3.25rem;
    width: 3.25rem;
    border: 1px solid var(--white);
    border-radius: 50%;
}
.footer .d-lang a.active {
    color: var(--primary);
    background-color: var(--white);
}
.footer .d-lang a:hover, .footer .d-lang a:focus, .footer .d-lang a:active {
    text-decoration: none;
}
.footer .bg-white .d-flex {
    gap: 1rem;
}

.section__agenda {
    margin: 4rem 0;
}
.section__agenda .bg {
    background-image: url('../img/bg/bg_contacto.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: clamp(2rem, -1.3616rem + 5.4274vw, 4.5rem) clamp(1rem, -3.7062rem + 7.5984vw, 4.5rem);
    border-radius: clamp(1rem, -1.6893rem + 4.3419vw, 3rem);
}
.section__agenda .d-flex {
    flex-direction: column;
    list-style-type: none;
    padding: 0;
    gap: 1rem;
}
.section__agenda li:nth-child(1) .btn {
    background-color: var(--black);
    color: var(--white);
}
.section__agenda li:nth-child(2) .btn {
    border-color: var(--complement--secondary);
    color: var(--complement--secondary);
    background-color: transparent;
}
.section__agenda .social {
    display: flex;
    justify-content: center;
    align-items: end;
    height: 100%;
}
.section__agenda .social a {
    flex-direction: row;
    align-items: center;
    font-size: clamp(1.25rem, 0.2415rem + 1.6282vw, 2rem);
    font-weight: 300;
    color: var(--black);
    gap: 1.5rem;
}
.section__agenda .social img {
    width: clamp(2.5rem, 1.4915rem + 1.6282vw, 3.25rem);
    height: auto;
}
/* ---------------------------------------
@@@@ page ---> index  
--------------------------------------- */
.section__home {
    position: relative;
    background-position: center;
    background-size: cover;
    background-position: center;
    background-image: url('../img/home/drmanjarrez_header.png');
    height: 100vh;
    padding-bottom: 3rem;
}
.section__home .title-primary {
    color: var(--white);
}
.section__home .color-x {
    color: var(--dark);
}
.section__home .btn {
    color: var(--white);
    text-align: left;
    border: 1px solid var(--white);
    width: 100%;
    border-radius: 4rem;
    padding: 1.5rem 2rem;
    background-repeat: no-repeat;
    background-size: 2rem auto;
    background-position: 95% 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none'%3E%3Crect width='38' height='38' rx='19' fill='white'/%3E%3Cpath d='M19.8238 27.622C19.7007 27.5025 19.6031 27.3607 19.5365 27.2044C19.4699 27.0482 19.4356 26.8807 19.4356 26.7115C19.4356 26.5423 19.4699 26.3748 19.5365 26.2186C19.6031 26.0624 19.7007 25.9205 19.8238 25.8011L25.4865 20.2859L9.31974 20.2859C8.96972 20.2859 8.63404 20.1505 8.38654 19.9095C8.13904 19.6684 8 19.3415 8 19.0006C8 18.6597 8.13904 18.3328 8.38654 18.0917C8.63404 17.8507 8.96972 17.7153 9.31974 17.7153L25.4865 17.7153L19.8238 12.198C19.5758 11.9565 19.4366 11.629 19.4366 11.2876C19.4366 10.9461 19.5758 10.6186 19.8238 10.3771C20.0717 10.1357 20.408 10 20.7586 10C21.1092 10 21.4455 10.1357 21.6934 10.3771L29.6118 18.0891C29.7349 18.2085 29.8325 18.3504 29.8991 18.5066C29.9657 18.6629 30 18.8304 30 18.9995C30 19.1687 29.9657 19.3362 29.8991 19.4924C29.8325 19.6487 29.7349 19.7906 29.6118 19.91L21.6934 27.622C21.5708 27.7418 21.4251 27.8369 21.2647 27.9017C21.1043 27.9666 20.9323 28 20.7586 28C20.5849 28 20.4129 27.9666 20.2525 27.9017C20.0921 27.8369 19.9464 27.7418 19.8238 27.622Z' fill='%236FAAB6'/%3E%3C/svg%3E");
}
.section__home .btn:hover {
    background-position: 96% 50%;
}
.section__about {
    padding: 5rem 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/bg/bg_about.svg');
}
.section__about .btn {
    color: var(--white);
    border: 1px solid var(--white);
}
.section__dr .left-column {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
}
.section__dr .left-column div {
    max-width: 31rem;
    width: 100%;
    margin: 0 auto;
}
.section__dr .left-column .note {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    margin: auto 2rem 2rem 0;
    margin-top: auto;
    text-align: right;
}
.section__dr h5 {
    font-weight: 300;
}
.section__dr .right-column {
    position: relative;
    height: 100vh;
    background-size: cover;
    background-position: center;
}
.section__services {
    padding: clamp(4rem, -7.3042rem + 18.251vw, 13rem) 0 clamp(4rem, -1.0241rem + 8.1115vw, 8rem);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-image: url('../img/bg/bg_services.svg');
}
.section__services .title-main {
    max-width: 52rem;
    width: 100%;
    margin: 0 auto;
}
.section__services__button {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: flex-end;
    align-items: flex-end;
    font-size: clamp(1rem, -0.1766rem + 1.8996vw, 1.875rem);
    font-weight: 300;
    color: var(--white);
    text-decoration: none;
    padding: 2.25rem 10rem 2.25rem 0;
    max-width: 58.3125rem;
    width: 100%;
    height: 25rem;
    border-radius: 15rem;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--complement--secondary);
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.section__services__link {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0 1.5rem;
}
.section__services__link img {
    position: relative;
    width: 1.8125rem;
    height: auto;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
.section__services__button:nth-child(1) {
    background-image: url('../img/home/cat-1.png');
}
.section__services__button:nth-child(2) {
    background-image: url('../img/home/cat-2.png');
}
.section__services__button:nth-child(3) {
    background-image: url('../img/home/cat-3.png');
}
.section__services__button:nth-child(4) {
    background-image: url('../img/home/cat-4.png');
}
.section__services__button:nth-child(5) {
    background-image: url('../img/home/cat-5.png');
}
.section__services__button:hover, .section__services__button:focus, .section__services__button:active {
    color: var(--white);
    text-decoration: none;
}
.section__services__button:hover img {
    margin-left: 15px;
}
.section__services__button:nth-child(even) {
    margin-left: auto;
}
.section__services__button:not(:last-child) {
    margin-bottom: 3rem;
}
.section__services .btn {
    margin-top: 5rem;
    color: var(--white);
    background-color: var(--secondary);
}
.section__spa {
    padding: clamp(4rem, -3.5361rem + 12.1673vw, 10rem) 0 clamp(4rem, -2.2801rem + 10.1394vw, 9rem);
    background-color: var(--secondary);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/bg/bg_spa.svg');
}
.section__spa img {
    max-width: 50rem;
    width: 100%;
    height: auto;
}
.section__spa .btn {
    color: var(--secondary);
    background-color: var(--white);
    max-width: 15rem;
}
.section__appointment {
    padding: clamp(4rem, 1.2368rem + 4.4613vw, 6.2rem) 0;
    background-color: var(--bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/bg/bg_contact.svg');
}
.section__appointment .btn {
    margin-top: 4rem;
    color: var(--white);
    background-color: var(--secondary);
}
.section__appointment .d-flex {
    flex-direction: column;
    gap: 1rem;
}
.section__appointment .btn {
    color: white;
    background-color: var(--black);
    border-color: var(--black);
    max-width: 28rem;
    width: 100%;
    margin: 0;
}
.section__appointment .btn.v2 {
    color: var(--black);
    background-color: transparent;
}
.section__appointment img {
    display: block;
    max-width: 30rem;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
/* ---------------------------------------
@@@@ page ---> Dr  
--------------------------------------- */
.section__adrian {
    padding: clamp(2.5rem, -0.8616rem + 5.4274vw, 5rem) 0 0 0;
}
.section__adrian img {
    display: block;
    max-width: 32rem;
    width: 100%;
    height: auto;
    margin: 0 auto;
}
/* ---------------------------------------
@@@@ page ---> Servicios  
--------------------------------------- */
.section__head {
    padding: clamp(2.5rem, -0.8616rem + 5.4274vw, 5rem) 0;
}
.section__head h1 {
    color: var(--complement--secondary);
}
.section__servicesgrid img {
    display: block;
    max-width: 32rem;
    margin: 0 auto;
}
.section__servicesgrid h6 {
    font-size: clamp(1.35rem, 0.6777rem + 1.0855vw, 1.85rem);
    font-size: 400;
}
.section__servicesgrid ul {
    padding: 0;
    list-style-type: none;
}
.section__servicesgrid li {
    text-align: center;
}
.section__servicesgrid li a {
    font-size: clamp(1rem, 0.3277rem + 1.0855vw, 1.5rem);
    font-weight: 300;
    line-height: 2;
    color: var(--black);
}
.servicio img {
    width: 100%;
    border-radius: .9375rem;
}
.servicio {
    padding: clamp(2.5rem, -0.8616rem + 5.4274vw, 5rem) 0;
}
.servicio .breadcrumb {
    background-color: transparent;
}
.servicio .breadcrumb a {
    color: var(--black);
    opacity: .5;
}
.servicio_title {
    font-size: clamp(1.85rem, 0.5726rem + 2.0624vw, 2.8rem);
    font-weight: 300;
}
.breadcrumb-item+.breadcrumb-item::before {
    content: "*";
    margin-top: 5px;
    color: var(--black);
    opacity:1;
}
.servicio .bg {
    background-color: var(--secondary);
    border-radius: .9375rem;
    padding: 4rem clamp(1rem, -1.017rem + 3.2564vw, 2.5rem);
}
.servicio .mini-title {
    font-size: clamp(1rem, -1.017rem + 3.2564vw, 2.5rem);
    font-weight: 300;
    color: var(--white);
}
.servicio .mini-title i {
    font-weight: 400;
}
.servicio label {
    color: var(--white);
}
.servicio .form-control {
    background-color: rgba(255,255,255, .5);
}
.servicio .btn {
    color: var(--secondary);
    background-color: var(--white);
}
/* ---------------------------------------
@@@@ page ---> contact  
--------------------------------------- */
.contact {
    padding: clamp(2.5rem, -0.8616rem + 5.4274vw, 5rem) 0 0 0;
}
.contact p.b {
    font-weight: 400;
}
.contact ul {
    padding: 0;
    list-style-type: none;
    gap: 3rem;
}
.contact .d-flex a {
    flex-direction: row;
    align-items: center;
    font-weight: 300;
    color: var(--black);
    gap: 1.5rem;
}
.contact .d-flex img {
    width: 2.5rem;
    height: auto;
}
form label {
    font-size: clamp(1rem, 0.6638rem + 0.5427vw, 1.25rem);
}
.form-control {
    border-radius: 2rem;
}
input:not([type=textarea]).form-control {
    height: 3rem;
}
.contact .btn {
    color: var(--white);
    background-color: var(--secondary);
}
#map {
    padding: 3rem 0 5rem;
}
/* ---------------------------------------
@@@@ page ---> html  
--------------------------------------- */
















/* ---------------------------------------
@@@@ responsive
--------------------------------------- */
@media (min-width:992px) {
    .container-fluid {
        padding-left: 25px;
        padding-right: 25px;
    }
    .navbar .navbar-brand img {
        display: block;
        margin: 0 auto;
    }
    .navbar.absolute {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .navbar.absolute .nav-link {
        color: var(--white);
    }
    .navbar-light.absolute .navbar-nav .nav-link:focus,
    .navbar-light.absolute .navbar-nav .nav-link:hover {
        color: var(--white);
    }
}
@media (min-width:1216px) {
    .container-fluid {
        padding-left: 120px;
        padding-right: 120px;
    }
    .header__title {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 991px) {
    .navbar .navbar-brand img {
        max-width: 8rem;
    }
    .navbar .btn.btn-lang {
        padding: 12px 20px;
        background-color: transparent;
        color: var(--dark);
    }
    .section__services__button {
        align-items: center;
        align-content: center;
        padding: 2.25rem 5rem;
        text-align: center;
    }
}


@media (min-width: 768px) {}
@media (max-width: 767px) {}