@font-face { font-family: "Inter"; src: url("fonts/inter-latim.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk-latim.woff2") format("woff2"); font-weight: 500 700; font-display: swap; }

/* As mesmas cores e letras do sistema: o site parece o produto que ele vende. */
:root {
  --fundo: #ffffff; --fundo2: #f5f7fa; --sup: #ffffff; --tinta: #111827; --suave: #5a6472; --borda: #e4e8ef; --borda2: #d2d8e2;
  --acento: #1d4ed8; --acento2: #1a43bb; --acento-tinta: #ffffff; --marca: #0e7490; --verde: #15803d; --verde-f: #dcfce7; --verm: #b91c1c; --verm-f: #fee2e2;
  --escuro: #0a0f14; --escuro2: #111a22; --escuro-b: #1c2937; --sombra: 0 1px 2px rgb(17 24 39 / .05), 0 8px 24px rgb(17 24 39 / .06); --sombra-g: 0 24px 60px -12px rgb(17 24 39 / .22);
  --r: 14px; --r-g: 20px; --larg: 1200px; --pad: clamp(20px, 4vw, 40px); --sec: clamp(72px, 9vw, 120px);
  --disp: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --txt: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --suav: cubic-bezier(.22, 1, .36, 1); color-scheme: light;
}
:root[data-tema="escuro"] {
  --fundo: #16181d; --fundo2: #1a1d23; --sup: #1e2128; --tinta: #e9ecf1; --suave: #a0a8b4; --borda: #2a2e37; --borda2: #363b45;
  --acento: #3b6cf0; --acento2: #5280f5; --verde: #4ade80; --verde-f: #10291a; --verm: #f87171; --verm-f: #2e1618; --marca: #22d3ee;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .25); --sombra-g: 0 24px 60px -12px rgb(0 0 0 / .6); color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { overflow-x: clip; margin: 0; background: var(--fundo); color: var(--tinta); font: 400 17px/1.6 var(--txt); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 4px; }
[data-tema="claro"] .so-escuro, [data-tema="escuro"] .so-claro { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx { width: 100%; max-width: calc(var(--larg) + 2 * var(--pad)); margin-inline: auto; padding-inline: var(--pad); }
h1, h2, h3 { font-family: var(--disp); font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.12; }
.cab { max-width: 680px; margin-bottom: clamp(36px, 5vw, 56px); }
.cab p { margin-top: 14px; font-size: 18px; color: var(--suave); }
.cab.meio { margin-inline: auto; text-align: center; }

/* Botões */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 1px solid transparent; border-radius: 10px; background: var(--acento); color: var(--acento-tinta); font-weight: 600; font-size: 16px; cursor: pointer; white-space: nowrap; transition: background-color .18s, transform .14s var(--suav), border-color .18s; }
.btn:hover { background: var(--acento2); }
.btn:active { transform: scale(.98); }
.btn.alt { background: var(--sup); color: var(--tinta); border-color: var(--borda2); }
.btn.alt:hover { background: var(--fundo2); }
.btn.peq { min-height: 40px; padding: 0 16px; font-size: 15px; }
.seta { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--acento); }
[data-tema="escuro"] .seta { color: #7ea1f7; }
.seta svg { width: 16px; height: 16px; transition: transform .2s var(--suav); }
a:hover > .seta svg, .seta:hover svg { transform: translateX(3px); }

/* Topo */
.topo { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--fundo) 94%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.topo.rolou { border-color: var(--borda); }
.topo .cx { display: flex; align-items: center; gap: 28px; height: 68px; }
.marca { display: inline-flex; align-items: center; gap: 10px; font: 600 20px var(--disp); letter-spacing: -.02em; }
.marca img { width: 32px; height: 32px; border-radius: 8px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav > a, .nav > button { padding: 8px 12px; border: 0; background: none; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .15s; }
.nav > a:hover, .nav > button:hover { background: var(--fundo2); }
.nav button svg { width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; transition: transform .2s; }
.nav button[aria-expanded="true"] svg { transform: rotate(180deg); }
.dir { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.idiomas { display: flex; gap: 2px; font-size: 13px; font-weight: 600; color: var(--suave); }
.idiomas a { padding: 5px 7px; border-radius: 6px; }
.idiomas a:hover { background: var(--fundo2); }
.idiomas a[aria-current] { color: var(--tinta); background: var(--fundo2); }
.ico { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: none; border-radius: 8px; cursor: pointer; }
.ico:hover { background: var(--fundo2); }
.ico svg { width: 20px; height: 20px; }
.entrar { font-size: 15px; font-weight: 500; padding: 8px 10px; }
.painel-mod { position: absolute; left: 0; right: 0; top: 100%; background: var(--sup); border-block: 1px solid var(--borda); box-shadow: var(--sombra-g); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .22s var(--suav), visibility .18s; }
.painel-mod.aberto { opacity: 1; visibility: visible; transform: none; }
.painel-mod .cx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; height: auto; align-items: start; padding-block: 28px; }
.painel-mod h3 { font: 600 13px var(--txt); letter-spacing: 0; color: var(--suave); margin-bottom: 8px; padding-inline: 10px; }
.painel-mod a { display: block; padding: 8px 10px; border-radius: 8px; transition: background-color .15s; }
.painel-mod a:hover { background: var(--fundo2); }
.painel-mod a b { display: block; font-weight: 600; font-size: 15px; }
.painel-mod a small { display: block; font-size: 13px; line-height: 1.4; color: var(--suave); }
.painel-mod .todos { grid-column: 1 / -1; padding-top: 0; }
.so-cel { display: none; }
.folha { position: fixed; inset: 0; z-index: 40; background: var(--fundo); padding: 18px var(--pad) 32px; overflow-y: auto; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .18s, transform .22s var(--suav), visibility .18s; }
.folha.aberta { opacity: 1; visibility: visible; transform: none; }
.folha header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.folha h3 { font: 600 13px var(--txt); letter-spacing: 0; color: var(--suave); margin: 20px 0 4px; }
.folha li a { display: block; padding: 9px 0; font-weight: 500; }
.folha .acoes { display: grid; gap: 10px; margin-top: 24px; }
.folha .pe { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
@media (max-width: 1080px) { .nav, .dir .idiomas, .dir .entrar, .dir > .btn, .dir > [data-tema-botao] { display: none; } .so-cel { display: grid; } }

/* Faixa de fatos */
.fatos { background: var(--fundo2); border-block: 1px solid var(--borda); }
.fatos ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-block: 28px; }
.fatos b { display: block; font: 600 22px var(--disp); letter-spacing: -.02em; }
.fatos span { font-size: 15px; color: var(--suave); line-height: 1.4; display: block; }
@media (max-width: 800px) { .fatos ul { grid-template-columns: 1fr 1fr; } }

.sec { padding-block: var(--sec); }
.sec.cinza { background: var(--fundo2); }

/* App de membros */
.app { background: var(--acento); color: #fff; overflow: hidden; }
[data-tema="escuro"] .app { background: #1d4ed8; }
.app .cx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.app .txt > p { margin-top: 14px; font-size: 18px; opacity: .9; }
.app .visto svg { color: #fff; }
.app .btn { background: #fff; color: #1d4ed8; }
.app .btn:hover { background: #e8eefe; }
.fones { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.6vw, 20px); margin-block: -24px; align-items: start; }
.fones .telefone { position: relative; border-width: 6px; border-color: #0a0f14; }
.fones .telefone:nth-child(2) { margin-top: 44px; }
.fones .telefone:nth-child(3) { margin-top: 12px; }
.fones img { height: auto; }
@media (max-width: 900px) { .app .cx { grid-template-columns: 1fr; } .fones { margin-block: 8px -8px; } }

/* Etapas */
.passos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: p; position: relative; }
.passos li { counter-increment: p; position: relative; padding-top: 56px; }
.passos li::before { content: counter(p); position: absolute; top: 0; left: 0; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--acento); color: #fff; font: 600 17px var(--disp); z-index: 1; }
.passos li::after { content: ""; position: absolute; top: 19px; left: 40px; right: -16px; height: 2px; background: var(--borda2); }
.passos li:last-child::after { display: none; }
.passos b { display: block; font: 600 22px var(--disp); letter-spacing: -.02em; margin-bottom: 6px; }
.passos p { font-size: 15px; line-height: 1.5; color: var(--suave); padding-right: 12px; }
@media (max-width: 800px) { .passos { grid-template-columns: 1fr; gap: 24px; } .passos li { padding: 0 0 0 56px; } .passos li::after { top: 40px; left: 19px; right: auto; width: 2px; height: calc(100% + 24px - 40px); } }

/* Preços */
.planos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plano { position: relative; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--borda); border-radius: var(--r-g); background: var(--sup); }
.plano.top { border: 2px solid var(--acento); box-shadow: var(--sombra-g); }
.selo { position: absolute; top: -13px; left: 24px; padding: 3px 12px; border-radius: 999px; background: var(--acento); color: #fff; font-size: 13px; font-weight: 600; }
.plano h3 { font-size: 20px; }
.preco { margin-top: 10px; font: 600 42px/1.1 var(--disp); letter-spacing: -.03em; }
.preco small { font: 400 16px var(--txt); letter-spacing: 0; color: var(--suave); }
.cobranca { margin-top: 6px; font-size: 15px; color: var(--suave); min-height: 46px; }
.plano ul { display: grid; gap: 10px; margin: 18px 0 24px; flex: 1; }
.plano li { display: flex; gap: 9px; font-size: 15px; line-height: 1.45; }
.plano li svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--verde); }
.plano .btn { width: 100%; }
.nota { margin-top: 24px; font-size: 15px; color: var(--suave); text-align: center; max-width: 720px; margin-inline: auto; }
@media (max-width: 900px) { .planos { grid-template-columns: 1fr; gap: 24px; } .cobranca { min-height: 0; } }

/* Perguntas */
.faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faq .cab { margin-bottom: 0; position: sticky; top: 96px; }
.faq details { border-bottom: 1px solid var(--borda); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--suave); transition: transform .22s var(--suav); }
.faq details[open] summary svg { transform: rotate(180deg); }
.faq details p { padding-bottom: 18px; color: var(--suave); max-width: 62ch; }
@media (max-width: 800px) { .faq { grid-template-columns: 1fr; } .faq .cab { position: static; } }

/* Rodapé */
.rodape { background: var(--escuro); color: #8b9aa8; border-top: 1px solid var(--escuro-b); padding-block: 48px 28px; font-size: 15px; }
.rodape .cols { display: grid; grid-template-columns: 2fr 2fr 1fr 1.3fr 1fr; gap: 28px; }
.rodape .marca { color: #e6edf3; margin-bottom: 12px; }
.rodape h3 { font: 600 14px var(--txt); letter-spacing: 0; color: #e6edf3; margin-bottom: 10px; }
.rodape li { padding: 3px 0; }
.rodape a:hover { color: #e6edf3; }
.rodape .doisc { columns: 2; column-gap: 16px; }
.rodape .legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--escuro-b); font-size: 14px; }
@media (max-width: 980px) { .rodape .cols { grid-template-columns: 1fr 1fr; } .rodape .marca-col, .rodape .mods { grid-column: 1 / -1; } }


@font-face { font-family: "Caveat"; src: url("fonts/caveat.woff2") format("woff2"); font-weight: 500; font-display: swap; }
.visto { display: grid; gap: 10px; margin: 20px 0 24px; }
.visto li { display: flex; gap: 10px; line-height: 1.45; font-weight: 500; }
.visto svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--verde); }
.lead { margin-top: 14px; font-size: 18px; color: var(--suave); }
.telefone { position: relative; border: 6px solid #0a0f14; border-radius: 28px; overflow: hidden; background: #0a0f14; box-shadow: var(--sombra-g); }
.telefone video, .telefone img { width: 100%; height: auto; border-radius: 22px; }
.quadro { border: 1px solid var(--borda2); border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra-g); background: var(--sup); aspect-ratio: 16 / 11; }
.quadro img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.barra { display: flex; align-items: center; gap: 7px; height: 34px; padding-inline: 14px; border-bottom: 1px solid #e4e8ef; background: #f5f7fa; }
.barra i { width: 10px; height: 10px; border-radius: 50%; background: #d2d8e2; }
.barra span { margin-inline: auto; padding: 1px 14px; border-radius: 6px; background: #fff; font-size: 12px; color: #5a6472; }

/* Abertura: o título grande e, embaixo, a chamada acontecendo de verdade */
.abre { padding-top: clamp(36px, 5vw, 64px); }
.topo-abre { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 64px); align-items: end; }
.abre h1 { font-size: clamp(40px, 5.8vw, 78px); line-height: 1.02; letter-spacing: -.035em; }
.risco { position: relative; white-space: nowrap; color: var(--acento); }
[data-tema="escuro"] .risco { color: #7ea1f7; }
.risco svg { position: absolute; left: 0; right: 0; bottom: -.14em; width: 100%; height: .22em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.risco path { stroke-dasharray: 340; stroke-dashoffset: 340; animation: riscar 1.1s cubic-bezier(.65, 0, .35, 1) .55s forwards; vector-effect: non-scaling-stroke; }
@keyframes riscar { to { stroke-dashoffset: 0; } }
.abre .sub { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: var(--suave); }
.abre .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 14px; font-weight: 500; }
.checks li { display: flex; align-items: center; gap: 6px; }
.checks svg { width: 16px; height: 16px; color: var(--verde); flex: none; }

.palco { position: relative; margin-top: clamp(32px, 4vw, 48px); padding: clamp(16px, 3vw, 36px) clamp(14px, 3vw, 36px) 18px; display: grid; grid-template-columns: minmax(0, 390px) 64px minmax(0, 1fr); align-items: stretch; background: #1d4ed8; border-radius: var(--r-g) var(--r-g) 0 0; color: #111827; }
.fone-ui, .janela { background: #fff; border-radius: 18px; box-shadow: 0 30px 60px -20px rgb(10 15 40 / .5); overflow: hidden; }
.fone-ui { padding: 18px 16px 16px; display: flex; flex-direction: column; }
.fone-ui header, .painel-ui header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #eceff4; }
.fone-ui strong, .painel-ui header strong { font: 600 17px var(--disp); }
.fone-ui header span, .painel-ui header span { font-size: 12.5px; color: #5a6472; }
.chamada li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f1f3f7; font-weight: 500; font-size: 14.5px; line-height: 1.25; }
.chamada li small { display: block; font-weight: 400; font-size: 12px; color: #5a6472; }
.marcar { display: inline-flex; flex: none; padding: 3px; gap: 2px; background: #f1f3f7; border-radius: 9px; }
.marcar button { position: relative; min-height: 34px; min-width: 58px; padding: 0 8px; border: 0; background: transparent; border-radius: 7px; font-size: 13px; font-weight: 600; color: #5a6472; cursor: pointer; transition: background-color .2s, color .2s, transform .12s; }
.marcar button:active { transform: scale(.95); }
.marcar button[aria-pressed="true"].veio { background: #15803d; color: #fff; }
.marcar button[aria-pressed="true"].faltou { background: #b91c1c; color: #fff; }
.toque::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px; border-radius: 50%; background: rgb(17 24 39 / .22); animation: toque .55s var(--suav) forwards; pointer-events: none; }
@keyframes toque { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.3); opacity: 0; } }
.total { padding-top: 10px; font-size: 13px; font-weight: 600; color: #15803d; }
.finalizar { margin-top: 10px; min-height: 44px; border: 0; border-radius: 10px; background: #1d4ed8; color: #fff; font-weight: 600; font-size: 15px; cursor: pointer; transition: transform .14s, background-color .18s; }
.finalizar:hover { background: #1a43bb; }
.finalizar.apertado { transform: scale(.97); background: #1a43bb; }
.fio { position: relative; }
.fio::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgb(255 255 255 / .45); }
.gota { position: absolute; left: -7px; top: calc(50% - 7px); width: 16px; height: 16px; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 0 5px rgb(255 255 255 / .25); }
.gota.vai { animation: vai .8s cubic-bezier(.65, 0, .35, 1); }
@keyframes vai { 0% { left: -7px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.painel-ui { padding: 14px 18px 12px; min-height: 380px; position: relative; }
.espera { position: absolute; inset: 60px 18px 18px; display: grid; place-items: center; font-size: 15px; color: #5a6472; transition: opacity .3s; }
[data-resultado] { transition: opacity .3s; }
.aguardando [data-resultado] { opacity: 0; }
.painel-ui:not(.aguardando) .espera { opacity: 0; pointer-events: none; }
.bloco h3 { font: 600 12.5px var(--txt); letter-spacing: 0; color: #5a6472; margin: 10px 0 0; }
.item { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #f1f3f7; font-size: 14.5px; }
.item:last-child { border-bottom: 0; }
.ini { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; color: #fff; }
.item p { flex: 1; min-width: 0; line-height: 1.35; }
.item b { font-weight: 600; }
.item small { display: block; font-size: 12.5px; color: #5a6472; }
.zap { flex: none; align-self: center; padding: 5px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: #fff; background: #15803d; }
.msg { display: block; margin-top: 5px; padding: 7px 10px; border-radius: 4px 10px 10px 10px; background: #ecfdf3; color: #14532d; font-size: 13px; }
.vazio { padding: 8px 0; font-size: 13.5px; color: #5a6472; }
.entra { animation: entra .5s var(--suav) both; }
.entra:nth-child(2) { animation-delay: .12s; }
@keyframes entra { from { opacity: 0; transform: translateX(-14px); } }
.dica { grid-column: 1 / -1; margin-top: 14px; text-align: center; font-size: 14.5px; color: #fff; }
@media (max-width: 980px) {
  .topo-abre { grid-template-columns: 1fr; }
  .palco { grid-template-columns: minmax(0, 1fr); }
  .fio { height: 44px; }
  .fio::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 2px dashed rgb(255 255 255 / .45); }
  .gota { left: calc(50% - 7px); top: -7px; }
  @keyframes vai { 0% { top: -7px; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: calc(100% - 7px); opacity: 0; } }
  .painel-ui { min-height: 300px; }
}

/* O papel, escrito à mão */
.compara-papel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 7vw, 96px); align-items: center; }
.papel { --r: -4deg; position: relative; padding: 34px 34px 40px 62px; background: repeating-linear-gradient(transparent 0 37px, #c9d6ea 37px 38px) 0 74px, #fdfcf6; color: #24324a; font: 500 27px/38px "Caveat", cursive; box-shadow: 0 2px 3px rgb(0 0 0 / .08), 0 24px 40px -14px rgb(17 24 39 / .28); transform: rotate(var(--r)); transition: transform .9s var(--suav); }
.papel::before { content: ""; position: absolute; top: 0; bottom: 0; left: 44px; border-left: 2px solid #e8a7a7; }
.papel::after { content: ""; position: absolute; top: -14px; left: 50%; width: 110px; height: 30px; margin-left: -55px; background: rgb(214 201 150 / .65); transform: rotate(1.5deg); }
.papel h3 { font: inherit; font-size: 34px; line-height: 38px; color: #1a2a55; }
.papel .dt { font-size: 23px; }
.papel ol { list-style: decimal; padding-left: 8px; margin-top: 2px; }
.papel li { padding-left: 2px; }
.papel em { font-style: normal; color: #b4343a; font-size: 23px; margin-left: 6px; }
.papel .risc { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: #b4343a; }
.papel .bilhete { color: #b4343a; transform: rotate(-1.5deg); margin-top: 6px; }
.depois .visto { margin-bottom: 0; margin-top: 24px; }
@media (max-width: 800px) { .compara-papel { grid-template-columns: 1fr; } .papel { width: calc(100% - 16px); margin-inline: auto; font-size: 24px; padding: 28px 18px 30px 52px; } .papel::before { left: 38px; } }

/* A semana: a seção fica presa na tela; rolar troca o dia, o texto e a imagem no mesmo lugar */
.semana { position: relative; background: var(--fundo2); border-block: 1px solid var(--borda); }
.js .semana { height: calc(100svh + (var(--n) - 1) * 75svh); }
.sem-fixo { padding-block: 40px; }
.js .sem-fixo { position: sticky; top: 68px; height: calc(100svh - 68px); min-height: 520px; padding-block: 0; display: flex; align-items: center; overflow: hidden; }
.sem-dentro { display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 32px); }
.sem-cab { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 64px); align-items: end; }
.sem-cab h2 { font-size: clamp(24px, 2.6vw, 34px); }
.regua { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 2px solid var(--borda2); }
.regua button { padding: 6px 0 10px; border: 0; background: none; font: 600 15px var(--disp); color: var(--suave); cursor: pointer; transition: color .25s; }
.regua button.ativo { color: var(--tinta); }
/* O fio anda junto com a rolagem, sem saltos */
.regua i { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--acento); transform: scaleX(var(--fio, .1)); transform-origin: left; }
.sem-grade { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.falas { position: relative; }
.js .falas { display: grid; }
.fala { padding-block: 14px; }
.js .fala { grid-area: 1 / 1; visibility: hidden; transition: visibility 0s .4s; }
.js .fala.ativa { visibility: visible; transition: visibility 0s; }
.quando { font: 600 15px var(--txt); color: var(--acento); margin-bottom: 8px; }
[data-tema="escuro"] .quando { color: #7ea1f7; }
.fala h3 { font-size: clamp(26px, 2.8vw, 38px); line-height: 1.1; margin-bottom: 12px; }
.corpo { font-size: 18px; color: var(--suave); }
.js .fala > * { opacity: 0; transform: translateY(calc(var(--sinal, 1) * 26px)); transition: opacity .28s, transform .4s var(--suav); }
.js .fala.ativa > * { opacity: 1; transform: none; transition: opacity .5s .12s, transform .7s var(--suav) .12s; }
.js .fala.ativa h3 { transition-delay: .18s; }
.js .fala.ativa .corpo { transition-delay: .26s; }
.visuais { position: relative; height: min(calc(100svh - 240px), 620px); min-height: 300px; }
.vis { position: absolute; inset: 0; display: flex; gap: 16px; align-items: center; justify-content: center; }
.js .vis { opacity: 0; transform: translateY(calc(var(--sinal, 1) * 30px)) scale(.97); clip-path: inset(6% 2% 6% 2% round 14px); transition: opacity .35s, transform .7s var(--suav), clip-path .7s var(--suav); pointer-events: none; }
.js .vis.ativo { opacity: 1; transform: none; clip-path: inset(-40px -40px -40px -40px); }
/* A tela e o celular ficam lado a lado; enquanto se rola, a tela se aproxima devagar */
.vis .quadro { flex: 1 1 0; min-width: 0; height: 100%; aspect-ratio: auto; }
.vis .quadro img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transform: scale(calc(1 + var(--l, 0) * .06)); transform-origin: top left; will-change: transform; }
.vis .telefone { flex: none; height: 94%; aspect-ratio: 390 / 844; transform: translateY(calc((.5 - var(--l, .5)) * 22px)); }
.vis .telefone img, .vis .telefone video { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.vis .v-fone { height: 100%; display: flex; justify-content: center; }
.vis .v-fone .telefone { height: 100%; aspect-ratio: 390 / 780; transform: none; }
@media (max-width: 980px) {
  .sem-cab { grid-template-columns: 1fr; gap: 8px; }
  .sem-cab h2 { font-size: 22px; }
  .regua button { padding: 4px 0 7px; font-size: 14px; }
  .js .sem-fixo { align-items: stretch; }
  .sem-dentro { height: 100%; padding-block: 12px 8px; gap: 10px; }
  .sem-grade { display: flex; flex-direction: column; align-items: stretch; gap: 10px; flex: 1; min-height: 0; }
  .visuais { order: -1; flex: 1 1 0; height: auto; min-height: 0; }
  .falas { flex: none; }
  /* No celular, as medidas vêm do espaço que sobra na tela (cqh/cqw): assim o aparelho nunca sai deformado */
  .visuais { container-type: size; }
  .vis.tem-fone .quadro { display: none; }
  .vis .quadro { flex: none; width: 100%; height: min(100cqh, 124cqw); aspect-ratio: auto; }
  .vis .quadro img { width: 165%; max-width: none; height: auto; }
  .vis .telefone { height: 100cqh; width: calc(100cqh * 390 / 844); max-width: 100%; aspect-ratio: auto; transform: none; }
  .vis .v-fone .telefone { height: 100cqh; width: calc(100cqh * 390 / 780); aspect-ratio: auto; }
  .fala { padding-block: 4px; }
  .fala h3 { font-size: 22px; margin-bottom: 6px; }
  .corpo { font-size: 15.5px; line-height: 1.45; }
  .quando { font-size: 13.5px; margin-bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .js .fala > *, .js .fala.ativa > *, .js .vis, .js .vis.ativo { transition: none; transform: none; clip-path: none; } }

/* A vitrine dos módulos */
.exp { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.exp-l .gr { margin: 16px 0 4px; font-size: 13px; font-weight: 600; color: var(--suave); }
.exp-l .gr:first-child { margin-top: 0; }
.exp-l button { position: relative; display: block; width: 100%; overflow: hidden; padding: 7px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font: 500 16px var(--txt); color: var(--suave); cursor: pointer; transition: background-color .15s, color .15s; }
.exp-l button:hover { color: var(--tinta); }
.exp-l button.ativo { color: var(--tinta); font-weight: 600; background: var(--fundo2); }
.exp-l button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--acento); transform: scaleX(0); transform-origin: left; }
.exp-l button.ativo.rodando i { animation: barra-exp 6s linear forwards; }
@keyframes barra-exp { to { transform: scaleX(1); } }
.exp-v { position: relative; display: grid; }
.exp-p { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.exp-p.ativo { opacity: 1; visibility: visible; }
.exp-p figure { aspect-ratio: 16 / 10; border: 1px solid var(--borda2); border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra-g); background: var(--sup); }
.exp-p figure img { width: 100%; height: 100%; object-fit: cover; object-position: top left; clip-path: inset(0 0 0 0); }
.exp-p.ativo figure img { animation: abrir-tela .7s var(--suav); }
@keyframes abrir-tela { from { transform: scale(1.03); } }
.exp-fones { aspect-ratio: 16 / 10; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 24px 12% 0; background: #1d4ed8; border-radius: var(--r); overflow: hidden; }
.exp-t { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.exp-t h3 { font-size: 24px; }
.exp-t p { margin-top: 2px; color: var(--suave); }
.exp-t .seta { flex: none; }
@media (max-width: 980px) {
  .exp { display: block; }
  .exp-l { display: none; }
  .exp-v { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--pad) * -1); padding: 4px var(--pad) 16px; scrollbar-width: none; }
  .exp-p { flex: 0 0 86%; scroll-snap-align: center; opacity: 1; visibility: visible; }
  .exp-t { display: block; }
  .exp-t h3 { font-size: 20px; }
  .exp-t .seta { margin-top: 8px; }
}

/* App de membros */
.fones .telefone { will-change: transform; }

/* Segurança: uma lista firme, sem enfeite */
.seg { background: var(--escuro); color: #e6edf3; }
.seg .lead { color: #8b9aa8; margin-bottom: 18px; }
.seg .seta { color: #7ea1f7; }
.seg-g { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); }
.seg-l li { padding: 18px 0; border-top: 1px solid var(--escuro-b); }
.seg-l li:last-child { border-bottom: 1px solid var(--escuro-b); }
.seg-l h3 { font-size: 21px; }
.seg-l p { margin-top: 4px; color: #8b9aa8; }
@media (max-width: 800px) { .seg-g { grid-template-columns: 1fr; } }

/* A linha das etapas se desenha */
.passos li::after { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--suav) .2s; }
.passos li.dentro::after { transform: none; }
@media (max-width: 800px) { .passos li::after { transform: scaleY(0); transform-origin: top; } }

/* Treinamento e tutoriais, logo depois das etapas */
.treino { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(36px, 5vw, 56px); }
.treino > div { padding: 24px; border: 1px solid var(--borda); border-radius: var(--r); background: var(--sup); }
.treino h3 { font-size: 20px; margin-bottom: 6px; }
.treino p { color: var(--suave); }
@media (max-width: 800px) { .treino { grid-template-columns: 1fr; } }

/* Plano em destaque: cor cheia */
.plano.top { background: #1d4ed8; border-color: #1d4ed8; color: #fff; transform: translateY(-10px); }
.plano.top .preco small, .plano.top .cobranca { color: #dbe5ff; }
.plano.top li svg { color: #fff; }
.plano.top .btn { background: #fff; color: #1d4ed8; }
.plano.top .selo { background: #fff; color: #1d4ed8; box-shadow: var(--sombra); }
@media (max-width: 900px) { .plano.top { transform: none; } }

/* Fecho: a frase é o formulário */
.cta { background: #1d4ed8; color: #fff; padding-block: clamp(64px, 8vw, 110px); }
.cta label { display: block; font: 600 clamp(28px, 4.2vw, 54px)/1.08 var(--disp); letter-spacing: -.03em; }
.lacuna { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lacuna input { flex: 1 1 280px; min-width: 0; min-height: 64px; padding: 0 18px; border: 0; border-bottom: 3px solid #fff; border-radius: 0; background: transparent; color: #fff; font: 600 clamp(24px, 3.4vw, 42px) var(--disp); letter-spacing: -.02em; }
.lacuna input::placeholder { color: rgb(255 255 255 / .55); }
.lacuna input:focus { outline: 0; background: rgb(255 255 255 / .08); }
.lacuna .btn { min-height: 64px; padding-inline: 26px; background: #fff; color: #1d4ed8; }
.lacuna .btn:hover { background: #e8eefe; }
.lacuna .btn svg { width: 18px; height: 18px; }
.cta p { margin-top: 16px; color: #dbe5ff; }

/* Páginas de módulo */
.m-abre { background: #1d4ed8; color: #fff; padding-block: clamp(32px, 5vw, 64px) clamp(40px, 6vw, 72px); overflow: hidden; }
.m-abre .cx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.trilha { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: #dbe5ff; margin-bottom: 18px; }
.trilha a:hover { color: #fff; text-decoration: underline; }
.m-abre h1 { font-size: clamp(36px, 4.8vw, 62px); line-height: 1.04; letter-spacing: -.03em; }
.m-abre .sub { margin-top: 16px; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; color: #e8eefe; }
.m-abre .acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.m-abre .btn { background: #fff; color: #1d4ed8; }
.m-abre .btn:hover { background: #e8eefe; }
.m-abre .btn.alt { background: transparent; color: #fff; border-color: rgb(255 255 255 / .55); }
.m-abre .btn.alt:hover { background: rgb(255 255 255 / .12); }
.m-abre .quadro { border-color: transparent; }
.m-lado .cx, .m-cel .cx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.m-lado.inv .cx { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.m-lado.inv .quadro { order: -1; }
.m-lado h2, .m-cel h2 { font-size: clamp(28px, 3vw, 38px); }
.m-lado .txt p, .m-cel .txt p { margin-top: 14px; font-size: 18px; color: var(--suave); }
.m-cel .cx { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); justify-content: center; }
.m-cel.inv .cx { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.m-cel .telefone { width: 100%; }
.m-larga .quadro { aspect-ratio: 16 / 9; }
.m-lista ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
.m-lista li { display: flex; gap: 12px; }
.m-lista svg { width: 20px; height: 20px; flex: none; margin-top: 3px; color: var(--verde); }
.m-lista h3 { font-size: 18px; line-height: 1.25; margin-bottom: 4px; }
.m-lista p { font-size: 15.5px; line-height: 1.5; color: var(--suave); }
.m-prox { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: center; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--borda); border-radius: var(--r-g); background: var(--sup); transition: box-shadow .25s, transform .25s var(--suav); }
.m-prox:hover { box-shadow: var(--sombra-g); transform: translateY(-3px); }
.m-prox p { font-size: 15px; font-weight: 600; color: var(--suave); }
.m-prox h2 { margin: 6px 0 8px; }
.m-prox span { display: block; color: var(--suave); margin-bottom: 14px; }
.m-prox .quadro { box-shadow: none; aspect-ratio: 16 / 9; }
@media (max-width: 980px) {
  .m-abre .cx, .m-lado .cx, .m-lado.inv .cx, .m-prox { grid-template-columns: 1fr; }
  .m-lado.inv .quadro { order: 0; }
  .m-cel .cx, .m-cel.inv .cx { grid-template-columns: 1fr; }
  .m-cel .telefone { width: min(66%, 280px); margin-inline: auto; }
  .m-cel:not(.inv) .telefone { order: 1; }
  .m-lista ul { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) { .m-lista ul { grid-template-columns: 1fr; gap: 22px; } .m-larga .quadro { aspect-ratio: 4 / 3; } }

/* Índice dos módulos */
.grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mod { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--borda); border-radius: var(--r); background: var(--sup); transition: border-color .2s, box-shadow .25s, transform .25s var(--suav); }
.mod:hover { border-color: var(--borda2); box-shadow: var(--sombra-g); transform: translateY(-3px); }
.mod figure { aspect-ratio: 16 / 10; overflow: hidden; background: var(--fundo2); border-bottom: 1px solid var(--borda); }
.mod img { width: 100%; height: 100%; object-fit: cover; object-position: top left; transition: transform .6s var(--suav); }
.mod:hover img { transform: scale(1.035); }
.mod > div { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 18px 20px 20px; }
.mod h3 { font-size: 20px; }
.mod p { flex: 1; font-size: 15.5px; line-height: 1.5; color: var(--suave); }
.mod .seta { margin-top: 8px; font-size: 15px; }
@media (max-width: 980px) { .grade { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .grade { grid-template-columns: 1fr; } }

/* Mais blocos de módulo */
.m-abre.so-texto .cx { display: block; max-width: calc(860px + 2 * var(--pad)); margin-inline: 0 auto; }
.m-abre.so-texto .cx { max-width: calc(var(--larg) + 2 * var(--pad)); margin-inline: auto; }
.m-abre.so-texto .txt { max-width: 760px; }
.abre-fone { width: min(280px, 66%); justify-self: center; margin-block: 0 -120px; }
.m-par .par { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.m-par .par.uma { grid-template-columns: minmax(0, 860px); justify-content: center; }
figcaption { margin-top: 10px; font-size: 14.5px; color: var(--suave); }
.m-tels .tels { display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); justify-content: center; gap: clamp(16px, 4vw, 56px); }
.m-frase .cx { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 5vw, 72px); align-items: baseline; }
.m-frase h2 { font-size: clamp(28px, 3vw, 38px); }
.m-frase p { font-size: 19px; line-height: 1.55; color: var(--suave); }
@media (max-width: 800px) { .m-par .par, .m-frase .cx { grid-template-columns: 1fr; } .m-tels .tels { grid-template-columns: 1fr 1fr; } .m-tels figure:last-child { grid-column: 1 / -1; width: calc(50% - 8px); margin-inline: auto; } .abre-fone { margin-bottom: 0; } }

/* Página de perguntas */
.busca { position: relative; max-width: 620px; margin-top: 24px; }
.busca svg { position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: #5a6472; pointer-events: none; }
.busca input { width: 100%; min-height: 56px; padding: 0 16px 0 46px; border: 0; border-radius: 12px; background: #fff; color: #111827; font-size: 17px; box-shadow: 0 16px 34px -14px rgb(10 15 40 / .55); }
.busca input::placeholder { color: #5a6472; }
.pg-g { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.pg-nav { position: sticky; top: 92px; max-height: calc(100svh - 110px); overflow-y: auto; }
.pg-nav button { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font-size: 15px; font-weight: 500; color: var(--suave); cursor: pointer; transition: background-color .15s, color .15s; }
.pg-nav button:hover { color: var(--tinta); }
.pg-nav button.ativo { background: var(--fundo2); color: var(--tinta); font-weight: 600; }
.pg-nav span { font-size: 13px; color: var(--suave); font-variant-numeric: tabular-nums; }
.pg-conta { margin-bottom: 14px; font-size: 14.5px; color: var(--suave); }
.pg-grupo { scroll-margin-top: 90px; }
.pg-grupo + .pg-grupo { margin-top: 44px; }
.pg-grupo[hidden], [data-q][hidden] { display: none; }
.pg-grupo h2 { font-size: 24px; margin-bottom: 4px; }
.pg-grupo details { border-bottom: 1px solid var(--borda); }
.pg-grupo summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 600; cursor: pointer; list-style: none; }
.pg-grupo summary::-webkit-details-marker { display: none; }
.pg-grupo summary svg { width: 20px; height: 20px; flex: none; color: var(--suave); transition: transform .22s var(--suav); }
.pg-grupo details[open] summary svg { transform: rotate(180deg); }
.pg-grupo .r { padding-bottom: 18px; color: var(--suave); max-width: 70ch; }
.pg-grupo .r p + p, .pg-grupo .r ul, .pg-grupo .r ul + p { margin-top: 8px; }
.pg-grupo .r ul { list-style: disc; padding-left: 20px; display: grid; gap: 4px; }
.pg-nada { padding: 32px; border: 1px solid var(--borda); border-radius: var(--r); text-align: center; }
.pg-nada h2 { font-size: 24px; }
.pg-nada p { margin: 8px 0 18px; color: var(--suave); }
@media (max-width: 860px) {
  .pg-g { grid-template-columns: minmax(0, 1fr); }
  .pg-nav { position: static; max-height: none; overflow: visible; margin-inline: calc(var(--pad) * -1); }
  .pg-nav ul { display: flex; gap: 6px; overflow-x: auto; padding: 2px var(--pad) 8px; scrollbar-width: none; }
  .pg-nav button { width: auto; white-space: nowrap; border: 1px solid var(--borda); }
  .pg-nav span { display: none; }
}

/* Movimento */
@media (prefers-reduced-motion: no-preference) {
  .js [data-sobe] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--suav), transform .8s var(--suav); transition-delay: calc(var(--d, 0) * 70ms); }
  .js [data-sobe].dentro { opacity: 1; transform: none; }
  .js .plano.top[data-sobe].dentro { transform: translateY(-10px); }
  .js .abre h1, .js .abre .lado { animation: sobe .8s var(--suav) both; }
  .js .abre .lado { animation-delay: .12s; }
  .js .palco { animation: subir-palco 1.1s var(--suav) .2s both; }
}
@keyframes sobe { from { opacity: 0; transform: translateY(20px); } }
@keyframes subir-palco { from { opacity: 0; transform: translateY(44px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .risco path { animation: none; stroke-dashoffset: 0; } }