/* ═══════════════════════════════════════════════════════════════════════
   Dr. Lucas Chaves — Neurocirurgião e Cirurgião da Coluna Vertebral
   Sistema visual derivado do Manual de Identidade Visual (Núcleo MD, 2026).

   O manual é a autoridade. Nada aqui é preferência: paleta, tipografia,
   logo e pattern vieram fechados de fora, e a regra de dominância deles
   ("o marinho domina; o dourado aparece apenas em detalhes pontuais e
   nunca preenche grandes áreas") é o que governa cada decisão de cor.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* ---- paleta do manual, sem invenção ---- */
  /* ⚠️ A escala DESCEU um degrau em 28/08/2026, a pedido do Dr. Lucas: ele
     pediu o marinho escuro #0B2A5C como cor institucional. O #0B2A5C já era
     aqui o `--marinho-escuro` — trocar só a base achatava os dois num tom só
     e matava a profundidade (título, sombra e o jogo de luz do fundo da
     abertura passavam a ser a cor do próprio fundo). Por isso os TRÊS
     desceram junto, e o #103B7F antigo virou o realce claro. */
  --marinho:        #0B2A5C;   /* cor base — 60 a 70% do uso */
  --marinho-escuro: #071C3E;   /* profundidade e títulos */
  --marinho-claro:  #103B7F;   /* só no jogo de luz do fundo, nunca em superfície chapada */
  --grafite:        #3A424E;   /* apoio principal, textos */
  --dourado:        #9C7A3C;   /* detalhe fino e ocasional */
  /* Clareado do dourado, e existe por uma razão só: TEXTO dourado sobre
     marinho. O #9C7A3C do manual é cor de fio de 1px — como texto sobre o
     marinho ele dá 2,69 de contraste, metade do mínimo da WCAG. Este tom dá
     4,55. Não é cor nova de marca: é o mesmo dourado com luz suficiente para
     ser lido. Só aparece em etiqueta pequena sobre fundo escuro. */
  --dourado-claro:  #C9A35E;
  /* E o simétrico dele, pela mesma razão e no sentido oposto: TEXTO dourado
     sobre CLARO. O #9C7A3C do manual dá 3,99 sobre branco e 3,69 sobre o
     cinza-claro — abaixo do mínimo nos dois. Este tom dá 4,96 e 4,59.
     Também só aparece em etiqueta pequena; o fio de 1px continua no dourado
     do manual, onde contraste de texto não se aplica. */
  --dourado-escuro: #8A6B33;
  --cinza-claro:    #F5F6F8;   /* fundo e respiro */
  --branco:         #FFFFFF;

  /* Derivadas. Sobre fundo marinho o texto secundário é um tom da própria
     cor puxado para o branco — cinza sobre colorido suja e perde contraste. */
  --sobre-marinho:      #FFFFFF;
  --sobre-marinho-2:    #C3D0E8;
  --linha-sobre-marinho: rgba(255,255,255,.16);
  --linha:              #DFE3EA;
  --linha-forte:        #C6CDD8;

  /* ---- tipografia ----
     Caladea e Carlito são metric-compatible com Cambria e Calibri, que é o
     que o manual pede. Mesmas métricas, licença aberta, servidas pelo Google
     Fonts — não é "a fonte parecida que dava", é a equivalente exata. */
  --serif: 'Caladea', Cambria, Georgia, 'Times New Roman', serif;
  --sans:  'Carlito', Calibri, system-ui, -apple-system, sans-serif;

  /* Sete degraus, e cada um com distância que se enxerga.
     ⚠️ A versão anterior tinha corpo 1.0625, lead 1.1875 e h3 1.1875 — ou
     seja, o h3 e o parágrafo de entrada eram do MESMO tamanho, e o h3 ficava
     12% acima do corpo. Era a razão de não se distinguir título de texto.
     O h3 agora tem degrau próprio, e é a mudança que mais muda a leitura. */
  --t-xs:   0.8125rem;   /* etiqueta, legenda, registro */
  --t-sm:   0.9375rem;   /* texto de apoio */
  --t-base: 1.0625rem;   /* corpo */
  --t-lg:   1.1875rem;   /* entrada de seção */
  --t-xl:   1.3125rem;   /* h3 */
  --t-2xl:  clamp(1.55rem, 1.15rem + 1.7vw, 2.15rem);   /* h2 */
  --t-3xl:  clamp(2.05rem, 1.3rem + 3.1vw, 3.3rem);     /* h1 */

  /* ---- espaço ---- */
  --s-1: .5rem;  --s-2: .875rem; --s-3: 1.25rem; --s-4: 1.75rem;
  --s-5: 2.5rem; --s-6: 3.5rem;  --s-7: 5rem;    --s-8: 7rem;

  --raio: 14px;
  --raio-p: 8px;
  --maxw: 1160px;
  --medida: 68ch;               /* medida de leitura */
  --topo-h: 108px;              /* altura da barra fixa — usada nas âncoras.
                                   ⚠️ Medida, não escolhida: 208px de logo a
                                   2,28 de proporção = 91px, mais 2×8px de
                                   padding. Mexeu na largura da marca? Meça de
                                   novo — as âncoras todas dependem daqui. */

  --transicao: 160ms cubic-bezier(.2,.7,.3,1);
}

/* ─────────────────────── base ─────────────────────── */

*, *::before, *::after{ box-sizing: border-box; }

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--topo-h) + 12px);   /* o header fixo não pode cobrir a âncora */
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--branco);
  color: var(--grafite);
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* As superfícies que o navegador desenha por padrão também são da marca.
   Seleção, cursor de texto, anel de foco, barra de rolagem e sublinhado
   saem de fábrica pertencendo a design system nenhum. */
::selection{ background: var(--marinho); color: #fff; }
:root{ caret-color: var(--marinho); accent-color: var(--marinho); }
@supports (scrollbar-color: red blue){
  html{ scrollbar-color: var(--linha-forte) transparent; scrollbar-width: thin; }
}
:focus-visible{
  outline: 2px solid var(--dourado);
  outline-offset: 3px;
  border-radius: 3px;
}
.sobre-escuro :focus-visible{ outline-color: #E4C583; }

h1, h2, h3{
  font-family: var(--serif);
  color: var(--marinho-escuro);
  line-height: 1.18;
  letter-spacing: -.018em;
  text-wrap: balance;
  margin: 0 0 var(--s-3);
  font-weight: 700;
}
h1{ font-size: var(--t-3xl); }
h2{ font-size: var(--t-2xl); }
/* O h3 ganhou degrau próprio e respiro próprio. O respiro é metade do
   trabalho: tamanho sozinho não separa título de corpo — espaço acima sim. */
h3{ font-size: var(--t-xl); letter-spacing: -.014em; line-height: 1.24; }

p{ margin: 0 0 var(--s-3); max-width: var(--medida); text-wrap: pretty; }
p:last-child{ margin-bottom: 0; }

a{ color: var(--marinho); text-underline-offset: .18em; text-decoration-thickness: 1px; }
img, svg, iframe{ display: block; max-width: 100%; }
img{ height: auto; }
strong{ color: var(--marinho-escuro); font-weight: 700; }

/* ─────────────────────── estrutura ─────────────────────── */

.env{ width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-3); }

/* O ritmo vertical varia de propósito: antes toda seção tinha o mesmo
   padding de 88px e a página não respirava diferente em lugar nenhum. */
.faixa{ padding-block: var(--s-7); }
.faixa--ampla{ padding-block: var(--s-8); }
.faixa--curta{ padding-block: var(--s-6); }
.faixa--clara{ background: var(--cinza-claro); }

.sobre-escuro{ background: var(--marinho); color: var(--sobre-marinho-2); }
.sobre-escuro h1, .sobre-escuro h2, .sobre-escuro h3, .sobre-escuro strong{ color: #fff; }
.sobre-escuro a{ color: #fff; }

/* ─────────────────────── textura da marca ───────────────────────
   ⚠️ Aqui morava um defeito que passou batido a sessão inteira: o pattern
   entrava por `background-image`, e SVG carregado assim NÃO herda a cor de
   quem o usa. O `fill="currentColor"` do arquivo resolvia contra o próprio
   documento SVG, cujo padrão é preto — então sobre o marinho a textura era
   uma sombra PRETA a 3%. Medido: fundo rgb(16,59,127), pattern rgb(16,57,123).
   Quatro níveis de diferença, invisível, e suja em vez de luminosa.

   Como MÁSCARA, quem pinta é o `background-color` do elemento, e aí
   `currentColor` é de verdade a cor da seção.

   A segunda máscara (`--textura-zona`) resolve a outra metade do problema: o
   tile é `repeat`, então os glifos caíam onde caíam — inclusive atrás do H1.
   Compondo as duas por `intersect`, a textura só sobrevive onde a zona deixa,
   e a zona é desenhada para **abrir um buraco exatamente sob o texto**. Assim
   o pattern vive nas bordas e nos cantos, que é onde o manual quer: textura de
   fundo, nunca em primeiro plano, nunca sob texto de leitura.

   Onde `mask-composite` faltar, sobra a máscara simples — mais fraca do que
   antes e ainda correta, só sem a zona limpa. Nada quebra.

   ⚠️ A força e a escala são VARIÁVEIS de propósito, e os stops das zonas
   também: é o que o painel de ajustes (`?ajustes` na URL) precisa para mexer
   nelas ao vivo. Mudar um número aqui para valor fixo cega o painel. */
.textura{ position: relative; isolation: isolate; }
.textura::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-color: currentColor;
  -webkit-mask-image: url("img/pattern.svg"), var(--textura-zona, linear-gradient(#000,#000));
  mask-image: url("img/pattern.svg"), var(--textura-zona, linear-gradient(#000,#000));
  -webkit-mask-repeat: repeat, no-repeat;
  mask-repeat: repeat, no-repeat;
  -webkit-mask-size: var(--textura-escala, 560px), 100% 100%;
  mask-size: var(--textura-escala, 560px), 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: var(--textura-forca, .12);
  pointer-events: none;
}

.cabeca{ max-width: 46rem; margin-bottom: var(--s-5); }
.cabeca p{ font-size: var(--t-lg); color: var(--grafite); }
.sobre-escuro .cabeca p{ color: var(--sobre-marinho-2); }
.cabeca--meio{ margin-inline: auto; text-align: center; }
.cabeca--meio p{ margin-inline: auto; }

/* Fio dourado: o detalhe pontual que o manual autoriza. Nunca em área. */
.fio{
  width: 44px; height: 2px; border: 0;
  background: var(--dourado);
  margin: 0 0 var(--s-3);
}
.cabeca--meio .fio{ margin-inline: auto; }

/* Régua fina de divisão dentro de bloco */
.regua{
  border: 0; height: 1px; background: var(--linha);
  margin: var(--s-4) 0;
}
.sobre-escuro .regua{ background: var(--linha-sobre-marinho); }

/* Atalho de teclado: primeiro item do foco, invisível até ser focado. */
.pular{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--marinho); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 var(--raio-p) 0;
  font-weight: 700; text-decoration: none;
}
.pular:focus{ left: 0; }

/* ─────────────────────── cabeçalho ───────────────────────
   Antes: `flex` com `margin-left:auto` no nav, o que jogava TODA a sobra
   (317px medidos) entre a logo e o menu, e deixava 20px entre o último item
   e o botão. Grid de três colunas resolve a raiz: a logo ancora à esquerda,
   o botão à direita, e o nav fica centrado no que sobra entre os dois. */

.topo{
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.topo[data-rolou]{
  border-bottom-color: var(--linha);
  box-shadow: 0 6px 20px -14px rgba(11,42,92,.5);
}
.topo__linha{
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: var(--s-4);
  padding: .5rem var(--s-3);
}
.marca{ display: block; }
/* 208px de largura → ~91px de altura (era 82px com a assinatura curta, que
   saiu em 28/08). Em 160px a marca ficava pequena demais para o peso que tem
   na página; o manual só proíbe abaixo de 140px. */
.marca img{ width: 208px; }

/* `end`, não `center`. Centrado, o nav dividia a sobra em dois e sobrava um
   vão entre o último item e o botão. Encostado, menu e botão leem como um
   grupo só — separados pelo fio — e a sobra inteira vai para o lado da logo,
   onde ela é respiro e não buraco. */
.menu{ justify-self: end; }
.menu ul{ display: flex; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.menu a{
  display: block; padding: .3rem 0;
  font-size: var(--t-sm); font-weight: 700; color: var(--grafite);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--transicao), border-color var(--transicao);
}
.menu a:hover{ color: var(--marinho); border-bottom-color: var(--dourado); }
.menu a[aria-current="page"]{ color: var(--marinho); border-bottom-color: var(--marinho); }

/* O fio vertical dá ao botão um limite próprio: sem ele, "Blog" e "Agendar"
   encostavam e o botão lia como mais um item do menu. */
.topo__acao{ display: flex; align-items: center; gap: var(--s-3); justify-self: end; }
.topo__acao::before{
  content: ""; width: 1px; height: 26px; background: var(--linha);
}

.hamburguer{
  display: none;
  width: 46px; height: 46px; padding: 11px;
  background: none; border: 1px solid var(--linha); border-radius: var(--raio-p);
  cursor: pointer; color: var(--marinho-escuro);
  justify-self: end; grid-column: 3;
}
.hamburguer svg{ width: 22px; height: 22px; }

/* ─────────────────────── botões ─────────────────────── */

.bt{
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px;                       /* alvo de toque */
  padding: .8rem 1.6rem;
  font-family: var(--sans); font-size: var(--t-base); font-weight: 700;
  border-radius: var(--raio-p); border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: background var(--transicao), border-color var(--transicao),
              color var(--transicao), translate var(--transicao),
              box-shadow var(--transicao);
}
.bt svg{ width: 20px; height: 20px; flex: none; transition: translate var(--transicao); }
.bt:hover{ translate: 0 -1px; }
.bt:active{ translate: 0 0; }

/* Primário em marinho, não em verde de WhatsApp. O ícone identifica o canal;
   a cor pertence à marca. Verde ao lado de marinho e dourado é o "cheiro de
   template" que o manual manda evitar. */
.bt--forte{ background: var(--marinho); color: #fff; }
.bt--forte:hover{ background: var(--marinho-escuro); box-shadow: 0 10px 22px -14px rgba(11,42,92,.85); }
.bt--forte:active{ background: #082147; box-shadow: none; }

.sobre-escuro .bt--forte{ background: #fff; color: var(--marinho-escuro); }
.sobre-escuro .bt--forte:hover{ background: #E8EDF7; box-shadow: 0 10px 24px -14px rgba(0,0,0,.6); }

.bt--fino{ background: transparent; color: var(--marinho); border-color: var(--linha-forte); }
.bt--fino:hover{ border-color: var(--marinho); background: var(--cinza-claro); }
.sobre-escuro .bt--fino{ color: #fff; border-color: rgba(255,255,255,.4); }
.sobre-escuro .bt--fino:hover{ background: rgba(255,255,255,.1); border-color: #fff; }

.bt--topo{ min-height: 42px; padding: .5rem 1.1rem; font-size: var(--t-sm); }
.bt--topo svg{ width: 17px; height: 17px; }

/* Link de texto com seta — usado no fecho de seção */
.adiante{
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding-block: .5rem;    /* alvo de toque */
  font-weight: 700; font-size: var(--t-sm); text-decoration: none;
  color: var(--marinho);
}
.adiante svg{ width: 18px; height: 18px; transition: translate var(--transicao); }
.adiante:hover{ text-decoration: underline; }
.adiante:hover svg{ translate: 4px 0; }

/* ─────────────────────── abertura ─────────────────────── */

/* O "jogo de luz": duas manchas radiais por baixo da textura, claro no alto à
   esquerda e fundo na base à direita. É gradiente de PROFUNDIDADE, não de cor
   nova — os dois tons já são da paleta. Entra como `background-image` depois
   do atalho `background` de `.sobre-escuro`, senão seria apagado por ele. */
.abertura{
  padding-block: var(--s-7);
  overflow: hidden;
  /* A zona limpa é um buraco centrado no bloco de texto: nada de pattern sob
     o H1 e a chamada, que é onde ele mais atrapalhava.

     Os números (26% → 42%) foram escolhidos pelo Vinicius no painel de
     ajustes em 09/08. A transição ficou curta de propósito: o buraco cobre o
     texto e a textura volta logo em seguida, em vez de esmaecer devagar por
     metade da tela. Era esse esmaecimento longo que fazia o pattern parecer
     apagado mesmo com a força alta. */
  --textura-zona: radial-gradient(125% 100% at 26% 46%,
                    transparent 0 var(--zona-abertura-de, 26%),
                    #000 var(--zona-abertura-ate, 42%));
  /* Igual ao resto da página desde 09/08. A abertura já foi um degrau abaixo,
     por ser a única seção com texto branco sobre marinho; com a zona limpa
     mais fechada, o degrau deixou de ser necessário. */
  --textura-forca: .12;
  background-image:
    radial-gradient(115% 85% at 12% -10%, var(--marinho-claro) 0%, transparent 58%),
    radial-gradient(95% 80% at 105% 110%, var(--marinho-escuro) 0%, transparent 62%);
}
.abertura__grade{
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s-3);
  display: grid; grid-template-columns: 1.05fr .85fr; gap: var(--s-6);
  align-items: center;
}
.abertura h1{ margin-bottom: var(--s-3); }
.abertura .chamada{
  font-size: var(--t-lg); color: var(--sobre-marinho-2);
  max-width: 34rem; margin-bottom: var(--s-4);
}
.abertura__acoes{ display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* Identificação exigida pelo art. 4º da Resolução CFM 2.336/2023, e o art. 6º
   manda que esteja na página principal. Fica na primeira tela, não escondida
   no rodapé — e a palavra MÉDICO é obrigatória, não decorativa.
   `max-width` em ch para a linha não quebrar deixando "— NEUROCIRURGIA" órfão. */
.registro{
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--linha-sobre-marinho);
  font-size: var(--t-xs); letter-spacing: .04em; text-transform: uppercase;
  color: var(--sobre-marinho-2);
  max-width: none;
}
/* Cada trecho é indivisível: sem isto a linha quebrava em "CRM-" / "CE 13912",
   e um registro profissional partido ao meio não cumpre o art. 4º com a
   clareza que ele pede. */
.registro span{ white-space: nowrap; }

/* Moldura fechada nas quatro pontas — igual à de todas as outras fotos da
   página. Antes ela sangrava até o fim da seção com corte reto, e era a
   única assim: lia como erro de recorte, não como decisão. */
.abertura__foto{ position: relative; }
.abertura__foto img{
  width: 100%; border-radius: var(--raio);
  aspect-ratio: 4/5; object-fit: cover; object-position: 50% 22%;
  outline: 1px solid rgba(255,255,255,.16); outline-offset: -1px;
}

/* ─────────────────────── o neurocirurgião ───────────────────────
   A formação é um documento, não um card: lista com fio, ritmo de
   ficha. É a seção que responde "quem é esse médico" — e o que
   convence ali é a densidade verificável, não o enfeite.

   A coluna da foto sobrava 162px de branco embaixo (medido: foto 532px,
   texto 694px). O "Atuação" desceu para cá, o que fecha a conta quase
   exata e tira o bloco de ficar pendurado no fim da coluna de texto. */
/* A foto vem depois no HTML (ver o comentário no index) e é colocada à
   esquerda aqui. Ordem de documento e ordem visual divergem de propósito. */
.sobre-grade{ display: grid; grid-template-columns: .78fr 1.22fr; gap: var(--s-6); align-items: stretch; }
.sobre-lado{ grid-column: 1; grid-row: 1; }
.sobre-texto{ grid-column: 2; grid-row: 1; }
/* A foto ocupa o que sobrar da altura da coluna, e o "Atuação" fecha embaixo.
   Assim as duas colunas terminam juntas sozinhas, em qualquer largura — não
   é um `aspect-ratio` calibrado a olho que quebra no primeiro breakpoint.
   O `min-height` é o piso: abaixo dele o retrato deixa de ser retrato. */
/* `minmax(0, 1fr)` e não `1fr`: com `1fr` a trilha herda como mínimo o
   min-content do item, que aqui é a altura natural da foto (519px). A coluna
   então empurrava a linha inteira e a sobra de branco só trocava de lado.
   Com o mínimo em zero, quem manda na altura é a coluna de texto, e a foto
   preenche o que restar. O `min-height` do bloco é o piso do retrato. */
.sobre-lado{ display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: var(--s-3); min-height: 520px; }
.sobre-foto{
  overflow: hidden; border-radius: var(--raio);
  min-height: 0;
}
.sobre-foto img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 25%;
}
.atuacao-bloco{
  background: var(--marinho); color: var(--sobre-marinho-2);
  border-radius: var(--raio); padding: var(--s-3) var(--s-4) var(--s-4);
}
.atuacao-bloco h3{ color: #fff; font-size: var(--t-lg); margin-bottom: var(--s-2); }
.atuacao-bloco p{ font-size: var(--t-sm); margin: 0; }

.credenciais{ list-style: none; margin: 0; padding: 0; max-width: var(--medida); }
.credenciais li{
  padding: .55rem 0 .55rem 1.5rem; position: relative;
  border-bottom: 1px solid var(--linha);
  font-size: var(--t-sm); color: var(--marinho-escuro); font-weight: 700;
}
.credenciais li:last-child{ border-bottom: 0; }
/* A mesma lista, mas dentro do bloco marinho da coluna da foto. Herdar o
   `--linha` claro ali dava um fio quase invisível sobre o azul, e o
   `--marinho-escuro` do texto sumia no fundo. Só a cor muda; a forma é a
   mesma de propósito — é a mesma espécie de informação. */
.atuacao-bloco .credenciais li{
  border-bottom-color: var(--linha-sobre-marinho);
  color: #fff; font-weight: 400;
  padding-block: .45rem;
}
.atuacao-bloco .credenciais li::before{ background: var(--dourado-claro); }
.credenciais li::before{
  content: ""; position: absolute; left: 0; top: 1.1rem;
  width: 9px; height: 1px; background: var(--dourado);
}
.sobre-texto h3{ margin-top: var(--s-5); }
.sobre-texto h3:first-of-type{ margin-top: var(--s-4); }

/* ─────────────────────── sinais de alerta ───────────────────────
   Três gerações: nove cards idênticos (ruim), nove linhas com bolinha
   dourada e sublinhado (varredura, mas leitura chata — foi a crítica), e
   agora três grupos temáticos. O que hierarquiza passou a ser o GRUPO, não
   o fio: quem procura o próprio sintoma acha o grupo primeiro. */
.sinais-grupos{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.sinal-grupo{ display: grid; gap: var(--s-2); align-content: start; }
.sinal-grupo__icone{
  width: 42px; height: 42px; color: var(--marinho);
  margin-bottom: var(--s-1);
}
.sinal-grupo h3{
  margin: 0; padding-bottom: var(--s-2);
  border-bottom: 2px solid var(--dourado);
  font-size: var(--t-lg);
}
.sinal-grupo ul{ list-style: none; margin: 0; padding: 0; }
.sinal-grupo li{
  position: relative; padding: .5rem 0 .5rem 1.35rem;
  font-size: var(--t-sm);
}
.sinal-grupo li::before{
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 8px; height: 1px; background: var(--linha-forte);
}

/* ─────────────────────── coluna vertebral ───────────────────────
   ⚠️ Substituiu a grade `.servicos` de três colunas IGUAIS (coluna, crânio,
   consultas) em 28/08/2026. O cliente pediu que coluna dominasse a página, e
   três colunas do mesmo peso é exatamente o que impede isso: a grade
   igualitária afirma que as três coisas valem o mesmo.

   Aqui a lista é a seção inteira, e cada linha ganha corpo de subtítulo em
   vez de corpo de item. Duas colunas largas, não três estreitas: o item mais
   longo tem 45 caracteres e em três colunas ele quebrava em duas linhas. */
/* ⚠️ `grid-auto-flow: column` com as linhas fixadas em 4, e não o fluxo
   normal por linha. Com o fluxo padrão a lista se preenche em Z, e quem lê a
   coluna da esquerda de cima a baixo pega 1, 3, 5, 7 — ou seja, a ordem que o
   Dr. Lucas pediu (hérnia, minimamente invasivas, bloqueios nos três
   primeiros lugares) só existiria para quem lesse em ziguezague. Assim os
   três ficam juntos no alto da primeira coluna, que é onde o olho começa.
   Mexeu no número de itens? Ajuste o `repeat(4, …)` para metade deles. */
.coluna-lista{
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(4, auto); grid-template-columns: 1fr 1fr;
  gap: 0 var(--s-6);
  list-style: none; margin: 0; padding: 0;
}
.coluna-lista li{
  padding: var(--s-3) 0 var(--s-3) 1.6rem; position: relative;
  border-bottom: 1px solid var(--linha);
}
/* Com o fluxo em coluna, os últimos de cada uma são o 4º e o 8º. */
.coluna-lista li:nth-child(4n){ border-bottom: 0; }
.coluna-lista li::before{
  content: ""; position: absolute; left: 0; top: 1.65rem;
  width: 10px; height: 2px; background: var(--dourado);
}
.coluna-lista h3{
  margin: 0; font-size: var(--t-lg); font-weight: 400;
  color: var(--marinho-escuro); line-height: 1.35;
}

/* ─────────────────────── também atendidos ───────────────────────
   A faixa secundária que o cliente pediu. Ela precisa LER como secundária,
   e o que faz isso não é o tamanho da fonte: é a ausência do fio dourado
   por item e do corpo de subtítulo. Três parágrafos corridos, não cards. */
.secundarios__grade{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5);
  margin-top: var(--s-4);
}
.secundarios h2{ font-size: var(--t-xl); }
.secundarios h3{ margin-bottom: var(--s-1); font-size: var(--t-base); }
.secundarios p{ margin: 0; font-size: var(--t-sm); color: var(--grafite); }

/* Nota destacada. Era usada pela neuropediatria também, até ela virar um
   dos três blocos de `.secundarios` em 28/08/2026 — hoje só a ressalva da
   polilaminina a usa, e a regra fica porque é ela que dá o destaque.
   A ressalva não é enfeite: sem ela a menção à pesquisa esbarra no art. 11,
   VII (divulgar técnica não reconhecida). */
.nota{
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: var(--marinho); color: var(--sobre-marinho-2);
  border-radius: var(--raio);
}
.nota strong{ color: #fff; }
/* Duas colunas em vez de uma coluna estreita num bloco largo: antes o
   texto ocupava metade da caixa e a outra metade ficava vazia. */
.nota p{ margin: 0; font-size: var(--t-sm); max-width: none; columns: 2; column-gap: var(--s-5); }
@media (max-width: 820px){ .nota p{ columns: 1; } }
.faixa--clara .nota{ background: var(--marinho-escuro); }

/* ─────────────────────── diferenciais ─────────────────────── */

.diferenciais{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-6); }
.diferencial h3{ margin-bottom: var(--s-2); font-size: var(--t-lg); }
.diferencial p{ font-size: var(--t-sm); margin: 0; }

/* Bloco da pesquisa: a imagem e a ressalva vivem juntas de propósito.
   Separá-las é o que transformaria a menção numa promessa. */
.pesquisa{
  margin-top: var(--s-5);
  /* ⚠️ 380px, não 300px. A foto é o que fecha o buraco: o parágrafo tem
     `max-width: 68ch` (~642px), e com a foto a 300px a coluna de texto ficava
     com 734px — sobravam 92px de branco à direita do texto, dentro do card.
     Esticar o parágrafo até 734px resolveria o buraco e criaria outro problema:
     86 caracteres por linha, bem acima dos 68 que a página usa em todo lugar.
     Alargar a foto fecha o vão SEM mexer na medida de leitura, e de quebra dá
     presença a uma imagem que estava pequena. Mexeu no `--medida` ou no
     `--t-sm`? Meça de novo: os dois números têm de casar. */
  display: grid; grid-template-columns: 380px 1fr; gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  border: 1px solid var(--linha); border-radius: var(--raio);
  background: var(--cinza-claro);
}
.pesquisa img{ width: 100%; border-radius: var(--raio-p); }
.pesquisa h3{ margin-bottom: var(--s-2); font-size: var(--t-lg); }
.pesquisa p{ font-size: var(--t-sm); margin: 0; }
/* O bloco tem dois parágrafos desde 28/08 (o do pesquisador e a ressalva).
   Sem esta margem eles encostam e a ressalva parece continuação da frase. */
.pesquisa p + p{ margin-top: var(--s-2); }

/* ─────────────────────── ensino e divulgação ───────────────────────
   Faixa nova. As duas fotos são muito verticais (proporção 0,58) — o
   contêiner é que se adapta a elas, não o contrário: nada de forçar 16:9
   num retrato de congresso.

   Mudou para o `blog.html` em 09/08/2026, e com ela as fotos encolheram: a
   1fr cada elas ocupavam ~360px e a faixa virava uma galeria. Em 190px são o
   que devem ser — duas notas de rodapé ao lado do texto. */
.ensino{ display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-4); align-items: start; }
.ensino__texto{ align-self: center; }
.ensino figure{ margin: 0; width: 190px; }
.ensino img{
  width: 100%; border-radius: var(--raio);
  aspect-ratio: 664/1145; object-fit: cover;
}
.ensino figcaption{
  margin-top: var(--s-2); font-size: var(--t-xs); line-height: 1.5;
  color: var(--grafite);
}
.ensino figcaption strong{ display: block; }

/* ─────────────────────── jornada ───────────────────────
   Aqui a numeração é informação, não decoração: a ordem dos passos é o
   conteúdo. Um fio dourado liga os quatro, com um nó em cada.

   `list-style: none` é obrigatório: é um <ol> de verdade (a ordem é a
   informação, e leitor de tela precisa saber disso), mas o marcador nativo
   apareceria junto do círculo numerado, e cada passo virava "1. ①". */
.jornada{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);
  position: relative; list-style: none; margin: 0; padding: 0;
}
.jornada::before{
  content: ""; position: absolute; left: 26px; right: 26px; top: 27px;
  height: 1px; background: var(--dourado); opacity: .45;
}
.passo{ position: relative; }
.passo__n{
  position: relative; z-index: 1;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: var(--s-3);
  background: var(--branco); color: var(--marinho);
  border: 1px solid var(--dourado);
  font-family: var(--serif); font-weight: 700; font-size: 1.5rem;
  line-height: 1;
}
.faixa--clara .passo__n{ background: var(--cinza-claro); }
.passo h3{ font-size: var(--t-lg); margin-bottom: .45rem; }
.passo p{ font-size: var(--t-sm); margin: 0; }

/* ─────────────────────── seção de duas colunas ───────────────────────
   Do FAQ em diante a página empilhava conteúdo estreito à esquerda e deixava
   o terço direito em branco (medido: 832px de conteúdo num contêiner de
   1160). O cabeçalho vai para a coluna da esquerda e fica grudado enquanto a
   lista rola — resolve o vazio e ainda dá contexto a quem está no meio. */
.secao-dupla{ display: grid; grid-template-columns: .44fr 1fr; gap: var(--s-6); align-items: start; }
.secao-dupla > .cabeca{
  margin-bottom: 0; max-width: none;
  position: sticky; top: calc(var(--topo-h) + var(--s-4));
}
.secao-dupla > .cabeca p{ font-size: var(--t-sm); }

/* ─────────────────────── perguntas ─────────────────────── */

.perguntas{ max-width: none; }
.perguntas details{ border-bottom: 1px solid var(--linha); }
.perguntas details:first-child{ border-top: 1px solid var(--linha); }
.perguntas summary{
  list-style: none; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) 0;
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 700;
  color: var(--marinho-escuro);
  transition: color var(--transicao);
}
.perguntas summary::-webkit-details-marker{ display: none; }
.perguntas summary:hover{ color: var(--marinho); }
.perguntas .sinal{
  flex: none; width: 15px; height: 15px; position: relative;
  transition: transform var(--transicao);
}
.perguntas .sinal::before, .perguntas .sinal::after{
  content: ""; position: absolute; inset: 50% 0 auto 0; height: 1.5px;
  background: var(--dourado);
}
.perguntas .sinal::after{ transform: rotate(90deg); transition: opacity var(--transicao); }
.perguntas details[open] .sinal{ transform: rotate(180deg); }
.perguntas details[open] .sinal::after{ opacity: 0; }
.perguntas .resposta{ padding-bottom: var(--s-3); }
.perguntas .resposta p{ font-size: var(--t-sm); }

/* ─────────────────────── bastidores (imagens clínicas) ───────────────────────
   A foto de cirurgia é vertical na origem (1208×1600) e vai ao ar em QUADRO
   CHEIO, por decisão do Vinicius em 09/08/2026 — ver a ressalva escrita em
   `comercial/mensagem-joao-octavio.md`.

   ⚠️ Duas coisas moravam aqui e eram bugs, não estilo:
   `align-items: stretch` + `height: 100%` + `object-fit: cover` esticavam a
   imagem para a altura da coluna de texto e a recortavam por cima; e
   `justify-content: center` no figcaption centralizava o texto nessa linha
   esticada, abrindo um vão enorme entre o h2 e o primeiro parágrafo.
   O conserto dos dois é o mesmo: parar de esticar. */
/* Aqui o texto ocupa a coluna larga da esquerda, então a zona limpa é uma
   faixa vertical: pattern só no terço direito, atrás da foto e das margens. */
#procedimentos{
  --textura-zona: linear-gradient(90deg,
                    transparent 0 var(--zona-proc-de, 44%),
                    #000 var(--zona-proc-ate, 74%));
}

.bastidor-principal{
  margin: 0 0 var(--s-5);
  display: grid; grid-template-columns: 1fr .62fr; gap: var(--s-5);
  align-items: start;
}
.bastidor-principal img{
  grid-column: 2; grid-row: 1;
  width: 100%; height: auto; border-radius: var(--raio);
}
.bastidor-principal figcaption{
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; justify-content: flex-start;
}
.bastidor-principal figcaption h3{ color: #fff; margin-bottom: var(--s-2); }
.bastidor-principal figcaption p{ font-size: var(--t-sm); }
.bastidor-principal .enquadramento{ font-size: var(--t-sm); }

.bastidores{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
.bastidor figure{ margin: 0; }
.bastidor img{
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: var(--raio-p); background: var(--cinza-claro);
}
.bastidor figcaption{
  margin-top: var(--s-2); font-size: var(--t-xs); line-height: 1.5;
  color: var(--grafite);
}
.sobre-escuro .bastidor figcaption{ color: var(--sobre-marinho-2); }

/* ─────────────────────── depoimentos ─────────────────────── */

.reservado{
  max-width: none; padding: var(--s-5);
  border: 1px dashed var(--linha-forte); border-radius: var(--raio);
  background: var(--branco);
}
.reservado p{ font-size: var(--t-sm); }
.reservado p:first-child{ font-size: var(--t-base); color: var(--marinho-escuro); }

/* ─────────────────────── depoimentos ───────────────────────
   ⚠️ O que esta seção NÃO pode ter, e por dois motivos diferentes:
   estrela, nota, "5/5" e adjetivo de superioridade são vedados pelo art. 14,
   II, "g" da Res. CFM 2.336/2023; card com sombra, aspa decorativa gigante e
   avatar redondo são o "cheiro de infoproduto" que o manual de marca proíbe.
   Sobra o que a página já faz em todo lugar: fio, tipografia e espaço.

   Colunas CSS, não grid: os textos têm de 12 a 70 palavras, e num grid os
   curtos ficariam com um buraco embaixo do tamanho do mais longo da linha.
   `break-inside: avoid` é o que impede um depoimento de partir ao meio. */
.depoimentos{
  columns: 2; column-gap: var(--s-6);
  list-style: none; margin: 0; padding: 0;
}
.depoimentos li{
  break-inside: avoid; margin-bottom: var(--s-4);
  padding-left: var(--s-3);
  border-left: 2px solid var(--dourado);
}
.depoimentos blockquote{ margin: 0; }
.depoimentos p{ margin: 0; font-size: var(--t-sm); line-height: 1.65; }
.depoimentos cite{
  display: block; margin-top: var(--s-2);
  font-size: var(--t-xs); font-style: normal; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--dourado-escuro);
}
/* A ressalva não é rodapé de página: ela pertence ao bloco e viaja com ele.
   É o que sustenta a seção diante do art. 14, II, "g" — sem ela, sete
   relatos seguidos leem como resultado prometido. */
.recusa--nota{ margin-top: var(--s-2); }

@media (max-width: 760px){ .depoimentos{ columns: 1; } }

/* ─────────────────────── na imprensa ───────────────────────
   Mesma estrutura da faixa de ensino do blog, e de propósito: é a mesma
   ideia (o médico visto fora do consultório) e a página não precisa de dois
   idiomas para dizer a mesma coisa. As fotos são verticais; o contêiner se
   adapta a elas. */
.imprensa-faixa{ display: grid; grid-template-columns: 1fr auto auto; gap: var(--s-4); align-items: start; }
.imprensa-faixa__texto{ align-self: center; }
.imprensa-faixa figure{ margin: 0; width: 190px; }
.imprensa-faixa img{
  width: 100%; border-radius: var(--raio);
  aspect-ratio: 3/4; object-fit: cover;
}
.imprensa-faixa figcaption{
  margin-top: var(--s-2); font-size: var(--t-xs); line-height: 1.5;
  color: var(--grafite);
}
.imprensa-faixa figcaption strong{ display: block; }
.atuacao{ margin-top: var(--s-4); font-size: var(--t-sm); max-width: 62ch; }

/* ─────────────────────── convênios ───────────────────────
   Decisão de 09/08/2026: as principais entram com a LOGO, em cor original.
   Recolorir marca de terceiro contraria o manual de aplicação de quase todas
   elas, e em marinho monocromático Unimed e Amil viram a mesma mancha — o que
   mata justamente o reconhecimento que a faixa existe para dar.

   A cor fica confinada a esta faixa; o marinho continua dominando a página,
   que é o que o manual do Dr. Lucas exige. */
.convenios{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s-2);
  list-style: none; margin: 0 0 var(--s-4); padding: 0;
}
.convenios li{
  display: grid; place-items: center;
  min-height: 76px; padding: var(--s-2) var(--s-3);
  border: 1px solid var(--linha); border-radius: var(--raio-p);
  background: var(--branco);
  font-size: var(--t-sm); font-weight: 700; color: var(--marinho-escuro);
  text-align: center; line-height: 1.25;
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
.convenios li:hover{ border-color: var(--linha-forte); box-shadow: 0 6px 16px -12px rgba(11,42,92,.6); }
/* Altura ÓPTICA, não bounding box: logo horizontal e logo quadrada com a
   mesma caixa parecem tamanhos diferentes. Cada uma leva a sua no `--h`. */
.convenios img{
  width: auto; max-width: 100%;
  height: var(--h, 28px);
  object-fit: contain;
}

/* ⚠️ Os 15 tiles vivem numa lista SÓ, e o recolhimento do celular é feito por
   `nth-child` dentro dela. A tentação é separar em duas listas e esconder a
   segunda — não funciona: com `auto-fill`, a faixa tem 2, 3, 4 ou 5 colunas
   conforme a largura, e qualquer corte fixo deixa buraco no fim da primeira
   lista em alguma dessas larguras. Já deixou.

   O botão nasce escondido e só aparece com `html.js` — sem script, os 15 ficam
   à mostra, que é o estado certo.

   ⚠️ O `n+9` abaixo e o `- 8` do `script.js` são o MESMO corte em dois lugares. */
.convenios-mais{ display: none; }

@media (max-width: 620px){
  html.js .convenios-mais{
    display: flex; align-items: center; gap: .5rem;
    width: 100%; min-height: 48px; padding: 0 var(--s-3);
    margin-bottom: var(--s-4);
    border: 1px solid var(--linha-forte); border-radius: var(--raio-p);
    background: var(--branco);
    font: inherit; font-size: var(--t-sm); font-weight: 700;
    color: var(--marinho); text-align: left; cursor: pointer;
  }
  /* Recolhida, a lista guarda o gap do grid para o botão, e não a margem
     cheia de fim de bloco — os dois têm de ler como uma peça só. */
  html.js .convenios[data-recolhida]{ margin-bottom: var(--s-2); }
  html.js .convenios[data-recolhida] li:nth-child(n+9){ display: none; }
  .convenios-mais::after{
    content: ""; margin-left: auto;
    width: 9px; height: 9px; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -2px;
    transition: rotate var(--transicao);
  }
  .convenios-mais[aria-expanded="true"]::after{ rotate: -135deg; translate: 0 2px; }
}

.recusa{
  font-size: var(--t-sm); max-width: none;
  padding: var(--s-3); border-radius: var(--raio-p);
  border: 1px solid var(--linha); background: var(--branco);
}
.recusa strong{ color: var(--marinho-escuro); }

/* ─────────────────────── consultório ─────────────────────── */

/* `stretch` no lugar de `center`: era o que deixava o mapa (482px) mais baixo
   que a coluna ao lado (621px), desalinhado em cima e embaixo. */
.consultorio{ display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s-6); align-items: stretch; }
.endereco{ list-style: none; margin: 0 0 var(--s-4); padding: 0; }
.endereco li{
  padding-left: 1.35rem; position: relative; margin-bottom: var(--s-2);
  font-size: var(--t-sm);
}
.endereco li::before{
  content: ""; position: absolute; left: 0; top: .62rem;
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--dourado);
}
.foto-consultorio{
  width: 100%; margin-top: var(--s-4);
  border-radius: var(--raio); aspect-ratio: 16/9; object-fit: cover;
}
/* `display:grid` + `height:100%` no iframe: com o pai esticado pelo grid, a
   altura é definida e o iframe a herda. O `min-height` é o seguro contra o
   colapso que já aconteceu na versão com `aspect-ratio`. */
.mapa{
  border-radius: var(--raio); overflow: hidden; border: 1px solid var(--linha);
  display: grid;
}
.mapa iframe{ width: 100%; height: 100%; min-height: 420px; border: 0; }

/* ─────────────────────── chamada final ─────────────────────── */

.faixa--assinada{ overflow: hidden; }
.chamada-final{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
  position: relative; z-index: 1;
}
.chamada-final div{ flex: 1 1 26rem; }
.chamada-final h2{ margin-bottom: var(--s-2); }

/* ═════════════════════ blog ═════════════════════
   Modo de leitura, não de venda. Sem miniatura: não existe imagem real
   para nove artigos, e nove placeholders iguais seriam justamente a
   prateleira de cards que o resto da página recusa. O que hierarquiza
   aqui é tipografia e fio. */

.capa-pagina{
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--linha-sobre-marinho);
}
.capa-pagina p{ font-size: var(--t-lg); color: var(--sobre-marinho-2); }

.marcador{
  display: inline-block; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--dourado-escuro);
  margin-bottom: var(--s-2);
}
.sobre-escuro .marcador{ color: var(--dourado-claro); }

/* O primeiro artigo ocupa o dobro do espaço dos outros — é o que dá
   entrada na página e evita a lista plana. */
.artigo-destaque{
  padding-bottom: var(--s-5); margin-bottom: var(--s-5);
  border-bottom: 2px solid var(--marinho);
}
.artigo-destaque h2{ font-size: var(--t-2xl); margin-bottom: var(--s-3); max-width: 26ch; }
.artigo-destaque h2 a{ text-decoration: none; }
.artigo-destaque h2 a:hover{ color: var(--marinho); text-decoration: underline; }
.artigo-destaque p{ font-size: var(--t-lg); }

.lista-artigos{ list-style: none; margin: 0; padding: 0; }
.lista-artigos li{ border-bottom: 1px solid var(--linha); }
.lista-artigos a{
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-4) 0; text-decoration: none;
  transition: background var(--transicao);
}
.lista-artigos a:hover{ background: var(--cinza-claro); }
.lista-artigos h3{ margin: 0 0 .35rem; transition: color var(--transicao); font-size: var(--t-lg); }
.lista-artigos a:hover h3{ color: var(--marinho); }
/* O resumo herdava a cor do link envolvente e saía marinho, competindo
   com o próprio título. Ele é texto, não link. */
.lista-artigos p{ margin: 0; font-size: var(--t-sm); max-width: 62ch; color: var(--grafite); }
.lista-artigos .seta{
  flex: none; width: 22px; height: 22px; color: var(--dourado);
  align-self: center;
}

/* ─── artigo ─── */
.artigo{ max-width: 42rem; margin-inline: auto; }
.artigo .assinatura{
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  padding: var(--s-3) 0; margin-bottom: var(--s-5);
  border-block: 1px solid var(--linha);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--grafite);
}
.artigo h2{ font-size: var(--t-xl); margin-top: var(--s-5); }
.artigo h3{ margin-top: var(--s-4); font-size: var(--t-lg); }
.artigo ul{ padding-left: 1.1rem; margin-bottom: var(--s-3); max-width: var(--medida); }
.artigo li{ margin-bottom: .5rem; }
.artigo .abre{ font-size: var(--t-lg); color: var(--marinho-escuro); }

/* Aviso que fecha todo artigo. Não é rodapé decorativo: conteúdo
   educativo sem esta linha vira orientação clínica individual, que a
   Res. CFM 2.336/2023 não permite fora da consulta. */
/* O destaque vem do fio dourado acima, que é a marcação que a página usa
   em toda seção — e não de uma borda lateral colorida, que é o tique mais
   reconhecível de interface gerada por IA. */
.aviso-artigo{
  margin-top: var(--s-6); padding: var(--s-4);
  background: var(--cinza-claro); border-radius: var(--raio-p);
  border-top: 2px solid var(--dourado);
}
.aviso-artigo p{ margin: 0; font-size: var(--t-sm); }

@media (max-width: 620px){
  .lista-artigos a{ grid-template-columns: 1fr; gap: var(--s-2); }
  .lista-artigos .seta{ display: none; }
}

/* ─────────────────────── rodapé ─────────────────────── */

.rodape{ background: var(--marinho-escuro); color: var(--sobre-marinho-2); padding-block: var(--s-6) var(--s-4); }
.rodape__grade{
  display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: var(--s-5);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--linha-sobre-marinho);
}
/* O rodapé fica com o lockup COMPLETO — é o que traz a linha "cirurgia de
   coluna", que a assinatura do cabeçalho não tem e que o perfil de marca
   chama de eixo da comunicação. Aqui ela aparece a 200px e é legível. */
.rodape img{ width: 200px; margin-bottom: var(--s-3); }
.rodape h3{ font-family: var(--sans); font-size: var(--t-xs); color: #fff;
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: var(--s-2); }
.rodape ul{ list-style: none; margin: 0; padding: 0; }
.rodape li{ font-size: var(--t-sm); }
/* `inline-flex` com 44px de altura mínima: no celular estes links do rodapé
   mediam 18px, metade do alvo de toque. O espaço entre itens sai da própria
   altura do link, então o `margin-bottom` que existia aqui saiu. */
.rodape li a{ display: inline-flex; align-items: center; min-height: 44px; }
.rodape a{ color: var(--sobre-marinho-2); text-decoration: none; }
.rodape a:hover{ color: #fff; text-decoration: underline; }
.rodape p{ font-size: var(--t-sm); }
.rodape__base{
  padding-top: var(--s-3);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2);
  font-size: var(--t-xs); color: #93A6C6;
}

/* ─────────────────────── movimento ───────────────────────
   O manual pede uma marca "séria, discreta e constante", então movimento
   aqui confirma e orienta — não entretém.

   ⚠️ A trava que sustenta o bloco inteiro: nada começa invisível sem
   `html.js`, e essa classe quem põe é o script.js. Script quebrado, JS
   desligado ou erro de rede = página inteira legível. É por isso que este
   motor é mais seguro que o `animation-timeline: view()` que estava aqui
   antes, onde qualquer descuido deixava a página em branco para sempre.

   Duas camadas de gesto, e só duas:
   1. O corpo (`.surge`) clareia e sobe 14px, uma vez.
   2. Os títulos (`[data-palavras]`) sobem PALAVRA POR PALAVRA de trás de uma
      janela, com 55ms entre elas — é o texto aparecendo como quem escreve.
   É a mesma linguagem da assinatura viva do fecho: um gesto só, repetido. */
html.js .surge,
html.js .surge-foto{
  opacity: 0;
  transition: opacity .85s cubic-bezier(.22,.61,.36,1),
              transform .85s cubic-bezier(.22,.61,.36,1),
              scale .85s cubic-bezier(.22,.61,.36,1);
}
html.js .surge{ transform: translateY(14px); }
html.js .surge-foto{ scale: 1.03; }
html.js .surge.visivel{ opacity: 1; transform: none; }
html.js .surge-foto.visivel{ opacity: 1; scale: 1; }

/* Cada palavra numa janela recortada; o span interno começa abaixo dela e
   desliza para cima. A janela é um `clip-path` que se estende para fora da
   caixa, e não `overflow: hidden`: o overflow cortava a perna do g ("blog",
   "Artigo", "Agende") e a sobra lateral de letras como Q e f, mesmo com o
   `padding-bottom`. O clip-path não mexe no layout — o `padding-bottom` fica
   só para manter a altura de linha que o site já tinha. O ponto de partida do
   span desce o mesmo tanto que a janela cresceu, para a palavra não aparecer
   antes de subir. Medido em 10/09/2026: zero palavra cortada, layout idêntico. */
html.js .fatiado .p-fora{
  display: inline-block;
  clip-path: inset(-.5em -.3em -.3em -.3em);
  vertical-align: bottom;
  padding-bottom: .12em;
}
html.js .fatiado .p-dentro{
  display: inline-block;
  transform: translateY(calc(105% + .45em));
  transition: transform .95s cubic-bezier(.22,.61,.36,1);
}
html.js .fatiado.visivel .p-dentro{ transform: none; }

/* Quem tem palavra não usa o clareamento do bloco: o gesto é da palavra. */
html.js .fatiado{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  html.js .surge,
  html.js .surge-foto,
  html.js .fatiado .p-dentro{
    opacity: 1 !important; transform: none !important;
    scale: 1 !important; transition: none !important;
  }
}


/* Um momento autoral só, e é o gesto da própria marca: o símbolo é uma
   linha contínua, então ele se revela sozinho — uma vez, no fecho da
   página, como quem assina embaixo.

   Fica no bloco final e não na abertura porque lá a foto o cobriria por
   inteiro, e um gesto que ninguém vê não é um gesto.

   Nota para quem for mexer: a tentação é animar `stroke-dashoffset`, e ela
   não funciona aqui. O path do potrace vive dentro de um grupo com
   `scale(0.1)`, então qualquer `stroke-width` é dividido por dez e o traço
   vira um fio invisível. Recortar o preenchimento não depende de escala. */
.assinatura-viva{
  position: absolute; right: 2%; bottom: -14%;
  width: 32%; max-width: 320px;
  opacity: .17; pointer-events: none; z-index: 0;
  clip-path: inset(0 0 100% 0);
  animation: revelar 1.9s cubic-bezier(.22,.8,.3,1) forwards;
}
.assinatura-viva path{ fill: #fff; }
@keyframes revelar{ to{ clip-path: inset(0 0 0 0); } }

@supports (animation-timeline: view()){
  .assinatura-viva{
    animation-timeline: view();
    animation-range: entry 15% cover 55%;
    animation-duration: auto;
    animation-fill-mode: both;
  }
}
@media (max-width: 900px){ .assinatura-viva{ display: none; } }

/* O painel do menu entra de fora da tela. `allow-discrete` deixa o
   display:none participar da transição — sem isso ele pisca.

   ⚠️ `display` NÃO pode ser declarado aqui na regra base. O navegador
   esconde `[popover]` fechado com `display:none`, mas isso vem da folha
   do agente do usuário — e qualquer declaração de autor vence origem de
   agente do usuário, por menos específica que seja. Um `display:flex`
   solto aqui deixa o menu permanentemente aberto no celular, que foi
   exatamente o defeito. O display só entra em `:popover-open`. */
@media (max-width: 900px){
  .painel{
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 340px); z-index: 70;
    max-width: none; max-height: none; height: 100%;
    margin: 0; border: 0; overflow: auto;
    background: var(--marinho); color: #fff;
    padding: var(--s-6) var(--s-4) var(--s-4);
    flex-direction: column; gap: var(--s-2);
    translate: 100% 0;
    transition: translate 240ms cubic-bezier(.22,.8,.3,1),
                overlay 240ms allow-discrete, display 240ms allow-discrete;
  }
  .painel:popover-open{ display: flex; translate: 0 0; }
  @starting-style{ .painel:popover-open{ translate: 100% 0; } }
  .painel::backdrop{
    background: rgba(11,42,92,.55);
    transition: opacity 240ms, overlay 240ms allow-discrete, display 240ms allow-discrete;
  }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  html{ scroll-behavior: auto; }
  .assinatura-viva{ clip-path: none; }
}

/* ═════════════════════ adaptação ═════════════════════ */

@media (max-width: 1040px){
  .bastidor-principal{ grid-template-columns: 1fr; gap: var(--s-4); }
  /* Empilha, mas a foto continua no quadro original. Forçá-la a 16:11 na
     largura toda recortaria uma imagem clínica — e o enquadramento dela não
     é escolha de layout. */
  .bastidor-principal img{
    grid-column: 1; grid-row: 2;
    max-width: 380px; justify-self: start;
  }
  .bastidor-principal figcaption{ grid-column: 1; grid-row: 1; }
  .secundarios__grade{ grid-template-columns: 1fr 1fr; }
  .jornada{ grid-template-columns: repeat(2, 1fr); row-gap: var(--s-5); }
  .jornada::before{ display: none; }
  .consultorio{ grid-template-columns: 1fr; gap: var(--s-5); }
  .rodape__grade{ grid-template-columns: 1fr 1fr; }
  .bastidores{ grid-template-columns: repeat(2, 1fr); }
  .sinais-grupos{ grid-template-columns: 1fr; gap: var(--s-4); }
  .secao-dupla{ grid-template-columns: 1fr; gap: var(--s-4); }
  .secao-dupla > .cabeca{ position: static; }
  .ensino{ grid-template-columns: auto auto; justify-content: start; }
  .ensino__texto{ grid-column: 1 / -1; }
  .imprensa-faixa{ grid-template-columns: auto auto; justify-content: start; }
  .imprensa-faixa__texto{ grid-column: 1 / -1; }
}

@media (max-width: 900px){
  .menu{ display: none; }
  .topo__acao{ display: none; }
  .hamburguer{ display: block; }
  .topo__linha{ grid-template-columns: auto 1fr; }

  .painel ul{ list-style: none; margin: 0 0 var(--s-3); padding: 0; }
  .painel li{ border-bottom: 1px solid var(--linha-sobre-marinho); }
  /* Escopo no `nav` de propósito: sem ele esta regra também pegava o botão
     de agendar, que virava display:block e empilhava ícone e texto. */
  .painel nav a{
    display: block; padding: .95rem 0;
    color: #fff; text-decoration: none;
    font-size: var(--t-lg); font-family: var(--serif);
  }
  /* O painel é marinho: aqui o botão primário inverte, senão fica
     marinho sobre marinho e desaparece. */
  .painel .bt--forte{ background: #fff; color: var(--marinho-escuro); }
  .painel .bt--forte:hover{ background: #E8EDF7; }
  .painel .fechar{
    position: absolute; top: var(--s-3); right: var(--s-3);
    width: 44px; height: 44px; padding: 11px;
    background: none; border: 1px solid var(--linha-sobre-marinho);
    border-radius: var(--raio-p); color: #fff; cursor: pointer;
  }

  .abertura{ padding-block: var(--s-6); }
  .abertura__grade{ grid-template-columns: 1fr; gap: var(--s-5); }
  .abertura__foto{ max-width: 380px; margin-inline: auto; width: 100%; }

    .diferenciais{ grid-template-columns: 1fr; gap: var(--s-4); }
  /* Empilhado, a foto vem primeiro e o "Atuação" vai para o FIM, depois da
     formação — que é a ordem de leitura correta: quem ele é, o que estudou,
     onde atua. `display: contents` dissolve o agrupamento `.sobre-lado`, que
     só existe para o desktop, e promove foto e Atuação a itens do grid, cada
     um com a sua linha. A ordem do documento não muda. */
  .sobre-grade{ grid-template-columns: 1fr; gap: var(--s-4); }
  .sobre-lado{ display: contents; }
  .sobre-foto{ grid-column: 1; grid-row: 1; max-width: 420px; }
  .sobre-texto{ grid-column: 1; grid-row: 2; }
  .atuacao-bloco{ grid-column: 1; grid-row: 3; }
  .pesquisa{ grid-template-columns: 1fr; }
  .pesquisa img{ max-width: 320px; }

  /* Sem Popover API o painel volta a ser um menu comum, escondido por
     padrão e aberto por classe. Ver script.js. */
  .painel[data-sem-popover]{ display: none; }
  .painel[data-sem-popover].esta-aberto{ display: flex; translate: 0 0; }
}

@media (max-width: 620px){
  :root{ --t-base: 1rem; --t-xl: 1.22rem; }
  .faixa{ padding-block: var(--s-6); }
  .faixa--ampla{ padding-block: var(--s-7); }
  /* Uma coluna nos três: a lista de coluna quebrava linha em duas colunas
     estreitas, e os depoimentos ficavam com 4 palavras por linha. */
  .coluna-lista{ grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: none; }
  .coluna-lista li:nth-child(4n){ border-bottom: 1px solid var(--linha); }
  .coluna-lista li:last-child{ border-bottom: 0; }
  .secundarios__grade{ grid-template-columns: 1fr; gap: var(--s-4); }
  .jornada{ grid-template-columns: 1fr; row-gap: var(--s-4); }
  .bastidores{ grid-template-columns: 1fr 1fr; }
  .rodape__grade{ grid-template-columns: 1fr; }
  /* 168px, não 148px: desde 28/08 a assinatura traz a linha "NEUROCIRURGIÃO
     | CIRURGIA DE COLUNA", e a 148px ela já não era um traço legível. */
  .marca img{ width: 168px; }
  .mapa iframe{ min-height: 300px; }
  .chamada-final{ gap: var(--s-3); }
  .ensino{ grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .ensino figure{ width: auto; }
  .imprensa-faixa{ grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .imprensa-faixa figure{ width: auto; }
  .convenios{ grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}