/* bio-sections.css — componentes das seções institucionais, estende bio-v3.css */

/* Rolagem suave para âncoras internas (CTA "Quero investigar meu caso" → #agendamento) */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Seleção de texto na cor da casa — microdetalhe que assina a página inteira */
::selection { background: var(--champagne); color: var(--ink); }

/* Bodoni Moda é fonte óptica variável (opsz 6–96): nos corpos grandes de citação o eixo
   óptico afina os traços e abre os detalhes — sem isso ela renderiza no corte de texto. */
.bio { display: block; font-optical-sizing: auto; }

#agendamento { scroll-margin-top: 2rem; }

/* ═══ HERO ═══
   Retrato ocupa a dobra inteira; texto centralizado sobre painel de vidro.
   Sem moldura e sem trilho lateral (herdados da home) — pedido: centralizar de verdade. */
.hero {
  position: relative;
  display: grid;
  /* No celular o painel desce: o retrato ocupa o topo e ela aparece de verdade.
     No desktop volta ao centro (ver media query). */
  align-items: end;
  justify-items: center;
  min-height: 100svh;
  overflow: hidden;
  padding: 2rem 1rem 2.5rem;
  background: var(--oxblood);
}

.hero__media { position: absolute; inset: 0; z-index: 0; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Retrato 1:1 com o rosto no terço esquerdo e o cabelo atravessando pra direita:
     o painel centralizado pousa sobre o cabelo, nunca sobre o rosto. */
  object-position: 50% 30%;
  filter: saturate(0.85) contrast(1.04);
}

/* Véu em camadas: dá contraste ao texto sem apagar a foto */
.hero__wash {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(23 17 15 / 0.42) 0%, rgb(42 14 19 / 0.24) 40%, rgb(23 17 15 / 0.8) 100%);
}

.hero__content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  max-width: 40rem;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  border: 1px solid rgb(200 154 90 / 0.22);
  /* Piso de contraste do painel (30/09): o fundo era quase todo transparente
     (0.07 de névoa sobre 0.28 de tinta) e contava com o desfoque para separar
     texto de foto. Onde a mecha clara passava atrás, o contraste caía a 1,3:1 —
     a linha do CRM e a especialidade sumiam. Agora a camada escura é a base e a
     névoa fica só como brilho: vidro fumê em vez de vidro limpo. A foto continua
     legível ao redor do painel, que é onde ela conta. */
  background:
    linear-gradient(150deg, rgb(240 233 225 / 0.06), rgb(240 233 225 / 0.02)),
    linear-gradient(150deg, rgb(23 17 15 / 0.76), rgb(23 17 15 / 0.88));
  box-shadow: inset 0 1px rgb(240 233 225 / 0.09), 0 2rem 5rem rgb(0 0 0 / 0.4);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}

.hero__mark { width: 3.4rem; height: auto; margin-bottom: 1.4rem; opacity: 0.95; }

.hero__eyebrow {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin: 0 0 1.1rem;
  color: var(--champagne);
  font: 500 0.7rem/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hero__eyebrow::before, .hero__eyebrow::after {
  content: "";
  flex: 0 0 1.6rem;
  height: 1px;
  background: rgb(200 154 90 / 0.5);
}

.hero h1 {
  max-width: 100%;
  margin: 0;
  font-family: var(--performance);
  font-size: clamp(2.1rem, 6.4vw, 3.9rem);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1;
  text-wrap: balance;
}

.hero h1 em {
  display: block;
  margin-top: 0.16em;
  color: var(--champagne);
  font-family: var(--serif);
  font-size: 0.88em;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.03em;
}

.hero__lead {
  max-width: 30rem;
  margin: 1.5rem 0 0;
  color: rgb(240 233 225 / 0.84);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.hero__credential {
  margin: 1.4rem 0 0;
  padding-top: 1.1rem;
  color: rgb(240 233 225 / 0.62);
  font: 500 0.7rem/1.6 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* Subiu de 0.63rem para o piso de 11px e passou a quebrar em duas linhas:
     balance reparte as duas em vez de deixar "PARTICULAR" órfã embaixo. */
  text-wrap: balance;
  border-top: 1px solid rgb(200 154 90 / 0.28);
}

.hero__cta {
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin-top: 1.9rem;
  padding: 1.05rem 2.4rem;
  color: var(--ink);
  font: 600 1rem var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  background: var(--mist);
  border: 1px solid var(--mist);
  box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.3);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

/* Brilho que varre o botão no hover — a assinatura de interação da página */
.hero__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%) skewX(-18deg);
  background: linear-gradient(105deg, transparent 30%, rgb(200 154 90 / 0.35) 50%, transparent 70%);
  transition: transform 600ms cubic-bezier(.2,.75,.2,1);
}

.hero__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 2.2rem rgb(0 0 0 / 0.4), 0 0 1.8rem rgb(200 154 90 / 0.22);
}

.hero__cta:hover::after { transform: translateX(110%) skewX(-18deg); }
.hero__cta:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hero__cta::after { display: none; }
}

@media (min-width: 52rem) {
  .hero { align-items: center; padding: 4rem 1.25rem; }
  .hero__media img { object-position: 50% 34%; }
  /* No desktop o painel vive no centro: escurece só a faixa central, deixando
     o rosto (esquerda) e o cabelo (direita) com luz própria. */
  .hero__wash {
    background:
      radial-gradient(ellipse 34rem 28rem at 50% 52%, rgb(23 17 15 / 0.62), transparent 70%),
      linear-gradient(180deg, rgb(23 17 15 / 0.3), rgb(23 17 15 / 0.34) 45%, rgb(23 17 15 / 0.78));
  }
}

/* ═══ LINHA DE PASSAGEM ═══
   O método atravessa a tela em movimento contínuo, ligando hero e tese clínica. */
.ticker {
  position: relative;
  overflow: hidden;
  padding: 1.1rem 0;
  background: var(--ink);
  border-block: 1px solid var(--line);
}

/* Esfumaçado nas pontas: o texto entra e sai da cena, não é cortado a faca */
.ticker::before, .ticker::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  width: 6rem;
  height: 100%;
  pointer-events: none;
}

.ticker::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-run 28s linear infinite;
}

.ticker__group {
  display: flex;
  gap: 2.2rem;
  align-items: center;
  padding-right: 2.2rem;
}

/* Mono em caixa-alta e corpo pequeno: lê como legenda de instrumento clínico,
   não como marquee de promoção. Elegância aqui é contenção. */
.ticker__group span {
  color: rgb(240 233 225 / 0.82);
  font: 500 0.78rem var(--mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Losango entre as palavras — mesma joia dos divisores de seção */
.ticker__group i {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: var(--champagne);
}

@keyframes ticker-run {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333%); }
}

.ticker:hover .ticker__track { animation-play-state: paused; }

/* Controle de pausa (30/09) — o hover pausava a faixa no desktop e não existia
   no celular. Movimento infinito que começa sozinho precisa de um jeito de
   parar (WCAG 2.2.2, nível A), e esse jeito tem que caber no dedo. O botão
   vive sobre o esfumaçado da direita, com 44×44 de alvo e traço só no foco. */
.ticker__toggle {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: rgb(200 154 90 / 0.75);
  cursor: pointer;
  transition: color 180ms ease;
}

.ticker__toggle:hover { color: var(--champagne); }
.ticker__toggle:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

/* Dois traços (pausa) que viram um triângulo (play) pelo estado do botão —
   sem ícone externo, sem requisição a mais. */
.ticker__toggle::before {
  content: "";
  width: 9px;
  height: 11px;
  background: currentColor;
  clip-path: polygon(0 0, 3px 0, 3px 100%, 0 100%, 0 0, 6px 0, 9px 0, 9px 100%, 6px 100%);
}

.ticker__toggle[aria-pressed="true"]::before {
  clip-path: polygon(0 0, 9px 50%, 0 100%);
}

.ticker.is-paused .ticker__track { animation-play-state: paused; }

/* Sem JS o botão não faz nada — então não aparece. */
.no-js .ticker__toggle { display: none; }

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

/* ═══ PAINEL DE VIDRO ═══
   Usado onde o motivo de cabelo passa por trás do texto: mantém a animação visível
   sem que ela dispute legibilidade com a leitura. */
.glass-panel {
  padding: clamp(1.5rem, 4vw, 2.25rem);
  border: 1px solid rgb(200 154 90 / 0.2);
  background: linear-gradient(150deg, rgb(240 233 225 / 0.06), rgb(23 17 15 / 0.32));
  box-shadow: inset 0 1px rgb(240 233 225 / 0.07), 0 1rem 3rem rgb(0 0 0 / 0.24);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.section {
  position: relative;
  padding: clamp(3rem, 8vw, 6rem) 1.25rem;
  border-top: 1px solid var(--line);
  overflow: hidden;
}

.section__inner {
  max-width: 46rem;
  margin-inline: auto;
}

/* Revelação ao rolar — um único momento por seção, sem exagero.
   JS adiciona .is-visible via IntersectionObserver (reveal.js); sem JS, tudo fica visível (progressive enhancement). */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(.2,.75,.2,1), transform 620ms cubic-bezier(.2,.75,.2,1);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.reveal-group > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms cubic-bezier(.2,.75,.2,1), transform 520ms cubic-bezier(.2,.75,.2,1);
}

.reveal-group.is-visible > * { opacity: 1; transform: translateY(0); }
.reveal-group.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-group.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-group.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-group.is-visible > *:nth-child(4) { transition-delay: 270ms; }

.no-js .reveal, .no-js .reveal-group > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-group > * { transition-duration: 0.01ms !important; }
}

/* Filete decorativo — mesma gramática gráfica do brand book (p26, "arco/espaço") aplicada como divisor de seção */
.section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 5.5rem;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
  opacity: 0.55;
}

/* Losango de joalheria no centro do filete — quadrado girado 45°, detalhe de alta-costura.
   Decorativo puro; o hero fica de fora (não tem divisor no topo da página). */
.section::after {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--oxblood);
  border: 1px solid var(--champagne);
  opacity: 0.8;
}

/* O losango precisa da cor do próprio fundo pra parecer recortado no filete */
.section--autoridade::after { background: var(--graphite); }
.section--territorio::after { background: var(--burgundy); }
.section--consulta::after, .section--rodape::after { background: var(--ink); }

/* Cabeçalho de seção — eyebrow + título + lead centralizados como "abertura editorial",
   separado do conteúdo de apoio (grids/cards), que segue com leitura natural à esquerda. */
.section__head {
  max-width: 32rem;
  margin: 0 auto 2.75rem;
  text-align: center;
}

.section__eyebrow {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.9rem;
  color: var(--steel);
  font: 500 0.7rem/1.4 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Filetes flanqueando o eyebrow — eco do divisor de seção, em miniatura */
.section__head .section__eyebrow::before,
.section__head .section__eyebrow::after {
  content: "";
  flex: 0 0 1.6rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(200 154 90 / 0.5));
}

.section__head .section__eyebrow::after {
  background: linear-gradient(90deg, rgb(200 154 90 / 0.5), transparent);
}

.section__title {
  margin: 0 0 1.5rem;
  color: var(--mist);
  font-family: var(--performance);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

.section__title em {
  color: var(--champagne);
  font-family: var(--serif);
  font-style: italic;
}

.section__lead {
  max-width: 30rem;
  margin: 0 auto;
  color: rgb(240 233 225 / 0.78);
  font-size: 1rem;
  line-height: 1.6;
  text-wrap: pretty;
}

.authority__quote, .territory__quote { text-align: center; }
.authority__quote { margin-inline: auto; }

/* Numeral fantasma — marca d'água de wayfinding, ecoa os números 01/02/03 já usados na home.
   Puramente decorativo (aria-hidden), nunca a única fonte da ordem/estrutura. */
.section__watermark {
  position: absolute;
  top: -1.5rem;
  right: 0.5rem;
  z-index: 0;
  color: rgb(240 233 225 / 0.05);
  font: 700 clamp(6rem, 22vw, 11rem) var(--mono);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.section--autoridade .section__watermark { color: rgb(200 154 90 / 0.06); }

/* Numeral "gravado" — só contorno, sem preenchimento: lê como baixo-relevo, não adesivo.
   Progressive enhancement: navegador sem text-stroke mantém o preenchimento tênue acima. */
@supports (-webkit-text-stroke: 1px black) {
  .section__watermark {
    color: transparent;
    -webkit-text-stroke: 1px rgb(240 233 225 / 0.08);
  }

  .section--autoridade .section__watermark {
    color: transparent;
    -webkit-text-stroke: 1px rgb(200 154 90 / 0.1);
  }
}

/* Traço de cabelo — motivo ilustrativo próprio (não é foto), ecoa fios em movimento */
.hair-motif {
  position: absolute;
  z-index: 0;
  opacity: 0.35;
  pointer-events: none;
}

.hair-motif--territorio { top: -2rem; left: -3rem; width: 16rem; height: 16rem; }

.hair-motif--hero {
  top: 0;
  right: 0;
  z-index: 1;
  width: 45%;
  height: 100%;
  opacity: 0.3;
}

/* ═══ MOTIVO HORMONAL ═══
   Órbitas com partículas em curso — leitura de sistema endócrino/molecular sem
   ilustração literal. Decorativo, atrás do conteúdo, nunca intercepta toque. */
.hormone-motif {
  position: absolute;
  right: -4rem;
  bottom: -3rem;
  z-index: 0;
  width: 20rem;
  height: 20rem;
  opacity: 0.3;
  pointer-events: none;
}

.hormone-motif__orbits { animation: hormone-spin 46s linear infinite; transform-origin: 100px 100px; }

.hormone-motif__core { animation: hormone-pulse 4.5s ease-in-out infinite; transform-origin: 100px 100px; }

/* Cada partícula percorre a própria órbita, em tempos diferentes — nunca sincronizam */
.hormone-motif__dot { transform-origin: 100px 100px; }
.hormone-motif__dot--1 { animation: hormone-orbit-a 11s linear infinite; }
.hormone-motif__dot--2 { animation: hormone-orbit-b 16s linear infinite; }
.hormone-motif__dot--3 { animation: hormone-orbit-c 21s linear infinite; }

@keyframes hormone-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes hormone-pulse {
  0%, 100% { opacity: 0.55; r: 3.5; }
  50% { opacity: 1; r: 4.6; }
}

@keyframes hormone-orbit-a {
  from { transform: rotate(0deg) translateX(72px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(72px) rotate(-360deg); }
}

@keyframes hormone-orbit-b {
  from { transform: rotate(60deg) translateX(72px) rotate(0deg); }
  to { transform: rotate(420deg) translateX(72px) rotate(-360deg); }
}

@keyframes hormone-orbit-c {
  from { transform: rotate(120deg) translateX(72px) rotate(0deg); }
  to { transform: rotate(480deg) translateX(72px) rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hormone-motif__orbits,
  .hormone-motif__core,
  .hormone-motif__dot { animation: none; }
}

/* Traços vivos — "desenha e apaga" em loop via stroke-dasharray/dashoffset (CSS puro,
   sem WebGL/canvas: sempre visível, nada pode falhar em silêncio).

   pathLength="1" no SVG normaliza o comprimento de QUALQUER curva para 1, então a mesma
   animação serve para desenhos de tamanhos diferentes — sem isso, cada traço novo exigiria
   um dasharray calibrado à mão e curvas longas ficariam com o ritmo errado. */
.hair-motif__path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: hair-draw 7s ease-in-out infinite;
}

.hair-motif__path--2 { animation-duration: 9s; animation-delay: 0.6s; }
.hair-motif__path--3 { animation-duration: 8s; animation-delay: 1.4s; }
.hair-motif__path--4 { animation-duration: 10.5s; animation-delay: 2.2s; }

@keyframes hair-draw {
  0% { stroke-dashoffset: 1; opacity: 0; }
  15% { opacity: 1; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  85% { opacity: 0.5; }
  100% { stroke-dashoffset: -1; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hair-motif__path { animation: none; stroke-dashoffset: 0; opacity: 0.55; }
}

/* Posições por dobra — cada seção recebe o motivo num canto diferente, em escala e
   ritmo próprios, para o olho nunca reconhecer repetição. */
/* Sobe até o teto da dobra: os fios atravessam ACIMA da citação, não em cima das aspas */
.hair-motif--autoridade { top: -3rem; left: -10%; width: 120%; height: 14rem; opacity: 0.3; }
.hair-motif--percepcao { right: -6rem; bottom: -2rem; width: 20rem; height: 20rem; opacity: 0.26; }
.hair-motif--consulta { top: 10%; right: -7rem; width: 20rem; height: 26rem; opacity: 0.24; }
.hair-motif--quem { bottom: -4rem; left: -6rem; width: 24rem; height: 20rem; opacity: 0.25; }
.hair-motif--agendamento { top: -2rem; left: 50%; width: 34rem; height: 12rem; margin-left: -17rem; opacity: 0.2; }

@media (max-width: 52rem) {
  /* No celular os motivos encolhem e clareiam: tela pequena satura rápido */
  .hair-motif--autoridade, .hair-motif--percepcao,
  .hair-motif--consulta, .hair-motif--quem, .hair-motif--agendamento { opacity: 0.16; }
}

.section > .section__inner, .section > .hero__statement { position: relative; z-index: 1; }

/* ═══ RITMO DE COR ═══
   Cada dobra tem um fundo próprio da paleta, alternando entre as três bases
   (ink → graphite → oxblood → burgundy) para a rolagem não virar um bloco só. */

/* Tese clínica — grafite frio, quebra o bordô do hero.
   Dobra curta de propósito: é uma pausa entre o hero e a argumentação. */
.section--autoridade {
  padding-block: clamp(3.5rem, 7vw, 5rem);
  background:
    radial-gradient(circle at 85% 15%, rgb(73 100 121 / 0.14), transparent 22rem),
    var(--graphite);
}

.section--autoridade .section__head { margin-bottom: 0; }

/* Percepção — oxblood profundo */
.section--percepcao {
  background:
    radial-gradient(circle at 50% -10%, rgb(71 24 32 / 0.85), transparent 34rem),
    var(--oxblood);
}

/* Território — o mais quente da página, burgundy assumido */
.section--territorio {
  background:
    radial-gradient(circle at 0% 20%, rgb(73 100 121 / 0.16), transparent 26rem),
    radial-gradient(circle at 80% 80%, rgb(200 154 90 / 0.07), transparent 24rem),
    var(--burgundy);
}


/* Consulta — quase preto, leitura longa sem ruído de cor */
.section--consulta {
  background:
    radial-gradient(circle at 15% 10%, rgb(71 24 32 / 0.5), transparent 30rem),
    var(--ink);
}

/* Quem vai cuidar — oxblood de novo, retrato ganha calor ao redor */
.section--quem {
  background:
    radial-gradient(circle at 70% 30%, rgb(71 24 32 / 0.75), transparent 32rem),
    var(--oxblood);
}

/* Agendamento — brilho champagne central marcando o destino da página */
.section--agendamento {
  background:
    radial-gradient(circle at 50% 45%, rgb(200 154 90 / 0.08), transparent 24rem),
    radial-gradient(circle at 50% -20%, rgb(71 24 32 / 0.8), transparent 30rem),
    var(--oxblood);
}

.section--rodape { background: var(--ink); }

/* --steel sobre --graphite mede 4.00:1 (falha AA pra texto normal); champagne mede 5.88:1 */
.section--autoridade .section__eyebrow { color: var(--champagne); }

@media (min-width: 52rem) {
  .section { padding: clamp(4rem, 6vw, 7rem) 3rem; }
}

/* Autoridade — citação editorial + diagrama de processo, no lugar da tira de texto corrida */

/* Citação centrada não combina com borda lateral (resto de quando era alinhada à esquerda);
   o ornamento agora é um monograma de aspas em Bodoni acima, como abertura de capítulo. */
.authority__quote {
  position: relative;
  margin: 0 auto 2.25rem;
  padding-top: 2.1rem;
  color: var(--mist);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 3.2vw, 1.8rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}

.authority__quote::before {
  content: "\201C";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: var(--champagne);
  font-size: 2.6rem;
  line-height: 1;
  opacity: 0.9;
}

/* Os três eixos da investigação, em destaque — o miolo da tese clínica */
.authority__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.1rem;
  align-items: center;
  justify-content: center;
  max-width: 34rem;
  margin: 0 auto 1.6rem;
  padding: 1.1rem 0;
  border-block: 1px solid rgb(200 154 90 / 0.3);
}

.authority__pillars span {
  color: var(--champagne);
  font-family: var(--performance);
  font-size: clamp(1.05rem, 3vw, 1.45rem);
  letter-spacing: 0.02em;
}

.authority__pillars i {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  transform: rotate(45deg);
  background: rgb(200 154 90 / 0.7);
}

.authority__close {
  max-width: 30rem;
  margin: 0 auto;
  color: rgb(240 233 225 / 0.8);
  font-size: 1.02rem;
  line-height: 1.55;
  text-wrap: balance;
}

.process {
  display: grid;
  gap: 0;
  counter-reset: process;
}

.process__step {
  position: relative;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0.9rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}

.process__step:last-child { border-bottom: 1px solid var(--line); }

.process__index {
  color: var(--champagne);
  font: 500 1.1rem/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.process__step strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--mist);
  font-family: var(--performance);
  font-size: 1.05rem;
}

.process__step span {
  color: rgb(240 233 225 / 0.65);
  font-size: 0.85rem;
  line-height: 1.5;
}

@media (min-width: 40rem) {
  .process { grid-template-columns: repeat(4, 1fr); }
  .process__step { grid-template-columns: 1fr; border-top: none; border-left: 1px solid var(--line); padding: 0 1.1rem; }
  .process__step:first-child { padding-left: 0; }
  .process__step:last-child { border-bottom: none; }
}

/* process--grid: 2x2 (dois a esquerda, dois a direita), pedido explicito -- substitui a tira de 4 */
.process--grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 1.5rem;
}

.process--grid .process__step {
  grid-template-columns: 2.75rem 1fr;
  border-top: 1px solid var(--line);
  border-left: none;
  padding: 1rem 0;
}

.process--grid .process__step:nth-child(-n+2) { border-top: none; }
.process--grid .process__step:first-child { padding-left: 0; }

@media (min-width: 40rem) {
  .process--grid { grid-template-columns: repeat(2, 1fr); }
  .process--grid .process__step {
    grid-template-columns: 2.75rem 1fr;
    border-left: none;
    border-top: 1px solid var(--line);
    padding: 1rem 0 1rem 1.1rem;
  }
  .process--grid .process__step:nth-child(odd) { padding-left: 0; padding-right: 1.5rem; border-right: 1px solid var(--line); }
  .process--grid .process__step:nth-child(-n+2) { border-top: none; }
}

/* Tratamentos */

.treatments {
  display: grid;
  gap: 1rem;
  margin-top: 1rem;
}

.treatments__card {
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--line);
  background: linear-gradient(115deg, rgb(240 233 225 / 0.06), rgb(73 100 121 / 0.04));
  transition: border-color 220ms ease, transform 220ms ease;
}

.treatments__icon {
  width: 2rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  color: var(--champagne);
}

.treatments__icon svg { width: 100%; height: 100%; }

.treatments__card h3 {
  margin: 0 0 0.25rem;
  color: var(--mist);
  font-family: var(--performance);
  font-size: 1.4rem;
  font-weight: 500;
}

.treatments__tag {
  margin: 0 0 0.6rem;
  color: var(--champagne);
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.treatments__card p:last-child {
  margin: 0;
  color: rgb(240 233 225 / 0.75);
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (min-width: 40rem) {
  .treatments { grid-template-columns: 1fr 1fr; }
  .treatments__card:hover { border-color: var(--champagne); transform: translateY(-3px); }
}

/* Percepção (era Tratamentos) */

.percepcao__statement {
  max-width: 32rem;
  margin: 0 auto 2rem;
  color: var(--mist);
  font-family: var(--performance);
  font-size: clamp(1.6rem, 4.2vw, 2.3rem);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.percepcao__statement em {
  display: block;
  margin-top: 0.35em;
  color: var(--champagne);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85em;
}

.percepcao__lead {
  max-width: 30rem;
  margin: 1.75rem auto 0;
  color: rgb(240 233 225 / 0.78);
  font-size: 1rem;
  line-height: 1.6;
  text-align: center;
}

.percepcao__context {
  max-width: 30rem;
  margin: 2.25rem auto 0;
  color: rgb(240 233 225 / 0.7);
  font-size: 0.95rem;
  line-height: 1.65;
  text-align: center;
}

.percepcao__highlight {
  display: inline-block;
  margin-top: 0.6rem;
  padding-bottom: 0.35rem;
  color: var(--champagne);
  font-family: var(--performance);
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  border-bottom: 1px solid rgb(200 154 90 / 0.45);
}

.percepcao__cta {
  position: relative;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  width: fit-content;
  margin: 2.25rem auto 0;
  padding: 0.95rem 1.9rem;
  color: var(--champagne);
  text-decoration: none;
  font: 600 0.92rem var(--sans);
  border: 1px solid var(--champagne);
  box-shadow: inset 0 0 0 0 var(--champagne);
  transition: color 220ms ease, box-shadow 260ms ease, transform 200ms ease;
}

/* Seta que respira — sinaliza "isso desce a página", não link externo */
.percepcao__cta::after {
  content: "↓";
  font-size: 0.95em;
  transition: transform 220ms ease;
}

/* Preenchimento por sombra interna: o dourado "sobe" de dentro, não pisca de uma vez */
.percepcao__cta:hover {
  color: var(--ink);
  box-shadow: inset 0 -3.5rem 0 0 var(--champagne);
  transform: translateY(-1px);
}

.percepcao__cta:hover::after { transform: translateY(2px); }
.percepcao__cta:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

/* Slideshow — reaproveitado em Percepção, Território e Casos. Sem JS: overflow-x:auto (scroll manual). */

.slideshow {
  max-width: 30rem;
  margin: 2rem auto 0;
  overflow: hidden;
}

.slideshow__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

/* Com JS o trilho CONTINUA sendo o scroller nativo — só perde a barra visível.
   Até 30/09 o JS trocava isto por overflow-x:hidden e movia o trilho por
   transform, sem nenhum handler de toque no lugar: o swipe, que funcionava na
   versão sem JavaScript, morria justamente no celular. Agora o gesto é do
   navegador (inércia, snap e acessibilidade de graça) e o JS só pinta os
   traços e leva o scroll até o slide pedido. */
.slideshow__track--js {
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.slideshow__track--js::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
  .slideshow__track--js { scroll-behavior: auto; }
}

.slideshow__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.slideshow__placeholder {
  display: grid;
  gap: 0.4rem;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: 1.5rem;
  text-align: center;
  border: 1px dashed rgb(200 154 90 / 0.4);
  background: rgb(240 233 225 / 0.03);
}

.slideshow__placeholder span {
  color: rgb(240 233 225 / 0.45);
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.slideshow__placeholder strong {
  color: var(--mist);
  font-family: var(--performance);
  font-size: 1.6rem;
  font-weight: 500;
}

.slideshow__dots {
  display: flex;
  /* 8px é o mínimo entre alvos de toque adjacentes (regra de toque);
     como o padding do botão já é transparente, esta é a folga REAL entre as áreas. */
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.3rem;
}

/* Traços, não bolinhas — mesma linguagem dos filetes champagne da página.
   O traço visível tem 22×2px, mas a área de toque precisa de 44×44 (auditoria pegou
   os 24×22 anteriores). O padding transparente + background-clip:content-box dá o
   alvo grande sem engordar o traço: o dedo acerta, o olho vê só a linha fina. */
.slideshow__dot {
  position: relative;
  width: 1.4rem;
  height: 2px;
  padding: 1.35rem 0.7rem;
  box-sizing: content-box;
  cursor: pointer;
  border: none;
  background: transparent;
}

/* O traço agora é um pseudo-elemento, não o fundo do botão: assim o alongamento
   do estado ativo sai por transform (fora da thread de layout) sem esticar
   junto a área de toque, que precisa continuar 44×44 e sem invadir a vizinha.
   Antes disto era `transition: width`, animando layout (30/09). */
.slideshow__dot::before {
  content: "";
  position: absolute;
  inset: 1.35rem 0.7rem;
  transform-origin: center;
  background-color: rgb(200 154 90 / 0.58);
  transition: background-color 220ms ease, transform 220ms ease;
}

.slideshow__dot[aria-current="true"]::before {
  transform: scaleX(1.57);
  background-color: var(--champagne);
}

.slideshow__dot:focus-visible { outline: 2px solid var(--champagne); outline-offset: 2px; }

.slideshow--notes .slideshow__placeholder { aspect-ratio: auto; }

.slideshow--notes .territory__note {
  padding: 1.5rem;
  border-left: none;
  border: 1px solid var(--line);
  background: linear-gradient(160deg, rgb(240 233 225 / 0.05), rgb(73 100 121 / 0.03) 60%, transparent);
  box-shadow: inset 0 1px rgb(240 233 225 / 0.06), 0 0.6rem 1.8rem rgb(0 0 0 / 0.2);
  text-align: center;
}

.slideshow--notes .territory__note b {
  display: flex;
  gap: 0.7rem;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  color: var(--champagne);
}

/* Filetes em miniatura flanqueando o rótulo do card — eco do eyebrow das seções */
.slideshow--notes .territory__note b::before,
.slideshow--notes .territory__note b::after {
  content: "";
  flex: 0 0 1.1rem;
  height: 1px;
  background: rgb(200 154 90 / 0.4);
}

.territory__note-img {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  margin-bottom: 1rem;
  overflow: hidden;
  border: 1px dashed rgb(200 154 90 / 0.35);
}

.territory__note-img:has(img) { border-style: solid; }

.territory__note-img img { width: 100%; height: 100%; object-fit: cover; }

.territory__note-img span {
  color: rgb(240 233 225 / 0.4);
  font: 500 0.72rem var(--mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


/* Foto de contexto discreta (Território) — nunca ocupa a dobra inteira */
.context-photo {
  display: grid;
  gap: 0.9rem;
  max-width: 20rem;
  margin: 2.5rem auto 0;
  text-align: center;
}

.context-photo__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 1rem;
  text-align: center;
  color: rgb(240 233 225 / 0.4);
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.04em;
  border: 1px dashed rgb(200 154 90 / 0.35);
}

.context-photo__caption {
  position: relative;
  margin: 0;
  padding-top: 0.9rem;
  color: rgb(240 233 225 / 0.72);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
}

/* Filete curto separando foto e legenda — mesma família do divisor de seção */
.context-photo__caption::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2.2rem;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgb(200 154 90 / 0.55), transparent);
}

/* Território EAA/Performance — citação grande quebra o ritmo repetido das outras seções */

/* Display (não corpo): a fala de performance pede a voz estrutural
   da marca, não a editorial — alinha com o H1 do hero e com o ticker. */
.territory__quote {
  max-width: 30rem;
  margin: 0 auto 1.75rem;
  color: var(--champagne);
  font-family: var(--performance);
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.08;
  text-wrap: balance;
}

.territory__notes {
  display: grid;
  gap: 1.1rem;
}

.territory__note {
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

.territory__note b {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--mist);
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.territory__note p {
  margin: 0;
  color: rgb(240 233 225 / 0.78);
  font-size: 0.92rem;
  line-height: 1.6;
}

@media (min-width: 42rem) {
  .territory__notes { grid-template-columns: repeat(3, 1fr); }
}


/* Agendamento — cartão com o mesmo tratamento vítreo do card de manifesto do Hero, pra marcar "destino" */

.booking-card {
  position: relative;
  max-width: 30rem;
  padding: 2rem 1.6rem;
  margin: 1.5rem auto 0;
  border: 1px solid rgb(200 154 90 / 0.26);
  background:
    linear-gradient(115deg, rgb(240 233 225 / 0.07), rgb(73 100 121 / 0.05)),
    rgb(23 17 15 / 0.3);
  box-shadow:
    inset 0 1px rgb(240 233 225 / 0.08),
    0 0.4rem 1rem rgb(0 0 0 / 0.18),
    0 1.6rem 4rem rgb(0 0 0 / 0.3);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
}

/* Filete de coroamento no topo do cartão — marca o destino da página */
.booking-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 7rem;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--champagne), transparent);
}

.booking { display: grid; gap: 1.1rem; max-width: 26rem; margin-inline: auto; }

.field { display: grid; gap: 0.4rem; }

.field label {
  /* 0.68rem/0.7 de opacidade era o menor texto do ponto de conversão: mono,
     caixa-alta e tracking somavam três penalidades na mesma linha (30/09). */
  color: rgb(240 233 225 / 0.85);
  font: 500 0.8rem var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 180ms ease;
}

/* O rótulo acende junto com o campo — o formulário responde ao toque, campo a campo */
.field:focus-within label { color: var(--champagne); }

.field input, .field select {
  padding: 0.8rem 0.95rem;
  color: var(--mist);
  font: 1rem var(--sans);
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgb(23 17 15 / 0.4);
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.field input:hover, .field select:hover { border-color: rgb(200 154 90 / 0.45); }

.field input:focus-visible, .field select:focus-visible {
  outline: none;
  border-color: var(--champagne);
  background: rgb(23 17 15 / 0.55);
  box-shadow: 0 0 0 1px var(--champagne), 0 0 1.4rem rgb(200 154 90 / 0.12);
}

.field--invalid input, .field--invalid select { border-color: #a64f37; }

.field__error {
  min-height: 1rem;
  margin: 0;
  color: #d67e5e;
  font-size: 0.76rem;
}

.booking__submit {
  /* .action (bio-v3.css) usa grid de 3 colunas pensado pra numero+texto+seta;
     aqui so tem texto, entao a coluna central ficava espremida e quebrava em 3 linhas. */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  grid-template-columns: unset;
  min-height: 3.25rem;
  margin-top: 0.5rem;
  cursor: pointer;
  border: none;
  box-shadow: 0 0.5rem 1.4rem rgb(0 0 0 / 0.28);
  transition: opacity 160ms ease, transform 200ms ease, box-shadow 200ms ease;
}

/* Mesmo brilho varrido do CTA do Hero — as duas portas de conversão falam a mesma língua */
.booking__submit::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%) skewX(-18deg);
  background: linear-gradient(105deg, transparent 30%, rgb(200 154 90 / 0.35) 50%, transparent 70%);
  transition: transform 600ms cubic-bezier(.2,.75,.2,1);
}

.booking__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 0.8rem 2rem rgb(0 0 0 / 0.36), 0 0 1.6rem rgb(200 154 90 / 0.2);
}

.booking__submit:hover::after { transform: translateX(110%) skewX(-18deg); }

@media (prefers-reduced-motion: reduce) {
  .booking__submit::after { display: none; }
}

.booking__submit .action__text { text-align: center; }

.booking__submit[disabled] { cursor: default; opacity: 0.65; }

.booking__submit--big {
  min-height: 3.75rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.booking__submit--big .action__text strong { font-size: 1.1rem; }

.booking__status {
  min-height: 1.2rem;
  margin: 0;
  color: var(--champagne);
  font-size: 0.82rem;
}

.booking__status[data-state="error"] { color: #a64f37; }
.booking__status[data-state="success"] { color: var(--champagne); }

/* Link de recuperação do handoff (30/09). Aparece depois do envio: cobre o
   popup bloqueado no webview do Instagram e o segundo clique de quem fechou a
   aba. Desenho de link, não de botão — o botão primário da área continua sendo
   o submit, e dois botões concorrendo no mesmo ponto confundem. */
.booking__fallback {
  margin: 0.25rem 0 0;
  font-size: 0.86rem;
}

.booking__fallback-link {
  display: inline-block;
  padding: 0.45rem 0;
  color: var(--champagne);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgb(200 154 90 / 0.45);
  text-underline-offset: 4px;
}

.booking__fallback-link:hover { text-decoration-color: var(--champagne); }
.booking__fallback-link:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }

/* ═══ COMO FUNCIONA A CONSULTA ═══ */

.steps {
  display: grid;
  gap: 0;
  max-width: 38rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.steps__item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--line);
}

.steps__item:last-child { border-bottom: 1px solid var(--line); }

.steps__index {
  color: var(--champagne);
  font: 500 0.92rem/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
}

.steps__item strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--mist);
  font-family: var(--performance);
  font-size: 1.18rem;
  font-weight: 500;
}

.steps__item span {
  color: rgb(240 233 225 / 0.72);
  font-size: 0.93rem;
  line-height: 1.6;
}

.prep {
  max-width: 38rem;
  margin: 2.25rem auto 0;
  padding: 1.25rem 1.4rem;
  border-left: 2px solid var(--champagne);
  background: linear-gradient(90deg, rgb(200 154 90 / 0.07), transparent);
}

.prep__title {
  margin: 0 0 0.4rem;
  color: var(--champagne);
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.prep p:last-child {
  margin: 0;
  color: rgb(240 233 225 / 0.8);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ═══ QUEM VAI CUIDAR ═══ */

.doctor {
  display: grid;
  gap: 1.75rem;
  max-width: 42rem;
  margin: 0 auto;
}

.doctor__photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  border: 1px solid rgb(200 154 90 / 0.28);
  box-shadow: 0 1.4rem 3.5rem rgb(0 0 0 / 0.34);
}

.doctor__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.04);
}

.doctor__name {
  margin: 0 0 0.3rem;
  color: var(--mist);
  font-family: var(--performance);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.doctor__crm {
  margin: 0 0 1.2rem;
  padding-bottom: 1.1rem;
  color: var(--champagne);
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

.doctor__text p:not(.doctor__name):not(.doctor__crm) {
  margin: 0 0 1rem;
  color: rgb(240 233 225 / 0.78);
  font-size: 0.97rem;
  line-height: 1.68;
}

.doctor__text p:last-child { margin-bottom: 0; }

@media (min-width: 46rem) {
  .doctor {
    grid-template-columns: 0.85fr 1fr;
    gap: 2.5rem;
    align-items: center;
    max-width: 48rem;
  }
}

/* Rodapé — fechamento de papelaria: monograma, nome em destaque discreto, endereço apagado */

.section--rodape { padding: 3.5rem 1.25rem 3rem; border-top: 1px solid var(--line); }

.footer-legal {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  text-align: center;
  color: rgb(240 233 225 / 0.56);
  font: 400 0.7rem/1.6 var(--mono);
  letter-spacing: 0.05em;
}

.footer-legal img { margin-bottom: 0.9rem; opacity: 0.9; }

/* Primeira linha (nome + CRM) um degrau acima do endereço na hierarquia */
.footer-legal p:first-of-type {
  margin: 0;
  color: rgb(240 233 225 / 0.68);
}

.footer-legal p { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════
   DIAGRAMAS — substituem os placeholders "Aguardando imagem" (2026-09-29)

   Os 5 placeholders estavam visíveis para o visitante desde 07/08, um deles
   expondo o texto de briefing ("ver especificação"). Em vez de esperar fotos
   clínicas que não existem, cada sinal virou desenho. Sem número: medida de
   calibre por paciente seria dado inventado.
   ═══════════════════════════════════════════════════════════════════ */

.sinal {
  display: grid;
  gap: 1.4rem;
  place-content: center;
  place-items: center;
  aspect-ratio: 5 / 6;
  margin: 0;
  padding: 1.5rem;
  border: 1px solid rgb(200 154 90 / 0.28);
  background:
    radial-gradient(circle at 50% 34%, rgb(200 154 90 / 0.07), transparent 62%),
    rgb(240 233 225 / 0.02);
}

.sinal__dgm {
  width: min(20rem, 88%);
  height: auto;
  color: var(--champagne);
}

.sinal figcaption {
  font-family: var(--performance);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--mist);
}

/* Diagrama dentro das fichas de território: mesma caixa, borda sólida */
.territory__note-img--dgm {
  aspect-ratio: 20 / 9;
  border-style: solid;
  border-color: rgb(200 154 90 / 0.28);
  padding: 0.9rem 1.1rem;
  color: var(--champagne);
}
.territory__note-img--dgm svg { width: 100%; height: auto; }

/* Selo tipográfico no lugar da foto "retrato discreto" */
.context-photo__frame--selo {
  gap: 1rem;
  border-style: solid;
  border-color: rgb(200 154 90 / 0.28);
  background: rgb(42 14 19 / 0.32);
  color: var(--mist);
  font: inherit;
  letter-spacing: normal;
}

.selo__olho {
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--champagne);
}

.selo__frase {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.3rem, 3vw, 1.85rem);
  line-height: 1.22;
  text-align: center;
  color: var(--mist);
}

.selo__pe {
  font: 400 0.7rem var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(240 233 225 / 0.55);
}

/* ═══════════════════════════════════════════════════════════════════
   AJUSTE TIPOGRÁFICO — 2026-09-29

   Saiu o par "Barlow Condensed caixa-alta + Fraunces itálico dourado",
   repetido em todas as 5 headlines. Era o padrão que dava cara de template:
   não a fonte isolada, mas a fórmula reaplicada seção após seção.

   Entra Bodoni Moda como família única de display. O contraste de traço faz o
   trabalho que antes era feito por duas fontes brigando, e o itálico vem de
   dentro da mesma família — parentesco em vez de colagem.

   Bodoni tem hastes finas: em corpo pequeno some, então o display fica
   restrito a título e o peso sobe onde o tamanho cai.
   ═══════════════════════════════════════════════════════════════════ */

.hero h1 {
  font-weight: 500;
  font-size: clamp(2.3rem, 7vw, 4.4rem);
  letter-spacing: -0.012em;
  line-height: 1.04;
}

.hero h1 em {
  font-style: italic;
  font-weight: 400;
}

.section__title {
  font-weight: 500;
  font-size: clamp(2rem, 5.4vw, 3.1rem);
  letter-spacing: -0.008em;
  line-height: 1.1;
}

.section__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

/* Bodoni em tamanho pequeno perde as hastes finas: sobe o peso para segurar */
.authority__pillars span,
.process__step strong,
.treatments__card h3,
.sinal figcaption,
.territory__note b {
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* O rótulo do diagrama era caixa-alta condensada; em serifada de alto
   contraste a caixa-alta espaçada fica frágil. Volta a caixa normal. */
.sinal figcaption {
  font-family: var(--performance);
  font-size: 1.5rem;
  text-transform: none;
  letter-spacing: -0.005em;
}

/* ═══════════════════════════════════════════════════════════════════
   FICHAS DE TERRITÓRIO — só diagrama + título (Gabriel, 29/09)

   Ao tirar o parágrafo de apoio, dois defeitos apareceram no render:
   o card manteve altura de quando havia texto, deixando um bloco morto
   embaixo; e o título, dimensionado para ser subordinado ao parágrafo,
   virou uma legenda de 0,72rem — pequena demais para ser o único texto.
   ═══════════════════════════════════════════════════════════════════ */

.slideshow--notes .territory__note {
  display: grid;
  gap: 1.2rem;
  align-content: start;
  padding: 1.6rem 1.6rem 1.9rem;
}

/* Era subtítulo de apoio; agora é o único texto do card. */
.slideshow--notes .territory__note b {
  margin: 0;
  font-family: var(--performance);
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--mist);
}

/* Os filetes laterais faziam sentido para um rótulo em versalete miúdo.
   Num título de 1,5rem eles poluem. */
.slideshow--notes .territory__note b::before,
.slideshow--notes .territory__note b::after { display: none; }

.slideshow--notes .territory__note-img { margin-bottom: 0; }