/* =====================================================
   Dra. Débora Zanin · Ânima Clinic — Landing Page
   Base criada em 09/09/2026 (tokens, reset, tipografia, container).
   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 definida pelo Alan em 09/09/2026 (referencias/paleta-alan-2026-09-09.png): 5 cores, chapadas */
  --verde: #1c2a1d;         /* verde profundo: menu, rodapé, blocos escuros, texto forte */
  --verde-700: #2d3d2c;     /* verde médio: superfícies escuras secundárias, hover sobre o profundo */
  --dourado: #c8a84b;       /* dourado: acento principal, botões, ícones */
  --dourado-300: #e2c96e;   /* dourado claro: destaques sobre o verde, marca-texto */
  --creme: #f4f1ea;         /* creme: fundo da página e superfícies claras */
  --creme-200: #eae6da;     /* creme escurecido: pill do menu, superfícies claras secundárias */
  --bege-100: #f3ecdf;      /* bege bem fraco: fundo do hero (Alan, 09/09/2026) */
  --branco: #ffffff;
  --cinza-900: #232323;
  --cinza-700: #4a4a4a;
  /* apelidos usados pelos componentes portados da Scopel */
  --escuro: var(--verde);

  /* 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) ===== */
@media (max-width: 900px) {
  html { zoom: 1; }
}

/* =====================================================
   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(--verde);
  --btn-fg: var(--creme);
  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);
  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%;
  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(--creme); --btn-fg: var(--verde); }     /* creme sobre verde */
.btn--gold    { --btn-bg: var(--dourado); --btn-fg: var(--verde); }   /* dourado: CTA principal */
.btn--white   { --btn-bg: var(--branco); --btn-fg: var(--verde); }    /* branco sobre verde (seção Sobre, Alan 10/09/2026) */
.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 dourado clareia em vez de inverter (Codex, 09/09/2026): dourado 300 com texto verde */
  .btn--gold:hover { background: var(--dourado-300); color: var(--verde); border-color: var(--dourado-300); }
  .btn--gold:hover .btn__icon { background: var(--verde); color: var(--dourado-300); }
  .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;
}

.brand__symbol {
  height: 56px;                     /* o "D" com o dente-de-leão (Scopel usa 44; este traço é mais fino) */
  width: auto;
}

.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(--verde);
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}

.nav__link:hover { background: var(--verde); color: var(--creme); }
.nav__link:focus-visible { outline: 2px solid var(--verde); 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__symbol { height: 52px; }
}

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

/* =====================================================
   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;
  object-position: 50% 0%;          /* ancorado no topo para nunca cortar a cabeça em telas largas */
}

.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(--verde);
  max-width: 560px;
}

.hero__line { display: block; text-wrap: balance; }
.hero__line--strong { font-weight: 600; }   /* destaque da linha central pelo peso: dourado sobre creme não tem contraste (Codex) */

/* ---- headlines alternadas (Dra. Débora via Alan, 22/09/2026) ----
   As três frases ocupam a mesma célula da grade: a altura do H1 é a da frase mais longa, então descrição e botão não pulam na troca.
   A ativa aparece num fade curto; sem JS a primeira já nasce ativa. Ênfase pelo peso, como na linha forte de antes. */
/* A frase ATIVA manda na altura do bloco (fica no fluxo); as outras ficam sobrepostas, ancoradas no pé.
   Antes todas empilhavam num grid e o H1 tinha sempre a altura da frase mais longa, o que abria um vão
   grande acima da frase curta no celular (Alan, 22/09). */
.hero__title--alterna { position: relative; }
.hero__frase { position: absolute; left: 0; right: 0; bottom: 0; text-wrap: balance; opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }   /* pelo pé: a frase curta encosta na descrição, a folga fica em cima */
/* Frases da cliente (22/09, 2ª leva) são longas: a 52px davam 5 linhas e empurravam descrição e botão.
   44/48 mantém 3 linhas no desktop; no celular o passo é menor pela mesma razão. */
@media (min-width: 901px) { .hero__title--alterna { font-size: 44px; line-height: 48px; } }
@media (max-width: 900px) { .hero__title--alterna { font-size: 31px; line-height: 35px; } }
@media (max-width: 480px) { .hero__title--alterna { font-size: 25px; line-height: 29px; }
  .hero--alterna .hero__desc { font-size: 15px; line-height: 22px; margin-top: 16px; }   /* com a frase longa, o bloco todo subia para cima da foto */
  .hero--alterna .hero__actions { margin-top: 18px; }
}
@media (max-width: 360px) { .hero__title--alterna { font-size: 23px; line-height: 27px; } }
.hero__frase.is-ativa { position: static; opacity: 1; transform: none; pointer-events: auto; }
.hero__enfase { display: block; font-weight: 600; text-wrap: balance; }   /* a 2ª frase começa em linha própria: sem isso sobrava "o" solto no fim da linha (22/09) */
.hero__apoio {
  display: block;
  max-width: 34ch;
  margin-top: 18px;
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--verde-700);
  text-wrap: balance;
}
@media (max-width: 900px) {
  .hero__apoio { max-width: 30ch; margin: 16px auto 0; font-size: 17px; line-height: 24px; }
}
@media (max-width: 480px) {
  .hero__apoio { margin-top: 13px; font-size: 15px; line-height: 21px; }
}
@media (prefers-reduced-motion: reduce) { .hero__frase { transition: none; transform: none; } }

.hero__desc {
  margin-top: 24px;
  max-width: 520px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 27px;
  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; }
}

/* =====================================================
   FAIXA CONTÍNUA — MARQUEE (abaixo do hero), portada da Scopel (Alan, 09/09/2026)
   Medidas da Scopel: altura 68px, células com padding 44px, ícone 24px stroke 1.7, texto 16/600, gap 16, ~40px/s.
   Cores da Débora: fundo creme, bordas verde a 12%, texto verde (ajustes do Codex em referencias/secao-01b-faixa/).
   ===================================================== */
.marquee {
  --marquee-speed: 40px;              /* px por segundo */
  --marquee-duration: 38s;            /* ≈ largura de um conjunto / 40 */
  height: 68px;
  background: var(--verde);         /* faixa verde (Alan, 09/09/2026) */
  border-top: 1px solid var(--verde);
  border-bottom: 1px solid var(--verde);
  overflow: hidden;
  margin-top: 0;                      /* o hero da Débora é 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(244, 241, 234, 0.18);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--creme);
  white-space: nowrap;
}

.marquee__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

@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;
  }
}


/* =====================================================
   Í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 ---- */
.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;
  }
}



/* faixa da Débora: sobre o verde, ícones em creme e a estrela da Ânima em dourado claro; gesto leve no hover com ponteiro fino */
.marquee__icon--brand { color: var(--dourado-300); }
@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);
}

/* =====================================================
   A CONSULTA (seção 03) — layout "Diferenciais" portado da Scopel (pedido do Alan, 09/09/2026)
   Ref: referencias/secao-03-consulta/ref-05-why-choose-us.png (a mesma da secao-04 da Scopel). Medidas do Codex (Scopel, 07/09):
   título 52/1.2 · descrição 16/24 máx 560 · cabeçalho→grid 48 · foto 390 × (2×290 + 16) r20 · cards r20 padding 24, círculo 60,
   ícone 28, título 22/28, texto 16/24 · gaps 16. Aqui: fundo verde da marca, texto creme, cards brancos; hover "balde de tinta" em
   verde-700. Sem efeito de pixels e sem foto por enquanto (Alan, 09/09/2026): o espaço da foto fica branco. Chapado.
   ===================================================== */
.why {
  position: relative;
  isolation: isolate;
  margin: 24px 16px 0;              /* respiro creme entre a faixa verde e a seção verde; mesma margem lateral da Scopel */
  padding: 64px 40px 72px;
  background: var(--verde);
  border-radius: 26px;
  overflow: hidden;
}

.why__inner { position: relative; z-index: 1; max-width: 1200px; margin-inline: auto; }

.why__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.why .eyebrow { color: var(--creme); }
.why__title { margin: 0; max-width: 700px; font-size: 52px; line-height: 54px; font-weight: 700; letter-spacing: -0.035em; color: var(--creme); text-wrap: balance; }
.why__subtitle { margin: 22px 0 0; max-width: 560px; font-family: var(--font-body); font-size: 16px; line-height: 24px; color: rgba(244, 241, 234, 0.8); text-wrap: balance; }

.why__grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 390px repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, 290px);
  gap: 16px;
}

.why__media { grid-row: 1 / span 2; border-radius: 20px; overflow: hidden; background: var(--branco); border: 4px solid var(--branco); }   /* contorno branco na foto (Alan, 10/09) */
.why__media picture { display: block; width: 100%; height: 100%; }
.why__media img { border-radius: 16px; }
.why__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }   /* foto 2:3 no slot 390 × 596: quase sem corte */

/* ---- card com hover "balde de tinta": um círculo verde nasce onde o ponteiro entrou e cobre o card ---- */
.diff-card {
  --x: 50%;
  --y: 50%;
  --tinta: var(--verde-700);        /* mais claro que o fundo da seção: o card pintado não some no verde */
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--branco);
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  color: var(--verde);
  transition: color .35s ease;
}
.diff-card::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--tinta); clip-path: circle(0% at var(--x) var(--y)); transition: clip-path .6s cubic-bezier(.4, 0, .2, 1); }
.diff-card > * { position: relative; z-index: 1; }

.diff-card__icon-wrap { width: 60px; height: 60px; border-radius: 50%; background: var(--creme); display: grid; place-items: center; color: var(--verde); flex: 0 0 auto; transition: background-color .35s ease, color .35s ease; }
.diff-card__icon { width: 28px; height: 28px; }

.diff-card__body { position: absolute; left: 24px; right: 24px; top: 166px; }   /* título na mesma altura em todos os cards */
.diff-card__title { margin: 0; font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -0.02em; color: inherit; text-wrap: balance; }
.diff-card__text { margin: 14px 0 0; font-size: 16px; line-height: 24px; color: var(--verde-700); text-wrap: pretty; transition: color .35s ease; }

/* estado pintado: hover só com ponteiro fino; no toque o script marca .is-painted por ~650ms a partir do ponto tocado */
.diff-card.is-painted::before { clip-path: circle(150% at var(--x) var(--y)); }
.diff-card.is-painted { color: var(--creme); transition-delay: .2s; }
.diff-card.is-painted .diff-card__icon-wrap { color: var(--tinta); transition-delay: .2s; }
.diff-card.is-painted .diff-card__text { color: rgba(244, 241, 234, 0.85); transition-delay: .2s; }
@media (hover: hover) and (pointer: fine) {
  .diff-card:hover::before, .diff-card:focus-within::before { clip-path: circle(150% at var(--x) var(--y)); }
  .diff-card:hover, .diff-card:focus-within { color: var(--creme); transition-delay: .2s; }
  .diff-card:hover .diff-card__icon-wrap, .diff-card:focus-within .diff-card__icon-wrap { color: var(--tinta); transition-delay: .2s; }
  .diff-card:hover .diff-card__text, .diff-card:focus-within .diff-card__text { color: rgba(244, 241, 234, 0.85); transition-delay: .2s; }
}

@media (prefers-reduced-motion: reduce) {
  .diff-card, .diff-card::before, .diff-card__icon-wrap, .diff-card__text { transition: none; }
}

/* ===== RESPONSIVO — a consulta ===== */
@media (max-width: 1180px) {
  .why__grid { grid-template-columns: 340px repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .why { margin: 20px 12px 0; padding: 64px 28px; }
  .why__title { font-size: 40px; line-height: 43px; }
  .why__grid { margin-top: 40px; grid-template-columns: minmax(240px, .8fr) 1fr; grid-template-rows: none; gap: 14px; }
  .diff-card { min-height: 288px; }
}
@media (max-width: 760px) {
  .why { margin: 16px 10px 0; padding: 56px 18px 20px; border-radius: 22px; }
  .why__title br { display: none; }
  .why__grid { grid-template-columns: 1fr; gap: 14px; }
  .why__media { grid-row: auto; aspect-ratio: 4 / 5; }
  .why__media img { object-position: 50% 35%; }
  .diff-card { min-height: 0; padding: 20px; border-radius: 18px; }
  .diff-card__body { position: static; margin-top: 28px; }
}
@media (max-width: 480px) {
  .why__title { font-size: 36px; line-height: 39px; }
}

/* =====================================================
   PREPARE SUA CONVERSA (seção 03b) — composição desktop aprovada no teste do Codex.
   Núcleo até 1440 × 900; título verde atrás do cérebro; introdução à esquerda e card compacto à direita.
   Sem painel inferior, seletor de ângulo ou prévia da mensagem. Celular fica para depois (Alan, 09/09/2026).
   O material vítreo é renderizado no canvas; HTML chapado, sem sombra, gradiente ou blur.
   ===================================================== */
@font-face {
  font-family: "Brain Anton";
  src: url("img/cerebro/anton-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.brain {
  padding: 64px 0 56px;
  background: #f3f4f5;
  color: #1c2a1d;
}
.brain__core {
  position: relative;
  isolation: isolate;
  width: calc(100% - 80px);
  max-width: 1440px;
  height: 900px;
  margin-inline: auto;
  container-type: inline-size;
}
.brain__word {
  position: absolute;
  left: 0;
  right: 0;
  top: 15px;
  z-index: 0;
  margin: 0;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
  color: #1c2a1d;
  font-family: "Brain Anton", Impact, sans-serif;
  font-size: clamp(160px, 16.35vw, 246px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.012em;
  pointer-events: none;
  user-select: none;
}
@supports (font-size: 1cqw) {
  .brain__word { font-size: clamp(160px, 17.3cqw, 246px); }
}

.brain__intro { position: absolute; left: 22px; top: 274px; z-index: 2; width: 245px; }
.brain__title { margin: 0 0 14px; font-family: var(--font-sans); font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -.035em; color: #1c2a1d; text-wrap: balance; }
.brain__text { max-width: 228px; margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.4; font-weight: 400; color: #1c2a1d; text-wrap: balance; }
.brain__mark { display: block; width: 99px; height: auto; margin-top: 24px; }

.brain__stage { position: absolute; left: 17%; top: 108px; z-index: 1; width: 69%; height: 780px; }
.brain__canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.brain__canvas:active { cursor: grabbing; }
.brain__canvas:focus-visible { outline: 2px solid #1c2a1d; outline-offset: -6px; border-radius: 24px; }
.brain__poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.brain.is-ready .brain__poster { display: none; }
.brain.is-static .brain__poster { display: block; }
.brain.is-static .brain__canvas { display: none; }
.brain__loading { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: .04em; color: #68756b; white-space: nowrap; }
.brain.is-ready .brain__loading, .brain.is-static .brain__loading { display: none; }

.brain__card { position: absolute; right: 0; top: 280px; z-index: 3; width: 360px; padding: 24px; background: #fff; border-radius: 32px; }
.brain__card-title { margin: 0; font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 500; letter-spacing: -.04em; color: #1c2a1d; }
.brain__topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
.brain__topic {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  min-width: 0;
  border: 1px solid #e0e5e1;
  border-radius: 999px;
  background: #f4f6f4;
  color: #1c2a1d;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.brain__topic { padding-inline-end: 40px; }   /* o "+" longe da borda direita, onde a flutuante passa (QA Bolso) */
.brain__topic i { position: relative; display: block; width: 14px; height: 14px; flex: none; }
.brain__topic i::before, .brain__topic i::after { content: ""; position: absolute; left: 1px; top: 6px; width: 12px; height: 1.5px; border-radius: 2px; background: currentColor; }
.brain__topic i::after { transform: rotate(90deg); }
.brain__topic[aria-pressed="true"] { background: #1c2a1d; border-color: #1c2a1d; color: #fff; }
.brain__topic[aria-pressed="true"] i::before { width: 5px; left: 0; top: 8px; transform: rotate(45deg); }
.brain__topic[aria-pressed="true"] i::after { width: 10px; left: 3px; top: 6px; transform: rotate(-45deg); }
.brain__topic:focus-visible { outline: 2px solid #1c2a1d; outline-offset: 3px; }
.brain__topic:disabled { opacity: .45; cursor: default; }
.brain__card > .btn { width: 100%; margin-top: 18px; }

@media (hover: hover) and (pointer: fine) {
  .brain__topic:not(:disabled):not([aria-pressed="true"]):hover { background: #e7ebe8; border-color: #ccd6ce; }
}
@media (prefers-reduced-motion: reduce) {
  .brain__topic { transition: none; }
}

/* Modelo direto em fluxo: sem pin ou altura reservada à formação. */
.brain__pin { position: static; }
.brain__motion-bar { position: relative; width: calc(100% - 80px); max-width: 1440px; margin: 0 auto; z-index: 4; display: flex; justify-content: space-between; align-items: center; font: 12px/18px var(--font-body); color: #59675f; }
.brain__motion-bar[hidden] { display: none; }
.brain__motion-toggle { min-height: 44px; padding: 0 16px; border: 1px solid #d5ddd7; border-radius: 999px; background: #f3f4f5; color: #1c2a1d; font: 12px/18px var(--font-sans); cursor: pointer; }
.brain__motion-toggle:focus-visible { outline: 2px solid #1c2a1d; outline-offset: 3px; }
.brain.is-static { height: auto; }
.brain.is-static .brain__intro, .brain.is-static .brain__word, .brain.is-static .brain__card { opacity: 1; transform: none; }

/* Celular/tablet: pérola direta em fluxo; sem partículas, pin ou refração extra. */
@media (max-width: 1260px) {
  .brain { display: block; height: auto; padding: 48px 24px; }
  .brain .brain__pin { position: static; display: block; height: auto; overflow: visible; }
  .brain .brain__core { width: 100%; max-width: 600px; height: auto; display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
  .brain .brain__word { position: static; width: 100%; margin: 0; white-space: normal; font-size: clamp(72px, 22vw, 120px); line-height: 1.02; letter-spacing: -.012em; opacity: 1; transform: none; text-wrap: balance; }
  .brain .brain__stage { position: relative; left: auto; top: auto; width: 100%; height: 400px; transform: none; }
  .brain .brain__canvas { touch-action: pan-y; }
  .brain .brain__intro { position: static; width: 100%; opacity: 1; transform: none; }
  .brain .brain__text { max-width: 480px; font-size: 16px; line-height: 24px; }
  .brain .brain__mark { display: none; }
  .brain .brain__card { position: static; box-sizing: border-box; width: 100%; padding: 24px; border-radius: 24px; opacity: 1; transform: none; }
  .brain .brain__card > .btn { width: auto; max-width: 100%; }
  .brain .brain__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .brain .brain__topic { min-height: 44px; height: auto; padding: 10px 12px; padding-inline-end: 36px; }   /* o "+" longe da borda onde a flutuante passa (QA Bolso) */
  .brain .brain__motion-bar { position: static; max-width: 600px; margin: 20px auto 0; flex-wrap: wrap; gap: 8px; }
  .brain .brain__motion-toggle { min-height: 44px; }
  .brain .brain__motion-toggle:disabled { cursor: default; }
  .brain .brain__loading { font-size: 12px; }
}
@media (max-width: 760px) {
  .brain { padding: 40px 20px 48px; }
  .brain .brain__word { font-size: clamp(44px, 17.5vw, 76px); line-height: 1.05; white-space: nowrap; text-wrap: nowrap; }
  .brain .brain__stage { height: clamp(340px, 96vw, 400px); }
  .brain .brain__card { padding: 20px; }
  .brain .brain__card-title { font-size: 22px; line-height: 28px; }
  .brain .brain__intro, .brain .brain__card { text-align: center; }
  .brain .brain__text { display: none; }
  .brain .brain__card > .btn { display: inline-flex; }
  .brain .brain__topic span { flex: 1; text-align: center; }
  /* Barra oculta visualmente; pausa continua disponível para leitor de tela/teclado. */
  .brain .brain__motion-bar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .brain .brain__motion-bar:focus-within { position: static; width: auto; height: auto; margin: 20px 0 0; overflow: visible; clip-path: none; white-space: normal; }
}

/* =====================================================
   ATENDIMENTO (seção 04) — referência em referencias/secao-04-atendimento/, medidas e copy do Codex (analise-codex-atendimento.txt, 10/09/2026)
   Fundo branco (Alan). Cabeçalho lado a lado (eyebrow + H2 52/54 à esquerda · descrição Figtree 17/26 máx 480 à direita, base alinhada; Alan 10/09) → 64px → grade 360 + 360 + 432, gap 24:
   esquerda três abas (linhas que dividem os 400 de altura, divisórias 1px, rótulo DM Sans 22/28 500 com ícone 20, pill DM Mono 12/18 h32,
   ativa em verde); centro espaço da foto 360 × 400 r20 (verde por enquanto, Alan 10/09); direita três cards brancos com contorno verde e um botão .btn em cada,
   o ativo cresce com texto + botão (Alan, 10/09/2026). Chapado; sem números/estatísticas.
   ===================================================== */
.care { padding: 80px 32px; background: var(--branco); }
.care__inner { max-width: 1200px; margin-inline: auto; }
/* cabeçalho lado a lado (Alan, 10/09/2026): H2 à esquerda (sem eyebrow, Alan), descrição à direita alinhada à base */
.care__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
.care__title { margin: 0; max-width: 520px; font-size: 52px; line-height: 54px; font-weight: 700; letter-spacing: -0.035em; color: var(--verde); text-wrap: balance; }
.care__desc { margin: 0; max-width: 480px; font-family: var(--font-body); font-size: 17px; line-height: 26px; color: var(--verde-700); text-wrap: balance; }

.care__grid { margin-top: 64px; display: grid; grid-template-columns: 360px 360px minmax(0, 1fr); gap: 24px; min-height: 400px; }

/* ---- abas à esquerda: três linhas que dividem a altura da foto; a ativa preenche a pill de verde ---- */
.care__list { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 400px; }
.care__row { flex: 1 1 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.care__row + .care__row { border-top: 1px solid rgba(28, 42, 29, 0.12); }
.care__row:focus-visible { outline: 2px solid var(--verde); outline-offset: 4px; border-radius: 8px; }
.care__term { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 22px; line-height: 28px; font-weight: 500; color: var(--verde); }
.care__icon { width: 20px; height: 20px; flex: 0 0 20px; }
/* pulso único do detalhe do ícone, depois do traço se desenhar (QA do Codex, 10/09/2026) */
@media (prefers-reduced-motion: no-preference) {
  html.motion-ready .care .im.is-on > g.im-pulse { animation: im-pulse .56s cubic-bezier(.22, 1, .36, 1) 1s both; }
}
.care__pill { margin: 0; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--creme); font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--verde); white-space: nowrap; flex: 0 0 auto; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.care__row.is-active .care__pill { background: var(--verde); color: var(--creme); border-color: var(--verde); }
@media (hover: hover) and (pointer: fine) { .care__row:not(.is-active):hover .care__pill { border-color: var(--verde); } }

.care__media { position: relative; width: 360px; height: 400px; border-radius: 20px; overflow: hidden; background: var(--verde); }
.care__img { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .35s ease; }
.care__img.is-active { opacity: 1; }
.care__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.care__img--brand { display: grid; place-items: center; background: var(--verde); }
.care__img--brand img { width: 76%; max-width: 300px; height: auto; max-height: 70%; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .care__img { transition: none; } }

/* ---- cards à direita: brancos com contorno verde, um botão em cada (Alan, 10/09); o ativo cresce e mostra texto + botão, os outros ficam só com o título ---- */
.care__cards { display: flex; flex-direction: column; gap: 16px; height: 100%; min-height: 400px; }
.care__card { flex: 0 0 auto; display: flex; flex-direction: column; padding: 20px 24px; border-radius: 20px; background: var(--branco); border: 1px solid var(--verde); color: var(--verde); cursor: pointer; }
.care__card.is-active { flex: 1 1 auto; cursor: default; }
.care__card-title { margin: 0; font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 600; color: inherit; }
.care__card-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s cubic-bezier(.22, 1, .36, 1); }
.care__card.is-active .care__card-body { grid-template-rows: 1fr; }
.care__card-body > * { min-height: 0; }
.care__card-text { margin: 0; overflow: hidden; font-family: var(--font-body); font-size: 15px; line-height: 22px; color: var(--verde-700); text-wrap: pretty; }
.care__card.is-active .care__card-text { padding-top: 10px; }
.care__btn { justify-self: start; margin-top: 16px; overflow: hidden; }   /* o corpo é grid: sem isto o botão estica */
.care__card:not(.is-active) .care__btn { margin-top: 0; min-height: 0; height: 0; padding-block: 0; border-width: 0; }   /* fechado: o botão some junto com o corpo */
@media (prefers-reduced-motion: reduce) { .care__card-body, .care__pill { transition: none; } }

/* ===== RESPONSIVO — atendimento ===== */
@media (max-width: 1279px) {
  .care__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); }
  .care__media { width: 100%; height: auto; aspect-ratio: 9 / 10; }
}
@media (max-width: 900px) {
  .care { padding: 64px 24px; }
  .care__head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .care__title { font-size: 42px; line-height: 46px; }
  .care__desc { font-size: 16px; line-height: 24px; }
  .care__grid { margin-top: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 32px; min-height: 0; }
  .care__list { min-height: 0; height: auto; }
  .care__row { flex: 0 0 auto; }
  .care__media { aspect-ratio: 1; }
  .care__cards { grid-column: 1 / -1; height: auto; min-height: 0; }
}
@media (max-width: 600px) {
  .care { padding: 56px 20px; }
  .care__title { font-size: 34px; line-height: 38px; }
  .care__title br { display: none; }
  .care__grid { grid-template-columns: 1fr; gap: 28px; }
  .care__media { width: 100%; max-width: 400px; margin-inline: auto; }
  .care__term { font-size: 20px; line-height: 26px; }
}

/* =====================================================
   SOBRE A DRA. DÉBORA (seção 02) — perfil da Scopel (dialog .profile-modal) portado como seção estática, em VERDE (Alan, 10/09/2026)
   Ref: referencias/secao-02-sobre/ref-01-scopel-perfil-gilberto.png. Medidas da Scopel: painel 52fr/48fr; texto padding 56 clamp(56,6vw,96);
   grade 120 + 1fr, gap 36, máx 660; nome 58/1 500 −.045em em uma linha (Alan pediu maior; Scopel usa 46); registro mono 12; laterais 32/1 (ou 20/1.15) + rótulo 14 com linha 64×1;
   parágrafos 19/1.5 500 · 16.5 · 17 600; acordeão mono 11 .14em h64; lista numerada 16/14; Instagram 44; CTA .btn. Chapado.
   ===================================================== */
.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(--creme); }
.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(--creme); 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(244, 241, 234, 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(--creme); }
.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(244, 241, 234, 0.7); }
.profile-side__label::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 1px; background: rgba(244, 241, 234, 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(--creme); font-size: 19px; line-height: 1.5; font-weight: 500; }
.profile-p--soft   { color: rgba(244, 241, 234, 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(244, 241, 234, 0.22); border-bottom: 1px solid rgba(244, 241, 234, 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(--creme); cursor: pointer; text-align: left; }
.profile-acc__btn:focus-visible { outline: 2px solid var(--creme); 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(--creme); }
.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(244, 241, 234, 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(244, 241, 234, 0.65); }
.profile-acc__t { grid-area: t; font-size: 16px; font-weight: 500; color: var(--creme); text-wrap: pretty; }
.profile-acc__d { grid-area: d; margin-top: 3px; font-size: 14px; line-height: 1.45; color: rgba(244, 241, 234, 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(--creme); }
.profile-insta svg { width: 24px; height: 24px; }
.profile-insta:focus-visible { outline: 2px solid var(--creme); 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; }
}

/* =====================================================
   CLÍNICA E LOCALIZAÇÃO (seção 05) — porte da Scopel (Alan, 10/09/2026): cabeçalho 48% | 44% alinhado à base, mapa do Google de ponta a ponta
   (sai do container; com o zoom .9 usa 100vw/.9), altura clamp(560, 46vw, 680), card branco 388 r24 padding 30/32 alinhado à borda do conteúdo.
   Título no padrão da página (52/54 700). Chapado.
   ===================================================== */
.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: 700; letter-spacing: -0.035em; color: var(--verde); 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(--verde-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; }
/* escudo: enquanto ativo, a rolagem passa por cima do mapa; um clique libera */
.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(--verde); color: var(--creme); 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(--verde); color: var(--creme); 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(--verde); }
.map__card-eyebrow { margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.map__card-name { margin: 14px 0 0; 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(28, 42, 29, 0.16); }
.map__card-hours { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.4; color: var(--verde-700); }
.map__card-actions { display: flex; gap: 10px; margin-top: 22px; }
.map__card-note { margin: 14px 0 0; font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: #687065; text-wrap: pretty; }
.map__card-open { margin-top: 10px; color: var(--verde); }
.map__card-open[hidden] { display: none; }

/* ===== RESPONSIVO — localização ===== */
@media (max-width: 900px) {
  .location { padding: 64px 24px 24px; }
  .location__head { grid-template-columns: 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)); }
}
/* entre 761 e 900px o cartão do endereço subia até o balão do Google e cobria a metade de baixo dele:
   desce o cartão para o pé do mapa e encolhe um pouco (QA Palma) */
@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; }
  .location__title br { display: none; }
  .map__frame, .map__shield { height: 320px; }
  .map__card-actions { grid-template-columns: 1fr; gap: 10px; }
  .map__btn { width: 100%; }
}


/* =====================================================
   AVALIAÇÕES (seção 06) — porte da Scopel (Alan, 10/09/2026): cena de 820px com 6 microcards decorativos que nascem atrás do título e se
   espalham ao rolar (script.js); barra com o G do Google e setas (selo agregado removido pelo Alan); carrossel infinito de 3 cards por tela, de ponta a ponta (arraste + setas + snap).
   Título no padrão da página (52/54 700). Cards brancos com contorno rgba(28,42,29,.12); microcards escuros em verde. Chapado.
   ===================================================== */
.reviews { max-width: 1280px; margin: 0 auto; padding: 40px 40px 96px; }
.reviews__scene { position: relative; height: 820px; }
.reviews__head { position: absolute; left: 50%; top: 300px; transform: translateX(-50%); width: min(650px, 80%); text-align: center; z-index: 2; }
.reviews__title { margin: 0; font-size: 52px; line-height: 54px; font-weight: 700; letter-spacing: -0.035em; color: var(--verde); text-wrap: balance; }
.reviews__desc { margin: 22px auto 0; max-width: 560px; font-family: var(--font-body); font-size: 18px; line-height: 27px; color: var(--verde-700); text-wrap: balance; }   /* descrição pedida pelo Alan (10/09) */
.reviews__btn { margin-top: 40px; }

/* ---- microcards espalhados (decorativos; o conteúdo completo está no carrossel) ---- */
.reviews__micros { position: absolute; inset: 0; pointer-events: none; }
.micro { position: absolute; padding: 20px; border-radius: 20px; background: var(--branco); border: 1px solid rgba(28, 42, 29, 0.12); color: var(--verde); transform-origin: center; will-change: transform, opacity; }
.micro--dark { background: var(--verde); border-color: var(--verde); color: var(--creme); }
.micro .stars { display: inline-flex; gap: 2px; color: #FBBC04; }
.micro .stars svg { width: 12px; height: 12px; }
.micro__text { margin: 12px 0 0; font-family: var(--font-body); font-size: 14.5px; line-height: 1.4; color: inherit; text-wrap: pretty; }
.micro__who { margin: 12px 0 0; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: inherit; }

/* ---- barra: fonte (G oficial) + selo à esquerda, setas à direita ---- */
.reviews__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 56px; }
.reviews__source { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--verde); }
.google-g { width: 20px; height: 20px; flex: 0 0 auto; }
.reviews__nav { display: flex; gap: 10px; flex: 0 0 auto; }
.reviews__arrow { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--verde); background: var(--branco); color: var(--verde); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background-color .2s ease, color .2s ease; }
.reviews__arrow svg { width: 20px; height: 20px; }
.reviews__arrow:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .reviews__arrow:hover { background: var(--verde); color: var(--creme); } }

/* ---- carrossel: 3 cards, arraste + setas + snap ---- */
/* carrossel infinito de ponta a ponta (Alan, 10/09/2026): o trilho sai do container e mostra os cards cortados nas laterais;
   o primeiro card alinha com a borda do conteúdo (padding = --edge) e o script duplica 3 cards em cada ponta para o loop */
.reviews__track { --reviews-w: min(1200px, calc(100vw / .9 - 80px)); --edge: calc((100vw / .9 - var(--reviews-w)) / 2); list-style: none; margin: 28px calc(50% - 50vw / .9) 0; width: calc(100vw / .9); box-sizing: border-box; padding: 0 var(--edge); scroll-padding-inline: var(--edge); display: flex; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; cursor: grab; user-select: none; scrollbar-width: none; }
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.review { flex: 0 0 calc((var(--reviews-w) - 48px) / 3); min-height: 300px; display: flex; flex-direction: column; padding: 30px; border-radius: 24px; background: var(--branco); border: 1px solid rgba(28, 42, 29, 0.12); scroll-snap-align: start; }
.review__top { display: flex; align-items: center; gap: 10px; }
.review .stars { display: inline-flex; gap: 3px; color: #FBBC04; }
.review .stars svg { width: 18px; height: 18px; }
.review__score { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--verde); }
.review__quote { margin: 26px 0 0; font-family: var(--font-body); font-size: 18px; line-height: 1.45; color: var(--verde); text-wrap: pretty; }
.review__quote::before { content: "\201C"; }
.review__quote::after  { content: "\201D"; }
.review__quote--empty { color: #687065; font-size: 16px; }
.review__quote--empty::before, .review__quote--empty::after { content: none; }
.review__author { margin-top: auto; padding-top: 28px; display: flex; align-items: center; gap: 14px; }
.review__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--verde); color: var(--creme); display: grid; place-items: center; font-family: var(--font-sans); font-size: 15px; font-weight: 600; flex: 0 0 auto; }
.review__name { margin: 0; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--verde); }
.review__source { margin: 2px 0 0; font-family: var(--font-body); font-size: 13px; color: #687065; }
@media (prefers-reduced-motion: reduce) { .micro { transform: none !important; opacity: 1 !important; } .reviews__track { scroll-behavior: auto; } }

/* ===== RESPONSIVO — avaliações ===== */
@media (max-width: 900px) {
  .reviews { padding: 40px 24px 72px; }
  .reviews__scene { height: auto; display: flex; flex-direction: column; }
  .reviews__head { position: static; transform: none; width: auto; max-width: 520px; margin: 0 auto; order: 0; }
  .reviews__title { font-size: 42px; line-height: 46px; }
  .reviews__desc { font-size: 16px; line-height: 24px; }
  .reviews__micros { position: static; order: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 48px; }
  .micro { position: static !important; width: auto !important; padding: 16px; }
  .reviews__track { --reviews-w: calc(100vw - 48px); --edge: 24px; margin-inline: calc(50% - 50vw); width: 100vw; }   /* sem zoom abaixo de 900px */
  .review { flex: 0 0 calc((var(--reviews-w) - 18px) / 2); }
}
@media (max-width: 760px) {
  .reviews { padding: 40px 20px 72px; }
  .reviews__head { max-width: 340px; }
  .reviews__title { font-size: 36px; line-height: 39px; }
  .reviews__title br { display: none; }
  .reviews__micros { grid-template-columns: 1fr 1fr; margin-top: 44px; }
  .micro { padding: 14px; }
  .micro:nth-child(3), .micro:nth-child(4) { display: none; }
  .micro__text { font-size: 12.5px; line-height: 17px; }
  .reviews__bar { margin-top: 32px; flex-wrap: wrap; gap: 12px; }
  .reviews__arrow { width: 44px; height: 44px; }
  .reviews__track { --edge: 20px; --reviews-w: calc(100vw - 40px); gap: 14px; }
  .review { flex: 0 0 min(82vw, 320px); min-height: 280px; padding: 24px; }
}
@media (max-width: 480px) { .review { flex: 0 0 calc(100vw - 58px); } }


/* =====================================================
   DÚVIDAS FREQUENTES (seção 07) — porte da Scopel (Alan, 10/09/2026): faixa verde com margem 16 e raio 26, cabeçalho central (H2 52/54 700 creme,
   descrição 18/27), busca branca 88 r18, grade 360 | 784 (gap 56) com painel branco de categorias fixo e acordeão com linhas rgba(creme .22),
   número mono, pergunta 21/1.2 600, resposta 17/1.52, barra vertical que cresce no hover/aberto; estado vazio; caixa branca de ajuda com .btn. Chapado.
   ===================================================== */
.faq { margin: 0 16px; padding: 112px 40px 120px; background: var(--verde); border-radius: 26px; color: var(--creme); }
.faq__head, .faq-search, .faq__grid { max-width: 1200px; margin-inline: auto; }
.faq__head { max-width: 700px; margin: 0 auto; text-align: center; }
.faq__title { margin: 0 auto; font-size: 52px; line-height: 54px; font-weight: 700; letter-spacing: -0.035em; color: var(--creme); text-wrap: balance; }
.faq__desc { margin: 24px auto 0; max-width: 560px; font-family: var(--font-body); font-size: 18px; line-height: 27px; color: rgba(244, 241, 234, 0.78); text-wrap: balance; }

/* ---- busca ---- */
.faq-search { position: relative; display: flex; align-items: center; margin-top: 48px; height: 88px; padding: 0 28px 0 30px; border-radius: 18px; border: 1px solid var(--branco); background: var(--branco); }
.faq-search:focus-within { border-color: var(--dourado); outline: 2px solid var(--creme); outline-offset: 3px; }
.faq-search__label { display: flex; align-items: center; gap: 18px; flex: 1 1 auto; min-width: 0; color: var(--verde); }
.faq-search__icon { width: 24px; height: 24px; flex: 0 0 auto; }
.faq-search__input { flex: 1 1 auto; align-self: stretch; min-width: 0; border: 0; outline: none; background: transparent; font-family: var(--font-body); font-size: 17px; color: var(--verde); }   /* o campo ocupa a altura da pílula: como alvo de toque ele media 19px (QA Ultravista) */
.faq-search__input::placeholder { color: #687065; }
.faq-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.faq-search__clear { width: 36px; height: 36px; border: 0; padding: 0; margin-right: 12px; border-radius: 50%; background: var(--creme); color: var(--verde); display: grid; place-items: center; cursor: pointer; }
.faq-search__clear[hidden] { display: none; }
.faq-search__clear svg { width: 16px; height: 16px; }
.faq-search__count { flex: 0 0 auto; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #687065; }

/* ---- colunas ---- */
.faq__grid { display: grid; grid-template-columns: 360px minmax(0, 784px); justify-content: space-between; column-gap: 56px; margin-top: 68px; align-items: start; }
.faq__cats { position: sticky; top: clamp(24px, 8vh, 96px); }
.faq__cat-list { list-style: none; margin: 0; padding: 10px; display: grid; gap: 4px; border-radius: 20px; background: var(--branco); }
.faq-cat { width: 100%; min-height: 56px; padding: 0 18px; border: 0; border-radius: 14px; background: transparent; color: var(--verde); font-family: var(--font-body); font-size: 16px; font-weight: 500; text-align: left; cursor: pointer; transition: background-color .2s ease; }
@media (hover: hover) and (pointer: fine) { .faq-cat:not([aria-pressed="true"]):hover { background: var(--creme); } }
.faq-cat[aria-pressed="true"] { background: var(--verde); color: var(--creme); }
.faq-cat:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

/* ---- acordeão ---- */
.faq__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(244, 241, 234, 0.22); }
.faq-item { position: relative; border-bottom: 1px solid rgba(244, 241, 234, 0.22); }
.faq-item[hidden] { display: none; }
.faq-item::before { content: ""; position: absolute; left: -14px; top: 26px; bottom: 25px; width: 2px; background: var(--dourado-300); transform: scaleY(0); transform-origin: center; transition: transform .24s cubic-bezier(.22, 1, .36, 1); }
.faq-item:hover::before, .faq-item:focus-within::before, .faq-item.is-open::before { transform: scaleY(1); }
.faq-item__q { margin: 0; }
.faq-item__btn { width: 100%; display: grid; grid-template-columns: 46px minmax(0, 1fr) 36px; column-gap: 18px; align-items: center; min-height: 92px; padding: 26px 2px 25px; border: 0; background: transparent; text-align: left; cursor: pointer; color: var(--creme); }
.faq-item__btn:focus-visible { outline: 2px solid var(--creme); outline-offset: 4px; border-radius: 6px; }
.faq-item__num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; color: rgba(244, 241, 234, 0.6); transition: color .2s ease; }
.faq-item.is-open .faq-item__num { color: var(--dourado-300); }
.faq-item__text { font-family: var(--font-sans); font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; text-wrap: pretty; }
.faq-item__toggle { width: 36px; height: 36px; display: grid; place-items: center; }
.faq-item__plus { width: 20px; height: 20px; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.faq-item.is-open .faq-item__plus { transform: rotate(45deg); }
.faq-item__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s cubic-bezier(.22, 1, .36, 1); }
.faq-item__body > * { overflow: hidden; min-height: 0; }
.faq-item.is-open .faq-item__body { grid-template-rows: 1fr; }
.faq-item__a { margin: 0 0 0 64px; max-width: 620px; padding: 0; font-family: var(--font-body); font-size: 17px; line-height: 1.52; color: rgba(244, 241, 234, 0.8); text-wrap: pretty; opacity: 0; transform: translateY(-5px); transition: opacity .22s ease, transform .22s ease; }
.faq-item.is-open .faq-item__a { padding-bottom: 30px; opacity: 1; transform: none; transition-delay: .07s; }
.faq__hint { display: none; }

/* ---- estado vazio e ajuda ---- */
.faq-empty { padding: 40px 0 8px; text-align: left; }
.faq-empty[hidden] { display: none; }
.faq-empty__title { margin: 0; font-family: var(--font-sans); font-size: 21px; font-weight: 600; color: var(--creme); }
.faq-empty__text { margin: 8px 0 0; font-family: var(--font-body); font-size: 16px; color: rgba(244, 241, 234, 0.78); }
.faq-help { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; min-height: 112px; padding: 24px 28px; border-radius: 20px; background: var(--branco); }
.faq-help__title { margin: 0; font-family: var(--font-sans); font-size: 20px; font-weight: 600; color: var(--verde); }
.faq-help__text { margin: 6px 0 0; font-family: var(--font-body); font-size: 15px; color: var(--verde-700); }
.faq-help__btn { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .faq-item::before, .faq-item__plus, .faq-item__body, .faq-item__a { transition: none; } }

/* ===== RESPONSIVO — dúvidas ===== */
@media (max-width: 900px) {
  .faq { margin: 0 12px; padding: 80px 28px; }
  .faq__title { font-size: 42px; line-height: 46px; }
  .faq__desc { font-size: 16px; line-height: 24px; }
  .faq__grid { grid-template-columns: 1fr; row-gap: 28px; margin-top: 40px; }
  .faq__cats { position: static; overflow-x: auto; scrollbar-width: none; }
  .faq__cats::-webkit-scrollbar { display: none; }
  .faq__cat-list { display: flex; gap: 6px; padding: 6px; width: max-content; }
  .faq-cat { min-height: 44px; padding: 0 16px; white-space: nowrap; font-size: 15px; border-radius: 999px; }
  .faq-search__label { min-height: 48px; }
}
@media (max-width: 760px) {
  .faq { margin: 0 10px; padding: 64px 18px 96px; border-radius: 22px; }
  .faq__title { font-size: 36px; line-height: 39px; }
  .faq-search { height: 60px; padding: 0 14px 0 16px; margin-top: 32px; border-radius: 14px; }
  .faq-search__count { display: none; }
  .faq__grid { margin-top: 32px; row-gap: 24px; }
  .faq__cats { margin: 0 -18px; padding: 0 18px; }
  .faq-item__btn { grid-template-columns: 24px minmax(0, 1fr) 22px; column-gap: 6px; min-height: 60px; padding: 14px 0; }
  .faq-item::before { left: -8px; }
  .faq-item__num { font-size: 11px; letter-spacing: .1em; }
  .faq-item__text { font-size: 15px; line-height: 1.3; }
  .faq-item__toggle { width: 22px; height: 22px; }
  .faq-item__plus { width: 16px; height: 16px; }
  .faq-item__a { margin-left: 30px; font-size: 15px; line-height: 23px; }
  /* a lista fica sempre visível no celular: são 5 perguntas, esconder atrás da busca deixava a seção vazia (QA Bolso) */
  .faq-help { flex-direction: column; align-items: center; text-align: center; padding: 20px; gap: 18px; }
  .faq-help__btn { width: 100%; max-width: 310px; justify-content: space-between; }
}


/* =====================================================
   RODAPÉ (seção 09) — porte da Scopel (Alan, 10/09/2026): branco, links + redes, bloco regulatório 13/1.65, assinatura mono,
   letreiro gigante (clamp 150–220px) rolando da direita para a esquerda, cortado na base, em cor quase invisível. Chapado.
   ===================================================== */
.footer { position: relative; margin-top: 24px; background: var(--branco); color: var(--verde); overflow: hidden; }
.footer__inner { max-width: 1280px; margin: 0 auto; padding: 64px 40px 0; }
.footer__brand { display: block; width: fit-content; }
.footer__brand:focus-visible { outline: 2px solid var(--creme); outline-offset: 4px; border-radius: 8px; }
.footer__logo { display: block; width: 220px; height: auto; }   /* logo inteira, branca, ao lado do bloco regulatório (Alan, 10/09) */
.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(28, 42, 29, 0.85); text-decoration: none; transition: color .18s ease, transform .18s ease; display: inline-block; }
.footer__link:hover { color: var(--verde); transform: translateY(-2px); }
.footer__link:focus-visible { color: var(--verde); outline: 2px solid var(--verde); 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(28, 42, 29, 0.85); transition: color .18s ease; }
.footer__social a:hover { color: var(--verde); }
.footer__social a:focus-visible { color: var(--verde); outline: 2px solid var(--verde); 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" "policy dev"; column-gap: 40px; align-items: start; margin-top: 76px; }
.footer__side .footer__dev { margin: 0; }
.footer__reg { grid-area: reg; }
.footer__policy { grid-area: policy; justify-self: start; }
.footer__dev { justify-self: end; }
.footer__reg { margin: 0; max-width: 780px; font-family: var(--font-sans); font-size: 13px; line-height: 1.65; color: var(--verde-700); }
.footer__policy { display: inline-block; margin-top: 14px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--verde); text-decoration: underline; text-underline-offset: 3px; }   /* fora da lista de links, que some no celular (QA Codex) */
.footer__policy:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 4px; }
.footer__dev { 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: #687065; text-decoration: none; }
.footer__dev a:hover { color: var(--verde); }
.footer__marquee { --footer-duration: 28s; height: auto; margin-top: 20px; overflow: hidden; }   /* altura fixa cortava a base das letras (QA Panorama) */
.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: 1fr; grid-template-areas: "dev" "reg" "policy"; justify-items: center; row-gap: 24px; margin-top: 48px; }
  .footer__policy { margin-top: 0; }
  .footer__dev { justify-self: center; }
  .footer__reg { max-width: 36ch; font-size: 12.5px; text-align: center; }
  .footer__dev { white-space: normal; 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 { display: none; }
  .footer__legal { margin-top: 32px; }
  .footer__reg { max-width: 34ch; }
}


/* =====================================================
   CORPO E CÉREBRO (seção 02b) — "Você por inteiro" (Alan, 10/09/2026), medidas do Codex em analise-codex-corpo-cards.txt:
   núcleo até 1440 × 900; figura pérola 560 × 700 (a palavra gigante e a descrição saíram a pedido do Alan); coluna e figura encostadas num miolo de 1100 (Alan pediu mais para o centro, 10/09);
   coluna esquerda 440 centrada em y500: H2 52/54 → descrição 18/27 → 28 → 3 cards (min 116, padding 20 24, borda rgba(28,42,29,.16), raio 20,
   número mono 12 + título 18/24 600 + texto 15/22) com 12 entre eles → 24 → .btn. Sem margem embaixo (Alan). Chapado.
   ===================================================== */
.body { padding: 0; background: var(--creme); color: var(--verde); overflow: hidden; }   /* sem margem em cima nem embaixo (Alan, 10/09); o D gigante sai pela borda direita */
.body__core { position: relative; isolation: isolate; width: calc(100% - 80px); max-width: 1440px; height: 800px; margin-inline: auto; container-type: inline-size; }
.body__word { position: absolute; right: calc((100% - 1100px) / 2); top: 15px; z-index: 0; width: 560px; margin: 0; text-align: center; white-space: nowrap; text-transform: uppercase; color: var(--verde); font-family: "Brain Anton", Impact, sans-serif; font-size: clamp(160px, 16.35vw, 246px); font-weight: 400; line-height: 1.05; letter-spacing: -.012em; pointer-events: none; user-select: none; }
@supports (font-size: 1cqw) { .body__word { font-size: clamp(160px, 17.3cqw, 246px); } }
.body__logo { position: absolute; right: -120px; top: 237px; z-index: 0; width: 535px; height: auto; opacity: .1; pointer-events: none; }   /* D gigante e fraco atrás do ombro da figura, no ponto marcado pelo Alan (10/09) */
.body__media { position: absolute; right: calc((100% - 1100px) / 2); top: 50px; z-index: 1; width: 560px; height: 700px; }
.body__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }
.body__intro { position: absolute; left: max(22px, calc((100% - 1100px) / 2)); top: 400px; transform: translateY(-50%); z-index: 2; width: 440px; }
.body__title { margin: 0; font-size: 52px; line-height: 54px; font-weight: 700; letter-spacing: -0.035em; color: var(--verde); text-wrap: balance; }
.body__lead { margin: 20px 0 0; font-family: var(--font-body); font-size: 18px; line-height: 27px; color: var(--verde-700); text-wrap: balance; }
.body__cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
.body__card { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 16px; align-items: start; min-height: 116px; padding: 20px 24px; box-sizing: border-box; background: var(--branco); border: 1px solid rgba(28, 42, 29, 0.16); border-radius: 20px; }
.body__num { padding-top: 3px; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--verde-700); }
.body__card-title { margin: 0 0 6px; font-family: var(--font-sans); font-size: 18px; line-height: 24px; font-weight: 600; color: var(--verde); }
.body__card-text { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 22px; color: var(--verde-700); text-wrap: pretty; }
.body__intro .btn { margin-top: 24px; }

/* ===== RESPONSIVO — corpo e cérebro ===== */
@media (max-width: 1279px) {
  .body__core { height: 700px; }
  .body__media { right: 24px; top: 50px; width: 480px; height: 600px; }
  .body__word { right: 24px; width: 480px; }
  .body__title { font-size: 42px; line-height: 46px; }
  .body__intro { top: 350px; width: min(440px, calc(100% - 568px)); }
}
@media (max-width: 1000px) {
  .body { padding: 24px 0 0; }
  .body__logo { display: none; }
  .body__core { width: calc(100% - 48px); max-width: 600px; height: auto; display: flex; flex-direction: column; align-items: center; }
  .body__word { position: static; width: auto; font-size: clamp(96px, 18vw, 160px); line-height: 1; }
  .body__media { position: static; width: min(440px, 100%); height: auto; aspect-ratio: 4 / 5; margin-top: -24px; }
  .body__intro { position: static; transform: none; width: 100%; margin-top: 24px; }
}
@media (max-width: 600px) {
  .body__core { width: calc(100% - 44px); }
  .body__media { width: min(320px, 100%); }
  .body__word { font-size: 96px; }
  .body__title { font-size: 34px; line-height: 38px; }
  .body__title br { display: none; }
  .body__lead { font-size: 17px; line-height: 26px; }
  .body__cards { margin-top: 20px; }
  .body__card { padding: 18px 20px; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; }
  .body__intro .btn { width: 100%; max-width: 360px; justify-content: space-between; }
}

/* ---------- 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: 12px; bottom: max(12px, env(safe-area-inset-bottom)); width: 56px; height: 56px; } .wa-float svg { width: 30px; height: 30px; } }
@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; } }

/* ---------- Menu suspenso em vidro (Alan, 10/09/2026): caixa verde translúcida com blur, centralizada no topo, só depois de rolar o cabeçalho ---------- */
.float-nav { position: fixed; top: 16px; left: 0; right: 0; margin-inline: auto; width: max-content; z-index: 80; display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-radius: 20px; background: rgba(28, 42, 29, 0.72); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); border: 1px solid rgba(244, 241, 234, 0.16); color: var(--creme); opacity: 0; transform: translateY(-24px); pointer-events: none; transition: opacity .28s ease, transform .32s cubic-bezier(.22, 1, .36, 1); }
.float-nav.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
.float-nav__brand { display: grid; place-items: center; height: 44px; padding: 0 6px; border-radius: 12px; }
.float-nav__brand:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; }
.float-nav__symbol { width: 44px; height: auto; display: block; }
.float-nav__links { list-style: none; margin: 0 6px 0 4px; padding: 0; display: flex; gap: 2px; }
.float-nav__link { display: inline-flex; align-items: center; white-space: nowrap; height: 40px; padding: 0 14px; border-radius: 12px; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--creme); text-decoration: none; transition: background-color .18s ease; }
.float-nav__link:hover, .float-nav__link:focus-visible { background: rgba(244, 241, 234, 0.14); outline: none; }
.float-nav__cta { min-height: 44px; padding: 4px 4px 4px 18px; font-size: 14px; white-space: nowrap; }
.float-nav__cta > span:first-child { white-space: nowrap; }
.float-nav { max-width: calc(100% - 32px); }
.float-nav__brand { flex: 0 0 auto; }
.float-nav__symbol { width: 44px; min-width: 44px; }
@media (max-width: 1100px) { .float-nav { gap: 2px; padding: 8px 8px 8px 10px; } .float-nav__links { margin: 0 2px; } .float-nav__link { padding: 0 10px; font-size: 13px; } .float-nav__cta { padding-left: 14px; font-size: 13px; } }
.float-nav__cta .btn__icon { width: 34px; height: 34px; }
.float-nav__cta .btn__icon svg { width: 16px; height: 16px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .float-nav { background: rgba(28, 42, 29, 0.94); } }
@media (max-width: 900px) { .float-nav__links { display: none; } .float-nav { top: 12px; padding: 6px 6px 6px 10px; } }
@media (prefers-reduced-motion: reduce) { .float-nav { transition: none; } }

/* =====================================================
   AJUSTES DE CELULAR pedidos pelo Alan em 10/09/2026 (capturas 28–33). Ficam no fim para vencer as regras anteriores.
   ===================================================== */
@media (max-width: 900px) {
  /* menu suspenso: botão numa linha só */
  .float-nav__cta { white-space: nowrap; font-size: 13px; padding: 4px 4px 4px 14px; }
  .float-nav__cta > span:first-child { white-space: nowrap; }
  /* "No consultório ou por vídeo": cabeçalho centralizado */
  .care__head { align-items: center; text-align: center; }
  .care__desc { margin-inline: auto; }
  /* "A clínica fica aqui": cabeçalho centralizado */
  .location__head { justify-items: center; text-align: center; }
  .location__desc { margin-inline: auto; }
  /* rodapé: sem o link de privacidade no celular (Alan) */
  .footer__policy { display: none; }
}
@media (max-width: 1000px) {
  /* "Sua história vem primeiro": título centralizado, botão no tamanho natural e centralizado, sem margem embaixo */
  .body { padding-bottom: 0; }
  .body__title { text-align: center; }
  .body__media { order: -1; margin-top: 0; }   /* figura antes do título, como o Codex propôs para o celular */
  .body__intro { display: flex; flex-direction: column; align-items: stretch; margin-top: 28px; }
  .body__intro .btn { width: auto; max-width: none; justify-content: flex-start; align-self: center; }
}
@media (max-width: 760px) {
  /* hero no celular (Alan, 10/09): 750px de altura, imagem "Hero celular" de fundo, texto e botão no fim */
  .hero { position: relative; height: 750px; min-height: 750px; padding: 32px 24px 40px; justify-content: flex-end; gap: 0; }
  /* A hero deixa de ter altura fixa: a foto ganha altura própria (proporcional à largura) e o texto
     flui logo abaixo dela. Assim a frase curta não fica com um vão no meio nem a longa sobe no vestido
     (Alan, 22/09). A base da foto e o fundo da seção são a mesma cor (rgb 244,236,223), então a emenda não aparece. */
  .hero--alterna { height: auto; min-height: 0; padding: calc(100vw * 0.88) 24px 44px; justify-content: flex-start; }
  .hero--alterna .hero__media { inset: 0 0 auto; height: calc(100vw * 0.88);   /* a figura acaba em 0,82 da largura (medido na imagem): 0,88 deixa um respiro curto antes do texto */ }
  .hero--alterna .hero__bg { object-position: 50% 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; }
  /* "Sobre": botão no tamanho natural */
  .profile-cta { width: auto; max-width: none; justify-content: flex-start; }
}

/* celular (Alan, 10/09/2026): sem menu suspenso e botões no tamanho natural em vez de 100% */
@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; }
  .map__card-actions { display: flex; flex-wrap: wrap; gap: 10px; }
  .faq-help__btn { align-self: center; }
}

/* =====================================================
   TESTES DE MOVIMENTO pedidos pelo Alan em 10/09/2026 (inspirados no Spell UI, refeitos sem React):
   1) palavras entrando uma a uma — REMOVIDO pelo Alan (10/09) · 2) feixes de luz atrás da figura de "Sua história vem primeiro" · 3) gradiente animado no rodapé.
   2 e 3 são exceções ao design chapado; basta remover a classe/canvas para voltar.
   ===================================================== */
/* 2) feixes de luz: canvas atrás da figura, só no desktop */
.body__rays { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 1000px) { .body__rays { display: none; } }

/* 3) rodapé com gradiente animado na paleta (verde escuro → verde médio, sem dourado; escolha do Alan) */
.footer--gradient { color: var(--creme); background: linear-gradient(115deg, #1c2a1d 0%, #2d3d2c 35%, #3a5039 55%, #2d3d2c 75%, #1c2a1d 100%); background-size: 260% 260%; animation: footer-gradient 22s ease-in-out infinite alternate; }   /* opção 2 (Alan, 10/09): só verde escuro → verde médio, sem dourado */
@keyframes footer-gradient { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.footer--gradient .footer__link, .footer--gradient .footer__social a { color: rgba(244, 241, 234, 0.85); }
.footer--gradient .footer__link:hover, .footer--gradient .footer__social a:hover { color: var(--creme); }
.footer--gradient .footer__link:focus-visible, .footer--gradient .footer__social a:focus-visible, .footer--gradient .footer__policy:focus-visible { outline-color: var(--creme); }
.footer--gradient .footer__reg { color: rgba(244, 241, 234, 0.82); }
.footer--gradient .footer__policy { color: var(--creme); }
.footer--gradient .footer__dev a { color: rgba(244, 241, 234, 0.7); }
.footer--gradient .footer__dev a:hover { color: var(--creme); }
.footer--gradient .footer__giant { color: rgba(244, 241, 234, 0.14); }
@media (prefers-reduced-motion: reduce) { .footer--gradient { animation: none; } }

/* =====================================================
   CORREÇÕES DO QA POR RESOLUÇÃO — 11/09/2026 (laudo Retina, referencias/qa-resolucoes/)
   ===================================================== */
/* C) âncoras do menu: o menu de vidro ocupa y 14–71, então as seções param abaixo dele */
#inicio, #corpo, #consulta, #cerebro, #cuidado, #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) */

/* D) cards de #consulta em telas estreitas: o corpo sai do absoluto e a linha cresce, em vez de cortar texto */
@media (min-width: 761px) and (max-width: 1180px) {
  /* margin-top:auto alinhava os cards pela base e desalinhava os títulos: distância fixa do ícone
     mantém os 4 títulos na mesma altura e deixa o card crescer para baixo (QA Retina) */
  .diff-card__body { position: static; margin-top: 82px; padding-top: 0; }
  .diff-card { min-height: 290px; }
  .why__grid { grid-template-rows: auto; }   /* as linhas fixas de 290px impediam o card de crescer e o texto era cortado */
}

/* E) alvos de toque: com html{zoom:.9} um 44px declarado vira 39,6px reais — compensado caso a caso */
@media (min-width: 901px) {
  .reviews__arrow { width: 49px; height: 49px; }
  .profile-insta, .footer__social a { width: 49px; height: 49px; }
  .brain .brain__topic, .brain__topic { height: 49px; min-height: 49px;  padding-inline-end: 40px; }
  .nav__link, .float-nav__link, .float-nav__cta { min-height: 49px; }
  .float-nav__link { height: 44px; }
  .faq-search__label { min-height: 56px; }
  .footer__link { display: inline-flex; align-items: center; min-width: 49px; min-height: 49px; }
  .float-nav__brand { height: 49px; }
  .brain__motion-toggle { min-height: 49px; }
  .footer__policy { min-height: 49px; align-items: center; }
  .footer__dev a { display: inline-flex; align-items: center; min-height: 49px; }
}

/* NÃO compensar o html{zoom:.9} aqui. Quatro inspetores mediram uma faixa vazia de 10% à direita
   do mapa e pediram width:calc(100%/.9). É artefato do renderizador de portal do Maestri, que
   desenha iframe fora de processo sem aplicar o zoom do pai. Teste isolado no Chrome headless
   (scratchpad/zoomtest/): com width:100% o documento de dentro reporta viewport 1365 em 1366 e
   pinta a largura inteira; com calc(100%/.9) ele vai a 1517 e 137px do mapa saem da caixa e somem.
   O mapa está correto como está. — 11/09/2026 */
@media (max-width: 760px) {
  /* o menu de vidro só desaparece em 760px, não em 900: antes disso a âncora precisa da folga (QA Palma) */
  #inicio, #corpo, #consulta, #cerebro, #cuidado, #atendimento, #sobre, #localizacao, #avaliacoes, #faq { scroll-margin-top: 16px; }
}

/* alvos de toque abaixo de 901px: aqui não há zoom, então 44px declarado é 44px real */
@media (max-width: 900px) {
  .footer__link { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .footer__dev a { display: inline-flex; align-items: center; min-height: 44px; }
  #faq-search-input { min-height: 44px; }
  .reviews__arrow { width: 44px; height: 44px; }
  .footer__social a { width: 44px; height: 44px; }
}

/* Com a retirada dos dois blocos laterais 2015 e Penha de França (Alan, 15/09/2026),
   a coluna de 120px ficou vazia e o texto foi espremido no restante. A grade vira uma coluna só. */
.profile-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
.profile-grid > .profile-body { max-width: 560px; }

/* No celular o menu some e a marca fica sozinha no cabeçalho, encostada à esquerda.
   Alan (15/09/2026): centralizar. Como é o único item da linha, basta centralizar o conteúdo
   e zerar a margem que a empurrava para a direita da borda. */
@media (max-width: 960px) {
  .header__inner { justify-content: center; }
  .brand { margin-left: 0; }
}

/* =====================================================
   FORMAS DE CUIDADO (entre o cérebro e "No consultório ou por vídeo") · pedido do Alan, 21/09/2026
   Ref: referencias/secao-formas-de-cuidado/ · medidas do Codex em analise-codex.txt: grade 2×2 com gap 18 · card r16 #dbddd0,
   padding 40 · círculo 110 com contorno 2 · ícone 56 com traço de 2 · traço curto 28×1 · fecho com dois traços de 70×1.
   Do mock ficou a estrutura; H2 (52/54), fontes e botão são os do site, que não tem família serifada. Chapado.
   ===================================================== */
.cuidado { --cuidado-card: #dbddd0; padding: 96px 32px; background: var(--creme); }
.cuidado__inner { max-width: 1200px; margin-inline: auto; }

.cuidado__head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.cuidado__title { margin: 0; max-width: 920px; font-size: 52px; line-height: 54px; font-weight: 700; letter-spacing: -0.035em; color: var(--verde); text-wrap: balance; }
.cuidado__desc { margin: 22px 0 0; max-width: 640px; font-family: var(--font-body); font-size: 17px; line-height: 26px; color: var(--verde-700); text-wrap: balance; }
.cuidado__head::after { content: ""; width: 59px; height: 1px; margin-top: 28px; background: var(--verde); opacity: .75; }

.cuidado__grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cuidado__card { display: flex; flex-direction: column; align-items: flex-start; padding: 40px; border-radius: 16px; background: var(--cuidado-card); color: var(--verde); }
.cuidado__top { display: flex; align-items: center; gap: 29px; width: 100%; }
.cuidado__icon-wrap { width: 110px; height: 110px; flex: 0 0 auto; border: 2px solid var(--verde); border-radius: 50%; display: grid; place-items: center; color: var(--verde); transition: background-color .3s ease, color .3s ease; }
.cuidado__icon { width: 56px; height: 56px; }
.cuidado__titles { min-width: 0; }
.cuidado__card-title { margin: 0; max-width: 11em; font-family: var(--font-sans); font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.025em; color: var(--verde); text-wrap: balance; }
.cuidado__card-sub { margin: 12px 0 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde-700); text-wrap: balance; }
/* o traço curto do mock é o ::before da descrição: fica 32px abaixo do cabeçalho do card e 23px acima do texto */
.cuidado__card-text { position: relative; margin: 32px 0 28px; padding-top: 23px; font-size: 17px; line-height: 26px; color: var(--verde-700); }
.cuidado__card-text::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 1px; background: var(--verde); opacity: .75; }
.cuidado__btn { margin-top: auto; }   /* botões na mesma linha de base nos dois cards da fileira */

@media (hover: hover) and (pointer: fine) {
  .cuidado__card:hover .cuidado__icon-wrap { background: var(--verde); color: var(--creme); }
}

.cuidado__fecho { margin-top: 56px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cuidado__fecho-rotulo { display: flex; align-items: center; gap: 25px; margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--verde-700); }
.cuidado__fecho-rotulo::before,
.cuidado__fecho-rotulo::after { content: ""; flex: 0 0 70px; width: 70px; height: 1px; background: var(--verde); opacity: .45; }
.cuidado__fecho-frase { margin: 14px 0 0; max-width: 720px; font-family: var(--font-sans); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.025em; color: var(--verde); text-wrap: balance; }

@media (prefers-reduced-motion: reduce) { .cuidado__icon-wrap { transition: none; } }

@media (max-width: 1100px) {
  .cuidado__card { padding: 32px; }
  .cuidado__top { gap: 24px; }
  .cuidado__icon-wrap { width: 96px; height: 96px; }
  .cuidado__icon { width: 50px; height: 50px; }
  .cuidado__card-title { font-size: 26px; line-height: 30px; }
}
@media (max-width: 900px) {
  .cuidado { padding: 64px 24px; }
  .cuidado__title { font-size: 42px; line-height: 46px; }
  .cuidado__desc { font-size: 16px; line-height: 24px; }
  .cuidado__grid { margin-top: 32px; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cuidado__card-text { max-width: 60ch; }
  .cuidado__fecho { margin-top: 48px; }
  .cuidado__fecho-frase { font-size: 28px; line-height: 34px; }
}
@media (max-width: 600px) {
  .cuidado { padding: 56px 20px; }
  .cuidado__title { font-size: 34px; line-height: 38px; }
  .cuidado__head::after { margin-top: 24px; }
  .cuidado__card { padding: 26px; }
  /* ícone numa linha própria, acima do título (Codex): ao lado, o título quebraria em três linhas */
  .cuidado__top { flex-direction: column; align-items: flex-start; gap: 22px; }
  .cuidado__icon-wrap { width: 84px; height: 84px; }
  .cuidado__icon { width: 46px; height: 46px; }
  .cuidado__card-text { margin: 26px 0 24px; font-size: 16px; line-height: 24px; }
  /* os dois traços laterais espremem o rótulo no celular */
  .cuidado__fecho-rotulo::before,
  .cuidado__fecho-rotulo::after { display: none; }
  .cuidado__fecho-frase { max-width: 320px; font-size: 25px; line-height: 30px; }
}
@media (max-width: 360px) {
  .cuidado__card { padding: 22px; }
  .cuidado__icon-wrap { width: 78px; height: 78px; }
  .cuidado__icon { width: 42px; height: 42px; }
  .cuidado__card-title { font-size: 25px; line-height: 29px; }
  .cuidado__btn { width: 100%; }
}
@media (max-width: 340px) {
  .cuidado__card-title { font-size: 23px; line-height: 27px; }   /* "Longevidade Cerebral" cabe numa linha: o título fica em duas, não em três */
}

/* Hero: texto completo enviado pela Dra. Débora em 24/09/2026 (headline + apoio + chamada de prevenção).
   O fecho "Comece aos 30, aos 40, aos 50… comece." ganha peso para fechar o bloco. */
.hero__desc-forte { display: block; margin-top: 8px; font-weight: 600; color: var(--verde); }