/* =============================================================================
   atuacao.css — Páginas de área de atuação (as 13 condições)
   Site Dr. Fernando Hehn · Ortopedia e Cirurgia do Joelho

   Carrega DEPOIS de marca.css (o contrato), home.css (base, cabeçalho,
   acordeão, unidades, fecho, rodapé) e pagina.css (abertura, migalhas,
   texto corrido e o .par, a foto que sangra).

   O FORMATO (13/09). O cliente vai precisar conseguir as fotos reais, e
   seis por página era demais: cada condição leva UMA foto própria, a da
   abertura. A página continua abrindo pela imagem e fica calma embaixo —
   o corpo é tipográfico, numa ESPINHA de duas colunas (título à esquerda,
   leitura à direita, a mesma grade das Perguntas frequentes), e só o
   diagnóstico, que fala na primeira pessoa, mostra uma foto do Dr. Hehn.

   Aqui mora só o que a página de condição tem e as outras não:
   1. o índice da página, na base da abertura;
   2. a espinha e o O que é;
   3. a lista de sinais e sintomas;
   4. o tratamento: dois passos em degrau;
   5. a lista de opções (linhas de régua, sem marcador);
   6. o percurso da recuperação;
   7. o mosaico das condições relacionadas;
   8. as perguntas com as respostas guardadas;
   9. o visor do joelho 3D em "Onde fica no joelho".

   Nenhuma cor, fonte ou medida nova: tudo sai dos tokens do contrato.
   Valem as proibições do contrato: 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 (fora os controles do modelo, redondos como na home),
   fileira de blocos idênticos, numeral 01/02/03 ou fio com marcadores a
   cada etapa (o "caminho de pontos" que o cliente recusou na home). O
   tratamento é sequência de verdade, mas ela se lê pela composição, e a
   ordem vai no HTML (<ol>).

   LARGURA: toda faixa usa a calha (.secao). Só a fotografia passa dela.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. ABERTURA — o índice da página na base
   É navegação, não enfeite: por isso fica na linha de base da abertura, onde
   a home põe os rótulos das pontas, e não gruda na tela.
   -------------------------------------------------------------------------- */
.abertura--servico {
  grid-template-rows: 1fr auto;
  align-content: stretch;
}
.abertura--servico .abertura__corpo { align-self: center; }

.indice {
  position: relative;
  z-index: 2;
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: 16px;
  border-top: 1px solid var(--fio);
}
.indice ul { display: flex; flex-wrap: wrap; gap: 2px clamp(18px, 2.4vw, 42px); }
/* Prata cheio: a metade direita do índice passa sobre a base da foto, e a
   regra do contrato para texto pequeno sobre fotografia é prata a 100%. */
.indice a {
  display: inline-block;
  padding-block: 8px;
  min-height: 24px;
  font-size: var(--tp);
  line-height: 1.4;
  color: var(--prata);
  transition: color var(--rapido);
}
.indice a:hover { color: var(--ciano); }

@media (max-width: 900px) {
  .abertura--servico { grid-template-rows: auto auto; align-content: end; }
  .indice { margin-top: clamp(30px, 8vw, 44px); }
  .indice ul { gap: 0 20px; }
}

/* -----------------------------------------------------------------------------
   2. A ESPINHA e O QUE É
   Duas colunas nas proporções das Perguntas frequentes (.duvidas, home.css):
   o título à esquerda, a leitura à direita, e a coluna de leitura começa no
   mesmo x em O que é, Sinais, Tratamento e Perguntas. É o que deixa a página
   calma sem foto: o olho aprende uma vez onde o texto está.
   -------------------------------------------------------------------------- */
.espinha {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(26px, 5vw, 80px);
  align-items: start;
}
.espinha__lado,
.espinha__texto { min-width: 0; }
.espinha__titulo { max-width: 12ch; }

/* O que é abre a página logo depois da foto: a definição é a primeira
   leitura, em Marcellus, grande; o resto da seção segue à vista. */
.definicao { padding-block: clamp(76px, 9vw, 150px) clamp(64px, 7.4vw, 120px); }
.definicao__abre,
.texto .definicao__abre {
  font-size: clamp(1.4rem, 1.06rem + 1.05vw, 2.1rem);
  line-height: 1.3;
  max-width: 32ch;
}
.definicao .texto { margin-top: clamp(24px, 2.8vw, 36px); }
.espinha__texto > .opcoes { margin-top: clamp(20px, 2.4vw, 30px); }

@media (max-width: 900px) {
  .espinha { grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 4vw, 34px); }
  .espinha__titulo { max-width: none; }
}

/* -----------------------------------------------------------------------------
   4. SINAIS E SINTOMAS — lista para bater o olho
   Cada sinal numa linha própria, em prata cheio e no corpo grande, com o
   quadrado da marca em ciano: é uma lista de conferir ("tenho isso?"), e o
   quadrado lê como caixa de marcar. É a única lista da página com
   marcador. A nota de alerta (quando procurar avaliação rápida) fica
   embaixo, também à vista.
   -------------------------------------------------------------------------- */
.sintomas {
  padding-block: clamp(70px, 8vw, 128px);
  background: var(--fundo-2);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}

.sintomas__intro {
  margin-top: clamp(16px, 1.8vw, 24px);
  font-size: var(--tg);
  line-height: 1.75;
  color: var(--prata-2);
  max-width: 44ch;
}
.sintomas__intro + .sintomas__intro { margin-top: 1em; }

/* O primeiro sinal começa na altura do título ao lado. */
.sintomas__lista {
  max-width: 64ch;
  margin-top: .4rem;
  border-top: 1px solid var(--fio);
}
.sintomas__lista li {
  position: relative;
  padding: 15px 0 16px 32px;
  border-bottom: 1px solid var(--fio-2);
  font-size: var(--tg);
  line-height: 1.6;
  color: var(--prata);
}
.sintomas__lista li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(15px + .8em);
  width: 8px; height: 8px;
  border: 1px solid var(--ciano);
  transform: translateY(-50%);
}

/* A nota costuma ser o sinal de alerta ("nesse caso, a avaliação deve ser
   rápida"): corpo grande, abaixo da lista em hierarquia só pela cor, com o
   traço ciano de 34px. */
.sintomas__nota {
  position: relative;
  margin-top: clamp(26px, 3vw, 38px);
  padding-top: 20px;
  font-size: var(--tg);
  line-height: 1.75;
  color: var(--prata-2);
  max-width: 62ch;
}
.sintomas__nota::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 1px;
  background: var(--ciano);
}
.sintomas__nota + .sintomas__nota { margin-top: 1em; padding-top: 0; }
.sintomas__nota + .sintomas__nota::before { display: none; }

/* -----------------------------------------------------------------------------
   5. TRATAMENTO — dois passos, em degrau
   É sequência de verdade: quase todo caso começa pelo conservador, e a
   cirurgia entra quando é indicada. A ordem se lê pela composição, sem
   numeral e sem fio com marcadores (o "caminho de pontos" foi recusado
   pelo cliente na home: "muita cara de IA"):
     · o conservador vem primeiro e maior — título grande na coluna da
       esquerda, a leitura na da direita, a espinha inteira;
     · um fio só, de calha a calha, separa os dois passos;
     · a cirurgia desce um degrau: título menor, empilhado sobre o texto,
       dentro da coluna de leitura. A esquerda fica vazia de propósito — é o
       degrau.
   No desktop o título do conservador gruda abaixo do cabeçalho enquanto o
   texto dele rola, como o lado das Perguntas.
   Nada de foto e nada de "ler mais": é a seção que o paciente veio ler para
   decidir. (O gerador só guarda num "Continuar lendo" o fim de um passo que
   passe de 90 palavras depois da lista; hoje nenhum passa.)
   -------------------------------------------------------------------------- */
.tratamento {
  padding-block: clamp(72px, 9vw, 140px) clamp(84px, 10vw, 164px);
  background: var(--fundo-2);
  border-top: 1px solid var(--fio);
  border-bottom: 1px solid var(--fio);
}
.tratamento__titulo { margin-bottom: clamp(36px, 4.6vw, 72px); }

.passos { list-style: none; margin: 0; padding: 0; }

.passo {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(14px, 1.6vw, 22px) clamp(26px, 5vw, 80px);
  align-items: start;
}
.passo__cabeca,
.passo__corpo { min-width: 0; }

/* O primeiro degrau: o título do conservador é o maior da seção depois do
   próprio "Tratamento". */
.passo--conservador .passo__titulo {
  font-size: clamp(1.45rem, 1.1rem + 1.35vw, 2.4rem);
  line-height: 1.12;
  max-width: 12ch;
}

/* O fio único e o degrau. */
.passo + .passo {
  margin-top: clamp(56px, 6.4vw, 104px);
  padding-top: clamp(40px, 4.6vw, 72px);
  border-top: 1px solid var(--fio);
}
.passo--cirurgia .passo__cabeca,
.passo--cirurgia .passo__corpo { grid-column: 2; }
.passo--cirurgia .passo__titulo {
  font-size: clamp(1.2rem, 1.05rem + .6vw, 1.7rem);
  line-height: 1.2;
  max-width: 24ch;
}

@media (min-width: 901px) and (min-height: 700px) {
  .passo--conservador .passo__cabeca { position: sticky; top: calc(var(--cab-h) + 44px); }
}

/* Uma medida só para frase, texto e lista do passo (40rem): em ch cada peça
   media a partir da própria fonte, e a lista parava 100px antes do
   parágrafo acima dela. No conservador a leitura desce um pouco, para a
   primeira linha cair na linha de base do título grande ao lado. */
.passo__corpo { max-width: 40rem; }
.passo--conservador .passo__corpo { padding-top: clamp(4px, .6vw, 10px); }
.passo__corpo > * + * { margin-top: 1.05em; }
.passo__corpo > *,
.passo__corpo > .opcoes { max-width: none; }

/* A primeira frase do passo é a resposta: "a cirurgia é indicada quando...".
   Prata cheio, um degrau acima do corpo; o resto do texto em prata-2. */
.passo__abre {
  font-size: clamp(1.06rem, .98rem + .36vw, 1.28rem);
  font-weight: 400;
  line-height: 1.6;
  color: var(--prata);
}
.passo__corpo > p:not(.passo__abre) {
  font-size: var(--tg);
  font-weight: 300;
  line-height: 1.8;
  color: var(--prata-2);
}
.passo__corpo > .opcoes { margin-top: clamp(20px, 2.4vw, 30px); }
.passo__corpo > .opcoes + p { margin-top: clamp(20px, 2.4vw, 30px); }

@media (max-width: 900px) {
  .passo { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .passo--cirurgia .passo__cabeca,
  .passo--cirurgia .passo__corpo { grid-column: 1; }
  .passo--conservador .passo__corpo { padding-top: 0; }
}

/* -----------------------------------------------------------------------------
   6. OPÇÕES — toda lista do corpo da página
   Linhas de régua em prata, sem marcador: o fio já separa um item do outro,
   e o quadradinho de 7px da versão anterior era o que o cliente não quis.
   Item que abre com um nome ("Osteotomia: corrige...") vira nome em cima e
   descrição embaixo, como um verbete. ".opcoes .opcao" e não ".opcao":
   dentro do "Continuar lendo" o ".texto li" de pagina.css pesa (0,1,1).
   -------------------------------------------------------------------------- */
.opcoes {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 64ch;
  border-top: 1px solid var(--fio);
}
.opcoes .opcao {
  max-width: none;
  padding: 14px 0 15px;
  border-bottom: 1px solid var(--fio-2);
  font-size: var(--tg);
  font-weight: 400;
  line-height: 1.65;
  color: var(--prata);
}
.opcoes .opcao__nome {
  display: block;
  margin-bottom: 3px;
  font-weight: 500;
  color: var(--prata);
}
.opcoes .opcao--nomeada .opcao__texto {
  font-weight: 300;
  color: var(--prata-2);
}
.texto .opcoes { margin-top: 1.3em; }
.texto .opcoes + * { margin-top: 1.3em; }

/* -----------------------------------------------------------------------------
   7. RECUPERAÇÃO — as etapas em colunas de régua
   Uma coluna por caminho de recuperação, cada uma com o próprio fio no
   alto. Até 13/09 era um fio contínuo com um marco quadrado por etapa e o
   último em ciano — o "caminho de pontos" que o cliente recusou na linha do
   tempo da home ("muita cara de IA"). As aberturas do texto ("Após a
   osteotomia,") continuam em prata e servem de título a cada etapa sem
   mudar uma palavra. (A marcação, gerada, ainda se chama .percurso.)
   -------------------------------------------------------------------------- */
.recuperacao { padding-block: clamp(70px, 8vw, 124px) clamp(76px, 9vw, 136px); }
.recuperacao__titulo { max-width: 20ch; }
.recuperacao__intro {
  margin-top: clamp(16px, 1.8vw, 24px);
  font-size: var(--tg);
  line-height: 1.75;
  color: var(--prata-2);
  max-width: 60ch;
}

.percurso {
  --etapas: 3;
  display: grid;
  grid-template-columns: repeat(var(--etapas), minmax(0, 1fr));
  gap: 0 clamp(22px, 3vw, 56px);
  margin-top: clamp(36px, 4.4vw, 64px);
}
.percurso__etapa {
  padding-top: clamp(16px, 1.6vw, 22px);
  border-top: 1px solid var(--fio);
}

.percurso__etapa p {
  font-size: var(--tb);
  line-height: 1.85;
  color: var(--prata-2);
  max-width: 46ch;
}
.percurso__etapa strong { font-weight: 500; color: var(--prata); }

/* Empilhadas abaixo de 1100px, na medida do texto. */
@media (max-width: 1100px) {
  .percurso { grid-template-columns: minmax(0, 1fr); max-width: 64ch; }
  .percurso__etapa { padding-block: 16px 20px; }
  .percurso__etapa:last-child { border-bottom: 1px solid var(--fio); }
  .percurso__etapa p { max-width: none; }
}

/* -----------------------------------------------------------------------------
   8. CONDIÇÕES RELACIONADAS — a mesma tira da home
   Três quadros iguais, na faixa de fotos que já anda com seta, dedo e
   arrasto (home.js). A seção abre a calha para a tira sangrar; o título e
   as setas reusam .cuidar__cabeca. Os cartões são um pouco mais largos que
   os treze da home, para caberem dois e um pedaço do terceiro.
   -------------------------------------------------------------------------- */
.secao--vizinhas {
  padding-inline: 0;
}
.secao--vizinhas .cuidar__cabeca .titulo { max-width: 22ch; }
.secao--vizinhas .faixa { --faixa-largo: clamp(260px, 38vw, 480px); }
.secao--vizinhas .cuidar__pe { margin-top: clamp(22px, 2.6vw, 36px); }

@media (max-width: 700px) {
  .secao--vizinhas .faixa { --faixa-largo: min(70vw, 290px); }
}

/* -----------------------------------------------------------------------------
   9. PERGUNTAS — o acordeão da home, com as respostas guardadas
   atuacao.js marca as respostas fechadas com hidden="until-found": fechadas,
   elas saem da ordem do Tab (nenhum link invisível recebe foco) e o Ctrl+F
   ainda as encontra e abre. home.css esconde todo [hidden] com !important;
   aqui a resposta volta a ter caixa, e quem a esconde é o próprio
   navegador. Só vale onde o navegador entende until-found (a classe vem de
   atuacao.js); nos outros, hidden continua sendo display: none.
   -------------------------------------------------------------------------- */
.ate-achar .duvida__corpo > [hidden="until-found"] { display: block !important; }

/* -----------------------------------------------------------------------------
   10. ONDE FICA NO JOELHO — o visor 3D (assets/js/joelho/visor.js)
   O texto da estrutura à esquerda, o joelho à direita, na vista dela. O
   palco tem a proporção do render estático (4:5) e o fundo da faixa: o
   canvas é calibrado para sair exatamente em #191F28, então não há moldura
   nenhuma — o joelho flutua na página. Ele cabe numa tela com a legenda:
   a altura segue 72svh até 720px, e a largura sai da altura.
   Controles do modelo são redondos, como a barra do explorador da home; o
   que é conteúdo continua reto.
   -------------------------------------------------------------------------- */
.lugar .espinha { align-items: center; }
.lugar__texto .t2 { max-width: 14ch; margin-bottom: clamp(20px, 2.4vw, 32px); }
.lugar__estrutura + .lugar__estrutura { margin-top: clamp(22px, 2.6vw, 32px); }
.lugar__cabeca { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 10px; }
.lugar__nome { font-family: var(--titling); font-size: var(--d3); line-height: 1.2; color: var(--prata); }
/* A sigla vem depois do nome, como subtítulo em caixa normal — a mesma
   dupla da ficha do explorador da home. */
.lugar__sigla { font-size: 13px; font-weight: 500; color: var(--ciano); }
.lugar__texto .acoes { margin-top: clamp(28px, 3.2vw, 40px); }

.visor {
  justify-self: center;
  width: min(100%, calc(min(72svh, 45rem) * .8));
  margin: 0;
}

.visor__palco {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--fundo);
  touch-action: pan-y;
}
.visor[data-modo="3d"] .visor__palco { cursor: grab; }
.visor[data-arrastando="sim"] .visor__palco { cursor: grabbing; }

/* A máscara dissolve as diáfises: o arquivo corta fêmur e tíbia em linha
   reta, e é melhor o osso sumir no escuro do que mostrar a tampa. Nas
   laterais ela também esfuma: o palco não tem moldura, e no balanço a
   fíbula passava da borda e desenhava um corte vertical seco (medido a
   1650px, na vista da patela). A mesma máscara no canvas e na imagem, que
   é o mesmo quadro. */
.visor__palco canvas,
.visor__estatico {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-composite: intersect;
}
.visor__estatico { object-fit: cover; }
/* Só enquanto faltar o render da vista: o joelho inteiro, de pé, cabe. */
.visor__estatico[data-visor-reserva] { object-fit: contain; }

/* O canvas acende por cima da imagem estática da mesma vista. Ele entra
   como primeiro filho do palco (palco.js): sem o z-index, a imagem, que vem
   depois no HTML, ficava pintada em cima dele. A máscara das bordas deixa
   o canvas transparente nas laterais: se a still ficar atrás depois do 3D
   acender, ela aparece como um segundo joelho que não gira. Some depois
   do fade do canvas (a mesma espera do explorador da home). */
.visor__estatico { z-index: 0; }
.visor__palco canvas { z-index: 1; opacity: 0; transition: opacity 1.2s var(--curva); }
.visor[data-modo="3d"] .visor__palco canvas { opacity: 1; }
.visor[data-modo="3d"] .visor__estatico {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s linear .75s, visibility 0s linear 1.2s;
}

.visor__barra {
  position: absolute;
  left: 50%;
  bottom: clamp(10px, 1.6vw, 18px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100% - 20px);
  padding: 4px;
  background: rgba(14, 19, 25, .74);
  border: 1px solid var(--fio);
  border-radius: 999px;
  transform: translateX(-50%);
}
@supports (backdrop-filter: blur(1px)) {
  .visor__barra { background: rgba(14, 19, 25, .56); backdrop-filter: blur(14px) saturate(140%); }
}

.visor__botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--marca);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--prata-2);
  cursor: pointer;
  transition: color var(--rapido), background var(--rapido);
}
.visor__botao svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.visor__botao--dobrar { padding: 0 16px 0 11px; }
.visor__botao:hover { color: var(--prata); background: rgba(216, 223, 230, .08); }
.visor__botao[aria-pressed="true"] { color: var(--ciano); background: rgba(21, 184, 236, .12); }
.visor__botao:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }

/* Dedo, não cursor: alvos de 44px. */
@media (pointer: coarse) {
  .visor__botao { height: 44px; }
}

.visor__legenda {
  margin-top: 10px;
  text-align: center;
  font-size: var(--tp);
  line-height: 1.5;
  color: var(--prata-2);
  text-wrap: balance;
}
/* "Arraste para girar" só quando há o que girar. */
.visor__gesto { display: none; }
.visor[data-modo="3d"] .visor__gesto { display: inline; }

@media (max-width: 900px) {
  .lugar .espinha { align-items: start; }
  .visor { justify-self: stretch; width: 100%; max-width: calc(min(72svh, 45rem) * .8); margin-inline: auto; }
  /* Empilhado, o joelho vem logo depois do texto da estrutura e o convite
     para o explorador fica por último: antes o botão aparecia entre o
     texto e o modelo, e chamava para fora antes de o modelo aparecer. */
  .lugar__texto { display: contents; }
  .lugar .espinha { gap: 18px; }
  .lugar__texto .t2 { margin-bottom: 0; }
  .lugar__estrutura + .lugar__estrutura { margin-top: 6px; }
  .lugar__texto > .acoes { order: 3; margin-top: 6px; }
  .lugar .visor { order: 2; margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .visor__palco canvas { transition: none; }
  .visor[data-modo="3d"] .visor__estatico { transition: none; }
}