/* ==========================================================================
   fix-base.css — camada de superfície e luz (handoff Zouti × Deu ROI, 26/09)
   Carregado DEPOIS do styles.css e ANTES dos fix-<fragmento>.css.
   Só tokens + base global. Cada fragmento aplica o vidro no próprio fix-*.css.

   Diagnóstico medido: nossos objetos eram plástico opaco sobre fundo neutro;
   os da Zouti são vidro translúcido sobre um fundo que já é da cor da marca.
   ========================================================================== */

:root {
    /* Fase 2 — o fundo pertence à marca: preto com viés verde (era #0B0B0E neutro) */
    --bg:      rgb(5, 10, 8);
    --bg-soft: rgb(8, 14, 11);

    /* Fase 1 — superfície de vidro (era cinza opaco #16161B / #1C1C22) */
    --surface:       rgba(255, 255, 255, .03);
    /* camada de DENTRO do card é mais escura que o card, não mais clara:
       branco sobre branco em cada nível deixava o aninhado cinza-leitoso */
    --surface-2:     rgba(0, 0, 0, .2);
    --surface-hover: rgba(255, 255, 255, .06);
    --glass-grad:    linear-gradient(267deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
    --glass-blur:    blur(6px);
    --glass-blur-2:  blur(3px);   /* camadas secundárias dentro do fragmento */

    /* anel de 1px (fio de vidro), no lugar da borda sólida */
    --ring:        0 0 0 1px rgba(255, 255, 255, .08);
    --ring-strong: 0 0 0 1px rgba(255, 255, 255, .14);
    --ring-brand:  0 0 0 1px rgba(60, 230, 160, .38);

    /* SEM relevo (Leon, 26/09: "relevo ficou feio demais, não é nada moderno").
       Vidro é chapado: translúcido + fio de 1px + blur. Nada de luz interna em
       cima / peso embaixo. Os tokens ficam neutros pra não quebrar quem usa. */
    --mold:      0 0 #0000;
    --mold-soft: 0 0 #0000;

    /* véu de pé desligado (também era relevo) */
    --veil: linear-gradient(transparent, transparent);

    /* gradientes de marca: o verde vira matéria, não tinta */
    --brand-grad-deep: linear-gradient(132deg, #0A3B28, #04140E);
    --brand-grad-lit:  linear-gradient(-44deg, #0A3B28, #2FD693);

    /* luz: UM por seção, no elemento focal. Difusa e embaixo (bloom), nunca
       halo apertado de neon em volta do objeto (era 0 0 9px 2px .55). */
    --glow:     0 8px 26px -10px rgba(60, 230, 160, .45);
    --glow-neg: 0 8px 26px -10px rgba(229, 112, 107, .40);

    /* sombra de apoio (sem o traço inset de 4% de antes) */
    --drop: 0 24px 48px -28px rgba(0, 0, 0, .9);

    /* Fase 3 — raios: só três valores (+ 50% pra círculo) */
    --r-card: 12px;
    --r-box:  16px;
    --r-pill: 999px;
    --r:    var(--r-box);
    --r-md: var(--r-card);
    --r-sm: var(--r-card);

    /* Fase 3 — fonte de título. Inter fica no texto corrido; Geist Mono no número. */
    --display: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body { background: var(--bg); }

/* a luz ambiente passa a ser verde-marca + um contraluz frio discreto */
body::before {
    background:
        radial-gradient(58% 42% at 88% -4%, rgba(60, 230, 160, .14), transparent 72%),
        radial-gradient(48% 38% at 6% 8%, rgba(47, 214, 147, .05), transparent 70%);
}

h1, h2, h3,
.h2 {
    font-family: var(--display);
    letter-spacing: -.04em;
}

/* nav colada: vidro sobre o fundo novo */
.nav.stuck {
    background: rgba(5, 10, 8, .72);
    border-bottom-color: transparent;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}

/* ---------- utilitário de vidro (opt-in por classe, pra quem preferir no markup) ---------- */
.glass {
    background-color: var(--surface);
    background-image: var(--glass-grad);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-color: transparent;
    box-shadow: var(--ring), var(--mold), var(--drop);
    border-radius: var(--r-box);
}

/* as luzes radiais atrás dos fragmentos (::before) passam da borda da tela no
   celular. O recorte fica NA SEÇÃO, não no <html>: overflow no <html> impede o
   body de repassar o overflow à viewport, o body vira contêiner de rolagem e o
   sticky do #painel morre. clip não cria contêiner de rolagem. */
main > section { overflow-x: clip; }

/* Fase 3 — o check das listas saía em 6px, fora do sistema 12/16/999/50% */
.tick {
    border-radius: 50%;
    border-color: transparent;
    box-shadow: var(--ring-brand);
}

/* ---------- Fase 3 — o que sobrava fora dos fragmentos (nav, botões, vídeo, fechamento) ---------- */

/* botões: pill, como o resto do sistema; o ghost troca a borda por anel */
.btn, .btn-sm, .btn-lg { border-radius: var(--r-pill); }
.btn-ghost {
    background: var(--surface);
    border-color: transparent;
    box-shadow: var(--ring-strong), var(--mold-soft);
    backdrop-filter: var(--glass-blur-2);
    -webkit-backdrop-filter: var(--glass-blur-2);
}
.btn-ghost:hover { background: var(--surface-hover); border-color: transparent; }
.btn-primary {
    background: linear-gradient(100deg, #2FD693, #3CE6A0);
    border-color: transparent;
    box-shadow: 0 10px 30px -12px rgba(60, 230, 160, .55);
}
.btn-quiet { border-color: transparent; box-shadow: var(--ring-strong); }

.nav-links a, .burger, .pj-btn { border-radius: var(--r-pill); }
.brand-tok { border-radius: var(--r-card); }
.vid-frame { border-radius: var(--r-box); }

/* fechamento: o card vira matéria de marca, não cinza */
.close-card {
    border-color: transparent;
    border-radius: var(--r-box);
    background-color: var(--surface);
    background-image:
        radial-gradient(90% 130% at 82% -20%, rgba(60, 230, 160, .16), transparent 62%),
        var(--veil),
        var(--brand-grad-deep);
    box-shadow: var(--ring-brand), var(--mold), var(--drop);
}

footer { border-top-color: rgba(255, 255, 255, .06); }

/* o fechamento é alinhado à esquerda; os CTAs e a nota herdavam o centro da hero */
.close-card .hero-cta,
.close-card .hero-note { justify-content: flex-start; }