/* ============================================================
   tryzen.com.br/afiliado — o programa de afiliados
   23/10/2026, terceira versao. Pedido do dono: o ritmo das paginas
   Design e Commerce da Claude (manchete grande centralizada, dois
   botoes, a midia num quadro arredondado, a lista numerada que abre por
   item, abas segmentadas, perguntas no fim) com as animacoes em SVG do
   /faq/planos (orbitas, tracos que se desenham, podio e trofeu,
   titulos palavra por palavra, numeros que contam).
   O nome "tryzen" troca entre preto e branco com o tema (como o
   .wordmark do /faq/planos). O verde da marca fica no que e da marca e
   no que e vitoria. Sem hover em botao: o retorno e o :active.
   ============================================================ */
/* As cores e a letra sao as da Tryzen (css/tokens.css): os mesmos tokens do
   app e do /faq/planos, que ja trocam sozinhos entre claro e escuro. Da
   referencia vem so o layout. */
:root {
  --fundo: var(--bg);
  --fundo-2: var(--surface);
  --quadro: var(--bg);
  --tinta: var(--text);
  --fraco: var(--text-2);
  --quieto: var(--text-3);
  --fio: var(--border-soft);
  --fio-forte: var(--border);
  --botao: var(--text);
  --botao-tinta: var(--bg);
  --botao-2: var(--surface);
  --serifa: var(--font);
  --texto: var(--font);
  --expo: cubic-bezier(.16, 1, .3, 1);
  --raio: 22px;
}
:root[data-tema="claro"] { color-scheme: light; }
:root[data-tema="escuro"] { color-scheme: dark; --quadro: var(--surface); --fundo-2: var(--bg-elev, #191919); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font: 17px/1.6 var(--texto); -webkit-font-smoothing: antialiased; transition: background .3s ease; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--texto); font-weight: 500; letter-spacing: -.035em; line-height: 1.05; }
h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.25; }
p { color: var(--fraco); }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }
.pular { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 8px 14px; border-radius: 10px; background: var(--botao); color: var(--botao-tinta); }
.pular:focus { left: 16px; }
.wrap { width: min(1200px, calc(100% - 64px)); margin: 0 auto; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 4px; }

/* o nome da marca: preto no claro, branco no escuro */
.nome-marca { display: block; height: auto; }
:root[data-tema="escuro"] .nome-marca { filter: invert(1); }

/* ---------- botoes ---------- */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 30px; border-radius: 12px;
  border: 1px solid transparent; font: 600 16px/1 var(--texto); text-decoration: none; cursor: pointer; transition: transform .12s ease, opacity .12s ease; }
.botao:active { transform: scale(.985); opacity: .9; }
.botao svg { width: 18px; height: 18px; }
.botao--claro { background: var(--botao); color: var(--botao-tinta); }
.botao--escuro { background: var(--botao-2); color: var(--tinta); }
.botao--fio { border-color: var(--fio-forte); background: transparent; color: var(--tinta); }
.botao--pequeno { min-height: 40px; padding: 0 18px; font-size: 14.5px; border-radius: 10px; }
.botao[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- topo ---------- */
.topo { position: sticky; top: 0; z-index: 30; background: var(--fundo); border-bottom: 1px solid var(--fio); transition: background .3s ease; }
.topo__nav { display: flex; align-items: center; gap: 28px; height: 68px; }
.topo__links { display: flex; gap: 26px; margin-left: auto; font-size: 15px; }
.topo__links a { text-decoration: none; color: var(--fraco); }
.tema { display: inline-grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--fio); border-radius: 50%; background: none; color: var(--tinta); cursor: pointer; }
.tema svg { width: 17px; height: 17px; }
.tema .sol { display: none; }
:root[data-tema="escuro"] .tema .sol { display: block; }
:root[data-tema="escuro"] .tema .lua { display: none; }
.migalha { border-bottom: 1px solid var(--fio); font-size: 14px; color: var(--quieto); }
.migalha .wrap { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; }
.migalha a { text-decoration: none; }

/* ---------- abertura centralizada, dois botoes ---------- */
.abertura { text-align: center; padding: 92px 0 0; }
.olho { font-size: 18px; color: var(--quieto); margin-bottom: 18px; }
.abertura h1 { font-size: clamp(50px, 7.4vw, 92px); max-width: 1000px; margin: 0 auto; }
.abertura__texto { max-width: 680px; margin: 26px auto 0; font-size: 21px; line-height: 1.5; }
.abertura__acoes { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
.abertura__acoes .botao { min-width: 220px; }

/* ---------- o palco: a cena animada num quadro arredondado ---------- */
.palco { margin: 68px auto 0; padding: 14px; border-radius: 34px; background: var(--fundo-2); border: 1px solid var(--fio); }
.palco__tela { position: relative; border-radius: 24px; background: var(--quadro); border: 1px solid var(--fio); overflow: hidden; }
.palco__tela > svg { display: block; width: 100%; height: auto; }
.cena text { fill: var(--fraco); stroke: none; font: 500 13px var(--texto); }
.cena .t-forte { fill: var(--tinta); font-weight: 600; }
.cena .t-serifa { fill: var(--tinta); font: 500 26px var(--texto); }
.cena .t-mono { font: 600 12px var(--font-mono, monospace); fill: var(--quieto); }
.cena .fundo-cartao { fill: var(--quadro); stroke: var(--fio-forte); }
.cena .fundo-suave { fill: var(--fundo-2); stroke: var(--fio); }
.cena .fio { stroke: var(--fio-forte); }
.cena .orb { stroke: var(--fio-forte); stroke-width: .816; }
.cena .orb-viva { stroke: var(--marca); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; animation: orbita-desenha 6s var(--expo) infinite; }
.cena .corredor { fill: var(--marca); stroke: none; transform-box: fill-box; transform-origin: center; animation: respira 3.6s ease-in-out infinite; }
.cena .viajante { fill: var(--tinta); stroke: none; offset-rotate: 0deg; animation: viaja 7s linear infinite; }
.cena .viajante--2 { animation-delay: -2.4s; }
.cena .viajante--3 { animation-delay: -4.8s; fill: var(--marca); }
.cena .pulso { fill: var(--marca); stroke: none; transform-box: fill-box; transform-origin: center; animation: pulso 2.4s ease-out infinite; opacity: .25; }
.cena .barra { fill: var(--fio-forte); stroke: none; }
.cena .barra-viva { fill: var(--tinta); stroke: none; transform-box: fill-box; transform-origin: bottom; animation: cresce 4.8s var(--expo) infinite; }
.cena .barra-viva--v { fill: var(--marca); }
.cena .traca { stroke-dasharray: 1; stroke-dashoffset: 1; animation: traca 4.8s var(--expo) infinite; }
.cena .trofeu { stroke: var(--tinta); transform-box: fill-box; transform-origin: center bottom; animation: trofeu 4.8s var(--expo) infinite; }
.cena .raio { stroke: var(--marca); stroke-dasharray: 1; stroke-dashoffset: 1; animation: raio 4.8s ease infinite; }
.cena .chega { animation: chega 4.8s var(--expo) infinite; }
.cena .chega--2 { animation-delay: .35s; }
.cena .chega--3 { animation-delay: .7s; }
@keyframes orbita-desenha { 0% { stroke-dashoffset: 1; } 45%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes respira { 0%, 100% { opacity: .94; } 50% { opacity: 1; transform: scale(1.02); } }
@keyframes viaja { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes pulso { 0% { transform: scale(.6); opacity: .35; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes cresce { 0%, 8% { transform: scaleY(.08); } 45%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.08); } }
@keyframes traca { 0%, 6% { stroke-dashoffset: 1; } 50%, 86% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes trofeu { 0%, 30% { opacity: 0; transform: translateY(-14px) scale(.9); } 48%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes raio { 0%, 46% { stroke-dashoffset: 1; opacity: 0; } 58%, 84% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes chega { 0%, 10% { opacity: 0; transform: translateY(8px); } 30%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* o recado logo abaixo do palco */
.recado { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 22px auto 0; padding: 26px 30px; border-radius: var(--raio);
  border: 1px solid var(--fio); background: var(--fundo-2); text-align: left; }
.recado p { color: var(--tinta); font-size: 18px; }

/* ---------- a faixa dos numeros que contam ---------- */
.numeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 96px; border-top: 1px solid var(--fio); border-bottom: 1px solid var(--fio); }
.numero { padding: 30px 24px; }
.numero + .numero { border-left: 1px solid var(--fio); }
.numero b { display: block; font: 500 52px/1 var(--texto); letter-spacing: -.02em; color: var(--tinta); font-variant-numeric: tabular-nums; }
.numero span { display: block; margin-top: 10px; font-size: 15px; color: var(--fraco); }

/* ---------- abertura de secao ---------- */
.secao { padding: 136px 0 0; }
.secao__cab { text-align: center; max-width: 860px; margin: 0 auto 52px; }
.secao__ic { width: 56px; height: 56px; margin: 0 auto 26px; color: var(--tinta); stroke-width: 1.3; display: block; }
.secao__ic .v { stroke: var(--marca); }
.secao__cab h2 { font-size: clamp(42px, 5.8vw, 70px); }
.secao__cab p { margin: 20px auto 0; max-width: 640px; font-size: 19px; line-height: 1.55; }

/* ---------- a lista numerada que abre por item (molde Commerce) ---------- */
.vitorias { display: grid; gap: 10px; }
.vit { border-radius: 22px; border: 1px solid var(--fio); background: var(--fundo-2); overflow: hidden; transition: background .3s ease; }
.vit[open] { background: var(--quadro); }
.vit summary { list-style: none; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 12px; padding: 22px 26px; cursor: pointer; }
.vit summary::-webkit-details-marker { display: none; }
.vit__n { font: 600 13px var(--font-mono, monospace); color: var(--quieto); }
.vit[open] .vit__n { color: var(--marca); }
.vit__t { font: 500 30px/1.15 var(--texto); letter-spacing: -.01em; }
.vit__tag { font-size: 12.5px; color: var(--quieto); padding: 4px 10px; border: 1px solid var(--fio); border-radius: 999px; white-space: nowrap; }
.vit__corpo { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: center; padding: 0 26px 26px 94px; }
.vit__corpo p { font-size: 17px; }
.vit__corpo ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vit__corpo li { display: flex; gap: 10px; color: var(--fraco); font-size: 16px; }
.vit__corpo li svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--tinta); }
.vit__arte { border-radius: 18px; background: var(--fundo-2); border: 1px solid var(--fio); overflow: hidden; }
.vit__arte svg { display: block; width: 100%; height: auto; }

/* ---------- as abas segmentadas (molde Design) ---------- */
.abas { display: flex; justify-content: center; margin: 0 auto 28px; }
.abas__trilho { display: inline-flex; padding: 5px; gap: 4px; border-radius: 14px; background: var(--fundo-2); border: 1px solid var(--fio); }
.aba { min-height: 42px; padding: 0 24px; border: 0; border-radius: 10px; background: none; color: var(--fraco); font: 600 15px var(--texto); cursor: pointer; }
.aba[aria-selected="true"] { background: var(--quadro); color: var(--tinta); box-shadow: 0 1px 0 var(--fio-forte) inset, 0 8px 22px -12px rgba(0, 0, 0, .45); }
.painel-aba { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); border-radius: 28px; overflow: hidden; border: 1px solid var(--fio); background: var(--fundo-2); }
.painel-aba[hidden] { display: none !important; }
.painel-aba__texto { padding: 48px 44px; display: grid; align-content: center; gap: 16px; }
.painel-aba__texto h3 { font: 500 38px/1.08 var(--texto); letter-spacing: -.015em; }
.painel-aba__texto ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.painel-aba__texto li { display: flex; gap: 10px; color: var(--fraco); font-size: 16px; }
.painel-aba__texto li svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: var(--tinta); }
.painel-aba__ganho { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--fio); color: var(--tinta); font-size: 16px; }
.painel-aba__arte { display: grid; place-items: center; background: var(--quadro); border-left: 1px solid var(--fio); min-height: 400px; padding: 24px; }
.painel-aba__arte svg { width: min(100%, 420px); height: auto; color: var(--tinta); }

/* ---------- para quem: so novos clientes ---------- */
.publico { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 28px; overflow: hidden; border: 1px solid var(--fio); }
.publico__lado { padding: 44px; background: var(--fundo-2); }
.publico__lado + .publico__lado { border-left: 1px solid var(--fio); background: transparent; }
.publico__lado h3 { display: flex; align-items: center; gap: 12px; font: 500 30px var(--texto); margin-bottom: 20px; }
.publico__lado h3 svg { width: 28px; height: 28px; color: var(--marca); }
.publico__lado + .publico__lado h3 svg { color: var(--quieto); }
.publico ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.publico li { display: flex; gap: 10px; color: var(--fraco); font-size: 16px; }
.publico li svg { width: 18px; height: 18px; flex: none; margin-top: 4px; }
.publico__pe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 44px; border-top: 1px solid var(--fio); }
.publico__pe p { color: var(--tinta); }

/* ---------- os cartoes ---------- */
.cartoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cartao { padding: 32px 30px; border-radius: var(--raio); background: var(--fundo-2); border: 1px solid var(--fio); }
.cartao svg { width: 36px; height: 36px; color: var(--tinta); margin-bottom: 26px; stroke-width: 1.3; }
.cartao svg .v { stroke: var(--marca); }
.cartao h3 { font-size: 20px; margin-bottom: 10px; }
.cartao p { font-size: 16px; }

/* ---------- o formulario ---------- */
.form { max-width: 840px; margin: 0 auto; border: 1px solid var(--fio); border-radius: 34px; background: var(--fundo-2); padding: 14px; }
.form__dentro { border-radius: 24px; background: var(--quadro); border: 1px solid var(--fio); overflow: hidden; }
.form__trilha { display: flex; gap: 6px; padding: 24px 36px 0; }
.form__trilha span { flex: 1; height: 3px; border-radius: 3px; background: var(--fio); transition: background .4s ease; }
.form__trilha span.is-feito { background: var(--marca); }
.form__passo { padding: 30px 36px 6px; animation: passo-entra .5s var(--expo); }
@keyframes passo-entra { from { opacity: 0; transform: translateY(10px); } }
.form__cab { display: flex; gap: 16px; align-items: center; margin-bottom: 26px; }
.form__cab svg { width: 42px; height: 42px; flex: none; stroke-width: 1.3; color: var(--tinta); }
.form__cab svg .v { stroke: var(--marca); }
.form__cab h3 { font: 500 32px/1.1 var(--texto); letter-spacing: -.01em; }
.form__cab p { font-size: 15.5px; margin-top: 6px; }
.cartoes-op { display: grid; gap: 10px; }
.cartoes-op--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cartoes-op--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px; border: 1.5px solid var(--fio); border-radius: 16px; cursor: pointer; background: var(--fundo-2); transition: border-color .2s ease; }
.op input { position: absolute; opacity: 0; pointer-events: none; }
.op svg { width: 38px; height: 38px; color: var(--tinta); stroke-width: 1.3; }
.op svg .v { stroke: var(--marca); }
.op b { font-size: 16px; font-weight: 600; color: var(--tinta); }
.op span { font-size: 14px; color: var(--fraco); line-height: 1.45; }
.op::after { content: ''; position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border: 1.5px solid var(--fio-forte); border-radius: 50%; }
.op:has(input[type="checkbox"])::after { border-radius: 6px; }
.op:has(input:checked) { border-color: var(--tinta); }
.op:has(input:checked)::after { border-color: var(--tinta); background: var(--tinta); box-shadow: inset 0 0 0 4px var(--fundo-2); }
.op:has(input[type="checkbox"]:checked)::after { box-shadow: none; }
.op:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.op--linha { grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding: 14px 44px 14px 16px; }
.op--linha svg { width: 28px; height: 28px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.campo { display: grid; gap: 7px; }
.campo--largo { grid-column: 1 / -1; }
.campo > span { font-size: 14px; font-weight: 600; color: var(--tinta); }
.campo > span small { font-weight: 400; color: var(--quieto); }
.campo input, .campo textarea, .campo select { width: 100%; min-height: 50px; padding: 12px 14px; border: 1.5px solid var(--fio); border-radius: 12px; background: var(--fundo-2); color: var(--tinta);
  font: 16px var(--texto); }
.campo select option { background: var(--quadro); color: var(--tinta); }
.campo textarea { resize: vertical; min-height: 96px; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--quieto); }
.campo input:focus, .campo textarea:focus, .campo select:focus { outline: 0; border-color: var(--tinta); }
.campo.is-erro input, .campo.is-erro select { border-color: var(--tinta); box-shadow: 0 0 0 3px var(--fio-forte); }
.grupo-t { margin: 26px 0 10px; font-size: 14px; font-weight: 600; color: var(--tinta); }
.grupo-t small { font-weight: 400; color: var(--quieto); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; }
.chip span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1.5px solid var(--fio); border-radius: 999px; font-size: 14.5px; cursor: pointer; color: var(--fraco); }
.chip span svg { width: 17px; height: 17px; }
.chip input:checked + span { background: var(--tinta); border-color: var(--tinta); color: var(--fundo); }
.chip input:focus-visible + span { outline: 2px solid var(--tinta); outline-offset: 2px; }
.acordos { display: grid; gap: 10px; }
.acordo { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; padding: 16px 18px; border: 1.5px solid var(--fio); border-radius: 14px; cursor: pointer; background: var(--fundo-2); }
.acordo input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 1px 0 0; border: 1.5px solid var(--fio-forte); border-radius: 7px; background: transparent; cursor: pointer; display: grid; place-items: center; }
.acordo input::after { content: ''; width: 10px; height: 6px; border-left: 2px solid var(--fundo); border-bottom: 2px solid var(--fundo); transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.acordo input:checked { background: var(--tinta); border-color: var(--tinta); }
.acordo input:checked::after { opacity: 1; }
.acordo input:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.acordo b { display: block; font-size: 15.5px; color: var(--tinta); margin-bottom: 2px; }
.acordo span { font-size: 14.5px; color: var(--fraco); line-height: 1.5; }
.acordo a { color: var(--tinta); }
.form__erro { margin: 18px 36px 0; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--fio-forte); color: var(--tinta); font-size: 15px; }
.form__pe { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 36px 30px; }
.form__pe .xs { font-size: 13.5px; color: var(--quieto); }
.isca { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.feito { padding: 56px 36px; text-align: center; }
.feito svg.podio-feito { width: 220px; height: auto; color: var(--tinta); }
.feito h3 { font: 500 42px var(--texto); margin: 18px 0 12px; }
.feito p { max-width: 470px; margin: 0 auto; }
.feito__proximos { display: grid; gap: 10px; max-width: 490px; margin: 30px auto; text-align: left; }
.feito__proximos div { display: flex; gap: 12px; padding: 14px 16px; border: 1px solid var(--fio); border-radius: 14px; font-size: 15px; color: var(--fraco); }
.feito__proximos b { color: var(--tinta); }

/* ---------- perguntas ---------- */
.perguntas { max-width: 860px; margin: 0 auto; }
.perguntas details { border-top: 1px solid var(--fio); }
.perguntas details:last-child { border-bottom: 1px solid var(--fio); }
.perguntas summary { list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 24px 0; font-size: 19px; font-weight: 500; cursor: pointer; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: '+'; font: 300 26px/1 var(--texto); color: var(--fraco); flex: none; transition: transform .25s var(--expo); }
.perguntas details[open] summary::after { transform: rotate(45deg); }
.perguntas details p { padding: 0 0 24px; max-width: 680px; }

/* ---------- o fim: o podio ---------- */
.fim { text-align: center; padding: 150px 0 0; }
.fim svg.podio { width: min(420px, 80%); height: auto; margin: 0 auto 30px; display: block; color: var(--tinta); }
.fim h2 { font-size: clamp(44px, 6.2vw, 80px); max-width: 900px; margin: 0 auto; }
.fim p { max-width: 580px; margin: 20px auto 0; font-size: 19px; }
.rodape { padding: 48px 0 56px; margin-top: 120px; border-top: 1px solid var(--fio); font-size: 14px; color: var(--quieto); }
.rodape .wrap { display: flex; flex-wrap: wrap; gap: 18px 28px; justify-content: space-between; align-items: center; }
.rodape nav { display: flex; gap: 22px; flex-wrap: wrap; }
.rodape a { text-decoration: none; }
.aviso-legal { margin: 22px auto 0; text-align: center; font-size: 14px; color: var(--quieto); max-width: 760px; }

/* o podio e o trofeu: desenham quando entram na tela (e de novo, devagar, em loop) */
.podio .degrau { stroke: currentColor; stroke-dasharray: 1; stroke-dashoffset: 1; }
.podio .trofeu-f { opacity: 0; transform: translateY(-16px); transform-box: fill-box; transform-origin: center bottom; }
.podio .raio-f { stroke: var(--marca); stroke-dasharray: 1; stroke-dashoffset: 1; }
.podio .chao { stroke: var(--fio-forte); }
.podio text { fill: var(--quieto); stroke: none; font: 600 13px var(--font-mono, monospace); }
.podio.visto .degrau { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--expo); }
.podio.visto .degrau--2 { transition-delay: .2s; }
.podio.visto .degrau--3 { transition-delay: .4s; }
.podio.visto .trofeu-f { opacity: 1; transform: none; transition: opacity .6s ease .9s, transform 1s var(--expo) .9s; }
.podio.visto .raio-f { stroke-dashoffset: 0; transition: stroke-dashoffset .7s ease 1.4s; }

/* ---------- o movimento ao rolar (o mesmo do /faq/planos) ---------- */
.mov .revela { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1.1s var(--expo); }
.mov .revela.visto { opacity: 1; transform: none; }
.mov .em-palavras { opacity: 1 !important; transform: none !important; }
.em-palavras .pal { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; margin-bottom: -.08em; }
.mov .em-palavras .pal > span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--expo); transition-delay: calc(var(--i) * 55ms); }
.mov .em-palavras.visto .pal > span { transform: none; }

/* ---------- paginas de texto (termos, planos) ---------- */
.texto { max-width: 760px; margin: 0 auto; padding: 88px 0 0; }
.texto h1 { font-size: clamp(42px, 5.6vw, 68px); margin-bottom: 20px; }
.texto .olho { margin-bottom: 14px; }
.texto h2 { font-size: 34px; margin: 60px 0 16px; }
.texto h3 { font-size: 19px; margin: 28px 0 8px; }
.texto p, .texto li { font-size: 17px; line-height: 1.7; color: var(--fraco); }
.texto p + p { margin-top: 12px; }
.texto ul, .texto ol { padding-left: 22px; margin: 10px 0; display: grid; gap: 6px; }
.texto strong { color: var(--tinta); font-weight: 600; }
.texto a { color: var(--tinta); }
.texto .caixa { margin: 26px 0; padding: 22px 24px; border: 1px solid var(--fio); border-radius: 20px; background: var(--fundo-2); }
.texto .caixa p { color: var(--tinta); }
.indice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 30px 0; padding: 24px; border: 1px solid var(--fio); border-radius: 20px; background: var(--fundo-2); }
.indice a { font-size: 15px; text-decoration: none; color: var(--fraco); }
.tabela { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.tabela th, .tabela td { padding: 12px 10px; border-bottom: 1px solid var(--fio); text-align: left; vertical-align: top; color: var(--fraco); }
.tabela th { color: var(--tinta); font-weight: 600; }
.ponte { max-width: 820px; margin: 0 auto; padding: 96px 0 0; text-align: center; }
.ponte svg.grande { width: 96px; height: 96px; stroke-width: 1.2; color: var(--tinta); }
.ponte svg.grande .v { stroke: var(--marca); }
.ponte h1 { font-size: clamp(42px, 6vw, 76px); margin: 24px 0 20px; }
.ponte > p { font-size: 20px; max-width: 620px; margin: 0 auto; }
.ponte .publico { margin: 48px 0 0; text-align: left; }
.ponte__conta { margin-top: 30px; font-size: 14.5px; color: var(--quieto); }
.ponte__conta button { border: 0; background: none; color: var(--tinta); text-decoration: underline; cursor: pointer; font: inherit; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  body { font-size: 16px; }
  .wrap { width: calc(100% - 32px); }
  .topo__links { display: none; }
  .tema { margin-left: auto; }
  .abertura { padding-top: 56px; }
  .abertura__texto { font-size: 18px; }
  .abertura__acoes .botao { width: 100%; }
  .palco { margin-top: 44px; padding: 8px; border-radius: 22px; }
  .palco__tela { border-radius: 16px; }
  .recado { flex-direction: column; align-items: stretch; padding: 22px; }
  .recado .botao { width: 100%; }
  .numeros { grid-template-columns: 1fr 1fr; margin-top: 64px; }
  .numero { padding: 22px 16px; }
  .numero:nth-child(3) { border-left: 0; }
  .numero:nth-child(n + 3) { border-top: 1px solid var(--fio); }
  .numero b { font-size: 40px; }
  .secao { padding-top: 96px; }
  .secao__cab { margin-bottom: 36px; }
  .secao__cab p { font-size: 17px; }
  .vit summary { grid-template-columns: auto 1fr; padding: 18px; gap: 14px; }
  .vit__n { white-space: nowrap; font-size: 12px; }
  .topo__nav { gap: 12px; }
  .topo__nav .botao--pequeno { white-space: nowrap; padding: 0 14px; font-size: 13.5px; }
  .vit__tag { display: none; }
  .vit__t { font-size: 24px; }
  .vit__corpo { grid-template-columns: 1fr; padding: 0 18px 20px; gap: 18px; }
  .vit__arte { order: -1; }
  .abas__trilho { width: 100%; }
  .aba { flex: 1; padding: 0 8px; font-size: 14px; }
  .painel-aba { grid-template-columns: 1fr; }
  .painel-aba__texto { padding: 30px 24px; }
  .painel-aba__texto h3 { font-size: 30px; }
  .painel-aba__arte { border-left: 0; border-bottom: 1px solid var(--fio); min-height: 0; order: -1; }
  .publico { grid-template-columns: 1fr; }
  .publico__lado, .publico__pe { padding: 28px 22px; }
  .publico__lado + .publico__lado { border-left: 0; border-top: 1px solid var(--fio); }
  .cartoes { grid-template-columns: 1fr; }
  .form { padding: 8px; border-radius: 22px; }
  .form__dentro { border-radius: 16px; }
  .form__trilha { padding: 18px 20px 0; }
  .form__passo { padding: 24px 20px 4px; }
  .form__pe { padding: 20px; }
  .form__erro { margin: 16px 20px 0; }
  .cartoes-op--3, .cartoes-op--2, .campos { grid-template-columns: 1fr; }
  .feito { padding: 44px 20px; }
  .fim { padding-top: 110px; }
  .fim .botao { width: 100%; }
  .indice { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .cena *, .form__passo { animation: none !important; }
  .cena .orb-viva, .cena .traca, .cena .raio { stroke-dashoffset: 0; }
  .cena .viajante { offset-distance: 30%; }
  html { scroll-behavior: auto; }
}

/* as cenas desenhadas a mao (js/movimento/cenas-mao.js): o traco na cor do texto, a mancha cinza */
.mao { display: block; width: 100%; height: 100%; overflow: visible; }
.mao-m { fill: currentColor; }
.mao-s { fill: color-mix(in srgb, var(--text) 24%, var(--bg)); }
.cena-mao { display: block; color: var(--tinta); }
.secao__ic.cena-mao { width: 92px; height: 92px; margin: 0 auto 22px; }
.vit__arte--mao { display: grid; place-items: center; padding: 22px; min-height: 260px; }
.vit__arte--mao .cena-mao { width: min(220px, 70%); aspect-ratio: 1; }
.painel-aba__arte .cena-mao { width: min(260px, 70%); aspect-ratio: 1; }
.fim .cena-mao { width: min(240px, 60%); aspect-ratio: 1; margin: 0 auto 24px; }
.feito .cena-mao { width: 150px; aspect-ratio: 1; margin: 0 auto; }

/* ---------- a logo Tryzen Afiliados (23/10/2026, segunda volta) ----------
   No padrao dos simbolos dos planos (/faq/planos: a rota, a medalha, a equipe): traco fino e redondo na cor do
   texto e o nome "Tryzen Afiliados" ao lado. O arco da passagem se desenha e os raios piscam como os da equipe. */
.marca-cab { display: inline-flex; align-items: center; gap: 18px; text-decoration: none; }
.marca-cab span { font-size: 13px; color: var(--text-2); border-left: 1px solid var(--border); padding-left: 18px; line-height: 1.2; }
.logo-af { display: inline-flex; align-items: center; gap: 14px; margin: 0 auto 30px; color: var(--text); }
.logo-af__ic { width: 58px; height: auto; stroke: currentColor; stroke-width: 1.5; fill: none; }
.logo-af__nome { font: 600 22px/1 var(--texto); letter-spacing: -.02em; }
.logo-af .af-raio { stroke: var(--marca); stroke-dasharray: 1; stroke-dashoffset: 0; animation: af-raio 3.6s ease infinite; }
.logo-af .af-raio--2 { animation-delay: .25s; }
.logo-af .af-arco { stroke-dasharray: 1; stroke-dashoffset: 0; animation: af-arco 3.6s cubic-bezier(.22, 1, .36, 1) infinite; }
@keyframes af-raio { 0%, 12%, 100% { stroke-dashoffset: 1; opacity: 0; } 32%, 80% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes af-arco { 0%, 6% { stroke-dashoffset: 1; } 40%, 100% { stroke-dashoffset: 0; } }
@media (max-width: 900px) {
  .marca-cab { gap: 10px; }
  .marca-cab img { width: 80px; height: auto; }
  .marca-cab span { padding-left: 10px; font-size: 12px; }
}

/* ---------- a cena da abertura: o GPS e a medalha (afiliado/cena-gps.js) ----------
   Muito espaco neutro: o desenho mora no terco do meio, como os desenhos da Claude (docs/animacao-claude.md). */
.palco__tela { display: grid; justify-items: center; padding: clamp(28px, 6vw, 72px) clamp(16px, 8vw, 120px) clamp(22px, 4vw, 44px); background: var(--quadro); }
.gps-palco { width: min(100%, 760px); aspect-ratio: 240 / 140; }
.gps { display: block; width: 100%; height: 100%; overflow: visible; }
.gps-tinta { fill: var(--text); }
.gps-tinta-s { fill: var(--marca); }
.gps-fraco { fill: var(--text-3); opacity: .55; }
.gps-fraco-s { fill: color-mix(in srgb, var(--text) 7%, transparent); }
.gps-longe { fill: var(--text-3); opacity: .22; }
.gps-longe-s { fill: color-mix(in srgb, var(--text) 4%, transparent); }
.gps-verde, .gps-verde-s { fill: var(--marca); }
.gps-verde-longe { fill: var(--marca); opacity: .3; }
.palco__legenda { margin-top: 18px; font-size: 15px; color: var(--quieto); text-align: center; }

/* ---------- as cenas a mao com espaco neutro: o desenho ocupa 2/3 da caixa ---------- */
.secao__ic.cena-mao { width: 132px; height: 132px; padding: 22px; margin-bottom: 14px; }
.vit__arte--mao { min-height: 280px; padding: 40px; }
.vit__arte--mao .cena-mao { width: min(170px, 46%); }
.fim .cena-mao { width: min(220px, 52%); padding: 18px; }
.feito .cena-mao { width: 120px; padding: 14px; }

/* ============================================================
   As ilustracoes no traco fino dos icones (afiliado/artes.js), quarta volta.
   Linha fina e igual em qualquer tamanho (1,6 px), o desenho no miolo da caixa,
   o verde so no detalhe que se mexe (em passos: 12 por segundo, como a Claude).
   ============================================================ */
.arte-caixa, .icone-caixa { display: block; color: var(--text); }
.arte { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.arte * { vector-effect: non-scaling-stroke; }
.arte .v { stroke: var(--marca); stroke-width: 1.8; }
.arte .f { fill: color-mix(in srgb, var(--marca) 13%, transparent); stroke: none; transform: translate(2px, 2px); }
.arte .tracejado { stroke-dasharray: 3 4; }
/* o tamanho de cada lugar: a arte ocupa o miolo e sobra muito vazio em volta */
.secao__ic.arte-caixa { width: 128px; height: auto; margin: 0 auto 18px; padding: 0; }
.vit__arte--mao { display: grid; place-items: center; min-height: 300px; padding: 48px; }
.vit__arte--mao .arte-caixa { width: min(230px, 62%); }
.painel-aba__arte .arte-caixa { width: min(250px, 62%); }
.fim .arte-caixa { width: min(260px, 60%); margin: 0 auto 26px; }
.feito .arte-caixa { width: 132px; margin: 0 auto; }
.cartao .icone-caixa { width: 52px; margin-bottom: 22px; }

/* as linhas se tracam quando a arte entra na tela, uma depois da outra */
.mov .arte .d { stroke-dasharray: 1; stroke-dashoffset: 1; }
.mov .arte .d.tracejado { stroke-dasharray: 1; }
.mov .visto .arte .d { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--expo); transition-delay: calc(var(--i, 0) * 70ms); }
.mov .arte .f { opacity: 0; }
.mov .visto .arte .f { opacity: 1; transition: opacity .6s ease .5s; }

/* os detalhes que se mexem, em passos de 12 por segundo */
.arte .pisca { animation: arte-pisca 2.25s steps(27) infinite; }
.arte .pulsa { transform-box: fill-box; transform-origin: center; animation: arte-pulsa 2.25s steps(27) infinite; }
.arte .digita circle { animation: arte-digita 1.5s steps(18) infinite; }
.arte .digita circle:nth-child(2) { animation-delay: .25s; }
.arte .digita circle:nth-child(3) { animation-delay: .5s; }
.arte .anda { fill: var(--marca); stroke: none; offset-rotate: 0deg; animation: arte-anda 4.5s steps(54) infinite; }
.arte .cai { animation: arte-cai 3s steps(36) infinite; }
.arte .vistos path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: arte-visto 3s steps(36) infinite; }
.arte .vistos path:nth-child(2) { animation-delay: .6s; }
.arte .ondas path { opacity: 0; animation: arte-onda 1.5s steps(18) infinite; }
.arte .ondas .o2 { animation-delay: .25s; }
.arte .ondas .o3 { animation-delay: .5s; }
.arte .busca { animation: arte-busca 4.5s steps(54) infinite; }
.arte .balanca { transform-origin: 60px 18px; animation: arte-balanca 2.25s steps(27) infinite; }
.arte .assinatura { stroke-dasharray: 1; animation: arte-assina 3s steps(36) infinite; }
.arte .viaja { animation: arte-viaja 4.5s steps(54) infinite; }
.arte .cartao { fill: var(--bg); stroke: currentColor; }
.arte .carimbo { opacity: 0; transform-box: fill-box; transform-origin: center; animation: arte-carimbo 4.5s steps(54) infinite; }
.arte .v-cheio { fill: var(--marca); stroke: none; }
.arte .v-branco { stroke: #fff; stroke-width: 1.6; }
@keyframes arte-pisca { 0%, 20% { opacity: 0; } 35%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arte-pulsa { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes arte-digita { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
@keyframes arte-anda { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes arte-cai { 0% { transform: translate(0, -10px); opacity: 0; } 25% { opacity: 1; } 55%, 75% { transform: translate(-16px, 18px); opacity: 1; } 90%, 100% { transform: translate(-16px, 22px); opacity: 0; } }
@keyframes arte-visto { 0%, 20% { stroke-dashoffset: 1; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
@keyframes arte-onda { 0% { opacity: 0; } 30%, 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes arte-busca { 0%, 100% { transform: translate(-40px, -28px); } 30% { transform: translate(-40px, 0); } 55%, 85% { transform: translate(0, 0); } }
@keyframes arte-balanca { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes arte-assina { 0%, 15% { stroke-dashoffset: 1; } 60%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
/* o cartao sai da 1a coluna, passa pela reuniao e para em "Venda paga"; o visto aparece sobre ele */
@keyframes arte-viaja { 0%, 12% { transform: translate(0, 0); } 32%, 44% { transform: translate(36px, -18px); } 64%, 100% { transform: translate(72px, -36px); } }
@keyframes arte-carimbo { 0%, 66% { opacity: 0; transform: scale(.4); } 72% { opacity: 1; transform: scale(1.15); } 76%, 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* ---------- o mapa real do app (Mapbox) com a rota do GPS por cima ---------- */
.gps-palco { width: min(100%, 860px); aspect-ratio: auto; }
.gps-mapa { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--border-soft); aspect-ratio: 640 / 380; background: var(--surface); }
.gps-mapa__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.gps-mapa__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gps-rota-sombra { stroke: color-mix(in srgb, var(--marca) 20%, transparent); stroke-width: 4; }
.gps-rota { stroke: var(--marca); stroke-width: 4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.gps-inicio { fill: var(--bg); stroke: var(--text); stroke-width: 2; }
.gps-ponto__halo { fill: color-mix(in srgb, var(--marca) 22%, transparent); }
.gps-ponto__miolo { fill: var(--marca); stroke: var(--bg); stroke-width: 2.5; }
.gps-bandeira { stroke: var(--text); stroke-width: 2; opacity: 0; }
.gps-bandeira__pano { fill: var(--marca); stroke: var(--text); }
.gps-medalha { opacity: 0; stroke: var(--text); stroke-width: 2; }
.gps-medalha__face { fill: var(--bg); }
.gps-medalha__borda { fill: var(--bg); }
.gps-medalha__cor { fill: color-mix(in srgb, var(--marca) 30%, var(--bg)); stroke: none; }
.gps-medalha__face { fill: none; }
.gps-medalha__estrela { stroke: var(--marca); stroke-width: 2.2; }
.gps-mapa__atrib { position: absolute; right: 8px; bottom: 6px; font-size: 10px; color: var(--text-3); background: color-mix(in srgb, var(--bg) 70%, transparent); padding: 1px 6px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .arte .pisca, .arte .pulsa, .arte .digita circle, .arte .anda, .arte .cai, .arte .vistos path, .arte .ondas path,
  .arte .busca, .arte .balanca, .arte .assinatura, .arte .viaja, .arte .carimbo { animation: none; opacity: 1; stroke-dashoffset: 0; }
}