/* ══════════════════════════════════════════════
   aurorae-estetica — styles.css
   Tudo aqui referencia tokens.css. Nenhum valor bruto de cor,
   tamanho ou espaçamento — ver yzze/direcao.md.
   ══════════════════════════════════════════════ */

/* ── reset ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--text-primary);
  background: var(--surface-page);
}
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-regular); letter-spacing: var(--tracking-heading); line-height: var(--leading-heading); }
p { margin: 0; text-wrap: pretty; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: none; }
a { color: inherit; text-decoration: none; transition: opacity var(--duration-fast) var(--ease-standard); }
a:hover { opacity: .62; }
em, .acento { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: 0; }
::selection { background: var(--espresso-800); color: var(--porcelain-50); }
:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 3px; }

.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}

/* fica fora da tela até receber foco; aí desce e vira um alvo real */
.pular-para-conteudo {
  position: fixed;
  top: var(--space-4);
  left: var(--space-4);
  z-index: var(--z-skip);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--espresso-800);
  color: var(--text-inverse);
  font-size: var(--text-body-sm);
  transform: translateY(calc(-100% - var(--space-6)));
  transition: transform var(--duration-base) var(--ease-entrance);
}
.pular-para-conteudo:focus-visible { transform: none; opacity: 1; }

.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;
}

/* ── rótulo pequeno, reaparece em várias seções ── */
.eyebrow {
  display: block;
  font-size: var(--text-caption);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}
.eyebrow--claro { color: var(--text-inverse-secondary); }
.eyebrow--terracota { color: var(--terracota-600); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
/* mesmo rótulo, para quando o fundo é escuro: o terracota só tem contraste
   sobre claro (2,3:1 no espresso), o blush resolve em 7,2:1 */
.eyebrow--blush { color: var(--blush-300); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
/* terracota sobre escuro — ver --terracota-200 em tokens.css para a conta
   de contraste que separa este do --eyebrow--terracota de fundo claro.
   Semibold, não regular: em 13px versaletado com tracking largo o 400 se
   dissolve no fundo escuro, e o peso é o que ainda o segura como rótulo.
   Ajuda também no contraste efetivo — o traço mais grosso compensa parte
   dos 3,95:1 do tom. */
.eyebrow--terracota-claro {
  color: var(--terracota-200);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* ── botão em pílula — a única forma que foge do canto reto ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height-lg);
  padding-inline: var(--space-8);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-sm);
  white-space: nowrap;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard);
}
.btn:hover { opacity: 1; }
.btn:active { transform: scale(var(--press-scale)); }
.btn--md { height: var(--control-height); padding-inline: var(--space-6); }
.btn--primary { background: var(--action-primary-bg); color: var(--action-primary-fg); }
.btn--primary:hover { background: var(--action-primary-bg-hover); }
.btn--secondary { background: var(--action-secondary-bg); color: var(--action-secondary-fg); }
.btn--secondary:hover { background: var(--action-secondary-bg-hover); }
.btn--outline { background: transparent; color: var(--action-ghost-fg); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn--outline:hover { background: var(--surface-sunken); }
/* pílula rosé/cobre — para quando o botão precisa competir com um fundo já
   quente (blush-200 em Procedimentos, creme-bloco em Avaliação), onde a
   pílula escura de sempre (.btn--primary) some contra o fundo. */
.btn--terracota { background: var(--terracota-300); color: var(--porcelain-50); }
.btn--terracota:hover { background: var(--terracota-300-hover); }

.link-seta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body-sm);
}

/* ===================== HEADER ===================== */
/* fixed, não absolute: o menu precisa continuar disponível depois do hero,
   já que a página é longa e o CTA vive nele. Ver js/main.js § topo. */
.topo {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: var(--z-topo);
  padding-block: var(--space-6);
  transition: transform var(--duration-base) var(--ease-entrance),
              background var(--duration-base) var(--ease-standard),
              padding-block var(--duration-base) var(--ease-standard);
}

/* recolhido — some para cima enquanto o leitor desce */
.topo[data-recolhido="true"] { transform: translateY(-100%); }
/* .menu-toggle é irmão de .topo no DOM, não filho (ver comentário na regra
   dele) — para sumir/reaparecer junto com a barra ao rolar, sem JS extra,
   basta espelhar o mesmo atributo via combinador de irmão geral. 100px
   (não -100%) porque o botão é pequeno (44px): a translação da própria
   .topo, pensada para a altura cheia da barra, deixaria uma tira dele
   ainda visível no topo da tela. */
.topo[data-recolhido="true"] ~ .menu-toggle { transform: translateY(-100px); }

/* sólido — passado o hero não há mais fotografia atrás. A barra ganha corpo
   escuro em vez de inverter para claro: mantendo o texto e a marca como
   nasceram sobre a foto, ela lê como a mesma barra que desceu, não como um
   header branco padrão que apareceu no lugar. */
.topo[data-solido="true"] {
  background: var(--glass-nav);
  -webkit-backdrop-filter: var(--blur-nav);
  backdrop-filter: var(--blur-nav);
  padding-block: var(--space-4);
}
/* o CTA se materializa como pílula quando a barra ganha corpo — no hero ele
   é só texto sobre a imagem, aqui precisa de alvo e de hierarquia */
.topo[data-solido="true"] .topo__acoes > a {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 1px var(--border-inverse);
}
.topo[data-solido="true"] .topo__acoes > a:hover {
  opacity: 1;
  background: var(--porcelain-50);
  color: var(--espresso-800);
  box-shadow: inset 0 0 0 1px var(--porcelain-50);
}
/* fio quente na base: é o mesmo blush das ações do hero, e é o que marca o
   limite da barra. Substitui a borda clara que havia aqui — sobre as seções
   escuras ela riscava uma linha esbranquiçada onde a barra deveria sumir. */
.topo[data-solido="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--blush-300), transparent 62%);
  opacity: .5;
}
/* sólida encolhe o padding-block de --space-6 (24px) para --space-4 (16px)
   — 8px a menos —, e a logo sobe junto dentro do header. .menu-toggle
   segue o mesmo deslocamento pra continuar com o centro alinhado ao dela. */
.topo[data-solido="true"] ~ .menu-toggle { top: 7px; }

@media (prefers-reduced-motion: reduce) {
  .topo { transition-duration: 1ms; }
}
.topo__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-6);
  /* mesma moldura do .hero__base — é o que mantém o menu e o título do
     hero na mesma sangria em qualquer largura de tela */
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
}
.topo__nav {
  display: flex;
  gap: var(--space-8);
  font-size: var(--text-body-sm);
}
.topo__nav a { color: var(--text-inverse); transition: color var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
.topo__marca { justify-self: center; }
.topo__marca img { height: 26px; width: auto; filter: brightness(0) invert(1); transition: filter var(--duration-base) var(--ease-standard); }
.topo__acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-6);
}
.topo__acoes > a {
  font-size: var(--text-body-sm);
  color: var(--text-inverse);
  border-radius: var(--radius-pill);
  transition: padding var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}

.menu-toggle {
  display: none;
  /* fora do <header> no DOM (ver index.html) e fixo por conta própria: com
     .topo (z-topo: 20) e .menu-movel (z-menu: 30), um botão que morasse
     dentro do header nunca apareceria por cima do painel aberto — e é
     esse mesmo ícone, virando "X", que fecha o menu (não existe mais um
     botão de fechar separado). */
  position: fixed;
  /* 15px, não var(--space-6) puro: a logo mora numa linha de grid cuja
     altura era ditada pelos 44px do próprio botão, quando ele ainda vivia
     dentro do .topo__inner — sem ele ali, a linha encolhe para a altura da
     logo (26px) e o centro dela sobe. 15px = 24px de padding do topo em
     repouso + (26px da logo − 44px do botão) / 2, pra alinhar os dois
     centros de novo mesmo com o botão fora da grade. */
  top: 15px;
  right: var(--gutter-mobile);
  z-index: calc(var(--z-menu) + 1);
  transition: transform var(--duration-base) var(--ease-entrance), top var(--duration-base) var(--ease-standard);
  /* remove o atraso de ~300ms (espera por um possível segundo toque, de
     duplo-toque-pra-zoom) que alguns navegadores móveis aplicam por
     padrão antes de disparar o clique — sem efeito no desktop */
  touch-action: manipulation;
  flex-direction: column;
  /* flex-end, não center: a caixa de 44px (alvo de toque) cresceu para os
     dois lados a partir das barras de 24px, o que empurrou o ícone para a
     esquerda do ponto onde ele vivia. Encostar na borda direita da caixa
     devolve o ícone à mesma sangria visual do menu desktop — e volta a
     puxar padding:0 abaixo, senão o padding padrão de <button> (que sobra
     do reset genérico da tag, que só zera fonte/cor/fundo/borda) rouba
     6px dessa borda e o "encostar" nunca chega a encostar de fato. */
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  padding: 0;
  /* 44px de área clicável (mínimo recomendado de alvo de toque) sem mudar
     o tamanho visual do ícone — as barras (abaixo) ficam fixas em 24px,
     em vez de esticar junto com o botão */
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text-inverse);
  transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
/* hambúrguer → X: as duas barras de fora giram 45°/-45° e se encontram no
   centro (onde a do meio, invisível, já estava) — a mesma "elegante"
   animação padrão de menu mobile, só que reaproveitando os 3 traços em vez
   de um ícone de fechar à parte */
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.menu-movel {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  /* x:hidden trava os galhos de folha na largura do painel (ver
     .menu-movel__folha); y:auto é a rede de segurança em telas baixas — com
     marca + 4 itens + CTA + rodapé, o conteúdo pode passar da altura
     disponível num celular mais baixo, e rolar é melhor que cortar a
     última linha em silêncio */
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  /* 3 blocos (marca / corpo / rodapé), não um grupo centralizado como antes
     — space-between deixa a marca colada no topo e o rodapé colado na base
     em qualquer altura de tela, com o corpo (lista + CTA) respirando no
     meio, do jeito que a referência mostra. Se o conteúdo não couber (tela
     baixa), space-between não tem mais o que espaçar e os blocos se
     empilham normalmente — é aí que overflow-y:auto acima entra em cena. */
  justify-content: space-between;
  align-items: stretch;
  padding-block: var(--space-16) var(--space-10);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.menu-movel[data-aberto="true"] { opacity: 1; visibility: visible; }

/* vidro do painel — MESMO fundo/blur que .menu-movel tinha antes, só que
   num elemento à parte, atrás de tudo (z-index abaixo até das folhas).
   Motivo: o círculo do GSAP (ver js/main.js) precisa animar sobre ALGO,
   mas não pode ser o .menu-movel inteiro — clip-path também recorta a área
   clicável, então enquanto o círculo ainda estivesse crescendo, tocar num
   link fora dele passava direto para a seção da página por trás (bug
   relatado: "clico em Procedimentos e nada acontece"). Aqui só o vidro
   recebe o clip-path; o conteúdo (abaixo) nunca é cortado — some/aparece
   só pela opacidade do .menu-movel, e por isso já nasce clicável por
   inteiro desde o primeiro quadro da abertura. */
.menu-movel__vidro {
  /* fixed, não absolute: .menu-movel pode rolar internamente em telas
     baixas (overflow-y:auto, ver acima) — absolute aqui rolaria o vidro
     junto com o conteúdo e destaparia um pedaço do fundo */
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--glass-nav);
  -webkit-backdrop-filter: var(--blur-nav);
  backdrop-filter: var(--blur-nav);
  pointer-events: none;
}

/* galhos de folha (fotos do usuário, não desenho vetorial) — decoração
   pura: nunca intercepta toque (pointer-events:none), nunca é lida por
   leitor de tela (alt vazio + aria-hidden). Ficam atrás do texto; o
   conteúdo (abaixo) ganha position:relative só para pintar por cima delas
   mesmo sem precisar de z-index próprio. Pequenas (80px) e bem coladas no
   canto — do jeito maior/mais solto de antes elas invadiam a coluna de
   texto (rótulo "Menu" em cima, CTA embaixo — ver referência do usuário). */
.menu-movel__folha {
  position: absolute;
  z-index: 0;
  width: 80px;
  height: auto;
  pointer-events: none;
}
/* superior-esquerdo: único canto de cima sem conteúdo (o direito é do
   próprio hambúrguer, que vira "X" por cima do painel) */
.menu-movel__folha--topo { top: -8px; left: -10px; }
/* inferior-direito: sangra abaixo do CTA, ao lado do rodapé, sem cobrir
   nenhum dos dois */
.menu-movel__folha--base { bottom: -8px; right: -10px; }
.menu-movel__marca, .menu-movel__corpo, .menu-movel__rodape { position: relative; z-index: 1; }

/* ── marca (logotipo + mote), topo do painel ── */
.menu-movel__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}
.menu-movel__marca-nome {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-display-sm);
  color: var(--text-inverse);
  text-transform: uppercase;
  letter-spacing: var(--tracking-logotipo);
  /* compensa visualmente o tracking: sem isso o "E" final empurra o nome
     inteiro para a esquerda do centro óptico do brilho acima */
  margin-right: calc(var(--tracking-logotipo) * -1);
}
.menu-movel__marca-mote {
  margin: 0;
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  color: var(--terracota-200);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ── corpo: rótulo + lista numerada + CTA ── */
.menu-movel__corpo {
  padding-inline: var(--gutter-mobile);
  display: flex;
  flex-direction: column;
}
.menu-movel__rotulo { margin-bottom: var(--space-6); }
.menu-movel__lista { display: flex; flex-direction: column; }
.menu-movel__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-5);
  /* mesmo fio translúcido de sempre sobre fundo escuro (--border-inverse) —
     só entre os itens (+ *, não border-bottom): assim a lista não ganha um
     fio solto nem antes do 01 nem depois do 04, colado direto no CTA */
  /* ver o mesmo comentário em .menu-toggle sobre o atraso de duplo-toque */
  touch-action: manipulation;
}
.menu-movel__item + .menu-movel__item { border-top: 1px solid var(--border-inverse); }
.menu-movel__item-indice {
  font-size: var(--text-caption);
  color: var(--terracota-300);
  letter-spacing: var(--tracking-wide);
  padding-right: var(--space-4);
  border-right: 1px solid var(--border-inverse);
}
.menu-movel__item-nome {
  flex: 1;
  font-family: var(--font-serif);
  font-size: var(--text-display-sm);
  color: var(--text-inverse);
}
.menu-movel__item-seta { flex: none; width: 22px; height: 22px; color: var(--terracota-300); }

/* ── CTA: retangular com borda fina, não a pílula de sempre — pedido
   específico deste menu (ver referência), o resto do site usa .btn ── */
.menu-movel__cta {
  margin-top: var(--space-8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  height: var(--control-height-lg);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--terracota-300);
  touch-action: manipulation;
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--terracota-300);
}
.menu-movel__cta .menu-movel__item-seta { width: 18px; height: 18px; }

/* ── rodapé: brilho + mote de fechamento ── */
.menu-movel__rodape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
  padding-inline: var(--gutter-mobile);
}
.menu-movel__rodape p {
  margin: 0;
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  color: var(--text-inverse-secondary);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  line-height: var(--leading-relaxed);
}

/* brilho — mesmo desenho do .estrutura__floreio-marca (asterisco de 4
   pontas desenhado à mão), reaproveitado três vezes aqui: no topo, no CTA
   e no rodapé */
.menu-movel__brilho { flex: none; width: 16px; height: 16px; color: var(--text-inverse); }
.menu-movel__marca .menu-movel__brilho { width: 20px; height: 20px; }
.menu-movel__cta .menu-movel__brilho { color: var(--terracota-300); }

/* ===================== HERO ===================== */
.hero {
  position: relative;
  height: 100vh;
  /* svh = altura da viewport com as barras do navegador VISÍVEIS. No celular,
     100vh mede a tela sem elas, então o hero nasce mais alto que o espaço
     real e empurra o texto para fora — e volta a caber só depois que a barra
     recolhe. Fica depois do vh, que serve de reserva para quem não suporta. */
  height: 100svh;
  /* piso para landscape de celular, onde 100svh não cabe o título e o CTA:
     melhor a próxima seção começar antes da dobra do que esmagar o hero. */
  min-height: 560px;
  overflow: hidden;
  background: var(--surface-dark);
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* a modelo vive no terço direito do quadro; puxar o enquadramento para lá
     preserva a parede vazia da esquerda, que é onde o título assenta */
  object-position: 62% 30%;
}
/* Os dois vídeos do ciclo ficam empilhados; só o marcado como ativo aparece.
   As junções já são quase idênticas (ver index.html § HERO), então a
   dissolução não esconde salto — o que ela suaviza é a troca de movimento,
   e por isso ainda vale alongá-la. O teto é o ponto em que ela passa a ser
   percebida como um fade, e a sequência deixa de ler como tomada contínua.

   Linear, não ease: numa dissolução as duas camadas somam luminância, e uma
   curva com aceleração faria o brilho oscilar no meio da troca.

   O z-index de quem entra é elevado pelo JS antes do fade: se os dois
   cruzassem opacidade ao mesmo tempo, no meio da troca nenhum estaria
   opaco e o fallback apareceria entre eles. */
.hero__video { z-index: 1; opacity: 0; transition: opacity var(--duration-base) linear; }
.hero__video.esta-ativo { opacity: 1; }

/* sem os vídeos, o fallback embaixo é que fica sendo o hero */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}
/* acima dos vídeos, que ficam no z-index 1 */
.hero__veu { position: absolute; inset: 0; background: var(--scrim-hero); z-index: var(--z-veu); }
.hero__corpo { position: relative; z-index: var(--z-conteudo); height: 100%; display: flex; flex-direction: column; }
.hero__base {
  margin-top: auto;
  /* mesma moldura do .topo__inner — ver comentário lá */
  max-width: var(--container-wide);
  margin-inline: auto;
  width: 100%;
  padding: 0 var(--gutter-desktop) var(--space-16);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
}
/* sem teto em px: quem governa a largura é o max-width em ch do título, que
   acompanha o corpo da fonte. Um limite fixo aqui estrangularia a medida
   justamente nas telas grandes, onde a fonte cresce. */
.hero__conteudo { flex: 0 1 auto; }
.hero__titulo {
  max-width: 13ch;
  font-size: var(--text-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--text-inverse);
  font-weight: var(--weight-regular);
  text-wrap: pretty;
  /* compensação óptica: o side bearing do glifo escala com o corpo da
     fonte, então a 104px o título nasce ~6px adentro da própria caixa e
     parece recuado em relação ao menu (14px), que quase não tem bearing.
     Puxa de volta para a mesma sangria visual dos 64px. */
  margin-left: -0.05em;
}
.hero__acoes { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-10); flex-wrap: wrap; }
.hero__acoes .link-seta { color: var(--text-inverse); }

/* ── ações do hero ──
   A paleta não tem cor de destaque por decisão de direção (ver tokens.css
   § cor), então a personalidade aqui vem do movimento, não de um acento
   colorido que brigaria com a fotografia. Escopado ao hero de propósito:
   é a única dupla de ações sobre imagem na página. */

/* A pílula acende em blush e se levanta. O blush é o único calor da paleta
   (tokens.css § cor) e estava sem uso — resolve o problema de escurecer:
   sobre a base do hero, que o véu já deixa escura, um preenchimento escuro
   apagava o botão. Claro sobre escuro ele avança; escuro, recuava. */
.hero__acoes .btn--secondary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.hero__acoes .btn--secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1; /* atrás do texto, à frente do fundo — daí o isolation */
  background: linear-gradient(180deg, var(--blush-200), var(--blush-300));
  transform: translateY(100%);
  transition: transform var(--duration-base) var(--ease-standard);
}
.hero__acoes .btn--secondary:hover {
  background: var(--action-secondary-bg); /* o claro fica; quem cobre é o ::before */
  /* o levantar é o que dá o impacto — a cor sozinha muda pouco (1,7:1
     entre porcelana e blush), a sombra é que descola o botão da foto */
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(43, 39, 33, .42);
}
.hero__acoes .btn--secondary:hover::before { transform: translateY(0); }
.hero__acoes .btn--secondary:active { transform: translateY(-1px) scale(var(--press-scale)); }

/* o link ganha um fio em blush que varre da esquerda, e a ponta sai na
   diagonal que ela mesma aponta */
.hero__acoes .link-seta { position: relative; }
.hero__acoes .link-seta:hover { opacity: 1; } /* anula o fade global de <a> */
.hero__acoes .link-seta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--blush-300);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--duration-base) var(--ease-standard);
}
.hero__acoes .link-seta:hover::after {
  transform: scaleX(1);
  transform-origin: left center; /* entra pela esquerda, sai pela direita */
}
.hero__acoes .link-seta__ponta {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}
.hero__acoes .link-seta:hover .link-seta__ponta {
  transform: translate(5px, -5px);
  color: var(--blush-300);
}

@media (prefers-reduced-motion: reduce) {
  .hero__acoes .btn--secondary,
  .hero__acoes .btn--secondary::before,
  .hero__acoes .link-seta::after,
  .hero__acoes .link-seta__ponta { transition-duration: 1ms; }
  /* o deslocamento é o que incomoda quem pediu menos movimento; a cor fica */
  .hero__acoes .btn--secondary:hover { transform: none; }
}
.hero__apoio {
  max-width: 300px;
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-inverse-secondary);
  margin-bottom: var(--space-2);
  /* encosta na sangria direita junto com "Agendar avaliação" do topo,
     independente da largura que a caixa do título ocupar */
  margin-left: auto;
}

/* ===================== SEÇÃO — padrões gerais ===================== */
.secao { padding-block: var(--section-padding-y); }
.secao--escura { color: var(--text-inverse); }
.secao--sunken { background: var(--surface-sunken); }
.secao__cabeca {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-24);
  align-items: end;
}
.secao__titulo {
  font-size: var(--text-display-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  max-width: 20ch;
  text-wrap: pretty;
}
.secao__apoio {
  margin: 0 0 var(--space-2);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 46ch;
}
.secao--escura .secao__apoio { color: var(--text-inverse-secondary); }
.fio { height: 1px; background: var(--border-default); }
.fio--inverso { background: var(--border-inverse); }

[data-reveal] { opacity: 1; }
[data-reveal-pronto] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard);
}
[data-reveal-visivel] { opacity: 1; transform: none; }

/* ===================== FILOSOFIA ===================== */
.filosofia {
  padding-block: var(--section-padding-y);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}
/* align-items:center encolhe o rótulo à largura do texto, então o fio do
   ::after (largura fixa) já nasce centrado sob ele — mas só com o próprio
   margin-inline:auto, mesma razão do Depoimentos. */
.filosofia .eyebrow--terracota::after { margin-inline: auto; }
/* aqui o rótulo mantém a cor neutra original — só herdou de
   .eyebrow--terracota o padrão (versalete, tracking, fio); a cor terracota
   não fazia parte do pedido */
.filosofia .eyebrow--terracota { color: var(--text-muted); }
.filosofia__titulo {
  font-size: var(--text-display-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  max-width: 20ch;
}
.filosofia__titulo em { color: var(--terracota-300); }
.filosofia__texto { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--text-secondary); max-width: 52ch; }

/* ===================== PROCEDIMENTOS ===================== */
/* Painel destacado, não faixa de largura total: o catálogo é dono de si e
   precisa ler como bloco à parte. Cantos arredondados e recuo lateral
   descolam a seção do fluxo — a página continua correndo atrás dela.
   Ver yzze/decisoes.md. */
.procedimentos {
  padding-block: var(--section-padding-y);
  background: var(--creme-bloco);
  color: var(--text-primary);
  border-radius: var(--radius-sheet);
  /* o recuo acompanha o gutter, então o painel nunca encosta na borda */
  margin-inline: var(--gutter-desktop);
  /* sombra na cor do fundo, não preta: preto sobre creme suja */
  box-shadow: 0 1px 2px rgba(43, 39, 33, .03), 0 24px 60px rgba(43, 39, 33, .06);
}
.procedimentos .secao__apoio { color: var(--text-secondary); }
/* .eyebrow--terracota é global (Equipe, Depoimentos usam o --terracota-600
   escuro/acessível); aqui, e só aqui, o rótulo usa o tom claro — mesma
   troca consciente de acessibilidade do resto da seção, ver tokens.css. */
.procedimentos .eyebrow--terracota { color: var(--terracota-300); }
/* título sans, mesma régua tipográfica do resto do site (igual a Nossa
   Estrutura) — não é mais a serif "editorial" que só Procedimentos e
   Equipe tinham. O acento itálico sai do preto e vira terracota clara: é o
   único título da página em que o grifo muda de COR além de mudar de
   estilo, e é assim na referência. */
/* a coluna do título é mais larga aqui do que o 1.1fr padrão do
   .secao__cabeca: "Cada detalhe do cuidado" precisa caber inteiro na
   primeira linha para a quebra bater com a referência, e em 1.1fr (562px)
   a serifada de 64px estourava para uma terceira linha. */
.procedimentos .secao__cabeca { grid-template-columns: 1.65fr 1fr; gap: var(--space-16); }
.procedimentos .secao__titulo {
  font-size: var(--text-display-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  /* sem max-width próprio: quem limita a medida aqui é a coluna do
     .secao__cabeca (1.1fr de duas), e ela já dá exatamente as duas linhas
     da referência. Um teto em ch por cima disso só forçava uma terceira. */
  max-width: none;
}
.procedimentos .secao__titulo em { color: var(--terracota-250); }

/* ── abas ──
   Régua numerada com contagem de itens: lê como sumário de catálogo, não
   como três botões soltos. O indicador é um elemento só, que DESLIZA entre
   as abas (posição e largura vêm do JS) — um sublinhado por aba apenas
   acenderia e apagaria, sem ligar uma escolha à outra. */
.abas { margin-top: var(--space-16); }
.abas__lista { display: none; }
.abas[data-pronto] .abas__lista {
  position: relative;
  display: flex;
  gap: var(--space-10);
  border-bottom: 1px solid var(--border-default);
  overflow-x: auto;
  scrollbar-width: none;
}
.abas__lista::-webkit-scrollbar { display: none; }
.abas__indicador {
  position: absolute;
  /* bottom: 0, não -1px: .abas__lista tem overflow-x:auto, e overflow-y
     computa para auto junto — o que passa da borda de baixo é cortado.
     Nessa espessura o corte apareceria; assentada em 0 a pílula fica
     inteira visível, apoiada logo acima do fio de 1px da régua. */
  bottom: 0;
  left: 0;
  /* 4px com pontas arredondadas: o traço ainda lê como pílula e não como
     sublinhado, mas sem o peso de barra que os 6px davam. Abaixo disso o
     raio das pontas some e volta a parecer um sublinhado comum. */
  height: 4px;
  border-radius: var(--radius-pill);
  width: 0;
  background: var(--terracota-300);
  transition: transform var(--duration-base) var(--ease-standard),
              width var(--duration-base) var(--ease-standard);
}
.aba {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-2) var(--space-6);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: color var(--duration-base) var(--ease-standard);
}

/* ícone em moldura circular — a moldura é o que separa o símbolo do texto
   e dá à régua um ar de sumário ilustrado em vez de menu */
/* SEM moldura por padrão: na referência só a aba ativa ganha o círculo —
   as outras duas mostram o glifo solto. A moldura passa a ser sinal de
   estado, não decoração permanente das três. */
.aba__icone {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  color: var(--espresso-800);
  background: transparent;
  box-shadow: none;
  transition: color var(--duration-base) var(--ease-standard),
              background var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.aba__icone svg { width: 24px; height: 24px; }
/* pathLength="1" no SVG normaliza qualquer traço para comprimento 1, então
   um dasharray único serve para os três ícones, de desenhos diferentes */
.aba__icone :is(path, circle) {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.aba__texto { display: flex; flex-direction: column; gap: var(--space-1); }
/* a contagem ("01 — 8 procedimentos") existia como subtítulo visível; a
   referência mostra só ícone + rótulo, uma linha. Ela não sumiu — virou
   .sr-only diretamente no HTML, então quem usa leitor de tela ainda ouve
   quantos procedimentos tem cada aba, só que ninguém mais vê o número. */
/* rótulo no mesmo registro do eyebrow (sans, versalete, tracking largo) —
   não mais serif romano. A referência usa a MESMA voz tipográfica do
   "PROCEDIMENTOS" acima do título para as três abas; reservamos a serif
   para nome de pessoa (Equipe) e acento de frase, não para rótulo de aba. */
.aba__nome {
  font-family: var(--font-sans);
  font-size: 12px;
  /* semibold, não medium: em versalete de 14px com tracking largo o 500
     some — o rótulo é navegação, precisa pesar mais que texto corrido */
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--espresso-800);
  transition: color var(--duration-base) var(--ease-standard);
}

.aba:hover { opacity: 1; }
.aba:hover .aba__icone { color: var(--terracota-300); transform: translateY(-2px); }

/* na aba ativa o ícone se preenche, o rótulo vira terracota e o traço se
   redesenha */
.aba[aria-selected="true"] .aba__icone {
  color: var(--terracota-300);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--terracota-300);
}
.aba[aria-selected="true"] .aba__nome { color: var(--terracota-300); }
.aba[aria-selected="true"] .aba__icone :is(path, circle) {
  animation: traco var(--duration-editorial) var(--ease-standard) both;
}
@keyframes traco {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.abas__painel { padding-top: var(--space-12); }
.abas__painel[hidden] { display: none; }

/* ── grade ──
   Assimétrica de propósito, e a régua é a mesma da referência: o primeiro
   item ocupa a coluna 1 inteira, vazando as duas linhas (retrato alto); os
   demais preenchem as colunas 2–4 em duas linhas, sem posição própria —
   o auto-placement do grid distribui sozinho, na ordem do HTML, contornando
   a célula que o destaque já ocupa. Uma grade uniforme de 25 cartões iguais
   é catálogo de e-commerce, não atelier.

   Categorias com mais de 7 itens (destaque + 6) transbordam para uma
   terceira linha, começando de novo na coluna 1 — consequência aceita do
   catálogo real ter 8–9 procedimentos por aba contra os 7 da referência,
   não uma quebra do padrão. */
/* Duas colunas, não quatro: o destaque à esquerda e um BLOCO com os demais
   à direita, que abre a própria grade de 3 colunas.

   Por que o wrapper e não quatro colunas irmãs: as abas reais têm 8–9
   procedimentos (a referência mostra 7), então sobra uma terceira linha, e
   com todos na mesma grade o auto-placement jogava o card excedente na
   coluna do destaque — 2,3× mais larga — e ele saía do tamanho dos outros.
   `grid-row: 1 / -1` não resolvia: o -1 só alcança a última linha
   EXPLÍCITA, e as linhas que sobram são implícitas.

   A proporção 2.3 : 3.27 vem de medir a referência — destaque 41% da
   largura, os pequenos ~17,9% cada. */
.proc-grade {
  display: grid;
  grid-template-columns: 2.3fr 3.27fr;
  gap: var(--space-5);
}
/* linha e coluna com respiros diferentes: a referência tem a fileira de
   baixo mais colada na de cima do que a distância entre os cartões lado a
   lado — medido: ~20px na horizontal, bem menos que isso na vertical.
   column-gap continua --space-5; row-gap cai para --space-3. */
.proc-grade__resto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  column-gap: var(--space-5);
  row-gap: var(--space-3);
}
/* teto de duas linhas: 3 colunas × 2 = 6 cartões pequenos, e o bloco fecha
   exatamente na altura do destaque ao lado. Do 7º em diante (procedimento
   08 da aba) sai de cena.

   display:none, não visibility/opacity: assim o cartão some também da
   árvore de acessibilidade e da navegação por Tab — quem usa leitor de tela
   ouve a mesma lista que todo mundo vê, em vez de tropeçar em links
   invisíveis. Ver README § Pendências para o que isso custa em conteúdo. */
.proc-grade__resto .proc:nth-child(n + 7) { display: none; }
/* SEM padding: é o cartão inteiro que corta a foto na régua do
   border-radius (overflow:hidden), não a foto tendo o próprio raio dentro
   de uma moldura de espaço em branco. Só o corpo de texto (.proc__corpo,
   abaixo) tem padding — é exatamente essa diferença, foto rente à borda e
   texto recuado, que dá o ar editorial da referência em vez de "foto num
   cartão com margem". */
.proc {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  /* bege, não branco, e SEM hairline: na referência os cartões são um tom
     do próprio papel da seção, separados do fundo pela foto e pelo bloco de
     texto — não por uma borda desenhada. O contorno de 1px fazia cada
     cartão ler como caixa de formulário. */
  background: var(--creme-cartao);
  overflow: hidden;
  transition: transform var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
  animation: proc-entra var(--duration-slow) var(--ease-entrance) backwards;
  animation-delay: calc(var(--ordem) * 55ms);
}
.proc:hover {
  opacity: 1;
  transform: translateY(-6px);
  box-shadow: var(--shadow-raised);
}
@keyframes proc-entra {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
}

/* o destaque inverte a paleta: escuro no meio do claro. Mesma função de
   antes (quebrar a repetição da grade), com os papéis trocados agora que
   a seção é clara. */
.proc--destaque {
  /* estica até a altura do bloco vizinho (as duas linhas de cartões +
     o vão entre elas) — é o que mantém topo e base alinhados com eles */
  align-self: stretch;
  background: var(--espresso-800);
  color: var(--text-inverse);
  box-shadow: none;
}
.proc--destaque:hover { box-shadow: var(--shadow-overlay); }
/* a foto NÃO divide o cartão com o painel: ela toma o cartão inteiro
   (absolute + inset:0, incluindo a altura esticada) e o bloco de texto é
   uma CAMADA por cima dela, 90% opaca, ancorada no rodapé. Por isso a
   figura sai do fluxo e o corpo, que continua nele, precisa da própria
   camada de empilhamento: um elemento posicionado que vem depois no DOM
   pinta por cima de um posicionado antes, então sem z-index o corpo some
   por baixo da foto.

   inset:0 (cartão inteiro) só passou a caber depois que a foto do 01 virou
   um retrato 3:4 de 800px — a antiga, 388×420 e quase quadrada, precisava
   de zoom demais para preencher a coluna alta e lia como recorte forçado. */
.proc--destaque .proc__figura { position: absolute; inset: 0; aspect-ratio: auto; }
.proc--destaque .proc__corpo {
  position: relative;
  z-index: 1;
  /* gruda no rodapé: o corpo é o único filho no fluxo do .proc--destaque
     (flex column) agora que a foto saiu dele */
  margin-top: auto;
  /* respiro bem maior que o dos cartões pequenos — no modelo o texto do
     painel começa a ~9% da largura do cartão, não colado na borda */
  padding: var(--space-8);
  gap: var(--space-3);
  background: var(--scrim-destaque);
  /* 8px: filete curto, quase um chanfro — o painel encosta nas laterais
     do cartão com só uma insinuação de curva, sem o sweep largo que
     raios maiores desenham */
  --raio-invertido: var(--space-2);
}
/* ── raio invertido no topo do painel ──
   Não é border-radius: aquele CORTA o canto (côncavo para dentro do
   próprio elemento). Aqui a curva é para FORA — o painel sobe pelas duas
   laterais do cartão e volta com um filete côncavo até a linha do topo,
   como se estivesse escorrendo por baixo da foto.

   Feito com dois quadrados de lado --raio-invertido encostados logo acima
   do painel (bottom:100%), pintados com um radial-gradient cujo disco
   TRANSPARENTE fica no canto interno: sobra exatamente o complemento do
   quarto de círculo, que é a curva côncava. Pseudo-elemento com
   position:absolute não vira flex item, então nenhum dos dois entra na
   coluna de texto.

   A parada do gradiente tem meio pixel de folga (calc(... - .5px)) porque
   corte duro em radial-gradient serrilha a borda. */
.proc--destaque .proc__corpo::before,
.proc--destaque .proc__corpo::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: var(--raio-invertido);
  height: var(--raio-invertido);
}
/* disco vazado no canto superior DIREITO: o cheio fica encostado na borda
   esquerda do cartão e na linha do painel */
.proc--destaque .proc__corpo::before {
  left: 0;
  background: radial-gradient(circle at 100% 0,
    transparent calc(var(--raio-invertido) - .5px),
    var(--scrim-destaque) var(--raio-invertido));
}
/* espelhado: disco vazado no canto superior esquerdo */
.proc--destaque .proc__corpo::after {
  right: 0;
  background: radial-gradient(circle at 0 0,
    transparent calc(var(--raio-invertido) - .5px),
    var(--scrim-destaque) var(--raio-invertido));
}
.proc--destaque .proc__nome { font-size: var(--text-display-sm); }
/* sem teto de 32ch: no modelo a descrição atravessa o painel quase inteiro
   e quebra em duas linhas largas, com entrelinha mais solta que a do corpo
   padrão */
.proc--destaque .proc__texto {
  color: var(--text-inverse-secondary);
  max-width: none;
  line-height: 1.7;
}
.proc--destaque .proc__acao { color: var(--text-inverse); }
/* rótulo "Procedimento em destaque" — só existe aqui; nos cartões normais
   a especialidade já está implícita no nome */
/* sentence case, não versalete — é assim na referência, e é o que o
   distingue do "PROCEDIMENTOS" versaleteado do topo da seção: aquele é
   rótulo de navegação, este é uma legenda dentro da peça. */
.proc__eyebrow {
  font-size: var(--text-body-sm);
  color: var(--terracota-300);
}

/* o slot já reserva a proporção, então preencher a imagem depois não
   desloca nada. A textura em diagonal marca espaço reservado sem o peso
   de um placeholder cinza. */
/* paisagem (3:2), não retrato: medido na referência, a foto dos cartões
   pequenos é mais larga que alta. Com --slot-retrato (4:5) o cartão ficava
   com o dobro da altura e a grade inteira esticava. */
.proc__figura {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(43,39,33,.04) 10px 20px),
    var(--sand-200);
}
.proc--destaque .proc__figura {
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255,255,251,.03) 10px 20px),
    var(--espresso-700);
}
/* o <picture> sai do fluxo e preenche o slot inteiro: inline (o padrão) ele
   não recebe altura, e no destaque — onde a figura cresce com flex:1 — a
   foto ficaria na altura intrínseca dela em vez de acompanhar o quadro.
   Mesmo padrão de .membro__retrato na Equipe. */
.proc__figura picture {
  position: absolute;
  inset: 0;
  display: block;
}
.proc__figura img {
  width: 100%; height: 100%; object-fit: cover;
  /* as fotos são retrato (0,8–1,0) e os slots, paisagem — o corte tem de
     vir de cima e de baixo, mantendo o centro do enquadramento */
  object-position: center;
  transition: transform var(--duration-editorial) var(--ease-standard);
}
.proc:hover .proc__figura img { transform: scale(var(--image-zoom-hover)); }
/* a foto do destaque 01 é retrato 3:4 e o cartão, esticado, fica em
   proporção parecida — o corte de cover é pequeno, mas cai todo no topo da
   cabeça se ficar centrado. 35% puxa o recorte para cima e garante testa,
   rosto, mãos e seringa dentro do quadro em qualquer largura de coluna. */
.proc__figura[data-imagem="preenchimento-facial"] img { object-position: center 35%; }


/* numeração como elemento gráfico, não como rótulo — crachá de canto
   arredondado (não mais pílula), como na referência */
/* texto escuro, não terracota: na referência os 7 crachás — o do destaque
   incluído — são o mesmo chip claro com número em neutro escuro. Não existe
   variante escura: mesmo no destaque, o "01" fica sobre a FOTO (clara), não
   sobre o painel de texto — por isso não precisa (nem deve) virar chip
   escuro/texto claro como antes. */
.proc__indice {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  padding: 5px var(--space-3);
  border-radius: var(--radius-md);
  background: var(--glass-light);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  color: var(--espresso-800);
  transition: transform var(--duration-base) var(--ease-standard);
}
.proc:hover .proc__indice { transform: translateY(-2px); }

/* o corpo fica na altura natural do texto nos cartões pequenos; no
   destaque quem preenche a sobra da altura esticada é a foto
   (position:absolute, ver .proc--destaque .proc__figura acima), não o
   corpo — por isso não tem flex:1 aqui. */
.proc__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}
/* rodapé mais justo nos 24 cartões pequenos — só o destaque mantém o
   respiro padrão dos 4 lados */
.proc:not(.proc--destaque) .proc__corpo { padding-bottom: var(--space-2); }
/* nome em SANS, não serif: na referência a serifada é a voz do TÍTULO da
   seção e do nome do destaque; os 24 cartões pequenos são sans, e é esse
   contraste que separa o destaque do resto. Serifar os 25 achatava a
   hierarquia — o destaque deixava de soar diferente. */
.proc__nome {
  font-size: var(--text-body-lg);
  line-height: 1.3;
  letter-spacing: var(--tracking-title);
}
/* reserva 2 linhas mesmo quando o nome cabe em 1: sem isso, o único card
   cujo nome quebra ("Bioestimuladores de colágeno") ficava mais alto que os
   vizinhos da mesma fileira — a fileira toda crescia para acomodá-lo e os
   cards de nome curto sobravam com vão embaixo. Só nos cartões pequenos: o
   destaque tem um nome só por aba, não precisa da reserva. */
.proc:not(.proc--destaque) .proc__nome { min-height: 2.6em; }
/* só o destaque volta à serifada */
.proc--destaque .proc__nome { font-family: var(--font-serif); letter-spacing: 0; }
.proc__texto {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body);
  color: var(--text-secondary);
}
/* a ação some no rodapé do corpo (margin-top:auto) e fica sempre visível —
   na referência a seta não é um segredo revelado no hover, é parte fixa da
   composição do cartão. O hover entra só como um deslocamento sutil da
   seta (ver .proc__seta abaixo), a microinteração que o pedido pediu. */
.proc__acao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--terracota-300);
}
/* nos cartões pequenos só a seta é visual — a palavra continua no DOM para
   o link ter nome acessível decente, só não ocupa espaço na composição */
.proc:not(.proc--destaque) .proc__acao-texto {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* no destaque a palavra fica — é o único cartão com CTA por extenso,
   versalete e tracking largo, como "CONHECER PROCEDIMENTO" na referência */
.proc--destaque .proc__acao-texto {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
/* o fio não acompanha o conteúdo nem a largura inteira do cartão: no
   modelo ele tem largura própria (~15rem), a palavra ancorada no começo e
   a seta na PONTA oposta, com um vão claro entre as duas. Daí o display
   flex + space-between numa caixa de largura fixa, em vez do inline-flex
   colado da base. */
.proc--destaque .proc__acao {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: min(100%, 15rem);
  padding-top: var(--space-5);
  padding-bottom: var(--space-2);
  /* caramelo, não o fio claro padrão: só o texto do CTA fica branco, o fio
     e a seta pedem a mesma cor de destaque usada no resto da seção */
  border-bottom: 1px solid var(--terracota-300);
}
/* nos cartões pequenos a seta é o único filho visível de .proc__acao —
   sem isto ela ficava colada à esquerda (o padrão do flex), quando a
   referência a ancora no canto oposto do cartão */
.proc:not(.proc--destaque) .proc__acao { justify-content: flex-end; }
/* SVG, não glifo de texto: a referência usa um ícone de seta reta
   desenhado (traço, não caractere de fonte) — peso e proporção não variam
   por fonte/plataforma como um "→" de texto variaria */
.proc__seta {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}
.proc:hover .proc__seta { transform: translateX(4px); }
/* só a seta do destaque em caramelo — o texto do CTA ao lado continua
   branco (herdado de .proc--destaque .proc__acao) */
.proc--destaque .proc__seta { color: var(--terracota-300); }

/* ── fecho ──
   Painel próprio, não mais divisor + texto solto: tom próprio (creme-cartao,
   medido na referência) para o bloco se destacar como um convite, não como
   rodapé. Quatro partes lado a lado — cabeça com ornamento, divisor, apoio,
   botão — como na referência; empilha no mobile (ver 960px). */
.procedimentos__fecho {
  margin-top: var(--space-20);
  padding: var(--space-8) var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--creme-cartao);
  display: flex;
  align-items: center;
  gap: var(--space-10);
}
.procedimentos__fecho-cabeca {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex: 1.2 1 0;
}
/* a mesma folha da Equipe, só que como par — dois traços do mesmo desenho
   em vez de um novo SVG. Reuso deliberado do motivo já estabelecido, não
   preguiça: a página ganha um vocabulário visual, não dois. */
.procedimentos__fecho-folha {
  flex: none;
  width: 76px;
  height: 76px;
  color: var(--terracota-300);
  opacity: .9;
}
/* max-width tira o limite do PAI: quem precisa caber em 30ch é só o
   título (linha maior); a linha de apoio é mais longa e tem de caber
   inteira numa única linha (nowrap), então não pode herdar um teto de
   largura pensado para a outra. */
.procedimentos__fecho-texto { display: flex; flex-direction: column; gap: var(--space-1); }
/* duas linhas, dois registros — a pergunta em corpo maior e escuro, a
   resposta em caramelo (a mesma cor do acento do título da seção), numa
   linha só. Empilhadas eram uma frase só antes; a referência trata as duas
   como blocos distintos, não uma continuação. */
.procedimentos__fecho-titulo {
  font-size: var(--text-title);
  line-height: 1.3;
  color: var(--text-primary);
  max-width: 30ch;
}
.procedimentos__fecho-sub {
  font-size: var(--text-body);
  line-height: 1.4;
  color: var(--terracota-250);
  white-space: nowrap;
}
/* traço vertical entre a cabeça e o texto de apoio — a mesma função do
   .fio horizontal usado no resto do site, só que na outra orientação, por
   isso não reaproveita a classe (ela é height:1px por natureza) */
.procedimentos__fecho-divisor {
  align-self: stretch;
  width: 1px;
  background: var(--border-default);
}
.procedimentos__fecho-apoio {
  flex: 1 1 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 34ch;
}
/* cor vem de .btn--terracota (ver linha ~106); aqui só o que é específico
   deste botão: versalete com tracking — os outros .btn do site são frase
   normal, este é o único em caixa alta, porque é o único desenhado a partir
   da referência, que traz "AGENDAR MINHA AVALIAÇÃO" assim */
.procedimentos__fecho-acao {
  flex: none;
  height: var(--control-height);
  padding-inline: var(--space-6);
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  gap: var(--space-2);
}
.procedimentos__fecho-acao .btn__seta {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}
.procedimentos__fecho-acao:hover .btn__seta { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .proc { animation: none; }
  .proc:hover { transform: none; }
  .abas__indicador { transition-duration: 1ms; }
  .aba__icone :is(path, circle) { animation: none; }
  .aba:hover .aba__icone { transform: none; }
}

/* ===================== NOSSA ESTRUTURA =====================
   Substitui a antiga Desejo/Filosofia. Composição em duas peças: o topo
   (texto estreito à esquerda + grade de 3 fotos à direita, ~1:3 de
   largura) e a fileira de 4 recursos com ícone, abaixo, atravessando a
   largura inteira — medido no modelo do cliente, 2026-08-20. */
.estrutura { position: relative; overflow: hidden; padding-block: var(--section-padding-y); }
.estrutura > .container { position: relative; z-index: var(--z-base); }

.estrutura__topo {
  display: grid;
  /* proporção medida no modelo: coluna de texto ocupa ~1/4 da largura,
     a grade de fotos o resto — bem mais estreita que o .secao__cabeca
     genérico (que reserva quase metade para o apoio) */
  grid-template-columns: minmax(260px, 1fr) minmax(0, 3fr);
  gap: var(--space-10);
  align-items: start;
}
.estrutura__cabeca { padding-top: var(--space-2); }
.estrutura__titulo {
  margin-top: var(--space-5);
  font-size: var(--text-display-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  max-width: 18ch;
  text-wrap: pretty;
}
.estrutura__titulo em { font-family: var(--font-serif); font-style: italic; color: var(--terracota-300); }
.estrutura__texto {
  margin-top: var(--space-6);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 32ch;
}
/* curva pequena + a MESMA faísca do fecho de Antes e Depois — reaproveita
   o glifo em vez de inventar um novo símbolo de "acento decorativo" */
.estrutura__floreio {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-10);
  color: var(--terracota-300);
}
.estrutura__floreio svg:first-child { width: 44px; height: 36px; }
.estrutura__floreio-marca { width: 13px; height: 13px; }

/* ── a grade de 3 fotos ──
   Proporção das colunas (recepção : coluna direita) e das duas fotos
   empilhadas medidas no modelo: 574×609 / 484×329 / 484×279 num canvas de
   1672px. Convertido para aspect-ratio, não para px fixo — os slots
   escalam com a largura da coluna em vez de vazar em telas menores. */
.estrutura__grade {
  display: grid;
  grid-template-columns: 1.19fr 1fr;
  gap: var(--space-3);
}
.estrutura__coluna { display: grid; grid-template-rows: 1.19fr 1fr; gap: var(--space-3); }
/* fotos entregues em 2026-08-21 — mesmo padrão de .proc__figura: o
   <picture> sai do fluxo (absolute+inset:0) porque inline ele não recebe
   altura, e quem dá a altura ao slot é o aspect-ratio de cada modificador
   abaixo, não a foto. */
.estrutura__foto {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-image);
}
.estrutura__foto picture { position: absolute; inset: 0; display: block; }
.estrutura__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--duration-editorial) var(--ease-standard);
}
.estrutura__foto:hover img { transform: scale(var(--image-zoom-hover)); }
/* SEM aspect-ratio na recepção — de propósito, e é a correção de um bug
   visual (2026-08-21): antes as três proporções eram medidas de forma
   independente (574/609 de um lado, 484/329 + vão + 484/279 do outro), e
   não somavam exatas — a recepção ficava ~12px mais baixa que a coluna
   empilhada ao lado, uma borda inferior desalinhada visível no print que o
   cliente mandou. Sem aspect-ratio próprio, o item de grid volta ao
   comportamento padrão (align-items: stretch) e a recepção passa a medir
   SEMPRE a altura exata de --sala + gap + --corredor, garantido pelo
   layout — não por dois números que têm de coincidir. object-fit: cover
   (na regra .estrutura__foto img acima) enquadra a foto nessa altura,
   qualquer que ela seja. */
.estrutura__foto--sala { aspect-ratio: 484 / 329; }
.estrutura__foto--corredor { aspect-ratio: 484 / 279; }

/* ── a fileira de recursos ──
   4 colunas, hairline entre elas (não em volta) — o padding-inline cria o
   respiro que a régua da referência mostra dos dois lados do fio. */
.estrutura__recursos {
  margin-top: var(--space-20);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.estrutura__recurso {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* --space-6, não --space-3: o vão entre o ícone e o rótulo cresceu junto
     com o próprio ícone — medido no modelo, ~27px nos nossos 1440. */
  gap: var(--space-6);
  padding-inline: var(--space-6);
  text-align: center;
  border-left: 1px solid var(--border-default);
}
.estrutura__recurso:first-child { border-left: none; }
/* 72px, não 34: medido no modelo — o escudo do ícone 1 mede 53×66px num
   canvas de 1672, o que escala para ~46×57 nos nossos 1440. Como o desenho
   ocupa ~75% da altura da própria viewBox 24×24, a caixa do <svg> precisa
   ficar bem maior que a tinta para a tinta bater no tamanho medido —
   72px de caixa rende ~54px de escudo, perto do alvo. */
.estrutura__recurso-icone { width: 72px; height: 72px; color: var(--terracota-300); }
.estrutura__recurso-nome { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--text-primary); }
.estrutura__recurso-texto { font-size: var(--text-body-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); max-width: 26ch; }

/* ── ornamentos ──
   Mesmo vocabulário desenhado à mão de Equipe e Antes e Depois: a folha
   sangrando pelo canto inferior esquerdo, e aqui uma peça nova — grade de
   pontos no canto oposto, que a referência introduz e nenhuma outra seção
   usa ainda. */
.estrutura__ornamento {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.estrutura__ornamento--folha {
  bottom: -70px; left: -50px;
  width: 220px; height: 260px;
  color: var(--terracota-400);
  opacity: .32;
}
.estrutura__ornamento--folha svg { display: block; width: 100%; height: 100%; }
.estrutura__ornamento--pontos {
  top: var(--space-8); right: var(--space-8);
  width: 88px; height: 68px;
  background-image: radial-gradient(var(--terracota-400) 1.4px, transparent 1.6px);
  background-size: 14px 14px;
  opacity: .5;
}

/* ===================== ANTES E DEPOIS ===================== */
/* ── palco escuro ──
   Cantos de cima arredondados e fundo próprio: no modelo o bloco escuro é
   uma PEÇA apoiada sobre o creme da página, não uma faixa que atravessa o
   documento de ponta a ponta. O <section> não tem padding — cada palco
   carrega o seu, porque os dois têm fundos diferentes. */
/* Hexadecimais colhidos do arquivo de design do cliente (2026-08-20). O
   #20191A do palco virou --espresso-950 em tokens.css porque também é o
   fundo de "naturalidade" e do rodapé; --ad-tinta e --ad-campo continuam
   locais, só esta seção os usa. O terceiro valor do pedido, o #A36B58 dos
   rótulos, foi para --terracota-200 porque a classe que o consome
   (.eyebrow--terracota-claro) é global.

   --ad-tinta é a cor de corpo do fecho, que é a metade CLARA da peça: sobre
   o #20191A do palco ela daria 2,34:1, ilegível. */
/* o creme não é só do fecho: é o campo em que o palco escuro flutua, e
   aparece também na faixa à esquerda dele e na respiração acima. Sem ele na
   section inteira, essa faixa cairia no --porcelain-50 da página e ficaria
   um tom mais clara que o fecho logo abaixo.

   --ad-campo é medido no modelo e é bem mais quente e fundo que o
   --creme-bloco (#F8F4F0) que a página usa: é a mesma observação de fundo
   de página já registrada em decisoes.md, aqui aplicada só nesta seção
   porque é onde o cliente pediu. */
.antes-depois {
  padding-block: var(--space-6) 0;
  background: var(--ad-campo);
  --ad-palco: var(--espresso-950);
  --ad-tinta: #5B5453;
  --ad-campo: #E6DDD7;
}
/* ── o palco ──
   Painel apoiado no campo creme: recuado só à ESQUERDA e sangrando na
   direita, com um único canto arredondado, o de cima à esquerda. Medido no
   modelo: recuo de 58px (o gutter da página, 64, é o degrau da escala que
   cai em cima), canto de 44px, e nenhum arredondamento na base — o corte de
   baixo é reto, encostado no fecho.

   Foi aqui que ficaram as rampas do topo, agora removidas: a forma deixou
   de precisar das quatro camadas de pintura e voltou a ser um retângulo
   arredondado, que o próprio background do elemento resolve. */
.antes-depois__palco {
  position: relative;
  overflow: hidden;
  margin-left: var(--gutter-desktop);
  background: var(--ad-palco);
  border-radius: var(--ad-raio) 0 0 0;
  /* respiro medido no modelo: 72px em cima, 40 embaixo */
  padding-block: var(--space-16) var(--space-10);
  --ad-raio: 44px;
}
.antes-depois__saida {
  position: relative;
  overflow: hidden;
  color: var(--ad-tinta);
  padding-block: var(--space-12) var(--space-20);
}
/* os ornamentos ficam atrás de tudo e não recebem ponteiro; os containers
   sobem para a camada de conteúdo */
.antes-depois__palco > .container,
.antes-depois__saida > .container { position: relative; z-index: 2; }
.antes-depois__ornamento {
  position: absolute;
  z-index: 1;
  color: var(--terracota-400);
  opacity: .42;
  pointer-events: none;
}
.antes-depois__ornamento svg { display: block; width: 100%; height: 100%; }
/* o traço com a faísca cai na calha entre as duas colunas da cabeça: 50%
   da largura é onde a coluna de apoio começa, e o recuo negativo o encosta
   na borda dela sem invadir o texto */
.antes-depois__ornamento--traco {
  top: var(--space-24); left: 44%;
  width: 64px; height: 210px;
}
/* o overflow:hidden do palco recorta pela forma do painel, então o ramo
   pode sangrar pelas bordas sem escapar do escuro */
.antes-depois__ornamento--ramo {
  top: -20px; right: 8%;
  width: 190px; height: 220px;
  transform: scaleX(-1);
  opacity: .3;
}
/* no modelo ela não sangra pela esquerda: nasce a ~40px da borda e sai por
   baixo, e é bem mais presente que os ornamentos do palco escuro */
.antes-depois__ornamento--folha {
  bottom: -50px; left: 4px;
  width: 202px; height: 245px;
  opacity: .42;
}

/* o aviso mora dentro da coluna do título, colado nele — no modelo ele lê
   como nota de rodapé da manchete, não como um parágrafo à parte */
/* fio curto sob o rótulo da seção — 26px para 123 de texto, ou ~1/5 da
   largura dele, medido no modelo do bloco Antes & Depois. Vale para os dois
   rótulos terracota (claro sobre escuro, e o normal sobre claro) — currentColor
   em vez de um tom fixo, porque cada variante já tem sua própria cor de
   texto e o fio deve seguir junto. O margin-bottom do .eyebrow continua
   valendo depois do fio, então o respiro até a manchete não muda de dono. */
.eyebrow--terracota::after,
.eyebrow--terracota-claro::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  /* --space-2 e não --space-3: a caixa de linha do rótulo já carrega a
     folga do descendente, então 8px de margem viram os 12px de vão entre a
     TINTA do texto e o fio que o modelo mostra. Com 12px de margem dava 17. */
  margin-top: var(--space-2);
  background: currentColor;
}

/* o acento da manchete em caramelo, como no modelo. É o --terracota-300,
   o mesmo tom que tokens.css marca como "não usar fora de .procedimentos" —
   e a razão daquele aviso não vale aqui: ele nasceu do contraste ruim sobre
   fundo CLARO (2,9:1 sobre --sand-100). Sobre o #20191A deste palco o mesmo
   tom dá 4,84:1, acima do mínimo até para texto normal, e isto é display de
   64px. */
.antes-depois .secao__titulo em { color: var(--terracota-300); }

.antes-depois__aviso {
  margin-top: var(--space-8);
  font-size: var(--text-body-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-inverse-secondary);
  max-width: 52ch;
}
.antes-depois__aviso strong { color: var(--text-inverse); font-weight: var(--weight-medium); }

.antes-depois__corpo {
  margin-top: var(--space-20);
  display: grid;
  grid-template-columns: minmax(300px, 430px) 1fr;
  gap: var(--space-16);
  align-items: start;
}

/* ── comparador ──
   Quadro DEITADO (7:6), não retrato: é a proporção do modelo. As fotos são
   1000×1250, então o object-fit corta em cima e embaixo e sobra o
   enquadramento de rosto e ombros que o modelo mostra. */
.comparador {
  --pos: 50%;
  position: relative;
  aspect-ratio: 7 / 6;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sand-400);
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}
.comparador img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* uma propriedade só governa o corte, a linha e a alça. Antes o JS escrevia
   três estilos por quadro de arrasto; agora escreve --pos e o CSS deriva o
   resto. */
/* inset:0 é obrigatório, não decoração. O único filho deste div é a imagem,
   que é absoluta — sem isso ele fica com altura zero, e como o clip-path
   recorta pela caixa do próprio elemento, uma caixa de altura zero apagava
   o "depois" inteiro. */
.comparador__depois {
  position: absolute;
  inset: 0;
  clip-path: inset(0 0 0 var(--pos));
}
.comparador__linha {
  position: absolute; top: 0; bottom: 0; width: 1px;
  background: rgba(255,255,251,.9); left: var(--pos); pointer-events: none;
}
/* alça redonda com as duas setas dentro, como no modelo — não mais a
   pílula vertical lisa. O disco é grande o bastante (40px) para ser alvo de
   toque decente e para as setas caberem legíveis. */
.comparador__alca {
  position: absolute; top: 50%; left: var(--pos);
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--porcelain-50);
  color: var(--espresso-800);
  transform: translate(-50%, -50%);
  cursor: ew-resize;
  box-shadow: 0 2px 12px rgba(43,39,33,.34);
  transition: transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.comparador__setas { width: 26px; height: 16px; }
.comparador__alca:hover,
.comparador__alca:focus-visible { transform: translate(-50%, -50%) scale(1.1); }

/* A transição vale para mudança programática — trocar de caso, teclado — e
   é desligada durante o arrasto: ali o corte tem que colar no dedo, e
   qualquer interpolação vira atraso. */
.comparador:not([data-arrastando]) :is(.comparador__depois, .comparador__linha, .comparador__alca) {
  transition: clip-path var(--duration-base) var(--ease-standard),
              left var(--duration-base) var(--ease-standard);
}
.comparador[data-arrastando] { cursor: ew-resize; }
/* pílulas com fio de contorno: sobre foto clara o scrim sozinho some, e é o
   hairline que mantém a forma legível em qualquer caso da régua */
.comparador__rotulo {
  position: absolute; bottom: var(--space-5);
  font-size: var(--text-body-sm);
  color: var(--text-inverse); background: var(--scrim-flat);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  box-shadow: inset 0 0 0 1px var(--border-inverse);
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-pill);
}
.comparador__rotulo--antes { left: var(--space-5); }
.comparador__rotulo--depois { right: var(--space-5); }

/* ── ficha do caso ── */
.antes-depois__ficha { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-2); }
/* região em versalete terracota, o mesmo registro do eyebrow do topo da
   seção — no modelo os dois rótulos falam com a mesma voz */
.antes-depois__regiao {
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--terracota-200);
}
/* serifada ITÁLICA — o mesmo registro do acento das manchetes ("se
   enxerga", "sua beleza"). Uma rodada atrás isto estava romano, por leitura
   errada minha do modelo; o cliente confirmou a inclinação em 2026-08-20. */
.antes-depois__nome {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-display-md);
  line-height: 1.15;
  margin-top: var(--space-3);
}
.antes-depois__detalhe { margin-top: var(--space-4); font-size: var(--text-body-sm); line-height: var(--leading-relaxed); color: var(--text-inverse-secondary); max-width: 46ch; }

/* ── régua de casos ──
   Largura da miniatura numa variável porque três coisas dependem dela: a
   altura do slot (retrato 4:5) e, a partir daí, a altura em que o tracejado
   entre as miniaturas tem de cair para bater com o meio delas. */
.antes-depois__casos {
  --caso-largura: 104px;
  --caso-vao: var(--space-5);
  display: flex;
  gap: var(--caso-vao);
  flex-wrap: wrap;
}
.caso {
  position: relative;
  width: var(--caso-largura);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: center;
  cursor: pointer;
}
/* o tracejado que costura a régua: vive no vão à esquerda de cada
   miniatura, menos a primeira. A altura é calculada, não chutada — meio da
   miniatura = largura × 5/4 ÷ 2, porque o slot é 4:5. */
.caso + .caso::before {
  content: "";
  position: absolute;
  top: calc(var(--caso-largura) * 5 / 8);
  left: calc(-1 * var(--caso-vao) + 3px);
  width: calc(var(--caso-vao) - 6px);
  border-top: 1px dashed var(--border-inverse);
}
.caso__miniatura { position: relative; display: block; }
/* sem blur: o não-selecionado recua por opacidade e dessaturação, e o
   selecionado avança com anel. Desfocar a miniatura escondia justamente o
   que ela precisa mostrar — qual caso é. */
.caso img {
  width: 100%; aspect-ratio: var(--slot-retrato); object-fit: cover;
  display: block;
  border-radius: var(--radius-md);
  opacity: .48;
  filter: grayscale(.4);
  box-shadow: inset 0 0 0 1px transparent;
  transition: opacity var(--duration-base) var(--ease-standard),
              filter var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.caso:hover img { opacity: .8; filter: grayscale(.15); transform: translateY(-2px); }
/* o numeral fica sobre a foto, no canto de cima, e acompanha o estado:
   chip escuro quando o caso está em espera, terracota cheio quando é o que
   está no comparador */
.caso__indice {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  background: var(--scrim-flat);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  color: var(--text-inverse);
  transition: background var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.caso__nome {
  font-size: var(--text-micro);
  line-height: 1.35;
  color: var(--text-inverse-secondary);
  transition: color var(--duration-base) var(--ease-standard);
}
.caso[aria-current="true"] img {
  opacity: 1;
  filter: none;
  box-shadow: 0 0 0 2px var(--terracota-300);
}
.caso[aria-current="true"] .caso__indice {
  background: var(--terracota-300);
  color: var(--espresso-800);
}
.caso[aria-current="true"] .caso__nome { color: var(--text-inverse); }

/* a dica ganha a setinha desenhada do modelo — a mesma mão dos ornamentos,
   não um ícone de biblioteca. Ela não é decoração solta: aponta do texto
   para o comparador, à esquerda. */
.antes-depois__dica {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-caption);
  color: var(--text-inverse-secondary);
}
.antes-depois__dica-seta {
  flex: none;
  width: 62px; height: 26px;
  color: var(--terracota-200);
}

/* ── fecho, já sobre o creme ──
   Quatro colunas: manchete, a faísca que separa, o texto e a ação. A faísca
   é auto (mede o próprio desenho) para não roubar largura das outras. */
/* proporções medidas no recorte: as três colunas de conteúdo ficam quase
   iguais (1,14 : 1 : 1,13) e a faísca do meio mede só o próprio desenho */
.antes-depois__fecho {
  display: grid;
  grid-template-columns: 1.24fr auto 1fr 1.18fr;
  gap: var(--space-12);
  align-items: center;
  /* recuo DOBRADO em cima do gutter do .container: medido no modelo, a
     faixa do fecho é bem mais estreita que a régua padrão da página —
     ~71,5% da largura da tela contra os ~79% que o container sozinho dá.
     É o que traz a manchete e o fio do link para dentro. */
  padding-inline: calc(var(--gutter-desktop) * 2);
}
/* display-sm, não display-md: no modelo a manchete tem ~30px, não 44 — o
   fecho fala mais baixo que a cabeça da seção. E o teto de 22ch é o que
   segura "Resultados que respeitam" numa linha só e joga o acento itálico
   para a segunda. */
.antes-depois__fecho-titulo {
  /* --text-display-sm (32px). A conta que fecha isso: "Resultados que
     respeitam" mede 410px a 36px nesta fonte, e a coluna da manchete tem
     ~372 — a 36px a linha quebrava no meio da frase e o acento itálico
     subia junto. A 32px ela mede 364 e cabe, batendo com os 355 do modelo. */
  font-size: var(--text-display-sm);
  line-height: 1.2;
  letter-spacing: var(--tracking-heading);
  color: var(--espresso-900);
}
/* display:block em vez de teto em ch: a quebra entre a manchete e o acento
   itálico é fixa no modelo, e amarrá-la a uma largura fazia a linha de cima
   quebrar sozinha quando a coluna apertava ("Resultados que / respeitam
   sua beleza."). Assim a segunda linha é estrutural, não um acidente de
   medida. */
.antes-depois__fecho-titulo em {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--terracota-250);
}
/* a faísca é ALTA e fina — 13×60 no modelo, quase um risco vertical com
   pontas, não a estrela de proporção quadrada que estava aqui. Preenchida,
   não traçada: nessa largura um contorno de 1px ficaria oco. */
.antes-depois__fecho-marca { display: block; width: 13px; height: 60px; color: var(--terracota-250); }
.antes-depois__fecho-marca svg { display: block; width: 100%; height: 100%; }
/* ~260px no modelo, o que dá as quatro linhas do parágrafo */
.antes-depois__fecho-texto {
  /* --text-caption (13px): medindo as quatro linhas do modelo uma a uma
     contra as mesmas frases no browser, o corpo dá ~12,5px — 13 é o degrau
     da escala que cai em cima. A --text-body-sm (14) que estava aqui
     deixava o bloco visivelmente maior que o do modelo. */
  font-size: var(--text-caption);
  line-height: var(--leading-relaxed);
  color: var(--ad-tinta);
  /* medida em px, não em ch: o que precisa bater é a QUEBRA em quatro
     linhas do modelo, e a linha mais longa ("procedimento, organismo e
     protocolo indicado.") mede 267px no modelo. Em ch o valor pulava de wrap
     em wrap sem passar pelo ponto certo. */
  max-width: 285px;
}
/* link com fio embaixo, não botão: no modelo a saída da seção é discreta —
   uma linha de texto sublinhada por um fio da largura da coluna, com a
   seta empurrada para a ponta oposta. */
.antes-depois__fecho-acao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-4);
  /* o fio não é o terracota cheio: medido no modelo dá #D7B3A6, que é o
     mesmo tom a ~42% sobre o campo creme. Cheio, ele competia com o texto
     que sublinha. */
  border-bottom: 1px solid rgba(187, 126, 107, .42);
  font-size: var(--text-body-sm);
  color: var(--terracota-250);
  transition: color var(--duration-base) var(--ease-standard);
}
.antes-depois__fecho-acao svg {
  flex: none;
  width: 20px; height: 20px;
  transition: transform var(--duration-base) var(--ease-standard);
}
.antes-depois__fecho-acao:hover { opacity: 1; color: var(--espresso-800); }
.antes-depois__fecho-acao:hover svg { transform: translateX(4px); }

/* ===================== AVALIAÇÃO =====================
   Redesenhada sobre o modelo do cliente, 2026-08-21. Proporção de colunas
   (foto : corpo) medida no modelo — a foto ocupa uma fatia um pouco menor
   que a metade.

   BUG pré-existente corrigido aqui: a seção nunca teve container/gutter
   próprios (nem antes desta rodada) — sem <div class="container"> e sem
   max-width/padding-inline na própria .avaliacao, a foto encostava na
   borda esquerda da tela e o texto na direita em qualquer largura maior
   que --container-max. As três linhas abaixo replicam a receita de
   .container na própria seção, já que aqui ela FAZ o papel de container
   (é o grid de duas colunas, não um filho dele). */
.avaliacao {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
  padding-block: var(--section-padding-y);
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: var(--space-16);
  align-items: stretch;
}

/* ── foto com dois overlays ──
   SEM aspect-ratio de propósito — mesmo bug já corrigido na foto da
   recepção em Nossa Estrutura: um item de grid com aspect-ratio, esticado
   pelo align-items:stretch padrão a uma linha bem mais alta que a própria
   largura permitiria, calcula uma largura maior que a da própria faixa do
   grid e estoura para dentro da coluna vizinha (aqui, por cima do texto).
   Sem aspect-ratio o item volta a stretch puro: mede sempre a largura da
   própria faixa e a altura exata da coluna de texto ao lado — garantido
   pelo layout, não por uma proporção que precisa coincidir. position:
   relative é o bloco contentor dos dois overlays; a foto em si segue o
   mesmo padrão de .proc__figura (picture fora do fluxo, preenchendo o
   slot inteiro). */
.avaliacao__foto {
  /* <figure> tem margin de UA (1em 40px no Chrome) — sem resetar, os 40px
     de cada lado eram exatamente o que sobrava entre a largura medida e a
     da própria faixa do grid. Mesma linha já existe em .membro__retrato,
     a outra <figure> do projeto. */
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sheet);
  background: var(--surface-image);
}
.avaliacao__foto picture { position: absolute; inset: 0; display: block; }
/* a médica não fica no centro geométrico da foto (está mais à direita,
   perto de ~68% da largura) — sem object-position, o corte automático
   centraliza no meio da FOTO, não nela, e o quadro (alto e estreito) a
   empurra para a borda direita do crop. */
.avaliacao__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; }

/* cartão flutuante — canto superior esquerdo, vidro claro sobre a foto */
.avaliacao__cartao {
  position: absolute;
  top: var(--space-6);
  left: var(--space-6);
  z-index: var(--z-conteudo);
  width: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  /* 50% opaco (50% de transparência), não o --glass-light padrão (72%
     opaco) — pedido específico deste cartão, não do token compartilhado
     com .proc__indice */
  background: rgba(255, 255, 251, .5);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  box-shadow: var(--shadow-raised);
}
.avaliacao__cartao-icone {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  box-shadow: inset 0 0 0 1px var(--terracota-250);
  color: var(--terracota-300);
}
.avaliacao__cartao-icone svg { width: 17px; height: 17px; }
.avaliacao__cartao-eyebrow {
  margin: 0;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--terracota-600);
}
/* mesmo registro do acento das manchetes: serifada itálica */
.avaliacao__cartao-titulo {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-title);
  color: var(--text-primary);
}
.avaliacao__cartao-texto { margin: 0; font-size: var(--text-caption); line-height: var(--leading-relaxed); color: var(--text-secondary); }

/* faixa escura — canto inferior, vidro escuro com os 4 pilares do
   atendimento. Largura do cartão claro (200px) mais o próprio recuo já
   ocupa quase 1/3 da foto; a faixa cobre o resto da largura para os 4
   itens não espremerem. */
.avaliacao__faixa {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-conteudo);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  /* cor exata pedida pelo cliente (#392A1A), a 60% de opacidade (40% de
     transparência) — não o --glass-dark genérico que estava aqui antes.
     Com transparência, o blur segue necessário: sem ele a foto por baixo
     apareceria nítida através do painel em vez de esmaecida. */
  background: rgba(57, 42, 26, .6);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
}
.avaliacao__faixa-item { display: flex; flex-direction: column; gap: var(--space-2); }
/* 22px, não 15: no tamanho anterior o ícone praticamente sumia contra o
   painel escuro — pequeno demais pra ler como selo, ficava só um risco */
.avaliacao__faixa-icone {
  width: 30px; height: 30px;
  margin-bottom: var(--space-2);
  /* #E2B8A7 pedido pelo usuário (2026-08-21), fora da rampa terracota do
     tokens.css — só este ícone usa esse tom */
  color: #E2B8A7;
}
.avaliacao__faixa-nome { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--text-inverse); }
.avaliacao__faixa-texto { font-size: 11px; line-height: 1.4; color: var(--text-inverse-secondary); }

/* ── corpo (coluna direita) ──
   overflow-wrap é propriedade herdada — declarada uma vez aqui, cobre o
   título e todo texto descendente. BUG medido em 500px de largura (menor
   viewport que as ferramentas de teste deste projeto conseguem simular):
   "procedimento", "responsabilidade", "personalizado" e outras palavras
   longas do próprio conteúdo do modelo não cabem na coluna de texto
   quando ela aperta bastante, e sem isto o navegador deixa a palavra
   inteira vazar da caixa (comportamento padrão) em vez de quebrá-la. */
.avaliacao__corpo { overflow-wrap: break-word; }
.avaliacao__titulo { font-size: var(--text-display-lg); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); max-width: 20ch; text-wrap: pretty; }
.avaliacao__titulo em { font-family: var(--font-serif); font-style: italic; color: var(--terracota-300); }
.avaliacao__texto { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-10); max-width: 52ch; }
.avaliacao__texto p { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.avaliacao__texto strong { font-weight: var(--weight-medium); color: var(--text-primary); }

/* grade de 4 recursos, cada um com selo circular */
.avaliacao__recursos {
  margin-top: var(--space-12);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.avaliacao__recurso { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.avaliacao__recurso-icone {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--creme-cartao);
  color: var(--terracota-300);
}
.avaliacao__recurso-icone svg { width: 22px; height: 22px; }
.avaliacao__recurso-nome {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--terracota-600);
}
.avaliacao__recurso-texto { font-size: var(--text-caption); line-height: var(--leading-relaxed); color: var(--text-secondary); }

/* divisor com a mesma faísca já usada em Antes e Depois e Nossa Estrutura
   — reaproveitar o glifo em vez de desenhar um símbolo novo */
.avaliacao__divisor {
  position: relative;
  height: 1px;
  margin-block: var(--space-10);
  background: var(--border-default);
}
.avaliacao__divisor svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  color: var(--terracota-300);
}

/* cartão de CTA — painel creme com avatares, texto e botão numa linha */
.avaliacao__cta {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--creme-bloco);
}
.avaliacao__cta-avatares { display: flex; flex: none; }
.avaliacao__cta-avatares img {
  width: 40px; height: 40px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--creme-bloco);
  margin-left: -12px;
}
.avaliacao__cta-avatares img:first-child { margin-left: 0; }
.avaliacao__cta-texto { flex: 1 1 auto; min-width: 0; }
.avaliacao__cta-titulo { margin: 0; font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--text-primary); }
.avaliacao__cta-apoio { margin: var(--space-1) 0 0; font-size: var(--text-body-sm); color: var(--text-secondary); }
.avaliacao__cta-acao { flex: none; gap: var(--space-2); }
.avaliacao__cta-acao svg { width: 18px; height: 18px; }

/* fileira de 4 informações rápidas — ícone + texto lado a lado, sem
   divisor entre elas (o espaçamento generoso já separa) */
.avaliacao__info {
  margin-top: var(--space-10);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.avaliacao__info-item { display: flex; align-items: flex-start; gap: var(--space-3); }
.avaliacao__info-icone { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--terracota-300); }
.avaliacao__info-nome { margin: 0; font-size: var(--text-caption); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-primary); }
.avaliacao__info-texto { margin: var(--space-1) 0 0; font-size: var(--text-caption); line-height: var(--leading-relaxed); color: var(--text-secondary); }

/* ===================== NATURALIDADE ===================== */
/* mesmo fundo do palco de antes/depois (--espresso-950); .secao--escura
   entra só pelo color: var(--text-inverse), sem fundo próprio */
.naturalidade {
  background: var(--espresso-950);
  padding-block: var(--section-padding-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
}
.naturalidade__titulo { font-size: var(--text-display-lg); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); max-width: 24ch; text-wrap: pretty; }
/* mesmo fundo --espresso-950 do palco de Antes e Depois: mesmo terracota-300, mesmo contraste */
.naturalidade__titulo em { color: var(--terracota-300); }
.naturalidade__texto { display: flex; flex-direction: column; gap: var(--space-3); max-width: 52ch; }
.naturalidade__texto p { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--text-inverse-secondary); }

/* ===================== EQUIPE ===================== */
.equipe { position: relative; overflow: hidden; padding-block: var(--section-padding-y); }
.equipe__titulo {
  font-size: var(--text-display-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  /* 21ch e não 16: em 16 o título cai em quatro linhas e a última fica só
     com o itálico, o que enfraquece o acento. Em 21 fecha em três, como na
     referência, com o itálico fechando sozinho a última linha. */
  max-width: 21ch;
  text-wrap: pretty;
}
.equipe__titulo em { color: var(--terracota-300); }

/* ── ornamentos ──
   Ficam atrás de tudo e não recebem ponteiro. Somem no mobile: numa tela
   estreita eles passam por baixo do texto em vez de emoldurar a seção. */
.equipe__ornamento {
  position: absolute;
  z-index: 0;
  color: var(--terracota-400);
  opacity: .45;
  pointer-events: none;
}
.equipe__ornamento svg { display: block; width: 100%; height: 100%; }
.equipe__ornamento--traco { top: var(--space-16); right: -40px; width: 300px; height: 265px; }
.equipe__ornamento--ramo  { bottom: -30px; left: -50px; width: 230px; height: 270px; opacity: .35; }
/* o container precisa ficar acima dos ornamentos */
.equipe > .container { position: relative; z-index: var(--z-base); }

/* sprite dos glifos: só define os <symbol>, nunca desenha nada */
.equipe__glifos { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Quatro colunas, duas linhas — a régua editorial da seção:
     ficha 01 · retrato grande · retratos 02/03 · fichas 02/03
   O destaque toma as duas primeiras colunas nas duas linhas; as outras
   duas pessoas ocupam uma linha cada nas colunas 3–4. Assim as três
   fichas ficam em colunas de verdade (a 1 e a 4), alinhadas entre si,
   em vez de flutuarem ao lado de cada foto. */
.equipe__composicao {
  margin-top: var(--space-20);
  display: grid;
  /* col1 e col4 são as fichas e têm mínimo em px: o texto é versalete de
     13px com tracking largo, e "SKINCARE PERSONALIZADO" numa coluna estreita
     quebra em duas linhas — foi o que empurrou as fichas para baixo do pé da
     foto na primeira tentativa. col2 e col3 ficam com o que sobra, na
     proporção da referência (o retrato grande ~1,6× o de cima). */
  grid-template-columns: minmax(185px, 1fr) 2.45fr 1.52fr minmax(260px, 1.41fr);
  /* linhas em metades exatas (mínimo 0, não auto): assim quem dita a altura
     da composição é o retrato grande, pela proporção dele, e não a ficha
     mais alta. A condição para isso valer é a ficha caber em meia altura do
     retrato grande — é por isso que col4 tem 260px de mínimo e o chip tem
     line-height apertado: sem isso a ficha estoura a metade e volta a
     empurrar a linha, que foi o desalinhamento das bases. */
  grid-template-rows: repeat(2, minmax(0, 1fr));
  /* gaps curtos de propósito: a composição da referência é densa, e com 40px
     entre os retratos o bloco se solta em três peças em vez de ler como uma
     só. O row-gap também entra na conta da altura — quanto menor, mais
     próximo de retrato o quadro grande fica. */
  column-gap: var(--space-8);
  row-gap: var(--space-6);
}

/* sem gap próprio: numa subgrid o gutter tem que ser o do pai, senão as
   colunas do filho deixam de cair sobre as linhas da grade principal e o
   alinhamento entre as três fichas se perde. */
.membro { display: grid; }
/* o <article> herda as colunas do pai em vez de abrir uma grade própria:
   é o que mantém foto e ficha das três na mesma régua vertical.
   align-items: stretch (padrão) é obrigatório aqui — é o que deixa o
   retrato grande esticar pelas duas linhas. */
.membro--destaque { grid-column: 1 / 3; grid-row: 1 / 3; grid-template-columns: subgrid; }
/* as duas de baixo alinham pelo topo: o numeral encosta na borda de cima da
   foto, como na régua da referência */
.membro:not(.membro--destaque) { grid-column: 3 / 5; grid-template-columns: subgrid; }
/* só a ficha encosta no topo; se o align-items: start ficasse no <article>,
   o retrato pararia de esticar e voltaria à proporção intrínseca da imagem */
.membro:not(.membro--destaque) .membro__ficha { align-self: start; }
/* no HTML a ordem é sempre retrato → ficha; no destaque o CSS inverte */
.membro--destaque .membro__retrato { order: 2; }
.membro--destaque .membro__ficha { order: 1; justify-content: center; }

.membro__retrato {
  position: relative;
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-image);
}
/* Nenhum dos três retratos tem proporção fixa e nenhum é medido pela foto
   que carrega: o <picture> sai do fluxo (absolute), então a imagem 4:5 não
   impõe mais a altura intrínseca dela ao quadro. Sem isso os dois retratos
   da direita voltavam a medir largura × 1,25 e estufavam a linha.

   Quem dá altura à linha passa a ser a ficha; os três retratos esticam até
   preencher a linha que ocupam (height: 100%). O retrato grande vaza as duas
   linhas, então mede exatamente retrato 02 + gap + retrato 03 — topo com
   topo e base com base, por construção e em qualquer largura. */
.membro__retrato { height: 100%; }
.membro__retrato picture {
  position: absolute;
  inset: 0;
  display: block;
}
.membro__retrato img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform var(--duration-editorial) var(--ease-standard);
}
.membro:hover .membro__retrato img { transform: scale(var(--image-zoom-hover)); }

/* ── painel de especialidades ──
   Cartão recuado das bordas da foto, com raio próprio — não uma faixa
   colada no rodapé.

   .membro__veu cobre a foto INTEIRA (inset: 0) e o corpo do cartão se
   ancora sozinho no rodapé desse quadro (bottom fixo, sem top).

   O gatilho mora DENTRO do corpo do cartão, no canto superior direito
   dele — não mais solto sobre a foto. Como é filho do cartão, herda a
   opacidade dele: aparece e some junto com as especialidades, em vez de
   ficar visível o tempo todo.

   Abre por botão de verdade (aria-expanded), então funciona no toque e sem
   GSAP; o hover do desktop é só um atalho a mais. */
.membro__veu {
  position: absolute;
  inset: 0;
  z-index: var(--z-conteudo);
  pointer-events: none;
}
.membro__veu-corpo {
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--glass-dark);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  box-shadow: inset 0 0 0 1px var(--border-inverse);
  color: var(--text-inverse);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.membro__retrato[data-aberto] .membro__veu-corpo { opacity: 1; transform: none; }
/* atalho de desktop: passar o ponteiro abre sem precisar clicar */
@media (hover: hover) and (pointer: fine) {
  .membro:hover .membro__veu-corpo { opacity: 1; transform: none; }
}
/* recolhido pelo × — TEM de vir depois da regra de hover: as duas têm a
   mesma especificidade (0,3,0), então quem decide é a ordem de origem. Sem
   isto o clique no × não fazia nada visível no desktop, porque para
   alcançar o botão o ponteiro já está dentro do membro e o :hover mantinha
   o painel aberto. Ver main.js § toggle do painel. */
.membro__retrato[data-recolhido] .membro__veu-corpo {
  opacity: 0;
  transform: translateY(12px);
}
/* quando o GSAP assume, ele controla opacidade e deslocamento — a
   transição do CSS sai de cena para as duas não brigarem */
[data-equipe-gsap] .membro__veu-corpo { transition: none; }

/* rótulo + fio à direita, como na referência. O padding-right reserva a
   faixa do gatilho, que voltou a dividir esta linha ao mudar para dentro do
   cartão: o botão tem 30px e fica a --space-4 da borda, então invade
   ~22px do content box (que já é recuado por --space-6) — 32px cobre isso
   com folga. Sem a reserva, o fio de 52px passava por baixo dele nos dois
   cartões estreitos. */
.membro__veu-rotulo {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-right: var(--space-8);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-inverse-secondary);
}
.membro__veu-rotulo::after {
  content: "";
  flex: 1 1 0;
  max-width: 52px;
  height: 1px;
  background: var(--border-inverse);
}
.membro__veu-lista {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  list-style: none;
}
/* corpo menor por padrão: as colunas 02/03 têm ~250px de largura, e
   "Skincare personalizado" em --text-body (16px) quebrava em duas linhas.
   A diretora clínica, na coluna larga, aguenta o corpo maior — ver override
   logo abaixo. */
.membro__veu-lista li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-body-sm);
  line-height: 1.3;
}
.glifo {
  flex: none;
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--blush-200);
}
.membro--destaque .membro__veu-lista li { gap: var(--space-4); font-size: var(--text-body); }
.membro--destaque .glifo { width: 22px; height: 22px; }
.membro__veu-acao {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-inverse);
}

/* o × do cartão — ancorado no canto superior direito do CORPO do cartão
   (que é position:absolute, então serve de bloco contentor), não mais sobre
   a foto. O mesmo botão gira: + vira × ao abrir.

   Fica fora da árvore de acessibilidade (aria-hidden + tabindex="-1") de
   propósito: o painel inteiro repete, palavra por palavra, o que a ficha já
   diz sempre visível ao lado. Expor um botão que abre conteúdo duplicado só
   faria o leitor de tela ouvir tudo duas vezes. */
.membro__gatilho {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 30px; height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--scrim-flat);
  -webkit-backdrop-filter: var(--blur-glass);
  backdrop-filter: var(--blur-glass);
  box-shadow: inset 0 0 0 1px var(--border-inverse);
  color: var(--text-inverse);
  cursor: pointer;
  /* none por padrão: o botão herda a opacidade do cartão, e opacity:0 NÃO
     desliga clique — sem isto sobraria um alvo de toque invisível de 30px
     no canto de cada retrato. Só passa a receber ponteiro quando o cartão
     está de fato visível. */
  pointer-events: none;
  transition: background var(--duration-fast) var(--ease-standard);
}
.membro__retrato[data-aberto] .membro__gatilho { pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  .membro:hover .membro__gatilho { pointer-events: auto; }
}
/* recolhido, o botão some junto com o cartão — e some do ponteiro também,
   senão sobra um alvo invisível no canto enquanto o ponteiro segue dentro
   do membro. Para reabrir, sair e voltar. Mesma regra de ordem da de cima. */
.membro__retrato[data-recolhido] .membro__gatilho { pointer-events: none; }
.membro__gatilho:hover { background: rgba(43,39,33,.68); }
/* o glifo é uma barra só; a segunda é o ::before girado 90°. Relativo (não
   absoluto) para o place-items do botão continuar centrando as duas. */
.membro__gatilho-glifo {
  position: relative;
  width: 13px; height: 1px;
  background: currentColor;
  transition: transform var(--duration-base) var(--ease-standard);
}
.membro__gatilho-glifo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  transform: rotate(90deg);
}
/* + vira × sempre que o painel está ABERTO, seja por clique ou por hover.
   Antes a regra pendurava em [aria-expanded="true"], que só o clique liga —
   aberto por hover, o botão continuava mostrando o +, sugerindo "abrir" um
   painel que já estava aberto. Os três seletores repetem a mesma cascata do
   cartão, na mesma ordem: recolhido por último, para vencer o hover no
   desempate por ordem de origem. */
.membro__retrato[data-aberto] .membro__gatilho-glifo { transform: rotate(45deg); }
@media (hover: hover) and (pointer: fine) {
  .membro:hover .membro__gatilho-glifo { transform: rotate(45deg); }
}
.membro__retrato[data-recolhido] .membro__gatilho-glifo { transform: none; }

.membro__ficha { display: flex; flex-direction: column; align-items: flex-start; }

/* numeral em serif, grande: é ornamento com função, não rótulo */
.membro__indice {
  font-family: var(--font-serif);
  font-size: var(--text-display-md);
  line-height: 1;
  color: var(--terracota-400);
}
/* fio com ponto na ponta — o traço que liga o número ao nome */
.membro__fio {
  position: relative;
  display: block;
  width: 100%;
  max-width: 170px;
  height: 1px;
  margin: var(--space-3) 0 var(--space-4);
  background: linear-gradient(90deg, var(--terracota-400), var(--sand-300));
}
.membro__fio::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px; height: 5px;
  border-radius: var(--radius-circle);
  background: var(--terracota-600);
  transform: translate(50%, -50%);
}
.membro__nome {
  font-family: var(--font-serif);
  font-size: var(--text-aba);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--text-primary);
  text-wrap: balance;
}
.membro__cargo {
  margin-top: var(--space-3);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--terracota-600);
}
/* a especialidade principal em chip de canto reto, não em pílula: aqui a
   pílula é a forma da AÇÃO (ver direcao.md § Componentes), e um rótulo que
   não clica não pode se parecer com um botão. */
.membro__especialidade {
  margin-top: var(--space-4);
  align-self: flex-start;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--sand-200);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--espresso-700);
}
/* áreas de atuação — o marcador é uma fáisca de 4 pontas em ::before, o
   mesmo desenho da ponta do ornamento. Não é ícone de biblioteca (proibição
   do projeto), é um caractere desenhado com clip-path. */
.membro__areas {
  margin-top: var(--space-5);
  /* o reset da página não zera <ul>: sem isto o navegador aplica os seus
     40px de padding-inline-start e a lista inteira desencosta da régua da
     ficha — era o desalinhamento visível à esquerda de cada nome */
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
}
.membro__areas li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-caption);
  line-height: 1.5;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.membro__areas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .38em;
  width: 9px; height: 9px;
  background: var(--terracota-600);
  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}
.membro__acao {
  margin-top: var(--space-6);
  gap: var(--space-3);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--terracota-600);
  box-shadow: inset 0 0 0 1px var(--blush-300);
}
.membro__acao:hover { background: var(--sand-100); box-shadow: inset 0 0 0 1px var(--terracota-600); }
.membro__acao span { transition: transform var(--duration-base) var(--ease-standard); }
.membro__acao:hover span { transform: translateX(4px); }

/* fecho: três palavras entre fios, centradas — fecha a seção sem precisar
   de mais um bloco de texto */
.equipe__fecho {
  margin-top: var(--space-20);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.equipe__fecho::before,
.equipe__fecho::after {
  content: "";
  flex: 1 1 0;
  max-width: 200px;
  height: 1px;
  background: var(--border-default);
}
.equipe__fecho span { display: inline-flex; align-items: center; gap: var(--space-6); }
.equipe__fecho span + span::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: var(--radius-circle);
  background: var(--sand-400);
}

.depoimentos { padding-block: var(--section-padding-y); }

/* cabeçalho centralizado: aqui a seção não compete com nada ao lado, e
   centralizar reforça que o que vem abaixo são vozes, não catálogo.
   text-align:center só centra o TEXTO do rótulo — o fio do ::after é um
   bloco à parte, largura fixa, então precisa do próprio margin-inline:auto
   para acompanhar. */
.depoimentos__cabeca { text-align: center; max-width: 46ch; margin-inline: auto; }
.depoimentos__cabeca .eyebrow--terracota::after { margin-inline: auto; }
/* rótulo na cor neutra do texto do bloco, não no terracota — mesmo ajuste
   já feito em Filosofia */
.depoimentos__cabeca .eyebrow--terracota { color: var(--text-muted); }
.depoimentos__titulo {
  font-size: var(--text-display-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}
.depoimentos__titulo em { color: var(--terracota-300); }

.depoimentos__mural {
  margin-top: var(--space-20);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-12);
  align-items: start;
}

/* sem caixa, sem borda, sem sombra: três cartões brancos lado a lado num
   fundo claro só somariam moldura. O que separa uma voz da outra é o
   espaço e as aspas. */
.depoimento {
  display: grid;
  /* linhas fixas alinham aspas, texto e assinatura entre os três, mesmo
     com citações de comprimentos diferentes */
  grid-template-rows: auto 1fr auto;
  gap: var(--space-6);
  margin: 0;
  text-align: center;
  animation: depo-entra var(--duration-slow) var(--ease-entrance) backwards;
  animation-delay: calc(var(--ordem) * 80ms);
}
@keyframes depo-entra {
  from { opacity: 0; transform: translateY(var(--reveal-distance)); }
}
.depoimento__aspas {
  font-family: var(--font-accent);
  font-size: 56px;
  line-height: .6;
  color: var(--sand-400);
  height: 34px;
}
.depoimento__texto {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.depoimento__autoria { display: flex; flex-direction: column; gap: var(--space-1); }
.depoimento__nome {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-primary);
}
.depoimento__contexto { font-size: var(--text-caption); color: var(--text-muted); }

.depoimentos__semjs {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
}

/* ── paginação ── */
.pager {
  margin-top: var(--space-16);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}
.pager[hidden] { display: none; } /* uma página só não precisa de controle */
.pager__botao {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px var(--border-default);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-body); color: var(--text-primary); cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-instant) var(--ease-standard);
}
.pager__botao:hover { background: var(--porcelain-50); box-shadow: inset 0 0 0 1px var(--terracota-600); opacity: 1; }
.pager__botao:active { transform: scale(var(--press-scale)); }

.pager__pontos { display: flex; align-items: center; gap: var(--space-2); }
/* o alvo de clique tem 24px mesmo com o ponto de 7px: alvo do tamanho do
   desenho seria pequeno demais para o dedo */
.pager__ponto {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  cursor: pointer;
}
.pager__ponto::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: var(--radius-circle);
  background: var(--sand-400);
  transition: background var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.pager__ponto:hover::before { background: var(--taupe-400); }
.pager__ponto[aria-current="true"]::before { background: var(--terracota-600); transform: scale(1.25); }

/* ── selo do Google ── */
.depoimentos__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-12);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--duration-base) var(--ease-standard);
}
.depoimentos__google:hover { opacity: 1; color: var(--text-primary); }
.depoimentos__google-icone { width: 16px; height: 16px; flex: none; }
.depoimentos__google span { transition: transform var(--duration-base) var(--ease-standard); }
.depoimentos__google:hover span { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .depoimento { animation: none; }
}

/* ===================== LOCALIZAÇÃO =====================
   Grid próprio, sem .container — mesma receita de .avaliacao (a section É
   o container: max-width, margin e padding-inline nela mesma). Coluna de
   texto mais estreita que o mapa, mesma lógica de proporção da Estrutura. */
.localizacao {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-desktop);
  padding-block: var(--section-padding-y);
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.7fr);
  gap: var(--space-16);
  /* stretch, não start: a faixa precisa terminar na mesma base do botão à
     esquerda, e é o mapa (flex:1 abaixo) que absorve a diferença de altura */
  align-items: stretch;
}
.localizacao__titulo {
  margin-top: var(--space-3);
  font-size: var(--text-display-lg);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  max-width: 20ch;
  text-wrap: pretty;
}
.localizacao__titulo em { font-family: var(--font-serif); font-style: italic; color: var(--terracota-300); }
.localizacao__texto { margin-top: var(--space-5); font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--text-secondary); max-width: 40ch; }

/* cartão com borda, três linhas separadas por fio — mesmo par ícone+rótulo
   já usado em .avaliacao__info-item, só que empilhado dentro de uma moldura
   em vez de solto numa fileira */
.localizacao__lista {
  margin-top: var(--space-10);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.localizacao__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
}
.localizacao__item + .localizacao__item { border-top: 1px solid var(--border-default); }
.localizacao__item-icone {
  flex: none;
  width: 50px; height: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  background: var(--blush-200);
  color: var(--terracota-600);
}
.localizacao__item-icone svg { width: 30px; height: 30px; }
/* Horário e Contato: sem preenchimento, só a borda — maior que o pin de
   Endereço porque, sem fundo pintado, o mesmo tamanho parecia menor. */
.localizacao__item-icone--contorno {
  width: 50px; height: 50px;
  background: none;
  border: 1px solid var(--terracota-250);
  color: var(--terracota-300);
}
.localizacao__item-nome {
  margin: 0;
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--terracota-600);
}
.localizacao__item-texto { margin: var(--space-1) 0 0; font-size: var(--text-body-sm); line-height: var(--leading-relaxed); color: var(--text-primary); }
.localizacao__item-texto a:hover { opacity: .72; }

/* versalete com tracking, ícone dos dois lados — mesmo registro do botão de
   fechamento de Procedimentos */
.localizacao__cta {
  width: 100%;
  margin-top: var(--space-8);
  /* calendário + texto encostados à esquerda, seta na ponta direita — não
     é o center padrão do .btn */
  justify-content: space-between;
  padding-inline: var(--space-8);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  /* pílula padrão (--radius-pill) fica extrema num botão full-width; menos
     arredondado aqui */
  border-radius: var(--radius-lg);
}
.localizacao__cta-rotulo { display: inline-flex; align-items: center; gap: var(--space-3); }
.localizacao__cta svg { width: 40px; height: 40px; flex: none; }
.localizacao__cta .btn__seta { width: 30px; transition: transform var(--duration-base) var(--ease-standard); }
.localizacao__cta:hover .btn__seta { transform: translateX(4px); }

.localizacao__coluna-mapa { display: flex; flex-direction: column; gap: var(--space-6); }
.localizacao__mapa {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sheet);
  /* cresce para preencher o que sobra da coluna depois da faixa — é isso
     que empurra a base da faixa até bater com a base do botão ao lado */
  flex: 1 1 auto;
  min-height: 320px;
  background: var(--surface-image);
  box-shadow: var(--shadow-raised);
}
.localizacao__mapa-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* faixa clara com os 3 diferenciais — ícone em anel, mesma receita de
   .avaliacao__cartao-icone (círculo vazado, sem fundo) */
.localizacao__faixa {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}
.localizacao__faixa-item { display: flex; align-items: center; gap: var(--space-3); }
.localizacao__faixa-icone {
  flex: none;
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-circle);
  color: var(--terracota-300);
}
.localizacao__faixa-icone svg { width: 55px; height: 55px; }
.localizacao__faixa-texto { margin: 0; font-size: var(--text-body-sm); line-height: var(--leading-relaxed); color: var(--text-primary); }

/* ===================== CTA FINAL ===================== */
.cta-final {
  padding-block: var(--section-padding-y);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  text-align: center;
  background: var(--creme-bloco);
}
.cta-final__titulo { font-size: var(--text-display-lg); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); max-width: 20ch; text-wrap: pretty; }
.cta-final__titulo em { color: var(--terracota-300); }
.cta-final__texto { display: flex; flex-direction: column; gap: var(--space-3); max-width: 50ch; }
.cta-final__texto p { font-size: var(--text-body); line-height: var(--leading-relaxed); color: var(--text-secondary); }
.cta-final__rodape { font-size: var(--text-caption); color: var(--text-muted); }

/* ===================== FOOTER ===================== */
.rodape { background: var(--espresso-950); color: var(--text-inverse); padding: var(--space-24) var(--gutter-desktop) var(--space-10); }
.rodape__grade { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-16); align-items: start; }
.rodape__marca { display: flex; flex-direction: column; gap: var(--space-5); }
.rodape__marca img { height: 30px; width: auto; filter: brightness(0) invert(1); align-self: flex-start; }
.rodape__mote { font-size: var(--text-body); line-height: 1.6; }
.rodape__rotulo { font-size: var(--text-caption); color: var(--text-inverse-secondary); margin-bottom: var(--space-4); }
.rodape__endereco { font-size: var(--text-body-sm); line-height: 1.6; }
.rodape__contato { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-body-sm); line-height: 1.6; }
.rodape__legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-6); }
.rodape__legal a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rodape__resp { color: var(--text-inverse-secondary); }
/* enquanto o dado não vier da cliente, o marcador fica visível e cobra */
[data-pendente] { font-weight: var(--weight-regular); border-bottom: 1px dashed currentColor; }

.rodape__base {
  margin-top: var(--space-20);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-inverse);
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  font-size: var(--text-micro);
  color: var(--text-inverse-secondary);
  flex-wrap: wrap;
}

/* ===================== BOTÃO FLUTUANTE — WHATSAPP =====================
   Pílula fixa, mesma receita de projetos/raissa-consultoria: entra depois
   da primeira dobra (ver main.js), rótulo recolhido que abre no
   hover/foco, anel de pulso a lembrar que é clicável. Reskin nos tokens
   da Aurorae — cor, sombra e easing daqui, não do outro projeto. */
.whatsapp-flutuante {
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px);
  z-index: var(--z-flutuante);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--control-height-lg);
  padding-inline: var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--terracota-300);
  color: var(--porcelain-50);
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  transform: translateY(18px) scale(.92);
  pointer-events: none;
  transition: opacity var(--duration-slow) var(--ease-standard),
              transform var(--duration-slow) var(--ease-standard),
              background var(--duration-base) var(--ease-standard);
}
.whatsapp-flutuante[data-visivel="true"] { opacity: 1; transform: none; pointer-events: auto; }
.whatsapp-flutuante:hover { opacity: 1; background: var(--terracota-300-hover); }
.whatsapp-flutuante:focus-visible { outline: 2px solid var(--terracota-300-hover); outline-offset: 3px; }

.whatsapp-flutuante__icone { width: 24px; height: 24px; flex: none; }

.whatsapp-flutuante__rotulo {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width var(--duration-slow) var(--ease-standard),
              opacity var(--duration-base) var(--ease-standard);
}
.whatsapp-flutuante:hover .whatsapp-flutuante__rotulo,
.whatsapp-flutuante:focus-visible .whatsapp-flutuante__rotulo { max-width: 190px; opacity: 1; }

.whatsapp-flutuante__pulso {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--terracota-250);
  animation: whatsapp-pulso 2.8s var(--ease-standard) infinite;
  pointer-events: none;
}
@keyframes whatsapp-pulso {
  0%        { transform: scale(1);   opacity: .55; }
  70%, 100% { transform: scale(1.4); opacity: 0; }
}

/* o menu móvel cobre a tela inteira: o botão sai de cena junto — mesmo
   data-attribute que o .topo já observa */
[data-menu-movel][data-aberto="true"] ~ .whatsapp-flutuante { opacity: 0; pointer-events: none; }

@media (max-width: 600px) {
  .whatsapp-flutuante { height: 52px; padding-inline: var(--space-3); }
  .whatsapp-flutuante__rotulo { display: none; }
}

/* ===================== RESPONSIVO ===================== */
/* ── Equipe: a régua de quatro colunas é layout de tela larga ──
   A altura das linhas vem da ficha, que tem altura de texto e não encolhe
   com a janela; as colunas dos retratos, sim. Abaixo de ~1240px os dois
   deixam de conversar e os retratos viram tiras verticais (chegam a 0,41 de
   proporção em 1100px). Em vez de deixar degradar, a composição troca de
   forma: uma pessoa por linha, retrato ao lado da ficha. */
@media (max-width: 1240px) {
  .equipe__composicao {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: var(--space-16);
  }
  .membro,
  .membro--destaque,
  .membro:not(.membro--destaque) {
    grid-column: 1;
    grid-row: auto;
    grid-template-columns: 1.25fr minmax(250px, .8fr);
    gap: var(--space-8);
    align-items: center;
  }
  /* sem as duas linhas para vazar, o retrato grande volta a ter proporção
     própria — e todos os três voltam ao fluxo normal */
  .membro__retrato { height: auto; aspect-ratio: 4 / 3.2; }
  .membro--destaque .membro__retrato { aspect-ratio: var(--slot-retrato); }
  .membro__retrato picture { position: static; }
  .membro--destaque .membro__retrato { order: 0; }
  .membro--destaque .membro__ficha { order: 0; justify-content: flex-start; }
  .membro:not(.membro--destaque) .membro__ficha { align-self: center; }
  /* os ornamentos passariam por baixo do texto em vez de emoldurar a seção */
  .equipe__ornamento { display: none; }
  .equipe__fecho { margin-top: var(--space-16); }
}

/* uma coluna de verdade: retrato em cima, ficha embaixo */
@media (max-width: 760px) {
  .membro,
  .membro--destaque,
  .membro:not(.membro--destaque) {
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: start;
  }
  .membro__retrato,
  .membro--destaque .membro__retrato { aspect-ratio: 4 / 3; }
  .membro:not(.membro--destaque) .membro__ficha { align-self: start; }
  /* as áreas de atuação viram duas colunas: em uma só, três linhas de
     versalete empurram o próximo retrato para longe demais */
  .membro__areas { flex-flow: row wrap; column-gap: var(--space-8); }
}

@media (max-width: 1200px) {
  /* entre 960 e 1200 a coluna da ficha cai para ~400px e os 5 casos em
     104px + vão de 20 somam 600 — a régua quebrava em duas fileiras e o
     tracejado apontava para o vazio. Encolhe antes de chegar lá. */
  .antes-depois__casos { --caso-largura: 92px; --caso-vao: var(--space-4); }
  .antes-depois__corpo { grid-template-columns: minmax(280px, 380px) 1fr; gap: var(--space-12); }

  .depoimentos__mural { grid-template-columns: repeat(2, 1fr); gap: var(--space-10); }
  /* 4 colunas de card ficam estreitas demais antes disso */
  /* a coluna alta do destaque só funciona com folga lateral de sobra; abaixo
     de 1200px a grade vira uma coluna só: o destaque deitado em cima,
     ocupando a largura inteira, e o bloco dos demais embaixo. */
  .proc-grade { grid-template-columns: 1fr; }
  /* a camada sobreposta depende de o destaque esticar junto da grade de
     cards pequenos ao lado; sozinho na própria linha, sem altura de
     referência, a foto absolute+inset:0 encolhe até a altura do texto.
     Abaixo disso a foto volta ao fluxo, empilhada com o corpo. */
  .proc--destaque .proc__figura { position: relative; inset: auto; aspect-ratio: 16 / 9; flex: none; }
  /* background: var(--scrim-destaque), não none: empilhado o painel fica
     sobre o espresso-800 do cartão (tom quase idêntico ao do scrim), e
     assim o filete do raio invertido — que é pintado com o scrim — não
     mostra emenda de cor contra o painel. */
  .proc--destaque .proc__corpo {
    margin-top: 0;
    padding: var(--space-6);
    background: var(--scrim-destaque);
  }
}

@media (max-width: 960px) {
  .container { padding-inline: var(--gutter-mobile); }
  /* .avaliacao faz o papel do próprio container (ver comentário na regra
     base) — precisa do mesmo reset de gutter que .container recebe aqui */
  .avaliacao { padding-inline: var(--gutter-mobile); }
  .topo__nav, .topo__acoes > a { display: none; }
  .menu-toggle { display: flex; }
  /* 2 colunas, não 3: .topo__nav (a 1ª) some por inteiro com o display:none
     acima, e um `gap` de grid vale entre TODAS as colunas declaradas, tenha
     ou não item dentro — manter "auto 1fr auto" deixava uma coluna vazia
     mais o vão ao lado dela como sobra fantasma de 24px, e o botão nunca
     encostava de fato na borda direita. */
  .topo__inner { grid-template-columns: 1fr auto; padding-inline: var(--gutter-mobile); }
  .topo__marca { justify-self: start; }

  /* o .hero NÃO leva padding: vídeo e imagem são absolutos com inset:0, e o
     containing block deles é o padding box — um padding aqui abriria faixas
     do fundo escuro nas laterais em vez de sangrar a imagem. A sangria do
     conteúdo é responsabilidade do .hero__base. */
  .procedimentos { margin-inline: var(--space-3); border-radius: var(--radius-lg); }
  /* o reset genérico de .secao__cabeca (uma coluna) perde da regra
     .procedimentos .secao__cabeca lá de cima, que tem uma classe a mais de
     especificidade — sem repetir aqui, a cabeça continuava em duas colunas
     no mobile e o parágrafo de apoio vazava para fora da tela */
  .procedimentos .secao__cabeca { grid-template-columns: 1fr; gap: var(--space-10); }

  .hero__base { padding-inline: var(--gutter-mobile); flex-direction: column; align-items: flex-start; gap: var(--space-6); }
  /* some no mobile: o hero já é a foto inteira com título e CTA por cima —
     esse parágrafo de apoio só teria espaço competindo com eles */
  .hero__apoio { display: none; }
  /* idem para o link secundário — sobra um único CTA (o botão) no hero */
  .hero__acoes .link-seta { display: none; }

  .depoimentos__mural { grid-template-columns: 1fr; gap: var(--space-16); }

  .membro__fio { max-width: 120px; }

  .secao__cabeca,
  .estrutura__topo,
  .antes-depois__corpo,
  .antes-depois__fecho,
  .avaliacao,
  .localizacao,
  .rodape__grade {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
  .localizacao { padding-inline: var(--gutter-mobile); }
  /* a grade de fotos empilhada abaixo do texto, com o mesmo tratamento de
     .desejo/.avaliacao que já existia: a foto sobe antes do texto quando
     as duas viram uma coluna só, ver .estrutura__grade abaixo */
  .estrutura__grade { order: -1; }
  /* os ornamentos somem: mesma decisão já tomada em Equipe e Antes e
     Depois — numa coluna estreita eles passam por baixo do texto em vez de
     emoldurar a seção */
  .estrutura__ornamento { display: none; }
  /* 2 colunas em vez de 4: nesse ponto cada recurso já não cabe legível */
  .estrutura__recursos { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-8); }
  .estrutura__recurso:nth-child(3) { border-left: none; }
  /* o destaque toma a linha inteira e deixa de ser deitado; os 6 cartões
     pequenos deixam de empilhar em coluna e passam a rolar na horizontal —
     numa tela estreita, empilhados eles somavam altura demais para uma
     seção só. O cartão seguinte fica sempre espiando na borda, sinal de
     que dá para rolar, sem precisar de seta nem indicador (ver largura
     abaixo). */
  .proc-grade__resto {
    display: flex;
    align-items: stretch;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter-mobile);
    scrollbar-width: none;
  }
  .proc-grade__resto::-webkit-scrollbar { display: none; }
  .proc-grade__resto .proc {
    /* peek constante de 40px: 100% menos 56px (40 de espiada + 16 do gap,
       --space-4) sempre deixa a borda do próximo cartão visível. Antes era
       min(78vw, 300px), que aproximava a largura disponível pela da
       viewport inteira — sem descontar o margin-inline de .procedimentos
       (--space-3) nem o padding-inline de .container (--gutter-mobile), a
       espiada dava só ~2px a 390px de tela e ficava NEGATIVA (cartão
       seguinte totalmente escondido) entre ~360-375px, as larguras mais
       comuns de celular. % aqui já reflete a largura real do próprio
       .proc-grade__resto, depois de todas as margens da seção. */
    flex: 0 0 min(calc(100% - 56px), 300px);
    scroll-snap-align: start;
  }
  .proc--destaque .proc__nome { font-size: var(--text-title); }
  /* a régua rola na horizontal; ícone e texto encolhem junto */
  .abas[data-pronto] .abas__lista { gap: var(--space-6); }
  .aba { gap: var(--space-3); padding-bottom: var(--space-5); }
  .aba__icone { width: 38px; height: 38px; }
  .aba__icone svg { width: 20px; height: 20px; }
  .procedimentos__fecho { flex-direction: column; align-items: flex-start; padding: var(--space-6); }
  .procedimentos__fecho-cabeca { flex: none; }
  /* o traço era vertical (altura da linha) porque a cabeça e o apoio
     ficavam lado a lado; empilhados em coluna, um traço vertical de 1px
     não separa nada — vira um risco solto do tamanho da própria altura.
     Some, e o gap do flex column já dá o respiro entre os blocos. */
  .procedimentos__fecho-divisor { display: none; }
  /* nowrap é seguro na largura do desktop; numa coluna de ~340px a mesma
     frase estoura a tela. Volta a quebrar normalmente aqui. */
  .procedimentos__fecho-sub { white-space: normal; }
  .procedimentos__fecho-apoio { max-width: none; }
  .procedimentos__fecho-acao { align-self: stretch; }

  /* a foto sobe antes do texto quando as duas viram uma coluna só, mesmo
     tratamento de .estrutura__grade acima */
  .avaliacao__foto { order: -1; }
  /* BUG: sem aspect-ratio, a foto só ganha altura por align-items:stretch
     dividindo linha com .avaliacao__corpo — o que só é verdade em duas
     colunas. Empilhada (uma coluna só, cada uma na sua própria linha), a
     foto não tem mais com quem esticar: sem conteúdo em fluxo normal (só
     tem filhos position:absolute), ela colapsa para altura zero e some.
     Volta a ter proporção própria aqui, onde o risco de estourar a coluna
     vizinha (motivo de ter tirado o aspect-ratio lá em cima) não existe
     mais — não há mais coluna vizinha para estourar. */
  .avaliacao__foto { aspect-ratio: 671 / 949; }
  /* 4 colunas de 342px de coluna não cabem — a grade de recursos e a fileira
     de info viram 2×2; a faixa escura (4 colunas, larga demais para uma
     foto que já encolheu para caber na coluna) some */
  .avaliacao__faixa { display: none; }
  /* o cartão claro não some — muda de canto (estava no superior esquerdo)
     para o inferior direito, com largura fixa em vez dos 200px sobrando
     livres o suficiente para não precisar encolher o conteúdo */
  .avaliacao__cartao {
    top: auto;
    left: auto;
    bottom: var(--space-4);
    right: var(--space-4);
    width: min(200px, 55%);
  }
  .avaliacao__recursos { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-8); }
  .avaliacao__info { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-6); }
  /* avatares + texto + botão não cabem numa linha só; o botão desce e
     ocupa a largura inteira do cartão */
  .avaliacao__cta { flex-wrap: wrap; }
  .avaliacao__cta-acao { flex-basis: 100%; justify-content: center; }

  .secao { padding-block: var(--section-padding-y-tight); }
  .filosofia, .procedimentos, .estrutura, .avaliacao,
  .naturalidade, .equipe,
  .depoimentos, .cta-final { padding-block: var(--section-padding-y-tight); }
  /* .antes-depois não entra na lista: a section não tem padding vertical
     próprio, quem paga é cada palco. */
  .antes-depois__palco { padding-block: var(--space-12) var(--space-10); }
  .antes-depois__saida { padding-block: var(--space-10) var(--space-12); }
  /* rampa proporcionalmente menor: em tela estreita os 80px de ombro comem
     metade da altura da cabeça da seção */
  /* recuo e canto proporcionalmente menores; em tela estreita 64px de
     recuo comem largura demais do conteúdo */
  .antes-depois__palco { margin-left: var(--gutter-mobile); --ad-raio: 24px; }

  .antes-depois__casos { --caso-largura: 84px; --caso-vao: var(--space-3); }
  /* numa coluna só a régua quebra em duas fileiras; o tracejado do começo
     de cada fileira passaria a costurar o vazio à esquerda */
  .caso + .caso::before { display: none; }
  /* os ornamentos somem: numa coluna só eles passam por baixo do texto em
     vez de emoldurar a seção — mesma decisão da Equipe */
  .antes-depois__ornamento { display: none; }
  /* empilhado, o fio embaixo da manchete do fecho vira um risco solto do
     tamanho da coluna; a faísca do meio some junto */
  .antes-depois__fecho-marca { display: none; }
  .antes-depois__fecho-titulo { max-width: none; }

  /* no mobile a barra legal empilha junto com o resto do rodapé */
  .rodape__base { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

@media (max-width: 600px) {
  /* título e eyebrow das seções, menores no mobile — referência é o padrão
     de projetos/raissa-consultoria: lá o título de seção é um clamp() com
     piso de 32px (nunca o tamanho cheio de desktop numa tela de telefone) e
     o eyebrow de abertura de seção é 11.5px. --text-display-lg alimenta o
     título de quase toda seção (Filosofia, Procedimentos, Estrutura,
     Avaliação, Naturalidade, Equipe, Depoimentos, CTA final, Localização),
     então redefinir o token aqui ajusta todas de uma vez, sem repetir
     regra por seção. */
  :root { --text-display-lg: 32px; }
  .eyebrow { font-size: 11.5px; }

  /* a rolagem horizontal dos 6 cartões pequenos já resolve o empilhamento
     desde 960px (ver bloco acima) — aqui só a proporção da foto do destaque
     volta a ficar alta, mais editorial que uma faixa baixa e larga quando a
     tela é estreita o bastante para virar mobile de verdade. */
  .proc--destaque .proc__figura { aspect-ratio: 3 / 2; }

  /* abaixo disso os dois fios não deixam sobrar largura para as palavras */
  .equipe__fecho { flex-wrap: wrap; gap: var(--space-4); }
  .equipe__fecho::before, .equipe__fecho::after { flex-basis: 100%; max-width: none; }
  .equipe__fecho span { gap: var(--space-4); }

  /* sem o teto de ch (removido acima), uma palavra longa some sem quebrar
     em vez de estourar a tela — mesma proteção que .avaliacao__corpo já
     tinha por já ter estourado com "procedimento"/"personalizado" */
  .hero__titulo { max-width: none; overflow-wrap: break-word; }
  .estrutura__titulo, .secao__titulo, .avaliacao__titulo,
  .naturalidade__titulo, .cta-final__titulo { max-width: none; overflow-wrap: break-word; }

  /* 1 coluna: a 2 colunas de 960px ainda cabia, mas abaixo de 600px cada
     metade vira ~270px e a descrição mais longa (Tecnologia avançada)
     forçava 5 linhas — melhor uma coluna larga que duas apertadas */
  .estrutura__recursos { grid-template-columns: 1fr; row-gap: var(--space-8); }
  .estrutura__recurso { border-left: none; border-top: 1px solid var(--border-default); padding-top: var(--space-6); padding-inline: 0; }
  .estrutura__recurso:first-child { border-top: none; padding-top: 0; }

  /* mesma lógica: 2 colunas de ~270px ainda estoura texto mais longo —
     uma coluna só nos dois blocos de Avaliação que também eram 4→2
     (a faixa já saiu de cena desde 960px, ver acima) */
  .avaliacao__recursos { grid-template-columns: 1fr; row-gap: var(--space-6); }
  .avaliacao__info { grid-template-columns: 1fr; row-gap: var(--space-5); }

  /* mesma lógica: faixa de 3 também não cabe numa coluna de ~294px */
  .localizacao__faixa { grid-template-columns: 1fr; row-gap: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  [data-reveal-pronto] { opacity: 1; transform: none; }
  /* o JS não arma o botão nesse modo — o CSS o deixa visível e sem pulso */
  .whatsapp-flutuante { opacity: 1; transform: none; pointer-events: auto; }
  .whatsapp-flutuante__pulso { display: none; }
}