@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;1,100;1,400;1,700&display=swap');
@font-face {
    font-family: 'Didot-bold';
    src: url('../fonts/Didot-HTF-B16-Bold-Ital.eot');
    src: url('../fonts/Didot-HTF-B16-Bold-Ital.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Didot-HTF-B16-Bold-Ital.woff2') format('woff2'),
        url('../fonts/Didot-HTF-B16-Bold-Ital.woff') format('woff'),
        url('../fonts/Didot-HTF-B16-Bold-Ital.ttf') format('truetype'),
        url('../fonts/Didot-HTF-B16-Bold-Ital.svg#Didot-HTF-B16-Bold-Ital') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Didot LT Std bold';
    src: url('../fonts/DidotLTStd-Bold.eot');
    src: url('../fonts/DidotLTStd-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DidotLTStd-Bold.woff2') format('woff2'),
        url('../fonts/DidotLTStd-Bold.woff') format('woff'),
        url('../fonts/DidotLTStd-Bold.ttf') format('truetype'),
        url('../fonts/DidotLTStd-Bold.svg#DidotLTStd-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Didot LT Std italic';
    src: url('../fonts/DidotLTStd-Italic.eot');
    src: url('../fonts/DidotLTStd-Italic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DidotLTStd-Italic.woff2') format('woff2'),
        url('../fonts/DidotLTStd-Italic.woff') format('woff'),
        url('../fonts/DidotLTStd-Italic.ttf') format('truetype'),
        url('../fonts/DidotLTStd-Italic.svg#DidotLTStd-Italic') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}



@font-face {
    font-family: 'Didot medium';
    src: url('../fonts/Didot-HTF-M96-Medium.eot');
    src: url('../fonts/Didot-HTF-M96-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Didot-HTF-M96-Medium.woff2') format('woff2'),
        url('../fonts/Didot-HTF-M96-Medium.woff') format('woff'),
        url('../fonts/Didot-HTF-M96-Medium.ttf') format('truetype'),
        url('../fonts/Didot-HTF-M96-Medium.svg#Didot-HTF-M96-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Didot';
    src: url('../fonts/Didot.eot');
    src: url('../fonts/Didot.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Didot.woff2') format('woff2'),
        url('../fonts/Didot.woff') format('woff'),
        url('../fonts/Didot.ttf') format('truetype'),
        url('../fonts/Didot.svg#Didot') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --naranjo: #fcc140;
    --blanco:#fff;
    --negro:#000;
    --grisoscuro: #696f86;
    --verdeclaro: #e4fdfa;
    --gris: #b5b8c7;
    --beige: #fff4da;
    --verde: #72bfb8;
}
body{
    
}
.debug{
    border: thin dashed red;
}
.debug [class*='col-'] {
  border: thin dashed blue;
}
.debug .row{
    border: 1px solid orange;
}
.debug .container{
    background-color: rgba(0,255,0,0.07);
}
.debug .zona{
    border: thin solid green;
}
.only-mobile{
    display: none;
}
.only-desk{
    display: block;
}
/*

*/
body{
    font-family: 'Lato', sans-serif;
}
.whatsapp{
    background-color: var(--grisoscuro);
    height: 50px;
    width: 50px;
    border-radius: 5px;
    cursor: pointer;
    -webkit-transition:0.5s; /* Safari */
    transition: 0.5s;
}
.whatsapp:hover{
    background-color: var(--gris);
    -webkit-transition:0.5s; /* Safari */
    transition: 0.5s;
}
.navbar-nav .nav-link{
    margin: auto;
}
.nav-link object{
    pointer-events: none;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: none;
    border: none;
}
.fixed{
    -webkit-transition:0.5s; /* Safari */
    transition: 0.5s;
    background: rgba(255,255,255,0);
    background-size: contain;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
}
.activefix{
    -webkit-transition:0.5s; /* Safari */
    transition: 0.5s;
    background: rgba(255,255,255,0.85) !important;
}
.navbar{
    
    pointer-events: all;
    display: flex;
}
.nav-item{
    padding: 0 2vw;

}
.active{
    color: #696f86 !important;
}
.nav-link {
    color:var(--gris) !important;
    text-decoration: none;
    font-family: 'Didot-bold', serif;
    font-style: italic;
    font-size: 20px;
}
.nav-link:hover{
    color: #696f86 !Important;
}
p{
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    color: var(--grisoscuro);
}
h1{
    font-family: 'Didot-bold', serif;
    font-size: 4.5vw;
    font-weight: 600;
    color: var(--grisoscuro);
}
h2{
    font-family: 'Didot-bold', serif;
    font-size: 4vw;
    font-weight: 600;
    color: var(--grisoscuro);
}
h3{
    font-family: 'Didot-bold', serif;
    font-size: 36px;
    font-weight: 600;
    color: var(--grisoscuro);
}
h4{
    font-family: 'Didot-bold', serif;
    color: var(--grisoscuro);
}
header{
    position: absolute;
    width: 100%;
    z-index: 5;

}
small{
    font-family: 'Lato', sans-serif;
    font-size: 12px;
}
.logo{
    
    max-height: 100px;
    display: flex;
    padding: 0px 0 0 10px;
    margin-bottom: 15px;

}
.zona1{
    padding: 0 0 5vw 0;
}
.slider_block{
    min-height: 600px;
    height: 50vw;
    overflow: hidden;
    max-height: 790px;
}
.slider{
    padding: 150px 0 0 0;
    background-size: cover;
    background-position: center;
}
.owl-carousel.owl-loaded{
    position: relative;
}
.owl-dots{
    position: relative;
    z-index: 4;
    width: auto;
    height: 30px;
    bottom: 260px;
    text-align: center;
    margin: auto;
    background-color: rgba(255,255,255,0.8);
    border-radius: 100px;
    padding: 0 5px;
    left: CALC(50% - 48px);
    display: inline-block;
}

.owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next, .owl-carousel button.owl-dot{
    background: transparent;
    border: 1px solid;
    border-color: var(--gris);
    height: 10px;
    margin: 10px 5px;
    width: 10px;
    border-radius: 100%;
}
.owl-dots .active{
    border-color: var(--grisoscuro);
       background: var(--grisoscuro) !important;
}
.bg1{
    background-image: url(../img/formas1.png);
    background-size: 100%;
    position: relative;
}
.bloque-naranjo{  
    background: rgb(252,193,64);
    background: linear-gradient(0deg,rgba(254,219,158,1)  50%, rgba(252,193,64,1) 50%);

}
.contenedor_naranjo{
    background-image: url(../img/curva_amarilla.png);
    background-size: 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding: 0 0 50px 0;
}
.contenedor_naranjo .abuela{
    margin-top: 100px;
}
.contenedor_naranjo p, .contenedor_naranjo h1, .contenedor_naranjo h2, .contenedor_naranjo h3, .contenedor_naranjo h4{
        color: var(--blanco);
}
.bg3{
    background-color: #b4eae6;
    padding: 0 0 100px 0;
}
.corte{
    background-image: url(../img/corte.png);
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    min-height: 135px;
}
.bg4{
    padding: 50px 0;
    background-image: url(../img/bg4.png);
    background-size: initial;
    background-position: top center;
    background-repeat: no-repeat;
}
.parallax{
    pointer-events: none;
    background-image: url(../img/hojas_parallax.png);
    background-size: contain;
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index:2;
}
.estadia{
    background: rgb(96,190,184);
    background: linear-gradient(0deg, rgba(96,190,184,1) 10%, rgba(254,219,158,1) 80%);
}
.estadia p, .estadia h1, .estadia h2, .estadia h3, .estadia h4{
        color: var(--blanco);
}
.espacio{
    background-color: var(--naranjo);
    min-height: 5vw;
    width: 100%;
    display: block;

    
}
.mascara{
   display: block;
   width: 100%;
   position: relative;
   
   height: 5vw;
   background: rgb(252,193,64);
   background: linear-gradient(0deg, rgba(252,193,64,1) 20%, rgba(252,193,64,0) 55%);

}
.contenido{
    position: relative;
}
.trama{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    mix-blend-mode: hard-light;
}
.contenido .container {
    position: relative;
    z-index: 2;
}
.alto-minimo-datos{
    min-height: 60vw;
}
.alto-minimo{
    min-height: 30vw;
}
.opciones-lista{
    list-style: none;
    max-width: 1366px;
    margin: auto;
}
.opciones-lista li{
    display: block;
    margin: 20px 0 10px;
}
.opciones-lista span{
    margin-right: 10px;
}
.opt-white .lnk{
    color: var(--beige);
    border-color: var(--beige);
}
.opt-white .lnk:hover{
    color: var(--blanco);
    border-color: var(--blanco);
}
.opt-grey .lnk{
    color: var(--verdeclaro) ;
    border-color: var(--verdeclaro) ;
    
}
.opt-grey .lnk:hover{
    color: var(--grisoscuro);
    border-color: var(--grisoscuro);
}

.opciones-lista .lnk{
    position: relative;
    display: inline-block;
    margin: 0 0 20px 0;
    height: 4vw;
    padding-bottom: 10px;
    font-size: 3.5vw;
    text-decoration: none;
    font-family: 'Didot-bold';
    font-weight: 600;
    border-bottom: 1px solid;
    padding: 0 0 0 0px;
    cursor: pointer;
}

.opt-white .lnkActivo{
    color: var(--blanco) !important;
    border-color: var(--blanco) !important;
}
.opt-grey .lnkActivo{
     color: var(--grisoscuro) !important;
    border-color: var(--grisoscuro) !important;
}
.lnk span{
    position: relative;
    left: 0;
    top: 0px;
    height: 21px;
    line-height: 20px;
    padding: 10px 0 0 0;
    font-size: 70px;

}
.lnkActivo span{
    transform: rotate(45deg);
    display: inline-block;
    -webkit-transition:0.5s; /* Safari */
    transition: 0.5s;
}
.opt-right{
    text-align: right;
}
.scroll-status{
    position: fixed;
    top: 20%;
    right: 4%;
    z-index: 5;
}
.scroll-status .marcador{
    position: relative;
    text-align: center;
}
.scroll-status .marcador span:first-child{
    position: absolute;
    top: -14px;
    left: -4px;
    font-family: 'Lato', sans-serif;
    font-style: italic;
}
.scroll-status .marcador span:last-child{
    position: absolute;
    top: CALC(12vw + 10px);
    left: -12px;
    margin: auto;
    font-family: 'Lato', sans-serif;
    font-style: italic;
    text-align: center;
}
.scroll-status .marcador .barra{
    border: 1px solid;
    border-color: var(--grisoscuro);
    border-radius: 5px;
    min-height: 12vw;
    position: absolute;
    margin: 10px auto;
    width: 10px;
    overflow: hidden;
}
.scroll-status .marcador .barra .barra-contenido{
     border-radius: 5px;
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 0%;
    background-color: var(--verde);
}
.caja-display{
    position: relative;
    overflow: hidden;
    max-height: 0;
    -webkit-transition:0.5s; /* Safari */
    transition: 0.5s;
}

.open {
    max-height: 2000vh ;
    -webkit-transition:0.5s; /* Safari */
    transition: 0.5s;
    padding: 100px 0;
}
.caja-display .row{
    
}
.foto{
   
    position: relative;
    top: -4vw;
    right: -4vw;
    z-index: 1;
    
    background-color: var(--blanco);
    -webkit-border-top-left-radius: 80px;
    -moz-border-radius-topleft: 80px;
    border-top-left-radius: 80px;
    min-height: 350px;
    height: 30vw;
    max-height: 800px;
    -webkit-box-shadow: 8px 7px 15px 1px rgba(161,139,89,0.38); 
    box-shadow: 8px 7px 15px 1px rgba(161,139,89,0.38);
}
.foto .imagen{
       -webkit-border-top-left-radius: 80px;
    -moz-border-radius-topleft: 80px;
    border-top-left-radius: 80px;
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    -webkit-box-shadow: inset 0px 0px 57px 1px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 0px 57px 1px rgba(0,0,0,0.5);
    box-shadow: inset 0px 0px 57px 1px rgba(0,0,0,0.5);

}
.texto-caja{
    text-align: left;
    position: relative;
    background-color: var(--blanco);
    -webkit-border-bottom-right-radius: 80px;
    -moz-border-radius-bottomright: 80px;
    border-bottom-right-radius: 80px;
    min-height: 350px;
    height: 30vw;
    max-height: 800px;
    -webkit-box-shadow: 8px 7px 15px 1px rgba(161,139,89,0.38); 
    box-shadow: 8px 7px 15px 1px rgba(161,139,89,0.38);
 
}
.texto-caja ul{
    list-style: disc;
    font-family: 'Lato', sans-serif;
    font-style: italic;
    font-size: 26px;
    color:var(--grisoscuro);
    font-weight: 300;
    margin-left: 5vw;
    max-width: 380px;
}
.texto-caja ul li{
    margin: 20px 0;
}
.texto-caja li:before {
    content: "·";
    font-size: 80px;
    vertical-align: middle;
    line-height: 18px;
    position: relative;
    top: -10px;
    left: -7px;
}
.texto-caja .titulo{
    font-family: 'Didot-bold', serif;
    font-size: 4vw;
    font-weight: 600;
    color: var(--gris);
    transform: rotate(270deg);
    position: absolute;
    opacity: 0.2;
    bottom: 10vw;
}
.texto-caja .titulo_doble{
    font-family: 'Didot-bold', serif;
    font-size: 4vw;
    line-height: 3.3vw;
    font-weight: 600;
    color: var(--gris);
    transform: rotate(270deg);
    position: absolute;
    opacity: 0.2;   
    bottom: 10vw;
}   
.icono {
    position: absolute;
    width: 100%;
    top: 30px;
}
.icono object{
    max-width: 60px;

}
.contacto{
    color: var(--blanco);
    background: var(--verde);
    padding: 6px 30px 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    line-height: 30px;
    -webkit-transition:0.5s; /* Safari */
    transition: 0.5s;
}
.contacto:hover{
    color: var(--blanco);
    padding: 8px 32px 12px 22px;
    -webkit-transition:0.5s; /* Safari */
    transition: 0.5s;
}
.contacto object{
    width: 20px;
    margin-right: 20px;
    position: relative;
    top: 5px;
}
#atencion{
        margin:10vw auto 50px;
}
footer{
}
footer .container{
    border-top: 1px solid;
    border-color: var(--grisoscuro);
    padding-top: 30px;
    padding-bottom: 30px;
}
footer p{
    font-family: 'Lato', sans-serif;
    font-style: italic;
    line-height: 16px;
    margin: 4px 0;
}
.copyr{
    padding: 30px 0 0 0;
}
.rrss a object{
    pointer-events: none !important;
}
.rrss a{
    padding: 5px 20px 0;
    height: 40px;
    display: inline-block;
    border-right: 1px solid;
    border-color: var(--grisoscuro);
}
.rrss a:last-child{
    border: none;

}
@media only screen and (max-width: 3000px) and (min-width:767px)  {
    
}

@media only screen and (max-width: 1366px) and (min-width:977px)  {

}
@media only screen and (max-width: 976px) and (min-width:769px)  {
    .logo{
    width: auto;
    
    }
    .navbar{
        width: 90%;
        margin: auto;
    }
}
@media only screen and (max-width: 767px) and (min-width: 590px) {


}
@media only screen and (max-width: 767px) and (min-width: 320px) {
    .only-mobile{
    display: block;
    }
    .only-desk{
        display: none;
    }
    .scroll-status{
        display: none;
    }
    .navbar{
        width: 100%;
        margin: auto;
    }
    .logo {
        max-height: 100px;
    }
    .bloque-naranjo{  
        background: rgb(252,193,64);
        background: linear-gradient(0deg,rgba(254,219,158,1)  20%, rgba(252,193,64,1) 20%);
        padding: 50px 0;
    }
    .parallax{
        background-attachment: initial;
        height: 100vh;
        width: 100vw;
        background-size: cover;
        background-position: center;
    }
    .bg4{
        background-size: contain;
    }
    .bg2{
        padding: 20px 0;   
    }
    .bg4{
        padding: 50px 0;   
    }
    h1{ 
        font-size: 45px; 
        line-height: 50px;
    }
    h2{
        font-size: 32px;
        line-height: 40px;
    }
    h3{ 
        font-size: 28px; 
        line-height: 34px;
    }
    h4{
        
    }
    .item{
        text-align: center;
    }
    .opciones-lista{
        padding: 0;
    }
    .opciones-lista .lnk{
        position: initial;
        font-family: 'Didot-bold', serif;
        font-size: 26px;
        height: 30px;
        position: relative;
    }
    .lnk span {
        position: relative;
        top: 4px;
        
    }
    .caja-ventana{
        position: relative;
    }
    .bloque-naranjo .ventana{
        max-height: 400px;
        min-width: 160px;
        position: relative;
        left: -30px;
    }
    .bloque-naranjo .abuela{
        max-height: 250px;
    }
    .opciones-lista a {
        padding-bottom: 4px;
        font-size: 30px;
    }
    .alto-minimo-datos {
        min-height: 350px;
    }
    .center-mobile{
        text-align: center !Important;
    }
    .zona1, .somos, .trayectoria{
        padding: 0px 0 50px;
    }
    #atencion{
        margin: 50px 0;
    }
    .open{
        padding: 0;
    }
    .opt-right{
        text-align: left;

    }
    .corte{
        min-height: 60px;
    }
    .foto{
        top: 4vw;
        left: 11px;
        height: 80vw;
        max-height: 500px;
    }
    .texto-caja{
        left: -2.5vw;
        height: 120vw;
        max-height: 500px;
    }
    .slider img{
        max-width: 80%;
        margin: auto;
    }
    .scroll-status {
    right: 12%;
    }
    .navbar .navbar-expand-lg {
        height: 100vw;
    }
    .navbar-collapse{
    background: rgb(255,255,255);
    background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%);
    text-align: center;
    padding: 50px;

    }
    .texto-caja .titulo_doble, .texto-caja .titulo{
        display: none;
    }
    .copyr{
        padding:0 30px;
        text-align: center;
    }
}
@media (pointer: coarse) {
        .parallax {
                background-attachment: fixed !important;
        }
}
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast !important;
  }
}

/* Unset for Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
  img {
    image-rendering: unset !important;
  }
}}