/* ══════════════════════════════════════════════════════════
   Dr. Mario de Geus Neto — folha única
   Paleta e tipografia vêm do manual de identidade (ver CLAUDE.md).
   ══════════════════════════════════════════════════════════ */

:root {
  /* paleta do manual */
  --tinta:        #272D3B;   /* azul-ardósia — fundo escuro e cor da logo sobre claro */
  --papel:        #E5EAE3;   /* verde-claro acinzentado — fundo claro */
  --pedra:        #88857C;   /* cinza-quente — só fio, régua e campo lavado */
  --musgo:        #3F512B;   /* verde — só adorno */

  /* derivadas: texto secundário com contraste suficiente (o #88857C não passa) */
  --tinta-suave:  #4E5466;   /* texto secundário no claro. Escurecido para
                                sobreviver às marcas d'água: 6.1:1 sobre o
                                --papel limpo e 4.6:1 sobre o papel escurecido
                                pela ressonância das especialidades. */
  --papel-suave:  #B8BDB6;   /* 7.2:1 sobre --tinta  */
  --papel-frio:   #DEE5E6;   /* ponte entre o fundo e o cinza da foto da hero */
  --musgo-suave:  #DDE3D9;   /* texto secundário sobre o verde translúcido.
                                A transparência clareia o fundo e derrubou
                                este texto para 3.5:1 no primeiro ajuste. */
  --papel-hero:   #D3D8D1;   /* texto secundário da hero: o símbolo em marca
                                d'água escurece pontos do fundo e o tom normal
                                não alcançava 4.5:1 em cima deles */   /* ponte entre o fundo e o cinza da foto da hero */

  --display: "Cormorant", "Cormorant Garamond", Georgia, serif;
  --texto:   "seravek-web", system-ui, -apple-system, "Segoe UI", sans-serif;

  --envelope: 1180px;
  --respiro:  clamp(5rem, 9vw, 8.5rem);
  --curva:    cubic-bezier(.22,.61,.36,1);
  --curva-lenta: cubic-bezier(.16,.62,.22,1);
  --nav:      92px;
}

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

/* Grão: uma camada fixa de ruído fino sobre tudo, para tirar o aspecto
   de cor chapada dos fundos e dos gradientes. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  opacity: .11;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }

/* O anel de foco tem de contrastar com o fundo em que cai, e o --musgo só
   contrasta com o claro: sobre --tinta ele dava 1.59:1, sobre o topo do
   gradiente de #locais 1.30:1 e sobre o próprio verde 1.00:1. WCAG 1.4.11
   pede 3:1, então a navegação por teclado não tinha indicador visível em
   nenhuma seção escura — justamente onde ficam os quatro links de endereço.
   Agora a cor é um token que cada superfície redefine. Medidos: --musgo sobre
   --papel 7.1:1; --papel sobre --tinta 11.3:1, sobre #343B49 9.4:1, sobre
   --musgo 7.1:1. Superfície escura nova precisa redefinir --foco. */
:root { --foco: var(--musgo); }
.hero, .secao--tinta, .rodape, .oncologia, .navbar { --foco: var(--papel); }
/* a barra assentada é clara, e no mobile ela é sempre clara */
.navbar--assentada { --foco: var(--musgo); }

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

.pular {
  /* o anel cai fora da pílula, sobre a hero escura */
  --foco: var(--papel);
  position: absolute; top: -100px; left: 1rem; z-index: 200;
  background: var(--tinta); color: var(--papel);
  padding: .7rem 1.1rem; text-decoration: none; border-radius: 3px;
  transition: top .2s;
}
.pular:focus { top: 1rem; }

/* ─────────────────────────────────────────────  tipografia  ── */

@font-face {
  font-family: "Cormorant"; src: url("../public/fonts/Cormorant-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant"; src: url("../public/fonts/Cormorant-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant"; src: url("../public/fonts/Cormorant-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant"; src: url("../public/fonts/Cormorant-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: .065em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 3.7vw, 3.35rem); }
h2 { font-size: clamp(2rem, 3.7vw, 3.15rem); }
h3 { font-size: clamp(1.28rem, 1.9vw, 1.6rem); letter-spacing: .055em; }

p { margin: 0; }

.sobrancelha--lugar { display: flex; align-items: center; gap: .5rem; }
.pino { width: 1.05em; height: 1.05em; flex: 0 0 auto; opacity: .85; }

.sobrancelha {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--musgo);
  margin-bottom: 1.5rem;
}
.secao--tinta .sobrancelha { color: var(--papel-suave); }

.chamada {
  font-size: clamp(1.05rem, 1.35vw, 1.19rem);
  max-width: 60ch;
  margin-top: 1.75rem;
  color: var(--tinta-suave);
}
.chamada + .chamada { margin-top: 1.15rem; }
.chamada--forte strong { font-weight: 600; color: var(--tinta); }
.secao--tinta .chamada { color: var(--papel-suave); }

.nota {
  margin-top: 3.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--pedra) 45%, transparent);
  font-size: .95rem;
  color: var(--tinta-suave);
  max-width: 62ch;
}
.nota--clara { color: var(--papel-suave); }

.registros {
  font-size: .84rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin-top: 1.6rem;
}
/* O separador herda a cor do texto. Em --pedra ele dava 3.02:1 no claro e
   3.73:1 no escuro, contra a regra do próprio projeto de não devolver o
   #88857C para texto pequeno. Um "·" lê como separador pela forma. */
.registros span { margin: 0 .15rem; }

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

.envelope {
  width: min(100% - 2.5rem, var(--envelope));
  margin-inline: auto;
}

.secao { padding-block: var(--respiro); }
.secao--tinta  { background: var(--tinta); color: var(--papel); }
.secao--papel  { background: var(--papel); color: var(--tinta); }

/* âncoras não somem sob a navbar fixa */
[id] { scroll-margin-top: calc(var(--nav) + 1rem); }

.abertura { max-width: 46rem; }

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

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  background: var(--tinta); color: var(--papel);
  font-family: var(--texto); font-size: .92rem; font-weight: 400;
  letter-spacing: .04em;
  padding: .95rem 1.85rem;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  text-decoration: none;
  transition: background .35s var(--curva), color .35s var(--curva),
              transform .35s var(--curva);
}
.botao:hover { background: transparent; color: var(--tinta); transform: translateY(-2px); }

.botao--compacto { padding: .68rem 1.25rem; font-size: .84rem; }
/* secundário: o WhatsApp é o CTA, o Instagram acompanha sem competir */
.botao--contorno {
  background: transparent; color: var(--tinta); border-color: var(--tinta);
  gap: .55rem;
}
.botao--contorno:hover { background: var(--tinta); color: var(--papel); }

/* O verde é cor de adorno na paleta, mas aqui ele é o secundário: sobre o
   azul escuro da hero ele se distingue do CTA claro sem competir com ele, e
   em #contato faz o mesmo papel ao lado do WhatsApp. */
.botao--verde {
  background: var(--musgo); color: var(--papel); border-color: var(--musgo);
}
/* Ao esvaziar, o botão tem de vestir o PRÓPRIO verde, não o papel. Esta é a
   regra que vale em seção clara (#contato): com `--papel` no texto e na
   borda, o botão sumia contra o fundo `--papel` no hover — invisível, não
   discreto. Verde sobre `--papel` dá 7.2:1. A hero, que é escura, sobrescreve
   isto logo abaixo. */
.botao--verde:hover {
  background: transparent; color: var(--musgo); border-color: var(--musgo);
}
.botao__selo { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.botao--grande   { padding: 1.15rem 2.4rem; font-size: 1rem; }

.secao--tinta .botao {
  background: var(--papel); color: var(--tinta); border-color: var(--papel);
}
.secao--tinta .botao:hover { background: transparent; color: var(--papel); }


/* ────────────────────────────────────────────────  navbar  ── */

.navbar {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .45s var(--curva), box-shadow .45s var(--curva);
}
.navbar--assentada {
  background: var(--papel);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--pedra) 40%, transparent);
}

.navbar__interior {
  width: min(100% - 2.5rem, var(--envelope));
  margin-inline: auto;
  height: var(--nav);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

.navbar__logo { display: block; position: relative; }
.navbar__logo img { width: clamp(238px, 23vw, 304px); height: auto; }
/* A hero é escura: no topo vale a logo branca. Depois do scroll a barra
   fica clara e a logo volta a ser a azul. */
.navbar__logo--escuro { position: absolute; inset: 0; opacity: 0; transition: opacity .4s var(--curva); }
.navbar--assentada .navbar__logo--claro  { opacity: 0; }
.navbar--assentada .navbar__logo--escuro { opacity: 1; }
.navbar__logo--claro { transition: opacity .4s var(--curva); }

.menu { display: flex; align-items: center; gap: clamp(1.4rem, 2.8vw, 2.6rem); }
.menu__lista {
  display: flex; align-items: center; gap: clamp(1.15rem, 2.2vw, 2.1rem);
  list-style: none; margin: 0; padding: 0;
}
.menu__lista a {
  color: var(--papel); text-decoration: none;
  font-size: .9rem; letter-spacing: .03em;
  padding-bottom: .2rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .35s var(--curva), color .4s var(--curva);
}
.menu__lista a:hover { background-size: 100% 1px; }
.navbar--assentada .menu__lista a { color: var(--tinta); }

/* botão do topo: claro sobre a hero escura, escuro depois do scroll */
.navbar .botao {
  background: var(--papel); color: var(--tinta); border-color: var(--papel);
  transition: background .4s var(--curva), color .4s var(--curva), border-color .4s var(--curva);
}
.navbar .botao:hover { background: transparent; color: var(--papel); }
.navbar--assentada .botao { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.navbar--assentada .botao:hover { background: transparent; color: var(--tinta); }

/* marca d'água do painel mobile: só aparece com o menu aberto */
.menu__rm { display: none; }

.navbar__botao { display: none; }

/* ──────────────────────────────────────────────────  hero  ── */

/* Fundo azul: o retrato tem fundo claro e vira um painel de luz recortado
   contra a noite. O gradiente da direita costura a foto ao fundo. */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  align-items: center;
  background: var(--tinta);
  color: var(--papel);
  overflow: hidden;
}

/* Símbolo em marca d'água: 90% da altura da seção, encostado à direita,
   por cima do gradiente e por baixo do texto. */
.hero__marca {
  position: absolute; z-index: 1;
  top: 0; right: -3%;
  height: 100%; aspect-ratio: 787 / 649;   /* o viewBox comum das duas letras */
  color: var(--papel);                      /* as letras vêm de currentColor */
  opacity: .11; pointer-events: none; user-select: none;
  /* A opacidade cai da direita para a esquerda, acompanhando o gradiente
     azul: o símbolo é mais presente onde o fundo já é sólido e some antes
     de chegar na foto. */
  -webkit-mask-image: linear-gradient(to left,
      #000 0%, rgb(0 0 0 / .82) 18%, rgb(0 0 0 / .58) 38%,
      rgb(0 0 0 / .32) 58%, rgb(0 0 0 / .12) 78%, transparent 96%);
          mask-image: linear-gradient(to left,
      #000 0%, rgb(0 0 0 / .82) 18%, rgb(0 0 0 / .58) 38%,
      rgb(0 0 0 / .32) 58%, rgb(0 0 0 / .12) 78%, transparent 96%);
}

.hero__texto {
  grid-column: 2;
  position: relative; z-index: 2;
  padding: calc(var(--nav) + 2.5rem) max(1.25rem, calc(50vw - var(--envelope) / 2))
           3.5rem clamp(1.5rem, 3vw, 2.5rem);
  max-width: 47rem;
  justify-self: start;
  width: 100%;
}

.hero .sobrancelha { color: var(--papel-hero); }
/* Único título em caixa mista do site: a frase é longa demais para caixa
   alta e as duas palavras-chave precisam sobressair pelo peso. */
.hero__titulo {
  margin-bottom: 0; text-wrap: pretty;
  text-transform: none;
  letter-spacing: .005em;
  font-size: clamp(2.4rem, 4.1vw, 3.7rem);
  line-height: 1.16;
}
.hero__titulo em { font-style: normal; font-weight: 600; }

/* Mesmo tratamento do título da hero: caixa mista, entrelinha fechada e
   quase nenhum espacejamento — o oposto das versais espaçadas do resto. */
.formacao h2,
#especialidades h2,
#especialidades h3,
#locais h2,
#contato h2 {
  text-transform: none;
  letter-spacing: .005em;
  line-height: 1.16;
}
/* SemiBold, o mesmo peso de "Clareza"/"Precisão" na hero — não o Light 300
   dos rótulos. Em corpo grande o 300 da Cormorant afina demais e o título
   perdia a voz para a lista embaixo. O SemiBold é só 1–4% mais largo que o
   Light (medido nas sete linhas de título), então nenhuma quebra muda. */
.formacao h2, #especialidades h2, #locais h2, #contato h2 {
  font-size: clamp(2.1rem, 3.4vw, 3.05rem);
  font-weight: 600;
}
/* O <em> de #locais ("Duas"/"quatro") continua no HTML, mas agora não pesa
   mais que a frase: com o título inteiro em 600 não há degrau. Só falta
   neutralizar o itálico. Se o destaque tiver de voltar, o caminho é baixar o
   resto da frase, não subir estas duas palavras — 700 ao lado de 600 mal se
   distingue na Cormorant. */
#locais h2 em { font-style: normal; }
#especialidades h3 { font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: .01em; }
.hero__chamada { margin-top: 1.9rem; max-width: 40ch; color: var(--papel-hero); }
.hero .registros { color: var(--papel-hero); }


.hero__acoes {
  margin-top: 2.6rem;
  display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap;
}
.hero .botao { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.hero .botao:hover { background: transparent; color: var(--papel); }
/* Mesma especificidade da regra acima (0,2,0) e depois dela no arquivo:
   `.botao--verde` sozinho é (0,1,0) e perde, e o botão saía claro. */
.hero .botao--verde {
  background: var(--musgo); color: var(--papel); border-color: var(--musgo);
}
.hero .botao--verde:hover {
  background: transparent; color: var(--papel); border-color: var(--papel);
}

/* A foto E o gradiente cobrem a hero inteira. Enquanto o gradiente vivia só
   dentro da coluna da foto, a borda dessa coluna aparecia como uma linha
   vertical: de um lado o gradiente terminava em #272D3B chapado, do outro o
   fundo diagonal da seção estava noutro tom. Cobrindo tudo, não há encontro. */
.hero__retrato { position: absolute; inset: 0; z-index: 0; }
.hero__retrato picture { display: block; height: 100%; }
.hero__retrato img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 30% 46%;
  /* Sem corte lateral, object-position-x é inerte aqui. O translate é o que
     de fato tira o médico do meio e o joga para a esquerda. A faixa que fica
     sem imagem à direita cai onde o gradiente já é azul opaco. */
  transform: translateX(-16%);
}
.hero__retrato::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    /* sopro diagonal: devolve a variação de cor que o fundo tinha */
    linear-gradient(157deg,
      rgb(60 70 92 / .30) 0%, rgb(52 61 80 / .12) 26%,
      rgb(39 45 59 / 0) 52%, rgb(24 29 39 / .22) 100%),
    /* rampa horizontal: 22 paradas para não formar degrau nem faixa */
    linear-gradient(to right,
      rgb(39 45 59 / 0)    0%,  rgb(39 45 59 / .01)  6%,
      rgb(39 45 59 / .02) 11%,  rgb(39 45 59 / .04) 16%,
      rgb(39 45 59 / .07) 21%,  rgb(39 45 59 / .10) 25%,
      rgb(39 45 59 / .14) 29%,  rgb(39 45 59 / .19) 33%,
      rgb(39 45 59 / .25) 36%,  rgb(39 45 59 / .32) 39%,
      rgb(39 45 59 / .40) 42%,  rgb(39 45 59 / .48) 45%,
      rgb(39 45 59 / .57) 47%,  rgb(39 45 59 / .65) 49%,
      rgb(39 45 59 / .73) 51%,  rgb(39 45 59 / .81) 53%,
      rgb(39 45 59 / .87) 55%,  rgb(39 45 59 / .92) 57%,
      rgb(39 45 59 / .96) 59%,  rgb(39 45 59 / .985) 61%,
      rgb(39 45 59 / .997) 63%, rgb(39 45 59 / 1) 66%);
}

/* ──────────────────────────────────────────────  formação  ── */
/* Claro, alternando com a hero escura. A foto é plano de fundo da metade
   direita, dissolvida no papel por um gradiente. */

/* formação e especialidades são ambas claras: sem isto a folga entre elas
   vira o dobro e o corte some */
.formacao { padding-bottom: clamp(3rem, 5vw, 4.5rem); }
#especialidades { padding-top: clamp(3.5rem, 6vw, 5.5rem); }

.formacao {
  position: relative;
  background:
    /* O fundo diagonal termina em --papel-frio na direita, e a seção seguinte
       é --papel chapado: os dois se encontravam numa linha horizontal. Esta
       camada resolve tudo em --papel antes da borda, dos dois lados. */
    linear-gradient(to bottom, var(--papel) 0%, transparent 14%,
                    transparent 72%, var(--papel) 96%, var(--papel) 100%),
    linear-gradient(100deg, var(--papel) 0%, var(--papel) 55%, var(--papel-frio) 100%);
  color: var(--tinta);
  overflow: hidden;
}

.formacao .envelope { position: relative; z-index: 2; }
.formacao__corpo { max-width: 39rem; }

.formacao__retrato { position: absolute; inset: 0 0 0 auto; width: 46%; z-index: 1; }
.formacao__retrato img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.formacao__retrato::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    /* véu leve: recua a foto sem lavar o rosto */
    linear-gradient(rgb(229 234 227 / .20), rgb(229 234 227 / .20)),
    /* dissolve na borda que encosta no texto */
    linear-gradient(to right, var(--papel) 0%, rgb(229 234 227 / .82) 26%,
                    rgb(229 234 227 / .20) 60%, transparent 92%),
    /* dissolve no topo e no pé da seção */
    /* Fechar só em 100% deixava um traço da foto na última faixa de pixels,
       e era isso que virava a linha do corte entre as duas seções claras. */
    linear-gradient(to bottom, var(--papel) 0%, transparent 22%,
                    transparent 64%, var(--papel) 91%, var(--papel) 100%);
}

/* lista de formações: cada uma com o brasão da instituição */
.titulos { list-style: none; margin: 3rem 0 0; padding: 0; }
.titulos li {
  padding: 1.3rem 0;
  border-top: 1px solid color-mix(in srgb, var(--pedra) 40%, transparent);
  display: flex; align-items: center; gap: 1.15rem;
}
.titulos li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--pedra) 40%, transparent); }

.titulos__marca {
  flex: 0 0 auto;
  width: 62px; height: 62px; border-radius: 50%;
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--pedra) 32%, transparent);
  display: grid; place-items: center;
  padding: 9px;
  box-shadow: 0 2px 10px rgb(39 45 59 / .06);
}
.titulos__marca img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* a última linha é sobre a prática dele hoje, não sobre um diploma:
   leva o próprio símbolo no lugar do brasão de uma instituição */
.titulos__marca--propria { padding: 13px; }

.titulos__texto { display: grid; gap: .28rem; min-width: 0; }
.titulos strong {
  font-weight: 400; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .17em;
  color: var(--tinta);
}
.titulos__texto > span { color: var(--tinta-suave); font-size: .95rem; line-height: 1.55; }

/* Ressonância em marca d'água à direita da régua. O arquivo já vem recortado
   do fundo, com alfa: entra direto, sem máscara nem filtro. */
#especialidades { position: relative; overflow: hidden; }
.territorio > .regioes, .territorio > .territorio__extremo { position: relative; z-index: 1; }
.especialidades__marca {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  /* Dentro do .territorio: com top e bottom zerados ela tem exatamente a
     altura da régua, de "crânio" a "tórax". O `left` começa depois da coluna
     de texto (44% no máximo) e a largura, em `auto`, sangra à direita. */
  top: 0; bottom: 0; left: 46%; right: auto;
  height: 100%; width: auto; max-width: none;
  /* Fade nas quatro bordas. O arquivo corta a anatomia reta em cima, embaixo e
     à direita, e à esquerda ela chegaria na coluna de texto: sem isto, as
     quatro arestas aparecem chapadas. Dois gradientes lineares cruzados,
     combinados por `intersect`, apagam as quatro de uma vez — um só radial
     comeria o perfil pelo meio. */
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0, #000 17%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to right,  transparent 0, #000 17%, #000 80%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-composite: intersect;
  opacity: .9;
}

/* ───────────────────────────────────  território (a régua)  ── */
/* O fio vertical é a frase do próprio médico: "praticamente todas as
   afecções entre o crânio e o tórax". As regiões descem o corpo. */

.territorio { position: relative; margin-top: clamp(3.5rem, 6vw, 5.5rem); padding-left: 3.1rem; }
/* O fio nasce e morre em transparente, para não bater de topo nos rótulos, e
   ganha musgo no miolo: as pontas são território neutro (crânio, tórax) e o
   meio é onde estão as regiões. É a mesma passagem de cor das bolinhas. */
.territorio::before {
  content: ""; position: absolute; left: 4px; top: 1.55rem; bottom: 1.55rem;
  width: 1px;
  background: linear-gradient(to bottom,
              transparent 0%,
              var(--pedra) 7%,
              color-mix(in srgb, var(--musgo) 50%, var(--pedra)) 30%,
              color-mix(in srgb, var(--musgo) 50%, var(--pedra)) 70%,
              var(--pedra) 93%,
              transparent 100%);
}
.territorio__extremo {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .22em;
  color: var(--tinta-suave);
  margin-left: -3.1rem;
}
/* `of-type`, não `child`: o primeiro filho do .territorio é o <img> da
   ressonância, então `:first-child` nunca casava e o "crânio" ficou sem margem
   nenhuma. Os dois rótulos são os únicos <p> do bloco. */
.territorio__extremo:first-of-type { margin-bottom: 2.2rem; }
.territorio__extremo:last-of-type  { margin-top: 2.2rem; }

.regioes { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.6rem, 4vw, 3.6rem); }

.regiao { position: relative; }
/* A bolinha marca a região no fio. O `margin-left` centra o disco no fio, que
   tem 1px e mora em `left: 4px` do .territorio: metade do diâmetro para a
   esquerda de 4,5px. Se mudar o diâmetro, refaça essa conta. */
.regiao::before {
  content: ""; position: absolute; left: -3.1rem; top: .46em;
  margin-left: -1px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--musgo);
  /* Núcleo verde, folga de papel que abre o fio, e um anel fino do mesmo verde
     por fora: o nó vira um alvo, não um ponto solto — e conversa com os
     círculos que já existem na página (avatar, brasões). */
  box-shadow:
    0 0 0 6px var(--papel),
    0 0 0 7px color-mix(in srgb, var(--musgo) 34%, transparent);
}

/* Título grifado: azul-ardósia por baixo, papel por cima. O fundo vive num
   <span> em linha, não no <h3>, senão ele tomaria a largura da coluna toda em
   vez de abraçar as palavras. `box-decoration-break: clone` reconstrói o
   grifo em cada linha quando o título quebra no mobile. */
/* 1.32 em vez do 1.16 dos outros títulos: com o grifo, a entrelinha fechada
   fazia as duas faixas se encostarem quando o título quebra em telas estreitas.
   O suficiente para virar um degrau limpo, não uma mancha só. */
.regiao h3 { line-height: 1.32; }
.regiao .grifo {
  background: var(--tinta);
  color: var(--papel);
  padding: .08em .34em .16em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}
/* Uma coluna só, à esquerda: a metade direita da régua é da ressonância.
   A largura máxima está no bloco `min-width: 1001px` do responsivo. */
.regiao ul {
  list-style: none; margin: 1.05rem 0 0; padding: 0;
  color: var(--tinta-suave);
}
.regiao ul li {
  padding-left: 1.05rem; position: relative;
  margin-bottom: .5rem; font-size: .98rem; line-height: 1.6;
}
.regiao ul li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 5px; height: 1px; background: var(--pedra);
}

/* ──────────────────────────────────────────────  oncologia  ── */

.oncologia {
  margin-top: clamp(3.5rem, 6vw, 5rem);
  padding: clamp(2rem, 4vw, 3.1rem);
  /* Verde opaco. Antes eram 95% com transparência, para o papel subir por
     baixo e tirar o aspecto chapado — papel que a elevação abaixo agora faz
     melhor. E o verde translúcido clareava: o par com --musgo-suave ficava em
     4.77:1, sem folga para a marca d'água no canto, que clareia mais um pouco
     e derrubava a última linha da lista para 4.27:1. Opaco, a mesma linha dá
     4.9:1. */
  background: var(--musgo);
  color: var(--papel);
  border-radius: 4px;
  position: relative; overflow: hidden;
  /* Elevação: três sombras em profundidades diferentes mais um fio claro na
     aresta de cima, a face que pegaria a luz. Em azul-ardósia, porque sombra
     cinza sobre o papel esverdeado suja a paleta. */
  box-shadow:
    0 2px 4px    rgb(39 45 59 / .07),
    0 12px 26px -10px rgb(39 45 59 / .20),
    0 32px 60px -26px rgb(39 45 59 / .26),
    inset 0 1px 0 color-mix(in srgb, var(--papel) 16%, transparent);
}
/* O símbolo assina o bloco pelo canto inferior direito, na versão estática —
   a animada já aparece duas vezes na página. */
.oncologia__marca {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  /* O PNG tem 12,33% de margem transparente na lateral e 16,46% embaixo
     (600x553, tinta em 74/91px). Sem descontá-la, `20px` viram ~58px à direita
     e ~67px embaixo. As duas frações são da LARGURA: a altura é 553/600 dela. */
  --marca-l: clamp(160px, 26%, 320px);
  width: var(--marca-l); height: auto;
  right:  calc(20px - var(--marca-l) * .1233);
  bottom: calc(20px - var(--marca-l) * .1517);
  /* .065, não os .085 das outras marcas d'água: no canto ela cruza a última
     linha da lista e clareia o verde. A .085 esse texto cai para 4.40:1. */
  opacity: .065;
}
.oncologia > *:not(.oncologia__marca) { position: relative; z-index: 1; }
/* SemiBold como os títulos de seção. Os nomes das regiões, que são os outros
   h3 daqui, seguem em Light 300 de propósito: lá o destaque já vem do grifo
   (fundo --tinta), e somar peso ao grifo engrossaria a faixa. Aqui não há
   grifo, então quem destaca é o peso. Cabe numa linha até ~366px de tela —
   o mesmo limite do Light, que só ganha 3,5px de folga. */
/* Grifo invertido: nas regiões o fundo é claro e a caixinha é de tinta; aqui o
   fundo é o verde, então a caixinha é de papel e a palavra fica verde. --musgo
   sobre --papel dá 7.1:1. A entrelinha sobe para 1.32, como lá, para as faixas
   não se encostarem quando o título quebra em duas linhas no mobile. */
.oncologia h3 { font-weight: 600; line-height: 1.32; }
/* Grifo invertido: nas regiões o fundo é claro e a caixinha é de tinta; aqui o
   fundo é o verde, então a caixinha é de papel e a palavra fica verde. --musgo
   sobre --papel dá 7.1:1. A entrelinha sobe para 1.32, como lá, para as faixas
   não se encostarem quando o título quebra em duas linhas no mobile. */
.oncologia .grifo {
  background: var(--papel);
  color: var(--musgo);
  padding: .08em .34em .16em;
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Duas colunas. A caixa tem ~1100px no desktop e uma coluna só de 58ch deixava
   a metade direita vazia. `auto-fit` resolve sem breakpoint: abaixo de ~2x28rem
   vira uma coluna só. Cada coluna fica em ~45ch, dentro do teto de 65–75ch. */
.oncologia__texto {
  margin-top: 1.75rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
  gap: 1.15rem 3rem;
}
.oncologia__texto p { margin: 0; color: var(--musgo-suave); }
/* o acolhimento em papel cheio: é a resposta à pergunta que a pessoa assustada
   está de fato fazendo, e precisa pesar mais que o parágrafo ao lado. 7.1:1 */
.oncologia__acolhe { color: var(--papel); }

/* A lista é só agrupamento e ritmo: sem fundo, sem fio, sem sangria. Tentei
   destacá-la com uma faixa mais escura e o dono do projeto vetou — a caixa
   verde é uma superfície só, e alternar tom dentro dela suja o bloco. Quem
   separa a lista do texto acima é a folga, e quem a introduz é a frase. */
.oncologia__faixa { margin-top: 2.6rem; }
/* A lista não começa do nada. Peso 600 e corpo acima do dos itens: é uma
   entrada, não mais uma linha da lista. --papel sobre --musgo dá 7.1:1. */
.oncologia__intro {
  margin: 0 0 1.5rem;
  color: var(--papel);
  font-size: 1.08rem;
  font-weight: 600;
}
.oncologia ul {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 3rem; color: var(--musgo-suave);
}
.oncologia ul li {
  break-inside: avoid; padding-left: 1.05rem; position: relative;
  margin-bottom: .55rem; font-size: .98rem; line-height: 1.6;
}

/* O convite fecha a caixa, centralizado e em coluna. Antes ele era uma linha
   com `space-between`, e o botão na borda direita caía em cima da marca d'água
   do canto. Centralizado, o botão fica na faixa vazia do meio e a marca
   continua onde sempre esteve. O rótulo e o href são os canônicos de propósito:
   o CLAUDE.md manda usar o mesmo link em todo CTA. */
.oncologia__convite {
  margin-top: 2.8rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 1.35rem; text-align: center;
}
.oncologia__convite p {
  margin: 0; max-width: 48ch;
  color: var(--papel);
}
/* Invertido em relação ao resto da página: aqui o fundo é o verde, então o
   botão cheio é de papel. 7.1:1 nos dois estados. */
.oncologia .botao {
  background: var(--papel); color: var(--musgo); border-color: var(--papel);
}
.oncologia .botao:hover {
  background: transparent; color: var(--papel); border-color: var(--papel);
}

.oncologia ul li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 5px; height: 1px; background: color-mix(in srgb, var(--papel) 55%, transparent);
}

/* ────────────────────────────────────────────────  locais  ── */

/* O azul chapado ficava pesado numa seção de quatro blocos. Aqui ele
   desce do tom mais claro no alto para o mais escuro no pé — sempre o
   mesmo azul-ardósia, só variando a luminosidade. As paradas são muitas
   de propósito: com poucas, o degrau volta a aparecer como faixa. */
/* Marca d'água do pin: à direita, sangrando na borda da tela, atrás do
   conteúdo. Mesmo tratamento da ressonância nas especialidades — a máscara
   é radial e zera dentro da caixa à esquerda, em cima e embaixo; só à
   direita ela extrapola de propósito, para sangrar sem linha reta. */
#locais { position: relative; overflow: hidden; }
#locais .envelope { position: relative; z-index: 1; }
.locais__marca {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  top: 71%; transform: translateY(-50%);
  right: calc(50% - 50vw - 6vw);
  height: 92%; width: auto; max-width: none;
  opacity: .07;
  -webkit-mask-image: radial-gradient(ellipse 62% 54% at 62% 50%,
      #000 22%, rgb(0 0 0 / .74) 52%, rgb(0 0 0 / .3) 78%, transparent 100%);
          mask-image: radial-gradient(ellipse 62% 54% at 62% 50%,
      #000 22%, rgb(0 0 0 / .74) 52%, rgb(0 0 0 / .3) 78%, transparent 100%);
}

#locais {
  background:
    linear-gradient(168deg,
      #343B49 0%, #333947 7%, #313844 14%, #303642 21%,
      #2E3440 29%, #2D323E 36%, #2B313B 43%, #2A2F39 50%,
      #292D37 57%, #272C34 64%, #262A32 71%, #242830 79%,
      #23262E 86%, #21252B 93%, #202329 100%);
}

.cidades {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: clamp(3rem, 5vw, 4.5rem);
}
.cidade h3 { display: flex; align-items: baseline; gap: .7rem; }
.cidade h3 span {
  font-family: var(--texto); font-size: .68rem; letter-spacing: .2em;
  /* --pedra dá só 3.0:1 sobre o escuro: serve para fio, não para texto */
  color: var(--papel-suave);
}
.cidade ul { list-style: none; margin: 1.75rem 0 0; padding: 0; }
.cidade ul li {
  border-top: 1px solid color-mix(in srgb, var(--pedra) 40%, transparent);
}
.cidade ul li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--pedra) 40%, transparent); }

/* cada endereço é um link para o Google Maps */
.local {
  display: flex; align-items: center; gap: 1.05rem;
  padding: 1.15rem .75rem 1.15rem 0;
  color: inherit; text-decoration: none;
  border-radius: 4px;
  /* `transform`, não `padding-left`: animar padding é reflow a cada hover, e
     com o anel de foco antes invisível o deslocamento virava o único aviso de
     foco — exatamente o que WCAG 3.2 pede para evitar. */
  transition: background .35s var(--curva), transform .35s var(--curva);
}
.local:hover, .local:focus-visible {
  background: color-mix(in srgb, var(--papel) 7%, transparent);
  transform: translateX(.75rem);
}

/* Mesmo disco dos brasões da formação. Duas famílias de original:
   marca escura sobre branco (disco branco, com folga) e quadrado de cor
   sangrada (o CSS recorta em círculo e a cor da marca vira o disco). */
.local__marca {
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff;
  display: grid; place-items: center;
  padding: 8px;
  overflow: hidden;
}
.local__marca img { max-width: 100%; max-height: 100%; object-fit: contain; }
.local__marca--sangra { padding: 0; }
.local__marca--sangra img { width: 100%; height: 100%; object-fit: cover; max-width: none; max-height: none; }

.local__texto { display: grid; gap: .22rem; min-width: 0; flex: 1 1 auto; }
.cidade strong { font-weight: 400; font-size: 1.02rem; }
/* Escopado no filho direto: `.cidade span` tem (0,1,1) e venceria o
   `.local__mapa` (0,1,0), impondo a ele o tamanho do detalhe. */
.local__texto > span { color: var(--papel-suave); font-size: .88rem; }

/* A nota herda `max-width: 62ch`, o que dava a ela exatamente a largura da
   coluna de Curitiba: o fio de cima caía alinhado com os fios da lista e
   lia como mais um item, vazio. Atravessando as duas colunas, o fio volta
   a ser o que é — o rodapé da seção. */
#locais .nota { max-width: none; margin-top: 4rem; }

.local__mapa {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  /* Sem `opacity` aqui: a 75% o rótulo se mistura ao fundo e cai para
     3.0:1. A diferença de hierarquia já vem do corpo menor e das versais.
     E o tom é o `--papel-hero`, não o `--papel-suave`: este rótulo fica na
     borda direita da coluna, bem em cima da calota do pin, e no tom mais
     escuro caía para 4.3:1 — o mesmo motivo que criou o token na hero. */
  color: var(--papel-hero);
  transition: color .35s var(--curva);
}
.local__mapa .pino { width: .95em; height: .95em; opacity: 1; }
.local:hover .local__mapa, .local:focus-visible .local__mapa { color: var(--papel); }

/* ───────────────────────────────────────────────  contato  ── */

/* O símbolo — o M e o G sobrepostos — é escrito à mão no centro da seção,
   por trás do convite. É marca d'água: fica em opacidade baixa e o texto
   passa por cima. A altura é 90% da seção; a largura vem do viewBox comum
   das duas letras. */
.contato { position: relative; overflow: hidden; }
.contato__monograma {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 90%;
  aspect-ratio: 787 / 649;   /* o viewBox comum das duas letras */
  color: var(--tinta);
  opacity: .07;
}
/* As duas letras compartilham a mesma caixa e o mesmo viewBox: empilhadas,
   remontam o símbolo. Não use flex nem gap aqui — elas não ficam lado a lado. */
.monograma__letra { position: absolute; inset: 0; display: block; }
.monograma__letra svg { width: 100%; height: 100%; }

.contato__interior { position: relative; z-index: 1; max-width: 44rem; }
/* Centralizados na tela: a coluna de 44rem já é centrada pelo `.envelope`,
   então centrar dentro dela basta. E os dois com a mesma largura — o
   `min-width` é ditado pelo rótulo mais longo, não pelo conteúdo de cada um. */
.contato__acoes {
  margin-top: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; flex-wrap: wrap;
}
.contato__acoes .botao { min-width: min(16.5rem, 100%); }

/* Terceiro botão, em linha própria abaixo dos dois preenchidos. Em contorno
   e em corpo normal (não `--grande`): terciário na hierarquia, sem perder o
   alvo de toque. O WhatsApp continua sendo o CTA; o telefone existe porque o
   público é adulto e idoso e nem todo mundo escreve. --tinta sobre --papel
   dá 11.3:1. */

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

/* Fecho, não seção: uma faixa estreita com o nome e os registros. A logo
   sai porque ela já abre a página na navbar. */
.rodape { background: var(--tinta); color: var(--papel); padding-block: 1.6rem; }
.rodape__interior {
  display: flex; flex-direction: column; align-items: center;
  gap: .45rem; text-align: center;
}
.rodape__nome {
  font-family: var(--display); font-weight: 300;
  text-transform: uppercase; letter-spacing: .16em;
  font-size: 1.02rem;
}
.rodape__registros {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--papel-suave);
}


/* ────────────────────────────────────  whatsapp flutuante  ── */

.flutuante {
  position: fixed; right: clamp(1rem, 2.5vw, 1.9rem); bottom: clamp(1rem, 2.5vw, 1.9rem);
  z-index: 90;
  display: flex; align-items: center; gap: .8rem;
  text-decoration: none; color: var(--tinta);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .5s var(--curva), transform .5s var(--curva), visibility .5s;
}
.flutuante--visivel { opacity: 1; visibility: visible; transform: none; }

.flutuante__balao {
  display: flex; align-items: center; gap: .55rem;
  background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--pedra) 45%, transparent);
  border-radius: 999px;
  padding: .55rem 1.05rem .55rem .6rem;
  font-size: .88rem; white-space: nowrap;
  box-shadow: 0 8px 24px rgb(39 45 59 / .13);
}
.flutuante__selo {
  flex: 0 0 auto;
  width: 26px; height: 26px; padding: 5px;
  background: var(--musgo); color: var(--papel);
  border-radius: 50%; box-sizing: border-box;
}

.flutuante__retrato {
  position: relative; display: block;
  width: 62px; height: 62px; border-radius: 50%;
  box-shadow: 0 8px 24px rgb(39 45 59 / .22);
  transition: transform .4s var(--curva);
}
.flutuante__retrato img { border: 2px solid var(--papel); }
.flutuante:hover .flutuante__retrato { transform: scale(1.05); }
.flutuante__retrato img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}

/* ─────────────────────────────────────────────  animações  ── */
/* Só escondem quando o JS está vivo — sem JS, tudo nasce visível. */

.js .entra, .js .revela {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.6s var(--curva-lenta), transform 1.6s var(--curva-lenta);
}
.js .entra--dentro, .js .revela--visivel { opacity: 1; transform: none; }

/* Cada região entra por conta própria conforme o scroll, e por partes:
   primeiro a bolinha, que cresce no fio, depois o título, depois a lista.
   O contêiner não anima — se ele também fizesse fade, as opacidades se
   multiplicariam e os dois deslocamentos somariam. Daí ele ser neutralizado
   aqui, com especificidade acima da regra genérica de `.revela`. */
.js .regiao.revela { opacity: 1; transform: none; transition: none; }

.js .regiao::before,
.js .regiao > h3,
.js .regiao > ul {
  opacity: 0;
  transition: opacity 1.6s var(--curva-lenta), transform 1.6s var(--curva-lenta);
}
.js .regiao::before { transform: scale(.2); }
.js .regiao > h3 { transform: translateY(22px); transition-delay: .22s; }
.js .regiao > ul { transform: translateY(22px); transition-delay: .44s; }

.js .regiao.revela--visivel::before,
.js .regiao.revela--visivel > h3,
.js .regiao.revela--visivel > ul { opacity: 1; transform: none; }

/* ───────────────────────────────────────────  responsivo  ── */

/* No desktop a lista das regiões ocupa só a metade esquerda: o resto da
   faixa é da ressonância. O `min()` mantém a folga também em telas de
   ~1100px, onde 30rem já encostaria na imagem. */
@media (min-width: 1001px) {
  .regiao ul { max-width: min(30rem, 44%); }
}

@media (max-width: 1000px) {
  .oncologia ul { columns: 1; }
}

/* Numa coluna estreita o rótulo disputa largura com o nome do hospital e
   o "Hospital Evangélico Mackenzie" quebra em duas linhas espremidas.
   Aqui ele desce para baixo do nome, alinhado com ele. */
@media (max-width: 640px) {
  .local { flex-wrap: wrap; row-gap: .5rem; }
  .local__texto { flex: 1 1 60%; }
  .local__mapa {
    flex: 1 0 100%;
    padding-left: calc(52px + 1.05rem);
  }
  /* o fio da lista já fecha a seção; um segundo fio logo abaixo, da mesma
     largura, lia como um item vazio */
  #locais .nota { border-top: 0; padding-top: 0; margin-top: 2.75rem; }
}

@media (max-width: 900px) {
  .cidades { grid-template-columns: 1fr; }
  .formacao__corpo { max-width: none; }
  /* sem largura para ela funcionar como plano de fundo, a foto só atrapalha */
  .formacao__retrato { display: none; }
  .formacao { background: var(--papel); }
}

@media (max-width: 820px) {
  :root { --nav: 76px; }

  /* Numa coluna estreita a seção fica alta e 90% da altura joga o símbolo
     para fora dos dois lados da tela — ele deixa de ser reconhecível. Aqui
     quem manda é a largura; a altura vem do aspect-ratio. */
  .contato__monograma { height: auto; width: 88%; }

  /* a barra é sempre clara no mobile, então vale sempre a logo azul */
  .navbar {
    background: var(--papel);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--pedra) 30%, transparent);
  }
  .navbar__logo img { width: clamp(186px, 52vw, 232px); }
  .navbar__logo--claro  { opacity: 0; }
  .navbar__logo--escuro { opacity: 1; }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    background: linear-gradient(168deg, #1E2431 0%, var(--tinta) 55%, #333B4D 100%);
  }
  /* nada de cortar a cabeça: a foto entra na proporção original,
     abaixo da navbar, e só se dissolve no azul por baixo. */
  /* `relative`, não `static`: o ::after com inset:0 precisa se ancorar na
     foto. Estático, ele se ancorava na hero inteira e o gradiente de
     dissolução caía fora da imagem — a foto cortava numa linha dura. */
  .hero__retrato { position: relative; min-height: 0; height: auto; padding-top: var(--nav); }
  .hero__retrato picture { height: auto; }
  /* A caixa é quadrada: corta as laterais da foto (1,5x de aproximação) e
     assim a cabeça, que na imagem 3:2 está em 39,6% da largura, cai no meio.
     Esse enquadramento antes era feito aqui por `object-position: 19% 50%`
     (de p = 3f − 1) sobre a foto 3:2 inteira — o que jogava fora um terço
     dos pixels do arquivo e deixava a foto visivelmente mole no retina.
     Agora quem entrega o recorte é o build (`hero-mobile-*.webp`, já
     quadrada), então o `cover` não corta mais nada e o centro serve.
     Se mexer no enquadramento, mexa no `crop` do build-assets.sh. */
  .hero__retrato img { aspect-ratio: 1 / 1; height: auto; object-position: 50% 50%; }
  .hero__retrato::after {
    background: linear-gradient(to bottom,
      rgb(39 45 59 / .16)  0%, rgb(39 45 59 / .04) 10%, rgb(39 45 59 / 0) 22%,
      rgb(39 45 59 / .06) 40%, rgb(39 45 59 / .16) 52%, rgb(39 45 59 / .30) 62%,
      rgb(39 45 59 / .48) 71%, rgb(39 45 59 / .66) 79%, rgb(39 45 59 / .82) 86%,
      rgb(39 45 59 / .93) 92%, rgb(39 45 59 / .98) 96%, rgb(39 45 59 / 1) 100%);
  }
  .hero__texto {
    grid-column: 1;
    padding: 0 1.25rem 4.5rem;
    margin-top: -5%;
    justify-self: stretch;
    max-width: none;
  }
  .hero__chamada { max-width: none; }
  /* sobre a foto, o tom suave não alcança contraste: aqui vale o claro cheio */
  .hero .sobrancelha { color: var(--papel); }
  .hero__retrato img { transform: none; }

  /* Cada frase numa linha só: duas linhas no total, e a hero encolhe junto. */
  .hero__titulo { font-size: clamp(1.5rem, 7.1vw, 1.95rem); }

  /* empilhado, o símbolo fica centralizado e desmaia para as duas bordas */
  .hero__marca {
    height: auto; width: 112%;
    left: 50%; right: auto; top: 52%; transform: translate(-50%, -50%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 38%, transparent 82%);
            mask-image: radial-gradient(ellipse at center, #000 38%, transparent 82%);
  }
  /* Mesmo tratamento do painel do menu: a imagem toma a largura da tela e é
     recortada por `cover`, no mesmo enquadramento (`object-position: 26%`),
     em vez de flutuar como figura solta. A altura continua sendo a da régua,
     de "crânio" a "tórax". Aqui ela fica sobre papel claro e por baixo do
     texto, então no lugar do `brightness(.52)` do menu quem segura a
     legibilidade é a opacidade. O fade das quatro bordas vem da regra base. */
  .especialidades__marca {
    top: 0; bottom: 0; left: auto; right: calc(50% - 50vw);
    transform: none;
    height: 100%; width: 100vw;
    object-fit: cover; object-position: 26% 50%;
    filter: contrast(1.22);
    /* Aqui o texto passa POR CIMA da imagem em toda a largura, coisa que não
       acontece no menu (lá o painel só tem os links) nem no desktop (lá a lista
       fica na metade esquerda, fora dela). O teto que mantinha 4.5:1 era .11;
       a .22 a lista fica em ~3.5:1 sobre a massa escura do crânio. Valor
       escolhido a olho, a pedido. */
    opacity: .22;
  }

  /* Numa coluna alta e estreita, 92% da altura faz o pin cobrir o texto todo
     e virar um borrão sem forma. Aqui ele é dimensionado pela largura e vai
     para a folga do canto inferior direito. */
  .locais__marca {
    top: auto; bottom: 2%; transform: none;
    right: -10%;
    height: auto; width: 78%;
    opacity: .08;
  }

  /* menu vira painel */
  .navbar__botao {
    display: flex; align-items: center; gap: .6rem;
    background: none; border: 0; padding: .5rem 0; cursor: pointer;
    font-family: var(--texto); font-size: .8rem;
    text-transform: uppercase; letter-spacing: .16em;
    color: var(--tinta);
    z-index: 2;
  }
  .navbar__botao-traco { position: relative; width: 22px; height: 9px; }
  .navbar__botao-traco::before, .navbar__botao-traco::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 1px;
    background: currentColor; transition: transform .35s var(--curva);
  }
  .navbar__botao-traco::before { top: 0; }
  .navbar__botao-traco::after  { bottom: 0; }
  .navbar__botao[aria-expanded="true"] { color: var(--papel); }
  .navbar__botao[aria-expanded="true"] .navbar__botao-traco::before { transform: translateY(4px) rotate(45deg); }
  .navbar__botao[aria-expanded="true"] .navbar__botao-traco::after  { transform: translateY(-4px) rotate(-45deg); }

  .menu {
    /* o painel é escuro dentro de uma navbar que no mobile é sempre clara:
       sem isto os seis alvos daqui herdariam o anel --musgo, em 1.59:1 */
    --foco: var(--papel);
    position: fixed; inset: 0;
    background: var(--tinta);
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 2.5rem;
    padding: 2rem clamp(1.25rem, 8vw, 4rem);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .4s var(--curva), transform .4s var(--curva), visibility .4s;
  }
  .menu--aberto { opacity: 1; visibility: visible; transform: none; }

  /* O painel É a ressonância: corte sagital do pescoço, o território do
     próprio médico, do crânio ao tórax. O azul entra por cima em blend
     `color`, que toma a luminância da imagem e a cor da tinta — o resultado
     é monocromático azul, sem lavar a anatomia. O brightness no filtro
     existe só para o texto do menu manter contraste. */
  .menu { isolation: isolate; }
  .menu__rm {
    display: block; position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: 26% 50%;
    filter: contrast(1.22) brightness(.52);
    /* deixa o azul da seção subir nos pretos: o painel fica da família
       da marca em vez de preto puro */
    opacity: .8;
    pointer-events: none;
  }
  .menu::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: var(--tinta);
    mix-blend-mode: color;
    pointer-events: none;
  }
  .menu__lista, .menu .botao { position: relative; z-index: 2; }

  /* Depois do scroll a navbar fica clara e os links dela viram escuros.
     O painel aberto é escuro, então aqui eles voltam a ser claros — e o
     seletor precisa da mesma especificidade da regra que o escureceu. */
  .navbar--assentada .menu__lista a { color: var(--papel); }
  .navbar--assentada .menu .botao {
    background: var(--papel); color: var(--tinta); border-color: var(--papel);
  }
  .menu__lista { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
  .menu__lista a {
    color: var(--papel);
    font-family: var(--display); font-size: 1.9rem;
    text-transform: uppercase; letter-spacing: .07em;
  }
  .navbar--menu-aberto .navbar__logo { opacity: 0; pointer-events: none; }
  .menu .botao { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .territorio { padding-left: 2.25rem; }
  .regiao::before { left: -2.25rem; }
  .territorio__extremo { margin-left: -2.25rem; }
  /* sem espaço para a frase: fica só o ícone, como pastilha própria,
     afastado da foto em vez de colado nela */
  .flutuante { gap: .6rem; }
  .flutuante__texto { display: none; }
  .flutuante__balao { padding: .5rem; border-radius: 50%; }
  .flutuante__selo { width: 30px; height: 30px; padding: 6px; }
  .rodape__registros { line-height: 1.7; }
}

/* ────────────────────────────────────────  movimento off  ── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .entra, .js .revela { opacity: 1; transform: none; transition: none; }
  .js .regiao::before, .js .regiao > h3, .js .regiao > ul {
    opacity: 1; transform: none; transition: none;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    /* sem zerar o delay, `.regiao > ul` (.44s) e os delays inline do JS ainda
       deixavam o elemento invisível por meio segundo antes de surgir de uma vez */
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
}

/* ─────────────────────────────────────────────  impressão  ── */

/* Sem isto, imprimir a página sai em branco: tudo que ainda não foi rolado
   continua em `opacity: 0`, porque o observador só revela o que entrou na
   tela. Paciente que imprime o endereço para levar não pode receber papel
   vazio. */
@media print {
  .js .entra, .js .revela,
  .js .regiao::before, .js .regiao > h3, .js .regiao > ul {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .flutuante, .navbar, .pular, body::after,
  .hero__marca, .contato__monograma, .especialidades__marca,
  .locais__marca, .oncologia__marca, .menu__rm { display: none !important; }
  .hero, .secao, .rodape { padding-block: 1.5rem; }
  /* o URL de cada link, para o papel não perder o destino */
  .local::after { content: " (" attr(href) ")"; font-size: .7rem; word-break: break-all; }
}