/* ==========================================================================
   LP Dra. Maria Luísa Marques — Pneumologia Pediátrica, Belo Horizonte
   Esboço. HTML semântico + CSS com custom properties, sem framework e sem
   build (P-14). Nada externo: fonte de sistema, imagem auto-hospedada.
   Paleta do guia de marca dela: #3f96a2 e #f1f9fc.
   ========================================================================== */

:root {
  /* Marca */
  --teal:        #3f96a2;
  --teal-deep:   #2b6f79;
  --teal-dark:   #1e5259;
  --ice:         #f1f9fc;
  --ink:         #1d1e20;
  --ink-soft:    #56585e;
  --line:        #dceaef;
  --white:       #ffffff;

  /* Verdes do WhatsApp para os CTAs. ⚠️ NÃO é o #25D366 do ícone: com texto
     branco ele mede 1,98:1, e o botão tem 15,5px, que é texto normal e exige
     4,5:1. Nem o #128C7E, que dá 4,14. Estes três são a faixa escura da marca,
     que é a única que carrega branco. */
  --wa-vale:     #075E54;   /* 7,67:1 com branco */
  --wa-meio:     #0B6E62;
  --wa-pico:     #0E7A6E;   /* 5,21:1 sozinho; 4,66 com o brilho por cima */

  /* Escala */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-full: 999px;

  --shadow-sm: 0 2px 10px rgba(30, 82, 89, .06);
  --shadow-md: 0 12px 34px rgba(30, 82, 89, .10);
  --shadow-lg: 0 24px 60px rgba(30, 82, 89, .16);

  --wrap: 1180px;
  --gutter: 24px;

  --font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3, h4 {
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 600;
}

p { margin: 0; }

.wrap {
  /* ⚠️ Sem `height` aqui. O quarto e último lugar onde o bbf1580 colou a
     correção da figura 3D da bio: o `.wrap` chegou a carregar `height: 129.5%`
     e o comentário sobre clip-path, num contêiner que não tem figura nenhuma.
     Ficou inerte por sorte — altura em porcentagem contra pai de altura
     automática é ignorada, e toda seção tem altura automática. Bastava um pai
     com altura definida para a coluna inteira da página deformar. */
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding: 88px 0; }
.section--ice { background: var(--ice); }

.section__head { max-width: 640px; margin-bottom: 44px; }
.section__head h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

/* Acabamento metálico nos títulos de seção (fundador, 2026-08-15). É o mesmo
   efeito que o h1 do hero já usava desde 2026-08-10, agora estendido.
   `color` fica declarado antes como reserva: se background-clip:text não for
   suportado, o título cai para tinta sólida em vez de sumir.

   📏 Contraste: estes títulos são clamp(1.7rem …), ou seja, 27,2px no mínimo,
   com peso 600. Isso é TEXTO GRANDE na WCAG, e o mínimo passa a ser 3:1 e não
   4,5:1. Mesmo assim as paradas foram escolhidas para passar no critério mais
   duro sobre os dois fundos claros: a mais clara, #12707f, mede 5,75:1 sobre
   branco e 5,40:1 sobre --ice.
   A parada #1a7d90 do hero NÃO foi reaproveitada aqui: ela dá 4,50:1 sobre
   --ice, exatamente em cima do limite, e duas seções (casos e formas) são de
   gelo. O hero é branco, então lá ela continua. */
.section__head h2,
.bio h2 {
  color: var(--teal-dark);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .section__head h2,
  .bio h2 {
    background-image: linear-gradient(100deg,
      #0a3f4a  0%,
      #12707f 14%,
      #0d5361 30%,
      #0a4d5a 42%,
      #12707f 58%,
      #0d5361 74%,
      #12707f 88%,
      #0a3f4a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.section__head p {
  margin-top: 14px;
  color: var(--ink-soft);
  font-size: 1.03rem;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-full);
  font-weight: 600;
  font-size: .97rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }

/* Botão de WhatsApp: verde da marca, com o mesmo acabamento metálico da faixa
   do hero e dos títulos. Todos os 8 CTAs que abrem conversa usam esta classe;
   o "Ver casos atendidos" é outline e segue teal, porque não é WhatsApp.

   🔴 O teto de claridade é conta, não gosto. O pico #0E7A6E mede 5,21:1 com
   branco sozinho e 4,66:1 com o brilho de 6% por cima — o mínimo é 4,5 porque
   o rótulo tem 15,5px, que é texto normal. Clarear o pico ou engrossar o
   brilho derruba o conjunto.
   Registro de passagem: o teal que estava aqui media 3,45:1 e já reprovava. */
.btn--primary {
  color: var(--white);
  background-image:
    /* Só o brilho diagonal e as arestas. O escovado de riscas verticais que a
       faixa do hero usa foi TIRADO daqui em 2026-08-15: numa chapa de 45px de
       altura as riscas de 1px a cada 4 não leem como metal escovado, leem como
       listras brancas — foi o que o fundador viu. Na faixa do hero elas
       funcionam porque a superfície é larga e o texto passa por cima delas em
       movimento; num botão pequeno e parado, cada risca é uma linha. */
    linear-gradient(101deg, transparent 34%, rgba(255, 255, 255, .06) 47%, rgba(255, 255, 255, .06) 53%, transparent 66%),
    linear-gradient(101deg,
      var(--wa-vale)  0%,
      var(--wa-meio) 17%,
      var(--wa-pico) 30%,
      var(--wa-vale) 48%,
      var(--wa-meio) 64%,
      var(--wa-pico) 79%,
      var(--wa-vale) 100%);
  background-size: 220% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  /* aresta de cima acesa e a de baixo na sombra: o que dá espessura à chapa */
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, .20),
    inset 0 -1px 0 rgba(0, 0, 0, .26),
    0 8px 22px rgba(7, 94, 84, .32);
  transition: transform .15s ease, box-shadow .15s ease, background-position .45s ease;
}
/* O hover DESLIZA o brilho em vez de clarear a base. Clarear subiria a
   luminância e derrubaria o contraste que a conta acima deixou no limite. */
.btn--primary:hover { background-position: 0 0, 0 0; }

/* Versão do cabeçalho: mesmo material, metade do volume.
   O botão da barra fica GRUDADO na tela o tempo todo, e o halo que funciona
   num CTA de fim de dobra vira zumbido quando acompanha a rolagem. Some o
   brilho externo, some o salto do hover e o corpo encolhe. O que fica é a
   chapa verde com as duas arestas — mesmo material, para não parecer outro
   botão, e sem grito.
   A hierarquia dos CTAs fica explícita: barra < seção < fim da página. */
.btn--barra {
  padding: 10px 20px;
  font-size: .88rem;
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .22);
}
.btn--barra:hover {
  transform: none;
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, .20),
    inset 0 -1px 0 rgba(0, 0, 0, .24),
    0 2px 10px rgba(7, 94, 84, .18);
}

.btn--outline {
  background: transparent;
  color: var(--teal-dark);
  border-color: var(--teal);
}
.btn--outline:hover { background: var(--teal); color: var(--white); }

/* O CTA do fim da página. Maior que os outros sete, e com o mesmo halo dos
   marcadores 01/02/03 da linha do tempo: o destaque vem da linguagem daquela
   dobra, não de um efeito inventado só para ele.
   O `0 0 0 6px` é anel sólido de baixa opacidade e não desfoque: é o que
   sustenta a aresta do botão quando o segundo brilho, que é largo e difuso,
   se dissolve no branco da seção. */
.btn--grande {
  padding: 18px 40px;
  font-size: 1.06rem;
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, .20),
    inset 0 -1px 0 rgba(0, 0, 0, .26),
    0 0 0 6px rgba(7, 94, 84, .10),
    0 12px 32px rgba(7, 94, 84, .38);
}
.btn--grande:hover {
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, .20),
    inset 0 -1px 0 rgba(0, 0, 0, .26),
    0 0 0 8px rgba(7, 94, 84, .14),
    0 16px 40px rgba(7, 94, 84, .44);
}

/* ---------- Cabeçalho ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}
/* Logotipo, nome, e só então as seções. O logotipo some sozinho quando o
   arquivo não existe: o PHP não emite a <img>. */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex: 0 0 auto;
  white-space: nowrap;
}
.brand__logo {
  height: 56px;
  width: auto;
  flex: 0 0 auto;
}
.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  padding-left: 14px;
  border-left: 1px solid var(--line);
}
.brand:not(:has(.brand__logo)) .brand__text {
  padding-left: 0;
  border-left: 0;
}
.brand__name {
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--teal-dark);
  letter-spacing: -0.01em;
}
.brand__role {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--ink-soft);
  font-weight: 500;
}

/* ⚠️ O gap de 16 e a fonte de .82rem NÃO são estética, são a conta que faz o
   cabeçalho caber. O wrap tem 1180 de largura útil (1132 fora o respiro), e os
   três filhos pedem: marca 276 + nav + botão 206, mais 48 dos dois gaps.
   Com gap 22 e .88rem a nav mede 640 e o total vai a 1218 — 38 além do wrap,
   ou seja, o botão saía da coluna do texto MESMO em 1440, e abaixo de 1256 o
   excedente passava da tela e a página inteira ganhava rolagem horizontal
   (era o 🔴 da banda 980–1293). Com estes valores a nav mede 583, o total dá
   1161 e sobram 19px. Mexeu em rótulo de nav, refaça a conta. */
.nav { display: flex; gap: 16px; }
.nav a {
  text-decoration: none;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover { color: var(--teal-dark); border-bottom-color: var(--teal); }

/* ---------- Hero ---------- */
/* Fundo branco com degrade suave de brancos (fundador, 2026-08-10). A troca
   inverte o hero inteiro: o texto era branco sobre teal e passou a ser escuro
   sobre branco, entao credencial, identificacao, botao secundario e pilulas
   foram refeitos junto. Trocar so o background deixaria texto branco no branco. */

.hero {
  position: relative;
  background:
    radial-gradient(760px 620px at 74% 42%, rgba(63,150,162,.10), transparent 68%),
    radial-gradient(900px 500px at 8% 0%, rgba(241,249,252,.9), transparent 60%),
    linear-gradient(176deg, #ffffff 0%, #fbfdfe 34%, var(--ice) 72%, #ffffff 100%);
  color: var(--ink);
  overflow: hidden;
  padding-top: 34px;
}
/* linha tenue separando do cabecalho, ja que os dois sao brancos */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
  opacity: .6;
}

.hero__grid {
  display: grid;
  grid-template-columns: .84fr 1.16fr;
  gap: 28px;
  align-items: end;
  position: relative;
  z-index: 2;
}

/* A coluna de texto centra-se na vertical, enquanto a foto segue ancorada na
   base. Antes as duas alinhavam pela base, o que funcionava com o bloco de
   credencial ocupando espaco; sem ele o texto ficaria despencado no rodape do
   hero com um vazio grande em cima. */
.hero__copy {
  align-self: center;
  /* O padding-bottom compensa o padding-top de 34px do .hero: centrar dentro
     da linha da grade deixaria o texto 17px abaixo do centro ÓPTICO do hero,
     porque a grade comeca 34px depois do topo dele. Medido, nao estimado. */
  padding-bottom: 34px;
}

/* H1 com o mesmo acabamento metálico da marca d'água (fundador, 2026-08-10),
   mas com a faixa de luminância comprimida para baixo, e isso não é liberdade
   minha: as paradas claras do gradiente decorativo (#3ad2e6, #5fe2f2) dão
   1.8:1 e 1.5:1 sobre branco, ou seja, título ilegível. Aqui a parada mais
   clara é #1a7d90, que mede 4.79:1 (o pior caso do gradiente inteiro), acima do mínimo AA de 4.5 para texto
   normal. A modulação metálica é a mesma; o que muda é o teto.
   `color` fica declarado antes como reserva: se background-clip:text não for
   suportado, o título cai para tinta sólida em vez de sumir. */
.hero h1 {
  font-size: clamp(2.05rem, 3.45vw, 3.05rem);
  font-weight: 600;
  max-width: 21ch;
  text-wrap: balance;
  color: var(--ink);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .hero h1 {
    background-image: linear-gradient(100deg,
      #0a3f4a  0%,
      #12707f 12%,
      #1a7d90 22%,
      #0d5361 34%,
      #0a4d5a 44%,
      #1a7d90 56%,
      #12707f 64%,
      #0d5361 76%,
      #12707f 88%,
      #0a3f4a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* Faixa etaria: h2 do hero por decisao do fundador (2026-08-10). E subtitulo,
   nao titulo de secao, entao tem peso proprio e nao herda a escala dos h2. */
.hero__sub {
  margin-top: 14px;
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  font-weight: 500;
  color: var(--teal-dark);
  letter-spacing: -0.01em;
  max-width: 44ch;
  text-wrap: balance;
}

.hero__lede {
  margin-top: 22px;
  font-size: 1.02rem;
  color: var(--ink-soft);
  max-width: 46ch;
}

.hero__actions {
  margin-top: 34px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Identificacao CFM no hero (Art. 4o). Sem diferenca de fonte, tamanho ou cor
   entre as linhas: so o nome muda de peso, o que o artigo permite. */
.crm {
  /* afastada do resto de proposito: e bloco legal (Art. 4o), nao continuacao
     da copy, e o espaco maior e o que sinaliza isso sem precisar de moldura */
  margin-top: 40px;
  font-size: .86rem;
  line-height: 1.7;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: .01em;
}
.crm strong { font-weight: 600; color: var(--ink); }

/* A foto ocupa quase toda a altura do hero (fundador). */
.hero__figure {
  position: relative;
  align-self: end;
  min-height: 748px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /* avanca sobre parte da calha direita do wrap: da tamanho a foto sem
     espremer a coluna de texto na mesma proporcao. O .hero tem
     overflow:hidden, entao isto nao gera barra horizontal. */
  margin-right: -96px;
}
.hero__photo {
  /* ⚠️ `width: 100%`, e não `width: auto` com altura forçada. O arquivo é
     900x900: com a largura automática ela vinha da altura e batia no
     max-width, travando a foto em 780x780 FIXOS. Num celular de 375px isso é
     o dobro da tela — e como o .hero__figure é item de grade com min-width
     automático, o min-content de 780px inflava a coluna inteira e o hero
     inteiro passava a medir 780. Era daí que vinha o corte do "Ver casos
     atendidos", não de falta de min-width: 0.
     Entrou por engano em bbf1580, junto com a correção da figura 3D da bio —
     aquela é medida pela altura porque precisa tocar a base de um card. Esta
     não tem card nenhum: ela é ancorada na base do próprio hero. */
  width: 100%;
  max-width: 780px;
  filter: drop-shadow(0 32px 58px rgba(30, 82, 89, .22));
  position: relative;
  z-index: 2;
}
/* Marca d'agua do hero (fundador, 2026-08-10). Substituiu o disco borrado que
   ficava atras da medica.
   Usa SO O SIMBOLO (pulmoes com as tres figuras), nao o selo completo: sem
   anel e sem texto em arco, decidido pelo fundador em 2026-08-10. Em tamanho
   muito maior que a pagina, sangrando para fora de proposito: so uma fracao
   aparece, e o resto e cortado pelo overflow:hidden do .hero. Fica em
   z-index 0, e o .hero__grid esta em 2, entao ela cai atras do texto E da foto.
   A cor e a do proprio simbolo (#3f96a2, o azul do guia de marca dela): a
   imagem nao e recolorida, so esmaecida e desfocada. */
/* A geometria e escolhida, nao chutada:
   largura 130vw  -> sempre maior que a pagina, em qualquer tela
   right: -58%    -> a borda direita passa 58vw do fim do hero, entao sobra
                     130 - 58 = 72vw dentro, que sao 55% da largura da marca
   top: -48%      -> ela cobre a altura toda do hero, cortada em cima e embaixo
   Era -78% / 40% ate 2026-08-10; o fundador pediu mais marca a mostra.
   Como fracao de AREA o numero e sempre menor, e e inevitavel: uma marca maior
   que a pagina nunca tem metade da sua area dentro dela. Os 55% sao do
   diametro, que e o que se enxerga. */
.hero__marca {
  position: absolute;
  z-index: 0;
  top: -48%;
  right: -58%;
  width: 130vw;
  aspect-ratio: 1 / 1;
  /* SVG, nao PNG: o tracado e vetor, entao nao existe mais esticada de raster
     e o desfoque deixou de ser necessario. Era ele que fazia a marca parecer
     de baixa qualidade, porque so estava la para esconder os 7x de ampliacao. */
  background: url("../img/logo-simbolo-tracado.svg") center / contain no-repeat;
  /* subiu de .5 para .68 junto com o gradiente mais saturado: a 50% sobre
     branco, mesmo um azul forte lava e lê como cinza. Era metade do problema
     do "parece cinza"; a outra metade era a saturação baixa do gradiente. */
  opacity: .68;
  pointer-events: none;
}

/* Fade na extremidade inferior da marca (fundador, 2026-08-10).
   Ancorado na base do HERO, e não na da imagem, e isso é o ponto: a marca tem
   1872px de altura contra 782px do hero, descendo 715px abaixo dele. Uma
   máscara em porcentagem da própria imagem cairia fora da tela e não faria
   efeito nenhum; o que se vê cortado é o overflow:hidden do hero.
   O alvo do degradê é branco puro porque é exatamente a última parada do
   gradiente de fundo do hero (medido: rgb(255,255,255)), então a linha
   dissolve no fundo em vez de clarear sobre ele.
   z-index 1: acima da marca (0), abaixo do conteúdo (2). Não toca a foto
   nem o texto. */
.hero__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 240px;
  z-index: 1;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, .55) 45%,
    rgba(255, 255, 255, .92) 78%,
    #ffffff 100%);
  pointer-events: none;
}

/* As pilulas flutuantes (.pill) e o ponto (.dot) foram removidos em
   2026-08-10 a pedido do fundador, junto com o HTML delas. */

/* ---------- Faixa corrida dos sinais ---------- */
/* Substituiu o cartão flutuante de quatro células em 2026-08-15 (fundador).
   Mesmo mecanismo do Paulo e do Marcelo: pista em inline-flex com o conteúdo
   DUPLICADO, andando -50%. A segunda cópia entra exatamente onde a primeira
   sai, então o laço não tem emenda. Só transform, logo roda no compositor.

   Uma diferença que importa em relação àquelas duas páginas: lá a faixa repete
   credencial que já está escrita em outro lugar, e por isso o bloco inteiro vai
   com aria-hidden. AQUI o conteúdo é único — estes quatro sinais não aparecem
   em mais nenhum ponto da página, e são o vocabulário que a mãe digita na
   busca. Então só a SEGUNDA cópia é escondida; a primeira continua legível para
   leitor de tela e para buscador. */
/* Acabamento de metal (fundador, 2026-08-15). Duas camadas empilhadas: faixas
   diagonais de luz e sombra (o reflexo) e um brilho que atravessa devagar (o
   .marquee::before).

   ⚠️ NÃO REPOR AS RISCAS VERTICAIS. Havia uma terceira camada de escovado, um
   repeating-linear-gradient de 1px a cada 4, e o fundador a mandou tirar duas
   vezes: dos botões em 9242f12 e daqui. Ela não lê como metal escovado, lê
   como listras brancas — o que ela é. Metal aqui é o reflexo diagonal mais as
   duas arestas, e isso basta.

   🔴 A COR E O TAMANHO DA LETRA ESTÃO AMARRADOS. Mexer num sem refazer a conta
   do outro reprova a faixa na WCAG, e o defeito é invisível a olho.

   O fundador pediu o azul da marca em 2026-08-15. Ele não cabia com a letra
   que estava aqui: o texto tinha 14,7px em peso 600, o que é texto NORMAL e
   exige 4,5:1, e branco sobre o --teal (#3f96a2) mede 3,45:1 chapado e 2,85:1
   com as camadas por cima. Com aquela letra o azul máximo era #2d6b73 — 71%
   do --teal, ou seja, o que já estava no ar.
   O que destravou foi a letra virar GRANDE na régua (19,2px em peso 700, acima
   dos 18,66px que a norma pede para peso bold). O limiar cai para 3:1 e o pico
   pode ir a #3b8c97, que é 93% do --teal.

   A rampa inteira foi remapeada mantendo o MATIZ do --teal (187,3°) e a
   posição relativa de cada parada, então o desenho do reflexo é o mesmo — só
   subiu de faixa. Medido no pior pixel (parada + brilho de 10% no auge):
   3,33:1 no pico e 4,57:1 no vale. Chapado, sem o brilho, 3,90 e 5,65.
   Eram 3,15 e 4,25 enquanto havia a risca de 4%: tirá-la devolveu folga, e é
   por isso que a margem sobre os 3:1 hoje é confortável e não raspando.

   Os ícones são objeto gráfico e exigem 3:1: o #b8e4ea que estava aqui mede
   2,43:1 sobre o pico novo e reprovou, então eles foram para branco (3,33:1).

   Subir o pico, clarear o brilho ou DIMINUIR A LETRA derruba o conjunto. As
   três coisas se somam. */
.marquee {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(101deg,
      #2f7079  0%,
      #337a84  8%,
      #3b8c97 16%,
      #2f7079 27%,
      #36808a 38%,
      #3b8c97 48%,
      #30737c 59%,
      #3b8c97 71%,
      #337a84 83%,
      #2f7079 100%);
  /* aresta de cima acesa e a de baixo na sombra: é o que dá espessura à chapa */
  box-shadow:
    inset 0  1px 0 rgba(255, 255, 255, .20),
    inset 0 -1px 0 rgba(0, 0, 0, .28);
  /* esmaece nas pontas: sem isso o texto nasce e morre com corte seco */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* O brilho que passa. Fica ABAIXO do texto (a pista ganha z-index) de
   propósito: por cima ele também clarearia as letras, e a conta de contraste
   acima pressupõe que o brilho está no fundo. */
.marquee::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(101deg,
    transparent 40%,
    rgba(255, 255, 255, .10) 48%,
    rgba(255, 255, 255, .10) 52%,
    transparent 60%);
  background-size: 300% 100%;
  animation: reflexo 7s linear infinite;
}
@keyframes reflexo { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.marquee__pista {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 17px 0;
  /* 79s, e o número é derivado, não escolhido: a meia-pista mede 4263px, e
     4263/79 dá ~54px/s, que é a velocidade calibrada desde o início.
     Era 64s enquanto a letra tinha 14,7px. Ao subir para 19,2px a pista foi de
     6894 para 8525 (24% a mais) e a faixa passou a correr a 66,6px/s sem que
     ninguém tivesse pedido isso — mexer no TAMANHO da letra mexe na velocidade
     tanto quanto mexer na lista de sinais. Se qualquer um dos dois mudar,
     recalcule: duração = (largura da pista ÷ 2) ÷ 54. */
  animation: mq 79s linear infinite;
  will-change: transform;
}
/* As cópias precisam ser inline-flex, e não spans comuns: .mq-icone é `flex:
   none` e o svg dentro dele tem width e height, que um inline trata de outro
   jeito. Num span simples os ícones das cópias mudariam de tamanho e o
   espaçamento andaria no meio do laço, denunciando a emenda. */
.marquee__copia { display: inline-flex; align-items: center; }
/* A pausa no hover existe para quem tem MOUSE: passar por cima para terminar
   de ler um sinal. Em tela de toque não há "passar por cima" — o navegador
   aplica :hover no toque e não o tira, então um toque acidental parava a faixa
   de vez, e ela só voltava quando a pessoa tocasse em outro lugar. Foi o que o
   fundador viu no celular em 2026-08-15.
   `hover: hover` sozinho não basta: alguns Android respondem `hover: hover` no
   ponteiro grosso. O par com `pointer: fine` é o que descreve mouse de fato. */
@media (hover: hover) and (pointer: fine) {
  .marquee:hover .marquee__pista { animation-play-state: paused; }
}
@keyframes mq { to { transform: translateX(-50%); } }

/* O sinal é o único texto da faixa desde 2026-08-15, então subiu de registro:
   era o rótulo pequeno de um par, agora carrega a linha sozinho. Branco puro
   dá 8,73:1 sobre --teal-dark. */
.mq-sinal {
  /* ⚠️ 1,2rem = 19,2px e peso 700 NÃO são escolha estética: são o que faz este
     texto contar como GRANDE na WCAG (≥18,66px em bold), e é isso que permite
     o azul da marca no fundo. Ver a conta no cabeçalho de .marquee. Peso 600 é
     semibold e não vale; abaixo de 18,66px o limiar volta para 4,5:1 e a faixa
     inteira reprova. */
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--white);
}
/* O ícone ocupa o lugar que era do losango: separa e dá ritmo.
   #b8e4ea desde que a faixa virou metal: o antigo #7fc6cf media 2,68:1 no
   pixel mais claro do reflexo, abaixo dos 3:1 de elemento gráfico. Este mede
   3,40:1 no mesmo pior caso, e continua um degrau abaixo do texto branco, que
   é onde um separador pertence. */
.mq-icone {
  flex: none;
  display: inline-flex;
  /* Branco, e não o #b8e4ea de antes: ícone é objeto gráfico e exige 3:1. Sobre
     o pico azul novo o #b8e4ea mede 2,30:1 e reprova; o branco mede 3,15:1. */
  color: var(--white);
  margin: 0 24px;
}
/* Acompanharam a letra: 22px ao lado de 19,2px de texto ficavam menores que as
   maiúsculas, e o ícone passava a ler como pontuação em vez de separador. */
.mq-icone svg { width: 26px; height: 26px; }

/* Parada, a pista mostraria só os dois primeiros itens e o resto ficaria
   inalcançável atrás do overflow. Como aqui o conteúdo é único, quem pediu
   menos movimento ganha rolagem à mão no lugar da animação. */
@media (prefers-reduced-motion: reduce) {
  .marquee__pista { animation: none; }
  .marquee::before { animation: none; }
  .marquee { overflow-x: auto; }
}

/* ---------- Cards genéricos ---------- */

.grid {
  display: grid;
  gap: 20px;
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
/* .grid--4 saiu em 2026-08-14 com a grade de "Como funcionam as consultas",
   que era o único lugar que a usava. */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 28px 26px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}
.card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.card p { color: var(--ink-soft); font-size: .94rem; }

.icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: var(--ice);
  color: var(--teal-dark);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
}
.icon svg { width: 24px; height: 24px; }

.card--flat { background: var(--ice); border-color: transparent; }

/* ---------- Faixa teal: "Como funcionam as consultas" ---------- */
/* A única dobra escura da página. Fundo em degradê, texto branco, cards
   horizontais empilhados com borda branca acesa, e o card vira branco no hover
   (fundador, 2026-08-14).

   🔴 O degradê NÃO usa o --teal da marca, e isso é restrição de contraste, não
   escolha de gosto. Branco puro sobre #3f96a2 dá 3,45:1, abaixo do mínimo de
   4,5:1 da WCAG AA para texto corrido. Sobre --teal-deep dá 5,75:1 e sobre
   --teal-dark, 8,73:1. Por isso o degradê corre entre os dois escuros e o teal
   claro entra só como brilho radial, no canto de cima à esquerda.

   O brilho está em 20% e já esteve em 30%. A 30% o ponto mais claro da faixa
   virava rgb(49,123,133), e ali a linha de apoio do cabeçalho (que não tem o
   véu escuro do card por baixo) caía para 4,31:1. A 20% ela sobe para 4,78:1.
   Quem clarear o degradê ou o brilho precisa refazer a conta, e a conta é o
   pior caso: ponta clara do linear + auge do radial. */
.section--teal {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(78% 62% at 16% 4%, rgba(63, 150, 162, .20), transparent 62%),
    linear-gradient(157deg, var(--teal-deep) 0%, #24616a 46%, var(--teal-dark) 100%);
}
.section--teal .section__head h2 { color: var(--white); }
/* O degradê da faixa teal mora aqui, e não junto dos outros lá em cima, por
   ordem de cascata: a linha acima é a reserva (mesma especificidade) e venceria
   o `color: transparent` se este bloco viesse antes, deixando o título branco
   sólido e o degradê invisível. Medido: era exatamente o que acontecia.
   Aqui o brilho inverte para branco, porque escuro sobre escuro sumiria. A
   parada mais escura (#e6f5f8) mede 4,61:1 sobre o pior ponto da faixa, acima
   até do critério de texto normal. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .section--teal .section__head h2 {
    background-image: linear-gradient(100deg,
      #ffffff  0%,
      #e6f5f8 16%,
      #ffffff 34%,
      #eef8fa 52%,
      #ffffff 72%,
      #e6f5f8 88%,
      #ffffff 100%);
    color: transparent;
  }
}
.section--teal .section__head p  { color: rgba(255, 255, 255, .94); }

/* A medida é o ponto da forma, então os números não são decorativos: ~540px na
   descrição dão ~68 caracteres por linha (a grade de cards que existia aqui até
   hoje dava 28, e o confortável é 45 a 75).

   O container cresceu de 880 para 1000px em 2026-08-14, junto com o ícone e com
   o recuo maior. A largura não é arbitrária: 1000 = 52 (ícone) + 28 + 250
   (termo) + 40 + 540 (descrição) + 2×36 de recuo. Crescer sem contar
   levaria a descrição para além dos 75 caracteres, que é onde o olho começa a
   perder a linha de volta.

   O ícone fica FORA do grid de texto, num nível acima, e o termo com a
   descrição num wrapper próprio. É o que permite alinhar o ícone pelo topo e as
   duas colunas de texto por baseline ao mesmo tempo: são dois alinhamentos
   diferentes, então precisam ser dois grids.

   As colunas de texto são 1fr 2fr, e isso é correção de um erro medido. A
   primeira versão usava `minmax(170px, 260px)` no termo, na expectativa de que
   ele encolhesse primeiro. Não encolhe: com max fixo o track fica nos 260px
   enquanto couber, e quem absorve o aperto inteiro é a descrição, cujo min é 0.
   A 640px de viewport isso dava 37 caracteres por linha, pior que os 28 da
   grade. Em proporção as duas encolhem juntas. */
.diferenciais {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1000px;
  display: grid;
  gap: 18px;
}
.diferencial {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 28px;
  align-items: start;
  padding: 34px 36px;
  border-radius: var(--r-md);
  /* preenchimento ESCURO, não claro: um véu branco por dentro subiria a
     luminância do fundo e derrubaria o contraste do texto abaixo de 4,5:1
     justo na ponta clara do degradê. O véu escuro empurra para o outro lado e
     ainda faz a borda branca destacar mais. */
  background: rgba(12, 46, 51, .16);
  border: 1px solid rgba(255, 255, 255, .52);
  box-shadow:
    0 0 22px rgba(255, 255, 255, .14),
    inset 0 0 20px rgba(255, 255, 255, .05);
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}
/* O ícone alinha pelo topo do card e o texto por baseline, por isso os dois
   grids. Aqui vale a mesma regra do preenchimento: véu branco atrás do ícone
   clareia o fundo, então o disco é claro só o bastante para o traço se apoiar,
   e o traço é branco puro. */
.diferencial__icone {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .30);
  color: var(--white);
  transition: background .28s ease, border-color .28s ease, color .28s ease;
}
.diferencial__icone svg { width: 26px; height: 26px; }

.diferencial__texto {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  /* baseline, não start: alinha a primeira linha do termo com a primeira linha
     da descrição, que têm tamanhos de fonte diferentes. Com `start` o termo
     pousaria alguns pixels acima e a fileira leria como torta. */
  align-items: baseline;
}
.diferencial h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.4;
  transition: color .28s ease;
}
.diferencial p {
  margin: 0;
  color: rgba(255, 255, 255, .90);
  font-size: .98rem;
  transition: color .28s ease;
}
/* Hover: o card vira branco. O texto e o ÍCONE têm de virar junto, senão ficam
   brancos no branco — é a única parte deste efeito que não é decorativa. */
.diferencial:hover {
  background: var(--white);
  border-color: var(--white);
  box-shadow:
    0 0 34px rgba(255, 255, 255, .34),
    0 16px 38px rgba(12, 46, 51, .30);
}
.diferencial:hover h3 { color: var(--teal-dark); }
.diferencial:hover p  { color: var(--ink-soft); }
.diferencial:hover .diferencial__icone {
  background: var(--ice);
  border-color: transparent;
  color: var(--teal-dark);
}

/* Sem dispositivo de apontamento não existe hover, e é assim que a maior parte
   das mães vai ver esta página. O card fechado precisa se sustentar sozinho:
   é por isso que a borda acesa não depende do hover para existir. */
@media (hover: none) {
  .diferencial:hover {
    background: rgba(12, 46, 51, .16);
    border-color: rgba(255, 255, 255, .52);
    box-shadow:
      0 0 22px rgba(255, 255, 255, .14),
      inset 0 0 20px rgba(255, 255, 255, .05);
  }
  .diferencial:hover h3 { color: var(--white); }
  .diferencial:hover p  { color: rgba(255, 255, 255, .90); }
  .diferencial:hover .diferencial__icone {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .30);
    color: var(--white);
  }
}
@media (prefers-reduced-motion: reduce) {
  .diferencial, .diferencial h3, .diferencial p, .diferencial__icone { transition: none; }
}
/* Breakpoint próprio desta dobra, e vale explicar por que 800 e por que existe.
   O card gasta 152px fixos antes do texto: 52 do ícone, 28 do respiro e 72 dos
   dois recuos. Com o resto dividido em 1fr 2fr, a descrição só se sustenta
   enquanto a viewport for larga: 65 caracteres em 1000px, 56 em 900, 48 em 800
   e 39 em 700 — abaixo do piso confortável de 45.
   Medido a 640px antes desta regra: 33 caracteres, pior que a grade de cards
   que esta dobra veio substituir. O ícone continua ao lado (custa só 80px); o
   que empilha antes é o par termo/descrição, que é quem custa caro.
   O 620 abaixo continua valendo e empilha também o ícone. */
@media (max-width: 800px) {
  .diferencial__texto { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- Avaliações do Google ---------- */
/* A nota deixou de ser cartão em 2026-08-15 (fundador): sem borda, sem fundo e
   sem sombra, alinhada ao alto à direita, na mesma fileira do título.
   `align-items: baseline` no topo alinha o número grande com a primeira linha
   do h2, que é o que faz os dois lerem como uma coisa só em vez de dois blocos
   soltos. */
.avaliacoes__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 44px;
}
/* o head já traz o margin-bottom de 44px; aqui quem espaça é o pai */
.avaliacoes__topo .section__head { margin-bottom: 0; }

.nota { text-align: right; flex: 0 0 auto; }
.nota__topo { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.nota__numero {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1;
  color: var(--teal-dark);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.estrelas { display: inline-flex; gap: 3px; }
.estrela { width: 19px; height: 19px; fill: var(--line); }
.estrela.is-cheia { fill: #f2a93b; }
.nota__linha { margin-top: 8px; color: var(--ink-soft); font-size: .94rem; }
.nota__link {
  display: inline-block;
  margin-top: 2px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--teal-dark);
  text-decoration-color: var(--teal);
  text-underline-offset: 3px;
}

/* Carrossel de depoimentos. Mesmo motor e mesma pista dos casos, sem foto e
   sem o halo teal: ali o brilho marca o card do meio numa fileira de imagens;
   aqui a distinção é só opacidade, escala e sombra, para o depoimento não
   competir com o carrossel de condições clínicas duas dobras acima. */
.depoimento {
  flex: 0 0 34%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 30px 30px 26px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  opacity: .62;
  transform: scale(.965);
  transition: opacity .45s ease, transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.depoimento.is-centro {
  opacity: 1;
  transform: none;
  border-color: rgba(63, 150, 162, .45);
  box-shadow: var(--shadow-md);
}
.depoimento blockquote {
  margin: 0;
  color: var(--ink);
  font-size: .98rem;
  line-height: 1.65;
  /* empurra a assinatura para a base: os cards esticam à altura do mais alto,
     e sem isto as iniciais pousariam em alturas diferentes na mesma fileira */
  flex: 1 1 auto;
}
.depoimento blockquote::before { content: "\201C"; }
.depoimento blockquote::after  { content: "\201D"; }
.depoimento__autor {
  margin: 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--teal-dark);
  letter-spacing: .04em;
}
.depoimento__quando {
  display: block;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
  font-size: .84rem;
}
/* a escala é movimento; quem pediu menos movimento recebe os cards parados */
@media (prefers-reduced-motion: reduce) {
  .depoimento { opacity: 1; transform: none; transition: none; }
}

/* ---------- Formas de atendimento ---------- */
/* Duas colunas: destaque à esquerda, dois cards empilhados à direita
   (fundador, 2026-08-15). O destaque é maior porque carrega o mapa. */
.formas__grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 24px;
  align-items: start;
}
.formas__lado { display: grid; gap: 24px; }

/* O bloco em destaque NÃO é card, e a ausência de moldura é o destaque: numa
   fileira de caixas iguais, o que salta é o que não tem caixa. Ele fica direto
   sobre o gelo da seção. */
.destaque { display: flex; flex-direction: column; align-items: flex-start; }
.destaque h3 { font-size: 1.24rem; margin-bottom: 10px; }
.destaque__local { color: var(--ink-soft); font-size: .96rem; }
.destaque .card__nota { margin-top: 12px; }
.destaque .btn { margin-top: 20px; }

/* O mapa é o peso visual do bloco: é ele que faz o lado esquerdo valer a
   coluna maior. 16/9 e não altura fixa, para acompanhar a largura. */
.destaque__mapa {
  width: 100%;
  margin-top: 26px;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.destaque__mapa iframe { width: 100%; height: 100%; border: 0; display: block; }
.destaque__aviso { margin-top: 12px; font-size: .84rem; color: var(--ink-soft); }

/* Card de modalidade: coluna, com o botão empurrado para a base. Sem isso os
   três botões pousariam em alturas diferentes, porque os textos têm tamanhos
   diferentes — e três botões desalinhados numa fileira leem como descuido. */
.card--forma {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* âncora do painel de convênios, que é absoluto */
  position: relative;
}
.card--forma > p { margin-bottom: 14px; }
.card__nota {
  font-size: .85rem;
  color: var(--ink-soft);
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.btn--card { margin-top: auto; padding-top: 12px; padding-bottom: 12px; }
/* o hover do .card sobe o cartão inteiro; sem isto o botão subiria de novo,
   somando dois deslocamentos no mesmo gesto */
.card--forma .btn:hover { transform: none; }

/* ---------- Convênios: a janela dentro do card ---------- */
/* <details> puro, sem JavaScript: o navegador abre, fecha, dá foco e responde
   ao teclado sozinho, e o conteúdo fica no DOM mesmo fechado — os 15 nomes
   continuam legíveis para buscador e motor de resposta. */
.janela { width: 100%; margin-bottom: 18px; }

.janela__gatilho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--white);
  font-size: .88rem;
  font-weight: 600;
  color: var(--teal-dark);
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
  list-style: none;            /* mata o triângulo padrão */
}
.janela__gatilho::-webkit-details-marker { display: none; }
.janela__gatilho:hover { background: var(--ice); border-color: var(--teal); }
.janela__rotulo { flex: 1 1 auto; }
/* O alfinete separa a barra do mapa da barra dos convênios, que fora isso são
   idênticas. Some quando a janela abre: ali o rótulo já virou o nome da
   clínica e o ícone deixaria de dizer algo novo. */
.janela__icone { width: 16px; height: 16px; flex: 0 0 auto; color: var(--teal); }
.janela[open] .janela__icone { display: none; }
.janela__gatilho--mapa:hover .janela__icone { color: var(--teal-dark); }
.janela__seta { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .22s ease; }
.janela[open] .janela__seta { transform: rotate(180deg); }

/* Dois rótulos, não um trocado por CSS: `content` não é texto de verdade para
   leitor de tela. Cada um aparece no seu estado. */
.janela__aberto, .janela__fechar { display: none; }
.janela[open] .janela__rotulo { display: none; }
.janela[open] .janela__aberto { display: block; flex: 1 1 auto; }
.janela[open] .janela__fechar { display: block; flex: 0 0 auto; color: var(--ink-soft); font-weight: 500; }

/* Chips um pouco menores só aqui dentro: com o tamanho da faixa o conteúdo
   passava 25px da janela. Rolagem de 25px é pior que rolagem nenhuma — é pouca
   demais para o usuário notar que há mais, e o que ficava escondido era
   justamente a linha para quem NÃO achou o plano. */
.janela__painel .chips { margin-top: 0; gap: 8px; }
.janela__painel .chip { padding: 7px 13px; font-size: .82rem; }
.janela__nota { margin-top: 14px; font-size: .84rem; color: var(--ink-soft); }

/* Moldura do mapa. A altura é fixa porque o iframe nasce sem altura própria e,
   dentro de uma janela que já é o container de rolagem, um iframe de altura
   automática colapsa para zero. Em tela estreita vira proporção 4/3, porque
   altura fixa ali deixaria o mapa espremido. */
.mapa__moldura {
  height: 260px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--ice);
  border: 1px solid var(--line);
}
.mapa__moldura iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 620px) {
  .mapa__moldura { height: auto; aspect-ratio: 4 / 3; }
}

/* Moldura do mapa. A altura é fixa porque o iframe nasce sem altura própria e,
   dentro de uma janela que já é o container de rolagem, um iframe de altura
   automática colapsa para zero. O 4/3 vem depois via aspect-ratio para telas
   estreitas, onde altura fixa deixaria o mapa espremido. */
.mapa__moldura {
  height: 260px;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--ice);
  border: 1px solid var(--line);
}
.mapa__moldura iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 620px) {
  .mapa__moldura { height: auto; aspect-ratio: 4 / 3; }
}

@media (min-width: 621px) {
  /* Aberto, o <details> INTEIRO vira a janela e cobre o card.
     Na primeira versão só o painel cobria, e o gatilho e o botão de agendar
     continuavam no fluxo por cima dele: a lista rolava atrás dos dois e o texto
     se sobrepunha. Cobrindo com o elemento inteiro, o gatilho passa a ser a
     BARRA da janela, dentro dela, e não sobra nada por baixo para conflitar.
     Cobrir em vez de empurrar é o que evita esticar a fileira: os três cards
     têm altura igual e um crescer deixaria os outros com um vazio branco. */
  /* A JANELA é o container de rolagem, e não um flex com o painel dentro.
     Tentei flex primeiro e o painel transbordava 32px mesmo com `min-height: 0`
     no lugar certo: o <details> não entrega o conteúdo como item flex direto,
     então a regra não tinha em quem pegar. Aqui não há item flex para encolher
     — a janela tem altura fixa por `inset: 0`, o conteúdo rola dentro dela, e a
     barra fica grudada no topo. */
  .janela[open] {
    position: absolute;
    inset: 0;
    z-index: 4;
    margin: 0;
    background: var(--white);
    border-radius: var(--r-md);
    padding: 18px;
    overflow-y: auto;
    overscroll-behavior: contain;   /* a rolagem não vaza para a página */
  }
  .janela[open] .janela__gatilho {
    position: sticky;
    top: 0;
    z-index: 1;
    border-color: var(--teal);
    background: var(--ice);
  }
  .janela[open] .janela__painel { padding-top: 16px; }
}

/* ---------- Carrossel dos casos ---------- */
/* Estrutura do site do Dr. Paulo — laço infinito por clones, card do meio em
   destaque —, mas sem o desfoque dos vizinhos, que o fundador tirou em
   2026-08-12. Aqui a distinção é só de opacidade, escala e sombra. */

/* Em tela larga o carrossel escapa do wrap de 1180. O resto da página é uma
   coluna de texto e 1180 é a medida certa para ler; o carrossel não é texto, e
   preso naquela largura o card do meio ficava pequeno, com 145px de vizinho de
   cada lado. O -40px cobre a barra de rolagem clássica, que entra no 100vw e
   não na largura útil. */
@media (min-width: 1240px) {
  /* --largo, e não `.carrossel`: desde 2026-08-15 há dois carrosséis na página.
     O de depoimentos é texto e fica no wrap de 1180, que é a medida de leitura;
     escapar dele daria 400px de linha e o olho perde a volta. */
  .carrossel--largo {
    width: min(1340px, calc(100vw - 40px));
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

.carrossel__trilho {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 6px 2px 14px;
  cursor: grab;
  scrollbar-width: none;
}
.carrossel__trilho::-webkit-scrollbar { display: none; }
.carrossel__trilho.arrastando {
  scroll-snap-type: none;
  scroll-behavior: auto;
  cursor: grabbing;
  user-select: none;
}

/* Card vertical: imagem em cima, texto embaixo.
   A 34% cabem três na pista de 1340 — o do meio nítido e um vizinho quase
   inteiro de cada lado, em vez de um card só ocupando a página.
   O trilho é flex sem align-items, então todos os cards esticam à altura do
   mais alto: a régua de baixo fica reta apesar das descrições desiguais. */
.caso {
  flex: 0 0 34%;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  background: var(--white);
  /* Borda azul da paleta, com brilho (fundador, 2026-08-12). O brilho é a
     própria cor da marca espalhada em duas sombras: um halo curto que desenha a
     aresta e um longo que a solta do fundo. Nada de cor nova. */
  border: 1px solid rgba(63, 150, 162, .40);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(63, 150, 162, .07),
    0 2px 16px rgba(63, 150, 162, .18);
  /* Sem desfoque (fundador, 2026-08-12). Os vizinhos ficam legíveis e o card do
     meio se destaca por três sinais somados: opacidade cheia, escala cheia e a
     sombra grande. A opacidade subiu de .42 para .66 junto com a saída do
     desfoque — 42% foi calibrado para acompanhar um borrão de 6px; num card
     nítido aquilo lê como desbotado, não como segundo plano. */
  opacity: .66;
  transform: scale(.965);
  transition: opacity .45s ease, transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.caso.is-centro {
  opacity: 1;
  transform: none;
  border-color: var(--teal);
  /* o do meio ganha o halo forte; os vizinhos ficam com a aresta acesa e só */
  box-shadow:
    0 0 0 1px rgba(63, 150, 162, .26),
    0 0 30px rgba(63, 150, 162, .34),
    0 20px 46px rgba(30, 82, 89, .16);
}
/* a escala é movimento; quem pediu menos movimento recebe os cards parados */
@media (prefers-reduced-motion: reduce) {
  .caso { opacity: 1; transform: none; transition: none; }
}

/* 4:3 em vez de altura fixa: a proporção acompanha o card em qualquer largura.
   Os arquivos são 800x900 (retrato), então o 'cover' corta em cima e embaixo —
   e o corte sai de 30% da altura, não do centro, porque em três das seis fotos
   o rosto está no terço de cima e o corte centrado passaria por ele. */
.caso__img {
  aspect-ratio: 4 / 3;
  /* branco, não --ice: é o que a máscara revela embaixo da foto, e precisa ser
     a mesma cor do corpo do card */
  background: var(--white);
  overflow: hidden;
  /* os dois são obrigatórios num item flex: 'min-height: auto' deixa a altura
     intrínseca da imagem (retrato, 0,89) vencer o aspect-ratio, e sem
     'flex: 0 0 auto' o painel se estica quando o card estica. */
  min-height: 0;
  flex: 0 0 auto;
  position: relative;
}
/* A foto dissolve no branco do card em vez de terminar numa aresta reta.
   A dissolução é MÁSCARA na própria imagem, não uma camada branca por cima.
   Com a camada por cima ficava um fio cinza na transição, e só nos cards
   laterais: eles têm `scale(.965)`, o que joga a aresta do painel num pixel
   fracionário do dispositivo (0,689 contra 0,031 do card do meio). Nessa meia
   linha o navegador mistura a última fatia da foto com o fundo, e a camada
   branca — cortada no mesmo ponto — não cobria. Como máscara não existe segunda
   caixa para desalinhar: a foto vira transparente e quem aparece é o branco do
   próprio card.
   Cinco paradas, não duas: gradiente de dois pontos sobre foto deixa banda
   visível, porque o olho enxerga a quebra na derivada, não a mudança de valor. */
.caso__img img {
  display: block;
  /* ⚠️ `width: 100%`, e não `width: auto`. O painel é 4/3 e o arquivo é 800x900
     (0,889): com largura automática a imagem sai medida pela altura e fica com
     67% da largura do painel, deixando uma FAIXA BRANCA à direita — o branco do
     card aparecendo por trás. Foi o que aconteceu entre bbf1580 e 2026-08-15,
     quando a correção da figura 3D da bio (que é medida pela altura, tem
     clip-path e precisa tocar a base) foi enxertada aqui por engano. Aqui não
     há clip-path nem base para tocar: o painel tem proporção própria e o
     'cover' faz o resto. */
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  --dissolve: linear-gradient(to bottom,
    #000                58%,
    rgba(0, 0, 0, .82) 72.3%,
    rgba(0, 0, 0, .42) 85.7%,
    rgba(0, 0, 0, .12) 94.5%,
    transparent        100%);
  -webkit-mask-image: var(--dissolve);
          mask-image: var(--dissolve);
}
.caso__body { padding: 26px 26px 30px; flex: 1 1 auto; }
.caso__body h3 { font-size: 1.16rem; margin-bottom: 10px; }
.caso__body p { color: var(--ink-soft); font-size: .92rem; }

.carrossel__cta { text-align: center; }

.carrossel__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 28px;
}
.carrossel__pontos { display: flex; gap: 10px; }
.ponto {
  width: 9px; height: 9px;
  border: 0; padding: 0;
  border-radius: var(--r-full);
  background: var(--line);
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.ponto.is-ativo { background: var(--teal); transform: scale(1.35); }

.carrossel__setas { display: flex; gap: 12px; }
.seta {
  width: 46px; height: 46px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--teal-dark);
  font-size: 21px; line-height: 1;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .25s, color .25s, border-color .25s;
}
.seta:hover { background: var(--teal); border-color: var(--teal); color: var(--white); }

/* ---------- Passos ---------- */

/* ---------- Linha do tempo do agendamento ---------- */
/* Substituiu os cards empilhados em 2026-08-12. Horizontal no desktop,
   vertical no celular — o fio muda de eixo, as marcas não mudam de nada. */
.linha {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  position: relative;
}
/* O fio passa ATRÁS das marcas, e elas têm fundo sólido, então ele some sob
   cada uma sem precisar ser recortado. Começa e termina em transparente para
   não bater numa aresta seca nas pontas. */
.linha::before {
  content: "";
  position: absolute;
  top: 28px;
  /* 16% = o centro da primeira coluna de três, que é onde a marca está.
     ⚠️ Este número ACOMPANHA A CONTAGEM DE PASSOS e já mudou três vezes (14%
     com três, 10% com cinco, 12,5% com quatro, 16% agora). Mexeu no número de
     passos, recalcule: com o valor de outra contagem o fio nasce fora da
     primeira marca e deixa um toco à mostra. */
  left: 16%;
  right: 16%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(63, 150, 162, .22) 8%,
    var(--teal) 50%,
    rgba(63, 150, 162, .22) 92%,
    transparent 100%);
}
.linha__passo { position: relative; text-align: center; }
/* O brilho são dois anéis da própria cor da marca: um curto e opaco que engorda
   a borda, e um largo e difuso que acende o entorno. Nenhuma cor nova. */
.linha__marca {
  /* ⚠️ `position` + `z-index` são o que mantém o fio ATRÁS da marca, e sem eles
     o fundo branco dela não adianta nada. No desktop o fio é `::before` da
     LISTA, então os passos, que são posicionados, pintam depois dele e o
     cobrem. Empilhado o fio vira `::before` de cada PASSO: aí ele é
     descendente posicionado e sobe para a camada de cima, enquanto a marca é
     bloco comum lá embaixo. O resultado era o fio riscando por dentro dos
     círculos — foi o que o fundador viu no print. Isto empata a camada. */
  position: relative;
  z-index: 1;
  width: 58px; height: 58px;
  margin: 0 auto 18px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  background: var(--white);
  border: 2px solid var(--teal);
  color: var(--teal-dark);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  box-shadow:
    0 0 0 7px rgba(63, 150, 162, .10),
    0 0 24px rgba(63, 150, 162, .40);
}
/* Com três passos a coluna volta a 360px. O corpo acompanha a contagem, como o
   fio: apertado numa coluna larga sobra vazio, folgado numa estreita vira pilha. */
.linha__passo h3 { font-size: 1.04rem; margin-bottom: 8px; text-wrap: balance; }
.linha__passo p { color: var(--ink-soft); font-size: .93rem; max-width: 32ch; margin-inline: auto; }

.agendar__cta { margin-top: 48px; text-align: center; }

/* ---------- Convênios ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip {
  padding: 9px 16px;
  border-radius: var(--r-full);
  background: var(--white);
  border: 1px solid var(--line);
  font-size: .86rem;
  font-weight: 500;
  color: var(--ink-soft);
}

/* ---------- Sobre (2ª dobra) ---------- */

/* Quadrado à esquerda, descrição à direita. A coluna do texto é a maior porque
   ela carrega os seis itens; a do card só precisa caber o quadrado. */
/* TESTE de 2026-08-15: três colunas irmãs — quadro, prosa e bullets — com o
   título numa linha própria acima. Antes eram duas: quadro à esquerda, prosa e
   bullets empilhados à direita. */
.bio {
  display: grid;
  /* Duas colunas (fundador, 2026-08-15): figura à esquerda, prosa e bullets
     empilhados à direita. As três colunas do teste anterior espremiam a prosa
     em 48 caracteres por linha.
     A figura ocupa as DUAS linhas da direita, e é o `stretch` dela que resolve
     o pedido de "nenhuma coluna muito maior que a outra": a altura do quadro
     deixa de ser dele e passa a ser a do lado do texto, qualquer que seja o
     tamanho da copy. O equilíbrio é por construção, não por ajuste. */
  grid-template-columns: .9fr 1.1fr;
  grid-template-areas:
    "titulo titulo"
    "figura prosa"
    "figura bullets";
  column-gap: 52px;
  row-gap: 30px;
  /* start, e não center: as três colunas têm alturas diferentes e o que precisa
     coincidir é a primeira linha de cada uma. */
  align-items: start;
}
.bio__titulo { grid-area: titulo; margin-bottom: 40px; }
.ilustra     { grid-area: figura; }
.bio__texto  { grid-area: prosa; }
.bio__itens  { grid-area: bullets; }
/* o respiro entre prosa e bullets agora é o row-gap da grade */
.bio .bio__texto + .bio__itens { margin-top: 0; }

.bio h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); }

/* 🔴 A figura é medida pela LARGURA e o card tem proporção fixa, e as duas
   coisas andam juntas de propósito. Já tentei as outras duas e as duas
   falharam, com medição:

   · Card esticado (align-self: stretch) + figura pela largura → o card fica
     mais alto do que a figura consegue preencher e sobra azul embaixo. Foi o
     print do fundador: 133px a 1000px de tela.
   · Card esticado + figura pela ALTURA → o `max-width: 100%` global trava a
     largura, a altura forçada continua valendo, e a imagem ESTICA. Medido a
     1000px: razão 2,46 contra 1,84 do arquivo. A médica saía deformada.

   Não dá para ter os três ao mesmo tempo: card acompanhando a altura do texto,
   figura sem deformar e base rente. O que se abre mão é do primeiro, e a razão
   1/1.42 não é escolhida no olho — é exatamente a que esta figura preenche:
   de Hc = (1+escape)/0,854 × largura da figura sai Hc ≈ 1,423·Lc. */
.bio .ilustra {
  aspect-ratio: 1 / 1.42;
  /* Sem align-self aqui: a altura vem da proporção, não da fileira. */
}
/* O escape por cima e o empurrão para baixo usam o MESMO 15,05% da largura da
   coluna, um em cada elemento, e por isso se anulam: o topo da figura cai
   exatamente na primeira linha do texto em qualquer largura de tela. */
.bio .ilustra { margin-top: 15.05%; }
.bio .ilustra img {
  width: 100%;
  height: auto;
  top: 0;
  margin-top: -15.05%;
}
.bio .bio__itens { margin-top: 0; }

/* Justificado a pedido do fundador, com hifenização ligada.
   Sem `hyphens`, coluna estreita em português abre rios de espaço entre as
   palavras: a língua tem palavras longas e o justificado precisa de onde
   quebrar. O `lang="pt-BR"` do <html> é o que diz ao navegador qual dicionário
   usar. */
.bio__texto {
  color: var(--ink-soft);
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.bio__texto p + p { margin-top: 14px; }

/* Card da ilustração.
   O degradê é de TONS do mesmo azul: teal -> teal-deep -> teal-dark na
   diagonal. O clarão de cima é branco translúcido, não uma cor nova — assim o
   card ganha profundidade sem sair da paleta da marca dela.

   A figura é MAIOR que o card e escapa por cima: o capelo e os ombros ficam
   sobre o branco da página, o resto sobre o azul. Por isso aqui não há
   overflow:hidden — ele cortaria os dois lados. Quem corta é o clip-path da
   própria imagem, e só embaixo. */
.ilustra {
  margin: 0;
  position: relative;
  aspect-ratio: 1 / 1.14;
  border-radius: var(--r-lg);
  background:
    radial-gradient(118% 86% at 24% 6%, rgba(255, 255, 255, .20), transparent 60%),
    linear-gradient(158deg, var(--teal) 0%, var(--teal-deep) 56%, var(--teal-dark) 100%);
  box-shadow: var(--shadow-md);
}
.ilustra img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 82% da largura do card. Toda medida aqui é relativa ao card, então a
     composição inteira sobrevive ao card encolher para 380px no tablet. */
  width: 82%;
  height: auto;
  /* negativo: sobe 13,2% da ALTURA do card (top em % resolve contra a altura do
     bloco que contém), ou seja ~66px dos 88px de padding da seção. */
  top: -13.2%;
  /* corta só embaixo, na aresta do card. Os lados e o topo levam inset negativo
     para o clip não comer a sombra projetada, que é o que descola a figura do
     branco quando ela sai do azul. */
  clip-path: inset(-16% -16% 14.6% -16%);
  filter: drop-shadow(0 16px 28px rgba(12, 46, 51, .26));
}

/* Lista com ícone. Não reaproveita .icon dos cards: aquele tem margin-bottom
   de 18px porque lá o ícone fica ACIMA do texto, e aqui fica ao lado. */
.bio__itens {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 4px 28px;
  /* ⚠️ DUAS COLUNAS, e o número de credenciais é o que decide isto.
     Com 5 credenciais a lista em coluna única deixava as duas metades da
     seção em 2% de diferença de altura, que era o alvo do fundador. Ao entrar
     a 6ª (equipe do HC-UFMG, 2026-08-19) a coluna da direita foi para 860
     contra 690 da figura: 19,8%, e a seção voltou a ficar torta.
     Seis divide por dois e cinco não — foi a 6ª credencial que tornou a
     lista em duas colunas possível sem deixar órfã na última linha.
     Se a contagem voltar a ser ímpar, remeça: ou volta a coluna única, ou
     sobra um item sozinho embaixo. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* ...mas só enquanto duas colunas cabem. O item tem 44px de ícone antes do
   texto, então numa coluna de 150px sobram 106 para a frase: medido a 375px,
   dava 13 CARACTERES POR LINHA e um detalhe de 5 linhas. Isso não é lista, é
   confete. O corte sai da conta: para o texto ter ~40 caracteres a coluna
   precisa de ~280px, o item de ~324, e dois itens mais o gap de 28 pedem 676
   de conteúdo, ou seja ~760px de tela. */
@media (max-width: 760px) {
  .bio__itens { grid-template-columns: minmax(0, 1fr); }
}
.bio__itens li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.bio__itens li:first-child { border-top: 0; }
.bio__icone {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: var(--ice);
  color: var(--teal-dark);
  display: grid;
  place-items: center;
}
.bio__icone svg { width: 22px; height: 22px; }
.bio__itens strong { display: block; font-size: .97rem; font-weight: 600; line-height: 1.35; }
.bio__itens p { margin-top: 4px; font-size: .9rem; color: var(--ink-soft); }

/* ---------- Sobre (layout antigo, com foto) ---------- */

.about {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 56px;
  align-items: center;
}
.about__figure {
  position: relative;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--teal) 0%, var(--teal-dark) 100%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  min-height: 420px;
}
.about__figure img { width: 96%; filter: drop-shadow(0 16px 32px rgba(15,55,60,.3)); }
.about__body h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: 22px; }
.about__body p { color: var(--ink-soft); margin-bottom: 16px; }
.about__body p:last-of-type { margin-bottom: 0; }

/* ---------- Rodapé ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(255, 255, 255, .74);
  padding: 62px 0 34px;
  font-size: .92rem;
}
.site-footer h4 {
  color: var(--white);
  font-size: .84rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 16px;
  font-weight: 600;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 44px;
}
.site-footer a { color: rgba(255,255,255,.74); text-decoration: none; }
.site-footer a:hover { color: var(--white); }
.site-footer p + p { margin-top: 6px; }

/* Identificação CFM no rodapé: mesma fonte, tamanho e cor (Art. 4º) */
.identificacao {
  font-size: .92rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, .74);
  font-weight: 400;
  font-family: var(--font);
}

.footer__bottom {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  font-size: .84rem;
  color: rgba(255, 255, 255, .52);
}

/* ---------- Responsivo ---------- */

/* A nav sai quando deixa de caber, e o número sai da conta acima: o cabeçalho
   pede 1161 e o wrap oferece min(1180, largura) − 48. Igualando, a nav cabe
   até 1161px de tela; abaixo disso ela ia empurrar a página.
   Era 980, e entre 980 e 1161 ela ficava visível estourando. Não há menu
   sanfona no lugar: esta é uma página única com âncoras, e o botão fixo — que
   é o que a pessoa realmente usa — continua na barra. */
@media (max-width: 1160px) {
  .nav { display: none; }
}

/* Abaixo disto só a marca e o botão não cabem mais: 276 + 24 + 206 + 48 = 554.
   Some o TEXTO da marca e fica o símbolo, e o total cai para 334.
   A escolha entre os dois é a favor do botão: o nome dela reaparece três
   linhas abaixo, no h1 e na identificação do Art. 4º, enquanto o botão é o
   único CTA que acompanha a rolagem. Perder o CTA no celular custa mais do que
   repetir o nome. */
@media (max-width: 580px) {
  .brand__text { display: none; }
}

/* O piso de 320 (iPhone SE de 2016) tem três estouros, e nenhum é o mesmo. */
@media (max-width: 370px) {
  /* 1. Cabeçalho: 56 + 24 + 206 + 48 = 334 numa tela de 320. O gap fecha e o
     botão encolhe o CORPO — não o alvo de toque, que segue com 43px de
     altura. Medido a 320: 299, com 21 de folga. */
  .site-header__inner { gap: 12px; }
  .btn--barra { padding: 10px 14px; font-size: .82rem; }

  /* 2 e 3. `1fr` tem mínimo automático de min-content, então uma trilha CRESCE
     além do contêiner quando algum filho não sabe encolher. Aqui eram dois, e
     os dois davam a mesma trilha de 322 numa caixa de 272:
       · o iframe do mapa, que tem 300x150 de largura intrínseca por
         especificação, independentemente do CSS do pai;
       · o botão "Perguntar sobre teleconsulta", que é nowrap e mede 268.
     O `minmax(0, …)` tira o mínimo automático e devolve o controle ao pai; o
     `white-space: normal` deixa o rótulo longo virar duas linhas em vez de
     empurrar o cartão. Só aqui embaixo: de 375 para cima os dois cabem
     inteiros e o rótulo continua numa linha só. */
  .formas__grid, .formas__lado { grid-template-columns: minmax(0, 1fr); }
  .destaque__mapa iframe { width: 100%; min-width: 0; }
  .btn--card { white-space: normal; }
}

/* A bio empilha em 980, e o número mudou junto com o leiaute. Ele foi 1140
   enquanto a seção teve TRÊS colunas, porque a 1000px a prosa caía para ~33
   caracteres por linha. Com duas colunas ela tem 61 naquela largura, então o
   1140 virou corte prematuro e voltou para o 980 do resto da página. */
@media (max-width: 980px) {
  .bio {
    grid-template-columns: 1fr;
    grid-template-areas: "titulo" "figura" "prosa" "bullets";
    row-gap: 34px;
    gap: 34px;
  }
  .bio__titulo { margin-bottom: 0; }
  .bio__texto { text-align: left; }
  /* Empilhado, cada item vira sua própria fileira e a figura não tem conteúdo
     em fluxo (a imagem é posicionada): sem isto a fileira mede 0 e o quadrado
     azul some da tela. Foi bug medido. */
  .bio .ilustra { align-self: auto; aspect-ratio: 1 / 1.14; max-width: 380px; }
  /* Card de proporção fixa: a figura volta a ser medida pela largura, que é o
     par certo para ele, e os 82% são o valor que faz o corte cair rente à
     base. */
  .bio .ilustra img { height: auto; width: 82%; }
}

@media (max-width: 980px) {
  /* Empilha: destaque em cima, os dois cards embaixo lado a lado enquanto
     couberem. O mapa deixa de precisar de metade da tela. */
  .formas__grid { grid-template-columns: 1fr; }
  .formas__lado { grid-template-columns: 1fr 1fr; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { padding-bottom: 12px; }
  .hero__figure { min-height: 380px; margin-top: 18px; margin-right: 0; }
  /* A marca d'água atrás da médica no celular (fundador, 2026-08-15).
     Empilhado, o `top: -48%` do desktop a jogava INTEIRA para fora: medido a
     375px, ela ia de -494 a -6, ou seja, nem um pixel aparecia.

     ⚠️ A ÂNCORA É A FOTO, NÃO A TELA, e essa é a correção que faltava nas duas
     tentativas anteriores. No desktop a marca é `130vw` e parece grande porque
     a tela é larga; repetir `130vw` num celular dá 487px, e aí ela vira um
     adesivo do lado dela em vez do fundo que sustenta a composição. O tamanho
     e a posição não são propriedades da janela: são a relação dela com a
     médica, e é isso que se replica.

     As três razões saíram medidas do desktop em 1440 (foto de 736px):
       tamanho  = 2,5424 × largura da foto
       desloca  = 0,4419 × largura da foto para a DIREITA do centro dela
       desce    = 0,1994 × largura da foto ABAIXO do centro dela
     A foto é quadrada, encosta na base do hero e se centra na tela, então
     `--foto` é tudo o que falta para resolver as três: min(100vw − 48px, 780px),
     onde os 48 são o respiro do wrap e os 780 são o max-width dela.
     A meia-largura da marca (1,2712 × foto) é o que converte "onde fica o
     centro" em `right` e `bottom`, que é o que o CSS aceita. */
  .hero__marca {
    --foto: min(100vw - 48px, 780px);
    top: auto;
    width: calc(2.5424 * var(--foto));
    right: calc(50vw - 1.7131 * var(--foto));
    bottom: calc(-0.9706 * var(--foto));
  }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .about { grid-template-columns: 1fr; gap: 34px; }
  /* Uma coluna: título, quadro, prosa, bullets, nessa ordem. As áreas somem
     junto, senão o grid tentaria montar três colunas em 380px. */
  .bio {
    grid-template-columns: 1fr;
    grid-template-areas: "titulo" "figura" "prosa" "bullets";
    row-gap: 34px;
    gap: 34px;
  }
  .bio__titulo { margin-bottom: 0; }
  /* 🔴 O stretch precisa MORRER aqui, e isto foi bug medido: empilhado, cada
     item vira sua própria fileira, e como a figura não tem conteúdo em fluxo
     (a imagem é posicionada), a fileira mede 0 e o quadrado azul some da tela.
     Em coluna única a altura volta a vir da proporção. */
  .bio .ilustra { align-self: auto; aspect-ratio: 1 / 1.14; }
  /* E a figura volta aos 82%: os 96% foram calculados para o card ESTICADO de
     431px. Num card de proporção fixa (373px aqui) ela transborda 71px abaixo
     da base — medido. Os 82% são o valor que faz o corte cair rente à base,
     que é como o quadro foi desenhado. */
  .bio .ilustra img { width: 82%; }
  /* Em coluna única o justificado é o pior caso: linha curta, palavra longa,
     rio garantido. Volta a ser alinhado à esquerda. */
  .bio__texto { text-align: left; }
  .caso { flex: 0 0 46%; }
  /* a aside vira largura cheia; sem teto o quadrado viraria um bloco de 900px */
  .ilustra { max-width: 380px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
}

@media (max-width: 620px) {
  /* A linha do tempo vira vertical. Em coluna única, marcas centradas viram
     ilhas soltas — o fio à esquerda é o que mantém a leitura de sequência.
     Voltou dos 980px para cá quando os passos caíram para três: a 900px a
     coluna tem 269px, a mesma largura que já funcionava no desktop. */
  .linha { grid-template-columns: 1fr; gap: 0; }
  /* No eixo vertical o fio é feito de SEGMENTOS, um por passo, e não de uma
     linha só ancorada na lista. Ancorado na lista, o fim dele dependia da
     altura do último passo: bastou o texto do último crescer para ele passar
     da marca e sobrar um toco descendo ao lado do parágrafo.
     Cada segmento vai do centro da própria marca (top: 29px) ao centro da
     marca seguinte (bottom: -29px, os 29px que faltam para chegar lá). O
     último não desenha nada, porque não há próxima. */
  .linha::before { content: none; }
  .linha__passo::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 29px;
    bottom: -29px;
    width: 2px;
    background: linear-gradient(180deg,
      var(--teal) 0%,
      rgba(63, 150, 162, .55) 100%);
  }
  .linha__passo:last-child::before { content: none; }
  .linha__passo {
    display: grid;
    grid-template-columns: 58px 1fr;
    grid-template-areas: "marca titulo" "marca texto";
    column-gap: 20px;
    text-align: left;
    padding-bottom: 30px;
  }
  .linha__passo:last-child { padding-bottom: 0; }
  .linha__marca { grid-area: marca; margin: 0; }
  .linha__passo h3 { grid-area: titulo; align-self: center; font-size: 1.02rem; }
  .linha__passo p { grid-area: texto; font-size: .92rem; }
  .section { padding: 62px 0; }
  /* A pista quase não encurta no celular, então mexer na duração muda é a
     VELOCIDADE. Medido: 30s davam 74px/s contra os 55px/s do desktop, ou seja,
     a faixa corria mais rápido justo na tela onde a frase tem menos espaço
     para ser lida. A duração fica igual à de cima; aqui só o respiro encolhe. */
  .marquee__pista { padding: 14px 0; }
  .mq-icone { margin: 0 16px; }
  .mq-icone svg { width: 20px; height: 20px; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .formas__lado { grid-template-columns: 1fr; }
  .destaque__mapa { aspect-ratio: 4 / 3; }
  /* Os cards empilham por dentro: ícone, termo e descrição, um sob o outro. A
     caixa, a borda e o brilho continuam; o que some são as colunas.
     O recuo cai de 36 para 22px porque em 375px cada pixel de recuo sai da
     medida do texto, e é ela que decide se a linha é legível. */
  .diferencial { grid-template-columns: 1fr; gap: 16px; padding: 24px 22px; }
  .diferencial__texto { grid-template-columns: 1fr; gap: 8px; }
  /* Depoimento empilha, e o fio muda de lado: separa por cima em vez de pela
     esquerda, senão vira uma barra vertical solta ao lado do texto. */
  /* Em coluna única o 3n+1 de cima não vale mais: todo item abre fileira. */
  .depoimento { flex: 0 0 78%; padding: 24px 22px 22px; }
  /* Sem largura para título e nota lado a lado: a nota desce para baixo do
     título e alinha à esquerda, junto com ele. */
  .avaliacoes__topo { flex-direction: column; align-items: stretch; gap: 20px; }
  .nota { text-align: left; }
  .nota__topo { justify-content: flex-start; }
  .caso { flex: 0 0 78%; }
  .caso__body { padding: 22px 22px 26px; }
  /* Em coluna única a janela abre EM FLUXO e o card cresce — a regra de cobrir
     está presa em `min-width: 621px`. A razão de cobrir lá em cima é não
     esticar os irmãos da fileira, e aqui não há fileira. Sobreposta, a janela
     virava 179px de rolagem para 15 nomes: pior que a página ficar mais longa. */
  .janela__painel { padding-top: 16px; }
  .footer__grid { grid-template-columns: 1fr; }
}

/* Ponto exato em que a linha de navegação deixa de caber: pontos 104 + botão
   233 + setas 104 + dois vãos de 20 = 481, mais as calhas de 48. Abaixo disso
   o botão desce para a segunda linha e as setas sobem para o lugar dele. */
@media (max-width: 528px) {
  .carrossel__cta { order: 3; flex: 1 0 100%; }
  .carrossel__setas { order: 2; }
}