/* ==========================================================
   NATHÁLIA GOMES · lider-agente.v1.css
   Só o que é da página de vendas. O sistema está em base.v1.css.
   ========================================================== */

/* ---------- delay da oferta (pedido do cliente): até 23:37 do vídeo aparecem só o hero, sem o botão, o apoio e os selos,
   e o rodapé, sem o monograma e a logo. O VTurb mostra o marcador .esconder no tempo certo e o script do hero põe .pos-video
   no <html>. Sem JavaScript, tudo aparece (o <noscript> do head). ---------- */
.esconder { display: none; }
html:not(.pos-video) .apos-video, html:not(.pos-video) .barra-oferta { display: none !important; }
/* enquanto espera: o rodapé fica só com o aviso e o ©, no centro e com respiro em cima (o fechamento ainda não existe) */
html:not(.pos-video) .la-hero { padding-bottom: clamp(40px, 5vw, 72px); }
html:not(.pos-video) .la .rodape-inner { padding-top: clamp(48px, 6vw, 72px); padding-bottom: calc(clamp(40px, 5vw, 64px) + env(safe-area-inset-bottom, 0px)); }
html:not(.pos-video) .la .rodape-base { justify-content: center; }
html:not(.pos-video) .la .rodape-txt { text-align: center; }

/* ---------- nav: assinatura do curso (monograma + LÍDER leve, AGENTE semibold) ---------- */
.marca-curso { display: inline-flex; align-items: center; gap: 12px; color: currentColor; text-decoration: none; }
.marca-curso svg { width: 26px; height: auto; color: var(--argila); }
.marca-curso > span { font-size: 14px; letter-spacing: .24em; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.marca-curso > span span { font-weight: 300; }
.marca-curso > span b { font-weight: 600; }
.nav-shell.is-claro .marca-curso svg { color: var(--argila-escura); }
.nav-acoes { display: flex; align-items: center; gap: 12px; }

/* ---------- leitura: títulos da página de vendas ----------
   Pedido do cliente (público chega pelo celular). Diagramação medida na arkom.ai, sem levar cor nem fonte de lá:
   títulos curtos em Basic Sans, frase-base mais clara e a parte-chave (o <em>) em peso forte e cor plena,
   no lugar da caixa alta fina. Fino Sans fica nos números, nos rótulos curtos e nas letras do método. */
.la { --w-text: 400; --fs-eyebrow: 12px; --fs-body: clamp(17px, .25vw + 14.5px, 18px); }
.la .titulo {
  font-family: var(--font-text); font-weight: 300; text-transform: none; letter-spacing: -.012em;
  font-size: clamp(27px, 1.5vw + 17px, 42px); line-height: 1.18; color: var(--fg-2); max-width: 19em;
}
.la .titulo em { font-style: normal; font-weight: 600; color: var(--fg); }
.la .titulo-display { font-size: clamp(32px, 2.9vw + 19px, 60px); line-height: 1.08; letter-spacing: -.02em; }
.la .titulo-2 { font-size: clamp(25px, 1.1vw + 17px, 36px); }
.la .titulo-3 { font-size: clamp(20px, .5vw + 16px, 24px); font-weight: 500; letter-spacing: -.005em; color: var(--fg); }
.la .sub { font-weight: 400; }
.la .aula h3 { font-family: var(--font-text); font-weight: 500; text-transform: none; letter-spacing: -.005em; line-height: 1.28; font-size: clamp(19px, .5vw + 15px, 22px); }

/* ---------- conversão: botões verdes (só na página de vendas) ---------- */
.la { --verde: #2c744f; --verde-escuro: #215a3c; --verde-claro: #36865d; }
.la .btn { --btn-bg: var(--verde); --btn-fg: #fff8ef; box-shadow: 0 18px 36px -18px #173d29cc; }
.la .btn:hover { box-shadow: 0 22px 44px -18px #173d29; }
.la .btn-bloco { background: var(--verde-escuro); }
.la .btn-agulha { color: var(--linho); }
.la .btn:hover .btn-txt { color: #fff8ef; }
.la .nav-acoes .btn-linha, .la .nav-shell.is-claro .nav-acoes .btn-linha { background: var(--verde); border-color: var(--verde); color: #fff8ef; }
.la .nav-acoes .btn-linha:hover, .la .nav-shell.is-claro .nav-acoes .btn-linha:hover { background: var(--verde-claro); border-color: var(--verde-claro); }

/* ---------- hero centrado com a VSL (A1, A2) ---------- */
/* sem header: o logo do curso abre o hero */
.la-hero { padding-top: clamp(24px, 2vw, 32px); text-align: center; }
.la-hero-marca { justify-content: center; margin: 0 0 clamp(18px, 1.6vw, 24px); color: var(--linho); }
.la-hero-marca svg { width: clamp(34px, 2.4vw, 44px); }
.la-hero-marca > span { font-size: clamp(16px, .6vw + 12px, 21px); letter-spacing: .28em; }
.la-hero .titulo { margin: 16px auto 0; max-width: none; color: var(--fg); }
.la-hero-sub { max-width: 920px; margin: 16px auto 0; font-size: clamp(18px, .5vw + 14.5px, 22px); line-height: 1.45; color: var(--fg-2); text-wrap: balance; }
.vsl { max-width: 920px; margin: clamp(20px, 2vw, 28px) auto 0; }
/* aviso acima do vídeo: ícone de som com as ondas pulsando */
.vsl-aviso { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; text-align: left; }
.vsl-som { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--fio-escuro); border-radius: 50%; color: var(--argila); }
.vsl-som svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vsl-som .alto { fill: currentColor; stroke: none; }
/* o hero não tem animação (pedido do cliente): as ondas do ícone de som ficam paradas */
.vsl-aviso p { display: grid; gap: 2px; margin: 0; }
.vsl-aviso-1 { font-size: max(12px, var(--fs-eyebrow)); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; line-height: 1.4; color: var(--fg); }
.vsl-moldura { position: relative; background: #000; box-shadow: 0 50px 100px -50px #000, 0 0 0 1px var(--fio-escuro); }
.la-hero-acao { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 40px; }
.apoio-caps { font-size: max(11px, var(--fs-eyebrow)); letter-spacing: var(--tr-caps); text-transform: uppercase; line-height: 1.6; color: var(--fg-3); text-wrap: balance; }
.selos { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 30px; }
.selos-logos { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 3vw, 40px); }
.selos-divisor { flex: none; width: 1px; align-self: stretch; min-height: 44px; background: linear-gradient(transparent, var(--argila) 30%, var(--argila) 70%, transparent); opacity: .7; }
.selos-logos svg { display: block; height: auto; }
.logo-nvidia { width: clamp(150px, 12vw, 196px); }
.logo-bilhon { width: clamp(150px, 11.5vw, 182px); }
.selos-logos .logo-marca { fill: var(--argila); }
.selos-logos .logo-texto { fill: var(--linho); }
.selos-logos .logo-fio { fill: var(--argila); opacity: .55; }
.selos-frase { font-size: max(12px, var(--fs-eyebrow)); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3); }

/* ---------- frases de destaque ---------- */
.frase-luz { margin-top: clamp(40px, 5vw, 56px); padding-left: 28px; border-left: 1px solid var(--argila); max-width: 26em; }
.frase-larga { max-width: 30em; }
.frase-centro { margin-inline: auto; }
.acoes-centro { justify-content: center; }

/* ---------- 01 reconheça ---------- */
/* ---------- padrões da diagramação da arkom.ai (só organização e movimento; cor e fonte são as nossas) ---------- */
/* a cabeça centrada (.cabeca-centro) mora no base.v1.css */
/* a frase-tese centrada (.frase-luz.frase-centro) mora no base.v1.css */
/* todo CTA de seção fica no centro */
.la .acoes { justify-content: center; }

/* ---------- 01 reconheça: o laço do Modo Estudante ao lado do texto, na mesma altura ---------- */
.estudante { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: clamp(32px, 5vw, 80px); max-width: 1080px; margin: clamp(40px, 5vw, 64px) auto 0; }
.estudante .texto { max-width: 34em; }
.loop-estudante { justify-self: center; width: min(100%, 400px); margin: 0; color: var(--fg); }
.loop-svg { display: block; width: 100%; height: auto; overflow: visible; }
.loop-anel { fill: none; stroke: var(--fio-c); stroke-width: 1.2; }
.loop-anel-int { fill: none; stroke: var(--fio-c); stroke-width: 1; stroke-dasharray: 2 7; opacity: .8; }
.loop-saida { fill: none; stroke: var(--fio-c); stroke-width: 1.2; stroke-dasharray: 4 6; }
.loop-agente { opacity: .45; }
.loop-agente circle { fill: var(--bg); stroke: var(--argila-escura); stroke-width: 1.2; stroke-dasharray: 3 4; }
.loop-agente path { fill: var(--argila-escura); }
.loop-cauda { fill: none; stroke: url(#loop-cauda-g); stroke-width: 2.6; stroke-linecap: round; }
.loop-ponto { fill: var(--fg); }
.loop-no .base { fill: var(--bg); stroke: var(--fio-c); stroke-width: 1.2; }
.loop-no .halo { fill: none; stroke: var(--argila); stroke-width: 1; opacity: 0; }
.loop-no .ic { fill: none; stroke: var(--fg); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.loop-no .ic.cheio { fill: var(--fg); stroke: none; }
.loop-rotulo { font-family: var(--font-text); font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; fill: var(--fg-3); text-anchor: middle; }
.loop-centro { font-family: var(--font-text); font-size: 15px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; fill: var(--fg); text-anchor: middle; }
.loop-barra { fill: var(--fio-c); }
.loop-barra-cheia { fill: var(--fg); transform-box: fill-box; transform-origin: left center; transform: scaleX(.18); }
/* o movimento só roda com a figura na tela ([data-vivo] liga .em-cena) */
.loop-giro { transform-box: view-box; transform-origin: 200px 200px; }
.js .loop-estudante.em-cena .loop-giro { animation: loop-gira 7.5s linear infinite; }
.js .loop-estudante.em-cena .loop-no .halo { animation: loop-halo 7.5s var(--ease) infinite; }
.js .loop-estudante.em-cena .loop-no-2 .halo { animation-delay: 2.5s; }
.js .loop-estudante.em-cena .loop-no-3 .halo { animation-delay: 5s; }
.js .loop-estudante.em-cena .loop-barra-cheia { animation: loop-barra 7.5s linear infinite; }
.js .loop-estudante.em-cena .loop-agente { animation: loop-respira 3.8s ease-in-out infinite; }
@keyframes loop-gira { to { transform: rotate(360deg); } }
@keyframes loop-halo { 0% { opacity: .9; stroke-width: 7; } 16%, 100% { opacity: 0; stroke-width: 1; } }
@keyframes loop-barra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes loop-respira { 0%, 100% { opacity: .3; } 50% { opacity: .65; } }
:root[data-scale="ampliada"] .loop-estudante * { animation: none !important; }
.lista-titulo { margin-top: clamp(48px, 6vw, 72px); margin-bottom: 18px; text-align: center; font-size: var(--fs-lead); font-weight: 600; color: var(--fg); }
/* "para você se": a coluna fica no eixo da página, com o check ao lado de cada frase e o texto alinhado à esquerda;
   cada item ganha o check quando passa da linha de leitura (o texto nunca é riscado) */
.lista-voce { display: grid; width: fit-content; max-width: 44rem; margin-inline: auto; }
.lista-voce li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; gap: 16px; padding: clamp(9px, 1vw, 12px) 0; font-size: var(--fs-body); line-height: 1.55; color: var(--fg); text-align: left; text-wrap: pretty; }
.lista-voce .check { width: 26px; height: 26px; margin-top: calc((1.55em - 26px) / 2); overflow: visible; }
.lista-voce .check-base { fill: none; stroke: var(--fio-c); stroke-width: 1.5; }
.lista-voce .check-anel { fill: var(--fg); stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 1; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; }
.lista-voce .check-tique { fill: none; stroke: var(--bg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.js .lista-voce li { transition: color .6s var(--ease); }
.js .lista-voce .check-anel { transition: stroke-dashoffset .6s var(--ease), fill-opacity .4s .35s; }
.js .lista-voce .check-tique { transition: stroke-dashoffset .4s .5s var(--ease); }
.js .lista-voce li:not(.is-aceso) { color: var(--fg-3); }
.js .lista-voce li:not(.is-aceso) .check-anel { stroke-dashoffset: 1; fill-opacity: 0; transition-delay: .1s, 0s; }
.js .lista-voce li:not(.is-aceso) .check-tique { stroke-dashoffset: 1; transition-delay: 0s; }

/* ---------- 04 a grande inversão (A6) ---------- */
.inversao-modos { margin-top: clamp(48px, 6vw, 72px); }
.inversao-modos .modo p:last-child { margin-top: 18px; font-size: var(--fs-lead); line-height: 1.55; }
/* entre Antes e Agora: o monograma completo (o N com a bússola); a agulha gira e assenta quando entra na tela (.bussola-viva) */
.la .virada svg { width: 100%; height: auto; transform: none; }
.virada-mono { display: block; width: clamp(56px, 5vw, 76px); color: var(--argila-escura); }
.piramides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); max-width: 1040px; margin: clamp(56px, 7vw, 88px) auto 0; }
.piramide { margin: 0; }
.piramide-nome { margin-bottom: 20px; font-size: max(12px, var(--fs-eyebrow)); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; text-align: center; color: var(--fg-3); }
.piramide ol { display: grid; gap: 6px; }
/* degraus em trapézio: o topo é o mais estreito; as inclinações continuam de um degrau para o outro */
.piramide li {
  --topo: 0%; --base: 0%;
  display: grid; place-content: center; justify-items: center; gap: 6px; min-height: clamp(92px, 7vw, 108px); padding: 14px 12px; text-align: center;
  clip-path: polygon(var(--topo) 0, calc(100% - var(--topo)) 0, calc(100% - var(--base)) 100%, var(--base) 100%);
}
.piramide li:nth-child(1) { --topo: 31%; --base: 21%; }
.piramide li:nth-child(2) { --topo: 20.5%; --base: 10.5%; }
.piramide li:nth-child(3) { --topo: 10%; --base: 0%; }
.piramide li small { font-size: max(11px, calc(var(--fs-eyebrow) - 1px)); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; }
.piramide li span { font-family: var(--font-text); font-size: clamp(17px, .5vw + 14px, 20px); font-weight: 500; line-height: 1.2; }
/* antes: tudo igual, tudo na folha */
.piramide.antes li { background: #e3dbd0; color: var(--tinta-2); }
.piramide.antes li small { color: var(--tinta-3); }
/* agora: você no topo (café), humano + agentes no meio (argila), IA na base (clara) */
.piramide.agora .n-estrategico { background: var(--cafe); color: var(--linho); }
.piramide.agora .n-estrategico small { color: var(--claro-3); }
.piramide.agora .n-tatico { background: var(--argila); color: var(--cafe); }
.piramide.agora .n-tatico small { color: #4d3f34; }
.piramide.agora .n-operacional { background: #e3dbd0; color: var(--tinta); }
.piramide.agora .n-operacional small { color: var(--tinta-3); }
.piramide-legenda { max-width: 26em; margin: 18px auto 0; font-size: var(--fs-support); line-height: 1.5; text-align: center; color: var(--fg-2); }
/* os degraus de agora acendem de baixo para cima quando a seção entra na tela */
.js .piramides .agora li { opacity: .25; transform: translateY(10px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js .piramides.em-cena .agora li { opacity: 1; transform: none; }
.js .piramides.em-cena .agora .n-operacional { transition-delay: .1s; }
.js .piramides.em-cena .agora .n-tatico { transition-delay: .45s; }
.js .piramides.em-cena .agora .n-estrategico { transition-delay: .8s; }
.inversao-texto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px clamp(32px, 5vw, 80px); margin-top: clamp(48px, 6vw, 72px); }
.inversao-texto .texto { max-width: none; margin: 0; }
.inversao-texto + .frase-luz { margin-top: clamp(48px, 6vw, 72px); }

/* ---------- 05 o método nasceu na prática ---------- */
.numeros-5 { margin-top: clamp(48px, 6vw, 80px); }
.numeros-5 b { font-size: clamp(52px, 3.6vw + 20px, 80px); }
.pratica-sistema { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(48px, 6vw, 72px); }
.pratica-sistema .lead { max-width: none; }
.prova-terceiros { padding: 22px 0 0 24px; border-left: 1px solid var(--fio-c); }
.prova-terceiros strong { color: var(--fg); }
.prova-logo { display: block; width: clamp(170px, 14vw, 220px); height: auto; margin-bottom: 18px; }

/* ---------- 08 Comando de Chefia (A9: a definição ativa é digitada) ---------- */
/* 08 método: tudo numa coluna alinhada à esquerda (título, texto e frase), sem a grade 7/5 */
/* ---------- 08 método: hub radial do Comando de Chefia (A7) com o painel que digita (A9) ---------- */
.comando { margin-top: clamp(56px, 7vw, 96px); text-align: center; }
.comando-intro { max-width: 34em; margin: 0 auto; }
.hub { position: relative; max-width: 1000px; aspect-ratio: 1000 / 440; margin: clamp(28px, 4vw, 48px) auto 0; }
.hub-linhas { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-linhas-m { display: none; }
.hub-linha { fill: none; stroke: var(--fio-escuro); stroke-width: 1.3; transition: stroke .5s; }
.hub[data-ativo="0"] .hub-l0, .hub[data-ativo="1"] .hub-l1, .hub[data-ativo="2"] .hub-l2, .hub[data-ativo="3"] .hub-l3 { stroke: var(--argila); }
.hub-junta { fill: var(--fio-escuro); }
.hub-pulso { fill: var(--linho); opacity: 0; filter: drop-shadow(0 0 5px #b19d8e); }
.hub-nucleo { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 13.2%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid color-mix(in srgb, var(--argila) 55%, transparent); border-radius: 50%; background: radial-gradient(circle at 50% 28%, #3d332c, var(--cafe-profundo) 72%); box-shadow: 0 0 0 10px #b19d8e0d, 0 30px 60px -30px #000, 0 0 70px -12px #b19d8e55; }
.hub-nucleo svg { width: 46%; color: var(--linho); }
.hub-nucleo::before { content: ""; position: absolute; inset: -22%; border: 1px dashed #b19d8e45; border-radius: 50%; }
.js .hub.em-cena .hub-nucleo::before { animation: hub-gira 30s linear infinite; }
@keyframes hub-gira { to { transform: rotate(360deg); } }
.hub-no { --x: 13%; --y: 25%; position: absolute; left: var(--x); top: var(--y); z-index: 1; width: 21%; transform: translate(-50%, -50%); }
.hub-no[data-no="1"] { --y: 75%; }
.hub-no[data-no="2"] { --x: 87%; }
.hub-no[data-no="3"] { --x: 87%; --y: 75%; }
.hub-no button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 18px 10px 10px; border: 1px solid var(--fio-escuro); border-radius: 999px; background: #1b1410e6; color: var(--fg-2); cursor: pointer; font-size: max(12px, var(--fs-eyebrow)); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; transition: color .4s, border-color .4s, box-shadow .4s; }
.hub-no button:focus-visible { outline: 2px solid var(--argila); outline-offset: 3px; }
.hub-icone { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #f3eae00f; color: var(--argila); transition: background .4s, color .4s; }
.hub-icone svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hub-no.is-ativo button { color: var(--linho); border-color: var(--argila); box-shadow: 0 0 0 6px #b19d8e12, 0 0 44px -10px #b19d8e99; }
.hub-no.is-ativo .hub-icone { background: var(--argila); color: var(--cafe-profundo); }
/* a definição de cada elemento fica no HTML para leitores de tela; o painel mostra a do ativo */
.hub-no .cmd-def { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hub-painel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.8fr); max-width: 780px; margin: clamp(20px, 3vw, 32px) auto 0; text-align: left; border: 1px solid var(--fio-escuro); border-radius: var(--r-1); background: color-mix(in srgb, var(--linho) 4%, transparent); }
.hub-painel-col { padding: 18px 22px 20px; }
.hub-painel-col + .hub-painel-col { border-left: 1px solid var(--fio-escuro); }
.hub-rotulo { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3); }
.hub-nome { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h3); letter-spacing: .02em; text-transform: uppercase; color: var(--linho); }
.hub-def { min-height: 3em; font-size: var(--fs-lead); line-height: 1.5; color: var(--fg); }
:root[data-scale="ampliada"] .hub-nucleo::before { animation: none !important; }
.time-invisivel { margin-top: clamp(48px, 6vw, 72px); align-items: center; }
.time-invisivel .lead { max-width: none; }

/* ---------- 09 MCFA · uma coluna, bússola presa no alto (bussola.v1.js, modo trilha) ---------- */
.aba-so-numero b { padding-top: 14px; }
.mcfa-cabeca { max-width: 46rem; margin: clamp(16px, 2vw, 24px) auto 0; text-align: center; }
.mcfa-cabeca .titulo { margin-inline: auto; }
.mcfa-intro { margin: 20px auto 0; max-width: 40em; }
.mcfa-trilha { margin: clamp(32px, 4vw, 56px) auto 0; }
/* a faixa presa acompanha a rolagem até a dobra: o respiro de baixo da seção mora dentro da trilha,
   onde a faixa ainda está presa (o padding da seção ficava fora e soltava a faixa antes do fim) */
.mcfa-trilha::after { content: ""; display: block; height: clamp(64px, 8vw, 112px); }
/* faixa presa na largura toda: vidro fosco de ponta a ponta (o texto que passa por baixo desfoca);
   índice na borda esquerda, bússola no centro, a letra ativa rola como um contador na borda direita (o JS marca data-ativo = 0 a 3) */
#mcfa { overflow: clip; padding-bottom: 0; }
.bussola-fixa { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px clamp(24px, 4vw, 72px); padding: clamp(12px, 2vh, 22px) 0 clamp(14px, 2.2vh, 24px); }
.bussola-fixa::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; z-index: -1; width: 100vw; transform: translateX(-50%); background: color-mix(in srgb, var(--cafe) 84%, transparent); backdrop-filter: blur(16px) saturate(1.1); -webkit-backdrop-filter: blur(16px) saturate(1.1); border-bottom: 1px solid var(--fio-escuro); box-shadow: 0 34px 50px -44px #000; }
.mcfa-trilha .bussola { width: clamp(200px, 32vh, 330px); max-width: none; }
.mcfa-indice { justify-self: start; display: grid; gap: 16px; }
.mcfa-indice li { position: relative; display: flex; align-items: baseline; gap: 14px; font-size: max(12px, var(--fs-eyebrow)); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3); opacity: .5; transition: color .4s, opacity .4s, transform .5s var(--ease); }
.mcfa-indice li::before { content: ""; position: absolute; left: -26px; top: 50%; width: 16px; height: 1px; background: var(--argila); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.mcfa-indice b { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: 0; color: var(--italico); }
.bussola-fixa[data-ativo="0"] .mcfa-indice li:nth-child(1), .bussola-fixa[data-ativo="1"] .mcfa-indice li:nth-child(2),
.bussola-fixa[data-ativo="2"] .mcfa-indice li:nth-child(3), .bussola-fixa[data-ativo="3"] .mcfa-indice li:nth-child(4) { color: var(--fg); opacity: 1; transform: translateX(10px); }
.bussola-fixa[data-ativo="0"] .mcfa-indice li:nth-child(1)::before, .bussola-fixa[data-ativo="1"] .mcfa-indice li:nth-child(2)::before,
.bussola-fixa[data-ativo="2"] .mcfa-indice li:nth-child(3)::before, .bussola-fixa[data-ativo="3"] .mcfa-indice li:nth-child(4)::before { transform: scaleX(1); }
.mcfa-letra { justify-self: end; height: 1em; overflow: hidden; font-family: var(--font-display); font-size: clamp(160px, 26vh, 290px); line-height: 1; color: var(--italico);
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); transition: opacity .5s; }
.mcfa-rolo { display: block; transition: transform 1s var(--ease); }
.mcfa-rolo span { display: block; height: 1em; text-align: center; }
.bussola-fixa:not([data-ativo]) .mcfa-letra { opacity: .3; }
.bussola-fixa[data-ativo="1"] .mcfa-rolo { transform: translateY(-1em); }
.bussola-fixa[data-ativo="2"] .mcfa-rolo { transform: translateY(-2em); }
.bussola-fixa[data-ativo="3"] .mcfa-rolo { transform: translateY(-3em); }
/* as quatro etapas sob a bússola: acendem até o movimento ativo */
.mcfa-progresso { grid-column: 1 / -1; justify-self: center; display: flex; gap: 6px; }
.mcfa-progresso i { width: 44px; height: 2px; border-radius: 2px; background: var(--fio-escuro); transition: background .5s var(--ease); }
.bussola-fixa[data-ativo="0"] .mcfa-progresso i:nth-child(-n+1), .bussola-fixa[data-ativo="1"] .mcfa-progresso i:nth-child(-n+2),
.bussola-fixa[data-ativo="2"] .mcfa-progresso i:nth-child(-n+3), .bussola-fixa[data-ativo="3"] .mcfa-progresso i { background: var(--argila); }
.mcfa-trilha .movimentos { position: relative; z-index: 1; max-width: 860px; margin-inline: auto; padding-bottom: 0; }
.mcfa-trilha .movimentos li { min-height: 26vh; }
/* o último movimento não tem altura mínima: a faixa da bússola solta junto com ele, sem vão escuro no fim */
.mcfa-trilha .movimentos li:last-child { min-height: 0; }
.mcfa-trilha .mov { grid-template-columns: 110px minmax(0, 1fr); padding: 30px 0 34px; }
.mcfa-trilha .mov-letra { font-size: clamp(64px, 3vw + 30px, 92px); }
.mcfa-trilha .mov-txt { font-size: var(--fs-lead); line-height: 1.55; }
.js .mcfa-trilha:has(.bussola[data-ativa]) .mov { opacity: .38; transition: opacity .5s var(--ease); }
.js .mcfa-trilha:has(.bussola[data-ativa]) .mov[aria-pressed="true"] { opacity: 1; }

/* ---------- 10 o que você leva · galeria que expande ----------
   Desktop: a aula ativa abre larga (imagem + tudo); as outras ficam estreitas com o título.
   Até 1100 px: cards inteiros lado a lado, de deslizar com o dedo. */
.galeria { margin-top: clamp(40px, 5vw, 64px); }
.galeria-controles { display: flex; align-items: center; gap: 24px; margin-bottom: 22px; }
.galeria-contador { display: flex; align-items: baseline; gap: 8px; font-family: var(--font-display); font-size: 40px; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums; }
.galeria-contador span { font-size: 20px; color: var(--fg-3); }
.galeria-trilho { flex: 1; height: 1px; background: var(--fio-c); overflow: hidden; }
.galeria-trilho i { display: block; height: 100%; background: var(--italico); transform-origin: left; transform: scaleX(var(--galeria-p, .072)); transition: transform .6s var(--ease); }
.galeria-setas { display: flex; gap: 10px; }
.seta { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid var(--fio-c); border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; transition: background .2s, border-color .2s, opacity .2s; }
.seta svg { width: 20px; height: 20px; }
.seta:hover:not(:disabled) { background: var(--cafe); border-color: var(--cafe); color: var(--linho); }
.seta:disabled { opacity: .3; cursor: default; }
.galeria-janela { overflow: hidden; }
@media (min-width: 1101px) { .galeria-janela { margin-right: calc(50% - 50vw); } #aulas { overflow-x: clip; } }
.aulas { --estreita: 208px; --larga: min(620px, 52vw); --vao: 12px; display: flex; gap: var(--vao); height: clamp(520px, 38vw, 580px); transition: transform .75s var(--ease); }
.aula {
  position: relative; flex: 0 0 var(--estreita); overflow: hidden; border-radius: 0 22px 0 22px; background: var(--cafe-profundo); color: var(--claro); cursor: pointer;
  --fg: var(--claro); --fg-2: var(--claro-2); --fg-3: var(--claro-3); --italico: var(--argila);
  transition: flex-basis .75s var(--ease), box-shadow .4s;
}
.aula.is-ativa { flex-basis: var(--larga); cursor: default; box-shadow: 0 40px 70px -40px #1b1410; }
.aula-img { position: absolute; inset: 0; margin: 0; overflow: hidden; background: radial-gradient(120% 80% at 80% 0%, #4a3f38 0%, transparent 60%), linear-gradient(165deg, var(--cafe-2), var(--cafe-profundo)); }
.aula-img::before { content: ""; position: absolute; inset: -20%; background: linear-gradient(41.3deg, transparent 46%, #f3eae00d 48%, transparent 48.4%, transparent 51%, #f3eae00a 51.4%, transparent 56%); }
.aula-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.55) brightness(.72); transition: filter .7s, transform 1.4s var(--ease), object-position .9s var(--ease); }
/* no cartão aberto o texto cobre a metade de baixo: a foto sobe um pouco para o objeto ficar acima do texto */
.aula.is-ativa .aula-img img { filter: none; transform: scale(1.02); object-position: 50% 72%; }
.aula-num { position: absolute; left: 22px; top: 16px; font-family: var(--font-display); font-size: clamp(72px, 5vw, 104px); line-height: 1; color: var(--argila); opacity: .5; transition: opacity .6s; }
.aula.is-ativa .aula-num { opacity: .85; }
.aula-corpo { position: absolute; left: 0; right: 0; bottom: 0; padding: 72px 22px 24px; background: linear-gradient(transparent, #1b1410e8 30%, #1b1410fa); }
.aula.is-ativa .aula-corpo { padding: 96px 30px 30px; }
.aula-rotulo { font-size: max(11px, var(--fs-eyebrow)); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--claro-3); }
.aula h3 { margin-top: 8px; color: var(--claro); }
.aula h3 button { all: unset; display: block; cursor: pointer; }
.aula h3 button:focus-visible { outline: 2px solid var(--argila); outline-offset: 4px; }
.aula.is-ativa h3 { font-size: clamp(22px, .8vw + 15px, 28px); line-height: 1.2; }
.aula-detalhe { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .75s var(--ease), opacity .5s .2s; }
.aula.is-ativa .aula-detalhe { max-height: 20em; opacity: 1; }
.aula-detalhe p { margin-top: 12px; font-size: calc(var(--fs-support) + 1px); line-height: 1.55; color: var(--claro-2); max-width: 34em; }
.aula-detalhe strong { color: var(--claro); }
.aula-sente { font-style: italic; color: var(--claro-3) !important; }
.aula-virada { padding-top: 12px; border-top: 1px solid var(--fio-escuro); color: var(--claro) !important; }

/* ---------- 11 bônus: linhas alternadas (mockup | texto), cada produto no seu formato ----------
   peças em ../img/lider-agente/bonus/ (Producao/materiais/fonte/bonus.html). O mockup e o texto têm a mesma altura: nada de vazio ao lado. */
.bonus-linhas { display: grid; gap: clamp(56px, 7vw, 104px); margin-top: clamp(48px, 6vw, 80px); }
.bonus-linha { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(28px, 4vw, 64px); }
.bonus-linha:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.bonus-linha:nth-child(even) .bonus-mk { order: 2; }
.bonus-txt { max-width: 34rem; }
.bonus-n { display: inline-flex; align-items: center; gap: 10px; font-size: max(12px, var(--fs-eyebrow)); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg); }
.bonus-n span { padding: 5px 12px; border-radius: 999px; background: var(--cafe); color: var(--linho); font-size: 11px; }
.la .bonus-txt h3 { margin-top: 16px; font-family: var(--font-text); font-weight: 500; text-transform: none; letter-spacing: -.01em; font-size: clamp(22px, 1.1vw + 15px, 30px); line-height: 1.22; color: var(--fg); }
.bonus-desc { margin-top: 14px; font-size: var(--fs-body); line-height: 1.6; color: var(--fg-2); }
.bonus-dentro { display: grid; gap: 10px; margin-top: 20px; }
.bonus-dentro li { position: relative; padding-left: 30px; font-size: var(--fs-support); line-height: 1.5; color: var(--fg); }
.bonus-dentro li::before { content: ""; position: absolute; left: 0; top: calc(.75em - 9px); width: 18px; height: 18px; background: var(--argila-escura); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm5.2 7.6-6.4 7.2-4-3.6 1.1-1.2 2.8 2.5 5.3-6 1.2 1.1Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm5.2 7.6-6.4 7.2-4-3.6 1.1-1.2 2.8 2.5 5.3-6 1.2 1.1Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.bonus-valor { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--fio-c); font-size: max(12px, var(--fs-eyebrow)); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3); }
.bonus-valor s { font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--fg-2); font-variant-numeric: lining-nums; }
.bonus-valor b { margin-left: auto; padding: 7px 16px; border-radius: 999px; background: var(--cafe); color: var(--linho); font-size: 11px; font-weight: 600; }
.bonus-total { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; max-width: 760px; margin: clamp(56px, 7vw, 96px) auto 0; padding: 22px 28px; border: 1px solid var(--fio-c); border-radius: 0 28px 0 28px; background: var(--linho); font-size: max(12px, var(--fs-eyebrow)); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--fg-3); text-align: center; }
.bonus-total s { font-family: var(--font-text); font-size: clamp(26px, 1.2vw + 18px, 34px); font-weight: 500; letter-spacing: -.01em; text-transform: none; color: var(--fg-2); font-variant-numeric: lining-nums; }
.bonus-total b { padding: 8px 18px; border-radius: 999px; background: var(--cafe); color: var(--linho); font-size: 12px; font-weight: 600; }

/* palco comum: perspectiva e sombras quentes; .mk-flut flutua devagar quando a figura está na tela */
.bonus-mk { margin: 0; }
.mk-palco { position: relative; aspect-ratio: 16 / 11; perspective: 1800px; }
.mk-palco img { display: block; width: 100%; height: auto; }
.js .bonus-mk.em-cena .mk-flut { animation: mk-flut 9s ease-in-out infinite; }
@keyframes mk-flut { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
:root[data-scale="ampliada"] .bonus-mk .mk-flut { animation: none !important; }

/* 1 · guia impresso: capa inclinada atrás e o livreto aberto em V, com vinco e espessura das folhas */
.mk-capa { position: absolute; left: 0; top: 4%; width: 31% !important; border-radius: 2px 7px 7px 2px; transform: rotate(-9deg); box-shadow: 0 30px 50px -22px #1b1410aa, inset 0 0 0 1px #f3eae014; }
.mk-livro { position: absolute; left: 12%; right: 1%; top: 12%; display: flex; transform: rotateX(18deg) rotateZ(-4deg); transform-style: preserve-3d; filter: drop-shadow(0 34px 30px #2d252055); }
.mk-pg { width: 50% !important; box-shadow: 0 1px 0 #efe6da, 0 2px 0 #e2d7c9, 0 3px 0 #efe6da, 0 4px 0 #ddd1c2, 0 5px 0 #e8ddd0, 0 6px 0 #d6c9b9; }
.mk-pg-e { border-radius: 4px 0 0 4px; transform-origin: right center; transform: rotateY(5deg); }
.mk-pg-d { border-radius: 0 4px 4px 0; transform-origin: left center; transform: rotateY(-5deg); }
.mk-vinco { position: absolute; left: 50%; top: 0; bottom: 0; width: 16%; transform: translateX(-50%); pointer-events: none; background: linear-gradient(90deg, transparent, #2d252014 30%, #2d252047 49%, #fff8ef33 51%, #2d252014 70%, transparent); }

/* 2 · biblioteca: janela do app girada e o prompt aberto à frente */
.mk-janela { position: absolute; left: 1%; top: 5%; width: 84%; overflow: hidden; border-radius: 14px; background: var(--cafe-profundo); box-shadow: 0 0 0 1px #2d252026, 0 50px 80px -40px #2d2520b0; transform: rotateY(16deg) rotateX(5deg); transform-origin: left center; transition: transform 1.2s var(--ease); }
.mk-janela-barra { display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 12px; background: #2d2520; }
.mk-janela-barra i { width: 9px; height: 9px; border-radius: 50%; background: #b19d8e55; }
.mk-janela-barra span { width: 32%; height: 11px; margin-left: 12px; border-radius: 99px; background: #f3eae014; }
.mk-prompt { position: absolute; right: 0; bottom: 3%; width: 50% !important; border-radius: 14px; box-shadow: 0 0 0 1px #2d25201a, 0 40px 60px -26px #2d2520c0; transform: rotateY(-8deg) rotateZ(1.5deg); }
.bonus-linha:hover .mk-janela { transform: rotateY(8deg) rotateX(3deg); }

/* 3 · guia de ferramentas: tablet deitado em leve perspectiva, com moldura e reflexo */
.mk-ipad { position: absolute; left: 8%; top: 7%; width: 84%; padding: 2.4%; border-radius: 5% / 6.6%; background: linear-gradient(150deg, #3d332c, #1b1410 60%); box-shadow: inset 0 0 0 1px #f3eae01f, 0 60px 80px -42px #2d2520d0; transform: rotateX(20deg) rotateZ(-5deg); transition: transform 1.2s var(--ease); }
.mk-ipad img { border-radius: 2.4% / 3.2%; }
.mk-ipad::after { content: ""; position: absolute; inset: 2.4%; border-radius: 2.4% / 3.2%; pointer-events: none; background: linear-gradient(115deg, transparent 35%, #ffffff1f 45%, transparent 55%); }
.bonus-linha:hover .mk-ipad { transform: rotateX(12deg) rotateZ(-3deg); }

/* 4 · glossário: celular de pé, levemente girado, e o verbete à frente */
.mk-celular { position: absolute; left: 18%; top: 1%; width: 29%; padding: 1.5%; border-radius: 15% / 7.2%; background: #1b1410; box-shadow: inset 0 0 0 2px #3d332c, 0 50px 70px -34px #2d2520d0; transform: rotateY(18deg) rotateZ(-5deg); transition: transform 1.2s var(--ease); }
.mk-celular img { border-radius: 12% / 5.6%; }
.mk-celular::before { content: ""; position: absolute; left: 50%; top: 3%; z-index: 1; width: 30%; height: 2.4%; border-radius: 99px; background: #1b1410; transform: translateX(-50%); }
.mk-verbete { position: absolute; right: 3%; top: 50%; width: 54% !important; border-radius: 16px; box-shadow: 0 40px 60px -26px #1b1410c0; transform: rotate(3deg); }
.bonus-linha:hover .mk-celular { transform: rotateY(8deg) rotateZ(-3deg); }

/* ---------- 11 human skills (A8) ---------- */
.skills-texto { max-width: 30em; margin: clamp(40px, 5vw, 56px) auto 0; font-weight: 300; text-align: center; }
.skills-texto strong { font-weight: 600; }
.skills-faixa { margin-top: clamp(32px, 4vw, 48px); }
.skills-faixa + .skills-faixa { margin-top: 12px; }

/* ---------- 07 quem vai te ensinar: o retrato de estúdio enquadrado no rosto ---------- */
#quem-ensina .moldura > img { object-position: 50% 18%; }

/* ---------- 13 a conta fecha ---------- */
.numeros-fonte { margin-top: clamp(48px, 6vw, 72px); }
.numeros-fonte b { font-size: clamp(48px, 3vw + 22px, 76px); white-space: nowrap; }
/* quadro do preço no eixo: o valor em destaque e a balança que assenta quando o quadro entra na tela (a conta fecha) */
.conta-preco { position: relative; max-width: 46rem; margin: clamp(48px, 6vw, 72px) auto 0; padding: clamp(30px, 4vw, 44px) clamp(22px, 4vw, 56px) clamp(32px, 4vw, 46px); border: 1px solid var(--fio-c); border-radius: 0 28px 0 28px; background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--argila) 13%, transparent), transparent 70%), color-mix(in srgb, var(--fg) 3%, transparent); text-align: center; }
.balanca { display: block; width: 72px; height: auto; margin: 0 auto 18px; overflow: visible; color: var(--italico); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.balanca circle { fill: currentColor; stroke: none; }
.balanca-prato path + path { fill: color-mix(in srgb, currentColor 18%, transparent); }
.balanca-braco { transform-box: view-box; transform-origin: 36px 14px; }
.conta-valor { font-size: clamp(26px, 1.4vw + 17px, 38px); font-weight: 300; line-height: 1.2; letter-spacing: -.012em; color: var(--fg-2); }
.conta-valor strong { font-weight: 600; color: var(--fg); white-space: nowrap; }
.conta-preco p + p { max-width: 36em; margin: 16px auto 0; font-size: var(--fs-lead); font-weight: 300; line-height: 1.55; color: var(--fg); text-wrap: balance; }
.js .conta-preco.em-cena .balanca-braco { animation: balanca-braco 2.4s var(--ease) both; }
.js .conta-preco.em-cena .balanca-prato-e { animation: balanca-e 2.4s var(--ease) both; }
.js .conta-preco.em-cena .balanca-prato-d { animation: balanca-d 2.4s var(--ease) both; }
@keyframes balanca-braco { 0% { transform: rotate(-8deg); } 55% { transform: rotate(2.4deg); } 78% { transform: rotate(-.8deg); } 100% { transform: rotate(0); } }
@keyframes balanca-e { 0% { transform: translateY(3.3px); } 55% { transform: translateY(-1px); } 78% { transform: translateY(.34px); } 100% { transform: translateY(0); } }
@keyframes balanca-d { 0% { transform: translateY(-3.3px); } 55% { transform: translateY(1px); } 78% { transform: translateY(-.34px); } 100% { transform: translateY(0); } }
:root[data-scale="ampliada"] .balanca * { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .balanca * { animation: none !important; } }

/* ---------- 14 oferta: ticket (recortes = cantoneiras do monograma) ---------- */
.oferta-grade { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "titulo titulo" "produto ticket"; gap: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(40px, 5vw, 64px); }
.oferta-grade > .titulo { grid-area: titulo; justify-self: center; text-align: center; }
.oferta-grade > .ticket { grid-area: ticket; justify-self: start; }
/* produto em CSS 3D, o pacote completo: o tablet do guia de ferramentas atrás, as folhas do material, a caixa (frente + lateral)
   no centro flutuando devagar (A17) e, na frente, a capa do guia do primeiro agente e o celular com o glossário */
.produto { grid-area: produto; justify-self: end; width: min(100%, 600px); margin: 0; }
.produto-cena { position: relative; container-type: inline-size; aspect-ratio: 1 / 1.16; perspective: 1800px; }
.produto-cena img { display: block; }
.produto-tablet { position: absolute; right: 0; top: 0; width: 60cqw; padding: 1.4cqw; border-radius: 3.2cqw; background: linear-gradient(150deg, #3d332c, #1b1410 60%); box-shadow: inset 0 0 0 1px #f3eae01a, 0 30px 50px -30px #2d2520a6; transform: rotate(8deg); }
.produto-tablet img { width: 100%; height: auto; border-radius: 1.8cqw; }
.produto-guia { position: absolute; left: 0; bottom: 3cqw; z-index: 4; width: 25cqw; height: auto; border-radius: 1px 4px 4px 1px; transform: rotate(-9deg); box-shadow: 0 30px 40px -24px #1b1410b0, inset 0 0 0 1px #f3eae014; }
.produto-fone { position: absolute; right: 6cqw; bottom: 0; z-index: 5; width: 21cqw; padding: 1.1cqw; border-radius: 3.6cqw; background: #1b1410; box-shadow: inset 0 0 0 .4cqw #3d332c, 0 34px 44px -26px #1b1410c0; transform: rotate(7deg); }
.produto-fone img { width: 100%; height: auto; border-radius: 2.6cqw; }
.produto-folha { position: absolute; width: 46cqw; height: auto; border-radius: 2px; box-shadow: 0 24px 40px -24px #2d252080, 0 0 0 1px #2d25200f; }
.folha-tras { right: 2cqw; top: 30cqw; transform: rotate(7deg); }
.folha-frente { right: 13cqw; top: 40cqw; transform: rotate(-2deg); }
.produto-caixa { position: absolute; z-index: 3; left: 5cqw; top: 24cqw; width: 54cqw; height: 70.2cqw; transform-style: preserve-3d; transform: rotateY(-26deg) rotateX(5deg); }
.caixa-frente, .caixa-lado { position: absolute; top: 0; height: 100%; backface-visibility: hidden; }
.caixa-frente { left: 0; width: 100%; transform: translateZ(7.56cqw); box-shadow: -26px 40px 60px -30px #2d2520a6, inset 0 0 0 1px #f3eae014; }
.caixa-lado { left: calc(50% - 7.56cqw); width: 15.12cqw; transform: rotateY(90deg) translateZ(27cqw); filter: brightness(.82); }
.produto.in .produto-caixa { animation: produto-flutua 9s ease-in-out .8s infinite; }
@keyframes produto-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.ticket { position: relative; width: min(100%, 520px); background: var(--papel); color: var(--tinta); border: 1px solid var(--fio); border-radius: 0 40px 0 40px; box-shadow: 0 50px 90px -60px #2d2520; text-align: left;
  --fg: var(--tinta); --fg-2: var(--tinta-2); --fg-3: var(--tinta-3); --fio-c: var(--fio); --btn-bg: var(--cafe); --btn-fg: var(--linho); }
.ticket-itens { padding: 32px 40px 24px; }
.ticket-itens li { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--fio); color: var(--tinta-2); }
/* check em cada item, o mesmo da lista "Este curso é para você se" */
.ticket-itens li span { position: relative; padding-left: 30px; }
.ticket-itens li span::before { content: ""; position: absolute; left: 0; top: calc(.75em - 9px); width: 18px; height: 18px; background: var(--tinta); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm5.2 7.6-6.4 7.2-4-3.6 1.1-1.2 2.8 2.5 5.3-6 1.2 1.1Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22Zm5.2 7.6-6.4 7.2-4-3.6 1.1-1.2 2.8 2.5 5.3-6 1.2 1.1Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ticket-itens b { flex: none; font-weight: 600; color: var(--tinta); }
/* grupo dos bônus: o valor riscado antes do "incluso" */
.ticket-itens .ticket-grupo { display: block; padding: 20px 0 8px; border-bottom: 0; font-size: max(11px, var(--fs-eyebrow)); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--argila-escura); }
.ticket-itens .ticket-bonus b { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.ticket-itens .ticket-bonus s { font-weight: 400; font-size: .92em; color: var(--tinta-3); font-variant-numeric: lining-nums; }
.ticket-corte { position: relative; height: 0; border-top: 1px dashed var(--argila); margin: 0 40px; }
.ticket-corte::before, .ticket-corte::after { content: ""; position: absolute; top: -14px; width: 28px; height: 28px; border-radius: 50%; background: var(--linho); border: 1px solid var(--fio); }
.ticket-corte::before { left: -55px; clip-path: inset(0 0 0 50%); }
.ticket-corte::after { right: -55px; clip-path: inset(0 50% 0 0); }
.ticket-preco { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 6px; padding: 28px 40px 36px; text-align: center; }
/* preço: Basic Sans com algarismos alinhados (a Fino desenha números de estilo antigo, que dificultam a leitura) */
.preco-de { font-size: max(15px, var(--fs-support)); color: var(--tinta-3); }
.preco-de s { text-decoration-thickness: 1.5px; text-decoration-color: var(--argila-escura); }
.preco { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 4px; font-family: var(--font-text); color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }
.preco-moeda { margin-top: .5em; font-size: clamp(20px, .8vw + 14px, 26px); font-weight: 500; color: var(--tinta-2); }
.preco b { font-weight: 600; font-size: clamp(64px, 3.2vw + 40px, 92px); line-height: .92; letter-spacing: -.035em; }
.preco-vista { align-self: flex-end; margin-bottom: .45em; font-size: var(--fs-lead); color: var(--tinta-3); }
.ticket .btn { margin-top: 18px; width: 100%; }
.ticket .btn-txt { flex: 1; padding-right: 20px; text-align: center; }
.pagamentos { display: block; width: min(100%, 400px); height: auto; margin: 10px auto 0; }
.ticket-seguro { margin-top: 10px; font-size: 11px; letter-spacing: .12em; white-space: nowrap; text-transform: uppercase; line-height: 1.6; color: var(--tinta-3); }

/* ---------- 15 garantia: medalha com borda recortada, anel de texto que gira devagar e o 7 ao centro ---------- */
/* selo, título e texto empilhados no eixo (pedido do cliente) */
.garantia-grade { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: clamp(26px, 3vw, 38px); max-width: 720px; margin-inline: auto; text-align: center; }
.garantia-grade .titulo { margin-inline: auto; }
.garantia .lead { max-width: 34em; margin-inline: auto; text-wrap: balance; }
/* o miolo (7, DIAS e GARANTIA) usa unidades do próprio selo (cqw): mantém a proporção do anel em qualquer tamanho */
.selo-garantia { position: relative; width: 248px; aspect-ratio: 1; container-type: inline-size; filter: drop-shadow(0 30px 40px #2d252055); }
.selo-medalha { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.selo-recorte { fill: url(#selo-borda); }
.selo-fio { fill: none; stroke: #b19d8e66; stroke-width: .8; }
.selo-marcas { fill: none; stroke: #b19d8e70; stroke-width: 4; stroke-dasharray: .8 7.47; }
.selo-anel { transform-origin: 120px 120px; }
.selo-anel text { font-family: var(--font-text); font-size: 10.5px; font-weight: 500; letter-spacing: .28em; fill: #d5ccc3; }
.selo-garantia.em-cena .selo-anel { animation: selo-gira 48s linear infinite; }
@keyframes selo-gira { to { transform: rotate(360deg); } }
.selo-mono { fill: var(--argila); }
.selo-centro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding-top: 22px; padding-top: 9cqw; }
.selo-dias { display: flex; flex-direction: column; align-items: center; font-family: var(--font-text); font-size: 13px; font-size: max(11px, 5.25cqw); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; line-height: 1; color: var(--claro-2); }
.selo-dias b { font-family: var(--font-display); font-weight: 400; font-size: 82px; font-size: 33cqw; line-height: .8; letter-spacing: 0; color: var(--linho); margin-bottom: 4px; margin-bottom: 1.6cqw; }
.selo-nome { margin-top: 6px; margin-top: 2.4cqw; font-size: 12px; font-size: max(11px, 4.85cqw); letter-spacing: .28em; text-transform: uppercase; color: var(--argila); }
.garantia .lead { margin-top: 20px; }
:root[data-scale="ampliada"] .selo-garantia .selo-anel { animation: none; }

/* ---------- 16 por que agora ---------- */
.agora-lead { max-width: 40em; margin: clamp(28px, 3vw, 40px) auto 0; text-align: center; }
.condicao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: clamp(48px, 6vw, 72px); padding: 26px 32px; border: 1px solid var(--fio-c); border-radius: 0 28px 0 28px; background: color-mix(in srgb, var(--linho) 4%, transparent); }
.condicao-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(24px, 3vw, 40px); color: var(--fg); }
.condicao { --crono-bg: var(--cafe-profundo); }
/* vagas preenchidas: rótulo em cima; embaixo a barra que enche e a porcentagem que conta (lider-agente.v1.js, VAGAS_PREENCHIDAS) */
.vagas { display: grid; gap: 7px; min-width: 0; }
.vagas-linha { display: flex; align-items: center; gap: 10px; }
.vagas-pct { flex: none; min-width: 2.6em; font-size: 14px; font-weight: 600; line-height: 1; color: var(--fg); font-variant-numeric: tabular-nums lining-nums; }
.vagas-rotulo { font-size: max(11px, var(--fs-eyebrow)); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; white-space: nowrap; color: var(--fg); }
.vagas-barra { position: relative; display: block; flex: none; width: clamp(120px, 12vw, 200px); height: 6px; overflow: hidden; border-radius: 99px; background: #f3eae01f; }
.vagas-barra i { position: absolute; inset: 0 auto 0 0; width: calc(var(--ocupacao, .82) * 100%); overflow: hidden; border-radius: inherit; background: linear-gradient(90deg, var(--argila-escura), var(--argila) 60%, var(--linho)); }
.vagas-barra i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #fff8ef99 50%, transparent); transform: translateX(-100%); animation: vagas-brilho 2.4s var(--ease) infinite; }
.js .vagas-barra i { width: 0; transition: width 1.8s var(--ease); }
.js .vagas.is-cheia .vagas-barra i { width: calc(var(--ocupacao, .82) * 100%); }
/* "Essa condição encerra em:" e o cronômetro */
.encerra { display: flex; align-items: center; gap: 14px; }
.encerra-rotulo { font-size: var(--fs-support); line-height: 1.3; white-space: nowrap; color: var(--fg-2); }
@keyframes vagas-brilho { to { transform: translateX(100%); } }
/* cronômetro HH:MM:SS: cada dígito no seu fundo (lider-agente.v1.js monta e atualiza) */
.cronometro { display: none; align-items: center; gap: 5px; font-family: var(--font-text); font-variant-numeric: tabular-nums lining-nums; }
.js .cronometro { display: inline-flex; }
.crono-grupo { display: inline-flex; gap: 3px; }
.crono-d { display: grid; place-items: center; width: 30px; height: 38px; border: 1px solid var(--fio-escuro); border-radius: 6px; background: var(--crono-bg, var(--cafe)); font-size: 20px; font-weight: 600; line-height: 1; color: var(--linho); box-shadow: inset 0 -12px 16px -14px #000; }
.crono-d.muda { animation: crono-muda .45s var(--ease); }
@keyframes crono-muda { from { transform: translateY(-4px); opacity: .35; } }
.crono-sep { font-size: 18px; font-weight: 600; color: var(--argila); }
:root[data-scale="ampliada"] .vagas-barra i { transition: none; }
:root[data-scale="ampliada"] .vagas-barra i::after, :root[data-scale="ampliada"] .crono-d.muda { animation: none; }
/* barra fixa da oferta: largura total, rótulo, condição e botão; no celular fica só a condição sobre o botão */
.barra-oferta { padding: 0; }
.barra-oferta-faixa { pointer-events: auto; position: relative; width: 100%; background: #1b1410f0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--fio-escuro); padding-bottom: env(safe-area-inset-bottom, 0px); }
.barra-oferta-faixa .notch-feixe { left: 10%; right: 10%; }
.barra-oferta-wrap { display: flex; align-items: center; gap: 12px clamp(20px, 3vw, 44px); min-height: 76px; padding-block: 12px; }
.barra-oferta-txt { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px clamp(20px, 3vw, 40px); color: var(--fg); }
.barra-oferta .btn { --btn-h: 54px; flex: none; min-width: 280px; margin-left: auto; }
/* desktop largo: vagas à esquerda, o cronômetro no centro da tela e o botão à direita */
@media (min-width: 1101px) {
  .barra-oferta-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .barra-oferta-txt { display: contents; }
  .barra-oferta-txt .vagas { justify-self: start; }
  .barra-oferta-txt .encerra { justify-self: center; }
  .barra-oferta .btn { justify-self: end; margin-left: 0; }
}

/* ---------- 17 perguntas frequentes: coluna central ---------- */
.duvidas-lista { max-width: 860px; margin: clamp(36px, 4vw, 56px) auto 0; }

/* ---------- rodapé ---------- */
.la .rodape-txt { font-size: max(11px, var(--fs-eyebrow)); letter-spacing: var(--tr-caps); text-transform: uppercase; text-align: right; text-wrap: balance; }
.rodape-aviso { max-width: 52em; margin: 0 auto 40px; font-size: max(13px, var(--fs-support)); line-height: 1.6; text-align: center; color: var(--claro-3); }

/* ---------- responsivo ---------- */
@media (max-width: 1100px) {
  .pratica-sistema, .time-invisivel { grid-template-columns: minmax(0, 1fr); }
  .estudante { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .loop-estudante { width: min(80%, 340px); }
  .estudante .texto { margin-inline: auto; }
  .galeria-janela { overflow: visible; margin-inline: calc(var(--pad) * -1); }
  .aulas { height: auto; gap: 14px; padding: 0 var(--pad) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); scrollbar-width: none; transform: none !important; }
  .aulas::-webkit-scrollbar { display: none; }
  .aula, .aula.is-ativa { flex: 0 0 min(84vw, 440px); display: flex; flex-direction: column; scroll-snap-align: start; cursor: default; box-shadow: none; }
  .aula-img { position: relative; inset: auto; aspect-ratio: 4 / 3; flex: none; }
  .aula-img img, .aula.is-ativa .aula-img img { filter: none; transform: none; object-position: 50% 50%; }
  .aula-num, .aula.is-ativa .aula-num { opacity: .8; }
  .aula-corpo, .aula.is-ativa .aula-corpo { position: static; flex: 1; padding: 22px 22px 26px; background: var(--cafe-profundo); }
  .aula-detalhe { max-height: none; opacity: 1; }
  .aula h3, .aula.is-ativa h3 { font-size: clamp(20px, 1vw + 15px, 24px); }
  .numeros-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numeros-5 > div:nth-child(4) { border-left: 0; padding-left: 0; }
  .numeros-fonte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numeros-fonte > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .encerra { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bonus-linha, .bonus-linha:nth-child(even) { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .bonus-linha:nth-child(even) .bonus-mk { order: 0; }
  .bonus-mk { width: min(100%, 720px); margin-inline: auto; }
  .bonus-txt { max-width: 40rem; margin-inline: auto; }
  .mcfa-trilha .bussola { width: clamp(170px, 22vh, 240px); }
  .mcfa-letra { font-size: clamp(110px, 15vh, 170px); }
  .mcfa-indice { gap: 12px; }
  .mcfa-indice li { font-size: 11px; letter-spacing: .14em; }
  .mcfa-indice b { font-size: 22px; }
  .mcfa-trilha .mov { grid-template-columns: 72px minmax(0, 1fr); }
  .mcfa-trilha .mov-txt { font-size: var(--fs-body); }
}
@media (max-width: 760px) {
  .marca-curso > span { font-size: 12px; letter-spacing: .18em; }
  .nav-acoes .btn-linha { padding: 0 12px; }
  .la-hero { padding-top: 24px; }
  .la-hero-marca { margin-bottom: 18px; }
  .la-hero-sub { font-size: 18px; }
  .vsl { margin-top: 22px; }
  .vsl-aviso { gap: 10px; margin-bottom: 10px; }
  .vsl-som { width: 34px; height: 34px; }
  .vsl-aviso-1 { font-size: 11.5px; letter-spacing: .1em; }
  .selos-logos { gap: 20px; }
  .hub { aspect-ratio: 360 / 380; max-width: 440px; }
  .hub-linhas-d { display: none; }
  .hub-linhas-m { display: block; }
  .hub-nucleo { top: 15.8%; width: 26.7%; }
  .hub-no { --x: 25.6%; --y: 55.3%; width: 44%; }
  .hub-no[data-no="1"] { --x: 74.4%; --y: 55.3%; }
  .hub-no[data-no="2"] { --x: 25.6%; --y: 86.8%; }
  .hub-no[data-no="3"] { --x: 74.4%; --y: 86.8%; }
  .hub-no button { gap: 8px; padding: 6px 10px 6px 6px; font-size: 11px; letter-spacing: .1em; }
  .hub-icone { width: 30px; height: 30px; }
  .hub-icone svg { width: 16px; height: 16px; }
  .hub-painel { grid-template-columns: minmax(0, 1fr); }
  .hub-painel-col + .hub-painel-col { border-left: 0; border-top: 1px solid var(--fio-escuro); }
  .logo-nvidia { width: min(150px, 38vw); }
  .logo-bilhon { width: min(150px, 35vw); }
  .bussola-fixa { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .mcfa-indice, .mcfa-letra { display: none; }
  .mcfa-trilha .bussola { width: clamp(170px, 26vh, 230px); }
  .mcfa-trilha .movimentos li { min-height: 26vh; }
  .mcfa-trilha .movimentos li:last-child { min-height: 0; }
  .bonus-linha, .bonus-linha:nth-child(even) { gap: 20px; }
  .mk-palco { aspect-ratio: 16 / 12; }
  .bonus-valor b { margin-left: 0; }
  .barra-oferta-wrap { flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; padding-block: 10px 12px; }
  .barra-oferta-txt { justify-content: space-between; gap: 12px; }
  .barra-oferta-txt .vagas { flex: 1; }
  .vagas-rotulo { font-size: 11px; letter-spacing: .08em; }
  .crono-d { width: 22px; height: 30px; font-size: 16px; border-radius: 5px; }
  .crono-sep { font-size: 15px; }
  .cronometro { gap: 3px; }
  .crono-grupo { gap: 2px; }
  .barra-oferta .btn { --btn-h: 50px; width: 100%; min-width: 0; margin: 0; }
  .barra-oferta .btn-txt { flex: 1; padding-right: 16px; text-align: center; }
  .barra-oferta-txt .vagas-barra { flex: 1 1 auto; width: auto; }
  .barra-oferta-txt .encerra { align-items: flex-end; gap: 5px; }
  .encerra-rotulo { font-size: 11px; }
  .frase-luz { padding-left: 18px; }
  .piramides { grid-template-columns: minmax(0, 1fr); }
  .inversao-texto { grid-template-columns: minmax(0, 1fr); }
  .lista-voce li { grid-template-columns: 24px minmax(0, 1fr); gap: 14px; }
  .lista-voce .check { width: 24px; height: 24px; margin-top: calc((1.55em - 24px) / 2); }
  .numeros-5, .numeros-fonte { grid-template-columns: minmax(0, 1fr); }
  .numeros-fonte > div, .numeros-fonte > div + div { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .numeros-fonte b { font-size: 56px; }
  .galeria-controles { gap: 16px; }
  .galeria-contador { font-size: 32px; }
  .seta { width: 46px; height: 46px; }
  .ticket-itens, .ticket-preco { padding-inline: 24px; }
  .ticket-seguro { font-size: clamp(8px, 2.5vw, 10.5px); letter-spacing: .05em; }
  .ticket .btn-txt { padding: 0 12px 0 calc(var(--b-blk) + var(--b-pad) + 16px); letter-spacing: .1em; white-space: nowrap; }
  .ticket-corte { margin-inline: 24px; }
  .ticket-corte::before { left: -39px; }
  .ticket-corte::after { right: -39px; }
  .oferta-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "produto" "ticket"; }
  .produto { justify-self: center; width: min(94%, 420px); }
  .oferta-grade > .ticket { justify-self: center; }
  .selo-garantia { width: min(68vw, 260px); }
  .condicao { flex-direction: column; justify-content: center; padding: 24px 20px; text-align: center; }
  .condicao-txt { flex-direction: column; align-items: center; gap: 18px; }
  .condicao .vagas { justify-items: center; }
  .condicao .encerra { align-items: center; }
  .la .rodape-base { align-items: center; text-align: center; }
  .la .rodape-txt { text-align: center; }
  .la .rodape-aviso, .la .rodape-txt, .condicao .eyebrow { text-wrap: balance; }
}
/* tablet: o pacote em cima e o ticket embaixo, os dois no eixo (lado a lado, o ticket ficava espremido e alto demais) */
@media (max-width: 1100px) and (min-width: 761px) {
  .oferta-grade { grid-template-columns: minmax(0, 1fr); grid-template-areas: "titulo" "produto" "ticket"; }
  .produto { justify-self: center; width: min(80%, 520px); }
  .oferta-grade > .ticket { justify-self: center; }
}
@media (max-width: 380px) { .ticket .btn-txt { font-size: 12px; letter-spacing: .05em; } .preco b { font-size: 58px; } }

@media (max-width: 340px) { .ticket .btn-txt { white-space: normal; } }
/* celulares estreitos (até 359 px): dígitos e textos da barra mais compactos, numa linha só */
@media (max-width: 359px) {
  .barra-oferta .vagas-rotulo { letter-spacing: .04em; }
  .barra-oferta .crono-d { width: 19px; height: 27px; font-size: 14px; }
  .barra-oferta .crono-sep { font-size: 13px; }
  .barra-oferta-txt { gap: 10px; }
  .barra-oferta .btn-txt { font-size: 12px; letter-spacing: .06em; white-space: nowrap; }
}