@charset "UTF-8";
/* =====================================================================
   PayTrainer · Landing Page Personal Trainer
   Folha de estilo unica e final. Dark premium, roxo profundo e neon.
   Base: SPEC.md secao 4 (design system) e secao 6 (contrato de classes).

   ---------------------------------------------------------------------
   UTILITARIOS FORA DO CONTRATO DA SECAO 6 (documentados aqui, conforme
   exigido). O HTML precisa usar exatamente estes nomes:

   .skip-link                       link de pular para o conteudo
   .site-header                     header fixo (elemento <header id="header">)
   .site-header__inner              linha interna do header (logo + CTA)
   .site-header.is-scrolled         estado apos 60px de scroll (JS)
   .logo                            wrapper do wordmark PayTrainer
   .phone__greet                    saudacao "Ola, Joao" no mockup
   .phone__label                    rotulo pequeno dentro do card do mockup
   .phone__value                    valor monetario dentro do card do mockup
   .phone__value--accent            variante neon (valor animado a receber)
   .phone__title                    titulo "Alunos" dentro do mockup
   .phone__name                     nome do aluno na linha do mockup
   .phone__amount                   valor do aluno na linha do mockup
   .phone__chips                    faixa de chips no rodape do card
   .phone__chip                     chip individual
   .video__caption                  texto do estado neutro da fachada de video
   .pain-list__item                 (contrato) item da lista de dor
   .pain-close                      bloco de fechamento da secao de dor
   .steps__support                  lista de apoio dos 3 passos
   .steps__support-item             item da lista de apoio
   .compare__title                  titulo de cada coluna do comparativo
   .shots__caption                  legenda de cada tela do app
   .cta-final__support              linha de apoio do CTA final
   .is-visible                      estado revelado de .reveal (JS)
   .no-js (no <html>)               fallback: revela tudo sem JS
   ===================================================================== */

/* ===== FONTE ===== */
@font-face {
  font-family: 'Manrope';
  src: url('../fonts/manrope-var.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ===== TOKENS ===== */
:root {
  /* Paleta */
  --bg: #07071A;
  --bg-2: #0C0C22;
  --surface: #12122E;
  --surface-2: #1A1A3A;
  --purple: #220A5A;
  --purple-lt: #3D1A78;
  --neon: #D5FF00;
  --cyan: #55C8F5;
  --text: #FFFFFF;
  --text-2: #B4B4CC;
  --text-3: #7A7A95;
  --ok: #4ADE80;
  --warn: #FBBF24;

  /* Texto sobre neon (contraste AA, ver SPEC secao 11) */
  --on-neon: #0A0A1A;

  /* Bordas e superficies translucidas */
  --line: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .16);

  /* Escala de espacamento (rem) */
  --s1: .5rem;
  --s2: .75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2rem;
  --s6: 3rem;
  --s7: 4rem;
  --s8: 6rem;
  --s9: 8rem;

  /* Raio */
  --r-card: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Layout */
  --container: 1140px;
  --gutter: 1.25rem;
  --header-h: 68px;

  /* Movimento */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .28s;
}

/* ===== RESET ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body,
h1, h2, h3, h4, p,
figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  padding-top: var(--header-h);
  background-color: var(--bg);
  color: var(--text-2);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button { cursor: pointer; }

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

strong, b { font-weight: 800; }

::selection {
  background: var(--neon);
  color: var(--on-neon);
}

/* ===== ACESSIBILIDADE ===== */
:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
  border-radius: 6px;
}

:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: .5rem;
  z-index: 200;
  transform: translate(-50%, -180%);
  padding: .75rem 1.25rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  background: var(--neon);
  color: var(--on-neon);
  font-weight: 700;
  font-size: .9375rem;
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus-visible { transform: translate(-50%, 0); }

/* ===== LAYOUT ===== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  padding-block: clamp(2.75rem, 5.5vw, 4.25rem);
}

.section--alt { background-color: var(--bg-2); }

/* ===== TIPOGRAFIA ===== */
.h1 span { display: block; }

.h1, h1 {
  color: var(--text);
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.06;
  text-wrap: pretty;
}

.h2, h2 {
  color: var(--text);
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.12;
  text-wrap: balance;
}

h3 {
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
}

.eyebrow {
  display: block;
  margin-bottom: var(--s2);
  color: var(--neon);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
}

.lead {
  max-width: 58ch;
  color: var(--text-2);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  font-weight: 500;
  line-height: 1.65;
}

.muted {
  color: var(--text-3);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.6;
}

:where(.section) .h2,
:where(.section) h2 { margin-bottom: var(--s3); }

:where(.section) .h2 + .lead,
:where(.section) h2 + .lead { margin-bottom: var(--s5); }

/* ===== BOTOES ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .875rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.2;
  text-align: center;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.btn--primary {
  background-color: var(--neon);
  color: var(--on-neon);
  box-shadow: 0 10px 34px -12px rgba(213, 255, 0, .55);
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -14px rgba(213, 255, 0, .7);
}

.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background-color: rgba(255, 255, 255, .03);
  border-color: var(--line-strong);
  color: var(--text);
}

.btn--ghost:hover {
  border-color: rgba(213, 255, 0, .5);
  color: var(--neon);
  transform: translateY(-2px);
}

.btn--lg {
  min-height: 58px;
  padding: 1.125rem 2rem;
  font-size: 1.0625rem;
}

/* ===== HEADER ===== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              backdrop-filter var(--dur) var(--ease);
}

.site-header.is-scrolled {
  background-color: rgba(7, 7, 26, .82);
  border-bottom-color: var(--line);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.logo img {
  height: 26px;
  width: auto;
}

.site-header .btn {
  min-height: 44px;
  padding: .625rem 1.125rem;
  font-size: .9375rem;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* respiro menor no rodape do hero: a faixa de credibilidade ja
     fecha o bloco, e o feedback pediu menos espaco vago entre secoes */
  padding-block: clamp(2.5rem, 5vw, 3.75rem) clamp(2rem, 4vw, 3rem);
}

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -22%;
  left: 50%;
  width: min(1180px, 150%);
  aspect-ratio: 3 / 2;
  transform: translateX(-50%);
  background:
    radial-gradient(42% 50% at 50% 46%, rgba(61, 26, 120, .62), rgba(34, 10, 90, 0) 72%),
    radial-gradient(26% 34% at 74% 26%, rgba(213, 255, 0, .12), rgba(213, 255, 0, 0) 70%),
    radial-gradient(30% 40% at 22% 62%, rgba(85, 200, 245, .10), rgba(85, 200, 245, 0) 72%);
  filter: blur(30px);
  pointer-events: none;
}

/* Mobile: coluna unica na ordem do documento, texto, video, botao.
   O botao fica abaixo do video de proposito: o video e o argumento,
   o botao e a acao que vem depois dele. */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 4.5vw, 2.5rem);
  align-items: center;
}

.hero__content { min-width: 0; }

.hero__content .h1,
.hero__content h1 { margin-bottom: var(--s4); }

/* o lead nao fecha mais o bloco com margem propria: quem separa e o
   gap do grid, igual entre texto, video e botao */
.hero__content .lead { margin-bottom: 0; }

.hero__cta { min-width: 0; }
.hero__cta .btn { max-width: 100%; }

.hero__visual { min-width: 0; }

@media (min-width: 900px) {
  .hero__grid {
    /* video a direita ocupa um pouco mais que o texto: ele e o ativo
       protagonista da pagina (VSL do fundador). O botao volta para a
       coluna do texto, logo abaixo do lead. */
    /* versao sem video: a foto e um retrato recortado, mais estreito que o
       player 16:9 que existia aqui. A coluna do texto fica com a folga. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    grid-template-areas:
      "content visual"
      "cta     visual";
    align-content: center;
    column-gap: clamp(2.5rem, 5vw, 4rem);
    row-gap: var(--s5);
  }
  .hero__content { grid-area: content; align-self: end; }
  .hero__cta     { grid-area: cta;     align-self: start; }
  .hero__visual  { grid-area: visual;  align-self: center; }
}

/* Os CTAs sao inline-flex dentro de bloco, entao nao herdam centralizacao.
   O do CTA final ja vem centralizado porque aquela secao inteira usa
   text-align:center; estes dois precisam da regra.
   .cta-block (o do meio, depois dos 3 passos) fica centralizado em qualquer
   largura, inclusive desktop, onde ele fecha o bloco do mockup.
   O do hero so no celular: no desktop ele mora na coluna de texto, ao lado da
   foto, e centralizar ali o descolaria do paragrafo que ele fecha. */
.cta-block { text-align: center; }

@media (max-width: 899px) {
  .hero__cta { text-align: center; }
}

/* No celular o CTA grande ocupava duas linhas e virava um bloco.
   Reduz para uma altura de toque confortavel sem virar banner. */
@media (max-width: 599px) {
  .btn--lg {
    min-height: 52px;
    padding: .875rem 1.375rem;
    font-size: .9375rem;
  }
}

/* ===== BARRA DE CREDIBILIDADE ===== */
.cred-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.5rem;
  margin-top: var(--s4);
}

.cred-bar__item {
  position: relative;
  padding-left: 1rem;
  color: var(--text-2);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
}

.cred-bar__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--neon);
}

/* ===== MOCKUP DO APP (.phone) ===== */
.phone {
  position: relative;
  width: min(300px, 82vw);
  margin-inline: auto;
  /* min-height em vez de aspect-ratio fixo: mantem a silhueta de aparelho
     sem criar area vazia quando o conteudo do mockup e mais curto. */
  min-height: 520px;
  display: flex;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 38px;
  background: linear-gradient(160deg, #2B2B55 0%, #14142E 42%, #07071A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    inset 0 0 0 1px rgba(0, 0, 0, .5),
    0 44px 90px -34px rgba(0, 0, 0, .95),
    0 0 90px -26px rgba(61, 26, 120, .85);
}

/* alto-falante */
.phone::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 5px;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, .12);
}

.phone__screen {
  /* min-height no .phone faz height:100% resolver para auto; flex:1 preenche
     a altura real do aparelho e mantem o margin-top:auto dos chips funcionando. */
  flex: 1;
  min-height: 0;
  padding: 30px 14px 16px;
  overflow: hidden;
  border-radius: 29px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(61, 26, 120, .55) 0%, rgba(12, 12, 34, 0) 62%),
    linear-gradient(180deg, #10102A 0%, #0A0A20 55%, #07071A 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* indicador inferior, detalhe de realismo do aparelho */
.phone__screen::after {
  content: "";
  flex: none;
  width: 96px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, .14);
}

.phone__greet {
  color: var(--text);
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.phone__card {
  padding: 11px 10px 9px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(26, 26, 58, .95) 0%, rgba(18, 18, 46, .95) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

.phone__label {
  display: block;
  color: var(--text-3);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.4;
}

.phone__value {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.phone__value--accent {
  color: var(--neon);
  text-shadow: 0 0 22px rgba(213, 255, 0, .35);
}

.phone__label + .phone__value { margin-bottom: 2px; }

.phone__card .phone__label:not(:first-child) { margin-top: 10px; }

.phone__title {
  margin-top: 2px;
  color: var(--text-2);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
}

.phone__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px;
  padding: 9px 0;
  border-top: 1px solid rgba(255, 255, 255, .06);
}

.phone__row:first-of-type { border-top: 0; }

.phone__name {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: clamp(.625rem, 2.9vw, .75rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone__amount {
  color: var(--text-2);
  font-size: clamp(.5625rem, 2.7vw, .6875rem);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: clamp(.5rem, 2.3vw, .625rem);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.status::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: currentColor;
}

.status--paid {
  color: var(--ok);
  background-color: rgba(74, 222, 128, .12);
  border-color: rgba(74, 222, 128, .30);
}

.status--pending {
  color: var(--warn);
  background-color: rgba(251, 191, 36, .12);
  border-color: rgba(251, 191, 36, .30);
}

.phone__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: auto;
  padding-top: 10px;
}

.phone__chip {
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, .04);
  color: var(--text-2);
  font-size: .625rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

/* Mockup do app no meio da pagina, dentro de "como funciona".
   Saiu do hero (onde agora fica o video) para dar prova visual do
   produto no ponto em que os 3 passos acabam de ser explicados. */
.steps__visual {
  display: flex;
  justify-content: center;
  margin-top: var(--s6);
}

/* No celular so o aparelho: a foto empilhada acima dele alongaria a pagina
   sem acrescentar informacao, e o feedback do time foi justamente encurtar. */
.steps__figure { display: none; }

@media (min-width: 860px) {
  /* O mockup sozinho e centralizado ficava orfao nesta largura. A foto do
     fundador apontando entra a DIREITA: o dedo dele aponta para a esquerda,
     entao dessa forma o gesto cria um vetor que leva o olho ate a tela.
     Do outro lado apontava para fora da pagina. */
  .steps__visual {
    display: grid;
    grid-template-columns: auto auto;
    align-items: end;
    justify-content: center;
    gap: clamp(.5rem, 3vw, 2.5rem);
  }
  .steps__figure {
    display: block;
    width: auto;
    height: clamp(360px, 34vw, 470px);
    /* mesmo tratamento do hero: halo que segue a silhueta. O degrade
       da base nao vem do CSS: ja esta no alpha do WebP, gerado por
       tools/cutout-fotos.py. */
    filter: drop-shadow(0 0 34px rgba(61, 26, 120, .7));
  }
}

/* Faixa de credibilidade abaixo do hero, em largura total.
   Saiu de dentro da coluna de texto, onde quebrava em duas linhas
   com a chegada do video ao lado. Segue a referencia usada no
   feedback, que tem a faixa de tags cruzando a largura da pagina. */
.hero .cred-bar {
  justify-content: flex-start;
  gap: .75rem 2rem;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}

/* ===== FIGURA DO FUNDADOR (versao sem video) ===== */

/* Recorte em PNG sobre fundo escuro. Ancorado na base, com um halo atras,
   para o corpo parecer apoiado no bloco e nao flutuando no meio da coluna. */
.hero__figure {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
}

.hero__figure::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -4%;
  width: min(125%, 540px);
  aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(61, 26, 120, .9), rgba(34, 10, 90, .38) 55%, rgba(7, 7, 26, 0) 76%),
    radial-gradient(closest-side at 50% 78%, rgba(213, 255, 0, .12), rgba(213, 255, 0, 0) 70%);
  pointer-events: none;
}

/* No celular quem manda e a largura: a figura ocupa quase o bloco inteiro.
   Antes, com a altura no comando, ela ficava com 196px de largura num
   container de 335px e boiava no meio do vazio. */
.hero__figure img {
  width: min(320px, 88vw);
  max-width: 100%;
  height: auto;
  /* drop-shadow segue o alpha do recorte, entao o halo abraca a silhueta em
     vez de desenhar um retangulo. box-shadow faria o retangulo. */
  filter: drop-shadow(0 0 28px rgba(61, 26, 120, .55));
}

/* o terco de baixo da foto de mobile e degrade, entao e area vazia ocupando
   layout. A margem negativa devolve esse espaco e sobe o botao, sem encostar
   em nada visivel. */
@media (max-width: 899px) {
  .hero__visual { margin-bottom: -3.5rem; }
}

@media (min-width: 900px) {
  /* no desktop quem manda e a altura, para casar com a coluna de texto */
  .hero__figure img {
    width: auto;
    height: clamp(300px, 42vw, 480px);
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
  }
}

/* ===== VIDEO (fachada de YouTube) =====
   A fachada continua estilizada aqui porque a branch with_video usa. Nesta
   versao nao existe nenhum .video no HTML, entao as regras ficam inertes. */


/* Estado temporario: a fachada existe mas o ID do YouTube ainda nao foi
   preenchido. Remover nada: o selo desaparece sozinho quando o ID entrar. */
.video--pending .video__facade::after {
  content: "Vídeo em breve";
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-pill);
  background-color: rgba(7, 7, 26, .82);
  color: var(--text-2);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .01em;
}

.video {
  max-width: 900px;
  margin-inline: auto;
}

.video__facade {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 90% at 50% 0%, rgba(61, 26, 120, .55) 0%, rgba(12, 12, 34, 0) 70%),
    var(--surface);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.video__facade:hover {
  transform: translateY(-3px);
  border-color: rgba(213, 255, 0, .30);
  box-shadow: 0 36px 80px -34px rgba(0, 0, 0, .95);
}

.video__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .75;
  transition: opacity var(--dur) var(--ease), transform .5s var(--ease);
}

.video__facade:hover .video__thumb {
  opacity: .9;
  transform: scale(1.02);
}

.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(58px, 9vw, 76px);
  aspect-ratio: 1;
  border: 0;
  border-radius: 50%;
  background-color: var(--neon);
  color: var(--on-neon);
  box-shadow: 0 0 0 10px rgba(213, 255, 0, .12), 0 14px 40px -12px rgba(213, 255, 0, .55);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  pointer-events: none;
}

.video__play:not(:has(svg))::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid currentColor;
}

.video__play svg {
  width: 40%;
  height: 40%;
  fill: currentColor;
}

.video__facade:hover .video__play {
  transform: translate(-50%, -50%) scale(1.07);
  box-shadow: 0 0 0 14px rgba(213, 255, 0, .16), 0 18px 50px -12px rgba(213, 255, 0, .7);
}

.video__caption {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3vw, 2rem);
  width: min(90%, 620px);
  transform: translateX(-50%);
  color: var(--text-2);
  font-size: clamp(.875rem, 1.8vw, 1.0625rem);
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

.video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: #000;
}

.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== DOR ===== */
.pain-list {
  display: grid;
  gap: .25rem;
  max-width: 720px;
  margin-top: var(--s5);
}

.pain-list__item {
  position: relative;
  padding: .75rem 0 .75rem 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: var(--text-2);
  font-size: 1.0625rem;
  line-height: 1.55;
}

.pain-list__item:last-child { border-bottom: 0; }

.pain-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.5em;
  width: .75rem;
  height: 2px;
  border-radius: 2px;
  background-color: var(--text-3);
}

.pain-close {
  margin-top: var(--s5);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid rgba(213, 255, 0, .22);
  border-radius: var(--r-card);
  background:
    linear-gradient(180deg, rgba(213, 255, 0, .05) 0%, rgba(18, 18, 46, 0) 70%),
    var(--surface);
  color: var(--neon);
  font-size: clamp(1.1875rem, 2.6vw, 1.625rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.3;
  text-wrap: balance;
}

/* ===== COMO FUNCIONA ===== */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-top: var(--s5);
}

.step {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: var(--surface);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.step:hover {
  transform: translateY(-3px);
  border-color: rgba(213, 255, 0, .22);
}

.step__num {
  display: block;
  margin-bottom: var(--s2);
  color: var(--neon);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.step__title {
  display: block;
  margin-bottom: .5rem;
  color: var(--text);
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
}

.step__desc {
  color: var(--text-2);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.6;
}

/* Bloco de CTA solto no meio do conteudo. O reset zera a margem de <p>,
   entao sem isto o botao encosta no elemento anterior. */
.cta-block {
  margin-top: var(--s6);
}

.steps__support {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem 1.5rem;
  margin-top: var(--s4);
}

.steps__support-item {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-2);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.5;
}

.steps__support-item::before {
  content: "";
  position: absolute;
  left: .25rem;
  top: .5em;
  width: .38rem;
  height: .68rem;
  border: 2px solid var(--neon);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}

@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s4);
  }
}

/* ===== ANTES x COM PAYTRAINER ===== */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-top: var(--s5);
}

.compare__col {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: var(--surface);
}

.compare__col--before {
  /* Sem opacity/filter: eles rebaixavam o contraste abaixo de AA.
     O efeito de "desbotado" vem da cor ja composta. */
  background-color: rgba(18, 18, 46, .5);
  color: #9C9CB4;
}

.compare__col--after {
  border-color: rgba(213, 255, 0, .28);
  background:
    linear-gradient(180deg, rgba(213, 255, 0, .06) 0%, rgba(18, 18, 46, 0) 62%),
    var(--surface);
  box-shadow: 0 0 70px -30px rgba(213, 255, 0, .55);
}

.compare__title {
  display: block;
  margin-bottom: var(--s2);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
}

.compare__col--before .compare__title { color: #B0B0C6; }
.compare__col--after .compare__title { color: var(--neon); }

.compare__item {
  position: relative;
  padding: .625rem 0 .625rem 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.55;
}

.compare__item:last-child { border-bottom: 0; }

.compare__col--before .compare__item { color: var(--text-3); }
.compare__col--after .compare__item { color: var(--text); }

.compare__col--before .compare__item::before {
  content: "";
  position: absolute;
  left: .2rem;
  top: 1.45em;
  width: .75rem;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
  opacity: .7;
}

.compare__col--after .compare__item::before {
  content: "";
  position: absolute;
  left: .3rem;
  top: 1.05em;
  width: .38rem;
  height: .68rem;
  border: 2px solid var(--neon);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}

@media (min-width: 640px) {
  .compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s4);
  }
}

/* ===== BENEFICIOS ===== */
.benefits {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-top: var(--s5);
}

.benefit {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: var(--surface);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.benefit:hover {
  transform: translateY(-3px);
  border-color: rgba(213, 255, 0, .22);
  box-shadow: 0 24px 50px -32px rgba(0, 0, 0, .9);
}

.benefit__title {
  display: block;
  margin-bottom: .5rem;
  color: var(--text);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  text-wrap: balance;
}

.benefit__desc {
  color: var(--text-2);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s4);
  }
}

/* ===== PESQUISA (numeros) ===== */
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-top: var(--s5);
}

.stat {
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background:
    radial-gradient(100% 80% at 50% 0%, rgba(61, 26, 120, .28) 0%, rgba(18, 18, 46, 0) 70%),
    var(--surface);
  text-align: center;
}

.stat__num {
  display: block;
  color: var(--neon);
  font-size: clamp(2.75rem, 8vw, 4.5rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
  text-shadow: 0 0 46px rgba(213, 255, 0, .28);
}

.stat__label {
  display: block;
  margin-top: var(--s2);
  color: var(--text-2);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.55;
  text-wrap: balance;
}

.stats + .muted { margin-top: var(--s4); }

@media (min-width: 640px) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s4);
  }
}

/* ===== TELAS DO APP ===== */
.shots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  margin-top: var(--s5);
}

.shots__item {
  margin: 0;
  padding: .5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
  box-shadow: 0 26px 56px -34px rgba(0, 0, 0, .9);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.shots__item:hover {
  transform: translateY(-4px);
  border-color: rgba(213, 255, 0, .20);
}

.shots__item img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background-color: var(--bg);
}

.shots__caption {
  display: block;
  padding: .625rem .375rem .125rem;
  color: var(--text-3);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.45;
  text-align: center;
}

@media (min-width: 640px) {
  .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .shots { gap: var(--s4); }
}

/* ===== FAQ ===== */
.faq {
  max-width: 860px;
  /* centralizado: sem isto o bloco encosta a esquerda e sobra um
     vazio grande a direita, porque o container tem 1140px */
  margin-inline: auto;
  margin-top: var(--s5);
}

.faq__group + .faq__group { margin-top: var(--s5); }

/* Em telas largas os 4 grupos vao para duas colunas. Isso ocupa a
   largura util sem esticar a linha de leitura, e encurta bastante
   a altura da secao. align-items:start impede que um grupo curto
   seja esticado ate a altura do vizinho. */
@media (min-width: 1000px) {
  .faq {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--s5) var(--s4);
    max-width: 100%;
  }

  /* em grid o espacamento vem do gap, nao da margem entre irmaos */
  .faq__group + .faq__group { margin-top: 0; }
}

.faq__group-title {
  margin-bottom: var(--s2);
  color: var(--neon);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
}

.faq__item {
  margin-bottom: .625rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background-color: var(--surface);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.faq__item[open] {
  border-color: rgba(213, 255, 0, .22);
  background-color: var(--surface-2);
}

.faq__q {
  position: relative;
  display: block;
  min-height: 56px;
  padding: 1.0625rem 3.25rem 1.0625rem 1.25rem;
  cursor: pointer;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.45;
  list-style: none;
  transition: color var(--dur) var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ""; }

.faq__q:hover { color: var(--neon); }

.faq__q::after {
  content: "";
  position: absolute;
  right: 1.375rem;
  top: 1.65rem;
  width: .5rem;
  height: .5rem;
  border: 2px solid var(--text-3);
  border-left: 0;
  border-top: 0;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.faq__item[open] .faq__q::after {
  transform: rotate(-135deg);
  border-color: var(--neon);
}

.faq__q:hover::after { border-color: var(--neon); }

.faq__a {
  padding: 0 1.25rem 1.25rem;
  color: var(--text-2);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.65;
}

.faq__a p + p { margin-top: var(--s2); }

.faq__item[open] .faq__a { animation: faq-in .3s var(--ease) both; }

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ===== CTA FINAL ===== */
.cta-final {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}

.cta-final::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 50%;
  width: min(1000px, 145%);
  aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(40% 50% at 50% 50%, rgba(61, 26, 120, .62), rgba(34, 10, 90, 0) 72%),
    radial-gradient(24% 32% at 50% 74%, rgba(213, 255, 0, .16), rgba(213, 255, 0, 0) 70%);
  filter: blur(34px);
  pointer-events: none;
}

.cta-final .h2,
.cta-final h2 { margin-bottom: var(--s3); }

.cta-final .lead {
  margin-inline: auto;
  margin-bottom: var(--s5);
  max-width: 54ch;
}

/* .cta-final usa text-align:center, mas cred-bar e store-badges sao flex
   e flex ignora text-align. Centralizamos no eixo principal. */
.cta-final .cred-bar,
.cta-final .store-badges {
  justify-content: center;
}

.cta-final__support {
  margin-top: var(--s4);
  color: var(--text-3);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.5;
}

.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s5);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 52px;
  padding: .75rem 1.375rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  background-color: var(--surface);
  color: var(--text);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.2;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.store-badge:hover {
  transform: translateY(-2px);
  border-color: rgba(213, 255, 0, .45);
  background-color: var(--surface-2);
}

.store-badge img {
  height: 22px;
  width: auto;
}

/* ===== FOTOS DE PERSONAL (secoes Dor e Pesquisa) =====
   Pedido do marketing: a pagina so tinha o fundador, faltava o personal comum
   se reconhecer. As duas fotos passam pelo mesmo tratamento de cor
   (tools/tratar-fotos.py) para parecerem do mesmo ensaio. */

.dor__foto,
.pesquisa__foto {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  /* a foto ja tem vinheta gravada; a borda so fecha o contorno contra o fundo */
  border: 1px solid var(--line);
}

.pesquisa__foto {
  margin-block: var(--s5) var(--s6);
}

.dor__grid { margin-bottom: var(--s5); }

/* No celular a foto vai acima do texto e nada mais muda. */
.dor__foto { margin-bottom: var(--s5); }

@media (min-width: 900px) {
  /* Foto a esquerda e o bloco de texto a direita. A lista de falas de cobranca
     continua em largura cheia embaixo: ela e uma sequencia, ficaria apertada
     numa coluna. */
  .dor__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: var(--s6);
  }
  .dor__foto { margin-bottom: 0; }
  .dor__texto .h2 { margin-bottom: var(--s3); }
}

/* ===== FOOTER ===== */
.footer {
  padding-block: clamp(2.5rem, 6vw, 4rem) var(--s5);
  border-top: 1px solid var(--line);
  background-color: var(--bg);
}

.footer__legal {
  /* sem max-width: o bloco acompanha a largura do container, igual à faixa
     de baixo. Um teto em ch fazia o texto parar antes da borda direita e
     ficar pendurado à esquerda, desalinhado do resto do rodapé. Quem
     controla a medida são as duas colunas do desktop, logo abaixo. */
  color: var(--text-3);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.7;
  text-align: justify;
  /* justificado sem hifenizacao abre rios de espaco branco no meio da
     linha, ainda mais em portugues, que tem palavra longa. hyphens:auto
     usa o dicionario de pt-BR do proprio navegador, habilitado pelo
     <html lang="pt-BR">. */
  hyphens: auto;
}

/* Abaixo de 480px a medida fica curta demais para justificar: sobram 3 ou 4
   palavras por linha e o espacamento entre elas fica grotesco. Volta a
   alinhar so a esquerda. */
@media (max-width: 479px) {
  .footer__legal {
    text-align: left;
    hyphens: none;
  }
}

.footer__legal p + p { margin-top: var(--s2); }

/* No desktop os dois parágrafos viram duas colunas ocupando a largura
   inteira do container, em vez de virar uma linha só de mais de 130
   caracteres. Cada coluna fica com cerca de 65ch em 1140px, medida boa
   para justificado. */
@media (min-width: 880px) {
  .footer__legal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
  }
  .footer__legal p + p { margin-top: 0; }
}

/* Ultima faixa do rodape. No desktop sao tres colunas: marca a esquerda,
   selo ZAVII no centro, links a direita. Empilhado e centralizado no
   celular, onde as tres colunas nao cabem lado a lado. */
.footer__brand {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: var(--s3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: .8125rem;
  font-weight: 500;
  text-align: center;
}

.footer__brand ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem var(--s4);
}

.footer__brand img {
  height: 20px;
  width: auto;
  opacity: .65;
  transition: opacity var(--dur) var(--ease);
}

.footer__brand img:hover { opacity: 1; }

.footer__brand a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}

.footer__brand a:hover { color: var(--neon); }

/* Selo de autoria. Agrupa o rotulo e o logo ZAVII numa pilula unica,
   para o credito ler como um selo e nao como um logo solto no rodape. */
.made-by {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .3125rem .75rem .3125rem .875rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, .03);
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

.made-by:hover {
  border-color: var(--line-strong);
  background-color: rgba(255, 255, 255, .05);
}

.made-by__label {
  color: var(--text-3);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}

/* o logo dentro do selo fica um pouco menor que o padrao do rodape */
.made-by img {
  height: 16px;
  opacity: .8;
}

.made-by:hover img { opacity: 1; }

/* 880px, e nao 720: abaixo disso a coluna dos links quebra em duas linhas
   e a faixa fica torta, com a marca e o selo numa linha so e os links em
   duas. Ate la vale mais a pilha centralizada. */
@media (min-width: 880px) {
  /* as duas colunas laterais sao 1fr iguais: e isso que poe o selo ZAVII
     no centro real da faixa, e nao no centro do espaco que sobrou. */
  .footer__brand {
    /* minmax(0,1fr), nao 1fr. Com 1fr puro a coluna nao encolhe abaixo do
       min-content, entao a coluna dos links (mais larga que a da marca)
       roubava espaco da esquerda e o selo saia do centro: media 55px de
       desvio em 720px. Com minmax(0,1fr) as laterais ficam sempre iguais
       e o selo fica no centro real da faixa em qualquer largura. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--s4) var(--s5);
    text-align: left;
  }
  .footer__brand > p        { justify-self: start; }
  .footer__brand > .made-by { justify-self: center; }
  /* quando a coluna aperta, os links quebram para a segunda linha ainda
     encostados a direita, em vez de empurrar o selo para o lado. */
  .footer__brand > ul {
    justify-self: end;
    justify-content: flex-end;
    text-align: right;
  }
}

/* ===== PAGINAS LEGAIS (Termos de Uso, Declaracao de Privacidade) =====
   Documento longo, entao a prioridade e leitura: medida curta, respiro entre
   blocos e sumario ancorado. Geradas por tools/build-legal.py. */

.legal { padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 6vw, 5rem); }

.legal__head {
  max-width: 60ch;
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}

/* o h1 do hero tem 3.5rem, grande demais para titulo de documento */
.legal__h1 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  margin-bottom: var(--s3);
}

.legal__meta {
  margin-top: var(--s4);
  color: var(--text-3);
  font-size: .875rem;
  font-weight: 600;
}

/* Sumario. Documento de 21 secoes sem indice obriga o leitor a rolar as
   quatro mil palavras para achar a clausula que ele quer. */
.legal__toc {
  max-width: 60ch;
  margin-block: var(--s5);
  padding: var(--s4) var(--s4) var(--s4) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--surface);
}

.legal__toc-titulo {
  margin-bottom: var(--s3);
  padding-left: var(--s3);
  color: var(--neon);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* sem list-style: o numero da secao ja vem no proprio texto do link, e o
   marcador do ol duplicava ("1. 1. Introducao") */
.legal__toc ol {
  display: grid;
  gap: .125rem;
  padding-left: var(--s3);
  list-style: none;
}

.legal__toc a {
  display: inline-block;
  padding: .25rem 0;
  color: var(--text-2);
  font-size: .9375rem;
  transition: color var(--dur) var(--ease);
}

.legal__toc a:hover { color: var(--neon); }

.legal__sec {
  max-width: 74ch;
  margin-top: var(--s6);
  /* o header e fixo: sem isso o titulo da secao fica embaixo dele ao pular
     pelo sumario */
  scroll-margin-top: calc(var(--header-h) + 1.5rem);
}

.legal__h2 {
  margin-bottom: var(--s4);
  color: var(--text);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.25;
}

.legal__sec p {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.75;
  text-wrap: pretty;
}

.legal__sec p + p,
.legal__sec p + .legal__lista,
.legal__sec p + .legal__defs,
.legal__sec .legal__lista + p { margin-top: var(--s3); }

.legal__sec strong { color: var(--text); }

.legal__lista {
  display: grid;
  gap: var(--s2);
  padding-left: var(--s4);
  list-style: disc;
}

.legal__lista--num { list-style: lower-alpha; }

.legal__lista li {
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.7;
}

.legal__lista li::marker { color: var(--neon); }

/* Definicoes. dt e dd em vez de lista com negrito: o termo definido e
   semanticamente um termo, e o leitor varre a coluna de termos. */
.legal__defs { display: grid; gap: var(--s3); }

.legal__defs dt {
  color: var(--text);
  font-size: 1rem;
  font-weight: 800;
}

.legal__defs dd {
  margin: .25rem 0 0;
  padding-left: var(--s3);
  border-left: 2px solid var(--line-strong);
  color: var(--text-2);
  font-size: 1rem;
  line-height: 1.7;
}

.legal__sec a,
.footer__brand a[href] {
  color: var(--neon);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.legal__sec a:hover { text-decoration-thickness: 2px; }

/* no rodape o link nao deve gritar: neon so no hover, como ja era antes */
.footer__brand a[href] {
  color: var(--text-3);
  text-decoration: none;
}

.footer__brand a[href]:hover { color: var(--neon); }

/* ===== REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Sem JS o conteudo nunca pode ficar invisivel */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ===== MOVIMENTO REDUZIDO ===== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  .btn:hover,
  .step:hover,
  .benefit:hover,
  .shots__item:hover,
  .store-badge:hover,
  .video__facade:hover,
  .video__facade:hover .video__thumb,
  .video__facade:hover .video__play {
    transform: none;
  }
}