/* ══════════════════════════════════════════════════════════════════════
   EKIM VFX — componentes exclusivos da página de vendas (/formacao/)
   Carregada SÓ por essa página. Não entra no base.css porque a captura é
   a página com LCP crítico e não usa nada disto.
   Tudo aqui usa os tokens e componentes de base.css (.wrap, .btn, .card,
   .eyebrow, .rv, .faq-list, .node-tile...) — isto é só o que falta.
   ══════════════════════════════════════════════════════════════════════ */

/* ── topo: o mesmo .bar da casa, com CTA em vez de nota ───────────── */
.bar .btn{width:auto;padding:9px 18px;font-size:13px;font-weight:500}
.btn-inline{width:auto}

/* ── hero cinematográfico ──────────────────────────────────────────
   Difere do hero da captura de propósito: lá o herói é a arte com
   tipografia (não pode ser recortada); aqui é reel em movimento, que
   aceita object-fit:cover sem perder informação. */
/* min() em vez de 100svh puro: em monitor vertical alto (ou em captura de
   página inteira) o hero esticaria sem limite. O teto também deixa a
   próxima seção espiar, o que puxa o scroll. */
.vd-hero{position:relative;min-height:min(100svh,860px);display:flex;align-items:flex-end;padding-bottom:clamp(56px,9vh,100px);overflow:hidden}
.vd-hero-media{position:absolute;inset:0;z-index:0;background:var(--bg-brand)}
.vd-hero-media video{width:100%;height:100%;object-fit:cover;opacity:.68}
/* Corrigido em 31/07/2026: a primeira correção de contraste (WCAG, ver
   commit anterior) resolveu a leitura do texto subindo a opacidade do
   scrim em TODA a altura do hero (mínimo .78) — só que isso também abafa
   o vídeo onde não tem texto nenhum, que é a maior parte da tela. Gradiente
   agora fica opaco só na faixa de baixo (onde o texto mora, .vd-hero é
   align-items:flex-end) e some de verdade acima disso — vídeo visível,
   texto ainda em ≥4.5:1 (recalculado, ver leitura abaixo). */
.vd-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.86) 30%,rgba(0,0,0,.4) 58%,transparent 82%)}
.vd-hero .wrap{position:relative;z-index:2;width:100%}
.vd-hero h1{max-width:15ch;font-size:clamp(36px,6vw,72px);line-height:1.04}
.vd-hero h1 em{font-style:normal;color:inherit}
.vd-hero .lead{margin:24px 0 34px;max-width:52ch;color:#C4C4CE}
/* par de CTAs do hero: compra + âncora interna. Sem componente novo —
   é o .btn/.btn.ghost da casa em largura automática. */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* specs em régua, não bolinha decorativa — mesma regra do resto do site */
.hero-meta,.spec-row{display:flex;flex-wrap:wrap;font-size:13.5px;color:#A8A8B2}
.hero-meta{gap:8px 24px;margin-top:32px}
.spec-row{gap:8px 26px;margin-top:52px;padding-top:24px;border-top:1px solid var(--line)}
.hero-meta span:not(:last-child)::after,.spec-row span:not(:last-child)::after{content:"·";margin-left:22px;color:var(--faint)}

/* ── diagnóstico ──────────────────────────────────────────────────── */
.diag-grid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:52px}
.diag-cell{padding:34px 32px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .4s}
.diag-cell:hover{background:var(--bg-raise)}
.diag-cell .num{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.12em;margin-bottom:14px;display:block;transition:color .3s}
.diag-cell:hover .num{color:var(--accent)}
.diag-cell p{font-size:16px;color:#B6B6C0;line-height:1.62;max-width:38ch}
.diag-close{margin-top:50px;padding-left:20px;border-left:2px solid var(--accent);font-size:clamp(17px,1.9vw,20px);line-height:1.55;max-width:56ch;color:var(--text)}
@media(max-width:680px){ .diag-grid{grid-template-columns:1fr} .diag-cell{padding:26px 22px} }

/* ── BREAKDOWN — a peça-assinatura ────────────────────────────────
   Trilho horizontal de nós + viewport. A semântica é a real do Houdini:
   clicar num nó move o DISPLAY FLAG pra ele, e por isso tudo que está
   ACIMA na cadeia aparece cozinhado (laranja) — exibir o nó 4 exige que
   1, 2 e 3 tenham sido avaliados. O viewport abaixo mostra a saída. */
.node-rail{display:flex;align-items:flex-start;gap:0;margin:50px 0 30px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin}
.node-rail::-webkit-scrollbar{height:3px}
.node-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:var(--r-xs)}
.rail-node{position:relative;flex:1;min-width:126px;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding-right:24px;text-align:left}
.rail-node:last-child{padding-right:0}
.rail-node:not(:last-child)::after{content:"";position:absolute;left:calc(100% - 24px);top:10px;width:24px;height:1px;background:#3A3A44;transition:background .25s}
.rail-tile{position:relative;width:100%;min-width:84px;height:21px;border-radius:var(--r-xs);background:#45454E;border:1px solid rgba(0,0,0,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transition:background .25s}
.rail-tile::before{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:8px;border-radius:2px 0 0 2px;background:#2E2E36;transition:background .25s}
.rail-tile::after{content:"";position:absolute;right:1px;top:1px;bottom:1px;width:0;border-radius:0 2px 2px 0;background:var(--state);transition:width .25s}
.rail-idx{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--dim);transition:color .25s}
.rail-name{font-family:var(--mono);font-size:12px;color:var(--dim);transition:color .25s}
/* já cozinhou: upstream do nó exibido */
.rail-node.cooked .rail-tile{background:#9A9AA2}
.rail-node.cooked .rail-tile::before{background:var(--accent)}
.rail-node.cooked:not(:last-child)::after{background:var(--accent)}
.rail-node.cooked .rail-name{color:#C8C8D2}
.rail-node.cooked .rail-idx{color:var(--accent)}
/* o nó exibido recebe a display flag azul */
.rail-node.on .rail-tile::after{width:8px}
.rail-node.on .rail-name{color:var(--text)}
.rail-node:hover .rail-tile{background:#B4B4BC}

/* 16/9 e não 16/8.4 — 01/08/2026 (vistoria, P1-3). Todos os seis clipes de
   breakdown são 1920x1080 (medido). Com object-fit:cover numa moldura de
   16/8.4 (=1,905), a fração visível era 1,778/1,905 = 93,3%: 6,7% da altura
   de cada render cortada fora. Enquadramento é o ofício de quem lê esta
   página. `contain` resolveria sem mexer na proporção, mas deixaria tarja
   preta — mostrar o frame inteiro é melhor que emoldurar o corte.
   Fundo: era #0A0A0D, resíduo da paleta #08080A abandonada em 31/07/2026 —
   20 níveis de luminância MAIS ESCURO que o preto dos próprios clipes que
   ele emoldura (p05 medido = 36-37, ≈ #242424). Agora --bg-raise, que é
   onde esses pretos assentam em vez de flutuar. */
.viewport{position:relative;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-raise);overflow:hidden}
.viewport .vp-hud{position:absolute;top:13px;left:15px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.viewport .vp-hud b{color:var(--accent);font-weight:500}
.grid-bg{position:absolute;inset:0;opacity:.45;background-image:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:52px 52px}
.stage{position:absolute;inset:0;opacity:0;transition:opacity .5s ease}
.stage.on{opacity:1}
.stage video{width:100%;height:100%;object-fit:cover}
.stage .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#3A3A44;text-transform:uppercase;text-align:center;padding:20px}
.stage-cap{margin-top:20px;font-size:15.5px;color:#B0B0BA;max-width:62ch;line-height:1.62;min-height:50px}

/* ── FORMAÇÃO — espinha de nós, uma fase por nó ───────────────────
   <details> nativo em vez de acordeão em JS: acessível, sem script e
   igual ao FAQ do resto do site. */
.spine{margin-top:50px}
.phase{position:relative;padding-left:44px;border-left:1px solid var(--line)}
.phase:last-child{border-left-color:transparent}
.phase::before{content:"";position:absolute;left:-4.5px;top:32px;width:8px;height:8px;border-radius:50%;background:var(--bg);border:1px solid #33333D;transition:background .3s,border-color .3s,box-shadow .3s}
.phase[open]::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-dim)}
.phase summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:24px;padding:26px 0}
.phase summary::-webkit-details-marker{display:none}
.phase-tag{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--dim);padding-top:5px;min-width:62px;flex-shrink:0;transition:color .3s}
.phase[open] .phase-tag{color:var(--accent)}
.phase-body{flex:1}
.phase-body h3{margin-bottom:8px;font-size:clamp(18px,2vw,23px)}
.phase-body .sum{display:block;font-size:15px;color:var(--muted);line-height:1.6;max-width:62ch}
.phase-chev{margin-top:7px;color:var(--dim);flex-shrink:0;transition:transform .35s cubic-bezier(.2,.7,.3,1),color .3s}
.phase[open] .phase-chev{transform:rotate(180deg);color:var(--accent)}
.phase-detail{padding:0 0 32px}
.outcome{font-size:14px;color:#C0C0CA;padding:13px 16px;border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--bg-raise);margin-bottom:20px;line-height:1.6}
/* 16/9 e não 16/7 — 01/08/2026 (vistoria, P1-3). O pior corte do site: os
   timelapses de fase são 1920x1080 e a moldura era 16/7 (=2,286), o que com
   object-fit:cover deixava visível 1,778/2,286 = 77,8% — 22,2% da altura de
   cada render fora da tela, na seção que apresenta as cinco fases de uma
   formação de R$ 1.200. */
.phase-media{aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--bg-raise);position:relative}
.phase-media video{width:100%;height:100%;object-fit:cover}
.phase-media .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;color:#3A3A44;letter-spacing:.13em}
@media(max-width:680px){
  .phase{padding-left:26px}
  .phase summary{gap:14px;flex-wrap:wrap;padding:20px 0}
  .phase-tag{min-width:auto;padding-top:0}
}

/* ── OFERTA — âncora de custo + cartão de preço ───────────────────
   A âncora substitui o "de R$ X por R$ Y": mantém a referência numérica
   sem inventar um preço cheio que nunca foi praticado. */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.anchor-list{border-top:1px solid var(--line)}
.anchor-item{padding:20px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;align-items:baseline}
.anchor-item .lbl{font-size:15px;color:var(--muted);max-width:30ch;line-height:1.5}
.anchor-item .val{font-family:var(--mono);font-size:14px;color:#C8C8D2;white-space:nowrap}
/* .price-val, .price-inst, .incl e .secure MUDARAM PARA base.css:
   a oferta deixou de ser exclusiva desta página quando o fim da aula 6
   virou um bloco de oferta completo. O motivo que os mantinha aqui ("só a
   /formacao/ usa") deixou de valer — e duplicar regra de preço em duas
   folhas é como o R$ 1.497 diverge de si mesmo na primeira alteração. */
@media(max-width:960px){ .offer{grid-template-columns:1fr;gap:40px} }

/* ── garantia ─────────────────────────────────────────────────────── */
.guar{border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:0 var(--r-md) var(--r-md) 0;padding:40px 36px;background:var(--bg-raise);max-width:760px}
.guar h3{margin-bottom:16px;font-size:clamp(19px,2.2vw,24px)}
.guar p{font-size:15.5px;color:#B2B2BC;line-height:1.65;margin-bottom:14px;max-width:64ch}
.guar p:last-child{margin-bottom:0}
@media(max-width:680px){ .guar{padding:28px 22px} }

/* ── fechamento ───────────────────────────────────────────────────
   Sem glow radial: mancha de gradiente é assinatura de landing genérica
   e foi retirada de todo o resto do site pelo mesmo motivo. */
.close-sec{text-align:center;padding:clamp(80px,10vw,130px) 0}
.close-sec h2{max-width:20ch;margin:0 auto 38px}
.close-sec h2 em{font-style:normal;color:inherit}

/* ── captura de recuperação (só para quem ainda não é lead) ───────── */
.capture{border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-raise);padding:46px 40px;display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center}
.capture .tag{font-size:12.5px;font-weight:500;color:var(--accent);border-left:2px solid var(--accent);padding-left:10px;margin-bottom:18px;display:inline-block}
.capture h3{font-size:clamp(21px,2.6vw,29px);margin-bottom:14px;line-height:1.18}
.capture>div>p{font-size:15.5px;color:var(--muted);line-height:1.62;max-width:44ch}
.cap-list{list-style:none;margin-top:20px;display:flex;flex-direction:column}
.cap-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#A8A8B2;padding:5px 0}
.cap-list svg{flex-shrink:0;margin-top:4px;color:var(--accent)}
.capture .done{text-align:left}
@media(max-width:960px){ .capture{grid-template-columns:1fr;gap:34px;padding:34px 26px} }