/* =====================================================================================
   Guardian Connect — sítio público
   Identidade de docs/BRAND.md. Zero dependências externas: tipos de letra servidos daqui.
   ===================================================================================== */

@font-face { font-family:'Archivo'; font-weight:600; font-display:swap; src:url('Archivo-600.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:700; font-display:swap; src:url('Archivo-700.woff2') format('woff2'); }
@font-face { font-family:'Archivo'; font-weight:800; font-display:swap; src:url('Archivo-800.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:400; font-display:swap; src:url('IBMPlexSans-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:500; font-display:swap; src:url('IBMPlexSans-500.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Sans'; font-weight:600; font-display:swap; src:url('IBMPlexSans-600.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:400; font-display:swap; src:url('IBMPlexMono-400.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-weight:500; font-display:swap; src:url('IBMPlexMono-500.woff2') format('woff2'); }

:root {
    /* Marca */
    --navy:#13203C; --blue:#34528A; --orange:#FBA21D; --burnt:#C65E00;

    /* Superfícies escuras, com azul residual — o preto puro descolaria da marca */
    --ground:#070C18;
    --ground-2:#0A1122;
    --surface:#101A30;
    --surface-2:#15213B;
    --line:#1E2B47;
    --line-2:#2A3A5E;

    --ink:#EDF1F9;
    --ink-2:#A8B6D2;
    --ink-3:#7A89A9;

    --ok:#4FBF8B; --warn:#E0A63C; --crit:#E87A63;

    --glow:0 0 34px rgba(251,162,29,.20);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 44px rgba(0,0,0,.34);

    --display:'Archivo','Segoe UI',system-ui,sans-serif;
    --body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
    --mono:'IBM Plex Mono','Consolas',monospace;

    --r:6px; --r-lg:10px;
    color-scheme: dark;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

/*
   O fundo escuro vive no <html>, e NÃO no <body>. A diferença não é cosmética, e explicava dois
   defeitos de uma vez:

     · o body pintado tapava tudo o que estivesse em z-index negativo — e é aí que estão o céu e
       os cometas. Um elemento com z-index negativo desenha-se ATRÁS do fundo do pai;
     · e quando a página é mais curta do que o ecrã, ou se estica no fim do deslocamento, o que
       aparecia por baixo era o branco da tela do navegador.

   Com o fundo no <html> e o body transparente, o céu volta a ver-se e não sobra branco em lado
   nenhum. É a mesma cor; muda só quem a pinta.
*/
html {
    scroll-behavior:smooth;
    background:var(--ground);
    min-height:100%;
    /* Rede final contra a barra horizontal. `clip` e não `hidden`: o `hidden` no elemento raiz
       transforma-o em contexto de deslocamento e parte o `position:fixed` dos elementos do céu. */
    overflow-x:clip;
}

body {
    position:relative;
    background:transparent; color:var(--ink); font-family:var(--body);
    font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    min-height:100vh;
    scrollbar-color:var(--line-2) transparent;
}

/*
   Céu por trás de tudo. É um campo de pontos desenhado em gradientes radiais — sem imagem e sem
   pedido de rede — fixo ao ecrã, de modo que o conteúdo passa por cima dele à medida que se rola.
   Fica atrás de todo o resto e não recebe rato: é atmosfera, não interface.
*/
body::before {
    content:''; position:fixed; inset:-10%; z-index:-2; pointer-events:none;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 14%, rgba(255,255,255,.75), transparent 60%),
        radial-gradient(1px 1px at 44% 8%,  rgba(180,204,255,.60), transparent 60%),
        radial-gradient(1.8px 1.8px at 72% 26%, rgba(255,255,255,.50), transparent 60%),
        radial-gradient(1px 1px at 88% 12%, rgba(251,162,29,.50), transparent 60%),
        radial-gradient(1.3px 1.3px at 26% 52%, rgba(180,204,255,.55), transparent 60%),
        radial-gradient(1px 1px at 58% 66%, rgba(255,255,255,.40), transparent 60%),
        radial-gradient(1.6px 1.6px at 84% 74%, rgba(180,204,255,.45), transparent 60%),
        radial-gradient(1px 1px at 8% 86%, rgba(251,162,29,.35), transparent 60%),
        radial-gradient(1.2px 1.2px at 38% 94%, rgba(255,255,255,.45), transparent 60%);
    background-size:340px 340px;
    opacity:.85;
    animation:deriva 200s linear infinite;
}

/* Luz de fundo profunda, para o preto não ser plano. */
body::after {
    content:''; position:fixed; inset:0; z-index:-3; pointer-events:none;
    background:
        radial-gradient(80% 50% at 12% 0%, rgba(52,82,138,.20), transparent 60%),
        radial-gradient(60% 50% at 95% 30%, rgba(198,94,0,.10), transparent 60%);
}

@keyframes deriva {
    from { transform:translate3d(0,0,0); }
    to   { transform:translate3d(-340px,-340px,0); }
}
h1,h2,h3 { font-family:var(--display); font-weight:800; line-height:1.08; letter-spacing:-.025em; text-wrap:balance; }
a { color:inherit; text-decoration:none; }
:focus-visible { outline:2px solid var(--orange); outline-offset:3px; border-radius:3px; }

::-webkit-scrollbar { width:11px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:99px; border:3px solid transparent; background-clip:content-box; }

.wrap { max-width:1140px; margin:0 auto; padding:0 24px; }

/* ── barra de progresso da leitura ─────────────────────────────────────────── */
#progresso {
    position:fixed; top:0; left:0; height:2px; width:0; z-index:80;
    background:linear-gradient(90deg,var(--burnt),var(--orange));
    box-shadow:var(--glow);
}

/* ── topo ──────────────────────────────────────────────────────────────────── */
.topo {
    position:sticky; top:0; z-index:70;

    /*
       Duas declaracoes de fundo, e a ordem importa.

       O `color-mix` so existe a partir do Chrome 111. Num navegador mais antigo essa linha e
       INVALIDA e e deitada fora -- e como era a unica declaracao de fundo, a barra ficava
       transparente: o conteudo passava por tras do logotipo enquanto se rolava a pagina.

       O rgba() faz o mesmo trabalho e e entendido por tudo. Quem tem `color-mix` recebe a
       segunda linha por cima; quem nao tem, fica com uma barra solida -- menos bonita do que o
       vidro fosco, e inteira.
    */
    background:rgba(7, 12, 24, .82);
    background:color-mix(in srgb, var(--ground) 82%, transparent);
    backdrop-filter:blur(14px) saturate(1.4);
    -webkit-backdrop-filter:blur(14px) saturate(1.4);
    border-bottom:1px solid transparent;
    transition:border-color .3s, background .3s;
}
.topo.assente { border-bottom-color:var(--line); }
.topo .interior { display:flex; align-items:center; gap:13px; padding:16px 24px; max-width:1140px; margin:0 auto; }

/*
   O símbolo é artwork escuro sobre transparente: usa-se como máscara e pinta-se por baixo.

   A cor não é o laranja — o laranja é o único acento da marca (BRAND.md §4.1) e gastá-lo no
   logótipo inteiro tirava-lhe a força onde ela conta. Mas uma chapa de branco também não chega:
   achata o escudo e apaga-lhe o relevo. O preenchimento é um gradiente diagonal, do branco ao
   azul-aço, que devolve a leitura de volume às barras e à seta; por trás fica um halo quente,
   que é onde a marca entra sem se impor.
*/
.simbolo {
    position:relative;
    width:32px; height:32px; flex:none;
    /* Metal. O gradiente corre a 35°, que é o eixo da seta: o escudo e as barras ficam no canto
       inferior esquerdo e recebem a prata e o branco; a seta sobe ao canto superior direito e
       recebe o ouro. Três leituras de cor a partir do artwork real, sem redesenhar nada — e a
       passagem entre prata e ouro é curta de propósito, para as cores se lerem como duas e não
       se misturarem num tom sujo aos trinta pixéis desta barra. */
    background:linear-gradient(125deg,
        #C98A22 0%, #E8A93C 30%, #F5C260 40%,
        #FFFFFF 47%, #FFFFFF 57%,
        #F5C260 64%, #E8A93C 76%, #C98A22 100%);
    -webkit-mask:url('guardian-mark.png') center/contain no-repeat;
    mask:url('guardian-mark.png') center/contain no-repeat;
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(251,162,29,.34));
    transition:filter .3s, transform .3s;
}

/* Um brilho que atravessa a peça devagar — o suficiente para ela parecer material, e não
   um autocolante. Percorre a diagonal de doze em doze segundos. */
.simbolo::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.85) 50%, transparent 62%);
    background-size:280% 280%;
    animation:varrer 12s ease-in-out infinite;
    mix-blend-mode:overlay;
}
@keyframes varrer {
    0%, 62%  { background-position:130% 130%; }
    82%,100% { background-position:-40% -40%; }
}

.topo .interior:hover .simbolo,
a:hover > .simbolo {
    filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(251,162,29,.55));
    transform:translateY(-1px);
}

@media (prefers-reduced-motion:reduce) { .simbolo::after { animation:none; } }
.marca-nome { font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.005em; }
.marca-nome em { font-style:normal; color:var(--orange); }

.nav-topo { margin-left:auto; display:flex; align-items:center; gap:8px; }
.nav-topo a.lig {
    font-size:14px; color:var(--ink-2); padding:8px 12px; border-radius:var(--r);
    transition:color .18s, background .18s;
}
.nav-topo a.lig:hover { color:var(--ink); background:var(--surface); }
@media (max-width:760px) { .nav-topo a.lig { display:none; } }

/* ── botões ────────────────────────────────────────────────────────────────── */
.botao {
    display:inline-flex; align-items:center; justify-content:center; gap:9px;
    font-family:var(--display); font-weight:700; font-size:13px;
    letter-spacing:.07em; text-transform:uppercase;
    padding:13px 22px; border-radius:var(--r); border:1px solid transparent; cursor:pointer;
    transition:transform .12s, background .18s, border-color .18s, box-shadow .18s, color .18s;
}
.botao svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }
.botao-1 { background:var(--orange); color:#1B1206; }
.botao-1:hover { background:#FFB23F; transform:translateY(-2px); box-shadow:0 10px 30px rgba(251,162,29,.28); }
.botao-2 { border-color:var(--line-2); color:var(--ink-2); }
.botao-2:hover { border-color:var(--orange); color:var(--ink); background:var(--surface); transform:translateY(-2px); }
.botao-pq { padding:9px 16px; font-size:11.5px; }

/* ── herói ─────────────────────────────────────────────────────────────────── */
.heroi { position:relative; padding:76px 0 88px; overflow:hidden; }
#tunel { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.85; }
.heroi .wrap { position:relative; z-index:2; }
.heroi::after {
    /* Esbatimento no fundo, para o canvas não cortar a direito contra a secção seguinte. */
    content:''; position:absolute; left:0; right:0; bottom:0; height:180px; z-index:1;
    background:linear-gradient(180deg, transparent, var(--ground));
    pointer-events:none;
}

.selo {
    display:inline-flex; align-items:center; gap:9px;
    font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--ink-2); border:1px solid var(--line-2); border-radius:99px;
    padding:6px 14px; margin-bottom:26px;

    /* Fundo de reserva primeiro, pela mesma razao do `.topo`: sem ele, um navegador sem
       `color-mix` deixava a etiqueta sem fundo, so com o contorno. */
    background:rgba(16, 26, 48, .60);
    background:color-mix(in srgb,var(--surface) 60%,transparent);
}
.selo .ponto { width:6px; height:6px; border-radius:50%; background:var(--ok); animation:pisca 2.6s ease-in-out infinite; }
@keyframes pisca { 0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(79,191,139,.5)} 50%{opacity:.55; box-shadow:0 0 0 6px rgba(79,191,139,0)} }

.heroi h1 { font-size:clamp(38px,6.4vw,68px); max-width:15ch; }
.heroi h1 .destaque {
    background:linear-gradient(96deg,var(--orange),#FFCE7A 55%,var(--orange));
    -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede { color:var(--ink-2); font-size:clamp(16px,2.2vw,19.5px); max-width:58ch; margin-top:22px; }
.acoes { display:flex; flex-wrap:wrap; gap:13px; margin-top:36px; }

.metricas { display:flex; flex-wrap:wrap; gap:34px; margin-top:56px; padding-top:28px; border-top:1px solid var(--line); }
.metrica .n { font-family:var(--display); font-weight:800; font-size:30px; color:var(--ink); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.metrica .r { font-family:var(--mono); font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; }

/* ── secções ───────────────────────────────────────────────────────────────── */
section { padding:84px 0; }
.cab { margin-bottom:44px; }
.cab .letra {
    font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.16em;
    text-transform:uppercase; color:var(--orange); display:block; margin-bottom:12px;
}
.cab h2 { font-size:clamp(27px,4.2vw,42px); }
.cab p { color:var(--ink-2); max-width:62ch; margin-top:14px; font-size:17px; }

/* ── passos ────────────────────────────────────────────────────────────────── */
.passos { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.passo { background:var(--surface); padding:32px 28px; position:relative; transition:background .25s; }
.passo:hover { background:var(--surface-2); }
.passo .n {
    font-family:var(--mono); font-size:12px; font-weight:600; color:var(--orange);
    width:32px; height:32px; border:1px solid var(--line-2); border-radius:var(--r);
    display:grid; place-items:center; margin-bottom:18px;
}
.passo h3 { font-size:19px; font-weight:700; margin-bottom:9px; }
.passo p { color:var(--ink-2); font-size:14.5px; }

/* ── cartões ───────────────────────────────────────────────────────────────── */
.grelha { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:18px; }
.carta {
    position:relative; background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-lg); padding:30px 28px; overflow:hidden;
    transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, box-shadow .3s;
}
.carta::before {
    /* Halo que segue o cursor. Só aparece ao passar por cima — é um detalhe, não um efeito. */
    content:''; position:absolute; inset:0; opacity:0; transition:opacity .3s; pointer-events:none;
    background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(251,162,29,.10), transparent 62%);
}
.carta:hover { transform:translateY(-4px); border-color:var(--line-2); box-shadow:var(--shadow); }
.carta:hover::before { opacity:1; }
/* O `display:grid` não é decoração: um <span> é elemento em linha, e num elemento em linha a
   largura e a altura simplesmente não se aplicam. Sem isto o SVG lá dentro resolve o seu 100%
   contra a carta toda e o ícone sai do tamanho de uma fotografia. */
.carta .icone {
    display:grid; place-items:center;
    width:46px; height:46px; flex:none; margin-bottom:20px;
    border-radius:14px; color:var(--orange);
    background:linear-gradient(150deg, rgba(251,162,29,.15), rgba(251,162,29,.04));
    border:1px solid rgba(251,162,29,.20);
    transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s;
}
.carta:hover .icone { transform:translateY(-2px); border-color:rgba(251,162,29,.38); }
.carta .icone svg {
    width:23px; height:23px; display:block;
    stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.carta h3 { font-size:19px; font-weight:700; margin-bottom:9px; line-height:1.3; }
.carta p { color:var(--ink-2); font-size:15px; }

/* ── diagrama de fluxo ─────────────────────────────────────────────────────── */
.fluxo { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:34px 28px; }
.fluxo svg { width:100%; height:auto; display:block; }
.fluxo .rot { font-family:var(--mono); font-size:10px; fill:var(--ink-3); letter-spacing:.08em; text-transform:uppercase; }
.fluxo .nome { font-family:var(--display); font-size:13px; font-weight:700; fill:var(--ink); }
.fluxo .cx { fill:var(--surface-2); stroke:var(--line-2); }
.fluxo .lig { stroke:var(--blue); stroke-width:1.6; fill:none; stroke-dasharray:5 5; animation:fluir 1.1s linear infinite; }
@keyframes fluir { to { stroke-dashoffset:-20; } }
.fluxo .lig-a { stroke:var(--orange); }

/* ── comparação ────────────────────────────────────────────────────────────── */
.tabela-envolve { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); }
table.comp { width:100%; border-collapse:collapse; font-size:14.5px; background:var(--surface); }
table.comp th, table.comp td { padding:15px 20px; text-align:left; border-bottom:1px solid var(--line); }
table.comp thead th {
    font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
    color:var(--ink-3); font-weight:500; background:var(--surface-2); white-space:nowrap;
}
table.comp tbody tr:last-child td { border-bottom:none; }
table.comp tbody tr { transition:background .15s; }
table.comp tbody tr:hover { background:var(--surface-2); }
table.comp .sim { color:var(--ok); font-weight:600; }
table.comp .nao { color:var(--ink-3); }
table.comp .nosso { color:var(--orange); font-weight:600; }

/* ── faixa final ───────────────────────────────────────────────────────────── */
.faixa { padding:0 0 90px; }
.faixa .caixa {
    position:relative; overflow:hidden;
    background:linear-gradient(135deg,var(--navy),#0C1730);
    border:1px solid var(--line-2); border-radius:14px; padding:52px 44px;
    display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between;
}
.faixa .caixa::after {
    content:''; position:absolute; width:420px; height:420px; border-radius:50%;
    background:var(--burnt); filter:blur(120px); opacity:.22; right:-140px; bottom:-200px; pointer-events:none;
}
.faixa .caixa > * { position:relative; z-index:1; }
.faixa h2 { font-size:clamp(24px,3.4vw,32px); }
.faixa p { color:var(--ink-2); margin-top:10px; max-width:50ch; }

/* ── rodapé ────────────────────────────────────────────────────────────────── */
.rodape { border-top:1px solid var(--line); padding:30px 0; }
.rodape .interior { display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; max-width:1140px; margin:0 auto; padding:0 24px; }
.rodape .mini { display:flex; align-items:center; gap:10px; }
.rodape .mini .simbolo { width:22px; height:22px; }
.rodape .mini .marca-nome { font-size:14px; }
.rodape .nota { color:var(--ink-3); font-size:13px; font-family:var(--mono); }

/* ── revelação ao scroll ───────────────────────────────────────────────────────
   Visível por omissão. O JS "arma" os blocos antes de os observar — sem JS, ou se o
   observer falhar, o conteúdo aparece em vez de desaparecer. */
.rv { transition:opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); }
.rv.armado { opacity:0; transform:translateY(24px); }
.rv.armado.dentro { opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
    html { scroll-behavior:auto; }
    .rv.armado { opacity:1; transform:none; }
}


/* ── céu galáctico ────────────────────────────────────────────────────────────
   Três camadas independentes, todas fixas ao ecrã e atrás de tudo. Nenhuma é uma
   imagem: são gradientes, sem um único pedido de rede.

     · o elemento    — a nebulosa e a faixa da Via Láctea, que dão a cor de fundo;
     · o ::before    — o pó de estrelas, denso e a cintilar;
     · o ::after     — as estrelas grandes, com brilho, a derivar mais devagar.

   Cada camada deriva a um ritmo diferente. É o que dá profundidade: o que está
   longe passa devagar, o que está perto passa depressa. Uma camada só, por mais
   pontos que tivesse, leria-se como um papel de parede.

   A densidade vem do tamanho do mosaico, e não do número de gradientes: com um
   mosaico de 300px, oito gradientes desenham mais de cem estrelas num ecrã largo.
   Era isto que faltava — o céu tinha quatro pontos por cada 520px, e ficava vazio.
*/
.ceu-cintila {
    position:fixed; inset:-10%; z-index:-2; pointer-events:none; overflow:hidden;

    /* Nebulosa: manchas largas e muito diluídas, nas cores da marca. O laranja entra
       em último e quase não se vê — é o que impede o azul de parecer frio de mais. */
    background-image:
        radial-gradient(46% 34% at 18% 12%, rgba(64,96,168,.30), transparent 70%),
        radial-gradient(38% 30% at 82% 26%, rgba(96,72,168,.24), transparent 72%),
        radial-gradient(52% 40% at 62% 88%, rgba(38,64,124,.28), transparent 70%),
        radial-gradient(30% 22% at 92% 78%, rgba(198,94,0,.13), transparent 70%),
        radial-gradient(26% 20% at 8% 70%, rgba(251,162,29,.07), transparent 72%),
        /* Faixa da Via Láctea: uma elipse comprida, inclinada, muito ténue. */
        radial-gradient(72% 13% at 50% 42%, rgba(150,180,240,.10), transparent 68%);
    background-repeat:no-repeat;
    animation:nebulosa 90s ease-in-out infinite alternate;
}

/* Pó de estrelas: muitas, pequenas, a cintilar. */
.ceu-cintila::before {
    content:''; position:absolute; inset:-20%;
    background-image:
        radial-gradient(1.1px 1.1px at  16%  30%, rgba(255,255,255,.95), transparent 60%),
        radial-gradient(1px   1px   at  62%  54%, rgba(255,255,255,.85), transparent 60%),
        radial-gradient(1.3px 1.3px at  86%  18%, rgba(190,212,255,.90), transparent 58%),
        radial-gradient(1px   1px   at  34%  82%, rgba(255,255,255,.80), transparent 60%),
        radial-gradient(1px   1px   at   8%  62%, rgba(214,228,255,.75), transparent 62%),
        radial-gradient(1.2px 1.2px at  48%  12%, rgba(255,255,255,.85), transparent 60%),
        radial-gradient(1px   1px   at  74%  70%, rgba(255,246,224,.70), transparent 62%),
        radial-gradient(1.1px 1.1px at  26%  46%, rgba(255,255,255,.78), transparent 60%),
        radial-gradient(1px   1px   at  94%  92%, rgba(198,216,255,.72), transparent 62%),
        radial-gradient(1.2px 1.2px at  56%  34%, rgba(255,255,255,.82), transparent 60%);
    background-size:300px 300px;
    animation:cintila 5.5s ease-in-out infinite alternate, deriva-fina 150s linear infinite;
}

/* Estrelas grandes: poucas, com halo, e sem piscar — se piscassem todas seria um
   postal de Natal. Derivam a metade da velocidade das outras. */
.ceu-cintila::after {
    content:''; position:absolute; inset:-20%; opacity:.85;
    background-image:
        radial-gradient(2.2px 2.2px at 22% 24%, rgba(255,255,255,1),   transparent 52%),
        radial-gradient(1.9px 1.9px at 78% 62%, rgba(206,224,255,.95), transparent 54%),
        radial-gradient(2.4px 2.4px at 45% 78%, rgba(255,255,255,.98), transparent 50%),
        radial-gradient(1.8px 1.8px at 88% 34%, rgba(255,236,200,.90), transparent 54%),
        radial-gradient(2px   2px   at 12% 88%, rgba(226,238,255,.92), transparent 52%),
        radial-gradient(1.7px 1.7px at 66% 8%,  rgba(255,255,255,.88), transparent 56%);
    background-size:640px 640px;
    animation:cintila-lenta 9s ease-in-out infinite alternate, deriva-lenta 420s linear infinite;
}

@keyframes cintila       { from { opacity:.42; } to { opacity:1; } }
@keyframes cintila-lenta { from { opacity:.62; } to { opacity:1; } }
/* O deslocamento de cada camada e um multiplo exacto do seu mosaico: 300px para o po de
   estrelas, 640px para as grandes. Com um valor qualquer, o padrao saltava a olho nu no
   instante em que a animacao reiniciava. */
@keyframes deriva-fina   { from { transform:translate3d(0,0,0); } to { transform:translate3d(-300px,-300px,0); } }
@keyframes deriva-lenta  { from { transform:translate3d(0,0,0); } to { transform:translate3d(-640px,-640px,0); } }
@keyframes nebulosa {
    from { transform:translate3d(0,0,0) scale(1); }
    to   { transform:translate3d(2%,-1.5%,0) scale(1.06); }
}

/* ── cometas ──────────────────────────────────────────────────────────────────
   Sete, com durações sem divisor comum para nunca coincidirem duas vezes da mesma
   maneira, e cada um visível durante cerca de um terço do ciclo.

   A versão anterior tinha ciclos de 23 a 43 segundos com um sexto do ciclo visível:
   quem olhasse para a página durante dez segundos não via cometa nenhum, e a queixa
   era exactamente essa. Com sete cometas de nove a dezassete segundos, há quase
   sempre um ou dois no ecrã — mas nunca tantos que pareçam chuva.
*/
.cometas { position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.cometas i {
    position:absolute; left:-25%; width:190px; height:2px; border-radius:2px; opacity:0;
    background:linear-gradient(90deg, transparent, rgba(200,218,255,.9), #FFFFFF);
    filter:drop-shadow(0 0 8px rgba(160,190,255,.95));
    animation:cometa-atravessa 13s linear infinite;
    will-change:transform, opacity;
}
.cometas i::after {
    content:''; position:absolute; right:-2px; top:-2px; width:6px; height:6px; border-radius:50%;
    background:#FFFFFF; box-shadow:0 0 12px 3px rgba(200,220,255,.95);
}

.cometas i:nth-child(1) { top:6%;  width:200px; animation-duration:11s; animation-delay:0s; }
.cometas i:nth-child(2) { top:21%; width:150px; animation-duration:14s; animation-delay:2.5s; }
.cometas i:nth-child(3) { top:38%; width:230px; animation-duration:9s;  animation-delay:5s; }
.cometas i:nth-child(4) { top:54%; width:130px; animation-duration:16s; animation-delay:1.5s; }
.cometas i:nth-child(5) { top:69%; width:180px; animation-duration:12s; animation-delay:7s; }
.cometas i:nth-child(6) { top:83%; width:160px; animation-duration:17s; animation-delay:4s; }
.cometas i:nth-child(7) { top:94%; width:210px; animation-duration:10s; animation-delay:8.5s; }

/* Dois deles em dourado, para o céu não ser todo da mesma cor. */
.cometas i:nth-child(3),
.cometas i:nth-child(6) {
    background:linear-gradient(90deg, transparent, rgba(251,162,29,.78), #FFE7BE);
    filter:drop-shadow(0 0 8px rgba(251,162,29,.9));
}
.cometas i:nth-child(3)::after,
.cometas i:nth-child(6)::after {
    background:#FFF3DC; box-shadow:0 0 12px 3px rgba(251,190,90,.95);
}

@keyframes cometa-atravessa {
    0%   { transform:translate3d(0,45vh,0) rotate(-28deg); opacity:0; }
    6%   { opacity:0; }
    14%  { opacity:1; }
    30%  { opacity:1; }
    38%  { transform:translate3d(140vw,-35vh,0) rotate(-28deg); opacity:0; }
    100% { transform:translate3d(140vw,-35vh,0) rotate(-28deg); opacity:0; }
}

/* Quem prefere menos movimento fica com o céu — parado, mas lá. Tirar as estrelas
   seria tirar a identidade da página a quem só pediu para o ecrã estar quieto. */
@media (prefers-reduced-motion:reduce) {
    .cometas { display:none; }
    .ceu-cintila,
    .ceu-cintila::before,
    .ceu-cintila::after { animation:none; opacity:.85; }
}


/* Dois botões na faixa final: entram lado a lado, e empilham quando não cabem. */
.faixa-acoes { display:flex; flex-wrap:wrap; gap:12px; }