/*
 * zeus.css — O site com a mesma cara da aplicação
 *
 * As cores, os raios e as fontes são os mesmos tokens que a app carrega de
 * assets/zeus_theme.json. Foi por isso que se centralizou o tema lá dentro:
 * para haver uma verdade visual só. Se um dia o accent mudar na app, muda
 * aqui na mesma linha.
 *
 * Claro por omissão (é como a app arranca) e escuro automático para quem
 * tem o sistema assim.
 */

:root {
    --bg:         #eceef2;
    --surface:    #ffffff;
    --surface2:   #f7f8fa;
    --field:      #fbfcfd;
    --border:     #e2e5ec;
    --border2:    #d8dbe2;
    --ink:        #151b28;
    --ink2:       #454c5c;
    --muted:      #8a90a0;
    --accent:     #2543c9;
    --accent-ink: #1c35a5;
    --accent-soft:#dbe2f7;
    --on-accent:  #ffffff;
    --positive:   #1f7a4d;
    --pos-soft:   #e7f4ed;
    --warm:       #8a5c0d;
    --warm-soft:  #fbf3e2;
    --warm-border:#ecdcbc;

    --r-control: 8px;
    --r-card:   11px;
    --r-pill:  999px;

    --f-ui: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --f-display: 'Space Grotesk', 'IBM Plex Sans', sans-serif;
    --f-mono: 'IBM Plex Mono', 'Consolas', monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:         #0f131a;
        --surface:    #181d26;
        --surface2:   #1f2634;
        --field:      #131821;
        --border:     #2a3140;
        --border2:    #39414f;
        --ink:        #eef1f6;
        --ink2:       #b9c0cd;
        --muted:      #818b9d;
        --accent-ink: #b9c9ff;
        --accent-soft:rgba(120,150,255,0.16);
        --positive:   #43c98a;
        --pos-soft:   rgba(67,201,138,0.14);
        --warm:       #e8b34a;
        --warm-soft:  rgba(232,179,74,0.14);
        --warm-border:rgba(232,179,74,0.42);
    }
}

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

body {
    background: var(--bg);
    color: var(--ink2);
    font-family: var(--f-ui);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--f-display); color: var(--ink); line-height: 1.25; }

a { color: var(--accent-ink); }

.envolve { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ── Cabeçalho ──────────────────────────────────────────────────────── */
.topo {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
}
.topo .envolve {
    display: flex; align-items: center; justify-content: space-between;
    height: 62px; gap: 16px;
}
.marca { display: flex; align-items: baseline; gap: 9px; text-decoration: none; }
.marca strong { font-family: var(--f-display); font-size: 19px; font-weight: 700; color: var(--ink); }
.marca span {
    font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted);
}
.topo nav { display: flex; align-items: center; gap: 22px; }
.topo nav a {
    color: var(--ink2); text-decoration: none; font-size: 14px; font-weight: 500;
}
.topo nav a:hover { color: var(--accent-ink); }

/* ── Botões ─────────────────────────────────────────────────────────── */
.btn {
    display: inline-block; border: 0; cursor: pointer; text-decoration: none;
    font-family: var(--f-ui); font-size: 15px; font-weight: 600;
    padding: 12px 24px; border-radius: var(--r-control); transition: .15s;
}
.btn-principal { background: var(--accent); color: var(--on-accent); }
.btn-principal:hover { background: #1c35a5; }
.btn-secundario {
    background: var(--surface); color: var(--ink2);
    border: 1px solid var(--border2);
}
.btn-secundario:hover { background: var(--surface2); }
.btn:disabled, .btn[disabled] {
    background: var(--surface2); color: var(--muted);
    border: 1px solid var(--border); cursor: not-allowed;
}

/* ── Capa ───────────────────────────────────────────────────────────── */
.capa { padding: 64px 0 20px; }
.capa .envolve { display: grid; gap: 40px; align-items: center; grid-template-columns: 1fr; }
.etiqueta {
    display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 1.4px;
    text-transform: uppercase; color: var(--accent-ink);
    background: var(--accent-soft); padding: 5px 12px; border-radius: var(--r-pill);
    margin-bottom: 18px;
}
.capa h1 { font-size: 40px; letter-spacing: -.5px; margin-bottom: 18px; }
.capa p.entrada { font-size: 18px; color: var(--ink2); max-width: 620px; }
.accoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; align-items: center; }
.nota-versao { font-size: 13px; color: var(--muted); font-family: var(--f-mono); }

/* ── Imagens da app ─────────────────────────────────────────────────── */
.ecra {
    margin-top: 44px; border-radius: var(--r-card); overflow: hidden;
    border: 1px solid var(--border); background: var(--surface);
    box-shadow: 0 18px 44px -24px var(--muted);
}
.ecra img { display: block; width: 100%; height: auto; }
.legenda-ecra {
    font-size: 13px; color: var(--muted); text-align: center; margin-top: 12px;
}

/* ── Secções ────────────────────────────────────────────────────────── */
section { padding: 56px 0; }
.titulo-seccao { margin-bottom: 8px; font-size: 26px; }
.sub-seccao { color: var(--muted); margin-bottom: 32px; max-width: 640px; }

.grelha { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.cartao {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: 24px;
}
.cartao h3 { font-size: 17px; margin-bottom: 8px; }
.cartao p { font-size: 15px; color: var(--ink2); }

/* ── Patentes ───────────────────────────────────────────────────────── */
.patentes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.patente { display: flex; flex-direction: column; }
.patente .selo {
    align-self: flex-start; font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
    text-transform: uppercase; padding: 4px 10px; border-radius: var(--r-pill);
    background: var(--surface2); color: var(--muted); margin-bottom: 14px;
}
.patente.pro .selo  { background: var(--accent-soft); color: var(--accent-ink); }
.patente.premio .selo { background: var(--warm-soft); color: var(--warm); border: 1px solid var(--warm-border); }
.patente .preco { font-family: var(--f-display); font-size: 30px; color: var(--ink); }
.patente .preco small { font-size: 14px; color: var(--muted); font-family: var(--f-ui); font-weight: 400; }
.patente ul { list-style: none; margin: 18px 0 0; }
.patente li {
    font-size: 15px; padding: 7px 0 7px 24px; position: relative; color: var(--ink2);
    border-top: 1px solid var(--border);
}
.patente li:first-child { border-top: 0; }
.patente li::before {
    content: "✓"; position: absolute; left: 0; color: var(--positive); font-weight: 700;
}

/* ── Aviso ──────────────────────────────────────────────────────────── */
.aviso {
    background: var(--warm-soft); border: 1px solid var(--warm-border);
    border-radius: var(--r-card); padding: 22px 26px;
}
.aviso h3 { color: var(--warm); font-size: 16px; margin-bottom: 8px; }
.aviso p { font-size: 15px; color: var(--ink2); }
.aviso p + p { margin-top: 8px; }

/* ── Descarregar ────────────────────────────────────────────────────── */
.descarregar { text-align: center; }
.caixa-descarregar {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-card); padding: 36px 26px; max-width: 520px; margin: 0 auto;
}

/* ── Rodapé ─────────────────────────────────────────────────────────── */
footer {
    border-top: 1px solid var(--border); background: var(--surface);
    padding: 30px 0; margin-top: 30px;
}
footer .envolve {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    font-size: 13px; color: var(--muted);
}
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--accent-ink); }

/* ── Modal do aviso jurídico ────────────────────────────────────────── */
.modal {
    position: fixed; inset: 0; z-index: 100; display: flex;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(15, 19, 26, .72); backdrop-filter: blur(6px);
    transition: opacity .35s, visibility .35s;
}
.modal.oculto { opacity: 0; visibility: hidden; pointer-events: none; }
.modal-caixa {
    background: var(--surface); border-radius: var(--r-card);
    border: 1px solid var(--border); max-width: 560px; padding: 32px;
}
.modal-caixa h2 { font-size: 21px; margin-bottom: 14px; }
.modal-caixa p { font-size: 15px; margin-bottom: 12px; }
.modal-caixa .forte { color: var(--ink); font-weight: 600; }

@media (max-width: 760px) {
    .capa { padding: 40px 0 10px; }
    .capa h1 { font-size: 30px; }
    .topo nav a.esconde-pequeno { display: none; }
    section { padding: 40px 0; }
}