/* =====================================================================
   IAlfabeto — Identidade 2026 ("marca"): preto, branco e verde-besouro.
   Camada carregada DEPOIS de site.css e hud.css. Sobrescreve cores, fontes,
   botões e tira o "ruído" (grade, partículas, brilhos neon, magenta).
   ===================================================================== */
:root{
  --bg:#050506; --bg-2:#0a0b0c; --panel:#0d0e10; --panel-2:#131417;
  --fg:#f2f4f5; --muted:#8d949b;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.16);
  /* o "cyan" antigo vira o verde-besouro (todos os componentes herdam) */
  --cyan:#3fe08c; --cyan-ink:#7dffb4; --cyan-soft:rgba(63,224,140,.10); --on-cyan:#03140b;
  --mag:#e9edf0; --mag-soft:rgba(255,255,255,.06);
  --ok:#3fe08c; --warn:#ffb454; --hot:#ff5f6d; --amber:#ffb454;
  --besouro:linear-gradient(135deg,#022818 0%,#088c46 28%,#5aff96 47%,#c8ff78 55%,#14a078 66%,#033226 100%);
  --besouro-btn:linear-gradient(110deg,#2fcf7c 0%,#3fe08c 38%,#c8ff78 50%,#3fe08c 62%,#2fcf7c 100%);
  --glow:none; --glow-m:none; --r:4px; --cut:0px;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --f-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --f-tit:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
}
::selection{background:#3fe08c;color:#03140b}

/* ---------- fundo limpo (sai grade, scanline, partículas, brilho do cursor) ---------- */
body{background:var(--bg);font-family:var(--f-body)}
body::after,.bg-grid,#campo,.cursor-glow,.vt-scan{display:none!important}

/* ---------- tipografia ---------- */
h1,h2,h3,h4{font-family:var(--f-tit);font-weight:500;letter-spacing:-.025em;text-shadow:none!important}
h1{font-weight:500;letter-spacing:-.035em}
h1 em,h2 em{color:transparent;background:var(--besouro);-webkit-background-clip:text;background-clip:text;text-shadow:none!important}
.glitch::before,.glitch::after{display:none!important}
.kicker,.eyebrow,.sec-k,.statusbar,.chip,.chip-tag{font-family:var(--f-mono)}

/* ---------- menu do topo ---------- */
.top{background:rgba(5,5,6,.82)!important;backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)!important;box-shadow:none!important}
.nav a,.mais-btn{font-family:var(--f-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#b9c0c6;text-shadow:none}
.nav a:hover,.nav a[aria-current="page"],.mais-btn:hover{color:#fff}
.nav a[aria-current="page"]{box-shadow:inset 0 -1px 0 #3fe08c}
.statusbar{display:none!important}

/* ---------- botões estilo SpaceX: contorno fino, maiúsculas espaçadas, enche no hover ---------- */
.btn,.btn-mega,.nav-comece,.nav-loja,.btn-ghost{
  clip-path:none!important;border-radius:2px!important;background:transparent!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.42)!important;box-shadow:none!important;text-shadow:none!important;
  font-family:var(--f-mono)!important;font-weight:500!important;text-transform:uppercase;letter-spacing:.16em!important;
  position:relative;overflow:hidden;isolation:isolate;transition:color .25s,border-color .25s}
.btn::before,.btn-mega::before,.nav-comece::before,.nav-loja::before,.btn-ghost::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--besouro-btn);background-size:250% 100%;
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.btn:hover::before,.btn-mega:hover::before,.nav-comece:hover::before,.nav-loja:hover::before,.btn-ghost:hover::before{transform:scaleX(1);animation:bes-corre 2.4s linear infinite}
.btn:hover,.btn-mega:hover,.nav-comece:hover,.nav-loja:hover,.btn-ghost:hover{color:#03140b!important;border-color:#5aff96!important}
@keyframes bes-corre{from{background-position:100% 0}to{background-position:-150% 0}}
.btn::after,.btn-mega::after{display:none!important}
/* botão principal (Comece aqui) já vem cheio */
.nav-comece{border-color:#3fe08c!important}
.nav-comece::before{transform:scaleX(1)}
.nav-comece{color:#03140b!important}
.nav-comece::before{animation:bes-corre 5s linear infinite}

/* ---------- cartões e painéis: sem neon, só linha fina ---------- */
.card,.hud-panel,.radar-card,.ap-card,.mais-card,.drawer,.login-box{border-radius:6px!important;border:1px solid var(--line)!important;background:var(--panel)!important;box-shadow:none!important}
.card:hover{border-color:var(--line-2)!important;transform:translateY(-2px)}
.hud-panel::before,.card::before,.card::after{display:none!important}
.hud-panel .bar i{background:var(--besouro)!important;box-shadow:none!important}
.hud-panel .row b{text-shadow:none!important}
.chip{border-radius:999px!important;background:transparent!important;box-shadow:none!important}
.chip[aria-pressed="true"],.chip.on{background:#f2f4f5!important;color:#050506!important;border-color:#f2f4f5!important}
.chip-tag{border-radius:999px!important;background:transparent!important;border-color:var(--line-2)!important;color:#c9d0d6}

/* ---------- faixas rolando: discretas, monocromáticas ---------- */
.ticker{background:var(--bg)!important;border-bottom:1px solid var(--line)!important}
.ticker *{text-shadow:none!important}

/* ---------- ícones flutuando e enfeites "HUD" ---------- */
.hero-hud .floor,.rings,.robo{display:none!important}
.hero-hud::after{background:radial-gradient(70% 70% at 70% 45%,transparent 30%,var(--bg) 92%)}

/* ---------- texto das matérias e aulas ---------- */
.prose,.materia,.artigo,.ap-texto{font-family:var(--f-body);font-size:1.075rem;line-height:1.72;color:#dfe3e6}
.prose a,.materia a{color:#7dffb4;text-decoration-color:rgba(125,255,180,.35)}

@media (prefers-reduced-motion:reduce){.btn::before,.btn-mega::before,.nav-comece::before{animation:none!important}}

/* ---------- topo: logo no centro, box "invisível" (some no fundo, aparece no hover) ---------- */
.top>.wrap{display:grid!important;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:1.2rem}
.top .logo{grid-column:2;grid-row:1;justify-self:center}
.top .nav{grid-column:1;grid-row:1;justify-self:start;min-width:0}
.top .acoes{grid-column:3;grid-row:1;justify-self:end}
.top .wm-box>rect:first-of-type{fill:transparent;stroke:transparent;transition:stroke .3s,fill .3s}
.top .logo:hover .wm-box>rect:first-of-type{fill:#000;stroke:#282c32}
.top .logo .wm-box{height:40px}
.sec-upd{color:var(--muted);letter-spacing:.08em}
.ticker .upd b,.priceline .pl-dt b{color:#fff;font-weight:500}

/* ---------- HERO com o planeta (estilo SpaceX: tela cheia, texto à esquerda) ---------- */
.hero-planeta{min-height:min(88vh,820px)!important;align-items:flex-end!important;background:#000}
.hero-planeta .hp-fundo{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-planeta .hp-img,.hero-planeta .hp-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.hero-planeta .hp-vid{opacity:0;transition:opacity 1.2s ease}
.hero-planeta .hp-vid.on{opacity:1}
.hero-planeta::after{background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 62%),linear-gradient(0deg,var(--bg) 0%,transparent 28%)!important}
.hero-planeta .wrap{display:block!important;padding-bottom:clamp(2.5rem,7vh,5rem)!important}
.hero-planeta .hp-txt{max-width:640px}
.hero-planeta h1{font-size:clamp(2.6rem,6.4vw,5.4rem)!important;line-height:.95!important;text-transform:uppercase;font-weight:500!important;letter-spacing:-.03em}
@media (max-width:760px){.hero-planeta{min-height:92vh!important}.hero-planeta .hp-img,.hero-planeta .hp-vid{object-position:78% 30%}
  .hero-planeta::after{background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.1) 75%)!important}}

/* faixa de números (o antigo painel), logo abaixo do hero */
.painel-faixa{border-bottom:1px solid var(--line);background:var(--bg)}
.painel-faixa .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,1.6fr);gap:0}
.pf-n{padding:1.6rem 1.2rem;border-right:1px solid var(--line)}
.pf-n:first-child{padding-left:0}
.pf-n b{display:block;font:500 clamp(1.8rem,3.2vw,2.6rem)/1 var(--f-tit);letter-spacing:-.03em;color:#fff}
.pf-n span{display:block;margin-top:.45rem;font:500 .7rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pf-log{padding:1.3rem 0 1.2rem 1.4rem;min-width:0}
.pf-log .cmd{margin:0 0 .5rem}
.pf-log .log{height:4.6em;overflow:hidden;font:400 .78rem/1.55 var(--f-mono);color:#7dffb4}
.pf-log .log p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.painel-faixa .wrap{grid-template-columns:repeat(2,1fr)}.pf-n{padding:1.1rem .9rem}.pf-n:nth-child(2n){border-right:0}.pf-n:nth-child(3){padding-left:0}.pf-log{grid-column:1/-1;padding-left:0;border-top:1px solid var(--line)}}

/* ---------- botões de destaque: Comece aqui (verde cheio) e Produtos (branco cheio) ---------- */
.btn-mega{background:var(--besouro-btn)!important;background-size:250% 100%!important;animation:bes-corre 5s linear infinite;border-color:#5aff96!important;color:#03140b!important;padding:1rem 1.6rem!important}
.btn-mega::before{display:none}
.btn-mega .bm-top{color:#0b3a22!important;opacity:.85}
.btn-mega .bm-main{color:#03140b!important;font-family:var(--f-tit)!important;font-weight:600!important;letter-spacing:.06em}
.btn-mega:hover{filter:brightness(1.08);transform:translateY(-1px)}
.nav-loja{background:#f2f4f5!important;color:#050506!important;border-color:#f2f4f5!important}
.nav-loja::before{background:var(--besouro-btn)}
.nav-loja:hover{color:#03140b!important}

/* ---------- glitch sutil: títulos de vez em quando, imagens no hover ---------- */
[data-glitch],.page-head h1,.sec-head h2{animation:tit-glitch 9s steps(1) infinite}
.sec-head h2{animation-delay:-3s}
@keyframes tit-glitch{
  0%,96.4%,100%{text-shadow:none;transform:none}
  96.6%{text-shadow:-2px 0 rgba(63,224,140,.85),2px 0 rgba(255,255,255,.55);transform:translateX(1px)}
  97.0%{text-shadow:2px 0 rgba(63,224,140,.85),-2px 0 rgba(255,255,255,.4);transform:translateX(-1px) skewX(-2deg)}
  97.4%{text-shadow:-1px 0 rgba(63,224,140,.6);transform:none}}
.card img,.thumb img,.capa img{transition:filter .25s}
.card:hover img,.thumb:hover img{animation:img-glitch .42s steps(2) 1}
@keyframes img-glitch{0%{filter:none;transform:none}25%{filter:hue-rotate(40deg) saturate(1.4);transform:translateX(-2px)}50%{filter:contrast(1.25);transform:translateX(2px)}75%{filter:hue-rotate(-30deg);transform:none}100%{filter:none}}

/* ---------- transição entre páginas: corte rápido com varredura verde ---------- */
::view-transition-old(root){animation:vt-sai .22s steps(3) both!important}
::view-transition-new(root){animation:vt-entra .42s cubic-bezier(.2,.8,.2,1) both!important}
@keyframes vt-sai{0%{opacity:1;clip-path:inset(0)}50%{opacity:.6;clip-path:inset(0 0 40% 0);transform:translateX(-6px)}100%{opacity:0;clip-path:inset(0 0 100% 0)}}
@keyframes vt-entra{0%{opacity:0;clip-path:inset(100% 0 0 0);filter:brightness(1.6) hue-rotate(20deg)}60%{opacity:1;clip-path:inset(0 0 0 0);filter:brightness(1.15)}100%{opacity:1;filter:none}}

@media (prefers-reduced-motion:reduce){[data-glitch],.page-head h1,.sec-head h2,.btn-mega{animation:none!important}.card:hover img{animation:none}}
.sec-head .cmd{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-loja,.nav-comece{white-space:nowrap}
@media (max-width:1020px){
  .top>.wrap{display:flex!important;align-items:center;gap:.5rem}
  .top .logo{margin-right:auto}
  .acoes .nav-loja{letter-spacing:.1em!important;padding:.55rem .7rem!important;font-size:.66rem!important}
}
@media (max-width:420px){.sec-upd{display:none}}
.page-head{background:none!important}
.page-head::before,.page-head::after{display:none!important}
.home-cmp{background:var(--panel)!important;border-color:var(--line)!important}
.home-cmp-logos span{color:#fff!important;text-shadow:none!important}
/* Produtos: tecla preta com letra verde (pedido do Rodolfo) */
.nav-loja{background:#000!important;color:#3fe08c!important;border-color:#3fe08c!important}
.nav-loja:hover{color:#03140b!important}

/* ===== Páginas internas (identidade nova) ===== */
.page-head .glow{background:radial-gradient(circle at 70% 40%,rgba(63,224,140,.07),transparent 60%)!important}
.page-head h1,.article h1,.aula h1{text-shadow:none!important;font-family:var(--f-sans);font-weight:500}
.sx-h2,.sec-head h2{font-family:var(--f-sans)!important;font-weight:500!important;letter-spacing:.01em}
.box{background:#0a0b0d!important;border:1px solid #1d2125!important;box-shadow:none!important}
.box h3{font-family:var(--f-mono);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem!important;color:#9aa3ab!important}
.box h3::before{content:""!important}
.li .t,.aside .li .t{font-family:var(--f-sans)!important;font-weight:500}
.ap-video{border-color:#1d2125!important;box-shadow:none!important}
.aula .h-aula,.prose h2,.prose h3{border-left-color:#3fe08c!important;font-family:var(--f-sans);font-weight:500}
.autor-ini{border-color:#3fe08c!important;color:#3fe08c!important;box-shadow:none!important}
.cp-concl{border-left-color:#3fe08c!important;background:rgba(63,224,140,.04)!important}
/* Loja e comparativo na identidade nova */
.sx-h1,.sx-h2,.sx-g h3,.cp-h1,.sx-preco{font-family:var(--f-sans)!important;font-weight:500!important}
.cp-h1 .cyan,.cp-h1 .mag{text-shadow:none!important}
.sx-fundo i:nth-child(1){background:radial-gradient(circle,rgba(63,224,140,.10),transparent 62%)!important}
.sx-fundo i:nth-child(2){background:radial-gradient(circle,rgba(255,255,255,.04),transparent 62%)!important}
.sx-fundo i:nth-child(3){background:radial-gradient(circle,rgba(20,160,120,.08),transparent 62%)!important}
.sx-fundo::after{display:none}
.sx-buy{background:var(--besouro-btn)!important;background-size:250% 100%!important;color:#03140b!important;box-shadow:none!important;animation:bes-corre 4s linear infinite!important}
.sx-buy::before{border-color:rgba(63,224,140,.6)!important}
.sx-buy-p{background:#000!important;color:#3fe08c!important}
.sx-buy:hover{box-shadow:0 0 36px rgba(63,224,140,.45)!important}

/* Botões verdes = verde-besouro METÁLICO escuro com faixa de luz passando (pedido do Rodolfo, 06/11) */
:root{--besouro-btn:linear-gradient(110deg,#032a19 0%,#06582f 18%,#0c8a49 32%,#1fb866 41%,#9dffc4 47%,#f0ffe0 50%,#9dffc4 53%,#1fb866 59%,#0c8a49 68%,#06582f 82%,#032a19 100%)}
.btn-mega,.sx-buy,.nav-comece::before,.btn::before,.btn-ghost::before,.nav-loja::before{background-size:320% 100%!important}
.btn-mega,.sx-buy-t,.nav-comece,
.btn:hover,.btn-mega:hover,.nav-comece:hover,.btn-ghost:hover,.nav-loja:hover{color:#f2fff6!important;text-shadow:0 1px 2px rgba(0,0,0,.65)}
.btn-mega .bm-main{color:#f2fff6!important}.btn-mega .bm-top{color:#bff5d6!important;opacity:.9}
.btn-mega,.nav-comece,.sx-buy{border-color:#2fcf7c!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.5)}
.sx-buy{animation:bes-corre 3.2s linear infinite!important}
.nav-comece::before{animation-duration:3.6s!important}
.btn-mega{animation-duration:3.6s!important}

/* Produtos pulsando (chama o olho pra loja) */
.nav-loja{animation:loja-pulsa 2.2s ease-out infinite}
@keyframes loja-pulsa{0%{box-shadow:0 0 0 0 rgba(63,224,140,.55)}70%{box-shadow:0 0 0 9px rgba(63,224,140,0)}100%{box-shadow:0 0 0 0 rgba(63,224,140,0)}}
.sx-buy::before{animation:sxPulse 1.8s ease-out infinite!important;border-color:rgba(63,224,140,.75)!important}
@media (prefers-reduced-motion:reduce){.nav-loja,.sx-buy{animation:none!important}}