@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; src: url('../fonts/Cormorant_Garamond/static/CormorantGaramond-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Cormorant Garamond Bolder'; font-style: normal; font-weight:bold; src: url('../fonts/Cormorant_Garamond/static/CormorantGaramond-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 300; src: url('../fonts/Nunito/static/Nunito-Light.ttf') format('truetype'); }
@font-face { font-family: 'Neue Haas'; font-style: normal; font-weight: 300; src: url('../fonts/Neue_Haas_Grotesk/NHaasGroteskTXPro-55Rg.ttf') format('truetype'); }
@font-face { font-family: 'North Carossela'; font-style: normal; font-weight: 300; src: url('../fonts/north_carossela/North\ Carossela.otf') format('truetype'); }
:root{
  --font-negro:#1d1d1b;
  --font-white:#fff;
  --background-gris: #e3e1df;
  --background-gris-claro: #f1f1f1;
  --background-verde: #f2f0e3;
  --background-negro: #000000;
  --background-blanco: #ffffff;
  --background-beige:#dddbd6;
  --font-crema: #FFFAE9;
  --carousel-width:96vw;
  --carousel-height:490px;
}
*{box-sizing:border-box;}

#nuestros-clientes .h2{ font-family: 'Nunito', sans-serif; font-weight: 300; }
.MainContainer{min-height: 100vh;}
body{ min-width: 99vw; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; }
.propiedad-logo img{ width: 80%; max-width: 200px; }
.MainAbout { display: grid; grid-template-columns: 15% 1fr; padding-top: 2rem; padding-right: 1rem;}
.about { font-family: 'North Carossela', serif; font-size: 25px; text-align: right; padding-right: 1rem; padding-top: 0 !important; }
.about-text{ font-family: 'Cormorant Garamond', serif; font-size: 18px; text-align: justify; }
.hide{display:none!important;}
.home{ background-color: #DBD5CE; }
.propiedades{ background-color: var(--background-beige); color: var(--font-negro); }
.hacemos, .experiencia{ background-color: var(--background-verde); color: var(--font-negro); }
.detalle-experiencia, .detalle-propiedades, .footer{ background-color: var(--background-negro); color: #ffffff; }
.logoHeader, .logoFooter{ max-width: 260px; width: 100%; }
.HomeMenu { display: flex; justify-content: end; align-items: baseline; flex-direction: column; }
.HomeMenu > div { font-family: 'North Carossela'; font-size: 2rem; font-weight: bold; padding-bottom: 1REM; }
.HomeMenu ul { list-style: none; padding: 0; margin: 0; }
.HomeMenu ul li a { text-decoration: none; color: var(--font-negro); font-family: 'Cormorant Garamond', serif; font-size: 17px; padding: .2rem 0; display: block; font-weight: bold; letter-spacing: -2px; }
.expName{ font-family: 'Cormorant Garamond'; }
.expVenue{ font-family: 'Cormorant Garamond'; font-style:  italic; }
.experiencias .container{ padding-top:5rem; }
#que-hacemos > div{ width: 100%;}
#que-hacemos {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 160px);
    width: 98vw;
}
#inicio {
    padding-left: 1rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
}
.inicio-logo{
    padding-bottom: 6rem;
}
.rowNosotros{
    text-align: center;
}
.modalLogo {
    position: fixed;
    top: 14px;
    left: 24px;
    z-index: 999;
    width: 187px;
}
.mainCarrusel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}
.nosotros img{ max-width: 300px; width: 70%; min-width: 100px; }
.nosotros{ transition: all .5s; cursor: pointer; background-color: var(--background-blanco)}
.nosotros.inactive{ opacity: .3; }
.person-info{ transition: all .5s; }
.nosotros-nombre { font-weight: bold; padding: 2rem 0 .2rem; font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; }
.nosotros-puesto { font-family: 'Nunito', sans-serif; font-weight: 300; }
.nosotros-descripcion{ padding: 1rem 0; font-family: 'Neue Haas', sans-serif; font-weight: 300; text-align: justify;}
.que-hacemos, .experiencias{ background-color: var(--background-verde); }
.que-hacemos-flecha { display: flex; align-items: flex-end; justify-content: flex-start; }
.que-hacemos-flecha svg{ width: 50px; }
.que-hacemos .row .h2 { font-weight: normal; font-family: North Carossela; letter-spacing: -4px; font-size: 38px; }
#experiencias-detalle .container .h2{ font-family: 'Cormorant Garamond', serif; }
.exp-item{ display: block; font-family: 'Neue Haas', serif; text-decoration: none; color:var(--font-negro);}
.exp-item img{ max-width: 300px; max-height: 300px; }
.nuestros-clientes{ background-color: var(--background-beige); }
#nuestros-clientes {

    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: auto;
}
#nuestros-clientes .cliente img{ max-width: 150px; max-height: 50px; }
.propiedades-detalle, .experiencias-detalle{ background: var(--background-negro); color:var(--font-white); }
.experiancia-cols div { align-self: center; }
.exp-desc{ font-family: Nunito;text-align: justify; padding:2rem 5rem; }
.g1,.g2,.g3{padding:1rem;}
.g1 img,.g2 img,.g3 img{ width: 100%; height: 100%; object-fit: cover; }
.g1 { aspect-ratio: 1 / 1; overflow: hidden; width: 80%; margin: 0 0 0 auto; }
.g2 { aspect-ratio: 1 / 1; overflow: hidden; }
.g3 { overflow: hidden; aspect-ratio: 6 / 11; }
.prop-item { display: flex; align-items: baseline; text-decoration: none; padding:1rem }
.prop-item p{ padding:1rem; color:var(--font-negro); font-weight: 900; }
.col.p2 .prop-item:first-child { align-items: flex-start; flex-direction: row-reverse; }
.col.p2 .prop-item:last-child{ flex-direction:column; }
.prop-item img{ width:50%;}
.prod-desc { font-family: Nunito; padding-top: 2rem; text-align: justify; }
.prod-dta-item { border-bottom: solid 1px #fff; padding: 10px; }
.prop-data { font-family: Nunito; width: 60%; padding: 4rem 0 0; }
.gallery{padding:2rem;}
.gallery img{cursor: pointer;}
.gallery-exp img{ width: 100%; margin:1rem 0;}
.col-left, .col-right{ padding:1rem; }
.col-left div, .col-right div{ padding: 1rem; }
.footer-legales { display: flex; flex-direction: column; padding: 2rem 0 0; }
.separa{display: none;}
.footer-form{margin:auto;}
@media screen and (max-width: 768px) {
    .logoFooter{ margin-bottom: 1rem; }
    .title-footer{ padding-top: 3rem !important; }
    footer, footer a{ text-align: center; }
}
.MainPropiedades {
    padding-top:5rem;
    max-width: 1300px;
    margin: auto;
    width: 90%;
    min-height: calc(100vh - 160px);
    display: flex;
    justify-content: center;
    align-items: center;
}
.propTitle { font-family: 'Cormorant Garamond'; text-transform: uppercase; }
.LogoNav{width: 180px;}
.propiedades-img{ display: block; margin: 0 0 0 auto; aspect-ratio: 9 / 6; width: 100%; object-fit: cover; }
.propiedad-item { display: flex; flex-direction: column-reverse; }
.p-name { text-decoration: none; color: var(--font-negro); font-weight: 900; }
.p-name p { font-family: 'Neue Haas'; white-space: nowrap; padding: 1rem; text-transform: uppercase; text-decoration: none; font-size: 1rem; }
a.p-img { aspect-ratio: 9 / 6; overflow: hidden; display: block; }
.p-img img { width: 100%; height: 100%; object-fit: cover; }
.carrusel {
    width: var(--carousel-width);
    height: calc( var(--carousel-width) * .55);
    overflow: hidden;
    position: relative;
    max-width: 680px;
    max-height: 380px;
}
.carrusel-items { display: flex; flex-wrap: nowrap; position: relative; width: max-content; }
.carrusel-item { width: calc( var(--carousel-width) - 100px); height: calc( var(--carousel-width) * .55); max-width: 550px; margin-right: 14px; max-height: 480px; }
.carrusel-item.tr{ transition: all 1s; }
.carrusel-item.item-hide{ width: 0px; min-width: 0px; margin-right: 0px; }
.carrusel-item img{ width: 100%; height:100%; object-fit: cover;}
.controls { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: .5rem; }
.ctrl { background: rgba(255,255,255,.8); opacity: .5; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; }
.ctrl:hover{ opacity: 1;}

.exp-name{font-family: "Cormorant Garamond Bolder"}

@media (min-width:769px) {
    #inicio {
        padding-left: 10rem;
        height: calc(100vh - 160px);}
        #nuestros-clientes {
        height: calc(100vh - 160px);

    }
    #nosotros {
        height: calc(100vh - 160px);
        display: flex;
        width: 100vw;
        align-items: center;
    }

    .flex{display: flex;}
    :root
    {
        --carousel-width: 50vw;
    }
    .gallery { display: flex; gap: 3rem; }
    .gallery img{ width: 100%; height: 100%; object-fit: cover; }
    .col-left { width: 30%; display: flex; align-items: end; padding: 6rem 0; }
    .col-right { display: flex; width: 70%; position: relative; }
    .image_0{ aspect-ratio: 6 / 10; overflow:hidden; }
    .image_1 { aspect-ratio: 5 / 9; overflow: hidden; position: absolute; top: 0; left: 9%; width: 33%; }
    .image_2 { position: absolute; right: 0; top: 4rem; aspect-ratio: 9 / 5; overflow: hidden; width: 48%; }
    .image_3 { aspect-ratio: 9 / 5; overflow: hidden; position: absolute; top: 68%; left: 8rem; width: 47%; }
    .image_4 { position: absolute; top: 46%; right: 0; width: 30%; aspect-ratio: 5 / 8; overflow: hidden; }
    .gallery-exp { display: grid; grid-template-columns: 30% 40% 30%; grid-template-rows: repeat(3,minmax(0,1fr)); gap: 3rem; height: calc(100vw * .4); max-height: 850px; }
    .gallery-exp div { width: 100%; overflow: hidden; }
    .exp-gal-top img{cursor: pointer;}
    .gallery-exp div img { cursor: pointer; width: 100%; height: 100%; object-fit: cover; }
    .gexp0 { grid-column: 1; grid-row: 1 / span 2; }
    .gexp1 { grid-column: 2; grid-row: 1 / span 3; height:95%; }
    .gexp2 { grid-column: 3; grid-row: 1; }
    .gexp3 { grid-column: 1; grid-row: 3; }
    .gexp4 { grid-column: 3; grid-row: 2 / span 2; }
    .footer-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 9rem; padding: 2rem 0; }
    .footer-legales { display: flex; width: 100%; justify-content: center; padding: 4rem 0 2rem; flex-direction: row; }
    .footer-form{margin:0;}
    .separa{display: block;}

    .propiedades-container {
    display: block;
    position: relative;
    min-height: 800px;
    width: 100%;
}
    .propiedad-item{position: absolute;display: flex;}
    .propiedad-item .p-img{display: block; aspect-ratio: 5 / 7; overflow: hidden;}
    .p-name p { font-size: calc(100vw * .016); }

    .p-item-0 {
        flex-direction: row;
        align-items: flex-end;
    }
    .p-item-0 a.p-img {
        width: 13vw;
        max-width: 300px;
        min-width: 168px;
    }

    .p-item-1 {
        left: 47%;
        flex-direction: row-reverse;
        top: 4%;
    }
    .p-item-1 a.p-img {
        width: 10vw;
        max-width: 215px;
        min-width: 140px;
    }

    .p-item-2 {
        right: 0;
        top: 22%;
    }
    .p-item-2 a.p-img {
        width: 16vw;
        max-width: 300px;
        min-width: 183px;
    }
    .p-item-3 {
        top: 53%;
        flex-direction: row-reverse;
    }
    .p-item-3 a.p-img{ width: 14vw; max-width: 230px; min-width: 190px;}
    .p-item-4 {
        top: 45%;
        left: 42%;
        flex-direction: row-reverse;
        align-items: flex-end;
    }
    .p-item-4 a.p-img {
        width: 13vw;
        max-width: 211px;
        min-width: 170px;
    }
}
@media (min-width:992px) {
    .experiancia-cols { display: grid; grid-template-columns: 40% 60%; gap: 3rem; }
    .propiedades-img{aspect-ratio:6 / 8;}
}
@media (min-width:1000px) {
    .p-name p { font-size: 16px; }
}
@media (min-width:1500px) {
    .p-item-1{}
    .p-item-2{}
}
.footer-form { display: grid; grid-template-columns: 1fr 40%; width: 100%; max-width: 450px; }
.footer-input { padding: .5rem; border: none; background: #f1f1f1; }
.footer-input::placeholder{color:#000;}
.footer-btn { border: none; font-size: 13px; font-weight: bold; background: #cdcdcd; padding: 0 1rem; }
.footer-col-2 { display: flex; flex-direction: column; justify-content: center; }
.separa { padding: 0 1rem; }
footer, footer a{text-decoration: none; font-family: 'Nunito', sans-sans-serif; color:var(--font-negro)}
footer .propiedad-logo{filter: brightness(0);}
.propiedades-detalle .propiedad-logo,
.experiencias-detalle .propiedad-logo{ filter:brightness(1);}
.terminos h3 { font-size: 1.5rem; padding: 1rem 0 1rem .5rem; }
.terminos h2 { font-size: 1.8rem; padding: 1rem 0 1rem .5rem; }
.terminos h1 { font-size: 2rem; }
ul, ol{ margin-left: 2rem; padding:1rem; }
.incisos { list-style-type: upper-alpha; /* A, B, C... */ }
.incisos li::marker { content: counter(list-item, upper-alpha) " ) "; }
.breadcrumbs { display: flex; justify-content: space-between; width: 100%; padding: 1rem 2rem; max-width: 2000px; }
.breadcrumbs a{ text-decoration: none; font-weight: bold; color:#000; font-size: calc(100vw * .03); font-family: 'Cormorant Garamond', serif; }
@media (min-width:600px) {
    .breadcrumbs a{font-size: 1rem;}
}
.breadcrumbs a.experiencias-detalle,
.breadcrumbs a.propiedades-detalle { color:#fff;}
.modalMenu { position: fixed; top: 0; left: 0; background: rgba(0,0,0,0.95); color: #fff; padding: 2rem; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 99; }
.modalMenu ul { list-style: none; margin: 0; padding: 0; }
.modalMenu ul li a { text-decoration: none; font-size: 1.6rem; font-family: 'Cormorant Garamond', serif; color: #fff; padding: 1rem 0; display: block; text-align: center; }
.modalMenu ul li a span{letter-spacing: -4px;}
.modalClose { position: absolute; top: 1rem; right: 1rem; width: 55px; cursor:pointer; }
.modalClose svg{ fill:#fff; }