
:root { --bg:#04080f; --bg2:#08111f; --panel:rgb(13 24 40 / .62); --line:rgb(120 200 255 / .14); --text:#eef5fb; --muted:#9fb1c2;
  --neon:#3ee6ff; --neon2:#8b7bff; --neon3:#3dffa8; --mono:'JetBrains Mono', ui-monospace, Consolas, monospace; --head:'Space Grotesk', 'DM Sans', sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.65 'DM Sans',system-ui,sans-serif; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background: radial-gradient(40% 35% at 85% 0%, rgb(62 230 255 / .10), transparent 70%), radial-gradient(35% 35% at 0% 40%, rgb(139 123 255 / .09), transparent 70%), radial-gradient(40% 40% at 60% 100%, rgb(61 255 168 / .06), transparent 70%); }
body::after { content:''; position:fixed; inset:-50% 0 0; z-index:-1; pointer-events:none; opacity:.55;
  background-image: linear-gradient(rgb(120 200 255 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(120 200 255 / .045) 1px, transparent 1px);
  background-size: 44px 44px; animation: grade 22s linear infinite; mask-image: linear-gradient(180deg, transparent, #000 20%, #000 70%, transparent); }
@keyframes grade { to { transform: translateY(44px); } }
a { color:var(--neon); }
.wrap { max-width:1140px; margin:0 auto; padding:0 16px; }
.topo { position:sticky; top:0; z-index:20; background:rgb(4 8 15 / .72); backdrop-filter:blur(14px) saturate(140%); }
.topo::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg, transparent, var(--neon), var(--neon2), transparent); opacity:.6; }
.topo .wrap { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:66px; }
.marca { display:inline-flex; gap:10px; align-items:center; text-decoration:none; color:var(--text); font:700 18px var(--head); letter-spacing:.01em; }
.marca span { font-family:var(--mono); color:var(--neon); text-shadow:0 0 12px var(--neon); }
.marca i { width:8px; height:16px; background:var(--neon); display:inline-block; margin-left:-4px; animation:cursor 1s steps(1) infinite; box-shadow:0 0 10px var(--neon); }
@keyframes cursor { 50% { opacity:0; } }
nav ul { list-style:none; display:flex; gap:2px; margin:0; padding:0; }
nav a { display:block; padding:8px 13px; border-radius:8px; text-decoration:none; color:var(--muted); font:500 14px var(--mono); letter-spacing:.02em; transition:color .2s, background .2s; }
nav a:hover { color:var(--text); background:rgb(62 230 255 / .08); }
nav a[aria-current="page"] { color:var(--neon); background:rgb(62 230 255 / .10); box-shadow:inset 0 0 0 1px rgb(62 230 255 / .35), 0 0 18px rgb(62 230 255 / .15); }
.menu-btn { display:none; background:none; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px 12px; font:600 13px var(--mono); }
.hero { position:relative; overflow:hidden; padding:64px 0 56px; border-bottom:1px solid var(--line); }
.hero canvas.particulas { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.85; }
.hero::after { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:repeating-linear-gradient(180deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 3px); }
.hero .wrap { position:relative; z-index:1; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:40px; align-items:center; }
.migalha { font:13px var(--mono); color:var(--muted); margin-bottom:12px; } .migalha a { color:var(--muted); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; color:var(--neon); font:600 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.eyebrow::before { content:'//'; color:var(--neon2); }
h1 { font:700 clamp(32px,5.2vw,58px)/1.04 var(--head); letter-spacing:-.035em; margin:14px 0 16px; }
h1 em { font-style:normal; background:linear-gradient(90deg, var(--neon), var(--neon2), var(--neon3), var(--neon)); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:brilho 8s linear infinite; }
@keyframes brilho { to { background-position:300% 0; } }
h2 { font:700 clamp(24px,3.4vw,34px)/1.15 var(--head); letter-spacing:-.02em; margin:8px 0 12px; }
h3 { font:700 20px/1.3 var(--head); margin:0 0 8px; }
.lead { color:var(--muted); font-size:18px; max-width:62ch; margin:0; }
.autor { margin:18px 0 0; color:var(--muted); font-size:14px; font-family:var(--mono); } .autor b { color:var(--text); }
.botao { position:relative; overflow:hidden; display:inline-flex; gap:10px; align-items:center; padding:13px 22px; border-radius:10px; text-decoration:none; font:700 15px var(--head);
  color:#03121a; background:linear-gradient(135deg, var(--neon), #6ff2ff); box-shadow:0 0 0 1px rgb(62 230 255 / .6), 0 10px 30px -10px rgb(62 230 255 / .8); transition:transform .2s, box-shadow .2s; }
.botao::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(100deg, transparent, rgb(255 255 255 / .55), transparent); transform:skewX(-20deg); animation:varre 3.5s ease-in-out infinite; }
@keyframes varre { 0%, 60% { left:-60%; } 100% { left:130%; } }
.botao:hover { transform:translateY(-2px); box-shadow:0 0 0 1px var(--neon), 0 14px 40px -10px rgb(62 230 255 / .95); }
.botao.sec { color:var(--neon); background:rgb(62 230 255 / .06); box-shadow:inset 0 0 0 1.5px rgb(62 230 255 / .7); }
.botao.sec::after { display:none; }
.acoes { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.terminal { position:relative; border-radius:16px; background:rgb(3 8 16 / .86); border:1px solid rgb(62 230 255 / .35); box-shadow:0 0 0 1px rgb(139 123 255 / .15), 0 30px 80px -30px rgb(62 230 255 / .55); overflow:hidden; font:13.5px/1.7 var(--mono); }
.terminal .barra { display:flex; gap:7px; align-items:center; padding:10px 14px; border-bottom:1px solid var(--line); background:rgb(255 255 255 / .03); color:var(--muted); font-size:12px; }
.terminal .barra i { width:11px; height:11px; border-radius:50%; background:#ff5f57; } .terminal .barra i:nth-child(2) { background:#febc2e; } .terminal .barra i:nth-child(3) { background:#28c840; margin-right:8px; }
.terminal pre { margin:0; padding:16px 18px 20px; min-height:250px; white-space:pre-wrap; color:#cfe9f2; font:inherit; }
.terminal .p { color:var(--neon3); } .terminal .c { color:var(--neon); } .terminal .ok { color:var(--neon3); } .terminal .d { color:var(--muted); }
.terminal .cursor { display:inline-block; width:8px; height:15px; background:var(--neon); vertical-align:-2px; animation:cursor 1s steps(1) infinite; box-shadow:0 0 8px var(--neon); }
.numeros { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:-28px; position:relative; z-index:2; }
.num { padding:18px; border-radius:14px; background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--line); text-align:center; }
.num b { display:block; font:700 34px var(--head); background:linear-gradient(135deg, var(--neon), var(--neon2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.num span { font:12px var(--mono); color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
section { padding:52px 0 4px; } main { padding-bottom:20px; }
.sub { color:var(--muted); max-width:70ch; margin:0 0 22px; }
.vidro { position:relative; background:var(--panel); backdrop-filter:blur(10px); border-radius:16px; border:1px solid var(--line); }
.trilha { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; counter-reset:t; }
.trilha li { counter-increment:t; position:relative; padding:22px 20px; border-radius:16px; background:var(--panel); border:1px solid var(--line); color:var(--muted); font-size:15px; overflow:hidden; }
.trilha li::before { content:'0' counter(t); position:absolute; right:14px; top:6px; font:700 54px var(--head); color:rgb(62 230 255 / .08); }
.trilha b { display:block; color:var(--text); font:700 20px var(--head); margin-bottom:6px; } .trilha b::before { content:'> '; color:var(--neon); font-family:var(--mono); }
.grade { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.disc { position:relative; display:flex; flex-direction:column; gap:10px; padding:20px; border-radius:16px; text-decoration:none; color:inherit; background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--line); transition:transform .25s, box-shadow .25s; isolation:isolate; overflow:hidden; }
.disc::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; z-index:-1; background:conic-gradient(from var(--ang, 0deg), transparent 0 60%, var(--cor) 75%, transparent 90%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s; animation:gira 4s linear infinite; }
@property --ang { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes gira { to { --ang:360deg; } }
.disc::after { content:''; position:absolute; inset:auto -30% -60% -30%; height:70%; background:radial-gradient(closest-side, color-mix(in srgb, var(--cor) 22%, transparent), transparent); z-index:-2; opacity:.5; transition:opacity .3s; }
.disc:hover { transform:translateY(-4px); box-shadow:0 20px 50px -25px var(--cor); } .disc:hover::before { opacity:1; } .disc:hover::after { opacity:1; }
.disc h3 { color:var(--cor); margin:0; text-shadow:0 0 18px color-mix(in srgb, var(--cor) 40%, transparent); } .disc p { margin:0; color:var(--muted); font-size:14.5px; }
.disc span { margin-top:auto; color:var(--cor); font:600 13px var(--mono); }
.disc .capas { display:flex; gap:8px; } .disc .capas img { width:62px; height:auto; border-radius:5px; box-shadow:0 8px 20px rgb(0 0 0 / .5); transition:transform .3s; }
.disc:hover .capas img:first-child { transform:rotate(-4deg) translateY(-2px); } .disc:hover .capas img:last-child { transform:rotate(4deg) translateY(-2px); }
.bloco { position:relative; display:grid; grid-template-columns:200px 1fr; gap:28px; align-items:start; padding:24px; margin-bottom:20px; border-radius:18px; background:var(--panel); backdrop-filter:blur(10px); border:1px solid color-mix(in srgb, var(--cor, var(--neon)) 35%, transparent); box-shadow:0 0 40px -20px var(--cor, var(--neon)); }
.bloco img { width:100%; height:auto; border-radius:8px; box-shadow:0 14px 34px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .06); }
.bloco p { color:var(--muted); margin:0 0 12px; }
.indice { list-style:none; padding:0; margin:12px 0 18px; columns:2; column-gap:26px; }
.indice li { break-inside:avoid; padding:7px 0 7px 26px; position:relative; color:var(--text); font-size:14.5px; border-bottom:1px dashed var(--line); }
.indice li::before { content:'▸'; position:absolute; left:4px; color:var(--cor, var(--neon)); text-shadow:0 0 8px var(--cor, var(--neon)); }
.aviso { position:relative; padding:14px 16px 14px 46px; border-radius:12px; background:rgb(62 230 255 / .06); border:1px solid rgb(62 230 255 / .3); color:var(--muted); }
.aviso::before { content:'i'; position:absolute; left:14px; top:14px; width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--neon); color:#03121a; font:700 12px var(--mono); }
.aviso b { color:var(--text); }
.posts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.post-card { position:relative; display:block; padding:22px; border-radius:16px; text-decoration:none; color:inherit; background:var(--panel); backdrop-filter:blur(10px); border:1px solid var(--line); transition:border-color .25s, transform .25s; overflow:hidden; }
.post-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--neon), var(--neon2)); }
.post-card:hover { border-color:rgb(62 230 255 / .5); transform:translateY(-3px); } .post-card time { color:var(--neon); font:600 12px var(--mono); }
.post-card p { color:var(--muted); margin:6px 0 0; }
article.texto { max-width:760px; } article.texto p, article.texto li { color:#d4e0ea; font-size:17px; }
article.texto pre { background:#02060c; border:1px solid rgb(62 230 255 / .3); border-radius:12px; padding:18px; overflow-x:auto; font:14px/1.7 var(--mono); color:#c9f4ff; box-shadow:0 0 30px -15px var(--neon); }
article.texto code { background:#02060c; padding:2px 7px; border-radius:5px; font:.9em var(--mono); color:var(--neon); }
.passos { list-style:none; padding:0; counter-reset:p; display:grid; gap:12px; }
.passos li { counter-increment:p; position:relative; padding:14px 16px 14px 60px; border-radius:12px; background:var(--panel); border:1px solid var(--line); color:var(--muted); }
.passos li::before { content:counter(p); position:absolute; left:16px; top:13px; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:linear-gradient(135deg, var(--neon), var(--neon2)); color:#03121a; font:700 14px var(--mono); box-shadow:0 0 14px rgb(62 230 255 / .5); }
.passos b { color:var(--text); }
.aparece { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; } .aparece.visivel { opacity:1; transform:none; }
footer { margin-top:64px; padding:28px 0 40px; border-top:1px solid var(--line); color:var(--muted); font:13px var(--mono); }
footer .wrap { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; } footer a { color:var(--muted); }
.pare-site { display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center; padding:22px; border-radius:18px; background:linear-gradient(135deg, rgb(255 60 80 / .14), rgb(13 24 40 / .7)); border:1px solid rgb(255 80 100 / .55); box-shadow:0 0 40px -12px rgb(255 60 80 / .6); }
.pare-oct { width:92px; height:92px; display:grid; place-items:center; background:#e5383b; color:#fff; font:700 18px var(--head); letter-spacing:.06em; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); box-shadow:inset 0 0 0 4px #fff; animation:pulsa-pare 2.4s ease-in-out infinite; }
@keyframes pulsa-pare { 50% { filter:drop-shadow(0 0 14px #ff4d5e); } }
.pare-site h2 { margin:0 0 6px; color:#ff8a95; } .pare-site p { margin:0; color:#e6d3d6; } .pare-site b { color:#fff; }
@media (max-width:600px) { .pare-site { grid-template-columns:1fr; } .pare-oct { width:70px; height:70px; font-size:14px; } }
.tab-missoes { overflow-x:auto; border-radius:14px; border:1px solid var(--line); background:var(--panel); }
.tab-missoes table { width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px; }
.tab-missoes th, .tab-missoes td { text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line); color:var(--muted); }
.tab-missoes th { color:var(--neon); font:600 12px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.tab-missoes td b { color:var(--text); }
@media (max-width:900px) { .trilha { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:900px) { .grade { grid-template-columns:repeat(2,minmax(0,1fr)); } .numeros { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px) {
  .menu-btn { display:block; } nav { display:none; position:absolute; top:66px; left:0; right:0; background:var(--bg2); border-bottom:1px solid var(--line); }
  nav.aberto { display:block; } nav ul { flex-direction:column; padding:8px 16px 14px; }
  .hero-grid, .trilha, .grade, .posts { grid-template-columns:1fr; } .terminal pre { min-height:220px; font-size:12.5px; }
  .bloco { grid-template-columns:100px 1fr; gap:16px; padding:16px; } .indice { columns:1; } .numeros { margin-top:16px; } }
@media (prefers-reduced-motion:reduce) { body::after, h1 em, .botao::after, .disc::before, .marca i, .terminal .cursor { animation:none; } .aparece { opacity:1; transform:none; transition:none; } }
