/* =============================================================
   Dr. Paulo André Pereira — Sistema de layout e componentes
   Depende de: tokens.css, fonts.css
   ============================================================= */

/* ---------------------------------------------------------------
   1. Reset e base
   --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-tight);
  font-feature-settings: var(--otf);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Itálico não existe nesta marca. O <em> aqui é semântico: a ênfase é
   feita por cor e peso (ver §2), nunca por inclinação. */
em,
i,
cite,
address,
dfn,
var { font-style: normal; }

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

img { height: auto; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul { list-style: none; }

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

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  translate: -50% -200%;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--on-dark);
  font-size: var(--t-sm);
  font-weight: 500;
  transition: translate var(--dur-fast) var(--ease-snap);
}
.skip-link:focus-visible { translate: -50% 0; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   2. Tipografia
   --------------------------------------------------------------- */
.display,
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

/* Ênfase do display: cor + peso. Nunca inclinação — o <em> aqui é
   ênfase semântica, e o site inteiro roda com display-emph-style: normal. */
.display em,
h1 em, h2 em, h3 em,
.emph {
  font-style: var(--display-emph-style);
  font-weight: var(--display-emph-weight);
  color: var(--display-emph-color);
}

h1 { font-size: var(--t-h1); line-height: var(--lh-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }

h4, h5 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}
h4 { font-size: var(--t-h5); line-height: var(--lh-relaxed); }
h5 { font-size: var(--t-lead); line-height: var(--lh-snug); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  max-width: var(--maxw-text);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--fg-muted);
}

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

.section { padding-block: var(--section-y); position: relative; }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-3xl);
  margin-bottom: clamp(40px, 5vw, 72px);
}

.section-head__text { max-width: 42ch; }
.section-head__text .lead { margin-top: var(--sp-xl); }

/* ---------------------------------------------------------------
   4. Botões e links
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 16px 20px;              /* padding literal do design-system.md */
  border-radius: var(--r-lg);      /* 12px literal */
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  transition:
    background-color var(--dur-fast) var(--ease-snap),
    color var(--dur-fast) var(--ease-snap),
    transform var(--dur-fast) var(--ease-snap);
}

.btn svg { flex: none; width: 14px; height: 14px; }

.btn--primary {
  background: var(--ink);
  color: var(--on-dark);
}
.btn--primary:hover { background: var(--brand); }

.btn--light {
  background: var(--white);
  color: var(--brand);
  box-shadow: var(--inset-hairline);
}
.btn--light:hover { background: var(--surface-soft); }

.btn--ghost {
  padding-inline: 0;
  color: var(--fg);
}
.btn--ghost svg { width: 16px; height: 16px; }

/* `translate` (não `transform`): o spring do Motion é dono do transform do botão */
.btn:active { translate: 0 1px; }

/* seta que desliza no hover */
.btn .arrow { transition: translate var(--dur-fast) var(--ease-snap); }
.btn:hover .arrow { translate: 3px 0; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--fg);
}
.link-arrow svg { width: 16px; height: 16px; transition: translate var(--dur-fast) var(--ease-snap); }
.link-arrow:hover svg { translate: 4px 0; }

/* ---------------------------------------------------------------
   5. Header
   --------------------------------------------------------------- */
/* Barra flutuante: fixa a 12px do topo, 1124px de largura máxima,
   raio 24px. Dois estados:
     · sobre o céu do hero  → sem fundo, texto claro
     · rolado / páginas internas → vidro fosco, texto escuro          */
.header {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 100;
  padding-inline: var(--gutter);
  pointer-events: none;
}

.header__bar {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3xl);
  max-width: 1124px;
  min-height: 68px;
  margin-inline: auto;
  padding-inline: var(--sp-3xl);
  border-radius: var(--r-2xl);
  color: var(--fg);
  background: transparent;
  transition:
    background-color var(--dur-base) var(--ease-brand),
    backdrop-filter var(--dur-base) var(--ease-brand),
    color var(--dur-base) var(--ease-brand);
}

/* Vidro fosco. O fundo do site é claro, então o vidro é branco —
   com um vidro cinza a barra sumiria por cima do conteúdo. */
.header[data-scrolled='true'] .header__bar {
  background: rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  box-shadow: var(--inset-hairline);
}

/* Sobre o céu, antes de rolar: tudo em branco-luz */
.header[data-onsky='true'][data-scrolled='false'] .header__bar { color: var(--on-dark); }

/* Logotipo: wordmark tipográfico. O nome do médico é a marca. */
.header__logo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: inherit;
  line-height: 1;
}
.logo__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
}
.logo__meta {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  opacity: 0.72;
}

.nav { display: flex; align-items: center; gap: var(--sp-3xl); }

.nav__item { position: relative; }

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--t-sm);
  font-weight: 500;
  color: inherit;
  padding-block: 8px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__link .chev {
  width: 12px;
  height: 8px;
  transition: rotate var(--dur-base) var(--ease-brand);
}
.nav__trigger[aria-expanded='true'] .chev { rotate: 180deg; }

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--dur-base) var(--ease-brand);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after { scale: 1 1; }
.nav__trigger::after { display: none; }

/* Menu suspenso — fechado por padrão, sem depender de JS para o estilo */
.nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  translate: -50% 0;
  z-index: 10;
  display: grid;
  gap: 2px;
  min-width: 232px;
  padding: var(--sp-sm);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow:
    var(--inset-hairline),
    0 12px 40px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  translate: -50% -6px;
  transition:
    opacity var(--dur-fast) var(--ease-snap),
    translate var(--dur-fast) var(--ease-snap),
    visibility 0s linear var(--dur-fast);
}
.nav__item:hover .nav__menu,
.nav__item:focus-within .nav__menu,
.nav__trigger[aria-expanded='true'] + .nav__menu {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
  transition-delay: 0s;
}

.nav__menu a {
  display: block;
  padding: 10px var(--sp-lg);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--ink);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-snap);
}
.nav__menu a:hover { background: var(--on-dark); }
.nav__menu-all {
  margin-top: 2px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  color: var(--brand);
  font-weight: 500;
}

.header__actions { display: flex; align-items: center; gap: var(--sp-xl); }

.header__login { font-size: var(--t-sm); font-weight: 500; color: inherit; }

/* Get Started: escura por padrão; branca sobre o céu */
.btn--nav {
  background: var(--ink);
  color: var(--on-dark);
  padding: 12px 18px;
}
.header[data-onsky='true'][data-scrolled='false'] .btn--nav {
  background: var(--white);
  color: var(--ink);
}

.nav-toggle { display: none; }

/* O painel mobile só existe abaixo do breakpoint — sem isto ele vaza no desktop */
.mobile-nav { display: none; }

/* ---------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------- */
/* O hero é um palco: o céu ocupa tudo, o texto fica centrado e o enxame
   de libélulas sangra pelas bordas. Três profundidades de parallax. */
.hero {
  position: relative;
  /* 100vh, não 110: o enxame vive no rodapé do palco, e o que passa da
     dobra o visitante nunca vê. */
  height: 100vh;
  min-height: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* z0 — o céu: azul-grafite no alto, verde-água pálido no horizonte */
.sky {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 101%;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) var(--sky-stop));
  pointer-events: none;
}

/* Véu que escurece a faixa do texto. Não é enfeite: é o que leva o
   contraste do texto sobre o céu ao mínimo AA (4.7:1 no subtítulo).
   Some antes do horizonte, para não sujar o verde-água da base.      */
.sky::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(34, 48, 58, 0.56) 0%,
    rgba(34, 48, 58, 0.56) 55%,
    rgba(34, 48, 58, 0.58) 80%,
    rgba(34, 48, 58, 0.22) 90%,
    rgba(34, 48, 58, 0) 97%
  );
}

/* z1 — o banco de névoa do horizonte. Sem asset: dois gradientes.
   Mantém a classe .sky__cloud porque é o que a camada de movimento
   busca para a entrada longa (2s) e para o parallax mais lento.      */
.sky__clouds {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
/* A névoa recuou para o horizonte (52% → 32% da altura): ela subia até
   a faixa da microcopy e derrubava o contraste do texto para 2:1 —
   medido. Quem faz profundidade agora são as quatro nuvens; a névoa
   voltou ao papel de horizonte. */
.sky__cloud {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -6%;
  height: 32%;
  background:
    radial-gradient(58% 90% at 26% 100%, rgba(244, 246, 247, 0.70) 0%, rgba(244, 246, 247, 0) 70%),
    radial-gradient(72% 82% at 78% 100%, rgba(244, 246, 247, 0.58) 0%, rgba(244, 246, 247, 0) 72%),
    linear-gradient(180deg, rgba(203, 220, 216, 0) 0%, rgba(233, 240, 238, 0.5) 62%, rgba(244, 246, 247, 0.82) 100%);
  filter: blur(14px);
  will-change: transform;
}

/* ---- As nuvens: o recurso principal de profundidade do céu ----
   Três planos. O que muda entre eles NÃO é sombra: é escala (o plano
   de trás é menor e mais alto), opacidade, desfoque e — o que mais
   pesa — a SOBREPOSIÇÃO. A nuvem da frente (z4) passa por cima do
   bando (z3), que por sua vez passa por cima da nuvem do meio (z2).

   As nuvens já vêm na cor desta marca (azul-cinza com verde-água):
   nada de recolorir para branco ou cinza. E a opacidade de plano vive
   dentro do `filter` — a camada de movimento é dona do `opacity` e
   sobrescreveria qualquer valor posto ali.

   Todas moram ABAIXO da coluna de texto (a faixa do horizonte) ou nas
   bordas laterais: nuvem clara atrás de texto claro derruba o
   contraste, e nenhum véu conserta isso sem lavar a nuvem.           */
.clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.clouds--mid   { z-index: 2; }
.clouds--front { z-index: 4; }

.cloud {
  position: absolute;
  height: auto;
  will-change: transform;
}

/* fundo — pequenas, lavadas, quase dissolvidas no céu */
.cloud--back-1  { left: -12%;  bottom: 8%;   width: 30%; filter: opacity(0.36) blur(2.6px); }
.cloud--back-2  { right: -12%; bottom: 13%;  width: 28%; filter: opacity(0.32) blur(3px); }
/* meio — quase sólida: o bando voa na frente dela e se destaca */
.cloud--mid-1   { left: 4%;    bottom: -5%;  width: 46%; filter: opacity(0.88) blur(0.6px); }
/* frente — SÓLIDA. A oclusão é o efeito: as libélulas do canto direito
   sobem por trás desta nuvem e somem atrás dela. Rebaixar a opacidade
   aqui mata a profundidade (a libélula atravessa a nuvem como um
   fantasma) — foi exatamente o que a primeira versão fez de errado.  */
.cloud--front-1 { right: 0;    bottom: -9%;  width: 43%; }

/* z3 — o bando: palco fixo de 1120×460, colado no horizonte.
   O palco é largo e baixo de propósito — as libélulas voam ABAIXO e AO
   LADO da coluna de texto (560–640px, centrada), nunca por trás dela.
   Texto sobre asa translúcida não se lê, e nenhum scrim conserta isso. */
.swarm {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: 100%;
  max-width: 1240px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.swarm__stage {
  position: relative;
  width: 1120px;
  height: 460px;
  flex: none;
}

/* A centragem horizontal é por margem, nunca por `translate`: a deriva
   contínua é dona dessa propriedade e apagaria o -50%. `rotate` e
   `filter` são propriedades individuais — não colidem com o `transform`
   do parallax nem com o `translate` do float.

   Bando, não fileira: oito indivíduos, quatro profundidades, alturas e
   giros de repouso todos diferentes, e nenhuma simetria entre os lados.
   A profundidade é escala + opacidade + desfoque. A única sombra
   permitida é um halo COLORIDO da marca (#3E6E8E), e só nas duas mais
   próximas — o resto do céu não tem sombra nenhuma.                  */
.dragonfly {
  position: absolute;
  will-change: transform;
}

/* plano 1 — próximo: grandes, nítidas, parallax forte */
.dragonfly--1 { left: -28px;   bottom: -8px;  width: 256px; rotate: -6deg;  filter: drop-shadow(0 14px 26px rgba(62, 110, 142, 0.28)); }  /* dorsal, 2.03 */
.dragonfly--2 { right: -18px;  bottom: 6px;   width: 232px; rotate: 5deg;   filter: drop-shadow(0 14px 26px rgba(62, 110, 142, 0.26)); }  /* perfil, 1.50 */

/* plano 2 — meio-próximo */
.dragonfly--3 { left: 214px;   bottom: 56px;  width: 196px; rotate: -11deg; filter: opacity(0.94); }                  /* dorsal aberta, 1.42 */
.dragonfly--4 { right: 186px;  bottom: 74px;  width: 172px; rotate: 8deg;   filter: opacity(0.9); }                   /* perfil, 1.51 */

/* plano 3 — meio: já perdem nitidez */
.dragonfly--5 { left: 52px;    bottom: 212px; width: 138px; rotate: -7deg;  filter: opacity(0.82) blur(0.5px); }      /* perfil em voo, 1.83 */
.dragonfly--6 { right: 40px;   bottom: 236px; width: 126px; rotate: 12deg;  filter: opacity(0.78) blur(0.7px); }      /* três-quartos, 0.97 */

/* plano 4 — fundo: pequenas, lavadas na cor do céu */
.dragonfly--7 { left: 12px;    bottom: 346px; width: 84px;  rotate: -16deg; filter: opacity(0.6) blur(1.2px); }
.dragonfly--8 { right: 112px;  bottom: 372px; width: 70px;  rotate: 14deg;  filter: opacity(0.52) blur(1.6px); }

/* z5 — texto */
.hero__inner {
  position: relative;
  z-index: 5;
  width: 640px;   /* cabe o par de botões numa linha só; abaixo disso quebra */
  max-width: 100%;
  padding-bottom: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 28px;
  color: var(--on-dark);
}

.hero__title {
  font-size: 56px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--on-dark);
  text-wrap: balance;
}
/* Sobre o céu a ênfase não pode ser cor de marca (não passaria em
   contraste): é peso + um traço verde-água por baixo da palavra. */
.hero__title em,
.hero__sub em {
  color: var(--on-dark);
  font-style: normal;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--sage);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}

.hero__sub {
  margin-top: -6px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--on-dark);
  max-width: 46ch;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-xl);
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-lg);
}
/* A microcopy é o texto mais baixo do hero — cai justamente onde o céu
   já clareou. Medido: com 86% de opacidade ela ficava em 2,6:1. Cor
   sólida (e o véu segurando o céu até 72%) leva o pior pixel a AA.   */
.hero__note {
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: var(--on-dark);
  max-width: 42ch;
}

/* ---------------------------------------------------------------
   7. Faixa de colaboradores
   --------------------------------------------------------------- */
/* Cinco provas curtas, todas verificáveis. Linha única no desktop,
   grade de dois no tablet, empilhadas no telefone. */
.proof {
  padding-block: clamp(48px, 6vw, 80px);
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-3xl);
}
.proof__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding-left: var(--sp-2xl);
  border-left: 2px solid var(--sage);
}
.proof__num {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--ls-display);
  color: var(--brand);
  text-wrap: balance;
}
.proof__label {
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------
   8. Cards de processo (3 colunas)
   --------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3xl);
}

.step {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--inset-hairline);
  transition: transform var(--dur-base) var(--ease-brand);
}
.step:hover { transform: translateY(-4px); }

.step__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-warm);
}
.step__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--dur-slow) var(--ease-brand);
}
.step:hover .step__media img { scale: 1.04; }

.step__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  padding: var(--sp-3xl);
  flex: 1;
}

.step__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  color: var(--brand);
}

.step__title {
  font-family: var(--font-body);
  font-size: var(--t-h5);
  font-weight: 500;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-tight);
}

.step__text {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

.step__stats {
  display: flex;
  gap: var(--sp-3xl);
  margin-top: auto;
  padding-top: var(--sp-2xl);
  border-top: 1px solid var(--border);
}

.stat-inline__num {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1;
  color: var(--brand);
}
.stat-inline__label {
  display: block;
  margin-top: var(--sp-xs);
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------
   9. Focus areas
   --------------------------------------------------------------- */
.focus { background: var(--on-dark); }

.focus__intro {
  font-size: var(--t-h4);
  font-family: var(--font-display);
  line-height: var(--lh-relaxed);
  max-width: 30ch;
}

.focus__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-lg);
  margin-top: clamp(40px, 5vw, 64px);
}

.focus-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xl);
  padding: 20px var(--sp-3xl);
  border-radius: var(--r-lg);
  background: var(--white);
  box-shadow: var(--inset-hairline);
  font-size: var(--t-sm);
  font-weight: 500;
  transition:
    background-color var(--dur-fast) var(--ease-snap),
    color var(--dur-fast) var(--ease-snap),
    transform var(--dur-fast) var(--ease-snap);
}
.focus-pill svg { flex: none; width: 20px; height: 20px; }
.focus-pill svg path[stroke] { transition: stroke var(--dur-fast) var(--ease-snap); }

.focus-pill:hover {
  background: var(--brand);
  color: var(--on-dark);
  transform: translateY(-2px);
}
.focus-pill:hover svg path[stroke] { stroke: var(--on-dark); }

.focus-pill--all {
  background: var(--ink);
  color: var(--on-dark);
}
.focus-pill--all svg path[stroke] { stroke: var(--on-dark); }
.focus-pill--all:hover { background: var(--brand); }

/* Rótulo, não link: sem seta e sem hover */
.focus-pill--more {
  justify-content: center;
  background: transparent;
  box-shadow: none;
  border: 1px dashed var(--border-strong);
  color: var(--fg-muted);
  cursor: default;
}
.focus-pill--more:hover {
  background: transparent;
  color: var(--fg-muted);
  transform: none;
}

/* ---------------------------------------------------------------
   10. Bloco escuro — "No more calls, forms, or fine print."
   --------------------------------------------------------------- */
.frame-dark {
  position: relative;
  border-radius: var(--r-card);
  background: var(--ink);
  color: var(--on-dark);
  padding: clamp(40px, 6vw, 80px);
  overflow: hidden;
  isolation: isolate;
}

.frame-dark__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.frame-dark__title {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  max-width: 14ch;
}
.frame-dark__lead {
  margin-top: var(--sp-3xl);
  font-size: var(--t-lead);
  color: rgba(244, 246, 247, 0.72);
  max-width: 42ch;
}
.frame-dark__cta { margin-top: clamp(32px, 4vw, 48px); }

.benefit-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xl);
}

.benefit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  padding: var(--sp-3xl);
  border-radius: var(--r-xl);
  background: rgba(244, 246, 247, 0.06);
  border: 1px solid rgba(244, 246, 247, 0.1);
}

.benefit__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: rgba(244, 246, 247, 0.1);
}
.benefit__icon svg { width: 24px; height: 24px; }
.benefit__icon svg path { stroke: var(--on-dark); }

.benefit__title {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: 600;
}
.benefit__text {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: rgba(244, 246, 247, 0.66);
}

/* O bloco escuro carrega o encaminhamento de urgência: nada de ilustração
   competindo com ele. Só um halo verde-água muito baixo, para não virar
   uma caixa preta chapada. */
.frame-dark::after {
  content: '';
  position: absolute;
  right: -12%;
  bottom: -40%;
  z-index: 1;
  width: min(560px, 70%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(127, 181, 154, 0.18) 0%, rgba(127, 181, 154, 0) 68%);
  pointer-events: none;
}

/* ---------------------------------------------------------------
   11. Real people — 3 cards ilustrados
   --------------------------------------------------------------- */
.people__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3xl);
}

.people-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
  padding: var(--sp-3xl);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--inset-hairline);
  transition: transform var(--dur-base) var(--ease-brand);
}
.people-card:hover { transform: translateY(-4px); }

.people-card__illus {
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  background: var(--surface-warm);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.people-card__illus img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--sp-2xl);
}

.people-card__title {
  font-family: var(--font-body);
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.people-card__text {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------
   12. Stats — 50 states
   --------------------------------------------------------------- */
.states {
  position: relative;
  border-radius: var(--r-card);
  background: var(--brand);
  color: var(--on-dark);
  padding: clamp(40px, 6vw, 88px);
  overflow: hidden;
  isolation: isolate;
}

.states__map {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.states__map img { width: min(760px, 90%); opacity: 0.5; }

.states__inner { position: relative; z-index: 2; }

.states__title {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  max-width: 14ch;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.states__title em { color: var(--brand-soft); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3xl);
}

.stat { display: flex; flex-direction: column; gap: var(--sp-sm); }

.stat__num {
  font-family: var(--font-display);
  font-size: var(--t-stat);
  line-height: 1;
  letter-spacing: var(--ls-display);
}
.stat__label {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: rgba(244, 246, 247, 0.7);
  max-width: 22ch;
}

/* ---------------------------------------------------------------
   13. FAQ
   --------------------------------------------------------------- */
.faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.faq__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.faq-item { border-bottom: 1px solid var(--border); }

.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3xl);
  padding-block: var(--sp-3xl);
  text-align: left;
  font-size: var(--t-lead);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--fg);
  transition: color var(--dur-fast) var(--ease-snap);
}
.faq-item__q:hover { color: var(--brand); }

.faq-item__icon {
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
}
.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: rotate var(--dur-base) var(--ease-brand);
}
.faq-item__icon::after { rotate: 90deg; }
.faq-item[data-open='true'] .faq-item__icon::after { rotate: 0deg; }

/* Abertura animada sem medir altura em JS: 0fr → 1fr */
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--dur-base) var(--ease-brand);
}
.faq-item[data-open='true'] .faq-item__a { grid-template-rows: 1fr; }

.faq-item__a-inner {
  min-height: 0;   /* deixa a linha do grid encolher até zero */
  overflow: hidden;
  /* o padding não colapsa junto com a faixa 0fr — por isso ele também anima */
  padding-bottom: 0;
  padding-right: clamp(0px, 6vw, 56px);
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  transition: padding-bottom var(--dur-base) var(--ease-brand);
}
.faq-item[data-open='true'] .faq-item__a-inner { padding-bottom: var(--sp-3xl); }

/* ---------------------------------------------------------------
   14. Blog
   --------------------------------------------------------------- */
.posts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3xl);
}

.post { display: flex; flex-direction: column; gap: var(--sp-xl); }

.post__media {
  aspect-ratio: 3 / 2;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--surface-warm);
}
.post__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale var(--dur-slow) var(--ease-brand);
}
.post:hover .post__media img { scale: 1.05; }

.post__tag {
  align-self: flex-start;
  padding: 6px var(--sp-lg);
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand-deep);
  font-size: var(--t-xs);
  font-weight: 500;
}

.post__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  transition: color var(--dur-fast) var(--ease-snap);
}
.post:hover .post__title { color: var(--brand); }

/* ---------------------------------------------------------------
   15. CTA final
   --------------------------------------------------------------- */
.cta {
  position: relative;
  text-align: center;
  padding-block: clamp(88px, 11vw, 176px);
  overflow: hidden;
  isolation: isolate;
}

.cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3xl);
}

.cta__title {
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  max-width: 18ch;
}
.cta__lead {
  font-size: var(--t-lead);
  color: var(--fg-muted);
  max-width: 46ch;
}

/* As mesmas libélulas do hero, agora soltas nas margens do fecho. */
.cta__dragonfly {
  position: absolute;
  z-index: 1;
  width: clamp(72px, 9vw, 132px);
  filter: opacity(0.5);
  pointer-events: none;
}
.cta__dragonfly--l { left: 6%;  top: 20%;    rotate: -12deg; }
.cta__dragonfly--r { right: 8%; bottom: 22%; rotate: 14deg; }

/* ---------------------------------------------------------------
   16. Footer
   --------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--on-dark);
  padding-block: clamp(64px, 8vw, 112px) var(--sp-5xl);
  overflow: hidden;
  isolation: isolate;
}

.footer__top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.footer__brand { display: flex; flex-direction: column; gap: var(--sp-3xl); }
.footer__brand svg { width: 112px; height: auto; }
.footer__brand path { fill: var(--on-dark); }

.footer__tagline {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  max-width: 16ch;
}

.footer__social { display: flex; gap: var(--sp-lg); }
.footer__social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  border: 1px solid rgba(244, 246, 247, 0.2);
  transition:
    background-color var(--dur-fast) var(--ease-snap),
    border-color var(--dur-fast) var(--ease-snap);
}
.footer__social a:hover {
  background: rgba(244, 246, 247, 0.1);
  border-color: rgba(244, 246, 247, 0.5);
}
.footer__social svg { width: 20px; height: 20px; }

.footer-col__title {
  font-size: var(--t-xs);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  /* 0.5 dava 4.33:1 sobre o rodapé — abaixo do AA. 0.62 leva a 5.8:1. */
  color: rgba(244, 246, 247, 0.62);
  margin-bottom: var(--sp-xl);
}

.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-lg); }

.footer-col a {
  font-size: var(--t-sm);
  color: rgba(244, 246, 247, 0.8);
  transition: color var(--dur-fast) var(--ease-snap);
}
.footer-col a:hover { color: var(--on-dark); }

.footer__bottom {
  position: relative;
  z-index: 2;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: var(--sp-3xl);
  border-top: 1px solid rgba(244, 246, 247, 0.15);
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3xl);
  font-size: var(--t-xs);
  color: rgba(244, 246, 247, 0.6);
}

.footer__disclaimer {
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: rgba(244, 246, 247, 0.45);
  max-width: 92ch;
}

/* Linha legal — obrigação de conteúdo médico, sempre visível. */
.footer__medical {
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: rgba(244, 246, 247, 0.6);
  max-width: 92ch;
}
.footer__medical strong { color: rgba(244, 246, 247, 0.86); font-weight: 600; }

/* ---------------------------------------------------------------
   17. Estado inicial das animações
   Só aplicado quando o JS confirma suporte (classe no <html>),
   para que sem JS o conteúdo nunca fique invisível.
   --------------------------------------------------------------- */
/* Estado inicial do reveal: opacity 0 + translateY(60px) */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(60px);
}

/* Entrada do hero: linhas sobem juntas, mais curtas que o reveal de seção */
.js-motion [data-hero-line] {
  opacity: 0;
  transform: translateY(28px);
}

/* Céu do hero: névoa, nuvens e libélulas entram em cena (durações longas) */
.js-motion .sky__cloud,
.js-motion .cloud,
.js-motion .dragonfly {
  opacity: 0;
}

/* Rede de segurança: se o Motion não carregar, nada fica invisível */
html.motion-failed [data-reveal],
html.motion-failed [data-hero-line],
html.motion-failed .sky__cloud,
html.motion-failed .cloud,
html.motion-failed .dragonfly {
  opacity: 1 !important;
  transform: none !important;
}

/* ---------------------------------------------------------------
   18. Responsivo
   --------------------------------------------------------------- */

/* Tablet: 700px – 1199.98px */
@media (max-width: 1199.98px) {
  .steps,
  .people__grid,
  .posts { grid-template-columns: repeat(2, 1fr); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5xl) var(--sp-3xl); }

  .faq__layout { grid-template-columns: 1fr; }

  .footer__top { grid-template-columns: repeat(2, 1fr); }
  .footer__brand { grid-column: 1 / -1; }

  .nav { gap: var(--sp-2xl); }

  /* Hero — tablet */
  .hero { height: 100vh; min-height: 680px; }
  .hero__inner { width: 460px; padding-bottom: 80px; }
  .hero__title { font-size: 40px; }

  .swarm {
    left: 50%;
    bottom: 0;
    width: min-content;
    max-width: none;
  }
  .swarm__stage { width: 860px; height: 380px; }

  .dragonfly--1 { left: -18px;  bottom: -6px;  width: 196px; right: auto; }
  .dragonfly--2 { right: -12px; bottom: 6px;   width: 178px; left: auto; }
  .dragonfly--3 { left: 152px;  bottom: 48px;  width: 150px; right: auto; }
  .dragonfly--4 { right: 132px; bottom: 62px;  width: 132px; left: auto; }
  .dragonfly--5 { left: 34px;   bottom: 176px; width: 108px; right: auto; }
  .dragonfly--6 { right: 26px;  bottom: 194px; width: 98px;  left: auto; }
  .dragonfly--7 { left: 8px;    bottom: 288px; width: 68px;  right: auto; }
  .dragonfly--8 { right: 84px;  bottom: 308px; width: 58px;  left: auto; }

  /* Nuvens — tablet: mais largas e mais para fora, longe da coluna
     de texto (460px) e sempre abaixo dela. */
  .cloud--back-1  { left: -16%;  bottom: 10%; width: 36%; }
  .cloud--back-2  { right: -16%; bottom: 15%; width: 34%; }
  .cloud--mid-1   { left: -2%;   bottom: -4%; width: 56%; }
  .cloud--front-1 { right: -4%;  bottom: -8%; width: 52%; }
}

/* Mobile: ≤ 699.98px */
@media (max-width: 699.98px) {
  :root { --section-y: 64px; }

  /* No telefone a barra já nasce fosca — sobre o céu ela precisa de
     corpo para o nome do médico não brigar com as libélulas. */
  .header__bar {
    padding-inline: var(--sp-2xl);
    background: rgba(255, 255, 255, 0.74);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    box-shadow: var(--inset-hairline);
  }
  /* e por isso o texto dela é escuro mesmo por cima do hero */
  .header[data-onsky='true'][data-scrolled='false'] .header__bar { color: var(--fg); }
  .header[data-onsky='true'][data-scrolled='false'] .btn--nav {
    background: var(--ink);
    color: var(--on-dark);
  }

  /* Hero — telefone. O texto sobe, o enxame ocupa o terço de baixo. */
  .hero { height: auto; min-height: 100svh; padding-block: 132px 0; justify-content: flex-start; }
  /* O bloco do hero não tinha gutter no telefone: título e subtítulo
     encostavam na borda da tela (o par de botões tem largura própria e
     disfarçava). Mesma sarjeta das outras seções. */
  .hero__inner { width: 100%; gap: 22px; padding-inline: var(--gutter); padding-bottom: 340px; }
  .hero__title { font-size: 34px; }
  .hero__sub { font-size: 15px; }
  .hero__note { font-size: 0.8125rem; }
  .hero__cta-row { width: 100%; flex-direction: column; align-items: stretch; }
  .hero__cta-row .btn { justify-content: center; }

  .sky__cloud { height: 30%; filter: blur(10px); }

  .swarm {
    left: 50%;
    bottom: 0;
    width: min-content;
    max-width: none;
  }
  .swarm__stage { width: 392px; height: 330px; }

  .dragonfly--1 { left: -10px; bottom: -4px;  top: auto; width: 138px; right: auto; }
  .dragonfly--2 { right: -8px; bottom: 8px;   top: auto; width: 122px; left: auto; }
  .dragonfly--3 { left: 74px;  bottom: 74px;  top: auto; width: 104px; right: auto; }
  .dragonfly--4 { right: 66px; bottom: 92px;  top: auto; width: 92px;  left: auto; }
  .dragonfly--5 { left: 6px;   bottom: 178px; top: auto; width: 76px;  right: auto; }
  .dragonfly--6 { right: 4px;  bottom: 196px; top: auto; width: 68px;  left: auto; }
  .dragonfly--7 { left: 88px;  bottom: 252px; top: auto; width: 52px;  right: auto; }
  .dragonfly--8 { right: 96px; bottom: 272px; top: auto; width: 44px;  left: auto; }

  /* Nuvens — telefone: banco baixo, sempre abaixo do bloco de texto
     (que reserva 340px de rodapé). Elas continuam sendo o que dá
     profundidade — só ficam mais largas e mais lavadas. */
  /* As de fundo vivem bem abaixo do texto (12% e 22% do rodapé): a folga
     de contraste medida no telefone (5,06:1 contra o mínimo de 4,5) volta
     como presença das nuvens, não fica parada. */
  .cloud--back-1  { left: -26%;  bottom: 12%; width: 66%; filter: opacity(0.38) blur(2px); }
  .cloud--back-2  { right: -30%; bottom: 22%; width: 62%; filter: opacity(0.34) blur(2.4px); }
  .cloud--mid-1   { left: -18%;  bottom: -2%; width: 86%; filter: opacity(0.85) blur(0.6px); }
  .cloud--front-1 { right: -22%; bottom: -6%; width: 82%; filter: none; }

  /* No telefone o nome do médico precisa da linha inteira: a legenda do
     wordmark quebrava em três linhas, e o CTA da barra é redundante —
     o menu abre com ele dentro e o botão flutuante fica sempre à mão. */
  .logo__meta { display: none; }
  .header__actions .btn--nav { display: none; }

  /* Rótulo longo ("Ainda tem dúvida? Pergunte no WhatsApp") estourava a
     tela: no telefone o botão quebra em duas linhas em vez de vazar. */
  .btn {
    white-space: normal;
    max-width: 100%;
    text-align: left;
  }

  .nav,
  .header__actions .header__login { display: none; }

  .nav-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    color: inherit;
    background: none;
    border: 0;
  }
  .nav-toggle span {
    position: relative;
    display: block;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    transition: background-color var(--dur-fast) var(--ease-snap);
  }
  .nav-toggle span::before,
  .nav-toggle span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    transition: translate var(--dur-base) var(--ease-brand), rotate var(--dur-base) var(--ease-brand);
  }
  .nav-toggle span::before { translate: 0 -6px; }
  .nav-toggle span::after  { translate: 0 6px; }

  .nav-toggle[aria-expanded='true'] span { background: transparent; }
  .nav-toggle[aria-expanded='true'] span::before { translate: 0 0; rotate: 45deg; }
  .nav-toggle[aria-expanded='true'] span::after  { translate: 0 0; rotate: -45deg; }

  /* Painel mobile — abre abaixo da barra flutuante (12 + 68 + 12) */
  .mobile-nav {
    position: fixed;
    inset: 92px 0 0;
    z-index: 90;
    background: var(--on-dark);
    color: var(--ink);
    padding: var(--sp-3xl) var(--gutter) var(--sp-6xl);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    translate: 0 -8px;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--dur-base) var(--ease-brand),
      translate var(--dur-base) var(--ease-brand),
      visibility var(--dur-base) var(--ease-brand);
  }
  .mobile-nav[data-open='true'] {
    opacity: 1;
    translate: 0 0;
    visibility: visible;
  }
  .mobile-nav a {
    font-size: var(--t-body);
    color: var(--ink);
    padding-block: var(--sp-lg);
    border-bottom: 1px solid var(--border);
  }
  .mobile-nav__link {
    font-family: var(--font-display);
    font-size: var(--t-h4);
    letter-spacing: var(--ls-display);
  }
  .mobile-nav__label {
    margin-top: var(--sp-3xl);
    padding-bottom: var(--sp-sm);
    font-size: var(--t-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-caps);
    color: var(--fg-muted);
  }
  .mobile-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-3xl);
    margin-top: var(--sp-4xl);
  }
  .mobile-nav__actions a { border-bottom: 0; }
  .mobile-nav .btn { justify-content: center; }

  .steps,
  .people__grid,
  .posts,
  .stats-grid,
  .frame-dark__grid,
  .footer__top { grid-template-columns: 1fr; }

  .focus__grid { grid-template-columns: 1fr; }

  .section-head { align-items: flex-start; }

  .hero__title { max-width: 100%; }

  .frame-dark { border-radius: var(--r-xl); }
  .states     { border-radius: var(--r-xl); }

  .step__stats { flex-direction: column; gap: var(--sp-xl); }

  .footer__legal { gap: var(--sp-xl); }
}

/* ---------------------------------------------------------------
   19. prefers-reduced-motion — estado final, nada invisível
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js-motion [data-reveal],
  .js-motion [data-hero-line],
  .js-motion .sky__cloud,
  .js-motion .cloud,
  .js-motion .dragonfly {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------
   20. Componentes desta marca
   Tudo abaixo entra no mesmo sistema de movimento: data-reveal /
   data-stagger nos elementos, nada de animação própria.
   --------------------------------------------------------------- */

/* 20.1 Como funciona — quatro passos, sem mídia. O número é o índice
   do processo, não decoração: por isso ele carrega a cor da marca. */
.steps--plain {
  grid-template-columns: repeat(4, 1fr);
}
.steps--plain .step {
  background: var(--white);
  padding: var(--sp-4xl) var(--sp-3xl);
  gap: var(--sp-lg);
}
.steps--plain .step:hover { transform: none; }
.steps--plain .step__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  color: var(--brand);
}
.steps--plain .step__title {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.steps--plain .step__text {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* 20.2 Para quem é — reconhecimento, não venda. Traço verde-água à
   esquerda, texto corrido, nenhum ícone. */
.fit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3xl);
}
.fit {
  padding: var(--sp-3xl) var(--sp-3xl) var(--sp-3xl) var(--sp-2xl);
  border-left: 2px solid var(--sage);
  background: var(--white);
  border-radius: 0 var(--r-xl) var(--r-xl) 0;
  box-shadow: var(--inset-hairline);
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.fit strong { color: var(--fg); font-weight: 600; }

.section-close {
  margin-top: clamp(32px, 4vw, 48px);
  max-width: 52ch;
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
}

/* 20.3 Sem fricção — a alavanca da página: cada linha tira um motivo
   de não agendar. "Antes" recua; "Aqui" avança. */
.shift-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}
.shift {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sp-3xl) clamp(24px, 4vw, 64px);
  padding-block: var(--sp-4xl);
  border-bottom: 1px solid var(--border);
}
.shift__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
}
.shift__tag {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}
.shift__side--before .shift__tag { color: var(--fg-muted); }
.shift__side--after  .shift__tag { color: var(--sage-deep); }

.shift__text {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.shift__side--after .shift__text {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-display);
  color: var(--fg);
}

/* 20.4 Quem vai te atender — retrato real + texto + assinatura */
.about-split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.about-split__media {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface-warm);
  box-shadow: var(--inset-hairline);
}
.about-split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.about-split__body p {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 60ch;
}
.about-split__body p + p { margin-top: var(--sp-2xl); }
.about-split__body h2 { margin-bottom: var(--sp-3xl); }

.signature {
  margin-top: var(--sp-4xl);
  padding-top: var(--sp-3xl);
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand);
}

/* 20.5 Formação — lista de credenciais. Cada linha é uma afirmação
   verificável; nada aqui é adjetivo. */
.cred-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--border);
}
.cred {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding-block: var(--sp-3xl);
  border-bottom: 1px solid var(--border);
}
.cred__title {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}
.cred__text {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* 20.6 Condições atendidas — página O que trato */
.cond {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(24px, 4vw, 64px);
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--border);
  scroll-margin-top: 120px;
}
.cond__title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
}
.cond__body p {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: 62ch;
}

/* 20.7 Contato — canais reais, sem formulário */
.channels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3xl);
}
.channel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  padding: var(--sp-4xl);
  background: var(--white);
  border-radius: var(--r-card);
  box-shadow: var(--inset-hairline);
}
.channel__label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--brand);
}
.channel__num {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  color: var(--fg);
}
.channel__num a:hover { color: var(--brand); }
.channel__text {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}
.channel .btn { align-self: flex-start; margin-top: var(--sp-sm); }

.address {
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg);
}
.address__ref {
  margin-top: var(--sp-lg);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

/* 20.8 Urgência — nunca decorativo, sempre localizável */
.emergency {
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-card);
  background: var(--white);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--sage-deep);
}
.emergency__title {
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 600;
  letter-spacing: var(--ls-display);
  margin-bottom: var(--sp-xl);
}
.emergency p {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  max-width: 62ch;
}
.emergency__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  margin: var(--sp-3xl) 0;
}
.emergency__lines li {
  font-size: var(--t-body);
  font-weight: 500;
  color: var(--fg);
}
.emergency__lines a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* 20.9 Botão flutuante do WhatsApp */
.wa-fab {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 14px 20px;
  border-radius: var(--r-pill);
  background: var(--sage);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: 600;
  box-shadow: 0 8px 28px rgba(34, 48, 58, 0.22);
  transition:
    background-color var(--dur-fast) var(--ease-snap),
    translate var(--dur-fast) var(--ease-snap);
}
.wa-fab:hover { background: #93c2aa; translate: 0 -2px; }
.wa-fab svg { flex: none; width: 20px; height: 20px; }

/* 20.10 Nota legal do rodapé do CTA */
.cta__address {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  max-width: 52ch;
}

/* --------------------------- responsivo --------------------------- */
@media (max-width: 1199.98px) {
  .proof__grid   { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4xl) var(--sp-3xl); }
  .steps--plain  { grid-template-columns: repeat(2, 1fr); }
  .fit-grid      { grid-template-columns: repeat(2, 1fr); }
  .about-split   { grid-template-columns: 1fr; }
  .about-split__media { max-width: 420px; }
  .cred-list     { grid-template-columns: 1fr; }
  .cond          { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  .channels      { grid-template-columns: 1fr; }
}

@media (max-width: 699.98px) {
  .proof__grid,
  .steps--plain,
  .fit-grid { grid-template-columns: 1fr; }

  .shift { grid-template-columns: 1fr; gap: var(--sp-xl); padding-block: var(--sp-3xl); }

  /* Pílula, não barra: em largura total o botão virava uma tarja sobre o
     enxame do hero. Alvo de toque continua com 48px de altura. */
  .wa-fab {
    right: var(--sp-xl);
    bottom: var(--sp-xl);
    padding: 13px 18px;
  }
  /* o botão flutuante não pode cobrir o fim da página */
  body { padding-bottom: 0; }
  .footer { padding-bottom: 96px; }
}

/* ---------------------------------------------------------------
   21. Pilares — três cards editoriais
   Card branco, ilustração de fundo transparente sobre um painel
   claro da paleta, título curto e uma ou duas linhas de apoio.
   --------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.pillar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2xl);
  padding: var(--sp-2xl);
  border-radius: var(--r-card);
  background: var(--white);
  box-shadow: var(--inset-hairline);
  transition:
    translate var(--dur-fast) var(--ease-snap),
    box-shadow var(--dur-fast) var(--ease-snap);
}
.pillar:hover {
  translate: 0 -3px;
  box-shadow:
    0 14px 32px rgba(62, 110, 142, 0.14),
    var(--inset-hairline);
}

/* O painel é o que faz a ilustração respirar: cor clara da paleta,
   nunca branco sobre branco. A do meio puxa o verde-água — é a que
   fala de acupuntura e ortomolecular. */
.pillar__art {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: var(--sp-3xl);
  border-radius: var(--r-2xl);
  background: var(--brand-soft);
  overflow: hidden;
}
.pillar:nth-child(2) .pillar__art {
  background: color-mix(in srgb, var(--sage) 22%, var(--white));
}
.pillar__art img {
  width: auto;
  max-width: 82%;
  max-height: 100%;
  object-fit: contain;
  transition: scale var(--dur-base) var(--ease-brand);
}
.pillar:hover .pillar__art img { scale: 1.05; }

.pillar__title {
  font-family: var(--font-display);
  font-size: var(--t-h5);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  text-wrap: balance;
}
.pillar__text {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------
   22. Grade de pílulas — áreas de atendimento
   Nome à esquerda, seta à direita, sombra hairline. O hover eleva a
   pílula e faz a seta avançar. A pílula de ênfase é azul da marca —
   nunca preta.
   --------------------------------------------------------------- */
/* Auto-fill em vez de três colunas fixas: com 1280px de container a
   pílula ficava com 600px e a seta a meio metro do nome. */
.pill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-lg);
}

.pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-xl);
  min-height: 64px;
  padding: 18px 24px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--fg);
  text-decoration: none;
  box-shadow:
    0 1px 2px rgba(34, 48, 58, 0.05),
    var(--inset-hairline);
  transition:
    translate var(--dur-fast) var(--ease-snap),
    box-shadow var(--dur-fast) var(--ease-snap),
    background-color var(--dur-fast) var(--ease-snap);
}
.pill__name {
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.pill__arrow {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--brand);
  transition: translate var(--dur-fast) var(--ease-snap);
}

a.pill:hover {
  translate: 0 -3px;
  box-shadow:
    0 12px 26px rgba(62, 110, 142, 0.16),
    var(--inset-hairline);
}
a.pill:hover .pill__arrow { translate: 5px 0; }

/* "& mais": só o contorno tracejado — é a promessa de que a lista
   continua, não um destino. */
.pill--more {
  justify-content: center;
  background: transparent;
  border: 1.5px dashed var(--border-strong);
  box-shadow: none;
  color: var(--fg-muted);
}

/* A pílula de ênfase: azul da marca, texto claro (5,0:1 — passa AA). */
.pill--cta {
  background: var(--brand);
  color: var(--on-dark);
  box-shadow: none;
}
.pill--cta .pill__arrow { color: currentColor; }
a.pill--cta:hover {
  background: var(--brand-deep);
  box-shadow: 0 12px 26px rgba(62, 110, 142, 0.24);
}

/* Tablet: dois de cada — nome longo não pode espremer a seta. */
@media (max-width: 1199.98px) {
  .pillars   { grid-template-columns: repeat(3, 1fr); gap: var(--sp-xl); }
  .pillar    { padding: var(--sp-xl); gap: var(--sp-xl); }
  .pill-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* Telefone: uma coluna. A pílula continua com 64px de alvo de toque. */
@media (max-width: 699.98px) {
  .pillars   { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  .pill-grid { grid-template-columns: 1fr; gap: var(--sp-md); }
  .pill__name { font-size: 1.0625rem; }
  .pill      { padding: 18px 22px; }
}