/* =============================================================================
   home.css — Página inicial
   Site Dr. Fernando Hehn · Ortopedia e Cirurgia do Joelho

   Depende de marca.css, que é o CONTRATO e não se altera. Aqui só existe
   composição: nenhuma cor, fonte ou medida nova é inventada — tudo sai dos
   tokens do contrato.

   O hero é a réplica literal da direção A1 aprovada (hero-marca.html, seção
   ".a1"). Os valores dele foram copiados, não reinterpretados.

   O que esta folha se proíbe, porque é o default de página gerada:
     · rótulo em caixa alta com tracking acima de CADA título
     · uma palavra do headline em cor ou itálico diferente
     · cadeia de metadados unida por ponto médio em texto corrido
     · raio uniforme em botão, campo, card e mídia (aqui o raio é sempre 0)
     · fileira de três ou quatro blocos idênticos — usamos tabela, régua, lista
     · numerais 01/02/03 como rótulo de seção
   ========================================================================== */

/* -----------------------------------------------------------------------------
   0. MEDIDAS LOCAIS
   -------------------------------------------------------------------------- */
/* Altura da barra do cabeçalho fixo, para quem precisa ficar abaixo dela
   (aberturas das internas, âncoras, menu móvel). 15/09: logo maior na
   barra baixa — 8 + 57 + 8px; no celular, 8 + 48 + 8. */
:root {
  --cab-h: 74px;
}
@media (max-width: 620px) {
  :root { --cab-h: 64px; }
}

/* -----------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--ciano) var(--fundo-3);
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--fundo-3); }
html::-webkit-scrollbar-thumb {
  background: var(--navy);
  border: 2px solid var(--fundo-3);
}
html::-webkit-scrollbar-thumb:hover { background: var(--ciano); }

body {
  background: var(--fundo);
  color: var(--prata);
  font-family: var(--marca);
  font-weight: 300;
  font-size: var(--tb);
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* height:auto é obrigatório: os atributos width/height do HTML entram como
   dica de apresentação e, sem isto, o logotipo é esticado para 269px de altura
   — foi o que empurrou o rótulo do hero para cima da parte clara da foto. */
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
address { font-style: normal; }
ul, ol { list-style: none; }
table { border-collapse: collapse; }

/* [hidden] precisa vencer qualquer display declarado em folha. Sem isto,
   .joelho__controles { display: grid } deixa os controles do modelo 3D visíveis
   mesmo quando o JavaScript os marcou como ocultos — botões que não fazem nada
   em quem não tem WebGL. */
[hidden] { display: none !important; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: inherit;
}

:focus-visible {
  outline: 2px solid var(--ciano);
  outline-offset: 3px;
}

::selection { background: rgba(21, 184, 236, .28); color: var(--prata); }

section[id] { scroll-margin-top: calc(var(--cab-h) + 16px); }

.visualmente-oculto {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

.pular {
  position: absolute;
  left: var(--m); top: 10px;
  z-index: 200;
  transform: translateY(-160%);
  padding: 12px 22px;
  background: var(--prata);
  color: var(--fundo);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: transform var(--rapido);
}
.pular:focus { transform: none; }

/* Tipografia de apoio construída sobre as peças do contrato ------------------ */
.t1 { font-size: var(--d1); }
.t2 { font-size: var(--d2); }
.t3 { font-size: var(--d3); }

.apoio--largo { max-width: 58ch; }
.apoio + .apoio { margin-top: 1.05em; }

.registro {
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--prata-2);
}

/* -----------------------------------------------------------------------------
   2. CABEÇALHO
   Visível desde o topo em todas as páginas (15/09). A barra é mais baixa
   para não competir com o retrato do hero. O logotipo do próprio hero
   some, porque a marca já está aqui.
   -------------------------------------------------------------------------- */
.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.2vw, 32px);
  padding: 8px var(--calha);
  background: rgba(14, 19, 25, .92);
  border-bottom: 1px solid var(--fio);
}
.cabecalho__progresso {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ciano);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

@supports (backdrop-filter: blur(1px)) {
  .cabecalho { background: rgba(14, 19, 25, .78); backdrop-filter: blur(16px) saturate(150%); }
}

.cabecalho[data-estado="fixo"] {
  transform: none;
  visibility: visible;
}

/* A marca da barra é o logo HORIZONTAL da versão negativa (fundo escuro ->
   negativa, regra do contrato), a pedido do cliente (13/09). 15/09: 210px
   de largura (~57px de altura); no celular, 178px. */
.cabecalho__marca { flex: none; display: block; }
.cabecalho__marca picture { display: block; }
.cabecalho__marca img { width: 210px; }

@media (max-width: 620px) {
  .cabecalho { padding-block: 8px; }
  .cabecalho__marca img { width: 178px; }
}

.cabecalho__nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 28px);
  margin-left: auto;
}

/* Classe própria, não ".cabecalho__nav a": dentro da navegação agora mora
   também a lista das áreas de atuação (2b), com outro desenho. */
.cabecalho__link {
  position: relative;
  padding: 8px 0;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--prata-2);
  transition: color var(--rapido);
}
.cabecalho__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 2px;
  height: 1px;
  background: var(--ciano);
  transition: right var(--rapido);
}
.cabecalho__link:hover { color: var(--prata); }
.cabecalho__link:hover::after,
.cabecalho__link[aria-current="true"]::after { right: 0; }
.cabecalho__link[aria-current="true"] { color: var(--prata); }

.cta--mini {
  flex: none;
  padding: 8px 18px;
  font-size: 10.5px;
  letter-spacing: .16em;
}

.cabecalho__botao {
  display: none;
  position: relative;
  z-index: 81;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 2px;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--prata);
  cursor: pointer;
}
.cabecalho__traco {
  position: relative;
  display: block;
  flex: none;
  width: 18px;
  height: 12px;
}
.cabecalho__traco::before,
.cabecalho__traco::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transform-origin: 50% 50%;
  transition: transform var(--rapido), top var(--rapido), bottom var(--rapido);
}
.cabecalho__traco::before { top: 2px; }
.cabecalho__traco::after  { bottom: 2px; }
.cabecalho__botao[aria-expanded="true"] .cabecalho__traco::before {
  top: 5.25px;
  transform: rotate(45deg);
}
.cabecalho__botao[aria-expanded="true"] .cabecalho__traco::after {
  bottom: 5.25px;
  transform: rotate(-45deg);
}
/* Aberto, a barra e o painel são a mesma peça: senão o X parece
   solto no overlay e o toque às vezes pega o menu, não o botão. */
.cabecalho:has(+ .menu[data-aberto="sim"]) {
  background: var(--fundo-3);
  backdrop-filter: none;
  border-bottom-color: color-mix(in srgb, var(--prata) 12%, transparent);
}

@media (max-width: 1080px) {
  .cabecalho__nav, .cta--mini { display: none; }
  .cabecalho__botao { display: inline-flex; }
}

/* Cabeçalho com a navegação do site inteiro: oito páginas em vez de seis
   âncoras (o Blog entrou em 17/09 — ele existia e só o rodapé levava a ele).
   Com este modificador a navegação recolhe para o menu antes do limite antigo
   de 1080px. É o cabeçalho de TODAS as páginas, home inclusive, por isso mora
   aqui e não em pagina.css.
   Medido com o logo horizontal e o rótulo "Áreas de atuação": a linha inteira
   pede mais largura. Recolhe a 1440px — em 1366 (notebook comum) a barra
   larga ficava com ~10px de folga e cortava no zoom. Com o Blog, medido de
   novo: a 1441px (a menor largura em que a barra aparece) sobram 79px entre o
   logo e o primeiro link, então o limite continua onde estava.
   O bloco 6b de home.js fecha o painel na mesma largura. */
@media (max-width: 1440px) {
  .cabecalho--paginas .cabecalho__nav,
  .cabecalho--paginas .cta--mini { display: none; }
  .cabecalho--paginas .cabecalho__botao { display: inline-flex; }
}

/* A página atual ganha o mesmo traço ciano que a seção ativa ganha na home. */
.cabecalho__link[aria-current="page"] { color: var(--prata); }
.cabecalho__link[aria-current="page"]::after { right: 0; }

/* -----------------------------------------------------------------------------
   2b. ÁREAS DE ATUAÇÃO NO CABEÇALHO — o link e o painel das treze condições
   "Áreas de atuação" continua sendo o link da página geral (quem já clicava nele
   chega onde chegava); ao lado dele, um botão redondo — é controle, e
   controle neste site é redondo — abre o painel. Mouse que para em cima
   também abre, com um pequeno atraso para não piscar a cada passagem
   (home.js, bloco 6b).

   O painel foi refeito a pedido do cliente (13/09: "muita cara de IA"). O
   anterior era uma lista chapada de treze nomes longos em duas colunas de
   fios iguais, com um link em versalete espaçado no pé: nada ali era deste
   médico. Agora a lista segue o raciocínio dele: as condições entram nas
   três frentes em que ele organiza a avaliação (a frase é a da copy da
   Especialidade) e as que não cabem em nenhuma ficam em "Outras
   condições". Rótulos curtos, lidos de relance; o nome completo continua
   no título de cada página. A última coluna é a porta para quem não sabe o
   nome do que tem: o joelho 3D da home, que começa por onde dói.
   Forma: uma gaveta na largura toda da barra, com o conteúdo na calha,
   como toda faixa do site, no fundo profundo do rodapé. Sem cartões, sem
   ícone por item; o único realce é o traço ciano da lista do explorador do
   joelho, que marca o item sob o mouse e a página atual.
   -------------------------------------------------------------------------- */
.cabecalho__grupo { display: flex; align-items: center; gap: 2px; }

/* 28px de alvo (a WCAG pede 24); a margem negativa devolve o respiro que o
   círculo tem em volta da seta, e a distância até "Artroscopia" fica igual
   à dos outros links. */
.cabecalho__abrir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  margin-right: -8px;
  border-radius: 999px;
  color: var(--prata-2);
  transition: color var(--rapido);
}
.cabecalho__abrir svg {
  width: 12px; height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--rapido);
}
.cabecalho__abrir:hover,
.cabecalho__abrir[aria-expanded="true"] { color: var(--ciano); }
.cabecalho__abrir[aria-expanded="true"] svg { transform: rotate(180deg); }
.cabecalho__abrir:focus-visible { outline-offset: 0; }
/* Aberto, "Áreas de atuação" ganha o traço da página atual: diz de onde o painel
   saiu. */
.cabecalho__grupo[data-aberto] > .cabecalho__link { color: var(--prata); }
.cabecalho__grupo[data-aberto] > .cabecalho__link::after { right: 0; }

/* O cabeçalho (fixo) é o bloco de contenção do painel. */
.submenu {
  position: absolute;
  background: var(--fundo-3);
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: opacity var(--rapido), transform var(--rapido);
}
.submenu[data-visivel] { opacity: 1; transform: none; }

/* A gaveta pendura ABAIXO do fio da barra (100% é a caixa de padding do
   cabeçalho; o 1px a mais deixa o fio à vista, como divisa) e ocupa a
   largura toda; o % da calha resolve contra ela, como no resto do site. */
.submenu--frentes {
  top: calc(100% + 1px);
  left: 0;
  right: 0;
  padding: clamp(30px, 3vw, 48px) var(--calha) clamp(28px, 2.8vw, 44px);
  border-bottom: 1px solid var(--fio);
}

/* Quatro colunas de condições e a do joelho. As linhas 2 e 3 (nome da
   frente e lista) são da grade inteira (subgrid): um nome que quebra em
   duas linhas, como "Alinhamento e desgaste" nas telas menores, não
   desalinha as listas vizinhas. */
.submenu__miolo {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) clamp(14rem, 16vw, 17.5rem);
  grid-template-rows: auto auto auto auto;
  column-gap: clamp(28px, 3.2vw, 60px);
}

/* A frase é dele e corre sobre as três frentes, que ela apresenta; "Outras
   condições" fica fora do alcance dela e atrás de um fio: não é uma frente,
   é o resto. */
.submenu__abertura {
  grid-column: 1 / 4;
  grid-row: 1;
  margin-bottom: clamp(24px, 2.4vw, 36px);
  font-size: var(--tb);
  line-height: 1.7;
  color: var(--prata-2);
  text-wrap: pretty;
}

.submenu__grupo {
  grid-row: 2 / 4;
  display: grid;
  grid-template-rows: subgrid;
  min-width: 0;
}
.submenu__grupo--outras {
  position: relative;
}
.submenu__grupo--outras::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(clamp(28px, 3.2vw, 60px) / -2);
  width: 1px;
  background: var(--fio-2);
}
.submenu__nome {
  align-self: end;
  margin-bottom: 10px;
  font-family: var(--titling);
  font-size: clamp(1.12rem, 1rem + .3vw, 1.3rem);
  line-height: 1.2;
  color: var(--prata);
  text-wrap: balance;
}

.submenu__itens { align-self: start; }
.submenu__itens a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 34px;
  padding-block: 6px;
  font-size: var(--tb);
  font-weight: 400;
  line-height: 1.35;
  color: var(--prata-2);
  transition: color var(--rapido);
}
/* O traço ciano da lista do explorador (joelho.css, .lista__indicador) em
   miniatura: no vão da coluna, sem empurrar a palavra. */
.submenu__itens a::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 2px;
  height: 14px;
  margin-top: -7px;
  background: var(--ciano);
  opacity: 0;
  transform: scaleY(.3);
  transition: opacity var(--rapido), transform var(--rapido);
}
.submenu__itens a:hover,
.submenu__itens a[aria-current="page"] { color: var(--prata); }
.submenu__itens a:hover::before,
.submenu__itens a[aria-current="page"]::before { opacity: 1; transform: none; }

/* "Todas as áreas de atuação" sai do versalete espaçado: é um link de texto, em
   caixa normal, com o fio dos links do rodapé — o caminho de volta para a
   página geral, não uma ação. */
.submenu__todos {
  grid-column: 1 / 4;
  grid-row: 4;
  justify-self: start;
  margin-top: clamp(20px, 2.2vw, 30px);
  padding-block: 5px;
  min-height: 24px;
  font-size: var(--tp);
  font-weight: 500;
  color: var(--prata);
  border-bottom: 1px solid var(--fio);
  transition: color var(--rapido), border-color var(--rapido);
}
.submenu__todos:hover,
.submenu__todos[aria-current="page"] { color: var(--ciano); border-color: var(--ciano); }

/* A porta do joelho: o recorte do modelo solto no escuro, com o brilho azul
   e a máscara que dissolve as diáfises do palco do explorador, e embaixo a
   pergunta da seção. Sem moldura: caixa com imagem, título e subtítulo é o
   cartão de modelo pronto que este painel quer deixar para trás. O osso
   encosta à esquerda, na mesma linha do texto. */
.submenu__joelho {
  grid-column: 5;
  grid-row: 1 / 5;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  min-width: 0;
  color: var(--prata);
}
/* grid-template-rows: 100% dá à imagem uma altura contra a qual resolver
   (o mesmo acerto do .explorador__estatico). */
.submenu__vitrine {
  display: grid;
  grid-template-rows: 100%;
  justify-items: start;
  align-items: center;
  min-height: 170px;
  background: radial-gradient(200px 180px at 66px 52%, rgba(21, 184, 236, .12), transparent);
}
/* O arquivo tem 1/15 de folga transparente de cada lado (para o côndilo
   não encostar na borda); o translate devolve o osso à linha do texto. */
.submenu__vitrine img {
  width: auto;
  height: 94%;
  max-height: 214px;
  aspect-ratio: 150 / 231;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 80%, transparent 100%);
  transform: translateX(-6.667%);
  transform-origin: 6.667% 50%;
  transition: transform var(--medio);
}
.submenu__joelho:hover .submenu__vitrine img { transform: translateX(-6.667%) scale(1.05); }
.submenu__chamada {
  margin-top: 14px;
  font-family: var(--titling);
  font-size: clamp(1.12rem, 1rem + .3vw, 1.3rem);
  line-height: 1.2;
  transition: color var(--rapido);
}
.submenu__acao { margin-top: 4px; font-size: var(--tp); line-height: 1.6; color: var(--prata-2); }
.submenu__joelho:hover .submenu__chamada { color: var(--ciano); }

/* -----------------------------------------------------------------------------
   3. MENU MÓVEL
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  top: var(--cab-h);
  right: 0; bottom: 0; left: 0;
  z-index: 79;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 28px;
  width: 100%;
  padding: 8px var(--calha) calc(20px + env(safe-area-inset-bottom));
  background: var(--fundo-3);
  opacity: 0;
  transition: opacity var(--rapido);
  overflow-y: auto;
}
.menu[data-aberto="sim"] { opacity: 1; }

.menu__nav { display: flex; flex-direction: column; justify-content: flex-start; gap: 0; }
/* O nome é o link da página geral; a seta ao lado abre a lista no lugar. */
.menu__nav > a,
.menu__link-atuacao {
  display: block;
  padding: 13px 0;
  border-bottom: 1px solid var(--fio-2);
  font-family: var(--titling);
  font-size: clamp(1.28rem, 1.08rem + 1.3vw, 1.78rem);
  color: var(--prata);
  transition: color var(--rapido);
}
.menu__linha-atuacao {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--fio-2);
}
.menu__link-atuacao {
  flex: 1;
  min-width: 0;
  border-bottom: 0;
}
.menu__nav > a[aria-current="page"],
.menu__nav > a[aria-current="true"],
.menu__link-atuacao[aria-current="page"] { color: var(--ciano); }
@media (hover: hover) and (pointer: fine) {
  .menu__nav > a:hover,
  .menu__link-atuacao:hover,
  .menu__abrir:hover { color: var(--ciano); }
}

.menu__abrir {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  margin-left: auto;
  padding: 0;
  color: var(--prata);
}
/* Seta de divulgação, não o "mais" redondo: o círculo + lia como botão de
   adicionar, não como lista que desce. */
.menu__sinal {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
}
.menu__sinal::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--rapido), top var(--rapido);
}
.menu__abrir[aria-expanded="true"] .menu__sinal::before {
  top: 6px;
  transform: rotate(-135deg);
}
.menu__abrir[aria-expanded="true"] { color: var(--ciano); }

/* As treze condições, um degrau abaixo das linhas do menu, com um recuo que
   diz de quem elas são, nos mesmos quatro grupos do painel largo (13/09).
   O nome do grupo em Montserrat pequena é rótulo, não link; as condições,
   em Marcellus, são o que se toca. Do tablet para cima os grupos dividem
   duas colunas. */
.menu__sub {
  border-bottom: 1px solid var(--fio-2);
  animation: menu-sub-abre 320ms var(--curva);
}
.menu__sub--frentes {
  display: grid;
  gap: 20px clamp(24px, 5vw, 56px);
  padding: 12px 0 22px 16px;
}
@media (min-width: 560px) {
  .menu__sub--frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.menu__nome {
  margin-bottom: 2px;
  font-size: var(--tp);
  font-weight: 500;
  line-height: 1.5;
  color: var(--prata-2);
}
.menu__sub a {
  display: block;
  padding: 9px 0;
  font-family: var(--titling);
  font-size: clamp(1.02rem, .95rem + .6vw, 1.3rem);
  line-height: 1.35;
  color: var(--prata);
  transition: color var(--rapido);
}
.menu__sub a[aria-current="page"] { color: var(--ciano); }
@media (hover: hover) and (pointer: fine) {
  .menu__sub a:hover { color: var(--ciano); }
}
/* "Todas as áreas de atuação" em caixa normal, como no painel largo. */
.menu__sub .menu__todos {
  grid-column: 1 / -1;
  justify-self: start;
  padding-block: 6px;
  font-family: var(--marca);
  font-size: var(--tp);
  font-weight: 500;
  line-height: 1.6;
  color: var(--prata);
  border-bottom: 1px solid var(--fio);
}
.menu__sub .menu__todos:hover,
.menu__sub .menu__todos[aria-current="page"] { color: var(--ciano); border-color: var(--ciano); }

@keyframes menu-sub-abre {
  from { opacity: 0; transform: translate3d(0, -6px, 0); }
}

.menu__rodape { display: grid; gap: 10px; padding-top: 8px; }
.menu__rodape .cta {
  justify-content: center;
  width: 100%;
  background: transparent;
  color: var(--prata);
  border-color: var(--fio);
}
.menu__rodape .cta:hover {
  background: transparent;
  border-color: var(--ciano);
  color: var(--ciano);
}
/* A política de privacidade só existia no rodapé; no celular ela passa a
   estar a um toque também dentro do menu. */
.menu__legal {
  justify-self: center;
  margin-top: 4px;
  padding-block: 8px;
  min-height: 24px;
  font-size: var(--tp);
  color: var(--prata-2);
  transition: color var(--rapido);
}
.menu__legal:hover,
.menu__legal[aria-current="page"] { color: var(--ciano); }

/* -----------------------------------------------------------------------------
   4. HERO — cópia literal da direção A1 aprovada
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(var(--cab-h) + 12px) var(--calha) 40px;
  overflow: hidden;
}

/* O CORTE DA HOME. A foto do hero começa nele e a do Sobre termina nele, então
   as duas desenham UMA linha vertical só descendo a página. Antes cada seção
   tinha a sua conta — o hero cortava em 44% da faixa e o Sobre terminava em
   46,5% da coluna (que já vem recuada pela calha), o que dava 704px contra
   749px a 1600: a foto de baixo passava 45px além da borda da de cima e as
   duas apareciam desencontradas (cliente, 17/09: "as imagens precisam ficar em
   colunas certas, sem invadir o outro lado"). Agora as duas medem contra a
   faixa inteira, e a linha é a mesma em qualquer largura. */
.hero__foto { position: absolute; inset: 0 0 0 var(--corte-home); z-index: 0; }
.hero__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.hero .topo {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 24px;
}
/* A marca vive no cabeçalho fixo; o logotipo do hero duplicaria a barra. */
.hero .marca { display: none; }

.hero .corpo {
  position: relative; z-index: 2;
  align-self: center;
  max-width: calc(var(--corte-home) - var(--calha));
  padding-block: 36px;
}
/* Mais estreita, a coluna de texto pede mais faixa: o corte recua e a foto
   recua com ele — as duas leem a mesma variável, então o texto não tem como
   entrar na fotografia nesta largura. (Antes o corpo ia a 50% fixos enquanto a
   foto ficava em 44%, e a 1100px o título entrava 66px dentro dela.) */
@media (max-width: 1180px) {
  :root { --corte-home: 56%; }
}

.hero__titulo {
  font-size: var(--d1);
  max-width: 14ch;
  margin-bottom: 24px;
}

.hero__apoio { max-width: 40ch; margin-bottom: 32px; }

.hero .base {
  position: relative; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
}

/* Os rótulos das pontas pousam sobre a foto, não sobre o fundo chapado.
   Prata cheio, não 62%: medido, a 62% o contraste no topo dava 4,11:1 e a
   WCAG pede 4,5:1 para texto pequeno. */
.hero .topo .descritor,
.hero .base .descritor,
.hero .base .registro,
.fecho__base .descritor,
.fecho__base .registro { color: var(--prata); }

/* O descritor ciano do rodapé do hero é parte da direção aprovada. */
.hero .base .descritor--ciano,
.fecho__base .descritor--ciano { color: var(--ciano); }

/* 17/09, borda reta. Era o scrim que segurava estes rótulos sobre a foto, e
   ele saiu junto com o degradê das laterais. Antes de escolher o que entra no
   lugar, as quatro saídas foram medidas em captura real (texto transparente,
   fundo sob a linha do glifo), a 1600x950, no rótulo do alto e no ciano do pé:

     só sombra no texto ............  1,30:1 e 1,00:1
     faixa curta na aresta da foto .  1,75:1 e 1,30:1  (e a borda volta a esfumar)
     placa atrás do rótulo .........  7,68:1 e 5,76:1  (passa, mas vira uma
                                      etiqueta escura colada na fotografia)
     rótulos no fundo liso ......... 12,32:1 e 7,18:1

   Ficou a última. Os rótulos seguem marcando as pontas — só que as pontas da
   COLUNA DE TEXTO, não as da tela: recuam para o navy e param antes da
   aresta. A fotografia não recebe nada: nem véu, nem placa, nem faixa. É a
   única saída que dá ao mesmo tempo a borda reta que o cliente pediu e o
   contraste que o contrato exige.

   A conta do recuo: a foto começa em 44% da faixa e a linha do rótulo começa
   na calha; tirar uma calha da largura deixa 0,88 de calha de respiro entre o
   fim do rótulo e a aresta, em qualquer largura de tela. */
.hero .topo,
.hero .base { max-width: calc(var(--corte-home) - var(--calha)); }

/* No celular a foto cobre o hero inteiro, e o texto passa a pousar nela.
   Medido em captura real a 390x844 (texto escondido, fundo sob a caixa):
   o descritor do alto dava 3,9:1 sobre a persiana clara e o apoio, a 62%,
   4,3:1 — os dois abaixo dos 4,5:1 da WCAG. O apoio vai a prata cheio, a
   regra do contrato para texto sobre foto. A composição aprovada não muda.

   Aqui o véu fica: nesta largura a foto sangra pelos quatro lados, não sobra
   aresta para ficar reta, e o título inteiro pousa nela. O que mudou é o pé —
   ele parava em var(--fundo), a cor do fundo, e a foto morria antes da borda;
   agora para em .86 e a imagem chega inteira até embaixo. */
@media (max-width: 900px) {
  .hero__foto { inset: 0; }
  .hero__foto img { object-position: 50% 12%; }
  /* Sem coluna de fundo liso nesta largura: os rótulos voltam às pontas da
     faixa, e quem os segura é o véu — aqui a foto sangra pelos quatro lados
     e não sobra aresta para manter reta. */
  .hero .topo,
  .hero .base { max-width: none; }
  .hero__foto .scrim {
    background:
      linear-gradient(to bottom, rgba(16,21,28,.93) 0%, rgba(16,21,28,.89) 11%, rgba(25,31,40,.38) 19%, transparent 27%),
      linear-gradient(to top, rgba(16,21,28,.94) 0%, rgba(16,21,28,.9) 22%, rgba(25,31,40,.78) 42%, rgba(25,31,40,.4) 62%, transparent 80%);
  }
  .hero .corpo { max-width: 100%; align-self: end; padding-block: 28px 30px; }
  .hero__titulo { max-width: 16ch; }
  .hero__apoio { color: var(--prata); }
}

@media (max-width: 620px) {
  .hero { padding-top: calc(var(--cab-h) + 8px); }
  .hero .base { flex-direction: column; align-items: flex-start; gap: 9px; }
  .hero .topo { align-items: flex-start; }
  /* Sem limite em ch: o rótulo tem tracking de .30em, que a unidade ch não
     conta. A 8ch a caixa fechava em 53px enquanto "BALNEÁRIO" pede 92px, e o
     overflow:hidden do hero decepava as letras a 390px. A 46% sobra folga
     para a palavra mais longa em qualquer largura de celular. */
  .hero .topo .descritor { text-align: right; min-width: min-content; max-width: 46%; line-height: 1.6; }
}

/* -----------------------------------------------------------------------------
   5. ESTRUTURA DE SEÇÃO
   O ritmo vertical é de propósito irregular: padding igual em toda seção é o
   sinal mais reconhecível de página montada no automático.
   -------------------------------------------------------------------------- */
/* A seção dá a calha; o envelope só ocupa o que sobra. Sem max-width próprio:
   um segundo limite aqui é o que desalinhava as seções do hero. */
.secao { padding-inline: var(--calha); }
.envelope { width: 100%; }

.secao__cabeca { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 54px); }
.secao__cabeca .apoio { margin-top: clamp(14px, 1.6vw, 22px); }
.secao__cabeca--reto { margin-bottom: clamp(24px, 3vw, 40px); }

/* O respiro do pé vira variável porque o retrato se pendura nele: a foto é
   medida contra a faixa inteira (para o corte bater com o do hero) e precisa
   parar onde o conteúdo da seção para, não onde a seção acaba. */
.secao--sobre {
  position: relative;
  --respiro-pe: clamp(58px, 7vw, 116px);
  padding-block: clamp(66px, 9vw, 152px) var(--respiro-pe);
}

.secao--mapa {
  background: var(--fundo-2);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
  padding-block: clamp(58px, 7vw, 108px) clamp(58px, 7vw, 100px);
}


.secao--unidades {
  background: var(--fundo-2);
  border-top: 1px solid var(--fio);
  padding-block: clamp(56px, 7vw, 104px) clamp(56px, 7vw, 100px);
}

/* -----------------------------------------------------------------------------
   6. SOBRE — o espelho do hero, e a formação como legenda do retrato
   O hero põe a foto à direita e o texto à esquerda; aqui a composição se
   inverte. O retrato sangra pela borda ESQUERDA da tela e se dissolve no fundo
   com o scrim de três camadas, e o texto ocupa a parte direita da coluna.

   Um corte só organiza a seção, e é o MESMO da home inteira (--corte-home):
   à esquerda dele o retrato, à direita a voz dele — título, dois parágrafos —
   terminando na legenda: onde ele atende e a ficha da formação. Só a
   fotografia passa da calha; o texto para nela.
   -------------------------------------------------------------------------- */
/* O respiro de cima sai da seção e vai para o palco, para o retrato poder
   começar na borda superior da seção e emendar com a base do hero. Mesmo valor
   do bloco 5, só mudou de dono. */
.secao--sobre { padding-top: 0; }

/* O vão entre a borda da foto e a primeira letra do texto. Ele é somado por
   fora do corte, então não importa se o corte é 44% ou 56%: o respiro é o
   mesmo e o texto nunca encosta na fotografia. */
.sobre { --vao: clamp(30px, 3.4vw, 64px); }

/* Sem position: relative — quem dá o sistema de medida ao retrato agora é a
   seção, que é a faixa inteira. É isso que faz a borda dele cair na mesma
   linha da borda da foto do hero. */
.sobre__palco { padding-top: clamp(66px, 9vw, 152px); }

/* Retrato ------------------------------------------------------------------ */
/* Medido contra a seção, que é a faixa inteira: left: 0 é a borda da tela e a
   borda direita cai exatamente em --corte-home, a mesma linha onde a foto do
   hero começa. Entre ela e o texto sobra fundo liso, como no hero. */
.sobre__foto {
  position: absolute;
  top: 0;
  bottom: var(--respiro-pe);
  left: 0;
  right: calc(100% - var(--corte-home));
  z-index: 0;
  overflow: hidden;
}
/* 15/09: sem degradê nesta foto — a borda direita fica seca contra o navy.
   Foi este retrato que deu o padrão que 17/09 levou para o site inteiro.
   17/09: a máscara e a contramáscara saíram junto com a cortina (o cliente
   pediu para tirar o efeito desta foto), e a imagem voltou a ser filha direta
   da figura. */
.sobre__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 78% 20%;
}

/* Texto -------------------------------------------------------------------- */
/* O retrato desce até o pé da coluna: o respiro de baixo é curto para ele
   se dissolver à altura da ficha, e não um palmo abaixo dela. */
/* A coluna encosta à direita e a largura dela é o que sobra depois do corte e
   do vão. Assim ela é medida a partir da MESMA variável que posiciona a foto:
   em 1180px o texto começava em 54% enquanto a foto ia até 56% e as duas
   coisas se cruzavam por 28px — com a conta presa no corte, não cruzam em
   largura nenhuma. */
.sobre__texto {
  position: relative;
  z-index: 1;
  margin-left: auto;
  max-width: calc(100% - var(--corte-home) - var(--vao));
  padding-bottom: clamp(40px, 4vw, 64px);
}
.sobre__titulo {
  max-width: 16ch;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}
.sobre__apoio { font-size: var(--tg); max-width: 48ch; }

/* Legenda ------------------------------------------------------------------ */
/* A formação saiu da linha com marcos (13/09, "muita cara de IA": era a
   linha do tempo de modelo pronto — paradas equidistantes, rótulos miúdos,
   quadradinhos ciano acendendo com a rolagem) e virou o que ela é: a legenda
   do retrato, no fim da voz dele, como a etiqueta ao lado de uma obra ou o
   pé de um papel timbrado. Nenhum grafismo: a frase de onde ele atende, em
   Marcellus, e embaixo a ficha em texto corrido de duas colunas, o rótulo
   da copy à esquerda e o dado à direita, sem fio entre as linhas. */
.sobre__credenciais { margin-top: clamp(48px, 5vw, 84px); }

.sobre__onde {
  max-width: 30ch;
  font-family: var(--titling);
  font-size: var(--d3);
  line-height: 1.3;
  color: var(--prata);
  text-wrap: balance;   /* sem "do joelho." sozinho na última linha */
}

/* A coluna dos rótulos tem a largura do maior ("Residência médica"); cada
   par dt/dd é uma linha da grade inteira (subgrid), então um dado que quebra
   em duas linhas desce sozinho, sem desalinhar os rótulos. O peso fica no
   dado, não no rótulo: numa etiqueta de museu o que se lê é a obra, e o
   rótulo em negrito à frente é o que faz uma ficha parecer formulário. */
.sobre__ficha {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: clamp(20px, 2.4vw, 40px);
  row-gap: 10px;
  margin-top: clamp(24px, 2.6vw, 38px);
  line-height: 1.6;
}
.sobre__ficha > div {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: baseline;
}
.sobre__ficha dt { font-size: var(--tp); color: var(--prata-2); }
.sobre__ficha dd {
  max-width: 52ch;
  font-size: var(--tb);
  font-weight: 400;
  color: var(--prata);
  font-variant-numeric: tabular-nums;   /* o CRM e o RQE, como número de registro */
  text-wrap: balance;                   /* sem "Champagnat" sozinho na segunda linha */
}

/* O título sobe linha a linha, como o do hero. */
.js .sobre__titulo { opacity: 0; }
.sobre__titulo .line {
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
html.sem-animacao .sobre__titulo { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) {
  .sobre__titulo { opacity: 1 !important; }
}

/* Até 1100px a composição empilha: o retrato no alto sangrando dos dois lados,
   o título subindo sobre a base dele, os parágrafos e a legenda embaixo. */
@media (max-width: 1100px) {
  .sobre__texto { margin-left: 0; max-width: 100%; }
  .sobre__palco { padding-top: 0; }

  /* Altura explícita, não aspect-ratio + max-height: com os dois, o limite de
     altura era transferido para a largura pela proporção, e num tablet deitado
     a foto parava em metade da tela com uma borda seca. */
  .sobre__foto {
    position: relative;
    inset: auto;
    margin-inline: calc(50% - 50vw);
    height: min(125vw, 86svh);
  }

  .sobre__texto {
    margin-top: clamp(28px, 4vw, 48px);
    padding-bottom: clamp(44px, 8vw, 72px);
  }
  .sobre__titulo { max-width: 15ch; }
  .sobre__credenciais { margin-top: clamp(40px, 9vw, 64px); }
}

/* No celular a ficha fica de pé: rótulo em cima, dado embaixo. Deitada, a
   coluna dos rótulos comeria um terço dos 342px e os dados quebrariam em
   três linhas. */
@media (max-width: 560px) {
  .sobre__ficha { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
}

/* -----------------------------------------------------------------------------
   7. FRENTES — a régua das páginas internas
   O mosaico de fotos das três frentes que abria este bloco saiu com a
   Especialidade da home (13/09, home mais curta a pedido do cliente); o
   texto inteiro dela mora em ortopedia-cirurgia-do-joelho.html.
   -------------------------------------------------------------------------- */
/* Régua de três frentes: o formato de texto das páginas internas (Sobre mim,
   Especialidade). Não é fileira de três blocos: é uma régua, com o nome à
   esquerda e a leitura clínica à direita. (A "ordem de conduta" que vinha
   junto, .conduta, saiu na passada final: nenhuma página a usa mais.) */
.frentes { border-top: 1px solid var(--fio); }

.frentes__linha {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  gap: 10px clamp(20px, 4vw, 64px);
  padding: clamp(20px, 2.6vw, 34px) 0;
  border-bottom: 1px solid var(--fio);
  align-items: baseline;
}

.frentes__nome {
  font-family: var(--titling);
  font-weight: 400;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.55rem);
  line-height: 1.2;
  color: var(--prata);
}
.frentes__texto {
  font-size: var(--tb);
  line-height: 1.8;
  color: var(--prata-2);
  max-width: 60ch;
}

@media (max-width: 900px) {
  .frentes__linha { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   8. (vago) A régua de Diferenciais (.diferenciais__lista, .diferencial)
   saiu na QA final de 13/09: nenhuma página a usava — os motivos da
   Especialidade são .motivos, em pagina.css.
   -------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   9. COMO POSSO CUIDAR DO SEU JOELHO — a faixa de fotos das treze condições
   Uma fileira de fotografias que corre de lado, como uma prova de contato.
   Todos os quadros têm o mesmo tamanho — o mesmo retrato 4:5 e a mesma
   reserva de duas linhas para o nome —, a pedido do cliente (13/09); antes
   as larguras alternavam entre retrato e paisagem. O que impede a fileira de
   ler como cartões de modelo continua aqui: sem raio, sombra ou moldura, o
   nome em Marcellus embaixo da foto, fora dela. Começa na calha da esquerda
   e sangra pela direita da tela — o corte na borda é o que diz "tem mais".
   Anda também com clique e arrasto do mouse (home.js, bloco 10c). O único
   controle redondo de cada item é o que mexe no modelo 3D: a hierarquia de
   joelho.css (o que se lê é reto, o que se aperta é redondo) vale aqui.

   A LARGURA: a seção zera o padding lateral e cabeça, faixa e pé aplicam a
   calha cada um. Assim a faixa rola de borda a borda da tela com o primeiro e
   o último item parados exatamente na calha — o % da calha resolve contra a
   largura da seção, a mesma de todas as outras faixas. Um recuo negativo
   dentro do envelope resolveria o % contra a coluna, e acima de 1880px a
   faixa pararia antes da borda.
   -------------------------------------------------------------------------- */
.secao--cuidar {
  padding-inline: 0;
  padding-block: clamp(64px, 8vw, 128px) clamp(56px, 7vw, 108px);
}

.cuidar__cabeca {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-inline: var(--calha);
  margin-bottom: clamp(26px, 3vw, 44px);
}
.cuidar__cabeca .titulo { max-width: 18ch; }

.cuidar__setas { display: flex; gap: 10px; flex: none; }

/* O mesmo desenho dos controles da barra do explorador. É a seta de TODA
   tira de fotos do site: a home usa aqui e o trilho das internas
   (areas-de-atuacao-cirurgia-do-joelho.html, pagina.js) usa a mesma classe. */
.faixa__seta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--fio);
  border-radius: 999px;
  color: var(--prata);
  transition: color var(--rapido), border-color var(--rapido), opacity var(--rapido);
}
.faixa__seta svg,
.faixa__mapa svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.faixa__seta svg { width: 20px; height: 20px; }
.faixa__seta:hover:not(:disabled) { color: var(--ciano); border-color: var(--ciano); }
.faixa__seta:disabled { opacity: .3; cursor: default; }

/* A largura comum de todos os quadros; a altura da foto sai do retrato 4:5
   (a 1650px, 340 x 425, a mesma altura que a faixa tinha). O padding
   vertical deixa lugar para o contorno de foco, que o overflow cortaria
   rente à foto. */
.faixa {
  --faixa-largo: clamp(250px, 21vw, 340px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--calha);
  padding: 5px var(--calha) 6px;
  scrollbar-width: none;
}
.faixa::-webkit-scrollbar { display: none; }

.faixa__trilho {
  display: flex;
  gap: clamp(14px, 1.5vw, 24px);
  width: max-content;
}

/* Coluna que estica até o item mais alto: o botão desce para o pé e os
   treze ficam numa linha só, qualquer que seja o número de linhas do nome. */
.faixa__item {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: var(--faixa-largo);
  scroll-snap-align: start;
}

.faixa__link { display: block; align-self: stretch; }
.faixa__foto {
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fundo-3);
}
.faixa__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
  transition: transform 900ms var(--curva);
}
.faixa__link:hover .faixa__foto img { transform: scale(1.04); }

/* Recorte do joelho 3D no lugar da foto de banco: o render já nasce 4:5
   no fundo do site, então não leva .foto-tratada (o filtro cinza apagaria
   o ouro dos meniscos e o ciano da luz). Ensaiado em menisco e ligamentos. */
.faixa__foto--modelo { background: var(--fundo); }
.faixa__foto--modelo img { object-position: 50% 48%; }

/* Duas linhas reservadas (2 x 1.28em): nome de uma linha ou de duas, o
   botão "Ver no modelo" fica no mesmo lugar em todos os quadros. */
.faixa__nome {
  display: block;
  max-width: 24ch;
  min-height: 2.56em;
  margin: 16px 0 14px;
  font-family: var(--titling);
  font-size: clamp(1.04rem, .96rem + .3vw, 1.24rem);
  line-height: 1.28;
  color: var(--prata);
  text-wrap: balance;
  transition: color var(--rapido);
}
.faixa__link:hover .faixa__nome { color: var(--ciano); }
.faixa__link:focus-visible { outline: none; }
.faixa__link:focus-visible .faixa__foto { outline: 2px solid var(--ciano); outline-offset: 3px; }

/* "Ver no modelo": pequeno e secundário. A foto e o nome são o link
   principal; este é o atalho para o explorador. */
.faixa__mapa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  margin-top: auto;
  padding: 0 15px 0 11px;
  border: 1px solid var(--fio);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--prata-2);
  transition: color var(--rapido), border-color var(--rapido);
}
.faixa__mapa svg { width: 16px; height: 16px; flex: none; }
.faixa__mapa:hover { color: var(--ciano); border-color: var(--ciano); }

.cuidar__pe {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 48px);
  padding-inline: var(--calha);
  margin-top: clamp(28px, 3.2vw, 46px);
}
.cuidar__pe .cta { flex: none; }

/* A trilha: um fio medindo a faixa. O polegar tem a fração visível da
   faixa e anda com a rolagem (home.js, bloco 10b). */
.faixa__trilha {
  position: relative;
  flex: 1 1 auto;
  height: 1px;
  background: var(--fio);
  overflow: hidden;
}
.faixa__polegar {
  position: absolute;
  top: 0; left: 0;
  width: 30%;
  height: 1px;
  background: var(--prata);
  will-change: transform;
}

/* O arrasto com o mouse (home.js, bloco 10c) vale para as duas tiras do
   site: esta faixa e o trilho de Áreas de atuação (pagina.css, bloco 16). A mão
   aberta só aparece para quem tem mouse e onde há o que rolar
   (data-arrastavel); durante o gesto a mão fecha, o texto não se seleciona
   e o encaixe sai — com !important porque o .trilho de pagina.css, que
   carrega depois, redefine o scroll-snap-type. */
@media (hover: hover) and (pointer: fine) {
  [data-arrastavel],
  [data-arrastavel] .faixa__link,
  [data-arrastavel] .quadro__link { cursor: grab; }
}
[data-arrastavel] img { -webkit-user-drag: none; }
[data-arrastando] {
  scroll-snap-type: none !important;
  -webkit-user-select: none;
  user-select: none;
}
[data-arrastando],
[data-arrastando] * { cursor: grabbing !important; }

/* No celular os quadros ficam um pouco menores que a tela, para o seguinte
   aparecer na borda; as setas saem (o dedo rola). */
@media (max-width: 700px) {
  .faixa { --faixa-largo: min(70vw, 290px); }
  .cuidar__setas { display: none; }
  .cuidar__pe { flex-direction: column; align-items: stretch; gap: 24px; }
  .cuidar__pe .cta { justify-content: center; }
}

/* -----------------------------------------------------------------------------
   11. DÚVIDAS — acordeão por grid-template-rows
   -------------------------------------------------------------------------- */
.duvidas {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(26px, 5vw, 80px);
  align-items: start;
}
.duvidas__lado { position: sticky; top: calc(var(--cab-h) + 44px); }
.duvidas__lado .apoio { margin-top: clamp(14px, 1.8vw, 22px); max-width: 32ch; }

.duvidas__lista { border-top: 1px solid var(--fio); }
.duvida { border-bottom: 1px solid var(--fio); }
.duvida__titulo { font-weight: 400; font-size: inherit; }

.duvida__cabeca {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 40px);
  padding: clamp(17px, 2vw, 23px) 0;
  min-height: 56px;
  color: var(--prata);
  transition: color var(--rapido);
}
.duvida__cabeca:hover { color: var(--ciano); }

.duvida__pergunta {
  font-family: var(--titling);
  font-size: clamp(1.02rem, .96rem + .3vw, 1.22rem);
  line-height: 1.3;
  max-width: 46ch;
}

.duvida__sinal { position: relative; flex: none; width: 13px; height: 13px; margin-top: .34em; }
.duvida__sinal::before,
.duvida__sinal::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--rapido), opacity var(--rapido);
}
.duvida__sinal::before { left: 0; right: 0; top: 6px; height: 1px; }
.duvida__sinal::after  { top: 0; bottom: 0; left: 6px; width: 1px; }
.duvida[data-aberta="sim"] .duvida__sinal::after { transform: scaleY(0); opacity: 0; }

.duvida__corpo {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--medio);
}
.duvida[data-aberta="sim"] .duvida__corpo { grid-template-rows: 1fr; }
.duvida__corpo > div { overflow: hidden; min-height: 0; }
/* Sem JavaScript o botão não abre nada: as respostas nascem abertas e o
   sinal de mais sai. Antes elas ficavam recolhidas para sempre. */
html:not(.js) .duvida__corpo { grid-template-rows: 1fr; }
html:not(.js) .duvida__sinal { display: none; }
.duvida__corpo p {
  padding-bottom: clamp(20px, 2.4vw, 30px);
  max-width: 58ch;
  font-size: var(--tp);
  line-height: 1.8;
  color: var(--prata-2);
}

@media (max-width: 900px) {
  .duvidas { grid-template-columns: 1fr; gap: clamp(24px, 4vw, 40px); }
  .duvidas__lado { position: static; }
  .duvidas__lado .apoio { max-width: 46ch; }
}

/* -----------------------------------------------------------------------------
   12. UNIDADES — placa de duas colunas, sem cartão
   -------------------------------------------------------------------------- */
.unidades {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--fio);
}

.unidade {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(26px, 3.2vw, 46px) clamp(20px, 3vw, 48px) clamp(28px, 3.6vw, 52px) 0;
}
.unidade + .unidade {
  border-left: 1px solid var(--fio);
  padding-right: 0;
  padding-left: clamp(24px, 3.6vw, 58px);
}

/* Cada unidade abre com a foto da clínica (San Carlo em Balneário Camboriú,
   Reave em Itapema). É a mesma peça em TODAS as páginas (home, internas e
   as treze de serviço); antes havia duas receitas quase iguais,
   .unidade__vista aqui e .unidade__foto em pagina.css, com alturas diferentes.
   Ficou uma só, aqui.
   Altura fixa, não proporção: as duas colunas têm recuos diferentes (a
   segunda carrega o fio da esquerda) e, com aspect-ratio, as fotos saíam com
   6px de diferença — e os nomes das cidades desalinhados. */
.unidade__foto {
  align-self: stretch;
  height: clamp(190px, 23.5vw, 400px);
  margin: 0 0 clamp(22px, 2.6vw, 34px);
  overflow: hidden;
  background: var(--fundo-3);
}
.unidade__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco, 50% 50%);
}

.unidade__cidade { margin-bottom: 6px; }
.unidade__clinica {
  font-size: var(--te);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ciano);
  margin-bottom: clamp(16px, 2vw, 24px);
}
.unidade__endereco {
  font-size: var(--tb);
  line-height: 1.8;
  color: var(--prata-2);
}

.unidade__contato {
  margin: clamp(14px, 1.8vw, 22px) 0 clamp(22px, 3vw, 34px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--fio-2);
}
.unidade__contato > div { display: flex; gap: 18px; align-items: baseline; }
/* Rótulo de 10px: prata-2, não prata-3. O contrato só libera o prata-3 para
   texto de 24px ou mais (3,9:1); aqui, sobre o --fundo-2, ele dava ~3,3:1. */
.unidade__contato dt {
  flex: none;
  font-size: var(--te);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--prata-2);
}
.unidade__contato dd a {
  font-size: var(--tg);
  color: var(--prata);
  padding-block: 3px;
  min-height: 24px;
  display: inline-block;
  border-bottom: 1px solid var(--fio);
  transition: border-color var(--rapido), color var(--rapido);
}
.unidade__contato dd a:hover { color: var(--ciano); border-color: var(--ciano); }

.unidade .cta { margin-top: auto; }

@media (max-width: 900px) {
  .unidades { grid-template-columns: 1fr; }
  .unidade { padding-right: 0; }
  .unidade + .unidade {
    border-left: 0;
    border-top: 1px solid var(--fio);
    padding-left: 0;
  }
}

/* -----------------------------------------------------------------------------
   13. FECHO — a chamada final, sobre fotografia
   -------------------------------------------------------------------------- */
.fecho {
  position: relative;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: min(86vh, 760px);
  padding: clamp(70px, 9vw, 132px) var(--calha) clamp(32px, 4vw, 46px);
  background: var(--fundo);
  border-top: 1px solid var(--fio);
  overflow: hidden;
}

.fecho__foto { position: absolute; inset: 0; z-index: 0; }
/* O fecho é o mesmo em todas as páginas. Nas internas em que o retrato da
   mesa já apareceu acima, a foto troca e o enquadramento vem da própria
   página (--foco-fecho e --foco-fecho-movel no style da seção); sem eles,
   valem os da home. A corrida ao entardecer nasce dourada e verde; o
   grayscale do .foto-tratada (.42) não chega a puxá-la para o navy.
   Este filtro guarda o desenho e gira o que resta de cor para o matiz
   da marca (H 214). */
.fecho__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--foco-fecho, 64% 42%);
  filter: grayscale(.55) sepia(.14) hue-rotate(172deg) saturate(.52) contrast(1.12) brightness(.76);
}

/* O fecho é o único lugar do desktop em que texto corrido pousa na foto: ela
   sangra pelos quatro lados da faixa, então não há aresta lateral para ficar
   reta e o véu pode existir. Ele é uma coluna à esquerda, atrás do texto, e
   para em .74 — nunca na cor do fundo —, então a fotografia aparece inteira
   de borda a borda e o que se lê como degradê é sombra dentro da imagem, não
   a imagem se dissolvendo. No alto e no pé, nada: a faixa encosta seca na
   seção de cima e no rodapé. (17/09, borda reta.) */
.fecho__foto .scrim {
  background: linear-gradient(to right,
    rgba(16, 21, 28, .74) 0%,
    rgba(16, 21, 28, .58) 26%,
    rgba(16, 21, 28, .22) 46%,
    transparent 62%);
}

.fecho__corpo {
  position: relative; z-index: 2;
  align-self: center;
  max-width: min(46ch, 100%);
}
.fecho__corpo .t1 { max-width: 15ch; margin-bottom: 22px; }
/* Prata cheio, não os 62% do .apoio: aqui o parágrafo pousa na foto.
   Medido em captura real (texto escondido, fundo sob a caixa dele): a 62%
   dava 4,3:1 a 1650x940, abaixo dos 4,5:1 da WCAG para 14px — a mesma regra
   que o contrato já aplica ao descritor sobre foto. */
.fecho__corpo .apoio { margin-bottom: 32px; color: var(--prata); }

/* Como no hero (17/09, borda reta): a linha de baixo recua para a largura do
   corpo, que é justamente a coluna que o véu cobre. Assim o ciano do canto
   deixa de cair na parte clara da foto — medido 2,10:1 solto na faixa inteira,
   7,4:1 recuado — sem precisar de placa nem de mais véu. */
.fecho__base {
  position: relative; z-index: 3;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  max-width: min(46ch, 100%);
}

@media (max-width: 900px) {
  .fecho__foto img { object-position: var(--foco-fecho-movel, var(--foco-fecho, 62% 34%)); }
  /* Em pé o texto desce para o pé da faixa, então o véu vira o de baixo. Ele
     para em .88 no pé, e não em var(--fundo): a foto chega inteira à aresta
     de baixo, que encosta seca no rodapé. */
  .fecho__foto .scrim {
    background: linear-gradient(to top, rgba(16,21,28,.88) 0%, rgba(16,21,28,.8) 22%, rgba(25,31,40,.56) 58%, rgba(25,31,40,.3) 100%);
  }
  .fecho__corpo { align-self: end; }
}
@media (max-width: 620px) {
  .fecho__base { flex-direction: column; align-items: flex-start; gap: 9px; }
}

/* -----------------------------------------------------------------------------
   14. RODAPÉ
   -------------------------------------------------------------------------- */
.rodape {
  background: var(--fundo-3);
  border-top: 1px solid var(--fio);
  padding: clamp(52px, 6vw, 90px) var(--calha) clamp(26px, 3vw, 40px);
}

.rodape__grade {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 62px);
}

/* O logotipo do rodapé é lazy (fica no fim de toda página). A proporção vai
   explícita no CSS: com height:auto (bloco 1) a caixa dependia só da dica dos
   atributos, e o Chrome acusava "lazy image sem dimensões" em toda página. */
.rodape__marca img {
  width: clamp(170px, 15vw, 210px);
  aspect-ratio: 400 / 269;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.rodape__registro { font-size: var(--tp); line-height: 1.7; color: var(--prata-2); }
.rodape__email,
.rodape__social { margin-top: 12px; }
.rodape__email a,
.rodape__social a {
  font-size: var(--tp);
  color: var(--prata);
  padding-block: 4px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  border-bottom: 1px solid var(--fio);
  transition: border-color var(--rapido), color var(--rapido);
}
.rodape__social a::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.45' cy='6.55' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.2' y='3.2' width='17.6' height='17.6' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.45' cy='6.55' r='1' fill='black' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rodape__email a:hover,
.rodape__social a:hover { color: var(--ciano); border-color: var(--ciano); }
.rodape__horario {
  margin-top: 14px;
  font-size: var(--tp);
  line-height: 1.7;
  color: var(--prata-2);
}

/* Os textos pequenos do rodapé vão a prata-2: a prata-3 sobre o --fundo-3
   media 3,16:1 (Lighthouse, 12/09), e o contrato só a libera para 24px ou
   mais. Mesma correção que o .lado__cabeca das internas já tinha. */
.rodape__cabeca {
  font-family: var(--marca);
  font-size: var(--te);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--prata-2);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}

.rodape__nav { display: flex; flex-direction: column; align-items: flex-start; }
.rodape__nav a {
  font-size: var(--tp);
  color: var(--prata-2);
  padding-block: 6px;
  min-height: 24px;
  transition: color var(--rapido);
}
.rodape__nav a:hover { color: var(--ciano); }

.rodape__unidade address {
  font-size: var(--tp);
  line-height: 1.85;
  color: var(--prata-2);
}
.rodape__unidade address a {
  color: var(--prata);
  display: inline-block;
  padding-block: 4px;
  min-height: 24px;
}
.rodape__unidade address a:hover { color: var(--ciano); }

.rodape__zap {
  display: inline-block;
  margin-top: 14px;
  padding-block: 4px;
  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);
}
.rodape__zap:hover { color: var(--ciano); border-color: var(--ciano); }

.rodape__fio {
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid var(--fio-2);
  display: grid;
  gap: 12px;
}

.rodape__legal {
  display: flex;
  flex-wrap: wrap;
  /* O link leva 4px de respiro vertical (área de toque) e o © não: alinhados
     pelo topo, o Instagram descia meia linha. Pela linha de base, ficam na
     mesma altura. */
  align-items: baseline;
  gap: 8px 26px;
  font-size: var(--tp);
  color: var(--prata-2);
}
.rodape__legal a {
  padding-block: 4px;
  min-height: 24px;
  display: inline-block;
  transition: color var(--rapido);
}
.rodape__legal a:hover { color: var(--ciano); }

.rodape__aviso {
  font-size: 11px;
  line-height: 1.75;
  color: var(--prata-2);
  max-width: 92ch;
}

/* Crédito da agência: só a marca, no canto inferior direito, discreta até
   o cursor chegar. Ocupa a coluna da direita, na altura da linha do ©:
   rente ao fundo, o botão flutuante do WhatsApp a cobria. */
.rodape__fio { grid-template-columns: 1fr auto; column-gap: 32px; }
.rodape__fio > :not(.rodape__agencia) { grid-column: 1; }
.rodape__agencia {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: inline-flex;
  padding: 6px 0;
  opacity: .55;
  transition: opacity var(--rapido);
}
.rodape__agencia:hover,
.rodape__agencia:focus-visible { opacity: 1; }
.rodape__agencia img { display: block; width: auto; height: 20px; }

@media (max-width: 1000px) {
  .rodape__grade { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .rodape__grade { grid-template-columns: 1fr; gap: 34px; }
}

/* -----------------------------------------------------------------------------
   16. MOVIMENTO
   Só transform e opacity são animados. Os estados iniciais só existem quando o
   JavaScript está presente — sem ele a página nasce inteira e visível.
   -------------------------------------------------------------------------- */
.js [data-revelar] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  will-change: transform, opacity;
}
.js .hero__titulo { opacity: 0; }

.hero__titulo .line {
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

html.sem-animacao [data-revelar],
html.sem-animacao .hero__titulo {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

body[data-travado="sim"] { overflow: hidden; }
body[data-travado="sim"] .zap {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Botão fixo de WhatsApp: disco verde do aplicativo (15/09), para não
   desaparecer no navy. O painel sobe do botão com um véu atrás.
   Fora do fluxo, abaixo do menu móvel (z 79) e do cabeçalho (z 80). */
.zap {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition: opacity var(--rapido), visibility var(--rapido);
}
.zap__velo {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(14, 19, 25, .78);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rapido);
}
.zap[data-aberto="sim"] .zap__velo {
  opacity: 1;
  pointer-events: auto;
}
.zap__opcoes {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 1;
  width: min(304px, calc(100vw - 32px));
  background: #212934;
  border: 1px solid var(--fio);
  box-shadow: 0 22px 48px rgba(14, 19, 25, .62);
  transform-origin: calc(100% - 29px) 100%;
  transform: translate3d(0, 12px, 0) scale(.96);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rapido), transform var(--rapido);
}
.zap[data-aberto="sim"] .zap__opcoes {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.zap__topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 10px 14px 16px;
  background: var(--fundo);
  border-bottom: 1px solid var(--fio);
  color: var(--prata);
}
.zap__topo svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: #25D366;
}
.zap__topo strong {
  display: block;
  font-family: var(--titling);
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.zap__topo span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--prata-2);
}
.zap__topo p {
  flex: 1;
  min-width: 0;
  margin: 0;
}
.zap__fechar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 36px;
  height: 36px;
  color: var(--prata);
}
.zap__fechar svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}
.zap__lista { padding: 8px; }
.zap__unidade {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 10px;
  color: var(--prata);
  transition: background var(--rapido);
}
.zap__unidade + .zap__unidade {
  border-top: 1px solid var(--fio-2);
}
.zap__unidade:hover { background: var(--fundo); }
.zap__marca {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--fio);
  background: var(--fundo);
  color: #25D366;
}
.zap__marca svg,
.zap__botao svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.zap__texto {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}
.zap__texto strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--prata);
}
.zap__texto span {
  font-size: 12px;
  line-height: 1.4;
  color: var(--prata);
}
.zap__ir {
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--prata-2);
  border-top: 1.5px solid var(--prata-2);
  transform: rotate(45deg);
}
.zap__botao {
  position: relative;
  z-index: 1;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: #25D366;
  color: #fff;
  box-shadow: 0 8px 22px rgba(37, 211, 102, .42);
  transition: background var(--rapido), transform var(--rapido);
}
.zap__botao svg { width: 26px; height: 26px; fill: currentColor; }
.zap__botao:hover { background: #20bd5a; border-color: transparent; transform: scale(1.04); }
.zap[data-aberto="sim"] .zap__botao {
  background: #1da851;
  border-color: transparent;
}

/* Regras exigidas pelo Lenis. Não carregamos lenis.css (seria um pedido a mais
   para cinco declarações), então elas vivem aqui. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-revelar], .hero__titulo { opacity: 1 !important; transform: none !important; }
}