/* =====================================================
   Dra. Carolina Starling · Clínica Melius — Landing Page
   Base: tokens, reset, tipografia, container, botões, menu e hero portados da Dra. Débora (Alan, 16/09/2026).
   Seções entram uma a uma, depois da medição do Codex (referencias/secao-XX/).
   Design chapado: sem sombra, gradiente ou blur.
   ===================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Paleta da Dra. Carolina (Alan, 16/09/2026): preto, branco e verde musgo. Três cores, chapadas.
     Os nomes de variável são os mesmos dos outros projetos, para os componentes herdados
     continuarem funcionando sem reescrita. O que muda é o valor. */
  --verde: #3e4b32;         /* verde musgo: blocos escuros, menu, superfícies de destaque */
  --verde-700: #4c5a3e;     /* musgo mais claro: superfície escura secundária e hover */
  --dourado: #3e4b32;       /* o acento também é o musgo: a paleta não tem terceira cor de destaque */
  --dourado-300: #c3ccb2;   /* musgo bem claro: é o destaque SOBRE o musgo escuro, então precisa de contraste alto com ele */
  --creme: #ffffff;         /* fundo da página: branco */
  --creme-200: #f2f2f0;     /* branco quebrado: pill do menu e superfícies claras secundárias */
  --bege-100: #f2f4ef;      /* musgo bem claro: fundo da página (Alan, 17/09/2026) */
  --musgo-50: #f2f4ef;      /* mesmo tom, nomeado pelo que é */
  --branco: #ffffff;
  --preto: #111111;         /* preto da paleta: texto forte e blocos pretos */
  --cinza-900: #111111;     /* texto principal, agora no preto da paleta */
  --cinza-700: #4a4a4a;
  /* apelidos usados pelos componentes portados */
  --escuro: var(--preto);

  /* Tipografia (mesma família da Scopel) */
  --font-sans: "DM Sans", "Avenir Next", "Helvetica Neue", system-ui, sans-serif;   /* títulos, menu, botões */
  --font-body: "Figtree", "DM Sans", "Avenir Next", "Helvetica Neue", system-ui, sans-serif; /* texto corrido */
  --font-mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;                 /* eyebrows, rótulos */

  /* Layout */
  --container-max: 1360px;
  --gutter: 28px;
  --radius-hero: 16px;
  --radius-card: 24px;
  --radius-img: 16px;
  --radius-pill: 999px;
  --nav-h: 60px;
}

/* só para leitores de tela */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Como na Scopel: a página fica como no zoom de 90% do navegador no desktop. */
  zoom: 0.9;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cinza-900);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
}

h1, h2, h3, h4, p, li, blockquote, figcaption {
  text-wrap: balance;
}

/* ---------- Utilitários ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container-max) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.nobr { white-space: nowrap; }

/* ===== RESPONSIVO (base) =====
   O zoom de 90% passou a valer em TODAS as larguras (Alan, 18/09/2026); antes ele era
   desligado abaixo de 900px. Consequência: no celular tudo encolhe 10%, inclusive os alvos
   de toque — um botão declarado com 44px passa a renderizar 39,6px, abaixo do mínimo.
   Por isso os alvos do celular são declarados com 49px, que é o que dá 44 reais depois do zoom.
   Mesmo raciocínio que já usávamos acima de 900px na página da Débora.
   O bloco que compensa os alvos vive no FIM do arquivo, senão regras posteriores o sobrescrevem. */

/* =====================================================
   BOTÕES — padrão único herdado da Scopel (consenso Claude + Codex, 08/09/2026)
   M 52px em tudo; G 56px só no hero; pill, DM Sans 600, seta → num círculo.
   --btn-bg/--btn-fg definem a cápsula; o círculo usa as duas invertidas. Hover inverte, só a seta anda.
   ===================================================== */
.btn {
  --btn-bg: var(--preto);
  --btn-fg: var(--branco);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 5px 5px 5px 24px;
  border: 1px solid var(--btn-bg);
  border-radius: var(--radius-pill);   /* de volta ao arredondado (Alan, 16/09/2026) */
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.btn > span:not(.btn__icon) { text-wrap: balance; }

.btn__icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;               /* a seta volta ao círculo */
  background: var(--btn-fg);
  color: var(--btn-bg);
  display: inline-grid;
  place-items: center;
  transition: background-color .16s ease, color .16s ease;
}

.btn__icon svg { width: 18px; height: 18px; stroke-width: 1.7; transition: transform .18s cubic-bezier(.22, 1, .36, 1); }
.btn__lead { width: 20px; height: 20px; flex: 0 0 auto; stroke-width: 1.7; }

/* variantes de cor */
.btn--inverse { --btn-bg: var(--branco); --btn-fg: var(--preto); }    /* branco sobre bloco escuro */
.btn--gold    { --btn-bg: var(--preto); --btn-fg: var(--branco); }    /* CTA principal: preto (Alan, 16/09/2026) */
.btn--white   { --btn-bg: var(--branco); --btn-fg: var(--preto); }    /* branco sobre bloco escuro */
.btn--outline { background: transparent; color: var(--btn-bg); }
.btn--outline .btn__icon { background: var(--btn-bg); color: var(--btn-fg); }

/* tamanhos */
.btn--lg { min-height: 56px; font-size: 16px; }
.btn--lg .btn__icon { width: 44px; height: 44px; }
.btn--plain { padding-inline: 24px; justify-content: center; gap: 10px; }

/* estados */
.btn:focus-visible { outline: 2px solid var(--btn-bg); outline-offset: 3px; }
.btn:active .btn__icon svg { transform: none; }

@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--btn-fg); color: var(--btn-bg); border-color: var(--btn-bg); }
  .btn:hover .btn__icon { background: var(--btn-bg); color: var(--btn-fg); }
  /* o CTA principal agora e preto e inverte como os demais (Alan, 16/09/2026) */
  .btn--outline:hover { background: var(--btn-bg); color: var(--btn-fg); }
  .btn--outline:hover .btn__icon { background: var(--btn-fg); color: var(--btn-bg); }
  .btn:hover .btn__icon svg { transform: translateX(2px); }
}

/* variante link: texto + seta solta, sublinhado no hover/foco */
.btn-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 15px; font-weight: 600; line-height: 1.3; color: inherit; text-decoration: none; }
.btn-link > span { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .16s ease; }
.btn-link svg { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.7; transition: transform .18s cubic-bezier(.22, 1, .36, 1); }
.btn-link:hover > span, .btn-link:focus-visible > span { text-decoration-color: currentColor; }
.btn-link:hover svg { transform: translateX(2px); }
.btn-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__icon, .btn__icon svg, .btn-link svg, .btn-link > span { transition: none; }
  .btn:hover .btn__icon svg, .btn-link:hover svg { transform: none; }
}

/* =====================================================
   MENU DO TOPO — igual ao cabeçalho da Scopel (referencias/secao-00-menu/ref-menu-scopel-2026-09-09.png):
   fundo claro, só o "D" da logo à esquerda (Alan, 09/09/2026), pill cinza-clara com os links e CTA escuro.
   Medidas da Scopel em analise-codex-menu.txt (seção 3): padding 14/12, pill 60, links 16/500, CTA 52.
   ===================================================== */
.site-header {
  position: static;                 /* parado no topo, como na Scopel */
  padding: 14px 0 12px;
  background: var(--creme);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: 16px;             /* mesma margem lateral do hero da Scopel */
}

.brand {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
  flex: 0 0 auto;
}

/* Logo da Melius (SVG do Codex, 16/09/2026): vai INLINE no HTML, não em <img>.
   Um SVG carregado por <img> é documento isolado e não herda o `color` do pai —
   o currentColor dele só funciona inline ou como máscara CSS. Aqui ele herda o preto da interface. */
.brand__logo {
  display: block;
  height: 58px;                     /* 273×91 → proporção 3:1, então 58px de altura dá 174px de largura */
  width: auto;
  color: var(--preto);
}

.nav {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 4px 0 12px;
  border-radius: var(--radius-pill);
  background: var(--creme-200);     /* pill cinza-clara sobre o fundo claro, como na referência */
  border: 1px solid rgba(28, 42, 29, 0.06);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(4px, 0.8vw, 12px);
}

.nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--preto);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.nav__link:hover { background: var(--preto); color: var(--branco); }
.nav__link:focus-visible { outline: 2px solid var(--preto); outline-offset: 2px; }
.nav__cta { margin-left: 8px; }

/* ===== RESPONSIVO — menu ===== */
@media (max-width: 1180px) {
  .nav__link { font-size: 15px; padding: 8px 12px; }
  .nav__list { gap: 4px; }
}

@media (max-width: 960px) {
  .nav { display: none; }            /* como na Scopel: sem links no topo do celular */
  .site-header { padding: 16px 0 12px; }
  .brand { margin-left: 8px; }
  .brand__logo { height: 52px; }
}

@media (max-width: 760px) {
  .site-header { padding: 10px 0 8px; }
  .brand__logo { height: 44px; }
}

/* =====================================================
   HERO (seção 01) — referência em referencias/secao-01-hero/, medidas do Codex (analise-codex-hero.txt)
   Alan: 780px de altura, de ponta a ponta, só headline + descrição + botão; sem foto por enquanto.
   Texto: H1 DM Sans 60/64 em 3 linhas (a central em 600), descrição Figtree 18/27, botão G56 dourado.
   ===================================================== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 780px;                    /* altura fixa pedida pelo Alan (09/09/2026) */
  background: var(--bege-100);      /* bege bem fraco (Alan, 09/09/2026); a foto cobre por cima no desktop */
  display: flex;
  align-items: center;
}

/* fundo fotográfico (Codex, 09/09/2026): sem overlay, gradiente, blur ou sombra; a luz e a sombra já estão na foto */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.hero__bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ancorado na DIREITA, não no centro (Codex, 16/09/2026): a capa é 2,46:1 e a caixa do hero
     é mais baixa, então cover corta ~220px na horizontal em 1440. Centralizado, metade desse corte
     sairia do lado direito, onde está a médica. À direita, o corte inteiro sai da área branca vazia. */
  object-position: 100% 0%;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;                /* container próprio do hero (Codex): composição central como na referência */
  margin-inline: auto;
  padding-inline: 28px;
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(0, 560px);
  justify-content: space-between;
  column-gap: 80px;
  align-items: center;
}

.hero__content { max-width: 560px; }

.hero__title {
  font-family: var(--font-sans);
  font-size: 60px;
  line-height: 64px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--preto);              /* headline preta (Alan, 16/09/2026) */
  max-width: 560px;
  text-wrap: balance;               /* quebra equilibrada: sem <span> forçando linha (Alan, 16/09/2026) */
}

.hero__title strong { font-weight: 600; }   /* destaque pelo peso: musgo claro sobre branco não tem contraste */

.hero__desc {
  margin-top: 24px;
  max-width: 520px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 27px;
  color: var(--preto);              /* preto junto com o título: sobre a capa, o musgo dava 3,77:1 e reprovava */
  text-wrap: balance;
}

/* Identificação da médica na capa (CFM 2.336/2023 e parecer do Codex, 16/09/2026):
   tem que estar legível na primeira dobra, sem depender de abrir modal. Mono pequena, discreta. */
.hero__cred {
  margin-top: 18px;
  max-width: 520px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: var(--verde-700);
  text-wrap: balance;
}

.hero__actions { margin-top: 32px; display: flex; }


/* ===== RESPONSIVO — hero ===== */
@media (max-width: 1180px) {
  .hero__inner { column-gap: 40px; }
  .hero__title { font-size: 52px; line-height: 56px; }
  .hero__desc { font-size: 17px; line-height: 26px; }
}

@media (max-width: 900px) {
  /* celular: texto → botão → foto, em fluxo (Codex); a foto não fica atrás do texto */
  .hero { height: auto; min-height: 0; padding: 32px 24px 0; flex-direction: column; gap: 32px; }
  .hero__inner { order: 1; grid-template-columns: 1fr; padding-inline: 0; justify-items: center; text-align: center; }
  .hero__content { max-width: 600px; }
  .hero__title { font-size: 48px; line-height: 52px; margin-inline: auto; }
  .hero__desc { margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__media { order: 2; position: relative; inset: auto; width: min(100%, 440px); aspect-ratio: .9; flex: none; margin-inline: auto; overflow: hidden; border-radius: 24px 24px 0 0; }
  .hero__bg { object-position: 82% 0%; }   /* pega o lado direito da foto, onde ela está */
}

@media (max-width: 480px) {
  .hero { padding: 32px 24px; }
  .hero__title { font-size: 40px; line-height: 43px; }
  .hero__desc { margin-top: 20px; font-size: 17px; line-height: 25.5px; }
  .hero__actions { margin-top: 24px; width: 100%; }
  .hero__actions .btn { width: 100%; max-width: 360px; }
}

@media (max-width: 392px) {
  /* abaixo de 393px o corpo de 40px quebrava a headline em 4 linhas e ela subia para cima da foto:
     9.4vw é o maior passo que mantém as duas linhas até 320px (medido no portal) */
  .hero__title { font-size: min(36px, 9.4vw); line-height: 1.08; }
}


/* =====================================================
   ÍCONES ANIMADOS (parecer do Codex, 07/09/2026): SVGs próprios, sem biblioteca.
   Vocabulário: DRAW (traço se desenha ao entrar em tela, uma vez) · NUDGE (gesto curto no hover/foco) ·
   PULSE (detalhe pulsa) · DIRECTION (setas/chevrons: já existiam em .btn__icon, .fab__arrow e .fab__chevron).
   .im = ícone com movimento · .im-s = traço desenhável · --i = ordem do traço (stagger 45ms)
   ===================================================== */
.im {
  overflow: visible;
}

.im .im-s,
.im .im-pulse,
.im .im-up,
.im .im-tilt,
.im .im-squeeze,
.im .im-float,
.im .im-in-l,
.im .im-in-r,
.im .im-page-l,
.im .im-page-r {
  transform-box: fill-box;
  transform-origin: center;
}

.im .im-c {
  transform-box: view-box;          /* gira em torno do centro do ícone, não da própria caixa */
  transform-origin: 12px 12px;
}

/* ---- DRAW: só com JS pronto (.motion-ready); sem JS, nenhum ícone nasce invisível ----
   O estado "desenhado" é o valor natural (dashoffset 0), e a animação só parte de 1: assim um hover que troque
   a animação (pulso) não faz o traço sumir. Escondido só enquanto o gatilho não chegou. */
html.motion-ready .im[data-draw] .im-s {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

/* escondido só até o gatilho: "view" (entrou na tela → .is-on) ou "step" (passo da jornada revelado) */
html.motion-ready .im[data-draw="view"]:not(.is-on) .im-s,
html.motion-ready .journey-step:not(.is-visible) .im[data-draw="step"] .im-s {
  stroke-dashoffset: 1;
}

html.motion-ready .im[data-draw].is-on .im-s,
html.motion-ready .journey-step.is-visible .im[data-draw] .im-s {
  animation: im-draw .58s cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms + var(--d, 0ms));
}

html.motion-ready .im[data-draw].is-on .im-check,
html.motion-ready .journey-step.is-visible .im[data-draw] .im-check {
  animation-duration: .42s;
  animation-delay: calc(var(--i, 0) * 45ms + var(--d, 0ms) + 260ms);   /* o check entra depois do contorno */
}

@keyframes im-draw {
  from { stroke-dashoffset: 1; }
}

/* ---- NUDGE / PULSE no hover ou foco do card/link pai ---- */
.im .im-up,
.im .im-tilt,
.im .im-spin,
.im .im-squeeze,
.im .im-float,
.im .im-in-l,
.im .im-in-r,
.im .im-page-l,
.im .im-page-r {
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.im .im-float {
  transition-delay: calc(var(--i, 0) * 35ms);
}

:is(.card-hover, .fab__chip, .fab__social a):is(:hover, :focus-visible) .im-up     { transform: translateY(-1.5px); }
:is(.card-hover, .fab__chip, .fab__social a):is(:hover, :focus-visible) .im-tilt   { transform: rotate(-6deg); }
:is(.card-hover, .fab__chip, .fab__social a):is(:hover, :focus-visible) .im-spin   { transform: rotate(14deg); }
:is(.card-hover, .fab__chip, .fab__social a):is(:hover, :focus-visible) .im-squeeze{ transform: scaleX(.84); }
:is(.card-hover, .fab__chip, .fab__social a):is(:hover, :focus-visible) .im-float  { transform: translateY(-1.2px); }
:is(.card-hover, .fab__chip, .fab__social a):is(:hover, :focus-visible) .im-in-l   { transform: translateX(1px); }
:is(.card-hover, .fab__chip, .fab__social a):is(:hover, :focus-visible) .im-in-r   { transform: translateX(-1px); }
:is(.card-hover, .fab__chip, .fab__social a):is(:hover, :focus-visible) .im-page-l { transform: rotate(-2.5deg) translateY(-.6px); }
:is(.card-hover, .fab__chip, .fab__social a):is(:hover, :focus-visible) .im-page-r { transform: rotate(2.5deg) translateY(-.6px); }
:is(.card-hover, .fab__chip, .fab__social a):is(:hover, :focus-visible) .im-pulse  { animation: im-pulse .56s cubic-bezier(.22, 1, .36, 1); }

@keyframes im-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(.82); }
  70%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

/* ---- Como funciona: o detalhe faz o gesto uma vez, logo depois do traço se desenhar ---- */
html.motion-ready .journey-step.is-visible .im .im-pulse { animation: im-draw .42s cubic-bezier(.22, 1, .36, 1) both, im-pulse .56s cubic-bezier(.22, 1, .36, 1) .62s; animation-delay: calc(var(--i, 0) * 45ms + 260ms), .62s; }
html.motion-ready .journey-step.is-visible .im .im-tilt  { animation: im-draw .58s cubic-bezier(.22, 1, .36, 1) both, im-tilt-once .6s cubic-bezier(.34, 1.56, .64, 1) .6s; animation-delay: calc(var(--i, 0) * 45ms), .6s; }
html.motion-ready .journey-step.is-visible .im .im-spin  { animation: im-draw .58s cubic-bezier(.22, 1, .36, 1) both, im-spin-once .7s cubic-bezier(.34, 1.56, .64, 1) .55s; animation-delay: calc(var(--i, 0) * 45ms), .55s; }
html.motion-ready .journey-step.is-visible .im .im-up    { animation: im-draw .58s cubic-bezier(.22, 1, .36, 1) both, im-up-once .5s cubic-bezier(.34, 1.56, .64, 1) .6s; animation-delay: calc(var(--i, 0) * 45ms), .6s; }

@keyframes im-tilt-once { 0% { transform: rotate(0); } 40% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
@keyframes im-spin-once { 0% { transform: rotate(0); } 55% { transform: rotate(14deg); } 100% { transform: rotate(0); } }
@keyframes im-up-once   { 0% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } 100% { transform: translateY(0); } }

/* ---- Faixa: traço se desenha na primeira aparição; depois só um detalhe pulsa por vez, num ciclo de 7,2s ---- */
/* =====================================================
   FAIXA CONTÍNUA — MARQUEE (abaixo do hero), portada da Débora (Alan, 16/09/2026).
   Altura 68px, células com padding 44px, ícone 24px stroke 1.7, texto 16/600, gap 16, ~40px/s.
   Cor: musgo com texto branco. A capa do hero é escura; o musgo separa os dois blocos
   sem repetir o preto. Contraste musgo/branco = 8,58:1.
   ===================================================== */
.marquee {
  --marquee-duration: 38s;            /* ≈ largura de um conjunto ÷ 40px por segundo */
  height: 68px;
  background: var(--preto);         /* faixa preta (Alan, 16/09/2026): a capa agora é clara */
  border-top: 1px solid var(--preto);
  border-bottom: 1px solid var(--preto);
  overflow: hidden;
  margin-top: 0;                      /* o hero vai de ponta a ponta: a faixa encosta nele */
}

.marquee__track {
  display: flex;
  width: max-content;
  height: 100%;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__list {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding-inline: 44px;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--branco);
  white-space: nowrap;
}

.marquee__icon { width: 24px; height: 24px; flex: 0 0 auto; }
.marquee__icon--brand { width: 26px; height: 20px; color: var(--dourado-300); }   /* musgo claro sobre preto = 10,3:1 */

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* exatamente uma cópia da lista */
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
  .marquee { overflow-x: auto; }
}

@media (max-width: 760px) {
  .marquee { height: 60px; }
  .marquee__item { padding-inline: 28px; font-size: 15px; gap: 12px; }
}

.marquee__item:nth-child(1) { --ph: 0; }
.marquee__item:nth-child(2) { --ph: 1; }
.marquee__item:nth-child(3) { --ph: 2; }
.marquee__item:nth-child(4) { --ph: 3; }
.marquee__item:nth-child(5) { --ph: 4; }
.marquee__item:nth-child(6) { --ph: 5; }

html.motion-ready .marquee .im[data-draw].is-on .im-s {
  animation-delay: calc(var(--i, 0) * 45ms + var(--ph, 0) * 90ms);
}

html.motion-ready .marquee .im[data-draw].is-on .im-pulse {
  animation: im-draw .58s cubic-bezier(.22, 1, .36, 1) both, im-pulse-loop 7.2s cubic-bezier(.22, 1, .36, 1) infinite;
  animation-delay: calc(var(--i, 0) * 45ms + var(--ph, 0) * 90ms), calc(1.2s + var(--ph, 0) * 1.2s);
}

@keyframes im-pulse-loop {
  0%, 12%  { transform: scale(1); }
  4%       { transform: scale(.82); }
  8%       { transform: scale(1.14); }
  100%     { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .im .im-s,
  .im .im-pulse,
  .im .im-up,
  .im .im-tilt,
  .im .im-spin,
  .im .im-squeeze,
  .im .im-float,
  .im .im-in-l,
  .im .im-in-r,
  .im .im-page-l,
  .im .im-page-r {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}



/* gesto leve no hover com ponteiro fino */
@media (hover: hover) and (pointer: fine) {
  .marquee__item:hover .im-up { transform: translateY(-1px); }
}

/* ---------- Eyebrow de seção (mono, ponto dourado) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
}

.eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dourado);
}

/* Hero sobre capa escura (musgo ou preto) — preparado em 16/09/2026, ainda NÃO aplicado.
   Entra como classe no <section class="hero hero--escuro"> quando o Alan escolher uma das
   capas escuras. Sobre fundo escuro o musgo do título não tem contraste (musgo sobre preto dá 2,03)
   e o botão preto desaparece, então as duas coisas invertem juntas.
   O Codex mediu os fundos gerados: musgo 7,27:1 e preto 9,14:1 contra texto branco. */
.hero--escuro .hero__title,
.hero--escuro .hero__title strong { color: var(--branco); }
.hero--escuro .hero__desc { color: var(--branco); }
.hero--escuro .hero__cred { color: rgba(255, 255, 255, 0.82); }
.hero--escuro .hero__actions .btn { --btn-bg: var(--branco); --btn-fg: var(--preto); }

/* =====================================================
   AJUSTES DE CELULAR E CORREÇÕES DE QA herdados da página da Dra. Débora,
   filtrados para o que toca só o cabeçalho, o menu e o hero (16/09/2026).
   ===================================================== */
  .float-nav__cta { white-space: nowrap; font-size: 13px; padding: 4px 4px 4px 14px; }
  .float-nav__cta > span:first-child { white-space: nowrap; }
  .hero { position: relative; height: 750px; min-height: 750px; padding: 32px 24px 40px; justify-content: flex-end; gap: 0; }
  .hero__media { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; overflow: hidden; }
  .hero__media picture, .hero__bg { display: block; width: 100%; height: 100%; }
  .hero__bg { object-fit: cover; object-position: 50% 0%; }   /* a imagem do Alan tem a médica em cima e creme embaixo, onde fica o texto */
  .hero__inner { order: 0; position: relative; z-index: 1; }
  .float-nav { display: none; }
  .hero__actions .btn, .map__btn, .faq-help__btn { width: auto; max-width: none; justify-content: flex-start; }
#inicio, #corpo, #consulta, #cerebro, #atendimento, #sobre, #localizacao, #avaliacoes, #faq { scroll-margin-top: 104px; }   /* a pílula cresceu para 60,5px com os alvos de 49px: 88px deixava só 4px de folga (QA Retina) */
  .nav__link, .float-nav__link, .float-nav__cta { min-height: 49px; }
  .float-nav__link { height: 44px; }
  .float-nav__brand { height: 49px; }
  #inicio, #corpo, #consulta, #cerebro, #atendimento, #sobre, #localizacao, #avaliacoes, #faq { scroll-margin-top: 16px; }
  .header__inner { justify-content: center; }
  .brand { margin-left: 0; }

@media (max-width: 900px) {
  .float-nav__cta { white-space: nowrap; font-size: 13px; padding: 4px 4px 4px 14px; }
  .float-nav__cta > span:first-child { white-space: nowrap; }
}

@media (max-width: 760px) {
  .hero { position: relative; height: 750px; min-height: 750px; padding: 32px 24px 40px; justify-content: flex-end; gap: 0; }
  .hero__media { display: block; position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; overflow: hidden; }
  .hero__media picture, .hero__bg { display: block; width: 100%; height: 100%; }
  .hero__bg { object-fit: cover; object-position: 50% 0%; }   /* a imagem do Alan tem a médica em cima e creme embaixo, onde fica o texto */
  .hero__inner { order: 0; position: relative; z-index: 1; }
}

@media (max-width: 760px) {
  .float-nav { display: none; }
  .hero__actions .btn, .map__btn, .faq-help__btn { width: auto; max-width: none; justify-content: flex-start; }
}

@media (max-width: 1000px) {
#inicio, #corpo, #consulta, #cerebro, #atendimento, #sobre, #localizacao, #avaliacoes, #faq { scroll-margin-top: 104px; }   /* a pílula cresceu para 60,5px com os alvos de 49px: 88px deixava só 4px de folga (QA Retina) */
}

@media (min-width: 901px) {
  .nav__link, .float-nav__link, .float-nav__cta { min-height: 49px; }
  .float-nav__link { height: 44px; }
  .float-nav__brand { height: 49px; }
}

@media (max-width: 760px) {
  #inicio, #corpo, #consulta, #cerebro, #atendimento, #sobre, #localizacao, #avaliacoes, #faq { scroll-margin-top: 16px; }
}

@media (max-width: 960px) {
  .header__inner { justify-content: center; }
  .brand { margin-left: 0; }
}

/* =====================================================
   RODAPÉ — portado da Débora (Alan, 16/09/2026).
   Branco, links + redes, bloco regulatório 13/1.65, assinatura mono e letreiro gigante
   rolando da direita para a esquerda, cortado na base, em cor quase invisível. Chapado.
   Cores da Carolina: texto preto, letreiro em branco quebrado.
   ===================================================== */
.footer { position: relative; margin-top: 24px; background: var(--branco); color: var(--preto); overflow: hidden; }
.footer__inner { max-width: 1280px; margin: 0 auto; padding: 64px 40px 0; }
.footer__brand { display: block; width: fit-content; color: var(--preto); }
.footer__brand:focus-visible { outline: 2px solid var(--preto); outline-offset: 4px; }
.footer__logo { display: block; width: 220px; height: auto; }
.footer__side { grid-area: dev; display: flex; flex-direction: column; align-items: flex-end; gap: 22px; }
.footer__nav { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 32px; }
.footer__link { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: rgba(17, 17, 17, 0.85); text-decoration: none; transition: color .18s ease, transform .18s ease; display: inline-block; }
.footer__link:hover { color: var(--preto); transform: translateY(-2px); }
.footer__link:focus-visible { color: var(--preto); outline: 2px solid var(--preto); outline-offset: 3px; border-radius: 4px; }
.footer__social { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.footer__social a { width: 44px; height: 44px; display: grid; place-items: center; color: rgba(17, 17, 17, 0.85); transition: color .18s ease; }
.footer__social a:hover { color: var(--preto); }
.footer__social a:focus-visible { color: var(--preto); outline: 2px solid var(--preto); outline-offset: 2px; border-radius: 50%; }
.footer__social svg { width: 20px; height: 20px; }
.footer__legal { display: grid; grid-template-columns: minmax(0, 780px) auto; grid-template-areas: "reg dev"; column-gap: 40px; align-items: start; margin-top: 76px; }
.footer__side .footer__dev { margin: 0; }
.footer__reg { grid-area: reg; margin: 0; max-width: 780px; font-family: var(--font-sans); font-size: 13px; line-height: 1.65; color: var(--cinza-700); }
.footer__dev { justify-self: end; margin: 4px 0 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.footer__dev a { color: #6b6b6b; text-decoration: none; }
.footer__dev a:hover { color: var(--preto); }
.footer__marquee { --footer-duration: 28s; height: auto; margin-top: 20px; overflow: hidden; }
.footer__marquee-track { display: flex; width: max-content; animation: footer-scroll var(--footer-duration) linear infinite; will-change: transform; }
@keyframes footer-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.footer__giant { display: block; white-space: nowrap; font-family: var(--font-sans); font-size: clamp(150px, 14vw, 220px); line-height: .78; font-weight: 500; letter-spacing: -.06em; color: var(--creme-200); padding-top: 24px; }
@media (prefers-reduced-motion: reduce) { .footer__marquee-track { animation: none; } }

/* ===== RESPONSIVO — rodapé ===== */
@media (max-width: 900px) {
  .footer__inner { padding: 56px 20px 0; }
  .footer__side { align-items: center; gap: 16px; }
  .footer__logo { width: 200px; }
  .footer__nav { flex-direction: column; align-items: center; gap: 24px; }
  .footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; text-align: center; }
  .footer__legal { grid-template-columns: minmax(0, 1fr); grid-template-areas: "dev" "reg"; justify-items: center; row-gap: 24px; margin-top: 48px; }
  .footer__dev { justify-self: center; white-space: normal; text-align: center; }
  .footer__reg { max-width: 36ch; font-size: 12.5px; text-align: center; }
  .footer__marquee { height: 100px; margin-top: 32px; }
  .footer__giant { font-size: 104px; line-height: .8; padding-top: 12px; }
}
@media (max-width: 600px) {
  .footer__giant { font-size: 88px; }
  .footer__links { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================
   LOCALIZAÇÃO E MAPA — portados da Débora (Alan, 16/09/2026).
   Mapa full-bleed com card branco por cima; o escudo só libera a interação depois de um clique,
   para a rolagem da página não virar zoom no mapa.
   ATENÇÃO de QA: iframe de outro domínio roda fora de processo e não herda o html{zoom:.9}.
   Foi isso que gerou o falso positivo da faixa vazia na página da Débora — não medir por captura de portal.
   ===================================================== */
.location { max-width: 1280px; margin: 0 auto; padding: 112px 40px 40px; }
.location__head { display: grid; grid-template-columns: 48% 44%; justify-content: space-between; align-items: end; }
.location__title { margin: 0; max-width: 580px; font-size: 52px; line-height: 54px; font-weight: 600; letter-spacing: -0.035em; color: var(--preto); text-wrap: balance; }
.location__desc { margin: 0 0 10px; max-width: 440px; font-family: var(--font-body); font-size: 18px; line-height: 27px; color: var(--cinza-700); text-wrap: balance; }

.map { position: relative; overflow: hidden; margin: 52px calc(50% - 50vw / .9) 0; width: calc(100vw / .9); height: clamp(560px, 46vw, 680px); background: var(--creme-200); }
.map__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.map__shield { position: absolute; inset: 0; border: 0; padding: 0; background: transparent; cursor: pointer; }
.map__shield span { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--radius-pill); background: var(--preto); color: var(--branco); font-family: var(--font-sans); font-size: 13px; font-weight: 600; white-space: nowrap; display: none; }
.map__lock { position: absolute; right: 12px; top: 12px; z-index: 3; min-height: 44px; padding: 10px 16px; border: 0; border-radius: var(--radius-pill); background: var(--preto); color: var(--branco); font-family: var(--font-sans); font-size: 13px; font-weight: 600; display: none; }
@media (pointer: coarse) { .map__shield span { display: block; } .map.is-live .map__lock { display: block; } }
.map.is-live .map__shield { display: none; }

.map__card { position: absolute; left: max(40px, calc(50vw / .9 - 600px)); bottom: 48px; width: 388px; padding: 30px 32px 32px; border-radius: 24px; background: var(--branco); color: var(--preto); }
.map__card-eyebrow { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); }
.map__card-name { margin: 0;   /* o rótulo "Onde eu atendo" saiu (Alan, 17/09/2026) e o nome passou a abrir o card */ font-family: var(--font-sans); font-size: 30px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; }
.map__card-addr { margin: 14px 0 0; font-family: var(--font-body); font-size: 17px; line-height: 1.45; }
.map__card-rule { border: 0; height: 1px; margin: 20px 0; background: rgba(17, 17, 17, 0.14); }
.map__card-actions { display: flex; gap: 10px; margin-top: 22px; }
/* "WhatsApp" é mais largo que o "Ligar" da Débora e quebrava o "Traçar rota" em duas linhas: trava a quebra */
.map__btn > span:not(.btn__icon) { white-space: nowrap; text-wrap: nowrap; }
.map__btn { padding-left: 18px; }
.map__btn.btn--plain { padding-inline: 16px; }
.map__card-note { margin: 14px 0 0; font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: #6b6b6b; text-wrap: pretty; }
.map__card-open { margin-top: 10px; color: var(--preto); }
.map__card-open[hidden] { display: none; }

/* ===== RESPONSIVO — localização ===== */
@media (max-width: 900px) {
  .location { padding: 64px 24px 24px; }
  .location__head { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .location__title { max-width: none; font-size: 42px; line-height: 46px; }
  .location__desc { margin-bottom: 0; font-size: 16px; line-height: 24px; }
  .map { margin: 40px calc(50% - 50vw) 0; width: 100vw; }          /* sem zoom abaixo de 900px */
  .map__card { left: max(24px, calc(50vw - 600px)); }
}
@media (min-width: 761px) and (max-width: 900px) {
  .map__card { bottom: 20px; width: 340px; padding: 24px 24px 26px; }
  .map__card-name { font-size: 26px; }
  .map__card-addr { font-size: 16px; }
}
@media (max-width: 760px) {
  .map { height: auto; margin-top: 36px; }
  .map__frame { position: relative; height: 360px; }
  .map__shield { height: 360px; inset: 0 0 auto 0; }
  .map__card { position: relative; left: auto; bottom: auto; z-index: 2; width: calc(100% - 32px); max-width: 380px; margin: -24px auto 0; padding: 24px 20px 28px; border-radius: 20px; }
  .map__card-name { font-size: 26px; }
  .map__card-actions { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .location { padding: 56px 20px 20px; }
  .location__title { font-size: 36px; line-height: 39px; }
  .map__frame, .map__shield { height: 320px; }
  .map__card-actions { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .map__btn { width: 100%; }
}

/* =====================================================
   SEÇÃO 02 — O QUE MUDOU NO SEU DIA A DIA (Alan, 16/09/2026: quatro cards lado a lado)
   Fundo branco, cards chapados com contorno fino. Sem sombra, gradiente ou blur.
   O fecho fica FORA da grade, atravessando a largura: ele é a ressalva que segura a seção
   dentro do parecer (sintoma é motivo de avaliação, não diagnóstico), e não pode virar mais um card.
   ===================================================== */
/* ===== SECAO 02 · O QUE MUDOU NO SEU DIA A DIA =====
   Refeita no formato da referencia (Alan, 20/09/2026): tres fotos em pilula a esquerda,
   etiqueta + titulo + lista de sintomas a direita, CTA fechando a coluna.
   As pilulas guardam o lugar das fotos com o verde da marca. */
.queixas { background: var(--branco); }
.queixas__inner { max-width: 1280px; margin: 0 auto; padding: 112px 40px; display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 48%); justify-content: space-between; align-items: stretch; gap: 48px; }

.queixas__fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
/* sem aspect-ratio: a altura vem do stretch, para a foto acompanhar a coluna de texto inteira. */
.pilula { background: var(--verde); border-radius: 999px; overflow: hidden; }
/* agora que a altura vem do stretch, o margin negativo ESTICA mesmo a do meio. */
.pilula--meio { margin-block: -26px; }
.pilula img { width: 100%; height: 100%; object-fit: cover; display: block; }

.queixas__col { min-width: 0; }
/* Etiqueta em capsula, usada por TODAS as secoes (Alan, 20/09/2026). */
.etiqueta { display: inline-block; width: max-content; margin: 0 0 28px; padding: 11px 22px; border: 1px solid rgba(62, 75, 50, .22); border-radius: 999px; font-family: var(--font-body); font-size: 13px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--verde); }
.etiqueta strong { font-weight: 600; }
.queixas__title { margin: 0; font-family: var(--font-sans); font-size: 46px; line-height: 50px; font-weight: 600; letter-spacing: -0.035em; color: var(--verde); text-wrap: balance; }

.queixas__lista { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; }
.sintoma { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.sintoma__marca { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(62, 75, 50, .22); border-radius: 50%; color: var(--verde); }
.sintoma__marca svg { width: 16px; height: 16px; }
.sintoma__t { font-family: var(--font-body); font-size: 17px; line-height: 25px; color: #3a3a35; text-wrap: pretty; }

.queixas__desc { margin: 30px 0 0; font-family: var(--font-body); font-size: 17px; line-height: 27px; color: var(--cinza-700); text-wrap: balance; }
.queixas__cta { margin-top: 32px; }

.queixas__fecho { margin: 40px 0 0; max-width: 720px; font-family: var(--font-body); font-size: 18px; line-height: 27px; color: var(--preto); text-wrap: balance; }

/* ===== RESPONSIVO — seção 02 ===== */
@media (max-width: 1100px) {
}
@media (max-width: 900px) {
  .queixas__inner { padding: 64px 24px; }
  .queixas__title { max-width: none; font-size: 42px; line-height: 46px; }
  .queixas__desc { margin-bottom: 0; font-size: 16px; line-height: 24px; }
  .queixas__fecho { font-size: 16px; line-height: 24px; }
}
@media (max-width: 600px) {
}
@media (max-width: 480px) {
  .queixas__inner { padding: 56px 20px; }
  .queixas__title { font-size: 36px; line-height: 39px; }
}

/* =====================================================
   SEÇÃO 05 · TERAPIA HORMONAL — refeita do zero (Alan, 16/09/2026)
   Bloco musgo de ponta a ponta, quebrando a sequência de brancos da página.
   Sem card, sem contorno, sem ícone: a hierarquia é tipográfica — numeração grande e fraca,
   linha fina separando os itens, título em três linhas cortadas na mão.
   Contrastes: branco sobre musgo 8,58:1 · musgo claro sobre musgo 5,58:1 (a numeração é decorativa
   e está marcada aria-hidden, então não depende de contraste de leitura).
   ===================================================== */
.th {
  background: var(--preto);         /* preto (Alan, 16/09/2026); era musgo */
  color: var(--branco);
  margin-inline: calc(50% - 50vw / .9);
  width: calc(100vw / .9);
}
.th__inner { max-width: 1280px; margin: 0 auto; padding: 120px 40px 124px; }

.th__top { display: grid; grid-template-columns: minmax(0, 54%) minmax(0, 38%); justify-content: space-between; align-items: start; }
.th__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 54px;
  line-height: 58px;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: var(--branco);
}
.th__lead {
  margin: 8px 0 0;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: pretty;
}

/* Layout em blocos de largura total (Alan, 16/09/2026: "para um outro layout, ainda não está legal").
   Saiu a numeração 01–06 em duas colunas. Aqui cada grupo ocupa a largura inteira: o rótulo fica numa
   coluna estreita à esquerda, as frases em corpo grande à direita, sem número e sem marcador.
   Lê como índice de livro, não como lista de recursos. */
.th__blocos { margin-top: 88px; }
.th-bloco {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  column-gap: 64px;
  padding: 44px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.th-bloco:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.16); }
.th-bloco__label {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dourado-300);
}
.th-bloco__list { list-style: none; margin: 0; padding: 0; display: grid; row-gap: 18px; }
.th-bloco__list li {
  position: relative;
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 36px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--branco);
  text-wrap: balance;
  transition: transform .22s cubic-bezier(.22, 1, .36, 1), color .22s ease;
}

/* Hover: um traço curto entra pela esquerda e a frase desliza junto (Alan, 16/09/2026).
   Chapado — é traço e deslocamento, sem sombra nem brilho. O traço nasce no vão entre as duas
   colunas, por isso o -30px: não empurra o texto nem cria rolagem horizontal.
   Só com ponteiro fino: no toque não existe hover e o estado ficaria preso depois do tap. */
@media (hover: hover) and (pointer: fine) {
  .th-bloco__list li::before {
    content: "";
    position: absolute;
    left: -30px;
    top: 18px;
    width: 0;
    height: 1px;
    background: var(--dourado-300);
    transition: width .22s cubic-bezier(.22, 1, .36, 1);
  }
  .th-bloco__list li:hover { transform: translateX(10px); color: var(--dourado-300); }
  .th-bloco__list li:hover::before { width: 20px; }
}

.th__fecho {
  margin: 88px 0 0;
  max-width: 900px;
  font-family: var(--font-sans);
  font-size: 30px;
  line-height: 40px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--branco);
  text-wrap: balance;
}

/* ===== RESPONSIVO — seção 05 ===== */
@media (max-width: 1100px) {
  
  .th__title { font-size: 46px; line-height: 50px; }
}
@media (max-width: 900px) {
  /* O zoom de 90% passou a valer TAMBEM abaixo de 900px (18/09/2026), entao a compensacao
     precisa dividir por .9 — sem isso a faixa parava antes da borda da tela. */
  .th { margin-inline: calc(50% - 50vw / .9); width: calc(100vw / .9); }
  .th__inner { padding: 72px 24px 76px; }
  .th__top { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .th__title { font-size: 40px; line-height: 44px; }
  .th__title br { display: none; }
  .th__lead { font-size: 17px; line-height: 26px; }
  .th__blocos { margin-top: 48px; }
  .th-bloco { grid-template-columns: minmax(0, 1fr); row-gap: 18px; padding: 32px 0; }
  .th-bloco__label { margin-top: 0; }
  .th-bloco__list li { font-size: 21px; line-height: 30px; }
  .th__fecho { margin-top: 56px; font-size: 24px; line-height: 32px; }
}
@media (max-width: 600px) {
  .th-bloco__list li { font-size: 19px; line-height: 28px; }
}
@media (max-width: 480px) {
  .th__inner { padding: 64px 20px 68px; }
  .th__title { font-size: 34px; line-height: 38px; }
  .th__fecho { font-size: 21px; line-height: 29px; }
}

/* ===== Fundo da página em musgo bem claro (Alan, 17/09/2026) =====
   #f2f4ef é o musgo #3e4b32 clareado até virar superfície. Contrastes conferidos sobre ele:
   preto 17,05:1 · cinza de apoio 4,81:1 · musgo 8,4:1. Todos passam.
   As descrições perderam peso de propósito: texto de apoio não deve competir com o título. */
body { background: var(--musgo-50); }
.hero { background: var(--musgo-50); }
.queixas { background: var(--musgo-50); }
.location { background: var(--musgo-50); }
.footer { background: var(--musgo-50); }
.footer__giant { color: #e6eade; }                 /* o letreiro some se ficar igual ao fundo */

/* Descrições e textos de apoio com menos peso */
.hero__desc { color: #5c5c58; }
.queixas__desc { color: #6b6b66; }
.location__desc { color: #6b6b66; }
.map__card-addr { color: #4a4a46; }
.footer__reg { color: #6b6b66; }

/* Os blocos escuros passam de preto para o musgo (Alan, 17/09/2026: "ainda está preto para mim").
   Branco sobre musgo #3e4b32 = 8,58:1; musgo claro #c3ccb2 sobre musgo = 5,58:1. Os dois passam. */
.marquee { background: var(--verde); border-top-color: var(--verde); border-bottom-color: var(--verde); }
.th { background: var(--verde); }

/* Os componentes acompanham: botão e menu em musgo no lugar do preto */
.btn { --btn-bg: var(--verde); }
.btn--gold { --btn-bg: var(--verde); --btn-fg: var(--branco); }
.nav__link { color: var(--verde); }
.nav__link:hover { background: var(--verde); color: var(--branco); }
.nav__link:focus-visible { outline-color: var(--verde); }
.brand__logo { color: var(--verde); }
.hero__title { color: var(--verde); }
.queixas__title, .location__title { color: var(--verde); }
.footer { color: var(--verde); }
.footer__link { color: rgba(62, 75, 50, .85); }
.footer__link:hover, .footer__brand, .footer__social a:hover { color: var(--verde); }
.footer__social a { color: rgba(62, 75, 50, .85); }

/* =====================================================
   SEÇÃO 06 · A MÉDICA (17/09/2026)
   Foto real à esquerda, texto à direita. A foto tem peso proposital: é a prova de quem ela é
   e de onde atende, e é a única imagem não gerada da página.
   O bloco de identificação fecha a coluna — é dado regulatório, não decoração, então fica
   separado do texto por uma linha e em corpo menor, sem virar letra miúda.
   ===================================================== */
.sobre { background: var(--branco); }
.sobre__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 112px 40px;
  display: grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 50%);
  justify-content: space-between;
  align-items: center;
  column-gap: 40px;
}
.sobre__foto { margin: 0; }
.sobre__foto img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }

.sobre__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 52px;
  line-height: 54px;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--verde);
  text-wrap: balance;
}
.sobre__lead {
  margin: 24px 0 0;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 29px;
  color: var(--cinza-900);
  text-wrap: balance;
}
.sobre__apoio {
  margin: 18px 0 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 27px;
  color: #6b6b66;
  text-wrap: pretty;
}

/* Formação: três marcas soltas, separadas por ponto, sem virar card nem selo */
.sobre__formacao {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin: 32px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--verde);
}
.sobre__formacao span + span::before { content: "·"; margin-right: 18px; color: rgba(62, 75, 50, .45); }

.sobre__id {
  margin: 28px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(62, 75, 50, .18);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.65;
  color: #6b6b66;
  text-wrap: balance;
}

/* ===== RESPONSIVO — seção 06 ===== */
@media (max-width: 900px) {
  .sobre__inner { padding: 64px 24px; grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .sobre__foto img { max-width: 420px; margin-inline: auto; }
  .sobre__title { font-size: 42px; line-height: 46px; }
  .sobre__lead { font-size: 17px; line-height: 27px; }
  .sobre__apoio { font-size: 16px; line-height: 25px; }
}
@media (max-width: 480px) {
  .sobre__inner { padding: 56px 20px; }
  .sobre__title { font-size: 34px; line-height: 38px; }
}

/* =====================================================
   SEÇÃO 03 · COMO ACONTECE A AVALIAÇÃO (17/09/2026)
   Geometria medida pelo Codex na LP do Dr. Leonardo Pozzobon e virada para horizontal.
   Laudo em referencias/secao-03-avaliacao/medidas-referencia-e-proposta-horizontal.md.

   Medidas confirmadas que vieram de lá: quadrado 160 raio 4 · pontilhado em módulo 8×8 ·
   círculo 36 a 12/12 · SVG 72 (o stroke 2 num viewBox 24 renderiza 6px nesse tamanho) ·
   régua 1px. O container tem 1280 INCLUINDO os 40 de padding, então a área útil é 1200:
   quatro colunas de 276 com gap 32.

   O cinza do corpo da referência (#A3A3A0) dá 2,53:1 e NÃO foi copiado. Aqui é #4A4A4A,
   que sobre o fundo #F2F4EF dá 8,00:1.
   ===================================================== */
.etapas { background: #e8ede0; }   /* verde mais presente que o resto da página, para o quadrado branco destacar */
.etapas__inner { max-width: 1280px; margin: 0 auto; padding: 112px 40px; }

.etapas__head { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 420px); justify-content: space-between; align-items: end; gap: 24px; }
.etapas__title { margin: 0; font-family: var(--font-sans); font-size: 52px; line-height: 54px; font-weight: 600; letter-spacing: -0.035em; color: var(--verde); text-wrap: balance; }
.etapas__lead { margin: 0 0 6px; font-family: var(--font-body); font-size: 18px; line-height: 27px; color: #6b6b66; text-wrap: balance; }

.etapas__trilho { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }

/* Alan, 20/09/2026: titulo e descricao centralizados. O icone vai junto — deixar a marca
   encostada a esquerda com o texto no centro deixava a coluna torta. */
.passo { min-width: 0; text-align: center; }
.passo__marca { margin-inline: auto; }

/* O quadrado: pontilhado próprio, número no canto, ícone ao centro.
   O padrão é um radial-gradient em módulo 8×8, como na referência — não imagem nem granulado. */
.passo__marca {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 4px;
  background-color: #ffffff;        /* quadrado branco (Alan, 17/09/2026); literal, porque var(--branco) computava transparente aqui */
  background-image: radial-gradient(circle, rgba(62, 75, 50, .12) 1px, transparent 1.2px);
  background-size: 8px 8px;
  color: var(--verde);
  transition: background-color .3s ease, color .3s ease;
}
.passo__n {
  position: absolute;
  top: 12px; right: 12px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--verde);
  color: var(--branco);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .06em;
  transition: background-color .3s ease, color .3s ease;
}
.passo__icone { width: 72px; height: 72px; }

/* Destaque no hover: o quadrado vira musgo e o desenho inverte (Codex).
   NÃO é aria-current nem indicador de etapa concluída — é ênfase de leitura.
   Com quatro passos na mesma linha, todos cruzam a tela ao mesmo tempo: o gatilho por
   rolagem da referência não faz sentido aqui e não foi portado. */
@media (hover: hover) and (pointer: fine) {
  .passo:hover .passo__marca { background-color: var(--verde); background-image: none; color: var(--branco); }
  .passo:hover .passo__n { background: var(--branco); color: var(--verde); }
}

.passo__titulo {
  margin: 28px 0 0;
  min-height: 52px;                 /* alinha os títulos entre si sem truncar texto */
  font-family: var(--font-sans);
  font-size: 21px;
  line-height: 26px;
  font-weight: 600;
  color: var(--verde);
  text-wrap: balance;
}
.passo__titulo { padding-bottom: 18px; border-bottom: 1px solid rgba(62, 75, 50, .20); }
.passo__texto { margin: 20px 0 0; font-family: var(--font-body); font-size: 16px; line-height: 24px; color: #4a4a4a; text-wrap: balance; }

/* ===== RESPONSIVO — seção 03 =====
   Abaixo de 1120px úteis vira trilho com rolagem manual, deixando parte do próximo passo à vista.
   Sem avanço automático e sem altura fixa (Codex). */
@media (max-width: 1180px) {
  .etapas__trilho {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 280px;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin-inline: -40px;
    padding-inline: 40px;
    scroll-padding-inline: 40px;
  }
  .passo { scroll-snap-align: start; }
}
@media (max-width: 900px) {
  .etapas__inner { padding: 64px 24px; }
  .etapas__head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; align-items: start; }
  .etapas__title { font-size: 42px; line-height: 46px; }
  .etapas__trilho { margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; }
}
@media (max-width: 480px) {
  .etapas__inner { padding: 56px 20px; }
  .etapas__title { font-size: 36px; line-height: 39px; }
  .etapas__trilho { margin: 36px -20px 0; padding-inline: 20px; scroll-padding-inline: 20px; grid-auto-columns: calc(100vw - 68px); gap: 20px; }
  .passo__marca { width: 128px; height: 128px; }
  .passo__icone { width: 60px; height: 60px; }
  .passo__titulo { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .passo__marca, .passo__n { transition: none; }
}

/* As animações dos ícones vivem em img/secoes/avaliacao/icones-avaliacao.css (Codex, 17/09/2026). */

/* SEÇÃO 04 · referência medida: 32vw × 42vw, raio 8, régua recuada.
   Compensação do zoom .9 exclusivamente nas medidas desta seção. */
.cuidado { --cuidado-scale: .9; --cuidado-card: clamp(calc(360px / var(--cuidado-scale)), calc(28vw / var(--cuidado-scale)), calc(420px / var(--cuidado-scale))); background: #fff; padding: 112px 0 64px; overflow: hidden; }
.cuidado__inner { max-width: 1280px; margin-inline: auto; padding-inline: 40px; }
.cuidado__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: 64px; }
.cuidado__title { margin: 0; font: 600 52px/54px var(--font-sans); letter-spacing: -.035em; color: var(--verde); text-wrap: balance; }
.cuidado__lead { margin: 0; font: 400 18px/27px var(--font-body); color: #4a4a4a; text-wrap: balance; }
.cuidado__trilho { display: grid; grid-auto-flow: column; grid-auto-columns: var(--cuidado-card); justify-content: safe center; gap: calc(16px / var(--cuidado-scale)); list-style: none; margin: 64px 0 0; padding: 0 calc(20px / var(--cuidado-scale)) 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: calc(20px / var(--cuidado-scale)); scrollbar-width: none; }
.cuidado__trilho:focus-visible { outline: 2px solid #111; outline-offset: -2px; }
.cuidado-card { position: relative; min-width: 0; aspect-ratio: 16 / 21; overflow: hidden; border-radius: calc(8px / var(--cuidado-scale)); background: #111; scroll-snap-align: start; isolation: isolate; }
.cuidado-card__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.cuidado-card__topo { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: stretch; margin-inline: calc(20px / var(--cuidado-scale)); border-bottom: 1px solid rgb(255 255 255 / .55); color: #fff; }
.cuidado-card__n { align-self: stretch; margin: 0; padding: calc(16px / var(--cuidado-scale)) calc(16px / var(--cuidado-scale)) calc(10px / var(--cuidado-scale)) 0; border-right: 1px solid rgb(255 255 255 / .55); font-family: var(--font-sans); font-size: calc(4.5vw / var(--cuidado-scale)); line-height: 1; font-weight: 500; letter-spacing: -.04em; color: #fff; }
.cuidado-card__rotulos { min-width: 0; align-self: stretch; padding: calc(18px / var(--cuidado-scale)) 0 calc(16px / var(--cuidado-scale)) calc(16px / var(--cuidado-scale)); }
.cuidado-card__titulo { margin: 0; font: 500 clamp(20px, 1.45vw, 30px)/1.1 var(--font-sans); color: #fff; text-wrap: balance; letter-spacing: -.025em; }
.cuidado-card__sub { margin: 8px 0 0; font: 400 clamp(14px, 1.05vw, 16px)/1.25 var(--font-body); color: #fff; text-wrap: balance; }
.cuidado-card__texto { position: absolute; z-index: 1; left: calc(20px / var(--cuidado-scale)); right: calc(20px / var(--cuidado-scale)); bottom: calc(24px / var(--cuidado-scale)); margin: 0; max-width: 46ch; font: 400 clamp(17px, 1.12vw, 19px)/1.3 var(--font-body); color: #fff; text-wrap: pretty; }
.cuidado__rodape { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; }
.cuidado__credito { margin: 0; color: #4a4a4a; font: 400 14px/1.5 var(--font-body); }
.cuidado__nav { display: flex; align-items: center; gap: 10px; }
.cuidado__nav[hidden] { display: none; }
.cuidado__posicao { min-width: 62px; margin-right: 12px; font: 400 14px/1 var(--font-body); color: #111; }
.cuidado__seta { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid #111; border-radius: 50%; background: #111; color: #fff; cursor: pointer; }
.cuidado__seta svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cuidado__seta:disabled { background: #fff; color: #666; border-color: #bbb; cursor: default; }
.cuidado__seta:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
@media (max-width: 1100px) {
 .cuidado { --cuidado-card: min(calc(52vw / var(--cuidado-scale)), calc(400px / var(--cuidado-scale))); }
 .cuidado__head { gap: 32px; }
 .cuidado-card__n { font-size: 72px; }
 .cuidado-card__titulo { font-size: 25px; }
 .cuidado-card__sub { font-size: 17px; }
 .cuidado-card__texto { font-size: 19px; }
}
@media (max-width: 900px) {
 .cuidado { --cuidado-scale: 1; padding: 64px 0 48px; }
 .cuidado__inner { padding-inline: 24px; }
 .cuidado__head { grid-template-columns: minmax(0,1fr); gap: 20px; }
 .cuidado__title { font-size: 42px; line-height: 46px; }
 .cuidado__trilho { margin-top: 40px; }
 .cuidado-card__n { font-size: 64px; }
 .cuidado-card__titulo { font-size: 23px; }
 .cuidado-card__sub { font-size: 15px; }
 .cuidado-card__texto { font-size: 17px; }
}
@media (max-width: 600px) {
 .cuidado { --cuidado-card: min(86vw, 360px); }
 .cuidado-card { aspect-ratio: 3 / 4; }
 .cuidado-card__titulo { font-size: 22px; }
 .cuidado-card__n { font-size: 56px; }
 .cuidado-card__texto { font-size: 16px; line-height: 1.4; }
 .cuidado-card__sub { font-size: 14px; line-height: 1.3; }
}
@media (max-width: 480px) {
 .cuidado { padding: 56px 0 40px; }
 .cuidado__inner { padding-inline: 20px; }
 .cuidado__title { font-size: 36px; line-height: 39px; }
 .cuidado__trilho { gap: 12px; padding-inline: 16px; scroll-padding-inline: 16px; margin-top: 32px; }
 .cuidado-card__topo { margin-inline: 16px; }
 .cuidado-card__n { font-size: 44px; padding: 16px 12px 10px 0; }
 .cuidado-card__rotulos { padding: 16px 0 12px 12px; }
 .cuidado-card__titulo { font-size: 20px; }
 .cuidado-card__sub { margin-top: 6px; font-size: 13px; }
 .cuidado-card__texto { left: 16px; right: 16px; bottom: 20px; font-size: 15px; line-height: 1.4; }
 .cuidado__rodape { gap: 12px; }
 .cuidado__posicao { min-width: 44px; margin-right: 0; }
 .cuidado__nav { gap: 8px; }
 .cuidado__seta { width: 44px; height: 44px; }
 .cuidado__credito { font-size: 12px; }
}

/* Retorno à composição com fotografia integral, solicitado pelo Alan. */
.cuidado-card { aspect-ratio: 3 / 4; container-type: inline-size; }
.cuidado-card__titulo { font-size: clamp(16px, 3.6cqw, 24px); line-height: 1.2; white-space: nowrap; text-wrap: nowrap; }
.cuidado-card__n { font-size: 52px; }
.cuidado__rodape { justify-content: flex-end; }
@media(max-width:600px) {
 .cuidado-card__n { font-size:28px; padding-right:10px; }
 .cuidado-card__rotulos { padding-left:10px; }
 .cuidado-card__titulo { font-size:16px; }
}
@media(max-width:360px) {
 .cuidado-card__topo { margin-inline:12px; }
 .cuidado-card__n { font-size:23px; padding-right:8px; }
 .cuidado-card__rotulos { padding-left:8px; }
 .cuidado-card__titulo { font-size:14px; }
}

/* O menu flutuante apontava para img/logo/marca.svg, que nunca existiu — sobra do arquivo da
   Débora, onde era o monograma "D". Virou o pássaro da Melius, inline, herdando a cor (17/09/2026). */
.float-nav__symbol { display: block; width: 34px; height: auto; color: var(--verde); }

/* Navegação direta: sem controles nem barra visível (Alan, 17/09). */
.cuidado__trilho::-webkit-scrollbar { display: none; width: 0; height: 0; }
.cuidado__trilho.is-scrollable { cursor: grab; }
.cuidado__trilho.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.cuidado-card__foto { -webkit-user-drag: none; }

/* Avaliação: cabeçalho centralizado e quebras equilibradas. */
.etapas__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 20px; }
.etapas__title { max-width: 900px; text-wrap: balance; }
.etapas__lead { max-width: 620px; margin: 0; text-wrap: balance; }

/* =====================================================
   SEÇÃO 06 · A MÉDICA — CSS portado da LP da Dra. Débora e adaptado (Alan, 17/09/2026).
   Traduções na cópia: creme → branco e musgo claro, e os rgba do verde dela para o musgo daqui.
   O espaço da foto fica branco por enquanto, a pedido do Alan: a caixa continua ocupando o
   lugar para a página não mudar de altura quando a foto entrar.
   ===================================================== */
.about { padding: 0; }
.about__panel { position: relative; display: grid; grid-template-columns: 52fr 48fr; margin: 0 16px; background: var(--verde); border-radius: 26px; overflow: hidden; color: var(--branco); }
.about__text { padding: 56px clamp(56px, 6vw, 96px) 64px; }
.about__photo { position: relative; min-height: 100%; background: var(--verde-700); }
.about__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block; }   /* olhos perto do terço superior (QA Codex) */

.profile-grid { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 36px; max-width: 660px; align-content: start; }
.profile-head { grid-column: 1 / -1; margin-top: 8px; }   /* sem eyebrow (Alan, 10/09/2026) */
.profile-name { margin: 0; font-family: var(--font-sans); font-size: 58px; line-height: 1; font-weight: 500; letter-spacing: -.045em; color: var(--branco); white-space: nowrap; }
.profile-meta { margin: 20px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; letter-spacing: .06em; color: rgba(255, 255, 255, 0.7); }

.profile-side { margin-top: 52px; }
.profile-side__big { margin: 0; font-family: var(--font-sans); font-size: 32px; line-height: 1; font-weight: 500; letter-spacing: -.02em; color: var(--branco); }
.profile-side__big--sm { font-size: 20px; line-height: 1.15; }
.profile-side__label { position: relative; margin: 18px 0 0; padding-top: 17px; font-family: var(--font-body); font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, 0.7); }
.profile-side__label::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 1px; background: rgba(255, 255, 255, 0.25); }

.profile-body { margin-top: 52px; max-width: 500px; }
.profile-p { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.55; text-wrap: balance; }
.profile-p + .profile-p { margin-top: 22px; }
.profile-p--lead   { color: var(--branco); font-size: 19px; line-height: 1.5; font-weight: 500; }
.profile-p--soft   { color: rgba(255, 255, 255, 0.78); font-size: 16.5px; }
.profile-p--strong { color: var(--dourado-300); font-weight: 600; }

/* ---- acordeão "Formação" ---- */
.profile-acc { border-top: 1px solid rgba(255, 255, 255, 0.22); border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.profile-acc__btn { width: 100%; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0; border: 0; background: transparent; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--branco); cursor: pointer; text-align: left; }
.profile-acc__btn:focus-visible { outline: 2px solid var(--branco); outline-offset: 2px; }
.profile-acc__plus { width: 20px; height: 20px; flex: 0 0 auto; transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.profile-acc__btn[aria-expanded="true"] .profile-acc__plus { transform: rotate(45deg); }
.profile-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.22, 1, .36, 1); }
.profile-acc__body > * { overflow: hidden; min-height: 0; }
.profile-acc.is-open .profile-acc__body { grid-template-rows: 1fr; }
.profile-acc__list { margin: 0; padding: 0; list-style: none; counter-reset: titulo; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--branco); }
.profile-acc__list li { counter-increment: titulo; display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "n t" ". d"; align-items: baseline; padding: 18px 0 19px; border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.profile-acc__list li:last-child { border-bottom: 0; }
.profile-acc__list li::before { grid-area: n; content: counter(titulo, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; color: rgba(255, 255, 255, 0.65); }
.profile-acc__t { grid-area: t; font-size: 16px; font-weight: 500; color: var(--branco); text-wrap: pretty; }
.profile-acc__d { grid-area: d; margin-top: 3px; font-size: 14px; line-height: 1.45; color: rgba(255, 255, 255, 0.7); text-wrap: pretty; }

/* ---- Instagram + CTA (base) ---- */
.profile-insta { margin-top: 56px; align-self: end; width: 44px; height: 44px; margin-left: -10px; display: grid; place-items: center; color: var(--branco); }
.profile-insta svg { width: 24px; height: 24px; }
.profile-insta:focus-visible { outline: 2px solid var(--branco); outline-offset: 3px; border-radius: 50%; }
.profile-grid > .profile-body:last-child { margin-top: 56px; }
.profile-cta { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .profile-acc__body, .profile-acc__plus { transition: none; } }

/* ===== RESPONSIVO — sobre ===== */
@media (max-width: 1100px) { .profile-name { font-size: 46px; } .about__text { padding: 48px 40px 56px; } }
@media (max-width: 900px) {
  .about__panel { grid-template-columns: 1fr; margin: 0 12px; border-radius: 22px; }
  .about__photo { order: -1; min-height: 0; aspect-ratio: 4 / 5; }
  .about__photo img { object-position: 50% 40%; }
  .about__text { padding: 40px 28px 48px; }
  .profile-name { font-size: 38px; white-space: normal; text-wrap: balance; }
  .profile-side { margin-top: 36px; }
  .profile-body { margin-top: 20px; }
  .profile-grid > .profile-body:last-child, .profile-insta { margin-top: 32px; }
}
@media (max-width: 600px) {
  .about__panel { margin: 0 10px; }
  .about__text { padding: 32px 20px 40px; }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-name { font-size: 32px; }
  .profile-p--lead { font-size: 18px; }
  .profile-cta { width: 100%; max-width: 360px; justify-content: space-between; }
}

/* espaço da foto vazio, a pedido do Alan (17/09/2026) */
.about__photo--vazia { background: var(--branco); border-radius: var(--radius-card); min-height: 520px; }
@media (max-width: 900px) { .about__photo--vazia { min-height: 340px; } }

/* Correções da porta da seção 06 (17/09/2026).
   1. A grade do perfil: na Débora existe uma regra TARDIA que a deixa em uma coluna, porque lá
      os dois blocos laterais foram removidos a pedido do Alan. Eu copiei o bloco original e não
      essa correção, e o texto caiu numa coluna de 120px — uma palavra por linha.
   2. O painel: a seção da Débora é de largura total porque a página dela usa html{zoom:.9} e ela
      compensa com calc. Aqui o painel precisa caber no container da página. */
.profile-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; max-width: none; }
.profile-grid > .profile-body { max-width: 560px; }
.about { padding: 0 0 8px; }
.about__panel { max-width: 1280px; margin-inline: auto; }
@media (max-width: 1360px) { .about__panel { margin-inline: 16px; } }
@media (max-width: 900px) { .about__panel { margin-inline: 12px; } }
/* O nome completo não cabia no título e cortava. Ele passou para a linha de identificação,
   que é onde a CFM 2.336 pede o nome, e o título ficou com o nome curto — que é como ela
   assina no Instagram e no consultório. */
.profile-name { text-wrap: balance; }
.profile-meta { line-height: 1.7; }

/* Correções da seção 06 (Alan, 17/09/2026).
   O BUG: o espaço branco da foto tinha border-radius próprio, então desenhava um retângulo com
   cantos DENTRO do painel, que já corta pelo overflow. Resultado: o branco descolava da borda
   e aparecia um degrau no canto direito. Quem arredonda é só o painel.
   Também: cantos menos arredondados e respiro acima e abaixo da seção. */
.about__photo--vazia { border-radius: 0; min-height: 0; }
.about__panel { border-radius: 12px; align-items: stretch; }
.about__photo { border-radius: 0; overflow: hidden; }
.about__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about { padding: 72px 0; }
@media (max-width: 900px) {
  .about { padding: 48px 0; }
  .about__panel { border-radius: 10px; }
  .about__photo--vazia { min-height: 320px; }
}

/* O botão da seção 06 usa .btn--white, mas a regra ficou ANTES do bloco em que eu troquei
   todos os botões de preto para musgo — mesma especificidade, e a ordem venceu. Por isso ele
   aparecia musgo sobre o painel musgo. Esta regra vem depois e devolve o branco.
   O texto vai em musgo, não em preto: a página não tem mais preto. */
/* Valores literais em vez de var(): as variáveis não estavam resolvendo neste elemento e o
   botão caía para o azul de link padrão do navegador. */
.btn--white, .profile-cta {
  background: #ffffff;
  color: #3e4b32;
  border-color: #ffffff;
}
.btn--white .btn__icon, .profile-cta .btn__icon { background: #3e4b32; color: #ffffff; }
@media (hover: hover) and (pointer: fine) {
  .btn--white:hover, .profile-cta:hover { background: transparent; color: #ffffff; border-color: #ffffff; }
  .btn--white:hover .btn__icon, .profile-cta:hover .btn__icon { background: #ffffff; color: #3e4b32; }
}
/* O título da seção 03 tinha uma quebra manual (<br>) posta pelo Codex para caber em duas linhas.
   Com a headline nova, o balance resolve sozinho. */
.etapas__title { text-wrap: balance; }

/* =====================================================
   SEÇÃO 08 · DÚVIDAS — medidas do laudo do Codex
   (referencias/secao-08-duvidas/medidas-referencia-e-proposta-faq.md)
   Todas em px CSS. A página roda com html{zoom:.9}, então o pixel físico é menor —
   o laudo já considera isso e não compensa, para manter o porte das outras seções.
   ===================================================== */
.faq { background: var(--branco); }
.faq__inner { max-width: 1280px; margin: 0 auto; padding: 136px 40px 160px; }

/* Cabeçalho: eyebrow 120 · gap 24 · título · gap 24 · apoio 490. Apoio alinhado ao TOPO. */
/* a coluna de 120px guardava o rotulo "Duvidas frequentes", removido em 20/09/2026 por
   duplicar a etiqueta nova. Sem ela o titulo encosta na margem, embaixo da etiqueta. */
.faq__head { display: grid; grid-template-columns: minmax(0, 1fr) 490px; gap: 24px; align-items: start; }
.faq__title { margin: 0; max-width: 638px; font-family: var(--font-sans); font-size: 44px; line-height: 47.52px; font-weight: 500; letter-spacing: -0.012em; color: var(--verde); text-wrap: balance; }
.faq__apoio { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 27.2px; color: #6b6b66; text-wrap: balance; }

/* Cabeçalho → primeira régua: 72px */
.faq__lista { margin-top: 72px; }

/* Cada item: régua só no topo; a de baixo existe apenas no último, para não duplicar entre linhas */
.faq-item { border-top: 1px solid rgba(62, 75, 50, .18); }
.faq-item:last-child { border-bottom: 1px solid rgba(62, 75, 50, .18); }
.faq-item__h { margin: 0; font: inherit; }

/* O botão não tem 96px: o min-height é 96, mas 44 do sinal + 28 + 28 de padding dão 100 reais. */
.faq-item__btn {
  width: 100%;
  min-height: 96px;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 56px;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.faq-item__n { font-family: var(--font-mono); font-size: 10px; line-height: 15.5px; font-weight: 400; letter-spacing: .14em; color: #9a9a95; transition: color .25s ease; }
.faq-item__q { max-width: 760px; font-family: var(--font-sans); font-size: 21px; line-height: 27.3px; font-weight: 500; color: var(--verde); text-wrap: balance; }
.faq-item__mais { justify-self: end; width: 44px; height: 44px; display: grid; place-items: center; color: var(--verde); transition: transform .3s cubic-bezier(.22, .61, .36, 1); }

@media (hover: hover) and (pointer: fine) {
  .faq-item__btn:hover .faq-item__n { color: #6b6b66; }
  .faq-item__btn:hover .faq-item__mais { transform: rotate(15deg); }
}
.faq-item__btn[aria-expanded="true"] .faq-item__mais,
.faq-item__btn[aria-expanded="true"]:hover .faq-item__mais { transform: rotate(45deg); }   /* vira × e fica lá */

/* Painel: abre por grid-template-rows 0fr → 1fr, 420ms */
.faq-item__painel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.22, .61, .36, 1); }
.faq-item__painel > * { min-height: 0; overflow: hidden; }
/* O botao mora dentro do <h3>, entao ele NUNCA foi irmao do painel e este seletor de
   irmao adjacente jamais casou: as respostas existiam e nao abriam. Agora o alvo e o
   <h3>, com :has(); a classe is-open, posta pelo JS, cobre navegador sem :has(). */
.faq-item__h:has(.faq-item__btn[aria-expanded="true"]) + .faq-item__painel,
.faq-item.is-open .faq-item__painel { grid-template-rows: 1fr; }

/* content-box de propósito: os 720px são de TEXTO. Em border-box o texto cairia para 520. */
.faq-item__resposta {
  box-sizing: content-box;
  max-width: 720px;
  padding: 0 56px 30px 144px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .42s cubic-bezier(.22, .61, .36, 1), transform .42s cubic-bezier(.22, .61, .36, 1);
}
.faq-item__btn[aria-expanded="true"] + .faq-item__painel .faq-item__resposta { opacity: 1; transform: none; }
.faq-item__resposta p { margin: 0; font-family: var(--font-body); font-size: 17px; line-height: 28.05px; color: #6b6b66; text-wrap: pretty; }

/* ===== RESPONSIVO — seção 08 ===== */
@media (max-width: 1180px) {
  .faq__inner { padding: 112px 24px 128px; }
  .faq__head { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .faq__lista { margin-top: 64px; }
}
@media (max-width: 760px) {
  .faq__inner { padding: 88px 20px 96px; }
  .faq__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 0; }
  .faq__title { margin-top: 24px; font-size: 32px; line-height: 35.2px; }
  .faq__apoio { margin-top: 28px; max-width: 34ch; }
  .faq__lista { margin-top: 56px; }
  .faq-item__btn { grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 12px; padding: 22px 0; min-height: 88px; align-items: start; }
  .faq-item__n { padding-top: 6px; }
  .faq-item__q { font-size: 19px; line-height: 25.65px; }
  .faq-item__mais { align-self: start; }
  .faq-item__resposta { box-sizing: border-box; max-width: none; padding: 0 0 26px 52px; }
  .faq-item__resposta p { font-size: 16px; line-height: 26.4px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item__painel, .faq-item__resposta, .faq-item__mais, .faq-item__n { transition: none; }
}

/* Seção 04: fotos v6 aprovadas, dentro dos espaços existentes.
   Títulos e descrições permanecem fora das imagens, sobre fundo claro. */
.cuidado--fotos-internas .cuidado-card { aspect-ratio: auto; background: var(--musgo-50); border: 1px solid rgba(62, 75, 50, .14); display: flex; flex-direction: column; }
.cuidado--fotos-internas .cuidado-card__midia { position: relative; flex: 0 0 auto; aspect-ratio: 3 / 4; min-height: 0; margin: 0 24px; overflow: hidden; background: var(--verde); border: 0; border-radius: 6px; }
.cuidado--fotos-internas .cuidado-card__foto { display: block; object-fit: contain; object-position: center; }
.cuidado--fotos-internas .cuidado-card__topo { border-bottom-color: rgba(62, 75, 50, .20); }
.cuidado--fotos-internas .cuidado-card__n { color: var(--verde); border-right-color: rgba(62, 75, 50, .20); }
.cuidado--fotos-internas .cuidado-card__titulo { color: var(--verde); }
.cuidado--fotos-internas .cuidado-card__sub { color: #6b6b66; }
.cuidado--fotos-internas .cuidado-card__texto { position: static; margin: 20px 24px 24px; color: #4a4a4a; }
/* O texto de apoio da seção 03 saiu (Alan, 18/09/2026). Sem ele, a grade de duas colunas
   deixaria metade do cabeçalho vazia: o título passa a ocupar a linha. */
.etapas__head { grid-template-columns: minmax(0, 1fr); }

/* =====================================================
   FAIXA DE RESPIRO (18/09/2026)
   Bloco de largura total, duas linhas centralizadas, sem botão e sem imagem.
   A segunda linha é mais fraca de propósito: as duas juntas são uma frase só.
   Contraste sobre o musgo: branco 8,58:1 · musgo claro #c3ccb2 5,58:1.
   ===================================================== */
.respiro {
  background: var(--verde);
  margin-inline: calc(50% - 50vw / .9);   /* a página roda com html{zoom:.9} */
  width: calc(100vw / .9);
  padding: 104px 40px;
}
.respiro__frase {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 34px;
  line-height: 44px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.respiro__forte, .respiro__fraca { display: block; text-wrap: balance; }
.respiro__forte { color: var(--branco); }
.respiro__fraca { color: var(--dourado-300); }

@media (max-width: 900px) {
  .respiro { margin-inline: calc(50% - 50vw / .9); width: calc(100vw / .9); padding: 72px 24px; }
  .respiro__frase { font-size: 26px; line-height: 34px; }
}
@media (max-width: 480px) {
  .respiro { padding: 56px 20px; }
  .respiro__frase { font-size: 22px; line-height: 30px; }
}

/* ===== Botões novos nas seções (Alan, 18/09/2026) =====
   Um CTA por seção, sempre depois do conteúdo — nunca antes de a pessoa ter o que decidir.
   Nos blocos musgo o botão é branco; nos claros, musgo. */
/* O botao mora na coluna da direita do topo, logo abaixo da descricao (Alan, 18/09/2026). */
/* lead + botao na mesma celula: o botao acompanha a descricao em vez de cair numa linha
   nova do grid, cuja altura vinha do titulo da esquerda e abria um vao grande. */
.th__col { min-width: 0; }
.th__acao { margin-top: 20px; }
.respiro__acao { margin-top: 36px; display: flex; justify-content: center; }


@media (max-width: 760px) {
  .th__acao { margin-top: 18px; }
  .th__acao .btn { width: 100%; max-width: 360px; justify-content: space-between; }
}

/* ===== ALVOS DE TOQUE NO CELULAR =====
   Precisa ficar no fim do arquivo: com o zoom de 90% valendo também abaixo de 900px,
   estes alvos encolhem 10%, e regras declaradas mais adiante venciam a compensação. */
@media (max-width: 900px) {
  .btn { min-height: 58px; }                 /* 58 × .9 ≈ 52, o porte do botão M */
  .btn--lg { min-height: 62px; }
  .btn__icon { width: 44px; height: 44px; }
  .nav__link { min-height: 49px; }
  .faq-item__btn { min-height: 98px; }       /* 98 × .9 ≈ 88, o mínimo medido pelo Codex */
  .faq-item__mais { width: 49px; height: 49px; }
  .map__shield, .map__lock { min-height: 49px; }
  /* Alvos de toque do rodape e do painel da medica: com o zoom valendo tambem no celular,
     um link de texto de 20px de altura fica ainda menor. Estes ganham area clicavel real. */
  .footer__nav a, .footer__links a { display: inline-flex; align-items: center; min-height: 49px; }
  .footer__social a, .profile-insta { width: 49px; height: 49px; }
  .footer__dev a { display: inline-flex; align-items: center; min-height: 49px; }
  .brand, .footer__brand { min-height: 49px; }
}

/* Capa colorida aprovada por Alan, 18/09/2026. O branco está no arquivo.
   Em telas estreitas, foto acima da copy para não colocar texto sobre o rosto. */
.hero--retrato-cor { background: #fff; height: min(750px, 50vw); min-height: 0; }
.hero--retrato-cor .hero__bg { object-position: 0% 0%; }
.hero--retrato-cor .hero__desc { color: var(--verde); }
@media (max-width: 1100px) {
  .hero--retrato-cor { height: auto; min-height: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
  .hero--retrato-cor .hero__media { position: relative; inset: auto; order: 0; width: 100%; height: clamp(300px, 65vw, 450px); flex: none; }
  .hero--retrato-cor .hero__bg { object-position: 85% 0%; }
  .hero--retrato-cor .hero__inner { order: 1; display: block; padding: 32px 24px 44px; text-align: center; }
  .hero--retrato-cor .hero__content { margin-inline: auto; }
  .hero--retrato-cor .hero__actions { justify-content: center; }
}

/* ===== SECAO 02 · RESPONSIVO =====
   Abaixo de 1024px as fotos passam para cima do texto; abaixo de 640px viram tres
   pilulas menores lado a lado, que e o que cabe sem espremer a lista. */
@media (max-width: 1024px) {
  .queixas__inner { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .queixas__fotos { max-width: 560px; }
  /* empilhado, a pilula perde a coluna de texto que ditava a altura e estica demais:
     de volta a proporcao, senao as fotos comem meia tela antes do conteudo. */
  .queixas__fotos { align-items: start; }
  .pilula { aspect-ratio: 1 / 2.6; }
  .pilula--meio { aspect-ratio: 1 / 2.85; }
  .queixas__title { font-size: 40px; line-height: 44px; }
}
@media (max-width: 640px) {
  .queixas__inner { padding: 72px 20px; gap: 36px; }
  .queixas__fotos { gap: 10px; }
  .pilula { aspect-ratio: 1 / 2.5; }
  .pilula--meio { aspect-ratio: 1 / 2.75; }

  .queixas__title { font-size: 32px; line-height: 36px; }
  .etiqueta { margin-bottom: 20px; }
  .sintoma__t { font-size: 16px; line-height: 24px; }
  /* No celular o bloco de texto centraliza (Alan, 20/09/2026). A LISTA fica alinhada a
     esquerda de proposito: sintoma centralizado, com linhas de tamanhos diferentes,
     perde a leitura em coluna. O botao volta a ter a largura do conteudo. */
  .queixas__col { text-align: center; }
  .queixas__col .etiqueta { display: block; width: max-content; margin-inline: auto; }
  /* justify-items:start encolhia cada item ao conteudo e sobrava pouca largura
     para a frase, que quebrava antes da hora. */
  .queixas__lista { text-align: left; justify-items: stretch; }
  .queixas__cta { width: auto; max-width: none; justify-content: center; margin-inline: auto; }
}

/* A secao "O que acontece na consulta" tem o cabecalho centralizado, entao a etiqueta
   tambem centraliza — encostada a esquerda ela ficava solta (Alan, 20/09/2026).
   margin-inline:auto so centraliza em display block, nao em inline-block. */
.etapas .etiqueta { display: block; width: max-content; margin-inline: auto; }

/* =====================================================
   CELULAR — ajustes pedidos pelo Alan em 20/09/2026.
   Fica no FIM do arquivo de proposito: varias destas regras corrigem valores
   declarados mais acima, e no CSS quem vem depois ganha.
   ===================================================== */
@media (max-width: 640px) {
  /* --- Seção 03 · O que acontece na consulta: um passo abaixo do outro.
     O trilho horizontal com scroll-snap sai; sem anular grid-auto-columns
     a regra de 480px continuaria fixando a largura do card em 100vw - 68px. --- */
  .etapas__trilho {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-columns: auto;
    overflow-x: visible;
    scroll-snap-type: none;
    margin-inline: 0;
    padding-inline: 0;
    gap: 44px;
  }
  .passo { scroll-snap-align: none; }

  /* --- Seção 04 · O que entra no cuidado: cabeçalho centralizado --- */
  .cuidado__head { justify-items: center; text-align: center; }
  .cuidado__head .etiqueta,
  .cuidado .etiqueta { display: block; width: max-content; margin-inline: auto; }

  /* --- Seção 06 · Terapia hormonal: tudo centralizado, blocos inclusive --- */
  .th__top, .th__col { text-align: center; }
  .th-bloco, .th-bloco__label, .th-bloco__list { text-align: center; }
  .th-bloco { justify-items: center; }
  .th .etiqueta { display: block; width: max-content; margin-inline: auto; }
  .th__acao { display: flex; justify-content: center; }
  .th__acao .btn { width: auto; max-width: none; justify-content: center; }

  /* --- Painel da médica: o botão perde os 100% e sobe para o lado do Instagram.
     flex-wrap com width:auto só nesses dois deixa os dois na mesma linha
     sem mexer no grid de duas colunas que o desktop usa. --- */
  .profile-grid { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; }
  .profile-grid > * { width: 100%; }
  .profile-insta { order: 98; width: auto; margin-top: 32px; }
  .profile-grid > .profile-body:last-child { order: 99; width: auto; margin-top: 32px; }
  .profile-cta { width: auto; max-width: none; justify-content: center; }
}

/* --- Setas do carrossel do cuidado: só no celular, onde o arraste não é óbvio --- */
.cuidado__setas { display: none; }
@media (max-width: 900px) {
  .cuidado__setas { display: flex; justify-content: center; gap: 14px; margin-top: 28px; }
  .cuidado__seta { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; background: transparent; border: 1px solid rgba(62, 75, 50, .28); border-radius: 50%; color: var(--verde); cursor: pointer; }
  .cuidado__seta svg { width: 20px; height: 20px; }
  .cuidado__seta[disabled] { opacity: .35; cursor: default; }
  .cuidado__seta:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
}

@media (max-width: 640px) {
  /* --- FAQ: cabeçalho centralizado, como as outras seções --- */
  .faq__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .faq__title, .faq__apoio { grid-column: auto; max-width: 100%; }
  .faq .etiqueta { display: block; width: max-content; margin-inline: auto; }
}

@media (max-width: 640px) {
  /* --- Localização: cabeçalho, texto e botões centralizados --- */
  .location__head { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .location .etiqueta { display: block; width: max-content; margin-inline: auto; }
  .map__card { text-align: center; }
  /* os botoes do card do mapa sao .map__btn dentro de .map__card-actions, que abaixo de
     480px vira uma coluna so — daí eles ocuparem a largura inteira. */
  /* os dois botoes voltam a dividir a linha; abaixo de 480px a regra antiga os empilhava. */
  .map__card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; grid-template-columns: none; }
  .map__btn { width: auto; max-width: none; justify-content: center; flex: 0 1 auto; }
}

@media (max-width: 640px) {
  /* --- Rodapé: no celular os links de navegação saem (Alan, 20/09/2026). O menu do topo
     e o botão flutuante já dão o mesmo acesso, e aqui eles só alongavam o rodapé.
     Continuam no HTML, só ocultos nesta largura. --- */
  .footer__links { display: none; }
}

/* O balance ja estava ativo nas duas frases do respiro, mas equilibrar so vale DENTRO de
   cada bloco: a de cima quebrava em duas linhas e a de baixo cabia inteira numa, e o
   conjunto ficava torto. Limitar a medida faz as duas quebrarem no mesmo ritmo. */
@media (max-width: 900px) {
  .respiro__forte, .respiro__fraca { max-width: 21ch; margin-inline: auto; }
}

/* Mesma correcao do respiro: o balance ja estava nos itens, mas uma frase cabia inteira
   numa linha enquanto as outras quebravam em duas, e a coluna ficava desencontrada.
   Limitar a medida no celular faz todas quebrarem no mesmo ritmo. */
@media (max-width: 640px) {
  .th-bloco__list li { max-width: 23ch; margin-inline: auto; }
}

/* ===== WhatsApp flutuante — copiado da pagina da Dra. Debora a pedido do Alan (20/09/2026),
   igual ao original: mesmo verde, mesmo tamanho, mesma chegada de mensagem. ===== */
/* ---------- WhatsApp flutuante (Alan, 10/09/2026): canto inferior direito, verde do WhatsApp, ícone branco; sem bolha de "mensagem nova" ---------- */
.wa-float { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 79; width: 64px; height: 64px; border-radius: 50%; background: #25d366; color: #ffffff; display: grid; place-items: center; transition: transform .24s cubic-bezier(.22, 1, .36, 1); }
.wa-float svg { width: 34px; height: 34px; }
.wa-float:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
/* a flutuante só entra depois que o hero sai da tela: em 320x568 ela cobria a palavra "AVC" da headline
   acima da dobra, e ainda competia com o botão principal do hero (QA Bolso) */
.wa-float { opacity: 0; visibility: hidden; transition: opacity .28s ease, transform .24s cubic-bezier(.22, 1, .36, 1), visibility 0s linear .28s; }
.wa-float.is-visible { opacity: 1; visibility: visible; transition-delay: 0s, 0s, 0s; }
@media (hover: hover) and (pointer: fine) { .wa-float:hover { transform: translateY(-2px) scale(1.04); } }
@media (max-width: 760px) { .wa-float { right: 13px; bottom: max(13px, env(safe-area-inset-bottom)); width: 62px; height: 62px; } .wa-float svg { width: 33px; height: 33px; } }
@media (prefers-reduced-motion: reduce) { .wa-float { transition: none; } }
/* Chegada de mensagem, igual à Scopel (Alan, 10/09/2026): 3,2s depois de carregar, a bolha "+1" salta do botão, fica 1,4s e recolhe;
   então o badge vermelho "1" aparece e fica pulsando. Uma vez por sessão; clicar no botão apaga o aviso. */
.wa-float__notice { position: absolute; top: -12px; right: 42px; width: 42px; height: 28px; border-radius: 999px; background: #e5322d; color: #ffffff; display: grid; place-items: center; font-family: var(--font-sans); font-size: 13px; font-weight: 600; line-height: 1; opacity: 0; pointer-events: none; transform: translate(10px, 12px) scale(.45); transform-origin: 100% 100%; }
.wa-float__notice::after { content: ""; position: absolute; right: 7px; bottom: -3px; width: 7px; height: 7px; background: #e5322d; transform: rotate(45deg); }
.wa-float.is-arriving .wa-float__notice { animation: wa-pop .42s cubic-bezier(.34, 1.56, .64, 1) forwards, wa-fold .32s cubic-bezier(.4, 0, 1, 1) 1.82s forwards; }
.wa-float__badge { position: absolute; top: -1px; right: -1px; width: 18px; height: 18px; border-radius: 50%; background: #e5322d; color: #ffffff; border: 2px solid #ffffff; box-sizing: content-box; display: grid; place-items: center; font-family: var(--font-sans); font-size: 10px; font-weight: 700; line-height: 1; opacity: 0; transform: scale(.6); transition: opacity .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.wa-float.is-notified .wa-float__badge { opacity: 1; transform: none; }
.wa-float.is-pulsing .wa-float__badge::after { content: ""; position: absolute; inset: -2px; border: 2px solid #e5322d; border-radius: 50%; animation: wa-ring 2.4s ease-out infinite; }
@keyframes wa-pop  { to { opacity: 1; transform: none; } }
@keyframes wa-fold { to { opacity: 0; transform: translate(10px, 12px) scale(.38); } }
@keyframes wa-ring { 0% { opacity: .55; transform: scale(1); } 38%, 100% { opacity: 0; transform: scale(2.1); } }
@media (max-width: 760px) { .wa-float__notice { top: -10px; right: 36px; width: 40px; height: 28px; } }
@media (prefers-reduced-motion: reduce) { .wa-float__notice { display: none; } .wa-float__badge { transition: none; } .wa-float.is-pulsing .wa-float__badge::after { animation: none; display: none; } }

/* ===== CAPA DO CELULAR (Alan, 20/09/2026) =====
   A capa vertical entra como FUNDO do hero, com o texto por cima — a medica ocupa o
   topo da foto e o restante e claro, que e onde a headline e o paragrafo caem.
   Precisa vir depois e com a mesma especificidade de .hero--retrato-cor: aquelas regras
   tiravam a imagem do fundo (position: relative, altura limitada a 450px) e venciam. */
@media (max-width: 560px) {
  /* O hero precisa de altura propria: sem ela ficava com 384px, a foto era cortada e o
     texto comecava no pixel 0, em cima do rosto. Com 900px e o conteudo ancorado embaixo,
     a medica fica nos ~360px de cima e o texto cai na area clara da foto. */
  /* A altura acompanha a largura: com object-fit cover a foto escala pela largura, entao a
     medica cresce junto e um valor fixo so serviria para um aparelho. 1.9 x a largura
     mantem o texto sempre abaixo dela. Acima de 560px volta a capa panoramica: ali a
     vertical ficaria com a medica ocupando mais da metade do hero. */
  .hero--retrato-cor { min-height: max(960px, calc(100vw * 1.9)); height: auto; justify-content: flex-end; padding: 32px 24px 44px; }
  .hero--retrato-cor .hero__media { position: absolute; inset: 0; order: 0; z-index: 0; width: 100%; height: 100%; aspect-ratio: auto; margin: 0; border-radius: 0; overflow: hidden; }
  .hero--retrato-cor .hero__media picture { display: block; width: 100%; height: 100%; }
  .hero--retrato-cor .hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
  .hero--retrato-cor .hero__inner { position: relative; z-index: 1; margin-top: auto; }
}

/* Abaixo de 340px a headline quebra em mais linhas, o bloco cresce e sobe ate a altura da
   bancada, onde o fundo deixa de ser claro: o contraste do titulo caia para 3,48:1.
   Mais altura de hero devolve o texto ao campo claro. */
@media (max-width: 340px) {
  .hero--retrato-cor { min-height: max(1060px, calc(100vw * 1.9)); }
}

/* ===== HERO COM A FOTO REAL (artes v2 do Alan, 28/09/2026) ======================================
   A Carolina recusou a capa gerada ("mudou muito o meu rosto... esse tipo de corpo não é o meu").
   As artes novas trazem a foto oficial dela com a transição para o fundo claro já embutida: a da tela
   grande é 2000×813 (branco à esquerda, onde entra o texto) e a do celular é 1083×2000 (ela no alto,
   fundo #f2f4ef embaixo). Por isso a hero volta a ser foto de fundo, e não um bloco ao lado do texto.
   Altura pela proporção da arte (813/2000 = .4065), para o corte não comer o lado em que ela está. */
/* o site inteiro roda com zoom: .9, então 100vw rende 90% na tela: as contas dividem por .9 para
   a altura bater com a proporção real da arte (medido em Chrome: sem essa correção sobrava corte de 59px). */
.hero--foto-real { --arte-vw: calc(100vw / .9); background: var(--bege-100); height: min(813px, calc(var(--arte-vw) * 0.4065)); min-height: 500px; }
/* entre 761 e ~1150px a altura proporcional (416px em 1024) já não comporta as quatro linhas do título:
   o min-height segura o texto e o corte que sobra sai por baixo da arte, não do rosto. */
/* acima de ~1800px a altura trava em 813 e o cover passa a cortar na vertical: ancorado no topo,
   o que sai é a barra do vestido embaixo, nunca o rosto. */
.hero--foto-real .hero__bg { object-position: 100% 0%; }
.hero--foto-real .hero__desc { color: var(--verde); }

/* ── tablet (761–1150px): a área clara da arte fica estreita demais para as quatro linhas do título,
   e o texto acabava por cima do rosto dela. Nessa faixa a foto vira uma tarja no topo (como a versão
   anterior do site já fazia) e o texto desce para o fundo bege, centralizado. ── */
@media (min-width: 761px) and (max-width: 1150px) {
  .hero--foto-real { height: auto; min-height: 0; padding: 0; display: block; }
  .hero--foto-real .hero__media { position: relative; inset: auto; width: 100%; height: clamp(320px, 42vw, 470px); }
  .hero--foto-real .hero__bg { width: 100%; height: 100%; object-fit: cover; object-position: 78% 0%; }
  .hero--foto-real .hero__inner { display: block; max-width: none; padding: 36px 24px 48px; text-align: center; }
  .hero--foto-real .hero__content { max-width: 680px; margin-inline: auto; }
  .hero--foto-real .hero__actions { justify-content: center; }
}

@media (max-width: 760px) {
  /* a arte do celular entra inteira no topo e o texto começa logo abaixo dela; o fundo da seção é a
     mesma cor em que a foto termina, então a emenda não aparece. 0.83 = onde ela acaba (44% de 1.847). */
  .hero--foto-real { height: auto; min-height: 0; padding: calc(var(--arte-vw) * 0.83) 24px 44px; display: block; }
  .hero--foto-real .hero__media { position: absolute; inset: 0 0 auto; height: auto; }
  .hero--foto-real .hero__media picture { display: block; }
  .hero--foto-real .hero__bg { width: 100%; height: auto; object-fit: contain; object-position: 50% 0%; }
  .hero--foto-real .hero__inner { max-width: none; padding: 0; display: block; }
  .hero--foto-real .hero__content { max-width: 600px; margin-inline: auto; text-align: center; }
  .hero--foto-real .hero__actions { justify-content: center; }
}