/* =============================================================================
   pagina.css — Páginas internas
   Site Dr. Fernando Hehn · Ortopedia e Cirurgia do Joelho

   Carrega DEPOIS de marca.css (o contrato) e de home.css, que já traz a base,
   o cabeçalho, o menu, a estrutura de seção, o acordeão, as unidades, o fecho
   e o rodapé. Esta folha só acrescenta o que as internas têm e a home não
   tem: a abertura curta com migalhas, o texto corrido, a matéria com índice
   (política e posts do blog), a autoria, as unidades com mapa (contato), a 404
   e as peças visuais dos blocos 13 a 26. Nenhuma cor, fonte ou medida nova:
   tudo sai dos tokens do contrato.

   Valem as mesmas proibições da home: nada de rótulo em caixa alta acima de
   cada título, palavra do título em outra cor, cadeia de ponto médio em texto
   corrido, raio, fileira de blocos idênticos ou numeral 01/02/03.

   LARGURA: toda faixa usa padding-inline: var(--calha) (herdado de .secao) e
   nenhum contêiner interno tem max-width próprio. O que se limita em ch é a
   medida do parágrafo; a grade vai de calha a calha, alinhada ao hero.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. MEDIDAS LOCAIS
   -------------------------------------------------------------------------- */
:root {
  /* Coluna lateral: faixa fixa, não porcentagem, para o bloco de agendamento
     não virar uma tripa a 1000px nem um outdoor a 1900px. */
  --lado: clamp(272px, 22vw, 352px);
  /* Onde as peças que grudam na rolagem param, logo abaixo do cabeçalho. */
  --abaixo-cab: calc(var(--cab-h) + 34px);
}

/* -----------------------------------------------------------------------------
   1. CABEÇALHO NAS INTERNAS
   A marcação é a da home e ele nasce visível (data-estado="fixo" no HTML;
   home.js o mantém assim quando não há hero). O recolhimento a 1200px do
   modificador cabecalho--paginas e o realce da página atual passaram para
   home.css: a home usa a mesma navegação de sete páginas.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   2. ABERTURA — o hero da home, mais curto
   Mesma gramática: fundo liso à esquerda com o texto, fotografia tratada
   entrando pela direita até a borda da tela, scrim do contrato. Sem logotipo
   (o cabeçalho já está visível) e sem a linha de base: o registro profissional
   aparece no fecho de toda página.
   -------------------------------------------------------------------------- */
.abertura {
  position: relative;
  display: grid;
  align-content: center;
  min-height: clamp(560px, 76svh, 820px);
  padding: calc(var(--cab-h) + clamp(36px, 5vw, 84px)) var(--calha) clamp(56px, 6.4vw, 100px);
  overflow: hidden;
}

/* A foto começa em --corte da faixa (na home, 44%): o título das internas é
   mais longo e precisa de um pouco mais de fundo liso para não pousar na foto.

   17/09, borda reta: o corte virou uma variável porque agora a largura do
   texto tem de sair dele. Antes o corpo ia a 48% enquanto a foto começava em
   46%, e o título entrava 35px dentro da fotografia (medido a 1600) — o scrim
   escondia isso, e sem ele "Onde você será atendido" caía a 1,29:1. Com as
   duas medidas presas na mesma variável elas não podem mais divergir. */
.abertura { --corte: 46%; }
.abertura__foto { position: absolute; inset: 0 0 0 var(--corte); z-index: 0; }
.abertura__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 28%);
}

/* A abertura não leva rótulo de canto (sem logotipo, sem linha de base), e o
   corpo para em 48% enquanto a foto começa em 46%: nenhum texto pousa na
   fotografia nesta largura. Então aqui o scrim não pinta nada — a foto entra
   pela direita com a aresta esquerda reta contra o fundo liso. (17/09.)

   Ensaiado em menisco e ligamentos: o still 3D no lugar da foto de banco.
   Sem .foto-tratada (o filtro cinza apagaria o ouro e o ciano). O render é
   um recorte sobre --fundo, não uma fotografia: ele não tem aresta, o
   próprio arquivo já termina na cor do fundo. Por isso a regra da borda reta
   não se aplica a ele e o degradê que sobra é o do render, não um véu. */
.abertura__foto--modelo { background: var(--fundo); }
.abertura__foto--modelo img {
  object-fit: contain;
  object-position: 78% 50%;
}
/* O render já nasce no --fundo; o véu que havia aqui só repetia isso. */
.abertura--modelo .scrim { background: none; }

/* Tirar uma calha da largura deixa o texto parar antes da aresta em qualquer
   tela: a mesma conta do hero (home.css, bloco 4). */
.abertura__corpo {
  position: relative;
  z-index: 2;
  max-width: calc(var(--corte) - var(--calha));
}
/* Mais estreita, a coluna de texto precisa de mais faixa, e a foto recua. */
@media (max-width: 1180px) {
  .abertura { --corte: 58%; }
}

.abertura__titulo {
  font-size: var(--d1);
  max-width: 17ch;
  margin-top: clamp(16px, 1.8vw, 26px);
}

/* Aqui o apoio é o parágrafo de entrada da página, então vai ao corpo
   grande; a home usa 14px porque lá ele é uma linha de assinatura. */
.abertura__apoio {
  font-size: var(--tg);
  max-width: 46ch;
  margin-top: clamp(18px, 2vw, 26px);
}
.abertura .acoes { margin-top: clamp(26px, 3vw, 38px); }

@media (max-width: 900px) {
  /* No celular a foto vira uma faixa no alto, de borda a borda, e o texto
     sobe sobre a base dela, onde o scrim já escureceu o bastante: o mesmo
     arranjo do Sobre da home nessa largura. */
  .abertura {
    min-height: 0;
    align-content: end;
    padding-top: calc(var(--cab-h) + min(64vw, 380px));
    padding-bottom: clamp(44px, 9vw, 64px);
  }
  .abertura__foto {
    inset: 0 0 auto 0;
    height: calc(var(--cab-h) + min(96vw, 560px));
  }
  /* Em pé o título sobe sobre a base da faixa, então o véu volta — aqui a
     foto vai de borda a borda e não sobra aresta lateral. O pé para em .82,
     não em var(--fundo): a imagem chega inteira ao corte. */
  .abertura__foto .scrim {
    background: linear-gradient(to top,
      rgba(16,21,28,.9) 0%,
      rgba(16,21,28,.84) 22%,
      rgba(25,31,40,.5) 40%,
      transparent 62%);
  }
  .abertura__foto--modelo img { object-fit: cover; object-position: 50% 48%; }
  /* No render o pé pode ir até a cor do fundo: ele não é fotografia, é um
     recorte que já termina em --fundo dos dois lados. */
  .abertura--modelo .abertura__foto .scrim {
    background:
      linear-gradient(to top,    var(--fundo) 0%, rgba(25,31,40,.72) 22%, rgba(25,31,40,.12) 52%, transparent 70%),
      linear-gradient(to bottom, rgba(25,31,40,.88) 0%, rgba(25,31,40,.28) 20%, transparent 36%);
  }
  .abertura__corpo { max-width: 100%; }
  .abertura__titulo { max-width: 18ch; }
  /* Em pé a foto é uma faixa no alto, de borda a borda: o corte lateral não
     existe mais e o texto ocupa a largura inteira. */
  .abertura { --corte: 0%; }
}

/* Os dois botões de unidade têm rótulo longo ("Agendar em Balneário
   Camboriú"). Numa tela de 360–430px eles empilham a toda largura, com o
   tracking um pouco menor para o nome da cidade caber numa linha só. */
@media (max-width: 560px) {
  .abertura .acoes { display: grid; }
  .abertura .acoes .cta { justify-content: center; text-align: center; padding-inline: 16px; letter-spacing: .14em; }
}

/* -----------------------------------------------------------------------------
   3. MIGALHAS
   O separador é um fio de 14px, não barra nem ponto médio: é a mesma linha
   que organiza o resto do site.
   -------------------------------------------------------------------------- */
.migalhas ol { display: flex; flex-wrap: wrap; align-items: center; row-gap: 2px; }
.migalhas li {
  display: inline-flex;
  align-items: center;
  font-size: var(--tp);
  line-height: 1.5;
  color: var(--prata-2);
}
.migalhas li + li::before {
  content: "";
  flex: none;
  width: 14px; height: 1px;
  margin-inline: 12px;
  background: var(--prata-3);
}
.migalhas a {
  display: inline-block;
  padding-block: 5px;
  min-height: 24px;
  color: var(--prata-2);
  transition: color var(--rapido);
}
.migalhas a:hover { color: var(--ciano); }
.migalhas [aria-current="page"] { color: var(--prata); }

/* Sobre a base da foto, no celular, o texto pequeno vai a prata cheio:
   é a regra do contrato para rótulo sobre fotografia. */
@media (max-width: 900px) {
  .abertura .migalhas li,
  .abertura .migalhas a { color: var(--prata); }
}

/* -----------------------------------------------------------------------------
   4. FAIXAS
   Alternância --fundo / --fundo-2. O ritmo vertical continua irregular de
   propósito, como na home.
   -------------------------------------------------------------------------- */
.secao--materia { padding-block: clamp(40px, 5vw, 80px) clamp(72px, 9vw, 140px); }
.secao--faixa { padding-block: clamp(62px, 8vw, 124px); }

.secao--recuada {
  background: var(--fundo-2);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}

/* Unidades sobre o fundo principal: quando a faixa anterior já é recuada,
   repetir o --fundo-2 fundiria as duas numa mancha só. */
.secao--unidades.secao--plana { background: var(--fundo); }

/* -----------------------------------------------------------------------------
   5. MATÉRIA — o corpo editorial com coluna lateral
   A grade vai de calha a calha: texto à esquerda, coluna lateral encostada na
   calha da direita. O parágrafo é que para em ~64ch.
   -------------------------------------------------------------------------- */
.materia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lado);
  gap: clamp(40px, 6.5vw, 120px);
  align-items: start;
}
.materia__texto { min-width: 0; }

/* Cada bloco é uma linha de régua, como as frentes da home: o título à
   esquerda, a leitura à direita, e um fio entre um assunto e outro. Frações e
   espaçamento são os de .frentes__linha, para que um bloco e uma régua
   empilhados alinhem exatamente as mesmas bordas. */
.bloco {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 18px clamp(20px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(34px, 4vw, 58px);
  border-top: 1px solid var(--fio);
}
.bloco:first-child { border-top: 0; padding-top: 0; }
.bloco:last-child { padding-bottom: 0; }

.bloco__titulo {
  font-size: clamp(1.3rem, 1.05rem + .8vw, 1.8rem);
  max-width: 16ch;
}
.bloco__corpo { grid-column: 2; min-width: 0; }

/* Abaixo de 1280px a coluna da esquerda ficaria com menos de 240px: o título
   passa para cima do texto. */
@media (max-width: 1279px) {
  .bloco { grid-template-columns: minmax(0, 1fr); }
  .bloco__corpo { grid-column: 1; }
  .bloco__titulo { max-width: 24ch; }
}

/* Texto corrido --------------------------------------------------------------- */
.texto > * + * { margin-top: 1.15em; }

.texto p,
.texto li {
  font-size: var(--tg);
  line-height: 1.8;
  color: var(--prata-2);
  max-width: 64ch;
}
.texto h3 {
  font-family: var(--titling);
  font-weight: 400;
  font-size: clamp(1.1rem, 1rem + .45vw, 1.38rem);
  line-height: 1.3;
  color: var(--prata);
  margin-top: 2.1em;
}
.texto h3:first-child { margin-top: 0; }
.texto h3 + * { margin-top: .75em; }
.texto strong { font-weight: 500; color: var(--prata); }

/* Link dentro do texto: prata com fio, ciano no hover. */
.texto a,
.link-texto {
  color: var(--prata);
  border-bottom: 1px solid var(--fio);
  transition: color var(--rapido), border-color var(--rapido);
}
.texto a:hover,
.link-texto:hover { color: var(--ciano); border-color: var(--ciano); }

/* Lista em régua: cada item separado por fio, com o quadrado de 1px dos
   diferenciais da home como marcador. Nada de bolinha. */
.lista-regua { border-top: 1px solid var(--fio-2); max-width: 64ch; }
.texto .lista-regua li,
.lista-regua li {
  position: relative;
  padding: 13px 0 14px 26px;
  border-bottom: 1px solid var(--fio-2);
  line-height: 1.7;
}
.lista-regua li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(13px + .85em);
  width: 7px; height: 7px;
  border: 1px solid var(--prata-3);
  transform: translateY(-50%);
}

/* Frase de abertura de bloco: fala em Marcellus, sem ser título. Declarada
   também como ".texto .abre": o "p" de .texto (0,1,1) pesa mais que uma
   classe sozinha, e tamanho, cor e medida voltariam aos do parágrafo.
   (Declaração, destaque, figura, bloco com foto e a régua inteira do bloco
   saíram na passada final: nenhuma página as usa desde o redesenho.) */
.abre,
.texto .abre {
  font-family: var(--titling);
  font-size: clamp(1.2rem, 1.02rem + .7vw, 1.6rem);
  line-height: 1.35;
  color: var(--prata);
  max-width: 40ch;
  text-wrap: balance;
}

/* Acordeão nas internas: na home a resposta é nota de rodapé (13px); aqui ela
   é o conteúdo da página, então vai ao corpo do texto corrido. As classes de
   faixa só existem nas internas, e a home não muda. */
.secao--materia .duvida__corpo p,
.secao--faixa .duvida__corpo p {
  font-size: var(--tg);
  max-width: 64ch;
}

/* -----------------------------------------------------------------------------
   6. COLUNA LATERAL — o índice da política
   Gruda abaixo do cabeçalho enquanto a matéria rola. Só gruda quando a tela
   tem altura para ela inteira: numa janela baixa, um bloco preso maior que a
   tela esconderia parte dele. (O bloco de agendar que morava aqui, .agenda,
   saiu na passada final: nenhuma página o usa desde o redesenho.)
   -------------------------------------------------------------------------- */
.materia__lado { display: grid; gap: clamp(30px, 3vw, 44px); min-width: 0; }

@media (min-width: 961px) and (min-height: 700px) {
  .materia__lado { position: sticky; top: var(--abaixo-cab); }
}

/* Rótulo de lista (Nesta página): o mesmo do rodapé, em prata-2, porque
   prata-3 só vale para texto de 24px ou mais. */
/* Caixa normal e sem tracking: rótulo em caixa alta espaçada acima de cada
   bloco é um dos vícios de página gerada que marca.css proíbe, e só vale
   nas pontas do hero e no rodapé. */
.lado__cabeca {
  font-family: var(--marca);
  font-size: 13px;
  font-weight: 500;
  color: var(--prata-2);
  margin-bottom: 12px;
}
.lado__links ul { border-top: 1px solid var(--fio); }
.lado__links a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 44px;
  padding-block: 11px;
  border-bottom: 1px solid var(--fio-2);
  font-size: var(--tb);
  line-height: 1.45;
  color: var(--prata-2);
  transition: color var(--rapido);
}
/* Seta desenhada em CSS: o subconjunto latino da Montserrat no Google Fonts
   não traz "→", e o glifo cairia numa fonte do sistema. */
.lado__links a::after {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-right: 3px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--rapido);
}
.lado__links a:hover { color: var(--ciano); }
.lado__links a:hover::after { transform: translateX(3px) rotate(45deg); }

/* "Nesta página" acende o assunto que está sendo lido (home.js, bloco 5). */
.lado__links a[aria-current="true"] { color: var(--prata); }
.lado__links a[aria-current="true"]::before {
  content: "";
  position: absolute;
  left: -14px; top: 50%;
  width: 6px; height: 1px;
  background: var(--ciano);
}

/* Empilhada no celular. Na política a coluna lateral é só o índice: ela vem
   antes do texto, porque um sumário depois de doze seções não serve para
   nada. */
@media (max-width: 960px) {
  .materia { grid-template-columns: minmax(0, 1fr); }
  .materia__lado { margin-top: clamp(8px, 2vw, 20px); }
  .lado__links a[aria-current="true"]::before { display: none; }
  .materia--indice-antes .materia__lado { order: -1; margin: 0 0 clamp(30px, 7vw, 48px); }
}

/* -----------------------------------------------------------------------------
   7. LINK DE UNIDADE (WhatsApp) nos quadros do trilho de áreas de atuação
   A régua antiga das treze condições (.servico) e a de relacionados
   (.relacionado) saíram na passada final: o trilho (bloco 16) e as vizinhas
   de atuacao.css ficaram no lugar delas.
   -------------------------------------------------------------------------- */
/* O link de unidade é o do rodapé (versalete sublinhado), não um botão
   cheio: treze pares de botões transformariam a tira num painel. */
.link-zap {
  display: inline-block;
  padding-block: 5px;
  min-height: 24px;
  font-size: var(--te);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--prata);
  border-bottom: 1px solid var(--fio);
  transition: color var(--rapido), border-color var(--rapido);
}
.link-zap:hover { color: var(--ciano); border-color: var(--ciano); }

/* -----------------------------------------------------------------------------
   9. (vago) O "onde fica no joelho" antigo (.onde, imagem estática do
   modelo) saiu na QA final de 13/09: as condições usam o visor 3D
   (.lugar e .visor, em atuacao.css).
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   10. LOCAIS — as duas unidades na página de contato
   Cada unidade em três quadros: a cidade (foto que sangra pela borda da
   tela), os dados e o mapa. A segunda unidade espelha a primeira, e a foto
   troca de borda. O mapa é um iframe do Google com loading="lazy": só é
   pedido quando chega perto da tela.
   A foto é da cidade, com legenda dizendo qual: a real de cada consultório
   (nota da copy) entra no lugar dela.
   -------------------------------------------------------------------------- */
.secao-locais { padding-block: clamp(20px, 3vw, 48px) 0; }

.local {
  display: grid;
  grid-template-columns: minmax(0, 34%) minmax(0, 1fr) minmax(0, 1.12fr);
  column-gap: clamp(28px, 3.4vw, 60px);
  align-items: stretch;
  padding-right: var(--calha);
}
.local + .local { margin-top: clamp(48px, 6vw, 96px); }

/* Espelho: mapa à esquerda na calha, dados no meio, cidade sangrando pela
   direita. A ordem no HTML continua a de leitura: cidade, dados, mapa. */
.local--espelho {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 34%);
  padding-right: 0;
  padding-left: var(--calha);
}
.local--espelho .local__foto  { grid-column: 3; grid-row: 1; }
.local--espelho .local__texto { grid-column: 2; grid-row: 1; }
.local--espelho .local__mapa  { grid-column: 1; grid-row: 1; }

.local__foto {
  position: relative;
  min-height: clamp(440px, 38vw, 620px);
  margin: 0;
  overflow: hidden;
  background: var(--fundo-3);
}
.local__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
}
/* 17/09, borda reta: a foto da unidade é um retângulo, e as quatro arestas são
   secas. A dissolução da lateral voltada para o texto saiu. A única coisa que
   pousava na imagem era a legenda do lugar, e ela desceu para debaixo do
   quadro (bloco 18). */

.local__texto { align-self: center; min-width: 0; padding-block: clamp(28px, 3vw, 48px); }
.local__titulo {
  font-size: var(--d3);
  max-width: 16ch;
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.local__endereco { font-size: var(--tg); line-height: 1.7; color: var(--prata-2); max-width: 30ch; }

.local__dados {
  margin: clamp(16px, 2vw, 22px) 0 clamp(22px, 3vw, 32px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--fio-2);
}
.local__dados > div { display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline; }
.local__dados dt {
  font-size: var(--te);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--prata-2);
}
.local__dados dd {
  font-size: var(--tg);
  line-height: 1.7;
  color: var(--prata);
}
.local__dados dd a {
  display: inline-block;
  padding-block: 3px;
  min-height: 24px;
  font-size: var(--tg);
  color: var(--prata);
  border-bottom: 1px solid var(--fio);
  transition: color var(--rapido), border-color var(--rapido);
}
.local__dados dd a:hover { color: var(--ciano); border-color: var(--ciano); }

/* O mapa não recebe o mouse quando a rolagem suave está ligada (regra do
   Lenis em home.css): este link é o caminho para ampliar e traçar a rota. */
.local__rota {
  display: inline-block;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding-block: 5px;
  min-height: 24px;
  font-size: var(--te);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--prata);
  border-bottom: 1px solid var(--fio);
  transition: color var(--rapido), border-color var(--rapido);
}
.local__rota:hover { color: var(--ciano); border-color: var(--ciano); }

.local__mapa {
  position: relative;
  min-height: 440px;
  background: var(--fundo-3);
  border: 1px solid var(--fio);
}
/* O mapa claro do Google dentro de um site escuro é um holofote. Invertido e
   girado 180° no matiz, ele fica escuro e as cores voltam ao lugar (água
   azul, marcador vermelho); o cinza tira o excesso de saturação. */
.local__mapa iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
  filter: invert(.9) hue-rotate(180deg) grayscale(.35) contrast(.92);
}

.secao-dados { padding-block: clamp(64px, 8vw, 128px) clamp(64px, 8vw, 120px); }

/* Até 1100px os três quadros não cabem lado a lado: a cidade vira uma
   faixa de borda a borda no alto, e dados e mapa descem na calha. */
@media (max-width: 1100px) {
  .local,
  .local--espelho {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
  }
  .local .local__foto,
  .local .local__texto,
  .local .local__mapa { grid-column: 1; grid-row: auto; }
  .local__foto { min-height: 0; aspect-ratio: 16 / 9; max-height: 62svh; }
  .local__texto { padding: clamp(22px, 5vw, 36px) var(--calha) clamp(26px, 5vw, 36px); }
  .local__mapa { margin-inline: var(--calha); min-height: 340px; }
}

/* -----------------------------------------------------------------------------
   11. POLÍTICA DE PRIVACIDADE
   Texto jurídico longo: continua texto, sem foto de banco. O que muda é a
   leitura: uma coluna só, com o título de cada seção em cima do texto (lado
   a lado, a 1650px, o texto ficava espremido numa coluna de 40ch), corpo no
   tamanho de leitura e o índice grudado ao lado, acendendo a seção em curso.
   -------------------------------------------------------------------------- */
.abertura--texto {
  min-height: 0;
  padding-bottom: clamp(40px, 5vw, 76px);
  border-bottom: 1px solid var(--fio);
}
.abertura--texto .abertura__corpo { max-width: 100%; }
.abertura--texto .abertura__titulo { max-width: 22ch; }
@media (max-width: 900px) {
  .abertura--texto { padding-top: calc(var(--cab-h) + clamp(36px, 10vw, 60px)); }
}

.politica.secao--materia { padding-top: clamp(40px, 5vw, 80px); }
.politica .bloco {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  padding-block: clamp(30px, 3.4vw, 48px);
}
.politica .bloco__corpo { grid-column: 1; }
.politica .bloco__titulo { font-size: var(--d3); max-width: 28ch; }
.politica .texto p,
.politica .texto li { font-size: var(--tg); line-height: 1.8; max-width: 68ch; }
.politica .texto .lista-regua { max-width: 68ch; }
.politica .texto a { overflow-wrap: anywhere; }
.politica__data { font-size: var(--tp); color: var(--prata-2); }

/* O índice: os nomes em corpo de leitura, com o traço ciano na seção atual
   (home.js acende). Numa janela baixa ele rola por dentro em vez de cortar. */
.politica .lado__links a { font-size: var(--tb); }
@media (min-width: 961px) and (min-height: 700px) {
  .politica .materia__lado { max-height: calc(100svh - var(--abaixo-cab) - 24px); overflow-y: auto; overscroll-behavior: contain; padding-left: 16px; margin-left: -16px; }
}

/* -----------------------------------------------------------------------------
   12. 404
   -------------------------------------------------------------------------- */
.abertura--curta { min-height: clamp(480px, 62svh, 640px); }


/* =============================================================================
   PEÇAS VISUAIS DAS INTERNAS (13 a 26)
   Pedido do cliente em 12/09: "muito texto, usar mais imagens". A copy fica
   inteira e literal (o SEO depende dela); o que muda é a apresentação. Cada
   página vira uma sequência de quadros fotográficos com a assinatura da home
   (a foto que sangra da borda da tela e se dissolve no navy), e o texto chega
   em pedaços curtos ao lado de uma imagem.

   Tudo aqui é ACRÉSCIMO: as classes antigas desta folha que continuam em uso
   (abertura, migalhas, texto, matéria da política, onde...) servem também
   às páginas de serviço; as que ninguém usava mais saíram na passada final.

   Fotos de banco são ilustração: nunca aparecem como o Dr. Hehn nem como a
   clínica dele. Onde ele aparece, a foto é a real.
   ========================================================================== */

/* Texto corrido das peças novas. :where() zera o peso do seletor: qualquer
   classe (.abre, .legenda, .quadro__texto) vence sem precisar de reforço. */
:where(.par__texto, .xadrez__texto, .rumo, .local__texto) p {
  font-size: var(--tg);
  line-height: 1.8;
  color: var(--prata-2);
  max-width: 52ch;
}
:where(.par__texto, .xadrez__texto, .rumo, .local__texto) p + p { margin-top: 1.1em; }

/* -----------------------------------------------------------------------------
   13. PAR — fotografia e texto lado a lado
   A foto sangra até a borda da tela e se dissolve no fundo; o texto para na
   calha do outro lado. Os pares alternam de lado ao longo da página e a
   largura da foto muda de um para outro (--par-foto): com a mesma medida em
   todos, a alternância vira o zigue-zague de molde.
   -------------------------------------------------------------------------- */
.par {
  --chao: var(--fundo);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, var(--par-foto, 46%)) minmax(0, 1fr);
  align-items: center;
  padding-right: var(--calha);
  background: var(--chao);
}
.par--direita {
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--par-foto, 46%));
  padding-right: 0;
  padding-left: var(--calha);
}
/* Faixa recuada: o degradê da foto tem de morrer na mesma cor do chão. */
.par--recuado {
  --chao: var(--fundo-2);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}

.par__foto {
  position: relative;
  align-self: stretch;
  min-height: var(--par-altura, clamp(460px, 46vw, 760px));
  margin: 0;
  overflow: hidden;
  background: var(--fundo-3);
}
.par--direita .par__foto { grid-column: 2; grid-row: 1; }
.par__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 35%);
}
/* 17/09, borda reta: a dissolução da lateral voltada para o texto saiu de
   todo par. O retrato de Formação (.par__foto--limpa) já vinha assim desde
   15/09 e era o único — era exatamente essa mistura, retrato seco ao lado de
   retrato dissolvido, que o cliente apontou ("ou todas as fotos ficam retas
   sem o degradê, ou todas com degradê"). Agora todas ficam retas, e a classe
   --limpa não distingue mais nada; ela segue na marcação, inofensiva, para
   não mexer em dezenove páginas por causa de um nome. Nenhum texto pousa
   nestas fotos, então nada precisou entrar no lugar do véu. */

.par__texto {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: clamp(56px, 7vw, 120px) 0 clamp(56px, 7vw, 120px) clamp(32px, 5.5vw, 104px);
}
.par--direita .par__texto {
  grid-column: 1; grid-row: 1;
  padding-left: 0;
  padding-right: clamp(32px, 5.5vw, 104px);
}
.par__titulo {
  font-size: var(--d2);
  max-width: 17ch;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.par__texto .acoes { margin-top: clamp(26px, 3vw, 38px); }
.par__texto .frentes { margin-top: clamp(28px, 3.4vw, 44px); }
/* A régua dentro de uma coluna de texto: mais baixa e com o nome menor que o
   título do quadro, senão "Graduação" disputava com "Formação e credenciais". */
.par__texto .frentes__linha { padding-block: clamp(15px, 1.6vw, 22px); }
.par__texto .frentes__nome { font-size: clamp(1.05rem, .98rem + .35vw, 1.3rem); }
.par__texto .frentes__linha--destaque .frentes__nome { color: var(--ciano); }

/* Frase de abertura do par, na voz da marca: é o primeiro pedaço de texto
   que o olho encontra, e já diz o essencial. */
.par__texto .abre { margin-bottom: clamp(16px, 1.8vw, 24px); }

@media (max-width: 900px) {
  /* Empilhado: a foto vira uma faixa de borda a borda no alto e o texto sobe
     embaixo dela, sem cruzar a imagem (17/09). */
  .par,
  .par--direita { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .par__foto,
  .par--direita .par__foto {
    grid-column: 1; grid-row: 1;
    min-height: 0;
    aspect-ratio: var(--par-proporcao, 4 / 3);
  }
  .par__foto img { object-position: var(--foco-movel, var(--foco, 50% 35%)); }
  /* 17/09: o texto não sobe mais sobre a base da foto. Ele encostava nela pelo
     -36px porque a borda de baixo se dissolvia no chão e não havia linha para
     cruzar; com a borda reta, essa sobreposição viraria um corte no meio da
     imagem — e a legenda, que agora mora embaixo do quadro, ficaria debaixo
     do texto. As duas coisas ficam empilhadas, cada uma na sua linha. */
  .par__texto,
  .par--direita .par__texto {
    grid-column: 1; grid-row: 2;
    margin-top: clamp(18px, 4vw, 28px);
    padding: 0 var(--calha) clamp(56px, 13vw, 84px);
  }
}

/* -----------------------------------------------------------------------------
   14. FAIXA DE FOTO — um quadro de borda a borda com uma frase só
   A frase é texto da própria copy, no lugar em que ela já estava na leitura:
   não é repetição, é o parágrafo ganhando o quadro inteiro.
   -------------------------------------------------------------------------- */
.faixa-foto {
  position: relative;
  isolation: isolate;
  display: grid;
  align-content: end;
  min-height: clamp(460px, 78vh, 800px);
  padding: clamp(96px, 12vw, 180px) var(--calha) clamp(52px, 6.4vw, 104px);
  overflow: hidden;
  background: var(--fundo);
}
/* --faixa-inicio diz onde a foto começa. Antes a borda esquerda dela se
   dissolvia no fundo para o corte não aparecer e para a frase, que passava
   por cima, continuar legível. 17/09, borda reta: o corte passa a aparecer,
   de propósito, e a frase deixa de pousar na foto — ela para onde a foto
   começa (a conta em .faixa-foto__frase). Sem texto sobre a imagem, nem a
   coluna escura nem a emenda têm mais o que fazer, e as duas saíram. */
.faixa-foto__foto { position: absolute; inset: 0 0 0 var(--faixa-inicio, 0%); z-index: -1; margin: 0; }
.faixa-foto__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
}

/* A frase cabe inteira no fundo liso: a largura dela para onde a foto começa,
   menos a calha e um respiro. A conta se refaz sozinha em qualquer largura e
   com qualquer --faixa-inicio, então a aresta da foto fica reta sem que a
   frase corra o risco de encostar nela. O teto de 30ch continua valendo
   quando sobra espaço — a medida de leitura manda antes da geometria. */
.faixa-foto__frase {
  position: relative;
  z-index: 1;
  max-width: min(30ch, calc(var(--faixa-inicio, 46%) - var(--calha) - clamp(24px, 2.6vw, 52px)));
  padding-top: 26px;
  font-family: var(--titling);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.02rem + 1.3vw, 2.35rem);
  line-height: 1.3;
  color: var(--prata);
  text-wrap: balance;
}
.faixa-foto__frase::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 1px;
  background: var(--ciano);
}

@media (max-width: 900px) {
  /* Em pé, a foto deitada vira um recorte alto: o quadro cresce para a
     pessoa caber acima da frase, que ocupa sete linhas nessa largura. */
  .faixa-foto { min-height: clamp(520px, 156vw, 700px); }
  .faixa-foto__foto { inset: 0; }
  .faixa-foto__foto img { object-position: var(--foco-movel, var(--foco, 50% 50%)); }
  /* Em pé a foto cobre a faixa inteira e a frase volta a pousar nela: sem
     aresta lateral para respeitar, o véu existe. Ele para em .9 no pé, e não
     em var(--fundo), para a foto chegar inteira ao corte de baixo. */
  .faixa-foto__frase { max-width: none; }
  .faixa-foto__foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
      rgba(16,21,28,.93) 0%,
      rgba(16,21,28,.9) 34%,
      rgba(25,31,40,.62) 54%,
      transparent 76%);
  }
}

/* -----------------------------------------------------------------------------
   15. PAINEL — fotos de tamanhos diferentes numa grade de doze colunas
   (Não se chama "mosaico": home.css já tem um .mosaico, o das frentes da
   home, e o nome igual faria uma folha mexer na peça da outra.)
   Nunca a grade de cartões iguais: cada variante tem um desenho próprio, e o
   tamanho de cada quadro diz alguma coisa (o maior é o principal). Como na
   home, texto pequeno não pousa em fotografia: nome e descrição ficam embaixo
   da foto. Só os quadros que são um link com um nome curto (--sobre-foto)
   levam o nome na base da foto, grande, sobre o degradê.
   -------------------------------------------------------------------------- */
.painel {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(18px, 2.2vw, 36px);
  row-gap: clamp(30px, 3.4vw, 52px);
  align-items: start;
}
.painel__item { position: relative; min-width: 0; margin: 0; }
.painel__foto {
  position: relative;
  display: block;
  aspect-ratio: var(--proporcao, 3 / 2);
  overflow: hidden;
  background: var(--fundo-3);
}
.painel__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 45%);
}
.painel__legenda { margin-top: clamp(14px, 1.6vw, 22px); }
.painel__nome {
  font-family: var(--titling);
  font-weight: 400;
  font-size: clamp(1.2rem, 1rem + .7vw, 1.65rem);
  line-height: 1.2;
  color: var(--prata);
}
.painel__texto {
  margin-top: 8px;
  font-size: var(--tb);
  line-height: 1.75;
  color: var(--prata-2);
  max-width: 48ch;
}
.painel__texto a {
  color: var(--prata);
  border-bottom: 1px solid var(--fio);
  transition: color var(--rapido), border-color var(--rapido);
}
.painel__texto a:hover { color: var(--ciano); border-color: var(--ciano); }

/* Quadro que é um link inteiro: o nome acende em ciano, sem mexer na foto
   (o tratamento da fotografia é único e não varia com o mouse). */
a.painel__item { display: block; color: var(--prata); }
a.painel__item .painel__nome { transition: color var(--rapido); }
a.painel__item:hover .painel__nome { color: var(--ciano); }

/* (O painel de três frentes, .painel--tres, saiu com a placa da
   Especialidade — bloco 21 — em 13/09.) */

/* Nome sobre a foto: a altura vem da linha da grade, não da proporção. */
.painel--sobre-foto { grid-auto-rows: var(--painel-linha, clamp(200px, 18vw, 300px)); row-gap: clamp(12px, 1.2vw, 18px); column-gap: clamp(12px, 1.2vw, 18px); align-items: stretch; }
.painel--sobre-foto > * { position: relative; min-width: 0; }
.painel--sobre-foto .painel__item { display: block; position: absolute; inset: 0; }
.painel--sobre-foto .painel__foto { position: absolute; inset: 0; aspect-ratio: auto; }
.painel--sobre-foto .painel__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,19,25,.92) 0%, rgba(14,19,25,.62) 30%, transparent 62%);
}
.painel--sobre-foto .painel__legenda {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  margin: 0;
  padding: clamp(16px, 1.8vw, 26px);
}
.painel--sobre-foto .painel__nome { font-size: clamp(1.4rem, 1.1rem + .8vw, 1.85rem); }
.painel--sobre-foto .painel__texto { color: var(--prata); }

/* Quatro: uma alta à esquerda, duas no alto e uma larga embaixo. */
.painel--quatro > :nth-child(1) { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.painel--quatro > :nth-child(2) { grid-column: 6 / span 4; grid-row: 1; }
.painel--quatro > :nth-child(3) { grid-column: 10 / span 3; grid-row: 1; }
.painel--quatro > :nth-child(4) { grid-column: 6 / span 7; grid-row: 2; }

/* Seis caminhos (404): duas linhas com larguras desencontradas. */
.painel--seis > :nth-child(1) { grid-column: span 5; }
.painel--seis > :nth-child(2) { grid-column: span 3; }
.painel--seis > :nth-child(3) { grid-column: span 4; }
.painel--seis > :nth-child(4) { grid-column: span 3; }
.painel--seis > :nth-child(5) { grid-column: span 4; }
.painel--seis > :nth-child(6) { grid-column: span 5; }

@media (max-width: 1100px) {
  .painel--quatro > :nth-child(1) { grid-column: 1 / span 6; grid-row: 1; }
  .painel--quatro > :nth-child(2) { grid-column: 7 / span 6; grid-row: 1; }
  .painel--quatro > :nth-child(3) { grid-column: 1 / span 6; grid-row: 2; }
  .painel--quatro > :nth-child(4) { grid-column: 7 / span 6; grid-row: 2; }
  .painel--seis > :nth-child(n) { grid-column: span 6; }
}

@media (max-width: 760px) {
  .painel,
  .painel--sobre-foto { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; row-gap: clamp(26px, 7vw, 40px); }
  .painel > :nth-child(n) { grid-column: 1; grid-row: auto; }
  /* No celular o nome desce para baixo da foto também nos links. */
  .painel--sobre-foto .painel__item { position: relative; inset: auto; }
  .painel--sobre-foto .painel__foto { position: relative; inset: auto; aspect-ratio: 16 / 9; }
  .painel--sobre-foto .painel__foto::after { display: none; }
  .painel--sobre-foto .painel__legenda { position: static; padding: 12px 0 0; }
  .painel--sobre-foto .painel__nome { font-size: clamp(1.2rem, 1.05rem + .8vw, 1.45rem); }
  .painel--sobre-foto .painel__texto { color: var(--prata-2); }
}

/* -----------------------------------------------------------------------------
   16. TRILHO — uma tira de fotos que corre para o lado
   Começa na calha e sangra pela borda direita da tela: o quadro cortado na
   borda já diz que há mais. Todos os quadros com o mesmo tamanho e a foto na
   mesma proporção, a pedido do cliente (13/09; antes um em cada cinco era
   mais largo), com o fio de progresso do trajeto da home embaixo. Os botões
   e o fio só aparecem se houver o que rolar; o arrasto com o mouse vem de
   home.js (bloco 10c) e o cursor, de home.css (bloco 9).
   -------------------------------------------------------------------------- */
.secao-trilho { padding-block: clamp(56px, 7vw, 116px) clamp(60px, 7.4vw, 120px); }

.trilho__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  padding-inline: var(--calha);
  margin-bottom: clamp(26px, 3.2vw, 46px);
}
.trilho__cabeca .apoio { margin-top: clamp(12px, 1.4vw, 18px); max-width: 50ch; }

/* As setas são as .faixa__seta de home.css, as mesmas da faixa da home:
   redondas, porque são controle (como a barra do explorador do joelho). O
   que se lê — quadro, foto, botão de agendar — continua reto. */
.trilho__controles { display: flex; gap: 10px; flex: none; }

/* A área rolável (a região focável) ocupa a faixa inteira; a calha entra
   como padding da LISTA, que assim faz parte da área rolada nos dois lados,
   e como scroll-padding, para o encaixe parar o quadro na calha. O primeiro
   quadro começa alinhado ao hero e o último termina na calha da direita. */
.trilho {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--calha);
  scrollbar-width: none;
}
.trilho::-webkit-scrollbar { display: none; }
.trilho:focus-visible { outline-offset: -3px; }
.trilho__lista {
  display: flex;
  gap: clamp(14px, 1.5vw, 24px);
  width: max-content;
  padding: 4px var(--calha) 8px;
}

/* Coluna: a lista estica os treze até o mais alto, e o texto cresce para
   empurrar o agendamento ao pé — ele fica na mesma altura em todos. */
.quadro {
  --q: clamp(252px, 22vw, 372px);
  flex: none;
  display: flex;
  flex-direction: column;
  width: var(--q);
  scroll-snap-align: start;
  min-width: 0;
}

.quadro__link { display: block; color: var(--prata); }
.quadro__foto {
  position: relative;
  display: block;
  height: clamp(250px, 23vw, 390px);
  overflow: hidden;
  background: var(--fundo-3);
}
.quadro__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 45%);
  transition: transform 900ms var(--curva);
}

/* Mesmo ensaio da home: o joelho 3D, sem o filtro das fotografias. */
.quadro__foto--modelo { background: var(--fundo); }
.quadro__foto--modelo img { object-position: 50% 48%; }
.quadro__link:hover .quadro__foto img { transform: scale(1.04); }
/* Duas linhas reservadas (2 x 1.25em): um nome curto não sobe o texto. */
.quadro__nome {
  min-height: 2.5em;
  margin-top: clamp(14px, 1.4vw, 20px);
  font-family: var(--titling);
  font-weight: 400;
  font-size: clamp(1.08rem, .98rem + .42vw, 1.36rem);
  line-height: 1.25;
  color: var(--prata);
  max-width: 24ch;
  transition: color var(--rapido);
}
.quadro__link:hover .quadro__nome { color: var(--ciano); }
.quadro__texto {
  flex: 1 0 auto;
  margin-top: 8px;
  font-size: var(--tp);
  line-height: 1.75;
  color: var(--prata-2);
  max-width: 42ch;
}
.quadro__agenda { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fio-2); }
/* Em caixa normal: treze rótulos em versalete espaçado, um por quadro,
   seriam o rótulo em caixa alta que o contrato evita. O versalete fica só
   nos dois links, que são o botão. */
.quadro__rotulo {
  font-size: 12px;
  line-height: 1.5;
  color: var(--prata-2);
}
.quadro__unidades { display: flex; flex-wrap: wrap; gap: 2px 20px; margin-top: 4px; }

/* O fio: um trilho apagado e, sobre ele, a janela do que está à vista. Só
   transform: a posição e a largura saem de --inicio e --janela (pagina.js). */
.trilho__fio {
  position: relative;
  height: 1px;
  margin: clamp(22px, 2.6vw, 36px) var(--calha) 0;
  background: var(--fio);
  overflow: hidden;
}
.trilho__fio span {
  position: absolute;
  inset: 0;
  background: var(--prata);
  transform-origin: 0 50%;
  transform: translateX(calc(var(--inicio, 0) * 100%)) scaleX(var(--janela, .25));
}
.secao-trilho[data-sem-rolagem] .trilho__controles,
.secao-trilho[data-sem-rolagem] .trilho__fio { display: none; }

@media (max-width: 760px) {
  .quadro { --q: 76vw; }
  .quadro__foto { height: min(62vw, 300px); }
  .trilho__cabeca { align-items: flex-start; flex-direction: column; }
}

/* -----------------------------------------------------------------------------
   17. LER MAIS — o resto de uma passagem, recolhido
   Sem JavaScript o texto nasce aberto e o botão não existe: só recolhe
   depois que pagina.js marca o bloco como pronto. Fechado, o trecho some
   também para o leitor de tela e para o Tab (visibility), não só da vista.
   -------------------------------------------------------------------------- */
.ler-mais__corpo { display: grid; grid-template-rows: 1fr; }
.ler-mais__corpo > div { min-height: 0; overflow: hidden; }
.ler-mais__corpo > div > :first-child { margin-top: 1.1em; }

[data-ler-mais-pronto] .ler-mais__corpo { transition: grid-template-rows var(--medio); }
[data-ler-mais-pronto]:not([data-aberto="sim"]) .ler-mais__corpo { grid-template-rows: 0fr; }
[data-ler-mais-pronto]:not([data-aberto="sim"]) .ler-mais__corpo > div {
  visibility: hidden;
  transition: visibility 0s linear 620ms;
}

/* O botão tem o mesmo desenho do "Ler mais" das páginas de serviço (.mais
   de atuacao.css): rótulo primeiro e sublinhado pelo fio, sinal depois,
   11px a .16em. Antes os dois "Ler mais" do site tinham corpo, tracking e
   ordem diferentes. */
.ler-mais__botao { display: none; }
[data-ler-mais-pronto] .ler-mais__botao {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: clamp(16px, 1.8vw, 22px);
  min-height: 44px;
  padding-block: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--prata);
  transition: color var(--rapido);
}
.ler-mais__botao:hover { color: var(--ciano); }
.ler-mais__rotulo { padding-block: 3px; border-bottom: 1px solid var(--fio); transition: border-color var(--rapido); }
.ler-mais__botao:hover .ler-mais__rotulo { border-color: var(--ciano); }
/* O mesmo sinal de mais/menos do acordeão das dúvidas. */
.ler-mais__sinal { position: relative; flex: none; width: 11px; height: 11px; }
.ler-mais__sinal::before,
.ler-mais__sinal::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--rapido), opacity var(--rapido);
}
.ler-mais__sinal::before { left: 0; right: 0; top: 5px; height: 1px; }
.ler-mais__sinal::after  { top: 0; bottom: 0; left: 5px; width: 1px; }
[data-aberto="sim"] > .ler-mais__botao .ler-mais__sinal::after { transform: scaleY(0); opacity: 0; }

/* -----------------------------------------------------------------------------
   18. LEGENDA
   Curta e factual: lugar ou assunto da foto. Nunca atribui foto de banco ao
   consultório nem a pacientes dele.
   -------------------------------------------------------------------------- */
.legenda {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--prata-2);
}
.legenda::before {
  content: "";
  flex: none;
  width: 14px; height: 1px;
  background: currentColor;
  opacity: .6;
  transform: translateY(-4px);
}
/* 17/09, borda reta. A legenda pousava na fotografia e quem a segurava era o
   véu do quadro; sem ele, medido, "Balneário Camboriú, SC" caía a 1,00:1 sobre
   o mármore claro da recepção. Ela desce para debaixo do quadro — que é a
   regra que este mesmo arquivo já escreve para o painel: texto pequeno não
   pousa em fotografia. A foto fica limpa e reta, e a legenda ganha o fundo da
   seção, onde lê a 12:1.

   O nome --sobre ficou: ela continua sendo a legenda de uma foto que sangra
   até a borda da tela (por isso a calha de recuo), e não a de uma imagem
   dentro da coluna de texto. Os quadros que a recebem viram grade de duas
   linhas — a foto na primeira, ela na segunda — logo abaixo. */
.legenda--sobre {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  margin: 0;
  padding: 12px var(--calha) 0;
  color: var(--prata-2);
}

/* Os quadros que levam legenda reservam uma faixa embaixo para ela, fora da
   fotografia. A imagem CONTINUA absoluta e preenchendo o quadro: posta no
   fluxo, ela levava a altura natural do arquivo para dentro da conta e o
   quadro crescia — medido, a foto da Reave passou de 608px para 720px e
   encostou no texto de baixo. A legenda mora logo abaixo da borda (top: 100%),
   e por isso estes dois quadros não recortam o que escapa; não precisam,
   porque o object-fit: cover já mantém a imagem dentro da caixa dela. */
.local__foto,
.par__foto {
  position: relative;
  overflow: visible;
  margin-bottom: var(--legenda-faixa);
}

/* Quando a foto sangra pela direita, a legenda acompanha o canto dela. */
.local--espelho .local__foto .legenda--sobre,
.par--direita .par__foto .legenda--sobre { left: auto; right: 0; }

/* -----------------------------------------------------------------------------
   19. UNIDADES — a foto da clínica (.unidade__foto) mora em
   home.css, bloco 12: é a mesma peça na home, nas internas e nas páginas de
   serviço. O enquadramento do fecho (--foco-fecho) também foi para lá, no
   bloco 13, junto da regra que ele ajusta. Aqui fica só a legenda do par.
   -------------------------------------------------------------------------- */


/* -----------------------------------------------------------------------------
   20. XADREZ — dois textos e duas fotos em diagonal, dentro da calha
   O respiro entre os pares que sangram: aqui nada sai da coluna do site, e as
   duas fotos têm tamanhos diferentes (a maior é a do assunto principal).
   -------------------------------------------------------------------------- */
.xadrez {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 56px);
  row-gap: clamp(52px, 6.4vw, 110px);
  align-items: center;
  padding-block: clamp(70px, 8.6vw, 140px);
}
.xadrez__texto { min-width: 0; }
.xadrez__texto .abre { max-width: 34ch; margin-bottom: clamp(16px, 1.8vw, 24px); }

.xadrez__foto { margin: 0; min-width: 0; }
.xadrez__foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--proporcao, 3 / 2);
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
  background: var(--fundo-3);
}

/* Texto | retrato alto, depois paisagem larga | texto: as fotos trocam de
   orientação e de largura, e a diagonal fica desencontrada de propósito. */
.xadrez > :nth-child(1) { grid-column: 1 / span 6; }
.xadrez > :nth-child(2) { grid-column: 8 / span 5; }
.xadrez > :nth-child(3) { grid-column: 1 / span 6; }
.xadrez > :nth-child(4) { grid-column: 8 / span 5; }

@media (max-width: 900px) {
  .xadrez { grid-template-columns: minmax(0, 1fr); row-gap: clamp(30px, 8vw, 48px); padding-block: clamp(36px, 9vw, 64px) clamp(56px, 13vw, 84px); }
  .xadrez > :nth-child(n) { grid-column: 1; padding-top: 0; }
  /* Empilhado, a ordem de leitura volta a ser a da copy: texto, foto, foto,
     texto já é essa ordem no HTML. */
}

/* -----------------------------------------------------------------------------
   21. PLACA DAS FRENTES (especialidade) — um joelho só, três lugares nele
   O mosaico de três fotos de banco saiu a pedido do cliente (13/09). No
   lugar, uma prancha de anatomia: o recorte do modelo 3D no centro e as três
   frentes em volta, cada uma ligada ao ponto dela no joelho por um fio de
   1px (desenhado por pagina.js, bloco 4). O fio corre em ângulo reto pela
   calha entre o texto e o joelho, nunca por cima de texto; o ponto é o
   marco quadrado do trajeto da home. De 1200px para cima as colunas de
   texto têm 340px ou mais; abaixo disso a placa empilha e fio e ponto saem.
   -------------------------------------------------------------------------- */
.secao-placa { padding-block: clamp(64px, 8vw, 128px) clamp(72px, 9vw, 144px); }

/* A frase de abertura faz as vezes de título (a copy não dá outro): um
   degrau acima do .abre dos pares, com a medida curta dele. */
.placa__abre {
  font-size: clamp(1.3rem, 1.02rem + .9vw, 1.95rem);
  max-width: 34ch;
  margin-bottom: clamp(40px, 5vw, 84px);
}

.placa {
  --joelho: clamp(300px, 24vw, 420px);   /* largura do recorte                */
  --vao: clamp(44px, 4.6vw, 88px);       /* a calha por onde o fio corre      */
  --nome: clamp(1.4rem, 1.08rem + .85vw, 2rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--joelho) minmax(0, 1fr);
  grid-template-rows: auto minmax(clamp(36px, 4vw, 64px), 1fr) auto;
  column-gap: var(--vao);
  align-items: start;
}
/* Duas frentes à esquerda, no alto e embaixo; a da patela sozinha à
   direita, com a primeira linha do nome na altura exata do ponto dela:
   o recorte começa no alto da placa, então o ponto está a 43,1% da altura
   da janela (--joelho x 5/3), e o nome desce isso menos meia linha. Assim
   o fio dela é reto em qualquer largura. */
.placa__frente--estabilidade { grid-column: 1; grid-row: 1; }
.placa__frente--alinhamento  { grid-column: 1; grid-row: 3; }
.placa__frente--dor {
  grid-column: 3;
  grid-row: 1 / -1;
  margin-top: calc(var(--joelho) * 5 / 3 * .431 - var(--nome) * .575);
}

/* O recorte: uma janela de proporção fixa (3:5) com o arquivo inteiro
   dentro, deslocado para a articulação cair no meio. Assim cada ponto é
   uma porcentagem fixa da janela em qualquer largura. Fêmur e tíbia se
   esfumam nas pontas pela máscara, como no "Onde fica no joelho" das
   páginas de serviço. */
.placa__joelho {
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: start;
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 5;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 17%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 17%, #000 80%, transparent 100%);
}
/* O halo do palco do modelo 3D da home, bem baixo: o osso não flutua num
   fundo chapado. */
.placa__joelho::before {
  content: "";
  position: absolute;
  inset: 12% 0;
  background: radial-gradient(closest-side, rgba(52, 63, 78, .6), rgba(52, 63, 78, 0));
}
/* 86% da largura da janela, 7% de folga de cada lado; o top leva a linha
   da articulação (a 50,4% da altura do arquivo) ao meio da janela. O
   espelho põe a patela à direita. O brilho baixa como no .onde__figura,
   para o branco do osso não gritar no escuro. */
.placa__joelho img {
  position: absolute;
  left: 7%;
  top: -18.1%;
  width: 86%;
  height: auto;
  /* A proporção do arquivo, declarada: com height:auto e posição absoluta
     o Chrome acusava a imagem preguiçosa como "sem dimensões". */
  aspect-ratio: 900 / 2350;
  transform: scaleX(-1);
  filter: brightness(.8);
}

/* O ponto: o marco do trajeto da home, cheio em ciano, com um anel da cor
   do fundo para se destacar sobre o osso claro. --x e --y vêm do HTML:
   menisco, platô da tíbia e patela, medidos no arquivo espelhado. */
.placa__ponto {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  background: var(--ciano);
  box-shadow: 0 0 0 3px var(--fundo);
}

/* O fio: um só traçado para as três frentes, com um "casco" da cor do
   fundo por baixo. Sobre o navy o casco some; no trecho que entra no osso
   ele contorna o fio de prata e o mantém visível. */
.placa__linhas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.placa__casco,
.placa__fio { fill: none; }
.placa__casco { stroke: var(--fundo); stroke-width: 5px; }
.placa__fio { stroke: var(--prata-3); stroke-width: 1px; }

/* As frentes ------------------------------------------------------------------ */
.placa__frente { min-width: 0; }
.placa__nome {
  font-family: var(--titling);
  font-weight: 400;
  font-size: var(--nome);
  line-height: 1.15;
  color: var(--prata);
  text-wrap: balance;
}
.placa__texto {
  margin-top: clamp(12px, 1.2vw, 16px);
  font-size: var(--tg);
  line-height: 1.75;
  color: var(--prata-2);
  max-width: 42ch;
}
/* As condições da frente, fora da frase: uma por linha, em prata cheio,
   sublinhadas pelo fio do site; ciano no hover, como todo link de texto.
   O alvo passa de 24px de altura. */
.placa__links {
  display: grid;
  justify-items: start;
  gap: 4px;
  margin-top: clamp(16px, 1.7vw, 24px);
}
.placa__links a {
  display: inline-block;
  padding-block: 5px;
  font-size: var(--tb);
  font-weight: 400;
  line-height: 1.5;
  color: var(--prata);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--fio);
  text-underline-offset: 6px;
  transition: color var(--rapido), text-decoration-color var(--rapido);
}
.placa__links a:hover { color: var(--ciano); text-decoration-color: var(--ciano); }

/* 700 a 1199px: o recorte fica à esquerda, grudado abaixo do cabeçalho
   enquanto as três frentes passam ao lado, separadas por fio. Sem fio de
   legenda nem ponto: sem texto dos dois lados do joelho, não há de onde
   eles saírem. */
@media (max-width: 1199px) {
  .placa {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    grid-template-rows: none;
    column-gap: clamp(32px, 5vw, 64px);
  }
  .placa__joelho {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: start;
    position: sticky;
    top: calc(var(--cab-h) + 24px);
  }
  .placa__frente--estabilidade,
  .placa__frente--alinhamento,
  .placa__frente--dor { grid-column: 2; grid-row: auto; margin-top: 0; }
  .placa__frente { padding-block: clamp(24px, 3.4vw, 36px); border-top: 1px solid var(--fio); }
  .placa__frente--estabilidade { padding-top: 0; border-top: 0; }
  .placa__ponto,
  .placa__linhas { display: none; }
}

/* Celular: uma coluna só. O recorte vira uma faixa 4:3 entre a frase de
   abertura e as frentes, com o joelho no centro, a 56% da largura, e fundo
   dos dois lados: a toda largura ele virava um bloco branco que tomava a
   tela. O top leva a articulação ao meio da faixa. */
@media (max-width: 699px) {
  .placa { grid-template-columns: minmax(0, 1fr); }
  .placa__joelho {
    grid-column: 1;
    grid-row: auto;
    position: relative;
    top: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: clamp(20px, 6vw, 32px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
  }
  .placa__joelho img { left: 22%; width: 56%; top: -48.4%; }
  .placa__frente--estabilidade,
  .placa__frente--alinhamento,
  .placa__frente--dor { grid-column: 1; }
}

/* -----------------------------------------------------------------------------
   22. RUMO — conservador ou cirurgia, em degrau
   É uma sequência de verdade (primeiro o conservador; a cirurgia quando ele
   não resolve), e quem conta a ordem é a composição, não um marcador: o
   conservador abre no alto, à esquerda, com o nome maior, porque é por onde
   a maioria dos casos começa; a cirurgia desce um degrau à direita, com o
   nome menor, atrás de um único fio vertical. O caminho de marcos sobre uma
   linha que ficou aqui por uma tarde saiu: é o motivo que o cliente recusou
   no Sobre da home ("muita cara de IA", 13/09). As duas fotos de antes
   (fisioterapia e mesa cirúrgica com seringa) também saíram a pedido dele.
   -------------------------------------------------------------------------- */
.rumo { padding-block: clamp(64px, 8vw, 128px) clamp(70px, 8.6vw, 136px); }
.rumo__titulo { max-width: 22ch; margin-bottom: clamp(36px, 4.4vw, 68px); }

.rumo__etapas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(20px, 3vw, 56px);
  align-items: start;
}
.rumo__etapa { min-width: 0; }
.rumo__etapa--antes { grid-column: 1 / span 6; }

/* O degrau: a cirurgia começa mais abaixo, depois do nome e das primeiras
   linhas do conservador, e o fio vertical à esquerda dela é o único
   divisor da faixa. */
.rumo__etapa--depois {
  grid-column: 7 / span 6;
  margin-top: clamp(64px, 8.4vw, 144px);
  padding-left: clamp(24px, 3vw, 52px);
  border-left: 1px solid var(--fio);
}

.rumo__nome {
  font-family: var(--titling);
  font-weight: 400;
  line-height: 1.15;
  color: var(--prata);
  margin-bottom: clamp(12px, 1.4vw, 18px);
}
/* A escala também é a ordem: o primeiro passo a um degrau do título da
   seção, o segundo bem abaixo dele. */
.rumo__etapa--antes .rumo__nome { font-size: clamp(1.6rem, 1.1rem + 1.25vw, 2.3rem); }
.rumo__etapa--depois .rumo__nome { font-size: clamp(1.2rem, 1rem + .5vw, 1.45rem); }
.rumo__etapa--depois p { max-width: 44ch; }

/* A decisão fecha a faixa, grande, com o fio ciano do contrato: é a frase
   para a qual o resto do parágrafo prepara. */
.rumo__decisao {
  position: relative;
  margin-top: clamp(56px, 6.4vw, 104px);
  padding-top: 28px;
  font-family: var(--titling);
  font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.45rem);
  line-height: 1.28;
  color: var(--prata);
  max-width: 30ch;
  text-wrap: balance;
}
.rumo__decisao::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34px;
  height: 1px;
  background: var(--ciano);
}

/* Celular: uma coluna, e o degrau vira recuo: a cirurgia entra mais à
   direita, atrás do mesmo fio vertical. */
@media (max-width: 760px) {
  .rumo__etapas { grid-template-columns: minmax(0, 1fr); }
  .rumo__etapa--antes,
  .rumo__etapa--depois { grid-column: 1; }
  .rumo__etapa--depois {
    margin: clamp(30px, 8vw, 44px) 0 0 clamp(18px, 6vw, 32px);
    padding-left: clamp(18px, 5vw, 24px);
  }
}

/* -----------------------------------------------------------------------------
   22b. MOTIVOS (especialidade) — por que agendar, em dois por dois
   Os quatro motivos saíram da lista de quadradinhos, com texto de 13px em
   prata-2, para uma grade de duas colunas com o texto no corpo de leitura e
   o nome em Marcellus maior. O subgrid alinha nome com nome e texto com
   texto em cada linha, mesmo quando um nome quebra e o vizinho não. Sem
   marcador: o fio no alto de cada motivo já separa um do outro.
   -------------------------------------------------------------------------- */
.motivos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(28px, 3.4vw, 64px);
  row-gap: clamp(36px, 4vw, 60px);
  margin-top: clamp(32px, 3.8vw, 56px);
}
.motivo {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  row-gap: clamp(10px, 1vw, 14px);
  padding-top: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--fio);
}
.motivo__nome {
  font-family: var(--titling);
  font-weight: 400;
  font-size: clamp(1.2rem, 1rem + .55vw, 1.55rem);
  line-height: 1.25;
  color: var(--prata);
  max-width: 22ch;
}
.motivo__texto { line-height: 1.75; max-width: 40ch; }

/* Até 1180px as duas colunas ficariam com menos de 300px: um motivo
   embaixo do outro. */
@media (max-width: 1180px) {
  .motivos { grid-template-columns: minmax(0, 1fr); row-gap: clamp(26px, 3vw, 36px); }
}


/* -----------------------------------------------------------------------------
   23. INDICAÇÕES (artroscopia) — a frase da copy e uma foto por indicação
   -------------------------------------------------------------------------- */
.indicacoes { padding-block: clamp(64px, 8vw, 132px) clamp(70px, 9vw, 140px); }
.indicacoes__frase { max-width: 40ch; margin-bottom: clamp(28px, 3.4vw, 52px); }
.indicacoes .painel { --painel-linha: clamp(210px, 19vw, 320px); }

/* Página de artroscopia: mais ar entre foto e texto — o mosaico com o nome
   em cima da foto deixava tudo colado e o olho sem ponto de entrada. */
html.pagina-artroscopia .par__texto {
  padding: clamp(72px, 9vw, 148px) 0 clamp(72px, 9vw, 148px) clamp(40px, 6vw, 120px);
}
html.pagina-artroscopia .par--direita .par__texto {
  padding-left: 0;
  padding-right: clamp(40px, 6vw, 120px);
}
html.pagina-artroscopia .indicacoes {
  padding-block: clamp(88px, 11vw, 168px);
}
html.pagina-artroscopia .indicacoes__frase {
  max-width: 42ch;
  margin-bottom: clamp(44px, 5.4vw, 80px);
}
/* 17/09, a pedido: "as coisas estão muito grandes e grudadas". Eram duas
   colunas ocupando a faixa inteira — medido a 1600, cada render dava 695x521px
   e a seção inteira 1697px de altura para quatro miniaturas. Um render de meio
   metro de tela não é a peça principal da página; é o índice das quatro
   indicações, e índice se lê de relance.

   Viraram quatro colunas numa linha só: 308px cada a 1600, a seção cai para
   perto de um terço da altura, e o que sobra é o espaço em branco que o
   cliente pediu no mesmo recado. O nome encolhe junto — a 26px ele competia
   com o título da seção. */
html.pagina-artroscopia .indicacoes .painel {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  row-gap: clamp(34px, 4vw, 54px);
  column-gap: clamp(20px, 2.4vw, 38px);
}
html.pagina-artroscopia .indicacoes .painel--quatro > :nth-child(n) {
  grid-column: auto;
  grid-row: auto;
}
html.pagina-artroscopia .indicacoes .painel__foto { aspect-ratio: 4 / 3; }
/* Mais respiro entre a imagem e o nome: a 28px sob um render de 521px a
   legenda parecia colada nele; sob um de 231px, 18px já a solta. */
html.pagina-artroscopia .indicacoes .painel__legenda { margin-top: clamp(14px, 1.4vw, 18px); }
html.pagina-artroscopia .indicacoes .painel__nome {
  font-size: clamp(1.02rem, .94rem + .3vw, 1.18rem);
  line-height: 1.32;
}
/* Duas colunas antes de empilhar: a quatro, abaixo de 1100px, o nome mais
   longo quebraria em quatro linhas. */
@media (max-width: 1100px) {
  html.pagina-artroscopia .indicacoes .painel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  html.pagina-artroscopia .indicacoes .painel { grid-template-columns: minmax(0, 1fr); }
}
html.pagina-artroscopia .faixa-foto {
  min-height: clamp(520px, 58vw, 760px);
}
@media (max-width: 900px) {
  html.pagina-artroscopia .par__texto,
  html.pagina-artroscopia .par--direita .par__texto {
    margin-top: 0;
    padding: clamp(32px, 7vw, 52px) var(--calha) clamp(64px, 14vw, 96px);
  }
}

/* -----------------------------------------------------------------------------
   24. PRAZO — as duas pontas da recuperação, no vocabulário do trajeto
   Desenha só o que o parágrafo ao lado já diz (poucas semanas, alguns
   meses): é leitura rápida do texto, por isso fica fora do leitor de tela.
   Os marcos são os quadrados de 1px do trajeto da home; a ponta mais longa
   leva o contorno ciano da parada de hoje.
   -------------------------------------------------------------------------- */
.prazo {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  max-width: 52ch;
  margin-top: clamp(30px, 3.6vw, 48px);
  padding-top: 30px;
}
.prazo::before {
  content: "";
  position: absolute;
  top: 6px; left: 6px; right: 6px;
  height: 1px;
  background: var(--fio);
}
.prazo__ponta { position: relative; display: grid; gap: 4px; max-width: 24ch; }
.prazo__ponta::before {
  content: "";
  position: absolute;
  top: -30px; left: 0;
  width: 13px; height: 13px;
  background: var(--fundo);
  border: 1px solid var(--prata-3);
}
.prazo__ponta--fim { justify-items: end; text-align: right; }
.prazo__ponta--fim::before { left: auto; right: 0; border-color: var(--ciano); }
.prazo__quando {
  font-family: var(--titling);
  font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem);
  line-height: 1.25;
  color: var(--prata);
}
.prazo__o-que { font-size: var(--tp); line-height: 1.55; color: var(--prata-2); }

/* -----------------------------------------------------------------------------
   25. PERGUNTAS (dúvidas) — o acordeão ao lado de uma foto fixa
   A coluna da foto é um .par__foto: sangra pela esquerda e se dissolve no
   fundo como os outros quadros. Aqui ela gruda abaixo do cabeçalho enquanto
   as respostas abrem. A foto é a mesma para todas as perguntas.
   -------------------------------------------------------------------------- */
.perguntas { align-items: start; }
.perguntas .perguntas__fotos {
  position: sticky;
  top: var(--cab-h);
  align-self: start;
  height: min(calc(100svh - var(--cab-h)), 680px);
  min-height: 420px;
  max-height: 680px;
}

.perguntas .par__texto { align-self: center; }
.perguntas .duvida__corpo p { font-size: var(--tg); max-width: 58ch; }
.perguntas .duvida__pergunta { font-size: clamp(1.08rem, 1rem + .4vw, 1.36rem); }

/* Resposta fechada some também do Tab e do leitor de tela: sem isto, o link
   de uma resposta recolhida continuava recebendo foco invisível. Só com
   JavaScript (.js): sem ele as respostas nascem abertas (home.css, 11). */
.js .perguntas .duvida:not([data-aberta="sim"]) .duvida__corpo > div {
  visibility: hidden;
  transition: visibility 0s linear 620ms;
}

@media (max-width: 900px) {
  .perguntas .perguntas__fotos {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .perguntas .par__texto { margin-top: 0; padding-top: clamp(30px, 8vw, 48px); }
}

/* -----------------------------------------------------------------------------
   26. CAMINHOS DA 404 — seis páginas em painel de fotos
   -------------------------------------------------------------------------- */
.caminhos-404 { padding-block: clamp(56px, 7vw, 110px) clamp(64px, 8vw, 124px); }
.caminhos-404__titulo { margin-bottom: clamp(24px, 3vw, 42px); }
/* No celular a 404 continua curta: seis quadros em duas colunas, não uma
   pilha de seis fotos a toda largura. */
@media (max-width: 760px) {
  .painel.painel--seis { grid-template-columns: 1fr 1fr; column-gap: 14px; row-gap: 22px; }
  .painel--seis > :nth-child(n) { grid-column: auto; }
  .painel--seis.painel--sobre-foto .painel__foto { aspect-ratio: 4 / 3; }
  .painel--seis.painel--sobre-foto .painel__nome { font-size: 1.12rem; }
}

/* Botões de unidade dentro dos quadros: no celular, a toda largura e com o
   tracking um pouco menor, para "Agendar em Balneário Camboriú" caber numa
   linha só (a mesma regra da abertura, bloco 2). */
@media (max-width: 560px) {
  .par__texto .acoes,
  .local__texto .acoes { display: grid; }
  .par__texto .acoes .cta,
  .local__texto .acoes .cta { justify-content: center; text-align: center; padding-inline: 16px; letter-spacing: .14em; }
}

/* -----------------------------------------------------------------------------
   27. AUTORIA — quem assina o conteúdo médico (E-E-A-T, plano de SEO P1.4)
   Uma assinatura no fim do texto, não um cartão: régua em cima e embaixo,
   dentro da calha, no fundo da faixa em que cai. O nome em Marcellus e o
   registro como no rodapé. A linha "Revisado" só existe
   quando há data real de revisão médica: nas condições, o gerador a
   escreve a partir do .md; nas páginas à mão, entra junto com o
   lastReviewed do JSON-LD, nunca antes.
   -------------------------------------------------------------------------- */
.autoria { padding-block: clamp(8px, 1.4vw, 20px) clamp(56px, 7vw, 104px); }
/* O retrato pequeno da assinatura saiu a pedido: o nome e o registro
   bastam, e a fotinho competia com o texto médico. */
/* Nas condições a assinatura fecha a Recuperação: o fim folgado daquela
   faixa (até 136px, atuacao.css) deixaria a assinatura solta, longe do
   texto que ela assina. (0,2,0) vence o .recuperacao de atuacao.css, que
   carrega depois. */
.recuperacao:has(+ .autoria) { padding-bottom: clamp(36px, 4.4vw, 64px); }
.autoria__miolo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(18px, 2.4vw, 36px);
  padding-block: clamp(22px, 2.6vw, 34px);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}
.autoria__foto { display: none; }
.autoria__texto { min-width: 0; }
.autoria__papel { font-size: var(--tp); line-height: 1.5; color: var(--prata-2); }
.autoria__nome { font-size: var(--d3); margin-top: 2px; }
.autoria__registro { margin-top: 8px; font-size: var(--tp); line-height: 1.65; color: var(--prata-2); }
.autoria__revisao { margin-top: 8px; font-size: var(--tp); line-height: 1.65; color: var(--prata); }
/* O link é o versalete sublinhado do rodapé e do contato (.local__rota). */
.autoria__link {
  display: inline-block;
  padding-block: 5px;
  min-height: 24px;
  font-size: var(--te);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--prata);
  border-bottom: 1px solid var(--fio);
  transition: color var(--rapido), border-color var(--rapido);
}
.autoria__link:hover { color: var(--ciano); border-color: var(--ciano); }

@media (max-width: 560px) {
  .autoria__miolo { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .autoria__link { grid-column: 1 / -1; justify-self: start; }
}

/* -----------------------------------------------------------------------------
   28. BLOG — os posts e o índice (blog.html)
   O post é a leitura da política (bloco 11): uma coluna, o subtítulo em
   forma de pergunta em cima da resposta, corpo no tamanho de leitura e o
   índice grudado ao lado. A coluna lateral ganha, embaixo do índice, os
   links para as páginas das condições de que o post trata.
   O índice do blog é um painel (bloco 15) de três: o post mais recente
   grande à esquerda, os outros dois empilhados à direita, cada um com o
   resumo embaixo da foto — nunca a fileira de três cartões iguais.
   -------------------------------------------------------------------------- */
.artigo.secao--materia { padding-top: clamp(40px, 5vw, 80px); padding-bottom: clamp(40px, 5vw, 72px); }
.artigo .bloco {
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
  padding-block: clamp(30px, 3.4vw, 48px);
}
.artigo .bloco__corpo { grid-column: 1; }
.artigo .bloco__titulo { font-size: var(--d3); max-width: 30ch; }
.artigo .texto p { font-size: var(--tg); line-height: 1.8; max-width: 68ch; }
.artigo .lado__links a { font-size: var(--tb); }
.artigo .materia__lado { gap: clamp(28px, 3vw, 40px); }
@media (min-width: 961px) and (min-height: 700px) {
  .artigo .materia__lado { max-height: calc(100svh - var(--abaixo-cab) - 24px); overflow-y: auto; overscroll-behavior: contain; padding-left: 16px; margin-left: -16px; }
}

.secao-blog { padding-block: clamp(48px, 6vw, 96px) clamp(72px, 9vw, 140px); }
/* -----------------------------------------------------------------------------
   CARTÕES DO BLOG
   17/09, a pedido: a listagem virou cartão de verdade. Antes era o .painel da
   home — um quadro grande e dois pequenos, só foto e nome —, e lia como uma
   galeria, não como um blog: não dizia o assunto, nem a data, nem o tamanho da
   leitura, que é o que faz alguém decidir entrar.

   Aqui os três têm o mesmo peso. O painel da home varia o tamanho de propósito
   (o maior é o principal); numa lista de artigos essa hierarquia seria
   inventada — eles saíram no mesmo dia e nenhum vale mais que o outro. O que
   organiza é a ordem, não o tamanho.

   Cartão de aresta seca, como toda fotografia do site desde 17/09: fio de 1px,
   sem canto arredondado e sem sombra. O que acende no hover é o fio e o
   título, em ciano; a fotografia não muda (o tratamento dela é único e não
   varia com o mouse), só cresce um pouco dentro do próprio recorte.
   -------------------------------------------------------------------------- */
.cartoes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 38px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cartao { min-width: 0; }

/* O link é o cartão inteiro: vira a coluna, para o pé poder descer até a base
   com margin-top: auto e os três cartões terminarem na mesma linha. */
.cartao__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--fio);
  background: var(--fundo-2);
  color: var(--prata);
  transition: border-color var(--rapido), background var(--rapido);
}
.cartao__link:hover { border-color: var(--ciano); background: var(--fundo-3); }

.cartao__foto {
  display: block;
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--fundo-3);
  border-bottom: 1px solid var(--fio);
}
.cartao__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
  transition: transform 900ms var(--curva);
}
.cartao__link:hover .cartao__img { transform: scale(1.04); }

.cartao__corpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(20px, 1.9vw, 30px);
}

/* O assunto é a etiqueta da prateleira: é por ele que se escolhe o artigo
   antes de ler o título inteiro. */
.cartao__assunto {
  display: block;
  margin-bottom: 12px;
  font-size: var(--te);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ciano);
}

.cartao__titulo {
  margin: 0 0 10px;
  font-family: var(--titling);
  font-weight: 400;
  font-size: clamp(1.14rem, 1rem + .45vw, 1.42rem);
  line-height: 1.26;
  color: var(--prata);
  text-wrap: balance;
  transition: color var(--rapido);
}
.cartao__link:hover .cartao__titulo { color: var(--ciano); }

.cartao__resumo {
  display: block;
  font-size: var(--tb);
  line-height: 1.7;
  color: var(--prata-2);
}

/* O pé desce até a base do cartão: com títulos de uma e de três linhas, a
   data dos três fica na mesma altura. O fio separa o dado do texto. */
.cartao__pe {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: auto;
  padding-top: clamp(16px, 1.6vw, 22px);
  border-top: 1px solid var(--fio);
}
/* O ponto entre a data e o tempo de leitura: --fio-2 é cor de fio, não de
   texto, e sumia contra o fundo do cartão. */
.cartao__pe > * + *::before {
  content: "·";
  margin-right: 14px;
  color: var(--prata-2);
  opacity: .55;
}
.cartao__data,
.cartao__leitura {
  font-size: var(--tp);
  color: var(--prata-2);
  font-variant-numeric: tabular-nums;
}
/* A chamada encosta à direita e é a única coisa em ciano no pé. */
.cartao__acao {
  margin-left: auto;
  font-size: var(--tp);
  color: var(--ciano);
}
/* A seta literal, não a escapada: 92 seguido de nada deixava o parser
   engolir só parte do código e o cartão mostrava uma caixinha e "92". */
.cartao__acao::after { content: " →"; }
.cartao__pe > .cartao__acao::before { content: none; }

@media (max-width: 1100px) {
  .cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cartoes { grid-template-columns: minmax(0, 1fr); }
  /* Empilhados, os cartões ficam mais largos que altos: a foto encolhe para o
     título do próximo não ficar sempre uma tela abaixo. */
  .cartao__foto { aspect-ratio: 16 / 9; }
}