/*
 * O layout da página pública — direção B, editorial.
 *
 * NÃO herda a paleta do aplicativo, e isso é decisão e não descuido: os tokens do Clara Care são
 * contidos de propósito, porque a regra do produto é que dado clínico não tem personalidade. Uma
 * página de captação vestida com eles fica cinza.
 *
 * O azul vem do `primaryColor` do perfil público da própria clínica, injetado pelo build, de modo
 * que outra clínica no mesmo gerador sai com a cor dela sem ninguém editar CSS.
 *
 * ────────────────────────────────────────────────────────────────────────────────────────────────
 * POR QUE ESTA VERSÃO NÃO TEM CARTÕES
 *
 * A direção A era feita de caixas: borda de 1px, canto de 20px, fundo branco, repetidas em quatro
 * seções. É a assinatura visual de template — a mesma forma que todo gerador de landing page
 * produz, porque é a que exige menos decisão. Uma página editorial usa três coisas no lugar:
 *
 *   FIO       uma linha de 1px separando, em vez de uma caixa cercando. O olho lê hierarquia sem
 *             que cada item vire um objeto solto boiando no fundo.
 *   ESCALA    tamanhos MUITO diferentes na mesma página. A citação da médica é maior que os
 *             títulos das seções, de propósito: é o momento humano e ele domina.
 *   RESPIRO   o espaço é o que separa, não a borda.
 *
 * E o fundo alterna entre papel e creme de verdade (não branco sobre quase-branco): é o que dá
 * calor a uma página de saúde sem recorrer a foto de banco de imagens.
 * ────────────────────────────────────────────────────────────────────────────────────────────────
 *
 * Sem JavaScript: a página é lida por robôs que não executam nenhum, e nada aqui precisa dele —
 * inclusive as animações, que são CSS puro e desligam em prefers-reduced-motion.
 *
 * As fontes são NOSSAS, servidas desta mesma origem — ver o bloco @font-face logo abaixo. Antes
 * vinham de fonts.googleapis.com por <link>, e o argumento clássico para isso (o visitante já tem
 * a fonte em cache de outro site) morreu quando os navegadores passaram a particionar o cache HTTP
 * por site: cada visitante baixava os mesmos bytes de qualquer jeito, e ainda pagava DNS e TLS de
 * dois terceiros antes do primeiro parágrafo.
 */

/* ────────────────────────────────────────────────────────────────────────────────────────────────
 * As fontes.
 *
 * Baixadas de fonts.gstatic.com em 11/09/2026 e versionadas em assets/fonts/. Ambas são OFL, que
 * permite hospedar; o arquivo de licença mora ao lado delas.
 *
 * OS PESOS REPETEM O MESMO ARQUIVO, e isso está certo: as duas famílias são variáveis, e o Google
 * devolve a MESMA URL para 300, 400 e 500. Reproduzir as três declarações em vez de escrever
 * `font-weight: 300 500` é deliberado — é byte a byte o que o navegador recebia até ontem, então
 * a troca não pode mudar o desenho de nenhum texto. Um intervalo seria mais curto e mudaria o
 * risco de lugar.
 *
 * O subset vietnamita foi descartado: esta página é lang="pt-BR". `latin` cobre todo acento do
 * português (U+0000-00FF); `latin-ext` fica porque o texto é escrito à mão em content.mjs e um
 * sobrenome com caractere fora do latin-1 renderizaria em Georgia sem ninguém perceber.
 * ──────────────────────────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('./assets/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/newsreader-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/publicsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/publicsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/publicsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/publicsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('./assets/fonts/publicsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/publicsans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  /* Sobrescritos inline pelo build a partir de profile.primaryColor. Estes são a reserva. */
  --azul: #2563eb;
  --azul-escuro: #0c1524;
  --azul-fundo: #eef3fe;

  --tinta: #12181f;
  --tinta-2: #5b6472;

  /*
   * Três fundos, não dois quase-iguais.
   *
   * A direção A alternava #fbfaf8 com #ffffff — uma diferença que ninguém percebe, e que por isso
   * não produzia ritmo nenhum. Aqui o creme é visível: é ele que faz a página parecer impressa em
   * papel e não renderizada em tela, e é a fonte de calor mais barata que existe (zero bytes).
   */
  --papel: #fdfcfa;
  --creme: #f2ece2;
  --creme-fundo: #e8dfd1;

  --linha: #e2ddd4;
  --linha-forte: #cdc5b8;
  --wa: #1eb958;
  --urgente: #c22a2a;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 64px);

  /*
   * Movimento: duas durações e uma curva, e não mais que isso.
   *
   * Uma página com sete durações diferentes não parece rica, parece descuidada — o olho percebe a
   * inconsistência mesmo sem saber nomeá-la. `--saida` é a curva de desaceleração usada em tudo:
   * começa rápido e assenta devagar, que é como coisa física para de se mexer.
   */
  --rapido: 0.15s;
  --calmo: 0.7s;
  --saida: cubic-bezier(0.22, 1, 0.36, 1);

  /*
   * Página fixada em tema claro, de propósito.
   *
   * Esta é a identidade visual pública da médica (mesma paleta e fonte usadas nas redes sociais e
   * no cartão de visita): papel quente, tinta escura, sotaque azul. Ela não deve trocar sozinha
   * quando o visitante está com o sistema em modo escuro — isso quebraria a consistência com o
   * material impresso e de redes, que só existe na versão clara. `color-scheme: light` também evita
   * que o navegador escureça sozinho controles nativos (scrollbar, inputs) nesta página.
   */
  color-scheme: light;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

/*
 * `text-wrap: pretty` nos parágrafos: o navegador evita deixar uma palavra sozinha na última
 * linha. Custa nada, não muda nada que se note, e é a diferença entre texto composto e texto
 * despejado — o tipo de acabamento que não se percebe quando está, só quando falta.
 */
p {
  margin: 0;
  color: var(--tinta-2);
  text-wrap: pretty;
}

a {
  color: var(--azul);
  text-decoration: none;
}

a:hover {
  color: color-mix(in srgb, var(--azul) 78%, #000);
}

/* Selecionar texto pinta com a cor da marca — detalhe que ninguém pede e todo mundo sente. */
::selection {
  background: var(--azul);
  color: #fff;
}

/*
 * O grão de papel, por cima de tudo.
 *
 * Um ruído de 4% sobre a página inteira é o que separa "cores chapadas numa tela" de "material
 * impresso" — os grandes fundos lisos (o creme, a faixa escura) ganham textura de papel sem uma
 * única imagem baixada: o SVG de turbulência pesa ~500 bytes e vai inline. ESTÁTICO por completo;
 * grão animado é ruído de VHS, e meio por cento de opacidade a mais já viraria sujeira.
 * `top/left/width/height` em vez de `inset`/`bottom` porque o gate de mobile fiscaliza barras
 * fixas presas ao rodapé — e isto não é uma barra, é uma lâmina de textura.
 */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}

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

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 20px;
  top: 20px;
  z-index: 40;
  background: var(--papel);
  padding: 12px 18px;
  border-radius: 8px;
}

/* ---- movimento ------------------------------------------------------------------------------ */

/*
 * Uma revelação orquestrada na entrada, e não micro-interações espalhadas pela página. O escalonar
 * é só um atraso por seção — sem JavaScript, sem observador de rolagem, sem nada que possa falhar.
 */
@keyframes sobe {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes risca {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.sobe {
  animation: sobe var(--calmo) var(--saida) both;
}

/*
 * A revelação por rolagem, e os limites que ela respeita.
 *
 * Feita com `animation-timeline: view()` — CSS puro, sem observador de rolagem, sem JavaScript,
 * coerente com a regra da página. Quatro travas, e cada uma existe por um motivo:
 *
 *   @supports              onde não houver suporte (Firefox estável ainda tem isto atrás de flag),
 *                          a regra inteira não se aplica e o conteúdo simplesmente já está lá.
 *                          Degradar para "visível" é o único degradar aceitável: uma página que
 *                          esconde o próprio texto esperando um recurso que não veio está quebrada.
 *   reduced-motion         quem pediu menos movimento não recebe nenhum.
 *   8px e opacidade        deslocamento pequeno e fade. NADA de parallax, rotação ou escala: são
 *                          justamente os gatilhos de náusea vestibular, e mais de um terço dos
 *                          adultos acima de 40 anos tem alguma disfunção vestibular — a faixa de
 *                          idade de quem abre esta página.
 *   entry 5% / cover 22%   termina cedo. O movimento acompanha a leitura em vez de fazer esperar
 *                          por ela; ninguém que chegou preocupado deve aguardar uma animação para
 *                          ler onde a médica atende.
 */
@keyframes revelar {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bloco .cabeca,
    .escuro .cabeca,
    .coluna,
    .passos li,
    .lista-inclui li,
    .cidades li,
    .sobre__foto,
    .sobre__motivo,
    .chamada h2,
    .faq > div {
      animation: revelar linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }

    /*
     * Escalonamento por posição, sem atraso de tempo.
     *
     * `animation-delay` não existe numa timeline de rolagem — o que escalona é o RANGE: o item 2
     * completa a revelação um pouco mais adiante na rolagem que o item 1, e o 3 depois do 2. O
     * efeito é a fileira "acordando" em onda conforme entra, e a onda anda na velocidade do
     * polegar de quem rola — rola devagar, acorda devagar; rola rápido, já está tudo lá.
     */
    .coluna:nth-child(2),
    .lista-inclui li:nth-child(2),
    .faq > div:nth-child(even) {
      animation-range: entry 5% cover 29%;
    }

    .coluna:nth-child(3),
    .lista-inclui li:nth-child(3) {
      animation-range: entry 5% cover 36%;
    }
  }
}
.d1 { animation-delay: 0.06s; }
.d2 { animation-delay: 0.14s; }
.d3 { animation-delay: 0.22s; }
.d4 { animation-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .sobe,
  .risca {
    animation: none !important;
  }
}

/* ---- topo ------------------------------------------------------------------------------------ */

/*
 * Sem barra sticky, e isso é a decisão de navegação desta versão.
 *
 * Uma barra fixa come 64px da altura útil do telefone durante a página inteira para oferecer um
 * menu que, no celular, já estava escondido de qualquer jeito. O CTA persistente do telefone é a
 * barra do rodapé (`.barra-wa`); no desktop o WhatsApp reaparece três vezes ao longo da leitura.
 * O cabeçalho aqui é assinatura editorial — nome e uma linha —, não um chrome de aplicativo.
 */
.topo {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--linha);
}

.topo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 20px;
}

.topo__marca {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: -0.02em;
}

/*
 * O que é e onde, ao lado do nome.
 *
 * De propósito NÃO é o CRM. A Resolução CFM nº 2.336/2023 rege a forma da identificação (mesma
 * fonte, mesmo tamanho, mesma cor, junto do nome completo e da palavra "médica"), e um número de
 * CRM solto no cabeçalho, em corpo menor e cor mais clara ao lado de um nome de marca abreviado,
 * seria uma identificação parcial fora da forma que a norma manda. A identificação vive no rodapé,
 * inteira, em `.ident`. Aqui vai só serviço e praça, que a norma permite livremente.
 */
/*
 * O logotipo, à esquerda do nome.
 *
 * `align-self: center` porque a linha usa `align-items: baseline`, e imagem alinha pela borda de
 * BAIXO — sem isto o desenho desce e fica pendurado abaixo da tipografia.
 *
 * Altura em px e largura automática: o arquivo é 144×135, e quem manda no tamanho visível é aqui.
 */
.topo__logo {
  align-self: center;
  height: 34px;
  width: auto;
}

.topo__linha {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

.topo__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 15px;
}

.topo__nav a {
  position: relative;
  color: var(--tinta-2);
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.topo__nav a:hover {
  color: var(--tinta);
}

/* O sublinhado desenha da esquerda no hover — resposta só onde há clique possível. Elementos não
   interativos desta página não reagem ao ponteiro de propósito: reagir é prometer clique. */
.topo__nav a:not(.topo__wa)::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 1.5px;
  background: var(--azul);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--rapido) var(--saida);
}

.topo__nav a:not(.topo__wa):hover::after {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .topo__nav a:not(.topo__wa)::after {
    transition: none;
  }
}

.topo__wa {
  color: var(--tinta) !important;
  font-weight: 500;
  gap: 8px;
  border-bottom: 2px solid var(--wa);
  margin-left: 10px;
}

/* ---- capa ------------------------------------------------------------------------------------ */

.capa {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--creme) 0%, var(--papel) 100%);
}

.capa__grade {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.82fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}

.capa__texto {
  padding: clamp(40px, 6vw, 86px) 0 clamp(48px, 7vw, 96px);
}

.selo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: 28px;
}

.selo::before {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--linha-forte);
}

/*
 * O título, e a razão da escala.
 *
 * 92px numa tela de 1440 é grande para um site institucional e normal para uma capa de revista.
 * É a diferença entre "esta empresa tem um site" e "esta página foi composta" — e o custo é zero,
 * porque tipografia grande não pesa mais que tipografia pequena.
 */
.capa h1 {
  font-size: clamp(46px, 7.2vw, 92px);
  line-height: 0.94;
  margin-bottom: 26px;
}

/*
 * O título sobe linha a linha, atrás de máscara.
 *
 * Cada linha é um par de spans: o de fora corta (overflow hidden), o de dentro sobe. É a
 * revelação editorial clássica — o texto parece impresso por trás de uma régua — e custa zero
 * JavaScript. O par padding-bottom/margin-bottom negativo existe porque line-height 0.94 com
 * overflow hidden decaparia o descendente do "q" de "consulta"; o padding dá o espaço e a margem
 * negativa o devolve ao layout.
 *
 * O estado inicial (fora da máscara) vive DENTRO do guard de no-preference: quem pediu menos
 * movimento, ou um navegador sem suporte a algo aqui, nunca tem o título deslocado — ele
 * simplesmente já está no lugar. Texto de capa preso atrás de máscara é o pior modo de falha
 * possível, e a forma de garantir que não acontece é nunca escondê-lo fora do guard.
 */
.linha {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

@media (prefers-reduced-motion: no-preference) {
  .linha__texto {
    display: inline-block;
    transform: translateY(112%);
    animation: linha-sobe 0.85s var(--saida) 0.08s forwards;
  }
  .linha__texto--2 {
    animation-delay: 0.2s;
  }
}

@keyframes linha-sobe {
  to {
    transform: none;
  }
}

/*
 * `isolation: isolate` aqui não é enfeite — é o que faz a tarja existir sem a animação.
 *
 * A tarja usa `z-index: -1` para passar por baixo da palavra. Sem um contexto de empilhamento
 * próprio, esse -1 a joga atrás do fundo da SEÇÃO, e ela some. Com a animação rodando ninguém
 * percebia: `transform` cria um contexto por efeito colateral e a tarja reaparecia. Resultado —
 * a tarja sumia exatamente para quem pediu `prefers-reduced-motion`, e só para essa pessoa.
 * `isolation` cria o contexto de propósito, e o desenho passa a ser o mesmo nos dois casos.
 */
.destaque {
  position: relative;
  isolation: isolate;
  display: inline-block;
  font-style: italic;
}

.risca {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 0.1em;
  background: color-mix(in srgb, var(--azul) 26%, transparent);
  transform-origin: left;
  /* Desenha DEPOIS que a segunda linha assentou (0.2s + 0.85s): tarja que cresce sob palavra
     ainda em movimento leria como erro de registro, não como intenção. */
  animation: risca 0.7s var(--saida) 1.05s both;
  z-index: -1;
}

.capa__sub {
  font-size: clamp(17px, 1.5vw, 20px);
  max-width: 34ch;
  margin-bottom: 36px;
}

.acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 32px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 17px;
  transition:
    transform var(--rapido) var(--saida),
    box-shadow var(--rapido) var(--saida);
}

.btn:hover {
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
  .btn:hover {
    transform: none;
  }
}

/*
 * A sombra que aparece no hover do botão principal.
 *
 * Movimento que CONFIRMA uma ação é diferente de movimento que pede atenção: este só existe
 * enquanto o ponteiro está sobre o botão, e some junto com ele. É o tipo de acabamento que se
 * sente sem se notar — e o único lugar da página onde o verde ganha profundidade.
 */
.btn--wa {
  background: var(--wa);
  color: #04220f;
}

.btn--wa:hover {
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--wa) 70%, transparent);
}

.btn--wa:hover {
  color: #04220f;
}

.btn--linha {
  border: 1px solid var(--linha-forte);
  color: var(--tinta);
  font-weight: 500;
}

.btn--linha:hover {
  color: var(--tinta);
  border-color: var(--tinta);
}

.btn--fantasma {
  border: 1px solid rgb(255 255 255 / 0.32);
  color: #fff;
  font-weight: 500;
}

.btn--fantasma:hover {
  color: #fff;
  border-color: rgb(255 255 255 / 0.6);
}

/*
 * Os três fatos, em fio e não em chip.
 *
 * Chips com borda arredondada leem como filtro de busca — um controle. Estes não são clicáveis:
 * são as três coisas que a pessoa precisa saber antes de decidir. Fio vertical entre eles, que é
 * como uma ficha técnica de revista separa dados.
 */
/*
 * A ficha técnica vive FORA da capa, e é por isso que o arco não a atravessa.
 *
 * Dentro da `.capa` o arco sangrado passava por trás da régua e das três colunas, e o olho não
 * sabia se a foto terminava ali ou continuava. Aqui embaixo, sobre o papel liso, ela lê como o que
 * é: a linha de dados que fecha a capa de uma revista.
 */
.capa__ficha {
  padding-top: clamp(28px, 4vw, 44px);
  padding-bottom: clamp(40px, 6vw, 76px);
}

.fatos {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linha);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.fatos li {
  padding: 20px 22px 22px 0;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tinta-2);
  border-right: 1px solid var(--linha);
}

.fatos li:last-child {
  border-right: 0;
  padding-right: 0;
}

/* ---- retrato da capa -------------------------------------------------------------------------- */

/*
 * O arco, e por que ele sangra.
 *
 * Um retrato dentro de uma moldura flutuante, centralizado ao lado do texto, é o layout que todo
 * template usa. Aqui ele encosta no chão da seção e vaza pela direita: lê como uma porta (que é
 * literalmente o assunto da página — a médica que entra na sua casa) em vez de um cartão com foto.
 */
/*
 * A conta que faz o arco encostar na borda da janela.
 *
 * Só compensar o padding do `.wrap` não basta: acima de 1180px o wrap também está centralizado, e
 * sobra a metade da folga de cada lado. `max()` cobre os dois regimes — abaixo do limite o termo da
 * folga fica negativo e o gutter vence; acima dele, folga/2 + gutter é exatamente a distância até a
 * borda. O `overflow: hidden` da `.capa` garante que isso nunca vire barra de rolagem horizontal.
 */
.retrato {
  position: relative;
  align-self: end;
  margin-right: calc(-1 * max(var(--gutter), (100vw - var(--wrap)) / 2 + var(--gutter)));
}

.retrato__moldura {
  position: relative;
  height: clamp(400px, 58vw, 640px);
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: linear-gradient(170deg, var(--creme-fundo), color-mix(in srgb, var(--creme-fundo) 60%, #fff));
  display: grid;
  place-items: center;
}

/*
 * `object-position` alto porque o arco é quase quadrado e o retrato é vertical.
 *
 * Com `cover`, o corte tira de cima e de baixo; centralizado, ele decepa a testa. 18% joga o
 * recorte para o alto e mantém o rosto inteiro sob a curva do arco, que é o ponto da foto.
 */
.retrato__moldura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 8%;
}

/*
 * A foto entra por varredura, de cima para baixo, com um assentar de escala.
 *
 * De cima para baixo DE PROPÓSITO: o rosto aparece primeiro, o jaleco depois — a ordem de
 * importância da imagem vira a ordem de revelação. A escala 1.05 → 1 é o "assentar" de coisa
 * física chegando ao lugar; mais que isso viraria zoom, e zoom é gatilho vestibular. Uma vez só,
 * no carregamento — nada nesta página roda para sempre.
 */
@media (prefers-reduced-motion: no-preference) {
  .retrato__moldura img {
    animation:
      foto-varre 0.9s var(--saida) 0.15s both,
      foto-assenta 1.3s var(--saida) 0.15s both;
  }
}

@keyframes foto-varre {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes foto-assenta {
  from {
    transform: scale(1.05);
  }
  to {
    transform: none;
  }
}

/*
 * O monograma, enquanto não houver foto.
 *
 * Uma letra grande sobre o gradiente lê como identidade visual à espera de retrato — não como uma
 * caixa vazia. Nenhuma frase de instrução aparece na tela: o brief da sessão de fotos vive em
 * LANDINGPAGE-REDESIGN-PLAN.md, não aqui.
 */
.retrato__monograma {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(120px, 18vw, 220px);
  line-height: 1;
  color: rgb(255 255 255 / 0.55);
}

/*
 * O exemplo de primeira mensagem, sobreposto à foto.
 *
 * Substitui o antigo selo "Visita confirmada", que era enfeite insinuando um fato. Este elemento
 * carrega profundidade igual e ainda faz trabalho: mostra o que escrever. O balão imita a forma de
 * uma mensagem enviada (bico embaixo à direita) porque é assim que a pessoa vai vê-la de novo,
 * dois segundos depois, na tela do WhatsApp dela.
 */
.exemplo {
  position: absolute;
  left: -30px;
  bottom: 44px;
  width: min(330px, 78%);
  margin: 0;
}

/*
 * O rótulo é um chip, não texto solto — por legibilidade e por citação.
 *
 * Solto, ele caía por cima da foto e sumia: cinza claro sobre imagem clara. O chip resolve isso em
 * qualquer fundo, e de quebra é a forma exata do divisor de data do WhatsApp ("HOJE", numa pílula
 * no meio da conversa). Quem usa o aplicativo todo dia reconhece a forma antes de ler a frase.
 */
.exemplo__rotulo {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-2);
  background: var(--papel);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 10px;
  box-shadow: 0 8px 20px -12px rgb(18 24 31 / 0.4);
}

/*
 * O "Exemplo" do rótulo, e por que ele não usa `opacity`.
 *
 * Ele precisa sair mais apagado que a instrução ao lado — mas `--tinta-2` já está em 5,83:1 sobre o
 * papel, e apagar por transparência derruba isso na hora: medido, `opacity: .75` dá 3,39:1 e
 * `opacity: .6` dá 2,54:1, os dois reprovando o mínimo de 4,5:1 para texto a 11px.
 *
 * Então o apagado vem de um TOM mais claro do mesmo matiz, escolhido por medida e não por olho:
 * #687282 dá 4,77:1. Fica visivelmente mais fraco que o texto ao lado e continua legível.
 *
 * O ponto separador é `::after` porque é enfeite: leitor de tela não precisa anunciá-lo. Por isso
 * mesmo o markup mantém um espaço de verdade entre as duas partes — ver build.mjs — e a margem
 * daqui é assimétrica: à esquerda ela abre o vão, à direita o espaço do markup já abre.
 */
.exemplo__aviso {
  color: #687282;
}

.exemplo__aviso::after {
  content: '·';
  margin: 0 0.1em 0 0.4em;
}

.exemplo__balao {
  position: relative;
  margin: 0;
  background: var(--papel);
  border-radius: 14px 14px 4px 14px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--tinta);
  box-shadow: 0 24px 48px -20px rgb(18 24 31 / 0.34);
}

/* O bico do balão, no canto de mensagem enviada. */
.exemplo__balao::after {
  content: '';
  position: absolute;
  right: -7px;
  bottom: 0;
  width: 0;
  height: 0;
  border-left: 8px solid var(--papel);
  border-bottom: 8px solid transparent;
}

/*
 * A cena do "digitando…", e por que ela é a assinatura da página.
 *
 * Sequência: o rótulo aparece, três pontinhos pulsam num balão pequeno — a forma exata do
 * indicador do WhatsApp — e a mensagem "chega" no lugar deles. A página ENCENA a ação que pede:
 * quem assiste vê uma conversa começando, e é literalmente isso que o botão verde propõe. É o
 * único teatro da página, e é teatro a serviço da conversão, não do efeito.
 *
 * Toda a coreografia (estados iniciais inclusive) vive no guard de no-preference. Sem ele, ou com
 * movimento reduzido: a mensagem está lá desde o primeiro paint e os pontinhos nunca existem —
 * o estado base de `.exemplo__digitando` é invisível, e só a animação o revela. Robô e leitor de
 * tela recebem o texto no HTML sempre; os pontinhos são aria-hidden porque não dizem nada.
 */
.exemplo__digitando {
  position: absolute;
  left: 0;
  bottom: 12px;
  display: flex;
  gap: 5px;
  align-items: center;
  background: var(--papel);
  border-radius: 14px 14px 14px 4px;
  padding: 13px 16px;
  box-shadow: 0 18px 40px -18px rgb(18 24 31 / 0.3);
  opacity: 0;
  pointer-events: none;
}

.exemplo__digitando span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tinta-2);
}

@media (prefers-reduced-motion: no-preference) {
  .exemplo__rotulo {
    animation: sobe 0.6s var(--saida) 0.55s both;
  }
  .exemplo__digitando {
    animation: digita 1.3s ease 0.75s both;
  }
  .exemplo__digitando span {
    animation: pulso 0.42s ease-in-out 0.75s 3 both;
  }
  .exemplo__digitando span:nth-child(2) {
    animation-delay: 0.87s;
  }
  .exemplo__digitando span:nth-child(3) {
    animation-delay: 0.99s;
  }
  .exemplo__balao {
    transform-origin: 100% 100%;
    animation: chegar 0.5s var(--saida) 2s both;
  }
}

@keyframes digita {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  12% {
    opacity: 1;
    transform: none;
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes pulso {
  0%,
  100% {
    transform: none;
    opacity: 0.4;
  }
  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

@keyframes chegar {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- seções ---------------------------------------------------------------------------------- */

.bloco {
  padding: clamp(64px, 9vw, 120px) 0;
}

.bloco--creme {
  background: var(--creme);
}

/*
 * O cabeçalho de seção, com fio — e não mais eyebrow+título em toda seção igual.
 *
 * O fio no topo é o que dá o compasso de revista: cada seção começa com uma régua que atravessa a
 * coluna inteira, com o rótulo pendurado nela.
 *
 * O RÓTULO FICA ACIMA DO TÍTULO, não ao lado. A versão anterior punha o rótulo numa coluna fixa de
 * 200px e empurrava o `h2` para depois dela. Medido no navegador a 1440px em 12/09/2026: o título
 * saía em x=434 enquanto TODO o conteúdo de TODAS as seções começa em x=186 — 248px de desalinho,
 * e o título caindo no meio da primeira coluna em vez de encostar em alguma borda.
 *
 * Alinhar o título à segunda coluna também não resolvia: as seções têm grades diferentes (316px nos
 * diferenciais, 302px nas perguntas) e outras nem têm colunas. Só empilhar acerta em todas.
 */
.cabeca {
  border-top: 1px solid var(--linha-forte);
  padding-top: 18px;
  margin-bottom: clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.olho {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-2);
}

h2 {
  font-size: clamp(30px, 3.8vw, 46px);
  line-height: 1.06;
}

h3 {
  font-size: 23px;
  line-height: 1.2;
  margin-bottom: 8px;
}

/*
 * Colunas com fio no topo — o que era grade de cartões.
 *
 * Mesma informação, sem a caixa. O fio de 1px alinha as três no topo e o texto respira; a borda
 * arredondada em volta de cada uma é justamente o que fazia as três lerem como um componente de
 * biblioteca em vez de uma composição.
 */
.colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 52px);
}

.coluna {
  border-top: 1px solid var(--linha);
  padding-top: 22px;
}

.coluna p {
  font-size: 16px;
}

.icone {
  width: 34px;
  height: 34px;
  color: var(--azul);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  margin-left: -4px;
}

.icone svg {
  width: 26px;
  height: 26px;
}

/* ---- como funciona --------------------------------------------------------------------------- */

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

.passos li {
  counter-increment: passo;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--linha);
  align-items: baseline;
}

.passos li:first-child {
  padding-top: 0;
}

.passos li:last-child {
  border-bottom: 0;
}

/* Numerado porque é sequência real: não dá para combinar o valor antes de haver contato. */
.passos li::before {
  content: counter(passo);
  font-family: var(--serif);
  font-size: 64px;
  line-height: 0.8;
  font-style: italic;
  color: var(--linha-forte);
}

.passos li:last-child::before {
  color: var(--azul);
}

.passos h3 {
  font-size: 26px;
  margin-bottom: 6px;
}

/* ---- faixa escura ---------------------------------------------------------------------------- */

.escuro {
  position: relative;
  background: var(--azul-escuro);
  color: #fff;
  padding: clamp(64px, 9vw, 120px) 0;
}

.escuro h2,
.escuro h3 {
  color: #fff;
}

.escuro .cabeca {
  border-top-color: rgb(255 255 255 / 0.22);
}

.escuro .olho {
  color: rgb(255 255 255 / 0.55);
}

.escuro p {
  color: rgb(255 255 255 / 0.62);
}

/*
 * A visita inclui: lista horizontal, não grade de cartões.
 *
 * "Por que domiciliar" já é uma composição de três colunas — repeti-la aqui, uma seção depois, é o
 * ritmo que faz a página parecer montada por bloco genérico. Mesmo par ícone+texto, forma
 * diferente: aqui a leitura é vertical, uma linha por vez.
 */
.lista-inclui {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-inclui li {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: start;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.14);
}

.lista-inclui li:first-child {
  padding-top: 0;
}

.lista-inclui li:last-child {
  border-bottom: 0;
}

.lista-inclui .icone {
  color: #fff;
  margin: 0;
  width: 32px;
  height: 32px;
}

.lista-inclui h3 {
  font-size: 24px;
  margin-bottom: 4px;
}

.inclui__nota {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  font-size: 15px;
  max-width: 52ch;
}

/* ---- cidades --------------------------------------------------------------------------------- */

.onde__intro {
  font-size: clamp(17px, 1.6vw, 20px);
  max-width: 44ch;
  margin-bottom: 34px;
}

/*
 * As cidades em tipografia, não em chip.
 *
 * Seis chips arredondados leem como tags de blog. Os mesmos seis nomes em serif grande, separados
 * por fio, leem como a lista de praças onde alguém atende — que é o que são. É também a informação
 * que mais decide se a pessoa continua lendo, e por isso merece a escala.
 */
.cidades {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linha);
  columns: 2;
  column-gap: clamp(24px, 5vw, 64px);
}

.cidades li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.3;
  padding: 14px 0;
  border-bottom: 1px solid var(--linha);
  break-inside: avoid;
}

/*
 * A distância alinhada à direita, em corpo pequeno.
 *
 * `tabular-nums` porque a coluna de números precisa alinhar verticalmente: com números
 * proporcionais o "16" e o "44" ficam com larguras diferentes e a coluna treme.
 */
.cidades__km {
  font-family: var(--sans);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--tinta-2);
  white-space: nowrap;
}

.onde__nota {
  margin-top: 20px;
  font-size: 14px;
}

/* ---- quem atende ----------------------------------------------------------------------------- */

.sobre {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.sobre__foto {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(170deg, var(--creme-fundo), color-mix(in srgb, var(--creme-fundo) 55%, #fff));
  display: grid;
  place-items: center;
  border-radius: 2px;
}

.sobre__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*
 * A citação, e por que ela é o maior texto da página.
 *
 * É o único lugar onde a médica fala em primeira pessoa. Numa página cujo problema declarado era
 * "não parece uma pessoa real", esse é o momento que precisa dominar — maior que os títulos das
 * seções, maior que o resumo, competindo só com o H1 da capa.
 */
.sobre__motivo {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.24;
  letter-spacing: -0.02em;
  color: var(--tinta);
  max-width: 28ch;
  margin-bottom: 30px;
  /* As aspas penduram FORA da coluna e a primeira letra alinha com o resto do texto — regra de
     composição de revista. O text-indent é o fallback; onde hanging-punctuation existir, ele faz
     o serviço com a medida exata do glifo. */
  text-indent: -0.45ch;
}

@supports (hanging-punctuation: first) {
  .sobre__motivo {
    text-indent: 0;
    hanging-punctuation: first;
  }
}

.sobre__resumo {
  font-size: 17px;
  max-width: 44ch;
  padding-top: 22px;
  border-top: 1px solid var(--linha);
}

.sobre__nome {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: 14px;
}

/*
 * O nome dela é menor que a fala dela, e isso é hierarquia invertida de propósito.
 *
 * Numa página cujo problema declarado era "não parece uma pessoa real", o que precisa dominar esta
 * seção é a frase em primeira pessoa, não o rótulo. O h2 continua sendo o h2 para quem lê por
 * cabeçalho (leitor de tela, robô); o peso visual é que foi trocado.
 */
.sobre h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  margin-bottom: 20px;
}

/* ---- perguntas ------------------------------------------------------------------------------- */

/* Uma <dl> visível e não um acordeão: acordeão esconde a resposta atrás de JavaScript, e é a
   resposta legível no HTML que faz um assistente citar esta página. */
.faq {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  column-gap: clamp(28px, 5vw, 72px);
}

.faq > div {
  border-top: 1px solid var(--linha);
  padding: 24px 0;
}

.faq dt {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 8px;
}

.faq dd {
  margin: 0;
  color: var(--tinta-2);
  font-size: 16px;
  max-width: 46ch;
}

/* ---- portal do paciente ------------------------------------------------------------------------ */

/*
 * Fora do topo, de propósito: quem já é paciente é uma fração pequena de quem chega nesta página,
 * e competir pelo mesmo espaço do CTA de WhatsApp no cabeçalho confundia quem ainda não é.
 */
.portal-aviso {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(64px, 9vw, 120px);
  font-size: 15px;
}

/* ---- chamada final --------------------------------------------------------------------------- */

/*
 * Sangra de borda a borda, sem canto arredondado.
 *
 * A caixa escura com canto de 28px e brilho radial no meio é o encerramento que todo template de
 * SaaS usa. Uma faixa que ocupa a largura inteira encerra a página como uma contracapa — e o
 * contraste de fundo já é o destaque, sem precisar de brilho por baixo.
 */
.chamada {
  background: var(--azul-escuro);
  color: #fff;
  padding: clamp(64px, 9vw, 116px) 0;
  text-align: center;
}

.chamada h2 {
  color: #fff;
  font-size: clamp(34px, 5vw, 62px);
  margin-bottom: 18px;
}

.chamada p {
  color: rgb(255 255 255 / 0.66);
  font-size: 19px;
  margin: 0 auto 36px;
  max-width: 38ch;
}

.chamada .acoes {
  justify-content: center;
}

/*
 * O número, como legenda — não mais como rótulo do botão, que em toda a página diz a mesma coisa.
 *
 * O SELETOR PRECISA DO `p`. Sem ele, `.chamada p` (0,1,1) vence `.chamada__telefone` (0,1,0) e o
 * `margin: 0 auto 36px` de lá zerava o afastamento daqui — o número saía colado no botão, com 0px
 * de respiro. Medido no navegador em 12/09/2026 antes de corrigir.
 *
 * E margem em atalho, não só `margin-top`, para não herdar os 36px de baixo de `.chamada p`: este
 * é o último elemento da seção e não precisa empurrar nada.
 */
.chamada p.chamada__telefone {
  margin: 34px auto 0;
  color: rgb(255 255 255 / 0.5);
  font-size: 15px;
  letter-spacing: 0.04em;
}

/* ---- rodapé ---------------------------------------------------------------------------------- */

.rodape {
  background: var(--creme);
  padding: 56px 0 48px;
  font-size: 15px;
}

.urgencia {
  border-left: 3px solid var(--urgente);
  color: var(--tinta);
  padding: 4px 0 4px 18px;
  margin-bottom: 28px;
  max-width: 62ch;
}

/*
 * A identificação obrigatória, e a razão de ter classe própria.
 *
 * A Resolução CFM nº 2.336/2023 exige nome, CRM e a palavra "médica" — e exige a FORMA: mesma
 * fonte, mesmo tamanho e mesma cor, sem negrito. Declarar isso explicitamente, em vez de deixar
 * herdar, é o que impede alguém de destacar a linha numa revisão de design sem saber que está
 * infringindo a norma. Se você veio aqui deixar isto em negrito: não pode.
 */
.ident {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  color: var(--tinta);
  margin: 0 0 14px;
}

/*
 * O Instagram, logo abaixo da identificação obrigatória — e propositalmente menor que ela.
 *
 * A norma exige que nome, CRM e "médica" saiam sem destaque; um link de rede social maior ou mais
 * colorido do que essa linha inverteria a hierarquia que a resolução pede. Fica um ponto menor,
 * na cor da marca que todo link desta página já usa, e nada além disso.
 */
.rodape__social {
  margin: 0 0 14px;
  font-size: 14px;
}

.rodape__social a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Sem encolher quando o nome de usuário é longo e a linha quebra no telefone. */
.rodape__social svg {
  flex: none;
}

.lgpd {
  color: var(--tinta-2);
  font-size: 14px;
  max-width: 66ch;
}

/*
 * O crédito do desenvolvedor — um colofão, e tudo aqui existe para mantê-lo nesse tamanho.
 *
 * FIO E ESPAÇO   a linha de 1px acima não decora: ela diz que o que vem depois não é mais voz da
 *                clínica. Sem ela, "Site desenvolvido por" lê como mais um parágrafo do rodapé
 *                dela; com ela, lê como assinatura no verso — que é o que é.
 * TAMANHO        13px, o menor da página, um ponto abaixo da LGPD e dois abaixo da `.ident`. A
 *                ordem é obrigação, não gosto: a Resolução CFM 2.336/2023 exige a identificação da
 *                médica sem destaque, e um crédito maior que ela inverteria a hierarquia da norma.
 * COR            `--tinta-2`, 5,09:1 sobre o creme — passa em AA para texto normal, que é o piso
 *                aqui, já que 13px não é texto grande. Clarear mais cai para 4,01:1 e reprova;
 *                a discrição vem do tamanho e do fio, não de apagar a cor até o limite.
 * LINK           herda a cor do parágrafo em vez de usar o verde da marca. O verde é o sinal de
 *                "clique aqui" desta página inteira, e gastá-lo no crédito seria dar a ele o mesmo
 *                peso do WhatsApp. O sublinhado no tom do fio é sinal suficiente.
 */
.creditos {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
  color: var(--tinta-2);
  font-size: 13px;
}

.creditos a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--linha-forte);
  text-underline-offset: 3px;
  transition: color var(--rapido) var(--saida);
}

.creditos a:hover {
  color: var(--tinta);
  text-decoration-color: currentColor;
}

/* ---- barra fixa de whatsapp (mobile) ------------------------------------------------------------ */

/*
 * CSS puro, sem listener de rolagem: `position: fixed` já resolve sem JavaScript, coerente com o
 * resto da página. Só existe no telefone — no desktop o WhatsApp aparece no cabeçalho, na capa e
 * na chamada final, e uma barra fixa ali seria ruído sobre uma leitura que já cabe na tela.
 */
.barra-wa {
  display: none;
}

/* ---- telas médias ----------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .capa__grade,
  .sobre {
    grid-template-columns: 1fr;
  }
  .capa__texto {
    padding-bottom: clamp(32px, 5vw, 48px);
  }
  .retrato {
    order: -1;
    margin-right: calc(-1 * var(--gutter));
    margin-left: calc(-1 * var(--gutter));
  }
  /* O arco continua arco no telefone — é a forma que carrega a ideia de porta, e virar retângulo
     aqui entregaria justamente ao celular (de onde vem a maioria) a versão sem a assinatura. */
  /*
   * Mais alto no telefone do que a proporção pediria, para o balão caber SOB o rosto.
   *
   * Com 340px o balão de exemplo caía em cima da boca — e o sorriso é o ativo da foto. Com ~410px
   * o rosto termina por volta de 220px e o balão começa depois de 290px, sobre o jaleco.
   */
  .retrato__moldura {
    height: clamp(400px, 105vw, 470px);
    border-radius: 999px 999px 0 0;
  }
  /*
   * O exemplo volta para dentro da margem de texto.
   *
   * Aqui o arco sangra dos DOIS lados (margin negativa à esquerda e à direita), então o
   * `left: -30px` que no desktop faz o balão avançar sobre o creme, no telefone o empurra para
   * fora da tela. `left: var(--gutter)` cancela a sangria e o alinha com o resto do conteúdo.
   */
  .exemplo {
    left: var(--gutter);
    bottom: 18px;
    width: calc(100% - var(--gutter) * 2);
    max-width: 330px;
  }
  /* `.cabeca` e `.olho` já nascem empilhados na regra base — não há mais o que desfazer aqui. */
  .sobre__foto {
    max-width: 380px;
  }
  .cidades {
    columns: 1;
  }
}

/* ---- telefone ---------------------------------------------------------------------------------- */

@media (max-width: 640px) {
  body {
    font-size: 16px;
    /* Espaço para a barra fixa não cobrir o fim da página — inclusive a identificação do rodapé. */
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }
  .acoes .btn {
    flex: 1 1 100%;
  }
  /*
   * O WhatsApp da CAPA sai no telefone — a barra fixa já está na tela, e os dois calhavam de ficar
   * um encostado no outro: duas pílulas verdes idênticas, coladas, dizendo a mesma coisa. Some só
   * o da capa; nas outras aparições (chamada final) ele continua, porque ali a barra e o botão não
   * disputam o mesmo pedaço de tela.
   */
  .capa .acoes .btn--wa {
    display: none;
  }
  /*
   * Todo o topo__nav some, inclusive o WhatsApp: a barra fixa do rodapé é o CTA persistente aqui,
   * e um segundo botão verde no topo ao mesmo tempo seria duplicação, não reforço.
   */
  .topo__nav {
    display: none;
  }
  /* Sem a nav, a marca tem a linha inteira: a região volta a caber ao lado do nome em vez de
     quebrar no meio dele. */
  .topo__marca {
    font-size: 18px;
    gap: 10px;
  }
  /* O nome encolhe no telefone; o logotipo acompanha, ou passa a dominar a linha. */
  .topo__logo {
    height: 28px;
  }
  /*
   * A REGIÃO SAI DO CABEÇALHO NO TELEFONE, para o logotipo caber.
   *
   * Medido a 375px: logotipo 30px + espaço + "Dra. Maria Clara C. Godinho" a 18px + "MARÍLIA E
   * REGIÃO" dão ~350px numa linha de 335 — o nome quebrava em duas linhas e a região em mais duas.
   *
   * Das duas, a região é a que pode sair: ela reaparece dois dedos abaixo, no selo da capa, com as
   * mesmas palavras. O logotipo não tem segunda aparição. Acima de 640px os três voltam a caber.
   */
  .topo__linha {
    display: none;
  }
  .fatos {
    grid-template-columns: 1fr;
  }
  .fatos li {
    border-right: 0;
    border-bottom: 1px solid var(--linha);
    padding: 14px 0;
  }
  .fatos li:last-child {
    border-bottom: 0;
  }
  .passos li {
    grid-template-columns: 56px 1fr;
    gap: 16px;
  }
  .passos li::before {
    font-size: 42px;
  }
  .lista-inclui li {
    grid-template-columns: 32px 1fr;
    gap: 16px;
  }
  .barra-wa {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    min-height: 56px;
    padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
    background: var(--wa);
    color: #04220f;
    font-weight: 600;
    font-size: 16px;
    box-shadow: 0 -8px 24px -12px rgb(18 24 31 / 0.35);
  }
}