/* =============================================================
   Patrícia Spessi — sistema de layout e componentes
   Depende de: tokens.css, fonts.css

   A arquitetura (grid, ritmo vertical, camadas do hero, gramática
   de movimento) veio de um template maduro e foi preservada.
   A identidade — cor, tipografia, silhueta, conteúdo — é toda desta
   marca. Zero itálico. Zero serifa. Zero emoji.
   ============================================================= */

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

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

/* Itálico é proibido neste site. Rede de segurança contra qualquer
   inclinação vinda de user-agent, <em>, <i>, <cite> ou <address>. */
em, i, cite, address, blockquote { font-style: normal; }

:focus-visible {
  outline: 2px solid var(--teal);
  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(--paper);
  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;
}

/* A ênfase do display é feita por COR e PESO — nunca por inclinação. */
.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(--teal);
}

/* ---------------------------------------------------------------
   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--warm { background: var(--paper-warm); }

.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: 44ch; }
.section-head__text .lead { margin-top: var(--sp-xl); }

/* Ilustração de seção: aquarela na paleta da marca, sem moldura, sem caixa.
   Ela apoia o cabeçalho — nunca compete com ele. Decorativa de verdade:
   fica fora da árvore de acessibilidade. */
.section-head__art {
  flex: none;
  width: clamp(150px, 20vw, 230px);
  height: auto;
  align-self: flex-end;
  margin-bottom: -8px;
  pointer-events: none;
}

.faq__art {
  display: block;
  width: clamp(170px, 22vw, 250px);
  height: auto;
  margin-top: var(--sp-6xl);
  pointer-events: none;
}

/* Filete de latão: o único ornamento do site. Nunca carrega texto. */
.rule-gold {
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

/* ---------------------------------------------------------------
   4. Botões e links
   --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  padding: 16px 20px;
  border-radius: var(--r-lg);
  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);
}

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

.btn--primary {
  background: var(--teal);        /* 5.5:1 com o rótulo em --paper */
  color: var(--paper);
}
.btn--primary:hover { background: var(--teal-ink); }

.btn--light {
  background: var(--white);
  color: var(--teal);             /* 5.8:1 sobre branco */
  box-shadow: var(--inset-hairline);
}
.btn--light:hover { background: var(--paper-soft); }

.btn--outline {
  background: transparent;
  color: var(--fg);
  box-shadow: 0 0 0 1px var(--border-strong) inset;
}
.btn--outline:hover { background: var(--white); }

/* Botão claro sobre o céu escuro do hero */
.btn--ghost-sky {
  background: transparent;
  color: var(--paper);
  box-shadow: 0 0 0 1px rgba(250, 247, 240, 0.45) inset;
}
.btn--ghost-sky:hover { background: rgba(250, 247, 240, 0.12); }

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

.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(--teal);
}
.link-arrow svg { width: 16px; height: 16px; transition: translate var(--dur-fast) var(--ease-snap); }
.link-arrow svg path { stroke: currentColor; }
.link-arrow:hover { color: var(--teal-ink); }
.link-arrow:hover svg { translate: 4px 0; }

/* ---------------------------------------------------------------
   5. Header
   --------------------------------------------------------------- */
.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);
}

.header[data-scrolled='true'] .header__bar {
  background: rgba(250, 247, 240, 0.72);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  box-shadow: var(--inset-hairline);
}

/* Sobre o céu do hero, antes de rolar: tudo em papel claro */
.header[data-onsky='true'][data-scrolled='false'] .header__bar { color: var(--paper); }

/* ---- Marca ---- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-md);
  color: inherit;
}
.logo__mark { width: 28px; height: 28px; flex: none; }
.logo__word {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.logo__name {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  white-space: nowrap;
}
.logo__role {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.72;
}

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

.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;
  white-space: nowrap;
  color: inherit;
  padding-block: 8px;
}

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

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

.btn--nav {
  background: var(--teal);
  color: var(--paper);
  padding: 12px 18px;
}
.btn--nav:hover { background: var(--teal-ink); }
.header[data-onsky='true'][data-scrolled='false'] .btn--nav {
  background: var(--paper);
  color: var(--teal-deep);
}
.header[data-onsky='true'][data-scrolled='false'] .btn--nav:hover { background: var(--white); }

.nav-toggle { display: none; }
.mobile-nav { display: none; }

/* ---------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------- */
.hero {
  position: relative;
  height: 110vh;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

/* z0 — o céu da marca */
.sky {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 101%;
  /* Os dois extremos são os da marca. As paradas do meio existem para
     que o céu só comece a clarear depois que o texto termina: com uma
     rampa linear, o subtítulo cairia sobre um verde claro demais e o
     contraste morreria por volta da metade da tela. */
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    #235754 46%,
    #2a6663 62%,
    #35726f 74%,
    #5c9994 82%,
    #a8c9c4 90%,
    var(--sky-bottom) var(--sky-stop)
  );
  pointer-events: none;
}

/* z1 — a névoa: luz difusa subindo do rodapé, em CSS puro.
   Ocupa o lugar da faixa de nuvens do template; mesma camada, mesmo
   parallax, sem nenhum asset herdado.                              */
.sky__haze {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -18%;
  height: 78%;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
  background:
    radial-gradient(72% 62% at 62% 100%, rgba(250, 247, 240, 0.92) 0%, rgba(250, 247, 240, 0) 68%),
    radial-gradient(58% 48% at 22% 96%, rgba(214, 228, 224, 0.78) 0%, rgba(214, 228, 224, 0) 70%);
}

/* z1 / z3 — as nuvens.
   A ilustração já vem na paleta da marca; a distância só a lava. Sem
   recolorir, sem cinza. A transparência de repouso mora em `filter:
   opacity()` e nunca na propriedade `opacity` — o Motion anima `opacity`
   de 0 a 1 na entrada de cada nuvem e sobrescreveria qualquer valor posto
   ali. O filtro multiplica por fora, e as duas coisas convivem.        */
.clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.clouds--back { z-index: 1; }
.clouds--fore { z-index: 3; }

.cloud {
  position: absolute;
  will-change: transform;
  --sway: 0;            /* nuvem não gira: a deriva dela é só vertical */
}

/* Frente — grandes, nítidas, no horizonte, longe da coluna de texto. */
.cloud--1 { left: -8%;  bottom: 1%;  width: clamp(280px, 33vw, 520px); }
.cloud--3 { right: -6%; bottom: 13%; width: clamp(230px, 26vw, 420px); filter: opacity(0.9); }

/* Fundo — menores, lavadas no céu escuro, fora de foco e quase paradas. */
.cloud--2 { left: -7%;  top: 13%; width: clamp(180px, 21vw, 340px); filter: opacity(0.4) blur(2px); }
.cloud--4 { right: -4%; top: 8%;  width: clamp(150px, 17vw, 270px); filter: opacity(0.3) blur(3px); }

/* z2 — o bando de páginas: palco largo e baixo.
   O que sobe até a altura do texto fica preso às bordas; o miolo do palco
   só recebe folha abaixo da linha dos botões. */
.sheets {
  position: absolute;
  z-index: 2;
  bottom: 24px;
  left: 50%;
  translate: -50% 0;
  width: 100%;
  max-width: 1280px;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.sheets__stage {
  position: relative;
  width: 1180px;
  height: 470px;
  flex: none;
}

/* Cada folha tem três animações simultâneas, cada uma numa propriedade
   diferente para não brigarem:
     entrada  → opacity
     parallax → transform  (preso ao scroll, escrito pelo Motion)
     deriva   → translate + rotate  (propriedades individuais)
   O ângulo de repouso mora em --tilt e é lido pelo JS, que o usa como
   ponto de partida e de chegada da oscilação. Sem --tilt, o papel
   ficaria reto no ar — e papel não fica reto no ar.                 */
.sheet {
  position: absolute;
  will-change: transform;
  rotate: var(--tilt, 0deg);
}

/* Sem sombra. Uma folha em pleno ar não tem em que projetar sombra — e o
   cinza da sombra sujava o céu da marca. O que afasta uma página do olho
   é ficar menor, mais lavada, mais fora de foco e passar por trás de uma
   nuvem. O empilhamento é explícito (z-index) porque a ordem do DOM já
   serve à deriva, não à profundidade.

   A opacidade de repouso vai em `filter: opacity()` — a propriedade
   `opacity` pertence à animação de entrada.

   Centragem por margem, nunca por translate: a deriva é dona dessa
   propriedade e apagaria o -50%. */

/* Perto — grandes, nítidas, opacas. */
.sheet--1  { left: 0;     bottom: 0;     width: 218px; --tilt: -7deg;  z-index: 9; }
.sheet--2  { right: 10px; bottom: 20px;  width: 202px; --tilt: 6deg;   z-index: 8; }
.sheet--3  { left: 44%;   bottom: -10px; width: 172px; margin-left: -86px; --tilt: -3deg; z-index: 7; }

/* Meio — perdem tamanho e começam a ganhar névoa. */
.sheet--4  { left: 19%;   bottom: 118px; width: 148px; --tilt: 9deg;   z-index: 6; filter: opacity(0.94); }
.sheet--5  { right: 13%;  bottom: 84px;  width: 128px; --tilt: -8deg;  z-index: 5; filter: opacity(0.88); }
.sheet--6  { left: 60%;   bottom: 60px;  width: 120px; --tilt: 5deg;   z-index: 4; filter: opacity(0.8) blur(0.4px); }

/* Fundo — pequenas, lavadas, fora de foco. Sobem até a altura do texto,
   por isso ficam presas às bordas do palco. */
.sheet--7  { left: 1%;    bottom: 258px; width: 106px; --tilt: -12deg; z-index: 3; filter: opacity(0.68) blur(0.8px); }
.sheet--8  { right: 0;    bottom: 296px; width: 92px;  --tilt: 11deg;  z-index: 2; filter: opacity(0.58) blur(1.1px); }
.sheet--9  { left: 9%;    bottom: 366px; width: 74px;  --tilt: -5deg;  z-index: 1; filter: opacity(0.46) blur(1.4px); }
.sheet--10 { right: 8%;   bottom: 392px; width: 64px;  --tilt: 13deg;  z-index: 1; filter: opacity(0.38) blur(1.7px); }

/* z5 — o texto */
.hero__inner {
  position: relative;
  z-index: 5;
  width: 640px;
  max-width: 100%;
  padding-bottom: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-3xl);
  color: var(--paper);
}

.hero__title {
  font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.5rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--paper);
  text-wrap: balance;
}
/* Sobre o céu escuro, a ênfase é peso — a cor teal não teria contraste. */
.hero__title em {
  color: var(--paper);
  font-weight: 700;
  border-bottom: 2px solid var(--gold-soft);
  padding-bottom: 1px;
}

.hero__sub {
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: rgba(250, 247, 240, 0.86);   /* 7.1:1 sobre o topo do céu */
  max-width: 52ch;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-lg);
}

.hero__micro {
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  /* 14px é texto pequeno: precisa de 4.5:1 medido, não estimado. A 0.8 de
     opacidade ele reprovava (3.56:1) na faixa em que o céu já clareia. */
  color: rgba(250, 247, 240, 0.92);
  max-width: 46ch;
}

/* ---------------------------------------------------------------
   7. Faixa de credibilidade
   --------------------------------------------------------------- */
.proof {
  padding-block: clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--border);
}

.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-top: var(--sp-xl);
  border-top: 2px solid var(--gold);
}

.proof__title {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
.proof__item:first-child .proof__title {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  letter-spacing: 0.02em;
  color: var(--teal);
}
.proof__text {
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------
   8. Como funciona — 4 passos
   --------------------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-3xl);
}

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

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

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

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

/* ---------------------------------------------------------------
   9. Talvez você se reconheça aqui — lista editorial
   --------------------------------------------------------------- */
.recog__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(40px, 6vw, 96px);
  border-top: 1px solid var(--border);
}

.recog__item {
  padding-block: clamp(24px, 3vw, 34px);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: var(--t-h4);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  max-width: 34ch;
}

.recog__close {
  margin-top: clamp(40px, 5vw, 64px);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--teal);
  max-width: 30ch;
}

/* ---------------------------------------------------------------
   10. Bloco escuro — o que eu tiro do seu caminho
   --------------------------------------------------------------- */
.frame-dark {
  position: relative;
  border-radius: var(--r-card);
  background: var(--ink);
  color: var(--paper);
  padding: clamp(40px, 6vw, 80px);
  overflow: hidden;
  isolation: isolate;
}

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

.frame-dark__title {
  font-size: var(--t-h2);
  line-height: var(--lh-tight);
  max-width: 15ch;
}
.frame-dark__title em { color: var(--gold-soft); font-weight: 700; }

.frame-dark__lead {
  margin-top: var(--sp-3xl);
  font-size: var(--t-lead);
  color: var(--fg-on-dark-muted);
  max-width: 34ch;
}
.frame-dark__cta { margin-top: clamp(32px, 4vw, 48px); }

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

.benefit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
  padding: var(--sp-3xl);
  border-radius: var(--r-xl);
  background: rgba(250, 247, 240, 0.05);
  border: 1px solid rgba(250, 247, 240, 0.12);
}

.benefit__title {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
}
.benefit__text {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-on-dark-muted);
}

/* ---------------------------------------------------------------
   11. O que eu faço — grade de pílulas
   Cada área é uma porta, não um cartão: nome à esquerda, seta à
   direita, respiro no meio. O texto longo de cada uma mora em
   service.html — aqui a leitura é de varredura, não de leitura.
   --------------------------------------------------------------- */
.pills {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-xl);
}

.pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3xl);
  min-height: 76px;
  padding: var(--sp-2xl) var(--sp-3xl);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: var(--inset-hairline), 0 1px 2px rgba(23, 33, 31, 0.04);
  color: var(--fg);
  transition:
    transform var(--dur-fast) var(--ease-brand),
    box-shadow var(--dur-fast) var(--ease-brand),
    background-color var(--dur-fast) var(--ease-brand),
    border-color var(--dur-fast) var(--ease-brand),
    color var(--dur-fast) var(--ease-brand);
}

.pill__label {
  font-family: var(--font-display);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-wrap: pretty;
}

.pill__arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--teal);
  transition: translate var(--dur-fast) var(--ease-snap);
}
.pill__arrow path { stroke: currentColor; }

.pill:hover {
  transform: translateY(-2px);
  background: var(--paper-soft);
  box-shadow: var(--inset-hairline), 0 14px 30px rgba(23, 33, 31, 0.09);
}
.pill:hover .pill__arrow { translate: 4px 0; }

/* "& mais" — a pílula que não promete nada: tracejada, sem preenchimento. */
.pill--more {
  justify-content: center;
  background: transparent;
  border: 1px dashed var(--border-strong);
  box-shadow: none;
  color: var(--fg-muted);
}
.pill--more:hover {
  background: transparent;
  border-color: var(--teal);
  box-shadow: none;
  color: var(--teal);
}

/* Ênfase — cor da marca, nunca preto. Paper sobre teal mede 5.5:1. */
.pill--emph {
  background: var(--teal);
  box-shadow: none;
  color: var(--paper);
}
.pill--emph .pill__arrow { color: currentColor; }
.pill--emph:hover {
  background: var(--teal-ink);
  box-shadow: 0 14px 30px rgba(46, 111, 107, 0.26);
  color: var(--paper);
}

/* ---------------------------------------------------------------
   12. O consultório — duas fotos reais
   --------------------------------------------------------------- */
.room__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3xl);
}
.room__figure { margin: 0; }
.room__figure img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--inset-hairline);
}
.room__figure figcaption {
  margin-top: var(--sp-lg);
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
}

/* ---------------------------------------------------------------
   13. Quem vai te escutar
   --------------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.about__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-card);
  box-shadow: var(--inset-hairline);
}

.about__body { display: flex; flex-direction: column; gap: var(--sp-3xl); }
.about__body h2 { max-width: 16ch; }
.about__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-xl);
  font-size: var(--t-body);
  line-height: 1.62;
  color: var(--fg-muted);
  max-width: 56ch;
}

.about__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5xl);
  padding-top: var(--sp-3xl);
  border-top: 1px solid var(--border);
}
.stat { display: flex; flex-direction: column; gap: var(--sp-xs); }
.stat__num {
  font-family: var(--font-display);
  font-size: var(--t-stat);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--ls-display);
  color: var(--teal);
}
.stat__label {
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: var(--fg-muted);
  max-width: 22ch;
}
.stat__num--mono {
  font-family: var(--font-mono);
  font-size: var(--t-h4);
  letter-spacing: 0;
}

/* ---------------------------------------------------------------
   14. FAQ
   --------------------------------------------------------------- */
.faq__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  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-family: var(--font-display);
  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(--teal); }

.faq-item__icon {
  flex: none;
  position: relative;
  width: 20px;
  height: 20px;
  color: var(--teal);
}
.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;
  overflow: hidden;
  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); }

/* ---------------------------------------------------------------
   15. CTA final
   --------------------------------------------------------------- */
.cta {
  position: relative;
  background: var(--teal-deep);
  color: var(--paper);
  padding-block: clamp(80px, 10vw, 152px);
  overflow: hidden;
  isolation: isolate;
}

.cta__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: 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);
  line-height: var(--lh-relaxed);
  color: var(--fg-on-dark-muted);
  max-width: 52ch;
}
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-lg);
  margin-top: var(--sp-sm);
}
.cta__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 16px 20px;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  color: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: 0 0 0 1px rgba(250, 247, 240, 0.35) inset;
  transition: background-color var(--dur-fast) var(--ease-snap);
}
.cta__phone:hover { background: rgba(250, 247, 240, 0.12); }

.cta__support {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-on-dark-muted);
  max-width: 54ch;
}

/* Linha de segurança — obrigatória, sempre visível, nunca decorada. */
.safety {
  margin-top: var(--sp-2xl);
  padding: var(--sp-xl) var(--sp-3xl);
  max-width: 62ch;
  border-radius: var(--r-lg);
  border: 1px solid rgba(250, 247, 240, 0.3);
  background: rgba(14, 22, 21, 0.28);
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: var(--paper);
}
.safety strong { font-weight: 600; }

/* Variante em fundo claro (páginas internas) */
.safety--light {
  border-color: var(--border-strong);
  background: var(--paper-warm);
  color: var(--fg);
}

/* ---------------------------------------------------------------
   16. Footer
   --------------------------------------------------------------- */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(64px, 8vw, 104px) var(--sp-4xl);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(32px, 4vw, 64px);
}

.footer__brand { display: flex; flex-direction: column; gap: var(--sp-3xl); align-items: flex-start; }
.footer__brand .logo__mark { width: 34px; height: 34px; color: var(--gold-soft); }
.footer__brand .logo__name { font-size: 1.25rem; }

.footer__tagline {
  font-size: var(--t-sm);
  line-height: var(--lh-loose);
  color: var(--fg-on-dark-muted);
  max-width: 34ch;
}
.footer__crp {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--gold-soft);
}

.footer-col__title {
  font-size: var(--t-xs);
  font-family: var(--font-mono);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(250, 247, 240, 0.56);
  margin-bottom: var(--sp-xl);
}

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

.footer-col a,
.footer-col li {
  font-size: var(--t-sm);
  line-height: var(--lh-relaxed);
  color: var(--fg-on-dark-muted);
}
.footer-col a { transition: color var(--dur-fast) var(--ease-snap); }
.footer-col a:hover { color: var(--paper); }

.footer__emergency {
  margin-top: clamp(48px, 6vw, 72px);
  padding: var(--sp-xl) var(--sp-3xl);
  border-radius: var(--r-lg);
  border: 1px solid rgba(250, 247, 240, 0.22);
  font-size: var(--t-xs);
  line-height: var(--lh-loose);
  color: var(--paper);
}

.footer__bottom {
  margin-top: var(--sp-4xl);
  padding-top: var(--sp-3xl);
  border-top: 1px solid rgba(250, 247, 240, 0.15);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-lg) var(--sp-3xl);
  font-size: var(--t-xs);
  color: rgba(250, 247, 240, 0.62);
}
.footer__bottom a { transition: color var(--dur-fast) var(--ease-snap); }
.footer__bottom a:hover { color: var(--paper); }

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

.js-motion [data-hero-line] {
  opacity: 0;
  transform: translateY(28px);
}

.js-motion .sky__haze,
.js-motion .sheet,
.js-motion .cloud {
  opacity: 0;
}

html.motion-failed [data-reveal],
html.motion-failed [data-hero-line],
html.motion-failed .sky__haze,
html.motion-failed .sheet,
html.motion-failed .cloud {
  opacity: 1 !important;
  transform: none !important;
}

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

/* Tablet: 700px – 1199.98px */
@media (max-width: 1199.98px) {
  .proof__grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-4xl) var(--sp-3xl); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .pills { grid-template-columns: repeat(2, 1fr); }
  .frame-dark__grid { grid-template-columns: 1fr; }
  .benefit-list { grid-template-columns: repeat(2, 1fr); }
  .faq__layout { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .about__media { max-width: 420px; }

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

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

  /* Hero — tablet. O palco não encolhe na mesma proporção que a tela:
     em 900px as folhas invadiam a coluna de texto. Aqui elas descem
     para a faixa livre abaixo dos botões, e o texto sobe para caber. */
  .hero { height: 100vh; min-height: 860px; }
  .hero__inner { width: 520px; padding-bottom: 300px; }

  .sheets {
    left: 50%;
    right: auto;
    bottom: -16px;
    width: min-content;
    max-width: none;
    translate: -50% 0;
  }
  .sheets__stage { width: 780px; height: 420px; }

  .sheet--1  { left: 0;    bottom: 0;     width: 172px; }
  .sheet--2  { right: 0;   bottom: 14px;  width: 160px; }
  .sheet--3  { left: 44%;  bottom: -8px;  width: 138px; margin-left: -69px; }
  .sheet--4  { left: 17%;  bottom: 104px; width: 118px; }
  .sheet--5  { right: 18%; bottom: 122px; width: 110px; }
  .sheet--6  { left: 60%;  bottom: 56px;  width: 96px; }
  .sheet--7  { left: 1%;   bottom: 222px; width: 84px; }
  .sheet--8  { right: 1%;  bottom: 252px; width: 74px; }
  .sheet--9  { left: 12%;  bottom: 310px; width: 60px; }
  .sheet--10 { right: 10%; bottom: 330px; width: 52px; }

  .cloud--1 { left: -14%; bottom: 0;   width: clamp(240px, 36vw, 380px); }
  .cloud--3 { right: -12%; bottom: 9%; width: clamp(200px, 30vw, 320px); }
  .cloud--2 { left: -12%; top: 10%;   width: clamp(160px, 26vw, 260px); }
  .cloud--4 { right: -8%; top: 6%;    width: clamp(140px, 22vw, 220px); }
}

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

  .header__bar {
    padding-inline: var(--sp-2xl);
    background: rgba(250, 247, 240, 0.78);
    backdrop-filter: blur(24px) saturate(1.2);
    -webkit-backdrop-filter: blur(24px) saturate(1.2);
    color: var(--fg);
  }
  .header[data-onsky='true'][data-scrolled='false'] .header__bar { color: var(--fg); }
  .header[data-onsky='true'][data-scrolled='false'] .btn--nav {
    background: var(--teal);
    color: var(--paper);
  }

  /* No telefone as folhas não passam por trás do texto: o hero reserva
     uma faixa embaixo só para elas. Sobreposto, o bando disputava o
     mesmo pixel dos botões e ninguém lia nada. */
  .hero {
    height: auto;
    min-height: 0;
    justify-content: flex-start;
    padding-block: 128px 272px;
  }
  /* O hero__inner é filho direto do palco, não do container: no telefone
     ele precisa da própria goteira, senão o texto encosta na borda. */
  .hero__inner { width: 100%; gap: var(--sp-2xl); padding: 0 var(--gutter); }
  .hero__title { font-size: 2.125rem; }
  .hero__sub { font-size: 0.9375rem; }
  .hero__micro { color: rgba(250, 247, 240, 0.9); }
  .hero__cta { width: 100%; flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }

  .sheets {
    left: 50%;
    top: auto;
    right: auto;
    bottom: 6px;
    width: min-content;
    max-width: none;
    translate: -50% 0;
  }
  .sheets__stage { width: 360px; height: 260px; }

  .sheet--1  { left: 0;    bottom: 0;     width: 104px; }
  .sheet--2  { right: 0;   bottom: 10px;  width: 96px; }
  .sheet--3  { left: 46%;  bottom: -6px;  width: 84px; margin-left: -42px; }
  .sheet--4  { left: 14%;  bottom: 74px;  width: 72px; }
  .sheet--5  { right: 16%; bottom: 86px;  width: 66px; }
  .sheet--6  { left: 62%;  bottom: 40px;  width: 58px; }
  .sheet--7  { left: 2%;   bottom: 150px; width: 52px; }
  /* Em 390px o bando inteiro vira ruído: o fundo do fundo sai de cena. */
  .sheet--8,
  .sheet--9,
  .sheet--10 { display: none; }

  /* A coluna de texto ocupa a largura toda no telefone — nuvem clara atrás
     de texto claro derruba o contraste. Só ficam as duas do horizonte, na
     faixa reservada abaixo dos botões. */
  .cloud--1 { left: -24%; bottom: 0;  width: 240px; }
  .cloud--3 { right: -22%; bottom: 7%; width: 190px; }
  .cloud--2,
  .cloud--4 { display: none; }

  /* No telefone a ilustração desce para baixo do cabeçalho e encolhe:
     é apoio, não protagonista. */
  .section-head__art { width: 132px; align-self: flex-start; margin-bottom: 0; }
  .faq__art { width: 150px; margin-top: var(--sp-4xl); }

  /* O papel-timbrado do cabeçalho não cabe em 390px: some o subtítulo. */
  .logo__role { display: none; }
  .logo__name { font-size: 1rem; }
  /* Logo + CTA + hambúrguer não cabem em 390px sem estourar a pílula.
     O CTA continua a um toque de distância: está no menu e no hero. */
  .btn--nav { display: none; }
}

/* O menu vira hambúrguer bem antes do telefone: os cinco rótulos em
   português são longos e já estouravam a pílula em 900px. */
@media (max-width: 1023.98px) {
  .nav { display: none; }

  .nav-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-right: -10px;
    color: inherit;
  }
  .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(--paper);
    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-family: var(--font-display);
    font-size: var(--t-h4);
    font-weight: 500;
    letter-spacing: var(--ls-display);
    color: var(--ink);
    padding-block: var(--sp-xl);
    border-bottom: 1px solid var(--border);
  }
  .mobile-nav__actions { margin-top: var(--sp-4xl); }
  .mobile-nav__actions a {
    border-bottom: 0;
    font-family: var(--font-body);
    font-size: var(--t-sm);
  }
  .mobile-nav .btn { justify-content: center; }
}

/* Volta ao telefone: tudo em coluna única. */
@media (max-width: 699.98px) {
  .proof__grid,
  .steps,
  .recog__list,
  .benefit-list,
  .room__grid,
  .footer__top { grid-template-columns: 1fr; }

  /* Pílulas no telefone: uma coluna. "Psicoterapia de adolescentes" em
     duas colunas de 360px vira duas linhas apertadas — e o pedido é
     justamente que o texto nunca aperte. */
  .pills { grid-template-columns: 1fr; gap: var(--sp-lg); }
  .pill { min-height: 64px; padding: var(--sp-xl) var(--sp-3xl); }

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

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

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

  .cta__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .cta__actions .btn,
  .cta__phone { justify-content: center; }
}

/* ---------------------------------------------------------------
   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__haze,
  .js-motion .sheet {
    opacity: 1 !important;
    transform: none !important;
  }
}