/* TPC — LP. Layout: coluna central de 1120px sobre a floresta fixa; a hora do dia muda com a rolagem. */

.mata { position: fixed; inset: 0; width: 100%; height: 100lvh; z-index: 0; image-rendering: pixelated; image-rendering: crisp-edges; background: var(--mata-950); }
body { overflow-x: hidden; }
main { overflow-x: clip; }
[hidden] { display: none !important; }
.topo, main, .rodape { position: relative; z-index: 1; }
main > section { width: min(100% - 40px, var(--conteudo-max)); margin-inline: auto; }
main h1, main > section > .cabeca, .garantias, .heroi-texto { text-shadow: var(--sombra-texto); }

/* ---------- Topo ---------- */
.topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100% - 40px, var(--conteudo-max)); margin-inline: auto; height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 20px/1 var(--f-titulo); letter-spacing: -.03em; }
.marca small { font-size: 12px; font-weight: 400; letter-spacing: 0; opacity: .5; margin-left: 2px; }
.topo-nav { display: flex; align-items: center; gap: 22px; }
.topo-link { text-decoration: none; font-weight: 500; opacity: .92; }
.topo-link:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.btn-topo { min-height: 40px; padding: 6px 16px; border-radius: 13px; }
.so-largo { display: none; }

/* ---------- Herói ---------- */
.heroi { display: grid; gap: 56px; padding: 44px 0 72px; align-items: center; }
.heroi-texto { display: grid; gap: 22px; justify-items: center; text-align: center; }
.timer { display: flex; gap: 10px; }
.timer-casa { width: 88px; padding: 14px 0 10px; border-radius: 18px; display: grid; justify-items: center; gap: 2px; box-shadow: var(--vidro-brilho), 0 0 0 1px var(--vidro-linha); }
.timer-casa b { font-size: 44px; line-height: 1; }
.timer-casa span { font: 700 11px/1.4 var(--f-texto); letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
h1 { font-size: var(--t-h1); font-weight: 400; line-height: .98; letter-spacing: var(--aperto); max-width: 12.5em; }
.heroi-sub { font-size: var(--t-17); line-height: 1.5; color: var(--ink-2); max-width: 31em; }
.heroi-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.heroi-nota { opacity: .72; }

/* ---------- Demo ---------- */
.demo { position: relative; width: min(100%, 520px); margin-inline: auto; padding-top: 86px; padding-bottom: 96px; }
.janela { position: relative; z-index: 2; overflow: hidden; }
.janela-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--papel-linha); font-size: 15px; }
.janela-topo .mono { color: var(--papel-apagado); }
.janela-corpo { padding: 18px 18px 64px; display: grid; gap: 12px; min-height: 250px; align-content: start; }
.pdf-titulo { font: 600 13px/1.3 var(--f-texto); letter-spacing: .06em; text-transform: uppercase; color: var(--papel-apagado); }
.pdf-texto { font-size: 16px; line-height: 1.65; color: var(--papel-tinta); }
.grifo { color: inherit; background: linear-gradient(var(--grifo-amarelo), var(--grifo-amarelo)) no-repeat 0 60% / 100% 78%; padding: 0 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.pdf-linha { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--papel-tinta-2); }
.pdf-linha.gerando { display: none; }
.cartao { position: absolute; z-index: 3; left: -12px; right: 28px; bottom: 0; padding: 14px 16px 16px; display: grid; gap: 8px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(20, 32, 26, .08), 0 26px 60px -18px rgba(2, 10, 7, .75); }
.cartao-topo { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--papel-tinta-2); }
.cartao-topo b { color: var(--papel-tinta); }
.cartao-quando { margin-left: auto; color: var(--papel-apagado); }
.cartao-pergunta { font: 600 17px/1.3 var(--f-texto); letter-spacing: -.01em; }
.cartao-resposta { font-size: 14.5px; color: var(--papel-tinta-2); padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.cartao-retorno { font-size: 13px; color: var(--papel-tinta-2); min-height: 0; }
.cartao-retorno:empty { display: none; }
.cartao-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.cartao[data-estado="frente"] .cartao-resposta { display: none; }
.cartao-macaco { position: absolute; right: 14px; bottom: calc(100% - 6px); width: 96px; height: 96px; pointer-events: none; }
.cartao-macaco > * { position: absolute; inset: auto 0 0 auto; opacity: 0; transform: translateY(30%); transition: opacity .2s, transform .35s var(--mola); }
.cartao-macaco img { width: 70px; height: auto; }
.cartao[data-estado="acertou"] .sprite-festa, .cartao[data-estado="errou"] .cartao-macaco img { opacity: 1; transform: none; }

/* animação de entrada da demo (só com JS; sem JS o estado final já aparece) */
.demo.anima .grifo { background-size: 0% 78%; transition: background-size 1.3s steps(14); }
.demo.anima.e1 .grifo { background-size: 100% 78%; }
.demo.anima .pronto, .demo.anima .cartao { opacity: 0; transform: translateY(14px); pointer-events: none; }
.demo.anima.e2:not(.e3) .gerando { display: flex; }
.demo.anima.e3 .pronto, .demo.anima.e3 .cartao { opacity: 1; transform: none; pointer-events: auto; transition: opacity .3s, transform .5s var(--mola); }

/* ---------- Mascote empoleirado ---------- */
.poleiro { position: absolute; z-index: 1; pointer-events: none; }
.poleiro-senta { right: 26px; top: 0; width: 66px; height: auto; transform-origin: 50% 100%; animation: pulo 5s 2s infinite; }
.poleiro-espia { left: 26px; top: 18px; animation: espia 7s 1s infinite; }
.sprite { --c: 96px; --n: 6; width: var(--c); height: var(--c); image-rendering: pixelated; background-repeat: no-repeat; background-size: calc(var(--c) * var(--n)) var(--c); animation: quadros 1s steps(var(--n)) infinite; }
.sprite-idle { --n: 9; background-image: url("assets/mascote/sprite_idle_piscar.webp"); animation-duration: 2.2s; }
.sprite-festa { background-image: url("assets/mascote/sprite_comemorando.webp"); animation-duration: .84s; }
.sprite-aceno { background-image: url("assets/mascote/sprite_acenando.webp"); }
.sprite-pensa { --n: 7; background-image: url("assets/mascote/sprite_pensando.webp"); animation-duration: 1.84s; }
@keyframes quadros { to { background-position: calc(var(--c) * var(--n) * -1) 0; } }
@keyframes pulo { 0%, 86%, 100% { transform: none; } 90% { transform: translateY(-9px) scaleY(1.03); } 94% { transform: translateY(0) scaleY(.96); } }
@keyframes espia { 0%, 12%, 88%, 100% { transform: translateY(52px); } 20%, 80% { transform: translateY(0); } }

/* ---------- Pixels utilitários ---------- */
.pixok { flex: none; width: 14px; height: 14px; background: var(--ok); clip-path: polygon(0 50%, 14% 36%, 36% 57%, 86% 7%, 100% 21%, 36% 86%); }
.pixponto { flex: none; width: 8px; height: 8px; margin: 3px; background: currentColor; opacity: .35; }
.pixgira { flex: none; width: 14px; height: 14px; position: relative; animation: gira .8s steps(8) infinite; }
.pixgira::before { content: ""; position: absolute; left: 5px; top: 0; width: 4px; height: 4px; background: currentColor; box-shadow: 5px 2px 0 -0.5px color-mix(in srgb, currentColor 80%, transparent), 5px 5px 0 color-mix(in srgb, currentColor 65%, transparent), 4px 9px 0 -0.5px color-mix(in srgb, currentColor 50%, transparent), 0 10px 0 color-mix(in srgb, currentColor 38%, transparent), -5px 8px 0 -0.5px color-mix(in srgb, currentColor 26%, transparent), -5px 5px 0 color-mix(in srgb, currentColor 16%, transparent), -4px 1px 0 -0.5px color-mix(in srgb, currentColor 8%, transparent); }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- Cabeçalhos de seção ---------- */
.cabeca { display: grid; gap: 14px; justify-items: center; text-align: center; margin-bottom: 76px; }
.cabeca h2, .ia h2 { font-size: var(--t-h2); font-weight: 300; line-height: 1; letter-spacing: var(--aperto); }
.cabeca p, .ia-texto > p { font-size: var(--t-17); color: var(--ink-2); max-width: 34em; }
main > section + section { margin-top: var(--s-9); }

/* ---------- Garantias ---------- */
.garantias { display: grid; grid-template-columns: 1fr; margin-top: 24px; }
.garantias > div { padding: 22px 4px; border-top: 1px solid var(--line); display: grid; gap: 6px; }
.garantias h3 { font: 500 var(--t-20)/1.2 var(--f-titulo); letter-spacing: var(--aperto-2); }
.garantias p { color: var(--ink-2); max-width: 30em; }

/* ---------- Dia de estudo ---------- */
.dia-grade { display: grid; gap: 76px 20px; }
.dia-cartao { position: relative; padding: 20px 22px 0; display: grid; gap: 14px; align-content: start; }
.dia-cartao .poleiro { right: 22px; bottom: calc(100% - 5px); width: 62px; height: auto; }
.dia-cartao header { display: flex; align-items: center; gap: 8px; color: var(--papel-tinta-2); }
.dia-cartao header i { width: 8px; height: 8px; background: var(--c); }
.dia-cartao h3 { font-size: var(--t-24); font-weight: 400; line-height: 1.12; letter-spacing: var(--aperto-2); max-width: 13em; }
.linha-tempo { list-style: none; margin: 0; padding: 0; display: grid; }
.linha-tempo li { display: grid; grid-template-columns: 46px 12px 1fr; gap: 10px; align-items: start; padding-bottom: 14px; position: relative; font-size: 14.5px; }
.linha-tempo time { font: 400 11px/22px var(--f-mono); color: var(--papel-apagado); }
.linha-tempo li::before { content: ""; grid-column: 2; grid-row: 1; width: 8px; height: 8px; margin: 7px 2px; background: var(--papel-tinta); }
.linha-tempo li:not(:last-child)::after { content: ""; position: absolute; left: 61px; top: 18px; bottom: -4px; width: 2px; background: repeating-linear-gradient(var(--papel-linha) 0 4px, transparent 4px 8px); }
.linha-tempo span { grid-column: 3; }
.dia-cartao footer { display: flex; align-items: center; gap: 10px; margin: 0 -22px; padding: 14px 22px; border-top: 1px solid var(--papel-linha); font-weight: 500; font-size: 14px; }

/* ---------- Bento ---------- */
.bento-grade { display: grid; gap: 20px; }
.bento-item { position: relative; overflow: hidden; }
.bento-item h3 { font-size: var(--t-24); font-weight: 400; line-height: 1.1; letter-spacing: var(--aperto-2); }
.bento-materias { display: grid; }
.bento-lista { display: grid; align-content: start; padding: 10px; background: var(--surface-2); }
.bento-lista button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.bento-lista button:focus-visible { outline: 2px solid var(--accent); }
.bento-lista button[aria-selected="true"] { background: #fff; box-shadow: 0 0 0 1px var(--papel-linha), 0 2px 6px -2px rgba(20, 32, 26, .15); }
.bento-lista i, .celular-bloco i { flex: none; width: 12px; height: 12px; background: var(--c); }
.bento-lista span { display: grid; line-height: 1.25; }
.bento-lista small, .celular small { font-size: 12px; color: var(--papel-apagado); }
.bento-detalhe { padding: 26px 24px 28px; display: grid; gap: 12px; align-content: start; }
.bento-p { color: var(--papel-tinta-2); max-width: 26em; }
.bento-modo { color: var(--papel-apagado); margin-top: 8px; }
.etapas { display: flex; gap: 4px; min-height: 64px; }
.etapas div { flex: var(--f) 1 0; min-width: 0; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--cor) 16%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cor) 30%, transparent); display: grid; gap: 2px; align-content: start; animation: sobe .35s var(--saida) both; }
.etapas b { font: 800 20px/1 var(--f-ponto); }
.etapas span { font-size: 12px; line-height: 1.25; color: var(--papel-tinta-2); overflow-wrap: anywhere; }
@keyframes sobe { from { opacity: .3; transform: translateY(8px); } }

.bento-celular { border-radius: var(--r-3); background: linear-gradient(rgba(10, 28, 21, .5), rgba(10, 28, 21, .2)); box-shadow: var(--vidro-brilho), 0 0 0 1px var(--vidro-linha), var(--e3); -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque); display: grid; gap: 22px; padding: 26px 24px 0; }
.bento-txt { display: grid; gap: 8px; }
.bento-txt p { color: var(--ink-2); }
.celular { width: min(100%, 270px); margin: 0 auto -70px; padding: 8px; border-radius: 40px; background: #0b0f0d; box-shadow: 0 0 0 2px #2a322e, 0 30px 60px -20px #000; }
.celular-tela { position: relative; border-radius: 32px; overflow: hidden; background: var(--surface); color: var(--papel-tinta); }
.celular-mata { display: block; width: 100%; height: 150px; image-rendering: pixelated; }
.celular-topo { position: absolute; inset: 0 0 auto 0; height: 150px; padding: 18px 18px 0; color: #fff; display: grid; align-content: start; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.celular-topo b { font-size: 46px; line-height: 1; margin-top: 10px; }
.celular-topo small { color: #fff; opacity: .9; }
.celular-corpo { padding: 16px 16px 90px; display: grid; gap: 8px; }
.rotulo { text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 10.5px !important; }
.celular-bloco { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; box-shadow: 0 0 0 1px var(--papel-linha); }
.celular-bloco span { display: grid; line-height: 1.25; }
.celular-recado { font-size: 13px; color: var(--papel-tinta-2); padding-left: 10px; border-left: 3px solid var(--accent); }
.celular-barra { height: 8px; background: var(--surface-2); margin-top: 6px; }
.celular-barra span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--mata-400) 0 6px, var(--mata-500) 6px 8px); }
.celular-btn { justify-self: start; margin-top: 6px; pointer-events: none; }

.bento-revisao, .bento-simulado { padding: 26px 24px; display: grid; gap: 18px; align-content: start; }
.bento-revisao ul { list-style: none; margin: 0; padding: 0; display: grid; }
.bento-revisao li { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: center; padding: 12px 0; border-top: 1px solid var(--papel-linha); }
.bento-revisao li span:last-child { font: 400 12px var(--f-mono); color: var(--papel-apagado); }
.simulado-nota b { font-size: 72px; line-height: .9; color: var(--vagalume); }
.simulado-nota span { font-size: 28px; opacity: .7; }
.simulado-barras { display: flex; align-items: end; gap: 8px; height: 70px; }
.simulado-barras i { flex: 1; background: repeating-linear-gradient(var(--vidro-forte) 0 4px, transparent 4px 6px); }
.simulado-barras i:last-child { background: repeating-linear-gradient(var(--vagalume) 0 4px, transparent 4px 6px); }
.bento-simulado .mono { opacity: .7; }

/* ---------- Constelação ---------- */
.constelacao { position: relative; height: clamp(420px, 56vw, 560px); }
.constelacao svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.constelacao line { stroke: rgba(255, 255, 255, .34); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; }
.constelacao circle { fill: var(--vagalume); }
.const-centro { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 8px; border-radius: 22px; background: var(--vidro-forte); box-shadow: var(--vidro-brilho), 0 0 0 1px var(--vidro-linha), 0 0 0 10px rgba(255, 255, 255, .06); -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque); }
.const-no { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: 6px; font: 500 12px/1.2 var(--f-mono); text-align: center; text-shadow: var(--sombra-texto); animation: flutua 6s ease-in-out infinite; animation-delay: var(--d); white-space: nowrap; }
.const-no i { width: 10px; height: 10px; background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .18), 0 0 18px 4px rgba(255, 255, 255, .5); }
@keyframes flutua { 50% { transform: translateY(-7px); } }

/* ---------- IA ---------- */
.ia { display: grid; gap: 96px; align-items: center; }
.ia-texto { display: grid; gap: 18px; text-shadow: var(--sombra-texto); }
.ia-cores { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.ia-cores li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.ia-cores i { width: 28px; height: 12px; background: var(--c); }
.terminal { position: relative; border-radius: var(--r-3); background: var(--vidro-escuro); box-shadow: var(--vidro-brilho), 0 0 0 1px var(--vidro-linha), var(--e3); -webkit-backdrop-filter: var(--desfoque); backdrop-filter: var(--desfoque); }
.terminal .poleiro { right: 18px; bottom: calc(100% - 8px); }
.terminal-topo { display: flex; align-items: center; gap: 7px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.terminal-topo span { width: 8px; height: 8px; background: var(--vidro-linha); }
.terminal-topo em { font-style: normal; margin-left: 8px; opacity: .7; }
.terminal-lista { list-style: none; margin: 0; padding: 18px; display: grid; gap: 14px; font-size: 13px; }
.terminal-lista li { display: flex; gap: 12px; align-items: center; }
.terminal-fim { color: var(--vagalume); }
.terminal.anima li { opacity: .25; transition: opacity .3s; }
.terminal.anima li.ok { opacity: 1; }

/* ---------- Planos ---------- */
.planos { display: grid; justify-items: center; }
.planos .cabeca { margin-bottom: 28px; }
.alterna { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--vidro-escuro); box-shadow: 0 0 0 1px var(--vidro-linha); margin-bottom: 28px; }
.alterna button { all: unset; cursor: pointer; padding: 8px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; }
.alterna button:focus-visible { outline: 2px solid var(--vagalume); }
.alterna button[aria-pressed="true"] { background: #fff; color: #0b2417; }
.plano { width: min(100%, 860px); display: grid; }
.plano-preco { padding: 30px 28px; display: grid; gap: 10px; align-content: start; justify-items: start; }
.plano-valor { display: flex; align-items: baseline; gap: 8px; }
.plano-valor b { font-size: clamp(64px, 12vw, 92px); line-height: .9; }
.plano-valor small { font-size: 18px; opacity: .8; }
.plano-valor span, .plano-nota { color: var(--ink-2); }
.plano-preco .btn { margin-top: 14px; }
.plano-lista { list-style: none; margin: 0; padding: 30px 28px; display: grid; gap: 14px; align-content: center; border-top: 1px solid var(--line); }
.plano-lista li { display: flex; gap: 12px; align-items: flex-start; }
.plano-lista .pixok { margin-top: 4px; }
.faq { width: min(100%, 860px); margin-top: 28px; display: grid; }
.faq details { border-top: 1px solid var(--line); padding: 16px 4px; text-shadow: var(--sombra-texto); }
.faq summary { cursor: pointer; font: 500 var(--t-17)/1.3 var(--f-titulo); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::after { content: "+"; font: 800 20px/1 var(--f-ponto); }
.faq details[open] summary::after { content: "−"; }
.faq p { margin-top: 8px; color: var(--ink-2); max-width: 44em; }

/* ---------- Final ---------- */
.final { padding-top: 20px; }
.final .cabeca { margin-bottom: 40px; }
.final .cabeca .btn { margin-top: 12px; text-shadow: none; }
.tropa { display: flex; align-items: flex-end; justify-content: center; gap: clamp(2px, 2vw, 22px); height: clamp(150px, 26vw, 250px); margin-bottom: -6px; }
.tropa img { width: auto; }
.tropa .t1, .tropa .t5 { height: 46%; }
.tropa .t2, .tropa .t4 { height: 64%; }
.tropa .t3 { height: 100%; aspect-ratio: 1; margin: 0 -3%; }
.tropa .t3 .sprite { --c: clamp(150px, 26vw, 250px); transform: translateY(5%); }
.tropa .t2 { animation: pulo 6s 1s infinite; transform-origin: 50% 100%; }
.tropa .t5 { animation: pulo 4s infinite; transform-origin: 50% 100%; }

/* ---------- Rodapé ---------- */
.rodape { margin-top: 0; padding: 36px max(20px, calc((100% - var(--conteudo-max)) / 2)) 44px; background: var(--surface); color: var(--papel-tinta); display: grid; gap: 22px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.rodape nav a { text-decoration: none; color: var(--papel-tinta-2); }
.rodape nav a:hover { color: var(--papel-tinta); text-decoration: underline; }
.rodape .mono { color: var(--papel-apagado); }

/* ---------- Surgir ao rolar (parte de um estado visível) ---------- */
.js .rv { opacity: .3; transform: translateY(24px); transition: opacity .6s var(--saida), transform .7s var(--saida); }
.js .rv.visto { opacity: 1; transform: none; }

/* ---------- Telas largas ---------- */
@media (min-width: 720px) {
  .so-largo { display: inline; }
  .garantias { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .bento-grade { grid-template-columns: 1fr 1fr; }
  .bento-materias { grid-column: 1 / -1; grid-template-columns: 250px 1fr; }
  .plano { grid-template-columns: 1fr 1.15fr; }
  .plano-lista { border-top: 0; border-left: 1px solid var(--line); }
  .timer-casa { width: 104px; }
  .timer-casa b { font-size: 54px; }
}
@media (min-width: 1000px) {
  .heroi { grid-template-columns: 1.05fr .95fr; gap: 40px; padding: 64px 0 96px; }
  .heroi-texto { justify-items: start; text-align: left; }
  .heroi-acoes { justify-content: flex-start; }
  .dia-grade { grid-template-columns: repeat(3, 1fr); }
  .bento-grade { grid-template-columns: 1fr 1fr 340px; }
  .bento-materias { grid-column: 1 / 3; }
  .bento-celular { grid-column: 3; grid-row: 1 / 3; }
  .ia { grid-template-columns: 1fr 1fr; gap: 64px; }
}
@media (max-width: 420px) {
  .marca small { display: none; }
  .topo-nav { gap: 14px; }
  .cartao { left: -6px; right: 12px; }
  .const-no { font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========== v2: legibilidade =========== */
/* véu fixo por cima da floresta: escurece o meio da tela, onde fica o texto */
.veu { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 50%, rgba(4, 14, 10, .42), rgba(4, 14, 10, .12) 70%), linear-gradient(rgba(4, 14, 10, .08), rgba(4, 14, 10, .2)); }
/* placa de vidro escuro atrás de todo texto que fica solto sobre a cena */
.cabeca, .garantias, .ia-texto, .faq, .heroi-texto {
  background: rgba(6, 18, 14, .5);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .08);
  border-radius: 24px;
}
.cabeca { width: fit-content; max-width: 100%; margin-inline: auto; padding: 26px clamp(20px, 4vw, 40px) 28px; }
.garantias { padding: 6px 24px; column-gap: 40px; }
.garantias > div:nth-child(-n+2) { border-top: 0; }
.ia-texto, .heroi-texto { padding: 28px clamp(20px, 3vw, 32px); }
.faq { padding: 4px 24px; }
.faq details:first-child { border-top: 0; }
.cabeca p, .ia-texto > p, .garantias p, .faq p, .heroi-sub { color: #e6ede3; }
@media (max-width: 719px) { .garantias > div:nth-child(2) { border-top: 1px solid var(--line); } }

/* =========== v2: cores do boné =========== */
:root { --tropa: #2563eb; }
.selo::before { background: var(--tropa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tropa) 30%, transparent); }
.dia-cartao .poleiro { width: 92px; bottom: calc(100% - 14px); right: 12px; }
.poleiro-senta { width: 92px; top: -2px; right: 14px; animation: none; }
.terminal .poleiro img { width: 88px; }
.terminal .poleiro { bottom: calc(100% - 14px); }
.tropa { gap: clamp(0px, 1vw, 10px); height: clamp(130px, 22vw, 220px); }
.tropa img { height: 70%; width: auto; }
.tropa .t3 { height: 100%; aspect-ratio: auto; margin: 0; }
.tropa .t2, .tropa .t5 { height: 82%; animation: none; }
.tropa .t1, .tropa .t6 { height: 62%; }

/* =========== v2: perfil e metas =========== */
.perfil-grade { display: grid; gap: 28px; align-items: start; }
.perfil-form { margin: 0; padding: 24px; display: grid; gap: 20px; }
.campo { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.campo label, .campo legend { padding: 0; font-weight: 600; font-size: 14px; display: flex; justify-content: space-between; gap: 12px; }
.campo output { font: 800 18px/1 var(--f-ponto); color: var(--papel-tinta); }
.campo input[type="text"], .campo input[type="date"] { font: 500 15px var(--f-texto); color: var(--papel-tinta); background: #fff; border: 0; border-radius: 12px; padding: 11px 14px; box-shadow: 0 0 0 1px rgba(20, 32, 26, .14); }
.campo input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tropa); }
.campo input[type="range"] { width: 100%; accent-color: var(--tropa); }
.cores { display: flex; flex-wrap: wrap; gap: 10px; }
.cores button { all: unset; cursor: pointer; width: 40px; height: 40px; border-radius: 12px; background: var(--c); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 1px rgba(20, 32, 26, .12); display: grid; place-items: center; transition: transform .15s var(--mola); }
.cores button:hover { transform: translateY(-2px); }
.cores button[aria-pressed="true"] { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .18), 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.cores button[aria-pressed="true"]::after { content: ""; width: 14px; height: 14px; background: #fff; clip-path: polygon(0 50%, 14% 36%, 36% 57%, 86% 7%, 100% 21%, 36% 86%); }
.cores button:focus-visible, .jeitos button:focus-visible { outline: 2px solid var(--papel-tinta); outline-offset: 3px; }
.jeitos { display: flex; flex-wrap: wrap; gap: 6px; }
.jeitos button { all: unset; cursor: pointer; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; background: var(--surface-2); box-shadow: 0 0 0 1px rgba(20, 32, 26, .1); }
.jeitos button[aria-pressed="true"] { background: var(--papel-tinta); color: #fff; }
.previa-cartao { padding: 22px; display: grid; gap: 18px; border-top: 4px solid var(--tropa); }
.previa-topo { display: flex; align-items: center; gap: 14px; }
.previa-macaco { width: 120px; height: 120px; flex: none; margin: -14px -6px -10px -10px; }
.previa-oi { opacity: .75; }
.previa-nome { font: 400 34px/1.05 var(--f-titulo); letter-spacing: var(--aperto); overflow-wrap: anywhere; }
.chip-cor { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; }
.chip-cor::before { content: ""; width: 10px; height: 10px; background: var(--tropa); }
.previa-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.previa-numeros div { display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: rgba(6, 18, 14, .35); box-shadow: 0 0 0 1px var(--line); }
.previa-numeros b { font-size: 46px; line-height: 1; }
.previa-numeros span { font-size: 13px; color: var(--ink-2); }
.previa-barra { height: 12px; background: rgba(6, 18, 14, .45); box-shadow: 0 0 0 1px var(--line); }
.previa-barra span { display: block; height: 100%; width: 58%; background: repeating-linear-gradient(90deg, var(--tropa) 0 8px, color-mix(in srgb, var(--tropa) 70%, #000) 8px 10px); transition: width .4s steps(10); }
.previa-frase { color: #e6ede3; }
.previa-tropa { display: flex; justify-content: center; gap: 4px; margin-top: 14px; }
.previa-tropa img { width: 64px; height: 64px; opacity: .55; transition: opacity .2s, transform .2s var(--mola); }
.previa-tropa img.ativo { opacity: 1; transform: translateY(-6px); }
@media (min-width: 900px) { .perfil-grade { grid-template-columns: 1fr 1fr; } }
.const-no { padding: 6px 10px 5px; border-radius: 10px; background: rgba(6, 18, 14, .62); box-shadow: 0 0 0 1px rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* v3: indicador de "trabalhando" em pixel: 4 quadrados que giram de 90 em 90 graus, sem sair da grade */
.pixgira { width: 12px; height: 12px; animation: gira-px .6s steps(4) infinite; background:
  linear-gradient(currentColor, currentColor) 0 0 / 5px 5px no-repeat,
  linear-gradient(color-mix(in srgb, currentColor 70%, transparent), color-mix(in srgb, currentColor 70%, transparent)) 7px 0 / 5px 5px no-repeat,
  linear-gradient(color-mix(in srgb, currentColor 45%, transparent), color-mix(in srgb, currentColor 45%, transparent)) 7px 7px / 5px 5px no-repeat,
  linear-gradient(color-mix(in srgb, currentColor 22%, transparent), color-mix(in srgb, currentColor 22%, transparent)) 0 7px / 5px 5px no-repeat; }
.pixgira::before { content: none; }
@keyframes gira-px { to { transform: rotate(360deg); } }
.terminal-fim .pixgira { margin: 1px; }

/* =========== v4: rodapé e ranking =========== */
.tropa .t3 { height: 100%; width: auto; }

.ranking { position: relative; padding-block: 40px; }
.ranking > :not(.chuva) { position: relative; z-index: 1; }
.chuva { position: absolute; inset: -60px -20px; overflow: hidden; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.chuva img { position: absolute; top: 0; left: var(--x); width: var(--t); height: var(--t); opacity: var(--o);
  animation: cai var(--dur) linear var(--atraso) infinite; }
.chuva .gira { animation: cai var(--dur) linear var(--atraso) infinite; }
@keyframes cai {
  0% { transform: translate(0, -180px) rotate(-8deg); }
  25% { transform: translate(18px, calc(var(--h) * .25)) rotate(6deg); }
  50% { transform: translate(-14px, calc(var(--h) * .5)) rotate(-6deg); }
  75% { transform: translate(16px, calc(var(--h) * .75)) rotate(5deg); }
  100% { transform: translate(0, calc(var(--h) + 40px)) rotate(-8deg); }
}
.ranking-grade { display: grid; gap: 20px; align-items: start; }
.placar { padding: 22px 22px 16px; display: grid; gap: 14px; }
.placar-topo { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.placar-topo h3, .amigos h3 { font: 400 var(--t-24)/1.1 var(--f-titulo); letter-spacing: var(--aperto-2); }
.placar-topo .mono { color: var(--papel-apagado); margin-top: 4px; }
.placar-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.placar-lista li { display: grid; grid-template-columns: 28px 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 6px; border-top: 1px solid var(--papel-linha); border-radius: 10px; }
.placar-lista li.voce { background: color-mix(in srgb, var(--tropa) 12%, #fff); border-top-color: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tropa) 35%, transparent); }
.placar-pos { font: 800 22px/1 var(--f-ponto); text-align: center; color: var(--papel-apagado); }
.placar-lista li:nth-child(1) .placar-pos { color: #c99a06; }
.placar-lista img { width: 52px; height: 52px; margin: -6px 0; }
.placar-nome { display: grid; gap: 4px; min-width: 0; }
.placar-nome b { font-weight: 600; }
.placar-barra { height: 6px; background: var(--surface-2); }
.placar-barra span { display: block; height: 100%; background: var(--c); transition: width .8s steps(12); }
.placar-h { font: 800 22px/1 var(--f-ponto); }
.placar-h small { font: 400 12px var(--f-texto); color: var(--papel-apagado); margin-left: 2px; }
.placar-pe { color: var(--papel-apagado); text-align: right; }
.ranking-lado { display: grid; gap: 20px; }
.amigos { padding: 22px; display: grid; gap: 14px; }
.amigos-fila { display: flex; flex-wrap: wrap; align-items: end; }
.amigos-fila img { width: 64px; height: 64px; margin-right: -10px; transition: transform .2s var(--mola); }
.amigos-fila img:hover { transform: translateY(-6px); }
.amigos-mais { width: 48px; height: 48px; margin: 0 0 6px 14px; border-radius: 14px; display: grid; place-items: center; font: 800 18px var(--f-ponto); background: var(--surface-2); box-shadow: 0 0 0 1px var(--papel-linha); }
.amigos-txt { color: var(--papel-tinta-2); }
.convite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--papel-linha); }
.convite .mono { color: var(--papel-tinta-2); overflow-wrap: anywhere; }
.convite-ok { font-size: 13px; color: var(--papel-tinta-2); }
.convite-ok:empty { display: none; }
.sequencia { padding: 22px; display: grid; gap: 14px; }
.sequencia b { font-size: 64px; line-height: .9; color: var(--vagalume); margin-right: 10px; }
.sequencia > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; }
.sequencia > div:first-child span { color: var(--ink-2); }
.sequencia-dias { display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.sequencia-dias i { aspect-ratio: 1; background: var(--ok); }
.sequencia-dias i.nao { background: rgba(255, 255, 255, .14); }
.sequencia-dias i.hoje { background: var(--vagalume); animation: pisca 1.2s steps(2) infinite; }
@keyframes pisca { 50% { opacity: .45; } }
.sequencia .mono { opacity: .75; }
@media (min-width: 900px) { .ranking-grade { grid-template-columns: 1.2fr 1fr; } }

/* =========== v5: interatividade com o mouse =========== */
@media (hover: hover) and (pointer: fine) {
  /* cartões inclinam na direção do cursor e ganham um brilho que segue o mouse */
  .inclina { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--sobe, 0)); transition: transform .25s var(--saida), box-shadow .25s; will-change: transform; }
  .js .rv.visto.inclina { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--sobe, 0)); transition: transform .25s var(--saida); }
  .inclina:hover { --sobe: -4px; }
  .inclina::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .22), transparent 70%); mix-blend-mode: soft-light; z-index: 5; }
  .inclina:hover::after { opacity: 1; }
  .plano, .placar, .amigos, .sequencia, .previa-cartao, .terminal { position: relative; }

  /* macacos reagem */
  .poleiro, .tropa img, .previa-tropa img, .amigos-fila img, .placar-lista img { pointer-events: auto; }
  .dia-cartao:hover .poleiro, .terminal:hover .poleiro, .demo:hover .poleiro-senta { animation: salto .5s var(--mola); }
  .tropa img { cursor: pointer; transition: transform .25s var(--mola), filter .25s; transform-origin: 50% 100%; }
  .tropa img:hover { transform: translateY(-14px) scale(1.08); filter: drop-shadow(0 0 12px rgba(233, 242, 107, .55)); }
  .tropa img.pulou { animation: salto-alto .7s var(--mola); }
  .placar-lista li { transition: background-color .15s, transform .2s var(--mola); }
  .placar-lista li:hover { background: var(--surface-2); transform: translateX(4px); }
  .placar-lista li.voce:hover { background: color-mix(in srgb, var(--tropa) 18%, #fff); }
  .placar-lista li:hover img { animation: salto .5s var(--mola); }

  /* miúdos */
  .timer-casa { transition: transform .2s var(--mola), background-color .2s; cursor: default; }
  .timer-casa:hover { transform: translateY(-4px) rotate(-2deg); background: var(--vidro-forte); }
  .timer-casa:nth-child(2):hover { transform: translateY(-4px) rotate(1.5deg); }
  .garantias > div { transition: transform .25s var(--saida); }
  .garantias > div:hover { transform: translateX(6px); }
  .garantias > div:hover h3 { color: var(--vagalume); }
  .garantias h3 { transition: color .2s; }
  .linha-tempo li { transition: transform .2s var(--saida); }
  .linha-tempo li:hover { transform: translateX(4px); }
  .linha-tempo li:hover::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
  .const-no { pointer-events: auto; cursor: default; transition: scale .2s var(--mola), background-color .2s; }
  .const-no:hover { scale: 1.14; background: rgba(6, 18, 14, .85); z-index: 2; }
  .const-no:hover i { background: var(--vagalume); box-shadow: 0 0 0 4px rgba(233, 242, 107, .25), 0 0 22px 6px rgba(233, 242, 107, .6); }
  .constelacao line { transition: stroke .2s, stroke-width .2s; }
  .constelacao line.acesa { stroke: var(--vagalume); stroke-width: 2; stroke-dasharray: none; }
  .const-centro { transition: scale .25s var(--mola); }
  .const-centro:hover { scale: 1.1; }
  .ia-cores li { transition: transform .2s var(--saida); }
  .ia-cores li:hover { transform: translateX(6px); }
  .ia-cores li:hover i { width: 44px; }
  .ia-cores i { transition: width .25s var(--mola); }
  .plano-lista li, .terminal-lista li { transition: transform .2s var(--saida); }
  .plano-lista li:hover, .terminal-lista li:hover { transform: translateX(5px); }
  .sequencia-dias i { transition: transform .15s var(--mola); }
  .sequencia-dias i:hover { transform: scale(1.35); }
  .simulado-barras i { transition: height .3s var(--mola), filter .2s; }
  .bento-simulado:hover .simulado-barras i { filter: brightness(1.3); }
  .bento-simulado:hover .simulado-barras i:nth-child(odd) { height: calc(var(--h0, 50%) + 12%) !important; }
  .marca img { transition: transform .3s var(--mola); }
  .marca:hover img { transform: rotate(-12deg) scale(1.15); }
  .faq summary { transition: color .2s; }
  .faq summary:hover { color: var(--vagalume); }
  .btn-claro:hover { box-shadow: inset 0 -1px 0 rgba(6, 30, 18, .14), 0 22px 44px -14px rgba(2, 14, 8, .7), 0 0 0 4px color-mix(in srgb, var(--tropa) 35%, transparent); }
  .celular { transition: transform .4s var(--saida); }
  .bento-celular:hover .celular { transform: translateY(-10px) rotate(-1.5deg); }
  .cartao { transition: translate .25s var(--saida); }
  .cartao:hover { translate: 0 -4px; }
}
@keyframes salto { 40% { transform: translateY(-12px); } 70% { transform: translateY(0) scaleY(.94); } }
@keyframes salto-alto { 30% { transform: translateY(-46px) rotate(-8deg); } 60% { transform: translateY(-20px) rotate(6deg); } 85% { transform: translateY(0) scaleY(.9); } }

/* rastro de faíscas em pixel atrás do cursor */
.faisca { position: fixed; z-index: 3; width: 4px; height: 4px; pointer-events: none; background: var(--vagalume); animation: faisca .7s steps(6) forwards; }
@keyframes faisca { to { transform: translate(var(--fx), var(--fy)); opacity: 0; } }