/* AnimaMotion · página de venda v6 (12/11/2026)
   Fundo claro (papel), cartões brancos, tinta preta e o dourado da marca. O dourado cheio só aparece
   no botão de compra, no marca-texto do título e no comando que está rodando na demo. Linhas de 1 px no lugar de caixas. */

:root {
  --bg: #f5f3ee;
  --s1: #ffffff;
  --s2: #ece9e2;
  --linha: #e2ded5;
  --linha-forte: #c9c4b8;
  --tx: #0e0e0d;
  --tx2: #57554f;
  --tx3: #8b887f;
  --ouro: #f6bc04;
  --ouro-tx: #0e0e0d;
  --ouro-escuro: #946c00; /* dourado para texto pequeno sobre o claro */
  --verde: #1f8a4c;       /* o que está incluído e o lote de agora */
  --verde-claro: #2fb36a;
  /* a fonte da página é a Bricolage Grotesque (a do título); os botões ficam na Outfit (pedido do usuário, 12/11) */
  --sans: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --botao: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --raio: 14px;
  /* o estilo da página (12/11): borda de tinta e sombra dura, como os cartões de números */
  --borda: 2px solid var(--tx);
  --sombra: 4px 4px 0 var(--tx);
  --sombra-g: 6px 6px 0 var(--tx);
  /* as cores das sombras dos cartões (os botões ficam com a sombra preta) */
  --c-ouro: #f6bc04;
  --c-verde: #2fb36a;
  --c-azul: #4f8fff;
  --c-rosa: #e1306c;
  --nav: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 8px); }
body { margin: 0; background: var(--bg); color: var(--tx); font: 400 16px/1.5 var(--sans); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
code { font-family: var(--mono); }
::selection { background: var(--ouro); color: var(--ouro-tx); }

[data-modo="venda"] .so-lista, [data-modo="lista"] .so-venda { display: none !important; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--ouro); color: var(--ouro-tx); padding: 10px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: var(--borda); border-radius: 12px; background: var(--ouro); color: var(--ouro-tx); box-shadow: var(--sombra); font: 700 15px/1 var(--botao); text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; -webkit-tap-highlight-color: transparent; }
.btn:hover { background: #ffc81f; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tx); }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--tx); }
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
.btn--lg { min-height: 58px; padding: 0 28px; font-size: 18px; }
.btn--sm { min-height: 38px; padding: 0 14px; font-size: 14px; box-shadow: 3px 3px 0 var(--tx); }
.btn--sm:hover { box-shadow: 4px 4px 0 var(--tx); }
.btn--linha { background: var(--s1); color: var(--tx); }
.btn--linha:hover { background: var(--s2); }

/* ---------- nav ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 30; height: var(--nav); transition: background-color .2s ease, border-color .2s ease; border-bottom: 1px solid transparent; }
.nav.is-rolou { background: var(--bg); border-color: var(--linha); }
.nav__in { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.marca img { height: 30px; width: auto; }
.nav__acoes { display: flex; align-items: center; gap: 18px; }
.nav__acoes .btn--sm { min-height: 42px; padding: 0 16px; }
.nav__entrar { color: var(--tx2); font-size: 15px; text-decoration: none; }
.nav__entrar:hover { color: var(--tx); }

/* ---------- topo ---------- */
.hero { padding: calc(var(--nav) + 20px) 0 32px; }
.hero__in { display: grid; gap: 36px; }
.autor { display: flex; align-items: center; gap: 10px; color: var(--tx2); font-size: 14px; line-height: 1.3; }
.autor b { color: var(--tx); font-weight: 600; }
.autor a { color: var(--tx2); text-decoration: none; }
.autor a:hover { color: var(--tx); }
.autor__foto { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
/* título: Bricolage Grotesque 800, caixa normal, grande; marca-texto dourado só em "3,6 milhões" (numa linha só) */
.hero__h { margin-top: 18px; max-width: 12.5em; font-family: var(--sans); font-optical-sizing: auto; font-weight: 800; font-size: clamp(38px, 10.2vw, 70px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.marca-texto { white-space: nowrap; background: linear-gradient(transparent 60%, var(--ouro) 60%, var(--ouro) 90%, transparent 90%); padding: 0 .04em; }
.hero__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
.hero__acao .btn--lg { min-height: 56px; font-size: 17px; }
.hero__acao .btn--lg { width: 100%; }
.hero__entrar { font-size: 15px; color: var(--tx2); text-underline-offset: 3px; }
.hero__vid { display: flex; justify-content: center; }

/* celular: o vídeo vertical, reto, com a contagem de views */
.fone { position: relative; width: min(66vw, 300px); aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: var(--s1); border: var(--borda); box-shadow: 8px 8px 0 var(--ouro); }
.fone video { width: 100%; height: 100%; object-fit: cover; }
.views { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px 5px 7px; border-radius: 999px; background: rgba(0, 0, 0, .72); color: #f6bc04; font: 700 13px/1 var(--mono); }
.views svg { width: 13px; height: 13px; fill: currentColor; }
.fone .views { left: 14px; bottom: 14px; font-size: 15px; padding: 7px 12px 7px 9px; }
/* o vídeo do topo em destaque: borda de tinta e sombra dura dourada (como os cartões de números) */
/* vídeo de apresentação (config.vsl): enquanto toca mudo, um véu leve e o selo "Assista antes de comprar" no meio;
   o toque em qualquer ponto do vídeo liga o som */
.som { position: absolute; inset: 0; display: grid; place-items: center; padding: 14px; border: 0; background: rgba(14, 14, 13, .1); font: inherit; font-family: var(--botao); color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.som__selo { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border: 2px solid var(--tx); border-radius: 14px; background: var(--ouro); color: var(--ouro-tx); box-shadow: 4px 4px 0 var(--tx); text-align: left; transition: transform .15s ease, box-shadow .15s ease; }
.som:hover .som__selo { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--tx); }
.som:active .som__selo { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--tx); }
.som__selo svg { flex: none; width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.som__selo svg .c { fill: currentColor; }
.som__selo b { display: block; font-size: 17px; font-weight: 700; line-height: 1.08; letter-spacing: -.01em; text-transform: uppercase; }
.som__selo small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; }
.fone.tem-vsl .views { display: none; }

/* ---------- números do perfil (embaixo do topo) ---------- */
.numeros { padding: 0 0 48px; }
.numeros__lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.numero { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 14px 6px 12px; border: 2px solid var(--tx); border-radius: 14px; background: var(--s1); box-shadow: 5px 5px 0 var(--tx); text-align: center; }
.numero svg { width: 24px; height: 24px; fill: none; stroke: #d62976; stroke-width: 2; }
.numero svg .p { fill: #d62976; stroke: none; }
.numero b { font-size: clamp(22px, 6.2vw, 44px); white-space: nowrap; font-weight: 700; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; }
.numero span { font-size: 12.5px; line-height: 1.25; color: var(--tx2); }

/* ---------- fundos com textura (mais graça no papel) ---------- */
.fundo-grade { background-image: linear-gradient(rgba(14, 14, 13, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 14, 13, .055) 1px, transparent 1px); background-size: 32px 32px; background-position: center top; }
.fundo-pontos { background-image: radial-gradient(rgba(14, 14, 13, .16) 1.1px, transparent 1.3px); background-size: 20px 20px; }
.fundo-faixa { background: #fbf1d2; }

/* ---------- seções ---------- */
.sec { padding: 56px 0 64px; border-top: 1px solid var(--linha); }
.sec__h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 32px; font-size: clamp(28px, 6.4vw, 40px); font-weight: 600; line-height: 1.05; letter-spacing: -.025em; }
.sec__n { font: 400 14px/1 var(--mono); color: var(--tx3); letter-spacing: 0; transform: translateY(-.35em); }

/* ---------- 02 o kit em ação: um cartão por etapa (mosaico) e o vídeo pronto ao lado ---------- */
.demo__in { display: grid; gap: 36px; }
.bento { display: grid; grid-template-columns: 1fr; gap: 14px; padding: 0 4px 4px 0; }
.etapa { display: grid; align-content: start; gap: 10px; padding: 16px 16px 18px; border: var(--borda); border-radius: 14px; background: var(--s1); box-shadow: 5px 5px 0 var(--cor, var(--tx)); }
.etapa:nth-child(3n+1) { --cor: var(--c-azul); }
.etapa:nth-child(3n+2) { --cor: var(--c-verde); }
.etapa:nth-child(3n) { --cor: var(--c-ouro); }
.etapa__h { display: flex; align-items: center; gap: 10px; }
.etapa__n { font: 700 12px/1 var(--mono); color: var(--tx3); }
.etapa__h code { padding: 5px 9px; border-radius: 8px; background: var(--tx); color: var(--ouro); font-size: 13px; font-weight: 700; }
.etapa__tempo { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--tx3); white-space: nowrap; }
.etapa__t { font-size: 16px; font-weight: 600; line-height: 1.3; }
.nota-nicho { font-size: 15px; color: var(--tx2); }
.nota-nicho b { margin-left: 6px; font: 700 13px/1 var(--mono); color: var(--tx); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 10px; border: 1.5px solid var(--linha-forte); border-radius: 999px; font-size: 13px; color: var(--tx2); }
.chip--on { background: var(--ouro); border-color: var(--tx); color: var(--tx); font-weight: 700; }
.roteiro { display: grid; gap: 6px; }
.roteiro p { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--tx); }
.roteiro i { flex: none; width: 34px; padding-top: 3px; font: 400 12px/1.4 var(--mono); font-style: normal; color: var(--tx3); }
.onda { display: flex; align-items: center; gap: 3px; height: 46px; }
.onda i { flex: 1; height: calc(var(--h) * 1%); min-height: 3px; border-radius: 2px; background: var(--tx); }
.quadro { width: 100%; max-width: 220px; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: var(--borda); }
.barra-render { height: 10px; border: 1.5px solid var(--tx); border-radius: 99px; background: var(--s2); overflow: hidden; }
.barra-render span { display: block; width: 100%; height: 100%; background: var(--verde-claro); transform-origin: left; }
.js .etapa:not(.is-in) .barra-render span { transform: scaleX(0); }
.js .etapa.is-in .barra-render span { transition: transform 1.6s ease .3s; }
.arquivo { font: 400 13px/1.4 var(--mono); color: var(--tx2); }
.arquivo code { color: var(--tx); }
.nota { font-size: 16px; color: var(--tx2); }
.nota b { font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--tx); margin-right: 2px; }
.legenda { padding: 12px 14px; border-radius: 12px; background: var(--bg); font-size: 15px; font-weight: 600; line-height: 1.4; }
.legenda span { display: block; margin-top: 4px; font-weight: 400; color: var(--tx2); }
.demo__vid { display: grid; justify-items: center; gap: 14px; margin: 0; }
.demo__vid .fone { width: min(66vw, 290px); }
.demo__vid figcaption { font-size: 16px; font-weight: 700; }
/* os cartões entram conforme a rolagem (app.js: [data-revela] ganha .is-in) */
.js [data-revela] { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.js [data-revela].is-in { opacity: 1; transform: none; }

/* ---------- 01 resultados ---------- */
.res { display: grid; gap: 22px; }
.res__n { font-family: var(--sans); font-weight: 800; font-size: clamp(30px, 8vw, 46px); line-height: 1.05; letter-spacing: -.03em; }
.res__n > span { display: block; color: var(--tx2); }
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 10px; padding: 0 4px 22px 0; }
.grade .tile:nth-child(3n+2) { transform: translateY(18px); } /* a coluna do meio desce um pouco: grade "em degrau" */
.tile { position: relative; aspect-ratio: 9 / 16; border: var(--borda); border-radius: 12px; overflow: hidden; background: var(--s1); box-shadow: 5px 5px 0 var(--c-ouro); }
.tile video { width: 100%; height: 100%; object-fit: cover; }
.tile .views { left: 6px; bottom: 6px; padding: 4px 8px 4px 6px; border: 1.5px solid var(--tx); background: var(--ouro); color: var(--tx); font-size: 12px; }
.tile .views svg { width: 11px; height: 11px; }
.res__ig { justify-self: start; }
.res__ig svg { width: 20px; height: 20px; fill: none; stroke: #d62976; stroke-width: 2; }
.res__ig svg .p { fill: #d62976; stroke: none; }

/* ---------- 03 o que você recebe ---------- */
.recebe { display: grid; gap: 22px; }
.bloco { padding: 22px 20px; border: var(--borda); border-radius: var(--raio); background: var(--s1); box-shadow: 6px 6px 0 var(--cor, var(--c-ouro)); }
.bloco__tag { font-size: 14px; color: var(--tx2); }
.bloco--completo .bloco__tag { color: var(--ouro-escuro); font-weight: 600; }
.bloco__h { margin-top: 4px; font-size: 24px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
/* as 6 aulas: cartões só de texto (número, título e o comando do kit); sem quadros das aulas, que vão ser refeitas */
.aulas { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; }
.aula { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: var(--borda); border-radius: 12px; background: var(--bg); box-shadow: 3px 3px 0 var(--tx); }
.aula__n { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: var(--borda); border-radius: 10px; background: var(--ouro); font-family: var(--sans); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.aula p { font-size: 16px; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.aula code { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 400; color: var(--tx3); }
.arvore { margin-top: 18px; }
.arvore p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 9px 0; border-top: 1px solid var(--linha); }
.arvore p:first-child { border-top: 0; padding-top: 0; }
.arvore code { font-size: 13px; color: var(--tx); }
.arvore span { font-size: 14px; color: var(--tx3); }
.arvore .n1 { padding-left: 16px; }
.arvore .mais { font-size: 15px; color: var(--tx); gap: 10px; }
.arvore .mais b { flex: none; width: 18px; height: 18px; border: 1.5px solid var(--tx); border-radius: 50%; background: linear-gradient(var(--tx), var(--tx)) center / 9px 2px no-repeat, linear-gradient(var(--tx), var(--tx)) center / 2px 9px no-repeat, var(--ouro); font-size: 0; align-self: center; } /* o mesmo selo "+" dos planos */
/* o pedido que a pessoa manda pro agente, com cara de caixa de mensagem */
.pedido { margin-top: 18px; }
.pedido__t { font-size: 14px; color: var(--tx2); }
.pedido__msg { position: relative; margin-top: 8px; padding: 12px 52px 12px 14px; border: var(--borda); border-radius: 14px; background: var(--bg); box-shadow: 3px 3px 0 var(--tx); font-size: 15px; line-height: 1.45; color: var(--tx); }
.pedido__msg code { white-space: nowrap; font-size: 13px; }
.pedido__enviar { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 30px; height: 30px; border: var(--borda); border-radius: 50%; background: var(--ouro); }
.pedido__enviar svg { width: 16px; height: 16px; fill: none; stroke: var(--ouro-tx); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 04 planos ---------- */
/* o painel dos planos fica leve (borda fina e sombra suave, como a referência do usuário): a borda preta foi reprovada aqui */
.painel { border: 1px solid var(--linha-forte); border-radius: 18px; background: var(--s1); box-shadow: 0 30px 60px -34px rgba(20, 18, 14, .35), 0 2px 6px rgba(20, 18, 14, .05); overflow: hidden; }
.painel__topo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 12px 18px; border-bottom: 1px solid var(--linha); font-size: 15px; color: var(--tx2); }
.painel__topo b { color: var(--tx); font-weight: 600; }
.alunos { display: inline-flex; align-items: center; gap: 8px; }
.ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--verde-claro); box-shadow: 0 0 0 3px rgba(47, 179, 106, .18); }
.relogio { display: inline-flex; align-items: center; gap: 7px; }
.relogio svg { width: 17px; height: 17px; fill: none; stroke: #d64545; stroke-width: 2; stroke-linecap: round; }
.relogio b { font-variant-numeric: tabular-nums; }
.planos { display: grid; }
.plano { display: flex; flex-direction: column; padding: 20px 18px 22px; }
.plano + .plano { border-top: 1px solid var(--linha); }
.plano--completo { position: relative; order: -1; } /* sem fundo colorido (o amarelo e o verde foram reprovados): o destaque é o filete dourado e o "Recomendado" */
.plano--completo::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--ouro); } /* verde bem claro, como a referência do usuário (o amarelo foi reprovado); no celular, o Completo vem primeiro */
.plano--essencial { border-top: 1px solid var(--linha); }
.plano__nome { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 600; letter-spacing: -.015em; }
.plano__rec { padding: 3px 9px; border-radius: 999px; background: var(--ouro); color: var(--ouro-tx); font-size: 12px; font-weight: 600; letter-spacing: 0; }
.plano__linha { margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--tx2); }
.plano__preco { display: flex; align-items: flex-start; margin-top: 16px; font-size: 56px; font-weight: 700; line-height: .9; letter-spacing: -.035em; }
.plano__preco .rs { margin: .55em 6px 0 0; font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--tx2); }
.plano__preco .cent { margin: .1em 0 0 1px; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.lotes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.lote { display: grid; gap: 1px; padding-top: 9px; border-top: 3px solid var(--linha); font: 400 13px/1.45 var(--mono); }
.lote span { color: var(--tx3); }
.lote b { font-weight: 700; color: var(--tx2); }
.lote i { font-style: normal; color: var(--tx3); }
.lote--agora { border-top-color: var(--verde-claro); }
.lote--agora span, .lote--agora b { color: var(--tx); }
.lote--agora i { color: var(--verde); font-weight: 700; }
.lote--fim { border-top-color: var(--linha-forte); }
.lote--fim b { text-decoration: line-through; color: var(--tx3); font-weight: 400; }
.lote--fim i { color: #c2410c; }
.plano .btn { margin-top: 18px; width: 100%; min-height: 54px; font-size: 17px; }
.itens { margin-top: 16px; }
.itens li { position: relative; padding: 5px 0 5px 26px; font-size: 15px; line-height: 1.4; }
.itens li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 11px; height: 6px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); }
.itens .mais { font-weight: 600; }
/* o que o Completo tem a mais: selo "+" dourado no lugar do check */
.itens .mais::before { content: ""; left: 0; top: 6px; width: 18px; height: 18px; border: 1.5px solid var(--tx); border-radius: 50%; background: linear-gradient(var(--tx), var(--tx)) center / 9px 2px no-repeat, linear-gradient(var(--tx), var(--tx)) center / 2px 9px no-repeat, var(--ouro); transform: none; } /* o "+" é desenhado: o caractere ficava fora do centro */
.itens .nao { color: var(--tx3); }
.itens .nao::before { top: 14px; width: 10px; height: 0; border-left: 0; border-bottom: 1.5px solid var(--linha-forte); transform: none; }
.selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; padding: 14px 18px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--tx2); }
.selos > span { position: relative; padding-left: 20px; }
.selos > span::before { content: ""; position: absolute; left: 3px; top: 6px; width: 9px; height: 5px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); }
.selos b { color: var(--tx); font-weight: 600; }

/* lista de espera (modo lista) */
.lista { display: grid; gap: 14px; max-width: 520px; margin: 28px auto 0; padding: 24px 20px; border: var(--borda); border-radius: 16px; background: var(--s1); box-shadow: var(--sombra-g); }
.lista__t { font-size: 18px; font-weight: 600; }
.lista label { display: grid; gap: 6px; font-size: 14px; color: var(--tx2); }
.lista input, .lista select { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--linha-forte); border-radius: 10px; background: var(--bg); color: var(--tx); font: 400 16px var(--sans); }
.lista input:focus, .lista select:focus { outline: none; border-color: var(--ouro); }
.lista .check { display: flex; gap: 10px; align-items: flex-start; }
.lista .check input { width: 20px; min-height: 20px; height: 20px; margin-top: 2px; accent-color: var(--ouro); }
.lista__msg { font-size: 15px; color: var(--tx2); }

/* ---------- 05 dúvidas ---------- */
.faq { display: grid; gap: 12px; max-width: 780px; padding: 0 4px 4px 0; }
/* seções centradas (dúvidas e o grupo grátis) */
.sec--centro .sec__h { justify-content: center; }
.sec--centro .faq { margin: 0 auto; }

/* ---------- grupo grátis no WhatsApp (fim da página) ---------- */
.grupo__cartao { display: grid; justify-items: center; gap: 12px; max-width: 560px; margin: 0 auto; padding: 32px 22px 30px; border: var(--borda); border-radius: 18px; background: var(--s1); box-shadow: 6px 6px 0 #25d366; text-align: center; }
.grupo__icone { display: grid; place-items: center; width: 56px; height: 56px; border: var(--borda); border-radius: 50%; background: #25d366; }
.grupo__icone svg { width: 28px; height: 28px; fill: #fff; }
.grupo__t { margin-top: 6px; font-size: clamp(26px, 6vw, 34px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.grupo__p { max-width: 26em; font-size: 16px; line-height: 1.5; color: var(--tx2); }
.grupo .btn { margin-top: 8px; }
.btn--zap { background: #25d366; color: var(--tx); }
.btn--zap:hover { background: #3be07a; }
.faq details { border: var(--borda); border-radius: 14px; background: var(--s1); box-shadow: var(--sombra); }
.faq details[open] { box-shadow: var(--sombra-g); }
.faq summary { position: relative; padding: 16px 48px 16px 18px; font-size: 17px; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 10px; height: 10px; border-right: 2.5px solid var(--tx); border-bottom: 2.5px solid var(--tx); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 18px 18px; color: var(--tx2); font-size: 16px; line-height: 1.6; max-width: 62ch; }

/* ---------- barra fixa (celular) ---------- */
.barra-fixa { position: fixed; inset: auto 0 0; z-index: 25; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--linha); transform: translateY(110%); transition: transform .25s ease; }
.barra-fixa.is-on { transform: none; }
.barra-fixa .btn { width: 100%; }

/* ---------- pop-up "antes de continuar" ---------- */
.upsell { width: min(440px, calc(100vw - 32px)); padding: 28px 24px 22px; border: var(--borda); border-radius: 18px; background: var(--s1); color: var(--tx); box-shadow: 8px 8px 0 var(--ouro); }
.upsell::backdrop { background: rgba(20, 18, 14, .55); }
.upsell__x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; background: none; color: var(--tx2); font-size: 26px; cursor: pointer; }
.upsell__tag { font-size: 14px; font-weight: 600; color: var(--ouro-escuro); }
.upsell__t { margin-top: 6px; font-size: 26px; font-weight: 600; line-height: 1.15; letter-spacing: -.015em; }
.upsell__p { margin-top: 10px; color: var(--tx2); font-size: 16px; }
.upsell__itens { margin: 14px 0 20px; }
.upsell__itens li { position: relative; padding: 8px 0 8px 24px; border-top: 1px solid var(--linha); font-size: 15px; }
.upsell__itens li::before { content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 16px; border: 1.5px solid var(--tx); border-radius: 50%; background: linear-gradient(var(--tx), var(--tx)) center / 8px 2px no-repeat, linear-gradient(var(--tx), var(--tx)) center / 2px 8px no-repeat, var(--ouro); }
.upsell .btn { width: 100%; }
.upsell__nao { display: block; margin-top: 14px; text-align: center; font-size: 15px; color: var(--tx2); }

/* ---------- aviso de cookies ---------- */
.cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: grid; gap: 12px; max-width: 480px; padding: 16px; border: var(--borda); border-radius: 14px; background: var(--s1); box-shadow: var(--sombra); font-size: 14px; color: var(--tx2); }
.cookies a { color: var(--tx); }
.cookies__acoes { display: flex; gap: 8px; }


/* ---------- desktop ---------- */
@media (min-width: 900px) {
  :root { --nav: 76px; }
  .marca img { height: 36px; }
  .wrap { padding: 0 40px; }
  .hero { padding: calc(var(--nav) + 40px) 0 56px; }
  .hero__in { grid-template-columns: 1fr 300px; align-items: center; gap: 80px; }
  .hero__acao .btn--lg { width: auto; min-height: 56px; font-size: 17px; }
  .autor { font-size: 15px; }
  .autor__foto { width: 36px; height: 36px; }
  .fone { width: 300px; }
  .sec { padding: 88px 0 96px; }
  .sec__h { margin-bottom: 44px; }
  .demo__in { grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
  .bento { grid-template-columns: 1fr 1fr; gap: 18px; }
  .etapa--larga { grid-column: 1 / -1; }
  .demo__vid { position: sticky; top: calc(var(--nav) + 24px); }
  .demo__vid .fone { width: 300px; }
  .res { grid-template-columns: 300px 1fr; grid-template-areas: "n grade" "ig grade"; align-items: center; column-gap: 56px; row-gap: 24px; }
  .res__n { grid-area: n; align-self: end; font-size: 44px; }
  .res__ig { grid-area: ig; align-self: start; }
  .grade { grid-area: grade; gap: 22px 20px; padding-bottom: 40px; }
  .grade .tile:nth-child(3n+2) { transform: translateY(40px); }
  .tile .views { font-size: 13px; left: 8px; bottom: 8px; }
  .tile .views { font-size: 12px; }
  .recebe { grid-template-columns: 1fr 1fr; }
  .recebe .bloco--aulas { grid-column: 1 / -1; }
  .aulas { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .bloco { padding: 28px; }
  .planos { grid-template-columns: 1fr 1fr; }
  .plano { padding: 24px 28px 26px; }
  /* as duas colunas com a mesma estrutura: a frase ocupa sempre 2 linhas, então preço, lotes, botão e lista batem lado a lado */
  .plano__linha { min-height: calc(1.45em * 2); }
  .plano--completo { order: 0; }
  .plano + .plano, .plano--essencial { border-top: 0; }
  .plano--completo { border-left: 1px solid var(--linha); }
  .painel__topo { padding: 14px 28px; }
  .numeros { padding-bottom: 72px; }
  .numeros__lista { gap: 20px; }
  .numero { padding: 20px 12px 18px; }
  .numero span { font-size: 15px; }
  .barra-fixa { display: none; }
}

@media (max-width: 899px) {
  /* sem rodapé: espaço no fim para a barra fixa não cobrir a última dúvida */
  main { padding-bottom: 88px; }
  /* com o vídeo de apresentação: autor, título, vídeo, apoio e botão */
  .com-vsl .hero__in { display: flex; flex-direction: column; gap: 0; }
  .com-vsl .hero__txt { display: contents; }
  .com-vsl .autor { order: 1; }
  .com-vsl .hero__h { order: 2; }
  .com-vsl .hero__vid { order: 3; margin-top: 24px; }
  .com-vsl .hero__acao { order: 5; margin-top: 20px; }
  .com-vsl .hero__vid .fone { width: min(78vw, 320px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}