/* ==========================================================================
   KOWI SEI — homepage.

   One continuous Caliza surface. Photographs carry the colour of the place;
   Azul Marea carries type, controls and structure; Oro Sagrado is reserved
   for the signature, the filete and a few hairlines; Verde Manglar marks
   status. Cinzel sets every headline, always in capitals (Brand Book V8 §04);
   Marcellus sets everything else, in sentence case.

   Every layout is complete without JavaScript. Motion only adds inline
   styles from gsap.matchMedia(), so a script failure reverts to this file.
   ========================================================================== */

:root {
  --marea:   #2E5468;
  --manglar: #3A5C42;
  --oro:     #C9A24B;
  --caliza:  #F2ECDC;
  --blanco:  #FFFFFF;
  --negro:   #000000;

  --ink: var(--marea);
  --ink-soft: rgba(46, 84, 104, .74);
  --hair: rgba(46, 84, 104, .2);

  --cinzel:    "Cinzel", "Trajan Pro", Georgia, serif;
  --marcellus: "Marcellus", Georgia, "Times New Roman", serif;

  /* Headline scale, Cinzel caps. 1440px → 62 / 40 / 24 px. */
  --h-hero: clamp(1.875rem, 4.6vw, 4.25rem);
  --h-sec:  clamp(1.625rem, 3.1vw, 2.875rem);
  --h-sub:  clamp(1.25rem, 2.1vw, 1.875rem);
  /* Text scale, Marcellus. 1440px → 23 / 18 / 14 px. */
  --lead: clamp(1.3125rem, 2vw, 1.875rem);
  --text: clamp(1.125rem, 1.38vw, 1.3125rem);
  --pie:  clamp(.9375rem, 1vw, 1rem);
  --body-l: clamp(1.1875rem, 1.6vw, 1.4375rem);

  --gutter: clamp(1.25rem, 5vw, 6rem);
  --gap: clamp(1rem, 2.2vw, 2.25rem);
  --air: clamp(4.5rem, 12vh, 9rem);
  --air-lg: clamp(6rem, 18vh, 13rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: clamp(62px, 6vw, 88px);
  --nav-h-past: clamp(56px, 4.4vw, 66px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
html.is-locked { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
}
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--caliza); color: var(--ink);
  font-family: var(--marcellus); font-size: var(--text); line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
figure { margin: 0; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
dl, dd { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; z-index: 300; }
.skip:focus { left: var(--gutter); top: 1rem; background: var(--marea); color: var(--caliza); padding: .8rem 1.3rem; }

/* ------------------------------------------------------------- type roles */
.h-sec, .h-sub {
  font-family: var(--cinzel); font-weight: 500; text-transform: uppercase; text-wrap: balance;
}
.h-sec { font-size: var(--h-sec); line-height: 1.22; letter-spacing: .1em; }
.h-sub { font-size: var(--h-sub); line-height: 1.3; letter-spacing: .14em; }
.line { display: block; }
.lead { font-size: var(--lead); line-height: 1.42; max-width: 34ch; }
.pie  { font-size: var(--pie); line-height: 1.5; color: var(--ink-soft); }
.st   { opacity: .9; font-style: normal; white-space: nowrap; }
.st::before { content: "— "; }
.tag  { font-size: var(--pie); color: var(--manglar); display: inline-flex; align-items: center; gap: .6rem; }
.tag::before { content: ""; width: 1.4rem; height: 1px; background: var(--manglar); }

/* Media frames: a cropped photograph inside a sized box. Each image takes
   its own crop via --pos, and a separate phone crop via --pos-m. */
.frame { position: relative; overflow: hidden; background: rgba(46, 84, 104, .08); }
.frame img, .media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.media { position: absolute; inset: 0; overflow: hidden; }
.media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* El Filete — five gold strokes, graduated. */
.filete { display: inline-flex; align-items: center; gap: .45rem; }
.filete i { display: block; width: 2px; background: var(--oro); transform-origin: 50% 50%; }
.filete i:nth-child(1), .filete i:nth-child(5) { height: 15px; }
.filete i:nth-child(2), .filete i:nth-child(4) { height: 24px; }
.filete i:nth-child(3) { height: 33px; }

/* ------------------------------------------------------------- controls */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: .9em 2em;
  font-size: clamp(1rem, 1.05vw, 1.0625rem); letter-spacing: .03em; line-height: 1.2;
  background: var(--marea); color: var(--caliza); border: 1px solid var(--marea);
  transition: background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .5s var(--ease);
}
.btn:hover { background: #24475a; border-color: #24475a; box-shadow: 0 8px 26px rgba(46, 84, 104, .28); }
.btn-gold { background: rgba(0, 0, 0, .22); color: var(--caliza); border-color: var(--oro); }
.btn-gold:hover { background: rgba(201, 162, 75, .16); color: var(--caliza); border-color: #E3C27A;
  box-shadow: 0 0 0 1px rgba(227, 194, 122, .5), 0 0 28px 4px rgba(201, 162, 75, .45); }
.btn-lg { min-height: 64px; padding: 1.1em 3em; font-size: clamp(1.125rem, 1.35vw, 1.3125rem); letter-spacing: .05em; }
.btn-ghost { background: transparent; color: var(--marea); border-color: rgba(46, 84, 104, .5); }
.btn-ghost:hover { background: var(--marea); color: var(--caliza); }
.btn:active, .v-ctrl button:active, .arrow:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: progress; }
.action { display: inline-block; padding: .55em 0 .45em; border-bottom: 1px solid var(--oro);
  transition: color .35s var(--ease); }
.action:hover { color: var(--oro); }

/* ------------------------------------------------------------- firma */
.firma { display: grid; justify-items: center; gap: clamp(1rem, 1.8vw, 1.8rem); }
.firma .sym  { width: clamp(64px, 6.8vw, 118px); height: auto; }
.firma .word { width: clamp(170px, 14vw, 260px); height: auto; }
.firma .rule { width: clamp(170px, 14vw, 260px); height: 1px; background: var(--oro); transform-origin: 50% 50%; }
.firma .cap  { font-size: var(--pie); letter-spacing: .32em; text-transform: uppercase; }
.word-h { line-height: 0; }

/* ------------------------------------------------------------------ nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--nav-h);
  display: flex; align-items: center; justify-content: flex-start; gap: 1.5rem;
  padding-inline: var(--gutter); color: var(--caliza);
  transition: background .55s var(--ease), height .55s var(--ease), box-shadow .55s var(--ease);
  pointer-events: none;
}
.nav .lockup, .nav .nav-links a, .nav .lang, .nav .burger { pointer-events: auto; }
body.is-past .nav { height: var(--nav-h-past); }
body.left-light  .lockup .on-dark  { display: none; }
body.left-light  .lockup .on-light { display: block; }
body.right-light .nav .nav-links, body.right-light .nav .lang, body.right-light .nav .burger { color: var(--marea); }
body.is-past.ground-dark  .nav { background: rgba(8, 10, 12, .34); }
body.is-past.ground-photo .nav { background: rgba(8, 10, 12, .58); }
body.is-past.ground-light .nav { background: rgba(242, 236, 220, .88); box-shadow: 0 1px 0 var(--hair); }
@supports (backdrop-filter: blur(6px)) {
  body.is-past.ground-dark  .nav { background: rgba(8, 10, 12, .22); backdrop-filter: blur(18px) saturate(118%); }
  body.is-past.ground-photo .nav { background: rgba(8, 10, 12, .42); backdrop-filter: blur(20px) saturate(115%); }
  body.is-past.ground-light .nav { background: rgba(242, 236, 220, .7); backdrop-filter: blur(18px) saturate(112%); }
}
.lockup { display: flex; align-items: center; gap: clamp(.6rem, 1vw, 1rem); min-height: 44px; }
.lockup .sym  { width: clamp(26px, 2.5vw, 38px); height: auto; flex: none; transition: width .55s var(--ease); }
.lockup .bar  { width: 1px; height: clamp(20px, 2vw, 30px); background: var(--oro); }
.lockup .word { width: clamp(84px, 8.2vw, 136px); height: auto; transition: width .55s var(--ease); }
.lockup .on-light { display: none; }
body.is-past .lockup .word { width: clamp(76px, 6.4vw, 108px); }
body.is-past .lockup .sym  { width: clamp(22px, 2vw, 30px); }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: clamp(1.1rem, 2.2vw, 2.4rem); font-size: clamp(.9375rem, 1vw, 1rem); }
.nav-links a { opacity: .9; transition: opacity .3s var(--ease), color .3s var(--ease); }
.nav-links a:hover { opacity: 1; color: var(--oro); }
.nav-links .action { opacity: 1; }
/* language switch: round flag + two letters, top right */
.lang { display: inline-flex; align-items: center; gap: .55em; min-height: 44px; flex: none;
  font-size: .8125rem; letter-spacing: .18em; line-height: 1; opacity: .92;
  transition: opacity .3s var(--ease), color .3s var(--ease); }
.lang svg { width: 20px; height: 20px; flex: none; display: block; }
.lang:hover { opacity: 1; color: var(--oro); }
.burger { display: none; width: 44px; height: 44px; position: relative; flex: none; margin-right: -6px; }
.burger i { position: absolute; left: 6px; right: 6px; height: 1px; background: currentColor; }
.burger i:nth-child(2) { top: 17px; }
.burger i:nth-child(3) { bottom: 17px; }

.menu {
  position: fixed; inset: 0; z-index: 95; background: var(--caliza); color: var(--marea);
  display: grid; grid-template-rows: var(--nav-h) 1fr auto; padding-inline: var(--gutter);
  visibility: hidden; opacity: 0; transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.menu[data-open="1"] { visibility: visible; opacity: 1; transition: opacity .45s var(--ease), visibility 0s; }
.menu-top { display: flex; align-items: center; justify-content: space-between; }
.menu-top .sym { width: 30px; height: auto; }
.menu-close { min-height: 44px; }
.menu-list { align-self: center; display: grid; gap: clamp(.3rem, 1.4vh, 1rem); }
.menu-list a { font-family: var(--cinzel); font-weight: 500; text-transform: uppercase; letter-spacing: .1em;
  font-size: clamp(1.5rem, 6.6vw, 2.6rem); line-height: 1.3;
  opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--ease), color .3s var(--ease); }
.menu-list a:hover { color: var(--manglar); }
.menu[data-open="1"] .menu-list a { opacity: 1; transform: none; }
.menu[data-open="1"] .menu-list a:nth-child(2) { transition-delay: .04s; }
.menu[data-open="1"] .menu-list a:nth-child(3) { transition-delay: .08s; }
.menu[data-open="1"] .menu-list a:nth-child(4) { transition-delay: .12s; }
.menu[data-open="1"] .menu-list a:nth-child(5) { transition-delay: .16s; }
.menu[data-open="1"] .menu-list a:nth-child(6) { transition-delay: .2s; }
.menu-foot { padding-block: clamp(1.5rem, 5vh, 3rem); display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; border-top: 1px solid var(--hair); }
.menu-foot .word { width: 140px; height: auto; }

/* ==========================================================================
   1 · ENTRADA (unchanged composition)
   ========================================================================== */
.arrival { position: relative; height: 100vh; height: 100svh; min-height: 560px;
  display: grid; grid-template-rows: 1fr auto; color: var(--caliza); background: var(--negro); overflow: hidden; }
.arrival .media img { transform-origin: 50% 60%; will-change: transform; }
.arrival .scrim { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 44% 38% at 50% 46%, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 74%),
    linear-gradient(to bottom, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 24%, rgba(0,0,0,0) 52%, rgba(0,0,0,.6) 100%); }
.arrival .firma { position: relative; align-self: center; padding-top: var(--nav-h); gap: clamp(1.1rem, 2vw, 2rem); }
.arrival .firma .sym  { width: clamp(80px, 9vw, 164px); }
.arrival .firma .word { width: clamp(240px, 26vw, 480px); }
.arrival .firma .rule { width: clamp(240px, 26vw, 480px); }
.arrival .firma .cap  { font-size: clamp(.75rem, .95vw, 1rem); letter-spacing: .38em; }
.arrival .foot { position: relative; display: flex; justify-content: flex-end;
  padding: 0 var(--gutter) clamp(1.75rem, 5vh, 3.25rem); }

/* ==========================================================================
   2 · EL LUGAR — the line on the left, a generous sendero on the right
   ========================================================================== */
.lugar { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: var(--air-lg) 0 var(--air) var(--gutter); align-items: center; }
.lugar-say { grid-column: 1 / span 5; display: grid; gap: clamp(1.5rem, 3vh, 2.25rem); align-content: center; }
.lugar-say .h-sec { max-width: 13ch; }
.lugar-say .lead { max-width: 24ch; }
.lugar-pic { grid-column: 6 / span 7; height: min(84svh, 50vw); }

/* ==========================================================================
   3 · LO SAGRADO — a calm typographic pause on Caliza
   ========================================================================== */
.sagrado { min-height: 76svh; display: grid; justify-items: center; align-content: center; gap: clamp(2rem, 5vh, 3.25rem);
  padding: var(--air) var(--gutter); text-align: center; }
.sagrado-t { font-size: clamp(1.375rem, 2.6vw, 2.75rem); line-height: 1.5; letter-spacing: .14em; max-width: min(92vw, 1150px); }
.sagrado .mark { width: clamp(36px, 3vw, 54px); height: auto; }

.noche { position: relative; height: 100vh; height: 100svh; min-height: 560px; }
.noche .frame { position: absolute; inset: 0; background: #0b1622; }
.noche .media img { transform-origin: 50% 50%; }

/* ==========================================================================
   4 · ARQUITECTURA — night exterior, terrace, shared interior, bedroom,
   bedroom and bath at true portrait proportion, the perimeter
   ========================================================================== */
.arq { padding: var(--air-lg) 0 var(--air); }
.arq-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 0 var(--gutter) clamp(2rem, 5vh, 3.5rem); align-items: end; }
.arq-head .h-sec { grid-column: 1 / span 6; font-size: var(--h-hero); line-height: 1.12; letter-spacing: .08em; }
.arq-head .lead { grid-column: 7 / span 6; max-width: 34ch; justify-self: end; }
.arq-terraza { height: min(80svh, 56.25vw); min-height: 320px; }

/* small factual caption set inside a photograph */
.cap-in { position: absolute; right: clamp(.9rem, 1.6vw, 1.5rem); bottom: clamp(.75rem, 1.4vw, 1.25rem); z-index: 2;
  font-size: clamp(.8125rem, .85vw, .875rem); letter-spacing: .03em; color: rgba(255, 255, 255, .92);
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6); pointer-events: none; }

.arq-sala, .arq-hab, .arq-borde { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.arq-sala { padding: var(--air) var(--gutter) 0 0; }
.arq-sala .frame { grid-column: 1 / span 8; height: min(76svh, 44vw); }
.arq-sala .txt { grid-column: 9 / span 4; }
.arq-hab { padding: var(--air) 0 0 var(--gutter); }
.arq-hab .txt { grid-column: 1 / span 4; }
.arq-hab .frame { grid-column: 5 / span 8; height: min(76svh, 44vw); }
.arq .txt { display: grid; gap: 1.1rem; padding-top: .2rem; }
.arq .txt p { font-size: var(--body-l); line-height: 1.5; max-width: 32ch; }
.specs { margin-top: .75rem; border-top: 1px solid var(--hair); }
.specs div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--hair); }
.specs dt { color: var(--manglar); }

/* portraits keep their height: a true 2:3 frame, sized by the viewport */
.arq-par { display: flex; justify-content: center; gap: var(--gap); padding: var(--gap) var(--gutter) 0; }
.arq-par .frame { height: min(88svh, 62vw, 960px); aspect-ratio: 2 / 3; flex: none; }

.arq-borde { padding: var(--air) var(--gutter) 0; align-items: center; }
.arq-borde .txt { grid-column: 1 / span 4; }
.arq-borde .frame { grid-column: 6 / span 7; aspect-ratio: 3 / 2; }

/* ==========================================================================
   5 · EXPERIENCIAS
   ========================================================================== */
.exp { padding: var(--air-lg) 0 var(--air); }
.exp-intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center;
  padding: 0 var(--gutter) clamp(2.5rem, 7vh, 4.5rem); }
.exp-t { grid-column: 1 / span 8; color: var(--manglar); font-size: var(--h-hero); line-height: 1.18; letter-spacing: .08em; }
.exp-firma { grid-column: 10 / span 3; display: grid; justify-items: center; gap: 1.1rem; }
.exp-firma .sym  { width: clamp(84px, 8vw, 140px); height: auto; }
.exp-firma .word { width: clamp(140px, 13vw, 230px); height: auto; }

.exp-camino { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start;
  padding: 0 0 0 var(--gutter); }
.exp-camino .lead { grid-column: 1 / span 4; max-width: 24ch; }
.exp-camino .frame { grid-column: 5 / span 8; aspect-ratio: 2.05; }
.exp-playa { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
  padding: var(--gap) var(--gutter) 0 0; }
.exp-playa .a { grid-column: 1 / span 8; height: min(76svh, 44vw); }
.exp-playa .b { grid-column: 9 / span 4; aspect-ratio: 4 / 5; }

.exp-mesa { position: relative; margin-top: var(--air); }
.exp-mesa .frame { height: min(90svh, 60vw); min-height: 420px; }
.exp-mesa .panel { position: absolute; right: var(--gutter); bottom: clamp(1.5rem, 4vh, 3rem); width: min(25rem, 32vw);
  background: var(--caliza); padding: clamp(1.5rem, 2.4vw, 2.25rem); display: grid; gap: .8rem; }
.exp-mesa .panel p { font-size: var(--body-l); line-height: 1.45; }

/* passage headings: substantial, before their photographs */
.exp .head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: .9rem;
  align-items: end; padding: 0 var(--gutter); margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
.exp .head .h-sec { grid-column: 1 / span 5; }
.exp .head p { grid-column: 6 / span 6; font-size: var(--lead); line-height: 1.45; max-width: 34ch; }

/* pool: establishing photograph right, heading, text and two moments left */
.exp-piscina { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: var(--air) var(--gutter) 0; align-items: start; }
.exp-piscina .txt { grid-column: 1 / span 6; display: grid; gap: 1.25rem; align-content: start; }
.exp-piscina .txt p { font-size: var(--lead); line-height: 1.45; max-width: 30ch; }
.exp-piscina .duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: clamp(.75rem, 3vh, 2rem); }
.exp-piscina .duo .frame { aspect-ratio: 4 / 5; }
.exp-piscina .main { grid-column: 7 / span 6; justify-self: end; height: min(90svh, 880px); aspect-ratio: 1084 / 1451; max-width: 100%; }

/* wellbeing: yoga left, spa right, the massage beneath and offset */
.exp-bien { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--gap);
  padding: var(--air) var(--gutter) 0; align-items: start; }
.exp-bien .head { grid-column: 1 / -1; padding: 0; margin-bottom: clamp(.25rem, 1.5vh, 1rem); }
.exp-bien .yoga { grid-column: 1 / span 4; aspect-ratio: 4 / 5; }
.exp-bien .spa { grid-column: 5 / span 8; aspect-ratio: 3 / 2; }
.exp-bien .masaje { grid-column: 3 / span 8; justify-self: center; width: min(100%, calc(80svh * 4 / 3)); aspect-ratio: 4 / 3; }

/* the lagoon, then wildlife */
.exp-laguna, .exp-mar { padding-top: var(--air); }
.exp .band { height: min(72svh, 46vw); }
.exp .pair { display: flex; gap: var(--gap); padding: var(--gap) var(--gutter) 0; }
.exp .pair .frame { flex: var(--ar) 1 0; aspect-ratio: var(--ar); min-width: 0; }
.dusk { --ar: 1.7768; } .canoa { --ar: 1.3333; } .jet { --ar: 1.3333; } .kayak { --ar: .9663; }
.fauna { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: clamp(3rem, 9vh, 5.5rem) var(--gutter) 0; align-items: start; }
.fauna .mono { grid-column: 1 / span 6; aspect-ratio: 1171 / 1343; max-height: 92svh; }
.fauna .side { grid-column: 7 / span 6; display: grid; gap: clamp(1.5rem, 4vh, 2.5rem); padding-top: clamp(0rem, 6vh, 4rem); }
.fauna .side .lead { max-width: 26ch; }
.fauna .side .frame { aspect-ratio: 3 / 2; }

/* ==========================================================================
   6 · GALERÍA
   ========================================================================== */
.galeria { padding: var(--air-lg) var(--gutter) var(--air); border-top: 1px solid var(--hair); }
.gal-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end;
  margin-bottom: clamp(2rem, 5vh, 3.5rem); }
.gal-head .h-sec { grid-column: 1 / span 6; }
.gal-head p { grid-column: 8 / span 5; max-width: 42ch; }
.gal-grid { display: grid; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.g-row { display: flex; gap: var(--gap); align-items: flex-start; }
.g-item { flex: var(--ar) 1 0; min-width: 0; }
.g-wide .g-item { flex: 1 1 auto; }
.g-single .g-item { flex: 0 1 auto; width: min(100%, 46%); margin-inline: auto; }
.g-open { display: block; width: 100%; position: relative; overflow: hidden; background: rgba(46, 84, 104, .08);
  aspect-ratio: var(--ar); cursor: zoom-in; }
.g-wide .g-open { aspect-ratio: 2.1; }
.g-open img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease), opacity .6s var(--ease); }
.g-open:hover img { transform: scale(1.025); }
.gal-more { display: flex; justify-content: center; align-items: center; gap: 1.25rem 2.5rem; flex-wrap: wrap; margin-top: clamp(2.5rem, 6vh, 4rem); }
.gal-left { opacity: .7; margin-left: .35em; }
.g-row.is-new { animation: g-in .8s var(--ease) both; }
@keyframes g-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .g-row.is-new { animation: none; } }

/* viewer */
.viewer { position: fixed; inset: 0; z-index: 130; background: #000; color: var(--caliza);
  display: grid; grid-template-rows: 1fr auto; visibility: hidden; opacity: 0;
  transition: opacity .35s var(--ease), visibility 0s linear .35s; }
.viewer.is-open { visibility: visible; opacity: 1; transition: opacity .35s var(--ease), visibility 0s; }
.v-stage { position: relative; min-height: 0; overflow: hidden; }
.v-img { position: absolute; top: clamp(.75rem, 3vh, 2rem); left: clamp(.75rem, 3vw, 2.5rem);
  width: calc(100% - 2 * clamp(.75rem, 3vw, 2.5rem)); height: calc(100% - clamp(.75rem, 3vh, 2rem));
  object-fit: contain; user-select: none; -webkit-user-drag: none; }
.v-bar { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 1rem 1.5rem;
  padding: clamp(.75rem, 2vh, 1.25rem) clamp(1rem, 3vw, 2.5rem) clamp(1rem, 2.6vh, 1.5rem); }
.v-meta { font-size: var(--pie); line-height: 1.45; }
.v-cap { opacity: .92; }
.v-count { font-size: var(--pie); opacity: .75; font-variant-numeric: tabular-nums; }
.v-ctrl { display: flex; gap: .5rem; }
.v-ctrl button { min-width: 48px; height: 48px; border: 1px solid rgba(242, 236, 220, .35); display: grid; place-items: center;
  padding: 0 1rem; transition: border-color .3s var(--ease), color .3s var(--ease); }
.v-ctrl button:hover { border-color: var(--oro); color: var(--oro); }
.v-ctrl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* ==========================================================================
   7 · PROPIEDAD
   ========================================================================== */
.prop { padding: var(--air) 0 var(--air); border-top: 1px solid var(--hair); }
.prop-hero { position: relative; height: 100vh; height: 100svh; min-height: 520px; display: grid; align-content: end; }
.prop-hero > img { position: absolute; inset: 0; }
.prop-hero .shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.52) 0%, rgba(0,0,0,.12) 34%, rgba(0,0,0,0) 52%); }
.prop-t { text-shadow: 0 2px 22px rgba(0, 0, 0, .35); }
.prop-t { position: relative; z-index: 1; color: var(--caliza); padding: 0 var(--gutter) clamp(3rem, 9vh, 5.5rem);
  font-size: var(--h-hero); line-height: 1.14; letter-spacing: .08em; max-width: calc(34ch + 2 * var(--gutter)); }
.prop-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: var(--air) var(--gutter) 0; align-items: start; }
.prop-intro { grid-column: 1 / span 5; display: grid; gap: 1.5rem; }
.prop-intro .lead { max-width: 26ch; }
.prop-intro .quote { font-size: var(--body-l); line-height: 1.5; color: var(--manglar); max-width: 30ch; padding-left: 1.25rem; border-left: 1px solid var(--oro); }
.prop-facts { grid-column: 7 / span 6; border-top: 1px solid var(--hair); }
.prop-facts > div { display: grid; grid-template-columns: 10rem 1fr; gap: 1.25rem; padding: 1.15rem 0; border-bottom: 1px solid var(--hair); }
.prop-facts dt { color: var(--manglar); }
.prop-cta { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: clamp(3rem, 8vh, 5rem); }
.prop-estado { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: var(--air) var(--gutter) 0; align-items: start; }
.prop-estado > .frame { grid-column: 1 / span 5; aspect-ratio: 1; }
.estado { grid-column: 7 / span 6; display: grid; gap: 1.5rem; align-content: start; }
.estado .h-sub { margin-top: 2rem; }
.estado .note { margin-top: -.25rem; }
.compromisos { display: grid; gap: .9rem; font-size: var(--lead); line-height: 1.4; }
.compromisos li { padding-left: 2rem; position: relative; }
.compromisos li::before { content: ""; position: absolute; left: 0; top: .72em; width: 1.1rem; height: 1px; background: var(--manglar); }
.ledger { display: grid; }
.ledger > div { display: grid; grid-template-columns: 8rem 1fr; gap: 1.25rem; padding: 1rem 0; border-top: 1px solid var(--hair); }
.ledger > div:last-child { border-bottom: 1px solid var(--hair); }
.ledger .k { display: flex; align-items: baseline; gap: .6rem; }
.ledger .k::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; flex: none; transform: translateY(-1px); }
.ledger .hoy .k::before { background: var(--manglar); }
.ledger .proy .k::before { border: 1px solid var(--oro); }
.estado .note { color: var(--ink-soft); }

/* ==========================================================================
   8 · UBICACIÓN
   ========================================================================== */
.ubic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: var(--air) var(--gutter); border-top: 1px solid var(--hair); align-items: center; }
.ubic-say { grid-column: 1 / span 5; display: grid; gap: 1.25rem; }
.ubic address { font-size: var(--lead); line-height: 1.45; }
.ubic-say p { max-width: 40ch; }
.ruta { grid-column: 7 / span 6; }
.stops { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: auto 1.4fr auto 1fr auto; align-items: start; }
.stop { display: grid; justify-items: center; gap: .55rem; text-align: center; min-width: 5.5rem; }
.stop .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--marea); margin-top: 7px; }
.stop.kowi .dot { width: 26px; height: 26px; margin-top: 0; background: var(--caliza); border: 1.5px solid var(--oro); box-shadow: inset 0 0 0 7px var(--caliza), inset 0 0 0 13px var(--marea); }
.stop .name { font-size: var(--text); }
.stop.kowi .name { font-family: var(--cinzel); font-weight: 500; letter-spacing: .12em; }
.stop .km { font-size: var(--pie); color: var(--manglar); margin-top: -.35rem; }
.leg { position: relative; padding: 0 .5rem; margin-top: 12px; border-top: 2px solid var(--marea); text-align: center; }
.leg span { display: block; font-size: var(--pie); color: var(--manglar); padding-top: .6rem; }
.leg.rest { border-top: 2px dashed var(--hair); }
.leg.rest span { color: var(--ink-soft); }

/* ==========================================================================
   9 · LA VISITA
   ========================================================================== */
.closing { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--caliza);
  background: #1a120c; display: grid; place-items: center; padding: var(--air) var(--gutter); text-align: center; }
.closing .veil { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 48%, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 72%), linear-gradient(to bottom, rgba(0,0,0,.14) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,.2) 100%); }
.closing .inner { position: relative; display: grid; justify-items: center; gap: clamp(1.4rem, 3.4vh, 2.25rem); }
.closing .h-sec { font-size: var(--h-hero); line-height: 1.2; letter-spacing: .1em; }
.closing .lead { max-width: 34ch; }
.closing .btn-lg { min-height: 72px; padding: 1.2em 3.6em; font-size: clamp(1.1875rem, 1.5vw, 1.4375rem); }

/* footer */
.foot-site { padding: var(--air) var(--gutter) clamp(2rem, 5vh, 3rem); }
.foot-top { display: flex; justify-content: space-between; gap: clamp(2rem, 6vw, 6rem); flex-wrap: wrap; }
.foot-site .firma { justify-items: start; }
.foot-links { display: grid; grid-template-columns: repeat(2, auto); gap: .5rem 3rem; align-content: start; }
.foot-links a { padding-block: .35rem; transition: color .3s var(--ease); }
.foot-links a:hover { color: var(--manglar); }
.foot-legal { margin-top: clamp(3rem, 8vh, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--hair);
  display: flex; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; font-size: var(--pie); color: var(--ink-soft); }
.foot-legal p { max-width: 64ch; }

/* --------------------------------------------------------------- drawer */
.drawer { position: fixed; inset: 0; z-index: 120; visibility: hidden; transition: visibility 0s linear .6s; }
.drawer[data-open="1"] { visibility: visible; transition: visibility 0s; }
.drawer .back { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .5s var(--ease); }
.drawer[data-open="1"] .back { opacity: 1; }
.drawer .panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(520px, 100%); background: var(--caliza); color: var(--marea);
  padding: clamp(1.25rem, 4vh, 3rem) clamp(1.25rem, 4vw, 3rem) 2.5rem; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); transition: transform .6s var(--ease); display: grid; align-content: start; gap: clamp(1.1rem, 2.6vh, 1.75rem); }
.drawer[data-open="1"] .panel { transform: none; }
.drawer .panel > * { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.drawer[data-open="1"] .panel > * { opacity: 1; transform: none; transition-delay: .18s; }
.drawer .x { justify-self: end; min-height: 44px; }
.drawer form { display: grid; gap: clamp(1rem, 2.4vh, 1.6rem); }
.drawer .direct { display: grid; gap: .9rem; }
.drawer .pending { display: grid; gap: .9rem; padding-top: 1.25rem; border-top: 1px solid var(--hair); }
.form-status { font-size: var(--pie); min-height: 1.4em; }
.form-status.bad { color: #9E3524; }
.field { display: grid; gap: .45rem; }
.field > label { font-size: var(--pie); opacity: .85; }
.field input, .field textarea { width: 100%; font: inherit; font-size: max(16px, var(--text)); color: inherit; background: transparent;
  border: 0; border-bottom: 1px solid rgba(46,84,104,.45); padding: .5rem 0 .65rem; border-radius: 0; }
.field textarea { resize: vertical; min-height: 3.2rem; }
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--oro); }
.field.bad input, .field.bad textarea { border-bottom-color: #9E3524; }
.field .err { font-size: var(--pie); color: #9E3524; display: none; }
.field.bad .err { display: block; }
.check { display: flex; align-items: flex-start; flex-wrap: wrap; gap: .75rem; font-size: var(--pie); line-height: 1.55; }
.check > span { flex: 1; min-width: 12rem; }
.check .err { flex-basis: 100%; }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; flex: none; accent-color: var(--marea); }

/* -------------------------------------------------- motion failure guard */
.no-motion [data-reveal], .no-motion [data-anim], .no-motion [data-anim] *, .no-motion .sagrado *,
.no-motion .noche .frame, .no-motion .noche img, .no-motion .arrival img, .no-motion .settle img, .no-motion .closing img {
  transform: none !important; clip-path: none !important; visibility: visible !important; }
.no-motion [data-reveal], .no-motion [data-anim], .no-motion [data-anim] *, .no-motion .sagrado * { opacity: 1 !important; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
  .arq-head .h-sec { grid-column: 1 / span 12; }
  .arq-head .lead { grid-column: 1 / span 9; justify-self: start; margin-top: 1.5rem; }
  .exp-t { grid-column: 1 / span 9; }
  .exp-firma { grid-column: 10 / span 3; }
}

/* short laptops: keep related things on one screen */
@media (min-width: 901px) and (max-height: 800px) {
  .arq-sala .frame, .arq-hab .frame { height: min(72svh, 44vw); }
  .exp-intro { padding-bottom: 2rem; }
  .sagrado { min-height: 68svh; }
}

@media (max-width: 900px) {
  .frame img, .media img { object-position: var(--pos-m, var(--pos, 50% 50%)); }
  .nav-links { display: none; }
  .nav .lang { margin-left: auto; }
  .burger { display: block; }

  .lugar, .arq-head, .arq-sala, .arq-hab, .arq-borde, .exp-intro, .exp-camino, .exp-playa, .exp .head,
  .exp-piscina, .exp-bien, .fauna, .gal-head, .prop-body, .prop-estado, .ubic { grid-template-columns: 1fr; }
  .lugar > *, .arq-head > *, .arq-sala > *, .arq-hab > *, .arq-borde > *, .exp-intro > *, .exp-camino > *, .exp-playa > *,
  .exp .head > *, .exp-piscina > *, .exp-bien > *, .fauna > *, .gal-head > *, .prop-body > *, .prop-estado > *, .ubic > * {
    grid-column: 1 / -1 !important; }

  .lugar { padding: var(--air) 0; row-gap: 2rem; }
  .lugar-say { padding-inline: var(--gutter); }
  .lugar-pic { height: min(74svh, 120vw); }
  .sagrado { min-height: 60svh; }

  .arq-head .lead { margin-top: 1.25rem; }
  .arq-terraza { height: min(70svh, 110vw); min-height: 0; }
  .arq-sala, .arq-hab { padding: var(--air) 0 0; row-gap: 1.75rem; }
  .arq-sala .txt, .arq-hab .txt { padding: 0 var(--gutter); order: -1; }
  .arq-sala .frame, .arq-hab .frame { height: min(60svh, 92vw); }
  .arq-par { flex-direction: column; align-items: center; }
  .arq-par .frame { height: auto; width: 100%; max-width: 560px; }
  .arq-borde { padding-top: var(--air); row-gap: 1.5rem; }

  .exp-intro { padding-bottom: 2.5rem; row-gap: 2rem; }
  .exp-t { font-size: clamp(1.625rem, 6.6vw, 2.5rem); }
  .exp-firma { grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 1rem; }
  .exp-firma .sym { width: 60px; }
  .exp-firma .word { width: 140px; }
  .exp-camino { padding: 0; row-gap: 1.75rem; }
  .exp-camino .lead { padding: 0 var(--gutter); max-width: none; }
  .exp-camino .frame { aspect-ratio: 4 / 3; }
  .exp-playa { padding: var(--gap) 0 0; row-gap: var(--gap); }
  .exp-playa .a { height: min(60svh, 100vw); }
  .exp-playa .b { margin: 0 var(--gutter); }

  .exp-mesa .frame { height: min(70svh, 110vw); min-height: 0; }
  .exp-mesa .panel { position: relative; right: auto; bottom: auto; width: auto; margin: 0; padding: 1.75rem var(--gutter) 0; background: none; }

  .exp .head { row-gap: .75rem; }
  .exp-piscina { row-gap: 1.75rem; }
  .exp-piscina .txt { display: contents; }
  .exp-piscina .txt .h-sec, .exp-piscina .txt p { padding: 0; }
  .exp-piscina .main { justify-self: stretch; height: auto; width: 100%; order: 1; }
  .exp-piscina .duo { order: 2; margin-top: 0; }
  .exp-bien .yoga, .exp-bien .spa, .exp-bien .masaje { max-height: none; width: 100%; }
  .exp .band { height: min(56svh, 80vw); }
  .exp .pair { flex-direction: column; }
  .exp .pair .frame { flex: none; width: 100%; }
  .fauna { row-gap: 1.75rem; padding-top: var(--air); }
  .fauna .side { padding-top: 0; }

  .gal-head .lead { margin-top: 1rem; }

  .prop-hero { height: 86svh; }
  .prop-body { row-gap: 2.25rem; }
  .prop-facts > div { grid-template-columns: 1fr; gap: .35rem; }
  .prop-cta { margin-top: 2.5rem; }
  .prop-estado { row-gap: 2.25rem; }

  .ruta { margin-top: 2.5rem; }
  .stops { grid-template-columns: 1fr; justify-items: start; }
  .stop { grid-template-columns: 26px auto auto; justify-items: start; align-items: center; text-align: left; column-gap: .9rem; }
  .stop .dot { margin: 0 7px; }
  .stop .km { margin-top: 0; }
  .leg { margin: 0 0 0 12px; padding: 1.1rem 0 1.1rem 1.6rem; border-top: 0; border-left: 2px solid var(--marea); text-align: left; }
  .leg.rest { border-top: 0; border-left: 2px dashed var(--hair); }
  .leg span { padding-top: 0; }
  .arrival .foot { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .g-row { flex-direction: column; gap: clamp(1.25rem, 5vw, 2rem); }
  .g-item, .g-wide .g-item, .g-single .g-item { flex: none; width: 100%; }
  .g-wide .g-open { aspect-ratio: var(--ar); }
  .v-bar { grid-template-columns: 1fr auto; }
  .v-meta { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .noche { height: 86svh; min-height: 480px; }
  .arrival .firma .sym  { width: clamp(64px, 19vw, 86px); }
  .arrival .firma .word { width: min(68vw, 270px); }
  .arrival .firma .rule { width: min(68vw, 270px); }
  .specs div, .ledger > div { grid-template-columns: 1fr; gap: .25rem; }
  .btn-lg { width: 100%; }
  .foot-links { grid-template-columns: 1fr 1fr; gap: .25rem 2rem; }
}

/* close controls share one state language */
.menu-close, .drawer .x, .v-close { transition: color .3s var(--ease), border-color .3s var(--ease); }
.menu-close:hover, .drawer .x:hover { color: var(--manglar); }
.menu-close:focus-visible, .drawer .x:focus-visible, .g-open:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; }

/* social profiles */
.social { display: flex; gap: .35rem; list-style: none; margin: 0; padding: 0; }
.social a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--marea);
  border: 1px solid transparent; border-radius: 50%; transition: color .3s var(--ease), border-color .3s var(--ease); }
.social a:hover { color: var(--oro); border-color: rgba(201, 162, 75, .5); }
.social svg { width: 20px; height: 20px; }
.foot-legal { align-items: center; }
.menu-foot .social { margin-left: auto; }
.alt-wa { font-size: var(--pie); }
.alt-wa a { border-bottom: 1px solid var(--oro); }
@media (max-width: 560px) { .menu-foot .social { margin-left: 0; } }