/* ==========================================================================
   Clínica Popular Mãe Luiza — sistema visual
   Mobile-first. Escreva o base para a tela pequena; suba com min-width.
   ========================================================================== */

/* ---------- Fontes (auto-hospedadas: nada de handshake externo no 4G) ------ */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/archivo-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: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/archivo-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;
}

/* ---------- Tokens -------------------------------------------------------- */
:root {
  /* Cores medidas dos arquivos oficiais da marca. */
  --roxo-900: #3d0f73;
  --roxo-800: #5e1bad;
  --roxo-700: #7828c3;
  --roxo-500: #a150be;
  --lilas-300: #cc9bd8;
  --lilas-100: #ece0f2;
  --lilas-050: #f6f0f9;

  /* Turquesa: #3bb2c0 é gráfico. Para TEXTO sobre claro use --turq-texto
     (2.5:1 contra branco reprova; 5.7:1 passa). */
  --turq-500: #3bb2c0;
  --turq-300: #53d3c4;
  --turq-texto: #17727e;

  --papel: #f0eff3;
  --branco: #fff;
  --tinta: #181c1c;
  --tinta-70: #4b5052;
  --tinta-50: #6d7274;
  --linha: #e2dfe8;

  /* #25d366 é o verde do logotipo do WhatsApp e só carrega o glifo (exceção de
     logotipo da WCAG 1.4.11). Onde há TEXTO sobre verde, use --zap-texto:
     #128c7e dá 4.1:1 com branco e reprova; este dá 5.2:1. */
  --zap: #25d366;
  --zap-tinta: #0b3d24;
  --zap-texto: #0e7a6b;
  --zap-texto-hover: #0a6659;

  /* Escala de espaço, base 4px. */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;
  --s9: 6rem;

  /* Topo da escala: quatro degraus nomeados. Antes eram cinco clamp()
     escritos caso a caso, que nenhum documento conseguia registrar. */
  --t-display: clamp(2.1rem, 8.5vw, 3.4rem);
  --t-lema: clamp(1.65rem, 6.5vw, 2.75rem);
  --t-titulo: clamp(1.75rem, 5.5vw, 2.6rem);
  --t-numero: 2.25rem;

  /* Ondas em degradê dos campos roxos (assets/js/ondas.js lê estas três).
     São os mesmos tokens da marca: horizonte no roxo-900, corpo da onda na
     primária roxo-800, crista no roxo-500. Nada de cor nova. */
  --onda-horizonte: #3d0f73;
  --onda-corpo: #5e1bad;
  --onda-crista: #a150be;

  /* Painel translúcido sobre campo roxo. O preenchimento é ESCURO, não claro:
     um vidro branco por cima da crista clara derruba o texto branco para 4:1.
     O brilho de 1px na aresta superior é o que dá a leitura de vidro. */
  --vidro: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,0) 58%),
           linear-gradient(180deg, rgba(61,15,115,.48), rgba(61,15,115,.64));
  --vidro-borda: 1px solid rgba(255,255,255,.17);
  --vidro-brilho: inset 0 1px 0 rgba(255,255,255,.15);

  --raio: 14px;
  --raio-sm: 9px;
  --raio-pill: 999px;
  --borda: 1px solid var(--linha);

  /* Elevação: offset + blur reais, tinta quase neutra. Não é halo colorido —
     um brilho cromático de offset zero é decoração, não profundidade. */
  --sombra-1: 0 1px 2px rgba(24, 28, 28, .07), 0 4px 12px rgba(30, 24, 40, .07);
  --sombra-2: 0 2px 4px rgba(24, 28, 28, .08), 0 12px 32px rgba(30, 24, 40, .11);
  --sombra-3: 0 4px 8px rgba(24, 28, 28, .09), 0 24px 56px rgba(30, 24, 40, .16);

  --largura: 1200px;
  --gutter: var(--s5);

  /* Altura da barra principal do cabeçalho. A gaveta do menu no mobile é
     ancorada nela — se as duas se desencontrarem, sobra uma fresta. */
  --topo-altura: 72px;

  /* Animações suaves e rápidas: saída exponencial, 160–280ms. */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --rapido: 160ms;
  --medio: 240ms;
  --lento: 380ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
/* Classe posta pelo JS enquanto a gaveta do menu está aberta. */
html.menu-aberto { overflow: hidden; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Corpo grande: o público inclui idosos, lendo no celular. */
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  /* Sem overflow-x: hidden aqui — ele quebra position:sticky do cabeçalho e
     recorta filhos posicionados. O vazamento é contido na própria seção
     decorativa (.lema, .capa), que já tem overflow:hidden. */
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Nada de cor de fundo global em <img>: ela vaza pelo alfa dos PNGs de marca
   e apagou o logo branco sobre o roxo do rodapé. O placeholder de carregamento
   fica no CONTÊINER da foto, que é opaco por natureza. */
.dupla__foto, .mapa { background: var(--lilas-100); }

button, input, textarea, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0 0 var(--s4);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
p { margin: 0 0 var(--s4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--s4); padding-left: 1.25em; }

/* O hover NÃO troca a cor do link — engrossa o sublinhado. Uma troca global de
   cor no hover vira armadilha: #7828c3 sobre o roxo #5e1bad dá 1.3:1 e o link
   desaparece em qualquer campo escuro. Cada contexto declara sua própria cor. */
a { color: var(--roxo-800); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* Sobre campo roxo o link é branco e clareia no hover, nunca escurece. */
.lema a:not(.btn), .capa a:not(.btn), .chamada a:not(.btn), .rodape a:not(.btn) { color: #fff; }
.lema a:not(.btn):hover, .capa a:not(.btn):hover,
.chamada a:not(.btn):hover, .rodape a:not(.btn):hover { color: var(--turq-300); }

/* ---------- Superfícies do navegador ------------------------------------- */
/* As partes que não desenhamos também carregam o design. */
::selection { background: var(--roxo-800); color: #fff; }
:root { accent-color: var(--roxo-800); caret-color: var(--roxo-800); }

:focus-visible {
  outline: 3px solid var(--turq-texto);
  outline-offset: 3px;
}

@supports (scrollbar-color: auto) {
  html { scrollbar-color: var(--lilas-300) var(--papel); scrollbar-width: thin; }
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--papel); }
::-webkit-scrollbar-thumb {
  background: var(--lilas-300); border-radius: var(--raio-pill);
  border: 3px solid var(--papel);
}
::-webkit-scrollbar-thumb:hover { background: var(--roxo-500); }

/* ---------- Utilitários --------------------------------------------------- */
.env {
  width: 100%;
  max-width: var(--largura);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.env--estreito { max-width: 760px; }

.so-leitor {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pular {
  position: absolute; left: var(--s4); top: -100px; z-index: 200;
  background: var(--roxo-800); color: #fff;
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--raio-sm) var(--raio-sm);
  font-weight: 700; text-decoration: none;
  transition: top var(--rapido) var(--ease);
}
.pular:focus { top: 0; color: #fff; }

.secao { padding-block: var(--s8); }
.secao--densa { padding-block: var(--s7); }

/* Mais espaço acima de um título do que abaixo. */
.secao__titulo { font-size: var(--t-titulo); margin-bottom: var(--s3); }
.secao__linha { font-size: 1.25rem; color: var(--tinta-70); max-width: 62ch; margin-bottom: var(--s6); }

/* ==========================================================================
   Cabeçalho — faixa de informação (rola junto) + barra principal (fixa)
   ========================================================================== */
/* A faixa fica FORA do <header> sticky de propósito: presa junto, ela roubaria
   38px de tela em todo scroll; e um sticky filho de um pai mais alto solta
   assim que o pai sai da viewport. */
.faixa-info {
  background: var(--roxo-900);
  color: rgba(255, 255, 255, .88);
}
.faixa-info__barra {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--s2) var(--s5);
  min-height: 38px; padding-block: var(--s2);
}
.faixa-info__item {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: .8125rem; line-height: 1.4;
}
.faixa-info svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--turq-300); }
.faixa-info a { color: #fff; text-decoration: none; font-weight: 700; }
.faixa-info a:hover { color: #fff; text-decoration: underline; }
.faixa-info__endereco { display: none; }

.topo {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--linha);
  transition: box-shadow var(--medio) var(--ease);
}
.topo--rolado { box-shadow: var(--sombra-1); }

.topo__barra {
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--topo-altura);
}
.topo__logo { flex: 0 0 auto; display: block; line-height: 0; }
/* O lockup é vetor: a largura manda, a altura sai da proporção 2.9:1. */
.topo__logo img { width: 132px; height: auto; }

.topo__acoes { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

/* Botão sanduíche — só no mobile */
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0;
  background: var(--lilas-050); color: var(--roxo-800);
  border: 1px solid var(--lilas-100); border-radius: var(--raio-sm);
  cursor: pointer;
  transition: background var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.menu-btn:hover { background: var(--lilas-100); border-color: var(--lilas-300); }
.menu-btn svg { width: 24px; height: 24px; }
.menu-btn__fechar { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__abrir { display: none; }
.menu-btn[aria-expanded="true"] .menu-btn__fechar { display: block; }

/* Navegação — no mobile é uma gaveta ancorada sob a barra */
.nav {
  position: fixed; inset: var(--topo-altura) 0 auto 0;
  background: var(--branco);
  border-bottom: 1px solid var(--linha);
  padding: var(--s3) var(--gutter) var(--s5);
  max-height: calc(100dvh - var(--topo-altura));
  overflow-y: auto;
  display: none;
}
/* O véu atrás da gaveta é uma sombra de raio zero e espalhamento 100vmax:
   escurece a página inteira sem exigir um elemento a mais em cinco HTMLs. */
.nav[data-aberto="true"] {
  display: block;
  box-shadow: var(--sombra-2), 0 0 0 100vmax rgba(30, 24, 40, .45);
  animation: desce var(--medio) var(--ease);
}
@keyframes desce { from { opacity: 0; transform: translateY(-8px); } }

.nav__lista { list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  min-height: 56px; padding: var(--s3) var(--s2);
  font-weight: 600; font-size: 1.0625rem;
  color: var(--tinta); text-decoration: none;
  border-bottom: 1px solid var(--linha);
}
.nav__link:hover { color: var(--roxo-800); }
.nav__link[aria-current="page"] { color: var(--roxo-800); font-weight: 800; }
.nav__link[aria-current="page"]::after {
  content: ''; width: 8px; height: 8px; flex: 0 0 auto;
  border-radius: var(--raio-pill); background: var(--turq-500);
}

/* Pé da gaveta: a ação e os dados de atendimento a um polegar de distância. */
.nav__pe { margin-top: var(--s5); }
.nav__pe .btn { width: 100%; }
.nav__info {
  margin: var(--s4) 0 0; font-size: .9375rem; color: var(--tinta-70);
}
.nav__info b { display: block; color: var(--tinta); }

/* ==========================================================================
   Botões
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s3) var(--s5);
  min-height: 50px;
  border: 1px solid transparent; border-radius: var(--raio-sm);
  font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer;
  transition: transform var(--rapido) var(--ease), background var(--rapido) var(--ease),
              box-shadow var(--rapido) var(--ease), border-color var(--rapido) var(--ease);
}
.btn svg { width: 20px; height: 20px; flex: 0 0 auto; }
.btn:active { transform: translateY(1px); }

.btn--zap { background: var(--zap-texto); color: #fff; box-shadow: var(--sombra-1); }
.btn--zap:hover { background: var(--zap-texto-hover); color: #fff; box-shadow: var(--sombra-2); }

.btn--primario { background: var(--roxo-800); color: #fff; box-shadow: var(--sombra-1); }
.btn--primario:hover { background: var(--roxo-700); color: #fff; box-shadow: var(--sombra-2); }

.btn--fantasma {
  background: transparent; color: var(--roxo-800); border-color: var(--lilas-300);
}
.btn--fantasma:hover { background: var(--lilas-050); border-color: var(--roxo-500); color: var(--roxo-800); }

.btn--claro { background: #fff; color: var(--roxo-800); }
.btn--claro:hover { background: var(--lilas-050); color: var(--roxo-900); }

.btn--contorno-claro { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--contorno-claro:hover { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.8); }

.btn--bloco { width: 100%; }

/* O botão do topo some no mobile: o flutuante cobre o papel dele. */
.topo__zap { display: none; }

/* ==========================================================================
   Campo de foto — a mecânica comum do hero da home e das capas internas.
   Foto de fundo + véu roxo por cima; o texto vive na camada 1.
   ========================================================================== */
.campo-foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  /* Cor de base: se a foto falhar ou ainda não tiver chegado, a faixa já é
     roxa e o texto branco continua legível. Nunca há um quadro sem contraste. */
  background-color: var(--roxo-900);
}
.campo-foto > .env { position: relative; z-index: 1; }

.campo-foto__fundo { position: absolute; inset: 0; z-index: 0; }
.campo-foto__fundo img { width: 100%; height: 100%; object-fit: cover; }

/* O hero da home é alto e estreito no celular, e a foto da recepção é 16:9:
   centralizado, o `cover` ampliava o meio do quadro e sobrava uma cadeira
   gigante sem leitura. Ancorar à esquerda põe a parede com a marca aplicada
   no recorte — que é a parte da cena que se reconhece mesmo sob o véu. */
.hero .campo-foto__fundo img { object-position: 22% 45%; }
/* O véu mora no wrapper inset:0, não num pseudo-elemento da seção: como filho
   recortado por overflow:hidden, a borda do recorte já virou emenda visível
   no meio da faixa uma vez. */
.campo-foto__fundo::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(75% 130% at 88% -10%, rgba(83, 211, 196, .22), transparent 62%),
    /* Aliviado em 25/09/2026, quando as fotos de banco deram lugar às fotos
       reais da clínica: a 86% no meio a sala não se lia. Medido no pior caso
       (véu sobre branco puro) o texto branco ainda dá 8,4:1. Não passe daqui. */
    linear-gradient(180deg, rgba(61, 15, 115, .90) 0%, rgba(61, 15, 115, .80) 42%, rgba(61, 15, 115, .93) 100%);
}

/* ==========================================================================
   Hero da home
   ========================================================================== */
.hero { padding-block: var(--s8) var(--s9); }
/* O texto para antes da metade da tela em desktop; a moldura continua sendo o
   .env, para que o título nasça na mesma coluna do logo e da faixa de fatos. */
.hero__texto { max-width: 46rem; }

/* Etiqueta de endereço: é dado, não sobrancelha — carrega o lugar, que é
   metade do argumento de uma clínica de bairro. */
.hero__etiqueta {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin: 0 0 var(--s5);
  padding: var(--s2) var(--s4);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--raio-pill);
  background: rgba(255, 255, 255, .12);
  font-size: .9375rem; font-weight: 600; line-height: 1.3;
}
.hero__etiqueta svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--turq-300); }

.hero__titulo {
  font-size: var(--t-display);
  letter-spacing: -0.035em;
  margin-bottom: var(--s4);
}
.hero__titulo em { font-style: normal; color: var(--turq-300); }

.hero__linha {
  font-size: 1.25rem; color: rgba(255, 255, 255, .92);
  max-width: 48ch; margin-bottom: var(--s6);
}

.hero__acoes { display: flex; flex-direction: column; gap: var(--s3); }

/* Faixa de fatos rápidos: cartões brancos que sobem por cima da borda do
   hero. Ficam FORA da seção — .hero tem overflow:hidden e os cortaria. */
.faixa-fatos { position: relative; z-index: 2; margin-top: calc(var(--s7) * -1); margin-bottom: var(--s8); }

.fatos {
  display: grid; gap: 1px;
  background: var(--linha);
  border: var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-2);
}
.fato { background: var(--branco); padding: var(--s4) var(--s5); display: flex; gap: var(--s3); align-items: flex-start; }
.fato svg { width: 22px; height: 22px; color: var(--turq-texto); flex: 0 0 auto; margin-top: 2px; }
.fato b { display: block; font-weight: 700; font-size: .9375rem; }
.fato span { color: var(--tinta-70); font-size: .9375rem; }

/* ==========================================================================
   Campo roxo — a camada de ondas e o painel translúcido que vive sobre ela
   ========================================================================== */
/* As ondas em canvas saíram em 14/09/2026: o cliente as leu como "nuvens
   fracas", sem relação com a proposta do site. O que carrega o campo roxo é
   este degradê da marca. assets/js/ondas.js continua no disco, sem referência
   em nenhuma página — não religue sem pedido explícito. */
.campo-roxo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background-color: var(--roxo-800);
  background-image:
    radial-gradient(80% 190% at 88% -35%, rgba(83, 211, 196, .20), transparent 58%),
    linear-gradient(101deg, var(--roxo-900) 0%, var(--roxo-800) 58%, var(--roxo-700) 100%);
}
.campo-roxo > .env { position: relative; z-index: 1; }

.onda { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.onda canvas { width: 100%; height: 100%; display: block; }
/* Véu de contraste. Sem ele o texto branco cai a 4:1 sobre as cristas claras.
   Mora no PRÓPRIO wrapper, que é inset:0 e cobre a faixa exata — não como
   pseudo-elemento da seção, onde a borda do recorte já virou emenda vertical
   visível no meio da faixa uma vez. */
.onda::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(61, 15, 115, .40) 0%, rgba(61, 15, 115, .22) 50%, rgba(61, 15, 115, .48) 100%);
}

.painel {
  background: var(--vidro);
  border: var(--vidro-borda);
  box-shadow: var(--vidro-brilho);
  border-radius: var(--raio);
  padding: var(--s5);
}

/* Filete turquesa: a aresta ativa da marca, em pouca área. Não é sobrancelha —
   não carrega texto, só ancora o início do bloco. */
.filete {
  display: block; width: 56px; height: 3px;
  border-radius: var(--raio-pill);
  background: linear-gradient(90deg, var(--turq-300), rgba(83, 211, 196, 0));
  margin-bottom: var(--s5);
}

/* ==========================================================================
   Faixa de posicionamento (campo roxo inteiro, não um card)
   ========================================================================== */
.lema { padding-block: var(--s9); }
.lema__grade { display: grid; gap: var(--s6); }
.lema__frase {
  font-size: var(--t-lema);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
  margin: 0;
  max-width: 22ch;
}
.lema__frase b { color: var(--turq-300); font-weight: 800; }
.lema__texto { color: rgba(255,255,255,.92); max-width: 54ch; margin-bottom: var(--s5); }
.lema__acoes { display: flex; flex-wrap: wrap; gap: var(--s3); }

/* Variante clara. Na home o lema vem logo abaixo do hero, que já é um campo
   roxo inteiro: dois campos escuros colados viram uma mancha só e a frase de
   posicionamento — que é o argumento da marca — se perde dentro dela. */
.lema--claro {
  background: var(--branco);
  border-block: var(--borda);
  color: var(--tinta);
}
.lema--claro .lema__frase { color: var(--tinta); }
.lema--claro .lema__frase b { color: var(--roxo-800); }
.lema--claro .lema__texto { color: var(--tinta-70); }
.lema--claro a:not(.btn) { color: var(--roxo-800); }
.lema--claro a:not(.btn):hover { color: var(--roxo-800); }
.filete--escuro { background: linear-gradient(90deg, var(--turq-texto), rgba(23, 114, 126, 0)); }
.lema__acoes .btn { flex: 1 1 auto; }

/* ==========================================================================
   Especialidades
   ========================================================================== */
.espec {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3);
}
.espec__item {
  background: var(--branco);
  border: var(--borda);
  border-radius: var(--raio);
  padding: var(--s5) var(--s4);
  text-align: center;
  transition: transform var(--medio) var(--ease), box-shadow var(--medio) var(--ease),
              border-color var(--medio) var(--ease);
}
.espec__item:hover { transform: translateY(-3px); box-shadow: var(--sombra-2); border-color: var(--lilas-300); }
.espec__icone {
  width: 46px; height: 46px; margin: 0 auto var(--s3);
  display: grid; place-items: center;
  background: var(--lilas-050); border-radius: 50%;
  color: var(--roxo-800);
}
.espec__icone svg { width: 26px; height: 26px; }
.espec__nome { font-weight: 700; font-size: .9375rem; line-height: 1.25; letter-spacing: -0.01em; }

/* Cartão de especialidade com texto (página interna) */
.cartoes { display: grid; gap: var(--s4); }
.cartao {
  background: var(--branco); border: var(--borda); border-radius: var(--raio);
  padding: var(--s5);
  transition: box-shadow var(--medio) var(--ease), border-color var(--medio) var(--ease);
}
.cartao:hover { box-shadow: var(--sombra-2); border-color: var(--lilas-300); }
/* Marca desenhada, não "tile de ícone": sem chapa de fundo, sem cápsula.
   O ícone assina o cartão e some do caminho da leitura. */
.cartao__icone { display: block; color: var(--turq-texto); margin-bottom: var(--s4); }
.cartao__icone svg { width: 34px; height: 34px; stroke-width: 1.5; }
.cartao h3 {
  font-size: 1.25rem; margin-bottom: var(--s2);
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--lilas-100);
}
.cartao p { color: var(--tinta-70); font-size: .9375rem; margin: 0; }

/* ==========================================================================
   Blocos de texto + imagem (par coreografado, não empilhamento genérico)
   ========================================================================== */
.dupla { display: grid; gap: var(--s6); align-items: center; }
.dupla__foto { border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra-2); }
.dupla__foto img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Recorte mais alto para o prédio: em 3/2 a placa da clínica sai do quadro. */
.dupla__foto--alta img { aspect-ratio: 4 / 3; object-position: center 40%; }
/* Prédio inteiro, do beiral à calçada. A foto da esquina é vertical e o
   prédio tem três andares: em 3/2 a entrada e o portão saem do quadro, e
   sobra um prédio sem chão. Só o quadrado cabe a fachada toda. */
.dupla__foto--inteira img { aspect-ratio: 1 / 1; }

/* Legenda de foto real. Só as fotos da clínica são legendadas — imagem de
   banco nunca é apresentada como sendo a equipe, o paciente ou a sala. */
.foto-legenda { margin-top: var(--s3); font-size: .8125rem; color: var(--tinta-70); }

/* ==========================================================================
   Galeria do interior — a prova que faltava. Desde 25/09/2026 o site mostra
   as salas reais, fotografadas na própria clínica; toda foto daqui é legendada
   e nenhuma imagem de banco entra nesta grade.
   ========================================================================== */
.galeria { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s5); }
.galeria figure { margin: 0; }
.galeria__quadro {
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--linha);
  box-shadow: var(--sombra-1);
  background: var(--lilas-100);
}
.galeria img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* O avanço só acontece onde há ponteiro de verdade: no toque, um :hover preso
   deixaria a foto ampliada depois do tap. Transform apenas, sem layout. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .galeria img { transition: transform 320ms cubic-bezier(.16, .84, .44, 1); }
  .galeria figure:hover img { transform: scale(1.045); }
}

/* Três fotos, três colunas. A área de espera não entra aqui: ela ilustra a
   seção logo acima, e repetida a um scroll de distância lia como descuido. */
@media (min-width: 780px) {
  .galeria { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
}

.marcas { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s3); }
/* Lista que ocupa a largura inteira quando não há foto ao lado. */
@media (min-width: 780px) {
  .marcas--duplas { grid-template-columns: repeat(2, 1fr); gap: var(--s5) var(--s7); }
}
.marcas li { display: flex; gap: var(--s3); align-items: flex-start; }
.marcas svg { width: 22px; height: 22px; color: var(--turq-texto); flex: 0 0 auto; margin-top: 3px; }
.marcas b { display: block; }
.marcas span { color: var(--tinta-70); font-size: .9375rem; }

/* Números da estrutura */
.numeros { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
.numero {
  background: var(--branco); border: var(--borda); border-radius: var(--raio);
  padding: var(--s5) var(--s4);
}
.numero b {
  display: block; font-size: var(--t-numero); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; color: var(--roxo-800);
  margin-bottom: var(--s1);
}
.numero span { font-size: .9375rem; color: var(--tinta-70); line-height: 1.35; display: block; }

/* ==========================================================================
   Valores
   ========================================================================== */
.valores { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); counter-reset: v; }
.valor {
  background: var(--branco); border: var(--borda); border-radius: var(--raio);
  padding: var(--s5);
}
.valor h3 { font-size: 1.25rem; margin-bottom: var(--s2); display: flex; gap: var(--s3); align-items: center; }
.valor h3 svg { width: 24px; height: 24px; color: var(--turq-texto); flex: 0 0 auto; }
.valor p { margin: 0; color: var(--tinta-70); font-size: .9375rem; }

/* ==========================================================================
   Contato
   ========================================================================== */
.contato-grade { display: grid; gap: var(--s4); }
.contato-item {
  background: var(--branco); border: var(--borda); border-radius: var(--raio);
  padding: var(--s5); display: flex; gap: var(--s4); align-items: flex-start;
}
.contato-item__icone {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--raio-sm);
  background: var(--lilas-050); color: var(--roxo-800);
}
.contato-item__icone svg { width: 24px; height: 24px; }
.contato-item h3 { font-size: 1.25rem; margin-bottom: var(--s1); }
.contato-item p { margin: 0; color: var(--tinta-70); font-size: .9375rem; }
.contato-item a { font-weight: 600; }

.horario { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.horario th, .horario td { text-align: left; padding: var(--s3) 0; border-bottom: 1px solid var(--linha); }
.horario th { font-weight: 600; color: var(--tinta-70); }
.horario td { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.horario tr:last-child th, .horario tr:last-child td { border-bottom: 0; }

.mapa {
  display: block;
  border-radius: var(--raio); overflow: hidden; border: var(--borda);
  box-shadow: var(--sombra-1); background: var(--branco);
}
.mapa img { width: 100%; display: block; }
/* A nota de atribuição fica FORA da moldura do mapa: dentro dela virava
   um cartão aninhado dentro de outro cartão. */
.mapa__nota { margin-top: var(--s3); font-size: .9375rem; color: var(--tinta-70); }

/* ==========================================================================
   Onde estamos — bloco de endereço + mapa do Google
   O mapa era uma imagem estática de tiles do OpenStreetMap, escolhida para
   não haver requisição nem cookie de terceiro. O cliente pediu o mapa do
   Google em 25/09/2026: agora é um iframe, e com ele entram cookies do
   Google na página. Decisão do cliente, registrada, não deslize.
   ========================================================================== */
.onde { display: grid; gap: var(--s6); align-items: start; }

/* O endereço era um parágrafo solto e sumia na página. Aqui ele é a peça
   principal do bloco: chapa própria, rua em corpo de lead e as referências
   que um morador usa para se localizar logo abaixo. */
.endereco {
  background: var(--branco); border: var(--borda); border-radius: var(--raio);
  padding: var(--s5);
}
.endereco__rua {
  margin: 0; font-size: 1.25rem; font-weight: 700; line-height: 1.35;
  letter-spacing: -0.01em;
}
.endereco__cidade { margin: var(--s2) 0 0; color: var(--tinta-70); font-size: 1.0625rem; }

.endereco__refs { list-style: none; margin: var(--s5) 0 0; padding: 0; display: grid; gap: var(--s3); }
.endereco__refs li { display: flex; gap: var(--s3); align-items: flex-start; }
.endereco__refs svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: var(--turq-texto); }
.endereco__refs span { font-size: .9375rem; color: var(--tinta-70); }

.endereco__acoes { display: grid; gap: var(--s3); margin-top: var(--s5); }
@media (min-width: 420px) {
  .endereco__acoes { grid-auto-flow: column; justify-content: start; }
}

.mapa-google {
  border-radius: var(--raio); overflow: hidden; border: var(--borda);
  box-shadow: var(--sombra-1); background: var(--lilas-100);
}
/* `display: block` mata a linha de base que deixaria uma fresta entre o
   iframe e a borda arredondada da moldura. */
.mapa-google iframe { display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; }

@media (min-width: 780px) {
  .onde { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s7); align-items: stretch; }
  /* O mapa acompanha a altura do cartão ao lado. Com `aspect-ratio` fixo ele
     terminava antes, e a coluna de texto seguia sozinha por mais um cartão —
     duas colunas que não se enquadravam. Quem define a altura da linha é o
     endereço; o mapa preenche o que sobrar. */
  .onde > figure { display: flex; flex-direction: column; }
  .mapa-google { flex: 1; }
  .mapa-google iframe { height: 100%; aspect-ratio: auto; min-height: 340px; }
}

/* ==========================================================================
   Chamada final
   ========================================================================== */
.chamada {
  background: var(--roxo-800);
  background-image: linear-gradient(160deg, var(--roxo-800), var(--roxo-900));
  color: #fff; border-radius: var(--raio);
  padding: var(--s7) var(--s5);
  text-align: center;
}
.chamada h2 { font-size: var(--t-titulo); margin-bottom: var(--s3); }
.chamada p { color: rgba(255,255,255,.85); max-width: 46ch; margin-inline: auto; margin-bottom: var(--s5); }
.chamada .btn { width: 100%; }

/* ==========================================================================
   Rodapé
   ========================================================================== */
.rodape { background: var(--roxo-900); color: rgba(255,255,255,.8); padding-block: var(--s7) var(--s5); margin-top: var(--s8); }
.rodape__grade { display: grid; gap: var(--s6); }
.rodape__logo img { width: 190px; margin-bottom: var(--s4); }
.rodape h3 { color: #fff; font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--s3); font-weight: 700; }
.rodape ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.rodape a { color: rgba(255,255,255,.82); text-decoration: none; }
.rodape a:hover { color: #fff; text-decoration: underline; }
.rodape p { font-size: .9375rem; }
.rodape__fim {
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.16);
  font-size: .8125rem; color: rgba(255,255,255,.6);
  display: grid; gap: var(--s2);
}
.rodape__social { display: flex; gap: var(--s3); }
.rodape__social a {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.1); color: #fff;
  transition: background var(--rapido) var(--ease);
}
.rodape__social a:hover { background: rgba(255,255,255,.22); }
.rodape__social svg { width: 21px; height: 21px; }

/* ==========================================================================
   WhatsApp flutuante — o único destino de conversão, sempre visível
   ========================================================================== */
.zap-flut {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 90;
  display: inline-flex; align-items: center; gap: var(--s3);
  height: 58px; padding: 0 var(--s5) 0 var(--s4);
  background: var(--zap); color: var(--zap-tinta);
  border-radius: var(--raio-pill); text-decoration: none;
  font-weight: 800; font-size: .9375rem;
  box-shadow: 0 4px 10px rgba(24, 28, 28, .18), 0 14px 34px rgba(24, 28, 28, .22);
  transition: transform var(--medio) var(--ease), box-shadow var(--medio) var(--ease);
}
.zap-flut svg { width: 30px; height: 30px; flex: 0 0 auto; }
.zap-flut:hover {
  color: var(--zap-tinta); transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(24, 28, 28, .22), 0 20px 44px rgba(24, 28, 28, .27);
}
.zap-flut__texto { display: none; }

/* ==========================================================================
   Cabeçalho de página interna
   ========================================================================== */
.capa { padding-block: var(--s7) var(--s8); }
.capa h1 { font-size: var(--t-display); letter-spacing: -0.035em; margin-bottom: var(--s4); max-width: 24ch; }
.capa h1 em { font-style: normal; color: var(--turq-300); }
.capa__linha { font-size: 1.25rem; color: rgba(255,255,255,.92); max-width: 54ch; margin: 0; }

/* Faixa de fatos: as mesmas divisórias de 1px da grade de fatos da home,
   agora em campo escuro. O preenchimento é roxo translúcido, então a onda
   continua passando por baixo sem tirar o texto do contraste. */
.capa__fatos {
  list-style: none; margin: var(--s7) 0 0; padding: 0;
  display: grid; gap: 1px;
  background: rgba(255,255,255,.15);
  border: var(--vidro-borda);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--vidro-brilho);
}
.capa__fato {
  /* Mais opaco que o painel do lema: aqui embaixo passa foto, não só degradê. */
  background: linear-gradient(180deg, rgba(61,15,115,.62), rgba(61,15,115,.74));
  padding: var(--s4) var(--s5);
  display: flex; gap: var(--s3); align-items: flex-start;
}
.capa__fato svg { width: 22px; height: 22px; color: var(--turq-300); flex: 0 0 auto; margin-top: 2px; }
.capa__fato b { display: block; font-weight: 700; font-size: .9375rem; line-height: 1.35; }
.capa__fato span { display: block; color: rgba(255,255,255,.78); font-size: .9375rem; line-height: 1.35; }

.trilha { font-size: .9375rem; margin-bottom: var(--s5); color: rgba(255,255,255,.82); }
.trilha a { color: #fff; text-decoration: none; }
.trilha a:hover { color: #fff; text-decoration: underline; }
.trilha span { padding-inline: var(--s2); }

/* ==========================================================================
   Movimento — um momento autoral, a partir de um estado JÁ VISÍVEL.
   A classe .js-anim só é adicionada pelo JS; sem JS nada fica invisível.
   ========================================================================== */
.js-anim .revela {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--lento) var(--ease), transform var(--lento) var(--ease);
}
.js-anim .revela.dentro { opacity: 1; transform: none; }
.js-anim .revela.atraso-1 { transition-delay: 70ms; }
.js-anim .revela.atraso-2 { transition-delay: 140ms; }
.js-anim .revela.atraso-3 { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-anim .revela { opacity: 1; transform: none; }
}

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 560px) {
  :root { --gutter: var(--s6); }
  .hero__acoes { flex-direction: row; flex-wrap: wrap; }
  .hero__acoes .btn { flex: 0 1 auto; min-width: 15rem; }
  .fatos { grid-template-columns: repeat(2, 1fr); }
  .faixa-info__barra { justify-content: center; }
  .espec { grid-template-columns: repeat(3, 1fr); }
  .capa__fatos { grid-template-columns: repeat(2, 1fr); }
  .chamada .btn { width: auto; min-width: 260px; }
  .zap-flut__texto { display: block; }
  .rodape__fim { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 780px) {
  .faixa-info__barra { justify-content: space-between; }
  .faixa-info__endereco { display: inline-flex; }
  .cartoes { grid-template-columns: repeat(2, 1fr); }
  .valores { grid-template-columns: repeat(2, 1fr); }
  .contato-grade { grid-template-columns: repeat(2, 1fr); }
  .numeros { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .capa__fatos { grid-template-columns: repeat(3, 1fr); }
  .rodape__grade { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 940px) {
  :root { --gutter: var(--s7); --topo-altura: 88px; }
  html { scroll-padding-top: 104px; }

  .secao { padding-block: var(--s9); }
  .secao--densa { padding-block: var(--s8); }

  /* Navegação horizontal: o menu sanduíche some. */
  .menu-btn { display: none; }
  .topo__zap { display: inline-flex; }
  .topo__barra { min-height: var(--topo-altura); gap: var(--s6); }
  .topo__logo img { width: 156px; }

  .nav {
    display: block; position: static; inset: auto;
    background: none; border: 0; box-shadow: none; padding: 0;
    max-height: none; overflow: visible;
    margin-left: auto;
  }
  .nav[data-aberto="true"] { box-shadow: none; animation: none; }
  .nav__lista { display: flex; gap: var(--s1); }
  .nav__link {
    min-height: 0; padding: var(--s3) var(--s4);
    border-bottom: 0; border-radius: var(--raio-sm);
    font-size: 1rem; position: relative;
  }
  .nav__link:hover { background: var(--lilas-050); }
  .nav__link[aria-current="page"]::after {
    position: absolute; left: var(--s4); right: var(--s4); bottom: 2px;
    width: auto; height: 3px; border-radius: var(--raio-pill);
  }
  .nav__pe { display: none; }

  .hero { padding-block: var(--s9) calc(var(--s9) + var(--s6)); }
  .hero__texto { max-width: 52rem; }
  .fatos { grid-template-columns: repeat(4, 1fr); }
  .faixa-fatos { margin-top: calc(var(--s8) * -1); margin-bottom: var(--s9); }

  .espec { grid-template-columns: repeat(5, 1fr); gap: var(--s4); }
  .cartoes { grid-template-columns: repeat(3, 1fr); }

  .dupla { grid-template-columns: 1fr 1fr; gap: var(--s8); }
  .dupla--invertida .dupla__texto { order: 2; }

  /* A frase ocupa a coluna larga; o painel translúcido segura texto e ações
     na estreita, sem que nenhum dos dois encoste na borda do campo. */
  .lema__grade { grid-template-columns: 1.05fr .95fr; gap: var(--s8); align-items: center; }
  .lema__acoes .btn { flex: 0 1 auto; }

  .capa { padding-block: var(--s8) var(--s9); }
  .chamada { padding: var(--s8) var(--s7); }
}

@media (min-width: 1120px) {
  .valores { grid-template-columns: repeat(3, 1fr); }
}