/* ══════════════════════════════════════════════════════════════════════
   benefisa · cluster /app · componentes exclusivos
   Herda tokens de colors_and_type.css e componentes editoriais de blog.css.
   Carregado por /app, /app/cursos e /app/clube-de-vantagens.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── hero ─── */
.app-hero {
  /* padding-block: o shorthand `padding: X 0` zeraria o padding-inline do
     .wrap e encostaria o h1 na borda em qualquer janela <=1188px. */
  padding-block: 104px 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  /* `center` alinhava a coluna de texto (curta) contra o celular (612px),
     sobrando faixa morta acima E abaixo do texto — era o que dava ao hero
     cara de template. Ancorado no topo, o vazio que resta fica ABAIXO do
     texto, onde ninguém lê como defeito, e o aparelho sangra pro bloco
     seguinte em vez de flutuar no meio de nada. */
  align-items: start;
}
.app-hero-copy { padding-bottom: 64px; }

/* Painel de cor atrás do aparelho, sangrando até a borda direita da janela.
   Composição assimétrica (uma metade clara com a leitura, outra cromática com
   o produto) em vez de duas colunas equilibradas no vazio. */
.app-hero-art {
  position: relative;
  justify-content: center;
  display: flex;
}
.app-hero-art::before {
  content: "";
  position: absolute;
  z-index: 0;
  /* Sangra até a borda direita da janela e desce até o fim da seção, onde
     encontra a faixa indigo do bloco seguinte — as duas leem como um só
     campo de cor, e o aparelho atravessa a fronteira.
     DEPENDE de `body { overflow-x: hidden }` (blog.css:14): o `50vw` estoura
     a coluna de propósito e quem corta é o body. Se aquele overflow sair,
     esta página passa a rolar de lado. */
  left: -10%; right: calc(50% - 50vw); bottom: -32px;
  top: 132px;
  border-radius: 32px 0 0 0;
  background: linear-gradient(158deg, #2b2c7f 0%, var(--indigo-deep) 55%, #16173a 100%);
}
/* O aparelho passa da borda inferior do painel e entra na faixa do bloco
   seguinte. É o que faz a composição ter profundidade em vez de duas caixas
   empilhadas — e resolve o vazio, porque o objeto alto deixa de precisar
   caber inteiro dentro do hero. */
.app-hero-art .phone {
  position: relative;
  z-index: 1;
  width: min(332px, 76vw);
  margin-bottom: -76px;
}

/* Moldura com captura real: proporção do aparelho (1179×2556), não 9/19 —
   assim a imagem entra inteira, sem cortar a barra inferior do app. */
.phone--shot { aspect-ratio: 1179 / 2556; }
.phone--shot .phone-screen { background: var(--off); }
.phone--shot img { width: 100%; height: 100%; display: block; object-fit: cover; }
.app-hero-copy h1 {
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: clamp(34px, 6vw, var(--t-h1));
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--indigo-deep);
  margin: 14px 0 18px;
}
.app-hero-copy .dek {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--gray);
  max-width: 34ch;
  margin: 0 0 30px;
}
.app-hero-art { display: flex; justify-content: center; }

/* ─── botões de loja ─── */
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
}
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 56px;            /* alvo de toque confortável */
  padding: 10px 20px;
  border-radius: 14px;
  background: var(--indigo-deep);
  color: var(--white);
  text-decoration: none;
  border: 1.5px solid var(--indigo-deep);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.store-btn:hover {
  background: var(--indigo);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--indigo) 22%, transparent);
}
.store-btn svg { flex: none; }
.store-btn b {
  display: block;
  font-family: var(--f-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-small);
  line-height: 1.2;
}
.store-btn span {
  display: block;
  font-size: var(--t-caption);
  opacity: .78;
  line-height: 1.2;
}
/* plataforma detectada pelo JS — realce sem esconder a outra */
.store-btn.is-primary {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--ink);
}
.store-btn.is-primary:hover {
  background: var(--coral-deep);
  color: var(--white);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--coral-deep) 28%, transparent);
}
.store-note {
  font-size: var(--t-caption);
  color: var(--gray);
  margin: 0;
}

/* ─── mockup de telefone (CSS/SVG, sem screenshot) ─── */
.phone {
  width: min(290px, 76vw);
  aspect-ratio: 9 / 19;
  border-radius: 38px;
  background: var(--indigo-deep);
  padding: 11px;
  box-shadow: 0 28px 70px color-mix(in srgb, var(--indigo-deep) 30%, transparent), 0 2px 0 rgba(255, 255, 255, .12) inset;
  position: relative;
}
.phone::before {                /* ilha da câmera */
  content: "";
  position: absolute;
  top: 24px; left: 50%;
  transform: translateX(-50%);
  width: 74px; height: 20px;
  border-radius: 12px;
  background: #0d0e2a;
  z-index: 2;
}
.phone-screen {
  height: 100%;
  border-radius: 28px;
  background: var(--off);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ─── faixa "só no app" ─── */
.only-app {
  background: var(--indigo-deep);
  color: var(--white);
  padding: 76px 0;
}
.only-app h2 {
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: clamp(26px, 4.4vw, var(--t-h2));
  letter-spacing: -0.015em;
  color: var(--white);
  margin: 12px 0 10px;
}
.only-app .sub { color: rgba(255, 255, 255, .72); max-width: 52ch; margin: 0 0 40px; }
.only-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
  gap: 26px 30px;
}
.only-app-item { border-top: 2px solid var(--coral); padding-top: 16px; }
.only-app-item h3 {
  font-family: var(--f-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h4);
  color: var(--white);
  margin: 0 0 7px;
}
.only-app-item p {
  margin: 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: rgba(255, 255, 255, .70);
}

/* ─── grid de funcionalidades ─── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 20px;
}
.feat-card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: 26px 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.feat-card:hover {
  transform: translateY(-3px);
  border-color: var(--coral-mist);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--ink) 7%, transparent);
}
.feat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--coral-mist);
  color: var(--indigo-deep);
  display: grid;
  place-items: center;
  margin-bottom: 15px;
}
.feat-card h3 {
  font-family: var(--f-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h4);
  color: var(--indigo-deep);
  margin: 0 0 8px;
}
.feat-card p { margin: 0; font-size: var(--t-small); line-height: 1.62; color: var(--gray); }

/* ─── passos ─── */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; counter-reset: s; }
.step { counter-increment: s; }
.step::before {
  content: counter(s, decimal-leading-zero);
  display: block;
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: 30px;
  color: var(--coral-deep);
  line-height: 1;
  margin-bottom: 12px;
}
.step h3 {
  font-family: var(--f-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-h4);
  color: var(--indigo-deep);
  margin: 0 0 7px;
}
.step p { margin: 0; font-size: var(--t-small); line-height: 1.62; color: var(--gray); }

/* ─── requisitos ─── */
.reqs {
  background: var(--paper);
  border-radius: 18px;
  padding: 30px 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 22px 30px;
}
.reqs-item dt {
  font-size: var(--t-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: var(--w-semibold);
  margin-bottom: 5px;
}
.reqs-item dd {
  margin: 0;
  font-family: var(--f-display);
  font-weight: var(--w-semibold);
  font-size: var(--t-body);
  color: var(--indigo-deep);
}

/* ─── faixa neutra de seção ─── */
.app-band { padding: 76px 0; }
.app-band--paper { background: var(--paper); }
.app-band h2 {
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: clamp(26px, 4.4vw, var(--t-h2));
  letter-spacing: -0.015em;
  color: var(--indigo-deep);
  margin: 12px 0 10px;
}
.app-band .sub { color: var(--gray); max-width: 56ch; margin: 0 0 38px; font-size: var(--t-body); line-height: 1.6; }

/* ─── ajustes de contraste e alvo de toque ───
   .eyebrow-pill, .compliance, .foot-bottom span e .nav-cta/.crumbs a vêm de
   blog.css, compartilhado com os 11 posts do blog. Corrigir lá mudaria as
   11 páginas fora do escopo desta branch — por isso o ajuste mora aqui,
   e só vale nas 3 páginas do app (as únicas que carregam app.css). */
.eyebrow-pill { color: var(--indigo-deep); }
.compliance { color: var(--gray); }
.foot-bottom span { color: var(--gray-2); }

/* O .cta-card mora DENTRO de uma <section class="app-band">, e o
   `.app-band h2` acima (indigo-deep, pensado para banda de fundo claro)
   empata em especificidade com o `.cta-card h2` do blog.css — e ganha,
   porque app.css carrega depois. Resultado: título escuro sobre o
   gradiente escuro do card, praticamente invisível. Restaura o branco
   só nesse contexto. */
.app-band .cta-card h2 { color: var(--white); }

@media (max-width: 880px) {
  .nav-cta { min-height: 48px; }
}
.crumbs a { padding-block: 17px; margin-block: -17px; }

/* ─── responsivo ─── */
@media (max-width: 900px) {
  /* padding-block, nao o shorthand: `padding: X 0` zera o padding-inline do
     .wrap e o h1 encosta nas duas bordas da tela. */
  .app-hero { grid-template-columns: 1fr; gap: 44px; padding-block: 88px 60px; text-align: center; }

  .app-hero-copy .dek { max-width: none; margin-inline: auto; }
  .store-row { justify-content: center; }
}
@media (max-width: 460px) {
  .app-hero { padding-block: 76px 52px; }
  .reqs { padding: 24px 22px; }
  .store-btn { width: 100%; justify-content: center; }
}

/* ─── reveal (js-gated · o .in vem de blog.js) ─── */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .store-btn, .feat-card { transition: none; }
  .store-btn:hover, .feat-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   SCROLL-TRIGGERED STORYTELLING · /app
   Padrão vindo do ui-ux-pro-max (progresso visível, capítulos com
   intensidade crescente). Paleta e tipografia continuam sendo as da marca —
   a sugestão de ciano/teal era o reflexo "saúde = teal" que dá cara de IA.

   Regra que atravessa tudo aqui: só `opacity` e `transform` são animados
   (nunca layout), e todo movimento morre em `prefers-reduced-motion`.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── barra de progresso da leitura ───
   CSS puro via scroll-driven animation. Onde não houver suporte, a barra
   simplesmente não aparece — nada quebra. */
.read-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 110; /* acima da .nav (100), senao a barra nao aparece */
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--coral) 0%, #ffb199 55%, var(--indigo-deep) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .read-bar { display: none; } }
@supports (animation-timeline: scroll()) {
  .read-bar {
    animation: read-grow linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes read-grow { to { transform: scaleX(1); } }

/* ─── aurora do hero ───
   Gradiente em movimento lento atrás do aparelho. Fica no fundo, nunca no
   texto (texto em gradiente é banido pelo DESIGN.md e pela régua de marca). */
.app-hero-art::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 96px -18% -64px -22%;
  border-radius: 50%;
  background:
    radial-gradient(38% 42% at 30% 28%, rgba(255,122,89,.55) 0%, transparent 70%),
    radial-gradient(40% 44% at 74% 62%, rgba(93,95,222,.55) 0%, transparent 72%),
    radial-gradient(34% 38% at 52% 88%, rgba(255,177,153,.42) 0%, transparent 70%);
  filter: blur(46px);
  opacity: .9;
}
@media (prefers-reduced-motion: no-preference) {
  .app-hero-art::after { animation: aurora 22s ease-in-out infinite alternate; }
}
@keyframes aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.03); }
}

/* ─── capítulos com aparelho fixo ───
   O aparelho para na tela enquanto os capítulos passam, e a captura troca
   conforme o capítulo ativo. É o scroll feedback: o polegar move a página e
   a tela do app responde. */
.chapters {
  background: var(--indigo-deep);
  color: #fff;
  position: relative;
  /* `clip`, NÃO `hidden`: overflow hidden cria contexto de rolagem e quebra o
     `position: sticky` do aparelho — ele passa a se fixar numa caixa que sai
     de vista. `clip` corta o desfoque do gradiente sem esse efeito colateral. */
  overflow: clip;
}
.chapters::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(45% 38% at 18% 12%, rgba(93,95,222,.85) 0%, transparent 68%),
    radial-gradient(40% 34% at 88% 74%, rgba(255,122,89,.38) 0%, transparent 70%);
  filter: blur(52px);
  pointer-events: none;
}
.chapters-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr min(330px, 42vw);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
  /* `padding-block`, NUNCA o shorthand `padding: X 0`: o shorthand zera o
     `padding-inline` do `.wrap` e joga o texto na borda da tela no mobile. */
  padding-block: clamp(72px, 9vw, 128px);
}
.chapter-stack { display: grid; gap: clamp(56px, 14vh, 168px); }
.chapter {
  opacity: .58; /* .34 dava 2.17:1 no paragrafo; isto e conteudo, nao enfeite */
  transform: translateY(14px);
  transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 22px;
}
.chapter.is-on { opacity: 1; transform: none; }
.chapter .ord {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--coral-mist);
}
.chapter h2 {
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 10px 0 12px;
  color: #fff;
}
.chapter p { margin: 0; color: #C9C9EC; font-size: var(--t-body); line-height: 1.6; max-width: 44ch; }
.chapter .go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; min-height: 44px;
  font-family: var(--f-display); font-weight: 700; font-size: 14px;
  color: var(--coral-mist); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.chapter .go:hover, .chapter .go:focus-visible { color: #fff; border-color: var(--coral); }

.chapter-stage { position: sticky; top: clamp(84px, 16vh, 152px); }
.chapter-stage .phone { width: 100%; margin: 0; }
.chapter-stage .phone-screen { position: relative; }
.chapter-stage picture {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .5s cubic-bezier(.16,1,.3,1);
}
.chapter-stage picture.is-on { opacity: 1; }
.chapter-stage img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .chapters-inner { grid-template-columns: 1fr; }
  /* `margin: 0 auto` num item de grid troca stretch por shrink-to-fit e a
     largura do aparelho colapsa para o proprio padding (11px) — a moldura
     virava uma lasca com a ilha da camera flutuando sozinha. Centraliza por
     `justify-self` e fixa a largura. */
  .chapter-stage {
    position: relative; top: 0; order: -1;
    justify-self: center;
    width: min(300px, 76vw);
    margin-bottom: 8px;
  }
  .chapter-stack { gap: 40px; }
  .chapter { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chapter { opacity: 1; transform: none; transition: none; }
  .chapter-stage picture { transition: none; }
}

/* ─── contencao de sangria no mobile ───
   Precisa vir NO FIM do arquivo: estas regras sobrescrevem os pseudo-elementos
   declarados no bloco de storytelling acima. Escrito antes, o override perdia
   para a regra de desktop mesmo dentro da media query — foi o que aconteceu na
   primeira tentativa. No mobile o hero e uma coluna e nao ha para onde sangrar
   sem estourar a janela. */
@media (max-width: 900px) {
  /* -24px de cada lado = exatamente a calha do .wrap, ou seja largura total da
     janela SEM estourar. O painel passa a ler como campo de cor sangrando de
     borda a borda, em vez de um retangulo solto atras do aparelho. */
  .app-hero-art::before {
    /* bottom generoso fecha a costura clara entre o painel e a faixa dos
       capitulos; o excedente fica atras da secao seguinte, que pinta depois. */
    inset: 32px -24px -96px -24px;
    border-radius: 0;
  }
  .app-hero-art::after { inset: 48px -24px -32px -24px; }
  .chapters::before { inset: -30% -24px auto -24px; }

  /* O aparelho dos capitulos repetia a MESMA captura do hero, um logo abaixo
     do outro: dois aparelhos identicos em sequencia. E no mobile o sticky nem
     existe (o stage vira estatico), entao ele nao carrega efeito nenhum — e
     decorativo e `aria-hidden`. Fica so o do hero, que e a foto do produto. */
  .chapter-stage { display: none; }

  /* Fecha o vazio entre o CTA e o aparelho. */
  .app-hero { gap: 20px; }
  .app-hero-copy { padding-bottom: 20px; }
  .app-hero-art .phone { margin-bottom: -48px; }
}

/* ═══ voz tipográfica do cluster /app ═══
   A Fraunces era baixada nas três páginas e nunca aplicada: as regras de h1/h2
   deste arquivo venciam o título serifado do blog.css por ordem de carga, e o
   cluster terminava 100% Plus Jakarta Sans — a única parte do site que não
   falava com a voz da home (que usa Fraunces 600, opsz 140). Isto é uma regra,
   não um redesenho: as 16 outras páginas não são tocadas. */
.app-hero-copy h1,
.app-band h2,
.only-app h2,
.chapter h2,
.app-band .cta-card h2 {
  font-family: var(--f-serif);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 140;
  font-weight: 600;
  letter-spacing: -0.018em;
}
/* Texto claro sobre fundo escuro lê como mais leve e pede mais respiro. */
.only-app h2, .chapter h2, .app-band .cta-card h2 { line-height: 1.16; }

/* ═══ barra de download fixa no mobile ═══
   A página tinha UM par de botões, nos primeiros 500px de ~8.900px. Quem se
   convencia lendo a FAQ chegava ao fim sem onde clicar. A barra entra quando
   os botões do hero saem de vista e sai quando eles voltam. */
.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 70;
  display: none;
  gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--indigo-deep) 94%, transparent);
  border-top: 1px solid rgba(255,255,255,.12);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
}
.dock.is-on { transform: none; }
.dock .store-btn {
  flex: 1;
  min-height: 48px;
  justify-content: center;
  padding: 8px 12px;
  background: var(--white);
  border-color: var(--white);
  color: var(--indigo-deep);
}
.dock .store-btn.is-primary { background: var(--coral); border-color: var(--coral); color: var(--ink); }
@media (max-width: 900px) { .dock { display: flex; } }
@media (prefers-reduced-motion: reduce) { .dock { transition: none; } }