:root{
    --ink:#173128;
    --pine:#24483b;
    --cream:#f4f0e7
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    color:var(--ink);
    background:#f8f6f0;
    font-family:Arial,Helvetica,sans-serif
}
a{
    color:inherit;
    text-decoration:none
}
button{
    font:inherit
}
.topbar{
    position:absolute;
    z-index:20;
    inset:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:25px 5vw;
    color:#fff;
    border-bottom:1px solid #ffffff45
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    letter-spacing:.16em
}
.brand-mark{
    display:grid;
    place-items:center;
    width:36px;
    height:36px;
    border:1px solid;
    border-radius:50%;
    font:22px Georgia,serif
}
.brand strong,.brand small{
    display:block
}
.brand strong{
    font-size:13px
}
.brand small{
    font-size:8px;
    margin-top:4px;
    opacity:.72
}
.nav{
    display:flex;
    align-items:center;
    gap:34px;
    font-size:12px
}
.nav-cta{
    border:1px solid #ffffff80;
    padding:12px 18px;
    border-radius:99px
}
.menu-button{
    display:none;
    border:0;
    background:none;
    color:#fff;
    font-size:24px
}
.hero{
    position:relative;
    min-height:94vh;
    display:flex;
    align-items:center;
    overflow:hidden;
    color:#fff
}
.hero>img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover
}
.hero-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#112820d9,#1128203d 64%,#1128201a)
}
.hero-content{
    position:relative;
    z-index:2;
    width:min(780px,90%);
    margin-left:8vw;
    padding-top:100px
}
.eyebrow{
    color:#6d8b78;
    letter-spacing:.22em;
    font-size:11px;
    font-weight:700;
    margin:0 0 24px
}
.eyebrow.light{
    color:#cbd8cc
}
h1,h2{
    font-family:Georgia,serif;
    font-weight:400;
    letter-spacing:-.035em;
    margin:0
}
h1{
    font-size:clamp(52px,7vw,94px);
    line-height:.98
}
h2{
    font-size:clamp(38px,4.5vw,66px);
    line-height:1.08
}
.hero-copy{
    max-width:600px;
    font-size:17px;
    line-height:1.7;
    margin:28px 0 34px
}
.hero-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap
}
.button{
    display:inline-flex;
    justify-content:center;
    padding:16px 23px;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em
}
.button.primary,.button.cream{
    background:#e7dfd0;
    color:#18372c
}
.button.ghost{
    border:1px solid #ffffff88
}
.price-card{
    position:absolute;
    z-index:2;
    right:5vw;
    bottom:40px;
    background:#f4f0e7f2;
    color:var(--ink);
    padding:22px 28px;
    min-width:285px
}
.price-card p{
    font-size:9px;
    letter-spacing:.2em;
    margin:0 0 8px
}
.price-card strong{
    display:block;
    font:29px Georgia,serif
}
.price-card span{
    font-size:11px
}
.facts{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    background:var(--cream);
    padding:38px 6vw
}
.facts article{
    display:flex;
    gap:16px;
    align-items:center;
    padding:0 24px;
    border-right:1px solid #d7d0c4
}
.facts strong{
    font:35px Georgia,serif;
    color:#789281
}
.facts h3{
    font-size:12px;
    margin:0 0 6px
}
.facts p{
    font-size:11px;
    margin:0;
    color:#778078
}
.section{
    padding:105px max(6vw,24px)
}
.intro,.private,.details,.faq{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:9vw
}
.intro-copy>p,.private-copy>p, .video-head>p, .details>div>p{
    font:18px/1.8 Georgia,serif;
    color:#56685f
}
.dimensions{
    display:flex;
    gap:30px;
    padding-top:24px;
    border-top:1px solid #d6d1c8
}
.dimensions span{
    font-size:10px;
    text-transform:uppercase
}
.dimensions b{
    display:block;
    font:25px Georgia,serif;
    margin-bottom:7px;
    text-transform:none
}
.video{
    background:var(--cream);
    text-align:center
}
.video-head{
    max-width:920px;
    margin:0 auto 50px
}
.video-frame{
    position:relative;
    width:100%;
    max-width:960px;
    margin:0 auto;
    aspect-ratio:16/9;
    overflow:hidden;
    box-shadow:0 20px 60px #0002
}
.video-frame iframe{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0
}
.gallery{
    background:#e9e4da
}
.cta-banner{
    color:#e9e4da;
    text-align:center;
    background:#183b2f;
    margin:auto;
    width:50%;
    padding:0
}
.cta-banner-narrow{
    width:30%
}
.cta-banner .button{
    width:100%
}
.gallery-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:38px
}
.gallery-head>div{
    max-width:760px
}
.gallery-main{
    position:relative;
    height:min(67vw,720px);
    background:#ddd;
    overflow:hidden
}
.gallery-swiper{
    width:100%;
    height:100%
}
.gallery-swiper .swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}

.swiper-button-prev,
.swiper-button-next {
    width: 50px !important;
    height: 50px !important;
    background-color: #f8f6f0e6;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}
.swiper-button-prev:after,
.swiper-button-next:after {
    font-size: 12px !important;
    color: #000;
    font-weight: bold;
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
    background-color: #ebebe9e6;
}

.thumbnails{
    margin-top:10px
}
.thumbs-swiper .swiper-slide{
    height: auto;
    width:70px;
    opacity:.55;
    cursor:pointer
}
.thumbs-swiper .swiper-slide-thumb-active{
    opacity:1;
    outline:2px solid var(--pine);
    outline-offset:-2px
}
.thumbs-swiper .swiper-slide img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block
}
.experience{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    background:var(--pine);
    color:#fff
}
.experience-image img{
    width:100%;
    height:100%;
    min-height:760px;
    object-fit:cover
}
.experience-copy{
    padding:95px 8vw
}
.experience-copy ul{
    list-style:none;
    padding:25px 0 0;
    margin:35px 0 0;
    border-top:1px solid #ffffff35
}
.experience-copy li{
    display:grid;
    grid-template-columns:50px 1fr;
    gap:14px;
    padding:20px 0;
    border-bottom:1px solid #ffffff25
}
.experience-copy b{
    font:20px Georgia,serif
}
.experience-copy p{
    font-size:12px;
    color:#cbd6cf
}
.private-grid{
    display:grid;
    grid-template-columns:1fr 1fr
}
.private-grid article{
    padding:32px;
    border:1px solid #dcd6cc;
    margin:-1px 0 0 -1px
}
.private-grid h3{
    font:19px Georgia,serif
}
.private-grid p{
    font-size:12px;
    line-height:1.6;
    color:#6b756f
}
.details{
    background:#fff
}
.spec-list{
    margin:0
}
.spec-list>div{
    display:grid;
    grid-template-columns:160px 1fr;
    gap:20px;
    padding:20px 0;
    border-bottom:1px solid #d8d2c8
}
.spec-list dt{
    font-size:10px;
    font-weight:700;
    text-transform:uppercase
}
.spec-list dd{
    margin:0;
    font:17px Georgia,serif
}
.location{
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#d9dfd5
}
.location>div:first-child{
    padding:100px 8vw
}
.location p:not(.eyebrow){
    font:17px/1.75 Georgia,serif
}
.text-link{
    display:inline-block;
    margin-top:25px;
    padding-bottom:8px;
    border-bottom:1px solid;
    font-size:11px;
    font-weight:bold
}
.map-card{
    min-height:500px;
    position:relative;
    display:grid;
    place-items:center;
    background-color:#c4cec1;
     background-image: url("/images/foto-7.jpg");
}
.map-pin{
    display:grid;
    place-items:center;
    width:70px;
    height:70px;
    background:var(--pine);
    color:#fff;
    border:10px solid #f3f0e8;
    border-radius:50%;
    font:25px Georgia,serif
}
.map-card small{
    position:absolute;
    left:40px;
    bottom:35px
}
.faq{
    background:#eee9df
}
.faq-list details{
    border-top:1px solid #cfc8bc
}
.faq-list summary{
    display:flex;
    justify-content:space-between;
    padding:24px 0;
    cursor:pointer;
    list-style:none;
    font:19px Georgia,serif
}
.faq-list summary::-webkit-details-marker{
    display:none
}
.faq-list details p{
    color:#637069;
    font-size:14px;
    line-height:1.75
}
.contact{
    text-align:center;
    background:#183b2f;
    color:#fff;
    padding:120px 24px
}
.contact>p:not(.eyebrow){
    font:17px Georgia,serif;
    color:#cbd8cf
}
.contact .button{
    margin:20px
}
.contact small{
    display:block;
    color:#9fb1a6
}
footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#102d24;
    color:#bac8bf;
    padding:32px 5vw;
    font-size:9px
}
.footer-brand{
    color:#fff
}
.whatsapp{
    position:fixed;
    z-index:30;
    right:22px;
    bottom:22px;
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:#25d366;
    color:#fff;
    font-size:24px;
    box-shadow:0 8px 25px #0003
}
 @media(max-width:800px){
    .topbar{
        padding:18px 22px
    }
    .menu-button{
        display:block
    }
    .nav{
        display:none;
        position:absolute;
        top:75px;
        left:18px;
        right:18px;
        flex-direction:column;
        align-items:stretch;
        background:#183a2f;
        padding:25px
    }
    .nav.open{
        display:flex
    }
    .nav a{
        padding:14px
    }
    .hero{
        min-height:850px;
        align-items:flex-start
    }
    .hero-content{
        margin:0 24px;
        padding-top:180px
    }
    .price-card{
        left:24px;
        right:24px;
        bottom:60px
    }
    .facts{
        grid-template-columns:1fr 1fr;
        padding:20px
    }
    .facts article{
        padding:18px 10px
    }
    .intro,.private,.details,.faq,.experience,.location{
        grid-template-columns:1fr
    }
    .section{
        padding:75px 24px
    }
    .gallery-main{
        height:62vh
    }
    .cta-banner,
    .cta-banner-narrow{
        width:90%
    }
    .video-head{
        margin-bottom:30px
    }
    .experience-image img{
        min-height:500px
    }
    .experience-copy{
        padding:70px 24px
    }
    .location>div:first-child{
        padding:75px 24px
    }
    .map-card{
        min-height:400px
    }
    footer{
        flex-direction:column;
        gap:18px;
        text-align:center
    }
    .footer-brand{
        display:none
    }
}
 @media(max-width:480px){
    h1{
        font-size:48px
    }
    .hero-actions{
        flex-direction:column
    }
    .facts{
        grid-template-columns:1fr
    }
    .private-grid{
        grid-template-columns:1fr
    }
    .spec-list>div{
        grid-template-columns:1fr;
        gap:7px
    }
    .gallery-main{
        height:430px
    }
}