/* Quinta das Luzes — shared stylesheet.
   Chrome (fonts, tokens, header, menu, buttons) is lifted verbatim from the
   approved design/portal.html draft — see design-decisions.md. Do not
   reintroduce transition-all; animate only transform/opacity. */

/* ---------- fonts (self-hosted, see assets/fonts/) ---------- */
@font-face{font-family:'Melodrama';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/fonts/Melodrama-Regular.woff2') format('woff2')}
@font-face{font-family:'Melodrama';font-weight:500;font-style:normal;font-display:swap;src:url('/assets/fonts/Melodrama-Medium.woff2') format('woff2')}
@font-face{font-family:'Melodrama';font-weight:600;font-style:normal;font-display:swap;src:url('/assets/fonts/Melodrama-Semibold.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-weight:400;font-style:normal;font-display:swap;src:url('/assets/fonts/Switzer-Regular.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-weight:500;font-style:normal;font-display:swap;src:url('/assets/fonts/Switzer-Medium.woff2') format('woff2')}
@font-face{font-family:'Switzer';font-weight:600;font-style:normal;font-display:swap;src:url('/assets/fonts/Switzer-Semibold.woff2') format('woff2')}

/* ---------- tokens ---------- */
:root{
  --paper:#f3ede2;--paper-hi:#f9f5ec;--stone:#d6c6b4;--ink:#221a13;--muted:#6f5f4d;
  --wine:#5e2a18;--wine-deep:#431d0e;--gild:#9a8452;--gold:#c2a86a;--intro:#141210;
  --ease-out-expo:cubic-bezier(.16,1,.3,1);--ease-out-quart:cubic-bezier(.25,1,.5,1);
  /* per-section thematic colour (default = Dormir / wine). Each nav section sets
     its own via a theme-* class. NOTE: the four-colour system EXTENDS the
     client-approved single-accent palette (see design-decisions.md §7) — it is a
     proposal pending sign-off. --page is the theme-tinted page ground; --band is
     a deeper themed wash for the chapter-opening lede. Both stay light so dark
     body text keeps contrast across all four hues. */
  --theme:#5e2a18;--theme-deep:#431d0e;--page:var(--paper);--band:var(--paper-hi);
}
/* Four distinct but grown-up colour-worlds, all pulled into a deep, low-key,
   heritage register so none reads bright/childish (2026-07-12, client feedback):
   garnet wine / burnt brick-clay / aged bronze / greyed sage. Each --page/--band
   routes through --theme so a hue tweak propagates everywhere. */
.theme-dormir{--theme:#6d363b;--theme-deep:#43252c;--page:color-mix(in oklab,var(--paper) 84%,var(--theme));--band:color-mix(in oklab,var(--paper) 74%,var(--theme))}
.theme-saborear{--theme:#86432b;--theme-deep:#4c2715;--page:color-mix(in oklab,var(--paper) 84%,var(--theme));--band:color-mix(in oklab,var(--paper) 74%,var(--theme))}
.theme-celebrar{--theme:#7b5f33;--theme-deep:#44341a;--page:color-mix(in oklab,var(--paper) 85%,var(--theme));--band:color-mix(in oklab,var(--paper) 76%,var(--theme))}
.theme-explorar{--theme:#46503a;--theme-deep:#2a3126;--page:color-mix(in oklab,var(--paper) 86%,var(--theme));--band:color-mix(in oklab,var(--paper) 78%,var(--theme))}

/* ---------- reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* Smooth cross-document page transitions (hub -> section, section -> section).
   CSS-only, framework-free; supporting browsers cross-fade the coloured grounds,
   others navigate normally. Slightly slower + eased. Reduced-motion cuts it. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:var(--ease-out-quart)}
@media(prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
/* Arriving via a transition: show the hero settled so the cross-fade never lands
   on a half-animated (title-hidden) frame. Direct loads/refreshes still animate. */
.vt-nav .hero__img{animation:none}
.vt-nav .hero__eyebrow .kicker,.vt-nav .hero__num,.vt-nav .hero__title>span,.vt-nav .hero__rule,.vt-nav .hero__sub{animation:none;transform:none;opacity:1}
/* --bg-line = the hairline colour per context; the cluster itself is drawn by the
   fixed body::before below (an off-centre bundle, not a full-page pattern). */
body{margin:0;background-color:var(--page);--bg-line:color-mix(in oklab,var(--theme) 12%,transparent);color:var(--ink);font-family:'Switzer',system-ui,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* Sparse ASYMMETRIC accent: a bundle of thin vertical hairlines anchored to the right,
   fading toward the centre, rest of the page open. Fixed + behind all content. */
body::before{content:'';position:fixed;top:0;bottom:0;right:0;width:clamp(140px,26vw,320px);z-index:-1;pointer-events:none;background-image:repeating-linear-gradient(90deg,var(--bg-line) 0 1px,transparent 1px 15px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 78%);mask-image:linear-gradient(90deg,transparent,#000 78%)}
@media(prefers-reduced-motion:no-preference){body::before{transition:opacity .4s}}
/* Contact only: HAND-RULED irregular hairlines instead of the site's machine-even bundle —
   uneven gaps, ragged tops/bottoms, varied weight + opacity, so it reads drawn rather than
   printed. Generated deterministically (tools/gen-bg-lines.mjs, seed 20260714) into
   bg-lines-contact.svg; the wine hairline colour is baked into that file (a data-URI/asset
   can't read --bg-line). background-size:auto keeps every line exactly its own weight at
   any viewport; anchored right, no repeat, so it drifts off the left edge. */
body.contact-page::before{left:0;width:auto;
  background-image:url(/assets/images/bg-lines-contact.svg);
  background-repeat:no-repeat;background-position:right top;background-size:auto 100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 62%);
  mask-image:linear-gradient(90deg,transparent 4%,#000 62%)}
body.lock{overflow:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.mel{font-family:'Melodrama',Georgia,serif}
.label{font-family:'Switzer';text-transform:uppercase;letter-spacing:.24em;font-size:.68rem;font-weight:600}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

.container{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem)}

/* ---------- motion: scroll reveal + cross-page transitions ---------- */
/* Reveal state applies only when JS is present (progressive enhancement). */
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out-expo),transform .7s var(--ease-out-expo)}
.js [data-reveal].is-visible{opacity:1;transform:none}
/* small cascade so sibling columns don't reveal in lockstep */
.js .contact-map-col[data-reveal]{transition-delay:.08s}
/* Bridge reveal: the verb's letters rise out of .next-section__cut (which already clips with
   overflow:hidden, so it doubles as the mask) while the photo settles from a slight push-in.
   Letters are wrapped by JS, so no-JS keeps a plain, fully visible verb.
   transform/opacity only — per the hard rule; no width/height/margin animation anywhere. */
.js .next-section__l{display:inline-block;transform:translateY(105%);transition:transform .85s var(--ease-out-expo);transition-delay:calc(var(--i,0)*.04s)}
.js .next-section.is-visible .next-section__l{transform:none}
/* Photo starts pushed in and settles. Lower specificity than .next-section:hover .next-section__img
   (0-3-0), so hover still wins once revealed. */
.js .next-section[data-reveal] .next-section__img{transform:scale(1.12)}
.js .next-section[data-reveal].is-visible .next-section__img{transform:scale(1)}
/* Cross-document view transitions: elegant crossfade between pages.
   Unsupported browsers (e.g. Firefox) simply navigate instantly. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:var(--ease-out-quart)}
/* Keep the shared chrome steady on interior→interior navigation instead of
   crossfading it — only main content transitions. */
body:not(.home) .top{view-transition-name:site-header}
body:not(.home) .site-footer,body:not(.home) .legal-strip{view-transition-name:site-footer}
@media(prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none}
  /* Letters/photo must be reset explicitly: the blanket transition:none above only stops the
     tween, so without this the letters would sit parked below the cut mask and never appear. */
  .js .next-section__l{transform:none}
  .js .next-section[data-reveal] .next-section__img{transform:none}
  ::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){animation:none!important}
}

/* ---------- icons ---------- */
.i-ext,.i-arrow{width:.85em;height:.85em;fill:currentColor;vertical-align:-.08em;flex-shrink:0}

/* ---------- header (transparent at all times; colour adapts to context) ---------- */
/* --hdr is the header's foreground colour. Default = ink (legible over light
   content). Over a dark hero, or on the home portal, it flips to paper. */
.top{--hdr:var(--ink);position:fixed;top:0;left:0;right:0;z-index:95;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:clamp(1.5rem,4vw,2.1rem) clamp(1.25rem,5vw,3rem) .9rem;background:transparent;color:var(--hdr);transition:transform .5s var(--ease-out-quart)}
body.over-hero .top,body.home .top,body.menu-open .top,body.immersive .top{--hdr:var(--paper-hi)}
.top.hide{transform:translateY(-110%)}
.top .brand{justify-self:center;position:relative;display:block;height:clamp(46px,7vw,66px);width:auto;transform:translateY(6px)}
.top .brand img{height:100%;width:auto;transition:opacity .5s var(--ease-out-quart)}
/* base: dark (ink) mark over light content; light mark stacked on top, hidden */
.top .brand__light{position:absolute;inset:0;height:100%;opacity:0}
.top .brand__dark{opacity:1}
/* light-header states show the white mark */
body.over-hero .top .brand__light,body.home .top .brand__light,body.menu-open .top .brand__light,body.immersive .top .brand__light{opacity:1}
body.over-hero .top .brand__dark,body.home .top .brand__dark,body.menu-open .top .brand__dark,body.immersive .top .brand__dark{opacity:0}
.top .burger{justify-self:start}
.top .rbtn{justify-self:end}

.burger{display:inline-flex;align-items:center;justify-content:center;position:relative;background:none;border:0;cursor:pointer;padding:8px;min-height:44px;min-width:44px}
.burger svg{position:absolute;width:60px;height:60px;fill:var(--hdr);transition:fill .5s var(--ease-out-quart),opacity .35s var(--ease-out-quart),transform .35s var(--ease-out-quart)}
.burger .i-x{opacity:0;transform:rotate(-40deg) scale(.7)}
.burger.open .i-list{opacity:0;transform:rotate(40deg) scale(.7)}
.burger.open .i-x{opacity:1;transform:rotate(0) scale(1)}

.rbtn{font-family:'Switzer';font-weight:600;font-size:clamp(.74rem,1.4vw,.82rem);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--hdr);border:1px solid color-mix(in oklab,var(--hdr) 45%,transparent);padding:clamp(.9rem,2vw,.95rem) clamp(1.1rem,3vw,1.5rem);display:inline-flex;align-items:center;gap:.5rem;white-space:nowrap;transition:background .35s var(--ease-out-quart),color .35s var(--ease-out-quart),border-color .5s var(--ease-out-quart)}
.rbtn:hover{background:var(--hdr);color:var(--paper)}
body.over-hero .rbtn:hover,body.home .rbtn:hover,body.immersive .rbtn:hover{color:var(--ink)}

/* ---------- full-screen menu ---------- */
/* Menu ground is a dark tone of the current section's colour (--theme-deep set
   per theme-* class; falls back to the root wine on the home portal). */
.menu{position:fixed;inset:0;z-index:90;background:linear-gradient(155deg,color-mix(in oklab,var(--theme-deep) 82%,#000),color-mix(in oklab,var(--theme-deep) 94%,#060404));transform:translateY(-100%);transition:transform .6s cubic-bezier(.76,0,.24,1);display:flex;flex-direction:column;padding:clamp(6.5rem,15vw,8.5rem) clamp(1.25rem,5vw,3rem) clamp(1.5rem,4vw,2.5rem)}
/* Header clearance. On mobile the 15vw term never wins, so this floor alone sets
   how far the nav starts below the header (6.5rem left only ~16px of air). It is
   paid for out of the nav's own spacing — both draw on the same column height —
   so 8rem is the balance: ~40px clear, nav gaps still ~51px.
   min-height:740px is not taste: below ~740px the menu already outgrows the
   viewport and .secondary collides with .menu__foot (pre-existing, worst on
   360x640). Extra padding only deepens that, so short screens keep 6.5rem. */
@media(min-height:740px){.menu{padding-top:clamp(8rem,15vw,8.5rem)}}
.menu[data-open="true"]{transform:none}
/* staggered reveal of menu contents when the panel opens */
.menu .primary a,.menu .secondary>*{opacity:0;transform:translateY(24px);transition:opacity .55s var(--ease-out-expo),transform .55s var(--ease-out-expo)}
.menu[data-open="true"] .primary a,.menu[data-open="true"] .secondary>*{opacity:1;transform:none}
/* Per-property delay lists (opacity, transform, color) so only the entrance
   properties stagger — the hover colour change stays instant, no lag. */
.menu[data-open="true"] .primary a:nth-child(1){transition-delay:.12s,.12s,0s}
.menu[data-open="true"] .primary a:nth-child(2){transition-delay:.19s,.19s,0s}
.menu[data-open="true"] .primary a:nth-child(3){transition-delay:.26s,.26s,0s}
.menu[data-open="true"] .primary a:nth-child(4){transition-delay:.33s,.33s,0s}
.menu[data-open="true"] .secondary>*:nth-child(1){transition-delay:.36s,.36s,0s}
.menu[data-open="true"] .secondary>*:nth-child(2){transition-delay:.40s,.40s,0s}
.menu[data-open="true"] .secondary>*:nth-child(3){transition-delay:.44s,.44s,0s}
@media(prefers-reduced-motion:reduce){.menu .primary a,.menu .secondary>*{opacity:1;transform:none}}
/* 1fr auto, NOT two stretched rows: the primary nav is the point of this menu, so
   it takes every spare pixel and .secondary shrinks to its content. Auto rows split
   the free height evenly, which left .secondary holding ~166px of dead air below
   itself while the four nav links were squeezed into a half share. .primary spaces
   its links with justify-content:space-between, so its height IS the gap between
   nav items — there is no gap value to turn up here. */
.menu .mgrid{display:grid;gap:2.4rem;grid-template-columns:1fr;grid-template-rows:1fr auto;flex:1;min-height:0}
.menu .primary{display:flex;flex-direction:column;justify-content:space-between;height:100%}
.menu .primary a{font-family:'Melodrama';font-weight:500;font-size:clamp(2rem,6.5vw,3.9rem);text-transform:uppercase;letter-spacing:.02em;text-decoration:none;color:var(--paper-hi);padding:.2rem 0;border-bottom:1px solid color-mix(in oklab,var(--gild) 26%,transparent);display:flex;justify-content:space-between;align-items:baseline;gap:1rem;transition:opacity .55s var(--ease-out-expo),transform .55s var(--ease-out-expo),color .35s var(--ease-out-quart)}
.menu .primary a>span:last-child{transition:opacity .35s var(--ease-out-quart)}
@media(hover:hover){.menu .primary a:hover{color:var(--gold)}.menu .primary a:hover>span:last-child{opacity:.55}}
.menu .primary a span{font-family:'Switzer';font-weight:500;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.menu .secondary{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.menu /* min-height is fine here (no pinned pseudo, and the menu has vertical room) — these were 35px. */
.secondary a{font-family:'Melodrama';font-weight:400;font-size:clamp(1.35rem,2.4vw,1.75rem);letter-spacing:.01em;text-decoration:none;color:color-mix(in oklab,var(--paper-hi) 90%,var(--stone));display:inline-flex;align-items:center;gap:.5rem;min-height:44px;transition:opacity .55s var(--ease-out-expo),transform .55s var(--ease-out-expo),color .3s var(--ease-out-quart)}
.menu .secondary a:hover{color:var(--gold)}
.menu .lang{margin-top:1.5rem;font-family:'Switzer';font-weight:500;font-size:.9rem;letter-spacing:.03em;color:var(--stone);display:flex;align-items:center;gap:.5rem}
.menu /* "PT"/"EN" are only ~21px wide as text; pad them out to a real 44px target without changing the
   type. inline-flex + centring keeps the pair visually where it was. */
.lang a{color:var(--paper-hi);text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-inline:-.7rem}
.menu .lang a:hover{color:var(--gold)}
/* legal footer, now living at the bottom of the menu (page bottoms stay clean for the bridge) */
/* Mobile: three centred lines — AL licences, legal links, copyright (DOM order). */
.menu__foot{margin-top:clamp(1.6rem,4vw,2.4rem);padding-top:clamp(1.1rem,3vw,1.6rem);border-top:1px solid color-mix(in oklab,var(--gild) 24%,transparent);display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;font-family:'Switzer';font-size:.74rem;letter-spacing:.02em;color:color-mix(in oklab,var(--paper-hi) 52%,var(--stone));opacity:0;transform:translateY(24px);transition:opacity .55s var(--ease-out-expo),transform .55s var(--ease-out-expo)}
.menu[data-open="true"] .menu__foot{opacity:1;transform:none;transition-delay:.52s}
.menu__legal{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem 1.2rem}
/* Desktop keeps its original single row: AL · copyright left, legal right. The
   copyright is its own element for the mobile stack, so `order` puts it back
   beside the AL line and ::before restores the "·" that used to be in that text. */
@media(min-width:820px){
  .menu__foot{flex-direction:row;flex-wrap:wrap;align-items:baseline;text-align:left;gap:.5rem}
  .menu__copy{order:1}
  .menu__copy::before{content:'\00b7';margin-inline-end:.5rem}
  .menu__legal{order:2;margin-left:auto;justify-content:flex-start}
}
/* Legal links are ~19px of text. Pseudo hit-area again rather than min-height: these sit in a
   wrapped inline row, so growing the boxes would space the whole legal strip out. */
.menu__foot a{color:color-mix(in oklab,var(--paper-hi) 74%,var(--stone));text-decoration:none;position:relative;transition:color .3s var(--ease-out-quart)}
.menu__foot a::before{content:'';position:absolute;inset:-12px -6px}
.menu__foot a:hover{color:var(--gold)}
/* Two columns here, so both blocks sit in row 1 and the mobile stack's second row
   would be left empty — still claiming a full row-gap (~86px of dead space under
   the nav, squeezing its gaps from 70px to 42px). Back to a single auto row. */
@media(min-width:820px){.menu .mgrid{grid-template-columns:1.55fr 1fr;grid-template-rows:auto;gap:clamp(3rem,6vw,6rem)}.menu .secondary{justify-content:flex-end;padding-bottom:.4rem}}

/* ---------- ghost button (shared CTA language across the site) ---------- */
.ghostbtn{font-family:'Switzer';font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--ink);background:none;border:1px solid color-mix(in oklab,var(--ink) 45%,transparent);padding:1rem 2.2rem;display:inline-flex;align-items:center;gap:.5rem;transition:background .35s var(--ease-out-quart),color .35s var(--ease-out-quart),border-color .35s var(--ease-out-quart),transform .16s var(--ease-out-quart)}
.ghostbtn:active{transform:scale(.97)}
.ghostbtn .i-ext{transition:transform .4s var(--ease-out-quart)}
@media(hover:hover){.ghostbtn:hover{background:var(--ink);color:var(--paper-hi);border-color:var(--ink)}.ghostbtn:hover .i-ext{transform:translate(2px,-2px)}}
.ghostbtn--light{color:var(--paper-hi);border-color:color-mix(in oklab,var(--paper-hi) 55%,transparent)}
@media(hover:hover){.ghostbtn--light:hover{background:var(--paper-hi);color:var(--ink);border-color:var(--paper-hi)}.ghostbtn--light:hover .i-ext{transform:translate(2px,-2px)}}

/* shared editorial eyebrow */
.kicker{font-family:'Switzer';font-weight:600;text-transform:uppercase;letter-spacing:.3em;font-size:.7rem;display:block}

/* ---------- editorial masthead hero (image + themed plinth) ---------- */
.hero{position:relative;min-height:100svh;display:grid;grid-template-rows:1fr auto;overflow:hidden;background:var(--theme-deep)}
.hero__frame{position:relative;overflow:hidden;min-height:0;display:flex;align-items:flex-end;padding-bottom:clamp(2.2rem,5vw,4rem)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform-origin:50% 60%;animation:heroReveal 1.7s var(--ease-out-quart) both}
/* Per-page focal point on wide desktop crops (mobile's tall crop already frames well,
   so this only kicks in >=1024). Pages opt in by setting --hero-focus-d on the section;
   default keeps the centred crop, so heroes that don't set it are untouched. */
@media(min-width:1024px){.hero__img{object-position:var(--hero-focus-d,50% 50%)}}
/* Two layers over the photo: a neutral warm-black scrim (top: eyebrow, bottom:
   title legibility) ON TOP of a light flat wash of the current section --theme, so
   the image is gently unified with the page colour without the heavy tint bleed. */
.hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,13,10,.5) 0%,rgba(18,13,10,.16) 16%,rgba(18,13,10,0) 38%,rgba(18,13,10,0) 52%,rgba(18,13,10,.3) 72%,rgba(18,13,10,.82) 100%),color-mix(in oklab,var(--theme) 28%,transparent)}
.hero__inner{position:relative;z-index:1;width:100%;max-width:1320px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem);align-self:end;color:var(--paper-hi)}
.hero__eyebrow{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:clamp(.8rem,2vw,1.2rem)}
.hero__eyebrow .kicker{color:var(--gold);animation:heroRise .8s var(--ease-out-expo) .2s both}
.hero__num{font-family:'Melodrama';font-weight:400;font-size:clamp(1.4rem,3vw,2rem);color:color-mix(in oklab,var(--paper-hi) 60%,transparent);animation:heroRise .8s var(--ease-out-expo) .28s both}
.hero__title{font-family:'Melodrama';font-weight:400;font-size:clamp(2.9rem,9.5vw,7rem);line-height:.98;margin:0;letter-spacing:.02em;text-wrap:balance;overflow:hidden;padding-bottom:.16em;border-bottom:1.5px solid color-mix(in oklab,var(--gold) 64%,var(--paper-hi))}
.hero__title>span{display:block;transform:translateY(108%);animation:heroLineUp 1.05s var(--ease-out-expo) .42s both}
/* themed plinth carries the rule + subtitle in the section colour */
.hero__plinth{position:relative;z-index:1;background:var(--theme-deep);color:var(--paper-hi)}
.hero__plinth-in{max-width:1320px;margin:0 auto;padding:clamp(1.6rem,4vw,2.4rem) clamp(1.25rem,5vw,3rem) clamp(1.9rem,4.5vw,2.8rem);display:flex;flex-direction:column;gap:clamp(1rem,2.5vw,1.4rem)}
/* plinth rule hidden while prototyping the under-title line (avoids doubling up); restore if the underline is rejected */
.hero__rule{display:none;width:clamp(48px,9vw,90px);height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;animation:heroRuleDraw .9s var(--ease-out-quart) .7s both}
.hero__sub{font-size:clamp(1.05rem,2.1vw,1.3rem);color:color-mix(in oklab,var(--paper-hi) 86%,var(--stone));max-width:52ch;margin:0;line-height:1.5;animation:heroRise .9s var(--ease-out-expo) .8s both}
.hero__cue{position:absolute;left:50%;top:calc(100% - 26vh - 34px);width:1px;height:clamp(34px,5vw,52px);background:linear-gradient(var(--paper-hi),transparent);z-index:2;animation:scrollCue 2.6s var(--ease-out-quart) 1.2s infinite}
@keyframes heroReveal{from{transform:scale(1.16);clip-path:inset(28% 0 0 0)}to{transform:scale(1);clip-path:inset(0 0 0 0)}}
@keyframes heroLineUp{to{transform:none}}
@keyframes heroRuleDraw{to{transform:scaleX(1)}}
@keyframes heroRise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes scrollCue{0%{transform:translate(-50%,-70%);opacity:0}28%{opacity:.7}100%{transform:translate(-50%,2%);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero__img,.hero__eyebrow .kicker,.hero__num,.hero__title>span,.hero__rule,.hero__sub{animation:none;opacity:1;transform:none;clip-path:none}.hero__cue{display:none}}

/* ---------- editorial lede statement (full-bleed themed chapter opener) ---------- */
.lede{background:var(--band);border-block:1px solid color-mix(in oklab,var(--theme) 24%,transparent);padding-block:clamp(3.5rem,9vw,6.5rem)}
.lede__in{max-width:1320px;margin:0 auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.lede__in::before{content:'';display:block;width:clamp(52px,10vw,96px);height:3px;background:var(--theme);margin-bottom:clamp(1.4rem,3.2vw,2.1rem)}
.lede p{font-family:'Melodrama';font-weight:400;font-size:clamp(1.5rem,3.4vw,2.35rem);line-height:1.32;letter-spacing:.005em;color:var(--ink);max-width:24ch;margin:0}
.lede .kicker{color:var(--theme);margin-bottom:1.2rem}

/* ---------- reusable editorial feature blocks (content pages) ---------- */
.features{max-width:1320px;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,5vw,3rem) clamp(4.5rem,10vw,7.5rem);display:flex;flex-direction:column;gap:clamp(6rem,13vw,10.5rem)}
.feature{position:relative}
.feature__media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.feature__media img{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform 1s var(--ease-out-quart)}
@media(hover:hover){.feature:hover .feature__media img{transform:scale(1.045)}}
.feature__panel{position:relative;z-index:2;background:var(--paper-hi);margin:-2.8rem 1rem 0;padding:clamp(1.6rem,5vw,2.4rem);box-shadow:0 34px 64px -34px rgba(20,16,12,.5)}
.feature__index{position:absolute;top:-.62em;right:1.2rem;font-family:'Melodrama';font-weight:400;font-size:clamp(3.2rem,16vw,5.4rem);line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--gold) 72%,transparent);opacity:.9;pointer-events:none}
.feature__kicker{font-family:'Switzer';font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:.68rem;color:var(--gild);margin:0}
.feature__name{font-family:'Melodrama';font-weight:400;font-size:clamp(1.9rem,5vw,2.7rem);margin:.45rem 0 0;letter-spacing:.01em;line-height:1.05}
.feature__rule{width:54px;height:3px;background:var(--theme);margin:clamp(.9rem,2.5vw,1.2rem) 0}
.feature__meta{font-family:'Switzer';font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--theme);margin:0 0 .3rem}
.feature__desc{font-size:1rem;color:var(--muted);line-height:1.62;margin:.9rem 0 0;max-width:48ch}
.feature__list{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.55rem;max-width:48ch}
.feature__list li{position:relative;padding-left:1.2rem;font-size:1rem;color:var(--muted);line-height:1.5}
.feature__list li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--gold)}
.feature__cta{margin-top:clamp(1.3rem,3vw,1.7rem)}
@media(min-width:900px){
  .feature{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;column-gap:0}
  .feature__media{grid-row:1;grid-column:1 / 8;aspect-ratio:4/3}
  .feature__panel{grid-row:1;grid-column:6 / 13;margin:0;align-self:center}
  .feature:nth-child(even) .feature__media{grid-column:6 / 13}
  .feature:nth-child(even) .feature__panel{grid-column:1 / 8;justify-self:end}
  .feature:nth-child(even) .feature__index{right:auto;left:1.2rem}
  .feature__index{top:-.5em}
}

/* ---------- the collection: alternating editorial spreads ---------- */
.collection{max-width:1320px;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,5vw,3rem) clamp(4.5rem,10vw,7.5rem);display:flex;flex-direction:column;gap:clamp(6rem,13vw,10.5rem)}
.suite{position:relative}
.suite__media{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--stone)}
.suite__media img{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform 1s var(--ease-out-quart)}
@media(hover:hover){.suite:hover .suite__media img{transform:scale(1.045)}}
.suite__panel{position:relative;z-index:2;background:var(--paper-hi);margin:-2.8rem 1rem 0;padding:clamp(1.6rem,5vw,2.4rem);box-shadow:0 34px 64px -34px rgba(20,16,12,.5)}
.suite__index{position:absolute;top:-.62em;right:1.2rem;font-family:'Melodrama';font-weight:400;font-size:clamp(3.2rem,16vw,5.4rem);line-height:1;color:transparent;-webkit-text-stroke:1px color-mix(in oklab,var(--gold) 72%,transparent);opacity:.9;pointer-events:none}
.suite__kicker{font-family:'Switzer';font-weight:600;letter-spacing:.24em;text-transform:uppercase;font-size:.68rem;color:var(--gild);margin:0}
.suite__name{font-family:'Melodrama';font-weight:400;font-size:clamp(1.9rem,5vw,2.7rem);margin:.45rem 0 0;letter-spacing:.01em;line-height:1.05}
.suite__rule{width:54px;height:3px;background:var(--theme);margin:clamp(.9rem,2.5vw,1.2rem) 0}
.suite__meta{font-family:'Switzer';font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0}
.suite__desc{font-size:1rem;color:var(--muted);line-height:1.62;margin:.9rem 0 1.3rem;max-width:46ch}
.suite__link{font-family:'Switzer';font-weight:600;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink);display:inline-flex;align-items:center;gap:.55rem;padding-bottom:.28rem;width:fit-content;position:relative;transition:color .35s var(--ease-out-quart)}
/* 44px thumb target without touching the look: the link's text box is ~24px, but min-height would
   drag ::after (the underline, pinned to bottom:0) away from the text. A pseudo hit-area grows the
   tappable box instead — pseudo-elements hit-test as part of their element. */
.suite__link::before{content:'';position:absolute;inset:-10px 0;z-index:1}
.suite__link::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out-quart)}
.suite__link .i-arrow{transition:transform .45s var(--ease-out-quart)}
@media(hover:hover){.suite__link:hover,.suite:hover .suite__link{color:var(--theme)}.suite__link:hover::after,.suite:hover .suite__link::after{transform:scaleX(1)}.suite:hover .suite__link .i-arrow{transform:translateX(5px)}}
@media(hover:none){.suite__link::after{transform:scaleX(1)}}
@media(min-width:900px){
  .suite{display:grid;grid-template-columns:repeat(12,1fr);align-items:center;column-gap:0}
  .suite__media{grid-row:1;grid-column:1 / 8;aspect-ratio:4/3}
  .suite__panel{grid-row:1;grid-column:6 / 13;margin:0;align-self:center}
  .suite:nth-child(even) .suite__media{grid-column:6 / 13}
  .suite:nth-child(even) .suite__panel{grid-column:1 / 8;justify-self:end}
  .suite:nth-child(even) .suite__index{right:auto;left:1.2rem}
  .suite__index{top:-.5em}
}

.feature__list-title{font-family:'Switzer';font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:var(--gild);margin:clamp(1.2rem,3vw,1.6rem) 0 0}

/* page-level CTA (e.g. events enquiry) */
.page-cta{max-width:1320px;margin:0 auto;padding:0 clamp(1.25rem,5vw,3rem) clamp(4rem,9vw,6.5rem);display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1.1rem,3vw,1.6rem)}
.page-cta p{font-family:'Melodrama';font-weight:400;font-size:clamp(1.4rem,3vw,2rem);line-height:1.3;color:var(--ink);max-width:26ch;margin:0}

/* ---------- apartments: themed contrast band ---------- */
.apartments{background-color:var(--theme-deep);background-image:repeating-linear-gradient(135deg,color-mix(in oklab,var(--paper-hi) 3%,transparent) 0 1px,transparent 1px 10px);color:var(--paper-hi)}
.apartments__inner{max-width:1240px;margin:0 auto;padding:clamp(4rem,9vw,6.5rem) clamp(1.25rem,5vw,3rem)}
.apartments__head{max-width:56ch;margin-bottom:clamp(2.6rem,6vw,3.6rem)}
.apartments__head .kicker{color:var(--gold);margin-bottom:1rem}
.apartments__head h2{font-family:'Melodrama';font-weight:400;font-size:clamp(2rem,5vw,3rem);margin:0 0 1rem;letter-spacing:.01em}
.apartments__head p{color:color-mix(in oklab,var(--paper-hi) 82%,var(--stone));font-size:1.02rem;line-height:1.6;margin:0}
.apt-list{display:flex;flex-direction:column}
.apt{display:grid;grid-template-columns:1fr;gap:clamp(1.4rem,3.5vw,2rem);padding:clamp(2.8rem,6.5vw,4.6rem) 0;border-top:1px solid color-mix(in oklab,var(--paper-hi) 16%,transparent)}
/* apartments grouped by location (Gaia houses vs the Monsanto outlier) */
.apt-group+.apt-group{margin-top:clamp(2.8rem,6vw,4.2rem)}
.apt-group__head{margin-bottom:clamp(.2rem,1vw,.6rem);max-width:60ch}
.apt-group__place{font-family:'Melodrama';font-weight:400;font-size:clamp(1.6rem,3.6vw,2.3rem);margin:0;letter-spacing:.01em;display:flex;align-items:center;gap:.6rem}
.apt-group__place .i-pin{width:clamp(20px,3vw,28px);height:auto;color:var(--gold);flex:0 0 auto}
.apt-group__note{color:color-mix(in oklab,var(--paper-hi) 80%,var(--stone));font-size:.98rem;line-height:1.55;margin:.55rem 0 0;max-width:52ch}
.apt__place{display:inline-flex;align-items:center;gap:.4rem;font-family:'Switzer';font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--gold);margin:0}
.apt__place .i-pin{width:.95em;height:.95em;flex:0 0 auto}
.apt__rule{display:block;width:38px;height:2px;background:var(--gold);opacity:.9;margin:.15rem 0}
/* ---------- Locator maps (Suites + Envolvente country map, Contact local map) ---------- */
.apt-group__head--locator{max-width:none;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.locator-section{max-width:1080px;margin:0 auto;padding:clamp(1rem,3vw,2rem) clamp(1.25rem,5vw,3rem) clamp(3rem,7vw,5rem)}
/* default: cream-on-deep, for the immersive grounds. --lc-* tokens flip in --light. */
.locator{--lc-ink:var(--paper-hi);--lc-line:color-mix(in oklab,var(--paper-hi) 34%,transparent);--lc-land:color-mix(in oklab,var(--paper-hi) 7%,transparent);
  margin:0;display:grid;gap:clamp(1.5rem,4vw,2.4rem);align-items:center;padding:clamp(1.6rem,4vw,2.6rem);border:1px solid color-mix(in oklab,var(--paper-hi) 13%,transparent);background:color-mix(in oklab,var(--page) 84%,#000);box-shadow:0 34px 64px -40px rgba(0,0,0,.6)}
@media(min-width:620px){.locator{grid-template-columns:auto 1fr;column-gap:clamp(2rem,5vw,3.6rem)}}
.locator__map{display:flex;justify-content:center}
.ptmap{width:clamp(150px,30vw,196px);height:auto;display:block;overflow:hidden}
.ptmap--local{width:clamp(210px,48vw,300px)}
.locator__cap{max-width:46ch}
.locator__eyebrow{color:color-mix(in oklab,var(--gold) 62%,var(--lc-ink));margin-bottom:.85rem}
.locator__place{font-family:'Melodrama';font-weight:400;font-size:clamp(1.5rem,3.3vw,2.1rem);line-height:1.12;margin:0;letter-spacing:.01em;display:flex;align-items:center;gap:.55rem;color:var(--lc-ink)}
.locator__place .i-pin{width:clamp(18px,2.6vw,23px);height:auto;color:var(--gold);flex:0 0 auto}
.locator__note{color:color-mix(in oklab,var(--lc-ink) 80%,var(--stone));font-size:1rem;line-height:1.6;margin:.7rem 0 0;max-width:48ch}
/* colour-keyed legend — the map dots, in legible HTML */
.locator__legend{list-style:none;margin:1.15rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.locator__legend li{display:flex;align-items:baseline;gap:.6rem;font-family:'Switzer';font-size:.92rem;line-height:1.4;color:color-mix(in oklab,var(--lc-ink) 88%,var(--stone))}
.locator__key{flex:0 0 auto;width:10px;height:10px;border-radius:50%;transform:translateY(1px)}
.locator__key--home,.locator__key--city{background:var(--lc-ink)}
.locator__key--dest{background:var(--gold);box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 28%,transparent)}
.locator__key--wine{background:var(--wine-key,#b06a4e)}
.locator__key--bridge{width:13px;height:3px;border-radius:1px;background:color-mix(in oklab,var(--lc-ink) 62%,transparent);transform:translateY(4px)}
.locator__key-txt em{font-style:normal;color:color-mix(in oklab,var(--lc-ink) 66%,var(--stone))}
.locator__key-txt em::before{content:"·";margin:0 .35em;opacity:.7}
/* svg innards — colours via --lc-* so one component serves both grounds */
.ptmap__land{fill:var(--lc-land);stroke:var(--lc-line);stroke-width:1;stroke-linejoin:round}
.ptmap__route{fill:none;stroke:var(--gold);stroke-width:1;opacity:.5;stroke-linecap:round;stroke-dasharray:1.5 4}
.ptmap__dot{fill:var(--lc-ink)}
.ptmap__dot--wine{fill:var(--wine-key,#b06a4e)}
.ptmap__pin{fill:var(--gold)}
.ptmap__pulse{fill:none;stroke:var(--gold);stroke-width:1.4;animation:ptPulse 2.6s var(--ease-out-quart) infinite}
@keyframes ptPulse{0%,100%{r:6.5px;opacity:.85}50%{r:10px;opacity:.1}}
@media(prefers-reduced-motion:reduce){.ptmap__pulse{animation:none;opacity:.5}}
/* light variant — Contact page (dark ink on the light doc ground) */
.locator--light{--lc-ink:var(--ink);--lc-line:color-mix(in oklab,var(--ink) 30%,transparent);--lc-land:color-mix(in oklab,var(--ink) 6%,transparent);--wine-key:var(--wine);
  border-color:color-mix(in oklab,var(--ink) 12%,transparent);background:var(--paper-hi);box-shadow:0 26px 54px -38px rgba(34,20,10,.4)}
.locator--light .locator__eyebrow{color:var(--doc-accent,#7a6534)}
.locator--light .locator__key--dest{box-shadow:0 0 0 3px color-mix(in oklab,var(--gold) 34%,transparent)}
.locator--light{padding:clamp(1.9rem,4.5vw,3rem)}
.locator--light .locator__note{margin-top:.85rem}
.locator--light .locator__legend{margin-top:1.4rem}
/* stacked variant (Contact): big map on top, roomy caption below (not a cramped side column) */
.locator--stack{display:block}
.locator--stack .locator__map{margin:0 0 clamp(1.5rem,4vw,2.2rem)}
.locator--stack .ptmap--local{width:100%;max-width:none;background:color-mix(in oklab,var(--ink) 3%,var(--paper-hi));border:1px solid color-mix(in oklab,var(--ink) 10%,transparent)}
.locator--stack .locator__cap{max-width:none}
.locator--stack .locator__place{font-size:clamp(1.7rem,3.6vw,2.3rem)}
.locator--stack .locator__note{max-width:64ch}
.locator--stack .locator__legend{flex-flow:row wrap;gap:.7rem 1.9rem;margin-top:1.4rem}
.locator--stack .locator__legend li{gap:.55rem}

/* Monsanto apartment: the map is BOUND into the block — one enclosed unit under a
   shared header (header → map strip → the Casa dos Sequeiras card), so it never reads
   as a standalone panel sitting next to the card. */
.apt-group--monsanto{margin-top:clamp(3.5rem,7vw,5.5rem)}
.apt-monsanto{border:1px solid color-mix(in oklab,var(--paper-hi) 15%,transparent);background:color-mix(in oklab,var(--page) 88%,#000);padding:clamp(1.6rem,4.5vw,3rem)}
.apt-monsanto__head{max-width:62ch}
.apt-monsanto__head .apt-group__place{color:var(--paper-hi)}
.apt-monsanto__body{margin-top:clamp(1.8rem,4vw,2.6rem);display:flex;flex-direction:column;gap:clamp(2rem,4.5vw,3rem)}
.apt-monsanto__map{padding-bottom:clamp(1.8rem,4vw,2.6rem);border-bottom:1px solid color-mix(in oklab,var(--paper-hi) 12%,transparent)}
.mapfig{--lc-ink:var(--paper-hi);--lc-line:color-mix(in oklab,var(--paper-hi) 34%,transparent);--lc-land:color-mix(in oklab,var(--paper-hi) 7%,transparent);display:grid;gap:clamp(1.2rem,3.5vw,2.2rem);align-items:center}
@media(min-width:560px){.mapfig{grid-template-columns:auto 1fr;max-width:560px}}
.mapfig .ptmap{width:clamp(118px,26vw,168px)}
.mapfig .locator__legend{margin:0}
.apt-list--bound .apt{padding:0;border-top:0}
.apt__media{display:flex;flex-direction:column;gap:clamp(.5rem,1.2vw,.72rem);align-self:start}
.apt__cover{display:block;aspect-ratio:4/3;overflow:hidden;cursor:zoom-in;background:color-mix(in oklab,var(--paper-hi) 8%,transparent)}
.apt__cover img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out-quart)}
@media(hover:hover){.apt__cover:hover img{transform:scale(1.045)}}
.apt__media .glx[hidden]{display:none}
.apt__thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.5rem,1.2vw,.72rem)}
.apt__thumb{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;cursor:zoom-in;background:color-mix(in oklab,var(--paper-hi) 8%,transparent)}
.apt__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out-quart)}
@media(hover:hover){.apt__thumb:hover img{transform:scale(1.06)}}
.apt__more{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--ink) 52%,transparent);color:var(--paper-hi);font-family:'Switzer';font-weight:600;font-size:clamp(1rem,2.4vw,1.25rem);letter-spacing:.02em}
.apt__count{position:absolute;bottom:.75rem;right:.75rem;display:inline-flex;align-items:center;gap:.4rem;background:color-mix(in oklab,var(--ink) 62%,transparent);color:var(--paper-hi);font-family:'Switzer';font-weight:600;font-size:.72rem;letter-spacing:.04em;padding:.34rem .66rem;border-radius:100px;pointer-events:none}
.apt__count svg{width:1.05em;height:1.05em;fill:currentColor}
.apt__info{display:flex;flex-direction:column;gap:1.1rem;min-width:0}
.apt__head{display:flex;flex-direction:column;gap:.45rem}
.apt__name{font-family:'Melodrama';font-weight:400;font-size:clamp(1.5rem,3.2vw,2rem);margin:0;color:var(--paper-hi);line-height:1.08}
.apt__meta{font-family:'Switzer';font-weight:600;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:color-mix(in oklab,var(--paper-hi) 72%,var(--stone));margin:0}
.apt__layout{font-size:.9rem;color:color-mix(in oklab,var(--paper-hi) 72%,var(--stone));margin:0}
.apt__body{display:flex;flex-direction:column;gap:1.1rem;align-items:flex-start}
.apt__desc{color:color-mix(in oklab,var(--paper-hi) 80%,var(--stone));font-size:.96rem;line-height:1.62;margin:0;max-width:62ch}
.apt__amenities{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.apt__amenities li{font-size:.72rem;letter-spacing:.03em;color:color-mix(in oklab,var(--paper-hi) 78%,var(--stone));border:1px solid color-mix(in oklab,var(--paper-hi) 22%,transparent);border-radius:100px;padding:.32rem .8rem}
.apt__cta{margin-top:.3rem}
@media(min-width:760px){
  .apt{grid-template-columns:1fr 1fr;column-gap:clamp(2.2rem,5vw,4rem);align-items:start}
  .apt:nth-child(even) .apt__media{order:2}
}

/* gastronomia photo gallery (reuses the .suite-gallery grid + shared lightbox) */
.gastro-gallery{max-width:1240px;margin:0 auto;padding:clamp(.5rem,2vw,1.5rem) clamp(1.25rem,5vw,3rem) clamp(3.5rem,8vw,5.5rem)}
.gastro-gallery__head{max-width:56ch;margin-bottom:clamp(1.2rem,3.5vw,2rem)}
.gastro-gallery__head .kicker{color:color-mix(in oklab,var(--gold) 58%,var(--paper-hi));margin-bottom:.85rem}
.gastro-gallery__head h2{font-family:'Melodrama';font-weight:400;font-size:clamp(1.8rem,4.5vw,2.6rem);margin:0 0 .8rem;letter-spacing:.01em}
.gastro-gallery__head p{color:color-mix(in oklab,var(--paper-hi) 80%,var(--stone));font-size:1.02rem;line-height:1.6;margin:0;max-width:58ch}
.gastro-gallery .suite-gallery{margin:0}

/* ---------- next-section CTA (themed to the destination section) ----------
   A vivid full-colour destination photo washed in the section's --theme hue (deep at
   top & bottom for legibility, translucent mid so the image reads), a gold threshold
   hairline, an outlined CTA pill, and the OVERSIZED uppercase verb sitting UP off the
   bottom with a full-width gold hairline cutting through its base. Verb is FIXED — only
   the photo (zoom/brighten) and the pill react on hover. */
.next-section{position:relative;display:block;min-height:clamp(300px,38vw,460px);margin-top:0;overflow:hidden;text-decoration:none;background:var(--theme-deep);isolation:isolate}
/* gold threshold hairline — a refined divider between the page above and the bridge */
.next-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;z-index:3;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--gold) 62%,transparent) 24%,color-mix(in oklab,var(--gold) 62%,transparent) 76%,transparent)}
.next-section__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.64;transform-origin:center;transition:transform 1.2s var(--ease-out-quart),opacity 1.2s var(--ease-out-quart);z-index:-2}
/* theme-colour wash — deep at top, lighter mid so the photo reads, deep again over the lower verb band.
   First layer = a light uniform tint of the destination page's --page ground (subtle wayfinding cue). */
.next-section::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(color-mix(in oklab,var(--page) 15%,transparent),color-mix(in oklab,var(--page) 15%,transparent)),linear-gradient(180deg,color-mix(in oklab,var(--theme-deep) 72%,transparent) 0%,color-mix(in oklab,var(--theme-deep) 26%,transparent) 22%,color-mix(in oklab,var(--theme) 12%,transparent) 42%,color-mix(in oklab,var(--theme-deep) 42%,transparent) 60%,color-mix(in oklab,var(--theme-deep) 72%,transparent) 82%,color-mix(in oklab,var(--theme-deep) 84%,transparent) 100%)}
.next-section__inner{position:relative;max-width:1240px;margin:0 auto;min-height:inherit;padding:clamp(2.4rem,5vw,3.4rem) clamp(1.25rem,5vw,3rem) 0;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;color:var(--paper-hi)}
.next-section .kicker{position:relative;z-index:2;color:var(--gold)}
/* CUT, not cross: the verb lives in a full-bleed clip window whose bottom border IS the gold line.
   overflow:hidden hides everything below that border, so nothing of the title shows beneath the line. */
.next-section__cut{position:absolute;z-index:1;left:50%;transform:translateX(-50%);width:100vw;bottom:clamp(2.6rem,8vw,4.6rem);height:clamp(3.6rem,15.5vw,11.5rem);overflow:hidden;pointer-events:none}
/* the cut line — inset from the edges (shorter than full-bleed), centred at the clip edge */
.next-section__cut::after{content:'';position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(90vw,1240px);height:2px;background:color-mix(in oklab,var(--gold) 64%,var(--paper-hi))}
.next-section__verb{position:absolute;left:50%;bottom:-.2em;transform:translateX(-50%);margin:0;width:max-content;max-width:none;font-family:'Melodrama';font-weight:400;text-transform:uppercase;font-size:clamp(3rem,16vw,13rem);line-height:.82;letter-spacing:.06em;white-space:nowrap;pointer-events:none;color:var(--paper-hi);text-shadow:0 1px 3px color-mix(in oklab,var(--theme-deep) 60%,transparent),0 2px 40px color-mix(in oklab,var(--theme-deep) 82%,transparent)}
.next-section__go{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.55rem;font-family:'Switzer';font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.74rem;margin-top:.7rem;padding:.7rem 1.15rem;border:1px solid color-mix(in oklab,var(--gold) 52%,transparent);color:var(--paper-hi);transition:background .45s var(--ease-out-quart),border-color .45s var(--ease-out-quart),color .45s var(--ease-out-quart)}
.next-section__go .i-arrow{width:1.35em;height:1.35em;fill:currentColor;transition:transform .5s var(--ease-out-quart)}
@media(hover:hover){
  .next-section:hover .next-section__img{transform:scale(1.06);opacity:.74}
  .next-section:hover .next-section__go{background:var(--gold);border-color:transparent;color:#241708}
  .next-section:hover .next-section__go .i-arrow{transform:translateX(6px)}
}

/* ---------- suite detail ---------- */
/* padding-block, NOT the padding shorthand: this element is also a .container, and
   `padding: <top> 0 <bottom>` set the inline padding to 0, wiping the container's gutter and
   leaving the whole suite-detail page's text flush against both screen edges on mobile. */
.suite-detail{padding-block:clamp(6.5rem,15vw,8rem) clamp(3rem,7vw,4.5rem)}
.suite-detail__head{max-width:70ch;margin-bottom:clamp(2rem,5vw,3rem)}
.suite-detail__type{font-family:'Switzer';font-weight:600;letter-spacing:.22em;text-transform:uppercase;font-size:.7rem;color:var(--gild)}
.suite-detail__head h1{font-family:'Melodrama';font-weight:400;font-size:clamp(2rem,4.5vw,2.9rem);margin:.4rem 0}
.suite-detail__meta{display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.9rem;color:var(--muted);margin:.8rem 0 1.4rem}
.suite-detail__desc{font-size:1.05rem;color:var(--ink);max-width:65ch}

.suite-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:clamp(2rem,5vw,3rem) 0}
.suite-gallery a{display:block;aspect-ratio:4/3;overflow:hidden;cursor:zoom-in}
.suite-gallery img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.suite-gallery a:hover img{transform:scale(1.04)}
.suite-gallery a:first-child{grid-column:span 2;aspect-ratio:16/9}
@media(min-width:640px){.suite-gallery{grid-template-columns:repeat(3,1fr)}.suite-gallery a:first-child{grid-column:span 3}}

/* ---------- gallery lightbox (suite detail + apartments) ---------- */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;padding:clamp(1.1rem,3vh,2.1rem) 0 clamp(.5rem,1.5vh,1rem);opacity:0;visibility:hidden;transition:opacity .35s var(--ease-out-quart),visibility .35s var(--ease-out-quart)}
.lightbox.open{opacity:1;visibility:visible}
/* warm frosted backdrop — the coloured page glows through the blur, never black */
.lightbox__backdrop{position:absolute;inset:0;background:color-mix(in oklab,var(--page) 95%,transparent);backdrop-filter:blur(16px) saturate(1.05);-webkit-backdrop-filter:blur(16px) saturate(1.05);cursor:zoom-out}
/* page/room title at the top */
.lightbox__eyebrow{position:relative;z-index:2;flex:0 0 auto;font-family:'Switzer';font-weight:600;text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;color:color-mix(in oklab,var(--gold) 62%,var(--paper-hi));text-align:center;padding:0 4.5rem;margin-bottom:.5rem;filter:drop-shadow(0 1px 8px rgba(20,16,12,.55))}
.lightbox__title{position:relative;z-index:2;flex:0 0 auto;font-family:'Melodrama',Georgia,serif;font-weight:400;font-size:clamp(1.4rem,2.9vw,2.2rem);letter-spacing:.01em;color:var(--paper-hi);text-align:center;padding:0 4.5rem;filter:drop-shadow(0 2px 12px rgba(20,16,12,.5))}
/* image fills the stage between title and strip; generous margin below it */
/* Mobile has no arrows (they're desktop-only below), so the padding they reserved goes back to
   the photo; desktop restores it so the arrows have room and never sit on the image. */
.lightbox__stage{position:relative;z-index:1;flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:clamp(1rem,3vh,2rem) 1rem clamp(1.8rem,5vh,3.4rem);overflow:hidden;touch-action:pan-y}
@media(min-width:768px){.lightbox__stage{padding-inline:clamp(3.5rem,8vw,7.5rem)}}
/* Carousel track: photos sit side by side and slide, rather than the src being swapped under a
   single <img>. transform only — per the hard rule. */
.lightbox__track{display:flex;height:100%;width:100%;will-change:transform;transition:transform .5s var(--ease-out-quart)}
/* padding-inline is the gutter between photos while dragging — border-box keeps the slide exactly
   100% wide, so the translate math stays whole percentages. */
.lightbox__slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;padding-inline:clamp(.4rem,2vw,1rem)}
.lightbox__img{max-width:min(1150px,100%);max-height:100%;object-fit:contain;box-shadow:0 40px 90px -35px rgba(20,16,12,.8);transform:scale(.985);transition:transform .4s var(--ease-out-quart)}
.lightbox.open .lightbox__img{transform:scale(1)}
/* controls: borderless, big Phosphor arrows (thin) + the menu's X */
.lightbox__btn{position:absolute;z-index:2;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--paper-hi);cursor:pointer;opacity:.85;filter:drop-shadow(0 2px 10px rgba(20,16,12,.5));transition:opacity .3s var(--ease-out-quart),transform .35s var(--ease-out-quart)}
.lightbox__btn svg{width:100%;height:100%}
@media(hover:hover){.lightbox__btn:hover{opacity:1}}
.lightbox__close{top:clamp(1rem,3vw,1.9rem);right:clamp(1rem,3.5vw,2.1rem);width:clamp(30px,3.2vw,44px);height:clamp(30px,3.2vw,44px)}
.lightbox__count{position:absolute;z-index:2;top:clamp(1.05rem,3vw,2rem);left:clamp(1.2rem,4vw,2.4rem);font-family:'Switzer';font-weight:600;font-size:.76rem;letter-spacing:.18em;color:color-mix(in oklab,var(--paper-hi) 88%,var(--stone));filter:drop-shadow(0 1px 6px rgba(20,16,12,.5))}
/* filmstrip / thumbnail strip */
/* Arrows are DESKTOP ONLY (client, 2026-07-15): on touch the photo is dragged with a finger, so
   the arrows are dead weight over the image. Desktop has no finger, so it keeps them — the
   thumbnails and arrow keys work in both. */
.lightbox__prev,.lightbox__next{display:none}
@media(min-width:768px){
  .lightbox__prev,.lightbox__next{display:flex;top:calc(50% - clamp(.4rem,3vh,1.6rem));transform:translateY(-50%);width:clamp(46px,6vw,86px);height:clamp(46px,6vw,86px)}
  .lightbox__prev{left:clamp(.2rem,1.6vw,1.8rem)}
  .lightbox__next{right:clamp(.2rem,1.6vw,1.8rem)}
}
@media(min-width:768px) and (hover:hover){.lightbox__prev:hover{transform:translateY(-50%) translateX(-5px)}.lightbox__next:hover{transform:translateY(-50%) translateX(5px)}}
.lightbox__strip{position:relative;z-index:2;flex:0 0 auto;display:flex;gap:.5rem;max-width:min(1400px,95vw);overflow-x:auto;padding:.15rem;scrollbar-width:none;scroll-behavior:smooth}
.lightbox__strip::-webkit-scrollbar{display:none}
.lightbox__thumb{flex:0 0 auto;width:clamp(76px,9.5vw,128px);height:clamp(54px,6.5vw,84px);padding:0;border:0;background:none;cursor:pointer;overflow:hidden;opacity:.5;transition:opacity .3s var(--ease-out-quart)}
.lightbox__thumb img{width:100%;height:100%;object-fit:cover;display:block}
@media(hover:hover){.lightbox__thumb:hover{opacity:.8}}
.lightbox__thumb.is-active{opacity:1;outline:2px solid var(--gold);outline-offset:-2px}
@media(prefers-reduced-motion:reduce){.lightbox,.lightbox__img,.lightbox__btn,.lightbox__strip{transition:none}.lightbox__img{transform:none}}

.suite-amenities{margin:clamp(1.5rem,4vw,2.5rem) 0}
.suite-amenities h2{font-family:'Melodrama';font-weight:400;font-size:1.4rem;margin:0 0 1rem}
.suite-amenities ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.5rem}
@media(min-width:640px){.suite-amenities ul{grid-template-columns:repeat(3,1fr)}}
.suite-amenities li{font-size:1rem;color:var(--muted);padding-left:1.1rem;position:relative}
.suite-amenities li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;background:var(--gold)}

.suite-detail__cta{margin-top:clamp(2rem,5vw,3rem);display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem}
.suite-detail__cta .note{font-size:.85rem;color:var(--muted)}

/* Same pseudo hit-area trick: min-height here would add 22px of blank space under the back link
   and push the whole suite header down. */
.suite-back{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--muted);margin-bottom:1.5rem;position:relative}
.suite-back::before{content:'';position:absolute;inset:-11px -4px}
.suite-back:hover{color:var(--ink)}

/* ---------- home (intro / cover / hub — full-screen portal experience) ---------- */
/* Lifted verbatim from the approved design/portal.html draft. Scoped under
   body.home so it never leaks onto the scrollable interior pages above. */
body.home{height:100svh;overflow:hidden;background:var(--ink);color:var(--paper-hi)}
body.home .top{background:none;opacity:0;pointer-events:none}
body.home .top.show{opacity:1;pointer-events:auto}
body.home .top .burger,body.home .top .rbtn{opacity:0;pointer-events:none;transition:opacity .4s}
body.home.hub-active .top .burger,body.home.hub-active .top .rbtn{opacity:1;pointer-events:auto}

.layers{position:absolute;inset:0;overflow:hidden;background:var(--ink)}
.layer{position:absolute;inset:0;opacity:0;transition:opacity 2s cubic-bezier(.4,0,.2,1)}
.layer.on{opacity:1}
.layer img{width:100%;height:100%;object-fit:cover}
#hublayers .layer{transition:opacity 1.3s cubic-bezier(.4,0,.2,1),transform 1.3s cubic-bezier(.4,0,.2,1);transform:scale(1.035)}
#hublayers .layer.on{transform:scale(1)}
.scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,16,12,.5) 0,rgba(20,16,12,.12) 34%,rgba(20,16,12,.75))}

.intro{position:fixed;inset:0;z-index:130;background:var(--intro);display:flex;align-items:center;justify-content:center;transition:transform 1.15s cubic-bezier(.76,0,.24,1)}
.intro img{width:clamp(210px,32vw,350px);animation:logoin 1.4s .2s both cubic-bezier(.2,.7,.2,1)}
@keyframes logoin{from{opacity:0;transform:translateY(12px) scale(.97);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
.intro.up{transform:translateY(-100%)}

.screen{position:fixed;inset:0;height:100svh;overflow:hidden;transition:transform 1.2s cubic-bezier(.76,0,.24,1),opacity 1.2s cubic-bezier(.76,0,.24,1)}
#cover{z-index:2}
#cover.leave{transform:translateY(-6%);opacity:0;pointer-events:none}
#hub{transform:translateY(100%);z-index:3}
#hub.on{transform:translateY(0)}

.coverfoot{position:absolute;left:0;right:0;bottom:clamp(2.4rem,7vw,4.4rem);z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(1.5rem,4vw,2.2rem);padding:0 1.25rem}
.coverfoot h1{font-family:'Melodrama';font-weight:500;font-size:clamp(2.9rem,8.2vw,6.8rem);line-height:1.02;margin:0;letter-spacing:.005em;text-wrap:balance;text-shadow:0 1px 3px rgba(20,16,12,.4),0 2px 40px rgba(20,16,12,.5)}
.coverfoot .divider{display:flex;align-items:center;gap:.9rem;width:clamp(130px,24vw,210px)}
.coverfoot .divider span{flex:1;height:1px;background:color-mix(in oklab,var(--paper-hi) 45%,transparent)}
.coverfoot .divider i{width:5px;height:5px;border-radius:50%;background:var(--gold);flex-shrink:0}
.enterwrap{display:flex;flex-direction:column;align-items:center;gap:1rem}
.enterwrap .k{color:color-mix(in oklab,var(--paper-hi) 82%,var(--gold));font-size:.62rem;letter-spacing:.3em}
.enterbtn{background:none;border:1px solid color-mix(in oklab,var(--paper-hi) 55%,transparent);color:var(--paper-hi);font-family:'Switzer';font-weight:600;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;padding:1rem 2.6rem;cursor:pointer;transition:background .4s,color .4s,letter-spacing .4s}
.enterbtn:hover{background:var(--paper-hi);color:var(--ink);letter-spacing:.34em}
/* single line, never wraps — font scales with viewport so the ~57-char line fits the narrowest phone without overflow */
.coverfoot .cover__tag{font-family:'Melodrama';font-weight:400;font-style:italic;font-size:clamp(.62rem,3vw,1.55rem);line-height:1.38;color:color-mix(in oklab,var(--paper-hi) 92%,var(--stone));margin:-.4rem auto 0;max-width:none;white-space:nowrap;text-shadow:0 1px 24px rgba(20,16,12,.55)}
.vt-nav .cover__tag{animation:none}

#hub .scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,16,12,.58) 0%,rgba(20,16,12,.42) 28%,rgba(20,16,12,.48) 55%,rgba(20,16,12,.58) 75%,rgba(20,16,12,.76) 100%)}
.hub{position:absolute;left:0;right:0;bottom:clamp(2rem,5vw,3.4rem);z-index:2;display:flex;flex-direction:column;align-items:center}
.hub .hubline{align-self:stretch;height:1.5px;border:0;margin:0 0 clamp(1.4rem,3.6vw,2rem);background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--paper-hi) 88%,transparent) 50%,transparent)}
.hub .realms{margin-bottom:clamp(2.4rem,6vw,3.4rem)}
/* Realms always stay on ONE line (never wrap). Mobile: the row overflows the
   viewport and scrolls horizontally, unselected names running off the edges
   (JS centres the active one). Desktop: fits and is centred. */
/* padding-inline:50% is the run-off the scroller needs at both ends: without it
   it hits its travel limit before the FIRST and LAST realms (Repousar/Explorar)
   reach the centre, so they stick to the edges while the middle two centre fine.
   50% always suffices — centring item n needs (viewport - width(n))/2, never more
   than half. Must be padding, NOT ::before/::after flex spacers: Firefox lays the
   spacers out but leaves the trailing one out of scrollWidth, losing half a
   viewport of travel (verified chromium/firefox/webkit). Desktop resets it to 0. */
.realms{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:baseline;gap:.1rem;width:100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;padding-inline:50%}
.realms::-webkit-scrollbar{display:none}
.realms a{flex:0 0 auto;white-space:nowrap;font-family:'Melodrama';font-weight:400;font-size:clamp(1.7rem,5.6vw,3.8rem);text-transform:uppercase;letter-spacing:.12em;text-decoration:none;color:color-mix(in oklab,var(--paper-hi) 52%,transparent);padding:0 clamp(.5rem,1.7vw,1.15rem);transition:color .4s;cursor:pointer}
.realms a:hover,.realms a.active{color:var(--paper-hi)}
.realms .sep{flex:0 0 auto;color:var(--paper-hi);opacity:1;align-self:center;font-size:clamp(1.7rem,4.4vw,2.6rem)}
/* Desktop: all four realms must ALWAYS fit — size proportional to viewport width
   (vw) so the row is a fixed fraction of the width and never overflows; the rem
   caps only ever shrink it on very wide screens (still fits). Spacing around the
   dots is a single uniform flex gap (equal on both sides); the negative end-margin
   cancels the trailing letter-spacing so the word→dot gap matches the dot→word gap. */
@media(min-width:768px){
  .realms{justify-content:center;padding-inline:0;overflow-x:visible;gap:clamp(.55rem,1.7vw,1.25rem)}
  .realms a{font-size:min(3.5vw,4.2rem);padding-inline:0;letter-spacing:.26em}
  .realms .sep{font-size:min(2.9vw,3.4rem)}
  /* sit the hub cluster (line + realms + button) a little lower on desktop, and
     bring the hairline down closer to the nav. */
  .hub{bottom:clamp(1.3rem,2.6vw,2.2rem)}
  .hub .hubline{margin-bottom:clamp(.9rem,2.2vw,1.3rem)}
}
.realmbtn{font-family:'Switzer';font-weight:600;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--paper-hi);background:none;border:1px solid color-mix(in oklab,var(--paper-hi) 55%,transparent);padding:1rem 2.2rem;display:inline-flex;align-items:center;gap:.5rem;opacity:1;transition:background .35s,color .35s,border-color .35s,opacity .5s cubic-bezier(.4,0,.2,1)}
.realmbtn:hover{background:var(--paper-hi);color:var(--ink);border-color:var(--paper-hi)}
.realmbtn.fade{opacity:0}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--paper-hi);padding:clamp(3rem,7vw,4.5rem) 0 1.5rem}
.footer__top{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-bottom:2.5rem}
@media(min-width:768px){.footer__top{grid-template-columns:1.3fr 1fr 1fr}}
.footer__brand img{height:44px;width:auto}
.footer__tagline{color:var(--stone);font-size:.9rem;max-width:34ch;margin-top:1rem}
.footer__col h3{font-family:'Switzer';font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--stone);margin:0 0 1rem}
.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.footer__col a{text-decoration:none;color:color-mix(in oklab,var(--paper-hi) 88%,transparent);font-size:.92rem}
.footer__col a:hover{color:var(--gold)}
.footer-address{font-style:normal}
.footer__bottom{border-top:1px solid color-mix(in oklab,var(--paper-hi) 16%,transparent);padding-top:1.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.8rem;color:var(--stone)}
.footer__legal{display:flex;flex-wrap:wrap;gap:1.2rem}
.footer__legal a{text-decoration:none;color:var(--stone)}
.footer__legal a:hover{color:var(--gold)}

/* ---------- slim legal strip (replaces the full footer on section pages) ----------
   Follows the dark next-section bridge and caps the page; keeps the mandatory PT
   legal links (AL numbers, Livro de Reclamacoes, privacy) without a heavy footer. */
.legal-strip{background:var(--ink);color:var(--stone);padding:clamp(.85rem,2vw,1.15rem) 0}
.legal-strip__in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.7rem 1.6rem;font-size:.78rem;line-height:1.5}
.legal-strip__meta{margin:0;letter-spacing:.02em;color:color-mix(in oklab,var(--stone) 90%,transparent)}
.legal-strip__links{display:flex;flex-wrap:wrap;gap:1rem 1.4rem}
.legal-strip__links a{text-decoration:none;color:var(--stone);transition:color .3s var(--ease-out-quart)}
.legal-strip__links a:hover{color:var(--gold)}

/* ========================================================================
   IMMERSIVE — whole-page colour treatment for the section pages (2026-07-12)
   Each themed section commits its whole ground to a rich deep tone of its
   own colour; text flips to cream, copy sits on a slightly-lighter panel,
   photos glow, hairlines/metal go gold. Applied via `immersive` on the body
   alongside a theme-* class, so every section is its own deep colour-world
   (wine / amber / gold / olive). NOTE: extends the approved cream palette —
   pending client sign-off (see design-decisions.md §7).
   ======================================================================== */
body.immersive{
  /* lift the ground by mixing the deep tone with its own mid tone (not black):
     raises lightness AND chroma so the section hue reads clearly. Weighted toward
     the mid tone so the grounds stay clearly coloured but not heavy/dark. */
  --page:color-mix(in oklab,var(--theme-deep) 40%,var(--theme));
  color:var(--paper-hi);
  /* hairline cluster goes light-on-dark for the deep grounds */
  --bg-line:color-mix(in oklab,var(--paper-hi) 10%,transparent);
}
/* lede: drop the light band, cream statement, gold rule */
body.immersive .lede{background:none;border-color:color-mix(in oklab,var(--paper-hi) 16%,transparent)}
body.immersive .lede p{color:var(--paper-hi)}
body.immersive .lede__in::before{background:var(--gold)}
body.immersive .lede .kicker{color:var(--gold)}
/* suite spreads: darker panel, cream/gold text */
body.immersive .suite__panel{background:color-mix(in oklab,var(--page) 82%,#000);box-shadow:0 34px 64px -34px rgba(0,0,0,.65)}
body.immersive .suite__kicker{color:color-mix(in oklab,var(--gold) 58%,var(--paper-hi))}
body.immersive .suite__name{color:var(--paper-hi)}
body.immersive .suite__rule{background:var(--gold)}
body.immersive .suite__meta{color:color-mix(in oklab,var(--paper-hi) 72%,var(--stone))}
body.immersive .suite__desc{color:color-mix(in oklab,var(--paper-hi) 80%,var(--stone))}
body.immersive .suite__link{color:var(--paper-hi)}
@media(hover:hover){body.immersive .suite__link:hover,body.immersive .suite:hover .suite__link{color:var(--gold)}}
/* feature spreads (gastronomia / eventos / envolvente) */
body.immersive .feature__panel{background:color-mix(in oklab,var(--page) 82%,#000);box-shadow:0 34px 64px -34px rgba(0,0,0,.65)}
body.immersive .feature__name{color:var(--paper-hi)}
body.immersive .feature__kicker{color:color-mix(in oklab,var(--gold) 58%,var(--paper-hi))}
body.immersive .feature__rule{background:var(--gold)}
body.immersive .feature__meta{color:color-mix(in oklab,var(--gold) 58%,var(--paper-hi))}
body.immersive .feature__desc,body.immersive .feature__list li{color:color-mix(in oklab,var(--paper-hi) 80%,var(--stone))}
body.immersive .feature__list-title{color:var(--gold)}
/* page-level CTA (eventos enquiry): cream copy + light ghost button */
body.immersive .page-cta p{color:var(--paper-hi)}
body.immersive .ghostbtn{color:var(--paper-hi);border-color:color-mix(in oklab,var(--paper-hi) 55%,transparent)}
@media(hover:hover){body.immersive .ghostbtn:hover{background:var(--paper-hi);color:var(--ink);border-color:var(--paper-hi)}}
/* One continuous ground: the hero caption bar (plinth) and the apartments band
   drop their own deep --theme-deep tone and join the page ground, so the whole
   page reads as a single colour. Only the suite/feature PANELS stay a darker
   "card" tone floating on top. Veil bottom-stop must fade to --page too, or a
   dark seam appears at the image/plinth boundary. */
body.immersive .hero{background:var(--page)}
body.immersive .hero__plinth{background:var(--page)}
body.immersive .apartments{background-color:transparent;background-image:none}
/* gold labels lift toward cream on the lighter ground (matches the section kickers) */
body.immersive .apartments__head .kicker,body.immersive .apt__place{color:color-mix(in oklab,var(--gold) 60%,var(--paper-hi))}
/* suite DETAIL page — all suites live in the wine/dormir band, so its detail page
   joins the same deep colour-world (no more light-page jump from the Suites band).
   The layout hardcodes light tokens (--ink/--muted/--gild) that vanish on the deep
   ground; flip them to the proven cream/gold mixes. The gallery photos glow as-is. */
body.immersive .suite-back{color:color-mix(in oklab,var(--paper-hi) 62%,var(--stone))}
@media(hover:hover){body.immersive .suite-back:hover{color:var(--paper-hi)}}
body.immersive .suite-detail__type{color:color-mix(in oklab,var(--gold) 58%,var(--paper-hi))}
body.immersive .suite-detail__meta{color:color-mix(in oklab,var(--paper-hi) 72%,var(--stone))}
body.immersive .suite-detail__desc{color:color-mix(in oklab,var(--paper-hi) 84%,var(--stone))}
body.immersive .suite-amenities li{color:color-mix(in oklab,var(--paper-hi) 80%,var(--stone))}
body.immersive .suite-detail__cta .note{color:color-mix(in oklab,var(--paper-hi) 70%,var(--stone))}

/* ========================================================================
   Utility / legal pages — Contact, Privacy, Legal notice.
   No hero: a light readable ground (theme-tinted --page, non-immersive) with
   dark ink text. Top padding clears the fixed transparent header, whose text
   defaults to --ink here (legible on the light ground). Terminal pages: no
   marketing bridge.
   ======================================================================== */
.doc-main{padding:clamp(7rem,15vw,9.5rem) 0 clamp(4rem,10vw,7rem);min-height:72vh;
  /* darker accents for the light ground: raw --gild/--muted fail AA on --page */
  --doc-accent:color-mix(in oklab,var(--gild) 50%,var(--ink));
  --doc-sub:color-mix(in oklab,var(--ink) 40%,var(--muted))}
.doc-wrap{max-width:760px;margin:0 auto;padding:0 clamp(1.25rem,5vw,2rem)}
.doc-wrap--wide{max-width:1040px}
.doc-head{margin-bottom:clamp(2.4rem,6vw,3.6rem);padding-bottom:clamp(1.4rem,4vw,2.2rem);border-bottom:1px solid color-mix(in oklab,var(--ink) 15%,transparent)}
.doc-eyebrow{color:var(--doc-accent);margin-bottom:1rem}
.doc-title{font-weight:400;font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.04;margin:0;color:var(--ink);letter-spacing:.01em}
.doc-updated{font-family:'Switzer';font-size:.82rem;letter-spacing:.02em;color:var(--doc-accent);margin:1rem 0 0}
.doc-lede{color:var(--doc-sub);font-size:clamp(1.02rem,2vw,1.15rem);line-height:1.6;margin:1.1rem 0 0;max-width:56ch}
.doc-section{margin-top:clamp(1.9rem,4.5vw,2.7rem);max-width:64ch}
.doc-h{font-weight:400;font-size:clamp(1.3rem,3vw,1.75rem);margin:0 0 .85rem;color:var(--ink);letter-spacing:.01em}
.doc-section p{margin:0 0 .85rem;color:color-mix(in oklab,var(--ink) 86%,var(--muted));line-height:1.72}
.doc-section p:last-child{margin-bottom:0}
.doc-list{margin:.5rem 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.55rem}
.doc-list li{position:relative;padding-left:1.4rem;color:color-mix(in oklab,var(--ink) 86%,var(--muted));line-height:1.6}
.doc-list li::before{content:"";position:absolute;left:.15rem;top:.62em;width:6px;height:6px;background:var(--gold);transform:rotate(45deg)}
.doc-body a,.doc-lede a{color:var(--wine);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
@media(hover:hover){.doc-body a:hover,.doc-lede a:hover{color:var(--wine-deep)}}

/* Contact — light, compact page: header + channels/where details, then a full-width
   embedded Google map. Warm cream ground, dark ink text. */
/* no background here on purpose: the body's cream --page shows through, and with it the
   fixed body::before hairline cluster (an opaque ground would paint over the lines) */
.contact{--c-accent:color-mix(in oklab,var(--gild) 52%,var(--ink));--c-sub:color-mix(in oklab,var(--ink) 42%,var(--muted));color:var(--ink);min-height:100svh;padding:clamp(6.5rem,15vw,9rem) 0 clamp(4rem,10vw,6.5rem)}
.contact__wrap{max-width:1320px;margin:0 auto;padding-inline:clamp(1.25rem,5vw,3rem)}
.contact__head{margin-bottom:clamp(2.6rem,7vw,4.4rem);padding-bottom:clamp(1.8rem,4vw,2.6rem);border-bottom:1px solid color-mix(in oklab,var(--ink) 14%,transparent)}
.contact__eyebrow{display:block;color:var(--c-accent);margin-bottom:clamp(.9rem,2.4vw,1.3rem)}
.contact__title{font-family:'Melodrama';font-weight:500;font-size:clamp(2.4rem,7vw,4rem);line-height:1.02;margin:0;color:var(--ink);letter-spacing:.01em}
.contact__lede{margin:clamp(1rem,2.5vw,1.4rem) 0 0;color:var(--c-sub);font-size:clamp(1.05rem,2vw,1.2rem);line-height:1.6;max-width:56ch}
.contact__top{display:grid;gap:clamp(2.6rem,6vw,3.6rem);margin-bottom:clamp(2.8rem,6vw,4rem)}
@media(min-width:820px){.contact__top{grid-template-columns:1.15fr 1fr;column-gap:clamp(3rem,6vw,5rem);align-items:start}}
.contact__talk-eyebrow{display:block;color:var(--c-accent);margin-bottom:clamp(1.4rem,3.2vw,2rem)}
/* Switzer, not Melodrama: this is functional data (an address, an email) — the display
   serif's hairlines fall apart at this size and mangle glyphs like "n.º". */
.contact__addr{font-style:normal;margin:0;font-family:'Switzer';font-weight:500;font-size:clamp(1.05rem,1.7vw,1.18rem);line-height:1.65;color:var(--ink);max-width:42ch}
.contact__wherenote{margin:.9rem 0 0;color:var(--c-sub);line-height:1.6;max-width:44ch;font-size:.98rem}

/* channels — email / phone / whatsapp as roomy rows */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cchannels{list-style:none;margin:0;padding:0}
/* Channel icons — Phosphor Light (MIT), same family as the site's other i-* glyphs.
   FILLED, not stroked: Phosphor ships light/thin as outline shapes already converted to fills, so
   fill:none would render nothing. Sized in em so they track the value's fluid type, and held to
   .62 opacity so the wine value stays the subject rather than the icon. */
.i-ch{width:1.25em;height:1.25em;flex:none;margin-right:.7rem;fill:currentColor;opacity:.62;transition:opacity .35s var(--ease-out-quart)}
@media(hover:hover){.cchannel__value:hover .i-ch{opacity:1}}
.cchannel{padding:clamp(1.2rem,3vw,1.7rem) 0;border-top:1px solid color-mix(in oklab,var(--ink) 12%,transparent)}
.cchannel:first-child{border-top:0;padding-top:0}
.cchannel__label{display:block;font-family:'Switzer';font-weight:600;text-transform:uppercase;letter-spacing:.22em;font-size:.68rem;color:var(--c-accent);margin-bottom:.6rem}
.cchannel__value{font-family:'Switzer';font-weight:500;font-size:clamp(1.08rem,1.9vw,1.28rem);line-height:1.35;letter-spacing:.005em;color:var(--wine);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;position:relative;overflow-wrap:anywhere;transition:color .35s var(--ease-out-quart),transform .16s var(--ease-out-quart)}
.cchannel__value::after{content:'';position:absolute;left:0;bottom:.1em;width:100%;height:1px;background:var(--wine);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out-quart)}
@media(hover:hover){.cchannel__value:hover{color:var(--wine-deep)}.cchannel__value:hover::after{transform:scaleX(1)}}
.cchannel__value:active{transform:scale(.99);color:var(--wine-deep)}

.contact__book{margin-top:clamp(1.8rem,4.5vw,2.6rem);padding-top:clamp(1.6rem,4vw,2.2rem);border-top:1px solid color-mix(in oklab,var(--ink) 14%,transparent)}
.contact__booknote{margin:0 0 1.2rem;color:var(--c-sub);line-height:1.6;max-width:36ch}

/* directions chips (light ground) */
.contact-directions{margin-top:clamp(1.6rem,4vw,2.2rem)}
.contact-directions__links{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.85rem}
.contact-directions__links a{font-family:'Switzer';font-weight:600;font-size:.82rem;letter-spacing:.02em;color:var(--ink);text-decoration:none;padding:.7rem 1.05rem;min-height:44px;display:inline-flex;align-items:center;border:1px solid color-mix(in oklab,var(--ink) 26%,transparent);transition:background .3s var(--ease-out-quart),border-color .3s var(--ease-out-quart),transform .16s var(--ease-out-quart)}
@media(hover:hover){.contact-directions__links a:hover{background:color-mix(in oklab,var(--gold) 18%,var(--paper-hi));border-color:var(--gold)}}
.contact-directions__links a:active{transform:scale(.97)}

.contact-directions__links a:active{transform:scale(.97)}