/* ---- passo 197: a letra de texto passa de Inter a DejaVu Sans ----
   A Sandra viu a DejaVu numa prova minha — o meu navegador nao chega ao Google
   Fonts, a Inter nao carregou e o Chromium caiu na letra por omissao do Linux.
   Gostou mais e pediu a troca "em todo o lado onde tinhamos a mesma". A
   Fraunces dos titulos fica como esta.

   Tres cortes e nenhuma regra tocada. A DejaVu nao tem peso 500, que o tema usa
   nos rotulos em maiusculas, por isso cada @font-face declara um INTERVALO de
   pesos em vez de um valor: o 300 cai no ExtraLight, o 400 e o 500 no Book, o
   600 para cima no Bold. Assim os font-weight que ja estao escritos continuam a
   servir e nao ha uma unica declaracao para reescrever.

   O url e relativo de proposito: os assets do Shopify sao todos servidos da
   mesma pasta do CDN, e a regra 2 proibe as chavetas do Liquid dentro deste
   ficheiro — "asset_url" aqui dentro fazia o guardiao rejeitar o pacote.

   Peso: 62 kB nos tres cortes, ja subconjunto de latim (do original de 1,8 MB).
   Licenca Bitstream Vera/Arev, livre, permite redistribuir. */
@font-face{font-family:'DejaVu Sans';font-style:normal;font-weight:200 350;font-display:swap;
  src:url('../fonts/dejavu-extralight.woff2') format('woff2')}
@font-face{font-family:'DejaVu Sans';font-style:normal;font-weight:351 550;font-display:swap;
  src:url('../fonts/dejavu-book.woff2') format('woff2')}
@font-face{font-family:'DejaVu Sans';font-style:normal;font-weight:551 900;font-display:swap;
  src:url('../fonts/dejavu-bold.woff2') format('woff2')}

/* Site independente: a Fraunces deixou de vir do Google Fonts e passou a
   ficheiro local (mesma letra variavel, eixos opsz e wght). Tres pesos, como
   o pedido ao Google: 300, 400 e 600. */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/fraunces-latin-opsz-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:300;font-display:swap;
  src:url('../fonts/fraunces-latin-ext-opsz-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/fraunces-latin-opsz-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/fraunces-latin-ext-opsz-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/fraunces-latin-opsz-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/fraunces-latin-ext-opsz-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --basalt:#15120E;
  --basalt-2:#1E1A15;
  --terracotta:#E7551E;
  --stone:#8C8375;
  --sand:#E3D8C6;
  --ivory:#FAF6EF;
  --line:rgba(250,246,239,0.14);
  /* passo 112: a ficha dentro da gaveta da tabela deixou de ser um conjunto de
     celulas soltas e passou a ser um painel. Dois tons: o do painel, e um mais
     fundo para a celula do preco — e o unico numero que se decide ali. */
  --ficha:#282219;
  --ficha-preco:#13100C;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background:var(--basalt);
  color:var(--ivory);
  font-family:'DejaVu Sans',system-ui,sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100% }
h1,h2,h3,h4{font-family:'Fraunces',serif;font-weight:400;line-height:1.05;letter-spacing:-0.01em}
em{font-style:italic;color:var(--terracotta)}
.container{max-width:1360px;margin:0 auto;padding:0 48px}
.eyebrow{font-size:11px;letter-spacing:0.32em;text-transform:uppercase;color:var(--terracotta);font-weight:500}

/* cabecalho */
.cabecalho{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(21,18,14,0.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
}
/* nas paginas sem hero, o conteudo comeca abaixo do cabecalho */
body:not(.home) main{padding-top:76px}
.barra{display:flex;align-items:center;justify-content:space-between;gap:30px;height:76px}
.marca{font-family:'Fraunces',serif;font-weight:600;font-size:22px;letter-spacing:0.22em;color:var(--ivory)}
/* passo 58: o wordmark passou a ser o logotipo. A altura manda; a largura
   sai da proporcao real do desenho (1429x203, ou seja 7,04:1). */
.marca{display:inline-flex;align-items:center;line-height:1}
/* passo 61: no cabecalho a altura acompanha a largura do ecra — 26px acima de
   1200px, 16px a 390px, com travoes nas duas pontas. O rodape nao acompanha:
   a regra abaixo e mais especifica e fixa-o em 28px. */
.marca img{height:clamp(15px, calc(11.19px + 1.235vw), 26px);width:auto;display:block}
.rodape-marca .marca img{height:28px}
.menu{display:flex;gap:30px;list-style:none;font-size:13px}
.menu a{color:var(--sand);padding-bottom:3px;border-bottom:1px solid transparent}
.menu a:hover{color:var(--ivory);border-color:var(--terracotta)}
.menu-cta{font-size:11px;letter-spacing:0.16em;text-transform:uppercase;border:1px solid var(--line);padding:11px 20px;color:var(--sand)}
.menu-cta:hover{background:var(--terracotta);border-color:var(--terracotta);color:var(--basalt)}

/* botoes */
.btn-primary{display:inline-block;background:var(--terracotta);color:var(--basalt);padding:16px 32px;font-size:12px;letter-spacing:0.14em;text-transform:uppercase;font-weight:500}
.btn-primary:hover{background:var(--ivory)}
.btn-ghost{display:inline-block;border:1px solid var(--line);color:var(--sand);padding:16px 32px;font-size:12px;letter-spacing:0.14em;text-transform:uppercase}
.btn-ghost:hover{border-color:var(--terracotta);color:var(--ivory)}
.acoes{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px}

/* hero */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden}
.hero-fundo{position:absolute;inset:0;background:radial-gradient(85% 70% at 68% 22%, rgba(240,248,248,0.35), transparent 56%), linear-gradient(190deg,#8BA09E,#4D6261 44%,#161D1D)}
.hero-fundo:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(21,18,14,0.35) 0%, rgba(21,18,14,0.95) 100%)}
.hero-conteudo{position:relative;z-index:2;width:100%;padding-bottom:70px}
.hero h1{font-size:clamp(44px,7vw,110px);font-weight:300;line-height:0.94;letter-spacing:-0.03em;margin-top:20px;max-width:15ch}
.hero-sub{max-width:46ch;margin-top:26px;font-size:16px;line-height:1.75;color:var(--sand)}
.hero-locais{margin-top:18px;font-size:12px;letter-spacing:0.2em;text-transform:uppercase;color:var(--stone)}

/* fissura */
.fissura{position:relative;height:1px;background:var(--line)}
.fissura:before{content:'';position:absolute;top:-1px;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 0%,var(--terracotta) 20%,#FF8A50 50%,var(--terracotta) 80%,transparent 100%);filter:blur(2px);opacity:0.5}

/* manifesto */
.manifesto{padding:150px 0;text-align:center}
.manifesto h2{font-size:clamp(28px,4.4vw,62px);font-weight:300;line-height:1.12;max-width:20ch;margin:0 auto;letter-spacing:-0.02em}
.manifesto p{margin:32px auto 0;max-width:56ch;font-size:17px;line-height:1.8;color:var(--stone)}

/* paginas internas */
.pagina{padding:160px 0 120px}
.pagina h1{font-size:clamp(32px,5vw,64px);font-weight:300;margin-bottom:28px}
.rte{color:var(--sand);line-height:1.8;max-width:70ch}
.rte p{margin-bottom:18px}
.preco{color:var(--terracotta);font-size:20px;margin-bottom:24px}
.grelha{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.cartao{border:1px solid var(--line);padding:28px;display:block}
.cartao:hover{border-color:var(--terracotta)}
.cartao-titulo{display:block;font-family:'Fraunces',serif;font-size:20px;font-weight:300}
.cartao-preco{display:block;margin-top:10px;color:var(--stone);font-size:14px}
input,select{background:transparent;border:1px solid var(--line);color:var(--ivory);padding:14px;margin-bottom:12px;display:block;width:100%;max-width:380px;font-family:inherit}
button{font-family:inherit;cursor:pointer;border:0}

/* rodape */
.rodape{border-top:1px solid var(--line);padding:60px 0 40px}
.rodape-topo{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.rodape-marca p{margin-top:20px;color:var(--stone);font-size:14px;line-height:1.75;max-width:34ch}
.rodape-col h4{font-family:'DejaVu Sans',sans-serif;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--sand);font-weight:500;margin-bottom:18px}
.rodape-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.rodape-col a{font-size:14px;color:var(--stone)}
.rodape-col a:hover{color:var(--ivory)}
.rodape-fim{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-top:64px;padding-top:26px;border-top:1px solid var(--line);font-size:12px;color:var(--stone)}
.rodape-contactos{list-style:none;display:flex;flex-direction:column;gap:9px;margin-top:24px;font-size:14px;color:var(--stone)}
.rodape-contactos a{color:var(--stone)}
.rodape-contactos a:hover{color:var(--ivory)}
.rodape-social{list-style:none;display:flex;flex-wrap:wrap;gap:18px;margin-top:22px}
.rodape-social a{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--sand)}
.rodape-social a:hover{color:var(--terracotta)}
.rodape-legal{margin-top:56px;padding-top:26px;border-top:1px solid var(--line)}
.rodape-legal-links{list-style:none;display:flex;flex-wrap:wrap;gap:14px 26px}
.rodape-legal-links a{font-size:13px;color:var(--stone)}
.rodape-legal-links a:hover{color:var(--ivory)}
.rodape-ident{margin-top:14px;font-size:12px;line-height:1.7;color:var(--stone);max-width:78ch}
.rodape-legal + .rodape-fim{margin-top:34px}

@media (max-width:900px){
  .container{padding:0 24px}
  .menu{display:none}
  .grelha{grid-template-columns:1fr 1fr}
  .rodape-topo{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .grelha{grid-template-columns:1fr}
  .rodape-topo{grid-template-columns:1fr}
}


/* ================= HOME ================= */

:root{
  --basalt:#15120E;
  --basalt-2:#1E1A15;
  --basalt-3:#2A241C;
  --terracotta:#E7551E;
  --terracotta-deep:#A83B14;
  --stone:#8C8375;
  --sand:#E3D8C6;
  --ivory:#FAF6EF;
  --wood:#A47B52;
  --line:rgba(250,246,239,0.14);
  --ease:cubic-bezier(.16,.84,.44,1);
  --grao:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--basalt);color:var(--ivory);font-family:'DejaVu Sans',system-ui,sans-serif;font-weight:300;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100% }
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}
::selection{background:var(--terracotta);color:var(--basalt)}
.container{max-width:1360px;margin:0 auto;padding:0 48px}
.eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--terracotta);font-weight:500}
h1,h2,h3{font-family:'Fraunces',serif;font-weight:400;line-height:1.05;letter-spacing:-.01em}
em{font-style:italic;color:var(--terracotta)}
@media(max-width:820px){.container{padding:0 24px} }

/* placeholders de fotografia */
.ph{position:relative;isolation:isolate;background:var(--basalt-2)}
.ph::after{content:"";position:absolute;inset:0;background-image:var(--grao);opacity:.16}
.ph-jacuzzi{background:radial-gradient(85% 70% at 68% 22%,rgba(240,248,248,.4),transparent 56%),linear-gradient(190deg,#8BA09E,#4D6261 44%,#161D1D)}
.ph-sauna{background:radial-gradient(115% 80% at 20% 12%,rgba(255,238,214,.6),transparent 60%),linear-gradient(200deg,#BC9066,#805839 40%,#2C2016)}
.ph-gelo{background:radial-gradient(80% 70% at 52% 20%,rgba(226,240,246,.5),transparent 60%),linear-gradient(190deg,#9CAEB8,#4E5D67 48%,#14181B)}
.ph-foot{background:radial-gradient(90% 70% at 40% 20%,rgba(255,246,232,.5),transparent 58%),linear-gradient(190deg,#C4A886,#8A6A4A 45%,#2A2018)}
.ph-indoor{background:radial-gradient(100% 85% at 28% 15%,rgba(255,255,255,.26),transparent 55%),linear-gradient(172deg,#9A9289,#615B52 45%,#1E1B17)}
.ph-fogo{background:radial-gradient(72% 62% at 32% 76%,rgba(231,85,30,.85),transparent 64%),linear-gradient(200deg,#3A2820,#15120E)}
.ph-pedra{background:radial-gradient(100% 85% at 25% 15%,rgba(255,255,255,.28),transparent 55%),linear-gradient(172deg,#979289,#5F5A52 45%,#1E1B17)}

/* fissura — elemento assinatura */
.fissure{position:relative;height:1px;background:var(--line);overflow:visible;margin:0}
.fissure::before{content:'';position:absolute;top:-1px;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent 0%,var(--terracotta) 20%,#FF8A50 50%,var(--terracotta) 80%,transparent 100%);
  filter:blur(2px);opacity:.55;animation:glow 7s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.25;transform:scaleX(.85)}50%{opacity:.65;transform:scaleX(1)} }

/* ---------- cabeçalho ---------- */
/* ---------- botões ---------- */
.btn-primary{display:inline-block;background:var(--terracotta);color:var(--basalt);padding:16px 32px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;transition:.3s var(--ease)}
.btn-primary:hover{background:var(--ivory)}
.btn-ghost{display:inline-block;border:1px solid var(--line);color:var(--sand);padding:16px 32px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:.3s var(--ease)}
.btn-ghost:hover{border-color:var(--terracotta);color:var(--ivory)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(21,18,14,.42) 0%,rgba(21,18,14,.28) 40%,rgba(21,18,14,.96) 100%)}
.hero-inner{position:relative;z-index:3;width:100%;padding-bottom:60px}
.hero h1{font-size:clamp(44px,7vw,112px);font-weight:300;line-height:.94;letter-spacing:-.03em;margin:20px 0 0;max-width:15ch}
.hero-sub{max-width:46ch;margin:26px 0 0;font-size:16px;line-height:1.75;color:var(--sand)}
.hero-locais{margin-top:18px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone)}
.hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;flex-wrap:wrap;margin-top:40px;border-top:1px solid var(--line);padding-top:24px}
.hero-pro{text-align:right}
.hero-pro p{font-size:13px;color:var(--sand);line-height:1.6}
.hero-pro p + p{color:var(--stone)}
.hero-pro a{display:inline-block;margin-top:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--terracotta);border-bottom:1px solid rgba(231,85,30,.4);padding-bottom:3px}
.hero-feats{display:grid;grid-template-columns:repeat(4,1fr);column-gap:24px;row-gap:40px;justify-items:center;border:0;background:transparent}
.hero-feats div{background:transparent;padding:0 18px;position:static;display:grid;justify-items:center;align-content:start;max-width:280px;text-align:center}
.hero-feats svg{width:30px;height:30px;color:var(--sand);opacity:.92;stroke-width:1.4}
.hero-feats .num{font-family:'Fraunces',serif;font-weight:400;font-size:34px;line-height:1;color:var(--terracotta);letter-spacing:-.01em;margin-top:20px;white-space:nowrap}
.hero-feats .num i{font-style:normal;font-family:'DejaVu Sans',sans-serif;font-weight:400;font-size:13px;letter-spacing:.18em;text-transform:uppercase;vertical-align:.42em;margin-right:6px}
/* min-height reserva duas linhas: e o que alinha risco e descricao em todas as celulas */
.hero-feats span.lbl{margin-top:20px;font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ivory);line-height:1.5;min-height:42px}
.hero-feats .num + span.lbl{margin-top:14px}
.hero-feats .risco{width:22px;height:1px;background:var(--terracotta);margin-top:16px;opacity:.85}
.hero-feats .desc{margin-top:16px;font-size:13px;line-height:1.65;color:var(--stone);max-width:24ch}
@media(max-width:900px){.hero-pro{text-align:left} }

/* ---------- manifesto ---------- */
.manifesto{padding:150px 0;text-align:center}
.manifesto h2{font-size:clamp(28px,4.4vw,62px);font-weight:300;line-height:1.12;max-width:20ch;margin:0 auto;letter-spacing:-.02em}
.manifesto p{margin:32px auto 0;max-width:56ch;font-size:17px;line-height:1.8;color:var(--stone)}

/* ---------- arquivo de coleções (secção assinatura) ---------- */
.arquivo{padding:120px 0 130px}
/* Passo 212: o índice deixou de ser coluna ao lado e passou a FAIXA por cima,
   com os painéis em três colunas por baixo. A secção media ~3000px em pilha
   única; assim fica em ~1250. Escolhido pela cliente entre dez arranjos.

   A faixa tem o título à esquerda e as seis coleções em pastilhas à direita —
   é a mesma <ul> de sempre, deitada. */
.arquivo-grid{display:block}
.indice{margin-bottom:clamp(22px,2.8vw,34px);padding-bottom:clamp(14px,1.7vw,20px);
  border-bottom:1px solid var(--line)}
/* Passo 217: título à esquerda, lista e botão juntos à direita, os dois
   grupos centrados um contra o outro. */
/* Passo 218: título à esquerda, botão à direita, os dois alinhados ao centro
   um do outro. */
.indice-full{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;column-gap:clamp(22px,3vw,52px);row-gap:18px}
.indice-cab{min-width:0}
.indice h2{font-size:clamp(24px,2.9vw,40px);font-weight:300;margin:10px 0 0;letter-spacing:-.02em;
  line-height:1.05}
.indice .sub{color:var(--stone);line-height:1.7;font-size:14px;max-width:50ch;margin:9px 0 0}

/* três colunas no computador; duas dos 1040px para baixo, incluindo telemóvel
   — nunca uma só, a pedido da cliente */
.paineis{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
/* o texto do cartão passa a duas linhas fixas — título em cima, legenda e
   "explorar" lado a lado por baixo. Numa coluna de 400px o par
   "título + explorar" não cabia na mesma linha nos nomes longos, o
   "explorar" descia sozinho e a fotografia desse cartão ficava desalinhada
   das outras da fila. O display:contents faz o .info-txt desaparecer da
   grelha e deixa os filhos ocuparem as áreas. */
/* subgrelha: cada cartão ocupa duas linhas da grelha dos painéis — texto e
   fotografia — e todos os da mesma fila partilham a altura da linha de texto.
   Sem isto, um título que quebre em duas linhas empurra a sua fotografia para
   baixo e a fila fica desalinhada. */
.paineis{grid-auto-rows:auto}
.paineis .painel{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:0}
.paineis .painel>a{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:0}
.paineis .painel .info{display:grid;grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"tit tit" "leg exp";gap:5px 14px;align-items:baseline;
  align-content:start;padding:0 0 12px}
.paineis .painel .info-txt{display:contents}
.paineis .painel h3{grid-area:tit;font-size:clamp(17px,1.55vw,22px);line-height:1.2}
.paineis .painel .legenda{grid-area:leg;text-align:left;font-size:12.5px;max-width:none}
.paineis .painel .explorar{grid-area:exp;font-size:10.5px;white-space:nowrap}
.painel{position:relative;scroll-margin-top:110px}
.painel .visual{position:relative;aspect-ratio:4/3;overflow:hidden}
/* passo 71: a foto tem camada propria (z-index 1) por baixo do veu (3) e do
   numeral (4). Anima-se com a propriedade independente "scale" e nao com
   transform — ha animacoes de keyframes noutros sitios do tema a escrever
   transform, e a propriedade independente compoe-se com elas em vez de ser
   apagada por elas. */
/* passo 100: as fotografias dos cartoes estavam apagadas. Sao renders de fim de
   tarde e de interior, quase todos em penumbra, e por cima levavam ainda um veu
   que chegava a 75% de basalto em baixo. Agora ganham um toque de luz e de cor
   em repouso, e o veu encurtou (ver o ::before). Ligeiro de proposito: o cartao
   continua escuro o suficiente para o numeral e o rotulo se lerem. */
.painel .visual .foto{position:absolute;inset:0;z-index:1;
  background-size:cover;background-position:center;
  filter:brightness(1.07) saturate(1.08);
  transition:scale 1.1s var(--ease),filter 1.1s var(--ease)}
.painel a:hover .visual .foto,.painel a:focus-visible .visual .foto{scale:1.05;filter:brightness(1.14) saturate(1.14)}
.painel .visual .num{position:absolute;top:20px;left:22px;z-index:4;font-family:'Fraunces',serif;font-size:14px;letter-spacing:.2em;color:var(--ivory);background:rgba(21,18,14,.55);backdrop-filter:blur(4px);padding:8px 14px}
/* o veu existe para o numeral e o rotulo se lerem por cima da fotografia. Passo
   100: deixou de ser uma rampa de cima a baixo e passou a viver so no terco de
   baixo, onde estao os textos — a fotografia respira no resto da caixa. */
.painel .visual::before{content:"";position:absolute;inset:0;z-index:3;
  background:linear-gradient(180deg,rgba(21,18,14,0) 0%,rgba(21,18,14,.04) 44%,rgba(21,18,14,.30) 74%,rgba(21,18,14,.62) 100%)}
/* passo 83: carrossel num cartao. As fotos empilham-se na mesma caixa e trocam
   por opacidade; a aproximacao ao passar o rato continua a ser do "scale", por
   isso as duas nao se pisam. O rotulo fica ao nivel do numeral (4), por cima do
   veu (3); as setas vivem fora do <a> e por isso precisam de subir mais (5). */
.painel .visual.cr .foto{opacity:0;transition:opacity .7s var(--ease),scale 1.1s var(--ease),filter 1.1s var(--ease)}
.painel .visual.cr .foto.on{opacity:1}
.painel .cr-rot{position:absolute;left:22px;bottom:20px;z-index:4;display:flex;align-items:baseline;gap:10px;
  background:rgba(21,18,14,.55);backdrop-filter:blur(4px);padding:8px 14px}
.painel .cr-rot.vazio{display:none}
.painel .cr-rot b{font-family:'Fraunces',serif;font-weight:400;font-size:14px;letter-spacing:.04em;color:var(--ivory)}
.painel .cr-rot i{font-style:normal;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand)}
/* Passo 217: os pontos voltam para baixo a direita, que e onde se procuram.
   No passo 215 estavam em cima, o unico canto livre — e a cliente nao os
   encontrou, porque olhava para o sitio onde estavam as setas. Agora sao as
   SETAS que mudam: passam para o meio dos lados, como na maioria dos
   carrosseis, e a faixa de baixo fica so para o rotulo (esquerda) e para os
   pontos (direita). A sombra segura-os nas fotografias claras. */
/* Passo 235: os pontos passaram a botoes e sairam de dentro do <a>, como as
   setas. Por isso o bloco que os posiciona deixou de ser o .visual e passou a
   ser o .painel inteiro: sem a linha 2 da grelha ficavam colados ao fundo do
   CARTAO e nao ao da fotografia — a mesma armadilha do passo 223. */
.painel .cr-pts{position:absolute;grid-row:2;grid-column:1;right:22px;bottom:23px;z-index:5;
  display:flex;gap:7px;align-items:center}
.painel .cr-pt{position:relative;width:6px;height:6px;padding:0;border:0;cursor:pointer;
  border-radius:50%;background:rgba(250,246,239,.38);
  box-shadow:0 1px 3px rgba(0,0,0,.45);transition:background-color .35s var(--ease),scale .35s var(--ease)}
/* a bola tem 6px: sozinha era um alvo impossivel de acertar. A area de clique
   sobe para 13x24 sem mudar nada do que se ve — o mesmo truque do botao de
   texto da faixa da personalizacao. A folga lateral e METADE do intervalo
   entre bolas (7px), para as areas encostarem sem se sobreporem: com folga a
   mais, a bola da direita apanhava os cliques da do lado. */
.painel .cr-pt::before{content:"";position:absolute;left:-3.5px;right:-3.5px;top:-9px;bottom:-9px}
.painel .cr-pt:not(.on):hover,.painel .cr-pt:not(.on):focus-visible{background:var(--sand);scale:1.45}
.painel .cr-pt.on{background:var(--terracotta);scale:1.3}
/* Passo 223: as setas vivem FORA do <a> (um botao dentro de um link e markup
   invalido), portanto o bloco que as posiciona e o .painel inteiro — texto
   incluido — e um "top:50%" punha-as 29px acima do meio da fotografia, meia
   altura do bloco de texto. A grelha do painel tem duas linhas (texto e
   fotografia); dando-lhes a linha 2, o bloco de referencia passa a ser
   exactamente essa celula. */
.painel .cr-seta{position:absolute;grid-row:2;grid-column:1;top:50%;translate:0 -50%;z-index:5;width:40px;height:40px;padding:0;border:0;cursor:pointer;
  display:grid;place-items:center;font-size:22px;line-height:1;color:var(--ivory);font-family:inherit;
  background:rgba(21,18,14,.55);backdrop-filter:blur(4px);
  opacity:0;transition:opacity .3s var(--ease),color .3s var(--ease)}
.painel .cr-ant{left:14px}
.painel .cr-seg{right:14px}
.painel:hover .cr-seta,.painel .cr-seta:focus-visible{opacity:1}
.painel .cr-seta:hover{color:var(--terracotta)}
/* sem rato nao ha "passar por cima": as setas ficam sempre a vista */
@media(hover:none){
  .painel .cr-seta{opacity:1}
}
.painel .info{display:flex;justify-content:space-between;gap:24px;align-items:baseline;flex-wrap:wrap;padding-top:16px}
.painel h3{font-size:clamp(21px,2.3vw,30px);font-weight:300;letter-spacing:-.01em}
.painel .legenda{font-size:14px;color:var(--stone);text-align:right;max-width:38ch}
.painel .explorar{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory)}
/* Passo 212: aqui viviam o botão "ocultar índice", a calha vertical de
   numerais e o modo "fechado". Os três existiam só para encolher a coluna
   lateral do índice — e coluna lateral já não há. Saíram do .liquid, do
   script e do schema (comecar_fechado, texto_ocultar, texto_mostrar). */

@media(max-width:1040px){
  /* duas colunas de fotografias, e é aqui que fica até ao telemóvel */
  .paineis{grid-template-columns:repeat(2,1fr)}
  .indice-full{grid-template-columns:1fr;justify-items:start;row-gap:18px}
  .painel .visual{aspect-ratio:1/1}
}
/* em coluna estreita o cartão perde a linha de texto ao lado do título: a
   legenda e o "explorar" passam para baixo, e o corpo desce com eles */
@media(max-width:700px){
  /* numa coluna de ~155px não cabem legenda e "explorar" lado a lado: o texto
     passa a empilhar, o "explorar" sai (o cartão inteiro já é a ligação) e a
     legenda fica presa a duas linhas para as filas assentarem. */
  .paineis .painel .info{grid-template-columns:1fr;grid-template-areas:"tit" "leg";
    gap:3px;padding:0 0 9px}
  .paineis .painel .explorar{display:none}
  .paineis .painel h3{font-size:clamp(14.5px,3.7vw,19px);line-height:1.2}
  .paineis .painel .legenda{font-size:11px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .painel .visual .num{top:11px;left:11px;font-size:10.5px;padding:5px 9px}
  .painel .cr-rot{left:11px;bottom:11px}
  .painel .cr-rot b{font-size:11px}
  .painel .cr-rot i{font-size:8.5px}
  .painel .cr-seta{width:30px;height:30px;font-size:17px}
  .painel .cr-ant{left:8px}
  .painel .cr-seg{right:8px}
  /* no telemovel o intervalo sobe de 5 para 8px: com 5 a area de clique de
     cada bola ficava com 10px de largura, apertado de mais para o dedo. */
  .painel .cr-pts{right:11px;bottom:13px;gap:8px}
  .painel .cr-pt{width:5px;height:5px}
  .painel .cr-pt::before{left:-4px;right:-4px;top:-9px;bottom:-9px}
}

/* aba lateral direita no telemóvel */
.mob-indice{
  position:fixed;right:0;top:50%;z-index:90;display:none;
  transform:translate(110%,-50%);transition:transform .45s var(--ease);
}
.mob-indice.visivel{transform:translate(0,-50%)}
.mob-indice.visivel.recolhida{transform:translate(calc(100% - 4px),-50%)}
.mob-indice button{
  all:unset;box-sizing:border-box;cursor:pointer;position:relative;
  /* passo 62: 42px -> 30px. A aba tapava conteudo; os textos encolhem com ela. */
  width:30px;height:184px;padding:14px 0;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  background:rgba(24,20,16,.94);
  border:1px solid var(--line);border-right:0;border-radius:4px 0 0 4px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  transform:translateZ(0);will-change:transform;
}
.mob-indice button:focus{outline:none}
.mob-indice button:focus-visible{outline:2px solid var(--terracotta);outline-offset:2px}
.mob-indice button::before{
  content:"";position:absolute;left:0;top:13px;bottom:13px;width:1px;background:var(--terracotta);opacity:.85;
}
.mob-indice .num{
  font-family:'Fraunces',serif;font-weight:400;font-size:12px;letter-spacing:.10em;color:var(--terracotta);
  transition:opacity .25s var(--ease);
}
.mob-indice.a-mudar .num{opacity:0}
.mob-indice .risco{flex:1;width:1px;background:var(--line);margin:11px 0}
.mob-indice .abrir{
  writing-mode:vertical-rl;text-orientation:mixed;
  font-size:8px;letter-spacing:.20em;text-transform:uppercase;color:var(--stone);
}
.mob-indice .nome{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* grupo de topo (atalhos acima das colecoes) */
.mob-painel .grupo-topo{margin:0 0 22px}
.mob-painel .grupo-topo ul{border-top:0}

/* barra laranja e seta: vida ao passar o rato */
.mob-indice button::before,.mob-painel .pega::after{transition:top .4s var(--ease),bottom .4s var(--ease),opacity .4s var(--ease),box-shadow .4s var(--ease)}
.mob-indice button:hover::before{top:8px;bottom:8px;opacity:1;box-shadow:0 0 14px rgba(231,85,30,.55)}
.mob-painel .pega:hover::after{top:-8px;bottom:-8px;opacity:1;box-shadow:0 0 14px rgba(231,85,30,.55)}
.mob-painel .pega .seta{display:inline-block;color:var(--stone);transition:color .3s var(--ease),transform .3s var(--ease)}
.mob-painel .pega:hover .seta{color:var(--ivory)}
@media (prefers-reduced-motion: no-preference){
  .mob-painel .pega:hover .seta{animation:seta-acena .9s var(--ease) infinite}
  @keyframes seta-acena{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)} }

  /* passo 62: com o painel ABERTO a pega respira sozinha, sem rato.
     Metade da amplitude do hover e quatro vezes mais lenta — e um sinal
     discreto de "podes fechar aqui", nao um chamariz. O rato continua a
     ganhar: as regras :hover abaixo cortam a animacao (mesma especificidade,
     mas vem depois, por isso mandam). */
  .mob-painel.aberto .pega::after{animation:pega-respira 3.4s ease-in-out infinite}
  @keyframes pega-respira{
    0%,100%{opacity:.55;box-shadow:0 0 0 rgba(231,85,30,0)}
    50%{opacity:1;box-shadow:0 0 9px rgba(231,85,30,.35)}
  }
  .mob-painel.aberto .pega .seta{animation:seta-respira 3.4s ease-in-out infinite}
  @keyframes seta-respira{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)} }
  .mob-painel .pega:hover::after{animation:none}
  .mob-painel .pega:hover .seta{animation:seta-acena .9s var(--ease) infinite}
}
.mob-painel{position:fixed;inset:0;z-index:95;display:none}
.mob-painel .veu{position:absolute;inset:0;background:rgba(10,8,6,.55);opacity:0;transition:opacity .35s var(--ease)}
.mob-painel .folha{
  position:absolute;right:14px;top:50%;
  width:min(76vw,300px);max-height:78vh;max-height:78svh;overflow-y:auto;
  background:rgba(21,18,14,.9);backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:6px;
  padding:22px 40px 20px 22px;
  transform:translate(calc(100% + 20px),-50%);transition:transform .45s var(--ease);
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.mob-painel.aberto .veu{opacity:1}
.mob-painel.aberto .folha{transform:translate(0,-50%)}
.mob-painel .eyebrow{font-size:10px;display:block;margin-bottom:16px}
/* pega — mesma altura da aba fechada. Passo 64: irma da folha, nao filha,
   para ficar sempre centrada no ecra mesmo com a lista a fazer scroll.
   right:14px alinha-a com a margem direita da folha; desliza com ela. */
.mob-painel .pega{
  all:unset;box-sizing:border-box;cursor:pointer;position:absolute;
  right:14px;top:50%;
  width:22px;height:184px;display:flex;align-items:center;justify-content:center;
  transform:translate(60px,-50%);transition:transform .45s var(--ease);
}
.mob-painel.aberto .pega{transform:translate(0,-50%)}
.mob-painel .pega::after{
  content:"";position:absolute;right:6px;top:0;bottom:0;width:1px;background:var(--terracotta);opacity:.85;
}
.mob-painel .pega .seta{font-size:15px;line-height:1;color:var(--terracotta);margin-right:8px}
.mob-painel ul{list-style:none;border-top:1px solid var(--line)}
.mob-painel li{border-bottom:1px solid var(--line)}
.mob-painel li:last-child{border-bottom:0}
.mob-painel a{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:baseline;padding:15px 0;color:var(--stone)}
.mob-painel a.ativo{color:var(--ivory)}
.mob-painel a .num{font-family:'Fraunces',serif;font-size:11px;letter-spacing:.14em;color:var(--terracotta)}
.mob-painel a .nome{font-family:'Fraunces',serif;font-weight:300;font-size:17px;line-height:1.25}
.mob-painel a .seta{display:none}
.mob-painel .grupo{margin-top:22px}
.mob-painel .grupo .eyebrow{margin-bottom:12px;color:var(--terracotta);letter-spacing:.24em}
.mob-painel .grupo a{grid-template-columns:1fr auto;padding:13px 0}
.mob-painel .grupo a .nome{font-size:15px}
/* secções sem numeração: fica só "Índice" */
.mob-indice.sem-num .num,.mob-indice.sem-num .risco{display:none}
.mob-indice.sem-num button{justify-content:center}
/* âncoras não ficam por baixo do cabeçalho */
section[id]{scroll-margin-top:96px}
@media(max-width:980px){.mob-indice{display:block}.mob-painel{display:block;pointer-events:none}.mob-painel.aberto{pointer-events:auto} }

/* ---------- origem ---------- */
.origin{background:var(--basalt-2)}
/* Passo 236: a seccao deixou de sangrar de lado a lado e de crescer com o
   ecra. Toma a mesma caixa do resto da pagina — max-width 1360 e a goteira do
   ".container" — e a fotografia deixou de ser um quadrado: em vez de a altura
   sair da largura da janela (a 2560px era um quadrado de 1280), as duas
   colunas esticam-se a mesma altura e quem a define e o texto. O fundo da
   seccao continua a sangrar; so o conteudo e que e contido. */
.origin-grid{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:0;
  max-width:1360px;margin-inline:auto;padding:0 48px}
.origin-visual{position:relative;min-height:360px}
.origin-visual .ring{position:absolute;top:50%;left:50%;width:44%;height:44%;transform:translate(-50%,-50%);border:1px solid rgba(231,85,30,.5);border-radius:50%;z-index:4}
/* sem folga a direita: a goteira ja vem da .origin-grid, e com as duas o
   bloco do texto — e o fio dos numeros — acabavam 75px para dentro da linha
   onde acaba o resto da pagina. A folga da esquerda fica, e o intervalo
   entre a fotografia e o texto. */
.origin-text{padding:clamp(40px,4.4vw,72px) 0 clamp(40px,4.4vw,72px) clamp(40px,4.4vw,72px)}
.origin-text h2{font-size:clamp(28px,3.6vw,50px);font-weight:300;margin:16px 0 22px;letter-spacing:-.02em;max-width:16ch}
.origin-text p{color:var(--stone);line-height:1.85;font-size:16px;max-width:46ch}
/* Passo 236: os tres numeros eram uma fila livre com 44px de intervalo e
   cabiam numa linha so enquanto a coluna do texto tinha ~600px. Com a coluna
   mais estreita partiam-se em 2+1. Passam a tres colunas iguais que so se
   reagrupam abaixo dos 120px cada: ficam sempre lado a lado e quem quebra e
   a legenda mais comprida, dentro da sua coluna. */
.origin-stats{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:28px;margin-top:44px;border-top:1px solid var(--line);padding-top:28px}
.origin-stats span{display:block;font-family:'Fraunces',serif;font-size:clamp(28px,3vw,40px);font-weight:300;color:var(--terracotta);line-height:1}
.origin-stats em{display:block;font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:10px}
@media(max-width:820px){.origin-grid{padding:0 24px} }
@media(max-width:900px){
  .origin-grid{grid-template-columns:1fr}
  /* em coluna unica a fotografia deixa de ter com que se esticar: volta a ter
     proporcao propria, agora 4/3 em vez do quadrado */
  .origin-visual{aspect-ratio:4/3;min-height:0}
  .origin-text{padding:clamp(34px,7vw,52px) 0}
}
/* tres colunas de numeros aguentam-se ate aqui; abaixo disto cada uma ficava
   com menos de 100px e a legenda mais comprida partia-se em quatro linhas */
@media(max-width:620px){
  .origin-stats{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- ambientes — contracorrente ---------- */
/* Passo 231: a seccao deixou de ser presa (sticky) e deixou de ocupar 1,85
   ecras. Passa a ser uma caixa com altura propria — no maximo um ecra, no
   maximo 900px — que atravessa a pagina como qualquer outra seccao. A
   animacao acontece toda dentro dela e e comandada pela travessia: a meio do
   percurso, a caixa esta ao centro do ecra, em qualquer resolucao.
   Assim nao ha vazio: o que se ve por cima e por baixo da caixa nao e fundo
   vazio, sao o manifesto e as coleccoes. */
.environments{position:relative;height:min(100vh,900px);height:min(100svh,900px);padding:0;background:var(--basalt);margin:110px 0 120px}
.corrente-palco{position:relative;height:100%;overflow:hidden;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:0 16px}
/* esbatimentos em percentagem da caixa e nao em vh: a caixa e que manda, e a
   100% num portatil valem o mesmo que sempre valeram (24% de 850 = 204px) */
.corrente-palco::before,.corrente-palco::after{content:"";position:absolute;left:0;right:0;height:24%;z-index:5;pointer-events:none}
.corrente-palco::before{top:0;background:linear-gradient(180deg,var(--basalt) 0%,rgba(21,18,14,0) 100%)}
.corrente-palco::after{bottom:0;background:linear-gradient(0deg,var(--basalt) 0%,rgba(21,18,14,0) 100%)}
.faixa{display:flex;flex-direction:column;gap:16px;will-change:transform}
.faixa .peca{position:relative;flex:0 0 auto;height:clamp(200px,32vh,320px);height:clamp(200px,32svh,320px);overflow:hidden}
.peca.so-movel{display:none}
.faixa .peca .rot{position:absolute;left:14px;bottom:12px;z-index:4;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand)}
.corrente-veu{position:absolute;inset:0;z-index:5;pointer-events:none;
  background:radial-gradient(58% 46% at 50% 50%,rgba(21,18,14,.94) 0%,rgba(21,18,14,.74) 45%,rgba(21,18,14,.3) 100%)}
.corrente-centro{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 40px;pointer-events:none}
.corrente-centro h2{font-size:clamp(30px,5vw,72px);font-weight:300;letter-spacing:-.03em;line-height:1.02;margin:16px 0 0;max-width:16ch}
.corrente-centro p{max-width:46ch;margin:22px 0 0;color:var(--sand);font-size:16px;line-height:1.75}
.corrente-centro .btn-ghost{margin-top:32px;pointer-events:auto}
@media(max-width:900px){
  .environments{height:min(100vh,900px);height:min(100svh,900px);margin:70px 0 80px}
  .corrente-palco{grid-template-columns:repeat(2,1fr);gap:12px;padding:0 12px}
  .corrente-palco::before,.corrente-palco::after{height:20%;}
  .faixa:nth-child(3),.faixa:nth-child(4){display:none}
  .peca.so-movel{display:block}
  .faixa .peca{height:clamp(170px,26vh,240px);height:clamp(170px,26svh,240px)}
}
.sem-corrente .environments{height:auto}
.sem-corrente .corrente-palco{position:static;height:auto;padding:80px 16px;align-items:start}
/* sem a corrente a caixa nao tem altura definida e a percentagem nao teria
   contra que se medir: ali os esbatimentos voltam a ser da janela. */
.sem-corrente .corrente-palco::before{height:24vh;height:24svh}
.sem-corrente .corrente-palco::after{height:30vh;height:30svh}
.sem-corrente .faixa{transform:none!important}
.sem-corrente .corrente-centro{position:relative;padding:50px 24px}
.section-head{margin-bottom:44px}
.section-head h2{font-size:clamp(28px,3.6vw,50px);font-weight:300;letter-spacing:-.02em;margin-bottom:14px}
.section-head p{color:var(--stone);font-size:16px;line-height:1.75;max-width:52ch}

/* ---------- porquê ---------- */
.why{padding:20px 0 140px}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.why-item .glyph{font-family:'Fraunces',serif;font-size:26px;color:var(--terracotta);display:block;margin-bottom:22px}
.why-item h3{font-size:18px;font-weight:400;margin-bottom:12px;line-height:1.25}
.why-item p{font-size:14px;line-height:1.75;color:var(--stone)}
@media(max-width:900px){.why-grid{grid-template-columns:1fr 1fr} }

/* ---------- testemunhos ---------- */
.testimonials{padding:0 0 130px}
.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.test-item{border:1px solid var(--line);padding:38px 32px;display:flex;flex-direction:column;justify-content:space-between}
.test-item q{quotes:none;font-family:'Fraunces',serif;font-weight:300;font-size:20px;line-height:1.4;color:var(--ivory)}
.test-item cite{font-style:normal;display:block;margin-top:28px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
@media(max-width:900px){.test-grid{grid-template-columns:1fr} }

/* ---------- cta ---------- */
.cta-band{text-align:center;padding:150px 0;background:radial-gradient(62% 80% at 50% 100%,rgba(231,85,30,.32),transparent 66%)}
.cta-band h2{font-size:clamp(32px,5.4vw,78px);font-weight:300;line-height:1.02;letter-spacing:-.03em;margin:18px auto 40px;max-width:18ch}



/* ================= MENU MOVEL ================= */
.menu-btn{
  display:none;
  background:transparent;
  border:1px solid var(--line);
  width:44px;height:44px;
  padding:0;
  align-items:center;justify-content:center;
  flex-direction:column;gap:5px;
  cursor:pointer;
  transition:border-color .3s ease;
}
.menu-btn:hover{border-color:var(--terracotta)}
.menu-btn span{
  display:block;width:18px;height:1px;background:var(--sand);
  transition:transform .35s cubic-bezier(.16,.84,.44,1), opacity .25s ease, width .35s ease;
}
.menu-btn span:nth-child(2){width:12px}
.menu-btn.ativo span:nth-child(1){transform:translateY(6px) rotate(45deg);width:18px}
.menu-btn.ativo span:nth-child(2){opacity:0}
.menu-btn.ativo span:nth-child(3){transform:translateY(-6px) rotate(-45deg);width:18px}

.menu-movel{position:fixed;inset:0;z-index:120;display:none;pointer-events:none}
.menu-movel.aberto{pointer-events:auto}
.menu-veu{position:absolute;inset:0;background:rgba(10,8,6,0.6);opacity:0;transition:opacity .35s ease}
.menu-movel.aberto .menu-veu{opacity:1}
.menu-folha{
  position:absolute;right:0;top:0;bottom:0;
  width:min(82vw,340px);
  background:rgba(21,18,14,0.97);
  border-left:1px solid var(--line);
  padding:96px 30px 40px;
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(.16,.84,.44,1);
  display:flex;flex-direction:column;
}
.menu-folha:before{
  content:'';position:absolute;left:0;top:88px;bottom:88px;width:1px;background:var(--terracotta);opacity:.8;
}
.menu-movel.aberto .menu-folha{transform:none}
.menu-fechar{
  position:absolute;top:26px;right:30px;
  background:transparent;border:0;color:var(--stone);
  font-family:'DejaVu Sans',sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;padding:6px;
}
.menu-fechar:hover{color:var(--ivory)}
.menu-folha ul{list-style:none;border-top:1px solid var(--line)}
.menu-folha li{border-bottom:1px solid var(--line)}
.menu-folha ul a{
  display:block;padding:20px 0;
  font-family:'Fraunces',serif;font-weight:300;font-size:24px;line-height:1.2;color:var(--sand);
  transition:padding-left .3s ease,color .3s ease;
}
.menu-folha ul a:hover{padding-left:10px;color:var(--ivory)}
.menu-folha-cta{margin-top:34px;text-align:center;align-self:stretch}
section[id]{scroll-margin-top:76px}
/* navegação por âncoras desliza em vez de teleportar (rail, índice, atalhos) */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
}

@media (max-width:1000px){
  .menu-btn{display:flex}
  .menu-movel{display:block}
  .menu-cta{display:none}
}

/* alinhar o ponto de corte da navegacao com o botao do menu */
@media (max-width:1000px){
  .menu{display:none}
}

/* ===== Porque VULKANA: alinhamento em ecras pequenos ===== */
.why-item{display:flex;flex-direction:column}
.why-item h3{min-height:2.5em}
@media (max-width:900px){
  .why-item h3{min-height:0}
}
@media (max-width:760px){
  .why-grid{grid-template-columns:1fr;gap:1px}
  .why-item .glyph{margin-bottom:14px}
}

/* ===== Zona de provas em ecra pequeno =====
   Mantem-se sempre em QUATRO colunas: 4 e o numero de celulas de cada fila,
   por isso 4 colunas dao duas filas limpas. Com 3 colunas cada fila parte-se
   em 3+1 e sobram dois buracos — fica mais feia E mais alta (medido). */
@media (max-width:980px){
  /* minmax(0,1fr) e nao 1fr: com 1fr a coluna nunca fica menor que a palavra
     mais comprida e a grelha empurra a pagina para fora em ecras de 320px */
  .hero-feats{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:14px;row-gap:40px}
  .hero-feats div{max-width:none;padding:0 6px}
  .hero-feats svg{width:26px;height:26px}
  /* reserva duas linhas tambem aqui: e o que mantem os riscos alinhados */
  .hero-feats span.lbl{min-height:3em;margin-top:14px;font-size:12px;letter-spacing:.10em}
  .hero-feats .num{font-size:28px;margin-top:16px}
  .hero-feats .num + span.lbl{margin-top:10px}
  .hero-feats .risco{margin-top:12px;width:18px}
  .hero-feats .desc{margin-top:12px;font-size:11.5px;line-height:1.55}
}

/* ================= HERO EM ECRA INTEIRO ================= */
.hero-palco{position:relative;height:200vh;height:200svh;--escuro:0.05;--sobe:46px}
.hero-palco.sem-cinema{height:auto}
.hero-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hero-palco.sem-cinema .hero-sticky{position:static;height:auto}
.hero-palco .hero{min-height:100vh;min-height:100svh;height:100% }
.hero-palco .hero-bg{transform:scale(1);transform-origin:center;will-change:transform}
.hero-palco .hero-bg:after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(21,18,14,0.15) 0%, rgba(21,18,14,0.25) 35%, rgba(21,18,14,0.98) 100%);
  opacity:calc(0.35 + var(--escuro));
}
.hero-dica{
  position:absolute;left:0;right:0;bottom:34px;z-index:4;text-align:center;
  font-size:10px;letter-spacing:0.3em;text-transform:uppercase;color:rgba(227,216,198,0.75);
  opacity:1;transition:opacity .3s ease;
}
.hero-dica:after{content:'';display:block;width:1px;height:34px;margin:14px auto 0;background:linear-gradient(180deg,var(--terracotta),transparent)}

/* o conteudo so se esconde quando o JS confirma que corre */
.hero-palco.cinema-pronto .surge{
  opacity:0;transform:translateY(30px);
  transition:opacity .9s cubic-bezier(.16,.84,.44,1), transform .9s cubic-bezier(.16,.84,.44,1);
}
.hero-palco.cinema-pronto .surge.visivel{opacity:1;transform:none}

@media (max-width:900px){
  .hero-palco{height:150vh;height:150svh}
  .hero-dica{bottom:26px}
}
@media (prefers-reduced-motion:reduce){
  .hero-palco{height:auto}
  .hero-sticky{position:static;height:auto}
  .hero-palco .hero-bg{transform:none}
  .hero-palco .surge{opacity:1;transform:none}
}

/* o conjunto do texto sobe ligeiramente enquanto se desce */
.hero-palco.cinema-pronto .hero-inner{
  transform:translateY(var(--sobe,0px));
  will-change:transform;
}
.hero-palco.cinema-pronto .surge{transform:translateY(64px)}
.hero-palco.cinema-pronto .surge.visivel{transform:none}

/* ancora do "Inicio": para no ponto em que o texto assenta sobre a foto */
.hero-fim{display:block;height:1px;scroll-margin-top:100vh;scroll-margin-top:100svh}


/* ============================================================
   PASSO 18 — reorganizacao da narrativa e hierarquia
   (a seccao de colecoes e a aba lateral do telemovel ficam intactas)
   ============================================================ */

/* ---------- hierarquia tipografica mais marcada ---------- */
.eyebrow{font-weight:600;letter-spacing:.34em}
.section-head{max-width:58ch}
.section-head h2{font-weight:500;letter-spacing:-.022em;line-height:1.06}
.section-head p{font-weight:300}

/* linha de clareza do hero: diz o que e, para quem, e o que e proprio */
.hero-sub{max-width:54ch;font-size:clamp(16px,1.4vw,18px);font-weight:400;line-height:1.7;color:var(--sand)}

/* hero um pouco mais curto — chega mais depressa ao conteudo */
.hero-palco{height:170vh;height:170svh}
@media(max-width:900px){.hero-palco{height:150vh;height:150svh} }

/* ---------- botao de texto (caminhos secundarios) ---------- */
.btn-text{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sand);border-bottom:1px solid rgba(231,85,30,.45);padding-bottom:4px;transition:.3s var(--ease)}
.btn-text:hover{color:var(--ivory);border-color:var(--terracotta)}

/* ---------- faixa de prova (credibilidade logo apos o hero) ---------- */
/* passo 53: as quatro provas usam o mesmo bloco dos selos (.hero-feats).
   A faixa deixou de ter numeral proprio — o numero vive dentro do rotulo. */
.provas-band{background:transparent;padding:0}

/* ---------- manifesto ---------- */
.manifesto{padding:130px 0}

/* ---------- porque VULKANA: subiu para depois das colecoes ---------- */
.why{padding:112px 0 128px}
.why-item{position:relative}
.why-item .glyph{margin:18px 0 18px}
.why-item h3{font-weight:500}


/* ---------- porquê + como funciona: caixas idênticas ---------- */
/* Passo 224: o fundo, o acolchoado e o traço laranja passaram para a regra
   nova mais abaixo, que segue a secção das saunas. */
.why-item,.passo{position:relative}
.why-item .glyph,.passo .n{font-family:'Fraunces',serif;font-size:28px;color:var(--terracotta);line-height:1;display:block;margin:18px 0 18px}
.why-item h3,.passo h3{margin:0 0 12px;font-size:18px;font-weight:500;line-height:1.25;min-height:2.5em}
.why-item p,.passo p{margin:0;font-size:14px;line-height:1.75;color:var(--stone)}
@media(max-width:900px){
  .passos{grid-template-columns:1fr 1fr}
  .why-item h3,.passo h3{min-height:0}
}
@media(max-width:760px){
  .passos{grid-template-columns:1fr}
}

/* ---------- projeto em destaque (quebra de padrao) ---------- */
.destaque{position:relative;height:74vh;height:74svh;min-height:500px;overflow:hidden}
.destaque-fundo{position:absolute;inset:0}
.destaque-fundo::before{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(21,18,14,.12) 0%,rgba(21,18,14,.28) 45%,rgba(21,18,14,.94) 100%)}
.destaque-info{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:52px 0}
.destaque-info h2{font-size:clamp(28px,3.4vw,46px);font-weight:400;max-width:17ch;margin-top:14px;letter-spacing:-.02em}
.destaque-btn{margin-top:26px}
.destaque-tag{position:absolute;top:32px;right:48px;z-index:3;border:1px solid var(--line);
  background:rgba(21,18,14,.5);backdrop-filter:blur(6px);padding:12px 18px;text-align:right}
.destaque-tag span{display:block;font-family:'Fraunces',serif;font-size:20px;color:var(--terracotta)}
.destaque-tag em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-top:4px}
.ph-suite{background:radial-gradient(90% 70% at 72% 26%,rgba(255,214,168,.55),transparent 58%),linear-gradient(195deg,#B97A46,#5B3823 46%,#191009)}
@media(max-width:820px){.destaque{height:66vh;height:66svh;min-height:420px}.destaque-tag{right:24px;top:24px}.destaque-info{padding:40px 0} }

/* ---------- ambientes: encosta ao projeto em destaque ---------- */
.environments{margin:0}
@media(max-width:900px){.environments{margin:0} }

/* ---------- testemunhos: citacao grande + duas menores ---------- */
.testimonials{padding:118px 0 126px}
.test-grelha{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;margin-top:44px;align-items:stretch}
.test-destaque{border:1px solid var(--line);border-left:2px solid var(--terracotta);padding:52px 46px;
  display:flex;flex-direction:column;justify-content:center}
.test-destaque q{quotes:none;font-family:'Fraunces',serif;font-weight:300;font-style:italic;
  font-size:clamp(22px,2.6vw,34px);line-height:1.32;color:var(--ivory)}
.test-destaque cite{font-style:normal;display:block;margin-top:28px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.test-col{display:flex;flex-direction:column;gap:22px}
.test-cartao{border:1px solid var(--line);padding:32px 28px;flex:1;display:flex;flex-direction:column;justify-content:space-between}
.test-cartao q{quotes:none;font-family:'Fraunces',serif;font-weight:300;font-size:17px;line-height:1.45;color:var(--ivory)}
.test-cartao cite{font-style:normal;display:block;margin-top:20px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
@media(max-width:900px){
  .test-grelha{grid-template-columns:1fr}
  .test-destaque{padding:38px 30px}
}

/* ---------- como funciona ---------- */
.processo{padding:110px 0 130px}
.passos{display:grid;grid-template-columns:repeat(3,1fr)}
.passo .n{font-family:'Fraunces',serif;font-size:32px;color:var(--terracotta);line-height:1;display:block}
.passo h3{margin-top:16px;font-size:18px;font-weight:500;line-height:1.25}
.passo p{margin-top:12px;font-size:14px;line-height:1.75;color:var(--stone)}


/* ---------- cta final com tres caminhos ---------- */
.cta-band{padding:140px 0 60px}
.cta-band h2{margin:18px auto 18px;max-width:16ch;font-weight:400}
.cta-sub{color:var(--sand);font-size:16px;max-width:46ch;margin:0 auto 38px;line-height:1.7}
.cta-caminhos{display:flex;justify-content:center;align-items:center;gap:26px;flex-wrap:wrap}
@media(max-width:600px){.cta-caminhos{flex-direction:column;gap:18px} }

/* ancoras das seccoes novas nao ficam por baixo do cabecalho */
#destaque,#processo{scroll-margin-top:96px}

/* ---------- revelacoes ao scroll (so com JS ativo) ---------- */
.js-reveal .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-reveal .reveal.visivel{opacity:1;transform:none}


/* ============================================================
   PASSO 19 — acertos de clique, respiro e animacoes
   ============================================================ */

/* ---------- hero: a dica cobria a metade de baixo dos botoes ---------- */
.hero-dica{pointer-events:none}

/* clique em qualquer ponto da caixa, com resposta visivel */
.btn-primary,.btn-ghost,.btn-text,.hero-pro a{-webkit-tap-highlight-color:transparent}
.btn-primary:active,.btn-ghost:active{transform:translateY(1px) scale(.99)}
.btn-text:active,.hero-pro a:active{transform:translateY(1px)}
.hero-pro a{transition:color .3s var(--ease),border-color .3s var(--ease),transform .18s var(--ease)}
.hero-pro a:hover{color:var(--ivory);border-color:var(--terracotta)}

/* mais imagem depois do texto, e respiro antes dos selos */
.hero-inner{padding-bottom:96px}
.hero-feats{margin-top:72px}
/* passo 55: a fissura fica a meio caminho entre as provas e o manifesto.
   Margem de baixo a zero — quem dá o espaco de baixo e o padding do manifesto,
   por isso a margem de cima iguala esse padding em cada breakpoint. */
.fissure-hero{margin:130px 0 0}
@media(max-width:820px){
  .hero-inner{padding-bottom:72px}
  .hero-feats{margin-top:52px}
}

/* ---------- colecoes: titulo por cima da imagem ---------- */
.paineis{gap:34px}
@media(max-width:980px){ .painel{border-top:1px solid var(--line);padding-top:18px} }
.painel .info{padding:0 0 16px;align-items:flex-end}
.painel .info-txt{display:flex;flex-direction:column;gap:7px;min-width:0}
.painel h3{line-height:1.15}
.painel .legenda{text-align:left;max-width:46ch}
.painel .explorar{white-space:nowrap;transition:color .3s var(--ease)}
.painel:hover .explorar{color:var(--terracotta)}
@media(max-width:980px){.painel .legenda{text-align:left} }


/* botao laranja: letras mesmo pretas e caixa a medida da frase */
.btn-primary{color:#0F0C09;font-weight:600;white-space:nowrap}
.btn-primary:hover{color:#0F0C09}
/* Passo 218: aqui estava a correccao do passo 211, que desfazia o efeito do
   ".indice a" sobre este botao. Com a lista fora da faixa, o ".indice a"
   deixou de existir e o botao volta a ser um ".btn-primary" normal. */

/* ---------- passagem suave para o projeto em destaque ---------- */
.why{padding-bottom:150px}
.destaque::before{content:"";position:absolute;left:0;right:0;top:0;height:30vh;z-index:5;pointer-events:none;
  background:linear-gradient(180deg,var(--basalt) 0%,rgba(21,18,14,.5) 42%,rgba(21,18,14,0) 100%)}
.destaque-info,.destaque-tag{z-index:6}

/* ---------- pensado para o lugar: mais ar entre as fotografias ---------- */
/* passo 225: a grelha deixou de sangrar de lado a lado. Toma a mesma caixa do
   resto da pagina — max-width 1360 e a goteira do ".container" — para que ao
   reduzir o zoom as fotografias parem de crescer com o ecra e fiquem
   alinhadas com o cabecalho, o manifesto e as coleccoes. O fundo da seccao
   continua a sangrar; so a grelha e que e contida. */
.corrente-palco{gap:30px;max-width:1360px;margin-inline:auto;padding:0 48px}
.sem-corrente .corrente-palco{padding:80px 48px}
.faixa{gap:30px}
.corrente-palco::after{height:30%;}
@media(max-width:820px){
  .corrente-palco{padding:0 24px}
  .sem-corrente .corrente-palco{padding:80px 24px}
}
@media(max-width:900px){
  .corrente-palco{gap:18px}
  .faixa{gap:18px}
}

/* ---------- saida da contracorrente para a origem, sem corte seco ---------- */
.environments{margin:0 0 96px}
@media(max-width:900px){.environments{margin:0 0 70px} }

/* ---------- telemovel: aba lateral translucida ---------- */
.mob-indice button{background:rgba(21,18,14,.58);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mob-painel .folha{background:rgba(21,18,14,.82)}

/* telemovel: os nomes reagem ao toque como no indice das colecoes */
.mob-painel a{transition:padding-left .3s var(--ease),color .3s ease}
.mob-painel a .nome{display:inline-block;transition:transform .35s var(--ease)}
.mob-painel a .num{display:inline-block;transition:color .3s ease,transform .35s var(--ease)}
.mob-painel a:hover,.mob-painel a:focus-visible{color:var(--ivory)}
.mob-painel a:hover .nome,.mob-painel a.ativo .nome{transform:translateX(5px)}
.mob-painel a:active .nome{transform:translateX(9px)}
.mob-painel a:hover .num,.mob-painel a.ativo .num{color:var(--terracotta);transform:translateX(3px)}

/* ---------- Passo 224: "Porquê VULKANA" e "Como funciona" passam ao desenho
   da secção das saunas ("Quatro perguntas", .sn-passos) ----------

   O que saiu, e que era o que as fazia ler como tabela: os fios horizontais
   por cima e por baixo da fila, os fios verticais de altura inteira entre as
   colunas, o traço laranja no topo de cada bloco, e a caixa — fundo próprio
   mais 44px de acolchoado, que só se via porque havia molduras à volta.

   O que entrou, copiado da mesma secção: intervalo generoso a fazer de
   separação, e um risco vertical CURTO ao meio desse intervalo, alinhado
   pelo numeral e a morrer pouco abaixo do título. O numeral em terracota
   passa a ser o único acento, como lá. */
.why-grid,.passos{gap:clamp(30px,3.6vw,52px);background:transparent;
  border-top:0;border-bottom:0}
.why-item,.passo{background:transparent;padding:0 0 4px;position:relative}
/* o traço laranja de topo sai — a secção das saunas não o tem */
.why-item::before,.passo::before{content:"";position:absolute;top:2px;left:auto;
  width:1px;height:clamp(58px,6.4vw,92px);background:var(--line);
  left:calc(-1 * clamp(30px,3.6vw,52px) / 2);display:none}
/* o risco só aparece quando há coluna à esquerda: numa coluna só, um risco
   vertical por cima de cada bloco não separa nada */
@media(min-width:761px){
  .why-item:nth-child(even),.passo:nth-child(even){display:block}
  .why-item:nth-child(even)::before,.passo:nth-child(even)::before{display:block}
}
@media(min-width:901px){
  .why-item:not(:first-child)::before,.passo:not(:first-child)::before{display:block}
}


/* ============================================================
   PASSO 41 — telemóvel a sério (tipos, ritmos, toques)
   ============================================================ */
@media(max-width:900px){
  .hero h1{font-size:clamp(38px,11vw,64px)}
  .hero-sub{font-size:15px;margin-top:20px;max-width:none}
  .hero-locais{margin-top:14px;font-size:11px}
  .hero-inner{padding-bottom:64px}
  .hero-bottom{flex-direction:column;align-items:stretch;gap:22px;margin-top:28px}
  .hero-actions{width:100% }
  .hero-actions .btn-primary,.hero-actions .btn-ghost{flex:1 1 auto;text-align:center;padding:15px 16px}
  .manifesto{padding:96px 0}
  .why{padding:78px 0 92px}
  .processo{padding:78px 0 96px}
  .corrente-centro h2{font-size:clamp(28px,8.5vw,40px)}
  .corrente-centro p{font-size:15px}
}
@media(max-width:480px){
  .hero h1{font-size:clamp(33px,11.5vw,44px)}
  .barra{height:64px}
  body:not(.home) main{padding-top:64px}
  section[id]{scroll-margin-top:64px}
  .sn-tab tbody tr.sn-mod{scroll-margin-top:80px}
}

/* ============================================================
   PASSO 43 — telemóvel definitivo
   ============================================================ */
@media(max-width:900px){
  .passos{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .passos{grid-template-columns:1fr}
}
/* seguro de cascata do menu móvel: estas regras têm de ganhar sempre */
@media(max-width:1000px){
  .menu{display:none}
  .menu-cta{display:none}
  .menu-btn{display:flex}
  .menu-movel{display:block}
}

/* passo 50 — acertos moveis do rodape (no fim do ficheiro: regra 19) */
@media(max-width:600px){
  .rodape-legal{margin-top:44px}
  .rodape-legal-links{gap:12px 18px}
  .rodape-legal + .rodape-fim{margin-top:28px}
}

/* passo 55 — a fissura acompanha o padding do manifesto (no fim: regra 19) */
@media(max-width:900px){
  .fissure-hero{margin:96px 0 0}
}

/* passo 57 — telemovel: quatro colunas com TUDO visivel, descricao incluida
   (no fim do ficheiro: regra 19). A descricao nunca se esconde — foi pedido
   explicito. O que encolhe e o corpo da letra e o espacamento. */
@media(max-width:560px){
  .hero-feats{column-gap:6px;row-gap:26px}
  .hero-feats div{padding:0 1px}
  .hero-feats svg{width:20px;height:20px}
  .hero-feats span.lbl{margin-top:10px;font-size:8.5px;letter-spacing:.04em;line-height:1.4;min-height:2.8em}
  .hero-feats .num{font-size:21px;margin-top:10px}
  .hero-feats .num i{font-size:8px;margin-right:2px}
  .hero-feats .num + span.lbl{margin-top:7px}
  .hero-feats .risco{margin-top:8px;width:14px}
  .hero-feats .desc{margin-top:8px;font-size:9.5px;line-height:1.5;max-width:none}
}

/* passo 57 — ecras de 320-380px: ultimo aperto, ainda com descricao visivel */
@media(max-width:380px){
  .hero-feats{column-gap:4px}
  /* a 320px o "DO TERRITORIO NACIONAL" ocupa tres linhas: reservar tres */
  .hero-feats span.lbl{font-size:8px;hyphens:auto;min-height:4.2em}
  .hero-feats .desc{font-size:9px;hyphens:auto}
}

/* ============================================================
   passo 65 — pagina das Saunas Exteriores
   (seletor hibrido E + arquivo dos seis + guia de escolha)
   ============================================================ */
.sn-num{font-variant-numeric:tabular-nums lining-nums}

@keyframes sn-sobe{
  from{clip-path:inset(100% 0 0 0);opacity:.15;transform:translateY(14px)}
  to{clip-path:inset(0 0 0 0);opacity:1;transform:none}
}
@keyframes sn-desce{
  from{clip-path:inset(0 0 0 0);opacity:1}
  to{clip-path:inset(0 0 100% 0);opacity:0}
}

/* --- abertura: titulo, atalhos e fabricante (passo 67) --- */
.sn-atalhos{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.6vw,30px)}
.sn-btn{padding:12px 20px;font-size:11px;letter-spacing:.12em}
/* passo448: tres percursos logo abaixo do titulo (as duas gamas e as saunas a medida). Discretos: uma linha entre
   fios finos, o nome em serifa, o destino em versaletes pequenos e a seta terracota; no telemovel, uma lista. */
.sn-percursos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px;margin-top:clamp(22px,2.8vw,34px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sn-percursos a{position:relative;display:flex;flex-direction:column;gap:7px;padding:18px 40px 18px 24px;color:var(--ivory);
  -webkit-tap-highlight-color:transparent}
.sn-percursos a:first-child{padding-left:0}
.sn-percursos a+a{border-left:1px solid var(--line)}
.sn-percursos .r{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);transition:color .3s var(--ease)}
.sn-percursos .t{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(17px,1.5vw,21px);line-height:1.25;color:var(--sand);
  transition:color .3s var(--ease)}
.sn-percursos .s{position:absolute;right:18px;bottom:20px;font-size:15px;line-height:1;color:var(--terracotta);transition:transform .35s var(--ease)}
.sn-percursos a::after{content:"";position:absolute;left:24px;right:40px;bottom:-1px;height:1px;background:var(--terracotta);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.sn-percursos a:first-child::after{left:0}
.sn-percursos a:hover .t,.sn-percursos a:focus-visible .t{color:var(--ivory)}
.sn-percursos a:hover .r,.sn-percursos a:focus-visible .r{color:var(--sand)}
.sn-percursos a:hover .s,.sn-percursos a:focus-visible .s{transform:translateY(4px)}
.sn-percursos a:hover::after,.sn-percursos a:focus-visible::after{transform:scaleX(1)}
.sn-percursos a:focus-visible{outline:1px solid var(--terracotta);outline-offset:-1px}
@media(max-width:980px){.sn-percursos{grid-template-columns:1fr;max-width:560px}
  .sn-percursos a,.sn-percursos a:first-child{padding:15px 40px 15px 0}
  .sn-percursos a+a{border-left:0;border-top:1px solid var(--line)}
  .sn-percursos a::after,.sn-percursos a:first-child::after{left:0;right:40px}
  .sn-percursos .s{right:6px;bottom:auto;top:50%;margin-top:-8px}
  .sn-percursos a:hover .s,.sn-percursos a:focus-visible .s{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.sn-percursos a::after,.sn-percursos .s,.sn-percursos .t,.sn-percursos .r{transition:none}}
/* a chegada: o titulo de cada destino fica com folga por baixo do cabecalho fixo (77px; 65px no telemovel).
   As saunas a medida nao tem padding em cima, por isso precisam de mais margem do que as gamas. */
#gama-vulkana,#saunamo{scroll-margin-top:84px}
#saunas-a-medida{scroll-margin-top:118px}
@media(max-width:480px){#gama-vulkana,#saunamo{scroll-margin-top:70px}#saunas-a-medida{scroll-margin-top:96px}}

/* padding-top/bottom em longhand: .container traz "padding:0 48px" e o
   atalho "padding: a b c" apagava os 48px dos lados — o bloco encostava-se a
   40px da margem enquanto o titulo ficava a 88px (medido). */
/* --- passo 72: dois cartoes de gama, um por fabricante --- */
.sn-gamas{padding-top:clamp(22px,2.6vw,34px);padding-bottom:clamp(20px,2.4vw,32px)}
/* passo 164: nas saunas os cartoes ficavam a 10px do fio do rodape (medido
   aos 1440px) — o indice que vem a seguir so existe no telemovel, por isso a
   zona dos fabricantes e, no ecra grande, a ultima coisa da pagina. O respiro
   so se aplica quando ela e de facto das duas ultimas seccoes: nos
   grelhadores tem o seletor e o guia por baixo e mantem o fecho curto. */
main > .secao:nth-last-child(-n+2) .sn-gamas{padding-bottom:clamp(72px,8.4vw,120px)}
/* Passo 240: quando a seccao vem ANTES dos seletores (e por isso as setas
   apontam para baixo), o fecho curto deixava-a colada ao seletor seguinte —
   80px medidos aos 1512, contra os 208px que separam o arquivo do guia. O
   respiro passa a ser o mesmo do arquivo, descontado o que o seletor ja traz
   de cima (medido: 48px aos 1512, 26px em ecra estreito). Nas saunas a
   seccao esta no fim da pagina e nao apanha esta regra. */
.sn-gamas-baixo .sn-gamas{padding-bottom:calc(clamp(120px,14.4vw,208px) - clamp(26px,3.4vw,48px))}
.sn-gamas-eyebrow{margin-bottom:clamp(16px,2vw,24px)}
.sn-gamas-grelha{display:grid;gap:clamp(24px,3vw,44px)}

/* passo 164: alinhar o pe dos dois cartoes. A grelha ja os punha da mesma
   altura, mas com align-content:start a sobra caia toda no fundo do cartao de
   texto mais curto e o fio, os factos e o atalho do fabricante ficavam 25px acima
   dos da SAUNAMO. Agora a figura fica na sua linha (pelo racio) e o texto
   ocupa o resto; la dentro o .sn-gama-factos cola-se ao fundo com
   margin-top:auto e leva o atalho consigo. */
.sn-gama{display:grid;grid-template-rows:auto 1fr;gap:clamp(16px,1.8vw,22px)}
.sn-gama-fig{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden}
.sn-gama-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* o cartao passou de tres pecas a cinco (chapeu e segundo paragrafo): o
   intervalo entre elas deixa de poder vir das margens por omissao */
.sn-gama-txt{display:flex;flex-direction:column;gap:clamp(13px,1.5vw,18px)}
.sn-gama-marca{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sn-gama-marca .sn-fab-selo + .sn-gama-origem{margin-left:2px}
.sn-gama-nome{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(21px,2.2vw,28px);
  letter-spacing:-.01em;color:var(--ivory);line-height:1}
.sn-gama-origem{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta)}
.sn-gama-chapeu{font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(17px,1.6vw,21px);line-height:1.35;letter-spacing:-.01em;
  color:var(--ivory);max-width:26ch;margin:0}
.sn-gama-diz{font-size:14px;line-height:1.8;color:var(--sand);max-width:52ch;margin:0}
.sn-gama-factos{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
  line-height:1.9;padding-top:clamp(12px,1.6vw,18px);border-top:1px solid var(--line);
  margin-top:auto}
.sn-gama-btn{justify-self:start;align-self:flex-start;position:relative}
.sn-gama-btn::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.sn-gama-btn span{display:inline-block;transition:translate .35s var(--ease)}
.sn-gama-btn:hover span,.sn-gama-btn:focus-visible span{translate:0 -4px}
/* passo 239: com a seta virada para baixo o empurrao tem de ir para baixo,
   senao o glifo aponta para um lado e move-se para o outro */
.sn-gamas-baixo .sn-gama-btn:hover span,.sn-gamas-baixo .sn-gama-btn:focus-visible span{translate:0 4px}

/* placa clara do logotipo — herdada do bloco antigo, agora dentro do cartao */
.sn-fab-selo{flex:0 0 auto;display:grid;place-items:center;background:var(--ivory);
  padding:9px 13px;width:112px}
.sn-fab-selo img{width:100%;height:auto;display:block}
/* selo para logotipo ja claro (Saunamo): mesma caixa, sem a placa creme que
   o tornaria invisivel. Um pouco mais largo porque e so lettering, sem
   simbolo — a 112px lia-se mais fino do que o do outro fabricante. */
.sn-fab-selo-claro{background:none;padding:0;width:138px}

/* cabecalho de cada gama, mesmo acima do seu seletor */
.sn-gama-cab{padding-top:clamp(26px,3.4vw,48px);padding-bottom:clamp(4px,0.8vw,10px)}
/* passo 115: o nome da gama e o que divide a pagina em duas — dali para baixo
   sao saunas de outro fabricante. Aos 11px do eyebrow comum lia-se como uma
   etiqueta de seccao qualquer; aqui cresce para 15px e larga um pouco o
   espacamento entre letras, que e o que o faz ler-se como marca e nao como
   rotulo. O eyebrow do resto do site fica onde estava. */
/* Passo 151: o nome da gama cresce. Era clamp(13px,1.15vw,15px) — ao lado de
   um titulo de 40px lia-se como uma etiqueta e nao como o nome da coleccao.
   O letter-spacing baixa de .3em para .24em: a linha ficou mais comprida
   ("GAMA VULKANA" e a linha da parceria) e com o espacamento antigo partia
   em duas no telemovel. */
.sn-gama-cab .eyebrow{font-size:clamp(14px,1.45vw,18px);letter-spacing:.24em;font-weight:500}
/* o nome e o atalho na mesma linha, alinhados pela base; em ecra estreito o
   atalho cai para baixo do nome em vez de o espremer */
.sn-gama-linha{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:8px clamp(14px,2vw,26px)}
/* a segunda linha do cabecalho: origem e, na primeira gama, a parceria. Nao e
   um eyebrow — nao leva maiusculas nem o espacamento largo, senao lia-se ao
   mesmo peso do nome da gama, que e exactamente o que se quer evitar. Fica em
   --sand, entre o laranja do nome e o cinzento do subtitulo. */
.sn-gama-parceria{margin:7px 0 0;font-size:13px;line-height:1.5;
  letter-spacing:.02em;color:var(--sand)}
/* discreto: sem o fio laranja do .btn-text normal e num corpo mais pequeno —
   e um atalho, nao uma accao da pagina. O fio so aparece ao passar o rato. */
.sn-gama-fab{font-size:10.5px;letter-spacing:.16em;color:var(--stone);
  border-bottom-color:transparent;padding-bottom:2px}
.sn-gama-fab:hover,.sn-gama-fab:focus-visible{color:var(--sand);border-bottom-color:var(--terracotta)}
.sn-gama-cab h2{font-size:clamp(24px,3.2vw,40px);font-weight:300;letter-spacing:-.02em;margin-top:14px}
/* passo 176: sem medida propria. As 58ch punham o subtitulo a descer em
   coluna estreita debaixo de um titulo que atravessa a pagina — a cliente
   quer-o no comprido. Sem limite, acompanha a largura do conteudo e o
   cabecalho da gama le-se como um bloco de duas linhas e nao como uma caixa. */
.sn-gama-sub{margin-top:12px;font-size:13.5px;line-height:1.8;color:var(--stone)}

/* --- seletor --- */
.sn{padding-bottom:clamp(28px,4vw,52px)}
/* passo 128: o dobro do ar entre os atalhos e o fio. Com a fotografia do
   ritual encostada ao fio, 32px punham os dois botoes quase em cima da
   imagem. Vale para as tres paginas de coleccao — a abertura e a mesma. */
.sn-cab{padding-top:clamp(30px,4.4vw,58px);padding-bottom:clamp(40px,5.6vw,64px)}
.sn-cab h1{font-size:clamp(32px,5.2vw,68px);font-weight:300;letter-spacing:-.02em;margin-top:12px}
.sn-alto{display:grid;gap:20px;padding-top:clamp(24px,3.2vw,42px)}
.sn-nome{display:grid}
.sn-ficha{grid-area:1/1;visibility:hidden}
.sn-ficha.on{visibility:visible;animation:sn-sobe .8s var(--ease) both}
/* passo 104: um so tamanho e uma so caixa para TODOS os nomes de modelo. Antes
   havia dois corpos — 94px, e 56px para as gamas de nomes compridos — e a caixa
   dependia de como o nome estava escrito no editor: "BASALTO" saia em maiusculas e
   "Cube 125" nao. Ao lado um do outro pareciam de sites diferentes.

   O tamanho e medido, nao escolhido: 64px e o maior a que nenhum dos 29 nomes
   das tres paginas passa de duas linhas, em nenhuma largura de 390 a 1440 — e o
   pior caso e "THERMO BLACK 220 PLUS", que a 72px ia a tres.

   Duas linhas nao desalinham nada: as fichas empilham-se todas na linha 1 da
   grelha, por isso a altura ja e a do nome mais alto. */
.sn-ficha h2{font-size:clamp(32px,4.8vw,64px);font-weight:300;line-height:.96;
  letter-spacing:-.01em;text-transform:uppercase;margin-top:12px}
/* passo 82: a barra de cinco campos debaixo das imagens saiu — dimensoes,
   volume, corpo e fabricante so pesam na tabela dos doze modelos, onde se
   comparam. Fica a capacidade, que e a primeira pergunta de quem compra,
   colada ao nome. Em areia e nao em terracota: o acento e unico e ja esta
   gasto na serie, por cima do nome. */
/* passo 156: a capacidade herda o laranja que estava na serie, por cima do
   nome. A serie saiu e a zona ficava sem nenhum acento; e a mesma quantidade
   de terracota, so que agora numa informacao que interessa ao cliente. */
.sn-ficha .sn-pax{margin-top:14px;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terracotta)}
.sn-ficha .diz{margin-top:16px;font-size:14px;line-height:1.75;color:var(--stone);max-width:38ch}
/* botao de detalhes: o mesmo .btn-text do resto do site, com area de toque
   alargada por pseudo-elemento e uma seta que avanca ao passar o rato.
   Passo 75: vive fora das fichas. Como as fichas ocupam todas a linha 1 da
   grelha, o botao e colocado sozinho na linha 2 — sempre a mesma altura,
   qualquer que seja o modelo escolhido, e fora da animacao sn-sobe. */
.sn-det{grid-row:2;justify-self:start;margin-top:26px;position:relative}
.sn-det::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.sn-det span{transition:translate .35s var(--ease)}
.sn-det:hover span,.sn-det:focus-visible span{translate:5px 0}
/* rato no palco tambem acorda o botao, e vice-versa: os dois levam ao mesmo
   sitio e a pagina tem de o dizer antes do clique */
.sn-alto:has(.sn-cena:hover) .sn-det,
.sn-alto:has(.sn-det:hover) .sn-det{color:var(--ivory);border-color:var(--terracotta)}
.sn-alto:has(.sn-det:hover) .sn-peca.on{scale:1.035;filter:brightness(1.05)}
/* passo 110: o atalho para a tabela dos doze, por baixo do de detalhes. Fica na
   linha 3 da mesma grelha — sozinho, como o de cima — e e deliberadamente mais
   discreto: quem esta a ver uma sauna vai primeiro a pagina dela, comparar e o
   segundo gesto. A seta desce porque o destino esta mais abaixo NESTA pagina. */
.sn-cmp{grid-row:3;justify-self:start;margin-top:16px;position:relative;
  color:var(--stone);border-bottom-color:rgba(140,131,117,.4)}
.sn-cmp::before{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
.sn-cmp span{display:inline-block;transition:translate .35s var(--ease)}
.sn-cmp:hover span,.sn-cmp:focus-visible span{translate:0 4px}
/* grid-template-rows explicito: sem ele a linha e automatica, o max-height:100%
   da peca fica indefinido e a imagem transbordava para cima da tira (medido) */
.sn-cena{position:relative;display:grid;grid-template-rows:minmax(0,1fr);place-items:center;height:clamp(280px,44vh,440px)}
/* passo 70: o brilho terracota na base do palco saiu. Estava por tras da peca,
   nao por cima — mas a cliente achou-o estranho debaixo das saunas e tem razao:
   as saunas ja tem luz interior propria nos recortes. O sopro de vapor tinha
   saido no passo 66; isto fecha o assunto do laranja no palco. */
.sn-peca{grid-area:1/1;max-height:100%;max-width:100%;width:auto;object-fit:contain;visibility:hidden;position:relative;z-index:2;
  transition:scale .7s var(--ease),filter .7s var(--ease)}

/* passo 71: o palco e clicavel e tem de o dizer.
   A aproximacao usa "scale" e nao "transform" de proposito: a peca activa corre
   a animacao sn-sobe com fill "both", que fixa transform:none no fim e apagava
   qualquer transform escrito em regra. A propriedade independente compoe-se
   com a animacao em vez de ser apagada por ela. */
.sn-alvo{grid-area:1/1;position:absolute;inset:0;z-index:4;pointer-events:none;cursor:pointer}
.sn-alvo.on{pointer-events:auto}
.sn-cena:hover .sn-peca.on{scale:1.035;filter:brightness(1.05)}
.sn-peca.on{visibility:visible;animation:sn-sobe .8s var(--ease) both}
.sn-peca.sai{visibility:visible;animation:sn-desce .5s var(--ease) both;z-index:1}
/* passo 66: o sopro de vapor terracota saiu. Corria por cima da peca (z-index 3)
   ao trocar de modelo e a cliente achou-o estranho. O brilho do ::after fica —
   esse esta por baixo da peca, nao por cima. */

/* passo 80: a tira deixou de ser uma pista deslocada por transform e passou a
   ser um contentor com scroll horizontal a serio — arrasta-se com o dedo, com a
   roda lateral e com o rato, sem ser preciso clicar num modelo para trazer os
   que ficam de fora. "safe center" mantem o grupo centrado quando cabe e deixa
   de cortar o primeiro quando nao cabe; a declaracao simples fica antes para os
   navegadores que nao conhecem a palavra. A barra de arrasto nao se mostra. */
.sn-tira{position:relative;display:flex;justify-content:center;justify-content:safe center;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:16px 0 22px;
  border-top:1px solid var(--line);margin-top:clamp(20px,3vw,32px);
  scrollbar-width:none;-ms-overflow-style:none}
.sn-tira::-webkit-scrollbar{width:0;height:0}
.sn-tira.pode-arrastar{cursor:grab}
.sn-tira.a-arrastar{cursor:grabbing}
.sn-tira img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.sn-pista{display:flex;align-items:flex-end;gap:clamp(14px,2.6vw,34px)}
.sn-mini{position:relative;flex:0 0 auto;display:grid;justify-items:center;gap:9px;
  background:none;border:0;padding:0;margin:0;cursor:pointer;color:inherit;font:inherit}
.sn-mini img{height:clamp(50px,7.4vh,72px);width:auto;object-fit:contain;
  filter:grayscale(0.65) brightness(0.6);
  transition:filter .5s var(--ease),transform .5s var(--ease),scale .5s var(--ease)}
.sn-mini .t{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--stone);
  white-space:nowrap;transition:color .4s ease}
.sn-mini:hover img{filter:grayscale(0.25) brightness(0.9);scale:1.07}
.sn-mini:hover .t{color:var(--sand)}
.sn-mini.on img{filter:none;transform:translateY(-5px) scale(1.08);scale:1}
.sn-mini.on:hover img{scale:1.06}
.sn-mini.on .t{color:var(--ivory)}
.sn-mini.on::after{content:'';position:absolute;left:50%;bottom:-20px;transform:translateX(-50%);
  width:22px;height:1px;background:var(--terracotta)}


/* --- arquivo dos seis --- */
/* ===== passo 149: o mesmo salto na metade de baixo da pagina =====

   Os saltos de cima — ritual -> a medida -> seletores — medem
   clamp(120px,14.4vw,208px) e foram a referencia que a cliente apontou. Os
   tres de baixo mediam menos: 140, 88 e 130 aos 1440px.

   O salto passa a ser sempre o mesmo valor; o que muda e quem o paga. A cada
   lado desconta-se o que o vizinho ja poe, para a soma dar o salto e nao o
   salto mais o que la estava:
     seletor -> arquivo : o .sn fecha com clamp(28px,4vw,52px)
     arquivo -> guia    : o .sn-guia nao tem topo, o arquivo paga tudo
     guia    -> gamas   : o .sn-gamas ja abre com um respiro seu, que faz
                          as vezes do arranque do texto nos outros dois; por
                          isso aqui nao se desconta nada.   */
.sn-arq{padding:calc(clamp(120px,14.4vw,208px) - clamp(28px,4vw,52px)) 0 clamp(120px,14.4vw,208px)}
.sn-arq-cab h2{font-size:clamp(25px,3.4vw,44px);font-weight:300;margin-top:12px}
.sn-arq-sub{margin-top:14px;font-size:14px;line-height:1.8;color:var(--stone);max-width:58ch}
/* Passo 75: sem overflow-x. Uma barra de arrastar horizontal escondia metade
   da tabela e obrigava a descobri-la; a tabela adapta-se ao ecra e, quando
   deixa de caber, e a coluna da medida que sai (para dentro da gaveta). */
.sn-tab-caixa{margin-top:clamp(24px,3.2vw,42px)}
.sn-tab{width:100%;border-collapse:collapse;text-align:left;table-layout:fixed}
/* passo 84: o texto das celulas passou de "top" a "middle". A miniatura da
   primeira coluna e mais alta do que uma linha de texto, e com o alinhamento ao
   topo a capacidade e a medida ficavam coladas em cima, desalinhadas do nome. */
/* passo 146: a linha desce de 79 para 63px, menos 20%. Vem de dois sitios em
   partes iguais: o espacamento da celula (16 -> 11 em cima e em baixo) e a
   miniatura, que era quem mandava na altura (46 -> 40). O bloco do nome tem
   39px, por isso a miniatura a 40 continua a ser o tecto — a 39 ou menos seria
   o texto a mandar e a linha deixava de responder a este ajuste.
   Passo 148: devolvidos os 7% — 63 para 67,5px. A serie saiu de baixo do nome
   no mesmo passo, e sem ela quem manda na altura passou a ser a miniatura (40px):
   por isso o espacamento e 13,5 e nao 13, para a conta dar os mesmos 7%. */
.sn-tab th,.sn-tab td{padding:16.9px 18px 16.9px 0;vertical-align:middle}
.sn-tab thead th{font-family:'DejaVu Sans',sans-serif;font-weight:500;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--terracotta);padding-bottom:16px;
  border-bottom:1px solid var(--line)}
/* table-layout:fixed obriga a dizer as larguras, e e isso que se quer: sem
   elas o navegador media o conteudo e a coluna do modelo comia o resto.
   Com a coluna da medida escondida, as tres que ficam repartem entre si. */
/* o ponto e virgula final nao e enfeite: uma percentagem colada a chaveta de
   fecho forma a sequencia que a regra 2 proibe neste ficheiro */
/* passo 84: tres colunas em vez de quatro (saiu o fabricante). O recuo de 14px
   na primeira e o que deixa ver o fio terracota inteiro: ele nasce em left:0 da
   celula e a miniatura comecava exactamente ai, em cima dele. */
/* passo 109: tres colunas outra vez. A do preco durou um passo: o valor nao e
   para comparar de relance ao lado das medidas — mostra-se a quem abre a ficha
   do modelo, e so la. */
.sn-tab thead th:nth-child(1){width:44%;padding-left:14px}
.sn-tab thead th:nth-child(2){width:22%;}
/* 34% continua a ser a largura certa mesmo com o fabricante la: e o preco que
   manda, porque e ele que ocupa esta celula com a gaveta aberta. Encolher a
   coluna fazia a linha saltar ao abrir. */
.sn-tab thead th.sn-col-medida{width:34%;}
.sn-tab tbody th{font-weight:400}
.sn-tab tbody th .n{display:block;font-family:'Fraunces',serif;font-size:20px;color:var(--ivory);letter-spacing:-.01em}
.sn-tab td{font-size:14px;line-height:1.6;color:var(--sand)}
.sn-tab td::before{display:none}

/* ---- passo 74: linha com miniatura, e que abre uma gaveta ---- */
/* o recuo esta no botao e nao na celula de proposito: no telemovel a celula
   perde o espacamento todo (".sn-tab th,.sn-tab td{padding:0}") e o fio voltava
   a ficar escondido debaixo da miniatura */
.sn-mod-abre{display:flex;align-items:center;gap:16px;width:100%;text-align:left;
  background:none;border:0;padding:0 0 0 14px;margin:0;color:inherit;font:inherit;cursor:pointer}
.sn-arq:not(.sn-arq-vivo) .sn-mod-abre{cursor:default}
/* Passo 149: a miniatura deixou de ter caixa. O quadrado existia para dar
   corpo aos recortes, que tem fundo transparente; a cliente quis so a sauna,
   como nos minis das gamas la em cima. A caixa continua a existir em medida
   (49x40) para os nomes alinharem e para a linha ter um chao de altura — so
   nao se ve. O overflow fica: a miniatura cresce 10% ao passar o rato e a
   82% da caixa ainda sobra margem. */
.sn-mod-foto{position:relative;flex:0 0 auto;width:49px;height:40px;display:grid;place-items:center;
  overflow:hidden}
/* A miniatura e posicionada, nao dimensionada em percentagem. Com
   max-height:82% — ou mesmo height:82% — a percentagem nao resolvia contra os
   46px da caixa: o Chrome caia para a altura automatica vinda da largura e a
   RIFT S (a unica em retrato, 900x1145) saia com 48px numa caixa de 46, cortada
   em cima e em baixo pelo overflow:hidden. Medido. Com "position:absolute" e
   9% do canto e 82% de lado, o bloco que contem a imagem passa a ser a caixa
   de referencia — definida — e a percentagem resolve contra ela. Preso so
   pelos quatro lados nao chega: num elemento substituido as medidas
   automaticas voltam ao tamanho intrinseco e os lados opostos sao ignorados
   (medido: 71px de altura). E a mesma correccao da regra 33, noutro sitio. */
.sn-mod-foto img{position:absolute;left:9%;top:9%;width:82%;height:82%;object-fit:contain;
  filter:grayscale(.5) brightness(.85);
  transition:scale .5s var(--ease),filter .5s var(--ease)}
.sn-mod-txt{min-width:0}
/* o sinal e um + que roda para x — desenhado a CSS, sem icone.
   Passo 84: a caixa de referencia passou a ser a LINHA. Presa a ultima celula,
   o sinal desaparecia com ela abaixo dos 1000px (a da medida esconde-se) — e
   com o fabricante fora, nao ha mais nenhuma celula sempre visivel na ponta. */
.sn-tab tbody tr.sn-mod{position:relative}
/* passo 110: cada linha e agora um destino de ancora (o botao "Comparar" do
   seletor). O cabecalho e fixo e tapa 76px — sem esta margem a linha para onde
   se salta fica escondida por baixo dele. O section[id] ja tinha a regra; uma
   linha de tabela nao. */
.sn-tab tbody tr.sn-mod{scroll-margin-top:96px}
.sn-tab tbody tr.sn-mod > td:last-child{padding-right:34px}
.sn-mod-sinal{position:absolute;right:12px;top:50%;translate:0 -50%;width:13px;height:13px;
  transition:rotate .45s var(--ease),opacity .3s ease;opacity:.5}
.sn-mod-sinal::before,.sn-mod-sinal::after{content:"";position:absolute;inset:50% 0 auto 0;
  height:1px;background:var(--terracotta);transition:opacity .3s ease}
.sn-mod-sinal::after{rotate:90deg}
.sn-arq:not(.sn-arq-vivo) .sn-mod-sinal{display:none}

/* ===== passo 144: a linha aberta destaca-se da sua gaveta =====

   A linha aberta e a gaveta tinham o mesmo --basalt-2, e com duas ou tres
   saunas abertas ao mesmo tempo perdia-se onde acabava uma e comecava a
   seguinte: era tudo uma mancha so. A linha sobe agora um degrau — nome,
   capacidade e fabricante ficam num tom mais claro do que a ficha que desce
   por baixo deles, e leem-se como o cabecalho daquele bloco.

   O passar do rato fica onde estava: e um estado de passagem e nao deve
   anunciar-se tanto como o de aberto. Sao tres degraus a contar do fundo da
   pagina — 15120E da pagina, 1E1A15 da gaveta, 2C251C da linha aberta. */
/* ===== passo 148: o fio so nas saunas abertas =====

   Todas as linhas levavam um fio por baixo, e doze fios seguidos eram a grelha
   da tabela a desenhar-se sozinha. Fechadas passam a nao ter nenhum: o que as
   separa e o espaco, como na ficha desde o passo 143.

   Passo 159: saiu o ultimo, o da sauna aberta, e com ele o do cabecalho e o
   de baixo da gaveta. A tabela deixou de ter uma unica linha horizontal: quem
   separa e quem agrupa e a MUDANCA DE TOM — a linha aberta e a sua ficha
   partilham um fundo mais claro do que o resto, e isso basta para se ler onde
   comeca e acaba cada sauna. */
.sn-tab tbody tr.sn-mod{transition:background .35s var(--ease)}
.sn-tab tbody tr.sn-mod:hover th,.sn-tab tbody tr.sn-mod:hover td{background:var(--basalt-2)}
.sn-tab tbody tr.sn-mod.on th,.sn-tab tbody tr.sn-mod.on td{background:#2C251C}
.sn-mod:hover .sn-mod-foto img,.sn-mod.on .sn-mod-foto img{filter:none;scale:1.1}
.sn-mod:hover .n{color:var(--ivory)}
.sn-mod:hover .sn-mod-sinal{opacity:1}
.sn-mod.on .sn-mod-sinal{opacity:1;rotate:45deg}
/* o primeiro td leva um fio terracota que cresce de cima para baixo */
.sn-tab tbody tr.sn-mod > th{position:relative}
.sn-tab tbody tr.sn-mod > th::before{content:"";position:absolute;left:0;top:50%;bottom:50%;
  width:2px;background:var(--terracotta);opacity:0;
  transition:top .4s var(--ease),bottom .4s var(--ease),opacity .3s ease}
/* a mesma cadeia de selectores do estado base, senao perde por especificidade:
   ".sn-tab tbody tr.sn-mod > th::before" vale mais que ".sn-mod:hover > th::before"
   e o fio nunca aparecia (regra 28). */
.sn-tab tbody tr.sn-mod:hover > th::before,
.sn-tab tbody tr.sn-mod.on > th::before{top:8px;bottom:8px;opacity:1}

/* ---- a gaveta ---- */
.sn-mod-det > td{padding:0;background:var(--basalt-2)}

/* Passo 75: a gaveta deslizava? Nao — aparecia e desaparecia de um salto,
   porque so o conteudo e que esvanecia e a ALTURA da linha mudava toda de uma
   vez. Quem anima a altura e este involucro: uma grelha de uma linha que vai
   de 0fr a 1fr. A caixa la dentro precisa de min-height:0 e overflow:hidden,
   senao o conteudo recusa-se a encolher e a linha nunca chega a zero. */
.sn-det-abre{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.sn-mod-det.on .sn-det-abre{grid-template-rows:1fr}
/* passo 113: as gavetas que se repoem a chegada abrem sem deslizar. A altura
   tem de estar certa antes de a pagina voltar a posicao onde estava, e uma
   tabela a abrir-se sozinha por baixo dos olhos de quem chega nao explica nada
   a ninguem — ja la estava quando saiu. */
.sn-arq-repoe .sn-det-abre,
.sn-arq-repoe .sn-det-caixa{transition:none}
/* o corte tem de estar num elemento SEM espacamento proprio: com o padding
   aqui, a altura zero da grelha deixava na mesma os 64px do padding e a
   gaveta fechada continuava a ocupar meia linha (medido) */
.sn-det-corpo{min-height:0;overflow:hidden}

/* e o mesmo gesto do palco la em cima: o conteudo sobe por tras de um
   clip-path que se abre de baixo para cima, e desce ao fechar */
.sn-det-caixa{display:grid;gap:clamp(16px,2vw,24px);padding:clamp(20px,2.6vw,32px) clamp(16px,2vw,28px);
  opacity:0;translate:0 -10px;clip-path:inset(0 0 100% 0);
  transition:opacity .42s var(--ease),translate .42s var(--ease),clip-path .42s var(--ease)}
.sn-mod-det.on .sn-det-caixa{opacity:1;translate:0 0;clip-path:inset(0 0 0 0)}

/* a medida repetida dentro da gaveta. So se ve quando a coluna dela sai da
   tabela — ver a media query mais abaixo; fora dessa janela estaria a dizer
   duas vezes a mesma coisa. */
.sn-det-medida{display:none;margin:0;align-items:baseline;gap:12px;flex-wrap:wrap}
.sn-det-medida span{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta)}
.sn-det-medida strong{font-weight:400;font-size:13.5px;color:var(--sand)}
/* passo 112: o painel. O fundo continua a ser o da grelha — e ele que se ve
   nos vaos de 1px entre celulas e faz de linha divisoria — mas agora e um
   cinza, nao a cor da pagina: a ficha le-se como um bloco so. O espacamento
   passou a ser igual em todas as celulas; com fundo, a primeira coluna sem
   margem esquerda ficava com o texto colado ao canto. */
.sn-det-specs{display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;overflow:hidden}
.sn-det-specs > div{background:var(--ficha);padding:13px 16px 14px}
.sn-det-specs dt{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--terracotta)}
.sn-det-specs dd{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:var(--sand)}
/* passo 109: o preco e a ULTIMA celula da grelha das specs — a que sobrava, ao
   lado da porta e por baixo do acabamento. Duas linhas: o valor de referencia
   riscado com o selo do desconto ao lado, e por baixo o que se paga, em marfim
   e em serifa. E a mesma linguagem do preco da pagina do modelo, em pequeno. */
/* passo 112: a celula do preco desce um tom em relacao ao painel — e o unico
   sitio da ficha onde ha uma decisao a tomar, e o contraste poe-na la sem
   precisar de cor nem de caixa. */
.sn-det-specs > .sn-det-valor{background:var(--ficha-preco)}
.sn-det-valor dd{display:grid;gap:3px}
.sn-det-valor .valor{font-family:'Fraunces',serif;font-size:clamp(19px,2vw,24px);
  line-height:1.2;letter-spacing:-.01em;color:var(--ivory)}
/* passo 141: a accao encosta a direita e fecha a fila. Dentro da grelha era
   mais uma celula; aqui le-se como o fim do bloco. */
.sn-det-btn{justify-self:start;position:relative;margin-left:auto;flex:0 0 auto;white-space:nowrap}
.sn-det-btn::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.sn-det-btn span{display:inline-block;transition:translate .35s var(--ease)}
.sn-det-btn:hover span,.sn-det-btn:focus-visible span{translate:5px 0}

/* ===== passo 122: a ficha da gaveta e fixa, e a gaveta tem tecto =====

   O problema: cada modelo trazia na gaveta os campos que a sua fonte tinha —
   25 rotulos diferentes nos doze, e nenhum par de saunas com o mesmo conjunto.
   Com duas ou tres gavetas abertas para comparar, o mesmo dado estava em
   sitios diferentes ou nao estava, e a area aberta chegava a 241px: 3,1x a
   altura da linha fechada, que sao 78px (miniatura de 46 mais 16 e 16 de
   padding). Comparar obrigava a rolar.

   Agora sao sempre os mesmos sete campos, na mesma ordem, e o botao ocupa a
   oitava celula — a que sobrava. Sete campos mais botao dao exactamente quatro
   por dois, e a grelha fecha certa como o preco fazia no passo 109.

   O tecto e 2x a linha fechada: 156px. Medido, nao escolhido — ver a prova.
   Vale onde a grelha tem quatro colunas, ou seja a partir de 1000px. Abaixo
   disso a tabela ja esta apertada e a ficha empilha. */

/* o preco entra na linha quando ela abre, e as dimensoes saem para a ficha:
   dois conteudos na mesma celula, um visivel de cada vez — o mesmo padrao do
   par .sn-col-medida / .sn-det-medida */
.sn-cel-preco{display:none}
/* passo 173: so se esconde o valor da celula quando ha preco para o
   substituir. Sem a condicao, os sete modelos sem preco abriam com a celula
   do fabricante vazia — e no telemovel, onde a celula traz o rotulo consigo,
   ficava um "FABRICANTE" sem nada por baixo. */
.sn-mod.on .sn-tem-preco .sn-cel-dim{display:none}
.sn-mod.on .sn-cel-preco{display:inline-flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.sn-cel-preco b{font-family:'Fraunces',serif;font-weight:400;font-size:17px;
  line-height:1.2;letter-spacing:-.01em;color:var(--ivory)}

/* 14px de cada lado: e o mesmo recuo da primeira coluna da tabela, para os
   rotulos da ficha nascerem na vertical do cabecalho "Modelo" */
.sn-det-justa{padding:clamp(9px,1vw,12px) 14px clamp(10px,1.1vw,13px)}

/* ===== passo 141: a ficha e uma area continua, nao uma grelha de caixas =====

   Ate aqui eram oito rectangulos com fundo proprio (--ficha), fio a toda a
   volta e um vao de 1px entre eles a fazer de linha divisoria. Desenhava-se
   sozinha como folha de calculo: muitas caixas, muito fio, e o laranja dos oito
   rotulos a competir com tudo o resto da pagina.

   Agora o fundo e o da propria gaveta — o --basalt-2 que o <td> ja punha, um
   tom acima da linha e sem contraste a mais — e a separacao e feita por espaco
   e alinhamento. Fio ha um so: o que divide as duas filas.

   Duas filas com pesos diferentes, e nao oito celulas iguais. Em cima, em
   --sand, o que descreve a sauna: corpo, bancos, acabamento, peso. Em baixo,
   mais apagado, o que a enquadra: aquecedor e medidas. O laranja saiu dos
   rotulos e fica onde tem trabalho — o selo do desconto e o fio do .btn-text. */
.sn-det-ficha{display:grid;gap:0}
.sn-det-topo{display:grid;margin:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,18px) clamp(20px,3vw,48px)}
.sn-det-topo > div,.sn-det-menor > div{min-width:0}
.sn-det-ficha dt{font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--stone);line-height:1.4}
.sn-det-ficha dd{margin:2px 0 0;font-size:13.5px;line-height:1.35;color:var(--sand)}

/* a segunda fila: mesmo desenho, um tom abaixo.

   Passo 143: o fio que dividia as duas filas saiu. Sem as caixas a volta dos
   campos, um traco a atravessar a ficha de ponta a ponta era o que restava a
   fazer lembrar uma tabela — e o espaco sozinho ja separa as duas filas.
   Com ele fora, o intervalo entre filas passou a ser um so: 15px em vez dos
   14 + 13 + 1 que eram precisos para o fio respirar dos dois lados. */
.sn-det-pe{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:clamp(10px,1.2vw,14px) clamp(20px,3vw,48px);
  margin-top:clamp(12px,1.3vw,15px)}
.sn-det-menor{display:flex;flex-wrap:wrap;margin:0;flex:1 1 auto;
  gap:clamp(12px,1.6vw,18px) clamp(20px,3vw,48px)}
/* passo 143: os valores da fila de baixo sobem de luminosidade. Estavam no
   mesmo --stone dos rotulos, o que deixava a fila inteira num cinzento so, sem
   hierarquia nenhuma por dentro. Isto e o --sand a 72% sobre o fundo da
   gaveta: fica entre os dois, longe do peso do "Pinho termico" de cima e ja
   com diferenca clara para o rotulo ao lado. */
.sn-det-menor dd,.sn-det-fab dd{font-size:12.5px;line-height:1.35;
  color:rgba(227,216,198,.84)}
/* passo 196: a nota da configuracao base anda com o preco, onde quer que ele
   esteja. Ate aqui vivia no fim da gaveta — que e o unico sitio que existe em
   todas as larguras — e no cartao do telemovel ficava a boiar no fundo, a meia
   pagina do numero a que se refere. Agora sao duas copias e so uma esta
   visivel de cada vez, pela mesma regra que ja move o preco:
     - .sn-cel-aviso, na celula da linha, para >=1000px e para o cartao;
     - .sn-det-preco .aviso, no espelho da gaveta, para a janela 821-999px.
   A 1000px a coluna da medida tem 34% de 1264px: a nota cabe numa linha. */
.sn-cel-aviso{display:none}
.sn-mod.on .sn-cel-aviso{display:block;margin-top:6px;font-size:11px;line-height:1.55;
  letter-spacing:.01em;color:var(--stone)}
/* o fabricante ocupa a terceira coluna da fila de baixo, debaixo do
   acabamento — a coluna que ficava vazia desde o passo 141. */
.sn-det-fab{margin:0}
/* o espelho do preco dentro da ficha. Serve so a janela em que a celula da
   linha sai da tabela (821 a 999px): sem ele o preco ia com a coluna. */
.sn-det-preco{display:none}
.sn-arq-nota{margin-top:20px;font-size:12px;line-height:1.7;color:var(--stone);max-width:64ch}

/* --- guia de escolha --- */
/* --- passo 76: o ritual, entre as gamas e os modelos --- */
/* Espaco e o material principal desta seccao: sem imagem, sem caixas, sem
   icones. O que a separa do resto sao dois fios finos e muito ar. */
/* passo 124: a seccao respira. Entre o titulo da pagina e o ritual havia
   32 + 72 = 104px, e entre o ritual e o cabecalho da gama 88 + 48 = 136px:
   com um bloco de texto de cada lado, lia-se tudo como um so paragrafo
   comprido. Passou para 140 e 152 no topo e no fundo, ou seja perto do dobro.
   O ar e o que diz que isto e uma pausa e nao mais uma parte do catalogo. */
/* passo 128: mais ar tambem no fim, entre as notas e o cabecalho da gama.
   Com os 48px de topo do .sn-gama-cab, o intervalo passa de 192 para 255px. */
.sn-ritual{padding:clamp(72px,9vw,140px) 0 clamp(120px,14.4vw,208px)}
/* passo 126: com fotografia o painel encosta ao fio laranja da abertura, por
   isso a seccao nao pode ter ar nenhum por cima. O ar que a Sandra pediu no
   passo 124 mantem-se em baixo, ate ao cabecalho da gama. */
.sn-ritual-cheia{padding-top:0}
/* Passo 77: sem fio proprio no topo. A seccao subiu para logo a seguir ao
   titulo, e ali ja ha o fio da abertura mesmo por cima — dois riscos a 100px
   um do outro, com nada no meio. */
.sn-ritual-caixa{display:grid;gap:clamp(30px,4vw,60px)}
.sn-ritual-topo{display:grid;gap:clamp(14px,1.8vw,20px);max-width:58ch}
.sn-ritual-topo h2{font-size:clamp(24px,3.4vw,42px);font-weight:300;
  letter-spacing:-.02em;line-height:1.12;margin:0;max-width:20ch}
/* passo 136: o paragrafo volta ao Inter, depois de passar pela Fraunces (132)
   e pela Spectral (135). A Sandra viu as sete lado a lado e escolheu esta. O
   corpo e a entrelinha ficam nos 16px e 1,75 que nasceram com a serifa: e
   assim que ela a viu na comparacao e e assim que a escolheu. */
.sn-ritual-diz{font-family:'DejaVu Sans',system-ui,sans-serif;font-weight:300;
  font-size:16px;line-height:1.75;color:var(--stone);margin:0}
/* passo 136: as tres notas sao selos, no desenho dos da pagina inicial —
   icone, rotulo em caixa alta, risco terracota e uma linha de texto. Saiu a
   tira que se arrastava do passo 129: a Sandra quis a zona estatica.

   As regras sao proprias e nao as do .hero-feats. Ali sao quatro rotulos
   curtos que ficam quatro em linha ate aos 320px, com o corpo a cair para
   8,5px; aqui sao tres com uma frase cada, e abaixo dos 620px uma coluna so
   le-se melhor do que tres espremidas. O desenho e o mesmo; o que muda e o
   que acontece em ecra estreito. */
.sn-ritual-selos{display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(34px,4.4vw,52px);justify-items:center;
  margin-top:clamp(40px,5.2vw,76px)}
.sn-ritual-selos > div{display:grid;justify-items:center;align-content:start;
  text-align:center;max-width:300px}
.sn-ritual-selos svg{width:30px;height:30px;color:var(--sand);opacity:.92;stroke-width:1.4}
.sn-ritual-selos .lbl{margin-top:20px;font-size:14px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ivory);line-height:1.5}
.sn-ritual-selos .risco{width:22px;height:1px;background:var(--terracotta);margin-top:16px;opacity:.85}
/* passo 155: os tres textos estavam em --stone, o mesmo cinzento dos
   subtitulos, e ao lado do rotulo em marfim liam-se apagados. Sobem para o
   --sand a 70% — 6,6:1 em vez de 5,0:1 — sem mexer no corpo nem no peso: nao
   sao para virar protagonistas. */
.sn-ritual-selos .desc{margin-top:16px;font-size:13px;line-height:1.65;
  color:rgba(227,216,198,.70);max-width:26ch}
@media(min-width:620px){
  .sn-ritual-selos{grid-template-columns:repeat(3,minmax(0,1fr));
    column-gap:clamp(20px,2.6vw,44px);align-items:start}
}

/* ===== passo 124-127: a fotografia de fundo =====

   O painel sangra de lado a lado e encosta em cima ao fio da abertura. O
   degrade escuro que segura o texto e do PAINEL, nao da caixa de texto: no
   passo 126 vivia num ::before dentro do container e parava nas margens, o
   que dava um rectangulo preto desenhado a meio do ecra. Agora vai de margem
   a margem como a fotografia, e o texto continua alinhado com o resto da
   pagina porque tem container proprio.

   O embaciado que se limpava ao dedo saiu no passo 127. Com ele fora, o
   degrade pode comecar mais abaixo — o que mostra mais fotografia — porque
   ja nao ha nevoa a clarear a metade de cima e a comer o contraste. */
.sn-ritual-vidro{position:relative;overflow:hidden;
  background:var(--basalt-2);
  min-height:clamp(480px,76vh,820px);
  display:grid;align-content:end}
/* o texto tem container proprio: o painel vai de lado a lado, o texto nao */
.sn-ritual-dentro{position:relative;z-index:4;width:100%;}
/* Passo 152: o desfoque saiu. Experimentou-se a 2,5px e a 1,5px no passo 150 e
   a cliente achou-o estranho nos dois — a fotografia volta a nitida. Com ele
   sai tambem o scale 1.02, que so la estava para tapar a orla lavada que o
   blur deixava nas bordas. */
.sn-ritual-foto{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  object-fit:cover;display:block}
/* transparente ate meio — e ai que a fotografia se ve — e basalto em baixo,
   que e onde mora o texto */
.sn-ritual-veu{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(21,18,14,0) 0%,
    rgba(21,18,14,0) 42%,
    rgba(21,18,14,.80) 64%,
    rgba(21,18,14,.94) 82%,
    rgba(21,18,14,.97) 100%)}
.sn-ritual-topo-vidro{position:relative;z-index:4;
  padding:0 0 clamp(30px,4vw,58px);max-width:none}
.sn-ritual-topo-vidro h2{max-width:18ch}
.sn-ritual-topo-vidro .sn-ritual-diz{color:var(--sand);max-width:52ch}

/* Passo 150: em ecra estreito o veu tem de comecar mais cedo. O texto e o
   mesmo mas a coluna e uma so, por isso o bloco cresce em altura e sobe: aos
   1440px o eyebrow esta aos 70% da faixa, aos 390px esta aos 41% — em cima do
   ceu, onde o veu ainda era transparente. Medido por tras de cada texto a
   390px: o eyebrow em terracota dava 1,1:1. (Com a fotografia anterior ja
   dava 2,1:1 — o problema nao e desta fotografia, so ficou mais visivel.) */
@media(max-width:900px){
  .sn-ritual-veu{background:linear-gradient(to bottom,
    rgba(21,18,14,0) 0%,
    rgba(21,18,14,.08) 15%,
    rgba(21,18,14,.93) 36%,
    rgba(21,18,14,.96) 58%,
    rgba(21,18,14,.97) 100%)}
  /* a fotografia e larga e a caixa estreita: o "cover" so deixa ver 36% da
     largura e ao centro calhava a trave do tecto. Puxado para a esquerda
     entram a oliveira, o ceu e o mar. Comparados os tres enquadramentos. */
  .sn-ritual-foto{object-position:24% center}
}

.sn-guia{padding-bottom:clamp(120px,14.4vw,208px)}
.sn-guia-cab h2{font-size:clamp(23px,3.2vw,40px);font-weight:300;margin-top:12px;max-width:26ch}
/* Passo 159: os fios entre as quatro colunas saíram. Eram feitos com a grelha
   — gap de 1px sobre um fundo claro, e cada item a tapa-lo com o basalto — e
   eram eles que davam o ar "corporate" a esta seccao. Agora o gap e espaco a
   serio e nao ha fundo por baixo para espreitar. O espacamento lateral das
   colunas foi para o gap: com padding dentro E gap entre, o intervalo lia-se a
   dobrar. */
.sn-passos{list-style:none;display:grid;gap:clamp(30px,3.6vw,52px);
  margin-top:clamp(24px,3.2vw,42px)}
/* passo 155: mais ar dentro de cada coluna. O texto encurtou do lado do
   conteudo; o espaco que sobra fica para a secção respirar, que era o que a
   fazia ler mais corporate do que o resto da pagina. */
.sn-passos li{position:relative;padding:0 0 4px}
/* Passo 163: os separadores verticais voltam, mas curtos. Antes iam de cima a
   baixo da coluna, porque eram a propria grelha a espreitar por um gap de 1px;
   agora sao um risco desenhado, com altura propria, alinhado pelo numeral e a
   morrer logo abaixo da pergunta. Fica a meio do intervalo entre colunas, e so
   aparece quando ha colunas ao lado — no telemovel, com uma coluna so, um
   risco vertical por cima de cada bloco nao separava nada. */
.sn-passos li::before{content:"";position:absolute;top:2px;width:1px;
  height:clamp(58px,6.4vw,92px);background:var(--line);
  left:calc(-1 * clamp(30px,3.6vw,52px) / 2);display:none}
/* passo 69: os numeros ganharam presenca — sao a espinha da seccao, nao um
   rotulo. Fraunces em corpo grande, terracotta, sem o letter-spacing largo
   que os fazia ler como etiqueta. */
.sn-passos .p{display:block;font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(24px,2.4vw,32px);line-height:1;letter-spacing:.02em;
  color:var(--terracotta);font-variant-numeric:tabular-nums lining-nums}
/* passo 76: a hierarquia dentro do bloco abriu. O numero e a pergunta sao o
   que se le de relance; o paragrafo e para quem parar. Dai o numero maior, a
   pergunta em Fraunces e o paragrafo um ponto mais pequeno e mais apagado. */
.sn-passos h3{margin-top:16px;font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(19px,1.8vw,23px);line-height:1.25;letter-spacing:-.01em;color:var(--ivory)}
.sn-passos p{margin-top:12px;font-size:12.5px;line-height:1.85;color:var(--stone)}

/* fecho consultivo: uma frase e um atalho. Sem caixa e, desde o passo 159, sem
   fio a separar — a seccao tem de continuar a ler-se como arquitectura, nao
   como formulario. O que era o fio passou a ser espaco: o intervalo por cima
   cresce para o fecho continuar a ler-se como um bloco a parte. */
.sn-guia-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:clamp(16px,2.4vw,32px);margin-top:clamp(44px,5.4vw,78px)}
.sn-guia-pe p{font-size:14px;line-height:1.8;color:var(--sand);max-width:56ch;margin:0}
/* row-gap de 28px e obrigatorio, nao estetica: cada atalho alarga a area de
   toque 12px para cima e para baixo, e com 18px de intervalo as duas areas
   sobrepunham-se quando os botoes empilham no telemovel — o dedo acertava no
   link errado. 28 > 12+12 resolve. Medido. */
.sn-guia-acoes{display:flex;flex-wrap:wrap;align-items:center;
  column-gap:clamp(18px,2.4vw,32px);row-gap:28px}
.sn-guia-btn{flex:0 0 auto;white-space:nowrap;position:relative}
/* o segundo atalho e secundario: fio mais apagado, mesma familia */
.sn-guia-btn2{color:var(--stone);border-bottom-color:rgba(250,246,239,.18)}
.sn-guia-btn2:hover,.sn-guia-btn2:focus-visible{color:var(--sand);border-bottom-color:var(--terracotta)}
.sn-guia-btn span{display:inline-block;transition:translate .35s var(--ease)}
.sn-guia-btn:hover span,.sn-guia-btn:focus-visible span{translate:5px 0}
/* o .btn-text tem 19px de altura — bonito e mau alvo de dedo. A area de toque
   cresce para ~43px por pseudo-elemento, sem mexer no desenho do link. */
.sn-guia-btn::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}

@media(min-width:860px){
  .sn-gamas-grelha{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Passo 179: o cartao da direita encosta o texto a direita, para os dois
     se lerem como um par virado um para o outro.

     So a partir dos 860px, que e onde ha duas colunas: em coluna unica os
     cartoes ficam um por cima do outro e um deles alinhado a direita nao
     espelha nada — parece engano.

     Os paragrafos tem medida propria (26ch e 52ch): sem o margin-left:auto
     o texto ia para a direita mas a CAIXA ficava encostada a esquerda, e a
     linha mais curta afastava-se da margem. */
  .sn-gama-dir .sn-gama-txt{text-align:right}
  /* Passo 242: a linha da marca tambem espelha. Antes lia-se "Linha EVO
     KAMADO BONO" encostado a direita — o nome ficava na ponta e o fabricante
     para dentro, ao contrario do cartao da esquerda. Com row-reverse a ordem
     no documento mantem-se (nome primeiro, para leitores de ecra) e o que
     muda e so a pintura: o fabricante passa para a esquerda do nome.
     Com o eixo invertido, quem encosta a direita e o flex-start. */
  .sn-gama-dir .sn-gama-marca{flex-direction:row-reverse;justify-content:flex-start}
  /* os 2px de folga junto ao selo mudam de lado com ele */
  .sn-gama-dir .sn-gama-marca .sn-fab-selo + .sn-gama-origem{margin-left:0;margin-right:2px}
  .sn-gama-dir .sn-gama-chapeu,.sn-gama-dir .sn-gama-diz{margin-left:auto}
  /* o atalho e item de uma coluna flexivel: quem o posiciona e o align-self,
     nao o text-align (passo 164) */
  .sn-gama-dir .sn-gama-btn{align-self:flex-end}
}
@media(min-width:620px){
  .sn-det-specs{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* o preco ocupa as duas celulas que sobram no fim: assim nao fica buraco
     nenhum na grelha e o valor tem largura para as suas duas linhas */
  .sn-det-valor{grid-column:span 2}
}
@media(min-width:980px){
  .sn-det-specs{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* com seis specs mais o preco sao sete celulas numa grelha de quatro: a
     ultima linha ficava com um buraco. O preco ocupa as duas ultimas — fica ao
     lado da porta e por baixo do acabamento, e a grelha fecha certa. */
  .sn-det-valor{grid-column:span 2}
}
/* Passo 76: os quatro em linha so a partir de 1280px. Antes comecavam aos
   900 e cada coluna ficava com 200px de texto — o mesmo paragrafo passava de
   cinco linhas a doze, que e o contrario de "ler de relance". Entre 620 e
   1280 sao dois por linha, e o paragrafo cai para tres linhas. Nos quatro em
   linha o espacamento lateral aperta, porque e ai que cada caracter conta:
   com 24px o bloco 03 dava sete linhas, com 16px da cinco. O corte esta nos
   1340px e nao nos 1280 porque a 1280 os blocos 03 e 04 ainda davam seis.
   Tudo medido. */
@media(min-width:620px){
  .sn-passos{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* duas colunas: so a da direita de cada par leva risco */
  .sn-passos li:nth-child(2n)::before{display:block}
}
@media(min-width:1340px){
  .sn-passos{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* quatro colunas: todas menos a primeira */
  .sn-passos li:not(:first-child)::before{display:block}
}
/* o paragrafo ao lado do titulo, nao por baixo: a seccao e uma pausa e le-se
   melhor larga e baixa do que estreita e alta */
@media(min-width:1000px){
  .sn-ritual-topo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(30px,4vw,64px);align-items:start;max-width:none}
  .sn-ritual-topo .eyebrow{grid-column:1;grid-row:1}
  .sn-ritual-topo h2{grid-column:1;grid-row:2;max-width:16ch}
  /* passo 132: o paragrafo desce e fecha em baixo com o titulo. Comecava
     colado ao eyebrow, e como e mais curto do que as duas linhas do titulo
     sobrava um degrau a direita. Com align-self:end as duas colunas acabam
     na mesma linha de base.

     Passo 139: alinha-se pela direita. Ficava a flutuar a meio da coluna 2 —
     os 52ch sao mais estreitos do que ela — e com a margem direita irregular
     nao havia linha nenhuma a fechar a seccao daquele lado. O justify-self
     encosta a caixa a margem do container e o text-align acerta as linhas com
     ela: passam a ser cinco a acabar no mesmo sitio. Aqui pode ser ao
     contrario do costume porque sao quatro ou cinco linhas curtas; num texto
     longo o bordo esquerdo irregular custaria a ler. */
  .sn-ritual-diz{grid-column:2;grid-row:1/3;max-width:52ch;align-self:end;
    justify-self:end;text-align:right}
}
@media(min-width:1000px){
  .sn-alto{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(24px,3.4vw,48px);align-items:center}
}
/* passo 141: os quatro campos de cima em linha. Abaixo dos 900 ficam dois a
   dois — a 390px quatro colunas davam 80px cada, e "Abeto ou pinho termico,
   42 mm" parte-se em seis linhas.

   A fila de baixo repete a mesma grelha de quatro, para o aquecedor cair
   debaixo do corpo e as medidas debaixo dos bancos: e o alinhamento vertical
   que separa a informacao, agora que nao ha caixas a faze-lo. A lista ocupa
   duas colunas e por dentro reparte-as ao meio, o que da colunas da mesma
   largura das de cima (medido). */
@media(min-width:900px){
  .sn-det-topo{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Passo 142: entre os 821 e os 999 o espelho do preco esta dentro da ficha e
   precisa de largura, por isso a fila de baixo fica em grelha de quatro mas o
   botao desce para uma linha so dele, encostado a direita. E o que mantem o
   fabricante debaixo do acabamento tambem nesta janela, sem o preco partir em
   tres linhas. */
@media(min-width:900px) and (max-width:999px){
  .sn-det-pe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:clamp(20px,3vw,48px);align-items:baseline}
  .sn-det-menor{grid-column:span 2;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,48px)}
  .sn-det-fab{grid-column:3}
  .sn-det-preco{grid-column:4}
  .sn-det-btn{grid-column:1 / -1;justify-self:end;margin-left:0}
}
@media(min-width:1000px){
  .sn-det-pe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:clamp(20px,3vw,48px);align-items:baseline}
  .sn-det-menor{grid-column:span 2;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,3vw,48px)}
  .sn-det-fab{grid-column:3}
  .sn-det-btn{grid-column:4;justify-self:end;margin-left:0}
}

/* Passo 75: a janela em que a tabela ainda e tabela mas ja esta apertada.
   Abaixo de 821px cada linha vira cartao e ha espaco de sobra para a medida.
   O limite de cima e medido, nao escolhido: a 1000px as doze medidas ainda
   cabem numa linha; a 960px ja ha uma a partir e a 900px partem-se onze.
   Nessa faixa ficam so a capacidade e o fabricante, e a medida vai para a
   gaveta em vez de desaparecer. */
@media(min-width:821px) and (max-width:999px){
  .sn-col-medida{display:none}
  .sn-det-medida{display:flex}
  /* passo 122: a celula do preco saiu com a coluna; o espelho da ficha entra.
     Ocupa a FILA inteira, e o botao vem antes dele: sete campos mais o botao
     fecham duas filas de quatro, e o preco fica com a terceira. Com o preco a
     ocupar duas colunas no meio, a grelha ficava com dois buracos cinzentos
     (o fundo da grelha e a cor do fio divisorio) — visto aos 900px. */
  .sn-det-preco{display:block}
  /* e na mesma linguagem do preco da LINHA, nao na do painel da pagina do
     modelo: aqui o preco e uma celula entre outras e as duas linhas do painel
     levavam a gaveta dos quatro modelos com preco de tres filas a quatro.
     Numa linha so, ficam nas tres. */
  .sn-det-preco dd{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
  .sn-det-preco .valor{font-size:17px}
  .sn-det-preco .aviso{flex:1 0 100%;margin-top:5px;font-size:11px;line-height:1.55;
    letter-spacing:.01em;color:var(--stone)}
}

/* passo 65 — acertos moveis destas tres seccoes (no fim do ficheiro: regra 19) */
@media(max-width:820px){
  /* a tabela larga nao cabe: cada linha passa a cartao e cada celula recupera
     o seu rotulo a partir do data-rot */
  .sn-tab thead{display:none}
  .sn-tab,.sn-tab tbody,.sn-tab tr,.sn-tab th,.sn-tab td{display:block}
  /* o display:block acima venceria o [hidden] do navegador e a gaveta ficava
     sempre aberta no telemovel — daqui a regra explicita (medido) */
  .sn-tab tr.sn-mod-det[hidden]{display:none}
  /* display:block explicito, e com a mesma forca da regra que o contraria:
     mais abaixo ".sn-tab td" volta a ser grelha de duas colunas para os
     rotulos e a celula da gaveta ficava com uma coluna vazia de 92px a
     esquerda. Com so ".sn-mod-det > td" a especificidade empatava e ganhava a
     ultima escrita, que era a outra (regra 28). */
  .sn-tab tr.sn-mod-det > td{padding:0;display:block}
  .sn-tab tr.sn-mod-det > td::before{display:none}
  .sn-det-caixa{padding-left:0;padding-right:0}
  .sn-mod-foto{width:42px;height:34px}
  .sn-tab tr{padding:28px 0}
  /* a linha da gaveta nao leva o espacamento das outras: com ele, a gaveta
     fechada ficava com 51px em vez de zero e o fecho acabava num salto
     (medido a 390px). O espacamento visivel vem da caixa la dentro. */
  .sn-tab tr.sn-mod-det{padding:0}
  .sn-tab th,.sn-tab td{border:0;padding:0}
  .sn-tab tbody th{margin-bottom:10px}
  .sn-tab td{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:baseline;padding:4px 0}
  /* passo 196: a nota e o terceiro filho da celula e cairia na coluna do
     rotulo; fica debaixo do preco, na coluna do valor. */
  .sn-cel-aviso{grid-column:2}
  .sn-tab td::before{content:attr(data-rot);display:block;font-size:9.5px;letter-spacing:.16em;
    text-transform:uppercase;color:var(--stone);line-height:1.7}
  .sn-tab tbody tr:hover th,.sn-tab tbody tr:hover td{background:none}

  /* Passo 173: a linha aberta.

     O fundo estava nas CELULAS. Em cartao, as celulas sao blocos e o que fica
     entre elas nao e pintado por ninguem: os 28px de espacamento da linha em
     cima, os 10px por baixo do nome e os 28px em baixo ficavam da cor da
     pagina, e o cartao aberto saia as riscas — claro, escuro, claro, escuro,
     e so depois a gaveta (medido a 390px). O fundo passa para a LINHA, que e
     quem tem o espacamento, e as celulas deixam de o ter: o cabecalho fica de
     uma so cor e encosta a gaveta sem intervalo. */
  .sn-tab tbody tr.sn-mod.on{background:#2C251C;padding-bottom:16px}
  .sn-tab tbody tr.sn-mod.on th,.sn-tab tbody tr.sn-mod.on td{background:none}
  /* e o rotulo acompanha o que a celula passou a mostrar. So em cartao: e aqui
     que cada celula traz o seu rotulo, e "FABRICANTE 2.719,50 EUR" nao e coisa
     que se leia. No ecra largo os rotulos estao no cabecalho da tabela, que
     nesta janela nao existe. */
  .sn-tab tbody tr.sn-mod.on td.sn-tem-preco::before{content:attr(data-rot-preco)}

  /* a fila de baixo da ficha repete as duas colunas da de cima em vez de se
     arrumar sozinha por flex-wrap: assim AQUECEDOR alinha com CORPO e VOLUME
     com BANCOS, em vez de cairem cada um no seu sitio. */
  .sn-det-pe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(20px,3vw,48px);row-gap:clamp(12px,1.6vw,18px);align-items:start}
  .sn-det-menor{grid-column:1 / -1;display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(20px,3vw,48px);row-gap:clamp(12px,1.6vw,18px)}
  .sn-det-fab{grid-column:1}
  /* o atalho ganha fila propria e alinha a esquerda como tudo o resto do
     cartao. Encostado a direita pelo margin-left:auto, partilhava a fila com
     o fabricante e o sublinhado ia bater na margem. */
  .sn-det-btn{grid-column:1 / -1;justify-self:start;margin-left:0;margin-top:2px}
}
@media(max-width:560px){
  .sn-cena{height:clamp(240px,38vh,340px)}
  .sn-ficha .diz{font-size:13px;max-width:none}
  .sn-passos li{padding:0 0 2px}
  .sn-tab td{grid-template-columns:92px minmax(0,1fr);gap:10px}
}

/* passo 71: quem pede menos movimento no sistema nao leva aproximacoes */
@media(prefers-reduced-motion:reduce){
  .painel .visual .foto,.painel .visual.cr .foto,.sn-peca,.sn-mini img,.sn-det span{transition:none}
  .painel a:hover .visual .foto,.sn-cena:hover .sn-peca.on,
  .sn-alto:has(.sn-det:hover) .sn-peca.on{scale:1;filter:none}
  .sn-mini:hover img{scale:1}
  .sn-det:hover span{translate:0}
  .sn-det-abre,.sn-det-caixa{transition:none}
}

/* --- passo 134: saunas a medida, entre o ritual e a Gama VULKANA --- */
/* Sem padding em cima: o ritual ja fecha com clamp(120px,14.4vw,208px) e e
   esse o ar que a cliente pediu entre o ritual e as gamas. Por baixo repete-se
   a mesma medida, para a gama seguinte receber a respiracao que ja recebia —
   a seccao entra sem mexer no ritmo que la estava. */
.sn-medida{padding:0 0 clamp(120px,14.4vw,208px)}
.sn-medida-grelha{display:grid;gap:clamp(30px,4.2vw,64px)}
/* a imagem entra depois do texto, nao ao mesmo tempo: e o que da o tempo
   arquitectonico sem acrescentar um unico elemento ao ecra */
.sn-medida .reveal{transition-delay:calc(var(--i,0) * 130ms)}
.sn-medida-texto h2{font-size:clamp(24px,3.2vw,40px);font-weight:300;letter-spacing:-.02em;margin-top:14px;max-width:17ch}
.sn-medida-diz{margin-top:clamp(15px,1.6vw,22px);font-size:13.5px;line-height:1.8;color:var(--stone);max-width:46ch}
.sn-medida-btn{margin-top:clamp(26px,2.8vw,38px)}
.sn-medida-foto{margin:0}
.sn-medida-foto img{display:block;width:100%;height:auto}
/* 5/7 em vez de metade a metade: e a assimetria que faz a fotografia ler-se
   como o alcado de um projecto e nao como a ilustracao de um paragrafo. O
   fim do texto alinha com o fim da imagem. */
@media(min-width:960px){
  .sn-medida-grelha{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}
}
/* em coluna unica a fotografia vem primeiro: assim a seccao abre com a
   imagem e fecha na ligacao, em vez de deixar o botao a meio do caminho */
@media(max-width:959px){
  .sn-medida-foto{order:-1}
}
@media(prefers-reduced-motion:reduce){
  .sn-medida .reveal{transition-delay:0s}
}

/* ---- passo 168: personalizacao, uma FAIXA e nao uma seccao ---- */
/* No passo 166 isto entrou como seccao de corpo inteiro, com o salto da
   pagina dos dois lados: 208px em cima, 342 de conteudo, 208 em baixo. Visto
   montado, partia o ritmo. Volta como faixa de ~180px entre dois fios.

   O margin-top negativo nao e um truque: a seccao de cima paga o salto
   grande, clamp(120px,14.4vw,208px), e nao pode deixar de o pagar porque nas
   Saunas Interiores nao ha faixa nenhuma a seguir. Aqui desconta-se a
   diferenca.

   Passo 172: os dois respiros passam ao dobro dos 104 e 120 que a cliente
   tinha a vista — 208 e 240 aos 1440. Em cima isso da exactamente o salto da
   pagina, clamp(120px,14.4vw,208px), que a seccao acima ja paga: o
   margin-top negativo deixa de fazer falta e sai. Em baixo paga a faixa,
   descontados os ~48px que o eyebrow da Gama VULKANA ja tras consigo. */
.sn-pers{padding:0 0 clamp(138px,14.2vw,192px)}
/* os fios vao aqui e nao na <section>: e assim que ficam a largura do
   conteudo, como a cliente pediu, em vez de atravessarem o ecra */
.sn-pers-faixa{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(20px,2.2vw,26px) 0;display:grid;
  row-gap:clamp(26px,3.4vw,38px);column-gap:clamp(36px,5vw,80px)}
/* o intervalo vem todo do gap e nao de margens somadas a ele: com as duas
   coisas a contar, a faixa passava dos 200px que a cliente pediu */
.sn-pers-bloco{display:grid;align-content:start;gap:8px}
.sn-pers-eyebrow{font-size:10px;letter-spacing:.28em}
.sn-pers-bloco h2{font-size:clamp(18px,1.9vw,24px);font-weight:300;letter-spacing:-.015em;
  line-height:1.15;margin:0}
/* sem medida propria: numa faixa e a coluna que a da, e a 56ch o paragrafo
   da direita ficava em tres linhas e mandava na altura de tudo */
.sn-pers-diz{margin:0;font-size:13px;line-height:1.65;color:var(--stone)}
/* versalete espacado, como a linha de factos dos cartoes das gamas — mas sem
   o fio por cima: dentro de uma faixa que ja tem dois, um terceiro fazia-a
   parecer uma grelha de precos */
/* 10px com .12em e nao 10.5 com .14: a 10,5 a linha pedia 595px e a coluna
   tem 594 aos 1512px — partia-se em duas por um pixel, e a faixa passava de
   187 para 206. A esta medida sobra-lhe folga ate aos ~1240px. */
.sn-pers-opcoes{margin:4px 0 0;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sand);line-height:1.8}
.sn-pers-nota{margin:0;font-size:11.5px;line-height:1.6;color:var(--stone)}
.sn-pers-btn{justify-self:start;margin-top:4px;font-size:11px;position:relative;
  color:var(--stone);border-bottom-color:rgba(250,246,239,.18)}
.sn-pers-btn:hover,.sn-pers-btn:focus-visible{color:var(--sand);border-bottom-color:var(--terracotta)}
.sn-pers-btn::before{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}
.sn-pers-btn span{display:inline-block;transition:translate .35s var(--ease)}
.sn-pers-btn:hover span,.sn-pers-btn:focus-visible span{translate:5px 0}
/* duas colunas iguais: a da esquerda tem mais uma linha, mas os textos tem
   medida propria e o que interessa e a faixa assentar nos dois extremos */
@media(min-width:860px){
  .sn-pers-faixa{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Passo 207: o bloco da direita encosta-se a direita, o mesmo que o cartao
     direito dos fabricantes faz desde o passo 179 — e por isso a partir dos
     mesmos 860px, que e onde ha duas colunas. Em coluna unica ficam um por
     cima do outro e um deles a direita nao espelha nada.

     O botao e item de grelha e nao texto: quem o move e o justify-self, que
     aqui anula o :start da regra base.

     Passo 226: a classe passou a mandar tambem na COLUNA. Com order:2 o bloco
     vai para o fim da grelha seja qual for a ordem no documento — foi assim
     que a personalizacao passou para a direita sem deixar de ser a primeira
     coisa a ler-se no telemovel, onde nao ha colunas nem order. */
  .sn-pers-dir{order:2;text-align:right}
  .sn-pers-dir .sn-pers-btn{justify-self:end}
}

/* ---- passo 86/87: pagina de um modelo (nasceu para a BASALTO) ---- */
.mod{padding:clamp(24px,3.4vw,44px) 0 clamp(44px,6vw,88px)}
.mod-alto{display:grid;gap:clamp(24px,3.4vw,48px);align-items:center}
/* a entrada do palco: cada elemento sobe 90ms depois do anterior. E a mesma
   animacao do seletor (sn-sobe), para a pagina do modelo nao parecer de outro
   site. Nao usa .reveal porque isto esta acima da dobra: espera pelo scroll
   seria esperar por um scroll que nunca vem. */
.mod-entra{animation:sn-sobe .9s var(--ease) both;animation-delay:calc(var(--i,0) * 90ms)}
/* e nas listas o mesmo escalonamento, mas ao entrar no ecra */
.mod .reveal{transition-delay:calc(var(--i,0) * 90ms)}
.mod-voltar{display:inline-block;margin-bottom:clamp(18px,2.4vw,30px)}
.mod-voltar span{display:inline-block;transition:translate .35s var(--ease)}
.mod-voltar:hover span{translate:-5px 0}
/* passo 98: a linha de atalhos. O regresso mantem a seta para tras; os atalhos
   para as coleccoes vizinhas levam a seta para a frente — le-se de relance
   qual deles volta e quais levam a outro lado. */
.mod-atalhos{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;
  margin-bottom:clamp(18px,2.4vw,30px)}
.mod-atalhos .mod-voltar{margin-bottom:0}
/* passo 112: a mesma linha repetida no fim da pagina. La em cima antecede o
   titulo e por isso empurra por baixo; aqui e o ultimo elemento e a margem
   passa para cima, a separa-la do botao de proposta. */
.mod-atalhos-fim{margin-bottom:0;margin-top:clamp(6px,1vw,14px)}
/* Passo 153: os atalhos para as coleccoes vizinhas deixam de competir com o
   regresso. Dentro da pagina de um modelo o que interessa e voltar a coleccao
   de onde se veio; os outros dois sao saidas de recurso e ficam em --stone,
   sem o fio laranja — que so aparece ao passar o rato, como no atalho do
   fabricante. O texto e a seta ficam iguais. */
.mod-atalho{font-size:11px;color:var(--stone);border-bottom-color:transparent}
.mod-atalho:hover,.mod-atalho:focus-visible{color:var(--sand);border-bottom-color:var(--terracotta)}
.mod-atalho span{display:inline-block;transition:translate .35s var(--ease)}
.mod-atalho:hover span{translate:5px 0}
.mod-txt h1{font-size:clamp(44px,8vw,104px);font-weight:300;line-height:.94;letter-spacing:-.02em;margin-top:12px}
.mod-pax{margin-top:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.mod-diz{margin-top:20px;font-size:15px;line-height:1.8;color:var(--stone);max-width:44ch}
/* o preco e a nota partilham a linha: com valor, o numero manda; sem ele, fica
   so a frase de consulta, que e o que o resto do site diz hoje */
/* passo 90: duas linhas. O valor de referencia riscado e pequeno, em pedra; o
   que se paga e grande, em marfim, com o regime fiscal ao lado em corpo
   pequeno — sem isso, um numero grande e uma promessa por cumprir. */
/* passo443: sem descontos (pedido da Sandra, 22.10.2026). Sai a linha do valor riscado e o selo;
   fica so o preco normal, grande, com o regime fiscal ao lado. */
.mod-preco{margin-top:26px;display:grid;gap:6px;justify-items:start}
.mod-valor{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px}
.mod-valor strong{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(38px,5.2vw,64px);
  line-height:1;letter-spacing:-.01em;color:var(--ivory)}
.mod-valor span{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
/* passo 166: sem limite de medida, ao contrario da nota de transporte que
   vem a seguir. Esta e uma linha so e cabe na coluna do preco (435 a 547px
   medidos); com as 44ch da outra partia-se e deixava "unidades" sozinha. */
.mod-aviso{margin-top:8px;font-size:12px;line-height:1.7;letter-spacing:.01em;
  color:var(--sand)}
.mod-nota{margin-top:6px;font-size:12.5px;line-height:1.7;color:var(--stone);max-width:44ch}

/* ---- passo 185: faixa "Explore a coleccao" nas paginas de modelo ----
   E a mesma linguagem da tira de miniaturas do seletor (.sn-tira): mesma
   altura de imagem, mesmo versalete, o mesmo cinzento que acende ao passar.
   Familia "mod-col" e nao "mod-tira": .mod-tira, .mod-pista e .mod-mini
   JA SAO a tira de cenas do topo desta mesma pagina — reutilizar os nomes
   reescrevia-a. Classes proprias tambem porque as do seletor trazem atras o
   comportamento de botao e o arrastar por JS, que aqui nao existem — sao
   ligacoes e quem as percorre usa o dedo ou a roda.

   "safe center" e o que faz o que a cliente pediu: centrado enquanto os
   doze couberem, e a partir dai desliza na horizontal sem partir para
   duas linhas. O "safe" impede o corte do primeiro item quando nao cabe,
   que e o que o "center" sozinho faz em caixas que deslizam. */
.mod-col{position:relative;display:flex;justify-content:center;
  justify-content:safe center;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  padding:6px 0 28px;margin-top:clamp(18px,2.4vw,28px);
  scrollbar-width:none;-ms-overflow-style:none}
.mod-col::-webkit-scrollbar{width:0;height:0}
/* passo 187: arrastar com o rato. As classes sao postas pelo arrastavel()
   da seccao, o mesmo das outras duas filas. O user-select nos nomes evita
   que um arrasto va seleccionando "RIFT S CUBE 125 ..." pelo caminho. */
.mod-col.pode-arrastar{cursor:grab}
.mod-col.a-arrastar{cursor:grabbing}
.mod-col.a-arrastar .t,.mod-col.pode-arrastar .t{user-select:none;-webkit-user-select:none}
/* 28px e nao 32: com 32 os doze pediam 1280px e o conteudo tem 1264 —
   sobrava a Cube 300 cortada por dezasseis pixeis, que se le como defeito e
   nao como "ha mais para o lado". A 28 cabem todos aos 1440 e acima, e
   abaixo disso desliza, que e o que a cliente pediu. */
.mod-col-pista{display:flex;align-items:flex-end;gap:clamp(14px,2vw,28px)}
.mod-col-item{position:relative;flex:0 0 auto;display:grid;justify-items:center;
  gap:9px;border:0;text-decoration:none;color:inherit}
.mod-col-item img{height:clamp(44px,6.4vh,64px);width:auto;object-fit:contain;
  filter:grayscale(.65) brightness(.6);-webkit-user-drag:none;user-select:none;
  transition:filter .5s var(--ease),transform .5s var(--ease),scale .5s var(--ease)}
.mod-col-item .t{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone);white-space:nowrap;transition:color .4s ease}
.mod-col-item:hover img,.mod-col-item:focus-visible img{filter:grayscale(.25) brightness(.9);scale:1.07}
.mod-col-item:hover .t,.mod-col-item:focus-visible .t{color:var(--sand)}
/* o modelo em que se esta: nome em laranja e um fio curto por baixo, o
   mesmo indicador que o seletor ja usa. Nao se esconde nem se desliga —
   quem chega a meio da faixa tem de perceber onde esta. */
.mod-col-item.on img{filter:none;transform:translateY(-4px) scale(1.06);scale:1}
.mod-col-item.on:hover img{scale:1.05}
.mod-col-item.on .t{color:var(--terracotta)}
.mod-col-item.on::after{content:'';position:absolute;left:50%;bottom:-13px;
  transform:translateX(-50%);width:22px;height:1px;background:var(--terracotta)}
@media(prefers-reduced-motion:reduce){
  .mod-col-item img,.mod-col-item .t{transition:none}
  .mod-col-item:hover img{scale:1}
}
.mod-cta{margin-top:26px}

/* ---- o palco: ambientes que se sucedem ---- */
.mod-palco{display:grid;gap:14px}
/* passo 95: a caixa deixou de ter proporcao fixa. A anterior era quadrada e o
   "contain" nao chegava a funcionar: numa grelha, a altura em percentagem da
   fotografia nao tinha contra o que resolver, a imagem ficava com a altura
   natural, saia da caixa e o overflow cortava-a — parecia "cover". Agora a
   caixa e posicionada e toma a proporcao da fotografia a vista (--r, escrita
   pelo JS), com um limite de altura para nenhuma passar do ecra. Cada
   fotografia aparece inteira e do tamanho maximo que a coluna permite. */
.mod-cena{position:relative;overflow:hidden;aspect-ratio:var(--r,1);
  width:min(100%,calc(74vh * var(--r,1)));margin-inline:auto;
  transition:aspect-ratio .55s var(--ease),width .55s var(--ease)}
/* posicionada, nao dimensionada em percentagem — a mesma correccao da
   miniatura da tabela e da galeria. So assim o "contain" tem altura definida
   contra que se medir. */
.mod-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;
  transition:opacity 1.2s var(--ease)}
.mod-foto.on{opacity:1}
/* a aproximacao lenta e o que impede um plano fixo de parecer parado. Corre so
   na fotografia a vista e reinicia a cada volta (o JS tira e repoe a classe).
   Passo 95: cresce de 96,5% ate encher a caixa, em vez de passar dos 100% —
   assim o movimento existe e nunca corta nada. */
.mod-roda .mod-foto.on{animation:mod-aproxima 7.4s var(--ease) both}
@keyframes mod-aproxima{from{scale:.965}to{scale:1} }

/* a tira de ambientes: mesma linguagem da tira do seletor das saunas */
.mod-tira{position:relative;display:flex;justify-content:center;justify-content:safe center;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;padding:4px 0 14px}
.mod-tira::-webkit-scrollbar{width:0;height:0}
.mod-tira.pode-arrastar{cursor:grab}
.mod-tira.a-arrastar{cursor:grabbing}
.mod-pista{display:flex;gap:clamp(8px,1.2vw,14px)}
.mod-mini{position:relative;flex:0 0 auto;width:clamp(58px,7vw,84px);aspect-ratio:1/1;
  background:none;border:0;padding:0;margin:0;cursor:pointer;overflow:hidden}
.mod-mini img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;-webkit-user-select:none;user-select:none;
  filter:grayscale(.5) brightness(.55);transition:filter .5s var(--ease),scale .5s var(--ease)}
.mod-mini:hover img{filter:grayscale(.2) brightness(.85);scale:1.06}
.mod-mini.on img{filter:none}
.mod-mini.on::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--terracotta)}

.mod-bloco{margin-top:clamp(44px,6vw,86px)}
.mod-h2{margin-top:clamp(22px,2.8vw,34px);font-size:clamp(22px,2.8vw,34px);font-weight:300;letter-spacing:-.01em}
/* passo 89: a galeria deixou de ser grelha e passou a fila que se arrasta —
   o mesmo comportamento da tira do seletor. Antes, quanto mais estreito o
   ecra, mais pequenas ficavam as fotografias; agora mantem-se e puxam-se de
   lado. Barra escondida, "safe center" para a primeira nao ficar cortada. */
.mod-galeria{margin-top:clamp(20px,2.6vw,34px);display:flex;gap:clamp(16px,2.2vw,28px);
  justify-content:center;justify-content:safe center;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.mod-galeria::-webkit-scrollbar{width:0;height:0}
.mod-galeria.pode-arrastar{cursor:grab}
.mod-galeria.a-arrastar{cursor:grabbing}
.mod-galeria figure{margin:0;flex:0 0 auto;width:clamp(190px,21vw,270px)}
.mod-galeria img{-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
/* a entrada escalonada e comandada pela fila e nao por cada figura: dentro de
   um contentor que corta, uma figura fora da vista nunca cruza o ecra e ficaria
   invisivel ate ser arrastada para dentro */
.js-reveal .mod-galeria figure{opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms)}
.js-reveal .mod-galeria.visivel figure{opacity:1;transform:none}
/* caixa de proporcao fixa: os recortes tem alturas diferentes e sem ela a
   grelha ficava com degraus. A imagem e posicionada, nao dimensionada em
   percentagem — a mesma correccao da miniatura da tabela. */
.mod-caixa{position:relative;display:block;aspect-ratio:4/5;background:var(--basalt-2);overflow:hidden}
.mod-caixa img{position:absolute;left:8%;top:8%;width:84%;height:84%;object-fit:contain;
  transition:scale .7s var(--ease),filter .7s var(--ease)}
.mod-galeria figure:hover .mod-caixa img{scale:1.06;filter:brightness(1.06)}
.mod-galeria figcaption{margin-top:12px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);
  transition:color .4s ease}
.mod-galeria figure:hover figcaption{color:var(--sand)}

.mod-ficha-alto{margin-top:clamp(18px,2.4vw,28px);display:grid;gap:clamp(24px,3.4vw,48px);align-items:start}
.mod-ficha{display:grid}
.mod-ficha div{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;
  padding:14px 0;border-bottom:1px solid var(--line)}
.mod-ficha dt{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.mod-ficha dd{margin:0;font-size:15px;color:var(--sand)}
/* o desenho do fabricante e preto sobre branco: vive numa placa marfim, como o
   logotipo do fabricante. Sobre o basalto, sem placa, era uma mancha */
.mod-desenho{display:grid;gap:16px;justify-items:start}
.mod-desenho img{display:block;width:100%;height:auto;background:var(--ivory);padding:14px}
.mod-pdf span{display:inline-block;transition:translate .35s var(--ease)}
.mod-pdf:hover span{translate:0 4px}
.mod-fonte{margin-top:16px;font-size:11.5px;line-height:1.7;color:var(--stone)}
.mod-opcoes{margin-top:clamp(18px,2.4vw,28px);display:grid;gap:0;list-style:none}
.mod-opcoes li{display:grid;gap:6px;padding:16px 0;border-bottom:1px solid var(--line)}
.mod-opcoes .n{font-family:'Fraunces',serif;font-size:17px;color:var(--ivory)}
.mod-opcoes .d{font-size:13.5px;line-height:1.7;color:var(--stone);max-width:60ch}
.mod-fecho{margin-top:clamp(40px,5vw,72px);display:grid;gap:20px;justify-items:start}
.mod-fecho p{font-size:clamp(18px,2.2vw,26px);font-weight:300;line-height:1.5;color:var(--sand);max-width:32ch}

/* ---- catalogo de plantas (passo 96) ----
   Reaproveita o palco e a ficha da pagina do modelo. O que e proprio daqui e a
   tira: em vez de cenarios da mesma sauna, sao especies diferentes, e por isso
   cada miniatura leva nome e porte por baixo — como a capacidade nas saunas. */
.pl-botoes{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
/* o .btn-text nasceu para ligacoes; aqui e um botao a serio, e o navegador
   traz-lhe fundo, moldura e tipo de letra proprios que e preciso desligar */
.pl-abre{background:none;border:0;border-bottom:1px solid rgba(231,85,30,.45);
  font-family:inherit;cursor:pointer;padding:0 0 4px}
.pl-abre .s{display:inline-block;transition:rotate .35s var(--ease)}
.pl-abre.on .s{rotate:180deg}

.pl-tira{padding:4px 0 10px}
.pl-mini{flex:0 0 auto;width:clamp(92px,11vw,132px);background:none;border:0;padding:0;margin:0;
  cursor:pointer;display:grid;gap:8px;text-align:center;color:var(--stone);
  transition:color .4s var(--ease)}
.pl-mini .f{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;background:var(--basalt-2)}
.pl-mini .f img{width:100%;height:100%;object-fit:cover;
  -webkit-user-drag:none;-webkit-user-select:none;user-select:none;
  filter:grayscale(.5) brightness(.55);transition:filter .5s var(--ease),scale .5s var(--ease)}
.pl-mini:hover{color:var(--sand)}
.pl-mini:hover .f img{filter:grayscale(.2) brightness(.85);scale:1.06}
.pl-mini.on{color:var(--ivory)}
.pl-mini.on .f img{filter:none}
.pl-mini.on .f::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--terracotta)}
.pl-mini .t{font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.3}
.pl-mini .p{font-size:10.5px;letter-spacing:.04em;color:var(--stone)}
.pl-mini.on .p{color:var(--sand)}

/* sem JS as especies ficam todas visiveis, uma a seguir a outra; e o script
   que esconde. Enquanto nao houver JS nao ha separacao nenhuma entre elas, por
   isso e o proprio script que a pede com a classe pl-vivo. */
.pl-vivo .pl-txt + .pl-txt{margin-top:0}
.pl-gaveta{margin-top:clamp(30px,4vw,56px)}
.pl-det{animation:sn-sobe .6s var(--ease) both}
.pl-det .mod-ficha{margin-top:clamp(18px,2.4vw,28px)}
.pl-fecha{margin-top:clamp(30px,4vw,48px)}
.pl-h2-fotos{margin-top:clamp(30px,4vw,48px)}
/* as fotografias da gaveta sao cenarios, nao recortes de produto: a caixa 4/5
   da pagina do modelo deixava uma paisagem pequena no meio de dois vazios.
   Aqui todas tem a MESMA ALTURA e a largura que a proporcao pedir — nenhuma e
   cortada, nenhuma fica pequena, e a fila le-se como uma tira de contacto. */
.pl-fila{align-items:start}
.pl-fila figure{width:auto;max-width:min(84vw,520px)}
.pl-fila .mod-caixa{aspect-ratio:auto;height:clamp(190px,22vw,310px);background:none}
.pl-fila .mod-caixa img{position:static;width:auto;height:100%;display:block;object-fit:contain}
/* a legenda e uma medida, nao uma frase: sem caixa alta (senao "3 m" sai
   "3 M") e com menos espacejamento, que e o que se faz aos numeros no site */
.pl-fila figcaption{text-transform:none;letter-spacing:.06em;font-size:11.5px}
/* sem aproximacao ao passar o rato: num retrato que enche a caixa, 6% de
   escala eram 6% de fotografia cortada */
.pl-fila figure:hover .mod-caixa img{scale:1}

@media(min-width:700px){
  .mod-ficha div{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:20px;align-items:baseline}
  .mod-opcoes li{grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:20px;align-items:baseline}
}
@media(min-width:1000px){
  .mod-alto{grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr)}
  /* passo 94: duas colunas so quando ha desenho tecnico ao lado. Na pagina das
     plantas nao ha, e a ficha ficava espremida em metade do ecra com a outra
     metade vazia. */
  .mod-ficha-alto:has(.mod-desenho){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
/* quem pede menos movimento recebe a pagina inteira, parada */
@media(prefers-reduced-motion:reduce){
  .mod-entra{animation:none}
  .mod .reveal{transition-delay:0s}
  .mod-roda .mod-foto.on{animation:none}
  .mod-foto{transition:none}
  .mod-cena{transition:none}
  .mod-caixa img,.mod-galeria figcaption,.mod-voltar span,.mod-atalho span,.mod-pdf span{transition:none}
  .mod-mini img{transition:none}
  .mod-mini:hover img{scale:1}
  .pl-det{animation:none}
  .pl-mini,.pl-mini .f img,.pl-abre .s{transition:none}
  .pl-mini:hover .f img{scale:1}
  .js-reveal .mod-galeria figure{opacity:1;transform:none;transition:none}
  .mod-galeria figure:hover .mod-caixa img{scale:1}
}

/* ---- passo 195: ar nas paginas de modelo ----
   "Toda esta zona esta muito compacta, os textos estao todos seguidos e
   colados, o espaco nao respira." O bloco do topo tinha 44px a separa-lo do
   cabecalho e intervalos de 12 a 26px entre eyebrow, nome, capacidade, texto,
   preco e botao — com seis elementos seguidos isso le-se como um paragrafo so.
   Os intervalos que amarram pares (o aviso ao preco, a nota ao aviso) crescem
   pouco, de proposito: sao para continuar a ler-se como um bloco.

   E o fecho passa ao centro. Ficava encostado a esquerda por baixo de uma
   faixa de miniaturas centrada, e a pagina acabava torta.

   Tudo aqui e :not(.pl) porque a pagina das Plantas usa a mesma seccao .mod e
   nao foi pedida. Se um dia se quiser la o mesmo ritmo, tira-se o :not. */
.mod:not(.pl){padding:clamp(48px,6.4vw,92px) 0 clamp(90px,10vw,148px)}
.mod:not(.pl) .mod-atalhos{margin-bottom:clamp(34px,4.4vw,56px)}
.mod:not(.pl) .mod-txt h1{margin-top:clamp(14px,1.6vw,20px)}
.mod:not(.pl) .mod-pax{margin-top:clamp(16px,2vw,24px)}
.mod:not(.pl) .mod-diz{margin-top:clamp(24px,3vw,36px)}
.mod:not(.pl) .mod-preco{margin-top:clamp(32px,3.8vw,46px)}
.mod:not(.pl) .mod-aviso{margin-top:clamp(11px,1.2vw,14px)}
.mod:not(.pl) .mod-nota{margin-top:clamp(8px,1vw,10px)}
.mod:not(.pl) .mod-cta{margin-top:clamp(30px,3.6vw,42px)}
/* o fecho: mais longe da faixa dos doze e do rodape, e ao centro */
.mod:not(.pl) .mod-fecho{margin-top:clamp(84px,10vw,150px);
  gap:clamp(22px,2.6vw,30px);justify-items:center;text-align:center}
.mod:not(.pl) .mod-fecho p{margin-left:auto;margin-right:auto}
.mod:not(.pl) .mod-atalhos-fim{justify-content:center}

/* ---- passo 198: as tres seccoes da pagina de modelo viram abas ----
   "De todos os angulos", "Ficha tecnica" e "Opcoes de personalizacao" passam a
   abrir e fechar. A primeira nasce aberta; as outras duas fechadas. Varias
   podem estar abertas ao mesmo tempo — nao ha fecho automatico.

   Sem caixas nem fundo proprio: o que separa as abas e um fio de 1px, o mesmo
   --line do resto do site. Nao se usa aqui a .fissure, que traz um brilho
   terracota animado: tres delas seguidas, numa lista de titulos fechados,
   davam uma pagina a pulsar.

   O painel abre com a mesma tecnica da gaveta da tabela dos doze — uma grelha
   de 0fr a 1fr — porque e a unica que anima ate a altura do conteudo sem a
   medir em JavaScript. O corte tem de estar num filho, e por isso sao tres
   divs: .mod-ac-abre (a grelha), .mod-ac-corpo (o corte) e .mod-ac-caixa (o
   espacamento, que tem de ficar DENTRO do corte para desaparecer com ele).

   Sem JavaScript nao ha .mod-ac-js e as tres ficam abertas: quem nao corre
   scripts ve a pagina inteira, que e o que interessa. */
.mod-acs{margin-top:clamp(44px,6vw,86px)}
.mod-ac{border-top:1px solid var(--line)}
/* o <h2> aqui e so semantica: quem desenha o titulo e o .t la dentro. Sem
   este font-family:inherit, o subtitulo herdava a Fraunces dos titulos. */
.mod-ac-h{margin:0;font:inherit;letter-spacing:normal}
.mod-ac-btn{display:flex;align-items:center;justify-content:space-between;gap:24px;
  width:100%;padding:clamp(22px,2.6vw,30px) 0;background:none;text-align:left;color:inherit}
.mod-ac-txt{display:block}
.mod-ac-txt .t{display:block;font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(22px,2.8vw,34px);line-height:1.12;letter-spacing:-.01em;color:var(--ivory);
  transition:color .3s ease}
.mod-ac-txt .s{display:block;margin-top:9px;font-size:12px;line-height:1.6;
  letter-spacing:.01em;color:var(--stone)}
.mod-ac-btn:hover .t,.mod-ac-btn:focus-visible .t{color:var(--sand)}

/* o sinal: duas barras de 1px. Fechada le-se "+"; aberta, a vertical apaga-se
   e fica o "−". Discreto de proposito — e um sinal, nao um botao. */
.mod-ac-sinal{position:relative;flex:0 0 auto;width:18px;height:18px}
.mod-ac-sinal::before,.mod-ac-sinal::after{content:'';position:absolute;left:50%;top:50%;
  width:15px;height:1px;background:var(--sand);translate:-50% -50%;
  transition:opacity .3s var(--ease),rotate .3s var(--ease)}
.mod-ac-sinal::after{rotate:90deg}
.mod-ac.on .mod-ac-sinal::after{opacity:0;rotate:0deg}
.mod-ac-btn:hover .mod-ac-sinal::before,.mod-ac-btn:hover .mod-ac-sinal::after{background:var(--terracotta)}

.mod-ac-abre{display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s var(--ease)}
.mod-ac-js:not(.on) .mod-ac-abre{grid-template-rows:0fr}
.mod-ac-corpo{overflow:hidden;min-height:0}
/* o primeiro filho de cada painel ja traz a sua margem de topo
   (.mod-galeria, .mod-ficha-alto, .mod-opcoes): o corte cria contexto proprio
   e essa margem nao escapa para fora da aba.
   A visibilidade nao e decoracao: sem ela, o conteudo de uma aba fechada
   continua a apanhar o Tab e o "procurar na pagina". Sai so no fim da
   animacao, senao o painel desaparecia antes de acabar de fechar. */
.mod-ac-caixa{padding-bottom:clamp(28px,3.4vw,46px);visibility:visible;transition:visibility 0s}
.mod-ac-js:not(.on) .mod-ac-caixa{visibility:hidden;transition:visibility 0s .3s}
@media(prefers-reduced-motion:reduce){
  .mod-ac-abre,.mod-ac-sinal::before,.mod-ac-sinal::after{transition:none}
  .mod-ac-js:not(.on) .mod-ac-caixa{transition:none}
}

/* ---- passo 199: a ficha tecnica sem desenho ao lado ----
   As Saunamo nao publicam desenho tecnico nem PDF. Sem o desenho, a
   .mod-ficha-alto fica com uma coluna so e a lista estica-se pela largura
   toda: o rotulo a 200px e o valor a comecar aos 220, com meio ecra vazio a
   direita de "8 pessoas".

   A lista passa a ter medida propria e a ficar ao centro. Nao e o texto que
   se centra — sao pares rotulo/valor e centrar as linhas partia a leitura;
   o que se centra e o bloco. Os 720px sao a soma do que a grelha ja usa:
   200 de rotulo, 20 de intervalo e cerca de 500 para o valor mais comprido
   ("Abeto ou pinho termico, 42 mm - piso e teto 28 mm").

   So nas paginas de modelo: a ficha das plantas usa .mod-ficha mas nao a
   .mod-ficha-alto, e fica como esta. */
@media(min-width:1000px){
  .mod-ficha-alto:not(:has(.mod-desenho)){justify-items:center}
  .mod-ficha-alto:not(:has(.mod-desenho)) .mod-ficha{width:100%;max-width:720px}
}

/* ---- passo 200: o fim das abas encosta-se ao fio laranja ----
   Com as tres abas fechadas ficavam 116px de nada entre o subtitulo das
   "Opcoes de personalizacao" e a .fissure: os 30px de respiro do proprio
   cabecalho mais os 86px com que a seccao seguinte se afasta da anterior.
   Esse afastamento fazia sentido entre blocos de conteudo; entre o fim de uma
   lista de abas e o separador da seccao a seguir, lia-se como erro.

   Passa a 52px medidos — os 30 do cabecalho mais 22 — e o fio fica a ler-se
   como o principio do "Explore a coleccao" e nao como um fio solto a meio de
   uma zona vazia. Por isso o titulo tambem se aproxima dele.

   So depois das abas: a mesma .mod-bloco serve a pagina das plantas e ali nao
   ha abas nenhumas a anteceder. */
.mod-acs + .mod-bloco{margin-top:clamp(16px,1.8vw,22px)}
.mod-acs + .mod-bloco > .mod-h2{margin-top:clamp(22px,2vw,28px)}
/* e o fecho aproxima-se um pouco da fila dos doze: com a pagina toda mais
   apertada, os 144px do passo 195 passaram a ser o maior vazio da pagina.
   Perde 20px e fica nos 124 — continua a ser o maior intervalo, que e o que
   se quer antes de um pedido. */
.mod:not(.pl) .mod-fecho{margin-top:clamp(76px,8.6vw,124px)}


/* ================= LINHAS - ALTERNADOR (passo 245) ================= */
/* Um so palco para as duas linhas, em vez do par de cartoes. O par fica
   reservado para os fabricantes, no fim da pagina. */
/* Passo 246: o fecho da seccao passou a igualar o intervalo que a separa do
   banner, em cima. A conta e explicita: o que o ritual fecha, mais o que esta
   seccao abre, menos o que o seletor seguinte ja traz de cima (medido: 48px
   aos 1512, 26px em ecra estreito). O ultimo termo e o desencontro entre o
   fim do texto e o fim da caixa, que cresce com o corpo da letra. */
.ln{padding-top:clamp(34px,4vw,58px);
  padding-bottom:calc(clamp(120px,14.4vw,208px) + clamp(34px,4vw,58px) + clamp(4px,1.9vw,21px) - clamp(26px,3.4vw,48px))}
.ln-eyebrow{margin-bottom:clamp(16px,2vw,24px)}
/* o comando: um indicador que desliza por cima de N abas iguais. A largura
   sai de --n e a posicao de --i, escritas pelo Liquid e pelo script — assim
   serve duas ou tres linhas sem mexer no CSS. */
.ln-cmd{position:relative;display:inline-grid;grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);max-width:100%;border:1px solid var(--line)}
.ln-desl{position:absolute;top:0;bottom:0;left:0;width:0;
  background:rgba(231,85,30,.14);border-bottom:2px solid var(--terracotta);
  transition:translate .45s var(--ease),width .45s var(--ease)}
.ln-ab{all:unset;box-sizing:border-box;cursor:pointer;position:relative;
  padding:13px clamp(16px,2.4vw,30px);text-align:center;
  font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);
  transition:color .35s var(--ease)}
.ln-ab:hover{color:var(--sand)}
.ln-ab.on{color:var(--ivory)}
.ln-ab:focus-visible{outline:1px solid var(--terracotta);outline-offset:-3px}
.ln-palco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(26px,4vw,68px);align-items:center;padding-top:clamp(26px,3.2vw,44px)}
/* os paineis ocupam a mesma celula: a altura e a do maior e a troca nao
   sacode o resto da pagina */
.ln-pns{display:grid}
.ln-pn{grid-area:1/1;opacity:0;translate:0 10px;visibility:hidden;
  transition:opacity .45s var(--ease),translate .55s var(--ease),visibility 0s .45s}
.ln-pn.on{opacity:1;translate:0 0;visibility:visible;
  transition:opacity .45s var(--ease),translate .55s var(--ease),visibility 0s}
.ln-fab{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta)}
.ln-pn h3{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(23px,2.5vw,34px);
  letter-spacing:-.02em;line-height:1.1;margin:8px 0 0}
.ln-chap{font-family:'Fraunces',serif;font-weight:300;font-style:italic;color:var(--sand);
  font-size:clamp(15px,1.6vw,19px);margin:10px 0 16px}
.ln-diz{color:var(--stone);line-height:1.8;font-size:14.5px;max-width:46ch;margin-bottom:10px}
.ln-fact{display:block;margin:20px 0 14px;padding-top:15px;border-top:1px solid var(--line2);
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.ln-btn{font-size:11px}
.ln-btn span{display:inline-block;transition:translate .35s var(--ease)}
.ln-btn:hover span,.ln-btn:focus-visible span{translate:0 4px}
.ln-cena{display:grid;place-items:center;min-height:clamp(250px,28vw,390px)}
.ln-foto{grid-area:1/1;max-height:clamp(250px,30vw,420px);width:auto;
  opacity:0;scale:.96;transition:opacity .5s var(--ease),scale .65s var(--ease)}
.ln-foto.on{opacity:1;scale:1}
@media(max-width:880px){
  .ln-palco{grid-template-columns:1fr;gap:clamp(20px,4vw,34px)}
  .ln-cena{order:-1;min-height:clamp(230px,52vw,340px)}
  .ln-cmd{width:100%;display:grid;grid-auto-flow:column}
}
/* com o movimento reduzido a troca e seca: continua a funcionar, nao anima */
@media(prefers-reduced-motion:reduce){
  .ln-desl,.ln-pn,.ln-foto,.ln-btn span{transition:none}
}

/* ===== passo371: banner da pagina inicial com os textos centrados ===== */
#heroPalco .hero-inner{text-align:center}
#heroPalco .hero h1,#heroPalco .hero-sub{margin-left:auto;margin-right:auto}
#heroPalco .hero-bottom,#heroPalco .hero-actions{justify-content:center}

/* ===== passo372: linha do banner mais curta (320 px, centrada) ===== */
#heroPalco .hero-bottom{border-top:0;position:relative}
#heroPalco .hero-bottom::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(100%,320px);border-top:1px solid var(--line)}

/* ===== passo378/380/383: galeria antes do manifesto; espaco generoso entre a linha laranja e as fotografias ===== */
#secao-prova + #secao-ambientes .environments{margin-top:190px}
@media(max-width:900px){#secao-prova + #secao-ambientes .environments{margin-top:130px}}

/* ===== passo379: na grelha de tres colunas, a ultima fila incompleta fica centrada ===== */
@media(min-width:1041px){
  .paineis{grid-template-columns:repeat(6,1fr)}
  .paineis .painel{grid-column:span 2}
  .paineis .painel:nth-child(3n+1):nth-last-child(2){grid-column:2 / span 2}
  .paineis .painel:nth-child(3n+1):last-child{grid-column:3 / span 2}
}

/* ===== passo381: blocos dos numeros com as linhas partilhadas — o traco fica alinhado mesmo com rotulos de 3 linhas ===== */
#secao-prova .hero-feats{row-gap:0}
#secao-prova .hero-feats > div{grid-row:span 5;grid-template-rows:subgrid;row-gap:0}

/* ===== passo387: o destaque em palavra (EUROPA) fica a ~85% do tamanho dos numeros, na mesma linha de base,
   e encolhe so quando nao cabe na coluna; ate 980 px nenhum bloco alarga a sua coluna ===== */
#secao-prova .hero-feats .num-palavra{font-size:29px;letter-spacing:.02em;align-self:end}
#secao-prova .hero-feats > div:last-child .desc{text-wrap:balance}
@media(max-width:980px){#secao-prova .hero-feats > div{min-width:0;max-width:100%}#secao-prova .hero-feats .num-palavra{font-size:min(24px,calc(6vw - 10px))}}
@media(max-width:560px){#secao-prova .hero-feats .num-palavra{font-size:min(18px,calc(5.7vw - 4.5px))}}
/* "além-fronteiras" nao parte no hifen quando cabe inteiro na coluna (a partir de 375 px) */
@media(min-width:375px){#secao-prova .sem-quebra{white-space:nowrap}}

/* ===== passo385: galeria com fotografias (assets/images/ambientes); um esbatimento por baixo do rotulo para se ler sobre a foto ===== */
.faixa .peca{background-size:cover;background-position:center;background-repeat:no-repeat}
.faixa .peca::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(21,18,14,.62) 0%,rgba(21,18,14,0) 42%)}

/* ===== passo386: a etiqueta do modelo nunca passa por baixo das bolas do carrossel; no telemovel as duas ficam mais pequenas =====
   A largura maxima da etiqueta reserva o espaco das bolas: margem esquerda + margem direita + 4 bolas + folga.
   Se o texto nao couber, a lotacao passa para a linha de baixo. */
.painel .cr-rot{flex-wrap:wrap;row-gap:2px;max-width:calc(100% - 98px)}
@media(max-width:980px){
  .painel .cr-rot{left:16px;bottom:15px;gap:7px;padding:6px 10px;max-width:calc(100% - 79px)}
  .painel .cr-rot b{font-size:12px}
  .painel .cr-rot i{font-size:8.5px;letter-spacing:.16em}
  .painel .cr-pts{right:16px;bottom:19px;gap:6px}
  .painel .cr-pt{width:5px;height:5px}
  .painel .cr-pt::before{left:-3px;right:-3px;top:-9px;bottom:-9px}
}
@media(max-width:700px){
  .painel .cr-rot{left:9px;bottom:9px;gap:5px;row-gap:1px;padding:4px 7px;max-width:calc(100% - 62px)}
  .painel .cr-rot b{font-size:10px}
  .painel .cr-rot i{font-size:8px;letter-spacing:.14em}
  .painel .cr-pts{right:9px;bottom:12px;gap:7px}
  .painel .cr-pt{width:4px;height:4px}
  .painel .cr-pt::before{left:-3.5px;right:-3.5px;top:-9px;bottom:-9px}
}

/* ===== passo391: no telemovel (tabela em cartoes, ate 820 px) a gaveta de cada modelo mostra so os campos
   marcados com .sn-tlm — Corpo, Acabamento e Aquecedor nas saunas; Grelha, Corpo e Cores nos grelhadores.
   O fabricante ja esta no proprio cartao e o resto fica para o computador. ===== */
@media(max-width:820px){
  .sn-det-topo > div:not(.sn-tlm),.sn-det-menor > div:not(.sn-tlm),.sn-det-fab,
  .sn-det-specs > div:not(.sn-tlm){display:none}
}

/* ===== passo396: introducao — "adaptamo-nos" nao parte no hifen; os quatro destaques de baixo partilham as
   linhas (como os numeros do passo 381): o traco e a descricao ficam a mesma altura nos quatro, seja qual
   for o titulo que parte em mais linhas ===== */
#heroPalco .hero-sub .sem-quebra{white-space:nowrap}
#secao-hero .hero-feats{row-gap:0}
#secao-hero .hero-feats > div{grid-row:span 4;grid-template-rows:subgrid;row-gap:0}

/* ===== passo397: seccao "Cada detalhe pensado. Cada projeto, unico." — as vantagens de fazer o projeto com a
   VULKANA. Titulo em duas linhas; quatro destaques separados por fios finos, icones discretos em terracota;
   botoes centrados. No telemovel os destaques passam a duas colunas e os botoes a largura toda. ===== */
.manifesto-projetos h2{max-width:none}
.manifesto-projetos .mp-linha{display:block}
.mp-destaques{list-style:none;margin:clamp(64px,7vw,96px) auto 0;padding:0;max-width:1120px;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:0}
/* cada destaque ocupa tres linhas da grelha (icone, rotulo, texto) e partilha-as com os vizinhos:
   quando um rotulo parte em duas linhas, os textos continuam a comecar a mesma altura */
.mp-destaques li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;justify-items:center;
  align-content:start;text-align:center;padding:4px clamp(16px,2.4vw,36px);border-left:1px solid var(--line)}
.mp-destaques li:first-child{border-left:0}
.mp-destaques svg{width:26px;height:26px;color:var(--terracotta);opacity:.9;flex:none}
.mp-rot{margin-top:22px;font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ivory);line-height:1.5}
.mp-desc{margin-top:12px;font-size:14px;line-height:1.7;color:var(--stone);max-width:24ch}
.mp-destaques li.reveal{transition-delay:calc(var(--i,0) * 120ms)}
.mp-acoes{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:clamp(56px,6vw,80px)}
@media(max-width:900px){
  .mp-destaques{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-destaques li:nth-child(3){border-left:0}
  .mp-destaques li:nth-child(n+3){margin-top:48px}
}
@media(max-width:560px){
  .manifesto-projetos p{font-size:15px;line-height:1.75;margin-top:26px}
  .mp-destaques{margin-top:56px}
  .mp-destaques li:nth-child(n+3){margin-top:40px}
  .mp-destaques li{padding:0 10px}
  .mp-destaques svg{width:24px;height:24px}
  .mp-rot{margin-top:16px;font-size:10.5px;letter-spacing:.16em}
  .mp-desc{margin-top:8px;font-size:13px;line-height:1.6}
  .mp-acoes{flex-direction:column;align-items:stretch;margin-top:52px}
  .mp-acoes a{text-align:center;padding:15px 16px}
  .mp-destaques li.reveal{transition-delay:0s}
}

/* ===== passo398: "Como funciona" — textos encostados a direita ===== */
.processo .section-head{margin-left:auto;text-align:right}
.processo .section-head p{margin-left:auto}
.processo .passo{text-align:right}
/* ate 900 px a aba do Indice (30 px, fixa a direita) passava por cima do fim das linhas: a seccao ganha
   espaco a direita para o texto acabar antes dela (o contentor tem 24 px; passa a 42) */
@media(max-width:900px){.processo .container{padding-right:42px}}

/* ===== passo399: convite final mais compacto — a frase das origens passou para o texto; tres botoes em caixa,
   sem setas, com a mesma largura e altura; os dois secundarios so com contorno fino ===== */
.cta-band{padding:clamp(56px,5.5vw,80px) 0 clamp(72px,7vw,104px)}
.cta-sub{max-width:54ch;margin-bottom:44px;text-wrap:balance}
.cta-sub .sem-quebra{white-space:nowrap}
.cta-caminhos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:960px;margin:0 auto;
  align-items:stretch}
.cta-caminhos a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;
  padding:16px 24px;white-space:nowrap}
@media(max-width:960px){
  .cta-caminhos{grid-template-columns:1fr;max-width:420px;gap:12px}
}
@media(max-width:560px){
  .cta-sub{font-size:15px;margin-bottom:36px}
  .cta-caminhos a{min-height:52px;padding:15px 16px}
}

/* ===== passo401: colecoes — imagens com cantos arredondados, no mesmo formato ===== */
.painel .visual{border-radius:clamp(10px,1.1vw,16px);isolation:isolate}

/* ===== passo402: cabecalho das colecoes centrado, botao simples e mais 15% de espaco antes e depois do risco ===== */
.indice{padding-bottom:calc(clamp(14px,1.7vw,20px) * 1.15);margin-bottom:calc(clamp(22px,2.8vw,34px) * 1.15)}
.indice-full{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.indice .sub{margin-left:auto;margin-right:auto}
.indice h2,.indice .sub{text-wrap:balance}

/* ===== passo407: ritmo entre as seccoes da pagina inicial — metade do intervalo de cada lado da fronteira,
   a mesma em todas; so mexe no espaco entre seccoes, nao no de dentro ===== */
:root{--entre-secoes:clamp(64px,6.4vw,92px)}
.fissure-hero{margin-top:var(--entre-secoes)}
#secao-prova + #secao-ambientes .environments{margin-top:var(--entre-secoes);margin-bottom:var(--entre-secoes)}
.manifesto-projetos,.arquivo,.why{padding-top:var(--entre-secoes);padding-bottom:var(--entre-secoes)}
.processo{padding-top:var(--entre-secoes);padding-bottom:var(--entre-secoes)}

/* ===== passo408: saunas a medida — assinatura discreta da parceria com a SAUNAMO ===== */
.sn-medida-assinatura{display:flex;align-items:center;gap:14px;margin-top:clamp(24px,2.6vw,34px);
  font-size:11.5px;line-height:1.6;letter-spacing:.05em;color:var(--stone)}
.sn-medida-assinatura::before{content:"";flex:none;width:28px;height:1px;background:rgba(250,246,239,.22)}
.sn-medida-assinatura strong{font-weight:500;color:var(--sand);letter-spacing:.16em}
.sn-medida-assinatura .sem-quebra{white-space:nowrap}
/* no telemovel, e no computador estreito em que a coluna do texto aperta, nao cabe numa linha: a parceria
   fica em cima, a producao por baixo, sem o ponto, e o fio alinha com a primeira linha */
@media(max-width:560px),(min-width:960px) and (max-width:1199px){
  .sn-medida-assinatura{align-items:flex-start;gap:12px}
  .sn-medida-assinatura::before{width:22px;margin-top:.8em}
  .sn-medida-assinatura .sep{display:none}
  .sn-medida-assinatura .sem-quebra{display:block}
}

/* ===== passo410: texteis para hotelaria — cartao "em breve" na pagina inicial e pagina texteis/ ===== */
/* cartao: fotografia escurecida, selo e frase ao centro, por cima do veu (3) e ao nivel do numeral (4) */
.painel-breve .visual .foto{filter:brightness(.42) saturate(.7)}
.painel-breve a:hover .visual .foto,.painel-breve a:focus-visible .visual .foto{filter:brightness(.5) saturate(.8)}
.painel .breve{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:24px;text-align:center}
.painel .breve b{font-weight:500;font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ivory);
  border:1px solid rgba(250,246,239,.45);padding:10px 14px 10px 18px}
.painel .breve i{font-style:normal;font-size:13px;line-height:1.6;color:var(--sand);max-width:30ch;text-wrap:balance}
/* no telemovel o cartao e pequeno: selo e frase descem para a metade de baixo, para nao tocarem no numeral */
@media(max-width:700px){
  .painel .breve{gap:8px;padding:12px 10px 14px;justify-content:flex-end}
  .painel .breve b{font-size:9px;letter-spacing:.24em;padding:7px 9px 7px 12px}
  .painel .breve i{font-size:10.5px;line-height:1.45}
}
/* nos telemoveis mais estreitos a frase nao cabe sem tocar no numeral: fica so o selo, ao centro (a frase
   esta na pagina dos texteis) */
@media(max-width:380px){
  .painel .breve{justify-content:center}
  .painel .breve i{display:none}
}
/* pagina */
.tx{padding-bottom:var(--entre-secoes)}
.tx-topo{display:grid;gap:clamp(40px,5vw,72px);align-items:center}
.tx h1{font-size:clamp(34px,5vw,70px);font-weight:300;line-height:1.04;letter-spacing:-.03em;margin:18px 0 26px;max-width:15ch;
  text-wrap:balance}
.tx-sub{color:var(--sand);font-size:16px;line-height:1.75;max-width:50ch}
.tx-assinatura{display:flex;align-items:center;gap:14px;margin-top:clamp(22px,2.4vw,30px);font-size:12px;
  line-height:1.6;letter-spacing:.05em;color:var(--stone)}
.tx-assinatura::before{content:"";flex:none;width:28px;height:1px;background:rgba(250,246,239,.22)}
.tx-assinatura strong{font-weight:500;color:var(--sand);letter-spacing:.08em}
.tx-assinatura .sem-quebra{white-space:nowrap}
.tx .acoes{margin-top:clamp(30px,3.4vw,42px)}
.tx-foto{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:clamp(10px,1.1vw,16px);
  isolation:isolate;background:#e8e6e2}
.tx-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tx-breve{position:absolute;top:18px;left:18px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ivory);background:rgba(21,18,14,.72);padding:9px 12px 9px 15px}
.tx-gama,.tx-qual{padding:var(--entre-secoes) 0}
.tx-cab{margin:0 auto;text-align:center}
.tx-cab h2{text-wrap:balance}
.tx-cab p{margin:0 auto}
.tx-itens .mp-desc{text-wrap:balance}
.tx-itens .sem-quebra{white-space:nowrap}
.tx-itens{margin-top:clamp(48px,5vw,72px)}
.tx-qual-grelha{display:grid;gap:clamp(40px,5vw,72px);align-items:center}
.tx-foto-2{margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:clamp(10px,1.1vw,16px);isolation:isolate}
.tx-foto-2 img{width:100%;height:100%;object-fit:cover;display:block}
.tx-qual-texto h2{font-size:clamp(26px,3.2vw,44px);font-weight:300;letter-spacing:-.02em;line-height:1.1;margin:14px 0 0}
.tx-pontos{list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0}
.tx-pontos li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;padding:20px 0;
  border-top:1px solid var(--line)}
.tx-pontos .n{grid-row:span 2;font-family:'Fraunces',serif;font-size:18px;line-height:1.2;color:var(--terracotta)}
.tx-pontos b{font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory);line-height:1.6}
.tx-pontos .d{margin-top:6px;font-size:14px;line-height:1.7;color:var(--stone)}
.tx-cta .cta-caminhos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
@media(min-width:960px){
  .tx-topo{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .tx-qual-grelha{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
}
@media(max-width:960px){
  .tx-cta .cta-caminhos{grid-template-columns:1fr;max-width:420px}
}
@media(max-width:560px){
  .tx-assinatura{align-items:flex-start;gap:12px}
  .tx-assinatura::before{width:22px;margin-top:.8em}
  .tx-assinatura .sep{display:none}
  .tx-assinatura .sem-quebra{display:block}
  .tx .acoes{flex-direction:column;align-items:stretch}
  .tx .acoes a{text-align:center}
}

/* ===== passo411: grelhadores — fotografias das duas linhas maiores ===== */
.ln-cena{min-height:clamp(340px,40vw,580px)}
.ln-foto{max-height:clamp(340px,42vw,600px)}
@media(max-width:880px){
  .ln-cena{min-height:clamp(320px,88vw,440px)}
  .ln-foto{max-height:clamp(340px,92vw,460px)}
}

/* ===== passo413: telemovel — cartoes dos produtos sem traco por cima, bolas e etiqueta ao centro, setas
   mais finas, aba do Indice mais estreita (18 px, dentro dos 24 px de margem do contentor) ===== */
@media(max-width:980px){
  .painel{border-top:0}
  .painel .cr-pts{left:0;right:0;margin:0 auto;width:fit-content}
  .painel .cr-rot{left:40px;right:40px;bottom:32px;margin:0 auto;width:fit-content;max-width:none;
    flex-direction:column;align-items:center;row-gap:1px;text-align:center}
  .painel .cr-rot b{font-size:11px;line-height:1.3}
  .painel .cr-rot i{font-size:8px;line-height:1.3}
  .painel .cr-seta{width:20px}
  .painel .cr-seta::before{content:"";position:absolute;top:-7px;bottom:-7px;left:-9px;right:-9px}
  .mob-indice button{width:18px}
  .mob-indice .num{writing-mode:vertical-rl;text-orientation:upright;line-height:1;letter-spacing:-.2em}
}
@media(max-width:700px){
  .painel .cr-rot{left:27px;right:27px;bottom:23px}
  .painel .cr-rot b{font-size:9px}
  .painel .cr-rot i{font-size:7.5px;letter-spacing:.12em}
  .painel .cr-seta{width:15px}
}

/* ===== passo414: telemovel — etiqueta do modelo numa linha (parte so quando nao cabe) e mais pequena;
   setas mais encostadas as bordas da fotografia; a etiqueta, baixa, fica por baixo da altura das setas ===== */
@media(max-width:980px){
  .painel .cr-ant{left:8px}
  .painel .cr-seg{right:8px}
  .painel .cr-rot{left:10px;right:10px;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:baseline;
    column-gap:7px;row-gap:0}
}
@media(max-width:700px){
  .painel .cr-ant{left:4px}
  .painel .cr-seg{right:4px}
  .painel .cr-rot{left:4px;right:4px;bottom:20px;column-gap:5px;padding:2px 6px}
  .painel .cr-rot b{font-size:8px}
  .painel .cr-rot i{font-size:6.5px;letter-spacing:.06em}
}

/* ===== passo415: cabecalho pelo desenho da Sandra — Produtos (seta) · Profissionais · Partners · Sobre Nos;
   Partners sempre em caramelo; letra maior e de peso normal; botao "Falar connosco" quase sem espacamento ===== */
.menu{gap:22px;font-size:16px;font-weight:400;align-items:center}
.menu a{display:inline-flex;align-items:center;gap:7px;color:rgba(250,246,239,.9);transition:color .25s ease,border-color .25s ease}
.menu a:hover,.menu a[aria-current="page"]{color:var(--ivory);border-color:var(--terracotta)}
.menu-folha a[aria-current="page"]{color:var(--ivory)}
.menu a.menu-destaque,.menu-folha a.menu-destaque{color:#D1A47F}
.menu a.menu-destaque:hover,.menu a.menu-destaque[aria-current="page"]{color:#E0BC98}
.menu-cta{font-size:13px;font-weight:400;letter-spacing:.02em;padding:10px 16px;color:rgba(250,246,239,.9);
  border-color:rgba(250,246,239,.34)}
/* paginas Sobre Nos, Profissionais e Partners: ligacoes dentro da lista numerada */
.tx-pontos .d a{color:var(--sand);border-bottom:1px solid rgba(250,246,239,.22);transition:color .25s ease,border-color .25s ease}
.tx-pontos .d a:hover{color:var(--ivory);border-color:var(--terracotta)}

/* ===== passo416: pagina Pergulas — o render 3D leva o selo "Projeto 3D" (o mesmo do "Em breve" dos Texteis) ===== */
.tx-foto-2{position:relative}
.tx-foto .tx-breve,.tx-foto-2 .tx-breve{z-index:1}

/* ===== passo418: cabecalho dos produtos com a mesma letra do "Cada detalhe pensado" (.manifesto h2 e p) ===== */
.indice h2{font-size:clamp(28px,4.4vw,62px);line-height:1.12;letter-spacing:-.02em}
.indice .sub{font-size:17px;line-height:1.8;max-width:56ch;margin-top:32px}
.indice-full{row-gap:32px}
@media(max-width:560px){
  .indice .sub{font-size:15px;line-height:1.75;margin-top:26px}
  .indice-full{row-gap:26px}
}

/* ===== passo419: "Falar connosco" do cabecalho com o realce do botao simples (contorno laranja, sem fundo) ===== */
.menu-cta{transition:border-color .3s var(--ease),color .3s var(--ease)}
.menu-cta:hover,.menu-cta:focus-visible{background:transparent;border-color:var(--terracotta);color:var(--ivory)}

/* ===== passo421: convite final com mais ar — e o fim da pagina ===== */
.cta-band{padding:clamp(88px,9vw,132px) 0 clamp(96px,10vw,148px)}
.cta-band h2{margin-bottom:28px}
.cta-sub{margin-bottom:56px}
@media(max-width:560px){.cta-sub{margin-bottom:44px}}

/* ===== passo422: VULKANA Partners — seccao da pagina inicial (texto + fotografia com a placa VULKANA Pioneers),
   pagina do programa (parceiros/) e marcas parceiras na Sobre Nos com a fotografia a direita ===== */
.vp{position:relative;padding:var(--entre-secoes) 0;
  background:radial-gradient(38% 52% at 74% 58%,rgba(231,85,30,.09),transparent 72%)}
.vp-grelha{display:grid;gap:clamp(48px,6vw,104px);align-items:center}
.vp-texto h2{font-size:clamp(32px,4.4vw,62px);font-weight:300;line-height:1.08;letter-spacing:-.02em;margin:18px 0 0}
.vp-texto h2 span,.vp-texto h2 em{display:block}
.vp-sub{margin:28px 0 0;max-width:42ch;font-size:17px;line-height:1.8;color:var(--stone)}
.vp-pontos{list-style:none;margin:40px 0 0;padding:0;max-width:420px}
.vp-pontos li{display:flex;align-items:center;gap:16px;padding:15px 0;border-top:1px solid var(--line);
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ivory);line-height:1.5}
.vp-pontos li:last-child{border-bottom:1px solid var(--line)}
.vp-pontos li::before{content:"";flex:none;width:18px;height:1px;background:var(--terracotta)}
.vp-acoes{margin-top:44px}
.vp-visual{position:relative}
.vp-foto{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;border-radius:clamp(10px,1.1vw,16px);isolation:isolate}
.vp-foto img{width:100%;height:100%;object-fit:cover;display:block}
.vp-foto::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(21,18,14,0) 55%,rgba(21,18,14,.55) 100%)}
.vp-pioneers{position:absolute;left:clamp(-72px,-4.5vw,-40px);bottom:clamp(28px,3vw,44px);z-index:2;
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:center;
  width:min(400px,86%);padding:22px 26px;background:rgba(21,18,14,.88);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-left:2px solid var(--terracotta)}
.vp-pion-num{font-family:'Fraunces',serif;font-style:italic;font-weight:300;font-size:clamp(46px,4.4vw,60px);
  line-height:.9;color:var(--terracotta);letter-spacing:-.02em}
.vp-pion-txt{margin:0}
.vp-pion-txt b{display:block;font-weight:500;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ivory)}
.vp-pion-txt span{display:block;margin-top:8px;font-size:13px;line-height:1.65;color:var(--sand)}
@media(min-width:960px){
  .vp-grelha{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
}
@media(max-width:959px){
  .vp-foto{aspect-ratio:4/3}
  .vp-pioneers{position:relative;left:auto;bottom:auto;width:auto;margin:-44px 16px 0}
}
@media(max-width:560px){
  .vp-sub{font-size:15px;line-height:1.75;margin-top:22px}
  .vp-pontos{margin-top:32px}
  .vp-acoes .btn-ghost{display:block;text-align:center}
  .vp-foto{aspect-ratio:1/1}
  .vp-pioneers{grid-template-columns:1fr;row-gap:10px;padding:20px 22px;margin:-36px 12px 0}
  .vp-pion-num{font-size:44px}
}
/* Sobre Nos: a seccao das marcas leva a fotografia a direita */
@media(min-width:960px){
  .tx-qual-inv .tx-qual-grelha{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .tx-qual-inv .tx-foto-2{order:2}
}
/* os campos dos outros separadores escondem-se mesmo com o display das classes ct-par / ct-campo */
.ct-form [hidden]{display:none !important}
/* projetos */
.vp-proj{display:grid;gap:clamp(32px,5vw,80px);align-items:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(40px,5vw,64px) 0}
.vp-proj-acoes{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.vp-proj-acoes a{text-align:center}
@media(min-width:960px){
  .vp-proj{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
}

/* ===== passo425: pagina VULKANA Partners revista (percurso, escada de cartoes, Diamond, escolha dinheiro/credito,
   Pioneers com cartao numerado, criadores, profissionais, area de parceiro em pre-visualizacao, termos) ===== */
.vp-pion-lista{list-style:none;margin:clamp(28px,3vw,40px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(20px,2.6vw,40px)}
.vp-pion-lista li{display:grid;grid-template-columns:34px minmax(0,1fr);column-gap:8px;padding:14px 0;border-top:1px solid var(--line);
  font-size:14px;line-height:1.6;color:var(--sand)}
.vp-pion-lista .n{font-family:'Fraunces',serif;font-size:14px;line-height:1.6;color:var(--terracotta)}
@media(max-width:760px){
  .vp-pion-lista{grid-template-columns:1fr}
}

/* ===== passo426: pagina dos jacuzzis — o video no lugar da fotografia do ritual, as fotografias das duas linhas
   (nao sao recortes como as dos Kamado) e a nota por baixo da tabela ===== */
.sn-ritual-video .sn-ritual-vidro{min-height:clamp(520px,84vh,900px)}
/* a agua e a pessoa estao na metade de baixo do video: o veu escurece mais tarde do que nas fotografias */
.sn-ritual-video .sn-ritual-veu{background:linear-gradient(to bottom,
    rgba(21,18,14,.22) 0%,rgba(21,18,14,0) 20%,rgba(21,18,14,0) 52%,
    rgba(21,18,14,.74) 72%,rgba(21,18,14,.93) 88%,rgba(21,18,14,.97) 100%)}
.jc-video{background:var(--basalt-2)}
.jc-linhas .ln-foto{border-radius:clamp(10px,1.1vw,16px);object-fit:cover;aspect-ratio:4/5}
.jc-nota{margin-top:22px;font-size:13px;line-height:1.7;color:var(--stone)}
@media(max-width:900px){
  .sn-ritual-video .jc-video{object-position:60% center}
  .sn-ritual-video .sn-ritual-veu{background:linear-gradient(to bottom,
    rgba(21,18,14,.18) 0%,rgba(21,18,14,0) 16%,rgba(21,18,14,.10) 34%,
    rgba(21,18,14,.90) 52%,rgba(21,18,14,.96) 70%,rgba(21,18,14,.97) 100%)}
}

/* ===== passo427: VULKANA Partners — criterios e beneficios nos cartoes dos niveis, regras por cima da escada,
   seccao VULKANA PIONEERS (os primeiros 50) com o cartao numerado em destaque ===== */
/* simulador: painel proprio, a toda a largura, logo a seguir aos niveis */
#simulador{scroll-margin-top:96px}

/* passo430: Partners do menu e botao da pagina inicial sem ligacao (por agora) */
.menu a:not([href]),.menu-folha a:not([href]),.btn-ghost:not([href]){cursor:default}

/* passo435: VULKANA Partners — versao B (Explorar) aprovada pela Sandra a 20.10.2026.
   Classes com o prefixo pt- e regras de elementos dentro de main.ptn: nada daqui toca no resto do site. */
.ptn{--basalt:#15120E;--b2:#1E1A15;--b3:#2A241C;--terra:#E7551E;--stone:#8C8375;--sand:#E3D8C6;--ivory:#FAF6EF;
  --ease:cubic-bezier(.16,.84,.44,1);--topo:77px;--doca:64px}
.pt-esc{--bg:var(--basalt);--fg:var(--ivory);--txt:rgba(227,216,198,.8);--fraco:rgba(227,216,198,.62);--line:rgba(250,246,239,.14);
  --card:var(--b2);--ac:var(--terra);--sob:var(--sand);--emc:var(--terra)}
.pt-claro{--bg:#F3ECE1;--fg:#15120E;--txt:rgba(21,18,14,.78);--fraco:rgba(21,18,14,.6);--line:rgba(21,18,14,.14);
  --card:#FBF8F2;--ac:#B8431A;--sob:#3A3128;--emc:#C94A19}
:where(.ptn) [hidden]{display:none!important}
html.pt-travado{overflow:hidden}
:where(.ptn) img{display:block;max-width:100%}
:where(.ptn) input,:where(.ptn) select,:where(.ptn) textarea{margin:0;max-width:none}
:where(.ptn) input[type=checkbox]{padding:0;border:0}
:where(.ptn) a{color:inherit;text-decoration:none}
:where(.ptn,.fq) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation;text-align:inherit}
:where(.ptn) :focus-visible{outline:2px solid var(--terra);outline-offset:3px}
:where(.ptn) h1,:where(.ptn) h2,:where(.ptn) h3{font-family:'Fraunces',serif;font-weight:300;line-height:1.08;letter-spacing:-.015em}
:where(.ptn) em{font-style:italic;color:var(--emc,var(--terra))}
.pt-wrap{--g:clamp(20px,4vw,56px);max-width:1240px;margin:0 auto;padding:0 var(--g)}
.pt-eyebrow{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--ac);font-weight:500}
.pt-sec{background:var(--bg);color:var(--fg);padding:clamp(72px,9vw,124px) 0}
.pt-cab{max-width:62ch}
.pt-cab h2{font-size:clamp(32px,4.4vw,56px);margin-top:14px}
.pt-cab p:not(.pt-eyebrow){margin-top:16px;font-size:16.5px;line-height:1.75;font-weight:400;color:var(--txt)}
.pt-nota{font-size:14px;line-height:1.7;font-weight:400;color:var(--fraco)}
.pt-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:40px;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;transition:transform .2s,background .3s}
.pt-btn:active{transform:scale(.97)}
.pt-btn-p{background:var(--terra);color:var(--basalt)}
.pt-btn-g{border:1px solid var(--line);color:var(--fg,var(--ivory))}
.pt-selo{font-family:'DejaVu Sans',system-ui,sans-serif;display:inline-block;padding:3px 9px 2px;border:1px solid currentColor;border-radius:20px;font-size:9.5px;font-style:normal;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ac);white-space:nowrap;vertical-align:2px;font-weight:500}
.pt-fila{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0 calc(-1 * var(--g));padding:0 var(--g);scroll-padding:0 var(--g)}
.pt-fila::-webkit-scrollbar{display:none}
.pt-fila>*{scroll-snap-align:start;flex:none}
.pt-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.js-reveal .pt-rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js-reveal .pt-rv.pt-on{opacity:1;transform:none}
.pt-dica{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fraco)}
.pt-dica::before{content:"";width:22px;height:1px;background:var(--ac)}
@media(prefers-reduced-motion:reduce){:where(.ptn) *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
.js-reveal .pt-rv{opacity:1;transform:none}}
.pt-doca{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:55;height:var(--doca);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) auto;align-items:center;gap:2px;padding:6px;
  background:rgba(24,20,16,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(250,246,239,.12);
  border-radius:22px;box-shadow:0 18px 40px -16px rgba(0,0,0,.7);transition:transform .4s var(--ease),opacity .3s}
.pt-doca.pt-fora{transform:translateY(calc(100% + 24px));opacity:0}
.pt-doca a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;border-radius:16px;color:rgba(227,216,198,.7);
  font-size:9.5px;letter-spacing:.04em;transition:color .3s,background .3s}
.pt-doca a svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.4}
.pt-doca a.pt-at{color:var(--ivory);background:rgba(250,246,239,.07)}
.pt-doca a.pt-at svg{stroke:var(--terra)}
.pt-doca .pt-doca-cta{flex-direction:row;padding:0 14px;background:var(--terra);color:var(--basalt);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.pt-doca .pt-doca-cta.pt-at{background:var(--ivory);color:var(--basalt)}
body.pt-escrever .pt-doca{transform:translateY(calc(100% + 24px));opacity:0}
@media(max-width:1099px){body.pt-pagina{padding-bottom:calc(64px + 20px + env(safe-area-inset-bottom))}}
@media(min-width:1100px){.pt-doca{display:none}}
@media(max-width:360px){.pt-doca{grid-template-columns:repeat(3,minmax(0,1fr)) auto}
.pt-doca a:first-child{display:none}
.pt-doca .pt-doca-cta{padding:0 12px;font-size:10px}}
.pt-gaveta{position:fixed;inset:0;z-index:110;visibility:hidden;transition:visibility 0s .45s}
.pt-gaveta.pt-ab{visibility:visible;transition-delay:0s}
.pt-g-veu{position:absolute;inset:0;background:rgba(8,6,4,.6);opacity:0;transition:opacity .35s}
.pt-gaveta.pt-ab .pt-g-veu{opacity:1}
.pt-g-corpo{position:absolute;left:0;right:0;bottom:0;max-height:90vh;max-height:90dvh;display:flex;flex-direction:column;
  border-radius:22px 22px 0 0;transform:translateY(100%);transition:transform .45s var(--ease);box-shadow:0 -20px 60px -20px rgba(0,0,0,.6)}
.pt-gaveta.pt-ab .pt-g-corpo{transform:none}
.pt-g-topo{position:relative;flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 12px 0 20px;touch-action:none;cursor:grab}
.pt-g-topo .pt-pega{position:absolute;left:50%;top:8px;width:44px;height:5px;margin-left:-22px;border-radius:3px;background:var(--line)}
.pt-g-topo span.pt-eyebrow{padding-top:8px}
.pt-g-x{flex:none;width:44px;height:44px;border-radius:50%;font-size:24px;line-height:1;color:var(--fg);display:grid;place-items:center}
.pt-g-rolo{overflow:auto;overscroll-behavior:contain;padding:8px 20px calc(28px + env(safe-area-inset-bottom))}
@media(min-width:900px){.pt-g-corpo{left:auto;top:0;width:min(660px,92vw);max-height:none;border-radius:22px 0 0 22px;transform:translateX(100%)}
.pt-g-topo{cursor:default;padding:16px 16px 0 36px}
.pt-g-topo .pt-pega{display:none}
.pt-g-rolo{padding:12px 36px 40px}}
.pt-heroi{background:var(--basalt);padding-bottom:clamp(56px,7vw,96px)}
.pt-heroi-foto{position:relative;height:min(74vh,720px);min-height:420px;overflow:hidden}
.pt-heroi-foto img{position:absolute;inset:-6% 0 0;width:100%;height:106%;object-fit:cover;will-change:transform}
.pt-heroi-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,18,14,.15) 0%,rgba(21,18,14,0) 30%,rgba(21,18,14,.55) 66%,#15120E 100%)}
.pt-heroi-foto .pt-selo{position:absolute;right:clamp(20px,4vw,56px);top:16px;z-index:2;background:rgba(21,18,14,.6);color:var(--sand);border-color:rgba(227,216,198,.5)}
.pt-heroi-tit{position:absolute;left:0;right:0;bottom:clamp(16px,3vw,40px);z-index:2}
.pt-heroi h1{font-size:clamp(44px,8vw,108px);margin-top:14px;max-width:14ch}
.pt-heroi-corpo{display:grid;gap:28px;margin-top:clamp(20px,3vw,36px)}
.pt-heroi .pt-sub{max-width:60ch;font-size:17px;line-height:1.75;font-weight:400;color:rgba(227,216,198,.82)}
.pt-pontos{list-style:none}
/* passo437: cartoes do topo com titulo (numero, titulo, texto) e uma nota por baixo */
.pt-pontos li{width:74%;max-width:290px;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;padding:18px 18px 20px;
  border:1px solid rgba(250,246,239,.14);border-radius:16px;background:var(--b2);font-size:14.5px;line-height:1.45;font-weight:400;color:var(--sand)}
.pt-pontos li span{font-family:'Fraunces',serif;font-size:18px;line-height:1;color:var(--terra);margin-bottom:10px}
.pt-pontos li b{font-size:12px;line-height:1.45;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--ivory)}
.pt-pontos li .pt-ast{font-style:normal;color:var(--terra);margin-left:2px}
.pt-pontos li p{font-size:14px;line-height:1.6;color:rgba(227,216,198,.78)}
.pt-heroi .pt-pontos-nota{margin-top:-12px;max-width:88ch;font-size:13px;line-height:1.65}
.pt-acoes{display:flex;flex-wrap:wrap;gap:12px}
.pt-heroi .pt-nota b{color:var(--sand);font-weight:500}
@media(min-width:900px){.pt-pontos{display:grid;grid-template-columns:repeat(4,1fr);overflow:visible;margin:0;padding:0}
.pt-pontos li{width:auto;max-width:none}}
.pt-baralho{display:grid;margin-top:clamp(36px,4vw,56px);padding-bottom:30px}
.pt-carta{grid-area:1/1;position:relative;display:flex;flex-direction:column;min-height:300px;padding:clamp(24px,3vw,36px);border-radius:22px;overflow:hidden;
  transform:translateY(calc(var(--k,0) * 15px)) scale(calc(1 - var(--k,0) * .05));z-index:calc(10 - var(--k,0));
  transition:transform .5s var(--ease),opacity .4s;touch-action:pan-y;user-select:none;-webkit-user-select:none;box-shadow:0 22px 48px -26px rgba(21,18,14,.55)}
.pt-carta.pt-arrasta{transition:none;cursor:grabbing}
.pt-carta:nth-child(1){background:#FBF8F2;color:var(--basalt)}
/* passo438: Member branco, Pioneers terracota (o destaque da fase inicial), Expansao preto */
.pt-carta:nth-child(2){background:var(--terra);color:var(--basalt);box-shadow:0 26px 54px -24px rgba(231,85,30,.55)}
.pt-carta:nth-child(3){background:var(--basalt);color:var(--ivory)}
.pt-carta .pt-rom{position:absolute;right:18px;bottom:-30px;font-family:'Fraunces',serif;font-style:normal;font-size:150px;line-height:1;opacity:.1;pointer-events:none}
.pt-carta .pt-et{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;color:#B8431A}
.pt-carta:nth-child(2) .pt-et{color:var(--basalt)}
.pt-carta:nth-child(3) .pt-et{color:var(--terra)}
.pt-carta h3{font-size:clamp(28px,3.2vw,38px);margin-top:14px;max-width:14ch}
.pt-carta p{margin-top:auto;padding-top:22px;font-size:15.5px;line-height:1.65;font-weight:400;max-width:44ch;opacity:.85}
.pt-baralho-ctl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px}
.pt-baralho-ctl button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);font-size:18px;color:var(--fg)}
.pt-baralho-ctl span{font-family:'Fraunces',serif;font-size:18px;color:var(--fg)}
.pt-baralho-ctl span small{font-size:14px;color:var(--fraco)}
/* passo438: a nota sem caixa, so com um fio a esquerda */
.pt-sec-nota{margin-top:24px;max-width:72ch;padding:2px 0 2px 14px;border-left:1px solid var(--ac);font-size:13.5px;line-height:1.65}
@media(min-width:900px){.pt-baralho{grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:0}
.pt-carta{grid-area:auto;transform:none!important;min-height:340px}
.pt-baralho-ctl,.pt-baralho+.pt-dica{display:none}}
.pt-fita{margin-top:clamp(32px,4vw,52px)}
.pt-fita figure{position:relative;width:82%;max-width:420px;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:var(--b3)}
.pt-fita img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
/* passo439: as tres fotografias com o mesmo tratamento; o Kamado (fim de tarde) um pouco menos quente */
.pt-fita img{filter:saturate(.9) brightness(.95)}
.pt-fita .pt-f-kamado img{filter:saturate(.78) brightness(.93) contrast(1.03)}
.pt-fita figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:flex-end;padding:40px 16px 16px;
  background:linear-gradient(180deg,rgba(21,18,14,0),rgba(21,18,14,.8));font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ivory)}
.pt-fita figcaption span{font-family:'Fraunces',serif;font-size:14px;letter-spacing:0;color:var(--sand)}
.pt-fita-pe{display:flex;align-items:center;justify-content:space-between;margin-top:14px}
.pt-barrinha{flex:1;max-width:160px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.pt-barrinha i{display:block;height:100%;width:33.3%;background:var(--terra);transition:transform .3s}
/* passo439: criterios numa linha por baixo das fotografias (a partir de 1100px); frase centrada e nota */
.pt-crit{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:22px;text-align:center}
.pt-crit-rot{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);font-weight:500}
.pt-criterios{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.pt-criterios li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:30px;font-size:12.5px;line-height:1.3;font-weight:400;color:rgba(227,216,198,.82)}
.pt-criterios li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--terra)}
.pt-visao{max-width:62ch;margin:clamp(32px,3.4vw,44px) auto 0;text-align:center}
.pt-prod-nota{max-width:64ch;margin:16px auto 0;font-size:13px;line-height:1.65}
@media(min-width:1100px){.pt-crit{flex-direction:row;justify-content:space-between;gap:20px;text-align:left}
  .pt-crit-rot{flex:none}.pt-criterios{flex:1;flex-wrap:nowrap;justify-content:space-between;gap:10px}}
.pt-sub-tit{margin-top:28px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ac);font-weight:500}
.pt-mais{font-family:'Fraunces',serif;font-size:clamp(20px,2vw,25px);line-height:1.5;color:var(--fg)}
@media(min-width:900px){.pt-fita{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:14px;overflow:visible;margin:clamp(32px,4vw,52px) 0 0;padding:0}
.pt-fita figure{width:auto;max-width:none;aspect-ratio:auto;height:400px}
.pt-fita-pe{display:none}}
.pt-como-g{display:grid;gap:clamp(36px,5vw,72px)}
.pt-tl{position:relative;list-style:none;padding-left:56px}
.pt-tl::before,.pt-tl-fill{content:"";position:absolute;left:21px;top:22px;width:2px;background:var(--line);bottom:22px}
.pt-tl-fill{background:var(--ac);bottom:auto;height:0}
.pt-tl li{position:relative;padding:4px 0 clamp(32px,4vw,48px)}
.pt-tl li:last-child{padding-bottom:0}
.pt-tl-n{position:absolute;left:-56px;top:0;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--bg);
  font-family:'Fraunces',serif;font-size:16px;color:var(--fraco);transition:.4s var(--ease)}
.pt-tl li.pt-on .pt-tl-n{background:var(--ac);border-color:var(--ac);color:var(--ivory);transform:scale(1.08)}
.pt-tl h3{font-size:clamp(26px,3vw,36px);padding-top:4px}
.pt-tl p{margin-top:10px;max-width:56ch;font-size:16px;line-height:1.7;font-weight:400;color:var(--txt)}
/* passo440: o quarto passo, a recompensa, em terracota; menos espaco vazio a esquerda */
.pt-tl li.pt-tl-fim .pt-tl-n{border-color:var(--terra);color:var(--terra)}
.pt-tl li.pt-tl-fim.pt-on .pt-tl-n{background:var(--terra);border-color:var(--terra);color:var(--basalt);box-shadow:0 0 0 6px rgba(231,85,30,.16)}
.pt-tl li.pt-tl-fim h3{color:var(--terra)}
.pt-tl li.pt-tl-fim p{color:var(--sob)}
@media(min-width:900px){.pt-como-g{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(36px,4vw,56px)}
.pt-como-g .pt-cab h2{font-size:clamp(32px,3.6vw,48px)}
.pt-como-g .pt-cab{position:sticky;top:calc(var(--topo) + 40px);align-self:start}}
/* passo441: tres notas positivas, com titulo e texto curto, da mesma altura */
.pt-regras{list-style:none;display:grid;gap:10px;margin-top:28px}
.pt-regras li{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid var(--line);border-radius:14px}
.pt-regras li b{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-weight:400;font-size:17px;line-height:1.3;color:var(--ivory)}
.pt-regras li b::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--terra)}
.pt-regras li span{font-size:14px;line-height:1.55;font-weight:400;color:var(--sob)}
@media(min-width:900px){.pt-regras{grid-template-columns:repeat(3,1fr)}}
.pt-trilha{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:clamp(36px,4vw,56px)}
.pt-trilha::before,.pt-trilha i.pt-fill{content:"";position:absolute;left:calc(100%/12);right:calc(100%/12);top:21px;height:2px;background:var(--line)}
.pt-trilha i.pt-fill{background:var(--terra);right:auto;width:0;transition:width .5s var(--ease)}
.pt-trilha button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:72px;padding-top:12px}
.pt-trilha button .pt-pt{width:20px;height:20px;border-radius:50%;background:var(--b2);border:2px solid var(--stone);transition:.35s var(--ease)}
.pt-trilha button.pt-feito .pt-pt{border-color:var(--terra);background:var(--terra)}
.pt-trilha button.pt-at .pt-pt{border-color:var(--m);background:var(--m);box-shadow:0 0 0 5px rgba(231,85,30,.25);transform:scale(1.2)}
.pt-trilha button span{font-size:10.5px;letter-spacing:.06em;color:var(--fraco);white-space:nowrap}
.pt-trilha button.pt-at span{color:var(--ivory)}
@media(max-width:420px){.pt-trilha button span{font-size:9px;letter-spacing:0}
.pt-trilha button:not(.pt-at) span{opacity:.7}}
/* passo441: o carrossel deixa centrar todos os cartoes (tambem o primeiro e o ultimo); a largura e a de antes */
.pt-nvs{--cw:min(440px,calc((100vw - 2 * var(--g)) * .86));margin-top:16px;align-items:stretch;
  padding-left:calc(50% + var(--g) - var(--cw) / 2);padding-right:calc(50% + var(--g) - var(--cw) / 2);scroll-padding:0}
.pt-nvc{width:var(--cw);max-width:none;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;background:var(--b2);overflow:hidden;
  scroll-snap-align:center!important;transition:border-color .3s,opacity .3s}
.pt-nvc:not(.pt-at){opacity:.62}
.pt-nvc.pt-at{border-color:rgba(231,85,30,.6)}
.pt-nvc-cab{padding:20px 22px 18px;background:linear-gradient(135deg,color-mix(in srgb,var(--m) 22%,transparent),transparent 70%);border-bottom:1px solid var(--line)}
.pt-nvc-cab .pt-nm{display:flex;align-items:center;gap:10px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);font-weight:500}
.pt-nvc-cab .pt-nm i{width:12px;height:12px;border-radius:50%;background:var(--m)}
.pt-nvc-cab h3{font-size:clamp(34px,4vw,46px);margin-top:8px}
.pt-tx{display:flex;gap:24px;margin-top:14px}
.pt-tx div{display:flex;flex-direction:column}
.pt-tx strong{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(40px,5vw,54px);line-height:1;color:var(--ivory)}
.pt-tx div+div strong{color:var(--terra)}
.pt-tx small{margin-top:6px;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fraco)}
/* passo441: o corpo em tres zonas (acesso; destaque e beneficios; nota) e o espaco que sobra dividido por igual entre elas */
.pt-nvc-corpo{flex:1;padding:18px 22px 16px;display:flex;flex-direction:column}
.pt-nv-esp{flex:1 1 0;min-height:12px}
.pt-nv-meio{display:flex;flex-direction:column;gap:14px}
.pt-rot-l{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pt-acum{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(231,85,30,.9);text-align:right}
/* passo441: faixa do proximo nivel, no fundo de cada cartao */
.pt-prox{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:11px 22px 12px;border-top:1px solid var(--line);background:rgba(250,246,239,.025)}
.pt-prox-l{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;font-size:13px;line-height:1.45;color:var(--sand)}
.pt-prox-l i{flex:none;align-self:center;width:8px;height:8px;border-radius:50%;background:var(--m2)}
.pt-prox-l b{font-family:'Fraunces',serif;font-weight:400;font-size:16px;color:var(--ivory)}
.pt-rot{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--stone)}
.pt-nvc-corpo p,.pt-nvc-corpo li{font-size:14.5px;line-height:1.55;font-weight:400;color:var(--sand)}
.pt-nvc-corpo p{margin-top:6px}
.pt-nvc-corpo p strong{font-family:'Fraunces',serif;font-weight:400;font-size:19px;color:var(--ivory)}
.pt-nvc-corpo ul{list-style:none;margin-top:6px}
.pt-nvc-corpo li{position:relative;padding:4px 0 4px 18px}
.pt-nvc-corpo li::before{content:"";position:absolute;left:0;top:.95em;width:9px;height:1px;background:var(--m)}
.pt-dest{padding:14px;border:1px solid rgba(231,85,30,.45);border-radius:12px;background:rgba(231,85,30,.08)}
.pt-dest b{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);font-weight:500}
.pt-dest span{display:block;margin-top:6px;font-size:14px;line-height:1.5;font-weight:400;color:var(--ivory)}
.pt-dest small{display:block;margin-top:6px;font-size:12px;color:var(--fraco)}
.pt-nvc .pt-nt{margin-top:0;font-size:12.5px;line-height:1.55;color:var(--fraco)}
/* passo441: Diamond com um acabamento prateado discreto; o contorno do cartao escolhido continua terracota */
.pt-nvc-diam{background:linear-gradient(170deg,#25272a 0%,var(--b2) 42%);border-color:rgba(220,227,230,.22)}
.pt-nvc-diam .pt-nvc-cab{position:relative;background:linear-gradient(125deg,rgba(220,227,230,.2),rgba(220,227,230,.05) 55%,transparent 82%)}
.pt-nvc-diam .pt-nvc-cab::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(236,241,243,.7),transparent)}
.pt-nvc-diam .pt-nm i{width:9px;height:9px;margin:0 2px 0 1px;border-radius:1px;transform:rotate(45deg);background:linear-gradient(135deg,#F4F7F8,#A9B3B8)}
.pt-nvc-diam h3{background:linear-gradient(100deg,#F7F9FA 0%,#C9D1D5 40%,#F7F9FA 58%,#AFB9BE 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pt-nvc-diam .pt-lema{margin-top:6px;font-size:20px;color:#E9EEF0}
.pt-diam-c{margin-top:10px;font-size:10px;line-height:1.5;letter-spacing:.16em;text-transform:uppercase;color:#C3CBCF}
.pt-nvc-diam .pt-nv-ac small{display:block;margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--fraco)}
.pt-nvc-corpo .pt-diam-i{margin-top:0;color:var(--ivory)}
.pt-nvs-pe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.pt-setas{display:flex;gap:8px}
.pt-setas button{width:48px;height:48px;border-radius:50%;border:1px solid var(--line);font-size:18px;color:var(--ivory)}
.pt-setas button:disabled{opacity:.3}
.pt-calc{margin-top:clamp(36px,4vw,56px);padding:clamp(20px,3vw,40px);border-radius:24px;background:var(--ivory);color:var(--basalt);scroll-margin-top:calc(var(--topo) + 16px);
  --line:rgba(21,18,14,.14)}
.pt-calc-cab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;align-items:baseline}
.pt-calc-cab .pt-eyebrow{color:#B8431A}
.pt-calc-cab p{font-size:14.5px;line-height:1.55;color:rgba(21,18,14,.72);font-weight:400;max-width:52ch}
.pt-calc-g{display:grid;gap:clamp(24px,3vw,48px);margin-top:20px}
.pt-calc-g>div{min-width:0}
@media(min-width:900px){.pt-calc-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pt-campo span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(21,18,14,.7);font-weight:500}
.pt-campo .pt-num{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--line)}
.pt-campo input{flex:1;min-width:0;padding:10px 0;background:transparent;border:0;color:var(--basalt);font:inherit;font-family:'Fraunces',serif;font-size:clamp(34px,5vw,48px);font-weight:300;
  -webkit-appearance:none;appearance:none;-moz-appearance:textfield}
.pt-campo input::-webkit-inner-spin-button{-webkit-appearance:none}
.pt-campo .pt-num em{font-style:normal;font-family:'Fraunces',serif;font-size:28px;color:rgba(21,18,14,.5)}
.pt-campo input:focus{outline:none}
.pt-campo .pt-num:focus-within{border-bottom-color:var(--terra)}
:where(.ptn) input[type=range]{-webkit-appearance:none;appearance:none;width:100%;max-width:none;height:44px;background:transparent;margin-top:10px;--p:33.3%;cursor:pointer;touch-action:pan-y;padding:0;border:0}
:where(.ptn) input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--terra) var(--p),rgba(21,18,14,.14) var(--p))}
:where(.ptn) input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:rgba(21,18,14,.14)}
:where(.ptn) input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--terra)}
:where(.ptn) input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;box-sizing:border-box;width:32px;height:32px;margin-top:-13px;border-radius:50%;background:var(--ivory);border:8px solid var(--terra);box-shadow:0 6px 16px rgba(231,85,30,.4)}
:where(.ptn) input[type=range]::-moz-range-thumb{box-sizing:border-box;width:32px;height:32px;border-radius:50%;background:var(--ivory);border:8px solid var(--terra)}
.pt-escala{display:flex;justify-content:space-between;font-size:11.5px;color:rgba(21,18,14,.58)}
@media(max-width:360px){.pt-escala{font-size:10px}}
.pt-seg-rot{margin-top:22px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(21,18,14,.7);font-weight:500}
.pt-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:10px}
@media(min-width:430px){.pt-seg{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:429px){.pt-seg button{flex-wrap:wrap;align-content:center;row-gap:2px;padding:6px 10px;min-height:54px}
.pt-seg button small{flex-basis:100%;margin-left:18px}}
.pt-seg button{display:flex;align-items:center;gap:8px;min-width:0;min-height:48px;padding:0 12px;border:1px solid var(--line);border-radius:12px;font-size:13.5px;font-weight:400;color:var(--basalt)}
.pt-seg button i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--m);box-shadow:inset 0 0 0 1px rgba(21,18,14,.25)}
.pt-seg button small{margin-left:auto;font-size:12px;color:rgba(21,18,14,.55)}
.pt-seg button.pt-at{border-color:var(--basalt);background:var(--basalt);color:var(--ivory)}
.pt-seg button.pt-at small{color:var(--terra)}
@media(min-width:600px) and (max-width:899px){.pt-seg{grid-template-columns:repeat(6,1fr)}
.pt-seg button{flex-direction:column;justify-content:center;gap:4px;padding:6px 4px;min-height:64px}
.pt-seg button small{margin:0}}
.pt-res{display:grid;gap:10px}
.pt-res-l{padding:18px;border-radius:16px;background:var(--basalt);color:var(--ivory)}
.pt-res-l+.pt-res-l{background:#2A1C14}
.pt-res-l dt{display:flex;justify-content:space-between;gap:10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.pt-res-l dt small{font-family:'Fraunces',serif;font-size:16px;letter-spacing:0;text-transform:none;color:var(--fraco,rgba(227,216,198,.62))}
.pt-res-l dd{margin-top:10px;font-family:'Fraunces',serif;font-weight:300;font-size:clamp(38px,5vw,56px);line-height:1;color:var(--ivory);white-space:nowrap}
.pt-res-l+.pt-res-l dd{color:var(--terra)}
.pt-res-l .pt-bar{height:4px;margin-top:14px;border-radius:4px;background:rgba(250,246,239,.12);overflow:hidden}
.pt-res-l .pt-bar i{display:block;height:100%;background:var(--sand);transition:width .5s var(--ease)}
.pt-res-l+.pt-res-l .pt-bar i{background:var(--terra)}
.pt-res-diam{padding:22px;border-radius:16px;background:var(--basalt);color:var(--ivory)}
.pt-res-diam p{font-family:'Fraunces',serif;font-size:21px;line-height:1.4;margin-bottom:14px}
.pt-res-diam a{display:inline-flex;align-items:center;min-height:44px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);border-bottom:1px solid var(--terra)}
.pt-formula{margin-top:22px;font-size:14px;color:rgba(21,18,14,.78);font-weight:400}
.pt-calc .pt-nota{margin-top:8px;color:rgba(21,18,14,.6)}
:where(.ptn) details.pt-mi{margin-top:22px;border-top:1px solid var(--line)}
:where(.ptn) details.pt-mi summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:54px;cursor:pointer;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sob)}
:where(.ptn) details.pt-mi summary::-webkit-details-marker{display:none}
:where(.ptn) details.pt-mi summary::after{content:"+";font-size:20px;color:var(--terra);transition:transform .3s}
:where(.ptn) details.pt-mi[open] summary::after{transform:rotate(45deg)}
:where(.ptn) details.pt-mi>p{padding-bottom:16px}
.pt-duo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}
.pt-op{position:relative;display:flex;flex-direction:column;gap:6px;min-height:150px;padding:18px;border:1px solid var(--line);border-radius:20px;background:var(--card);
  transition:border-color .3s,background .3s,transform .3s var(--ease)}
.pt-op .pt-ot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sob);font-weight:500}
.pt-op .pt-ot i{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);transition:.3s}
.pt-op strong{margin-top:auto;font-family:'Fraunces',serif;font-weight:300;font-size:clamp(34px,6vw,58px);line-height:1;color:var(--fg);white-space:nowrap}
.pt-op small{font-size:12.5px;color:var(--fraco)}
.pt-op.pt-at{border-color:var(--basalt);background:var(--basalt);color:var(--ivory);transform:translateY(-4px)}
.pt-op.pt-at .pt-ot{color:var(--sand)}
.pt-op.pt-at strong{color:var(--terra)}
.pt-op.pt-at small{color:rgba(227,216,198,.65)}
.pt-op.pt-at .pt-ot i{border-color:var(--terra);background:var(--terra);box-shadow:inset 0 0 0 4px var(--basalt)}
.pt-duo-base{margin-top:14px;font-size:13.5px;color:var(--fraco)}
.pt-duo-base b{font-weight:500;color:var(--sob)}
.pt-duo-base a{display:inline-block;padding:12px 6px;margin:-12px -6px;color:var(--ac);text-decoration:underline;text-underline-offset:3px}
.pt-op-txt{margin-top:18px;padding:22px;border-radius:20px;border:1px solid var(--line);touch-action:pan-y}
.pt-op-txt h3{font-size:clamp(26px,3vw,34px)}
.pt-op-txt p{margin-top:10px;font-size:16px;line-height:1.75;font-weight:400;color:var(--txt);max-width:60ch}
.pt-op-txt>div{animation:pt-entra .45s var(--ease)}
@keyframes pt-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pt-combo{margin-top:20px;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;font-size:15px;color:var(--sob);font-weight:400}
.pt-combo b{font-family:'Fraunces',serif;font-weight:400;font-size:18px;color:var(--fg)}
.pt-esc2{--bg:var(--b2)}
.pt-esc .pt-op{background:rgba(250,246,239,.03)}
.pt-esc .pt-op.pt-at{background:rgba(231,85,30,.12);border-color:var(--terra)}
.pt-esc .pt-op.pt-at small{color:var(--fraco)}
.pt-esc .pt-op.pt-at .pt-ot i{box-shadow:inset 0 0 0 4px var(--b2)}
@media(min-width:900px){.pt-esc-g{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
.pt-duo{margin-top:0}}
.pt-pion{position:relative;overflow:hidden;background:radial-gradient(70% 60% at 85% 35%,rgba(231,85,30,.16),rgba(231,85,30,0)),var(--basalt)}
.pt-pion-25{position:absolute;right:-3vw;bottom:-6vw;font-family:'Fraunces',serif;font-style:italic;font-size:clamp(240px,38vw,560px);line-height:1;color:rgba(231,85,30,.07);pointer-events:none}
.pt-pion-g{position:relative;display:grid;gap:clamp(40px,5vw,72px);align-items:center}
@media(min-width:900px){.pt-pion-g{grid-template-columns:1fr 1fr}}
.pt-lema{margin-top:18px;font-family:'Fraunces',serif;font-style:italic;font-size:clamp(20px,2.2vw,26px);line-height:1.4;color:var(--ivory);max-width:32ch}
.pt-recebe{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
@media(max-width:379px){.pt-recebe{grid-template-columns:1fr}
.pt-recebe li{flex-direction:row;gap:12px}}
.pt-recebe li{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:14px;background:rgba(250,246,239,.03);font-size:14px;line-height:1.45;font-weight:400;color:var(--sand)}
.pt-recebe li b{font-family:'Fraunces',serif;font-weight:400;font-size:15px;color:var(--terra)}
.pt-palco{perspective:1200px;display:flex;flex-direction:column;align-items:center}
.pt-cartao{position:relative;width:min(100%,460px);aspect-ratio:1.586/1;transform-style:preserve-3d;transition:transform .8s var(--ease);touch-action:pan-y;cursor:pointer;
  --gx:50%;--gy:30%}
.pt-cartao.pt-mexe{transition:transform .12s linear}
.pt-face{position:absolute;inset:0;border-radius:18px;padding:clamp(18px,3vw,28px);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(250,246,239,.16);
  background:radial-gradient(110% 95% at 100% 0%,rgba(231,85,30,.38),rgba(231,85,30,0) 55%),linear-gradient(155deg,#2E261E 0%,#17130F 56%,#0F0C09 100%);
  box-shadow:0 44px 90px -36px rgba(0,0,0,.85)}
.pt-face::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 50% at var(--gx) var(--gy),rgba(255,240,220,.16),rgba(255,240,220,0));pointer-events:none}
.pt-face::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:2px;background:var(--terra)}
.pt-face.pt-tras{transform:rotateY(180deg);align-items:center;justify-content:center;text-align:center;gap:12px}
.pt-l1{display:flex;justify-content:space-between;align-items:center}
.pt-l1 img{height:15px;width:auto}
.pt-l1 span{font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--sand)}
.pt-nome{font-family:'Fraunces',serif;font-size:clamp(26px,3.4vw,40px);line-height:1.05;color:var(--ivory)}
.pt-pe{display:flex;justify-content:space-between;align-items:flex-end}
.pt-pe b{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ivory);font-weight:500}
.pt-emb{width:clamp(70px,12vw,96px);aspect-ratio:1;border-radius:50%;border:1px solid rgba(231,85,30,.7);display:grid;place-items:center;
  font-family:'Fraunces',serif;font-style:italic;font-size:clamp(30px,5vw,42px);color:var(--terra);box-shadow:inset 0 0 0 6px rgba(231,85,30,.08)}
.pt-face.pt-tras p{font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--sand);line-height:1.8}
.pt-face.pt-tras p b{display:block;font-weight:500;color:var(--ivory)}
.pt-cart-ctl{display:flex;align-items:center;gap:16px;margin-top:18px}
.pt-cart-ctl button{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:30px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand)}
.pt-cart-ctl button::before{content:"↻";font-size:16px;color:var(--terra)}
.pt-cart-ctl span{font-size:11px;color:var(--fraco)}
.pt-legenda{margin-top:12px;text-align:center;max-width:42ch}
@media(max-width:420px){.pt-pe b,.pt-l1 span{letter-spacing:.14em}}
.pt-pion .pt-pi-cta{margin-top:24px}
.pt-tiles{display:grid;gap:10px;margin-top:clamp(32px,4vw,48px)}
@media(min-width:900px){.pt-tiles{grid-template-columns:repeat(3,1fr);gap:14px}}
.pt-tile{position:relative;display:flex;flex-direction:column;gap:10px;min-height:190px;padding:22px 22px 70px;border-radius:20px;border:1px solid var(--line);background:var(--card);
  text-align:left;transition:transform .3s var(--ease),box-shadow .3s}
.pt-tile:active{transform:scale(.985)}
.pt-tile .pt-tag{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ac);font-weight:500}
.pt-tile h3{font-size:clamp(24px,2.6vw,30px);color:var(--fg)}
.pt-tile p{font-size:14.5px;line-height:1.6;font-weight:400;color:var(--txt)}
.pt-tile .pt-cta{position:absolute;left:22px;right:22px;bottom:18px;display:flex;align-items:center;justify-content:space-between;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);font-weight:500}
.pt-tile .pt-cta i{width:40px;height:40px;border-radius:50%;background:var(--basalt);color:var(--ivory);display:grid;place-items:center;font-style:normal;font-size:16px;transition:transform .3s var(--ease)}
.pt-tile:nth-child(2){background:var(--basalt);border-color:var(--basalt)}
.pt-tile:nth-child(2) .pt-tag{color:var(--terra)}
.pt-tile:nth-child(2) h3,.pt-tile:nth-child(2) .pt-cta{color:var(--ivory)}
.pt-tile:nth-child(2) p{color:rgba(227,216,198,.8)}
.pt-tile:nth-child(2) .pt-cta i{background:var(--terra);color:var(--basalt)}
@media(hover:hover){.pt-tile:hover{transform:translateY(-4px);box-shadow:0 24px 40px -28px rgba(21,18,14,.5)}
.pt-tile:hover .pt-cta i{transform:translateX(4px)}}
.pt-gc h2{font-size:clamp(30px,4vw,44px);margin-top:10px}
.pt-gc>p{margin-top:14px;font-size:16px;line-height:1.75;font-weight:400;color:var(--txt)}
.pt-duas{display:grid;gap:12px;margin-top:22px}
.pt-duas>div{padding:18px;border:1px solid var(--line);border-radius:16px}
.pt-duas .pt-tg{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);font-weight:500}
.pt-duas h3{font-size:24px;margin-top:8px}
.pt-duas p{margin-top:8px;font-size:15px;line-height:1.7;font-weight:400;color:var(--txt)}
.pt-lista{list-style:none;margin-top:8px}
.pt-lista li{position:relative;padding:7px 0 7px 24px;font-size:14.5px;line-height:1.5;font-weight:400;color:var(--sand)}
.pt-lista li::before{content:"";position:absolute;left:0;top:1.05em;width:13px;height:1px;background:var(--terra)}
.pt-gc .pt-nota{margin-top:20px}
.pt-gc .pt-acoes{margin-top:20px}
.pt-benef-g{display:grid;gap:clamp(40px,5vw,64px);align-items:center}
.pt-benef-g>*,.pt-como-g>*,.pt-pion-g>*,.pt-termos-g>*,.pt-ad-g>*,.pt-esc-g>*{min-width:0}
@media(min-width:1000px){.pt-benef-g{grid-template-columns:1.25fr 1fr}}
.pt-bcs{margin-top:28px}
.pt-bc{width:78%;max-width:320px;display:flex;flex-direction:column;gap:10px;min-height:220px;padding:22px;border-radius:20px;border:1px solid var(--line);background:var(--b2)}
.pt-bc .pt-n{font-family:'Fraunces',serif;font-size:30px;font-style:italic;color:var(--terra);line-height:1}
.pt-bc h3{font-size:22px;margin-top:auto}
.pt-bc p{font-size:14.5px;line-height:1.6;font-weight:400;color:var(--txt)}
.pt-bc .pt-selo{margin-left:4px}
@media(min-width:700px){.pt-bcs{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible;margin:28px 0 0;padding:0}
.pt-bc{width:auto;max-width:none}}
.pt-bcs-pe{display:flex;gap:6px;margin-top:12px}
.pt-bcs-pe i{width:7px;height:7px;border-radius:50%;background:var(--stone);transition:.3s}
.pt-bcs-pe i.pt-at{width:20px;border-radius:4px;background:var(--terra)}
@media(min-width:700px){.pt-bcs-pe{display:none}}
.pt-tel-wrap{display:flex;flex-direction:column;align-items:center}
.pt-tel{position:relative;width:min(100%,320px);padding:12px;border-radius:44px;background:#0D0B08;border:1px solid rgba(250,246,239,.16);box-shadow:0 50px 90px -40px rgba(0,0,0,.9)}
.pt-tel::before{content:"";position:absolute;left:50%;top:20px;width:84px;height:22px;margin-left:-42px;border-radius:12px;background:#000;z-index:2}
.pt-ecra{position:relative;min-height:540px;padding:56px 18px 20px;border-radius:34px;background:var(--b2);overflow:hidden;touch-action:pan-y}
.pt-tel-selo{margin-bottom:14px}
.pt-e-cab{display:flex;justify-content:space-between;align-items:center}
.pt-e-cab b{font-family:'Fraunces',serif;font-size:22px;font-weight:400}
.pt-e-cab span{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);padding:4px 8px;border:1px solid var(--line);border-radius:20px}
.pt-e-sep{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-top:16px;padding:3px;border-radius:30px;background:rgba(250,246,239,.06)}
.pt-e-sep button{position:relative;z-index:1;min-height:40px;border-radius:30px;font-size:12px;color:var(--sand);text-align:center;transition:color .3s}
.pt-e-sep button.pt-at{color:var(--basalt)}
.pt-e-sep .pt-f{position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:30px;background:var(--sand);transition:transform .4s var(--ease)}
.pt-e-sep.pt-mov .pt-f{transform:translateX(100%)}
.pt-e-vista{margin-top:14px}
.pt-e-vista[hidden]{display:none}
.pt-e-card{padding:14px;border-radius:16px;background:rgba(250,246,239,.05);margin-bottom:8px}
.pt-e-rot{display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--stone)}
.pt-e-card b{display:block;margin-top:4px;font-family:'Fraunces',serif;font-weight:400;font-size:18px}
.pt-e-card span.pt-l{display:block;margin-top:4px;font-size:11.5px;color:var(--sand);word-break:break-all}
.pt-e-prog{height:6px;margin-top:10px;border-radius:6px;background:rgba(250,246,239,.1);overflow:hidden}
.pt-e-prog i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#BFC2C4,#CBA45F);transition:width 1.4s var(--ease)}
.pt-e-niv{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--sand)}
.pt-e-est{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pt-e-est div{padding:10px;border-radius:12px;background:rgba(250,246,239,.05)}
.pt-e-est dt{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.pt-e-est dd{margin-top:4px;font-family:'Fraunces',serif;font-size:17px}
.pt-e-est div:last-child{grid-column:1/-1;background:rgba(231,85,30,.14)}
.pt-e-est div:last-child dd{color:var(--terra)}
.pt-e-mov{list-style:none}
.pt-e-mov li{display:flex;justify-content:space-between;gap:10px;padding:14px 4px;border-bottom:1px solid var(--line);font-size:13px;color:var(--sand)}
.pt-e-mov b{font-weight:500;color:var(--ivory)}
.pt-e-mov b.pt-estado{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}
.pt-tel-wrap figcaption{margin-top:14px;text-align:center}
.pt-termos-g{display:grid;gap:clamp(36px,5vw,64px)}
@media(min-width:900px){.pt-termos-g{grid-template-columns:1fr 1fr}}
.pt-conf{list-style:none;margin-top:22px;display:grid;gap:8px}
.pt-conf li{position:relative;padding:14px 16px 14px 52px;border-radius:14px;background:var(--card);font-size:14.5px;line-height:1.55;font-weight:400;color:var(--sob)}
.pt-conf li::before{content:"";position:absolute;left:16px;top:15px;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);transition:.4s var(--ease) var(--d,0s)}
.pt-conf li::after{content:"";position:absolute;left:23px;top:21px;width:9px;height:5px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg) scale(0);transition:transform .3s var(--ease) calc(var(--d,0s) + .15s)}
.pt-conf.pt-on li::before{background:var(--ac);border-color:var(--ac)}
.pt-conf.pt-on li::after{transform:rotate(-45deg) scale(1)}
.pt-esc .pt-conf li{background:rgba(250,246,239,.04)}
.pt-temas{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px;counter-reset:t}
@media(min-width:600px){.pt-temas{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.pt-temas{grid-template-columns:1fr 1fr}}
.pt-temas li{counter-increment:t;display:flex;flex-direction:column;gap:10px;min-height:96px;padding:14px;border:1px solid var(--line);border-radius:14px;font-size:13.5px;line-height:1.4;font-weight:400;color:var(--sob)}
.pt-temas li::before{content:counter(t,decimal-leading-zero);font-family:'Fraunces',serif;font-size:18px;color:var(--ac)}
@media(max-width:379px){.pt-temas{grid-template-columns:1fr}
.pt-temas li{flex-direction:row;align-items:baseline;min-height:0}}
.pt-chat{margin-top:clamp(28px,3vw,44px);border:1px solid var(--line);border-radius:24px;background:var(--b2);overflow:hidden}
.pt-chat-log{height:min(420px,56vh);overflow-y:auto;overscroll-behavior:contain;padding:20px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.pt-bolha{max-width:min(86%,560px);padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.6;font-weight:400;animation:pt-bolha .35s var(--ease)}
.pt-bolha.pt-q{align-self:flex-end;background:var(--terra);color:var(--basalt);border-bottom-right-radius:6px;font-weight:500}
.pt-bolha.pt-a{align-self:flex-start;background:var(--b3);color:var(--sand);border-bottom-left-radius:6px}
.pt-bolha.pt-a b{display:block;margin-bottom:4px;font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--terra);font-weight:500}
.pt-bolha.pt-esc3{display:flex;gap:5px;padding:16px}
.pt-bolha.pt-esc3 i{width:7px;height:7px;border-radius:50%;background:var(--stone);animation:pt-pula 1s infinite}
.pt-bolha.pt-esc3 i:nth-child(2){animation-delay:.15s}
.pt-bolha.pt-esc3 i:nth-child(3){animation-delay:.3s}
@keyframes pt-pula{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes pt-bolha{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.pt-chat-dica{align-self:center;margin:auto 0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fraco)}
.pt-chat-pe{border-top:1px solid var(--line);padding:12px 0 14px;background:rgba(21,18,14,.4)}
.pt-temas-c{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:0 14px}
.pt-temas-c::-webkit-scrollbar{display:none}
.pt-temas-c button{flex:none;min-height:40px;padding:0 14px;border-radius:30px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--sand)}
.pt-temas-c button.pt-at{background:var(--ivory);color:var(--basalt)}
.pt-pergs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:10px 14px 0;scroll-snap-type:x proximity}
.pt-pergs::-webkit-scrollbar{display:none}
.pt-pergs button{flex:none;max-width:260px;min-height:48px;padding:10px 16px;border:1px solid rgba(231,85,30,.55);border-radius:18px;font-size:14px;line-height:1.35;color:var(--ivory);font-weight:400;scroll-snap-align:start;white-space:normal}
.pt-pergs button.pt-feita{border-color:var(--line);color:var(--fraco)}
.pt-pergs button.pt-feita::after{content:" ✓";color:var(--terra)}
@media(min-width:900px){.pt-pergs{flex-wrap:wrap}}
:where(.ptn,.fq) details.pt-todas{margin-top:18px;border-top:1px solid var(--line)}
:where(.ptn,.fq) details.pt-todas>summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:58px;cursor:pointer;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand)}
:where(.ptn,.fq) details.pt-todas>summary::-webkit-details-marker{display:none}
:where(.ptn,.fq) details.pt-todas>summary::after{content:"+";font-size:20px;color:var(--terra);transition:transform .3s}
:where(.ptn,.fq) details.pt-todas[open]>summary::after{transform:rotate(45deg)}
.pt-faq-l details{border-top:1px solid var(--line)}
.pt-faq-l summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:58px;padding:10px 0;cursor:pointer;font-family:'Fraunces',serif;font-size:clamp(17px,1.8vw,20px);line-height:1.35;color:var(--ivory)}
.pt-faq-l summary::-webkit-details-marker{display:none}
.pt-faq-l summary::after{content:"+";flex:none;font-family:'DejaVu Sans';font-size:20px;color:var(--terra);transition:transform .3s}
.pt-faq-l details[open] summary::after{transform:rotate(45deg)}
.pt-faq-l details p{padding:0 0 18px;max-width:70ch;font-size:15.5px;line-height:1.75;font-weight:400;color:var(--txt)}
.pt-ad-g{display:grid;gap:clamp(36px,5vw,64px);align-items:start}
@media(min-width:900px){.pt-ad-g{grid-template-columns:1fr 1.15fr}}
.pt-lead{margin-top:20px;font-family:'Fraunces',serif;font-size:clamp(20px,2vw,25px);line-height:1.45;color:var(--fg);max-width:32ch}
.pt-caixa{padding:clamp(20px,3vw,36px);border-radius:24px;background:var(--card);box-shadow:0 30px 60px -40px rgba(21,18,14,.4)}
.pt-caixa-cab{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.pt-anel{flex:none;width:52px;height:52px}
.pt-anel circle{fill:none;stroke-width:4}
.pt-anel .pt-f0{stroke:var(--line)}
.pt-anel .pt-f1{stroke:var(--terra);stroke-linecap:round;transition:stroke-dashoffset .5s var(--ease);transform:rotate(-90deg);transform-origin:50% 50%}
.pt-anel text{font-family:'Fraunces',serif;font-size:14px;fill:var(--fg);text-anchor:middle;dominant-baseline:central}
.pt-caixa-cab b{display:block;font-family:'Fraunces',serif;font-weight:400;font-size:20px;color:var(--fg)}
.pt-caixa-cab span{display:block;margin-top:2px;font-size:13px;color:var(--fraco)}
.pt-f-rot{margin-top:22px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--sob);font-weight:500}
.pt-tipos{display:grid;gap:8px;margin-top:10px}
@media(min-width:600px){.pt-tipos{grid-template-columns:repeat(3,1fr)}}
.pt-tipos button{position:relative;display:flex;flex-direction:column;gap:6px;min-height:84px;padding:16px 16px 16px 50px;border:1px solid var(--line);border-radius:16px;text-align:left;transition:.3s}
.pt-tipos button::before{content:"";position:absolute;left:16px;top:18px;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line);transition:.3s}
@media(min-width:600px){.pt-tipos button{padding:16px;min-height:130px}
.pt-tipos button::before{position:static;flex:none;margin-bottom:6px}}
.pt-tipos button b{font-family:'Fraunces',serif;font-weight:400;font-size:19px;color:var(--fg);line-height:1.2}
.pt-tipos button span{font-size:12.5px;line-height:1.45;color:var(--fraco)}
.pt-tipos button.pt-at{border-color:var(--basalt);background:var(--basalt)}
.pt-tipos button.pt-at b{color:var(--ivory)}
.pt-tipos button.pt-at span{color:rgba(227,216,198,.7)}
.pt-tipos button.pt-at::before{border-color:var(--terra);background:var(--terra);box-shadow:inset 0 0 0 4px var(--basalt)}
.pt-ff{display:block;margin-top:16px}
.pt-ff span{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--sob);font-weight:500}
.pt-ff span i{font-style:normal;text-transform:none;letter-spacing:0;color:var(--fraco)}
.pt-ff input,.pt-ff select,.pt-ff textarea{width:100%;margin-top:6px;min-height:50px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:12px;
  color:var(--basalt);font:inherit;font-size:16px;font-weight:400;-webkit-appearance:none;appearance:none}
.pt-ff select{background-image:linear-gradient(45deg,transparent 50%,#3A3128 50%),linear-gradient(135deg,#3A3128 50%,transparent 50%);
  background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat}
.pt-ff textarea{min-height:110px;resize:vertical}
.pt-ff input:focus,.pt-ff select:focus,.pt-ff textarea:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px rgba(231,85,30,.18)}
.pt-ff.pt-erro input,.pt-ff.pt-erro select,.pt-ff.pt-erro textarea{border-color:#C0392B}
.pt-ff.pt-ok-c input,.pt-ff.pt-ok-c select{border-color:rgba(21,18,14,.35)}
.pt-par{display:grid;gap:0 14px}
@media(min-width:600px){.pt-par{grid-template-columns:1fr 1fr}}
:where(.ptn) [data-para][hidden]{display:none}
.pt-aceito{display:flex;gap:12px;align-items:flex-start;margin-top:12px;min-height:44px;padding:12px 14px;border-radius:12px;background:rgba(21,18,14,.04);font-size:14px;line-height:1.5;font-weight:400;color:var(--sob);cursor:pointer}
.pt-aceito input{flex:none;width:22px;height:22px;margin-top:0;accent-color:var(--terra)}
.pt-aceito i{font-style:normal;color:var(--fraco)}
.pt-aceito.pt-erro{box-shadow:inset 0 0 0 1px #C0392B}
.pt-enviar{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.pt-enviar .pt-btn{width:100%}
.pt-ok{padding:22px;border-radius:16px;background:var(--basalt);color:var(--ivory)}
.pt-ok b{font-family:'Fraunces',serif;font-size:24px;font-weight:400}
.pt-ok p{margin-top:8px;font-size:14.5px;color:var(--sand)}
.pt-ok button{margin-top:14px;min-height:44px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);border-bottom:1px solid var(--terra)}
/* Nesta pagina: no sitio da navegacao da pagina anterior; fixa por baixo do cabecalho a partir de 1100px */
/* passo436: a barra com o fundo do cabecalho e uma so linha laranja, que desliza para o item ativo */
.pt-nesta{position:relative;z-index:40;background:rgba(21,18,14,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(250,246,239,.12)}
.pt-nesta .pt-wrap{position:relative;display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none}
.pt-nesta .pt-wrap::-webkit-scrollbar{display:none}
.pt-nesta .pt-nesta-rot{flex:none;margin-right:10px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--stone)}
.pt-nesta a{position:relative;flex:none;display:flex;align-items:center;min-height:52px;padding:0 12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(227,216,198,.72);transition:color .3s}
.pt-nesta a.pt-at:not(.pt-nesta-cta){color:var(--ivory)}
.pt-nesta a.pt-nesta-cta{margin-left:auto;min-height:38px;padding:0 18px;border-radius:40px;background:var(--terra);color:var(--basalt);font-weight:500}
.pt-nesta-ind{position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:2px;background:var(--terra);opacity:0;pointer-events:none;
  transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s}
.pt-nesta-ind.pt-on{opacity:1}
@media(max-width:1099px){.pt-nesta a.pt-nesta-cta{margin-left:8px}}
@media(min-width:1100px){.pt-nesta{position:sticky;top:76px}
  .ptn section[id]{scroll-margin-top:128px}.ptn #simulador{scroll-margin-top:144px}
  .ptn{--topo:128px}}
@media(max-width:1099px){.ptn #simulador{scroll-margin-top:92px}}
@media(max-width:480px){.ptn{--topo:65px}.ptn #simulador{scroll-margin-top:80px}}
.pt-estado{font-size:14px;line-height:1.5;font-weight:400;color:var(--sob)}
.pt-estado:empty{display:none}
.pt-estado.pt-erro{color:#B0301F}

/* ===== passo451: revisao das saunas exteriores =====
   Tabela: ligacao direta a pagina de cada modelo, por baixo do nome (alinhada com ele: 14px do botao + 49px da
   miniatura + 16px de intervalo). */
.sn-mod-ver{position:relative;display:inline-block;margin:6px 0 0 79px;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--stone);border-bottom:1px solid transparent;
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.sn-mod-ver:hover,.sn-mod-ver:focus-visible{color:var(--sand);border-bottom-color:var(--terracotta)}
.sn-mod-ver::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
@media(max-width:820px){.sn-mod-ver{margin-left:72px}}
/* Antes da instalacao: reaproveita o .sn-guia (quatro blocos numerados); por baixo, Acores e Madeira */
.sn-inst-diz{margin-top:14px;font-size:14px;line-height:1.8;color:var(--stone);max-width:62ch}
.sn-clima{display:grid;gap:10px;max-width:760px;margin-top:clamp(44px,5.4vw,78px);
  padding-top:clamp(28px,3.4vw,46px);border-top:1px solid var(--line)}
.sn-clima h3{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(19px,1.8vw,23px);line-height:1.3;color:var(--ivory)}
.sn-clima p:not(.eyebrow){font-size:13.5px;line-height:1.85;color:var(--stone)}
/* passo452: a nota das ilhas fica separada do texto, mais pequena */
.sn-clima p:not(.eyebrow) + p{font-size:12px;color:var(--stone)}
/* Paginas de modelo: nota por baixo da ficha, personalizacao em tres grupos e aba de entrega e instalacao */
.mod-ficha-nota{width:100%;max-width:720px;font-size:11.5px;line-height:1.7;color:var(--stone)}
.mod-opc-t{margin-top:clamp(26px,3vw,40px);font-family:inherit;font-weight:400;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--terracotta)}
.mod-opc-t:first-child{margin-top:clamp(18px,2.4vw,28px)}
.mod-opc .mod-opcoes{margin-top:4px}
.mod-opc-link{margin-left:4px;font-size:11px}
.mod-entrega-intro{max-width:62ch;margin-top:clamp(18px,2.4vw,28px);font-size:14px;line-height:1.8;color:var(--sand)}
.mod-entrega-intro + .mod-opcoes{margin-top:8px}
@media(prefers-reduced-motion:reduce){.sn-mod-ver{transition:none}}

/* ===== passo453: saunas interiores =====
   Galeria das paginas de modelo: as fotografias (nao os recortes) enchem a caixa. */
.mod-caixa-foto img{left:0;top:0;width:100%;height:100%;object-fit:cover}
/* percursos do topo: a chegada as duas gamas das saunas interiores */
#gama-vulkana-int,#saunamo-int{scroll-margin-top:84px}
@media(max-width:480px){#gama-vulkana-int,#saunamo-int{scroll-margin-top:70px}}

/* ===== passo455: banho turco =====
   Pagina nova no desenho das saunas. A imagem de referencia (a do cartao III da pagina inicial) leva sempre a
   etiqueta. Desde o passo461 ja nao ha imagem anotada. */
.bt-ritual .sn-ritual-vidro > .tx-breve{z-index:5}
.bt-ritual .sn-ritual-foto{object-position:50% 30%}
@media(max-width:900px){.bt-ritual .sn-ritual-foto{object-position:50% 18%}}
.bt-leitura{list-style:none;display:grid;gap:clamp(24px,2.8vw,36px) clamp(28px,3.4vw,52px);
  margin-top:clamp(20px,2.4vw,30px);padding-top:clamp(24px,2.8vw,34px);border-top:1px solid var(--line)}
.bt-leitura li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-items:start;align-content:start}
.bt-leitura .n{grid-row:1 / span 2;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:500;line-height:1;color:var(--basalt);background:var(--ivory);align-self:start}
.bt-leitura b{font-family:'Fraunces',serif;font-weight:300;font-size:clamp(17px,1.5vw,19px);line-height:1.3;
  color:var(--ivory)}
.bt-leitura .d{margin-top:8px;font-size:12.5px;line-height:1.85;color:var(--stone)}
@media(min-width:620px){.bt-leitura{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.bt-leitura{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ===== passo456: perguntas frequentes em conversa, como na pagina Partners =====
   Saunas exteriores, saunas interiores e banho turco. A conversa e a lista completa usam as regras da pagina
   Partners (.pt-chat, .pt-bolha, .pt-pergs, .pt-todas, .pt-faq-l); aqui ficam so as cores que la vivem no .ptn e
   no .pt-esc, e as ligacoes dentro das respostas, que nos Partners nao ha. */
.fq{--b2:#1E1A15;--b3:#2A241C;--terra:#E7551E;--txt:rgba(227,216,198,.8);--fraco:rgba(227,216,198,.62)}
.fq .pt-bolha a,.fq .pt-faq-l p a{color:var(--ivory);border-bottom:1px solid var(--terra)}

/* ===== passo457: rodape — a empresa que explora a marca (DL 7/2004, art. 10.º; CSC, art. 171.º) =====
   Por baixo do Livro de Reclamacoes. Tres partes que quebram entre si, nunca a meio do nome ou da morada. */
.rodape-empresa{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:18px;font-size:12px;line-height:1.7;color:var(--stone)}

/* ===== passo458: rodape — resolucao alternativa de litigios de consumo (Lei 144/2015, art. 18.º) ===== */
.rodape-ral{max-width:92ch;margin-top:10px;font-size:12px;line-height:1.7;color:var(--stone)}
.rodape-ral a{color:var(--sand);border-bottom:1px solid var(--line);transition:border-color .3s var(--ease)}
.rodape-ral a:hover,.rodape-ral a:focus-visible{border-bottom-color:var(--terracotta)}

/* ===== passo459: perguntas em conversa nas paginas de modelo =====
   O mesmo desenho das paginas das saunas (.fq, .pt-chat, .pt-todas, .pt-faq-l), dentro de um .mod-bloco, entre as
   abas e a faixa «Explore os modelos». */
.mod-bloco.fq .pt-chat{margin-top:clamp(22px,2.6vw,34px)}

/* ===== passo460: banho turco, revisão =====
   Escolher a solução: os dois cartões das gamas das saunas (.sn-gama), com o estado no lugar do fabricante. */
.bt-solucoes .bt-sol-cab{margin-bottom:clamp(26px,3.2vw,44px)}
.bt-solucoes .bt-sol-cab h2{max-width:none;text-wrap:balance}
.bt-sol-fig img{object-position:50% 80%}
.sn-gama-fig > .tx-breve{z-index:1}
/* ilustrações (não são fotografias de produto): traço sobre basalto */
.bt-ilustra{position:relative;margin:0;background:radial-gradient(70% 65% at 50% 62%,rgba(231,85,30,.12),transparent 70%),var(--basalt-2)}
.sn-gama-fig.bt-ilustra svg{position:absolute;inset:0;width:100%;height:100%}
.sn-medida-foto.bt-ilustra{aspect-ratio:4/3}
.sn-medida-foto.bt-ilustra svg{display:block;width:100%;height:100%}
.bt-ilustra > .tx-breve{z-index:1}
.bt-cabine .l *{fill:none;stroke:rgba(227,216,198,.62);stroke-width:1.6;stroke-linejoin:round}
.bt-cabine .l .vidro{fill:rgba(250,246,239,.05)}
.bt-cabine .l .face{fill:rgba(250,246,239,.025)}
.bt-cabine .l .f2{fill:rgba(250,246,239,.045)}
.bt-cabine .l .f3{fill:rgba(250,246,239,.07)}
.bt-cabine .f *{fill:none;stroke:rgba(227,216,198,.3);stroke-width:1.2}
.bt-cabine .f .reflexo{stroke:rgba(250,246,239,.14)}
.bt-cabine .c *{fill:none;stroke:rgba(231,85,30,.6);stroke-width:1.1}
.bt-cabine .sombra{fill:rgba(0,0,0,.4);filter:blur(10px)}
.bt-vapor path{fill:none;stroke:rgba(250,246,239,.34);stroke-width:2;stroke-linecap:round;
  animation:bt-vapor 7s ease-in-out infinite}
.bt-vapor path:nth-child(2){animation-delay:-2.3s}
.bt-vapor path:nth-child(3){animation-delay:-4.6s}
@keyframes bt-vapor{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.9;transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.bt-vapor path{animation:none}}
/* modelos autónomos: a ilustração mais pequena do que as fotografias das secções à medida */
@media(min-width:960px){
  .bt-autonomos .sn-medida-grelha{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}
}
/* como funciona: esquema em corte e as quatro áreas (sete elementos até ao passo460) */
.bt-esquema-grelha{display:grid;gap:clamp(30px,4vw,64px);margin-top:clamp(24px,3.2vw,42px)}
@media(min-width:1000px){
  .bt-esquema-grelha{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
  .bt-esquema{position:sticky;top:110px}
}
.bt-esquema{position:relative;margin:0;padding:clamp(14px,2vw,28px);background:var(--basalt-2)}
.bt-esquema > .tx-breve{z-index:1;left:auto;right:18px}
.bt-esquema svg{display:block;width:100%;height:auto}
.bt-esquema .tec{fill:none;stroke:rgba(227,216,198,.35);stroke-dasharray:4 6}
.bt-esquema .ger{fill:rgba(250,246,239,.06);stroke:rgba(227,216,198,.62)}
.bt-esquema .ger-ecra{fill:rgba(231,85,30,.6)}
.bt-esquema .tubo{fill:none;stroke:var(--terracotta);stroke-width:2.2;stroke-linecap:round}
.bt-esquema .casca{fill:rgba(140,131,117,.22);stroke:rgba(227,216,198,.55)}
.bt-esquema .barreira{fill:none;stroke:rgba(231,85,30,.6);stroke-dasharray:5 5}
.bt-esquema .laje{fill:rgba(140,131,117,.22);stroke:rgba(227,216,198,.4)}
.bt-esquema .chao{fill:none;stroke:rgba(227,216,198,.62);stroke-width:1.6}
.bt-esquema .ralo{fill:var(--basalt);stroke:rgba(227,216,198,.62)}
.bt-esquema .corpo{fill:rgba(250,246,239,.04);stroke:rgba(227,216,198,.4)}
.bt-esquema .assento{fill:rgba(227,216,198,.18);stroke:rgba(227,216,198,.62)}
.bt-esquema .led{fill:none;stroke:var(--terracotta);stroke-width:3;stroke-linecap:round;
  filter:drop-shadow(0 0 4px rgba(231,85,30,.8))}
.bt-esquema .porta{fill:var(--basalt-2);stroke:rgba(227,216,198,.62)}
.bt-esquema .bico{fill:var(--terracotta)}
.bt-esquema .gotas path{fill:rgba(227,216,198,.5);stroke:none}
.bt-esquema .gotas path[stroke-dasharray]{fill:none;stroke:rgba(227,216,198,.45)}
.bt-esquema .ar path{fill:none;stroke:var(--sand);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bt-esquema .pt circle{fill:var(--ivory)}
.bt-esquema .pt text{fill:var(--basalt);font-family:'DejaVu Sans',system-ui,sans-serif;font-size:22px;font-weight:600;
  text-anchor:middle}
.bt-elementos{margin-top:0;padding-top:0;border-top:0}
@media(min-width:1000px){.bt-elementos{grid-template-columns:minmax(0,1fr)}}
/* wellness completo */
.bt-well-fig{position:relative}
.bt-well-fig > .tx-breve{z-index:1}

/* ===== passo461: banho turco, simplificação =====
   À medida e personalização numa secção só (três estilos com fotografia, opções numa grelha discreta); técnica
   em quatro áreas; wellness numa faixa compacta; perguntas em acordeão. Os espaçamentos e os textos pequenos só
   mudam nesta página (body.bt-pagina). */
/* três estilos: fotografias 4:3, em três colunas; no telemóvel, uma fila que desliza */
.bt-estilos{list-style:none;display:grid;gap:clamp(16px,2vw,28px);margin-top:clamp(26px,3.2vw,44px)}
@media(min-width:900px){.bt-estilos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:899px){
  .bt-estilos{grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:4px}
  .bt-estilos::-webkit-scrollbar{display:none}
  .bt-estilos li{scroll-snap-align:start}
}
/* no telemóvel a fila sai até à margem do ecrã, para se ver que continua */
@media(min-width:821px) and (max-width:899px){.bt-estilos{margin-right:-48px;padding-right:48px}}
@media(max-width:820px){.bt-estilos{margin-right:-24px;padding-right:24px}}
.bt-estilos .reveal{transition-delay:calc(var(--i,0) * 120ms)}
.bt-estilo-fig{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--basalt-2)}
.bt-estilo-fig img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.bt-estilos li:hover .bt-estilo-fig img{transform:scale(1.035)}
.bt-estilo-fig > .tx-breve{z-index:1}
.bt-estilos h3{margin-top:18px;font-family:'Fraunces',serif;font-weight:300;font-size:clamp(20px,1.9vw,24px);
  line-height:1.25;letter-spacing:-.01em;color:var(--ivory)}
.bt-estilos p{margin-top:8px;font-size:14px;line-height:1.75;color:rgba(227,216,198,.72);max-width:38ch}
@media(prefers-reduced-motion:reduce){
  .bt-estilos .reveal{transition-delay:0s}
  .bt-estilo-fig img{transition:none}
}
/* opções de personalização: só o nome e uma linha curta */
.bt-opcoes{margin-top:clamp(40px,5vw,72px);padding-top:clamp(24px,2.8vw,34px);border-top:1px solid var(--line)}
.bt-opcoes ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,2.4vw,30px) clamp(20px,3.4vw,52px);margin-top:clamp(18px,2vw,26px)}
@media(min-width:900px){.bt-opcoes ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bt-opcoes b{display:block;font-family:'Fraunces',serif;font-weight:300;font-size:clamp(17px,1.5vw,19px);
  line-height:1.3;color:var(--ivory)}
.bt-opcoes span{display:block;margin-top:6px;font-size:13.5px;line-height:1.6;color:rgba(227,216,198,.66)}
.bt-medida .sn-guia-pe{margin-top:clamp(36px,4.4vw,60px)}
/* perguntas: uma linha por pergunta, com «+» à direita; a resposta abre por baixo */
.bt-acordeao{max-width:920px;margin-top:clamp(22px,2.6vw,34px);border-top:1px solid var(--line)}
.bt-acordeao details{border-bottom:1px solid var(--line)}
.bt-acordeao summary{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(17px,1.8vw,22px) 0;cursor:pointer;list-style:none;font-family:'Fraunces',serif;font-weight:300;
  font-size:clamp(17px,1.5vw,20px);line-height:1.35;color:var(--ivory);transition:color .3s var(--ease)}
.bt-acordeao summary::-webkit-details-marker{display:none}
.bt-acordeao summary::after{content:"";flex:none;width:13px;height:13px;color:var(--sand);
  background:linear-gradient(currentColor,currentColor) center/100% 1.4px no-repeat,
             linear-gradient(currentColor,currentColor) center/1.4px 100% no-repeat;
  transition:transform .35s var(--ease),color .3s var(--ease)}
.bt-acordeao summary:hover::after,.bt-acordeao details[open] summary::after{color:var(--terracotta)}
.bt-acordeao details[open] summary::after{transform:rotate(45deg)}
.bt-acordeao summary:focus-visible{outline:1px solid var(--terracotta);outline-offset:4px}
.bt-acordeao p{max-width:72ch;padding:0 40px clamp(20px,2.2vw,26px) 0;font-size:15px;line-height:1.8;
  color:rgba(227,216,198,.78)}
.bt-acordeao details[open] p{animation:bt-abre .4s var(--ease)}
@keyframes bt-abre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.bt-acordeao p a{color:var(--ivory);border-bottom:1px solid var(--terracotta)}
@media(prefers-reduced-motion:reduce){.bt-acordeao details[open] p{animation:none}}
/* como funciona: com quatro áreas a lista tem a altura do esquema; já não precisa de o acompanhar fixo */
@media(min-width:1000px){
  .bt-pagina .bt-esquema-grelha{align-items:center}
  .bt-pagina .bt-esquema{position:relative;top:auto}
}
/* wellness: faixa compacta, imagem à esquerda */
@media(min-width:960px){
  .bt-wellness .sn-medida-grelha{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:center}
}
.bt-well-fig img{aspect-ratio:3/2;object-fit:cover}
/* espaçamentos: menos ar entre as secções da segunda metade e antes do pedido de proposta */
.bt-pagina .bt-autonomos,.bt-pagina .bt-funciona,.bt-pagina .bt-processo{padding-bottom:clamp(88px,9.6vw,144px)}
.bt-pagina .bt-wellness{padding-bottom:clamp(88px,9.6vw,144px)}
.bt-pagina .bt-faq{padding-bottom:0}
.bt-pagina #proposta{padding-top:clamp(80px,8vw,120px)}
/* textos pequenos: um pouco maiores e mais claros nesta página */
.bt-pagina .bt-leitura .d{font-size:14px;line-height:1.75;color:rgba(227,216,198,.72)}
.bt-pagina .sn-passos p{font-size:14px;line-height:1.75;color:rgba(227,216,198,.72)}
.bt-pagina .sn-clima p:not(.eyebrow){font-size:14px;color:rgba(227,216,198,.72)}
.bt-pagina .sn-inst-diz,.bt-pagina .sn-medida-diz{color:rgba(227,216,198,.72)}
.bt-pagina .sn-medida-diz{font-size:14.5px}
.bt-pagina .sn-gama-factos{color:rgba(227,216,198,.62)}

/* ===== passo462: Política de Privacidade =====
   Página legal numa coluna de leitura, no desenho das páginas Sobre Nós e Têxteis (.pagina, .tx-sub). */
.lg-coluna{max-width:820px}
.lg h1{font-size:clamp(34px,5vw,64px);font-weight:300;line-height:1.04;letter-spacing:-.03em;margin:18px 0 22px}
.lg .tx-sub{max-width:60ch}
.lg-data{margin-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.lg-texto{margin-top:clamp(40px,5vw,64px);padding-top:4px;border-top:1px solid var(--line)}
.lg-texto h2{margin-top:clamp(36px,4vw,52px);font-size:clamp(21px,2vw,26px);font-weight:300;line-height:1.25;
  letter-spacing:-.01em;color:var(--ivory)}
.lg-texto h3{margin-top:26px;font-family:inherit;font-size:12.5px;font-weight:500;line-height:1.4;letter-spacing:.16em;
  text-transform:uppercase;color:var(--sand)}
.lg-texto p,.lg-texto li{font-size:15px;line-height:1.8;color:rgba(227,216,198,.78);max-width:70ch}
.lg-texto p{margin-top:12px}
.lg-texto h3 + p{margin-top:8px}
.lg-texto ul{list-style:none;margin:14px 0 0;padding:0}
.lg-texto li{position:relative;padding-left:22px;margin-top:12px}
.lg-texto li::before{content:"";position:absolute;left:0;top:.9em;width:10px;height:1px;background:var(--terracotta)}
.lg-texto strong{font-weight:500;color:var(--ivory)}
.lg-texto a{color:var(--ivory);border-bottom:1px solid var(--terracotta);transition:color .3s var(--ease)}
.lg-texto a:hover,.lg-texto a:focus-visible{color:var(--sand)}
.rodape-legal-links a[aria-current="page"]{color:var(--ivory)}
/* ligação à política no consentimento da pré-inscrição (fundo claro) */
.pt-aceito a{color:inherit;border-bottom:1px solid var(--terra)}

/* ===== passo468: pérgulas =====
   Página completa no desenho do banho turco (body.bt-pagina): reaproveita .sn-*, .bt-* e .mp-destaques. Aqui
   ficam os dois projetos 3D lado a lado, o título dos Projetos 3D, a fotografia do conforto, a nota dos
   equipamentos, os espaçamentos das secções novas e o esquema das lâminas. */
@media(min-width:900px){.bt-estilos.pg-duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-sol-fig img{object-position:50% 60%}
.pg-3d{margin-top:clamp(64px,7vw,104px);text-align:center}
.pg-3d h3{margin-top:14px;font-family:'Fraunces',serif;font-weight:300;font-size:clamp(24px,2.6vw,34px);
  line-height:1.2;letter-spacing:-.01em;color:var(--ivory);text-wrap:balance}
.pg-3d-sub{margin-top:10px;font-size:14px;line-height:1.7;color:rgba(227,216,198,.72)}
.mp-destaques.pg-destaques{margin-top:clamp(36px,4.4vw,60px)}
.pg-conforto-fig{position:relative;margin:clamp(26px,3.2vw,44px) 0 0;aspect-ratio:21/9;overflow:hidden;
  background:var(--basalt-2)}
.pg-conforto-fig img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%}
@media(max-width:700px){.pg-conforto-fig{aspect-ratio:4/3}}
.pg-nota{margin-top:clamp(20px,2.4vw,28px);font-size:12.5px;line-height:1.7;color:rgba(227,216,198,.62)}
.pg-pagina .pg-madeira,.pg-pagina .pg-bio,.pg-pagina .pg-conforto{padding-bottom:clamp(88px,9.6vw,144px)}
/* esquema: três cortes da mesma pérgula (abertas, entreabertas, fechadas) */
.pg-esquema .pg-viga,.pg-esquema .pg-pilar{fill:rgba(140,131,117,.22);stroke:rgba(227,216,198,.55)}
.pg-esquema .pg-lam{fill:rgba(250,246,239,.1);stroke:rgba(227,216,198,.78);stroke-width:1.4}
.pg-esquema .pg-sol *{fill:none;stroke:var(--terracotta);stroke-width:1.8;stroke-linecap:round}
.pg-esquema .pg-raio path{fill:none;stroke:rgba(231,85,30,.5);stroke-width:1.4;stroke-dasharray:4 6}
.pg-esquema .pg-agua path{fill:none;stroke:rgba(231,85,30,.8);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pg-esquema .pg-agua .desce{stroke-dasharray:4 6}
.pg-esquema .pg-rot{fill:var(--sand);font-family:'DejaVu Sans',system-ui,sans-serif;font-size:16px;letter-spacing:.16em;
  text-anchor:middle}

/* ===== passo469: perguntas só em balões, com temas e «Recomeçar»; madeiras das pérgulas =====
   A lista «Ver todas as perguntas» esconde-se quando a conversa arranca (.fq-on, posto pelo faq-conversa.js e pelo
   partners.js): fica só para quem não tem JavaScript. O botão Recomeçar fica numa faixa por cima da conversa
   (não por cima dos balões, que no telemóvel passavam por baixo dele). */
.fq-on details.pt-todas{display:none}
.pt-chat-novo{display:flex;width:max-content;margin:12px 12px 0 auto;align-items:center;gap:8px;
  min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:30px;background:rgba(21,18,14,.78);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand);cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease)}
.pt-chat-novo svg{width:14px;height:14px;flex:none;transition:transform .5s var(--ease)}
.pt-chat-novo:hover,.pt-chat-novo:focus-visible{border-color:rgba(231,85,30,.7);color:var(--ivory)}
.pt-chat-novo:hover svg{transform:rotate(-180deg)}
.pt-chat-novo ~ .pt-chat-log{padding-top:12px}
.pt-pergs button[hidden]{display:none}
@media(prefers-reduced-motion:reduce){.pt-chat-novo svg{transition:none}}
/* pérgulas em madeira: a madeira certa para cada lugar */
.pg-madeiras{display:grid;gap:clamp(26px,3.4vw,52px);margin-top:clamp(64px,7vw,104px);
  padding-top:clamp(28px,3.4vw,46px);border-top:1px solid var(--line)}
@media(min-width:960px){.pg-madeiras{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}}
.pg-madeiras h3{margin-top:14px;font-family:'Fraunces',serif;font-weight:300;font-size:clamp(24px,2.6vw,34px);
  line-height:1.2;letter-spacing:-.01em;color:var(--ivory);text-wrap:balance}
.pg-madeiras-txt p:not(.eyebrow){margin-top:14px;font-size:14.5px;line-height:1.8;color:rgba(227,216,198,.72);max-width:46ch}
.pg-madeiras .bt-leitura{margin-top:0;padding-top:0;border-top:0}
@media(min-width:1000px){.pg-madeiras .bt-leitura{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== passo470: preço com ou sem IVA, por território =====
   Seletor «Com IVA · Sem IVA» com os três territórios (Continente, Açores, Madeira), na página de modelo (dentro de
   .mod-preco) e no cabeçalho da tabela das Saunas Exteriores. Vem escondido no HTML; o preco-iva.js mostra-o. O
   rótulo do valor (.pv-rot) herda o estilo de .mod-valor span. */
.pv-sel{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:4px}
.pv-sel[hidden]{display:none}
.pv-grp{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.pv-grp[hidden]{display:none}
.pv-sel button{min-height:34px;padding:0 13px;border:1px solid var(--line);border-radius:30px;background:transparent;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sand);cursor:pointer;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease)}
.pv-sel button:hover,.pv-sel button:focus-visible{border-color:rgba(231,85,30,.7);color:var(--ivory)}
.pv-sel button[aria-pressed="true"]{background:var(--ivory);border-color:var(--ivory);color:var(--basalt)}
.pv-l{margin-right:4px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(227,216,198,.6)}
.sn-arq-cab .pv-sel{margin-top:22px}
.pv-valor{font-variant-numeric:tabular-nums}

/* ===== passo472: página inicial mais leve no telemóvel =====
   As fotografias dos cartões, dos carrosséis e da galeria da página inicial deixaram de ser background-image em
   linha e passaram a <img loading="lazy"> dentro do mesmo elemento: o navegador só as descarrega quando se chega
   perto, e o resto (escala, brilho, opacidade dos carrosséis, grão) continua a aplicar-se ao elemento de fora. A
   fotografia do topo tem uma versão de 1280 px para ecrãs estreitos (a mesma moldura; cover não deixa ver a
   diferença); o !important ganha ao estilo em linha, e o navegador só descarrega a que vence. */
.painel .visual .foto>img,.faixa .peca>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center;display:block}
@media(max-width:640px){.hero-bg{background-image:url('../images/inicio/front-vulkana-movel.webp')!important}}

/* ===== passo473: comparacao logo abaixo da faixa «Explore os modelos» ===== */
/* a ligacao saiu da linha de atalhos do fim da pagina (pedido da Sandra); centrada, como a faixa */
.mod-col-cmp{margin:clamp(26px,3vw,40px) 0 0;text-align:center}

/* ===== passo476: destaques em tres, sem a Visualizacao 3D ===== */
/* pedido da Sandra: o 3D fica so no texto da seccao (inicial, Braseiros, Mobiliario, Piscinas, Profissionais);
   na Pergulas continuam os quatro destaques. Tres colunas, mais estreitas; com duas colunas (tablet e
   telemovel) o terceiro destaque ocupa a linha inteira, ao centro. */
.mp-destaques.mp-tres{grid-template-columns:repeat(3,minmax(0,1fr));max-width:840px}
@media(max-width:900px){
  .mp-destaques.mp-tres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-destaques.mp-tres li:nth-child(3){grid-column:1/-1}
}