/* =========================================================
   Recriar Studio Odontológico — landing page
   Base: Dentora DS · Direção 01, "A margem larga"

   A ideia central é a tensão do §12 com o §15: container de
   1900px segurando blocos de texto de 420px. Imagem sangra até
   a borda, legenda fica num sulco estreito, e o vazio entre as
   duas é o argumento. Motion mínimo — as transformações grandes
   ficam só nas imagens (§71).
   ========================================================= */

/* ---------------------------- FONTES ---------------------------- */
/* faixa cortada em 200–500: nada fora disso renderiza nem por acidente */
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/manrope-variable.woff2") format("woff2-variations");
  font-weight: 200 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 200 500; font-style: normal; font-display: swap;
}

/* ---------------------------- TOKENS ---------------------------- */
:root {
  --parede:      #F9F0DE;   /* Figma 64:2 */
  --massa:       #E7DFD4;
  --superficie:  #FBF8F4;
  --espresso:    #2B241E;
  --tinta-med:   #6E6256;
  --tinta-fraca: #9A8E80;
  --bronze:      #B28F6F;
  --bronze-fig:  #C59662;   /* cor de texto do hero no Figma */
  --carvalho:    #C9A87C;

  --borda:      rgba(43,36,30,.14);
  --borda-leve: rgba(43,36,30,.07);
  --vidro:      rgba(43,36,30,.24);
  --claro-70:   rgba(242,237,230,.70);
  --claro-50:   rgba(242,237,230,.50);
  --claro-18:   rgba(242,237,230,.18);

  --display: "Manrope", "Segoe UI", system-ui, sans-serif;
  --body:    "Inter", "Segoe UI", system-ui, sans-serif;

  /* pesos — teto 500, piso 200 */
  --w-thin: 200; --w-base: 300; --w-text: 400; --w-strong: 500;

  --s1: 2px;  --s2: 6px;  --s3: 8px;  --s4: 12px; --s5: 16px;
  --s6: 24px; --s7: 32px; --s8: 48px; --s9: 64px; --s10: 88px;

  --container: 1900px;   /* §12 */
  /* 36px vem da nav e do hero do Figma (inset 36). O resto da página
     precisa bater com eles, senão a banda do hero termina 12px mais
     fora que o primeiro <h2> e o degrau aparece a cada rolagem. */
  --gutter: 36px;
  --measure: 420px;      /* §15 — corpo */
  --title: 520px;        /* §15 — heading de seção */

  /* escala de texto — 6 degraus, todos distinguíveis a olho.
     Antes eram 12 tamanhos soltos (10.5 / 11 / 12.5 / 13 / 13.5 / 14 /
     15 / 15.5 / 16 / 17 / 19 / 20); metade era duplicata invisível. */
  --t-micro: 11px;   /* rótulo caixa-alta, numeração da lista */
  --t-meta:  13px;   /* legenda, crédito de citação, base do rodapé */
  --t-ui:    14px;   /* controle: botão, link, nav (medida do Figma) */
  --t-body:  15px;   /* corpo secundário: lista, FAQ, rodapé, input */
  --t-lead:  16px;   /* corpo base e parágrafo de abertura de seção */
  --t-sub:   20px;   /* h3, nome de profissional */

  --r-xs: 4px; --r-sm: 8px; --r-md: 12px; --r-full: 999px;

  /* altura real ocupada pela nav fixa: inset-top 14 + pill 42 = 56.
     Era 89px e não tinha um único uso; quem mandava na âncora era --s10
     (88px), que também controla padding de seção. Medido no componente
     .fnav (linha ~226) e no .fnav__pill (linha ~234). */
  --nav-h: 56px;
}

/* no mobile a sarjeta encolhe, mas continua única: nav, hero e .wrap
   leem todos deste valor. Não repetir 16px/24px solto por componente. */
@media (max-width: 809px) { :root { --gutter: 24px; --nav-h: 50px; } }  /* top 10 + burger 40 */

/* ---------------------------- RESET ---------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + var(--s6)); overflow-x: clip; }

body {
  margin: 0;
  background: var(--parede);
  color: var(--espresso);
  font-family: var(--body);
  /* corpo em 200. A pagina inteira herda daqui, e a regra e uma so:
     o display sempre pesa mais que o texto que ele encabeca. Era 400,
     ou seja mais pesado que h1 e h2 em 200, e a hierarquia lia ao contrario.
     O hero ja fazia certo desde o Figma (h1 300 sobre p 200); agora o
     resto da pagina segue o hero. */
  font-size: var(--t-lead); font-weight: var(--w-thin); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* `clip`, não `hidden`: `hidden` promoveria o body a contêiner de
     scroll e quebraria sticky, Lenis e ScrollTrigger */
  overflow-x: clip;
  /* Barra de rolagem nativa fora, a pedido: numa pagina desta temperatura ela
     e a unica peca de cinza de sistema na tela. Rolar continua funcionando por
     roda, teclado, toque e barra de espaco — some o indicador, nao o scroll.
     Efeito colateral bom: com a barra escondida o `--sbw` da §10.2 passa a
     valer 0 sempre, entao `calc(100vw - var(--sbw))` das imagens sangradas
     nunca fica defasado. Sem isto o preloader criava esse defeito, porque o
     `--sbw` e medido no load, quando o scroll ainda esta travado, e media 0
     enquanto a barra real tinha 15px.
     ⚠️ Custo real: quem rola perde a nocao de quanto falta de pagina. Voltar e
     apagar este bloco. */
  scrollbar-width: none;                 /* Firefox */
}
body::-webkit-scrollbar,
html::-webkit-scrollbar { width: 0; height: 0; display: none; }

img { display: block; max-width: 100%; height: auto; }
svg { display: block; }

h1, h2, h3 { margin: 0; font-family: var(--display); text-wrap: balance; }
p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: var(--w-strong); }

::selection { background: var(--bronze); color: #fff; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; border-radius: var(--r-xs); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 100;
  background: var(--espresso); color: var(--parede);
  padding: 10px 16px; border-radius: var(--r-sm); font-size: var(--t-ui);
}
.skip:focus { top: 12px; }

/* ---------------------------- GRID ---------------------------- */
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.measure { max-width: var(--measure); }
.dim { color: var(--tinta-med); }
.num { font-variant-numeric: tabular-nums; }
.quiet { color: var(--tinta-med); }

/* o par §74: título estreito à esquerda, conteúdo estreito à direita,
   e uma calha larguíssima entre os dois quando a tela permite */
.spread {
  display: grid;
  grid-template-columns: var(--title) minmax(0, 1fr);
  gap: var(--s8) clamp(48px, 12vw, 220px);
  align-items: start;
}
@media (max-width: 979px) {
  .spread { grid-template-columns: 1fr; gap: var(--s6); }
  .spread__title:empty { display: none; }
}
.spread__body { display: flex; flex-direction: column; gap: var(--s6); max-width: 640px; }
.spread--tight { margin-top: var(--s9); }
.spread__title--sticky { position: sticky; top: var(--s10); }
@media (max-width: 979px) { .spread__title--sticky { position: static; } }

.cap { padding-block: var(--s10); }
@media (max-width: 809px) { .cap { padding-block: var(--s8); } }

/* ---------------------------- TIPO ---------------------------- */
h1 {
  font-weight: var(--w-base);   /* 300, mesmo peso do H1 do hero */
  font-size: clamp(38px, 5.4vw, 76px);
  line-height: 1.02; letter-spacing: -.04em;
}
h2 {
  font-weight: var(--w-base);   /* 300 */
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1; letter-spacing: -.035em;
}
h3 { font-weight: var(--w-strong); font-size: var(--t-sub); line-height: 1.25; letter-spacing: -.022em; }

.eyebrow {
  display: flex; align-items: center; gap: var(--s4);
  font-size: var(--t-micro); font-weight: var(--w-strong); letter-spacing: .2em;
  text-transform: uppercase; color: var(--tinta-fraca);
  margin-bottom: var(--s6);
}
/* matriz 3×3 de pontos do §19 */
.dots {
  width: 12px; height: 12px; flex: none; opacity: .6;
  background: radial-gradient(circle at 1px 1px, currentColor 1px, transparent 1.2px) 0 0 / 4px 4px;
}

.wordmark {
  font-family: var(--display); font-weight: var(--w-thin);
  letter-spacing: .3em; text-indent: .3em; line-height: 1;
  font-size: clamp(22px, 2.6vw, 34px);
}
.wordmark__sub {
  font-family: var(--body); font-weight: var(--w-text);
  font-size: clamp(9px, .9vw, 11px);
  letter-spacing: .42em; text-indent: .42em;
  text-transform: lowercase; color: var(--bronze);
}

.link-quiet {
  font-size: var(--t-ui); font-weight: var(--w-strong);
  border-bottom: 1px solid currentColor; padding-bottom: 2px; opacity: .7;
}

/* ---------------------------- BOTÕES (§30 §32) ---------------------------- */
.btn {
  display: inline-flex; align-items: stretch; gap: var(--s1);
  font-size: var(--t-ui); font-weight: var(--w-strong); line-height: 1.2;
  border-radius: var(--r-sm); padding: var(--s1);
  background: var(--espresso); color: var(--parede);
}
.btn__label { padding: var(--s4) var(--s5); border-radius: var(--r-xs); }
.btn__icon {
  position: relative; width: 40px; border-radius: var(--r-xs);
  background: rgba(242,237,230,.14); flex: none;
}
.btn__icon i, .btn__icon b { position: absolute; top: 50%; left: 50%; background: currentColor; }
.btn__icon i { width: 12px; height: 1px; margin: -.5px 0 0 -6px; }
.btn__icon b { width: 4px; height: 4px; border-radius: var(--r-full); margin: -2px 0 0 -2px; transform: scale(0); }

.btn--glass {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(242,237,230,.24);
}

/* ==================== NAV + HERO (Figma 64:2, frame 1920×1080) ====================
   Medidas do arquivo, convertidas de posição absoluta para layout proporcional:
   pill de nav 550×60 em x36/y32 · wordmark 152×19 centralizado em y52 ·
   pill de CTA 200×60 · banda de imagem 1854×632 em y119, raio 10 ·
   H1 120/110 tracking −6px em x35/y802 · parágrafo 48/42 tracking −2.4px em x1244.
   Margem direita da nav normalizada de 87px para 36px, simétrica com a esquerda. */

/* nav, hero e .wrap compartilham container e sarjeta. Sem isso a nav e a
   banda do hero ficam full-width enquanto as seções param em 1900px, e o
   degrau reaparece em tela larga. */
.fnav {
  position: fixed; inset: 14px 0 auto 0; z-index: 20;
  max-width: var(--container); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
}
@media (max-width: 809px) { .fnav { top: 10px; } }

/* ---- estado inicial da entrada da nav (o movimento esta no main.js) ----
   `-100%` e a altura da propria barra e o `- 14px` e o `top` dela: somados
   dao exatamente a distancia ate a borda de cima da janela. Escrito assim, e
   nao em px cravado, porque a altura da barra tem TRES degraus e nao dois: o
   pill e o CTA somem aos 1199px, nao aos 809, entao da 56px acima de 1200
   (pill 42 + inset 14), 54px entre 810 e 1199 (burger 40 + inset 14) e 50px
   abaixo de 809 (burger 40 + inset 10). O `-100%` le a altura de verdade nos
   tres casos; o `--nav-h` do §19 so tem dois valores e erra 2px na faixa do
   meio (defeito dele, anterior a isto, e so afeta a ancora).
   As media queries vem DEPOIS da regra base pela armadilha §10.3.
   Quem desliga motion nao ve entrada nenhuma, entao a barra nao pode
   nascer escondida: `transform: none` devolve ela ao lugar. */
.js .fnav { transform: translateY(calc(-100% - 14px)); }
@media (max-width: 809px) { .js .fnav { transform: translateY(calc(-100% - 10px)); } }
@media (prefers-reduced-motion: reduce) { .js .fnav { transform: none; } }

.fnav__pill, .fnav__cta {
  background: #fff; border-radius: var(--r-sm); height: 42px;
  display: flex; align-items: center;
  font-family: var(--body); font-weight: var(--w-base);
  font-size: var(--t-ui); letter-spacing: -.05em; color: var(--bronze-fig);
}
.fnav__pill { gap: 30px; padding-inline: 18px; }
.fnav__pill a { white-space: nowrap; }
.fnav__cta { padding-inline: 16px; white-space: nowrap; }

.fnav__mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 112px;
}
.fnav__mark img { width: 100%; height: auto; }

.burger {
  width: 40px; height: 40px; flex: none; position: relative;
  display: grid; place-items: center;
  background: #fff; border-radius: var(--r-sm);
}
.burger i { position: absolute; width: 16px; height: 1px; background: var(--bronze-fig); }
.burger i:nth-child(1) { transform: translateY(-3px); }
.burger i:nth-child(2) { transform: translateY(3px); }

/* depois do componente, senão `display: grid` do .burger vence a media query */
@media (max-width: 1199px) { .fnav__pill, .fnav__cta { display: none; } }
@media (min-width: 1200px) { .burger { display: none; } }
@media (max-width: 1199px) { .fnav { justify-content: flex-end; } }


.menu {
  position: fixed; inset: 0; z-index: 19; background: var(--espresso);
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s6); padding: var(--gutter);
}
.menu[hidden] { display: none; }
.menu a {
  font-family: var(--display); font-weight: var(--w-thin);
  font-size: clamp(28px, 8vw, 40px); letter-spacing: -.035em; color: var(--parede);
}

/* ------------------------------- HERO -------------------------------
   Cabe inteiro em 100svh: as medidas do arquivo viram proporções de
   altura (119/632/51/56 sobre 1080) e a banda é quem absorve a sobra,
   com `min-height: 0` para poder encolher dentro do flex. */
.fhero {
  height: 100svh;
  max-width: var(--container); margin-inline: auto;
  background: var(--parede);
  padding: clamp(72px, 9svh, 88px) var(--gutter) clamp(24px, 4.4svh, 48px);
  display: flex; flex-direction: column;
  overflow: hidden;
  /* corpo e entrelinha viram token porque o alinhamento óptico do lado
     direito depende dos dois ao mesmo tempo (ver `.fhero__side`) */
  --h1-fs: clamp(34px, min(4.8vw, 16svh), 92px);
  --h1-lh: .917;                     /* 110 / 120 do Figma */
  --p-fs: clamp(16px, min(1.9vw, 5.6svh), 36px);
  --p-lh: 1.04;
}
/* viewport muito baixa: melhor rolar do que cortar */
@media (max-height: 520px) { .fhero { height: auto; min-height: 0; overflow: visible; } }

.fhero__band {
  border-radius: 10px; overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;                     /* sem isto o flex não encolhe a banda */
}
/* O `object-position` mora INLINE no index.html, como o dos retratos (§20),
   porque o valor foi medido no arquivo e vale so para ele. A banda absorve a
   sobra do 100svh, entao a razao dela varia de 4,33 (1920x720) a 0,65 (375x812)
   e o eixo que corta troca no meio do caminho: acima de 3,0 corta a altura,
   abaixo corta a largura. Nunca os dois, porque `cover` so transborda num eixo.
   X = 74,5%: resolvido, nao chutado. O sorriso mede 60,6%..67,7% da largura e o
   olho direito fecha em 77,8%; exigir que a janela contenha esse trecho em toda
   a faixa deixa X entre 71,7% e 77,3%, e 74,5% centra o alvo no pior caso
   (21,6% da largura a vista, num iPhone).
   Y = 0%: o sujeito nitido termina em 67,5% da altura e a pior fracao vertical
   e 69,3%, entao alinhar pelo topo preserva o rosto inteiro e o corte cai so
   na gola desfocada. */
.fhero__band img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }

.fhero__bottom {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: clamp(40px, 8vw, 160px);
  margin-top: clamp(16px, 3.5svh, 40px);
  flex: 0 0 auto;
}
@media (max-width: 979px) {
  .fhero__bottom { flex-direction: column; gap: clamp(16px, 2.5svh, 32px); margin-top: clamp(16px, 3svh, 32px); }
}

.fhero h1 {
  /* 560px era a medida do Figma e cabia ~14 caracteres por linha a 91px, o
     que so aceitava aforismo: toda headline concreta estourava. 660px foi
     resolvido, nao chutado — a linha longa mede 636,2px no teto de 92px, e
     640 ja bastaria; os 20px a mais sao margem. Nao aperta o layout: o
     `space-between` tira os 100px extras da folga do gap, nao do lado
     direito, e a compressao so comeca abaixo de ~1310px de viewport. */
  flex: 0 1 660px;
  font-family: var(--display); font-weight: var(--w-base);   /* Manrope Light */
  /* `min()` sozinho não tinha piso: a 375px de largura o 4.8vw dava 18px
     e o H1 renderizava do tamanho do corpo. O piso de 34px entra por
     clamp; o min() interno preserva o teto por altura de viewport.
     O valor mora no `--h1-fs` do `.fhero` porque o lado direito lê dele. */
  font-size: var(--h1-fs);
  line-height: var(--h1-lh);
  letter-spacing: -.05em;            /* −6px em 120px */
  color: var(--bronze-fig);
  margin: 0;
}
/* A revelação do herói é palavra a palavra na headline E na subheadline, e
   quem cria estes spans é o `main.js` (`fatiarPalavras`). `inline-block` é
   obrigatório: o `filter: blur()` numa caixa inline se aplica a cada fragmento
   de linha em vez da palavra, e caixa inline também não aceita `transform`.
   Não muda medida nenhuma — os nós de espaço continuam entre os spans, então
   a linha mede o mesmo de antes e a quebra cai no mesmo lugar.
   Sem JS os dois continuam texto corrido e esta regra não casa com nada. */
.fhero .palavra { display: inline-block; }

/* O lado direito é ancorado nas DUAS linhas do H1, não empilhado por conta
   própria: o parágrafo nasce na altura da 1ª linha e o botão na altura da 2ª.
   Por isso é grade e não coluna flex — a 1ª faixa tem altura conhecida
   (uma linha do H1), então o botão cai no lugar certo mesmo que o parágrafo
   quebre em 2 ou 3 linhas. `minmax(..., auto)`: se o texto passar da faixa,
   ela cresce e empurra o botão em vez de deixar os dois se sobreporem.

   1,0385em = 0,917 (uma linha do H1) + 0,1215 (o recuo do topo da maiúscula
   dentro da caixa de linha). A conta sai das métricas do
   `manrope-variable.woff2`: upm 2000, ascender 2132, descender −600 — área de
   conteúdo 1,366em — e capHeight 1440 = 0,72em. Recuo do cap numa caixa de
   entrelinha `lh` = (lh − 1,366)/2 + 0,346. */
.fhero__side {
  flex: 0 1 500px;
  display: grid; justify-items: start;
  grid-template-rows: minmax(calc(var(--h1-fs) * 1.0385), auto) auto;
}
/* mesma conta para o parágrafo: cap do H1 a 0,1215em contra 0,183em do `<p>`
   (entrelinha 1,04). A diferença é o quanto ele desce para as duas
   maiúsculas ficarem na mesma altura — 4,5px a 1900, 3,0px a 1280. */
.fhero__side p {
  margin: calc(var(--h1-fs) * .1215 - var(--p-fs) * .183) 0 0;
  font-family: var(--display); font-weight: var(--w-thin);   /* Manrope ExtraLight */
  /* mesmo piso ausente do H1: a 375px o 1.9vw dava 7px. */
  font-size: var(--p-fs);
  /* era .875 (42/48 do Figma). Abaixo de 1.0 o descendente do "p" de
     "prazer" cai em cima da linha seguinte. 1.04 mantém o aperto
     editorial e libera a descendente. */
  line-height: var(--p-lh);
  letter-spacing: -.05em;            /* −2.4px em 48px */
  color: var(--bronze-fig);
  max-width: none;
}
/* tracking negativo é óptico: −.05em foi medido no Figma a 120px/48px, e nos
   tamanhos de mobile ele fecha as letras. Empilhado, o lado direito deixa
   de ter linha de H1 ao lado para se alinhar: a grade volta a ser duas faixas
   automáticas e o vazio vira margem. */
@media (max-width: 979px) {
  .fhero h1 { letter-spacing: -.035em; }
  .fhero__side p { letter-spacing: -.02em; --p-lh: 1.35; margin-top: 0; }
  .fhero__side { grid-template-rows: auto auto; }
  .fhero__side .fcta { margin-top: clamp(10px, 1.5svh, 16px); }
}

/* CTA encostado: rótulo e seta são duas peças que se TOCAM, cada uma com
   raio 8 nos quatro cantos. O `gap: 2px` do Figma saiu a pedido do cliente; os
   raios ficam. É a junta que faz a mesclagem: os dois cantos arredondados
   deixam uma cunha do creme em cima e embaixo da emenda e branco cheio no
   meio, que é a referência que ele mandou. Medido no print dele: cunha de 51
   linhas numa altura de 227, ou seja raio = 11,2% da altura. O nosso é 8/48 =
   16,7%, então a cunha aqui fica um pouco mais funda que a do print — o raio
   veio do `--r-sm` do Figma e vale para os outros botões da página.
   O fundo NÃO pode subir para o `.fcta`: ele pintaria por trás das cunhas e
   apagaria a junta.
   A seta perdeu a placa branca que vinha dentro do próprio arquivo
   (`figma-seta.svg` tinha um `<rect rx=8 fill=white>`). Agora o branco e o raio
   do ícone são CSS, e isso conserta um defeito antigo: a placa era 55×60
   esticada para 48×48 com `preserveAspectRatio: none`, então o raio dela
   chegava distorcido (6,98 na horizontal, 6,40 na vertical) e o canto do ícone
   era menos redondo que o do rótulo. Os dois agora são 8px iguais. */
.fcta { display: inline-flex; align-items: stretch; }
.fcta__label {
  background: #fff; border-radius: var(--r-sm);
  height: 48px; display: flex; align-items: center; padding-inline: 22px;
  font-family: var(--body); font-weight: var(--w-base);
  font-size: 16px; letter-spacing: -.05em; color: var(--bronze-fig);
  white-space: nowrap;
}
.fcta__icon {
  width: 48px; height: 48px; flex: none;
  background: #fff; border-radius: var(--r-sm);
  overflow: hidden;                  /* a janela da troca do §25 */
  display: grid; place-items: center;
}
.fcta__icon img { width: 48px; height: 48px; }

/* ------------------- PRELOADER (§34) -------------------
   Cortina do tamanho da tela que sobe revelando a pagina. Adaptado do "Words
   preloader" do Skiper UI: o mecanismo (palavras trocando + barra com barriga
   que achata na saida) e o mesmo; a temperatura e a desta marca.

   Trocas em relacao ao original: branco -> `--parede`, o mesmo creme do hero,
   entao a cortina JA E a cor da pagina e o que sobe e so a camada; peso 600 ->
   300, que e o teto que a §3.1 permite e o mesmo peso do h1; e a fonte vira
   Manrope, a display da casa.

   `display: none` por padrao: sem JS a classe `carregando` nunca entra e nada
   disto existe. Quem tira a classe e o main.js no fim da saida — ou a trava de
   6s do <head>, se o main.js nao rodar. */
.pre { display: none; }
.carregando .pre {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 99;
  background: var(--parede);
}
/* Trava o scroll enquanto a cortina esta no ar. Vai na RAIZ, nao no body: a
   armadilha §10.1 e exatamente `overflow: hidden` no body, que promove ele a
   conteiner de scroll e quebra sticky, Lenis e ScrollTrigger. No <html> a
   regra so impede a viewport de rolar, que e o que se quer. O Lenis tambem e
   parado no JS, senao ele continuaria acumulando delta por tras. */
html.carregando { overflow: hidden; }

/* A barriga: o SVG passa 300px alem da base da tela e o path pinta ate la.
   Sem `viewBox` de proposito — assim 1 unidade = 1px e o `d` que o main.js
   monta esta em pixel de verdade, sem escala para distorcer a curva. */
.pre__cortina {
  position: absolute; top: 0; left: 0;
  width: 100%; height: calc(100% + 300px);
  fill: var(--parede);
}
.pre__palavra {
  position: relative; z-index: 1; margin: 0;
  font-family: var(--display); font-weight: var(--w-base);
  font-size: clamp(32px, 5vw, 64px);
  line-height: 1.1; letter-spacing: -.035em;
  color: var(--espresso);
  opacity: 0;                      /* o main.js traz para .75, como no original */
}

/* Quem desliga motion nao ve cortina nenhuma: ela sai do caminho pelo CSS, sem
   depender do JS chegar la. O main.js tambem tira a classe e solta a timeline. */
@media (prefers-reduced-motion: reduce) {
  .carregando .pre { display: none; }
  html.carregando { overflow: visible; }
}

/* ------- REVELACAO POR LINHA, COM MASCARA (§33) -------
   A SplitText monta a estrutura em runtime: cada linha vira um <div class="linha"
   linhaN"> embrulhado num <div class="linha-mask"> com `overflow: clip` posto
   inline por ela. Nao ha nada para esconder antes do JS: os alvos estao todos
   abaixo da dobra, atras de um herói de 100svh, e quem esconde e o `gsap.set`
   de visibilidade — mesmo criterio do reveal padrao (§68).
   A folga da mascara NAO esta aqui: ela e calculada por elemento no main.js a
   partir das metricas da fonte, porque depende do line-height de cada um. */
.linha { will-change: transform; }
/* Enquanto esta fatiado, o alvo vira coluna flex. Nao e enfeite: as mascaras
   sao irmas adjacentes e levam margem negativa para devolver ao layout a folga
   que a linha ganhou de padding. Margem de irmao COLAPSA — entre duas negativas
   o CSS pega a mais negativa, nao a soma, e a folga de cima nunca voltaria: cada
   linha ficaria 0,0345em longe demais. Margem de item flex nao colapsa.
   Sai sozinho quando o main.js desmonta a fatia, no fim da animacao. */
.fatiado { display: flex; flex-direction: column; }

/* ---------------------- IMAGENS SANGRANDO ---------------------- */
/* o coração da direção: a imagem ignora o container e vai até a borda */
/* --sbw é a largura da barra de rolagem, medida em JS: 100vw a inclui e
   sozinho provocaria scroll horizontal */
.bleed {
  position: relative;
  width: calc(100vw - var(--sbw, 0px));
  margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2);
  margin-block: var(--s10);
  overflow: hidden;
}
@media (max-width: 809px) { .bleed { margin-block: var(--s8); } }
.bleed img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
/* fonte vertical numa faixa larga corta muito: a altura da faixa e o
   enquadramento são regulados por imagem, não por um valor único */
.bleed { height: clamp(380px, 62vh, 720px); }
.bleed--wide { height: clamp(320px, 56vh, 620px); }
.bleed img { object-position: 50% 32%; }

.bleed figcaption {
  position: absolute; left: 0; right: 0; bottom: var(--s7);
  color: var(--parede);
}
.bleed figcaption span {
  display: block; font-size: var(--t-body); line-height: 1.5;
  text-shadow: 0 1px 24px rgba(43,36,30,.65);
}

/* dois retratos, alturas desiguais — o vazio faz o ritmo.
   A proporção vem do arquivo (3/4); altura fixa cortaria os rostos. */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) clamp(24px, 6vw, 120px); align-items: start; }
@media (max-width: 809px) { .duo { grid-template-columns: 1fr; gap: var(--s8); } }
.duo__item { display: flex; flex-direction: column; gap: var(--s4); }
.duo__item img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--r-md); max-height: 70vh;
}
.duo__item--low { margin-top: clamp(0px, 10vw, 140px); }
.duo__item figcaption { font-size: var(--t-meta); color: var(--tinta-med); }

/* ---------------------------- LISTA (§74) ---------------------------- */
.lista { margin-top: var(--s8); }
.lista li {
  display: grid; grid-template-columns: 64px var(--title) minmax(0, 1fr);
  gap: var(--s5) clamp(24px, 6vw, 120px);
  align-items: baseline;
  padding-block: var(--s7);
  border-top: 1px solid var(--borda-leve);
}
.lista li:last-child { border-bottom: 1px solid var(--borda-leve); }
@media (max-width: 979px) {
  .lista li { grid-template-columns: 44px minmax(0, 1fr); gap: var(--s3) var(--s5); }
  .lista li p { grid-column: 2; }
}
.lista__n { font-size: var(--t-micro); font-weight: var(--w-strong); letter-spacing: .16em; color: var(--bronze); font-variant-numeric: tabular-nums; }
.lista h3 { font-weight: var(--w-base); font-size: clamp(20px, 2vw, 26px); letter-spacing: -.03em; }
.lista p { font-size: var(--t-body); line-height: 1.5; }

/* ---------------------------- PESSOAS ---------------------------- */
/* quatro especialistas, quatro colunas. Cai para 2 antes do pill da nav sumir
   e para 1 no telefone. A calha encolheu de 80px para 56px: com 4 colunas
   dentro de 1900px o retrato ficava estreito demais para o rosto respirar. */
.trio { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s7) clamp(24px, 3vw, 56px); margin-top: var(--s8); }
.pessoa { display: flex; flex-direction: column; gap: var(--s5); }
/* object-position vem inline por retrato: o topo da cabeca foi medido em pixel
   e o recorte 4/5 sobre um arquivo 9:16 corta 30% da altura. Este 24% e so o
   fallback para foto sem medida.

   Os quatro arquivos sao `-recorte.webp`, com alfa: o fundo de estudio saiu de
   cada foto porque os quatro eram diferentes entre si (medida a mediana dos 3%
   superiores: 246,234,222 / 243,228,212 / 224,208,189 / 249,243,234 — o do Dr.
   Bruno destoava dos outros em 22 pontos de luminancia). Quem pinta o fundo
   agora e esta linha, entao os quatro sao identicos por construcao e trocar o
   tom do conjunto e mudar um token so.

   O tom e o `--parede`, o MESMO fundo da secao (a `.cap` nao pinta nada e
   herda do body), a pedido do cliente: os retratos passam a flutuar na pagina
   em vez de ficarem dentro de uma placa. O `border-radius` continua declarado
   e fica invisivel enquanto os dois tons forem iguais — se o fundo do conjunto
   mudar para `--massa` ou `--superficie`, o canto reaparece sozinho. */
.pessoa > img {
  width: 100%; aspect-ratio: 4/5; object-fit: cover; object-position: 50% 24%;
  border-radius: var(--r-md);
  background: var(--parede);
}
/* escadinha: com 4 retratos o degrau alterna, senao vira uma fileira reta */
.pessoa:nth-child(even) { margin-top: clamp(0px, 4vw, 56px); }

/* depois do componente, senao o nth-child vence a media query (ver .burger) */
@media (max-width: 1199px) { .trio { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .trio { grid-template-columns: 1fr; }
  .pessoa:nth-child(even) { margin-top: 0; }
}
.pessoa figcaption { display: flex; flex-direction: column; gap: var(--s1); }
.pessoa figcaption b { font-family: var(--display); font-weight: var(--w-strong); font-size: var(--t-lead); letter-spacing: -.02em; }
.pessoa figcaption span { font-size: var(--t-meta); color: var(--tinta-med); }


/* ---------------------------- PALAVRAS (§35) ---------------------------- */
.citacao { display: flex; flex-direction: column; gap: var(--s2); }
/* uma linha do HTML = uma linha na tela; se rewrapar, o stagger de
   75ms do §35 perde o sentido */
.citacao p {
  font-family: var(--display); font-weight: var(--w-thin);
  font-size: clamp(20px, 2.1vw, 30px);
  line-height: 1.28; letter-spacing: -.035em;
  max-width: none; text-wrap: nowrap;
}
@media (max-width: 639px) { .citacao p { text-wrap: wrap; font-size: 20px; } }
.fonte { font-size: var(--t-meta); color: var(--tinta-fraca); margin-top: var(--s5); }
.fonte b { color: var(--tinta-med); }

/* ---------------------------- FAQ (§52) ---------------------------- */
.faq { background: var(--espresso); color: var(--parede); padding-block: var(--s10); }
@media (max-width: 809px) { .faq { padding-block: var(--s8); } }
.faq .eyebrow { color: var(--claro-50); }
.faq .dim { color: var(--claro-70); }
/* O bloco escuro inteiro sobe um degrau: texto claro sobre espresso afina
   na renderizacao e o traco some. Corpo 300 em vez de 200, titulo e pergunta
   400 em vez de 300. A hierarquia e a mesma do resto da pagina, so deslocada. */
.faq .dim, .qa__a p { font-weight: var(--w-base); }
.faq h2 { font-weight: var(--w-text); }

.qas { display: flex; flex-direction: column; max-width: 720px; }
.qa { border-bottom: 1px solid var(--claro-50); }
.qa:first-child { border-top: 1px solid var(--claro-50); }
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; gap: var(--s5);
  padding-block: var(--s6);
  /* 400 e nao 300: a pergunta e bem menor que um h2 e precisa do peso
     extra para pesar o mesmo na pagina. Continua acima da resposta. */
  font-family: var(--display); font-weight: var(--w-text);
  font-size: clamp(18px, 1.8vw, 24px); line-height: 1.28; letter-spacing: -.03em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary span { flex: 1; }

.qa__i { position: relative; width: 14px; height: 14px; flex: none; margin-top: 9px; color: var(--carvalho); }
.qa__i b, .qa__i em { position: absolute; top: 50%; left: 50%; background: currentColor; }
.qa__i b { width: 12px; height: 1px; margin: -.5px 0 0 -6px; }
.qa__i em { width: 4px; height: 4px; border-radius: var(--r-full); margin: -2px 0 0 -2px; transform: scale(0); }

.qa__a { overflow: hidden; }
.qa__a p { font-size: var(--t-body); line-height: 1.55; color: var(--claro-70); max-width: 56ch; padding-bottom: var(--s6); }

/* ---------------------------- AGENDAR ---------------------------- */
.agendar { padding-block: var(--s10); }
@media (max-width: 809px) { .agendar { padding-block: var(--s8); } }

form { display: flex; flex-direction: column; gap: var(--s6); max-width: 480px; }
form label { display: flex; flex-direction: column; gap: var(--s3); }
form label > span {
  /* 400 e nao 500: com o valor digitado em 200, o degrau de 300 fazia o
     rotulo gritar mais alto que o proprio campo. */
  font-size: var(--t-micro); font-weight: var(--w-text); letter-spacing: .18em;
  text-transform: uppercase; color: var(--tinta-fraca);
}
form input, form select {
  height: 44px; padding: 0 var(--s4);
  border-radius: var(--r-sm);
  background: var(--superficie); border: 1px solid var(--borda-leve);
  font-size: var(--t-body); font-weight: var(--w-thin);
}
form input::placeholder { color: var(--tinta-fraca); }
form input:focus, form select:focus { outline: none; border-color: var(--bronze); }

.submit {
  height: 44px; border-radius: var(--r-sm);
  background: var(--bronze); color: #fff;
  font-size: var(--t-body); font-weight: var(--w-strong);
  /* o texto virou um filho flex, entao o text-align padrao do <button> nao
     centra mais. A largura nao muda: o form e uma coluna flex e o botao ja
     era esticado por align-items: stretch. */
  display: flex; align-items: center; justify-content: center;
}
.formnote { font-size: var(--t-meta); color: var(--tinta-med); min-height: 1.2em; }
.formnote.is-err { color: #9B3B2F; }

/* ---------------------------- RODAPÉ ----------------------------
   Estrutura vinda da referência: colunas encostadas à esquerda com a
   quarta vaga, um vazio grande, e o wordmark em escala arquitetônica
   fechando embaixo. O logo deixa de ser elemento dentro de uma coluna
   e passa a ser a última imagem da página.

   Fundo espresso. O bronze do vetor (#C59662) dá 5,7:1 sobre o
   espresso contra 2,3:1 sobre o creme — no escuro o logo fica na cor
   original da marca, sem precisar de filter para clarear. */
.rodape { background: var(--espresso); color: var(--parede); padding-block: clamp(88px, 12vh, 160px) clamp(48px, 7vh, 88px); }

/* 4 trilhos, 3 ocupados: a coluna vaga à direita é o vazio da referência */
.rodape__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s9) clamp(24px, 4vw, 64px); }
@media (max-width: 979px) { .rodape__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s6); } }
@media (max-width: 639px) { .rodape__cols { grid-template-columns: 1fr; } }

/* rótulo em caixa baixa, não versal: é a diferença de tom da referência.
   Peso 400 e tracking curto — sussurro, não etiqueta de formulário. */
.rodape__label {
  font-family: var(--body); font-size: var(--t-micro); font-weight: var(--w-text);
  letter-spacing: .14em; color: var(--claro-50);
  margin-bottom: var(--s6);
}

/* links e dados na display em peso 300; o rodapé inteiro era Inter 400 */
.rodape__lista { display: flex; flex-direction: column; gap: var(--s3); }
.rodape__lista a,
.rodape__bloco {
  font-family: var(--display); font-weight: var(--w-base);
  font-size: var(--t-sub); line-height: 1.45; letter-spacing: -.02em;
}
.rodape__lista a { display: inline-block; }
.rodape__bloco { margin-top: var(--s7); color: var(--claro-70); }

/* a marca em escala arquitetônica, largura cheia do container */
.rodape__marca { margin-top: clamp(96px, 16vh, 240px); }
.rodape__logo { width: 100%; height: auto; }
/* O arquivo e so o wordmark, nos contornos da propria Manrope, recortado no
   bbox exato: o "R" comeca em x=0, entao nao ha margin-left de compensacao.
   O unico vazio que sobra embaixo e o transbordo optico do "C" (2,083 de
   104,167 = 2% da altura). Como a imagem entra com width:100%, esse transbordo
   vale 2,083/628,28 = 0,33154% da largura — e margem em porcentagem resolve
   pela largura do bloco, entao o desconto e exato em qualquer viewport. */
.rodape__marca .wordmark__sub {
  /* +73% sobre o clamp(9,.9vw,11) da regra base (tres passos de +20%): a
     assinatura ficou pequena demais contra um RECRIAR que agora tem ~303px
     de altura. Os tres degraus do clamp sobem juntos para o comportamento
     fluido nao mudar. O override fica aqui, nao na regra base, porque so o
     rodape usa essa escala.
     O teto de 19px passou de --t-lead (16) e encostou em --t-sub (20), que e
     o corpo dos links do rodape: a assinatura saiu da escala de rotulo e
     entrou na de texto. Proposital, mas fora dos tokens da §8. */
  font-size: clamp(15.552px, 1.5552vw, 19.008px);
  margin-top: calc(8px - 0.33154%);
  line-height: 1; text-indent: 0; color: var(--carvalho);
}

/* --------------------- TROCA POR PROJEÇÃO DE LAYOUT ---------------------
   O hover nao anima transform: ele muda o layout de verdade (a direcao do
   `justify-content`) e o `main.js` desenha o caminho entre o antes e o
   depois. Por isso nada aqui tem transition — quem interpola e o JS, e e
   isso que permite interromper o efeito no meio.

   Nenhuma medida de repouso muda: as caixas abaixo tem o tamanho exato que o
   conteudo ja ocupava, entao o botao parado continua identico. */

/* rotulo: duas copias empilhadas numa janela de uma linha */
/* 1.6em nao e numero solto: e a entrelinha do proprio body (linha 99), ou
   seja a janela tem exatamente uma linha de altura. Precisa dessa folga: a
   Manrope se estende 1,366em de topo de ascendente a base de descendente e a
   Inter 1,210em, medidos no hhea dos .woff2. Com 1.5em a Manrope ficaria a
   1px de raspar o "q" de "Marque". */
.swap {
  display: flex; flex-direction: column;
  height: 1.6em; overflow: hidden;
  justify-content: flex-start;       /* repouso: a 1a copia aparece */
}
[data-fx].is-hovered .swap { justify-content: flex-end; }   /* hover: a 2a sobe */
.swap__t {
  height: 1.6em; line-height: 1.6; flex: none;
  display: flex; align-items: center;
  white-space: nowrap;
  transform-origin: 0 0;             /* a projecao do JS depende deste canto */
}

/* seta: duas copias lado a lado numa janela de 48px.
   O gap de 32px garante que a copia escondida fique inteira fora da janela
   antes e depois da troca; o `.fcta__icon` ja tem overflow: hidden. */
.fcta__setas {
  width: 48px; height: 48px;
  display: flex; align-items: center; gap: 32px;
  justify-content: flex-end;         /* repouso: a 2a copia aparece */
}
[data-fx].is-hovered .fcta__setas { justify-content: flex-start; }
.fcta__setas img { flex: none; transform-origin: 0 0; }

/* ---------------------------- HOVER DE LINK ----------------------------
   Uma linguagem so para todo link que e texto: a opacidade cai a 0,7.

   NAO entra nos dois CTA (`.fnav__cta`, `.fcta__label`, `.fcta__icon`): eles
   tem a troca de rotulo do §25, e opacidade junto faria o texto subir e apagar
   ao mesmo tempo. Foi exatamente por isso que o hover antigo saiu do main.js.

   `@media (hover: hover)`: no toque o hover fica presa depois do tap. O
   `:active` fica de fora da media query de proposito, para dar o mesmo
   retorno no dedo.

   O rodape tinha hover de cor (`--carvalho`); virou opacidade para nao haver
   dois sinais diferentes na mesma pagina. */
.fnav__pill a, .fnav__mark, .menu a, .rodape__lista a {
  transition: opacity .25s;
}
@media (hover: hover) {
  .fnav__pill a:hover, .fnav__mark:hover, .menu a:hover, .rodape__lista a:hover { opacity: .7; }
}
.fnav__pill a:active, .fnav__mark:active, .menu a:active, .rodape__lista a:active { opacity: .7; }
/* teclado enxerga o mesmo estado */
.fnav__pill a:focus-visible, .fnav__mark:focus-visible,
.menu a:focus-visible, .rodape__lista a:focus-visible { opacity: .7; }

/* ---------------------------- MOTION OFF ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}