/* =====================================================================
   MÉTODO DESTRAVE — Manual Criando sem Bloqueio
   CSS base + design tokens (fundação visual das seções 3–8)
   Sem framework, sem build, sem CDN. Fontes self-hosted.
   ===================================================================== */

/* ---- Fontes self-hosted ------------------------------------------- */
@font-face {
  font-family: 'Boldonse';
  src: url('../assets/fonts/Boldonse.woff2') format('woff2');
  font-weight: 400;         /* Boldonse é um único peso desenhado já "bold" —
                                travar em 400 evita negrito sintético do navegador */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Gabarito';
  src: url('../assets/fonts/Gabarito-VariableFont_wght.woff2') format('woff2');
  /* Só woff2: o fallback .ttf (155KB) foi removido do deploy na limpeza final
     (M7). woff2 é suportado por 100% dos navegadores que este projeto atende
     (Safari iOS 10+, Chrome 36+) — o segundo `src` só pesava o repositório. */
  font-weight: 400 900;     /* variable: usar font-weight normalmente em toda a escala */
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ---------------------------------------------------------
   Paleta e fontes são contrato de marca — valores fixos, não alterar.
   Pares de contraste verificados (ver relatório da Task 2 e a correção
   de paleta da Task 3 para os ratios completos); regras de uso derivadas
   da verificação:
     - texto normal sobre --claro/--papel: usar --tinta ou --tinta-suave
       (nunca --laranja ou --azul como cor de texto corrido — falham AA)
     - --laranja-escuro só serve como texto em tamanho grande/bold
       (≥1.5rem ou ≥800 a partir de ~1.2rem), nunca em parágrafo
     - --azul só como texto sobre fundo --escuro, nunca sobre --claro/--papel
     - texto sobre --laranja/--laranja-escuro (botão): usar --escuro, não branco
     - sobre --roxo (fundo de .section--dark): --claro mede 5.57:1 (AA ok,
       inclusive corpo de texto); --verde-neon mede 4.42:1 (AA só texto
       grande ≥24px — headline/destaque, nunca parágrafo); --laranja mede
       2.09:1 (reprova AA mesmo em texto grande — NUNCA usar --laranja como
       cor de texto sobre --roxo, só como fundo de botão/decoração)
----------------------------------------------------------------------- */
:root {
  /* Cor — identidade de marca (fixa) */
  --laranja: #FF6A00;
  --laranja-rgb: 255 106 0;        /* canais do laranja para sombras com alpha (evita repetir rgb() literal) */
  --laranja-escuro: #E55F00;      /* hover/pressed; texto grande/bold apenas */
  --azul: #00C0FF;                 /* acento; texto só sobre --escuro */
  --verde-neon: #39FF14;           /* acento de destaque de headline sobre --roxo + hover do CTA (revogada a restrição antiga de "só hover") */
  --roxo: #6057B2;                 /* fundo dos 3 momentos chapados (.section--dark) — extraído da página real no ar */
  --roxo-rgb: 96 87 178;           /* canais do roxo para bordas/sombras com alpha (evita repetir rgb() literal, mesmo padrão de --laranja-rgb) */
  --roxo-fundo: #4A4287;           /* profundidade sobre o roxo: cartões e áreas recuadas (direção de arte).
                                      --claro mede 7,7:1 e --verde-neon 6,40:1 sobre ele (AA em qualquer tamanho) */
  --escuro: #16100B;               /* texto (CTA) e marrom da marca (~#391F0C na página real); não é mais fundo de seção */
  --claro: #FAF6F1;                /* fundo padrão das seções de respiro */
  --papel: #FFFFFF;                /* cards */
  --tinta: #241B12;                /* texto sobre claro/papel — 15.7:1 */
  --tinta-suave: #5C5147;          /* texto secundário sobre claro/papel — 7.2:1 */
  --bistre: #372415;               /* Pantone 476 C, brandbook Método Destrave — fundo do .pill */

  /* Neutros derivados da tinta — bordas e sombras com tom quente,
     nunca cinza/preto puro (evita a "sombra genérica" de template) */
  --hairline: rgb(36 27 18 / 0.10);

  /* Foco acessível: anel sólido de alto contraste + glow decorativo azul.
     --focus-ring muda de --escuro para --claro dentro de .section--dark,
     então qualquer elemento focável herda o tom certo automaticamente. */
  --focus-ring: var(--escuro);

  /* Escala tipográfica fluida (clamp): mobile 360 → desktop 1200 */
  --step-hero: clamp(1.75rem, 1.05rem + 2.3vw, 2.35rem); /* Boldonse h1 — retunado na
                                     correção 2 da Task 3: o valor original (max 3.6rem)
                                     nunca chegou a ser aplicado (font-size faltava no
                                     seletor de h1/h2). Testado com contagem real de
                                     linhas (Range.getClientRects) na coluna de ~504px do
                                     hero em 1280px: um teto de 2.75rem (sugestão inicial)
                                     rendeu 8 linhas — estourava o limite de 6. 2.35rem é o
                                     maior valor que ainda cabe em 6 linhas em 1280px; no
                                     mobile (390px) o clamp já bate no piso de 1.75rem. */
  --step-h2: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);         /* Boldonse h2 */
  --step-h3: clamp(1.2rem, 1.02rem + 0.9vw, 1.6rem);      /* Gabarito 800, nunca Boldonse */
  --step-lead: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);/* intros/subheads */
  --step-body: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);    /* Gabarito corpo */
  --step-small: clamp(0.85rem, 0.82rem + 0.15vw, 0.9375rem); /* legendas, fine print */

  /* Ritmo/espaçamento fluido — reutilizado pelas seções 3–8 */
  --space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-xs: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
  --space-sm: clamp(1.25rem, 1rem + 1vw, 2rem);
  --space-md: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-lg: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Superfícies */
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-soft: 0 2px 10px rgb(22 16 11 / 0.06);
  --shadow-card: 0 8px 30px rgb(22 16 11 / 0.08);
  --shadow-elevated: 0 20px 60px rgb(22 16 11 / 0.18);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --container: 1080px;
}

/* ---- Reset mínimo / base -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Gabarito', system-ui, -apple-system, sans-serif;
  font-size: var(--step-body);
  font-weight: 400;
  color: var(--tinta);
  background: var(--claro);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2 {
  font-family: 'Boldonse', sans-serif;
  font-weight: 400;              /* peso único da fonte — não forçar bold sintético */
  line-height: 1.62;              /* CORREÇÃO FINAL (A3). 1.22 era MENOR que a caixa de tinta
                                     da própria fonte, então linhas adjacentes se sobrepunham
                                     e a linha de baixo comia o acento das maiúsculas ("É um
                                     GPS" lia "E um GPS" em #produto; no hero o traço verde de
                                     "conteúdo" encostava na linha seguinte). A fonte TEM os
                                     glifos (Eacute/Atilde/Ccedilla/Otilde presentes no cmap,
                                     verificado com fontTools) — era recorte por line-height.
                                     Métricas reais da Boldonse (upem 1000): hhea ascent 1.22
                                     + descent 0.30 = 1.52em de caixa de conteúdo, e a tinta
                                     do "É" sobe até 1.561em acima da baseline (cap height
                                     1.19em) — ou seja, 1.22 de line-height já nascia ~0.30em
                                     menor que a própria caixa da fonte.
                                     1.62 escolhido MEDINDO no navegador o pior caso real da
                                     página — a headline de #produto, onde a linha 2 começa
                                     com "É" logo abaixo do "N" de "Não". Rodados 1.36 / 1.45
                                     / 1.55 / 1.62 / 1.70 no elemento real: até 1.55 o acento
                                     agudo do É sobe além da linha de cima e cola no N (é
                                     exatamente por isso que "É um GPS" lia "E um GPS" — o
                                     acento não estava sumido, estava desenhado uma linha
                                     acima). 1.62 é o primeiro valor em que o acento pousa
                                     inteiro sobre o próprio E, com folga.
                                     O número parece alto e não é: a Boldonse tem cap height
                                     de 1.19em, então o "vão" visual entre linhas aqui é
                                     1.62 − 1.19 = 0.43em — o mesmo respiro que uma fonte de
                                     texto comum (cap ~0.72em) daria com line-height 1.15.
                                     Comparar este número com o de uma fonte normal é
                                     comparar coisas diferentes. */
  letter-spacing: -0.01em;       /* display já é "bold" por desenho; tracking negativo
                                     evita leitura frouxa e dá presença mais confiante */
  text-wrap: balance;
  margin: 0 0 0.5em;
  color: var(--tinta);
}
/* Correção 2 (Task 3): --step-hero/--step-h2 estavam declarados em :root mas nenhum
   seletor aplicava font-size — h1/h2 caíam no tamanho padrão do navegador
   (36px/16px). h1 usa a escala de hero; h2 usa a escala de h2 — nenhum heading
   fica sem font-size explícito. (A classe utilitária `.display`, que acompanhava
   h1/h2 nestes seletores, nunca foi usada em nenhum HTML e saiu na limpeza M7.) */
h1 { font-size: var(--step-hero); }
h2 { font-size: var(--step-h2); }

h3 {
  font-family: 'Gabarito', sans-serif;   /* Boldonse é reservado a h1/h2 */
  font-size: var(--step-h3);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin: 0 0 0.5em;
  color: var(--tinta);
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: var(--step-lead);
  font-weight: 500;
  color: var(--tinta-suave);
  line-height: 1.5;
}

small {
  font-size: var(--step-small);
  color: var(--tinta-suave);
}

strong, b { font-weight: 800; }         /* aproveita a variable font em vez do bold do navegador */

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--laranja);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.15em;
  transition: text-decoration-color .18s var(--ease-out);
}
a:hover { text-decoration-color: var(--laranja-escuro); }

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--laranja); color: var(--escuro); }

/* Foco visível consistente em qualquer elemento focável.
   Anel sólido (--focus-ring) garante contraste ≥ 3:1 contra o fundo;
   o glow azul translúcido é só reforço decorativo de marca, não carrega
   a responsabilidade do contraste. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgb(0 192 255 / 0.25);
}

/* ---- Layout ----------------------------------------------------------- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  scroll-margin-top: 1.5rem; /* âncoras (Task 8, Parte B) não grudam no topo — não há header fixo hoje, mas fica correto para qualquer link interno futuro */
}

.section--dark {
  background: var(--roxo);      /* trocado de --escuro pra --roxo: cor real da página no ar (correção de paleta, Task 3) */
  color: var(--claro);
  --focus-ring: var(--claro);   /* reescreve o token para os filhos focáveis; claro sobre roxo mede 5.57:1, ok como anel de foco */
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: var(--claro); }
.section--dark .lead,
.section--dark small { color: rgb(250 246 241 / 0.88); } /* claro suavizado — 0.72 (Task 2, calibrado p/ --escuro) media só 3.74:1 sobre --roxo e reprovava AA; 0.88 mede 4.73:1 */
.section--dark a { text-decoration-color: var(--azul); }  /* decoração de link (não é o texto em si, que herda --claro); azul mede 2.85:1 sobre --roxo — nenhum <a> renderiza hoje dentro de .section--dark, mas tasks futuras que adicionarem link aqui devem reconferir */
.section--dark a:hover { text-decoration-color: currentColor; }

/* ---- Superfícies -------------------------------------------------------
   Cartão neutro reutilizável pelas próximas tasks (prova social, oferta,
   FAQ etc.). Borda quente + sombra quente em vez de cinza genérico. */
.card {
  background: var(--papel);
  border-radius: var(--radius);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
  padding: var(--space-sm);
}

/* ---- Pill / eyebrow -----------------------------------------------------
   Fundo --bistre + texto --papel: 14,73:1 — passa AAA. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--bistre);
  color: var(--papel);
  border-radius: var(--radius-pill);
  padding: .45rem 1rem;
  font-weight: 600;
  font-size: .9rem;
}

/* ---- Botão CTA ------------------------------------------------------------
   Texto trocado de #fff (brief) para --escuro: branco sobre --laranja mede
   2.9:1 e falha AA de texto (mín. 4.5:1); tinta escura sobre laranja mede
   ~6.6:1 em repouso e ~5.4:1 no hover — ver relatório da Task 2. */
.btn-cta {
  display: inline-block;
  font-family: 'Gabarito', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  background: var(--laranja);
  color: var(--escuro);
  text-decoration: none;
  text-align: center;
  padding: 1.1rem 2.2rem;
  border-radius: var(--radius-pill);
  border: none;
  cursor: pointer;
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
  box-shadow: 0 6px 24px rgb(var(--laranja-rgb) / 0.35);
}
/* translateY soma var(--reveal-y, 0px) em vez de um valor fixo — o botão
   também é `.reveal` no hero; ver nota na seção "Reveals" sobre por que
   isso é necessário para o hover não ser vencido pela entrada animada. */
.btn-cta:hover {
  transform: translateY(calc(var(--reveal-y, 0px) - 2px)) scale(1.02);
  background: var(--laranja-escuro);
  box-shadow: 0 0 0 3px var(--verde-neon), 0 10px 30px rgb(var(--laranja-rgb) / 0.4);
}
.btn-cta:active { transform: translateY(var(--reveal-y, 0px)) scale(0.99); }
.btn-cta:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgb(0 192 255 / 0.3);
}

/* ---- Reveals (JS adiciona .is-visible via IntersectionObserver) --------
   Gate por classe no <html>: sem JS, .reveal fica visível e estático (a
   página funciona sem JavaScript). Só quando html.js está presente — que a
   Task 3 DEVE adicionar via script inline bloqueante no <head> do
   index.html (`document.documentElement.classList.add('js')`) — o conteúdo
   parte escondido e anima ao ganhar .is-visible.
   ⚠️ IMPORTANTE PARA A TASK 3: sem esse snippet no <head>, .js nunca é
   adicionada e NENHUMA animação de reveal roda (o que é o comportamento
   seguro/esperado, mas o reveal como efeito visual depende dele).

   Correção (rodada 2, achado sistêmico): a versão anterior escrevia o
   deslocamento de entrada direto na propriedade `transform`
   (`html.js .reveal.is-visible { transform: none; }`, especificidade
   0,3,1). Qualquer elemento que fosse `.reveal` E tivesse um `:hover`
   próprio em `transform` (`.btn-cta`, `.beneficio`) tinha o hover
   silenciosamente vencido por essa regra — nenhuma especificidade de
   `:hover` de classe única (0,2,0) supera 0,3,1. Ia se repetir em toda
   task futura que combinasse cartão com hover + entrada animada.

   Correção: o deslocamento de entrada vira uma custom property
   (`--reveal-y`), não mais um valor de `transform` escrito em alta
   especificidade. A ÚNICA regra que declara a propriedade `transform`
   pra entrada é a `.reveal` de baixa especificidade (0,1,0) logo abaixo;
   `html.js .reveal` e `.is-visible` só mudam o VALOR da variável. Como
   isso libera `transform` para qualquer `:hover`/`:active` no mesmo
   elemento vencer normalmente pela especificidade de sempre, os hovers
   de `.btn-cta` e `.beneficio` (mais abaixo no arquivo) passam a somar
   `var(--reveal-y, 0px)` ao próprio deslocamento em vez de um valor fixo
   — funciona tanto revelado (--reveal-y: 0px) quanto, em tese, hover
   durante a entrada (soma ao deslocamento em vez de saltar). Qualquer
   card futuro que precise de hover + entrada anima do mesmo jeito: usar
   `transform: translateY(calc(var(--reveal-y, 0px) + <deslocamento-do-hover>))`
   na regra de hover, nunca reescrever `transform` sem o var(). */
.reveal {
  --reveal-y: 0px;
  opacity: 1;
  transform: translateY(var(--reveal-y));
}
/* Correção (Task 8, achado adicional — mesma família de bug do A4, achado
   ANTES de existir a task): a regra abaixo declarava `transition` como
   shorthand (`transition: opacity .6s ease, transform .6s var(--ease-out)`),
   e todo shorthand CSS reseta implicitamente os longhands que não lista —
   incluindo `transition-delay`, resetado para `0s`. Como a especificidade
   de `html.js .reveal` (0,2,1) é maior que a de `.reveal[data-delay="N"]`
   (0,2,0, um atributo abaixo), esse `transition-delay: 0s` implícito SEMPRE
   vencia — a cascata de `data-delay` nunca funcionou em NENHUMA seção do
   site (confirmado: `getComputedStyle(el).transitionDelay` media "0s, 0s"
   em todo `.reveal[data-delay]` testado, revelado ou não, já no commit
   base desta task). Todo mundo revelava junto, disfarçado porque a entrada
   já era sutil (16-24px + fade) o bastante pra colisão passar despercebida
   a olho nu.
   Fix: os longhands de duração/propriedade/timing ficam aqui; `transition-
   delay` fica de fora de propósito, para `.reveal[data-delay="N"]` (única
   regra que declara esse longhand) valer sem disputa de especificidade. */
html.js .reveal {
  --reveal-y: 24px;
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: .6s, .6s;
  transition-timing-function: ease, var(--ease-out);
}
html.js .reveal.is-visible { --reveal-y: 0px; opacity: 1; }
.reveal[data-delay="1"] { transition-delay: .1s }
.reveal[data-delay="2"] { transition-delay: .2s }
.reveal[data-delay="3"] { transition-delay: .3s }
/* 4 e 5: #dor tem 5 parágrafos em cascata (Task 8, achado A2) — só existiam
   3 classes de delay, então os parágrafos 1º/4º e 2º/5º batiam juntos e a
   cascata de 5 tempos colapsava em 3. Mecanismo escalável: qualquer seção
   futura com mais de 3 irmãos em cascata só precisa de `data-delay="4"`/`"5"`. */
.reveal[data-delay="4"] { transition-delay: .4s }
.reveal[data-delay="5"] { transition-delay: .5s }

/* ---- Correção (Task 8, achado A4): colisão de especificidade em `transition`
   `html.js .reveal` tem especificidade (0,2,1) — maior que a `transition`
   própria de qualquer `:hover`/`:focus-within`/`[open]` de classe única
   (0,2,0) ou dupla (0,1,0). Todo elemento que é `.reveal` E também declara
   sua própria duração de `transition` (`.btn-cta`, `.beneficio`,
   `.prova__fila-item`, `.yugui__fila-item`, `.faq__item`) tinha essa
   duração (.18s–.25s) inteiramente substituída pelos .6s da entrada — o
   hover elevava em ~600ms em vez dos ~200ms desenhados, e propriedades que
   `html.js .reveal` não lista (box-shadow, border-color, background)
   deixavam de transicionar. Mesma classe de bug que a correção de
   `--reveal-y` já documentada acima resolveu para `transform`, agora
   acontecendo em `transition` em si.
   Fix: redeclarar `transition` nos estados que mudam essas propriedades,
   com especificidade deliberadamente maior (repete a própria classe do
   componente, mesmo padrão de especificidade proposital de `.is-replay`
   mais abaixo no arquivo) — não depende da ordem das regras no arquivo. */
.btn-cta.reveal:hover {
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background .18s var(--ease-out);
}
.beneficio.reveal:hover,
.beneficio.reveal:focus-within {
  transition: transform .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.prova__fila-item.reveal:hover,
.prova__fila-item.reveal:focus-within,
.yugui__fila-item.reveal:hover,
.yugui__fila-item.reveal:focus-within {
  transition: transform .25s var(--ease-out);
}
.faq__item.reveal[open] {
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

/* ---- Movimento reduzido --------------------------------------------------
   Precisa neutralizar tanto o `.reveal` sem gate quanto o `html.js .reveal`
   (mesma especificidade do seletor gated, declarado depois — vence por
   ordem de origem) para cobrir os dois cenários com e sem JS. Zera a
   variável em vez de escrever `transform` direto, pelo mesmo motivo do
   bloco acima (não voltar a criar uma regra de alta especificidade que
   brigue com hover). As overrides de especificidade alta do bloco A4 acima
   também precisam ser neutralizadas aqui — do contrário elas venceriam o
   `.btn-cta { transition: none; }` (e equivalentes) só pela especificidade
   maior, reativando transições que o usuário pediu para desligar. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  html.js .reveal { --reveal-y: 0px; opacity: 1; transition: none; }
  .btn-cta,
  .btn-cta.reveal:hover,
  .beneficio.reveal:hover,
  .beneficio.reveal:focus-within,
  .prova__fila-item.reveal:hover,
  .prova__fila-item.reveal:focus-within,
  .yugui__fila-item.reveal:hover,
  .yugui__fila-item.reveal:focus-within,
  .faq__item.reveal[open] { transition: none; }
  a { transition: none; }
  * { scroll-behavior: auto !important; animation: none !important; }
}

/* =====================================================================
   HERO + DOR (Task 3)
   ===================================================================== */

/* ---- Hero -------------------------------------------------------------
   Grid 2 colunas no desktop (texto 1.1fr / foto .9fr); no mobile a ordem
   do DOM (texto+CTA antes da figure) já empilha a foto depois do CTA,
   sem precisar de `order`.

   CORREÇÃO FINAL (A5): a fronteira hero(chapada) → #dor(clara) era a única
   das 5 passagens chapada↔clara do site sem fita curva — a direção de arte
   diz "TODA passagem". `position: relative` ancora a fita; o padding-block
   sobe pro mesmo valor de .virada/.oferta pra abrir espaço pra ela. A fita
   em si reusa `.virada__fita` (mesma regra, mesmo path da variação "base"
   já usada em #virada e #oferta) — nenhuma regra nova de posicionamento. */
.hero {
  position: relative;
  padding-bottom: clamp(5rem, 11vw, 8.5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--space-lg);
}
@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.1fr .9fr; }
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.hero__text > * { margin: 0; }   /* espaçamento vem do gap, evita duplicar com as margens padrão de h1/p */

/* O arquivo assets/img/logo-destrave.png foi aparado (magick -trim +repage)
   na correção desta task: era um canvas quadrado 480x480 com muito padding
   transparente, o que forçava object-fit:contain pra não distorcer dentro
   da caixa 220x110. Agora o arquivo já É o logotipo real, 449x159
   (proporção ~2.82:1) — width/height do <img> usam essa proporção
   (220x78 no hero, 140x50 no rodapé), então não precisa mais de
   object-fit: a imagem preenche a caixa sem esticar. */
.hero__logo {
  width: 220px;
  height: 78px;
}

/* Headline de duas frases (Task 6.5): a 1ª frase (o soco) herda o tamanho
   máximo de display do h1 (--step-hero); a 2ª (a promessa) entra menor —
   ainda Boldonse/display, nunca Gabarito de corpo — para não empilhar duas
   linhas de peso máximo. O piso de 1.5rem (24px) não é estético: é o
   mínimo documentado para o verde-neon (`.virada__destaque`, reutilizada
   aqui dentro) manter AA sobre --roxo — abaixo de 24px o contraste reprova. */
.hero__soco,
.hero__promessa { display: block; }
/* Correção (Task 8, achado A3): no mobile as duas frases ficavam quase no
   mesmo tamanho (28px vs 24,3px a 390px), ambas em Boldonse branco cheio —
   8-9 linhas de peso visual parecido antes do subhead. O soco é o murro:
   ganha piso próprio, maior que o do h1 padrão. */
.hero__soco {
  font-size: clamp(1.9rem, 1.55rem + 1.6vw, 2.6rem);
}
.hero__promessa {
  margin-top: .5em;
  /* Piso de 1.5rem (24px) é intocável: é o mínimo documentado para o
     verde-neon do `.virada__destaque` embutido aqui manter AA sobre --roxo
     (abaixo de 24px o contraste reprova — ver comentário abaixo). A
     hierarquia vem da COR, não do tamanho: o texto comum da promessa
     recebe o mesmo tom apagado (rgb(.../.78), 4,10:1 sobre --roxo — passa
     AA mesmo como texto normal) já usado em .oferta__box s; o trecho
     verde-neon dentro do span permanece a 100% de opacidade. */
  font-size: clamp(1.5rem, 1.3rem + .9vw, 1.9rem);
  color: rgb(250 246 241 / 0.78);
}
.hero__promessa .virada__destaque { color: var(--verde-neon); }

/* "conteúdo que atrai clientes" é a frase mais longa já colocada dentro de
   .virada__destaque no site inteiro — a 24px (piso de contraste, acima)
   ela não cabe numa linha só na coluna ~350px do mobile. Forçar overflow
   horizontal é proibido e descer do piso de 24px reprova AA, então só o
   destaque do hero abandona o nowrap + sublinhado por pseudo-elemento
   (pensado para caber numa linha) e ganha um sublinhado por gradiente de
   fundo com box-decoration-break: clone — mesma cor, mesma animação de
   "desenha da esquerda pra direita" (agora via background-size em vez de
   scaleX), mas sobrevive à quebra de linha porque cada fragmento de linha
   pinta o próprio pedaço do gradiente. */
.hero__promessa .virada__destaque {
  white-space: normal;
  background-image: linear-gradient(var(--verde-neon), var(--verde-neon));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .09em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.hero__promessa .virada__destaque::after { content: none; }
html.js .hero__promessa .virada__destaque {
  background-size: 0% .09em;
  transition: background-size .6s var(--ease-out) .15s;
}
html.js .reveal.is-visible .hero__promessa .virada__destaque {
  background-size: 100% .09em;
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero__promessa .virada__destaque {
    background-size: 100% .09em !important;
    transition: none !important;
  }
}

/* overflow:hidden no figure (não no img) porque box-shadow é pintado na
   caixa do próprio elemento — fica intacto mesmo com overflow:hidden,
   que só recorta o conteúdo/filhos (a foto rotacionada). Isso garante
   que a rotação de -2deg nunca vaze para fora do card e nunca cause
   scroll horizontal na página. */
.hero__foto {
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevated);
}
.hero__foto img {
  display: block;
  width: 100%;
  height: auto;
  transform: rotate(-2deg);
  transform-origin: center;
}

.container--narrow { max-width: 720px; }

/* ---- Rodapé ------------------------------------------------------------
   CORREÇÃO FINAL (B1): o rodapé tinha só logo e copyright. A página roda
   pixel da Meta em tráfego pago no Brasil, então precisa dizer o que
   coleta (LGPD), e precisa de um canal onde o lead tire dúvida ANTES de
   pagar. Os dois blocos ficam aqui mesmo, não em página separada: o texto
   é curto e uma página extra só afastaria a leitura. */
.rodape {
  background: var(--escuro);
  color: rgb(250 246 241 / 0.72);   /* 9,33:1 sobre --escuro */
  padding-block: var(--space-md);
  text-align: center;
  --focus-ring: var(--claro);       /* o anel padrão é --escuro: invisível aqui */
}
.rodape .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}
.rodape img {
  width: 140px;
  height: 50px;    /* mesma proporção real do logo aparado (449x159 ≈ 2.82:1), sem object-fit */
}
.rodape p {
  font-size: var(--step-small);
  margin: 0;
}
/* Links do rodapé em --claro cheio (15,7:1) em vez do texto a 0.72: são o
   canal de suporte e precisam saltar do parágrafo. */
.rodape a {
  color: var(--claro);
  font-weight: 700;
}

.rodape .rodape__contato {
  font-size: var(--step-body);   /* dois nomes de classe só para vencer o --step-small de
                                    `.rodape p`: é o único item do rodapé que a pessoa
                                    procura com pressa, antes de decidir comprar */
  max-width: 46ch;
}

/* Bloco de privacidade: alinhado à esquerda (parágrafo centralizado de 4
   linhas é castigo de leitura) e recuado por uma régua fina, para ler como
   nota de rodapé e não competir com o contato logo acima. */
.rodape__privacidade {
  max-width: 68ch;
  text-align: left;
  border-top: 1px solid rgb(255 255 255 / 0.14);
  padding-top: var(--space-sm);
}
.rodape__titulo {
  font-family: 'Gabarito', sans-serif;   /* Boldonse é só headline/display */
  font-size: var(--step-small);
  font-weight: 800;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgb(250 246 241 / 0.88);
  margin: 0 0 .5rem;
}
.rodape__privacidade p + p { margin-top: .6rem; }

/* =====================================================================
   A VIRADA (Task 4) — assinatura da página: o interruptor "Modo Destrave"

   PRINCÍPIO DE ESTADO (três camadas, nesta ordem de leitura):
     1. `.destrave` sem gate            → estado DESTRAVADO. É o que o
        navegador SEM JAVASCRIPT renderiza: as 3 profissões empilhadas,
        etiqueta pequena, 7 pautas legíveis, contador em 7. O conteúdo
        nunca depende do brinquedo.
     2. `html.js .destrave`             → estado OLHAR COMUM (interruptor
        desligado). Só existe quando há JS, e o script inline do <head>
        adiciona `.js` antes da primeira pintura — por isso não há flash
        do estado destravado antes do JS assumir.
     3. `html.js .destrave.is-destravado` → estado OLHAR DESTRAVADO
        ligado pelo usuário. Volta visualmente ao item 1, agora animado.

   PRINCÍPIO DE LAYOUT: tudo no fluxo normal, nada posicionado em
   absoluto. Desligado, o painel mostra só a leitura pobre (a palavra
   gigante em Boldonse) e o contador em zero — o campo de pautas está
   FECHADO (max-height: 0). Ligado, a palavra encolhe via `font-size` até
   virar etiqueta e o campo abre com as sete pílulas em cascata. Como as
   duas coisas são transições de propriedades que afetam layout
   (font-size e max-height), o painel cresce e encolhe sozinho, de forma
   contínua — não existe posicionamento manual para dar errado.

   COR: verde-neon aparece só no que o método revelou (as 7 pautas, o
   contador, o traço da headline). O interruptor é laranja porque é o
   único elemento clicável de ação da seção.
   ===================================================================== */

.virada {
  position: relative;                       /* âncora das fitas curvas */
  padding-block: clamp(5rem, 11vw, 8.5rem); /* maior que o .section padrão: abre espaço para as fitas */
}

/* ---- Fitas curvas: transição orgânica entre seções ---------------------
   Preenchidas com --claro porque as seções vizinhas (#dor e #produto) são
   claras — a curva lê como se o papel escorresse por cima do roxo.
   `preserveAspectRatio: none` deixa a curva esticar na largura sem
   deformar a percepção (a altura é controlada por clamp).

   A fita da base do hero (A5) usa esta MESMA regra (`class="virada__fita
   virada__fita--base"` no #hero) em vez de ganhar uma classe própria: é
   literalmente a mesma peça, na mesma posição relativa a uma seção
   chapada, e duplicar as 8 propriedades só para renomear o prefixo seria
   código novo sem razão. */
.virada__fita {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(34px, 5.5vw, 78px);
  display: block;
  color: var(--claro);
  pointer-events: none;
}
.virada__fita--topo { top: -1px; }   /* -1px cobre o hairline de arredondamento entre seções */
.virada__fita--base { bottom: -1px; }

/* ---- Cabeçalho da seção -----------------------------------------------
   Assimetria proposital: o bloco de texto é ancorado à esquerda e mais
   estreito que o painel, que ocupa a largura toda do container. */
.virada__head { max-width: 62ch; }
.virada__head > * { margin-bottom: var(--space-xs); }
.virada__head > *:last-child { margin-bottom: 0; }

/* Correção residual (microcopy): o parágrafo de apoio menciona o
   interruptor "Modo Destrave" (liga sozinho, desliga/liga manual, troca
   de profissão nas abas) — um controle que só existe com JavaScript
   (`html:not(.js) .destrave__barra { display: none; }`, acima). Sem JS
   o painel já nasce revelado e empilhado, sem nada para ligar ou trocar
   de aba, então essa frase precisa ficar de fora: some por padrão e só
   aparece quando `html.js` está presente, igual ao resto do gate de JS
   da página. A frase anterior a ela vale nos dois cenários. */
.virada__jsonly { display: none; }
html.js .virada__jsonly { display: inline; }

.virada__kicker {
  font-weight: 800;
  font-size: var(--step-small);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgb(250 246 241 / 0.88);   /* 4,73:1 sobre --roxo — .7 reprovaria AA (3,63:1) */
}

/* Traço verde-neon que se desenha da esquerda para a direita quando a
   headline entra em cena. Um traço por seção (direção de arte). Sem JS a
   classe .is-visible nunca chega, então o traço já nasce desenhado. */
.virada__destaque {
  color: var(--verde-neon);         /* 4,42:1 sobre --roxo: só vale porque h2 mede ≥24px */
  position: relative;
  white-space: nowrap;              /* mantém o trecho de virada inteiro na mesma linha do traço */
}
.virada__destaque::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 0.09em;
  background: var(--verde-neon);
  transform-origin: left center;
}
html.js .virada__destaque::after {
  transform: scaleX(0);
  transition: transform .6s var(--ease-out) .15s;
}
html.js .reveal.is-visible .virada__destaque::after { transform: scaleX(1); }

/* Correção (Task 8): "Eu enxergo conteúdo." (20 caracteres) media 328,4px
   de largura a 360px de viewport — a coluna disponível do h2 (sem
   max-width, herda a largura do container) mede ~325px ali, então o
   `white-space: nowrap` da regra genérica acima estourava o documento em
   ~3,4px (scrollWidth > clientWidth), violando o piso de 360px sem scroll
   horizontal. Mesma técnica já usada em `.hero__promessa .virada__destaque`
   pelo motivo idêntico: abandona nowrap + ::after (que não sobrevive a
   quebra de linha) por um sublinhado em gradiente de fundo com
   `box-decoration-break: clone`, que pinta cada fragmento de linha. Escopo
   restrito a `#virada` porque é a única instância do site que estoura no
   piso de 360px — as outras (produto/beneficios/prova/yugui) cabem numa
   linha só em qualquer largura testada. */
#virada .virada__destaque {
  white-space: normal;
  background-image: linear-gradient(var(--verde-neon), var(--verde-neon));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% .09em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
#virada .virada__destaque::after { content: none; }
html.js #virada .virada__destaque {
  background-size: 0% .09em;
  transition: background-size .6s var(--ease-out) .15s;
}
/* CORREÇÃO FINAL (A1): o seletor era `html.js .reveal.is-visible #virada
   .virada__destaque`, que exige `.reveal.is-visible` como ANCESTRAL de
   `#virada`. Só que o `.reveal` aqui é o próprio <h2>, que está DENTRO de
   #virada — a regra nunca casava com nada. Medido: `background-size: 0%`
   permanente em uso normal, e o traço só aparecia sob
   `prefers-reduced-motion` (pelo !important do bloco abaixo), ou seja, o
   comportamento estava invertido: quem pediu menos movimento via o traço,
   quem podia ver a animação nunca via o traço. Ordem corrigida: #virada é
   o escopo, `.reveal.is-visible` é o h2 lá dentro. */
html.js #virada .reveal.is-visible .virada__destaque {
  background-size: 100% .09em;
}
@media (prefers-reduced-motion: reduce) {
  html.js #virada .virada__destaque {
    background-size: 100% .09em !important;
    transition: none !important;
  }
}

.virada__fecho {
  margin-top: var(--space-md);
  max-width: 56ch;
  font-size: var(--step-lead);
  font-weight: 500;
  line-height: 1.5;
}

/* ---- Painel ------------------------------------------------------------
   Profundidade por camada (--roxo-fundo + contorno de 1px), não por
   sombra genérica. */
.destrave {
  margin-top: var(--space-md);
  background: var(--roxo-fundo);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
}
@media (min-width: 720px) {
  .destrave { padding: var(--space-md); }
}

/* ---- Barra de controle: profissões + interruptor ----------------------- */
.destrave__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}
/* Sem JS a barra inteira some: os botões de aba não trocariam nada e o
   interruptor não acionaria nada — controle morto engana mais do que ajuda. */
html:not(.js) .destrave__barra { display: none; }

.destrave__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.tabs__btn {
  font-family: 'Gabarito', sans-serif;
  font-weight: 800;
  font-size: var(--step-small);
  letter-spacing: .04em;
  color: var(--claro);
  background: transparent;
  border: 2px solid rgb(255 255 255 / 0.22);
  border-radius: var(--radius-pill);
  padding: .55rem 1.1rem;
  cursor: pointer;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), color .2s var(--ease-out);
}
.tabs__btn:hover { border-color: rgb(255 255 255 / 0.5); background: rgb(255 255 255 / 0.07); }
/* Aba ativa em --claro sólido com texto --escuro (15,2:1). O laranja fica
   reservado ao interruptor, que é a ação de verdade desta seção. */
.tabs__btn.is-active {
  background: var(--claro);
  border-color: var(--claro);
  color: var(--escuro);
}

/* ---- O interruptor ------------------------------------------------------
   O visual é derivado de [aria-pressed], nunca de uma classe paralela:
   se o ARIA estiver errado, o pixel fica errado junto e o bug aparece. */
.switch {
  display: inline-flex;
  flex-direction: column;
  gap: .35rem;
  align-items: flex-start;
  font-family: 'Gabarito', sans-serif;
  color: var(--claro);
  background: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--radius);
  padding: .7rem 1.1rem;
  cursor: pointer;
  transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.switch:hover {
  background: rgb(255 255 255 / 0.1);
  border-color: var(--laranja);
  transform: translateY(-2px);
}
.switch:active { transform: translateY(0); }

.switch__nome {
  font-weight: 800;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgb(250 246 241 / 0.9);
}
.switch__linha {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}
.switch__track {
  position: relative;
  flex: none;
  width: 58px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.16);
  border: 1px solid rgb(255 255 255 / 0.3);
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--claro);
  transition: translate .3s var(--ease-out), background .3s var(--ease-out);
}
/* Laranja = ação clicável. É o único laranja da seção. */
.switch[aria-pressed="true"] .switch__track {
  background: var(--laranja);
  border-color: var(--laranja);
}
.switch[aria-pressed="true"] .switch__thumb {
  translate: 28px 0;
  background: var(--escuro);
}
.switch__estado {
  font-weight: 800;
  font-size: var(--step-small);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  min-width: 11.5em;             /* trava a largura do botão: "Olhar comum" e
                                    "Olhar destravado" não empurram o layout.
                                    Em `em` (não `ch`) porque o rótulo é caixa
                                    alta com tracking — `ch` mede o "0" e
                                    subestimaria a string mais longa. */
  text-align: left;
}

/* ---- O palco ------------------------------------------------------------ */
/* Container de consulta: o tamanho da palavra gigante é calculado a partir
   da largura REAL do painel (cqi), não do viewport (vw). Com vw ela
   estourava a caixa em 360px (365px de scrollWidth num viewport de 360 —
   scroll horizontal, medido) e ameaçava invadir a coluna do contador na
   faixa de ~860–1000px, onde o painel é estreito mas o viewport já não é. */
.destrave__palcos { position: relative; container-type: inline-size; }

.palco { position: relative; }

/* O campo de pautas FECHA quando o interruptor está desligado.
   Primeira versão: o campo mantinha o espaço reservado nos dois estados,
   para o painel nunca mudar de altura. No 1280 ficou razoável, mas no 360
   abriu ~330px de vazio morto entre a palavra gigante e o contador — lia
   como layout quebrado, não como "não há mais nada aqui". Fechando, o
   painel fica compacto no olhar comum e CRESCE quando a pessoa aciona,
   o que é o próprio argumento da seção.
   `max-height` (e não altura automática) para poder transicionar; 1200px
   é folgado o bastante para nunca cortar o conteúdo real — o pior caso,
   sete pílulas empilhadas a 360px, dá ~340px. */
.palco__campo {
  overflow: hidden;
  max-height: 1200px;
  transition: max-height .45s var(--ease-out);
}
html.js .destrave:not(.is-destravado) .palco__campo { max-height: 0; }

/* Corpo em duas colunas no desktop: campo de pautas à esquerda, contador
   ancorado à direita atrás de um filete. O número é o desfecho da leitura
   (etiqueta → pílulas → contagem) e ficar ao lado, e não muito abaixo,
   mantém os dois na mesma dobra do olho. Estreitar o campo também adensa
   as pílulas para 3–4 fileiras em vez de uma tira solta de 2. */
.palco__corpo { display: grid; gap: var(--space-sm); }
/* 1040px, e não 860: entre ~860 e ~1030 a coluna esquerda fica estreita
   demais e as pílulas ficam espremidas em fileiras de duas. Abaixo disso o
   corpo empilha, com o contador atravessado por um filete horizontal. */
@media (min-width: 1040px) {
  .palco__corpo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 200px);
    gap: var(--space-md);
    align-items: start;
  }
  .palco__contador {
    border-left: 1px solid rgb(255 255 255 / 0.14);
    padding-left: var(--space-sm);
  }
}
@media (max-width: 1039.98px) {
  .palco__contador {
    border-top: 1px solid rgb(255 255 255 / 0.14);
    padding-top: var(--space-sm);
  }
}
/* Com JS, só a profissão ativa aparece. Sem JS, as três ficam empilhadas. */
html.js .palco:not(.is-active) { display: none; }
html:not(.js) .palco + .palco {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid rgb(255 255 255 / 0.14);
}
.palco:focus-visible { outline-offset: 6px; }

/* Título da profissão: serve só ao cenário sem JS (com JS, quem nomeia o
   painel é o botão da aba, via aria-labelledby). */
html.js .palco__profissao { display: none; }
.palco__profissao {
  color: var(--claro);
  margin: 0 0 var(--space-2xs);
}
/* ---- A leitura pobre: a palavra gigante que encolhe --------------------
   Fica no FLUXO normal, não posicionada em absoluto. A primeira versão a
   tirava do fluxo para reservar espaço e o painel nunca mudar de altura;
   com o campo fechando, essa razão sumiu — e o absoluto era a origem de
   toda uma classe de colisões (a palavra passando por cima do contador,
   medida em 900px). No fluxo, a colisão é impossível por construção, e a
   transição de `font-size` já anima a altura da caixa de linha, ou seja, o
   painel cresce e encolhe suavemente de graça. */
.palco__leitura {
  margin: 0 0 var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  max-width: 74%;         /* faz a palavra gigante quebrar em duas linhas antes de
                             ocupar a largura toda. Não basta sozinho: max-width não
                             quebra palavra única, então o teto de font-size abaixo é
                             quem garante que "ATENDIMENTO" caiba no painel. */
  pointer-events: none;   /* nunca captura clique: é cenário, não controle */
  transition: gap .5s var(--ease-out);
}
/* Desligado, a Boldonse gigante subia até encostar em "PESSOA COMUM VÊ"
   (a caixa alta ocupa quase toda a linha) — parecia colisão. Mais respiro
   só nesse estado. */
html.js .destrave:not(.is-destravado) .palco__leitura { gap: 1rem; }
.palco__prefixo {
  font-weight: 800;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgb(250 246 241 / 0.7);
}
/* A palavra é a MESMA em todos os estados — ela não some, só deixa de ser
   a única verdade. Anima font-size (não scale) para o texto continuar
   renderizado nítido no tamanho final, sem borrão de rasterização. */
.palco__palavra {
  display: block;
  font-family: 'Boldonse', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.3;       /* Mesma raiz do A3: a cap height da Boldonse é 1.19em, então
                             a 1.2 as maiúsculas de "UM" e "ATENDIMENTO" ficavam
                             literalmente encostadas (0,01em de folga). Subiu junto com a
                             correção de contraste (M1) — com a palavra mais legível, a
                             colisão que antes se escondia no cinza ficou evidente.
                             1.3 dá 0,11em de respiro e não muda a altura do painel a
                             ponto de mexer no layout. */
  letter-spacing: -0.01em;
  font-size: 1.05rem;
  color: rgb(250 246 241 / 0.6);
  transition: font-size .5s var(--ease-out), color .5s var(--ease-out), letter-spacing .5s var(--ease-out);
}
/* Estado OLHAR COMUM: gigante e apagada — é tudo o que a pessoa enxerga.
   O teto subiu de 4.25rem para 5.5rem depois de olhar o painel no 1280:
   a 4.25rem a palavra cabia numa linha só e sobrava um vazio de ~200px
   embaixo; grande o bastante para quebrar em duas linhas, ela ocupa o
   painel — que é exatamente o ponto: é tudo o que a pessoa enxerga.
   7,8cqi é o maior valor em que "ATENDIMENTO" (a palavra mais longa das
   três profissões) ainda cabe no painel em todas as larguras testadas —
   a 8vw ela estourava o viewport em 360px. */
html.js .destrave:not(.is-destravado) .palco__palavra {
  font-size: clamp(2rem, 7.8cqi, 5rem);
  /* CORREÇÃO FINAL (M1): 0.34 media 2,33:1 sobre --roxo-fundo e reprovava
     AA — é TEXTO real (a palavra que a pessoa lê), a 32-80px, então o piso
     é 3:1. 0.50 mede 3,31:1 e continua nitidamente "apagada" ao lado das
     pílulas em --claro cheio, que é o efeito que o estado pede. */
  color: rgb(250 246 241 / 0.5);
  letter-spacing: -0.02em;
}

/* ---- "Eu vejo" + campo de pílulas -------------------------------------- */
.palco__euvejo {
  font-weight: 800;
  font-size: var(--step-small);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgb(250 246 241 / 0.88);
  margin: 0 0 .75rem;
}

/* Campo em flex-wrap, não em grade: as sete pautas variam muito de largura
   ("Massa" x "Dúvidas frequentes") e uma grade rígida deixaria buracos.
   Envolvendo, elas fluem em ~3 fileiras a 1280px e ~5–7 a 360px, sem
   nenhum risco de scroll horizontal em qualquer largura. */
.palco__pautas {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: .6rem .55rem;
}
.palco__pautas li {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: var(--bistre);
  color: var(--verde-neon);        /* 10,87:1 sobre --bistre — AA em qualquer tamanho */
  border: 1px solid rgb(57 255 20 / 0.3);
  border-radius: var(--radius-pill);
  padding: .58rem 1.1rem;
  font-weight: 700;
  font-size: 1.02rem;      /* subiu de .95rem: no painel de ~980px as pílulas
                              menores liam como uma tira frouxa, sem presença */
  line-height: 1.25;
}
.palco__pautas li::before {
  content: "✓";
  font-weight: 800;
  opacity: .85;
}
/* Desalinho orgânico: `rotate` é propriedade independente, então não
   disputa a `transform` usada na entrada em cascata. */
.palco__pautas li:nth-child(odd) { rotate: -.6deg; }
.palco__pautas li:nth-child(even) { rotate: .7deg; }   /* -1°/+1,2° na 1ª versão: no
                                                          painel real lia como adesivo
                                                          mal colado, não como orgânico */
.palco__pautas li:nth-child(3n+2) { margin-top: .35rem; }

/* Cascata de 60ms: --i é o índice de cada pílula. */
.palco__pautas li:nth-child(1) { --i: 0; }
.palco__pautas li:nth-child(2) { --i: 1; }
.palco__pautas li:nth-child(3) { --i: 2; }
.palco__pautas li:nth-child(4) { --i: 3; }
.palco__pautas li:nth-child(5) { --i: 4; }
.palco__pautas li:nth-child(6) { --i: 5; }
.palco__pautas li:nth-child(7) { --i: 6; }

html.js .palco__pautas li {
  opacity: 0;
  transform: translateY(16px) scale(.94);
  transition: opacity .42s var(--ease-out), transform .42s var(--ease-out);
}
html.js .destrave.is-destravado .palco__pautas li {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 60ms);
}
/* Ao desligar, o atraso some junto com .is-destravado: as sete somem
   juntas em vez de sair em cascata reversa (a volta é rápida, a ida é o
   momento). */

/* Replay ao trocar de profissão com o interruptor ligado: o painel novo
   estava em display:none e não teria estado inicial para transicionar.
   Especificidade propositalmente maior (5 classes) que a regra de
   .is-destravado (4 classes) para não depender da ordem no arquivo. */
html.js .destrave .palco.is-replay .palco__pautas li {
  opacity: 0;
  transform: translateY(16px) scale(.94);
  transition: none;
}

/* "Eu vejo" também faz parte da revelação */
html.js .destrave:not(.is-destravado) .palco__euvejo { opacity: 0; }
.palco__euvejo { transition: opacity .35s var(--ease-out); }

/* ---- O contador -------------------------------------------------------- */
.palco__contador {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
}
.palco__num {
  font-family: 'Boldonse', sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 7vw, 4.5rem);   /* muito acima dos 24px que o verde exige */
  line-height: 1;
  color: var(--verde-neon);              /* 6,40:1 sobre --roxo-fundo */
  font-variant-numeric: tabular-nums;    /* a contagem 0→7 não treme a largura */
  transition: color .4s var(--ease-out);
}
.palco__legenda {
  font-weight: 700;
  font-size: var(--step-small);
  line-height: 1.3;
  color: rgb(250 246 241 / 0.88);
  transition: opacity .35s var(--ease-out) .25s;
}
/* Desligado: só o "0" apagado. A legenda é a promessa — não se entrega
   antes de a pessoa acionar. */
/* CORREÇÃO FINAL (M1): 0.3 media 2,12:1 sobre --roxo-fundo — o "0" é
   texto de 48-72px, piso 3:1. 0.50 mede 3,31:1. */
html.js .destrave:not(.is-destravado) .palco__num { color: rgb(250 246 241 / 0.5); }
html.js .destrave:not(.is-destravado) .palco__legenda { opacity: 0; transition-delay: 0s; }

/* ---- Movimento reduzido -------------------------------------------------
   O interruptor continua funcionando: o que some é o VOO (translate/scale)
   e a contagem animada. As pílulas apenas aparecem, e o JS já entrega o
   número final direto (ver prefereMovimentoReduzido em js/main.js).
   O bloco global de reduced-motion mais acima já zera `animation`; aqui
   zeram-se as transições próprias desta seção. */
@media (prefers-reduced-motion: reduce) {
  .palco__campo,
  .palco__palavra,
  .palco__leitura,
  .palco__euvejo,
  .palco__legenda,
  .palco__num,
  .switch,
  .switch__track,
  .switch__thumb,
  .tabs__btn,
  html.js .palco__pautas li { transition: none !important; }

  html.js .palco__pautas li { transform: none !important; }
  html.js .destrave.is-destravado .palco__pautas li { transition-delay: 0s !important; }
  html.js .destrave .palco.is-replay .palco__pautas li { transform: none !important; }
  html.js .virada__destaque::after { transform: scaleX(1) !important; transition: none !important; }
  .switch:hover { transform: none; }
}

/* =====================================================================
   PRODUTO POR DENTRO + BENEFÍCIOS (Task 5)

   Duas seções claras (--claro). Nenhuma fita curva nova aqui: a fita da
   base de #virada já resolve a passagem chapada→clara na fronteira com
   #produto (Task 4), e #produto → #beneficios → #prova são todas claras —
   sem mudança de "momento de cor" nessas fronteiras, uma curva ali seria
   ruído, não linguagem (a direção de arte reserva a fita pra transição
   chapada↔clara).

   O traço verde-neon (`.virada__destaque`, Task 4) é reaproveitado nas
   duas headlines desta task ("sua rotina real." / "destravar") em vez de
   nascer uma
   classe irmã. A classe original foi desenhada pro fundo --roxo, onde o
   texto verde-neon mede 4,42:1 (só passa a AA por ser ≥24px, ver Task 2).
   Sobre --claro o mesmo verde mede ~1,26:1 — reprova longe. As duas regras
   abaixo devolvem a COR DO TEXTO ao padrão do heading nestas seções,
   mantendo só o traço (::after, decorativo, sem exigência de contraste de
   texto) em verde-neon: o gesto tipográfico sobrevive, o texto continua
   legível. */
.produto .virada__destaque,
.beneficios .virada__destaque,
.prova .virada__destaque,
.yugui .virada__destaque { color: inherit; }

/* ---- #produto: intro assimétrica ---------------------------------------
   Direção de arte, item 2: seções claras invertem a âncora do hero (lá a
   foto fica à direita) — aqui o mockup do manual no celular fica à
   esquerda, o texto à direita. */
.produto__intro {
  display: grid;
  gap: var(--space-md);
  align-items: center;
}
@media (min-width: 760px) {
  .produto__intro { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-lg); }
}

.produto__mockup {
  margin: 0;
  max-width: 260px;
  margin-inline: auto;
}
@media (min-width: 760px) {
  .produto__mockup { max-width: 300px; margin-inline: 0; }
}
/* CORREÇÃO FINAL (M2): `mockup-capa-iphone.webp` é um RECORTE — tem canal
   alfa e os cantos do arquivo são transparentes (verificado: pixel 0,0 =
   rgba(0,0,0,0)). `box-shadow` e `border-radius` são pintados na caixa
   retangular do elemento, não no contorno do celular, então desenhavam um
   retângulo flutuando atrás da imagem (gritante sobre o roxo de #oferta, e
   também visível como halo reto sobre o --claro de #produto). A elevação
   real desta peça já vem do próprio recorte com sombra do mockup. */
.produto__mockup img {
  display: block;
  width: 100%;
  height: auto;
  rotate: -3deg;
}

.produto__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}
.produto__head > * { margin: 0; }

/* ---- Galeria do manual ---------------------------------------------------
   Correção 1 (revisão): a versão original virava grade de 5 colunas a
   partir de 860px, limitada por --container (1080px) — em 1280px as
   páginas renderizavam a 125-193px de largura, corpo de texto ilegível.
   Estrutural (persistia até 1920px, pois o grid é limitado pelo
   container). Esta seção existe para matar a objeção "isso é só um PDF
   genérico?" — um thumbnail decorativo faz o oposto.

   Correção: abandona o grid em qualquer largura. Rolagem horizontal com
   scroll-snap SEMPRE, cartões grandes o bastante pra leitura real (mira
   380-460px de largura de imagem renderizada; as imagens originais têm
   640px, então não há upscaling). Fica fora de .container pra sangrar até
   a borda do viewport em qualquer breakpoint (direção de arte: assimetria
   e sangramento) — cabe mais de uma página na tela sem encolher nenhuma.
   A affordance de "tem mais conteúdo" é o próximo cartão espiando na
   lateral (mais honesto que degradê), não um efeito visual à parte — é
   consequência direta do cartão não caber inteiro no viewport.
   O overflow é sempre CONTIDO neste elemento (overflow-x:auto), nunca vaza
   pra scroll horizontal da página. O padding-inline reaplica o
   alinhamento do container pro primeiro cartão. */
.galeria { margin-top: var(--space-lg); width: 100%; }
.galeria__lista {
  list-style: none;
  margin: 0;
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  padding: var(--space-2xs) clamp(1.25rem, 4vw, 2.5rem) var(--space-sm);
  -webkit-overflow-scrolling: touch;
}

.galeria__item {
  flex: 0 0 clamp(230px, 64vw, 300px);
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
}
/* A dupla manicure/engenheiro é a prova mais forte da promessa "serve pra
   qualquer profissão" (brief da task): ganha cartão maior em qualquer
   largura. */
.galeria__item--manicure,
.galeria__item--engenheiro { flex-basis: clamp(260px, 76vw, 340px); }
@media (min-width: 860px) {
  /* Tamanhos fixos (não vw) a partir daqui: o cartão para de crescer com
     o viewport porque a meta é largura de leitura, não preencher tela.
     410px de cartão → ~390px de imagem (cartão tem 10px de padding lateral
     em .galeria__cartao); 470px → ~450px na dupla manicure/engenheiro.
     Ambos dentro da faixa 380-460px pedida, sem upscaling (original 640px). */
  .galeria__item { flex-basis: 410px; }
  .galeria__item--manicure,
  .galeria__item--engenheiro { flex-basis: 470px; }
}

.galeria__tag {
  display: block;
  font-weight: 800;
  font-size: var(--step-small);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--bistre);
  margin-bottom: var(--space-2xs);
}

/* "Cards de papel espalhados na mesa": leve rotação alternada + sombra
   difusa (elevação real — mockup do manual, direção de arte item 4).
   `rotate` é propriedade própria (mesmo padrão de .palco__pautas), assim o
   hover anima `transform` sem disputar a rotação de base. overflow:hidden
   no cartão (não na imagem) clipa a imagem nos cantos arredondados sem
   precisar repetir o border-radius nela. */
.galeria__cartao {
  background: var(--papel);
  border-radius: var(--radius);
  padding: 10px 10px 0;
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), rotate .25s var(--ease-out);
}
.galeria__cartao img {
  display: block;
  width: 100%;
  height: auto;
}
.galeria__item:nth-child(odd) .galeria__cartao { rotate: -1.4deg; }
.galeria__item:nth-child(even) .galeria__cartao { rotate: 1.2deg; }
.galeria__item:hover .galeria__cartao,
.galeria__item:focus-within .galeria__cartao {
  rotate: 0deg;
  transform: translateY(-6px);
  box-shadow: 0 26px 64px rgb(22 16 11 / 0.22);
}

.galeria__legenda {
  margin: var(--space-xs) 0 0;
  font-size: var(--step-small);
  color: var(--tinta-suave);
  line-height: 1.45;
}

/* ---- #beneficios ---------------------------------------------------------
   Assimetria proposital (direção de arte item 2): o cabeçalho fica
   ancorado à esquerda e mais estreito que a grade de cartões, que ocupa a
   largura toda do container — mesma lógica de .virada__head. */
.beneficios__head { max-width: 40ch; }
.beneficios__head .pill { margin-bottom: var(--space-xs); }

/* CORREÇÃO FINAL (M5): a base era `repeat(2, 1fr)` em QUALQUER largura. A
   390px isso deixava ~118px de texto útil por cartão e h3 de até 4 linhas
   ("Nunca mais fique sem ideia do que postar" quebrava em quatro). Agora a
   base é uma coluna e as duas só entram a partir de 480px, onde o cartão
   volta a ter largura de leitura. */
.beneficios__lista {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 480px) {
  .beneficios__lista { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .beneficios__lista { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
}

/* Profundidade por camada sobre --claro: reusa .card (papel + borda quente
   + sombra quente) no HTML (`class="beneficio card"`) em vez de reimplementar
   as mesmas 5 propriedades; .beneficio soma só a transição e o hover, que
   acende o contorno em --roxo — nunca laranja aqui, que é reservado a
   clicável de ação (não há CTA nestes cartões). */
.beneficio {
  transition: transform .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
/* translateY soma var(--reveal-y, 0px) em vez de um valor fixo — o card
   também é `.reveal`; ver nota na seção "Reveals" no topo do arquivo. */
.beneficio:hover,
.beneficio:focus-within {
  transform: translateY(calc(var(--reveal-y, 0px) - 4px));
  border-color: rgb(var(--roxo-rgb) / 0.45);
  box-shadow: var(--shadow-elevated);
}

/* Selo redondo bistre + verde-neon: mesma linguagem cromática das pílulas
   de pauta da virada (10,87:1, AA em qualquer tamanho) — reforça que cada
   card aqui também é "conteúdo revelado" pelo método. */
.beneficio__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  background: var(--bistre);
  color: var(--verde-neon);
  font-weight: 800;
  margin-bottom: var(--space-xs);
}

.beneficio h3 { margin-bottom: .4rem; }
.beneficio p { color: var(--tinta-suave); margin: 0; }

/* ---- CTA de meio de página ----------------------------------------------
   CORREÇÃO FINAL (A4): entre o painel da virada (y≈2.365) e a oferta
   (y≈10.632) havia ~8.000px sem NADA clicável, e a barra fixa some a partir
   de 768px — tablet e desktop ficavam com CTA só no topo e no fim. Dois
   pontos de saída novos: um logo depois de #beneficios (a pessoa acabou de
   ler o que ganha) e um depois de #prova (acabou de ver que funcionou pros
   outros). Cada um leva a classe `js-checkout`, que é o gancho do
   InitiateCheckout do Meta Pixel — sem ela o evento daquele botão não
   dispara.
   Sem componente novo: é o `.btn-cta` de sempre, só centralizado num bloco
   com respiro próprio. */
.cta-meio {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
}
.cta-meio p {
  margin: 0;
  max-width: 46ch;
  font-weight: 600;
  color: var(--tinta-suave);
}

@media (prefers-reduced-motion: reduce) {
  .galeria__cartao,
  .beneficio { transition: none; }
  .galeria__item:hover .galeria__cartao,
  .galeria__item:focus-within .galeria__cartao,
  .beneficio:hover,
  .beneficio:focus-within { transform: none; }
}

/* =====================================================================
   PROVA SOCIAL + QUEM É YUGUI (Task 6)

   Duas seções --claro, sem fita nova (mesmo motivo do bloco acima:
   #beneficios → #prova → #yugui são todas claras, nenhuma troca de
   "momento de cor" pra marcar).

   COMPONENTE COMPARTILHADO: `.fone` é a moldura de celular reusada nas
   duas seções (prints de prova social e reels de alcance) — exatamente
   como pede a direção de arte ("uma única componente de moldura"). Ao
   contrário de `.galeria__cartao` (que gira e ganha sombra de "cartão de
   papel na mesa" porque são páginas de um produto), o `.fone` fica reto,
   sem rotate: é evidência, não peça de design — girar um print de
   depoimento pareceria menos verídico. */
.fone {
  --fone-bezel: 8px;
  position: relative;
  background: var(--escuro);
  border-radius: var(--radius-lg);
  padding: var(--fone-bezel) var(--fone-bezel) calc(var(--fone-bezel) * 1.5);
  box-shadow: var(--shadow-elevated);
}
.fone__tela {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - var(--fone-bezel));
  background: #000;
}
.fone__tela img { display: block; width: 100%; height: auto; }
/* Notch fake: pílula escura sobreposta ao topo da tela — decorativa
   (aria-hidden), não recorta conteúdo real porque fica por cima, não
   clipa. z-index explícito porque `.fone__notch` (irmão anterior no DOM)
   e `.fone__tela` são ambos positioned; sem z-index a ordem do DOM
   colocaria a tela por cima do notch. */
.fone__notch {
  position: absolute;
  top: var(--fone-bezel);
  left: 50%;
  translate: -50% 0;
  width: 28%;
  max-width: 84px;
  height: 18px;
  background: var(--escuro);
  border-radius: var(--radius-pill);
  z-index: 2;
}
/* Selo de visualizações: só usado nos reels de #yugui (não nos prints de
   prova social). Bistre translúcido + blur — nunca verde-neon: a métrica
   de alcance do Yugui como criador não é "conteúdo revelado pelo método",
   então não usa a cor reservada a isso (regra da direção de arte).

   Correção: os prints de reel já trazem o próprio selo de visualizações
   do Instagram queimado no pixel, perto do canto inferior esquerdo. A
   primeira versão deste selo (só a pílula, sem véu) deixava esse selo
   nativo espiando ao lado/atrás da pílula — duas contagens "13,5 mi" e
   "mi" lado a lado, lia como bug. O véu (`::after`, gradiente escuro de
   baixo para cima) cobre por completo a faixa onde o selo nativo vive,
   em qualquer proporção de imagem renderizada; o selo nosso é a ÚNICA
   contagem visível. */
.yugui__fila-item .fone__tela::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  /* Unidade relativa (% da altura da tela), não px fixo: a faixa precisa
     acompanhar a imagem quando ela é redimensionada pelo layout (card
     varia de ~246px a ~284px de largura conforme breakpoint). Em px fixo
     o véu descolava da posição real do selo nativo em larguras diferentes
     da usada pra calibrar. */
  height: 17.6%;
  /* Trecho sólido nos primeiros 73% da própria faixa (medido nos 4
     originais com `magick -crop`: o selo nativo do Instagram ocupa a
     faixa de ~3,5% a ~8% do rodapé da imagem — a folga dá margem) e só
     então funde pra transparente. Um gradiente 100%→0% sem o patamar
     sólido deixava o topo do selo nativo entrar na zona de fade e ainda
     aparecer, de leve, atrás do nosso selo (o selo do Instagram tem fundo
     próprio, não é só texto solto sobre o vídeo). */
  background: linear-gradient(to top,
    rgb(22 16 11) 0,
    rgb(22 16 11) 73%,
    rgb(22 16 11 / 0) 100%);
  pointer-events: none;
  z-index: 1;
}
.fone__selo {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  /* Régua de Chanel (Task 8): sem backdrop-filter. O selo já pousa sobre o
     véu opaco de `.yugui__fila-item .fone__tela::after` (gradiente
     projetado especificamente para garantir legibilidade aqui) — o blur
     era um acessório resolvendo um problema que o véu já resolve sozinho.
     Fundo um pouco mais opaco (0.72) compensa a ausência do blur sem
     depender dele para o contraste do texto. */
  background: rgb(22 16 11 / 0.72);
  color: var(--papel);
  font-weight: 800;
  font-size: var(--step-small);
  letter-spacing: .02em;
  padding: .4rem .8rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgb(255 255 255 / 0.25);
}

/* Faixa de rolagem: mesmo padrão de `.galeria`/`.galeria__lista` (Task 5)
   — sangra até a borda do viewport, `scroll-snap-type: x mandatory`,
   overflow sempre contido no próprio elemento, nunca na página. Repetido
   (não abstraído numa classe genérica) porque a task não deve tocar em
   nada da Task 5; a técnica é a mesma, os nomes seguem o prefixo de cada
   seção. */
.prova__fila,
.yugui__fila { margin-top: var(--space-lg); width: 100%; }
.prova__fila-lista,
.yugui__fila-lista {
  list-style: none;
  margin: 0;
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  padding: var(--space-2xs) clamp(1.25rem, 4vw, 2.5rem) var(--space-sm);
  -webkit-overflow-scrolling: touch;
}
.prova__fila-item,
.yugui__fila-item {
  flex: none;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  transition: transform .25s var(--ease-out);
}
/* translateY soma var(--reveal-y, 0px) em vez de um valor fixo — os itens
   também são `.reveal`; mesmo padrão de `.btn-cta`/`.beneficio` (ver nota
   na seção "Reveals"), pra o hover nunca ser vencido (ou saltar) durante a
   animação de entrada. */
.prova__fila-item:hover,
.prova__fila-item:focus-within,
.yugui__fila-item:hover,
.yugui__fila-item:focus-within { transform: translateY(calc(var(--reveal-y, 0px) - 6px)); }

/* Print de conversa: 640×1391 originais (proporção de captura de tela de
   iPhone inteira). Piso de 258px garante ≥240px de imagem renderizada já
   em 360px de viewport (258 − 16px de bezel = 242px); teto fixo no
   desktop evita upscaling (original é 640px de largura). */
.prova__fila-item { flex-basis: clamp(258px, 74vw, 320px); }
@media (min-width: 860px) { .prova__fila-item { flex-basis: 340px; } }

/* Reel: 480×~855 originais (proporção de vídeo vertical, mais curta que
   a tela inteira do iPhone). Piso de 262px garante o mesmo ≥240px de
   imagem renderizada a 360px (262 − 16px = 246px). */
.yugui__fila-item { flex-basis: clamp(262px, 70vw, 300px); }
@media (min-width: 860px) { .yugui__fila-item { flex-basis: 280px; } }

/* ---- #prova ------------------------------------------------------------ */
.prova__head { max-width: 62ch; }
.prova__head > * { margin-bottom: var(--space-xs); }
.prova__head > *:last-child { margin-bottom: 0; }

/* Camada tipográfica: 3 citações grandes, além dos prints — a leitura
   rápida ao lado da prova em si. Grade assimétrica no desktop (a segunda
   citação desce um pouco, eco discreto da assimetria proposital da
   direção de arte) em vez de três colunas perfeitamente alinhadas. */
.prova__citacoes {
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-sm);
}
@media (min-width: 860px) {
  .prova__citacoes { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
  .prova__citacoes li:nth-child(2) { margin-top: var(--space-md); }
}

.citacao {
  position: relative;
  background: var(--papel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-md) var(--space-sm) var(--space-sm);
}
.citacao blockquote {
  margin: 0 0 var(--space-xs);
}
.citacao blockquote p {
  margin: 0;
  font-family: 'Gabarito', sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.02rem + .6vw, 1.4rem);
  line-height: 1.35;
  color: var(--tinta);
}
/* Aspas gigantes em Boldonse: corrigido na revisão da Task 6 (achado
   IMPORTANT) — o glifo é puramente decorativo e não é clicável, então
   --laranja (reservado a ação) estava errado aqui. Trocado para --bistre,
   o mesmo marrom de marca (Pantone 476C) já usado como tinta decorativa em
   .pill e nas pautas do painel — 14,73:1 sobre --papel (branco), passa AAA. */
.citacao::before {
  content: '"';
  position: absolute;
  top: .1em;
  left: var(--space-sm);
  font-family: 'Boldonse', sans-serif;
  font-size: 3rem;
  line-height: 1;
  color: var(--bistre);
  opacity: .9;
}
.citacao cite {
  display: block;
  font-style: normal;
  font-weight: 800;
  font-size: var(--step-small);
  color: var(--tinta-suave);
}

/* ---- Faixa de prints (#prova) ------------------------------------------- */
.prova__fila-legenda {
  margin: var(--space-xs) 0 0;
  font-size: var(--step-small);
  color: var(--tinta-suave);
  line-height: 1.45;
}

/* ---- #yugui -------------------------------------------------------------
   Âncora invertida em relação a #produto: texto à esquerda, foto sangrando
   para a direita — ecoa o hero (direção de arte, item 2: seções claras
   invertem a âncora da anterior). No mobile o texto vem antes da foto,
   mesma ordem do hero. */
.yugui__grid {
  display: grid;
  gap: var(--space-lg);
  align-items: center;
}
@media (min-width: 760px) {
  .yugui__grid { grid-template-columns: 1.05fr .95fr; }
}

.yugui__bio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
}
.yugui__bio > * { margin: 0; }

.yugui__fatos {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.yugui__fatos li {
  background: var(--papel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-soft);
  padding: .5rem 1rem;
  font-weight: 800;
  font-size: var(--step-small);
  color: var(--tinta-suave);
}

/* Duas fotos (Task 6.5): o retrato novo (estúdio, fundo branco) é a foto
   principal — reta, sem rotate, mesmo tom sério do #yugui de antes. A foto
   de bastidor (rua, sem estrutura) vira um cartão de prova menor logo
   abaixo, porque a legenda dela carrega um ponto de venda específico ("o
   método funciona fora do estúdio também") que não fazia sentido descartar
   — não é imagem empilhada só para preencher espaço. */
.yugui__fotos {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.yugui__foto { margin: 0; }
.yugui__foto--principal img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}

.yugui__foto--bastidor {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  background: var(--papel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-2xs);
}
.yugui__foto--bastidor img {
  display: block;
  width: 84px;
  height: auto;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  rotate: -2deg;         /* candidato ao acaso, diferencia do retrato reto —
                             `rotate` é propriedade própria (mesmo padrão de
                             .galeria__cartao), não briga com --reveal-y */
}
.yugui__foto--bastidor figcaption {
  margin: 0;
  font-size: var(--step-small);
  color: var(--tinta-suave);
  line-height: 1.45;
}

.yugui__metricas {
  margin-top: var(--space-lg);
  max-width: 62ch;
}
.yugui__metricas > * { margin-bottom: var(--space-xs); }
.yugui__metricas > *:last-child { margin-bottom: 0; }

.yugui__fila-legenda {
  margin: var(--space-xs) 0 0;
  font-size: var(--step-small);
  color: var(--tinta-suave);
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .prova__fila-item,
  .yugui__fila-item { transition: none; }
  .prova__fila-item:hover,
  .prova__fila-item:focus-within,
  .yugui__fila-item:hover,
  .yugui__fila-item:focus-within { transform: none; }
}

/* =====================================================================
   OFERTA + FAQ + STICKY CTA MOBILE (Task 7)

   Zona de decisão. A direção de arte é explícita: "a ousadia é do meio da
   página" — a virada (Task 4) já gastou o orçamento de invenção do site.
   Aqui é o oposto de propósito: preço, garantia e botão numa coluna só,
   hierarquia óbvia, nada em movimento além do reveal padrão que toda
   seção já tem. O cartão de preço reaproveita a mesma linguagem de
   profundidade já estabelecida (--roxo-fundo + contorno 1px translúcido
   de .destrave) em vez de inventar um componente novo.
   ===================================================================== */

/* ---- #oferta -------------------------------------------------------------
   Chapada (roxo) entre duas seções claras (#yugui acima, #faq abaixo):
   as DUAS fronteiras são "passagem de chapada para clara" e cada uma
   pede sua fita curva (direção de arte, item 1). Reaproveita os dois
   mesmos path shapes já usados em #virada — "duas variações apenas,
   alternadas": não é uma terceira curva nova, é o mesmo ritmo se
   repetindo. Duplicado como classes próprias (não uma classe genérica
   .virada__fita reaproveitada) pelo mesmo motivo já documentado em
   .prova__fila/.yugui__fila: a task não deve tocar em nada da Task 4. */
.oferta {
  position: relative;                        /* âncora das fitas curvas */
  padding-block: clamp(5rem, 11vw, 8.5rem);  /* maior que o .section padrão: abre espaço pras fitas, mesmo valor de .virada */
}
.oferta__fita {
  position: absolute;
  left: 0;
  width: 100%;
  height: clamp(34px, 5.5vw, 78px);
  display: block;
  color: var(--claro);
  pointer-events: none;
}
.oferta__fita--topo { top: -1px; }
.oferta__fita--base { bottom: -1px; }

/* Grid: mockup à esquerda, bloco de decisão à direita — mesma âncora de
   #produto (mockup também à esquerda), sem alternar aqui porque a
   direção de arte reserva a alternância assimétrica pras seções de
   conteúdo, não pra zona de decisão. No mobile o mockup empilha acima do
   bloco, mas preço+garantia continuam colados no mesmo cartão — nunca
   dependem de rolagem extra pra aparecerem juntos. */
.oferta__grid {
  display: grid;
  gap: var(--space-md);
  align-items: start;
}
@media (min-width: 760px) {
  .oferta__grid { grid-template-columns: 0.78fr 1.22fr; align-items: center; gap: var(--space-lg); }
}

.oferta__mockup {
  margin: 0;
  max-width: 210px;
  margin-inline: auto;
}
@media (min-width: 760px) {
  .oferta__mockup { max-width: 260px; margin-inline: 0; }
}
.oferta__mockup img {
  display: block;
  width: 100%;
  height: auto;
  /* sem rotate: a virada e o produto já giram o mockup — aqui, na zona
     mais quieta do site, ele fica reto.
     Sem box-shadow/border-radius: a imagem é um recorte com alfa e a
     sombra retangular aparecia como um bloco flutuando atrás do celular
     sobre o roxo — ver nota completa em .produto__mockup img (M2). */
}

.oferta__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.oferta__box > * { margin: 0; }
.oferta__box h2 { max-width: 18ch; }
.oferta__box > p:first-of-type { max-width: 52ch; }
/* 0.78, não um valor menor: essa <s> vive dentro do cartão --roxo-fundo
   (contraste-base mais alto que --roxo), e 0.78 mede 5.64:1 — abaixo
   disso (testado 0.65) cai a 4.46:1 e reprova AA por pouco. */
.oferta__box s { color: rgb(250 246 241 / 0.78); }

.oferta__label {
  font-weight: 800;
  font-size: var(--step-small);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgb(250 246 241 / 0.88);
}

/* Lista "o que inclui": marca neutra (círculo translúcido), nunca verde-
   neon — essa cor é reservada ao conteúdo que o MÉTODO revela (as 7
   pautas, o contador, o traço de headline), e uma lista de itens do
   produto não é isso (direção de arte, regra do sistema de cor). */
.oferta__inclui {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 100%;
}
.oferta__inclui li {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-weight: 600;
}
.oferta__inclui li::before {
  content: "✓";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: var(--claro);
  font-size: .78rem;
  font-weight: 800;
  margin-top: .1em;
}

/* Cartão único: preço e garantia colados no MESMO bloco visual — requisito
   de conversão explícito (a página antiga escondia a garantia no rodapé).
   Reaproveita a linguagem de profundidade de .destrave (--roxo-fundo +
   contorno 1px translúcido). */
.oferta__preco-card {
  width: 100%;
  background: var(--roxo-fundo);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius-lg);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.oferta__preco {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .6rem;
}
.oferta__de {
  font-size: var(--step-body);
  font-weight: 600;
  color: rgb(250 246 241 / 0.8);
}
/* Boldonse reservada a display: o preço em destaque segue o mesmo
   precedente de .palco__num (numeral grande = display, não corpo). */
.oferta__valor {
  font-family: 'Boldonse', sans-serif;
  font-weight: 400;
  font-size: clamp(2.3rem, 1.9rem + 1.8vw, 3.1rem);
  line-height: 1;
  color: var(--claro);
}
.oferta__parcela {
  flex-basis: 100%;
  font-size: var(--step-small);
  font-weight: 600;
  color: rgb(250 246 241 / 0.8);
}
.oferta__garantia {
  margin: 0;
  padding-top: var(--space-xs);
  border-top: 1px solid rgb(255 255 255 / 0.16);
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-weight: 700;
  font-size: var(--step-body);
  line-height: 1.45;
}
.oferta__garantia span[aria-hidden] { flex: none; }

.btn-cta--grande {
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  padding: 1.25rem 2rem;
}

.oferta__seguro {
  margin: 0;
  font-size: var(--step-small);
  /* 0.88, o mesmo valor calibrado que .lead/.fine-print/small usam sobre
     --roxo (4,73:1) — este texto fica direto sobre --roxo (fora do
     cartão --roxo-fundo), então precisa do valor mais alto pra passar AA. */
  color: rgb(250 246 241 / 0.88);
}

/* ---- #faq ------------------------------------------------------------
   Ainda a zona de decisão: --claro, uma coluna estreita (.container--narrow,
   reaproveitada de #dor), sem nenhuma fita nova nesta fronteira — o rodapé
   logo abaixo é --escuro, não é uma seção clara/chapada no sentido da
   direção de arte. */
.faq .pill { margin-bottom: var(--space-xs); }
.faq h2 { margin-bottom: 0; }

.faq__lista {
  margin-top: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* <details>/<summary> nativo: funciona sem JS por natureza (o navegador
   já sabe abrir/fechar). initFaq() só soma o comportamento de acordeão
   (fechar os outros ao abrir um) — sem JS, vários itens podem ficar
   abertos ao mesmo tempo, e está tudo bem: o conteúdo continua acessível,
   só o acordeão não existe. */
.faq__item {
  background: var(--papel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-xs) var(--space-sm);
  transition: border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.faq__item[open] {
  border-color: rgb(var(--roxo-rgb) / 0.35);
  box-shadow: var(--shadow-card);
}

.faq__pergunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  cursor: pointer;
  list-style: none;
  font-family: 'Gabarito', sans-serif;
  font-weight: 800;
  font-size: var(--step-body);
  color: var(--tinta);
  padding-block: .3rem;
}
.faq__pergunta::-webkit-details-marker { display: none; }
.faq__pergunta::marker { content: ""; }
/* Sinal "+"/"×": é parte do controle clicável (o <summary> inteiro é o
   alvo do clique), por isso pode acender em laranja quando aberto — mesma
   lógica do interruptor da virada, que também é laranja só porque é ação. */
.faq__pergunta::after {
  content: "+";
  flex: none;
  font-family: 'Gabarito', sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--tinta-suave);
  transition: transform .3s var(--ease-out), color .3s var(--ease-out);
}
.faq__item[open] .faq__pergunta::after {
  transform: rotate(45deg);
  color: var(--laranja-escuro);
}

/* Animação de abertura em grid-template-rows: a regra de duas classes
   (.faq__item .faq__body, especificidade 0,2,0) tem prioridade sobre o
   `details:not([open]) > *:not(summary){display:none}` da UA stylesheet
   (especificidade 0,1,2) — por isso o wrapper fica sempre display:grid,
   em vez de sumir de golpe, e a altura pode transicionar via 0fr → 1fr.
   `overflow:hidden` no filho (não no grid em si) clipa o conteúdo
   enquanto a track ainda não chegou a 1fr. */
.faq__item .faq__body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .35s var(--ease-out), opacity .3s var(--ease-out);
}
.faq__item[open] .faq__body {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq__body > div {
  overflow: hidden;
  min-height: 0;
}
.faq__body p {
  margin: 0;
  padding-top: var(--space-xs);
  color: var(--tinta-suave);
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .faq__item,
  .faq__pergunta::after,
  .faq__item .faq__body { transition: none; }
}

/* ---- Barra fixa de CTA (mobile) ------------------------------------------
   "CTA fixo no mobile que some quando a oferta entra em cena" (direção de
   arte). Começa fora da tela/transparente; só a classe .is-on (JS) revela.
   Sem JS a classe nunca chega — a barra nunca aparece, e está certo: o
   link dentro dela continua sendo um <a> comum e funcional, mas os CTAs do
   hero, do meio e da oferta já cobrem a compra sem JavaScript (mesma
   postura de segurança de .destrave__barra: controle sem função é pior
   que ausência).

   REVERSÃO (correção residual): a barra existe SOMENTE no mobile
   (`display: none` a partir de 768px). Uma rodada anterior a liberou acima
   de 768px como botão flutuante de canto, o que passou a tapar a headline
   de prova social em 768px, o terceiro cartão de benefícios em 1280px, e
   imagens da galeria/prova social/métricas em outras larguras. O motivo
   original (vão longo sem CTA no desktop) já está resolvido por outra via:
   há CTAs no meio da página depois de #beneficios e depois de #prova.

   CORREÇÃO FINAL (M4): esconder só com `opacity: 0` + `pointer-events:
   none` deixava o <a> na ordem de tabulação mesmo invisível — quem navega
   por teclado caía num link que não dá para ver. `visibility: hidden` tira
   do foco de verdade e ainda permite transição (é uma propriedade
   animável de forma discreta: some só no fim da saída, aparece já no
   início da entrada). */
#sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  padding: .7rem clamp(1rem, 4vw, 1.5rem) calc(.7rem + env(safe-area-inset-bottom));
  background: rgb(22 16 11 / 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgb(255 255 255 / 0.12);
  transform: translateY(110%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out), visibility 0s linear .3s;
}
#sticky-cta.is-on {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .3s var(--ease-out), opacity .3s var(--ease-out), visibility 0s;
}
#sticky-cta .btn-cta {
  width: 100%;
  max-width: 420px;
  padding: .85rem 1.5rem;
  font-size: 1.05rem;
  box-shadow: none;   /* a sombra padrão do .btn-cta some sob a própria barra escura — redundante aqui */
}
@media (min-width: 768px) {
  #sticky-cta { display: none; }
}
/* Reserva de espaço no rodapé da página inteira, no mobile: a barra pode
   reaparecer perto do fim (sai de cena só enquanto #oferta está visível —
   volta a aparecer depois, durante #faq/rodapé, pelas duas observações
   independentes de initStickyCta()), e não pode cobrir o rodapé. */
@media (max-width: 767.98px) {
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

  /* Alvo de toque mínimo (44x44px, QA Task 10): no desktop a altura visual
     já basta, mas no mobile .tabs__btn (39px) e .faq__pergunta (36px) ficavam
     abaixo do piso recomendado. min-height + centralização por flex resolve
     sem alterar o tamanho da fonte nem o layout em telas maiores. */
  .tabs__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  .faq__pergunta { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #sticky-cta { transition: none; }
}