/* ============================================================
   LAYOUT 3 — "Medida"
   Camada de layout sobre o kit MODERNO (Cacau e Medida).

   A diferença contra os Layouts 1 e 2 não está aqui: está no kit.
   Este arquivo só arruma os blocos do jeito que a referência arruma —
   escuro longo, claro curto, e a foto sempre acompanhada de um número.
   ============================================================ */

/* ---------- Largura da página ----------
   Medido na referência: a margem até o conteúdo é 3,5% da largura, e a
   foto do hero encosta na borda direita. No nosso estava 10,1% — quase
   três vezes mais — porque o Layout 3 herdava os 76rem do núcleo.

   Aqueles 76rem foram dimensionados para LEITURA, no kit editorial. Este
   kit é de produto: ele quer a tela. A conta vira porcentagem em vez de
   medida fixa, para a margem continuar em 3% em qualquer monitor, com
   um teto para não esparramar em tela de 27 polegadas.

   O conforto de leitura não se perde: quem protege o texto é o `.prosa`,
   que continua travado em 38rem. */
body {
  --largura-pagina: min(94vw, 104rem);
  --respiro-lateral: 0rem;
  /* Quanto a foto do hero sobra para a seção de baixo. Mora no body e
     não no hero porque a seção de baixo também lê: ela sobe essa medida. */
  --sobra-max: 10rem;
}
@media (max-width: 48rem) {
  body { --largura-pagina: 100%; --respiro-lateral: 1.25rem; }
}

/* ---------- Respiro vertical ----------
   96px no topo e 96px na base, no computador, medidos ATÉ A LETRA (ver a
   folga do título logo abaixo). Decisão do Daniel (02/10), em duas
   rodadas de print: 64/64 primeiro, "para haver simetria"; depois achou
   fino e pediu um meio-termo entre o 64 e o 120/128 de antes — 96.

   O caminho até aqui, porque ele contradiz uma regra medida:
     · eram 96px de cada lado; a auditoria subiu para 120 no topo e 128
       na base, pela faixa de respiro macro da high-end-visual-design
       (96 a 160px) e pela assimetria que ela recomenda;
     · na prática, o vazio entre duas seções é a SOMA do fim de uma com o
       começo da outra: 248px. O Daniel viu os vazios e pediu menos;
     · o 64 veio da passagem do hero para "Primeira consulta", que ele
       aprovou no print e que continua em 64 — é costura, não corte;
     · 64 nas outras ficou fino; 96 é o meio do caminho.
   A faixa da skill é para página de produto com seções longas. Página de
   consultório tem seções curtas, e o vazio pesa mais que o respiro.

   O 96 É O VALOR DO NÚCLEO (`.secao`, a partir de 48rem), e por isso o
   layout não repete a regra: a decisão de hoje foi voltar ao padrão do
   sistema. O que é deste layout é a folga do título, logo abaixo. */

/* A FOLGA DO TÍTULO. A caixa do título começa acima da maiúscula (meia
   entrelinha + o espaço da fonte acima do "O": 12px no corpo de 56px que
   ele tem a partir de 48rem). Seção que termina em card ou botão vai até
   a borda da caixa; a que começa com título começaria em 96 + 12 ao olho.
   O título sobe a folga dele, e o respiro fica medido ATÉ A LETRA, dos
   dois lados. O Daniel propôs a conta: "40 de margem + 10 de folga dá 50".

   Em `em`, no próprio título, e não 12px descontados da seção: a folga é
   da fonte, então cresce e encolhe com ela, e uma regra só serve todas
   as seções que abrem com título — inclusive a passagem do hero, que
   antes repetia a conta à mão.

   Era um `text-box: trim-start` antes. Dá o mesmo na tela, mas não
   funciona no Firefox. Só no computador: no celular o Daniel ainda vai
   conferir, e lá a folga é de ~6px. */
@media (min-width: 48rem) {
  .secao > .pagina > .titulo:first-child { margin-top: -0.214em; }
}

/* ---------- 01 · Barra ---------- */
/* Tarja fina. Na referência a barra é uma linha discreta sobre o próprio
   hero, não um bloco. e2 no lugar de e4, e o botão daqui é menor que o do
   corpo da página — ele é atalho, não a ação principal. */
.topo { background: var(--cacau-fundo); padding-block: var(--e2); }
.topo .botao { min-height: 36px; padding: var(--e2) var(--e4); font-size: var(--texto-micro); }

/* Medido a 390px: este botão saía com 37px de altura — abaixo do mínimo
   de 44px de alvo de toque, e sendo o PRIMEIRO CTA que o visitante vê.

   O `min-height: 48px` do núcleo estava certo; a linha acima o derrubava
   para 36px, e com razão: na referência a barra é uma tarja fina.

   O mínimo de 44px é regra de DEDO, não de cursor. Então a tarja continua
   fina no desktop e os 44px valem onde existe toque.

   AS DUAS CONDIÇÕES, com vírgula (que em media query é OU), e cada uma
   cobre o furo da outra:

     `pointer: coarse`   pega o aparelho pelo tipo de apontador. Pega
                         tablet largo, que é dedo numa tela grande.
     `max-width: 48rem`  pega a tela estreita. Existe porque a primeira
                         eu NÃO CONSIGO MEDIR aqui — o Chrome de desktop
                         do Playwright não casa `coarse`, então a regra
                         ficaria correta e não verificada. Esta eu meço.

   Regra que eu não consigo medir é regra em que eu não confio: já entreguei
   três coisas nesta página que o CSS declarava e a tela não mostrava. */
@media (pointer: coarse), (max-width: 48rem) {
  .topo .botao { min-height: 44px; padding-inline: var(--e6); }
}
.topo-conteudo { display: flex; align-items: center; justify-content: space-between; gap: var(--e4); flex-wrap: wrap; }
.topo-marca { font-family: var(--fonte-display); font-weight: 700; font-size: var(--texto-md); letter-spacing: -0.03em; color: var(--sobre-escuro); }
.topo-registro { font-size: var(--texto-micro); color: var(--sobre-escuro-fraco); display: none; }
@media (min-width: 62rem) { .topo-registro { display: block; } }

/* ---------- 02 · Hero ----------
   Terceira forma de hero do sistema. O Layout 1 usa dividido colado nas
   bordas; o 2, o mesmo. Aqui a foto fica DENTRO do container, com o
   escuro respirando em volta — é o que faz a página parecer software e
   não folheto, e é o gesto central da referência. */
/* NÃO usar a classe `.hero`: o núcleo já define ela como flex de 88svh
   com align-items:flex-end, e a grade daqui viraria item de flex e
   encolheria até o conteúdo — o mesmo defeito que mordeu no Layout 2.
   Nome próprio resolve e deixa o motivo escrito. */
/* `background-color` e NAO o atalho `background`: o atalho zera o
   background-image que a classe .superficie-* traz do kit, e como o
   layout carrega depois, ele vence. Foi assim que a luz sumiu do
   hero inteiro sem ninguem notar. */
.hero-medida { background-color: var(--cacau); padding-block: var(--e12) var(--e20); }

/* ---------- A foto sobra para a seção de baixo ----------
   Do hero para "Primeira consulta" não há corte de cor: o retrato,
   alinhado pelo TOPO com o texto, sobra um pouco para baixo do hero e
   pousa no creme. Um detalhe costurando as duas seções em vez de uma
   linha separando — e a costura é o rosto de quem atende.

   QUANTO sobra: no celular, 18% da altura da foto, que é o que mede no
   desenho do Daniel (02/10), com teto de --sobra-max. No computador, a
   partir de 60rem, é FIXO em --sobra-max (160px): o título da seção de
   baixo sobe para o lado da sobra e precisa saber exatamente quanto.

   COMO: o fim do hero é pintado no creme da seção seguinte, a partir de
   18% acima da BASE DA FOTO (o ::before da figura, esticado à largura da
   tela). A base sai sem medir nada: a figura é um contêiner e a foto é
   1:1, então ela está em 100cqw. O que as tentativas anteriores ensinaram:
     · margem negativa na foto: o cruzamento dependia da altura do texto,
       e em 1024px a foto nem chegava a atravessar;
     · faixa medida a partir do FUNDO do hero: no celular o cartão "5,0"
       desce para baixo da foto, e quem atravessava era o cartão;
     · foto alinhada pela base: atravessava certo, mas abria vão em cima
       e embaixo da foto. O Daniel desenhou como queria: topo alinhado.

   A faixa desce 1px ALÉM do fim do hero. O hero termina numa fração de
   pixel (971,55px em 1024), e nessa última linha o marrom e o creme se
   misturavam pela metade: aparecia um risco na emenda.

   A faixa repete o começo da `.secao-passos` — creme-fundo com a luz de
   topo da superfície clara — e a seção de baixo perde a luz dela, senão
   a luz acenderia duas vezes, uma de cada lado da emenda. */
.hero-medida {
  position: relative;
  padding-bottom: 0;
  overflow-x: clip;  /* corta a faixa creme, que sobra para os lados */
}
.hero-figura { container-type: inline-size; }
.hero-figura::before {
  content: ""; position: absolute; z-index: -1;
  /* Sobra para os dois lados e o hero corta (overflow-x: clip). Centrar
     com 50% − 50vw só funciona quando a figura ocupa a tela inteira — no
     computador ela é a coluna da direita, e a faixa começava no meio. */
  left: -100vw; right: -100vw;
  top: calc(100cqw - min(100cqw * 0.18, var(--sobra-max)));
  bottom: -1px;
  background-color: var(--creme-fundo);
  background-image: linear-gradient(to bottom,
    color-mix(in srgb, var(--luz) 7%, transparent) 0, transparent 12rem);
}
.hero-medida + .secao-passos { background-image: none; }
/* Contexto próprio, para o z-index -1 da faixa ficar ACIMA do fundo do
   hero e abaixo da foto. */
.hero-grade { position: relative; z-index: 1; }
/* 1fr : 1.6fr sai de medição, não de gosto: no perfil de brilho do hero da
   referência, a foto começa em 38% da largura, ou seja ocupa 62%. Eu tinha
   feito 1.05fr, que dá 51% — a foto ficava pequena e o hero perdia o peso
   que é a assinatura dela. */
.hero-grade { display: grid; gap: var(--e12); }
@media (min-width: 60rem) {
  .hero-grade { grid-template-columns: 1fr 1.6fr; gap: var(--e16); align-items: stretch; }
  /* A coluna de texto começa e termina na MESMA altura da foto, em vez de
     ficar centralizada contra ela. É o que a referência faz, e o efeito é
     de painel emparelhado em vez de legenda ao lado de uma imagem.
     Exige os três grupos no HTML (título / lista / botão): com os cinco
     elementos soltos, o space-between afastaria a sobrelinha do título. */
  .hero-texto { display: flex; flex-direction: column; justify-content: space-between; }
  /* Margem MÍNIMA, não zero: o space-between só abre espaço quando a foto
     é mais alta que o texto. De 1024 a 1440px ela não é, e o subtítulo
     colava na lista (medido: 0px; o Daniel viu, 02/10). Os mesmos 32px
     do celular, e a sobra de altura se soma a eles. */
  .hero-texto .hero-sub { margin-bottom: var(--e8); }
  .hero-acoes { margin-top: 0; }
  /* O texto para ANTES da faixa creme, com respiro: o botão claro não
     pode cair no creme. e20 (80px) e não e12: com 48px, e 32px do outro
     lado até o título, a passagem ficava apertada. Escolhido no print,
     entre 64/48 e 80/64 (02/10). */
  .hero-texto { padding-bottom: calc(var(--sobra-max) + var(--e20)); }

  /* A foto ESTICA até a altura do texto quando ele é maior: no mínimo
     quadrada (100cqw), mais alta só quando precisa. Em 1024px o texto
     passava da foto, ela terminava antes do hero, e a faixa — que segue
     a base da foto — subia por cima do botão. Esticada, a base da foto
     é sempre o fim do hero, e a faixa se mede dali. */
  /* E não passa da TELA: o botão fica sempre 240px acima da base da foto
     (a sobra de 160 + o respiro de 80), e com ela quadrada a 1366×657 ou
     1280×720 — as janelas de notebook mais comuns — ele caía fora da
     primeira tela; na janela de 865px do Daniel ficava no limite. Com a
     foto no máximo a altura da janela + 100px, o botão fica ~40px acima
     da borda de baixo. Mais larga que alta nesse caso, ela recorta em
     cima e embaixo, e o --foco segura o rosto.

     COMO: a foto não pode decidir a altura sozinha — os atributos
     width/height do HTML (896×896) dão a ela uma proporção quadrada que o
     navegador usa ao medir a linha, e um min-height na foto não a
     encolhe. Então a foto PREENCHE a figura (absoluta), e quem dá a altura
     é um espaçador: padding-top em % é da LARGURA, então min(100%, teto)
     é "quadrada, mas no máximo a janela + 100px". Texto mais alto que
     isso estica a figura, e a foto acompanha. */
  .hero-figura img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .hero-figura::after { content: ""; display: block; padding-top: min(100%, calc(100svh + 6.25rem)); }
  /* No computador a sobra é FIXA (--sobra-max), não os 18%: o título da
     seção de baixo sobe para o lado dela, e para isso a seção de baixo
     precisa saber exatamente quanto subir. Em 1600px dá o mesmo. */
  .hero-figura::before { top: auto; height: calc(var(--sobra-max) + 1px); }

  /* O TÍTULO DE "PRIMEIRA CONSULTA" SOBE para o lado da foto que sobra.
     Antes ele vinha depois dela, com o recuo de topo de sempre, e
     embaixo do hero ficavam dois vazios: ~300px à esquerda, 120px à
     direita (o Daniel viu no print, 02/10). Subindo, a foto e o título da
     seção seguinte ficam lado a lado — a costura fica mais clara ainda.

     A seção começa --sobra-max mais cedo, POR BAIXO da sobra (mesma cor,
     não se vê a emenda), e o conteúdo dela sobe acima do hero no
     empilhamento, senão a faixa creme do hero cobriria o título.
     O título cabe na largura da coluna de texto do hero (1fr de 2,6fr,
     menos o vão), para não bater na foto. Em 1024px isso o quebra em 5
     linhas; preferido a ter a passagem diferente por largura. */
  .hero-medida + .secao-passos {
    margin-top: calc(-1 * var(--sobra-max));
    /* 64px do fim do marrom ATÉ A LETRA do título (a folga ele mesmo
       desconta, ver o topo do arquivo). Fica em 64 e não nos 96 das
       outras: é costura, não corte. */
    padding-top: var(--e16);
  }
  /* A `.pagina` sobe por cima da sobra da foto, e ela ocupa a largura
     toda: sem isto, cobria a base da foto e o cartão "5,0", e roubava o
     clique e a seleção de texto deles. Só os filhos recebem o ponteiro. */
  .hero-medida + .secao-passos > .pagina { position: relative; z-index: 2; pointer-events: none; }
  .hero-medida + .secao-passos > .pagina > * { pointer-events: auto; }
  .hero-medida + .secao-passos .titulo { max-width: calc((100% - var(--e16)) / 2.6); }
}
/* JANELA BAIXA (notebook de 1366×657, 1280×720). Ali quem decide a
   altura do hero é o TEXTO (823px), não a foto, e o botão caía 26px
   abaixo da primeira tela. Aperta só os vãos — recuo do topo, margens
   do título e do subtítulo, e o ar entre os itens da lista — sem mexer
   no tamanho de letra. ~70px no total. */
@media (min-width: 60rem) and (max-height: 50rem) {
  .hero-medida { padding-top: var(--e6); }
  .hero-titulo { margin-bottom: var(--e4); }
  .hero-texto .hero-sub { margin-bottom: var(--e6); }
  .hero-texto .lista-regua li { padding-block: var(--e2); }
}

/* No celular a foto vem depois do texto e é o último elemento do hero:
   ela já termina no fundo, e a faixa passa por trás dela. */

.hero-titulo { max-width: 13ch; margin-bottom: var(--e8); }
.hero-sub { color: var(--sobre-escuro-medio); max-width: 38ch; margin-block: var(--e8); }
.hero-acoes { margin-top: var(--e8); }

/* A foto e o cartão de dado. O cartão encosta na quina de baixo:
   fora da foto ele vira legenda, dentro dela vira evidência. */
/* 1:1 desde 02/10. Era 6:5, medido na referência, porque a 3:4 esticava
   o hero demais. Com a foto sobrando para baixo do hero, ela precisa de
   um pouco mais de altura do que cabe no escuro — o Daniel pediu "um
   pouco mais comprida, mas não tanto". O quadrado é o meio do caminho, e
   a fonte é a mesma 3:4 do Layout 2, cortada da cabeça à cintura. */
.hero-figura { position: relative; margin: 0; }
.hero-figura img {
  width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; object-position: var(--foco, 50% 30%);
}
.hero-dado { position: absolute; right: 0; bottom: 0; min-width: 14rem; }
@media (max-width: 30rem) { .hero-dado { position: static; margin-top: -1px; } }

/* A FAIXA DE MEDIDAS (2009 · 2011 · CRO) SAIU em 02/10. Entre o hero e
   "Primeira consulta" ela era mais um corte de cor, e o que dizia já
   estava na página: o CRO em quatro lugares, a especialização em dois. O
   "desde 2009" foi para a lista de formação. O número em lavanda, que é
   a assinatura do kit, continua no cartão do hero. */

/* ---------- 04 · Passos, na seção clara ----------
   A pausa. Depois de dois blocos escuros longos, o claro é alívio —
   e é por isso que ele é curto. */
/* CARDS, adaptados do "notification" do uiverse (SouravBandyopadhyay,
   MIT). Do original entram três coisas e saem quatro.

   ENTRA  a barra de acento na lateral esquerda
   ENTRA  o empurrãozinho escalonado do conteúdo no hover — barra 2px,
          título 3px, texto 5px. É esse descompasso que dá a sensação de
          o card inteiro se inclinar na direção do cursor, e não de três
          coisas deslizando juntas.
   ENTRA  o brilho suave que acende por trás

   SAI    `border-radius: 1rem`, por decisão de kit
   SAI    a borda de 1px feita com `:before inset` e fundo mais escuro —
          o Daniel pediu sem borda
   SAI    o gradiente azul (#2eadff → #7e61ff), que é cor de outro projeto
   SAI    `width: 18rem; height: 8rem` fixos, que quebram em texto maior
          ou em português, que é ~20% mais longo que inglês

   A barra é `--cacau` e não um acento novo: é a marca de régua do kit,
   e manter o acento lavanda reservado ao número medido é regra do kit. */
/* A TEXTURA SAIU DESTA SEÇÃO. O Daniel viu e foi direto: "ficou muita
   coisa". Estava certo — com onda no fundo, vidro, barra, brilho e
   empurrão no hover, eram cinco acontecimentos disputando um bloco que
   existe para ser a PAUSA da página.

   E tirar a textura obrigou a repensar o card, porque ele dependia dela:
   sendo 42% translúcido sobre creme, sem nada atrás ele ficava exatamente
   da cor do fundo. Sobrariam a barra e o fio de brilho.

   A saída não é borda — o Daniel pediu sem — é a ESCADA DE SUPERFÍCIES,
   o mesmo mecanismo dos 74 DESIGN.md que a gente já usou no escuro: a
   seção desce meio degrau, para o creme mais quente, e o card fica no
   tom mais claro. O card sobe sem precisar de linha em volta.

   O `backdrop-filter` saiu junto: sem nada atrás ele não borra nada e só
   custa GPU. Efeito que não se vê e se paga é o pior negócio possível. */
.secao-passos { background-color: var(--creme-fundo); }

.passo {
  position: relative;
  /* O brilho tem `z-index: -1`, e sem isto ele desce ATRÁS do fundo
     opaco do card e some. Funcionava por acaso enquanto o card era
     translúcido, e durante a entrada, quando o `transform` do revelar
     isolava o card de graça. Depois de revelado, sumia. Conferido no
     print com hover, antes e depois. */
  isolation: isolate;
  padding: var(--e6) var(--e6) var(--e8) var(--e8);
  /* O degrau de cima da escada, opaco. O card é o creme mais claro e a
     seção é o creme mais quente — a diferença entre os dois é o que faz
     o card existir, sem borda e sem sombra. */
  background-color: var(--creme);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9);
  transition: background-color var(--duracao-hover) var(--curva),
              transform 320ms var(--curva);
}
/* A barra. `scaleX` e não `width`: largura força recálculo de layout a
   cada quadro, transform roda na GPU. O `transform-origin: left` é o que
   faz ela crescer para a direita em vez de pelos dois lados. */
.passo::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--cacau);
  transform-origin: left;
  transition: transform var(--duracao-hover) var(--curva);
}
/* O brilho, que acende por trás do conteúdo e some ao sair. */
.passo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 60% at 18% 0%,
    color-mix(in srgb, var(--luz) 55%, transparent) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 320ms var(--curva);
  pointer-events: none;
}
/* `.em-foco` é o hover do celular: o card que passa pelo meio da tela,
   marcado pelo foco.js. Tudo que vale para um vale para o outro. */
/* E o card CRESCE. 1,02 e não o 1,03 do botão: o card é mais largo
   (540px → +11px) e tem dois vizinhos, e quanto maior o elemento, menos
   escala ele precisa para o olho registrar o salto. */
.passo:hover, .passo.em-foco {
  background-color: color-mix(in srgb, var(--luz) 7%, var(--creme));
  transform: scale(1.02);
}
.passo:hover::before, .passo.em-foco::before { transform: scaleX(1.8); }
.passo:hover::after,  .passo.em-foco::after  { opacity: 1; }

/* O empurrão escalonado. Em `transform`, que é o que a diretriz da Vercel
   manda animar, e nunca em `margin` ou `left`. */
.passo-num, .passo-titulo, .passo p {
  transition: transform var(--duracao-hover) var(--curva);
}
.passo:hover .passo-num,    .passo.em-foco .passo-num    { transform: translateX(3px); }
.passo:hover .passo-titulo, .passo.em-foco .passo-titulo { transform: translateX(3px); }
.passo:hover p,             .passo.em-foco p             { transform: translateX(5px); }

.passo-num {
  font-family: var(--fonte-mono); font-size: var(--texto-peq);
  letter-spacing: 0.1em; color: var(--tinta-fraca);
  padding-bottom: var(--e3); border-bottom: 1px solid var(--areia);
  margin-bottom: var(--e4);
}
/* Peso 600, e não 700, e este é o item 1 da folha chegando onde ele de
   fato faltava.

   Consertar o @import do kit era necessário e não suficiente: os pesos
   500 e 600 passaram a existir, mas nada mais os pedia. O `.display` e o
   `.titulo` do núcleo pediam 600 e o kit sobrescrevia com 700; o outro
   600 era a `.sobrelinha`, o rótulo em caixa alta que a gente removeu da
   página como template chrome.

   O problema real estava aqui: `.titulo` (título de SEÇÃO) a 700, e este
   — que é o nível ABAIXO — também a 700. Dois degraus de hierarquia com
   o mesmo peso não são dois degraus. Título de seção segue 700 porque
   ele tem que ter presença; o subtítulo desce um passo e a hierarquia
   passa a ter quatro níveis em vez de dois. */
.passo-titulo { font-family: var(--fonte-display); font-size: var(--texto-md); font-weight: 600; letter-spacing: -0.02em; margin-bottom: var(--e2); }
.passo p { color: var(--tinta-fraca); font-size: var(--texto-peq); line-height: 1.6; }

/* ---------- 05 · Tratamentos, em linhas alternadas ----------
   Nem card nem lista: linha inteira, com o número mono à esquerda. */
/* Sem `padding: 0` aqui: o recuo da esquerda é o espaço da barra de luz,
   e quem define é a `.lista-luz` do kit. */
.tratamentos {
  list-style: none; margin-top: var(--e12);
  /* A linha é larga: o brilho precisa atravessar o título e começar a
     sumir sobre a descrição, senão acaba antes de dizer qual linha é. */
  --escorrido-largura: 60%;
}
.tratamento {
  display: grid; gap: var(--e2); padding-block: var(--e6);
  border-top: 1px solid var(--borda-no-escuro);
  /* O hover daqui é a `.lista-luz` do kit: a barra desliza até a linha.
     O fundo que acendia por linha saiu — era da época antes das
     referências, e com a luz seriam dois destaques no mesmo gesto. */
  /* Sem o truque de margem negativa + padding para o fundo sangrar além
     do texto: este layout roda com --respiro-lateral: 0 no desktop, e
     margem negativa ali empurra para fora do container. A medição de
     hoje confirma que a página não tem rolagem horizontal no celular
     (documento 380px, tela 390px) e não vou ser eu a introduzir uma. */
}
.tratamento:last-child { border-bottom: 1px solid var(--borda-no-escuro); }
@media (min-width: 48rem) {
  /* A quarta coluna é a amplificação: a duração em lavanda, alinhada à
     Três colunas: ordem, título, descrição. A quarta (duração) foi
     revertida do HTML e esta regra tinha ficado para trás, reservando
     192px vazios em toda linha e espremendo o título. */
  .tratamento { grid-template-columns: 3rem 17rem 1fr; gap: var(--e8); align-items: baseline; }
}

.tratamento-ordem {
  font-family: var(--fonte-mono); font-size: var(--texto-peq); color: var(--sobre-escuro-fraco);
  transition: color var(--duracao-hover) var(--curva);
}
/* Na linha acesa o número pega a cor da luz, como o ✓ da outra lista.
   Ele fica no canto esquerdo, onde o escorrido é mais forte: a cor foi
   conferida contra esse fundo, não contra o cacau puro. */
.tratamento.luz-ativo .tratamento-ordem { color: var(--luz); }
/* Mesmo degrau que o `.passo-titulo`: nível abaixo do título de seção. */
.tratamento-titulo { font-family: var(--fonte-display); font-size: var(--texto-md); font-weight: 600; letter-spacing: -0.02em; color: var(--sobre-escuro); }
.tratamento p { color: var(--sobre-escuro-medio); font-size: var(--texto-peq); line-height: 1.6; }

/* ---------- 06 · Quem atende ---------- */
.pessoa-grade { display: grid; gap: var(--e12); align-items: center; }
@media (min-width: 60rem) { .pessoa-grade { grid-template-columns: 0.85fr 1fr; gap: var(--e16); } }
.pessoa-figura { position: relative; margin: 0; }
.pessoa-figura img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.pessoa-dado { position: absolute; left: 0; bottom: 0; }
.pessoa-bio { color: var(--tinta-fraca); font-size: var(--texto-md); line-height: 1.6; margin-block: var(--e6); }

/* A FAIXA DE FOTO larga (16:7, sangrando) SAIU em 02/10. Mostrava a
   mesma sala de atendimento que a foto B do mosaico: antes ou depois
   dele, a página repetia o cômodo, e nenhuma posição funcionava. No
   celular ela já era uma tira de 170px. O mosaico mostra o lugar uma
   vez só. */

/* ---------- 05 · O consultório, em mosaico ----------
   Adaptado da Costa Daher. Proporções do Flow, não da referência: 4:3
   nas três deitadas e 9:16 na estreita, para nenhuma foto gerada ser
   cortada. Foto de cliente real entra por `object-fit` — o espaço
   recorta a foto, não o contrário.

   Sem raio (decisão de kit) e sem hover: é para olhar, não para clicar. */
.mosaico-foto { margin: 0; }
.mosaico-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.mosaico-d img { aspect-ratio: 9 / 16; }

/* CELULAR: a ordem do HTML. Texto, A e B na largura inteira; D e C lado
   a lado, na mesma divisão do computador. */
.mosaico-grade {
  display: grid;
  grid-template-columns: 11fr 21fr;
  gap: var(--e3);
  align-items: start;
}
.mosaico-texto, .mosaico-a, .mosaico-b { grid-column: 1 / -1; }
.mosaico-texto { margin-bottom: var(--e8); }
.mosaico-texto .conduz { margin-top: var(--e4); max-width: 34ch; }

/* COMPUTADOR: duas colunas quase iguais. A esquerda é A em cima e D + C
   embaixo (11fr + 21fr); a direita é o texto e B (33fr).

   O texto vem EM CIMA, e não embaixo de B como na Costa Daher. Com a
   foto primeiro, a faixa larga e a cadeira eram duas fotos inteiras
   seguidas antes de o título dizer do que se tratava — o Daniel viu e
   inverteu. Ele assenta no PÉ da primeira linha (`align-self: end`),
   logo acima de B: no topo, abriria um vão de ~400px entre ele e a foto.

   O desnível continua, ao contrário: agora é a coluna da direita que
   termina mais baixo (B é mais alta que D), e o canto vazio fica em cima,
   à direita, como respiro. */
@media (width >= 48rem) {
  .mosaico-grade {
    grid-template-columns: 11fr 21fr 33fr;
    grid-template-areas:
      "a a t"
      "d c b";
    column-gap: var(--e6);
    row-gap: var(--e6);
  }
  .mosaico-a     { grid-area: a; }
  .mosaico-b     { grid-area: b; }
  .mosaico-c     { grid-area: c; }
  .mosaico-d     { grid-area: d; }
  .mosaico-texto { grid-area: t; align-self: end; margin: 0; padding: 0 0 var(--e4) var(--e4); }
}

/* ---------- 07 · Avaliações ---------- */
/* A ressalva das páginas do Daniel ("depoimentos voluntários, retirados
   do Google"), em uma linha. Dá lastro aos depoimentos e casa com o
   cartão 5,0 do hero. Voz baixa: é nota, não título. */
.depoimentos-nota {
  margin-top: var(--e3);
  font-family: var(--fonte-mono); font-size: var(--texto-micro);
  letter-spacing: 0.06em; color: var(--sobre-escuro-fraco);
}
/* ---------- Carrossel de depoimentos ----------
   Rolagem horizontal com encaixe, e ZERO JavaScript: scroll-snap faz o
   trabalho todo. Três vantagens sobre a grade que estava aqui:
   cabem os seis sem esticar a página, o quarto card aparecendo pela
   direita avisa que tem mais (que é o truque da referência), e no
   celular vira gesto natural em vez de seis blocos empilhados.

   A sangria à direita é de propósito: card cortado pela borda lê como
   "continua", card terminando certinho lê como "acabou". */
.depoimentos {
  display: flex; gap: var(--e6); margin-top: var(--e12);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-padding-left: var(--respiro-lateral);
  padding-bottom: var(--e6);
  scrollbar-width: thin;
  scrollbar-color: var(--cacau-claro) transparent;
}
/* Card ELEVADO, não afundado. Medido antes: usava --cacau-fundo (#2C170E)
   dentro de uma seção --cacau (#49291B) — mais escuro que o próprio
   fundo em que estava. A cor, o fio e o brilho de topo agora vêm do kit,
   pela `.superficie-card`, então o layout não repete valor de cor. */
.depoimento {
  margin: 0; padding: var(--e6);
  flex: 0 0 min(22rem, 78vw);
  scroll-snap-align: start;
  transition: background-color var(--duracao-hover) var(--curva),
              border-color var(--duracao-hover) var(--curva);
}
/* Sobe um degrau no hover. Sem transform, sem sombra: o carrossel já se
   move na horizontal, e card que também levanta briga com a rolagem. */
.depoimento:hover { background-color: var(--cacau-alto); }
/* Deixa o carrossel sangrar até a borda da tela, saindo do container.
   O `overflow-x: clip` na seção é obrigatório: sem ele a sangria vira
   rolagem horizontal da PÁGINA INTEIRA, porque 100vw inclui a largura da
   barra de rolagem vertical. `clip` e não `hidden` porque hidden criaria
   um contexto de rolagem e quebraria posicionamento sticky mais tarde. */
.secao-carrossel { overflow-x: clip; }
/* iPhone deitado: a ilha e o canto arredondado comem a borda da tela, e o
   carrossel sangra justamente até lá. Sem isto, o primeiro e o último card
   ficam parcialmente sob o chanfro. `max()` e não soma direta: em aparelho
   sem recorte o inset é 0 e o respiro normal prevalece. */
@supports (padding: max(0px)) {
  .depoimentos {
    scroll-padding-left: max(var(--respiro-lateral), env(safe-area-inset-left));
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}
@media (min-width: 60rem) {
  .depoimentos {
    margin-right: calc((var(--largura-pagina) - 100%) / -2 - var(--respiro-lateral));
  }
}
.depoimentos::-webkit-scrollbar { height: 6px; }
.depoimentos::-webkit-scrollbar-thumb { background: var(--cacau-claro); }
.depoimentos::-webkit-scrollbar-track { background: transparent; }
.depoimento p { font-size: var(--texto-peq); line-height: 1.65; color: var(--sobre-escuro); }
/* A COR SUBIU PORQUE A SUPERFÍCIE SUBIU, e isto é consequência medida,
   não gosto. O `--sobre-escuro-fraco` (#AE978A) dava 4,7:1 sobre o
   #2C170E que este card usava antes. Com o card no degrau elevado
   (#60473C) o mesmo texto caiu para 3,08:1 — abaixo do mínimo de 4,5.

   Clarear a superfície escurece o texto fraco que está sobre ela. É por
   isso que contraste se mede contra o PIXEL COMPOSTO e não contra o
   token: o token não mudou, e a conformidade mudou. */
.depoimento cite {
  display: block; margin-top: var(--e4); font-style: normal;
  font-family: var(--fonte-mono); font-size: var(--texto-micro);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--sobre-card-fraco);
}

/* ---------- 08 · Onde fica ---------- */
.localizacao { display: grid; gap: var(--e12); margin-top: var(--e12); }
@media (min-width: 56rem) { .localizacao { grid-template-columns: 0.8fr 1fr; gap: var(--e16); } }
.rotulo-campo { font-size: var(--texto-micro); color: var(--tinta-fraca); margin-bottom: var(--e2); }
.localizacao-dados > div + div { margin-top: var(--e8); }
.localizacao-mapa { border: 1px solid var(--areia); display: flex; flex-direction: column; }
.localizacao-mapa iframe { width: 100%; flex: 1; min-height: 20rem; border: 0; display: block; filter: saturate(0.7); }
.mapa-link { display: block; padding: var(--e3) var(--e4); background: var(--creme-fundo); border-top: 1px solid var(--areia); color: var(--tinta); font-size: var(--texto-peq); font-weight: 700; text-decoration: none; }
.mapa-link:hover { background: var(--areia); }

/* ---------- 09 · Chamada final ---------- */
.secao-final { background-color: var(--cacau-fundo); text-align: center; }
.secao-final .titulo { color: var(--sobre-escuro); }
.secao-final .conduz { margin: var(--e6) auto var(--e8); max-width: 42ch; }

/* ---------- 10 · Rodapé ---------- */
.rodape { background: var(--cacau-fundo); border-top: 1px solid var(--borda-no-escuro); padding-block: var(--e16); font-size: var(--texto-peq); color: var(--sobre-escuro-medio); }
.rodape-conteudo { display: grid; gap: var(--e8); }
@media (min-width: 56rem) { .rodape-conteudo { grid-template-columns: repeat(3, 1fr); gap: var(--e12); } }
.rodape p + p { margin-top: var(--e2); }
/* Ênfase dentro de texto corrido, não título: 600 destaca sem virar
   outro nível de hierarquia competindo com a marca do rodapé, que é 700. */
.rodape strong { color: var(--sobre-escuro); font-weight: 600; }
.rodape-marca { font-family: var(--fonte-display); font-size: var(--texto-md); font-weight: 700; letter-spacing: -0.03em; color: var(--sobre-escuro); margin-bottom: var(--e4) !important; }
/* Medido: 106x18px, e é um `tel:` — o dedo tem que acertar. Ganha altura
   de toque sem engordar a linha visualmente: `inline-block` mais padding
   vertical, que cresce a área clicável e não o texto. */
.rodape-link {
  color: var(--sobre-escuro); text-decoration: none;
  display: inline-block; padding-block: var(--e3);
}
.rodape-exemplo { margin-top: var(--e12); padding-top: var(--e6); border-top: 1px solid var(--borda-no-escuro); font-family: var(--fonte-mono); font-size: var(--texto-micro); line-height: 1.6; color: var(--sobre-escuro-fraco); }

.texto-corrido { margin-top: var(--e6); }

/* ============================================================
   MOVIMENTO
   Uma tese, não uma coleção de efeitos.

   O kit chama "Cacau e Medida" porque o dispositivo dele é o número
   medido pousado sobre a evidência. O movimento diz a mesma coisa:

     FOCAL      o cartão de dado ASSENTA sobre a foto do hero, e o
                vidro se forma enquanto ele pousa. É o único momento
                autoral da página.
     (A régua das medidas e a foto que sangrava saíram em 02/10, junto
     com as seções delas.)
     RETORNO    botão, foco e rolagem confirmam ação.

   O QUE NÃO ANIMA, e isto é decisão:
     · nenhuma seção "entra". Sem fade-up universal, que é a marca
       registrada de página gerada e o núcleo já proíbe.
     · nenhum contador que sobe: o número é medido, não é espetáculo.
     · nenhum card de depoimento se mexe — texto que entra atrasa
       leitura para enfeitar.

   Tudo aqui parte do estado VISÍVEL. O movimento é acréscimo: se o
   navegador não suporta, a página está inteira e correta.
   ============================================================ */

/* ---------- FOCAL · o cartão assenta ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-dado {
    animation: assentar 700ms cubic-bezier(0.16, 1, 0.3, 1) 420ms backwards;
  }
}
@keyframes assentar {
  from {
    opacity: 0;
    transform: translateY(12px);
    backdrop-filter: blur(0px) saturate(1);
    -webkit-backdrop-filter: blur(0px) saturate(1);
  }
}
/* `backwards` e não `both`: o estado final vem da regra do kit, então
   o cartão nunca fica preso num valor de keyframe. */


/* ---------- RETORNO · confirmação de ação ---------- */
.botao { transition: box-shadow var(--transicao), background-color var(--transicao), transform var(--transicao); }
.mapa-link { transition: background-color var(--transicao); }
/* As listas de destaque e de formação: o hover delas é a `.lista-luz`
   do kit. A linha que acendia embaixo do item saiu. */

/* Rolagem do carrossel com inércia própria no toque, e barra discreta. */
.depoimentos { -webkit-overflow-scrolling: touch; }

/* Movimento reduzido: quem cuida é o núcleo, que zera animação e mantém
   transição de cor em 90ms. O bloco que existia aqui era inerte —
   cancelava coisas que já estavam dentro de `no-preference`. */

/* ============================================================
   O QUE SUBSTITUI O TEMPLATE CHROME

   As duas skills apontaram o mesmo: rótulo em caixa alta espaçado
   acima de todo título, meta unida por ponto central, monoespaçada
   como fantasia de "técnico", seta no fim do link. Tudo isso saiu.

   Não foi substituído por outro enfeite. O título se sustenta sozinho,
   e a monoespaçada ficou só onde ela é DADO de verdade: o número
   medido. É a diferença entre usar mono porque é medida e usar mono
   porque parece técnico.
   ============================================================ */

/* A assinatura do hero (nome + CRO acima do título) SAIU em 02/10: era
   redundante — nome, CRO e responsável técnico já estão na barra do topo
   e no rodapé — e ocupava a altura que faltava para o botão caber na
   primeira tela. */

/* Rótulo do cartão de dado: caixa normal, discreto. O que ele precisa
   fazer é nomear o número, não gritar. */
.cartao-rotulo {
  font-size: var(--texto-micro); color: var(--sobre-escuro-medio);
  letter-spacing: 0.01em;
}

/* ============================================================
   ENTRADAS
   Migraram para o núcleo: `data-revelar` + revelar.js.

   O que estava aqui usava `animation-timeline: view()`, que é só
   Chrome/Edge e amarra a animação à POSIÇÃO da rolagem — rolando
   rápido, o bloco salta e não se vê nada. IntersectionObserver dispara
   e toca os 800ms inteiros, em qualquer navegador.
   ============================================================ */