/* ============================================================
   VIVENDA DAS HORTÊNSIAS — LINHA 3 · ESTRUTURA
   Tokens e componentes compartilhados (brand book + site)
   ============================================================ */
:root{
  /* 2026-09-30 — PALETA DO BRAND BOOK LINHA 4 (seção 05 Cores + 14 Tokens).
     Os nomes --l3-* ficam (o site inteiro já os consome); mudam os VALORES.
     Cada valor abaixo é o --v4-* correspondente do brand book, exceto onde
     anotado. */
  /* tinta e superfícies */
  --l3-ink:#1A1815;        /* Carvão — corpo de texto */
  --l3-ink-soft:#57524A;   /* --v4-ink-soft */
  /* ⚠️ NÃO é o --v4-ink-mute (#827C71): esse dá 3.84:1 sobre o marfim e
     reprova WCAG AA para texto pequeno (rótulos, legendas). Mantido o cinza
     quente anterior, mesmo tom, 5.12:1 sobre --l3-bg / 5.34:1 sobre --l3-card. */
  --l3-ink-mute:#6E685E;
  --l3-bg:#FAF6EE;         /* Marfim — fundo principal */
  --l3-bg-2:#F1EBDF;
  --l3-card:#FDFBF7;
  --l3-line:#E4DCCD;
  --l3-line-soft:#EEE8DC;
  /* marca */
  --l3-green:#1B3024;      /* Verde Vivenda — botões, fundo institucional */
  --l3-green-deep:#13231A; /* hover, capa escura */
  --l3-creme:#F1E6D3;      /* faixa de benefícios */
  --l3-dourado:#A97C45;    /* logomarca, filetes, marcadores — nunca texto pequeno */
  --l3-dourado-claro:#E3C79E; /* logomarca e rótulos sobre verde */
  --l3-dourado-deep:#8A6232;  /* texto dourado pequeno sobre marfim (5.03:1) */
  --l3-caramelo:#9B794F;   /* fundo alternativo */
  --l3-agua:#8EC3C6;       /* arabesco e detalhe pontual — nunca em texto */
  /* ícones, aspas, numerais e selos: era a "madeira" herdada da foto; o brand
     book põe o dourado nesse papel. Aponta para o dourado-deep porque parte
     desses usos é TEXTO pequeno (.room .bd .tag, .quote .rt). */
  --l3-madeira:var(--l3-dourado-deep);
  --l3-carvao:#12100D;
  /* tipografia */
  --l3-sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --l3-serif:'Cormorant Garamond',Georgia,serif;
  /* medidas */
  --l3-maxw:1160px;        /* brandbook — o site usa --l3-site-maxw */
  --l3-site-maxw:1240px;   /* largura real das páginas do site */
  --l3-nav:250px;
  /* raio — brand book Linha 4: "botão e cartão 2–3px". */
  --l3-r-s:2px;
  --l3-r-m:3px;
  --l3-r-l:3px;
  --l3-r-pill:3px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--l3-sans);background:var(--l3-bg);color:var(--l3-ink);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--l3-green);text-decoration:none}
a:hover{color:var(--l3-green-deep)}

/* ---------- helpers ---------- */
.l3-lbl{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--l3-dourado-deep);font-weight:500}
.l3-wm{font-family:var(--l3-serif);font-weight:500;letter-spacing:.01em}
.wrap{max-width:var(--l3-maxw);margin:0 auto;padding:0 44px}
.note{font-size:14px;color:var(--l3-ink-soft);max-width:66ch;text-wrap:pretty}

/* ---------- shell do brand book ---------- */
.app{display:flex;min-height:100vh}
.nav{width:var(--l3-nav);flex:0 0 var(--l3-nav);position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--l3-card);border-right:1px solid var(--l3-line);padding:32px 24px;display:flex;flex-direction:column}
.nav::-webkit-scrollbar{width:0}
.nav .bm{padding-bottom:22px;margin-bottom:20px;border-bottom:1px solid var(--l3-line)}
.nav .bm .n1{font-family:var(--l3-serif);font-size:25px;line-height:1;font-weight:500}
.nav .bm .n2{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--l3-ink-mute);margin-top:8px;font-weight:500}
.nav nav{display:flex;flex-direction:column;gap:1px}
.nav .grp{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--l3-ink-mute);margin:20px 0 8px;padding-left:10px}
.nav a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:var(--l3-r-s);font-size:13.5px;color:var(--l3-ink-soft)}
.nav a .ix{font-size:10px;color:var(--l3-ink-mute);font-variant-numeric:tabular-nums;width:15px;flex:0 0 15px}
.nav a:hover{background:var(--l3-bg-2);color:var(--l3-ink)}
.nav a.on{background:var(--l3-green);color:#fff}
.nav a.on .ix{color:rgba(255,255,255,.6)}
.main{flex:1;min-width:0}

/* ---------- seções ---------- */
.sec{padding:78px 0 0;scroll-margin-top:20px}
.sec-h{display:flex;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--l3-line);margin-bottom:30px}
.sec-h h2{font-size:23px;font-weight:600;letter-spacing:-.018em}
.sec-h .n{font-size:11px;letter-spacing:.2em;color:var(--l3-ink-mute);font-variant-numeric:tabular-nums;font-weight:500}
.sec-h .r{margin-left:auto;font-size:13px;color:var(--l3-ink-mute)}
.lead{font-size:16px;color:var(--l3-ink-soft);max-width:64ch;text-wrap:pretty}
.grid{display:grid;gap:24px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
/* Raio 3px (2026-09-30, passe premium). `.card` era o ÚNICO cartão do site sem
   raio — os pacotes (.tier) saíam de canto vivo ao lado de .room/.quote/.amen,
   todos em --l3-r-m. O brand book pede "botão e cartão 2–3px". */
.card{background:var(--l3-card);border:1px solid var(--l3-line);border-radius:var(--l3-r-m)}
.pad{padding:26px 28px}

/* ---------- POST 4:5 (formatos A/B/C) ---------- */
.post{container-type:inline-size;position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#0F0E0C;box-shadow:0 14px 34px -18px rgba(26,24,21,.4)}
.post .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post .veil{position:absolute;inset:0;background:linear-gradient(transparent 52%,rgba(14,12,9,.62) 100%)}
.post .veil.soft{background:linear-gradient(rgba(14,12,9,.42),transparent 40%)}
.post .sig{position:absolute;right:6.5cqw;bottom:6.5cqw;z-index:3;font-family:var(--l3-serif);font-size:4.6cqw;line-height:1;color:rgba(255,255,255,.9)}
.post .cap{position:absolute;left:6.5cqw;bottom:6.5cqw;right:26cqw;z-index:3;color:#fff}
.post .cap .k{font-size:2.8cqw;letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:rgba(255,255,255,.82);margin-bottom:1.6cqw}
.post .cap .t{font-size:5.6cqw;line-height:1.12;letter-spacing:-.02em;font-weight:500;text-wrap:pretty;text-shadow:0 1px 20px rgba(12,9,6,.45)}
.post .cap .t.sm{font-size:4.4cqw}
.post .cap.up{top:6.5cqw;bottom:auto;right:22cqw}
.post.ficha{background:var(--l3-card);display:flex;flex-direction:column}
.post.ficha .im{flex:1 1 auto;position:relative;overflow:hidden;min-height:0}
.post.ficha .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post.ficha .fi{flex:0 0 auto;padding:5.5cqw 6.5cqw;display:flex;flex-direction:column;gap:2.4cqw}
.post.ficha .fi .t{font-size:5cqw;line-height:1.1;letter-spacing:-.02em;font-weight:500;color:var(--l3-ink)}
.post.ficha .fi ul{list-style:none;display:grid;gap:1.5cqw}
.post.ficha .fi li{font-size:3.1cqw;line-height:1.35;color:var(--l3-ink-soft);padding-left:3.4cqw;position:relative}
.post.ficha .fi li::before{content:"";position:absolute;left:0;top:1.35cqw;width:1.4cqw;height:1px;background:var(--l3-ink-mute)}
.post.ficha .fi .pfoot{display:flex;justify-content:space-between;align-items:baseline;margin-top:1cqw;padding-top:3cqw;border-top:1px solid var(--l3-line-soft)}
.post.ficha .fi .pfoot .cta{font-size:2.7cqw;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--l3-green)}
.post.ficha .fi .pfoot .wm{font-family:var(--l3-serif);font-size:4cqw;color:var(--l3-ink)}

/* ---------- STORY 9:16 ---------- */
.story{container-type:inline-size;position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;background:#0F0E0C;box-shadow:0 14px 34px -18px rgba(26,24,21,.4)}
.story .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story .veil{position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(14,12,9,.66) 100%)}
.story .cap{position:absolute;left:7cqw;right:7cqw;bottom:9cqw;z-index:3;color:#fff}
.story .cap .k{font-size:3cqw;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:500;margin-bottom:2cqw}
.story .cap .t{font-size:6.4cqw;line-height:1.12;letter-spacing:-.02em;font-weight:500;text-wrap:pretty}
.story .sig{position:absolute;top:7cqw;left:7cqw;z-index:3;font-family:var(--l3-serif);font-size:5.2cqw;color:rgba(255,255,255,.9);line-height:1}
.story .band{position:absolute;left:0;right:0;bottom:0;z-index:3;background:var(--l3-card);padding:6cqw 7cqw}
.story .band .t{font-size:5.4cqw;font-weight:500;letter-spacing:-.02em;line-height:1.14;color:var(--l3-ink)}
.story .band ul{list-style:none;display:grid;gap:1.8cqw;margin-top:3cqw}
.story .band li{font-size:3.4cqw;color:var(--l3-ink-soft);padding-left:4cqw;position:relative}
.story .band li::before{content:"";position:absolute;left:0;top:1.6cqw;width:1.8cqw;height:1px;background:var(--l3-ink-mute)}

/* ---------- botões ---------- */
/* `transition` com propriedades nomeadas (2026-09-30): o `transition:.18s` antigo
   valia para `all` com easing linear-ish — animava até padding/largura quando o
   botão mudava de media query. Só cor muda no hover; a curva é a do sistema de
   movimento (ver bloco MOVIMENTO no fim do arquivo). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--l3-sans);font-weight:600;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:15px 26px;border:1px solid transparent;cursor:pointer;transition:background-color .22s var(--l3-ease),color .22s var(--l3-ease),border-color .22s var(--l3-ease);border-radius:var(--l3-r-s)}
.btn-solid{background:var(--l3-green);color:#fff}
.btn-solid:hover{background:var(--l3-green-deep);color:#fff}
.btn-line{background:transparent;border-color:var(--l3-ink);color:var(--l3-ink)}
.btn-line:hover{background:var(--l3-ink);color:var(--l3-bg)}
.btn-light{background:#fff;color:var(--l3-ink)}
.btn-light:hover{background:var(--l3-creme)}

/* ---------- do / não faz ---------- */
.rules{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--l3-line)}
.rules > div{padding:26px 28px;background:var(--l3-card)}
.rules > div + div{border-left:1px solid var(--l3-line);background:#F5F1EA}
.rules h5{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px;font-weight:600}
.rules ul{list-style:none;display:grid;gap:9px}
.rules li{font-size:14px;color:var(--l3-ink-soft);padding-left:18px;position:relative;text-wrap:pretty}
.rules li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--l3-ink-mute)}

/* ---------- tabela de tokens ---------- */
.tok{width:100%;border-collapse:collapse;font-size:13.5px}
.tok th{text-align:left;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--l3-ink-mute);padding:11px 12px;border-bottom:1px solid var(--l3-line);font-weight:600}
.tok td{padding:12px;border-bottom:1px solid var(--l3-line-soft);color:var(--l3-ink-soft);font-variant-numeric:tabular-nums}
.tok td.k{color:var(--l3-ink);font-weight:500}
.tok .dot{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:9px;border:1px solid rgba(0,0,0,.1)}

@media(max-width:960px){
  .app{flex-direction:column}
  .nav{position:static;width:100%;height:auto;flex:none;border-right:0;border-bottom:1px solid var(--l3-line)}
  .g3,.g4,.rules{grid-template-columns:1fr}
  .rules > div + div{border-left:0;border-top:1px solid var(--l3-line)}
}
@media print{.nav{display:none}}

/* ============================================================
   CHROME COMPARTILHADO DO SITE — header, footer e layout de página
   Injetado por chrome.js quando window.PAGE_L3 = true.
   ============================================================ */
.w{max-width:1240px;margin:0 auto;padding:0 40px}
/* ---- header ---- */
.bar{position:sticky;top:0;z-index:60;background:rgba(253,251,247,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--l3-line)}
.bar .in{max-width:1240px;margin:0 auto;padding:14px 40px;display:flex;align-items:center;gap:34px}
.bar .wm{font-family:var(--l3-serif);font-size:22px;line-height:1;color:var(--l3-ink);border:0}
.bar .wm img.logo,.l3-drawer .wm img.logo{display:block;height:50px;width:auto}
.bar .wm small{display:block;font-family:var(--l3-sans);font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--l3-ink-mute);margin-top:4px;font-weight:500}
.bar nav{display:flex;gap:26px;margin-left:auto}
.bar nav a{font-size:13.5px;color:var(--l3-ink-soft);border:0}
.bar nav a:hover{color:var(--l3-ink)}
.bar nav a.active{color:var(--l3-ink);font-weight:600}
.bar .btn{padding:12px 20px;font-size:11px}
/* ---- footer ---- */
.ftr{background:var(--l3-card);border-top:1px solid var(--l3-line);padding:44px 0}
.ftr .in{max-width:1240px;margin:0 auto;padding:0 40px;display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;font-size:13px;color:var(--l3-ink-soft)}
.ftr .wm{font-family:var(--l3-serif);font-size:21px;color:var(--l3-ink)}
.ftr .wm img.logo{display:block;height:60px;width:auto}
.ftr .cols{display:flex;gap:56px;flex-wrap:wrap}
.ftr .cols div b{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--l3-dourado-deep);margin-bottom:10px}
.ftr .cols div p{line-height:1.8}
.ftr a{color:var(--l3-ink-soft);border:0}
.ftr a:hover{color:var(--l3-ink)}
/* ---- seções ---- */
/* P2 (auditoria UX 2026-09-27) — a alternância claro/escuro era PERFEITAMENTE
   regular (alt,s,alt,s… por 12 blocos). Quando tudo alterna, alternar deixa de
   significar: o olho para de usar o contraste de fundo como pista de "mudou de
   assunto".
   Padding diferente por tom devolve informação ao ritmo — o degrau de pausa vai
   de 12px (só as bordas) para 32px. Custo líquido: +56px em 16.241px de home.
   Ataca principalmente os blocos 8-9-11, que somam 1.209px de estrutura idêntica. */
.s{padding:72px 0}
.s.alt{padding:104px 0;background:var(--l3-card);border-top:1px solid var(--l3-line);border-bottom:1px solid var(--l3-line)}
.sh{max-width:62ch;margin-bottom:40px}
.sh .k{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--l3-dourado-deep);font-weight:600;margin-bottom:14px}
.sh h2{font-size:clamp(26px,3.2vw,40px);line-height:1.08;letter-spacing:-.01em;font-weight:500;text-wrap:pretty}
.sh p{margin-top:16px;font-size:16.5px;color:var(--l3-ink-soft);text-wrap:pretty}
/* `.sh` sozinho na seção (sem conteúdo abaixo): os 40px existem para separar
   o cabeçalho do que vem DEPOIS dele dentro da mesma seção. Sem conteúdo, viram
   vão órfão somado ao padding da própria seção. Ver bloco 5 do index.html. */
.sh.solo{margin-bottom:0}
/* ---- hero de página interna ---- */
.phero{position:relative;overflow:hidden;background:#100E0C;min-height:44vh;display:flex;align-items:flex-end}
.phero img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero .sh2{position:absolute;inset:0;background:linear-gradient(rgba(12,10,8,.3),rgba(12,10,8,.78))}
.phero .ct{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:0 40px 44px;color:#fff}
.phero .crumb{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.7);margin-bottom:14px}
.phero .crumb a{color:rgba(255,255,255,.7);border:0}
.phero .crumb a:hover{color:#fff}
.phero h1{font-size:clamp(30px,4.2vw,52px);line-height:1.05;letter-spacing:-.01em;font-weight:500;max-width:22ch}
.phero .sub{margin-top:14px;font-size:16.5px;color:rgba(255,255,255,.85);max-width:56ch;text-wrap:pretty}
/* ---- amenidades ---- */
/* P1 (auditoria UX 2026-09-27) — as linhas divisórias eram o FUNDO vazando pelo
   gap de 1px. Funciona quando o número de itens é múltiplo de 4; com 10
   diferenciais (bloco 3) ou 3 vantagens (bloco 14), as células vazias viram um
   bloco sólido de cor em desktop >=1081px. Some em <=1080px, onde o grid cai
   para 2 colunas.
   `outline` em vez de `border`: outline não ocupa espaço no box model, então o
   resultado é pixel-idêntico onde há conteúdo — só deixa de pintar o vazio. */
.amen{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:transparent}
/* `position:relative` ancora o filete dourado do hover (bloco MOVIMENTO). */
.amen .a{position:relative;background:var(--l3-bg);padding:26px 24px;border-radius:var(--l3-r-m);outline:1px solid var(--l3-line)}
.s.alt .amen .a{background:var(--l3-card)}
.amen .a .n{font-size:11px;color:var(--l3-dourado-deep);font-variant-numeric:tabular-nums;margin-bottom:14px}
.amen .a b{display:block;font-size:16px;font-weight:600;margin-bottom:7px;letter-spacing:-.01em}
.amen .a p{font-size:13.5px;color:var(--l3-ink-soft);text-wrap:pretty}
/* Ícone em --l3-dourado (2026-09-30), não mais no dourado-deep via --l3-madeira.
   O brand book põe o dourado em "logo, filetes, ícones"; o deep existe para
   TEXTO pequeno, e estes SVGs são decorativos (aria-hidden, sem exigência de
   contraste de texto — ainda assim 3.4:1 sobre o marfim, acima do 3:1 de
   elemento gráfico). O deep passa a ser o estado de hover: o ícone "acende"
   para o tom mais fundo quando o card é apontado. */
.amen .a svg{width:22px;height:22px;color:var(--l3-dourado);margin-bottom:12px}
/* ---- desktop: numeral no canto, ícone abre o card ----
   Auditoria premium 2026-09-30. No desktop o card empilhava DOIS marcadores
   antes do título — numeral "01" numa linha, ícone na seguinte — e em
   localizacao.html a ordem saía invertida (lá o ícone é prependido por JS),
   então a mesma grade lia de dois jeitos entre páginas.
   Com ícone presente, o numeral sai do fluxo e vai para o canto superior
   direito, na altura do centro do ícone (26px de padding + 3px). A ordem do
   DOM deixa de importar e o card perde ~30px de cabeçalho sem perder nenhum
   dos dois. Sem ícone (a-casa.html), o numeral continua sendo o marcador, no
   fluxo, como antes. O mobile tem regra própria (marcador em coluna de 26px,
   numeral escondido quando há ícone) e NÃO é tocado — por isso min-width. */
@media(min-width:761px){
  .amen .a:has(> svg) > .n{position:absolute;top:29px;right:24px;margin:0;line-height:1.5}
}
/* ---- a grade acompanha a contagem ----
   4 colunas fixas deixam linha órfã: 10 diferenciais = 4+4+2 (duas células
   vazias na home e na suíte) e 3 itens = uma coluna inteira vazia à direita
   (horários sob as suítes, vantagens da reserva direta). O P1 de 2026-09-27
   parou de PINTAR o vazio; isto tira o vazio.
     · 3 itens → 3 colunas (a partir de 1081px, onde as 4 colunas valem);
     · 5 ou 10 itens → 5 colunas a partir de 1180px — abaixo disso a célula
       ficaria com <180px de texto e os títulos quebrariam em 3 linhas.
   Contagem por :has(); sem suporte, fica a grade de 4 de antes. */
@media(min-width:1081px){
  .amen:has(> .a:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1180px){
  .amen:has(> .a:nth-child(5):last-child),
  .amen:has(> .a:nth-child(10):last-child){grid-template-columns:repeat(5,1fr)}
  .amen:has(> .a:nth-child(5):last-child) > .a,
  .amen:has(> .a:nth-child(10):last-child) > .a{padding:26px 22px}
  .amen:has(> .a:nth-child(5):last-child) > .a:has(> svg) > .n,
  .amen:has(> .a:nth-child(10):last-child) > .a:has(> svg) > .n{right:22px}
}
/* ---- cards de suíte (lista) ---- */
.rooms{display:grid;gap:18px}
/* O card precisa se destacar da seção que o contém, senão vira uma moldura
   de 1px sobre a mesma cor. Numa seção clara (.s) ele sobe para --l3-card;
   numa seção que JÁ é card (.s.alt) ele desce para --l3-bg. A regra é
   "contraste com o fundo", não "cor fixa" — assim o card sobrevive a
   qualquer reordenação de seções sem virar retângulo invisível. */
.room{display:grid;grid-template-columns:300px 1fr auto;gap:0;background:var(--l3-card);border:1px solid var(--l3-line);border-radius:var(--l3-r-m)}
.s.alt .room{background:var(--l3-bg)}

/* P3 (auditoria UX 2026-09-27) — o §12 do documento do cliente pede "grande
   destaque visual" para a hidromassagem, chamando-a de "uma das características
   de maior apelo comercial". O bloco usava a casca `.s` genérica e sua foto
   renderizava DENTRO de `.loc .map` — o componente de MAPA, com borda de 1px —
   em 346x260px: 40% menor que a foto de abertura da galeria do bloco 4, que
   ninguém pediu para destacar.
   `.hidro` tira a foto da moldura de mapa e muda a proporção para 4:5, que em
   390px leva a altura de 260px para 432px. O h2 sobe para ~27px, entre o hero e
   as demais seções — destaque sem competir com a primeira tela. */
.hidro{display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.hidro .ph{position:relative;overflow:hidden;border-radius:var(--l3-r-m)}
.hidro .ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.s .sh.hidro-sh h2{font-size:clamp(26px,7vw,34px)}
@media(max-width:1080px){.hidro{grid-template-columns:1fr;gap:26px}}
/* ---- .edit — bloco editorial: texto + foto pequena lateral ----------------
   2026-09-29. Diagnóstico do founder: "uma foto pequena, estilo revista, ao
   lado do texto; não tudo texto corrido". Nove seções da home/internas
   rodavam SÓ TEXTO, somando ~4.100px.

   O defeito não é vertical, é HORIZONTAL, e só aparece na captura: `.note` e
   `.sh` têm max-width em ch (66ch/62ch), então em 1440px a coluna de texto
   morre em ~1100px e sobra 340px de creme vazio à direita, do topo ao fim da
   seção. A leitura não tem contrapeso — é uma coluna solta num campo vazio.
   É esse vazio, não o volume de palavras, que lê como "parede de texto".

   Por que NÃO reusar `.hidro` (que é o componente mais próximo):
     · `.hidro` é 1.1fr/1fr — foto grande, quase metade da tela. É o destaque
       declarado do §12 ("maior apelo comercial"). Replicar essa proporção em
       6 seções faria toda seção parecer o destaque principal, o que é o mesmo
       que não ter destaque.
     · `.hidro` fixa aspect-ratio 4/5 (retrato alto). Para um bloco de apoio
       isso ADICIONA altura em vez de ocupar vazio lateral.
     · `align-items:center` centra a foto na altura do texto; num bloco de
       apoio a foto deve ancorar no TOPO, alinhada à primeira linha.
   Mesma família (grid de 2 colunas, --l3-r-m, mesma sombra zero), papel outro.

   `align-items:start` + `position:sticky` no aside: em seções de texto longo
   a foto acompanha a leitura sem esticar. Custo de altura no desktop: ZERO —
   a foto vive na coluna que já estava vazia. */
.edit{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:52px;align-items:start}
.edit.wide{grid-template-columns:minmax(0,1fr) 380px}
.edit > .bd{min-width:0}
.edit figure{margin:0;position:sticky;top:96px}
.edit figure img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;border-radius:var(--l3-r-m)}
.edit figure.land img{aspect-ratio:4/3}
.edit figcaption{margin-top:10px;font-size:12px;line-height:1.45;color:var(--l3-ink-mute);text-wrap:pretty}
/* foto à esquerda: alterna o lado para as seções não virarem um padrão só */
.edit.flip{grid-template-columns:300px minmax(0,1fr)}
.edit.flip > .bd{order:2}
.edit.flip figure{order:1}

/* ---- .quote — depoimento como citação, não como card de produto ---------
   Os 3 depoimentos rodavam em `.card.pad` — o MESMO componente dos pacotes
   românticos (preço + inclusos). Cartão idêntico para "produto à venda" e
   "fala de hóspede" achata os dois: a prova social perde a voz humana e vira
   mais um item de catálogo.
   Foto aqui seria pior: não temos retrato dos autores, e ilustrar uma fala
   com foto de suíte sugere que a foto é do quarto DAQUELE hóspede — fato que
   não temos. A aspa serve ao mesmo fim (quebrar o campo de texto) sem afirmar
   nada. Serifa da marca, no creme, atrás do texto. */
.quote{background:var(--l3-card);border:1px solid var(--l3-line);border-radius:var(--l3-r-m);padding:30px 28px 26px;position:relative;overflow:hidden}
.s.alt .quote{background:var(--l3-bg)}
.quote::before{content:"\201C";position:absolute;top:-26px;right:10px;font-family:var(--l3-serif);font-size:150px;line-height:1;color:var(--l3-madeira);opacity:.14;pointer-events:none}
.quote > *{position:relative;z-index:1}
.quote .tx{font-family:var(--l3-serif);font-size:19px;line-height:1.45;color:var(--l3-ink);text-wrap:pretty}
.quote .by{margin-top:18px;padding-top:14px;border-top:1px solid var(--l3-line-soft);font-weight:600;font-size:14px}
.quote .loc{font-size:12px;color:var(--l3-ink-mute);margin-top:2px}
.quote .rt{color:var(--l3-madeira);letter-spacing:.14em;font-size:13px;margin-bottom:14px}

/* ---- .tier — cartão de pacote com numeral editorial ----------------------
   2026-09-29. Os 3 cartões Bronze/Prata/Ouro rodavam em `.card.pad` e a
   captura mostrou o defeito REAL desta seção — que não é falta de foto:
   o grid iguala a altura pelo cartão mais alto (Ouro, 3 linhas de `includes`),
   então Bronze, com UMA linha ("Pétalas/rosas e bombons."), ficava com ~120px
   de vazio embaixo do preço. Três retângulos de altura igual e preenchimento
   muito diferente leem como cartão quebrado, não como comparação de níveis.

   Por que NÃO foto aqui: a seção imediatamente acima já tem 5 fotos (2.678px
   no mobile). Uma 6ª imagem nesta seção seria fadiga, não alívio. E não temos
   foto de cada pacote montado — ilustrar "Bronze" com uma foto da decoração
   completa (que é o Ouro) venderia o pacote errado.

   O numeral romano ancora o vazio e dá a ESCALA que os nomes (Bronze/Prata/
   Ouro) só dão a quem já conhece a convenção. Mesmo idioma do `.quote::before`
   — serifa da marca, madeira, opacidade baixa — para as duas soluções lerem
   como a mesma família. `flex-direction:column` + `margin-top:auto` no preço
   empurra o valor para a base: os 3 preços passam a alinhar entre si, que é o
   que uma tabela de comparação precisa. */
.tier{position:relative;display:flex;flex-direction:column;overflow:hidden}
/* Numeral na BASE direita, não no topo.
   ⚠️ Estava em `top:6px;right:16px` e a captura mostrou o defeito: os pacotes
   Prata e Ouro têm descrição de 2-3 linhas, que avança até a borda direita e
   passa POR CIMA do numeral — "espumante de boas-vindas e" cruzando o "II".
   O canto livre em TODOS os três cartões é o inferior direito, ao lado do
   preço (que é curto por natureza: "R$ 430"). Ali o numeral nunca colide,
   porque a única coisa naquela faixa é o valor, alinhado à esquerda. */
.tier .rn{position:absolute;bottom:14px;right:20px;font-family:var(--l3-serif);font-size:64px;line-height:1;color:var(--l3-madeira);opacity:.17;pointer-events:none}
.tier > *{position:relative;z-index:1}
.tier .inc{margin-top:4px}
.tier .val{margin-top:auto;padding-top:18px}

.room .ph{position:relative;overflow:hidden;min-height:210px;border-radius:var(--l3-r-m)}
.room .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room .bd{padding:26px 28px}
.room .bd .tag{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--l3-madeira);font-weight:600}
.room .bd h3{font-size:22px;font-weight:500;letter-spacing:0;margin:9px 0 4px}
.room .bd .cat{font-size:13.5px;color:var(--l3-ink-mute)}
.room .bd .dsc{font-size:14px;color:var(--l3-ink-soft);margin-top:12px;max-width:60ch;text-wrap:pretty}
.room .bd ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.room .bd li{font-size:12.5px;color:var(--l3-ink-soft);border:1px solid var(--l3-line);padding:5px 11px;border-radius:var(--l3-r-pill)}
.room .pr{padding:26px 28px;border-left:1px solid var(--l3-line);display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:10px;min-width:180px}
.room .pr .hint{font-size:12.5px;color:var(--l3-ink-mute);text-align:right;text-wrap:pretty}
/* ---- galeria ---- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.gal figure{position:relative;overflow:hidden;background:#111;border-radius:var(--l3-r-m)}
/* O zoom de hover mudou para o bloco MOVIMENTO (dentro de hover:hover +
   no-preference): no toque ele "grudava" depois do tap, e o `transition:.5s`
   sem curva destoava do resto. */
.gal figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.gal figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 16px 14px;font-size:12.5px;color:#fff;background:linear-gradient(transparent,rgba(12,9,6,.82))}
.gal figure.big{grid-column:span 2;grid-row:span 2}
.gal figure.big img{aspect-ratio:auto;height:100%}
/* ---- redondezas ---- */
.near{display:grid;gap:0}
.near .r{display:grid;grid-template-columns:1fr auto;gap:16px;padding:15px 0;border-bottom:1px solid var(--l3-line-soft);align-items:baseline}
.near .r b{font-size:15px;font-weight:600}
.near .r small{display:block;font-size:13px;color:var(--l3-ink-soft);margin-top:3px;text-wrap:pretty}
.near .r .d{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--l3-ink-mute);white-space:nowrap}
/* ---- fecho ---- */
.close{position:relative;overflow:hidden;background:#100E0C;color:#fff}
.close img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.close .sh2{position:absolute;inset:0;background:linear-gradient(rgba(12,10,8,.35),rgba(12,10,8,.82))}
.close .ct{position:relative;z-index:2;padding:100px 40px;max-width:1240px;margin:0 auto;text-align:center}
.close h2{font-size:clamp(28px,3.6vw,46px);line-height:1.06;letter-spacing:-.01em;font-weight:500;max-width:22ch;margin:0 auto}
.close p{margin:18px auto 30px;font-size:16.5px;color:rgba(255,255,255,.84);max-width:52ch}
.close .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media(max-width:1080px){
  /* A foto lateral encolhe antes de empilhar: entre 761 e 1080px ainda há
     coluna sobrando, e empilhar aqui adicionaria altura sem necessidade. */
  .edit,.edit.wide{grid-template-columns:minmax(0,1fr) 240px;gap:32px}
  .edit.flip{grid-template-columns:240px minmax(0,1fr)}
  .amen{grid-template-columns:repeat(2,1fr)}
  .gal{grid-template-columns:repeat(2,1fr)}
  .gal figure.big{grid-column:span 2;grid-row:span 1}
  .room{grid-template-columns:1fr}
  .room .pr{border-left:0;border-top:1px solid var(--l3-line);flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap}
  .room .pr .hint{text-align:left}
}
@media(max-width:760px){
  .bar nav{display:none}
  .bar .burger{display:flex}
  .bar .in > .btn{display:none}   /* o CTA vive na gaveta no mobile */
  .bar .in{gap:16px}
  .amen{grid-template-columns:1fr}
  .w,.bar .in,.ftr .in,.phero .ct,.close .ct,.strip .in{padding-left:22px;padding-right:22px}
  .s{padding:60px 0}

  /* ---- hero de página interna: menos altura forçada, texto com mais ar ---- */
  .phero{min-height:auto}
  .phero .ct{padding-top:34px;padding-bottom:34px}
  .phero h1{font-size:clamp(28px,7.2vw,40px);max-width:20ch}

  /* ---- fecho: o mesmo excesso vertical do phero, herdado do desktop ---- */
  .close .ct{padding-top:64px;padding-bottom:64px}

  /* ---- faixa de provas: perdia o gutter-mobile por não estar na lista geral ---- */
  .strip .in{padding-top:22px;padding-bottom:22px;gap:20px}

  /* ---- .edit no mobile: a foto empilha, mas NÃO no formato do desktop ----
     §26 (mobile é prioridade). Uma foto 4:5 em 346px úteis mede 432px de
     rolagem — em 6 seções seriam +2.600px, trocar parede de texto por parede
     de foto. O 16:9 mede 195px: 55% menos, e ainda quebra o campo de texto,
     que é a função. A foto vai ANTES do corpo (order:-1), logo abaixo do
     título: quem rola vê "título → imagem → texto", e a imagem serve de
     abertura da seção em vez de rodapé que ninguém alcança.
     `position:static` desliga o sticky — sticky em coluna única prenderia a
     foto no topo enquanto o texto passa por baixo. */
  .edit,.edit.wide,.edit.flip{grid-template-columns:1fr;gap:20px}
  .edit figure,.edit.flip figure{position:static;order:-1;margin-bottom:2px}
  .edit.flip > .bd{order:0}
  .edit figure img,.edit figure.land img{aspect-ratio:16/9}
  .edit figcaption{margin-top:8px;font-size:11.5px}

  /* ---- depoimentos: a aspa de 150px domina um cartão de 346px de largura ---- */
  .quote{padding:24px 22px 22px}
  .quote::before{font-size:110px;top:-18px;right:6px}
  .quote .tx{font-size:17.5px}

  /* ---- galeria: 2 colunas com legenda por cima ficava denso; 1 coluna respira ---- */
  .gal{grid-template-columns:1fr}
  .gal figure.big{grid-column:span 1;grid-row:span 1}

  /* ---- ficha técnica da suíte: rótulo fixo de 150px sobrava pouco pro valor ---- */
  .facts .f{grid-template-columns:1fr;gap:4px}

  /* ---- rodapé: gap de 56px pensado para colunas lado a lado virava respiro
     vertical exagerado quando empilha ---- */
  .ftr .cols{gap:28px 40px}

  /* ---- cards de suíte: aperta o respiro interno ao tamanho da tela ---- */
  .room .bd,.room .pr{padding:22px 20px}
  /* CTA do card em largura cheia (2026-09-30). Era o único CTA do mobile de
     largura natural, encostado à esquerda — hero, fecho, suíte e endereço já
     empilham em coluna cheia. Base de 140px: em vivendas.html, com dois
     botões, eles dividem a linha quando cabem e empilham quando não. */
  .room .pr .btn{flex:1 1 140px}

  /* ============================================================
     PASSE DE UX — hierarquia, ritmo e densidade (mobile only)
     O passe anterior resolveu o mecânico. Isto trata do que
     sobrou: por que a página LÊ como um bloco só.
     ============================================================ */

  /* --- 1. HIERARQUIA: os títulos colapsam todos para o piso do clamp ---
     Em 390px hero h1 dá 29,6px e .sh h2 dá 26px — 3,6px de diferença.
     No desktop (1280px) esse intervalo é 18,9px. Ou seja: a hierarquia
     existe no desktop e SOME no mobile, e sem ela nada anuncia "começou
     uma seção nova" — tudo lê como um fluxo contínuo. Recuar o h2 de
     seção reabre o degrau sem tocar no h1 (que já foi calibrado). */
  .sh h2{font-size:clamp(22px,5.9vw,26px);line-height:1.12}
  /* O kicker é o que de fato ANUNCIA a seção numa tela estreita: é a
     primeira coisa que entra em cena. Ganha presença e cola no título. */
  .sh .k{font-size:10px;letter-spacing:.2em;margin-bottom:10px;color:var(--l3-dourado-deep)}
  .sh p{margin-top:12px;font-size:15.5px}
  .sh{margin-bottom:28px}

  /* --- 2. RITMO: 60px uniforme entre TODAS as seções é monótono ---
     Sem variação, a pessoa não sente onde um assunto termina e outro
     começa — só rola. Duas medidas: a pausa normal encolhe um pouco
     (mais conteúdo por tela), e a seção que TROCA de fundo (.s.alt)
     ganha pausa maior, porque ali a mudança de assunto é real. */
  .s{padding:52px 0}
  .s.alt{padding:64px 0}

  /* --- 3. .amen: 8 blocos numerados em coluna é uma lista longa ---
     Cada célula gasta ~152px e 8 delas somam ~1214px de rolagem quase
     idêntica. O numeral 01..08 ocupa uma linha inteira só para dizer
     "item N" — informação que a ordem visual já dá. Passa a marcador
     inline, o que devolve ~35px por célula (~280px no total) e deixa
     o título como primeira coisa que o olho encontra. */
  .amen{gap:1px}
  .amen .a{padding:18px 20px;display:grid;grid-template-columns:26px 1fr;gap:0 10px;align-items:baseline}
  /* Coluna 1 = marcador (numeral OU ícone), coluna 2 = conteúdo.
     Numeral e ícone ocupam a MESMA célula (1/1): onde os dois existem,
     o ícone cobre o numeral; onde só há um, ele ocupa a célula sozinho.
     Não depende de :has() — em navegador sem suporte o resultado é o
     mesmo, porque a sobreposição é resolvida pelo grid. */
  .amen .a .n{grid-area:1/1;margin-bottom:0;font-size:10.5px;letter-spacing:.1em;color:var(--l3-dourado-deep)}
  .amen .a svg{grid-area:1/1;margin-bottom:0;width:18px;height:18px;align-self:center}
  .amen .a b{grid-column:2;margin-bottom:5px;font-size:15.5px}
  .amen .a p{grid-column:2;font-size:13.5px}
  /* Onde há ícone, o numeral é redundante — dois marcadores para a mesma
     célula é ruído. Progressive enhancement: sem :has(), o ícone
     simplesmente fica por cima (mesma célula do grid). */
  .amen .a:has(svg) .n{visibility:hidden}

  /* --- 4. .room: o card carrega 7 informações antes do botão ---
     foto + tag + título + categoria + descrição + 3-4 chips + botão.
     Na decisão "qual suíte?", os chips são o ruído: dizem "Hidro no
     quarto / Cozinha equipada / Vaga na propriedade" em TODOS os cards
     — o próprio site afirma que isso é igual em todas. Repetir em cada
     card gasta 2-3 linhas por card sem ajudar a escolher. Ficam legíveis
     mas recuam de peso; o que DIFERENCIA (nome, categoria, capacidade,
     descrição) fica em primeiro plano. */
  .room .ph{min-height:200px}
  .room .bd h3{font-size:20px;margin:7px 0 3px}
  .room .bd .dsc{margin-top:10px;font-size:13.5px}
  .room .bd ul{margin-top:12px;gap:6px}
  .room .bd li{font-size:11.5px;padding:4px 9px;color:var(--l3-ink-mute);border-color:var(--l3-line-soft)}
  .rooms{gap:14px}

  /* --- 5. .near: linhas de 15px de padding com a distância à direita ---
     Em tela estreita o nome e a distância brigam pela mesma linha.
     Alinhar pelo topo evita que a distância "flutue" longe do nome. */
  .near .r{align-items:start;padding:13px 0}

  /* --- 6. RODAPÉ: 4 colunas empilhadas viram 4 blocos de igual peso ---
     Depois do fecho (que já é o CTA final), o rodapé é referência, não
     leitura. Reduz o peso e devolve alvo de toque aos links, que hoje
     têm 23px de altura clicável — abaixo do piso de 44px. */
  .ftr{padding:34px 0}
  .ftr .cols div b{margin-bottom:6px}
  .ftr .cols div p{line-height:1.6}
  .ftr .cols a{display:inline-block;padding:9px 0;line-height:1.3}

  /* ---- CTAs do fecho: mesmo problema do hero — dois botões disputando
     largura e encostando na borda. Empilha em coluna cheia. ---- */
  .close .acts{flex-direction:column;align-items:stretch}
  .close .acts .btn{width:100%}
}

/* ============================================================
   ACESSIBILIDADE — aditivo, não altera o estado default
   ============================================================ */
/* Foco visível para navegação por teclado. Antes disso, quem navegava
   sem mouse não tinha nenhuma indicação de onde estava. */
:focus-visible{
  outline:2px solid var(--l3-green);
  outline-offset:3px;
  border-radius:var(--l3-r-s);
}
.close :focus-visible,
.phero :focus-visible{outline-color:#fff}
/* `.hero` saiu desta lista em 2026-09-30: o hero da home deixou de ser texto
   sobre foto escura (caminho C — texto no marfim). Contorno branco sobre o
   marfim seria foco invisível; lá vale o verde padrão acima. */
/* Não remove o foco de quem usa mouse sem também dar alternativa —
   :focus-visible já cobre isso nativamente. */

/* Respeita quem pediu menos movimento no sistema operacional. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  .gal figure:hover img,.ocard:hover img{transform:none}
}

/* ============================================================
   MENU MOBILE — burger + drawer (Linha 3)
   Abaixo de 760px a nav horizontal some; o burger assume.
   ============================================================ */
.bar .burger{
  display:none;                /* desktop: oculto (a nav já aparece) */
  margin-left:auto;
  width:42px;height:42px;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  background:transparent;border:1px solid var(--l3-line);
  border-radius:var(--l3-r-s);cursor:pointer;padding:0;
}
.bar .burger span{
  display:block;width:18px;height:1.5px;background:var(--l3-ink);
  transition:transform .26s ease,opacity .2s ease;
}
.bar .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.bar .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.bar .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
/* O display:flex do burger no @media(max-width:760px) mais acima PERDIA para o
   display:none da regra base, que vem depois com a mesma especificidade — no
   celular o menu não tinha botão. Reafirmado aqui, DEPOIS da base (2026-09-30).
   Mesmo bloco: logo do cabeçalho menor no mobile. */
@media(max-width:760px){
  .bar .burger{display:flex}
  .bar .wm img.logo{height:40px}
}

/* fundo escurecido */
.l3-scrim{
  position:fixed;inset:0;z-index:70;
  background:rgba(12,10,8,.5);
  opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s;
}
.l3-scrim.open{opacity:1;visibility:visible}

/* gaveta */
.l3-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:80;
  width:min(84vw,340px);
  background:var(--l3-card);
  border-left:1px solid var(--l3-line);
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
  display:flex;flex-direction:column;
  overflow-y:auto;overscroll-behavior:contain;
  padding:22px 24px calc(24px + env(safe-area-inset-bottom));
}
.l3-drawer.open{transform:none}
.l3-drawer .top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:26px}
.l3-drawer .wm{font-family:var(--l3-serif);font-size:21px;line-height:1;color:var(--l3-ink);border:0}
.l3-drawer .wm small{display:block;font-family:var(--l3-sans);font-size:8px;letter-spacing:.28em;text-transform:uppercase;color:var(--l3-ink-mute);margin-top:4px;font-weight:500}
.l3-drawer .x{
  width:38px;height:38px;flex:0 0 38px;
  background:transparent;border:1px solid var(--l3-line);border-radius:var(--l3-r-s);
  color:var(--l3-ink);font-size:19px;line-height:1;cursor:pointer;
}
.l3-drawer .x:hover{background:var(--l3-bg-2)}
.l3-drawer nav{display:flex;flex-direction:column;gap:0}
.l3-drawer nav a{
  font-size:17px;color:var(--l3-ink);border:0;
  padding:15px 0;border-bottom:1px solid var(--l3-line-soft);
}
.l3-drawer nav a.active{font-weight:600}
.l3-drawer nav a:hover{color:var(--l3-green)}
.l3-drawer .acts{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.l3-drawer .acts .btn{justify-content:center}
.l3-drawer .meta{
  margin-top:auto;padding-top:26px;
  font-size:13px;color:var(--l3-ink-soft);line-height:1.7;
}
.l3-drawer .meta a{color:var(--l3-ink-soft);border:0}
.l3-drawer .meta a:hover{color:var(--l3-ink)}
body.l3-locked{overflow:hidden}
@media(min-width:761px){
  .l3-drawer,.l3-scrim{display:none}
}

/* CTA fixo mobile "VER DATAS E VALORES" (§2, §26) — Story S4, aprovado pelo
   founder 2026-09-27. ADAPT do padrão .bookbar já em produção em suite.html.
   z-index 60 < scrim 70 < drawer 80; padding-bottom no body evita cobrir rodapé. */
@media(max-width:760px){
  .l3-ctabar{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;padding:10px 22px calc(10px + env(safe-area-inset-bottom));
    background:rgba(253,251,247,.96);border-top:1px solid var(--l3-line);
  }
  .l3-ctabar .btn{flex:1;justify-content:center}
  body.l3-locked .l3-ctabar{display:none}
  body.has-l3-ctabar{padding-bottom:74px}
  /* Barra "em espera" (2026-09-30, home — caminho C). Na página que marca um
     CTA com [data-ctabar-anchor] (hoje só o "Ver datas e valores" do hero da
     home), a barra só entra quando esse botão sai da tela: antes o MESMO CTA
     aparecia duas vezes na primeira dobra. `visibility:hidden` tira o botão
     escondido da ordem de Tab. Quem pede a espera é o chrome.js, e só com
     IntersectionObserver — sem ele a classe nunca é posta e a barra fica
     visível como sempre esteve (degradação segura). */
  .l3-ctabar.is-waiting{transform:translateY(100%);visibility:hidden}
}
@media(max-width:760px) and (prefers-reduced-motion:no-preference){
  /* Entrada/saída da barra: 280ms na curva do sistema de movimento. O
     `visibility` só vira hidden DEPOIS que o deslize termina. */
  .l3-ctabar{transition:transform 280ms var(--l3-ease),visibility 0s linear 0s}
  .l3-ctabar.is-waiting{transition:transform 280ms var(--l3-ease),visibility 0s linear 280ms}
}
@media(min-width:761px){.l3-ctabar{display:none}}

/* ============================================================
   MOVIMENTO — micro-interações e entrada dos cards (2026-09-30)
   Passe premium pós-brand book Linha 4. Pedido do cliente: "aquele
   movimentinho" nos cards de ícones. Premium aqui = contenção: um único
   idioma de movimento, curto, sem loop, repetido igual em todo o site.

   O IDIOMA (vale para .amen .a, .checks .a, .strip .it, .ctc e .tier):
     1. filete dourado de 2px que se desenha da esquerda para a direita no
        topo do card (o "filete" do brand book, agora como resposta);
     2. o marcador do card (ícone, ou o numeral romano no .tier) sobe 2px e
        escurece do dourado para o dourado-deep.
   Cards de INFORMAÇÃO não sobem: elevar o card inteiro promete um clique
   que não existe (falsa affordance). [AUTO-DECISION] "elevação 1–2px" do
   briefing → aplicada só onde o card É link (.ocard); nos demais o
   movimento fica no marcador, que é onde o olho já está.
   Cards de FOTO (.room, .ocard, .gal): a foto aproxima 3% dentro da
   moldura, devagar — a fotografia é o ativo principal da marca.

   TEMPOS: hover 260ms; filete 420ms (mais longo que o ícone, para ler como
   traço desenhado e não como piscada); foto 900ms; entrada 680ms com
   escalonamento de 70ms por card que entra JUNTO na tela (teto de 6 → no
   máximo 420ms de atraso). Curva única: a mesma da gaveta mobile.

   ACESSIBILIDADE: toda transformação vive em prefers-reduced-motion:
   no-preference — com "reduzir movimento" nada se move e NADA fica oculto
   (a regra que esconde o card antes da entrada também só existe aqui
   dentro). Hover mora em (hover:hover): no toque não há estado grudado.
   Nenhuma informação depende do hover — só ênfase.
   ============================================================ */
:root{
  --l3-ease:cubic-bezier(.22,.61,.36,1); /* mesma curva de .l3-drawer */
  --l3-t-hover:260ms;
  --l3-t-line:420ms;
  --l3-t-photo:900ms;
  --l3-t-reveal:680ms;
  --l3-stagger:70ms;
}
/* Filete: existe sempre, recolhido (scaleX 0). Por ser transform, não mexe
   em layout nem em altura calibrada. `.ctc` precisa de âncora; `.amen .a` e
   `.tier` já são position:relative. */
.ctc{position:relative}
.amen .a::after,.tier::after,.ctc::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--l3-dourado);border-radius:var(--l3-r-m) var(--l3-r-m) 0 0;
  transform:scaleX(0);transform-origin:left center;pointer-events:none;
}
/* Na faixa de provas não há card: o filete vira um traço curto de 28px acima
   do ícone, dentro dos 26px de padding da faixa. Só no layout de colunas —
   no mobile a faixa é lista com divisores e o traço cairia sobre eles. */
@media(min-width:761px){
  .strip .it{position:relative}
  .strip .it::after{
    content:"";position:absolute;left:0;top:-12px;width:28px;height:1px;
    background:var(--l3-dourado);transform:scaleX(0);transform-origin:left center;
  }
}
@keyframes l3-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:no-preference){
  .amen .a::after,.tier::after,.ctc::after,.strip .it::after{transition:transform var(--l3-t-line) var(--l3-ease)}
  .amen .a svg,.strip .it svg,.ctc svg,.tier .rn{transition:transform var(--l3-t-hover) var(--l3-ease),color var(--l3-t-hover) var(--l3-ease),opacity var(--l3-t-hover) var(--l3-ease)}
  .ctc{transition:background-color var(--l3-t-hover) var(--l3-ease)}
  .ocard{transition:transform var(--l3-t-hover) var(--l3-ease),box-shadow var(--l3-t-hover) var(--l3-ease)}
  .room .ph img,.ocard img,.gal figure img{transition:transform var(--l3-t-photo) var(--l3-ease)}

  /* Teclado: link com foco recebe a MESMA resposta do hover. */
  .ctc:focus-visible::after{transform:scaleX(1)}
  .ctc:focus-visible svg{transform:translateY(-2px);color:var(--l3-dourado-deep)}
  .ocard:focus-visible{transform:translateY(-2px)}

  /* ENTRADA — setupReveal() (chrome.js) marca os cards com [data-reveal] e
     acrescenta .is-in quando entram na tela. `backwards` segura o estado
     inicial durante o atraso e DEVOLVE o transform ao terminar, então o hover
     continua funcionando depois (com `both`/`forwards` a animação prenderia o
     transform e anularia o hover). Sem JS o atributo nem existe: nada some. */
  [data-reveal]:not(.is-in){opacity:0}
  [data-reveal].is-in{animation:l3-rise var(--l3-t-reveal) var(--l3-ease) backwards;animation-delay:calc(var(--l3-i,0) * var(--l3-stagger))}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .amen .a:hover::after,.tier:hover::after,.ctc:hover::after,.strip .it:hover::after{transform:scaleX(1)}
  .amen .a:hover svg,.strip .it:hover svg,.ctc:hover svg{transform:translateY(-2px);color:var(--l3-dourado-deep)}
  .tier:hover .rn{transform:translateY(-2px);opacity:.28}
  .ocard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(26,24,21,.35)}
  .room:hover .ph img,.ocard:hover img,.gal figure:hover img{transform:scale(1.03)}
}

/* ============================================================
   LIGHTBOX — #lbx (montado por chrome.js#setupLightbox)
   ⚠️ Os estilos do lightbox só existiam no site.css da linha antiga. Na
   Linha 3 o `#lbx` era injetado SEM CSS: em suite.html o "×", uma caixa
   vazia e as setas "‹ ›" apareciam soltos ABAIXO do rodapé, e clicar numa
   foto da galeria não abria nada. Pior: os botões de seta têm a classe
   `.nav`, que aqui é o menu lateral do brand book (250px × 100vh, sticky)
   — daí as caixas gigantes. Tudo abaixo zera essa herança pelo #id.
   Fechado, o lightbox fica transparente, sem clique e `inert` (chrome.js):
   fora da ordem de tabulação e da árvore de acessibilidade. Opacidade em
   vez de display:none para permitir o fade de abertura.
   ============================================================ */
#lbx{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  background:rgba(18,16,13,.94);opacity:0;pointer-events:none}
#lbx.on{opacity:1;pointer-events:auto}
#lbx img{max-width:88vw;max-height:86vh;width:auto;height:auto;object-fit:contain;border-radius:var(--l3-r-m)}
#lbx button{position:fixed;display:flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;padding:0;overflow:visible;
  font-family:var(--l3-sans);font-size:24px;line-height:1;color:#fff;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:var(--l3-r-s)}
#lbx .x{top:20px;right:22px;bottom:auto;left:auto;height:48px}
#lbx .nav{top:50%;margin-top:-24px;height:48px}
#lbx .pv{left:22px}
#lbx .nx{right:22px}
#lbx :focus-visible{outline-color:#fff}
@media(hover:hover){#lbx button:hover{border-color:rgba(255,255,255,.7)}}
@media(prefers-reduced-motion:no-preference){
  #lbx{transition:opacity 280ms var(--l3-ease)}
  #lbx button{transition:border-color var(--l3-t-hover) var(--l3-ease)}
}
@media(max-width:760px){
  #lbx img{max-width:100vw;max-height:78vh;border-radius:0}
  #lbx .nav{top:auto;bottom:calc(22px + env(safe-area-inset-bottom));margin-top:0}
}

/* ============================================================
   LINHA 4 — SERIFA NOS TÍTULOS (brand book, seção 06 Tipografia)
   "Cormorant Garamond volta para os títulos: capa, frase de marca, nome de
   suíte, preço. Instrument Sans segue em tudo o que é informação."
   Na Linha 3 a serifa ficava só no wordmark; os títulos eram sans ("tom de
   ficha técnica", que o brand book Linha 4 tira).

   Só a FAMÍLIA muda aqui — tamanhos, quebras e alturas continuam nas regras
   de cada componente (calibradas para 390px). `font-size-adjust` iguala a
   altura-x da Cormorant (olho pequeno, ~0.40) à da Instrument Sans, então a
   troca não encolhe os títulos nem obriga a reescrever os ~20 clamp().
   Sem suporte ao font-size-adjust o título só sai um pouco menor.
   Contato (.ctc h4/.val) fica em sans de propósito: é informação.
   ============================================================ */
h1,h2,.room .bd h3,.frow .tx h3,.tier .val{
  font-family:var(--l3-serif);
  font-weight:500;
  font-size-adjust:.42;
}