:root { --ink:#111110; --charcoal:#1b1b19; --cream:#f3f0e8; --gold:#c9a967; --muted:#aaa69d; --line:rgba(243,240,232,.18); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--cream); background:var(--ink); font-family:"DM Sans",sans-serif; } a { color:inherit; text-decoration:none; } button { font:inherit; }
.topline { height:36px; padding:0 5vw; display:flex; justify-content:space-between; align-items:center; color:#d0ccc3; background:#090909; font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; } .topline a { color:var(--gold); }
.site-header { height:82px; padding:0 5vw; display:flex; align-items:center; justify-content:space-between; position:absolute; top:36px; width:100%; z-index:5; border-bottom:1px solid rgba(255,255,255,.16); }
.brand { display:flex; align-items:center; gap:10px; text-transform:uppercase; font-size:.76rem; letter-spacing:.13em; white-space:nowrap; }.brand strong { display:block; font-size:1rem; letter-spacing:.09em; }.brand-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--gold); color:var(--gold); font-family:"Playfair Display",serif; font-size:.86rem; letter-spacing:0; }
.main-nav { display:flex; align-items:center; gap:30px; font-size:.73rem; text-transform:uppercase; letter-spacing:.11em; }.main-nav>a:not(.nav-cta) { color:#e8e6e0; }.nav-cta { padding:13px 18px; border:1px solid var(--gold); color:var(--gold); transition:.25s ease; }.nav-cta:hover { background:var(--gold); color:var(--ink); }.menu-button { display:none; }
.hero { height:min(780px,calc(100svh - 36px)); min-height:650px; position:relative; overflow:hidden; }.hero-photo,.hero-shade { position:absolute; inset:0; }.hero-photo { background:url("images/image16.jpeg") center 42%/cover; transform:scale(1.02); animation:slow-zoom 14s ease-out both; }.hero-shade { background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.24) 62%,rgba(0,0,0,.08)),linear-gradient(0deg,rgba(0,0,0,.48),transparent 50%); }.hero-content { position:relative; z-index:1; padding:clamp(190px,25vh,240px) 5vw 0; max-width:780px; }.eyebrow { margin:0 0 17px; color:var(--gold); text-transform:uppercase; font-size:.7rem; letter-spacing:.19em; }.hero h1,.section-heading h2,.intro h2,.gallery h2,.booking h2 { margin:0; font:500 clamp(3rem,6.2vw,6rem)/.98 "Playfair Display",serif; letter-spacing:0; }.hero h1 em,h2 em { color:var(--gold); }.hero-copy { max-width:470px; color:#e4e1db; line-height:1.7; margin:25px 0 30px; font-size:1rem; }.hero-actions { display:flex; align-items:center; gap:28px; }.button { display:inline-flex; align-items:center; justify-content:center; gap:20px; min-height:52px; padding:0 20px; text-transform:uppercase; font-size:.7rem; font-weight:700; letter-spacing:.12em; transition:transform .25s,background .25s,color .25s; }.button span { font-size:1.25rem; }.button-gold { background:var(--gold); color:#151514; }.button:hover { transform:translateY(-3px); background:#e2c27e; }.text-link,.under-link,.room-info a { font-size:.73rem; text-transform:uppercase; letter-spacing:.11em; border-bottom:1px solid currentColor; padding-bottom:6px; }.text-link span,.under-link span,.room-info span { color:var(--gold); margin-left:7px; font-size:1rem; }.hero-note { position:absolute; right:5vw; bottom:36px; z-index:1; text-transform:uppercase; letter-spacing:.13em; font-size:.67rem; }.hero-note span { display:inline-block; height:7px; width:7px; margin-right:8px; background:var(--gold); border-radius:50%; }
.section-space { padding:120px 5vw; }.section-label { color:var(--muted); text-transform:uppercase; font-size:.68rem; letter-spacing:.14em; }.section-label span { color:var(--gold); margin-right:8px; }.intro-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:8vw; margin:42px 0 96px; }.intro h2 { font-size:clamp(2.7rem,5.1vw,5.1rem); }.intro-copy { align-self:end; color:#ccc8bf; line-height:1.8; }.intro-copy p { margin:0 0 27px; }.under-link { color:var(--cream); }.features { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }.features>div { padding:27px 28px 0 0; border-right:1px solid var(--line); }.features>div+div { padding-left:28px; }.features>div:last-child { border:0; }.features b { color:var(--gold); font:500 1.2rem "Playfair Display",serif; }.features h3 { font-size:1rem; margin:23px 0 9px; }.features p { margin:0; color:var(--muted); line-height:1.65; font-size:.87rem; max-width:220px; }
.rooms { background:var(--charcoal); }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:48px; }.section-heading h2,.gallery h2 { font-size:clamp(2.7rem,4.8vw,4.8rem); }.section-heading>p { color:var(--muted); max-width:190px; line-height:1.6; font-size:.9rem; }.room-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; max-width:960px; }.room-card { background:#161615; transition:transform .35s ease; }.room-card:hover { transform:translateY(-8px); }.room-image { height:400px; position:relative; background-size:cover; background-position:center; transition:filter .35s; }.room-card:hover .room-image { filter:brightness(1.15); }.room-image span { position:absolute; top:16px; left:16px; color:var(--gold); font:500 1.2rem "Playfair Display",serif; }.room-one { background-image:url("images/image7.jpeg"); }.room-two { background-image:url("images/image16.jpeg"); background-position:center; }.room-info { padding:22px 21px 25px; }.room-info h3 { margin:0 0 8px; font:500 1.45rem "Playfair Display",serif; }.room-info p { margin:0 0 22px; color:var(--muted); font-size:.84rem; }.room-info a { font-size:.62rem; color:var(--cream); }
.gallery { background:#121211; }.gallery-top { margin-bottom:48px; }.carousel { overflow:hidden; }.carousel-track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:2px; }.carousel-track::-webkit-scrollbar { display:none; }.gallery-item { flex:0 0 min(72vw,780px); height:470px; padding:0; border:0; cursor:pointer; background:center/cover; position:relative; scroll-snap-align:start; transition:filter .3s,transform .3s; }.gallery-item:hover { filter:brightness(1.18); transform:scale(.99); }.gallery-a { background-image:url("images/image4.jpeg"); }.gallery-b { background-image:url("images/image6.jpeg"); }.gallery-c { background-image:url("images/image15.jpeg"); }.gallery-d { background-image:url("images/image10.jpeg"); background-position:center 35%; }.gallery-e { background-image:url("images/imagen20.png"); }.gallery-f { background-image:url("images/imagen102.jpg"); }.carousel-controls { margin-top:22px; display:flex; align-items:center; justify-content:space-between; }.carousel-count { color:var(--muted); font-size:.72rem; letter-spacing:.1em; }.carousel-count b { color:var(--gold); font-weight:500; }.carousel-button { display:inline-grid; place-items:center; width:46px; height:42px; margin-left:7px; color:var(--cream); background:transparent; border:1px solid var(--line); cursor:pointer; font-size:1.1rem; transition:background .2s,color .2s; }.carousel-button:hover { background:var(--gold); color:var(--ink); }
.booking { min-height:590px; position:relative; display:grid; place-items:center; text-align:center; overflow:hidden; }.booking-backdrop { position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.64),rgba(0,0,0,.72)),url("images/image15.jpeg") center/cover; transform:scale(1.03); }.booking-content { position:relative; padding:80px 5vw; max-width:900px; }.booking h2 { font-size:clamp(2.8rem,5.4vw,5.4rem); }.booking-content>p:not(.eyebrow) { max-width:470px; margin:25px auto 31px; color:#e2ded4; line-height:1.7; }.booking .button { min-width:260px; } footer { padding:52px 5vw 30px; background:#0b0b0a; display:grid; grid-template-columns:1.5fr 1.3fr .8fr; gap:25px; align-items:center; }footer p,footer small { color:#8e8b84; font-size:.75rem; line-height:1.6; } footer>a:not(.brand) { color:var(--gold); font-size:.9rem; text-align:right; } footer small { grid-column:1/-1; border-top:1px solid var(--line); padding-top:22px; }
.whatsapp-float { position:fixed; z-index:6; right:23px; bottom:23px; display:flex; align-items:center; gap:8px; padding:13px 16px; color:#fff; background:#198c50; box-shadow:0 7px 24px rgba(0,0,0,.3); font-size:.75rem; font-weight:700; letter-spacing:.03em; transition:transform .25s; }.whatsapp-float:hover { transform:translateY(-4px); }.whatsapp-float:first-letter { font-size:1.25rem; }.lightbox { max-width:min(92vw,900px); padding:0; background:transparent; border:0; }.lightbox::backdrop { background:rgba(0,0,0,.88); }.lightbox img { display:block; max-width:100%; max-height:86vh; }.lightbox button { position:absolute; right:-42px; top:-8px; background:none; border:0; color:#fff; font-size:2.2rem; cursor:pointer; }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .8s ease; }.reveal.visible { opacity:1; transform:none; }@keyframes slow-zoom { to { transform:scale(1.1); } }
@media (max-width:760px) { .topline { padding:0 20px; font-size:.58rem; }.site-header { height:70px; padding:0 20px; top:36px; }.main-nav { display:none; position:absolute; top:70px; left:0; right:0; padding:24px 20px 28px; gap:22px; background:#111; border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; }.main-nav.open { display:flex; }.menu-button { display:flex; flex-direction:column; justify-content:center; gap:6px; width:38px; height:38px; background:none; border:1px solid rgba(255,255,255,.35); }.menu-button span { height:1px; width:16px; margin:0 auto; background:var(--cream); }.hero { min-height:680px; height:calc(100svh - 36px); }.hero-photo { background-position:60% center; }.hero-content { padding:190px 20px 0; }.hero h1 { font-size:clamp(3rem,13vw,4.25rem); }.hero-copy { font-size:.92rem; max-width:315px; }.hero-actions { flex-direction:column; align-items:flex-start; gap:22px; }.hero-note { right:20px; bottom:23px; }.section-space { padding:82px 20px; }.intro-grid { display:block; margin:31px 0 60px; }.intro-copy { margin-top:28px; }.features { grid-template-columns:1fr; gap:27px; }.features>div,.features>div+div { padding:0; border:0; }.section-heading { display:block; }.section-heading>p { margin:22px 0 0; }.room-grid { grid-template-columns:1fr; gap:18px; }.room-image { height:360px; }.gallery-item { flex-basis:86vw; height:430px; }.booking { min-height:560px; }.booking-content { padding:60px 20px; }.booking .button { min-width:0; }.whatsapp-float { width:49px; height:49px; padding:0; justify-content:center; right:17px; bottom:17px; border-radius:50%; }.whatsapp-float span { display:none; } footer { padding:43px 20px 27px; grid-template-columns:1fr; gap:18px; } footer>a:not(.brand) { text-align:left; } footer small { padding-top:18px; }.lightbox button { right:0; top:-43px; } }