@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap');

:root {
    --font-body: #131313;
    --brown-1: #60432E;
    --green-1:#74B5B1;
    --green-2:#4CB0B6;
    --green-3:#85DECC;
    --green-4: #9BBB38;
    --blue-1: #017DD7;
    --gray-1: #D4D4CB;
}


body{
    font-family: Lato,sans-serif;
    font-size: 15px;
    font-weight: 300;
    color:var(--font-body);
}

header{
    z-index: 2;
    position: relative;
    background-color:rgba(255, 255, 255, 0.2);
}

header.secundary{
    background-color: rgba(255, 252, 252, 0.4);
}

main{
    z-index: 1;
    position: relative;
}

.supheader{
    border-bottom: 1px solid #fff;
    font-family: Raleway, Arial, Helvetica, sans-serif;
    font-weight: 600 ;
}

.supheader img{
    vertical-align: middle;
    margin-left: 20px;
}

.supheader div.social{
    float: right;
}



.supheader div.divisor{
    width: 2px;
    border-right: 1px solid white;
    height: 40px;
    display: inline-block;
    position: absolute;
    margin-left: 25px;
    margin-top: -5px;
}

.supheader a{
    font-size: 13px;
    text-decoration: none;
    color:var(--font-body);
    font-weight: 300;
}

.secundary .supheader a{
    color:#131313;
}

.supheader .logo-dir{
    border-right: 1px solid #fff;
}

.supheader div.direction{
    border-right: 1px solid #fff;
    padding-left: 0px;
}

.supheader div.social a{
    font-size: 20px;
    color: var(--font-body);
}

.secundary .supheader div.social a{
    color:#131313;
}

.supheader span{
    font-weight: 300;
    color: var(--font-body);
    font-size: 13px;
    margin-right: 10px;
}

.secundary .supheader span{
    color:#131313;
}



/************ NAV BAR **********/
.navbar{
    padding: 5px 0px;
    font-family: Lato, Arial, Helvetica, sans-serif;
    font-weight: 700;
}

.navbar ul li.nav-item{
    margin-right: 20px;
}

.navbar .btn-header{
    background-color: #fff;
    border: none;
    padding: 10px 60px;
    color: var(--green-1);
}

.navbar .dropdown-item {
    font-weight: 400;
    font-size: 14px;
}

.navbar #navbarText div.social2 a.red{
    color: var(--font-body);
    font-size: 20px;
}
.navbar #social2{
    display: none;
}

.secundary .navbar-light .navbar-nav .nav-link {
    color: #131313;
}

.secundary .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
    color: #131313;
}

.d-movil{
    display: none;
    
}
/************ HOME BANNER **********/

.home-banner{
    margin-top: -300px;
}

.home-banner .bg-position{
    background-position-y:80px;
}

.home-banner div{
    height: 850px;
    background-size: cover;
}

.home-banner .cont-banner{
    width: 86%;
    height: 200px;
    margin-top: 400px;
    font-family: Lato, Arial, Helvetica, sans-serif;
    color: white;
}

.home-banner p.titulo{
    font-size: 40px;
    font-weight: 300;
}

.home-banner p.subtitulo{
    font-size: 25px;
    font-weight: 300;
}

.home-banner a.btn-agenda{
    background-color:#fff;
    padding: 5px 35px;
    border-radius: 5px;
    color:var(--green-1);
    text-decoration: none;
}

/************ MEDIO **********/

.breadcrumbs a{
    color:#131313;
    text-decoration: underline;
}

.medio{
    background: url('../images/home/bg_medio.jpg') no-repeat;
    background-size: cover;
}

.medio .car-medio{
    margin-top: -75px;
}

.medio .block{
    background-color: #fff;
    margin: 0 auto;
    z-index: 2;
    height: auto;
    padding: 0px 30px 25px;
}

.medio .block.light{
    background-color: #fbfafa;
}

.medio .block p.titulo{
    font-weight: 400;
    font-family: Lato,Arial, Helvetica, sans-serif;
    font-size:22px;
    color: var(--brown-1);
}

.medio .block p.description{
    font-weight: 300;
    font-family: Lato,Arial, Helvetica, sans-serif;
    font-style: normal;
}

.medio .block img {
    width: 80%;
    max-width: 80%;
    border-radius: 50% 50% 50% 50%;
    margin: 40px auto 20px;
}

/************ MEDIOS **********/

.medios{
    background-color: #4f635c;
    padding-top: 40px;
    padding-bottom: 80px;
}

.medios h2.tiposC{
    color: white;
    font-weight: 300;
    font-size: 2rem;
}

.medios .car-medios{
    margin-bottom: 40px;
}

.medios .block{
    background-color: #fff;
    margin: 0 auto;
    z-index: 2;
    height: 425px;
    padding: 5px 40px;
    border-right: 1px solid #ccc;
}

.medios .block p{
    font-weight: 300;
}

.medios .block img {
    width: 65%;
    max-width: 65%;
    border-radius: 50% 50% 50% 50%;
    margin: 0px auto 5px;
}

.car-medios .block p.desc-car{
    min-height: 100px;
    max-height: 100px;
}


.car-medios .block a.btn-more{
    padding: 7px 25px;
    color: white;
    background-color: #3b6165;
    text-decoration: none;
    border-radius: 5px;
}


/********** BIOGRAFIA *********/

.biografia{
    background-color: #f5f5f5;
    height: auto;
    font-family: Lato, Arial, Helvetica, sans-serif;  
    color: var(--font-body);
}

.biografia h1{
    font-size: 46px;
}


.biografia .color-v{
    font-weight: 300;
    font-size: 28px;
    color: var(--green-2);
    border-bottom: 1px solid #CCC;
}

.biografia p.detalle{
    font-weight: 300;
    font-size: 18px;
    line-height: 14px;
}

.biografia p.atencion{
    font-weight: 300;
    font-size: 18px;
    line-height: 18px;
    padding-top: 10px;
}



.biografia .biophoto{
    height: 600px;
    background-size: cover;
    background-repeat: no-repeat;
}

.biografia .btn-bio{
    background-color: #3b6165;
    border: none;
    padding: 10px 60px;
    color: white;
}

/******INSTAGRAM****/

.instagram{
    background-color: #FFf;
}

/****** ATENCION ****/

.atencion{
    background-color:#f5f5f5;
}

.atencion a{
    text-decoration: none;
}

.atencion a.btn-phone{
    background-color: #3b6165;
    border: none;
    border-radius: 10px;
    padding: 10px 60px;
    color: white;
    margin: 10px 0px;
}

.atencion iframe{
    width:800px;
    height: 450px;
}


/***TRAYECTORIA****/

section.head-trayectoria{
    background-image: url(../images/home/bg4.png);
    background-repeat: no-repeat;
    height: 470px;
    margin-top: -300px;
    background-position-y:-300px ;
    background-position-x:-500px ;
}

section.head-trayectoria h1{
    padding-top: 350px;
    color: #ffff;
}

section.sabias{
    background-color: var(--bg-green);
}

section.sabias p.description{
    font-weight: 100;
}

section.numerologia{
    font-weight: 100;
}

section.callfin{
    background-color: #f4f4f4;
}

section.callfin a.btn-agenda{
        background-color: #3b6165;
        border: none;
        padding: 10px 50px;
        color: white;
}

.atencion iframe{
    width: 100%;
    height: 300px;
}

/***********MAPA**************/

.map-box .box-contact{
    margin-top: -50px;
    background-color: #fff;
    position: relative;
    z-index: 99;
    margin-bottom: 10px;
    padding-top: 70px;
    padding-bottom: 50px;
    border: 1px solid #ccc;
}



/************ TIPOS CIRUGIAS **********/

.medio-cirugias{
    background-color: #4f635c;
    padding-top: 40px;
    padding-bottom: 80px;
}

.medio-cirugias h2.tiposC{
    color: white;
    font-weight: 300;
    font-size: 2rem;
}

.medio-cirugias .block{
    background-color: #fff;
    margin: 0 auto;
    z-index: 2;
    height: 505px;
    padding: 20px 40px;
    border-right: 1px solid #ccc;
}

.medio-cirugias .block p{
    font-weight: 300;
}

.medio-cirugias .block img {
    width: 75%;
    max-width: 75%;
    border-radius: 50% 50% 50% 50%;
    margin: 0px auto 5px;
}

.medio-cirugias .car-medios .block p.desc-car{
    min-height: 175px;
    max-height: 175px;
}


.medio-cirugias .car-medios .block a.btn-more{
    padding: 7px 25px;
    color: white;
    background-color: #3b6165;
    text-decoration: none;
    border-radius: 5px;
}

.intervencion{
    background-color: #FFF;
    margin-bottom: 80px;

}

.intervencion .block{
    background-color: #fff;
    margin: 0 auto;
    z-index: 2;
    height: 595px;
    padding: 5px 25px;
    border-right: 1px solid #ccc;
}

.intervencion .block p.desc-car1{
    min-height: 195px;
    max-height: 195px;
}

.intervencion .block p.desc-car2{
    min-height: 185px;
    max-height: 185px;
}

.intervencion .block a.btn-more{
    padding: 7px 25px;
    color: white;
    background-color: #3b6165;
    text-decoration: none;
    border-radius: 5px;
}

.intervencion .slick-prev:before, .intervencion .slick-next:before {
font-size: 30px;
    color: var(--green-2);
}

.intervencion .slick-prev {
    left: -35px;
}

.accordion-body{
    color: var(--font-body);
    font-weight: 300;
}

.accordion-button:not(.collapsed) {
    color: #FFF;
    background-color: var(--green-1);
}



#pills-tab .nav-link {
    color: var(--font-body);
    border: 1px solid var(--bs-green);
}

#pills-tab .nav-link.active{
    color: #FFF;
    background-color:var(--green-1);
}

/* CONTENIDO */

.mamoplastias a.btn-more{
    padding: 7px 25px;
    color: white;
    background-color: #3b6165;
    text-decoration: none;
    border-radius: 5px;
    margin-top: 15px;
}

.intervencion a.btn-phone{
    background-color: #3b6165;
    border: none;
    border-radius: 10px;
    padding: 10px 60px;
    color: white;
    margin: 10px 0px;
    text-decoration: none;
}

h2.tit-banner{
    color:#FFF; font-weight: 300; padding-top: 190px;font-size: 60px;
}

.bg-banner{
    height: 550px;
}
/****FOOTER******/
footer{
    background-color: var(--green-2);
    color:#FFF;
    padding: 30px 0px 20px;
    font-weight: 300;
}

footer ul{
    list-style: none;
    padding-left: 0px;
    font-size: 13px;
}

footer p.legal a{
    color: white;
    text-decoration: none;
}

footer ul li a{
    color: white;
    text-decoration: none;
}

footer ul li a:hover{
    color: white;
    text-decoration: underline;
}

footer .min-foot, footer a.min-foot{
    font-size: 13px;
    color: white;
}

footer .social a{
    color:white;
    font-size: 28px;
}

footer p.legal{
    font-size: 12px;
}


@media all and (min-width: 992px) {
	.dropdown-menu li{ position: relative; 	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
    .navbar .nav-item:hover .principal.dropdown-menu{ display: block; } 
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{ display: block; }
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
  .dropdown-menu .dropdown-menu{
      margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
  }
}

/* @media all and (min-width: 992px) {
	.navbar .nav-item .dropdown-menu{ display: none; } 
	.navbar .nav-item:hover .dropdown-menu{ display: block; } 
	.navbar .nav-item .dropdown-menu{ margin-top:0; }
} */


@media (max-width: 576px) {

    header {
        background-color: transparent;
    }
    header.secundary {
        height: 57px;
    }
    .supheader{
        border-bottom: none;
    }
    .supheader div.direction{
        border-right: none;
        margin-left: -15px;
    }
    .supheader span.mail-head{
        display: none;
    }
    .supheader .logo-dir{
        border-right: none;
    }
    .supheader div.social {
        display: none;
        position: absolute;
        right: 0px;
        bottom: 25px;
    }

    .supheader div.social a{
        color: white;
    }

    .supheader div.divisor{
        display: none;
    }

    .navbar {
        display: none;
    }

    .d-movil{
        display: block;
        margin-top: -70px;
        width: 100px;
        
    }

    .d-movil i.fa-bars{
        font-size: 30px;
    }

    .d-movil .dropdown-toggle::after {
        display: none;
    }

    .d-movil .dropdown-menu.principal{
        width: 382px;
        height: 360px;
        margin-top: 6px;
        border-radius: 0px;
    }

    .d-movil .dropdown-menu.secundario{
        transform: none !important;
        margin-top: 0px !important;
        margin-left: 10px !important;
        inset:unset;
        padding: 10px 30px;
    }

    .d-movil .dropdown-menu.tercero{
        transform: none !important;
        padding: 10px 10px;
        margin-top: 33px !important;
    }

   .d-movil #social2{
        display: block;
        margin-top: 30px;
        margin-left: 20px;
    }
    
    .d-movil #social2 a{
        color:var(--font-body);
        font-size:20px;
    }

    .d-movil a.btn-header {
        padding: 10px 20px;
        background-color: #3b6165;
        border: none;
        padding: 10px 60px;
        color: white;
    }

    /*** HOME BANNER ****/

    .home-banner {
        margin-top: -160px;
    }

    .home-banner .cont-banner {
        width: 95%;
        height: 200px;
        margin-top: 225px;
        margin-left: -15px;
        font-family: Belleza;
        color: white;
    }
    .home-banner div{
        height: 638px;
        background-size: cover;
        background-repeat: no-repeat;
        background-color: transparent;
        background-position: -590px 40px;
    }
    
    .home-banner p.titulo {
        font-size: 23px;
    }
    .home-banner p.subtitulo {
        font-size: 16px;
    }
    .home-banner a.btn-agenda {
        padding: 7px 30px;
        font-size: 12px;
    }
    .navbar-light .navbar-toggler {
        margin-top: -80px;
        border-color: white;
    }
    .navbar-collapse{
        background-color: white;
        margin-top: 282px;
        z-index: 5;
        position: absolute;
        width: 102%;
        padding: 10px 12px 130px;
        margin-left: -12px;
    }
    
    .biografia h1{
        font-size: 30px;
    }
    .biografia .color-v{
        font-weight: 300;
        font-size: 22px;
    }
    
    .biografia p.detalle{
        font-weight: 300;
        font-size: 16px;
        line-height: 18px;
    }
    .biografia .btn-bio {
        padding: 10px 20px;
    }

    .atencion iframe{
        width:100%;
        height: auto;
    }

    .medio-cirugias .block {
        height: 505px;
    }
    .medio-cirugias .car-medios .block p.desc-car {
        min-height: 135px;
        max-height: 135px;
    }

    .intervencion .block {
        height: 595px;
    }

    .intervencion .block p.desc-car2 {
        min-height: 115px;
        max-height: 115px;
    }

    .intervencion .slick-next {
        display: none !important;
    }
    h2.tit-banner{
        font-size: 45px;
    }
    .bg-banner {
        height: 390px;
    }
    
}