/* Site do Aurora: mesmo visual do navegador (noite azul com a aurora da logo). */
:root {
  --fundo:#0A0F21; --sup:#111833; --sup2:#161F40; --borda:#222C52; --texto:#E9EEFF; --suave:#97A3CC;
  --a1:#3DD9C1; --a2:#5B8CFF; --a3:#B28CFF; --ok:#3DD68C; --erro:#E5484D;
  --grad:linear-gradient(90deg, var(--a1), var(--a2) 55%, var(--a3));
  --grad-diag:linear-gradient(135deg, var(--a1), var(--a2) 55%, var(--a3));
}
* { box-sizing:border-box; }
html { background:var(--fundo); scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--texto); font:16px/1.6 "Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif; overflow-x:hidden; }
a { color:var(--a2); }
h1, h2, h3 { line-height:1.15; letter-spacing:-.02em; }
code { font:13px ui-monospace,"Cascadia Code",Consolas,monospace; background:var(--fundo); border:1px solid var(--borda); padding:2px 6px; border-radius:6px; word-break:break-all; }
.grad { background:var(--grad); background-size:200% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:brilho 8s linear infinite; }
@keyframes brilho { to { background-position:200% 0; } }
.ic { flex:none; }
.oculto { display:none !important; }

/* ----- Céu com aurora animada ----- */
.ceu { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.ceu i { position:absolute; width:60vmax; height:60vmax; border-radius:50%; filter:blur(90px); opacity:.5; }
.ceu i:nth-child(1) { background:radial-gradient(circle, var(--a1), transparent 62%); top:-35vmax; left:-15vmax; animation:f1 28s ease-in-out infinite alternate; }
.ceu i:nth-child(2) { background:radial-gradient(circle, var(--a3), transparent 62%); top:-30vmax; right:-22vmax; animation:f2 34s ease-in-out infinite alternate; }
.ceu i:nth-child(3) { background:radial-gradient(circle, var(--a2), transparent 62%); bottom:-48vmax; left:20vw; opacity:.3; animation:f3 40s ease-in-out infinite alternate; }
@keyframes f1 { to { transform:translate(16vw, 10vh) scale(1.15); } }
@keyframes f2 { to { transform:translate(-20vw, 14vh) scale(.9); } }
@keyframes f3 { to { transform:translate(12vw, -12vh) scale(1.2); } }

/* ----- Topo ----- */
.topo { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px clamp(16px, 4vw, 48px); background:color-mix(in srgb, var(--fundo) 70%, transparent); backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--borda) 60%, transparent); }
.marca { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--texto); font-weight:700; font-size:19px; }
.topo nav { display:flex; align-items:center; gap:clamp(8px, 2vw, 26px); }
.topo nav a:not(.botao) { color:var(--suave); text-decoration:none; font-size:15px; transition:color .15s; }
.topo nav a:not(.botao):hover, .topo nav a[aria-current] { color:var(--texto); }

/* ----- Botões ----- */
.botao { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#fff; background:var(--grad-diag); border-radius:14px;
  padding:12px 20px; font-weight:600; box-shadow:0 12px 32px color-mix(in srgb, var(--a2) 35%, transparent); transition:transform .2s, box-shadow .2s; }
.botao:hover { transform:translateY(-2px); box-shadow:0 18px 40px color-mix(in srgb, var(--a2) 45%, transparent); }
.botao.pequeno { padding:8px 14px; border-radius:11px; font-size:14px; box-shadow:none; }
.botao.grande { padding:18px 28px; border-radius:18px; gap:16px; }
.botao.grande b { display:block; font-size:19px; }
.botao.grande small { display:block; font-weight:400; font-size:13.5px; opacity:.92; }
.link-seta { display:inline-flex; align-items:center; gap:6px; color:var(--suave); text-decoration:none; font-size:15px; transition:color .15s, gap .2s; }
.link-seta:hover { color:var(--texto); gap:10px; }

/* ----- Herói ----- */
main { display:block; }
.heroi { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:clamp(28px, 5vw, 64px); align-items:center;
  max-width:1200px; margin:0 auto; padding:clamp(40px, 9vh, 96px) clamp(16px, 4vw, 48px) 40px; }
.selo { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:99px; border:1px solid var(--borda);
  background:color-mix(in srgb, var(--sup) 70%, transparent); color:var(--suave); font-size:13.5px; }
.heroi h1 { font-size:clamp(38px, 6vw, 66px); margin:18px 0 16px; }
.sub { color:var(--suave); font-size:clamp(16px, 1.6vw, 18.5px); margin:0 0 28px; max-width:560px; }
.acao { display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.aviso-so { margin-top:14px; color:#FFB65C; font-size:14px; }
.selos-lista { list-style:none; display:flex; gap:20px; flex-wrap:wrap; padding:0; margin:28px 0 0; color:var(--suave); font-size:14.5px; }
.selos-lista li { display:flex; align-items:center; gap:7px; }
.selos-lista .ic, .lista-check .ic { color:var(--ok); }

/* Janela do navegador desenhada em HTML */
.janela { border-radius:16px; overflow:hidden; border:1px solid var(--borda); background:var(--sup); font-size:12px;
  box-shadow:0 40px 100px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03), 0 0 80px color-mix(in srgb, var(--a2) 20%, transparent);
  transform:perspective(1400px) rotateY(-7deg) rotateX(3deg); transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.janela:hover { transform:perspective(1400px) rotateY(-2deg) rotateX(1deg); }
.j-abas { display:flex; align-items:center; gap:4px; padding:8px 10px 0; background:var(--fundo); color:var(--suave); }
.j-abas img { margin:0 6px 6px 2px; }
.j-aba { display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius:10px 10px 0 0; white-space:nowrap; min-width:0; }
.j-aba.ativa { background:var(--sup); color:var(--texto); position:relative; }
.j-aba.ativa::after { content:""; position:absolute; left:10px; right:10px; top:0; height:2px; background:var(--grad); border-radius:2px; }
.j-aba b { margin-left:10px; font-weight:400; color:var(--suave); }
.j-aba .f { width:12px; height:12px; border-radius:3px; flex:none; }
.f1 { background:var(--grad-diag); } .f2 { background:#FFB020; } .f3 { background:#3FA55A; }
.j-mais { padding:0 8px 6px; font-size:15px; }
.j-ctrl { margin-left:auto; padding:0 6px 6px; letter-spacing:8px; font-size:11px; white-space:nowrap; }
.j-barra { display:flex; align-items:center; gap:6px; padding:8px 10px; }
.j-bt { width:26px; height:26px; display:flex; align-items:center; justify-content:center; color:var(--suave); border-radius:7px; }
.j-end { flex:1; min-width:0; display:flex; align-items:center; gap:8px; height:30px; padding:0 6px 0 10px; border-radius:10px; background:var(--fundo);
  border:1px solid var(--borda); color:var(--suave); white-space:nowrap; overflow:hidden; }
.j-end .ic { color:var(--a2); }
.j-selo { margin-left:auto; background:var(--a2); color:#fff; border-radius:99px; padding:2px 8px; font-size:10.5px; font-weight:600; }
.j-pagina { position:relative; padding:34px 20px 30px; text-align:center; background:
  radial-gradient(60% 70% at 15% 0%, color-mix(in srgb, var(--a1) 28%, transparent), transparent),
  radial-gradient(60% 70% at 90% 10%, color-mix(in srgb, var(--a3) 24%, transparent), transparent), var(--fundo); }
.j-ola { color:var(--suave); }
.j-hora { font-size:46px; font-weight:700; letter-spacing:-1px; line-height:1.1; }
.j-busca { margin:16px auto 20px; max-width:340px; height:38px; border-radius:12px; border:1px solid var(--borda); background:color-mix(in srgb, var(--sup) 85%, transparent);
  display:flex; align-items:center; padding:0 6px 0 14px; color:var(--suave); text-align:left; }
.j-busca span { margin-left:auto; width:28px; height:28px; border-radius:9px; background:var(--grad-diag); }
.j-atalhos { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.j-atalhos span { display:flex; flex-direction:column; align-items:center; gap:6px; width:64px; font-size:10.5px; white-space:nowrap; }
.j-atalhos i { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:700; font-size:15px; color:#fff; }
.c1 { background:linear-gradient(135deg,#3DD9C1,#2A9D8F); } .c2 { background:linear-gradient(135deg,#5B8CFF,#3A5BD9); }
.c3 { background:linear-gradient(135deg,#FF8FAB,#E0577A); } .c4 { background:linear-gradient(135deg,#FFB65C,#E08A2E); }
.c5 { background:transparent; border:2px dashed var(--borda); color:var(--suave) !important; }

/* ----- Seções ----- */
.secao { max-width:1200px; margin:0 auto; padding:clamp(40px, 8vh, 80px) clamp(16px, 4vw, 48px); }
.secao > h2, .secao h1 { font-size:clamp(28px, 4vw, 44px); margin:0 0 28px; }
.secao.estreita { max-width:820px; }
.secao.centro { text-align:center; }
.grade { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; }
.recurso { padding:22px; border-radius:18px; background:color-mix(in srgb, var(--sup) 80%, transparent); border:1px solid var(--borda);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), border-color .2s; }
.recurso:hover { transform:translateY(-5px); border-color:color-mix(in srgb, var(--a2) 55%, var(--borda)); }
.r-icone { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--grad-diag); margin-bottom:14px;
  box-shadow:0 10px 24px color-mix(in srgb, var(--a2) 30%, transparent); }
.recurso h3 { margin:0 0 6px; font-size:18px; }
.recurso p { margin:0; color:var(--suave); font-size:14.5px; }
.duas { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:clamp(24px, 5vw, 56px); align-items:center; }
.duas h2 { font-size:clamp(28px, 4vw, 44px); margin:0 0 16px; }
.lista-check { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.lista-check li { display:flex; gap:12px; align-items:flex-start; }
.cartao { background:color-mix(in srgb, var(--sup) 82%, transparent); backdrop-filter:blur(12px); border:1px solid var(--borda); border-radius:20px; padding:24px 26px; }
.cartao.aviso { color:var(--suave); }
.comparativo { padding:10px 22px; }
.comparativo .linha { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; padding:13px 0; font-size:14.5px; color:var(--suave); }
.comparativo .linha + .linha { border-top:1px solid var(--borda); }
.comparativo .cab b { color:var(--texto); }
.comparativo .sim { color:var(--ok); }

.nov-cab { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.nov-cab h2 { margin:0 8px 0 0; font-size:22px; }
.etiqueta { font-size:12px; font-weight:600; padding:4px 11px; border-radius:99px; background:var(--sup2); border:1px solid var(--borda); color:var(--suave); }
.etiqueta.destaque { background:color-mix(in srgb, var(--a2) 22%, transparent); border-color:transparent; color:#B9CCFF; }
.etiqueta.urgente { background:color-mix(in srgb, var(--erro) 22%, transparent); border-color:transparent; color:#FFB3B6; }
.lista-pontos { list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:9px; }
.lista-pontos li { display:flex; gap:12px; }
.lista-pontos li::before { content:""; flex:none; width:8px; height:8px; margin-top:9px; border-radius:50%; background:var(--grad-diag); }
.nov-rodape { display:flex; flex-direction:column; gap:10px; padding-top:14px; border-top:1px solid var(--borda); }
details summary { cursor:pointer; color:var(--suave); font-size:14px; display:inline-flex; align-items:center; gap:8px; }
details code { display:block; margin-top:8px; }

/* Linha do tempo de versões */
.linha-tempo { list-style:none; margin:0; padding:0 0 0 28px; position:relative; display:flex; flex-direction:column; gap:18px; }
.linha-tempo::before { content:""; position:absolute; left:8px; top:10px; bottom:10px; width:2px; background:linear-gradient(var(--a2), var(--borda)); border-radius:2px; }
.linha-tempo li { position:relative; }
.linha-tempo li::before { content:""; position:absolute; left:-26px; top:30px; width:14px; height:14px; border-radius:50%; background:var(--fundo); border:2px solid var(--borda); }
.linha-tempo li.atual::before { background:var(--grad-diag); border-color:transparent; box-shadow:0 0 0 5px color-mix(in srgb, var(--a2) 25%, transparent); }

/* Passos de instalação */
.passos { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; text-align:left; }
.passo { padding:22px; border-radius:18px; background:color-mix(in srgb, var(--sup) 80%, transparent); border:1px solid var(--borda); }
.passo span { width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-weight:700; background:var(--grad-diag); color:#fff; margin-bottom:12px; }
.passo h3 { margin:0 0 6px; font-size:17px; }
.passo p { margin:0; color:var(--suave); font-size:14.5px; }
.requisitos { color:var(--suave); font-size:14px; margin-top:22px; }

/* Página "baixando" */
.baixando { margin-bottom:36px; }
.baixando h1 { margin:18px 0 10px !important; }
.baixando .sub { margin:0 auto; }
.disco { width:96px; height:96px; margin:0 auto; border-radius:30px; display:flex; align-items:center; justify-content:center; color:#fff; background:var(--grad-diag);
  box-shadow:0 20px 50px color-mix(in srgb, var(--a2) 45%, transparent); animation:pula 1.6s ease-in-out infinite; }
@keyframes pula { 50% { transform:translateY(-8px); } }
.disco .ic { animation:desce 1.6s ease-in-out infinite; }
@keyframes desce { 0%, 100% { transform:translateY(-3px); } 50% { transform:translateY(4px); } }
.conferir { margin-top:26px; text-align:left; background:color-mix(in srgb, var(--sup) 80%, transparent); border:1px solid var(--borda); border-radius:16px; padding:16px 20px; }
.conferir p { color:var(--suave); font-size:14px; }

/* ----- Rodapé ----- */
.rodape { max-width:1200px; margin:40px auto 0; padding:36px clamp(16px, 4vw, 48px) 48px; border-top:1px solid var(--borda); color:var(--suave); font-size:14.5px; }
.rodape .marca { font-size:16px; margin-bottom:10px; }
.rodape .pequeno { font-size:12.5px; opacity:.8; }

/* ----- Animações de entrada (o site.js liga quando o item aparece na tela) ----- */
.js .revela { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--n, 0) * 70ms); }
.js .revela.visivel { opacity:1; transform:none; }
.js .janela.revela.visivel { transform:perspective(1400px) rotateY(-7deg) rotateX(3deg); }
.js .janela.revela.visivel:hover { transform:perspective(1400px) rotateY(-2deg) rotateX(1deg); }

.n0 { --n:0; } .n1 { --n:1; } .n2 { --n:2; } .n3 { --n:3; } .n4 { --n:4; } .n5 { --n:5; } .n6 { --n:6; } .n7 { --n:7; } .n8 { --n:8; } .n9 { --n:9; } 

/* ----- Telas pequenas ----- */
@media (max-width:900px) {
  .heroi { grid-template-columns:1fr; text-align:center; }
  .heroi .sub { margin-left:auto; margin-right:auto; }
  .acao, .selos-lista { justify-content:center; }
  .janela, .js .janela.revela.visivel { transform:none; }
}
@media (max-width:620px) {
  .topo nav a:not(.botao) { display:none; }
  .j-aba:not(.ativa), .j-ctrl { display:none; }
  .comparativo .linha { grid-template-columns:1.2fr 1fr 1fr; font-size:13px; }
  .botao.grande { width:100%; justify-content:center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .js .revela { opacity:1; transform:none; }
}