/* ============================================================
   Encosta do Lago 33 — Quinta do Lago, Almancil
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  color-scheme:light;
  /* Riviera algarvia — cores tiradas das fotografias do apartamento */
  --ground:#F4EEE3;          /* calcário: o fundo da página */
  --surface:#FBF8F2;         /* calcário claro: cartões e campos */
  --surface-2:#EAE1D2;       /* areia */
  --sand-2:#E6DAC6;
  --agua:#D3EAE8;            /* água da piscina, clara */
  --mar:#0E4A5C;             /* sombra da piscina: faixas fundas */
  --mar-2:#145C70;
  --mar-3:#0A3B4A;           /* rodapé */
  --pinho:#2E5A49;           /* pinheiro manso e riscas das espreguiçadeiras */
  --sol:#E3AE4C;             /* sol: botões principais */
  --sol-2:#EDBE62;
  --ink:#12333F; --ink-2:#3D5861; --ink-3:#556B72;
  --line:#E0D5C3; --line-2:#CBBDA6;
  --deep:#0E4A5C; --deep-2:#145C70;
  --accent:#0E5E73; --accent-ink:#FFFFFF; --accent-soft:#DCEDEE; --accent-line:#A9CFD4;
  --gold:#B08D2E; --amber:#7E5313; --amber-soft:#F4E8D2; --amber-line:#DFC89A;
  --on-deep:#FFFFFF; --on-deep-2:#CFE3E6; --on-deep-line:rgba(255,255,255,.18);
  --shadow:0 1px 2px rgba(18,51,63,.06), 0 8px 24px -12px rgba(18,51,63,.18);
  --shadow-lg:0 2px 4px rgba(18,51,63,.07), 0 24px 56px -24px rgba(18,51,63,.32);
  --serif:"Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --sans:"Jost", "Futura", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --mono:"Jost", "Futura", "Avenir Next", ui-sans-serif, system-ui, sans-serif;
  --map-land:#E9ECE2; --map-park:#D3DFC6; --map-park-ink:#6E8563; --map-bld:#D9D6CB; --map-road:#FFFFFF; --map-case:#C9CFC2;
  --wrap:1180px; --read:648px;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:400}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
html{scroll-behavior:smooth; scroll-padding-top:78px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:20px}
.eyebrow{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3);
}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid transparent; border-radius:3px; padding:12px 22px;
  font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none;
  background:var(--accent); color:var(--accent-ink);
  transition:filter .2s, transform .12s, background .2s, border-color .2s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2); filter:none}
.btn-light{background:rgba(255,255,255,.15); color:#fff; border-color:rgba(255,255,255,.5)}
.btn-light:hover{background:rgba(255,255,255,.26); filter:none}
.book .btn-light{background:var(--surface); color:var(--ink); border-color:var(--line-2)}
.book .btn-light:hover{background:var(--ground); filter:none}
.btn-sm{padding:8px 15px; font-size:13.5px}
.btn:disabled{opacity:.42; cursor:not-allowed; filter:none}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; gap:16px; padding:14px 20px;
  border-bottom:1px solid transparent;
  transition:background .35s, border-color .35s, padding .35s;
}
.nav.solid{
  background:var(--ground);
  background:color-mix(in srgb, var(--ground) 95%, transparent);
  backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom-color:var(--line); padding-block:9px;
}
.brand{display:flex; flex-direction:column; line-height:1.14; text-decoration:none; margin-right:auto; min-width:0}
.brand b{font-family:var(--serif); font-size:20px; font-weight:400; letter-spacing:-.01em; white-space:nowrap}
.brand span{font-family:var(--mono); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3)}
.navlinks{display:flex; gap:2px}
.navlink{
  text-decoration:none; font-size:14px; padding:7px 11px; border-radius:3px;
  color:var(--ink-2); white-space:nowrap; transition:background .2s, color .2s;
}
.navlink:hover{background:var(--surface-2); color:var(--ink)}
.navlink.active{color:var(--ink); background:var(--surface-2)}
.navtools{display:flex; align-items:center; gap:10px}
.lang{display:flex; border:1px solid var(--line-2); border-radius:3px; overflow:hidden}
.lang button{
  background:none; border:0; padding:5px 10px; cursor:pointer; color:var(--ink-3);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; transition:background .2s, color .2s;
}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}

/* nav over the hero photo */
.nav.over .brand b{color:#fff}
.nav.over .brand span{color:rgba(255,255,255,.72)}
.nav.over .navlink{color:rgba(255,255,255,.88)}
.nav.over .navlink:hover,.nav.over .navlink.active{background:rgba(255,255,255,.18); color:#fff}
.nav.over .lang{border-color:rgba(255,255,255,.42)}
.nav.over .lang button{color:rgba(255,255,255,.78)}
.nav.over .lang button[aria-pressed="true"]{background:#fff; color:var(--deep)}
.nav.over .btn-ghost{color:#fff; border-color:rgba(255,255,255,.5)}
.nav.over .btn-ghost:hover{background:rgba(255,255,255,.18)}

.menubtn{display:none; background:none; border:1px solid var(--line-2); border-radius:3px; padding:7px 10px; cursor:pointer}
.nav.over .menubtn{border-color:rgba(255,255,255,.45); color:#fff}

/* ---------- hero ---------- */
.hero{position:relative; min-height:664px; display:flex; align-items:flex-end; isolation:isolate; background:var(--deep)}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(8,40,52,.40) 0%, rgba(8,40,52,.02) 30%, rgba(8,40,52,.22) 60%, rgba(8,40,52,.68) 100%);
}
.hero-inner{width:100%; max-width:var(--wrap); margin-inline:auto; padding:140px 20px 46px; color:#fff}
.hero .eyebrow{color:rgba(255,255,255,.84)}
.hero h1{
  font-family:var(--serif); font-size:clamp(2.85rem, 6.4vw, 5rem); line-height:1.02;
  letter-spacing:-.022em; margin:14px 0 0; max-width:15ch; text-shadow:0 2px 34px rgba(0,0,0,.3);
}
.hero h1 em{font-style:italic; color:#F4E7CF}
.hero-sub{margin-top:16px; max-width:47ch; font-size:17.5px; color:rgba(255,255,255,.91)}
.hero-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px}
.score{
  display:inline-flex; align-items:center; gap:10px; padding:6px 15px 6px 6px;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.36);
  border-radius:999px; font-size:13.5px; color:#fff;
}
.score b{font-family:var(--mono); font-size:15px; font-weight:500; background:#fff; color:var(--deep); border-radius:999px; padding:4px 10px}
.score i{font-style:normal; color:rgba(255,255,255,.72)}

/* ---------- facts strip ---------- */
.facts{background:var(--surface); border-bottom:1px solid var(--line)}
.facts-grid{display:grid; grid-template-columns:repeat(6,1fr); max-width:var(--wrap); margin-inline:auto}
.fact{padding:22px 18px; border-left:1px solid var(--line)}
.fact:first-child{border-left:0}
.fact dt{font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.fact dd{margin:6px 0 0; font-size:15px; line-height:1.3; color:var(--ink-2)}
.fact dd b{font-family:var(--mono); font-weight:500; font-size:18px; color:var(--ink); display:block}

/* ---------- section scaffolding ---------- */
section{scroll-margin-top:78px}
.band{padding-block:clamp(60px, 7.5vw, 100px)}
.band-alt{background:var(--surface); border-block:1px solid var(--line)}
.head{display:flex; flex-direction:column; gap:14px; margin-bottom:40px; max-width:62ch}
.head h2{font-family:var(--serif); font-size:clamp(2rem, 3.6vw, 2.85rem); line-height:1.08; letter-spacing:-.018em}
.head p{color:var(--ink-2)}

/* ---------- the apartment ---------- */
.apt{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(32px,5vw,72px); align-items:start}
.prose{max-width:var(--read); display:flex; flex-direction:column; gap:18px; color:var(--ink-2); font-size:17.5px}
.prose strong{color:var(--ink); font-weight:600}
.pull{
  margin:10px 0; padding:22px 26px; border-left:2px solid var(--accent);
  background:var(--surface-2); border-radius:0 8px 8px 0;
  font-family:var(--serif); font-size:23px; line-height:1.34; color:var(--ink); letter-spacing:-.008em;
}
.aptshots{display:grid; gap:16px; position:sticky; top:96px}
.aptshots figure{margin:0; border-radius:3px; overflow:hidden; background:var(--surface-2)}
.aptshots img{width:100%; aspect-ratio:4/3; object-fit:cover}
.aptshots figcaption{font-family:var(--mono); font-size:11px; letter-spacing:.04em; color:var(--ink-3); padding:9px 12px}
.aptshots figure:first-child img{aspect-ratio:5/4}

/* sleeping arrangements */
.sleep{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:3px; overflow:hidden; margin-top:44px}
.sleep > div{background:var(--surface); padding:22px 20px; display:flex; flex-direction:column; gap:7px}
.band-alt .sleep > div{background:var(--ground)}
.sleep h4{font-size:16px; font-weight:600; display:flex; align-items:center; gap:9px}
.sleep p{font-size:14.5px; color:var(--ink-2)}
.sleep .tag{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.ico{width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}

/* ---------- gallery ---------- */
.gal-bar{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; align-items:center}
.chip{
  border:1px solid var(--line-2); background:transparent; border-radius:3px;
  padding:7px 14px; font-size:13.5px; cursor:pointer; color:var(--ink-2);
  transition:background .2s, color .2s, border-color .2s;
}
.chip:hover{background:var(--surface-2); color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.chip .n{font-family:var(--mono); font-size:11px; opacity:.6; margin-left:6px}
.gal{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.gal button{
  border:0; padding:0; margin:0; background:var(--surface-2); cursor:zoom-in;
  border-radius:8px; overflow:hidden; position:relative; display:block;
}
.gal img{width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.gal button:hover img{transform:scale(1.04)}
.gal button.wide{grid-column:span 2}
.gal button.tall{grid-row:span 2}
.gal button{aspect-ratio:4/3}
.gal button.wide{aspect-ratio:8/3}
.gal button.tall{aspect-ratio:2/3}
.gal button.big{grid-column:span 2; grid-row:span 2; aspect-ratio:1/1}

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:100; background:rgba(14,32,42,.95);
  display:none; flex-direction:column; padding:14px;
}
.lb[open]{display:flex}
.lb-top{display:flex; align-items:center; gap:14px; color:#fff; padding:4px 6px 12px}
.lb-count{font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.75); margin-right:auto}
.lb-x{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:999px; width:38px; height:38px; cursor:pointer; display:grid; place-items:center}
.lb-x:hover{background:rgba(255,255,255,.22)}
.lb-stage{flex:1; position:relative; display:grid; place-items:center; min-height:0}
.lb-stage img{max-width:100%; max-height:100%; object-fit:contain; border-radius:4px}
.lb-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff;
  width:46px; height:46px; border-radius:999px; cursor:pointer; display:grid; place-items:center;
}
.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-prev{left:4px} .lb-next{right:4px}
.lb-cap{color:rgba(255,255,255,.82); font-size:14px; text-align:center; padding:12px 8px 4px; min-height:2.6em}

/* ---------- amenities ---------- */
.amen{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:34px 30px}
.amen section h3{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:14px;
}
.amen li{padding:7px 0; font-size:15.5px; color:var(--ink-2); border-bottom:1px solid var(--line)}
.amen li:last-child{border-bottom:0}

/* ---------- locais de interesse ---------- */
.poi{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:34px 40px; margin-top:12px}
.poi h3{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); padding-bottom:10px; border-bottom:1px solid var(--line); margin-bottom:6px;
}
.poi li{padding:11px 0; border-bottom:1px solid var(--line)}
.poi li:last-child{border-bottom:0}
.poi li a{display:flex; align-items:baseline; gap:12px; text-decoration:none}
.poi li a:hover .nm{text-decoration:underline; text-underline-offset:3px}
.poi .nm{flex:1; min-width:0; font-size:16px}
.poi .d{font-family:var(--mono); font-size:13px; color:var(--ink-3); white-space:nowrap; font-variant-numeric:tabular-nums}
.poi .nt{display:block; font-size:14px; color:var(--ink-3); margin-top:2px; max-width:42ch}

/* ---------- location ---------- */
.loc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(30px,4.6vw,64px); align-items:start}
.dial{width:100%; height:auto; display:block; overflow:visible}
.dial .ring{fill:none; stroke:var(--line-2); stroke-width:1}
.dial .ringlab{font-family:var(--mono); font-size:9px; fill:var(--ink-3); letter-spacing:.08em}
.dial .spoke{stroke:var(--line); stroke-width:1}
.dial .dot{fill:var(--accent)}
.dial .home{fill:var(--deep); stroke:var(--ground); stroke-width:2.5}
.dial .plab{font-family:var(--sans); font-size:11.5px; fill:var(--ink); font-weight:600}
.dial .pdist{font-family:var(--mono); font-size:10px; fill:var(--ink-3)}
.dialnote{font-family:var(--mono); font-size:10.5px; color:var(--ink-3); letter-spacing:.03em; margin-top:8px; text-align:center}

/* ---------- mapa de chegada ---------- */
.arrive{margin-top:clamp(48px,6vw,80px); padding-top:clamp(32px,4vw,48px); border-top:1px solid var(--line)}
.arrive-head{margin-bottom:26px}
.arrive-head h3{font-family:var(--serif); font-size:clamp(26px,3vw,34px); line-height:1.12; margin-top:6px}
.arrive-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start}
.amap{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:3px; overflow:hidden}
.amap .shot{position:relative}
.amap .shot img{display:block; width:100%; height:auto}
.amap .shot svg{position:absolute; inset:0; width:100%; height:100%}
.amap .route-halo{stroke:#fff}
.amap .stepdot circle,.amap .pin path{stroke:#fff}
.amap .pin .pin-dot{fill:#fff}
.amap .tag rect{fill:#fff; stroke:rgba(0,0,0,.18)}
.amap .tag-t{fill:var(--ink)}
.amap .tag-s{fill:#4B5C54}
.mapno{display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--accent); color:var(--accent-ink); font-family:var(--mono); font-size:13px; font-weight:500; margin-right:8px; vertical-align:2px}
.map2h,.gmap-head h4{font-family:var(--serif); font-size:clamp(21px,2.3vw,26px); line-height:1.2}
.map2h{margin:0 0 18px}
.gmap{margin:0 0 clamp(40px,5vw,64px)}
.gmap-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.gmap iframe{display:block; width:100%; height:clamp(340px,44vw,500px); border:1px solid var(--line); border-radius:3px; background:var(--surface-2)}
.route-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(28px,4vw,56px); align-items:start}
.gmap-fig{margin:0}
.route-lead{color:var(--ink-2); font-size:15.5px; margin-bottom:14px; max-width:52ch}
.route-btns{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.steps .n{flex:none}
@media (max-width:860px){ .route-grid{grid-template-columns:minmax(0,1fr)} }
.gmap figcaption{font-size:14px; color:var(--ink-3); margin-top:10px; max-width:70ch}
.amap figcaption{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; color:var(--ink-3); padding:10px 14px; border-top:1px solid var(--line)}
.amap .land{fill:var(--map-land)}
.amap .park{fill:var(--map-park)}
.amap .bld{fill:var(--map-bld)}
.amap .rd-case{fill:none; stroke:var(--map-case); stroke-linecap:round; stroke-linejoin:round}
.amap .rd{fill:none; stroke:var(--map-road); stroke-linecap:round; stroke-linejoin:round}
.amap .lot{fill:var(--map-road); stroke:var(--map-case); stroke-width:3; stroke-dasharray:8 6}
.amap .island{fill:var(--map-park); stroke:var(--map-case); stroke-width:2}
.amap .route-halo{fill:none; stroke:#fff; stroke-width:19; stroke-linecap:round; stroke-linejoin:round; opacity:.9}
.amap .route{fill:none; stroke:#2F6FE0; stroke-width:10; stroke-linecap:round; stroke-linejoin:round}
.amap .arrowhead{fill:#2F6FE0}
.amap .rdl{font-family:var(--sans); font-size:21px; font-weight:600; fill:var(--ink-2); paint-order:stroke; stroke:var(--map-road); stroke-width:6px; stroke-linejoin:round; letter-spacing:.01em}
.amap .grl{font-family:var(--serif); font-style:italic; font-size:30px; fill:var(--map-park-ink)}
.amap .stepdot circle{fill:var(--deep); stroke:var(--map-road); stroke-width:4}
.amap .stepdot text{font-family:var(--mono); font-size:23px; font-weight:500; fill:#fff}
.amap .pin path{fill:#C0392B; stroke:var(--map-road); stroke-width:4}
.amap .pin .pin-dot{fill:var(--map-road)}
.amap .tag rect{fill:var(--surface); stroke:var(--line-2); stroke-width:2}
.amap .tag-t{font-family:var(--sans); font-size:20px; font-weight:700; fill:var(--ink)}
.amap .tag-s{font-family:var(--mono); font-size:14px; fill:var(--ink-3); letter-spacing:.06em; text-transform:uppercase}
.amap .north circle{fill:var(--surface); stroke:var(--line-2); stroke-width:2}
.amap .north path{fill:var(--ink)}
.amap .north text{font-family:var(--mono); font-size:18px; font-weight:500; fill:var(--ink-2)}
.steps{list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line)}
.steps li{display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; padding:18px 0; border-bottom:1px solid var(--line)}
.steps .n{width:32px; height:32px; border-radius:50%; background:var(--deep); color:var(--on-deep); font-family:var(--mono); font-size:14px; display:grid; place-items:center; margin-top:2px}
.steps b{display:block; font-weight:600; font-size:16.5px}
.steps p{color:var(--ink-2); font-size:15px; margin-top:3px; max-width:46ch}
@media (max-width:860px){ .arrive-grid{grid-template-columns:minmax(0,1fr)} }

.dist{border-top:1px solid var(--line)}
.dist h3{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:26px 0 4px}
.dist h3:first-of-type{margin-top:16px}
.dist .row{display:flex; align-items:baseline; gap:12px; padding:9px 0; border-bottom:1px solid var(--line)}
.dist .row .nm{flex:1; min-width:0}
.dist .row .nm span{display:block; font-size:12px; color:var(--ink-3)}
.dist .row .v{font-family:var(--mono); font-size:13.5px; font-variant-numeric:tabular-nums; color:var(--ink-2); white-space:nowrap}
.dist .row .v b{color:var(--ink); font-weight:500}

/* ---------- availability ---------- */
.calwrap{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(28px,4vw,56px); align-items:start}
.calhead{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.calhead .sp{margin-left:auto; display:flex; gap:8px}
.navb{
  width:36px; height:36px; border-radius:3px; border:1px solid var(--line-2);
  background:transparent; cursor:pointer; display:grid; place-items:center;
}
.navb:hover{background:var(--surface-2)}
.navb:disabled{opacity:.35; cursor:not-allowed}
.months{display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px)}
.month h4{font-size:15.5px; font-weight:600; text-align:center; margin-bottom:12px; text-transform:capitalize}
.dow{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:6px}
.dow span{font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); text-align:center}
.days{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.day{
  aspect-ratio:1/1; border:0; background:transparent; border-radius:7px; cursor:pointer;
  font-family:var(--mono); font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink);
  display:grid; place-items:center; position:relative; transition:background .15s, color .15s;
}
.day:hover:not(:disabled){background:var(--surface-2)}
.band-alt .day:hover:not(:disabled){background:var(--ground)}
.day.empty{visibility:hidden}
.day:disabled{color:var(--ink-3); cursor:not-allowed; text-decoration:line-through; opacity:.55}
.day.booked{background:repeating-linear-gradient(135deg, var(--surface-2) 0 4px, transparent 4px 8px); color:var(--ink-3); text-decoration:line-through; cursor:not-allowed}
.day.past{opacity:.3; cursor:not-allowed}
.day.sel{background:var(--accent); color:var(--accent-ink); font-weight:500}
.day.inrange{background:var(--accent-soft); color:var(--ink); border-radius:0}
.day.rstart{border-radius:7px 0 0 7px}
.day.rend{border-radius:0 7px 7px 0}
.legend{display:flex; flex-wrap:wrap; gap:16px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
.legend span{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2)}
.legend i{width:16px; height:16px; border-radius:5px; display:block; flex:none}
.lg-free{background:var(--surface-2); border:1px solid var(--line-2)}
.band-alt .lg-free{background:var(--ground)}
.lg-book{background:repeating-linear-gradient(135deg, var(--surface-2) 0 4px, transparent 4px 8px); border:1px solid var(--line-2)}
.lg-sel{background:var(--accent)}

.demo{
  display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--amber);
  border-left:2px solid var(--amber-line); padding:1px 0 1px 9px;
}
.synced{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; color:var(--ink-2); padding:1px 0;
}

.synced .dot{
  width:7px; height:7px; border-radius:999px; background:var(--accent); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* seasons table */
.seasons{border:1px solid var(--line); border-radius:3px; overflow:hidden; background:var(--surface)}
.band-alt .seasons{background:var(--ground)}
.seasons h3{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); padding:14px 16px 10px}
.seasons .r{display:flex; align-items:baseline; gap:10px; padding:10px 16px; border-top:1px solid var(--line); font-size:14.5px}
.seasons .r .nm{flex:1; min-width:0}
.seasons .r .nm i{display:block; font-style:normal; font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.seasons .r .p{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:15px; white-space:nowrap}
/* NB: not ".foot" — that class belongs to the page footer and would win on background. */
.seasons .meta{padding:13px 16px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-2); display:flex; flex-direction:column; gap:7px}
.seasons .meta span{display:flex; gap:8px; align-items:flex-start}
.seasons .meta .ico{flex:none; margin-top:2px; color:var(--ink-3)}

/* ---------- booking ---------- */
.book{background:var(--surface-2); color:var(--ink)}
.book .head h2{color:var(--ink)}
.book .head p{color:var(--ink-2)}
.book .eyebrow{color:var(--ink-3)}
.bookgrid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,4vw,56px); align-items:start}
.quote{border:1px solid var(--line-2); border-radius:3px; background:var(--surface); padding:clamp(22px,3vw,30px)}
.quote h3{font-family:var(--serif); font-size:1.6rem; letter-spacing:-.012em; margin-bottom:4px; color:var(--ink)}
.quote .sub{font-size:14px; color:var(--ink-3); margin-bottom:20px}
.qrow{display:flex; align-items:baseline; gap:12px; padding:11px 0; border-top:1px solid var(--line); font-size:15px}
.qrow:first-of-type{border-top:0}
.qrow .l{flex:1; min-width:0; color:var(--ink-2)}
.qrow .l i{font-style:normal; display:block; font-family:var(--mono); font-size:11px; color:var(--ink-3)}
.qrow .v{font-family:var(--mono); font-variant-numeric:tabular-nums; white-space:nowrap}
.qtotal{border-top:1px solid var(--line-2); margin-top:8px; padding-top:16px; display:flex; align-items:baseline; gap:12px}
.qtotal .l{flex:1; font-size:16px}
.qtotal .v{display:block; text-align:right; font-family:var(--mono); font-size:27px; line-height:1.15; font-variant-numeric:tabular-nums; color:var(--ink)}
.qnight{display:block; text-align:right; font-family:var(--mono); font-size:12px; color:var(--ink-3); margin-top:4px}
.qempty{color:var(--ink-2); font-size:15px; padding:14px 0 6px; line-height:1.6}
.qwarn{
  display:flex; gap:9px; align-items:flex-start; font-size:13.5px; color:var(--amber);
  background:var(--amber-soft); border-left:2px solid var(--amber-line);
  border-radius:0; padding:10px 12px; margin-top:14px;
}

.form{display:grid; gap:14px}
.f2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.field input,.field select,.field textarea{
  font:inherit; font-size:15px; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:3px; padding:11px 13px; width:100%;
}
.field textarea{resize:vertical; min-height:96px; line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3); opacity:.8}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:34px}
.field select option{background:var(--surface); color:var(--ink)}
.formfoot{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:4px}
.formnote{font-size:12.5px; color:var(--ink-3); line-height:1.5}
.sent{
  display:none; gap:10px; align-items:flex-start; padding:14px 16px; border-radius:3px;
  background:var(--accent-soft); border:1px solid var(--accent-line); font-size:14.5px; color:var(--ink);
}
.sent[data-on="1"]{display:flex}
.sent .ico{color:var(--accent); margin-top:2px}

/* ---------- know / faq ---------- */
.know{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(30px,4.6vw,64px); align-items:start}
.rules{display:grid; gap:2px}
.rules .r{display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--line); font-size:15.5px; color:var(--ink-2)}
.rules .r .ico{color:var(--ink-3); margin-top:2px; flex:none}
.rules .r b{color:var(--ink); font-weight:600}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:17px 34px 17px 0; position:relative;
  font-size:16.5px; font-weight:600; color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px; margin-top:-6px;
  border-right:1.6px solid var(--ink-3); border-bottom:1.6px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .25s;
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px}
.faq .a{padding:0 0 18px; color:var(--ink-2); font-size:15.5px; max-width:60ch}

/* ---------- footer ---------- */
.foot{background:var(--sand-2); color:var(--ink-2); padding-block:56px 40px; border-top:1px solid var(--line-2)}
.footgrid{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr)); gap:34px}
.foot h4{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:14px}
.foot .fb{font-family:var(--serif); font-size:24px; color:var(--ink); display:block; margin-bottom:8px}
.foot p{font-size:14.5px; line-height:1.65}
.foot a{color:var(--ink); text-decoration:none; font-size:14.5px; display:block; padding:4px 0}
.foot a:hover{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
.footbar{
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line-2);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; font-size:12.5px;
}
.footbar .sp{margin-left:auto}

/* ---------- sticky mobile bar ---------- */
.stick{
  position:fixed; inset:auto 0 0 0; z-index:55; display:none;
  align-items:center; gap:12px; padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  background:var(--ground);
  background:color-mix(in srgb, var(--ground) 96%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
}
.stick .p{flex:1; min-width:0; line-height:1.25}
.stick .p b{font-family:var(--mono); font-size:16px; display:block}
.stick .p span{font-size:12px; color:var(--ink-3)}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .facts-grid{grid-template-columns:repeat(3,1fr)}
  .fact:nth-child(3n+1){border-left:0}
  .fact:nth-child(n+4){border-top:1px solid var(--line)}
  .apt,.loc,.know,.bookgrid,.calwrap{grid-template-columns:minmax(0,1fr)}
  .aptshots{position:static; grid-template-columns:1fr 1fr}
  .aptshots figure:first-child img{aspect-ratio:4/3}
  .navlinks{display:none}
}
@media (max-width:720px){
  body{font-size:16px}
  .hero{min-height:560px}
  .hero-inner{padding:120px 20px 34px}
  .facts-grid{grid-template-columns:repeat(2,1fr)}
  .fact{padding:16px 14px; border-left:1px solid var(--line)}
  .fact:nth-child(3n+1){border-left:1px solid var(--line)}
  .fact:nth-child(odd){border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal button.big,.gal button.wide{grid-column:span 2; grid-row:auto; aspect-ratio:3/2}
  .gal button.tall{grid-row:auto; aspect-ratio:4/3}
  .months{grid-template-columns:1fr}
  .footgrid{grid-template-columns:1fr 1fr}
  .footgrid > :first-child{grid-column:1/-1}
  .f2{grid-template-columns:1fr}
  .aptshots{grid-template-columns:1fr}
  .stick{display:flex}
  body{padding-bottom:0}
  .foot{padding-bottom:104px}
  .menubtn{display:grid; place-items:center}
  .lb-nav{width:40px; height:40px}
}
@media (max-width:420px){
  .navtools .btn{display:none}
  .pull{padding:18px 20px; font-size:20px}
}

.gmap-card{display:flex; flex-direction:column; justify-content:center; gap:6px; min-height:320px; padding:28px; border:1px solid var(--line-2); border-radius:3px; background:var(--surface); text-decoration:none; color:var(--ink)}
.gmap-card span{color:var(--ink-3); font-size:14.5px}
.gmap-card:hover{background:var(--surface-2)}


/* ============================================================
   RIVIERA ALGARVIA — 9/10/2026
   Água, calcário, pinheiro manso, sol e as riscas das
   espreguiçadeiras. Nada de branco liso, nada de preto.
   ============================================================ */

body{background:var(--ground); font-size:17.5px; letter-spacing:.005em}
.num{font-family:var(--sans); font-variant-numeric:tabular-nums lining-nums}

/* Tipografia: Cormorant para a voz da casa, Jost para tudo o resto */
.head h2,.arrive-head h3,.map2h,.gmap-head h4,.quote h3,.foot .fb,.brand b{font-family:var(--serif); font-weight:500; letter-spacing:-.01em}
.head h2{font-size:clamp(2.35rem,4.4vw,3.6rem); line-height:1.02}
.hero h1{font-family:var(--serif); font-weight:500; letter-spacing:-.015em; line-height:.98}
.hero h1 em{font-style:normal; color:inherit}
.brand b{font-size:23px}

/* Etiquetas: itálico em caixa normal, em vez de maiúsculas espaçadas */
.eyebrow,.brand span,.fact dt,.sleep .tag,.amen section h3,.poi h3,.aptshots figcaption,.dialnote,
.amap figcaption,.field label,.foot h4,.lang button,.chip .n,.demo,.synced,.seasons .r .nm i,.qrow .l i{
  text-transform:none; letter-spacing:0;
}
.eyebrow{font-family:var(--serif); font-style:italic; font-size:21px; color:var(--pinho)}
.hero .eyebrow{color:rgba(255,255,255,.9)}
.brand span{font-family:var(--sans); font-size:12px; color:var(--ink-3)}
.amen section h3,.poi h3{font-family:var(--serif); font-style:italic; font-size:23px; color:var(--pinho); border-bottom-color:var(--line-2)}
.field label{font-family:var(--sans); font-size:13px; font-weight:500}
.foot h4{font-family:var(--serif); font-style:italic; font-size:19px}
.aptshots figcaption,.amap figcaption,.dialnote{font-family:var(--serif); font-style:italic; font-size:15.5px}
.sleep .tag{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--pinho)}

/* Botões: o sol para a acção principal */
.btn{background:var(--sol); color:var(--ink); border-radius:2px; letter-spacing:.01em}
.btn:hover{background:var(--sol-2); filter:none}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-2)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-light{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.55)}
.btn-light:hover{background:rgba(255,255,255,.26)}
.chip[aria-pressed="true"]{background:var(--mar); border-color:var(--mar); color:#fff}

/* Faixa de factos: a sombra da piscina logo abaixo da fotografia */
.facts{background:var(--mar); border-bottom:0; color:#fff}
.fact{border-left-color:rgba(255,255,255,.14)}
.fact dt{font-family:var(--sans); font-size:13px; color:var(--on-deep-2)}
.fact dd{color:var(--on-deep-2)}
.fact dd b{font-family:var(--serif); font-weight:500; font-size:30px; line-height:1.1; color:#fff}

/* Secções: calcário, água e mar, alternados */
.band-alt{background:var(--ground); border-block:0}
#apartamento,#localizacao,#disponibilidade{background:var(--ground)}
#comodidades,#locais,#saber{background:var(--agua)}
#comodidades .amen li,#locais .poi li{border-bottom-color:rgba(18,51,63,.12)}
.sleep{background:var(--line); border-color:var(--line)}
.sleep > div,.band-alt .sleep > div{background:var(--surface)}
.pull{font-family:var(--serif); font-size:1.65rem; line-height:1.3; background:var(--agua); border-left-color:var(--pinho)}

/* Galeria sobre água funda: as fotografias acendem-se */
#galeria{background:var(--mar); color:#fff}
#galeria .head h2{color:#fff}
#galeria .head p{color:var(--on-deep-2)}
#galeria .eyebrow{color:var(--sol-2)}
#galeria .chip{background:transparent; color:var(--on-deep-2); border-color:rgba(255,255,255,.3)}
#galeria .chip:hover{background:rgba(255,255,255,.1); color:#fff}
#galeria .chip[aria-pressed="true"]{background:var(--sol); border-color:var(--sol); color:var(--ink)}
#galeria .gal button{border-radius:2px}

/* Intervalos: a fotografia ocupa a largura toda, com uma frase */
.interlude{position:relative; isolation:isolate; overflow:hidden; min-height:clamp(360px,64vh,640px); display:flex; align-items:flex-end}
.interlude img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2}
.interlude::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, rgba(8,40,52,0) 35%, rgba(8,40,52,.62) 100%)}
.interlude p{
  width:100%; max-width:var(--wrap); margin-inline:auto; padding:0 20px clamp(34px,5vw,64px);
  font-family:var(--serif); font-weight:500; font-size:clamp(2.1rem,5.2vw,4.4rem); line-height:1.02; letter-spacing:-.015em;
  color:#fff; text-wrap:balance;
}
.interlude p span{display:block; max-width:16ch}

/* Riscas das espreguiçadeiras: o toldo por cima da reserva e do rodapé */
.stripes{height:16px; background:repeating-linear-gradient(90deg, var(--pinho) 0 30px, var(--surface) 30px 60px)}

/* Pedido de reserva: debaixo do toldo, sobre água funda */
.book{background:var(--mar); color:#fff}
.book .head h2{color:#fff}
.book .head p{color:var(--on-deep-2)}
.book .eyebrow{color:var(--sol-2)}
.quote{background:var(--mar-2); border-color:var(--on-deep-line); color:#fff}
.quote h3,.qtotal .v{color:#fff}
.quote .sub,.qnight,.qempty,.qrow .l,.qrow .l i{color:var(--on-deep-2)}
.qrow,.qtotal{border-top-color:var(--on-deep-line)}
.field label,.formnote{color:var(--on-deep-2)}
.field input,.field select,.field textarea{background-color:var(--mar-2); color:#fff; border-color:rgba(255,255,255,.22)}
.field input::placeholder,.field textarea::placeholder{color:var(--on-deep-2); opacity:.7}
.field input:focus,.field select:focus,.field textarea:focus{outline-color:var(--sol)}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--on-deep-2) 50%),linear-gradient(135deg,var(--on-deep-2) 50%,transparent 50%)}
.field select option{background:var(--mar-2); color:#fff}
.field input[type="date"]{color-scheme:dark}
.book .btn-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.book .btn-light:hover{background:rgba(255,255,255,.1)}
.sent{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.25); color:#fff}
.sent .ico{color:var(--sol-2)}
.qwarn{background:rgba(227,174,76,.14); color:#F6DDA6; border-left-color:var(--sol)}

/* Rodapé: o mar ao fim do dia */
.foot{background:var(--mar-3); color:var(--on-deep-2); border-top:0}
.foot .fb{color:#fff; font-size:28px}
.foot h4{color:var(--sol-2)}
.foot a{color:#fff}
.foot a:hover{color:var(--sol-2)}
.footbar{border-top-color:var(--on-deep-line)}

/* Barra do telemóvel e navegação */
.stick{background:var(--ground); background:color-mix(in srgb, var(--ground) 94%, transparent)}
.nav.solid{background:var(--ground); background:color-mix(in srgb, var(--ground) 94%, transparent)}
.lang button[aria-pressed="true"]{background:var(--mar); color:#fff}
.steps .n,.mapno{font-family:var(--sans)}
.lb{background:rgba(10,59,74,.96)}

.field select{background-size:5px 5px,5px 5px; background-repeat:no-repeat; background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%}
.dist h3,.seasons h3{font-family:var(--serif); font-style:italic; font-size:21px; letter-spacing:0; text-transform:none; color:var(--pinho)}
.seasons h3{padding:14px 16px 6px}
.seasons .r .p,.qrow .v{font-family:var(--sans); font-variant-numeric:tabular-nums lining-nums}
.head h2,.hero h1,.fact dd b,.foot .fb,.brand b,.interlude p,.quote h3,.map2h,.gmap-head h4{font-variant-numeric:lining-nums}
.hero-sub,.hero .eyebrow{text-shadow:0 1px 14px rgba(8,40,52,.45)}
.gal{grid-auto-flow:dense}
.gal-more{margin-top:30px; text-align:center}
#gal-more[hidden]{display:none}
#galeria .gal-more .btn-light{border-color:rgba(255,255,255,.5)}

/* Galeria em grelha regular: linhas de altura fixa, para as peças grandes encaixarem sem buracos */
.gal{grid-auto-rows:clamp(130px,15vw,210px)}
.gal button,.gal button.wide,.gal button.tall,.gal button.big{aspect-ratio:auto; height:100%}
.gal button.big{grid-column:span 2; grid-row:span 2}
.gal button.wide{grid-column:span 2}
.gal button.tall{grid-row:span 2}

/* Telemóvel: nome mais pequeno na barra e véu mais firme sobre a fotografia do topo */
.brand{min-width:0}
.brand b{overflow:hidden; text-overflow:ellipsis}
@media (max-width:700px){
  .brand b{font-size:18px}
  .hero::after{background:linear-gradient(to bottom, rgba(8,40,52,.45) 0%, rgba(8,40,52,.22) 28%, rgba(8,40,52,.55) 55%, rgba(8,40,52,.82) 100%)}
}

/* Galeria resumida na página: cinco fotografias em duas linhas */
#galeria .gal{grid-auto-rows:clamp(150px,17vw,250px)}
#galeria .gal-more{margin-top:32px; text-align:left}

/* Álbum: todas as fotografias num painel em ecrã inteiro, sobre água funda */
.album{position:fixed; inset:0; z-index:90; background:var(--mar); color:#fff; overflow-y:auto; overscroll-behavior:contain; padding:0 20px 56px}
.album[hidden]{display:none}
.album-top{position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:16px; max-width:var(--wrap); margin:0 auto; padding:18px 0 14px; background:var(--mar)}
.album-top h2{font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.05; margin-right:auto; color:#fff}
.album-x{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35); color:#fff; width:44px; height:44px; border-radius:50%; cursor:pointer; display:grid; place-items:center; flex:none}
.album-x:hover{background:rgba(255,255,255,.2)}
.album .gal-bar,.album .gal{max-width:var(--wrap); margin-inline:auto}
.album .gal-bar{margin-bottom:20px}
.album .chip{background:transparent; color:var(--on-deep-2); border-color:rgba(255,255,255,.3)}
.album .chip:hover{background:rgba(255,255,255,.1); color:#fff}
.album .chip[aria-pressed="true"]{background:var(--sol); border-color:var(--sol); color:var(--ink)}
.album .gal button{border-radius:2px}

/* Caixas que eram brancas: azul-água um pouco mais escuro, com texto escuro
   para leitura fácil (contraste 8:1 a 10:1, acima do nível AAA). 9/10/2026 */
:root{--agua-2:#C6E1E5; --ink-box:#1F3F49}
.sleep{background:rgba(14,74,92,.22); border-color:rgba(14,74,92,.22)}
.sleep > div,.band-alt .sleep > div{background:var(--agua-2)}
.sleep h4{color:var(--ink)}
.sleep p{color:var(--ink-box); font-size:15px}
.sleep .tag{color:var(--mar)}
.sleep .ico{color:var(--mar)}
.seasons{background:var(--agua-2); border-color:rgba(14,74,92,.25)}
.seasons h3{color:var(--mar)}
.seasons .r,.seasons .meta{border-color:rgba(14,74,92,.18)}
.seasons .r .nm{color:var(--ink)}
.seasons .r .nm i{color:var(--ink-box); font-size:12.5px; line-height:1.4}
.seasons .r .p{color:var(--ink); font-weight:500}
.seasons .meta,.seasons .meta .ico{color:var(--ink-box); font-size:13.5px}
.amap{background:var(--agua-2); border-color:rgba(14,74,92,.25)}
.amap figcaption{color:var(--ink-box); border-top-color:rgba(14,74,92,.18)}

/* ============================================================
   AZUL DE LEITURA — 9/10/2026
   Fim do calcário e dos cartões claros: todas as zonas de texto
   passam a um azul-céu suave e pouco saturado ("azul ria").
   Contraste do texto, medido pela fórmula WCAG:
     fundo #D3E6ED  -> texto 11,1:1 · secundário 8,2:1 · notas 6,1:1
     caixas #C4DDE6 -> texto 10,1:1 · secundário 7,5:1 · notas 5,6:1
   (o nível máximo, AAA, pede 7:1 para texto corrido)
   ============================================================ */
:root{
  --ground:#D3E6ED;     /* azul ria: fundo de leitura */
  --agua:#C4DDE6;       /* secções alternadas */
  --agua-2:#C4DDE6;     /* caixas e cartões */
  --surface:#DDEBF0;    /* campos, etiquetas do mapa */
  --surface-2:#C4DDE6;
  --sand-2:#C4DDE6;
  --line:#A9C8D3; --line-2:#8FB4C2;
  --ink:#0F2E3A; --ink-2:#24434D; --ink-3:#365660; --ink-box:#24434D;
  --accent-soft:#A9CFDB; --accent-line:#7FAEBF;
  --amber-soft:#EBD9B4; --amber-line:#C9A766;
  --map-land:#D6E3E2; --map-park:#BCD3BE; --map-park-ink:#47604A; --map-bld:#B9CDD3;
  --map-road:#EDF4F6; --map-case:#9DB7BF;
}
body,.band-alt,#apartamento,#localizacao,#disponibilidade{background:var(--ground)}
#comodidades,#locais,#saber{background:var(--agua)}
#comodidades .amen li,#locais .poi li{border-bottom-color:rgba(14,74,92,.16)}

/* Títulos pequenos em azul-mar, a cor da casa */
.eyebrow,.amen section h3,.poi h3,.sleep .tag{color:var(--mar)}
.hero .eyebrow{color:rgba(255,255,255,.92)}
.amen section h3,.poi h3{border-bottom-color:var(--line-2)}

/* Caixas: um degrau mais escuras do que o fundo, com moldura azul */
.sleep{background:var(--line-2); border-color:var(--line-2)}
.sleep > div,.band-alt .sleep > div{background:var(--agua-2)}
.seasons,.band-alt .seasons{background:var(--agua-2); border-color:var(--line-2)}
.amap{background:var(--agua-2); border-color:var(--line-2)}
.amap figcaption{border-top-color:var(--line)}
.aptshots figure{background:var(--agua-2)}
.aptshots figcaption{color:var(--ink-2)}
.pull{background:var(--agua-2); border-left-color:var(--mar)}
.gmap-card{background:var(--agua-2); border-color:var(--line-2)}
.gmap-card:hover{background:#B7D6E0}
.gmap iframe{background:var(--agua-2); border-color:var(--line-2)}

/* Calendário e legenda */
.day:hover:not(:disabled),.band-alt .day:hover:not(:disabled){background:var(--agua-2)}
.lg-free,.band-alt .lg-free{background:var(--ground); border-color:var(--line-2)}
.day.booked,.lg-book{background:repeating-linear-gradient(135deg, var(--line) 0 4px, transparent 4px 8px)}
.day:disabled{opacity:.7}

/* Mapas desenhados: sem branco, estradas em azul muito claro */
.amap .route-halo{stroke:var(--map-road)}
.amap .stepdot circle,.amap .pin path{stroke:var(--map-road)}
.amap .pin .pin-dot{fill:var(--map-road)}
.amap .tag rect{fill:var(--surface); stroke:var(--line-2)}
.amap .tag-s{fill:var(--ink-3)}
.dial .ring{stroke:var(--line-2)}
.dial .spoke{stroke:var(--line)}

/* Barra de navegação e barra fixa do telemóvel */
.nav.solid,.stick{background:var(--ground); background:color-mix(in srgb, var(--ground) 95%, transparent); border-color:var(--line)}
.navlink:hover,.navlink.active,.btn-ghost:hover,.navb:hover,.chip:hover{background:var(--agua-2)}

/* Toldo: riscas pinheiro e azul ria */
.stripes{background:repeating-linear-gradient(90deg, var(--pinho) 0 30px, var(--ground) 30px 60px)}

/* ============================================================
   VOUCHERS, PAGAMENTO E AVALIAÇÃO — 9/10/2026
   ============================================================ */
.hp{position:absolute !important; left:-9999px; width:1px; height:1px; opacity:0}

/* Os três descontos, numa linha sobre o azul-mar */
.offers{margin:0 0 clamp(32px,4vw,48px)}
.offers ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--on-deep-line); border-bottom:1px solid var(--on-deep-line)}
.offers li{display:flex; gap:16px; align-items:flex-start; padding:20px 22px 20px 0}
.offers li + li{padding-left:22px; border-left:1px solid var(--on-deep-line)}
.offers .pct{font-family:var(--serif); font-weight:500; font-size:44px; line-height:.95; color:var(--sol-2); flex:none; min-width:2.4ch}
.offers .tx{font-size:15px; line-height:1.5; color:var(--on-deep-2)}
.offers .tx b{display:block; font-weight:500; color:#fff; font-size:16px; margin-bottom:2px}
.offers code{font-family:var(--sans); font-size:12.5px; font-weight:500; letter-spacing:.04em; color:var(--mar); background:var(--sol-2); border-radius:2px; padding:1px 6px; margin-left:4px; white-space:nowrap}
.offers a{color:#fff; text-decoration:underline; text-underline-offset:3px}
.offers a:hover{color:var(--sol-2)}
.offers .nocomb,.qinfo{display:flex; gap:9px; align-items:flex-start; margin:14px 0 0; font-size:14.5px; color:#fff}
.offers .nocomb .ico{color:var(--sol-2); flex:none; margin-top:3px}
@media (max-width:860px){
  .offers ul{grid-template-columns:minmax(0,1fr)}
  .offers li,.offers li + li{padding:16px 0; border-left:0}
  .offers li + li{border-top:1px solid var(--on-deep-line)}
}

/* No orçamento */
.qnocomb{margin:12px 0 0; font-size:13px; color:var(--on-deep-2)}
.qinfo{font-size:13.5px; color:var(--on-deep-2); margin-top:10px}
.qinfo .ico{color:var(--sol-2); flex:none; margin-top:2px}

/* Campo do voucher */
.vrow{display:flex; gap:8px}
.vrow input{flex:1; min-width:0; text-transform:uppercase; letter-spacing:.06em}
.vrow input::placeholder{text-transform:none; letter-spacing:0}
.vrow .btn{flex:none}
.vstatus{margin:6px 0 0; font-size:13.5px; line-height:1.45; color:var(--on-deep-2); min-height:0}
.vstatus:empty{display:none}
.vstatus[data-kind="ok"]{color:#BFE8C9}
.vstatus[data-kind="err"]{color:#F6DDA6}

/* Zona de pagamento */
.pay{margin-top:clamp(40px,5vw,64px); padding-top:clamp(28px,4vw,40px); border-top:1px solid var(--on-deep-line)}
.pay-head h3{font-family:var(--serif); font-weight:500; font-size:clamp(26px,3vw,34px); line-height:1.12; color:#fff; margin:0 0 8px}
.pay-head p{color:var(--on-deep-2); max-width:62ch; margin:0 0 22px}
.pay-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,4vw,56px); align-items:start}
.iban{background:var(--mar-2); border:1px solid var(--on-deep-line); border-radius:3px; padding:clamp(20px,3vw,28px); display:grid; gap:6px; justify-items:start}
.iban .lbl{font-size:13px; color:var(--on-deep-2)}
.iban .lbl + .iban-ref{margin-bottom:0}
.iban-n{font-family:var(--sans); font-size:clamp(19px,2.2vw,24px); font-weight:500; letter-spacing:.04em; color:#fff; word-break:break-word; margin-bottom:8px; user-select:all}
.iban .btn{margin-bottom:14px}
.iban-ref{font-size:15.5px; color:#fff}
.pay-amounts .prow{display:flex; align-items:baseline; gap:12px; padding:13px 0; border-top:1px solid var(--on-deep-line)}
.pay-amounts .prow:first-child{border-top:0; padding-top:4px}
.pay-amounts .l{flex:1; color:#fff; font-size:16px}
.pay-amounts .l i{display:block; font-style:normal; font-size:13px; color:var(--on-deep-2)}
.pay-amounts .v{font-size:22px; color:#fff; white-space:nowrap}
.pay-amounts .tot .l{color:var(--on-deep-2)}
.pay-amounts .tot .v{font-size:17px; color:var(--on-deep-2)}
.pay-empty,.pay-dep{color:var(--on-deep-2); font-size:14.5px; margin:0}
.pay-dep{margin-top:10px; font-size:13.5px}
.paynote{display:flex; gap:9px; align-items:flex-start; margin:22px 0 0; font-size:14.5px; color:#fff}
.paynote .ico{color:var(--sol-2); flex:none; margin-top:3px}
@media (max-width:860px){ .pay-grid{grid-template-columns:minmax(0,1fr)} }

/* Avaliação: secção clara, campos claros */
#avaliar{background:var(--ground)}
.review-grid{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,4.6vw,64px); align-items:start}
.review-grid .head{margin-bottom:0}
.rv-small{font-size:14.5px; color:var(--ink-3); margin-top:14px; max-width:46ch}
#avaliar .field label,#avaliar .field legend{color:var(--ink-2)}
#avaliar .field input,#avaliar .field textarea{background-color:var(--surface); color:var(--ink); border-color:var(--line-2)}
#avaliar .field input::placeholder,#avaliar .field textarea::placeholder{color:var(--ink-3); opacity:.85}
#avaliar .field input:focus,#avaliar .field textarea:focus{outline-color:var(--mar)}
#avaliar .field input[type="month"]{color-scheme:light}
#avaliar .sent{background:var(--agua-2); border-color:var(--line-2); color:var(--ink)}
#avaliar .sent .ico{color:var(--mar)}
#avaliar .sent a{color:var(--mar)}
fieldset.stars{border:0; margin:0; padding:0; min-width:0}
fieldset.stars legend{font-family:var(--sans); font-size:13px; font-weight:500; padding:0; margin-bottom:6px}
.stars-row{display:inline-flex; flex-direction:row-reverse; gap:2px}
.stars-row input{position:absolute; opacity:0; width:1px; height:1px}
.stars-row label{font-size:30px; line-height:1; color:var(--line-2); cursor:pointer; padding:4px 3px; transition:color .15s}
.stars-row input:checked ~ label,.stars-row label:hover,.stars-row label:hover ~ label{color:#C98F1E}
.stars-row input:focus-visible + label{outline:2px solid var(--mar); outline-offset:2px; border-radius:2px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14.5px; color:var(--ink-2); cursor:pointer}
.check input{margin-top:4px; accent-color:var(--mar); width:16px; height:16px; flex:none}
@media (max-width:860px){ .review-grid{grid-template-columns:minmax(0,1fr)} }
.offers .pct,.h2-num{font-variant-numeric:lining-nums}
.offers .tx .kw{color:var(--sol-2); font-weight:600; letter-spacing:.03em}

/* ============================================================
   LUXO · CÉU LIMPO — 14/10/2026
   Linguagem Apple / "Oblivion": luz fria sobre a Ria Formosa,
   vidro fosco, muito espaço e letra fina. Uma só família de
   letra (Inter, alojada no próprio site), em dois cortes:
   Display fino para títulos, Text para ler.
   O fundo continua azul (o proprietário não quer branco).
   ============================================================ */
@font-face{font-family:"EL Display"; src:url("fonts/InterDisplay-ExtraLight.woff") format("woff"); font-weight:200; font-style:normal; font-display:swap}
@font-face{font-family:"EL Display"; src:url("fonts/InterDisplay-Light.woff") format("woff"); font-weight:300; font-style:normal; font-display:swap}
@font-face{font-family:"EL Text"; src:url("fonts/Inter-Regular.woff") format("woff"); font-weight:400; font-style:normal; font-display:swap}
@font-face{font-family:"EL Text"; src:url("fonts/Inter-Medium.woff") format("woff"); font-weight:500; font-style:normal; font-display:swap}
@font-face{font-family:"EL Text"; src:url("fonts/Inter-SemiBold.woff") format("woff"); font-weight:600; font-style:normal; font-display:swap}

:root{
  --display:"EL Display", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text:"EL Text", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif:var(--display); --sans:var(--text); --mono:var(--text);

  --ground:#D6E4EA;   /* névoa da ria: fundo de leitura */
  --agua:#C9DBE3;     /* maré: secções alternadas */
  --agua-2:#C3D6DF;   /* painéis */
  --surface:#DFEAEE;  /* campos */
  --surface-2:#C3D6DF;
  --line:rgba(13,38,48,.12); --line-2:rgba(13,38,48,.2);
  --ink:#0D2630; --ink-2:#27434F; --ink-3:#3B5965; --ink-box:#27434F;
  --accent:#17596B; --accent-ink:#fff; --accent-soft:#AFCBD6; --accent-line:#7FA9B9;
  --night:#0B2733; --night-2:#12384A; --mist:#B9CDD5;
  --mar:var(--night); --mar-2:var(--night-2); --mar-3:#08202A; --deep:var(--night);
  --on-deep-2:var(--mist); --on-deep-line:rgba(255,255,255,.14);
  --glass:rgba(214,228,234,.72); --glass-dark:rgba(11,39,51,.52);
  --r-xl:28px; --r-lg:22px; --r-md:14px; --r-sm:10px;
  --ease:cubic-bezier(.22,.7,.18,1);
  --wrap:1200px;
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--text); font-size:17px; line-height:1.6; letter-spacing:-.006em; color:var(--ink); background:var(--ground); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"cv11","ss01"}
.num{font-family:var(--text); font-feature-settings:"tnum","lnum"}
::selection{background:#AFCBD6; color:var(--ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:6px}
.wrap{padding-inline:clamp(20px,4vw,40px)}
.band{padding-block:clamp(88px,11vw,152px)}

/* Títulos: Display fino, grande, apertado */
.head{gap:16px; margin-bottom:clamp(40px,5vw,64px); max-width:24ch}
.head h2,.hero h1,.album-top h2,.arrive-head h3,.gmap-head h4,.pay-head h3,.quote h3,.foot .fb,.interlude p{
  font-family:var(--display); font-weight:200; font-style:normal; letter-spacing:-.035em; text-transform:none;
}
.head h2{font-size:clamp(2.6rem,5.6vw,4.6rem); line-height:1.03}
.head p{font-size:clamp(17px,1.5vw,19px); line-height:1.55; color:var(--ink-2); max-width:56ch; letter-spacing:-.01em}
.head:has(p){max-width:60ch}
.eyebrow,.hero .eyebrow,.book .eyebrow{font-family:var(--text); font-style:normal; font-weight:500; font-size:15px; letter-spacing:-.005em; text-transform:none; color:var(--accent)}
.amen section h3,.poi h3,.foot h4,.sleep .tag,.fact dt,.seasons h3{font-family:var(--text); font-style:normal; text-transform:none; letter-spacing:-.005em}
.prose{font-size:18px; line-height:1.65; gap:20px; color:var(--ink-2)}
.prose strong{font-weight:500; color:var(--ink)}

/* ---------- navegação: barra de vidro ---------- */
.nav{padding:0 clamp(16px,3vw,32px); height:60px; gap:20px; border-bottom:1px solid transparent; transition:background .4s var(--ease), border-color .4s var(--ease)}
.nav.solid{background:var(--glass); backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6); border-bottom-color:rgba(13,38,48,.08); padding-block:0}
.brand{flex-direction:row; align-items:baseline; gap:10px}
.brand b{font-family:var(--display); font-weight:300; font-size:19px; letter-spacing:-.02em}
.brand span{font-family:var(--text); font-size:12px; letter-spacing:0; text-transform:none}
.navlinks{gap:0}
.navlink{font-size:13.5px; padding:7px 12px; border-radius:999px; color:var(--ink-2); letter-spacing:-.005em}
.navlink:hover,.navlink.active{background:rgba(13,38,48,.06); color:var(--ink)}
.lang{border:0; background:rgba(13,38,48,.07); border-radius:999px; padding:3px}
.lang button{font-family:var(--text); font-size:12px; font-weight:500; letter-spacing:0; padding:5px 11px; border-radius:999px; color:var(--ink-2)}
.lang button[aria-pressed="true"]{background:var(--ink); color:#fff}
.nav.over .lang{background:rgba(255,255,255,.16)}
.nav.over .lang button[aria-pressed="true"]{background:#fff; color:var(--ink)}
.nav .btn-sm{padding:8px 16px}
.menubtn{border:0; background:rgba(13,38,48,.07); border-radius:999px; width:40px; height:40px; padding:0; color:var(--ink)}
.nav.over .menubtn{background:rgba(255,255,255,.16); color:#fff; border:0}

/* ---------- botões: cápsulas ---------- */
.btn{font-family:var(--text); font-weight:500; font-size:15px; letter-spacing:-.01em; border-radius:999px; padding:13px 26px; border:1px solid transparent;
  background:var(--ink); color:#fff; transition:background .25s var(--ease), color .25s var(--ease), transform .25s var(--ease)}
.btn:hover{background:#163a47; filter:none}
.btn:active{transform:scale(.98)}
.btn-sm{padding:9px 18px; font-size:13.5px}
.btn-ghost{background:transparent; color:var(--ink); border-color:rgba(13,38,48,.28)}
.btn-ghost:hover{background:rgba(13,38,48,.06)}
.btn-light{background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.btn-light:hover{background:rgba(255,255,255,.24)}
.nav.over .btn-ghost{color:#fff; border-color:rgba(255,255,255,.45)}

/* ---------- herói: a fotografia inteira, o texto ao centro ---------- */
.hero{min-height:100vh; min-height:100svh; align-items:center; justify-content:center; text-align:center; background:var(--night)}
.hero::after{background:linear-gradient(180deg, rgba(6,26,34,.46) 0%, rgba(6,26,34,.16) 34%, rgba(6,26,34,.30) 66%, rgba(6,26,34,.72) 100%)}
.hero-img{animation:el-zoom 2.6s var(--ease) both}
.hero-inner{display:flex; flex-direction:column; align-items:center; padding:120px clamp(20px,4vw,40px) 190px}
.hero .eyebrow{color:rgba(255,255,255,.86); font-size:16px}
.hero h1{font-size:clamp(2.9rem,8vw,7rem); line-height:.98; letter-spacing:-.045em; max-width:13ch; margin:18px auto 0; text-shadow:0 2px 40px rgba(0,0,0,.25)}
.hero h1 em{font-style:normal; color:inherit; display:block}
.hero-sub{margin:24px auto 0; max-width:52ch; font-size:clamp(16.5px,1.6vw,19px); line-height:1.55; color:rgba(255,255,255,.88)}
.hero-row{justify-content:center; margin-top:34px; gap:12px}
.hero .btn:not(.btn-light){background:#fff; color:var(--ink)}
.hero .btn:not(.btn-light):hover{background:#E6EFF2}
.score{order:3; flex-basis:100%; justify-content:center; background:none; border:0; padding:0; margin-top:8px; font-size:14px; color:rgba(255,255,255,.82)}
.score b{background:none; color:#fff; padding:0; font-size:14px; font-weight:600}
.score i{color:rgba(255,255,255,.7)}
.hero-inner > *{animation:el-rise 1.1s var(--ease) both}
.hero-inner > :nth-child(1){animation-delay:.25s}
.hero-inner > :nth-child(2){animation-delay:.4s}
.hero-inner > :nth-child(3){animation-delay:.55s}
.hero-inner > :nth-child(4){animation-delay:.7s}
@keyframes el-zoom{from{transform:scale(1.08)} to{transform:scale(1)}}
@keyframes el-rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

/* Factos: um painel de vidro que pousa no fundo da fotografia */
.facts{background:transparent; border:0; position:relative; z-index:3; margin-top:-148px; padding-inline:clamp(16px,4vw,40px); color:#fff; animation:el-rise 1.1s var(--ease) .9s both}
.facts-grid{background:var(--glass-dark); backdrop-filter:blur(26px) saturate(1.4); -webkit-backdrop-filter:blur(26px) saturate(1.4);
  border:1px solid rgba(255,255,255,.16); border-radius:var(--r-lg); overflow:hidden; max-width:var(--wrap); box-shadow:0 30px 80px -40px rgba(6,26,34,.6)}
.fact{padding:22px 22px; border-left-color:rgba(255,255,255,.12)}
.fact dt{font-size:12.5px; font-weight:500; color:rgba(255,255,255,.7); letter-spacing:0}
.fact dd{color:rgba(255,255,255,.75); font-size:13.5px}
.fact dd b{font-family:var(--display); font-weight:300; font-size:26px; letter-spacing:-.025em; line-height:1.15; color:#fff}

/* ---------- secções ---------- */
.band-alt,#apartamento,#localizacao,#disponibilidade,#avaliar{background:var(--ground)}
#comodidades,#locais,#saber{background:var(--agua)}
#apartamento{padding-top:clamp(120px,14vw,190px)}
.stripes{display:none}

/* O apartamento */
.aptshots{gap:18px}
.aptshots figure{border-radius:var(--r-lg); background:transparent}
.aptshots img{border-radius:var(--r-lg)}
.aptshots figcaption{font-family:var(--text); font-style:normal; font-size:13.5px; color:var(--ink-3); padding:10px 4px 0; background:none}
.pull{background:none; border:0; padding:6px 0 6px 0; font-family:var(--display); font-weight:300; font-size:clamp(1.6rem,2.6vw,2.15rem); line-height:1.25; letter-spacing:-.025em; color:var(--ink)}

/* Quartos e salas: cinco painéis soltos */
.sleep,.band-alt .sleep{gap:14px; background:none; border:0; border-radius:0; overflow:visible; margin-top:clamp(48px,6vw,80px); grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sleep > div,.band-alt .sleep > div{background:var(--agua-2); border-radius:var(--r-lg); padding:26px 24px 28px; gap:8px}
.sleep .tag{font-size:13px; font-weight:500; color:var(--accent)}
.sleep h4{font-family:var(--display); font-weight:300; font-size:22px; letter-spacing:-.02em; line-height:1.2; color:var(--ink)}
.sleep h4 .ico{display:none}
.sleep p{font-size:15px; color:var(--ink-2)}

/* Intervalos de fotografia */
.interlude{min-height:clamp(420px,78vh,820px); align-items:center; justify-content:center; text-align:center}
.interlude::after{background:linear-gradient(180deg, rgba(6,26,34,.05) 30%, rgba(6,26,34,.5) 100%)}
.interlude p{font-size:clamp(2.2rem,5.4vw,4.4rem); line-height:1.04; color:#fff; margin:0 auto; padding:0 24px; text-shadow:0 2px 40px rgba(0,0,0,.3)}
.interlude p span{max-width:18ch; margin:0 auto}

/* Galeria e álbum: noite */
#galeria,.album{background:var(--night)}
#galeria .head h2,.album-top h2{color:#fff}
#galeria .head p{color:var(--mist)}
#galeria .eyebrow{color:#8FC3D3}
.gal{gap:12px}
.gal button{border-radius:var(--r-md); overflow:hidden}
.gal button.big{border-radius:var(--r-lg)}
.album .gal button{border-radius:var(--r-md)}
.album-top{background:rgba(11,39,51,.86); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px)}
.chip{border-radius:999px; font-family:var(--text); font-size:13.5px; padding:7px 15px}
#galeria .chip,.album .chip{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); color:var(--mist)}
#galeria .chip[aria-pressed="true"],.album .chip[aria-pressed="true"]{background:#fff; border-color:#fff; color:var(--ink)}
.chip .n{font-family:var(--text); opacity:.7}
.gal-more .btn{background:#fff; color:var(--ink)}
.gal-more .btn:hover{background:#E6EFF2}
.album-x{width:40px; height:40px; background:rgba(255,255,255,.1); border:0}
.lb{background:rgba(6,26,34,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.lb-x,.lb-nav{border:0; background:rgba(255,255,255,.12)}

/* Comodidades e À sua volta: listas leves */
.amen{gap:44px 36px}
.amen section h3,.poi h3{font-size:15px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:12px; margin-bottom:6px}
.amen li,#comodidades .amen li,#locais .poi li{border-bottom-color:var(--line); font-size:15.5px}
.poi .d,.dist .row .v{font-family:var(--text); font-feature-settings:"tnum"}

/* Localização */
.dial .plab{font-family:var(--text); font-weight:500}
.dial .ringlab,.dial .pdist{font-family:var(--text)}
.dialnote{font-family:var(--text); font-style:normal; font-size:13px; color:var(--ink-3)}
.arrive{border-top:0; padding-top:clamp(40px,5vw,64px)}
.arrive-head h3{font-size:clamp(2rem,3.8vw,3rem); line-height:1.06; color:var(--ink)}
.gmap-head h4{font-size:clamp(1.3rem,2vw,1.6rem); font-weight:300; letter-spacing:-.02em}
.gmap iframe,.gmap-card{border-radius:var(--r-lg); border:0; background:var(--agua-2)}
.gmap figcaption{font-size:13px}
.steps{border-top:0}
.steps li{border-bottom-color:var(--line)}
.steps .n{background:var(--ink); color:#fff; font-family:var(--text); font-weight:500; font-size:13px; width:28px; height:28px}
.steps b{font-weight:500}

/* Disponibilidade */
.months{gap:clamp(24px,4vw,56px)}
.month h4{font-family:var(--display); font-weight:300; font-size:20px; letter-spacing:-.02em; text-transform:none}
.dow span{font-family:var(--text); font-size:11.5px; letter-spacing:0; text-transform:none; font-weight:500}
.days{gap:3px}
.day{border-radius:999px; font-family:var(--text); font-size:14px}
.day.inrange{border-radius:0; background:var(--accent-soft)}
.day.rstart{border-radius:999px 0 0 999px}
.day.rend{border-radius:0 999px 999px 0}
.day.sel{background:var(--ink); color:#fff}
.day.booked,.lg-book{background:repeating-linear-gradient(135deg, rgba(13,38,48,.14) 0 3px, transparent 3px 7px); border-radius:999px}
.navb{border-radius:999px; border:0; background:rgba(13,38,48,.07); width:38px; height:38px}
.legend{border-top-color:var(--line)}
.legend i{border-radius:999px}
.seasons,.band-alt .seasons{background:var(--agua-2); border:0; border-radius:var(--r-lg); overflow:hidden}
.seasons h3{font-family:var(--display); font-weight:300; font-size:24px; letter-spacing:-.02em; color:var(--ink); padding:22px 22px 12px}
.seasons .r{padding:13px 22px; border-color:var(--line)}
.seasons .r .p{font-family:var(--display); font-weight:300; font-size:21px; letter-spacing:-.02em}
.seasons .meta{padding:16px 22px 20px; border-color:var(--line)}
.demo{font-family:var(--text)}

/* ---------- reserva: noite com um leve horizonte ---------- */
.book{background:linear-gradient(180deg, var(--night-2) 0%, var(--night) 46%)}
.book .head h2{color:#fff}
.book .head p{color:var(--mist)}
.book .eyebrow{color:#8FC3D3}
.offers ul{border:0; gap:12px}
.offers li,.offers li + li{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-lg); padding:24px 24px}
.offers .pct{font-family:var(--display); font-weight:200; font-size:52px; letter-spacing:-.04em; color:#fff}
.offers code{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:999px; font-family:var(--text); padding:1px 9px}
.offers .tx .kw{color:#fff; font-weight:600}
.offers .nocomb .ico{color:#8FC3D3}
.quote{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--r-xl); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px)}
.quote h3{font-size:30px; color:#fff}
.qtotal .v{font-family:var(--display); font-weight:300; font-size:38px; letter-spacing:-.03em}
.qrow .v{font-family:var(--text); font-feature-settings:"tnum"}
.qwarn{border-radius:var(--r-sm); border-left:0; background:rgba(255,255,255,.08); color:#F3E2B8}
.field label{font-family:var(--text); font-size:13px; font-weight:500; letter-spacing:0; text-transform:none}
.field input,.field select,.field textarea{border-radius:12px; padding:13px 15px; font-size:16px; background-color:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid #8FC3D3; outline-offset:1px}
.book .btn:not(.btn-light){background:#fff; color:var(--ink)}
.book .btn:not(.btn-light):hover{background:#E6EFF2}
.book .btn-light{background:transparent; border-color:rgba(255,255,255,.3); color:#fff}
.sent{border-radius:var(--r-md)}
.pay{border-top-color:rgba(255,255,255,.1)}
.pay-head h3{font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.06}
.iban{border-radius:var(--r-lg); background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1)}
.iban-n{font-family:var(--display); font-weight:300; letter-spacing:.02em}
.pay-amounts .v{font-family:var(--display); font-weight:300; font-size:26px; letter-spacing:-.02em}
.paynote .ico{color:#8FC3D3}
.vstatus[data-kind="ok"]{color:#BDE6CC}

/* Avaliação */
#avaliar .field input,#avaliar .field textarea{background-color:var(--surface); border-color:rgba(13,38,48,.14)}
#avaliar .field input:focus,#avaliar .field textarea:focus{outline-color:var(--accent)}
#avaliar .sent{background:var(--agua-2); border:0}
.stars-row label{color:rgba(13,38,48,.22)}
.stars-row input:checked ~ label,.stars-row label:hover,.stars-row label:hover ~ label{color:var(--ink)}
.rv-small{color:var(--ink-3)}

/* O que deve saber */
.rules .r{border-bottom-color:var(--line)}
.rules .r b{font-weight:500}
.faq,.faq details{border-color:var(--line)}
.faq summary{font-family:var(--text); font-weight:500; font-size:16.5px; letter-spacing:-.01em; padding-block:20px}

/* Rodapé */
.foot{background:var(--mar-3); padding-block:clamp(64px,8vw,96px) 40px}
.foot .fb{font-size:30px; color:#fff}
.foot h4{font-size:13px; font-weight:500; color:var(--mist)}
.foot a:hover{color:#8FC3D3}

/* Barra fixa do telemóvel: cápsula de vidro */
.stick{left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); inset:auto 12px calc(12px + env(safe-area-inset-bottom)) 12px;
  padding:10px 10px 10px 20px; border-radius:var(--r-lg); border:1px solid rgba(255,255,255,.5);
  background:var(--glass); backdrop-filter:blur(24px) saturate(1.6); -webkit-backdrop-filter:blur(24px) saturate(1.6); box-shadow:0 18px 50px -20px rgba(6,26,34,.45)}
.stick .p b{font-family:var(--display); font-weight:300; font-size:20px; letter-spacing:-.02em}
.stick .btn{padding:11px 18px}

/* ---------- menu do telemóvel e iPad: folha de vidro ---------- */
@media (max-width:1260px){
  .navlinks{display:none}
  .menubtn{display:grid; place-items:center}
  .nav.menu-open{background:var(--glass); backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6)}
  .nav.menu-open .navlinks{display:flex; flex-direction:column; position:absolute; top:64px; left:12px; right:12px; padding:10px;
    background:var(--glass); backdrop-filter:blur(26px) saturate(1.6); -webkit-backdrop-filter:blur(26px) saturate(1.6);
    border:1px solid rgba(255,255,255,.5); border-radius:var(--r-lg); box-shadow:0 24px 60px -24px rgba(6,26,34,.5)}
  .nav.menu-open .navlink{font-size:18px; padding:14px 16px; border-radius:var(--r-md); color:var(--ink)}
  .nav.menu-open .brand b,.nav.menu-open .brand span{color:var(--ink)}
  .nav.menu-open .lang{background:rgba(13,38,48,.07)}
  .nav.menu-open .lang button{color:var(--ink-2)}
  .nav.menu-open .lang button[aria-pressed="true"]{background:var(--ink); color:#fff}
  .nav.menu-open .menubtn{background:rgba(13,38,48,.07); color:var(--ink)}
  .nav.menu-open .btn-ghost{color:var(--ink); border-color:rgba(13,38,48,.28)}
}

/* ---------- iPad (até 1100 px) ---------- */
@media (max-width:1100px){
  .facts-grid{grid-template-columns:repeat(3,1fr)}
  .fact:nth-child(3n+1){border-left:0}
  .fact:nth-child(n+4){border-top:1px solid rgba(255,255,255,.12)}
  .apt,.loc,.know,.bookgrid,.calwrap,.review-grid{grid-template-columns:minmax(0,1fr)}
  .aptshots{position:static; grid-template-columns:1fr 1fr}
  .calwrap .seasons{max-width:560px}
  .hero-inner{padding-bottom:230px}
  .facts{margin-top:-196px}
}

/* ---------- telemóvel (até 700 px) ---------- */
@media (max-width:700px){
  body{font-size:16.5px}
  .nav{height:56px}
  .brand span{display:none}
  .brand b{font-size:17px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .nav .btn-sm{display:none}
  .nav.menu-open .navlinks{top:60px}
  .hero{min-height:100svh}
  .hero-inner{padding:96px 20px 300px}
  .hero h1{font-size:clamp(2.7rem,12.5vw,3.6rem); letter-spacing:-.04em}
  .hero-sub{font-size:16.5px}
  .hero-row{flex-direction:column; align-items:stretch; width:100%; max-width:360px; margin-inline:auto}
  .hero-row .btn{width:100%; justify-content:center}
  .facts{margin-top:-272px; padding-inline:12px}
  .facts-grid{grid-template-columns:repeat(2,1fr); border-radius:var(--r-lg)}
  .fact{padding:16px 16px; border-left:1px solid rgba(255,255,255,.12)}
  .fact:nth-child(odd){border-left:0}
  .fact:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .fact:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.12)}
  .fact:nth-child(odd){border-left:0}
  .fact dd b{font-size:21px}
  #apartamento{padding-top:96px}
  .band{padding-block:80px}
  .head h2{font-size:clamp(2.3rem,10vw,3rem)}
  .aptshots{grid-template-columns:1fr}
  .sleep,.band-alt .sleep{grid-template-columns:1fr}
  .interlude{min-height:62vh}
  .gal{gap:8px}
  .gal button,.gal button.big{border-radius:var(--r-sm)}
  .offers li,.offers li + li{padding:20px}
  .offers .pct{font-size:42px}
  .quote{border-radius:var(--r-lg)}
  .pay-head h3{font-size:2.1rem}
  .iban-n{font-size:20px}
  .stick{display:flex}
  .foot{padding-bottom:120px}
}

@media (prefers-reduced-motion: reduce){
  .hero-img,.hero-inner > *,.facts{animation:none}
}

/* afinações 14/10 */
.hero h1{font-size:clamp(2.9rem,6.4vw,5.8rem); max-width:20ch}
@media (max-width:1260px){
  .nav.menu-open .navlinks{background:#D6E4EA}
}
@media (max-width:1360px){ .brand span{display:none} }
.nav .btn-sm{white-space:nowrap}
.stick{transition:transform .5s var(--ease), opacity .4s var(--ease)}
body:not(.past-hero) .stick{transform:translateY(140%); opacity:0; pointer-events:none}
@media (max-width:700px){
  .hero h1{font-size:clamp(2.5rem,11vw,3.3rem)}
}
@media (max-width:1260px) and (min-width:701px){
  .nav.menu-open .navlinks{left:auto; right:16px; width:min(380px, calc(100% - 32px))}
}

/* ============================================================
   OBLIVION — 14/10/2026 (tarde)
   Um ecrã de bordo sobre a Ria Formosa: linhas finas, cantos de
   mira, telemetria em maiúsculas espaçadas, gelo ciano nas zonas
   de noite e um radar na localização. Fundo de leitura continua azul.
   ============================================================ */
:root{
  --glow:#A6E3F2;            /* gelo ciano: só nas zonas de noite */
  --glow-line:rgba(166,227,242,.32);
  --grid:rgba(166,227,242,.045);
  --tele:500 11px/1.3 var(--text);
}

/* Telemetria: maiúsculas finas, muito espaçadas, com um traço antes */
.eyebrow,.book .eyebrow,#galeria .eyebrow{font:var(--tele); letter-spacing:.28em; text-transform:uppercase; display:flex; align-items:center; gap:14px}
.eyebrow::before{content:""; width:32px; height:1px; background:currentColor; opacity:.55; flex:none}
.hero .eyebrow{justify-content:center; font-size:12px; letter-spacing:.5em; color:rgba(255,255,255,.88)}
.hero .eyebrow::before{display:none}
.brand b{font-family:var(--display); font-weight:300; font-size:14px; letter-spacing:.34em; text-transform:uppercase}
.brand span{font:var(--tele); letter-spacing:.2em; text-transform:uppercase; font-size:10px}
.navlink{font:var(--tele); letter-spacing:.16em; text-transform:uppercase; font-size:10.5px; padding:9px 12px}
.lang button{font:var(--tele); letter-spacing:.14em; font-size:10.5px}

/* Botões: cápsula fina, texto em telemetria */
.btn{font:var(--tele); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; padding:16px 28px}
.btn-sm,.nav .btn-sm{font-size:10.5px; letter-spacing:.16em; padding:10px 18px}
.chip{font:var(--tele); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; padding:8px 15px}
.chip .n{letter-spacing:.06em}

/* Herói: mira e telemetria */
.hero h1{font-weight:200; letter-spacing:-.05em}
.hud{position:absolute; inset:84px clamp(16px,3vw,32px) auto; height:calc(100% - 84px - 170px); pointer-events:none; z-index:1}
.hud-c{position:absolute; width:26px; height:26px; border-color:rgba(255,255,255,.55); border-style:solid; border-width:0}
.hud-c.tl{top:0; left:0; border-top-width:1px; border-left-width:1px}
.hud-c.tr{top:0; right:0; border-top-width:1px; border-right-width:1px}
.hud-l,.hud-r{position:absolute; top:40px; display:flex; flex-direction:column; gap:6px; font:var(--tele); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.72)}
.hud-l{left:0}
.hud-r{right:0; text-align:right}
#hud-time{font-family:var(--display); font-weight:200; font-size:34px; letter-spacing:.02em; color:#fff; line-height:1}
.hud-l span:first-child,.hud-l span:last-child{font-feature-settings:"tnum"}

/* Factos: linha de gelo no topo, rótulos em telemetria */
.facts-grid{border-top:1px solid var(--glow-line)}
.fact dt{font:var(--tele); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.fact dd b{font-weight:200; font-size:30px}

/* Zonas de noite: grelha quase invisível, como um ecrã */
#galeria,.book,#localizacao,.album{
  background-color:var(--night);
  background-image:
    radial-gradient(ellipse 80% 60% at 70% 0%, rgba(166,227,242,.07), transparent 70%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:auto, 64px 64px, 64px 64px;
}
#galeria .eyebrow,.book .eyebrow,#localizacao .eyebrow{color:var(--glow)}
.gal button{outline:1px solid transparent; outline-offset:3px; transition:outline-color .3s var(--ease)}
.gal button:hover,.gal button:focus-visible{outline-color:var(--glow-line)}

/* ---------- Localização: o radar ---------- */
#localizacao{color:#fff}
#localizacao .head h2,#localizacao .arrive-head h3,#localizacao .gmap-head h4{color:#fff}
#localizacao .head p,#localizacao .route-lead,#localizacao .gmap figcaption,#localizacao .dialnote{color:var(--mist)}
.dial .ring{stroke:var(--glow-line); stroke-width:1}
.dial .axis{stroke:rgba(166,227,242,.14); stroke-width:1; stroke-dasharray:2 6}
.dial .spoke{stroke:rgba(166,227,242,.16)}
.dial .ringlab{fill:rgba(166,227,242,.75); font:var(--tele); font-size:9px; letter-spacing:.18em}
.dial .dot{fill:var(--glow); filter:drop-shadow(0 0 4px rgba(166,227,242,.9))}
.dial .home{fill:#fff; stroke:var(--glow); stroke-width:3; filter:drop-shadow(0 0 8px rgba(166,227,242,.9))}
.dial .plab{fill:#fff; font-family:var(--text); font-weight:500; font-size:11.5px}
.dial .pdist{fill:rgba(255,255,255,.6); font-family:var(--text); font-size:10px}
.dial .sweep{animation:el-sweep 9s linear infinite}
@keyframes el-sweep{to{transform:rotate(360deg)}}
.dist{border-top:0}
.dist h3{font:var(--tele); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--glow); margin:28px 0 6px}
.dist .row{border-bottom-color:rgba(255,255,255,.1)}
.dist .row .nm{color:#fff}
.dist .row .nm span{color:var(--mist)}
.dist .row .v,.dist .row .v b{color:#fff; font-weight:400}
.dist-note{padding:10px 0; color:var(--mist); font-size:15px}
#localizacao .steps li{border-bottom-color:rgba(255,255,255,.1)}
#localizacao .steps b{color:#fff}
#localizacao .steps p{color:var(--mist)}
#localizacao .steps .n{background:transparent; color:var(--glow); border:1px solid var(--glow-line); font-weight:500}
#localizacao .gmap iframe,#localizacao .gmap-card{border:1px solid var(--glow-line); background:var(--night-2)}
#localizacao .gmap-card{color:#fff}
#localizacao .btn:not(.btn-ghost){background:#fff; color:var(--ink)}
#localizacao .btn-ghost{color:#fff; border-color:rgba(255,255,255,.35)}
#localizacao .btn-ghost:hover{background:rgba(255,255,255,.08)}

/* Painéis claros: moldura fina e cantos de mira discretos */
.sleep > div,.band-alt .sleep > div,.seasons,.band-alt .seasons{position:relative; border:1px solid rgba(13,38,48,.08)}
.sleep > div::before{content:""; position:absolute; top:12px; right:12px; width:10px; height:10px; border-top:1px solid rgba(13,38,48,.3); border-right:1px solid rgba(13,38,48,.3)}
.sleep .tag{font:var(--tele); font-size:10px; letter-spacing:.22em; text-transform:uppercase}
.seasons h3{font-weight:200}
.seasons-note{padding:12px 22px 0; margin:0; font-size:13px; line-height:1.5; color:var(--ink-3)}
.seasons .r .nm i{font-size:12.5px}

/* Interlúdios: frase fina com mira */
.interlude p{font-weight:200; letter-spacing:-.04em}

/* Reserva: painéis de vidro com traço de gelo */
.offers li,.offers li + li{border-top:1px solid var(--glow-line)}
.offers .pct{font-weight:200}
.quote{border-top:1px solid var(--glow-line)}
.quote h3{font-weight:200}
.field label{font:var(--tele); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase}
.field input:focus,.field select:focus,.field textarea:focus{outline-color:var(--glow)}
.iban{border-top:1px solid var(--glow-line)}
.foot h4{font:var(--tele); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--glow)}

/* ---------- Avaliação: estrelas que funcionam ---------- */
.field.rating{gap:8px}
.flabel{font:var(--tele); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2)}
.stars{display:flex; align-items:center; gap:2px; flex-wrap:wrap}
.stars button{appearance:none; background:none; border:0; padding:4px 3px; margin:0; cursor:pointer; font-size:34px; line-height:1; color:rgba(13,38,48,.2); transition:color .15s var(--ease), transform .15s var(--ease); border-radius:8px; font-family:var(--text)}
.stars button.on{color:var(--ink)}
.stars button:hover{transform:translateY(-1px)}
.stars button:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.stars-txt{margin-left:12px; font-size:14px; color:var(--ink-2)}
#avaliar .field input[type="date"]{color-scheme:light}

/* ---------- ecrãs pequenos ---------- */
@media (max-width:1100px){
  .hud{height:calc(100% - 84px - 220px)}
}
@media (max-width:700px){
  .brand b{font-size:12px; letter-spacing:.24em}
  .hud{inset:72px 14px auto; height:auto}
  .hud-c,.hud-l{display:none}
  .hud-r{top:0; right:0; flex-direction:row; align-items:baseline; gap:10px}
  .hud-r span:last-child{display:none}
  #hud-time{font-size:20px}
  .hero .eyebrow{letter-spacing:.32em; font-size:11px}
  .btn{padding:16px 22px}
  .stars button{font-size:38px; padding:4px}
  .stars-txt{flex-basis:100%; margin:4px 0 0}
  #localizacao .dial .plab{font-size:13px}
}
@media (prefers-reduced-motion: reduce){ .dial .sweep{animation:none; display:none} }

/* afinações Oblivion: a etiqueta vence o estilo dos parágrafos do cabeçalho */
.head p.eyebrow,.hero p.eyebrow{font:var(--tele); letter-spacing:.28em; text-transform:uppercase; max-width:none}
.head p.eyebrow{color:var(--accent)}
#galeria .head p.eyebrow,.book .head p.eyebrow,#localizacao .head p.eyebrow{color:var(--glow)}
.hero p.eyebrow{font-size:12px; letter-spacing:.5em; color:rgba(255,255,255,.88)}
.brand span{display:none}
.brand b{white-space:nowrap; overflow:visible; font-size:13px; letter-spacing:.3em}
.navlink{letter-spacing:.12em; padding:9px 10px}
@media (max-width:700px){
  .hero p.eyebrow{letter-spacing:.3em; font-size:11px}
  .brand b{font-size:11.5px; letter-spacing:.2em; overflow:hidden; text-overflow:ellipsis; max-width:58vw}
}
#avaliar .sent[data-kind="err"]{background:rgba(201,140,40,.14)}
#avaliar .sent[data-kind="err"] .ico{color:#8A5A12}
@media (max-width:700px){ .brand b{font-size:10px; letter-spacing:.14em; max-width:none} }
@media (max-width:360px){ .brand b{letter-spacing:.08em} }
.hero{overflow:hidden}

/* ============================================================
   VISUALIZADOR DE FOTOGRAFIAS — imagem sempre inteira (14/10/2026)
   A fotografia ajusta-se ao espaço livre entre a barra de cima e a
   legenda, em computador, iPad e telemóvel (vertical e horizontal),
   sem nunca ser cortada.
   ============================================================ */
.lb{height:100vh; height:100dvh; padding:max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); box-sizing:border-box; overflow:hidden}
.lb-top,.lb-cap{flex:0 0 auto}
.lb-stage{flex:1 1 0; min-height:0; min-width:0; position:relative; display:block; overflow:hidden}
.lb-stage img{
  position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;
  display:block; width:auto; height:auto; max-width:100%; max-height:100%;
  object-fit:contain; border-radius:4px
}
.lb-nav{z-index:2}
@media (min-width:701px){
  /* as setas ficam fora da fotografia */
  .lb-stage img{left:64px; right:64px; max-width:calc(100% - 128px)}
}
.lb-cap{padding:10px 8px 2px; min-height:0; line-height:1.4}
@media (max-height:500px){
  /* telemóvel deitado: barra e legenda mais compactas */
  .lb-top{padding:0 6px 6px}
  .lb-cap{padding:6px 8px 0; font-size:13px}
}
@media (max-width:700px){
  /* no telemóvel as setas ficam por cima da foto: fundo escuro para se verem */
  .lb-nav{background:rgba(6,26,34,.62); width:40px; height:40px}
  .lb-prev{left:6px} .lb-next{right:6px}
}

/* ============================================================
   VISITA VIRTUAL (vídeo) — 14/10/2026
   ============================================================ */
.tour{margin:0 0 clamp(28px,4vw,48px)}
.tour video{display:block; width:100%; aspect-ratio:16/9; height:auto; background:#0B2733; border-radius:var(--r-lg); box-shadow:0 30px 60px -30px rgba(0,0,0,.55)}
.tour figcaption{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:baseline; margin-top:14px; color:var(--on-deep-2); font-size:15px}
.tour .tour-tag{font:var(--tele); text-transform:uppercase; letter-spacing:.16em; color:var(--glow, #A6E3F2)}
@media (max-width:700px){ .tour video{border-radius:var(--r-md)} .tour figcaption{font-size:14px} }

/* barra superior: a marca nunca encolhe nem se sobrepõe aos links (14/10) */
.nav .brand{flex-shrink:0; white-space:nowrap}

/* ============================================================
   LEITURA E LUXO — 14/10/2026 (17h30)
   Texto bem legível em todo o site, marca maior, barra superior
   escura e assente, detalhes em champanhe dourado.
   ============================================================ */
:root{
  --ink:#08202A; --ink-2:#1B3743; --ink-3:#2C4A56;
  --on-deep:#FFFFFF; --on-deep-2:#E3EEF2;
  --gold:#D8BC86; --gold-2:#E9D3A6; --gold-ink:#6E4F1C;
  --nightbar:rgba(7,28,37,.86);
}
body{color:var(--ink)}
/* títulos: menos finos, mais presença */
h1,h2,h3,.head h2,.hero h1{font-weight:300}
.hero h1 em{font-weight:300}
/* texto corrido maior e escuro */
.band p,.head p,.band li,.band dd,.band td{color:var(--ink-2)}
.band p,.head p{font-size:17.5px; line-height:1.7}
.head p{font-weight:400}
/* rótulos pequenos: mais peso e mais contraste */
.eyebrow,.head p.eyebrow,.hero p.eyebrow{font-weight:600 !important; font-size:12px !important; letter-spacing:.2em !important; color:var(--gold-ink) !important; opacity:1 !important}
.eyebrow::before{background:var(--gold-ink) !important}
#galeria .eyebrow,.book .eyebrow,#localizacao .eyebrow,.album .eyebrow,.hero p.eyebrow{color:var(--gold) !important}
#galeria .eyebrow::before,.book .eyebrow::before,#localizacao .eyebrow::before{background:var(--gold) !important}

/* ---------- barra superior ---------- */
.nav,.nav.over,.nav.solid,.nav.scrolled{
  background:var(--nightbar) !important; color:#fff;
  backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid rgba(216,188,134,.28); box-shadow:0 10px 30px -18px rgba(0,0,0,.6)}
.nav .brand{display:flex; flex-direction:column; justify-content:center; gap:3px; flex-shrink:0; white-space:nowrap; text-decoration:none}
.nav .brand b{font-family:var(--display); font-weight:400 !important; font-size:23px !important; letter-spacing:.06em !important; text-transform:uppercase; color:#fff !important; line-height:1}
.nav .brand span{display:block !important; font:600 9.5px/1 var(--text) !important; letter-spacing:.34em !important; text-transform:uppercase; color:var(--gold) !important}
.nav .navlink{color:#fff !important; opacity:.92; font-weight:500 !important; font-size:12.5px !important; letter-spacing:.12em !important}
.nav .navlink:hover,.nav .navlink[aria-current="true"],.nav .navlink.on{opacity:1; color:var(--gold-2) !important; background:transparent !important}
.nav .lang{background:rgba(255,255,255,.10) !important}
.nav .lang button{color:rgba(255,255,255,.85) !important}
.nav .lang button[aria-pressed="true"]{background:var(--gold) !important; color:#08202A !important}
.nav .btn-ghost{color:#08202A !important; background:var(--gold) !important; border-color:var(--gold) !important; font-weight:600}
.nav .btn-ghost:hover{background:var(--gold-2) !important}
.nav .menubtn{color:#fff !important; background:rgba(255,255,255,.10) !important}
@media (max-width:700px){
  .nav .brand b{font-size:18px !important; letter-spacing:.05em !important}
  .nav .brand span{font-size:8.5px !important; letter-spacing:.28em !important}
}
@media (max-width:1260px){
  .nav.menu-open .navlinks{background:#0B2733 !important; border-color:rgba(216,188,134,.35) !important}
  .nav.menu-open .navlink{color:#fff !important}
  .nav.menu-open .brand b{color:#fff !important}
  .nav.menu-open .brand span{color:var(--gold) !important}
  .nav.menu-open .lang button{color:rgba(255,255,255,.85) !important}
  .nav.menu-open .lang button[aria-pressed="true"]{background:var(--gold) !important; color:#08202A !important}
  .nav.menu-open .menubtn{color:#fff !important; background:rgba(255,255,255,.12) !important}
  .nav.menu-open .btn-ghost{color:#08202A !important}
}

/* ---------- topo (herói) ---------- */
.hero::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,22,30,.55) 0%, rgba(5,22,30,.28) 35%, rgba(5,22,30,.42) 65%, rgba(5,22,30,.78) 100%)}
.hero .hero-inner{position:relative; z-index:2}
.hero .hud{z-index:2}
.hero h1{color:#fff !important; text-shadow:0 2px 30px rgba(0,0,0,.35)}
.hero .hero-sub{color:#fff !important; font-size:clamp(17px,1.35vw,20px) !important; font-weight:400; text-shadow:0 1px 14px rgba(0,0,0,.45); opacity:1 !important}
.hero .score,.hero .score i,.hero .score span{color:#fff !important; opacity:1 !important}
.hero .score b{color:var(--gold-2) !important}
.hero .btn:not(.btn-light){background:var(--gold) !important; color:#08202A !important; border-color:var(--gold) !important; font-weight:600}
.hero .btn-light{background:rgba(255,255,255,.14) !important; color:#fff !important; border:1px solid rgba(255,255,255,.75) !important}

/* ---------- faixa dos números ---------- */
.facts .fact dt{color:var(--gold) !important; font-weight:600 !important; opacity:1 !important}
.facts .fact dd b{color:#fff !important; font-weight:300}
.facts .fact dd span{color:#E3EEF2 !important; opacity:1 !important}

/* ---------- interlúdios ---------- */
.interlude p,.interlude p span{color:#fff !important; text-shadow:0 2px 24px rgba(0,0,0,.55)}

/* ---------- bandas escuras ---------- */
#galeria .head p,.book p,.book label,.book .field label,#localizacao p,footer p,footer a,footer li,footer span{color:#E3EEF2 !important}
footer h4,footer .ft-h,footer .eyebrow{color:var(--gold) !important}

/* ---------- listas e tabelas em fundo claro ---------- */
.band small,.band .muted,.band .note,.band .dist-note,.seasons-note{color:var(--ink-3) !important}
.field label,.flabel{color:var(--ink-2) !important; font-weight:600 !important}
/* portáteis (1261–1540 px): barra completa, mais compacta */
@media (min-width:1261px) and (max-width:1540px){
  .nav{padding-left:22px !important; padding-right:22px !important; gap:14px !important}
  .nav .brand b{font-size:19px !important; letter-spacing:.04em !important}
  .nav .brand span{font-size:8px !important; letter-spacing:.26em !important}
  .nav .navlinks{gap:0 !important}
  .nav .navlink{font-size:11.5px !important; letter-spacing:.05em !important; padding-left:8px !important; padding-right:8px !important}
  .nav .navtools{gap:8px !important}
  .nav .btn-sm{padding-left:14px !important; padding-right:14px !important; letter-spacing:.06em !important}
}
/* sem legendas nas fotografias (14/10) */
.lb-cap{display:none !important}

/* marca maior (14/10, 18h) */
.nav{min-height:76px}
.nav .brand{gap:5px}
.nav .brand b{font-size:31px !important; letter-spacing:.05em !important}
.nav .brand span{font-size:12.5px !important; letter-spacing:.3em !important}
@media (min-width:1261px) and (max-width:1640px){
  .nav .brand b{font-size:26px !important; letter-spacing:.04em !important}
  .nav .brand span{font-size:10.5px !important; letter-spacing:.24em !important}
  .nav .navlink{font-size:11px !important; letter-spacing:.03em !important; padding-left:6px !important; padding-right:6px !important}
  .nav .lang button{padding-left:9px !important; padding-right:9px !important}
}
@media (max-width:1260px){
  .nav .brand b{font-size:27px !important}
  .nav .brand span{font-size:11px !important}
}
@media (max-width:700px){
  .nav{min-height:68px}
  .nav .brand b{font-size:22px !important; letter-spacing:.04em !important}
  .nav .brand span{font-size:9.5px !important; letter-spacing:.22em !important}
}
@media (max-width:380px){
  .nav .brand b{font-size:19.5px !important}
  .nav .brand span{font-size:8.5px !important; letter-spacing:.18em !important}
}
@media (max-width:700px){
  .nav{padding-left:14px !important; padding-right:12px !important; gap:8px !important}
  .nav .navtools{gap:6px !important}
  .nav .lang button{padding:5px 8px !important; font-size:11.5px !important; min-width:0 !important}
  .nav .menubtn{width:38px !important; height:38px !important}
}

/* ============================================================
   MAIS SIMPLES — 15/10/2026
   Menos enfeites, navegação curta, percurso de carro recolhido.
   ============================================================ */
.hud{display:none !important}
.dial .sweep{display:none}
#galeria,.book,#localizacao,.album{background-image:none !important}
/* "Como chegar": percurso sempre visível (15/10, 18h45) */
.arrive-open{margin-top:clamp(36px,5vw,56px); padding:0; border:1px solid rgba(255,255,255,.22); border-radius:var(--r-lg)}
.arrive-open > .arrive-head{padding:22px clamp(18px,3vw,28px); margin:0}
.arrive-open > .arrive-head h3{margin:0; font-size:clamp(1.3rem,2.2vw,1.7rem) !important}
.arrive-open > .gmap{padding:0 clamp(18px,3vw,28px) clamp(18px,3vw,28px)}
.seasons-note{font-size:14px !important; line-height:1.55 !important}

/* ============================================================
   MOVIMENTO — 15/10/2026
   Lento, suave e sem saltos (curva "expo-out", 1,1–1,4 s).
   Só se aplica quando motion.js corre (classe .motion no <html>)
   e nunca para quem pede menos movimento no sistema.
   ============================================================ */
:root{--ease-lux:cubic-bezier(.16,1,.3,1)}
/* blocos que surgem: sobem 28 px e saem de um leve desfoque */
.motion .rv{opacity:0; transform:translate3d(0,28px,0); filter:blur(6px);
  transition:opacity 1.1s var(--ease-lux) var(--d,0ms), transform 1.3s var(--ease-lux) var(--d,0ms), filter 1.1s var(--ease-lux) var(--d,0ms)}
.motion .rv.in{opacity:1; transform:none; filter:none}
/* fotografias: abrem-se de baixo para cima e a imagem assenta */
.motion .rv-img{clip-path:inset(0 0 100% 0 round var(--r-lg,14px)); transition:clip-path 1.4s var(--ease-lux) var(--d,0ms)}
.motion .rv-img img{transform:scale(1.14); transition:transform 2.2s var(--ease-lux) var(--d,0ms)}
.motion .rv-img.in{clip-path:inset(0 0 0 0 round var(--r-lg,14px))}
.motion .rv-img.in img{transform:scale(1)}
/* filete dourado dos títulos pequenos desenha-se da esquerda */
.motion .rv-line::before{transform:scaleX(0); transform-origin:left center; transition:transform 1.2s var(--ease-lux) .25s}
.motion .rv-line.in::before{transform:scaleX(1)}
/* fotografia do topo: depois de entrar, respira muito devagar */
.hero-img{animation:el-zoom 2.6s var(--ease-lux) both, el-breathe 28s ease-in-out 2.6s infinite alternate}
@keyframes el-breathe{from{transform:scale(1)} to{transform:scale(1.06) translate3d(-1%, -1%, 0)}}
/* imagens grandes entre secções: paralaxe (posição calculada em motion.js) */
.motion .interlude img{will-change:transform; transform:scale(1.18)}
/* frases sobre as imagens grandes */
.motion .interlude p{opacity:0; transform:translate3d(0,22px,0); letter-spacing:.02em;
  transition:opacity 1.4s var(--ease-lux) .2s, transform 1.6s var(--ease-lux) .2s, letter-spacing 2s var(--ease-lux) .2s}
.motion .interlude.in p{opacity:1; transform:none; letter-spacing:0}
/* galeria: ao passar o rato a fotografia aproxima-se devagar */
#gal > button img,.aptshots figure img{transition:transform 1.6s var(--ease-lux)}
#gal > button:hover img,.aptshots figure:hover img{transform:scale(1.045)}
/* botões dourados: um brilho de champanhe atravessa ao passar o rato */
.btn{position:relative; overflow:hidden}
.btn::after{content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform:skewX(-20deg); opacity:0}
.btn:hover::after{animation:el-sheen 1.1s var(--ease-lux)}
@keyframes el-sheen{0%{left:-60%; opacity:1} 100%{left:130%; opacity:0}}
/* números da barra: algarismos de largura fixa enquanto contam */
.facts .fact dd b{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion: reduce){
  .motion .rv,.motion .rv-img,.motion .rv-img img,.motion .interlude p{opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important}
  .hero-img{animation:none !important}
  .btn:hover::after{animation:none}
}

/* "À sua volta": lista recolhida, abre com um botão (15/10) */
details.poi-more{margin-top:8px}
details.poi-more > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  font:600 12.5px/1 var(--text); letter-spacing:.14em; text-transform:uppercase; color:#08202A;
  background:var(--gold, #D8BC86); border-radius:999px; padding:15px 24px; transition:background .3s}
details.poi-more > summary::-webkit-details-marker{display:none}
details.poi-more > summary::after{content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .4s var(--ease-lux, ease)}
details.poi-more[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
details.poi-more > summary:hover{background:var(--gold-2, #E9D3A6)}
details.poi-more > summary:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
details.poi-more .poi-close,details.poi-more[open] .poi-open{display:none}
details.poi-more[open] .poi-close{display:inline}
details.poi-more[open] > .poi{margin-top:clamp(24px,3vw,36px); animation:el-rise .7s var(--ease-lux, ease) both}

/* ============================================================
   PEDIDO, CAUÇÃO E MAIS MOVIMENTO — 15/10/2026
   ============================================================ */
/* resumo do preço: subtotal da estadia e total a pagar com caução */
.qrow.qsum{font-weight:600}
.qrow.qsum .l,.qrow.qsum .v{color:inherit; opacity:1}
.pay-amounts .prow.sub{padding:8px 0}
.pay-amounts .prow.sub .l{font-size:15px; color:var(--on-deep-2)}
.pay-amounts .prow.sub .v{font-size:16px; color:var(--on-deep-2)}
.pay-amounts .prow.tot{border-top:1px solid rgba(216,188,134,.45); padding:14px 0 18px}
.pay-amounts .prow.tot .l{color:#fff; font-weight:600; font-size:16px}
.pay-amounts .prow.tot .v{font-size:26px; color:#E9D3A6}
/* devolução da caução: titular e IBAN do hóspede */
fieldset.refund{border:1px solid rgba(216,188,134,.5); background:rgba(216,188,134,.07);
  border-radius:var(--r-lg, 14px); padding:14px 20px 20px; margin:6px 0 4px; min-width:0; display:flex; flex-direction:column; gap:14px}
fieldset.refund legend{padding:0 10px; margin-left:-10px; font:600 12px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:#E9D3A6}
.refund-note{font-size:14.5px; line-height:1.6; color:inherit; opacity:.86; margin:0}
fieldset.refund input[name="iban"]{font-family:var(--mono); letter-spacing:.04em; text-transform:uppercase}
#sent-txt a{color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px}

/* barra de progresso da leitura: um filete dourado no topo */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:80; pointer-events:none;
  background:linear-gradient(90deg, var(--gold, #B08D2E), #E9D3A6); transform-origin:0 50%; transform:scaleX(0); opacity:0; transition:opacity .4s}
.progress.on{opacity:1}

/* "Descobrir": convite vertical a descer, com um fio dourado que corre */
.cue{position:absolute; right:clamp(20px,3.4vw,48px); bottom:176px; z-index:2; display:flex; flex-direction:column; align-items:center; gap:14px;
  color:rgba(255,255,255,.86); text-decoration:none; font:500 11px/1 var(--sans); letter-spacing:.32em; text-transform:uppercase;
  animation:el-rise 1.2s var(--ease-lux, ease) 1.6s both}
.cue span{writing-mode:vertical-rl; transition:color .4s}
.cue i{position:relative; display:block; width:1px; height:64px; background:rgba(255,255,255,.28); overflow:hidden}
.cue i::after{content:""; position:absolute; left:0; top:-40%; width:1px; height:40%; background:linear-gradient(transparent, #E9D3A6);
  animation:el-drip 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes el-drip{0%{top:-40%} 100%{top:100%}}
.cue:hover span{color:#E9D3A6}
.cue:focus-visible{outline:2px solid #fff; outline-offset:6px}
@media (max-width:1100px){ .cue{display:none} }

/* título do topo: cada linha sobe por trás de uma máscara */
.motion .hero h1 > span,.motion .hero h1 > em{display:inline-block; clip-path:inset(0 0 -12% 0); animation:el-line 1.5s var(--ease-lux) both}
.motion .hero h1 > span{animation-delay:.35s}
.motion .hero h1 > em{animation-delay:.6s}
@keyframes el-line{from{transform:translate3d(0,60%,0); opacity:0; clip-path:inset(0 0 100% 0)} to{transform:none; opacity:1; clip-path:inset(0 0 -12% 0)}}

/* blocos que surgem: um pouco mais de percurso para se notar */
.motion .rv{transform:translate3d(0,40px,0)}
.motion .rv.in{transform:none}

/* divisões do apartamento: ao passar, sobem e ganham um filete dourado */
.sleep > div{position:relative; transition:transform .7s var(--ease-lux, ease), box-shadow .7s var(--ease-lux, ease), background .5s}
.sleep > div::after{content:""; position:absolute; left:20px; right:20px; bottom:0; height:2px; background:var(--gold, #B08D2E);
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease-lux, ease)}
.sleep > div:hover{transform:translateY(-4px); box-shadow:0 18px 40px -24px rgba(8,32,42,.35); z-index:1}
.sleep > div:hover::after{transform:scaleX(1)}
.motion .sleep > div.rv.in:hover{transform:translateY(-4px)}

/* menu: fica mais fino depois de começar a descer */
.nav.solid{box-shadow:0 10px 30px -26px rgba(8,32,42,.5)}

@media (prefers-reduced-motion: reduce){
  .cue,.cue i::after,.motion .hero h1 > span,.motion .hero h1 > em{animation:none !important; clip-path:none !important; transform:none !important; opacity:1 !important}
  .sleep > div,.sleep > div:hover{transform:none !important; transition:none}
  .progress{display:none}
}

/* Comodidades recolhidas atrás de um botão (15/10, 11h50) */
details.amen-more[open] > .amen{margin-top:clamp(24px,3vw,36px); animation:el-rise .7s var(--ease-lux, ease) both}

/* Fotografia do topo animada (15/10, 15h): a água da piscina ondula e a luz
   desenha cáusticas no fundo, num ciclo contínuo de 6 s, enquanto a imagem
   se aproxima devagar. O vídeo aparece por cima da fotografia só quando já
   está a tocar; sem vídeo (poupança de dados, menos movimento) fica a foto. */
.hero-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:0; pointer-events:none;
  transition:opacity 1.8s var(--ease-lux, ease)}
.hero-vid.on{opacity:1}
.hero-img,.hero-vid{animation:el-zoom 2.6s var(--ease-lux) both, el-breathe 24s ease-in-out 2.6s infinite alternate; transform-origin:50% 60%}
@keyframes el-breathe{from{transform:scale(1)} to{transform:scale(1.08) translate3d(-1.2%, -1%, 0)}}
@media (prefers-reduced-motion: reduce){ .hero-vid{display:none} .hero-img,.hero-vid{animation:none !important} }
/* animação do topo mais fluida: imagem e vídeo em camada própria */
.hero-img,.hero-vid{will-change:transform; backface-visibility:hidden}
/* título das comodidades mais comprido: cabe em duas linhas */
#comodidades .head{max-width:min(100%, 980px)}

/* ---------- Telemóvel e tablet (15/10, 18h30) ---------- */
/* o IBAN de exemplo cabe inteiro no campo em ecrãs estreitos */
@media (max-width:480px){ fieldset.refund{padding:12px 14px 16px} fieldset.refund input[name="iban"]{font-size:14px; letter-spacing:0; padding-inline:12px} }
/* em ecrãs táteis o efeito de "passar o rato" não fica preso depois do toque */
@media (hover:none){
  .sleep > div:hover,.motion .sleep > div.rv.in:hover{transform:none; box-shadow:none}
  .sleep > div:hover::after{transform:scaleX(0)}
  #gal > button:hover img,.aptshots figure:hover img{transform:none}
}
/* titular e IBAN um por baixo do outro: o IBAN fica sempre inteiro à vista */
fieldset.refund .f2{grid-template-columns:minmax(0,1fr)}

/* ============================================================
   TOPO PARADO (15/10, 18h40): só a água da piscina se mexe.
   A fotografia não se aproxima, o texto e os números não se
   animam, para ler sem desconforto.
   ============================================================ */
.hero-img,.hero-vid{animation:none !important; transform:none !important; will-change:auto}
.hero-inner > *,.motion .hero h1 > span,.motion .hero h1 > em,.facts,.facts .fact,.cue{animation:none !important; opacity:1 !important; transform:none !important; clip-path:none !important; filter:none !important}
.cue i::after{animation:none !important; display:none}

/* ============================================================
   SELECTOR DE IDIOMA (15/10, 19h30): seis línguas num menu
   ============================================================ */
.nav .lang{position:relative; padding:3px; overflow:visible}
.nav .lang .lang-cur{display:inline-flex; align-items:center; gap:7px; padding:6px 12px !important; border-radius:999px;
  background:var(--gold, #D8BC86) !important; color:#08202A !important; font:600 12px/1 var(--text, var(--sans)) !important; letter-spacing:.1em !important; cursor:pointer}
.nav .lang .lang-chev{width:10px; height:6px; transition:transform .3s}
.nav .lang.open .lang-chev{transform:rotate(180deg)}
.nav .lang .lang-cur:focus-visible{outline:2px solid #fff; outline-offset:2px}
.lang-menu{position:absolute; top:calc(100% + 10px); right:0; z-index:90; list-style:none; margin:0; padding:6px; min-width:196px;
  background:#0B2530; border:1px solid rgba(216,188,134,.38); border-radius:14px; box-shadow:0 24px 50px -20px rgba(0,0,0,.55)}
.lang-menu[hidden]{display:none}
.lang-menu li{margin:0}
.nav .lang .lang-menu button{display:flex !important; width:100%; align-items:center; gap:12px; padding:10px 12px !important; border-radius:9px;
  background:transparent !important; color:#fff !important; font:400 15px/1.2 var(--text, var(--sans)) !important; letter-spacing:0 !important; text-align:left; cursor:pointer}
.nav .lang .lang-menu button b{font-weight:600; font-size:11.5px; letter-spacing:.12em; min-width:24px; color:rgba(255,255,255,.62)}
.nav .lang .lang-menu button:hover,.nav .lang .lang-menu button:focus-visible{background:rgba(255,255,255,.10) !important; outline:none}
.nav .lang .lang-menu button[aria-pressed="true"]{background:rgba(216,188,134,.16) !important; color:#E9D3A6 !important}
.nav .lang .lang-menu button[aria-pressed="true"] b{color:#E9D3A6}
@media (max-width:560px){ .lang-menu{right:-52px} }

/* ============================================================
   TARIFAS COMPACTAS ANTES DO CALENDÁRIO (16/10/2026)
   ============================================================ */
.calwrap.calwrap-1{grid-template-columns:minmax(0,1fr) !important; gap:clamp(22px,3vw,34px)}
.seasons.seasons-compact{border-radius:var(--r-lg, 14px); padding:16px clamp(16px,2.4vw,24px) 14px}
.seasons.seasons-compact h3{font-family:var(--text, var(--sans)) !important; font-style:normal !important; font-weight:600 !important; font-size:12px !important;
  letter-spacing:.14em !important; text-transform:uppercase !important; color:var(--ink-2) !important; padding:0 0 12px !important}
.seasons-compact .sgrid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; background:var(--line); border-radius:10px; overflow:hidden}
.seasons-compact .sc{background:var(--agua-2, #C4DDE6); padding:11px 12px 10px; display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:baseline}
.seasons-compact .sc .nm{font-size:13.5px; font-weight:500; color:var(--ink)}
.seasons-compact .sc .p{font-family:var(--display, var(--sans)); font-weight:400; font-size:18px; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap}
.seasons-compact .sc i{grid-column:1 / -1; font-style:normal; font-size:11.5px; line-height:1.35; color:var(--ink-box, var(--ink-3))}
.seasons-compact .sfoot{display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:12px; font-size:13px; color:var(--ink-2)}
.seasons-compact .sfoot span{display:inline-flex; align-items:center; gap:6px}
.seasons-compact .sfoot b{font-weight:600; color:var(--ink)}
.seasons-compact .sfoot .ico{width:14px; height:14px; color:var(--ink-3); flex:none}
.seasons-compact .seasons-note{margin:8px 0 0 !important; font-size:12.5px !important; color:var(--ink-3)}
@media (max-width:1000px){ .seasons-compact .sgrid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:620px){
  .seasons-compact .sgrid{grid-template-columns:minmax(0,1fr)}
  .seasons-compact .sc{padding:9px 12px}
  .seasons-compact .sfoot{flex-direction:column; gap:6px}
}
/* ajustes da tabela compacta e do calendário (16/10) */
.seasons-compact .seasons-note{padding:0 !important}
.calwrap.calwrap-1 > div:last-child{width:100%; max-width:900px; margin-inline:auto}
@media (max-width:620px){
  .seasons-compact .sgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seasons-compact .sc{grid-template-columns:minmax(0,1fr); padding:9px 10px 8px; gap:1px}
  .seasons-compact .sc .nm{font-size:12.5px}
  .seasons-compact .sc .p{font-size:17px}
  .seasons-compact .sc i{font-size:10.5px}
  .seasons-compact .sc:last-child{grid-column:1 / -1}
  .seasons-compact .sfoot{font-size:12.5px}
}

/* ============================================================
   16/10, 10h30
   1) Imagem "Debaixo dos pinheiros mansos": fotografia inteira,
      mais pequena, numa moldura (sem corte nem paralaxe).
   2) Tarifas por noite: moldura dourada a destacar, mesmo tamanho.
   ============================================================ */
.interlude{min-height:0 !important; display:block !important; overflow:visible !important; background:var(--ground, #D6E4EA);
  padding:clamp(28px,5vw,64px) clamp(16px,4vw,40px) !important; isolation:auto}
.interlude::after{display:none !important}
.interlude .il-frame{position:relative; isolation:isolate; overflow:hidden; max-width:1080px; margin:0 auto; aspect-ratio:3 / 2;
  border-radius:var(--r-lg, 14px); box-shadow:0 30px 60px -36px rgba(8,32,42,.55)}
.interlude .il-frame img,.motion .interlude .il-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2;
  transform:none !important; will-change:auto}
.interlude .il-frame::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(6,26,34,0) 45%, rgba(6,26,34,.55) 100%)}
.interlude .il-frame p{position:absolute; left:0; right:0; bottom:clamp(16px,4vw,44px); margin:0 auto; padding:0 20px; text-align:center;
  font-size:clamp(1.35rem,3.6vw,3rem) !important; line-height:1.08}
.interlude .il-frame p span{max-width:22ch; margin:0 auto}

.seasons.seasons-compact{border:1.5px solid var(--gold, #B08D2E) !important;
  box-shadow:0 0 0 5px rgba(216,188,134,.22), 0 22px 44px -30px rgba(8,32,42,.5) !important}
.seasons.seasons-compact h3{color:var(--amber, #7E5313) !important}
.seasons.seasons-compact h3::before{content:""; display:inline-block; width:22px; height:1.5px; background:var(--gold, #B08D2E); vertical-align:middle; margin-right:10px}
/* tarifas em dois grupos: mínimo de 5 noites, depois mínimo de 7 noites (16/10) */
.seasons-compact .sgroups{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:14px clamp(14px,2vw,22px)}
.seasons-compact .sgroup{min-width:0; display:flex; flex-direction:column}
.seasons-compact .sgh{margin:0 0 8px; display:flex; flex-direction:column; gap:2px; font-size:12.5px; line-height:1.35; color:var(--ink-2)}
.seasons-compact .sgh b{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:13.5px; color:var(--ink)}
.seasons-compact .sgh .ico{width:14px; height:14px; color:var(--amber, #7E5313)}
.seasons-compact .sgroup .sgrid{flex:1}
.seasons-compact .sg5 .sgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.seasons-compact .sg7 .sgrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
@media (max-width:1000px){ .seasons-compact .sgroups{grid-template-columns:minmax(0,1fr)} }
@media (max-width:620px){
  .seasons-compact .sg7 .sgrid,.seasons-compact .sg5 .sgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .seasons-compact .sg5 .sc:last-child{grid-column:auto}
}
/* "O que deve saber": regras e perguntas atrás de um botão (16/10) */
details.kn-more[open] > .know{margin-top:clamp(24px,3vw,36px); animation:el-rise .7s var(--ease-lux, ease) both}

/* ============================================================
   16/10, 11h — Tarifas numa só grelha alinhada; frase do jardim
   maior e no topo da fotografia; avisos de spam.
   ============================================================ */
.seasons-compact .stable{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)) 1px repeat(2,minmax(0,1fr));
  grid-template-rows:auto auto auto auto; column-gap:10px; row-gap:0}
.seasons-compact .stable::before{content:""; grid-column:4; grid-row:1 / 5; width:1px; background:var(--line-2, rgba(13,38,48,.22))}
.seasons-compact .stable .sgh{grid-row:1; margin:0 0 10px; align-self:end}
.seasons-compact .stable .sgh5{grid-column:1 / 4}
.seasons-compact .stable .sgh7{grid-column:5 / 7}
.seasons-compact .stable .sc{grid-row:2 / span 3; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:subgrid;
  row-gap:4px; align-items:start; padding:12px 14px 13px; background:var(--agua-2, #C4DDE6); border:1px solid var(--line, rgba(13,38,48,.12)); border-radius:10px}
.seasons-compact .stable .sc:nth-child(2){grid-column:1}
.seasons-compact .stable .sc:nth-child(3){grid-column:2}
.seasons-compact .stable .sc:nth-child(4){grid-column:3}
.seasons-compact .stable .sc:nth-child(6){grid-column:5}
.seasons-compact .stable .sc:nth-child(7){grid-column:6}
.seasons-compact .stable .sc .nm{align-self:end; font-size:13.5px; line-height:1.3; font-weight:500; color:var(--ink)}
.seasons-compact .stable .sc .p{align-self:start; font-family:var(--display, var(--sans)); font-weight:400; font-size:21px; line-height:1.15;
  letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; white-space:nowrap}
.seasons-compact .stable .sc i{grid-column:auto; font-style:normal; font-size:11.5px; line-height:1.4; color:var(--ink-box, var(--ink-3))}
@supports not (grid-template-rows:subgrid){
  .seasons-compact .stable .sc{display:flex; flex-direction:column; justify-content:flex-start}
  .seasons-compact .stable .sc .nm{min-height:2.6em; display:flex; align-items:flex-end}
}
/* a tabela ocupa sempre a largura toda da secção (antes ficava limitada a 560 px entre 621 e 1100 px) */
.calwrap.calwrap-1 .seasons.seasons-compact{max-width:none; width:100%; container-type:inline-size}
/* tablet (ou tabela estreita): os dois grupos um por cima do outro, cartões a toda a largura */
@media (max-width:1000px){
  .seasons-compact .stable{grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:none; column-gap:8px; row-gap:0}
  .seasons-compact .stable::before{display:none}
  .seasons-compact .stable .sgh5,.seasons-compact .stable .sgh7{grid-column:1 / -1; grid-row:auto}
  .seasons-compact .stable .sgh7{margin-top:16px}
  .seasons-compact .stable .sc,
  .seasons-compact .stable .sc:nth-child(n){grid-row:auto / span 3; grid-column:span 2}
  .seasons-compact .stable .sc7,
  .seasons-compact .stable .sc7:nth-child(n){grid-column:span 3}
}
@container (max-width:780px){
  .seasons-compact .stable{grid-template-columns:repeat(6,minmax(0,1fr)); grid-template-rows:none; column-gap:8px; row-gap:0}
  .seasons-compact .stable::before{display:none}
  .seasons-compact .stable .sgh5,.seasons-compact .stable .sgh7{grid-column:1 / -1; grid-row:auto}
  .seasons-compact .stable .sgh7{margin-top:16px}
  .seasons-compact .stable .sc,
  .seasons-compact .stable .sc:nth-child(n){grid-row:auto / span 3; grid-column:span 2}
  .seasons-compact .stable .sc7,
  .seasons-compact .stable .sc7:nth-child(n){grid-column:span 3}
}
/* telemóvel (ou tabela muito estreita): lista, com os preços todos na mesma coluna, alinhados à direita */
@media (max-width:620px){
  .seasons-compact .stable{grid-template-columns:minmax(0,1fr); row-gap:6px}
  .seasons-compact .stable .sgh7{margin-top:10px}
  .seasons-compact .stable .sgh{margin-bottom:2px}
  .seasons-compact .stable .sc,
  .seasons-compact .stable .sc:nth-child(n),
  .seasons-compact .stable .sc7:nth-child(n){grid-column:1 / -1; grid-row:auto; display:grid; grid-template-columns:minmax(0,1fr) 4.6em;
    grid-template-rows:auto auto; column-gap:12px; row-gap:2px; padding:10px 12px}
  .seasons-compact .stable .sc .nm{grid-column:1; grid-row:1; align-self:end; font-size:13px}
  .seasons-compact .stable .sc .p{grid-column:2; grid-row:1 / 3; align-self:center; justify-self:end; text-align:right; font-size:19px}
  .seasons-compact .stable .sc i{grid-column:1; grid-row:2; font-size:11px}
}
@container (max-width:520px){
  .seasons-compact .stable{grid-template-columns:minmax(0,1fr); row-gap:6px}
  .seasons-compact .stable .sgh7{margin-top:10px}
  .seasons-compact .stable .sgh{margin-bottom:2px}
  .seasons-compact .stable .sc,
  .seasons-compact .stable .sc:nth-child(n),
  .seasons-compact .stable .sc7:nth-child(n){grid-column:1 / -1; grid-row:auto; display:grid; grid-template-columns:minmax(0,1fr) 4.6em;
    grid-template-rows:auto auto; column-gap:12px; row-gap:2px; padding:10px 12px}
  .seasons-compact .stable .sc .nm{grid-column:1; grid-row:1; align-self:end; font-size:13px}
  .seasons-compact .stable .sc .p{grid-column:2; grid-row:1 / 3; align-self:center; justify-self:end; text-align:right; font-size:19px}
  .seasons-compact .stable .sc i{grid-column:1; grid-row:2; font-size:11px}
}

/* frase do jardim: maior e no topo da fotografia */
.interlude .il-frame::after{background:linear-gradient(180deg, rgba(6,26,34,.7) 0%, rgba(6,26,34,.34) 32%, rgba(6,26,34,0) 60%) !important}
.interlude .il-frame p{top:clamp(18px,4.4vw,54px); bottom:auto !important; font-size:clamp(1.6rem,4.4vw,3.7rem) !important; line-height:1.06;
  text-shadow:0 2px 18px rgba(6,26,34,.45)}
.interlude .il-frame p span{max-width:24ch}
@media (max-width:620px){ .interlude .il-frame p{padding:0 14px; font-size:clamp(1.45rem,6.6vw,2rem) !important} }

/* avisos "confirme a pasta de spam" */
.spamnote .ico,.spamline .ico{width:15px; height:15px; flex:none}
.formnote.spamnote{display:flex; gap:8px; align-items:flex-start; margin-top:8px}
.formnote.spamnote .ico{margin-top:2px; color:var(--sol-2, #F2C46D)}
.paynote.spamnote{margin-top:10px}
.offers .nocomb.spamnote{margin-top:8px}
.sent .spamline{display:flex; gap:8px; align-items:flex-start; margin-top:8px; font-size:.92em; opacity:.92}
.sent .spamline .ico{margin-top:3px}
.seasons-compact .sfoot span{align-items:flex-start}
.seasons-compact .sfoot .ico{margin-top:2px}

/* água em movimento na fotografia do jardim (só a piscina mexe) — 16/10 */
.interlude .il-frame .il-vid{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; opacity:0; pointer-events:none;
  transition:opacity .9s ease; transform:none !important}
.interlude .il-frame .il-vid.on{opacity:1}
@media (prefers-reduced-motion: reduce){ .interlude .il-frame .il-vid{display:none} }

/* devolução da caução: contas sem IBAN (número de conta + BIC/SWIFT) — 16/10 */
fieldset.refund .noiban{display:flex; gap:10px; align-items:flex-start; margin:14px 0 0; font-size:14.5px; line-height:1.5; cursor:pointer; color:inherit; text-transform:none; letter-spacing:0; font-weight:400}
fieldset.refund .noiban input{width:18px; height:18px; margin:2px 0 0; flex:none; accent-color:var(--gold, #B08D2E)}
fieldset.refund .noiban-f{margin-top:14px}
fieldset.refund .noiban-f[hidden],fieldset.refund .field[hidden]{display:none !important}
fieldset.refund .noiban-f .full{grid-column:1 / -1}
fieldset.refund input[name="acct"],fieldset.refund input[name="bic"]{font-family:var(--mono); letter-spacing:.04em; text-transform:uppercase}
.iban .bic-n{font-size:clamp(17px,1.8vw,20px)}

/* "À sua volta": tempo de carro e, quando compensa, a pé (19/10) */
.poi .tm{display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px; letter-spacing:.01em; font-variant-numeric:tabular-nums}
.dist .row .nm > span{font-variant-numeric:tabular-nums}

/* 20/10, 11h44 — frase do jardim ("Debaixo dos pinheiros mansos…") maior, em todas as línguas */
.interlude .il-frame p{font-size:clamp(2rem,5.6vw,4.7rem) !important; line-height:1.04}
.interlude .il-frame p span{max-width:20ch}
@media (max-width:620px){ .interlude .il-frame p{padding:0 14px; font-size:clamp(1.75rem,8.2vw,2.5rem) !important} }

/* 20/10, 13h49 — "O que dizem os hóspedes": avaliações feitas no site, aprovadas no painel */
#avaliacoes .rv-sum{display:flex; align-items:center; gap:10px; margin:14px 0 0; color:var(--ink-2, #3B5560); font-size:16px}
#avaliacoes .rv-sum .rv-avg{font-family:var(--display, inherit); font-weight:300; font-size:40px; line-height:1; letter-spacing:-.03em; color:var(--ink, #0D2630)}
.rv-stars{color:var(--gold, #B08D2E); letter-spacing:2px; font-size:15px; white-space:nowrap}
.rv-list{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,22px); margin-top:clamp(22px,3vw,34px)}
.rv-card{margin:0; background:var(--panel, rgba(255,255,255,.62)); border:1px solid var(--line, rgba(13,38,48,.12)); border-radius:var(--r-lg, 14px);
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:12px; min-width:0}
.rv-card blockquote{margin:0; font-size:16px; line-height:1.6; color:var(--ink, #0D2630); overflow-wrap:anywhere}
.rv-card blockquote::before{content:"\201C"} .rv-card blockquote::after{content:"\201D"}
.rv-card figcaption{margin-top:auto; font-size:13.5px; color:var(--ink-2, #3B5560); line-height:1.45}
.rv-card figcaption b{color:var(--ink, #0D2630); font-weight:600}
.rv-card .rv-lang{display:block; font-size:12.5px; opacity:.8}
.rv-foot{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:clamp(20px,3vw,30px)}
.rv-vrbo{font-size:14.5px; color:var(--accent, #1F5F73); text-underline-offset:3px}
.rv-note{margin:14px 0 0; font-size:13px; color:var(--ink-2, #3B5560); max-width:60ch}
@media (max-width:1000px){ .rv-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .rv-list{grid-template-columns:minmax(0,1fr)} .rv-card{padding:18px} }
#avaliacoes #rv-more[hidden]{display:none !important}
#avaliacoes .rv-note{margin:14px 0 0; font-size:13px !important; line-height:1.5; color:var(--ink-2, #3B5560); max-width:60ch}
#avaliacoes .rv-foot .rv-vrbo{font-size:14.5px}

/* 20/10, 16h24 — pedido de reserva: confirmação do email, titular da conta independente, ajuda por email */
.refund .holder-hint{font-size:13px; opacity:.8; margin-top:-2px}
.formnote.helpnote{display:flex; gap:8px; align-items:flex-start; margin:14px 0 0; font-size:13.5px}
.formnote.helpnote .ico{margin-top:2px; flex:none; color:var(--sol-2, #F2C46D)}
.formnote.helpnote a{color:inherit; font-weight:600; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere}

/* Barra fixa do telemóvel: esconde-se no calendário, no pedido de reserva e ao escrever (27/10) */
.stick{transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s}
.stick.away{transform:translateY(calc(100% + 24px)); opacity:0; pointer-events:none}
@media (prefers-reduced-motion:reduce){.stick{transition:none}}