:root{
  --arena:#EDE8E0;      /* sand / limestone page */
  --hueso:#F7F4EF;      /* bone, raised surfaces */
  --tinta:#232A2B;      /* ink */
  --mar:#33474A;        /* deep pacific */
  --madera:#8C7358;     /* driftwood accent */
  --gris:#6E6B66;
  --linea:rgba(35,42,43,.18);
  --serif:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;   /* texto */
  --sans:'Inter Tight','Inter',system-ui,sans-serif;   /* títulos y etiquetas */
  --pad:clamp(20px,5vw,72px);
  --ease:cubic-bezier(.22,.61,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--arena);color:var(--tinta);font-family:var(--serif);font-weight:300;font-size:clamp(16px,1.08vw,17.5px);line-height:1.75;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--madera);outline-offset:4px}
.eti{font-family:var(--sans);font-weight:400;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase}
h1,h2,h3{font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.3em;line-height:1.35;margin:0}
h2{font-size:clamp(1.15rem,2vw,1.6rem)}
h3{font-size:clamp(.95rem,1.3vw,1.1rem);letter-spacing:.24em}
p{margin:0 0 1em}
.centro{max-width:720px;margin:0 auto;text-align:center;padding:0 var(--pad)}
.centro h2{margin-bottom:clamp(22px,3vw,36px)}
.centro p{color:#3b4243}
section{padding:clamp(80px,12vw,170px) 0}
.linea{width:1px;height:56px;background:var(--linea);margin:0 auto clamp(28px,4vw,44px)}

/* ===== Header (Gundari: MENU · logo · RESERVAR) ===== */
.cab{position:fixed;inset:0 0 auto 0;z-index:30;padding-top:env(safe-area-inset-top,0px);color:#fff;transition:background .5s var(--ease),color .5s var(--ease),border-color .5s;border-bottom:1px solid transparent}
.cab.solida{background:rgba(237,232,224,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--tinta);border-bottom-color:var(--linea)}
.cab-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;padding:0 var(--pad)}
.cab button.menu{background:none;border:0;cursor:pointer;display:flex;align-items:center;gap:14px;padding:8px 0;justify-self:start}
.cab button.menu i{display:block;width:26px;height:1px;background:currentColor;box-shadow:0 7px 0 currentColor;margin-top:-7px}
.logo{display:flex;flex-direction:column;align-items:center;gap:7px;text-decoration:none}
.logo .logo-svg{display:block;height:24px;width:auto}
footer .logo .logo-svg{height:34px}
.cab .reservar{justify-self:end;text-decoration:none;border:1px solid currentColor;padding:12px 20px}
.cab .reservar:hover{background:var(--tinta);color:var(--arena);border-color:var(--tinta)}
@media (max-width:640px){.cab .menu span,.cab .reservar{font-size:.6rem;letter-spacing:.24em}.cab .reservar{padding:10px 12px}.logo .logo-svg{height:19px}}

/* Fullscreen menu */
.menu-full{position:fixed;inset:0;z-index:50;background:var(--tinta);color:var(--arena);display:grid;grid-template-columns:1fr 1fr;opacity:0;visibility:hidden;transition:opacity .6s var(--ease),visibility .6s}
.menu-full.abierto{opacity:1;visibility:visible}
.menu-full nav{display:flex;flex-direction:column;justify-content:center;gap:clamp(10px,2.2vh,22px);padding:calc(90px + env(safe-area-inset-top,0px)) var(--pad) 60px}
.menu-full nav a{font-family:var(--sans);font-weight:300;font-size:clamp(1.3rem,3vw,2.2rem);letter-spacing:.3em;text-transform:uppercase;text-decoration:none;opacity:.86;transform:translateY(14px);transition:opacity .4s,transform .7s var(--ease)}
.menu-full.abierto nav a{transform:none}
.menu-full nav a:hover{opacity:1;color:#D9C8B2}
.menu-full .datos{margin-top:clamp(24px,5vh,56px);font-family:var(--sans);font-size:.8rem;letter-spacing:.12em;opacity:.65;line-height:2}
.menu-full .datos a{font-size:inherit;letter-spacing:inherit;text-transform:none;transform:none}
.menu-full figure{margin:0;overflow:hidden}
.menu-full figure img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 1.6s var(--ease)}
.menu-full.abierto figure img{transform:scale(1)}
.menu-full .cerrar{position:absolute;top:calc(22px + env(safe-area-inset-top,0px));left:var(--pad);background:none;border:0;cursor:pointer;color:var(--arena);display:flex;gap:12px;align-items:center;padding:8px 0}
@media (max-width:820px){.menu-full{grid-template-columns:1fr}.menu-full figure{display:none}}

/* ===== Hero: the frame closes in as you scroll ===== */
.hero{position:relative;height:230vh;background:var(--arena)}
.hero-fijo{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-foto{position:absolute;inset:0;clip-path:inset(var(--it,0px) var(--ix,0px) var(--ib,0px) var(--ix,0px));will-change:clip-path}
.hero-foto img{width:100%;height:100%;object-fit:cover;transform:scale(var(--esc,1.12));will-change:transform}
/* Al cerrarse el marco, la vista aérea se funde con el interior mirando al mar */
.hero-foto .hero-int{position:absolute;top:var(--it,0px);left:var(--ix,0px);width:calc(100% - 2*var(--ix,0px));height:calc(100% - var(--it,0px) - var(--ib,0px));opacity:var(--int,0);will-change:opacity;object-position:36% 50%;transform:scale(calc(1 + (var(--esc,1.12) - 1)*.6))}
@media (min-width:700px){.hero-foto .hero-int{object-position:50% 50%}}
.hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,24,25,.38) 0%,rgba(18,24,25,0) 30%,rgba(18,24,25,0) 62%,rgba(18,24,25,.42) 100%);opacity:var(--velo,1)}
/* Marco con el grosor del logo: --mb grosor, --mg aire entre foto y marco */
.hero-fijo{--mb:clamp(4px,.45vw,7px);--mg:clamp(6px,.65vw,10px)}
.marco{position:absolute;top:calc(var(--it,0px) - var(--mg) - var(--mb));bottom:calc(var(--ib,0px) - var(--mg) - var(--mb));left:calc(var(--ix,0px) - var(--mg) - var(--mb));right:calc(var(--ix,0px) - var(--mg) - var(--mb));border:var(--mb) solid var(--tinta);opacity:var(--p,0);pointer-events:none}
.hero-pie{position:absolute;left:0;right:0;bottom:calc(36px + env(safe-area-inset-bottom,0px));text-align:center;color:#fff;opacity:var(--inicio,1);transition:opacity .2s}
.hero-pie .eti{display:block;margin-bottom:22px}
.desliza{display:block;width:1px;height:46px;margin:0 auto;background:rgba(255,255,255,.55);position:relative;overflow:hidden}
.desliza::after{content:"";position:absolute;left:0;top:-46px;width:1px;height:46px;background:#fff;animation:baja 2.2s var(--ease) infinite}
@keyframes baja{to{top:46px}}
.hero-titulo{position:absolute;left:0;right:0;bottom:0;height:var(--ib,0px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:0 var(--pad);opacity:var(--fin,0);transform:translateY(calc((1 - var(--fin,0)) * 16px))}
.hero-titulo h1{font-size:clamp(.92rem,1.9vw,1.45rem)}
.hero-titulo p{margin:0;color:var(--gris);font-size:clamp(1rem,1.4vw,1.15rem)}
.hero-sello{position:absolute;top:calc(var(--it,0px) - 26px - var(--mg) - var(--mb));left:var(--ix,0px);right:var(--ix,0px);display:flex;justify-content:space-between;color:var(--gris);opacity:var(--fin,0)}
@media (max-width:640px){.hero-sello span:last-child{display:none}}

/* ===== Booking bar (Gundari "Book your stay") ===== */
.barra{background:var(--hueso);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.barra form{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:auto repeat(4,1fr) auto;align-items:stretch}
.barra .tit{display:flex;align-items:center;padding:0 var(--pad) 0 var(--pad);font-size:1rem;border-right:1px solid var(--linea)}
.barra label{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:20px 22px;border-right:1px solid var(--linea);cursor:pointer}
.barra label .eti{color:var(--gris);font-size:.6rem}
.barra input,.barra select{font-family:var(--serif);font-size:1rem;color:var(--tinta);background:none;border:0;padding:0;width:100%;-webkit-appearance:none;appearance:none;cursor:pointer;min-height:28px}
.barra input:focus,.barra select:focus{outline:none}
.barra button{border:0;background:var(--tinta);color:var(--arena);padding:0 clamp(24px,3vw,44px);cursor:pointer;transition:background .3s}
.barra button:hover{background:var(--mar)}
@media (max-width:900px){
  .barra form{grid-template-columns:1fr 1fr}
  .barra .tit{grid-column:1/-1;justify-content:center;padding:18px;border-right:0;border-bottom:1px solid var(--linea)}
  .barra label{border-bottom:1px solid var(--linea)}
  .barra label:nth-of-type(2n){border-right:0}
  .barra button{grid-column:1/-1;padding:20px}
}

/* ===== Framed reveals (the frame opens as images enter) ===== */
.revela{overflow:hidden;clip-path:inset(9% 9% 9% 9%);transition:clip-path 1.6s var(--ease)}
.revela img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 2s var(--ease)}
.revela.visto{clip-path:inset(0 0 0 0)}
.revela.visto img{transform:scale(1)}
.sube{opacity:0;transform:translateY(24px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.sube.visto{opacity:1;transform:none}

/* Intro */
.intro .cifras{display:flex;justify-content:center;gap:clamp(28px,7vw,90px);margin-top:clamp(40px,6vw,64px)}
.cifras div{text-align:center}
.cifras strong{display:block;font-weight:400;font-size:clamp(2.4rem,4vw,3.2rem);line-height:1}
.cifras span{color:var(--gris)}
.intro-fotos{display:grid;grid-template-columns:5fr 3fr;gap:clamp(14px,2vw,26px);align-items:end;max-width:1300px;margin:clamp(64px,9vw,120px) auto 0;padding:0 var(--pad)}
.intro-fotos .a{aspect-ratio:4/3}.intro-fotos .b{aspect-ratio:3/4}
.intro-fotos figcaption{margin-top:12px;color:var(--gris)}
@media (max-width:700px){.intro-fotos{grid-template-columns:1fr}.intro-fotos .b{aspect-ratio:4/3}}

/* Cabins (Ayana-style room cards) */
.cabanas{background:var(--hueso)}
.cab-lista{max-width:1300px;margin:clamp(56px,8vw,96px) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px)}
.cab-item .revela{aspect-ratio:4/5}
.cab-item .num{display:flex;justify-content:space-between;align-items:baseline;margin:22px 0 10px;border-bottom:1px solid var(--linea);padding-bottom:14px}
.cab-item h3{letter-spacing:.24em}
.cab-item .num .eti{color:var(--gris)}
.cab-item p{color:#3b4243;max-width:46ch}
.cab-item a{text-decoration:none;border-bottom:1px solid var(--madera);padding-bottom:4px}
.servicios{max-width:1100px;margin:clamp(64px,9vw,110px) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--linea)}
.servicios div{padding:26px 18px 0;text-align:center;color:#3b4243;font-size:.98em}
.servicios .eti{display:block;color:var(--madera);margin-bottom:8px;font-size:.6rem}
@media (max-width:760px){.cab-lista{grid-template-columns:1fr}.servicios{grid-template-columns:1fr 1fr}.servicios div{padding:22px 10px 8px}}

/* Gallery carousel */
.galeria{padding-bottom:clamp(60px,8vw,110px)}
.car{position:relative;margin-top:clamp(44px,6vw,72px)}
.pista{display:flex;gap:clamp(10px,1.4vw,18px);overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pista::-webkit-scrollbar{display:none}
.pista button{flex:none;scroll-snap-align:center;border:0;padding:0;background:#d8d2c8;cursor:zoom-in;height:clamp(300px,62vh,640px);aspect-ratio:var(--ar,3/4);overflow:hidden}
.pista button img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pista button:hover img{transform:scale(1.03)}
.car-ctl{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:30px}
.car-ctl button{background:none;border:0;cursor:pointer;padding:10px}
.car-ctl .cont{color:var(--gris);min-width:64px;text-align:center}
.barra-prog{width:min(320px,60vw);height:1px;background:var(--linea);margin:18px auto 0;position:relative}
.barra-prog i{position:absolute;left:0;top:0;height:1px;background:var(--tinta);width:0;transition:width .3s}

/* Slow living split */
.lenta{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.lenta .revela{min-height:70vh}
.lenta .txt{display:flex;flex-direction:column;justify-content:center;padding:clamp(56px,8vw,120px) var(--pad);max-width:640px}
.lenta .txt h2{margin-bottom:28px}
.lenta .txt p{color:#3b4243}
.lenta .mini{margin-top:30px;width:min(260px,60%);aspect-ratio:1;align-self:flex-end}
@media (max-width:820px){.lenta{grid-template-columns:1fr}.lenta .mini{display:none}}

/* Matanzas map (Ayana interactive map) */
.zona{background:var(--tinta);color:var(--arena)}
.zona .centro p{color:rgba(237,232,224,.75)}
.mapa-wrap{max-width:1200px;margin:clamp(48px,7vw,90px) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,5vw,72px);align-items:center}
.mapa svg{width:100%;height:auto;max-height:78vh;display:block}
.mapa .costa{fill:none;stroke:rgba(237,232,224,.55);stroke-width:1.2}
.mapa .tierra{fill:url(#tg)}
.mapa .olas{stroke:rgba(237,232,224,.14);stroke-width:1;fill:none}
.mapa text{font-family:var(--sans);font-size:9.5px;letter-spacing:.24em;fill:rgba(237,232,224,.8);text-transform:uppercase}
.mapa .pt{cursor:pointer}
.mapa .pt circle{fill:var(--tinta);stroke:#D9C8B2;stroke-width:1.2;transition:r .3s}
.mapa .pt:hover circle,.mapa .pt.act circle{fill:#D9C8B2}
.mapa .pt.act text{fill:#fff}
.mapa .q rect{fill:#D9C8B2}
.mapa .nota{font-size:8px;fill:rgba(237,232,224,.45)}
.ficha{border-top:1px solid rgba(237,232,224,.25);padding-top:26px;min-height:260px}
.ficha .eti{color:#D9C8B2}
.ficha h3{font-size:clamp(1.3rem,2.2vw,1.8rem);margin:14px 0 18px;letter-spacing:.2em}
.ficha p{color:rgba(237,232,224,.8)}
.ficha .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.ficha .tags span{font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;border:1px solid rgba(237,232,224,.3);padding:7px 11px}
.ficha-nav{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.ficha-nav button{background:none;border:1px solid rgba(237,232,224,.25);color:var(--arena);padding:8px 12px;cursor:pointer;font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase}
.ficha-nav button.act{background:#D9C8B2;color:var(--tinta);border-color:#D9C8B2}
@media (max-width:820px){.mapa-wrap{grid-template-columns:1fr}.mapa svg{max-height:56vh;margin:0 auto;width:auto;max-width:100%}}

/* Experiences */
.exp{padding-top:clamp(70px,10vw,140px);background:var(--tinta);color:var(--arena)}
.exp-lista{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,22px);padding:0 var(--pad);max-width:1400px;margin:0 auto}
.exp-item .revela{aspect-ratio:3/4}
.exp-item h3{margin:20px 0 10px;font-size:.85rem}
.exp-item p{color:rgba(237,232,224,.72);font-size:.95em}
@media (max-width:900px){.exp-lista{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}.exp-lista::-webkit-scrollbar{display:none}.exp-item{flex:0 0 72vw;scroll-snap-align:start}}

/* Be. Here. Now. */
.ahora{position:relative;height:110vh;overflow:hidden;padding:0}
.ahora img{position:absolute;inset:-10% 0;width:100%;height:120%;object-fit:cover;transform:translateY(var(--py,0px))}
.ahora::after{content:"";position:absolute;inset:0;background:rgba(18,24,25,.28)}
.ahora .t{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:0 var(--pad)}
.ahora h2{font-size:clamp(1.6rem,4.6vw,3.6rem);letter-spacing:.42em;margin-right:-.42em}

/* Booking */
.res{background:var(--hueso)}
.res-grid{max-width:1200px;margin:clamp(48px,7vw,80px) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:4fr 7fr;gap:clamp(36px,6vw,90px)}
.directo{list-style:none;margin:0;padding:0}
.directo li{border-bottom:1px solid var(--linea)}
.directo li:first-child{border-top:1px solid var(--linea)}
.directo a{display:flex;flex-direction:column;gap:4px;padding:18px 0;text-decoration:none}
.directo .eti{color:var(--gris);font-size:.58rem}
.directo a:hover span:last-child{color:var(--madera)}
.direccion{margin-top:28px;color:var(--gris);font-style:italic}
.direccion a{color:var(--tinta);font-style:normal}
#form{display:grid;grid-template-columns:1fr 1fr;gap:6px 28px}
.campo{display:flex;flex-direction:column;border-bottom:1px solid var(--linea);padding:16px 0 10px}
.campo.full{grid-column:1/-1}
.campo label{color:var(--gris);font-size:.58rem}
.campo input,.campo select,.campo textarea{font-family:var(--serif);font-size:1rem;color:var(--tinta);background:none;border:0;padding:6px 0 0;border-radius:0;width:100%}
.campo textarea{resize:vertical;min-height:90px}
.campo:focus-within{border-bottom-color:var(--tinta)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none}
.hp{position:absolute;left:-9999px}
.form-pie{grid-column:1/-1;display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px}
.btn{display:inline-block;border:1px solid var(--tinta);background:var(--tinta);color:var(--arena);padding:18px 34px;cursor:pointer;text-decoration:none;transition:background .3s,color .3s}
.btn:hover{background:transparent;color:var(--tinta)}
.estado{margin:0;font-style:italic}
.estado.err{color:#8A2E22}
@media (max-width:820px){.res-grid{grid-template-columns:1fr}}
@media (max-width:520px){#form{grid-template-columns:1fr}}

/* Footer */
footer{text-align:center;padding:clamp(70px,9vw,110px) var(--pad) calc(48px + env(safe-area-inset-bottom,0px))}
footer .logo{color:var(--tinta);margin-bottom:28px}
footer .dir{color:var(--gris);margin-bottom:28px}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 30px;margin-bottom:34px}
footer nav a{text-decoration:none;color:var(--gris)}
footer nav a:hover{color:var(--tinta)}
footer small{color:var(--gris);font-family:var(--sans);font-size:.7rem;letter-spacing:.14em}

/* Lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;height:100dvh}
dialog.lb::backdrop{background:rgba(20,25,26,.96)}
.lb-in{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:calc(60px + env(safe-area-inset-top,0px)) 56px calc(60px + env(safe-area-inset-bottom,0px))}
.lb-in img{max-width:100%;max-height:100%;object-fit:contain}
.lb button{position:absolute;background:none;border:0;color:var(--arena);cursor:pointer;padding:14px}
.lb .x{top:calc(10px + env(safe-area-inset-top,0px));right:14px}
.lb .ant{left:4px;top:50%;transform:translateY(-50%)}
.lb .sig{right:4px;top:50%;transform:translateY(-50%)}
.lb .cont{position:absolute;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;color:rgba(237,232,224,.6)}

/* Chat */
.chat-btn{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:40;width:56px;height:56px;border-radius:50%;border:0;background:var(--tinta);color:var(--arena);cursor:pointer;display:grid;place-items:center;box-shadow:0 12px 30px -10px rgba(35,42,43,.6);transition:transform .3s var(--ease)}
.chat-btn:hover{transform:scale(1.06)}
.chat-btn svg{width:24px;height:24px}
.chat{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(86px + env(safe-area-inset-bottom,0px));z-index:40;width:min(360px,calc(100vw - 36px));background:var(--hueso);border:1px solid var(--linea);box-shadow:0 30px 60px -24px rgba(35,42,43,.5);display:none;flex-direction:column}
.chat.abierto{display:flex}
.chat-cab{background:var(--tinta);color:var(--arena);padding:16px 18px;display:flex;justify-content:space-between;align-items:center}
.chat-cab small{display:flex;align-items:center;gap:8px;opacity:.75;font-family:var(--sans);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;margin-top:4px}
.chat-cab small::before{content:"";width:6px;height:6px;border-radius:50%;background:#8FC79A}
.chat-cab button{background:none;border:0;color:var(--arena);font-size:1.4rem;cursor:pointer;padding:4px 6px;line-height:1}
.chat-cuerpo{padding:18px;display:flex;flex-direction:column;gap:12px;max-height:46vh;overflow:auto}
.burbuja{background:var(--arena);padding:11px 14px;font-size:1rem;max-width:88%;line-height:1.45}
.burbuja.yo{align-self:flex-end;background:var(--mar);color:var(--arena)}
.rapidas{display:flex;flex-wrap:wrap;gap:8px}
.rapidas button{background:none;border:1px solid var(--linea);padding:7px 12px;cursor:pointer;font-size:.95rem}
.rapidas button:hover{border-color:var(--tinta)}
.chat-pie{display:flex;border-top:1px solid var(--linea)}
.chat-pie textarea{flex:1;font:inherit;font-size:1rem;border:0;background:none;padding:14px 16px;resize:none;height:52px}
.chat-pie textarea:focus{outline:none}
.chat-pie button{width:52px;border:0;background:var(--tinta);color:var(--arena);cursor:pointer;display:grid;place-items:center}
.chat-nota{font-family:var(--sans);font-size:.62rem;letter-spacing:.06em;color:var(--gris);padding:8px 16px 12px}

@media (prefers-reduced-motion:reduce){
  .revela,.revela img,.sube{transition:none;clip-path:none;transform:none;opacity:1}
  .desliza::after{animation:none}
}

/* ===== Multi-page additions ===== */
.hero-pie h1.eti{font-size:.68rem;font-weight:400;letter-spacing:.32em;line-height:1.6;margin:0 0 22px;padding:0 var(--pad)}
.hero-titulo .lema{font-family:var(--sans);font-weight:300;text-transform:uppercase;letter-spacing:.28em;line-height:1.35;margin:0;font-size:clamp(.92rem,1.9vw,1.45rem);font-style:normal;color:var(--tinta)}
.ahora .h2{font-family:var(--sans);font-weight:300;text-transform:uppercase;margin:0;font-size:clamp(1.6rem,4.6vw,3.6rem);letter-spacing:.42em;margin-right:-.42em}
.enlace{text-decoration:none;border-bottom:1px solid var(--madera);padding-bottom:4px}
.enlace.claro{border-color:#D9C8B2;color:var(--arena)}
.btn.claro{background:var(--arena);color:var(--tinta);border-color:var(--arena);margin-top:14px}
.btn.claro:hover{background:transparent;color:var(--arena)}

/* interior page hero: the frame, already closed */
.pag-hero{padding:calc(76px + env(safe-area-inset-top,0px) + clamp(48px,8vw,100px)) 0 0;text-align:center}
.migas{color:var(--gris);font-size:.58rem;margin-bottom:clamp(28px,4vw,44px)}
.migas a{text-decoration:none}.migas a:hover{color:var(--tinta)}
.migas span{margin:0 8px;opacity:.6}
.eyebrow{color:var(--madera);margin:0 0 18px}
.pag-hero h1{font-size:clamp(1.15rem,2.4vw,1.9rem);padding:0 var(--pad);max-width:900px;margin:0 auto}
.pag-intro{max-width:680px;margin:clamp(22px,3vw,34px) auto 0;padding:0 var(--pad);color:#3b4243}
.pag-marco{position:relative;max-width:1180px;margin:clamp(48px,7vw,90px) auto 0;padding:0 var(--pad)}
.pag-marco::before{content:"";position:absolute;top:-12px;bottom:-12px;left:calc(var(--pad) - 12px);right:calc(var(--pad) - 12px);border:1px solid var(--tinta);pointer-events:none}
.pag-marco .revela{aspect-ratio:16/9}
.pag-marco.corto .revela{aspect-ratio:21/9}
@media (max-width:700px){.pag-marco .revela,.pag-marco.corto .revela{aspect-ratio:4/5}}

/* alternating blocks */
.bloques{max-width:1240px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.bloque{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(28px,4vw,56px) 0}
.bloque:nth-child(even) > .revela{order:2}
.bloque .revela{aspect-ratio:4/5}
.bloque h2{margin:10px 0 24px}
.bloque p{color:#3b4243;max-width:52ch}
@media (max-width:820px){.bloque{grid-template-columns:1fr}.bloque:nth-child(even) > .revela{order:0}.bloque .revela{aspect-ratio:4/3}}

/* photo grid */
.grilla{columns:3;column-gap:clamp(10px,1.4vw,18px);max-width:1400px;margin:clamp(44px,6vw,72px) auto 0;padding:0 var(--pad)}
.grilla button{display:block;width:100%;border:0;padding:0;margin:0 0 clamp(10px,1.4vw,18px);background:#d8d2c8;cursor:zoom-in;break-inside:avoid;overflow:hidden}
.grilla img{width:100%;height:auto;transition:transform 1.2s var(--ease)}
.grilla button:hover img{transform:scale(1.03)}
@media (max-width:820px){.grilla{columns:2}}

/* CTA */
.cta{background:var(--tinta);color:var(--arena)}
.cta h2{font-size:clamp(1rem,2vw,1.5rem)}

.mapa-g{padding:0}
.mapa-g iframe{display:block;width:100%;height:min(70vh,560px);border:0;filter:grayscale(.6) sepia(.12)}
body.interior .zona .mapa-wrap{margin-bottom:0}
/* booking bar: two actions */
@media (min-width:901px){.barra form{grid-template-columns:auto repeat(4,1fr) auto auto}}
.barra button small{display:block;font-size:.5rem;opacity:.65;margin-bottom:5px;letter-spacing:.22em}
.barra button.mail{background:var(--hueso);color:var(--tinta);border-left:1px solid var(--linea)}
.barra button.mail:hover{background:var(--arena)}
@media (max-width:900px){.barra button.wa,.barra button.mail{grid-column:auto}}
/* cabins note */
.cab-nota{font-size:.88rem;color:var(--gris);margin-top:-6px}
/* contact block */
.res-sub{font-size:.66rem;margin:0 0 18px;color:var(--tinta)}
.directo li.tel{display:flex;flex-direction:column;gap:4px;padding:18px 0}
.directo .acc{display:flex;gap:10px;margin-top:12px}
.directo .acc a{display:inline-flex;padding:10px 18px;border:1px solid var(--tinta);font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--tinta);transition:background .3s,color .3s}
.directo .acc a:first-child,.directo .acc a:hover{background:var(--tinta);color:var(--arena)}
/* cabins: name + capacity above the photo */
.cab-item .num{margin:0 0 18px}
.cab-item .revela + p{margin-top:22px}
/* vida lenta: secondary photo fills the text column */
.lenta .mini{min-height:0;width:100%;max-width:480px;aspect-ratio:4/5;align-self:flex-start;margin-top:40px}
/* reservar: keep the hero frame clear of the booking bar */
.pag-hero + .barra{margin-top:clamp(40px,5vw,64px)}