/* =====================================================================
   RogoyNex — site (mesma identidade do programa)
   Tema CLARO e ESCURO com as mesmas classes: só as variáveis mudam.
   - <html data-theme="light|dark"> é definido em _Head (escolha salva no navegador
     ou, na 1ª visita, o tema do Windows/celular).
   - Sem JavaScript, o @media prefers-color-scheme aplica o escuro quando o aparelho usa escuro.
   Paleta RogoyNex: azul #1677FF (principal), azul-marinho #172B4D (fundos), verde #13B981 (conexão/ok).
   ===================================================================== */

/* ---------------------------------------------------------------- tema claro (padrão) */
:root {
    color-scheme: light;
    --bg: #F4F7FC;
    --site-bg: #FFFFFF;
    --card: #FFFFFF;
    --card-2: #F7F9FD;
    --borda: #E3E9F2;
    --linha: #EEF2F8;
    --sombra: 0 1px 2px rgba(23, 43, 77, .06);
    --sombra-forte: 0 12px 30px rgba(22, 119, 255, .15);

    --menu-bg: #FFFFFF;
    --menu-borda: #E3E9F2;
    --menu-texto: #33425C;
    --menu-secao: #5B6B85;
    --menu-hover: #EEF2F8;
    --contador-bg: #EEF2F8;

    --texto: #172B4D;
    --texto-2: #33425C;
    --texto-suave: #5B6B85;

    --campo-bg: #FFFFFF;
    --campo-borda: #C9D4E6;
    --trilho: #EEF2F8;

    --azul: #1677FF;
    --azul-forte: #0B5BD6;
    --link: #0B5BD6;
    --link-hover: #08469F;
    --foco: rgba(22, 119, 255, .22);

    --azul-tint: #E8F1FF;     --azul-tint-tx: #0B5BD6;  --azul-tint-borda: #BFD6FB;
    --ok-tint: #E6F7F0;       --ok-tx: #047857;         --ok-borda: #A7E3CC;
    --aviso-tint: #FEF3C7;    --aviso-tx: #92400E;      --aviso-borda: #FDE68A;
    --erro-tint: #FEE2E2;     --erro-tx: #B91C1C;       --erro-borda: #FECACA;
    --neutro-tint: #EEF2F8;   --neutro-tx: #33425C;

    --c-verde: #13B981;
    --c-ambar: #F59E0B;
    --c-vermelho: #EF4444;

    --topo-bg: #FFFFFF;
    --hero-bg: #F4F7FC;
    --faixa-bg: #F4F7FC;

    --raio: 16px;
    --raio-campo: 10px;
    --fonte: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ---------------------------------------------------------------- tema escuro (igual ao programa) */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #172B4D;
    --site-bg: #0F1F3A;
    --card: #1F3557;
    --card-2: #1A3050;
    --borda: #2C4770;
    --linha: #263F66;
    --sombra: none;
    --sombra-forte: 0 12px 30px rgba(4, 10, 24, .45);

    --menu-bg: #101F38;
    --menu-borda: #22385C;
    --menu-texto: #C9D4E6;
    --menu-secao: #92A3BF;
    --menu-hover: #1A3050;
    --contador-bg: #1F3557;

    --texto: #EEF2F9;
    --texto-2: #C9D4E6;
    --texto-suave: #92A3BF;

    --campo-bg: #12223D;
    --campo-borda: #3A5A86;
    --trilho: #12223D;

    --link: #4D9BFF;
    --link-hover: #8CBDFF;
    --foco: rgba(77, 155, 255, .3);

    --azul-tint: rgba(22, 119, 255, .16);   --azul-tint-tx: #4D9BFF;  --azul-tint-borda: rgba(22, 119, 255, .45);
    --ok-tint: rgba(19, 185, 129, .14);     --ok-tx: #34D399;         --ok-borda: rgba(19, 185, 129, .45);
    --aviso-tint: rgba(251, 191, 36, .14);  --aviso-tx: #FBBF24;      --aviso-borda: rgba(251, 191, 36, .45);
    --erro-tint: rgba(248, 113, 113, .14);  --erro-tx: #FCA5A5;       --erro-borda: rgba(248, 113, 113, .45);
    --neutro-tint: #264064;                 --neutro-tx: #C9D4E6;

    --c-ambar: #FBBF24;
    --c-vermelho: #F87171;

    --topo-bg: #101F38;
    --hero-bg: #172B4D;
    --faixa-bg: #172B4D;
}

/* Sem JavaScript: segue o aparelho (mesmos valores do bloco acima). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --bg: #172B4D; --site-bg: #0F1F3A; --card: #1F3557; --card-2: #1A3050; --borda: #2C4770; --linha: #263F66;
        --sombra: none; --sombra-forte: 0 12px 30px rgba(4, 10, 24, .45);
        --menu-bg: #101F38; --menu-borda: #22385C; --menu-texto: #C9D4E6; --menu-secao: #92A3BF; --menu-hover: #1A3050; --contador-bg: #1F3557;
        --texto: #EEF2F9; --texto-2: #C9D4E6; --texto-suave: #92A3BF;
        --campo-bg: #12223D; --campo-borda: #3A5A86; --trilho: #12223D;
        --link: #4D9BFF; --link-hover: #8CBDFF; --foco: rgba(77, 155, 255, .3);
        --azul-tint: rgba(22, 119, 255, .16); --azul-tint-tx: #4D9BFF; --azul-tint-borda: rgba(22, 119, 255, .45);
        --ok-tint: rgba(19, 185, 129, .14); --ok-tx: #34D399; --ok-borda: rgba(19, 185, 129, .45);
        --aviso-tint: rgba(251, 191, 36, .14); --aviso-tx: #FBBF24; --aviso-borda: rgba(251, 191, 36, .45);
        --erro-tint: rgba(248, 113, 113, .14); --erro-tx: #FCA5A5; --erro-borda: rgba(248, 113, 113, .45);
        --neutro-tint: #264064; --neutro-tx: #C9D4E6;
        --c-ambar: #FBBF24; --c-vermelho: #F87171;
        --topo-bg: #101F38; --hero-bg: #172B4D; --faixa-bg: #172B4D;
    }
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.5;
    color: var(--texto);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--fonte); color: var(--texto); margin: 0 0 .4em; line-height: 1.25; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 16px; font-weight: 600; }
h3 { font-size: 16px; font-weight: 600; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
p { margin: 0 0 .8em; }
.suave { color: var(--texto-suave); }
.secundario { color: var(--texto-2); }
.pequeno { font-size: 13px; }
.direita { text-align: right; }
.centro { text-align: center; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; }
.nowrap { white-space: nowrap; }
.so-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }

/* ---------------------------------------------------------------- botões */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 44px; padding: 10px 18px; border-radius: var(--raio-campo); border: 1px solid transparent;
    font: 600 14px var(--fonte); cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, filter .15s;
    white-space: nowrap; line-height: 1.2;
}
.btn-primario { background: linear-gradient(180deg, var(--azul), var(--azul-forte)); color: #fff; }
.btn-primario:hover { color: #fff; filter: brightness(1.08); }
.btn-leve { background: var(--campo-bg); color: var(--texto); border-color: var(--campo-borda); }
.btn-leve:hover { border-color: var(--azul); color: var(--link); }
.btn-perigo { background: var(--erro-tint); color: var(--erro-tx); border-color: var(--erro-borda); }
.btn-perigo:hover { color: var(--erro-tx); border-color: var(--c-vermelho); }
.btn-sucesso { background: var(--ok-tint); color: var(--ok-tx); border-color: var(--c-verde); }
.btn-sucesso:hover { color: var(--ok-tx); filter: brightness(1.05); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.btn-grande { min-height: 52px; padding: 14px 24px; font-size: 16px; border-radius: 12px; }
.btn-pilula { border-radius: 999px; }
.btn[disabled], .btn.carregando { opacity: .7; pointer-events: none; }
.btn .spinner {
    width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent;
    border-radius: 50%; animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Botão de tema (sol/lua) */
.btn-tema {
    width: 44px; height: 44px; flex: 0 0 44px; border-radius: var(--raio-campo); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--campo-bg); border: 1px solid var(--campo-borda); color: var(--texto);
}
.btn-tema:hover { border-color: var(--azul); }
.btn-tema .sol { display: none; color: #FBBF24; }
:root[data-theme="dark"] .btn-tema .sol { display: block; }
:root[data-theme="dark"] .btn-tema .lua { display: none; }

/* ---------------------------------------------------------------- formulários */
.campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; min-width: 0; }
.campo label { font-weight: 500; font-size: 13px; color: var(--texto-2); }
.campo small { color: var(--texto-suave); font-size: 12px; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=tel], input[type=search],
select, textarea {
    width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--campo-borda); border-radius: var(--raio-campo);
    background: var(--campo-bg); color: var(--texto); font: 400 14px var(--fonte); outline: none;
    transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--texto-suave); }
input:focus, select:focus, textarea:focus { border-color: var(--azul); box-shadow: 0 0 0 4px var(--foco); }
textarea { min-height: 90px; resize: vertical; }
.linha-campos { display: flex; flex-wrap: wrap; gap: 0 16px; }
.linha-campos > .campo { flex: 1 1 200px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 500; margin-bottom: 16px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--azul); }
.acoes-form { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* ---------------------------------------------------------------- alertas */
.alerta { padding: 12px 16px; border-radius: 12px; margin-bottom: 18px; font-weight: 500; border: 1px solid; }
.alerta-sucesso { background: var(--ok-tint); color: var(--ok-tx); border-color: var(--ok-borda); }
.alerta-erro { background: var(--erro-tint); color: var(--erro-tx); border-color: var(--erro-borda); }
.alerta-aviso { background: var(--aviso-tint); color: var(--aviso-tx); border-color: var(--aviso-borda); }
.alerta-info { background: var(--azul-tint); color: var(--azul-tint-tx); border-color: var(--azul-tint-borda); }

/* ---------------------------------------------------------------- selos (badges) */
.badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: middle; letter-spacing: 0;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--ok-tint); color: var(--ok-tx); }
.badge.ok::before { background: var(--c-verde); }
.badge.aviso { background: var(--aviso-tint); color: var(--aviso-tx); }
.badge.erro { background: var(--erro-tint); color: var(--erro-tx); }
.badge.neutro { background: var(--neutro-tint); color: var(--neutro-tx); }
.badge.info { background: var(--azul-tint); color: var(--azul-tint-tx); }
h1 .badge { font-size: 12px; margin-left: 8px; position: relative; top: -3px; }
.ponto-vivo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c-verde); flex: none; }

/* ---------------------------------------------------------------- cartões */
.card {
    background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio);
    box-shadow: var(--sombra); padding: 22px; margin-bottom: 18px; min-width: 0;
}
.card > h2:first-child { margin-bottom: 14px; }
.card-titulo { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 14px; flex-wrap: wrap; }
.card-titulo h2 { margin: 0; }
.card-titulo .esq { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.faixa-ok { border-top: 3px solid var(--c-verde); }
.faixa-aviso { border-top: 3px solid var(--c-ambar); }
.faixa-erro { border-top: 3px solid var(--c-vermelho); }
.grade { display: grid; gap: 16px; }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grade > .card { margin-bottom: 0; }
.mb { margin-bottom: 18px; }
.span-2 { grid-column: span 2; }

/* Indicadores do topo (mesma linguagem dos cartões do programa) */
.destaque {
    background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra);
    padding: 20px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.destaque .icone {
    width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 10px;
    background: var(--azul-tint); color: var(--azul-tint-tx);
}
.destaque .icone svg { width: 20px; height: 20px; }
.destaque .valor { font: 700 28px var(--fonte); letter-spacing: -.02em; line-height: 1.15; color: var(--texto); overflow-wrap: anywhere; }
.destaque .rotulo { color: var(--texto-suave); font-size: 13px; }
.destaque .extra { font-size: 12px; margin-top: 8px; color: var(--texto-suave); display: flex; align-items: center; gap: 6px; }
.destaque .extra.ok { color: var(--ok-tx); }
.destaque.verde .icone { background: var(--ok-tint); color: var(--ok-tx); }
.destaque.ambar .icone { background: var(--aviso-tint); color: var(--aviso-tx); }
.destaque.vermelho .icone { background: var(--erro-tint); color: var(--erro-tx); }

/* Dados em pares rótulo/valor */
.dados { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 24px; }
.dados .rotulo { font-size: 12px; color: var(--texto-suave); font-weight: 500; }
.dados .valor { font: 600 16px var(--fonte); margin-top: 2px; color: var(--texto); }

/* Barra fina de consumo/limite */
.barra { height: 8px; background: var(--trilho); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.barra > span { display: block; height: 100%; background: linear-gradient(90deg, var(--c-verde), var(--azul)); border-radius: 999px; }
.barra.aviso > span { background: var(--c-ambar); }
.barra.erro > span { background: var(--c-vermelho); }

/* Atalhos de prazo (+1, +3, +12 meses) */
.atalhos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.atalhos form { display: inline; }
.atalhos .rot { font-size: 13px; color: var(--texto-suave); margin-right: 4px; }

/* ---------------------------------------------------------------- tabelas */
.barra-tabela { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.barra-tabela form { display: flex; gap: 10px; flex-wrap: wrap; flex: 1 1 420px; }
.barra-tabela input[type=text], .barra-tabela input[type=search] { max-width: 340px; }
.barra-tabela select { max-width: 200px; }
.contador { color: var(--texto-suave); font-size: 13px; font-weight: 500; }
.tabela-wrap { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela-wrap table.tabela { min-width: 600px; }   /* no celular a tabela rola para o lado dentro do cartão */
table.tabela thead th {
    background: transparent; color: var(--texto-suave); text-align: left; font-weight: 600; font-size: 12px;
    padding: 8px 12px; white-space: nowrap; border-bottom: 1px solid var(--borda);
}
table.tabela td { padding: 12px; border-bottom: 1px solid var(--linha); vertical-align: middle; color: var(--texto-2); }
table.tabela tbody tr:last-child td { border-bottom: 0; }
table.tabela tbody tr:hover td { background: var(--card-2); }
table.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabela .principal { font-weight: 600; color: var(--texto); }
table.tabela a.principal:hover { color: var(--link); }
table.tabela .sub { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 1px; }
table.tabela .acoes { text-align: right; white-space: nowrap; }
table.tabela .acoes form { display: inline; }
table.tabela .vivo { color: var(--ok-tx); font-weight: 600; }

.vazio {
    text-align: center; padding: 36px 20px; color: var(--texto-suave);
    border: 1px dashed var(--campo-borda); border-radius: var(--raio); background: var(--card-2);
}
.vazio p { margin-bottom: 14px; }
.vazio p:last-child { margin-bottom: 0; }

/* Lista de faturas a vencer (visão geral) */
.lista-faturas { display: flex; flex-direction: column; }
.lista-faturas .item-fatura { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 4px; border-bottom: 1px solid var(--linha); }
.lista-faturas .item-fatura:last-child { border-bottom: 0; }
.lista-faturas .quem { display: flex; flex-direction: column; flex: 1 1 220px; min-width: 0; }
.lista-faturas .quem a { font-weight: 600; color: var(--texto); }
.lista-faturas .quem a:hover { color: var(--link); }
.lista-faturas .quem span { font-size: 12px; color: var(--texto-suave); }
.lista-faturas .valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.lista-faturas form { display: inline; }

/* =====================================================================
   Layout do PAINEL (menu lateral)
   ===================================================================== */
/* O fundo da coluna do menu vai até o fim da página, mesmo em páginas longas. */
.app { display: flex; min-height: 100vh; background: linear-gradient(to right, var(--menu-bg) 264px, var(--menu-borda) 264px, var(--menu-borda) 265px, transparent 265px); }
.menu {
    width: 264px; flex: 0 0 264px; background: var(--menu-bg); border-right: 1px solid var(--menu-borda); color: var(--menu-texto);
    display: flex; flex-direction: column; padding: 22px 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px 22px; color: var(--texto); text-decoration: none; }
.marca:hover { color: var(--texto); }
.marca strong { font: 700 17px var(--fonte); letter-spacing: -.01em; display: block; color: var(--texto); }
.marca small { color: var(--texto-suave); font-size: 12px; display: block; }
.logo { width: 40px; height: 40px; flex: 0 0 40px; display: block; border-radius: 10px; box-shadow: 0 4px 12px rgba(19,185,129,.18); }
.logo img { width: 40px; height: 40px; display: block; border-radius: 10px; }
.marca strong .nex { color: #13B981; }
.menu .secao { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--menu-secao); padding: 16px 12px 6px; }
.menu .item {
    display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 10px;
    color: var(--menu-texto); font-weight: 500; font-size: 14px; margin-bottom: 2px;
}
.menu .item svg { width: 18px; height: 18px; flex: 0 0 18px; }
.menu .item:hover { background: var(--menu-hover); color: var(--texto); }
.menu .item.ativo { background: var(--azul); color: #fff; font-weight: 600; }
.menu .item .num {
    margin-left: auto; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px;
    background: var(--contador-bg); color: var(--menu-texto);
}
.menu .item .num.aviso { background: var(--aviso-tint); color: var(--aviso-tx); }
.menu .item .num.vivo { background: transparent; color: var(--ok-tx); display: inline-flex; align-items: center; gap: 6px; padding-right: 2px; }
.menu .item.ativo .num { background: rgba(255, 255, 255, .22); color: #fff; }
.menu .item.ativo .num.vivo { background: transparent; color: #fff; }
.menu .rodape { margin-top: auto; padding-top: 16px; }
.menu .usuario {
    display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px;
    background: var(--bg); border: 1px solid var(--menu-borda);
}
.menu .avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--azul-tint); color: var(--azul-tint-tx); }
.menu .usuario .quem { min-width: 0; flex: 1; font-size: 12px; color: var(--texto-suave); }
.menu .usuario .quem strong { display: block; font-size: 13px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .usuario .quem span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu .usuario a.quem { display: block; text-decoration: none; border-radius: 8px; }
.menu .usuario a.quem:hover strong { color: var(--link); }
.menu .usuario form { display: contents; }
.btn-icone {
    width: 36px; height: 36px; flex: 0 0 36px; border-radius: 9px; cursor: pointer; display: grid; place-items: center;
    background: var(--campo-bg); border: 1px solid var(--campo-borda); color: var(--texto-2);
}
.btn-icone:hover { border-color: var(--azul); color: var(--link); }
.menu .linha-tema { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px 12px; font-size: 13px; color: var(--menu-secao); }
.menu .linha-tema .btn-tema { width: 36px; height: 36px; flex-basis: 36px; border-radius: 9px; }

.principal-app { flex: 1; min-width: 0; padding: 28px 36px 40px; }
.cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.cabecalho-pagina > div:first-child { flex: 1 1 320px; min-width: 0; }
.cabecalho-pagina h1 { margin-bottom: 4px; }
.cabecalho-pagina p { color: var(--texto-suave); margin: 0; font-size: 14px; }
.cabecalho-pagina .acoes { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cabecalho-pagina .busca { flex: 0 1 300px; min-width: 200px; }
.trilha { font-size: 13px; color: var(--texto-suave); margin-bottom: 8px; }
.trilha a { color: var(--link); }

.topo-mobile { display: none; }

/* =====================================================================
   Site PÚBLICO
   ===================================================================== */
.site { background: var(--site-bg); }
.site-topo { background: var(--topo-bg); border-bottom: 1px solid var(--borda); position: sticky; top: 0; z-index: 10; }
.site-topo .conteudo { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; }
.site-topo .marca { padding: 0; }
.site-topo nav { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.site-topo nav a.link { color: var(--texto-2); font-weight: 500; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.site-topo nav a.link:hover { color: var(--link); background: var(--azul-tint); }
.site-topo .btn-tema { width: 40px; height: 40px; flex-basis: 40px; }
.conteudo { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.hero { background: var(--hero-bg); border-bottom: 1px solid var(--borda); padding: 72px 0 80px; }
.hero .conteudo { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.hero .texto { flex: 1 1 440px; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.hero h1 { font-size: 52px; line-height: 1.08; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.hero p { color: var(--texto-2); font-size: 18px; line-height: 1.6; max-width: 540px; margin: 0; }
.hero .acoes { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .nota { font-size: 13px; color: var(--texto-suave); }
.selo-teste { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ok-tx); background: var(--ok-tint); border: 1px solid var(--ok-borda); border-radius: 999px; padding: 6px 12px; }

/* Janela do programa (sempre escura, como o programa) */
.janela-app {
    flex: 1 1 420px; max-width: 520px; background: #172B4D; color: #EEF2F9; border: 1px solid #34507C;
    border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px rgba(4, 10, 24, .35);
}
.janela-app .abas { height: 40px; background: #101F38; display: flex; align-items: flex-end; gap: 6px; padding: 0 12px; }
.janela-app .aba { height: 28px; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 12px; color: #92A3BF; }
.janela-app .aba.atual { background: #172B4D; color: #EEF2F9; border-radius: 8px 8px 0 0; }
.janela-app .botoes { margin-left: auto; align-self: center; display: flex; gap: 14px; color: #92A3BF; font-size: 12px; }
.janela-app .corpo { padding: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.janela-app .bloco { background: #1F3557; border: 1px solid #2C4770; border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.janela-app .rot { font-size: 11px; font-weight: 600; letter-spacing: .08em; color: #92A3BF; }
.janela-app .id { font-size: 24px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.janela-app .senha { font-size: 18px; font-weight: 700; color: #C9D4E6; font-variant-numeric: tabular-nums; }
.janela-app .online { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #34D399; }
.janela-app .falso-campo { height: 38px; border-radius: 9px; border: 1px solid #3A5A86; background: #12223D; display: flex; align-items: center; padding: 0 10px; font-size: 14px; font-variant-numeric: tabular-nums; }
.janela-app .falso-botao { height: 38px; border-radius: 9px; background: linear-gradient(180deg, #1677FF, #0B5BD6); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }

.secao-site { padding: 72px 0; }
.secao-site.faixa { background: var(--faixa-bg); border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.secao-site h2.titulo { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.secao-site p.subtitulo { color: var(--texto-2); max-width: 640px; margin: 0 0 32px; font-size: 16px; }
.secao-site .centro h2.titulo, .secao-site .centro p.subtitulo { margin-left: auto; margin-right: auto; text-align: center; }
.recursos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.recurso { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 22px; box-shadow: var(--sombra); }
.recurso .icone { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 12px; background: var(--azul-tint); color: var(--azul-tint-tx); }
.recurso .icone.verde { background: var(--ok-tint); color: var(--ok-tx); }
.recurso .icone svg { width: 20px; height: 20px; }
.recurso h3 { margin-bottom: 6px; }
.recurso p { color: var(--texto-2); margin: 0; font-size: 14px; line-height: 1.55; }

.planos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.plano { background: var(--card); border: 1px solid var(--borda); border-radius: 18px; padding: 26px; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.plano.destaque-plano { border: 2px solid var(--azul); box-shadow: var(--sombra-forte); }
.plano .cabeca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plano .cabeca h3 { margin: 0; font-size: 18px; }
.plano .marcador { font-size: 12px; font-weight: 600; color: #fff; background: var(--azul); border-radius: 999px; padding: 3px 10px; }
.plano .preco { font: 800 36px var(--fonte); letter-spacing: -.03em; margin: 12px 0 2px; color: var(--texto); }
.plano .preco small { font: 500 14px var(--fonte); color: var(--texto-suave); letter-spacing: 0; }
.plano ul { list-style: none; padding: 0; margin: 14px 0 22px; color: var(--texto-2); font-size: 14px; }
.plano li { padding: 5px 0 5px 26px; position: relative; }
.plano li::before { content: "✓"; position: absolute; left: 0; color: var(--ok-tx); font-weight: 800; }
.plano .btn { margin-top: auto; }

.downloads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.download-card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 26px; box-shadow: var(--sombra); }
.download-card .tam { color: var(--texto-suave); font-size: 13px; font-weight: 600; }
.passos { counter-reset: passo; list-style: none; padding: 0; margin: 0; }
.passos li { counter-increment: passo; padding: 0 0 14px 44px; position: relative; color: var(--texto-2); }
.passos li::before {
    content: counter(passo); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%;
    background: var(--azul-tint); color: var(--azul-tint-tx); font-weight: 700; display: grid; place-items: center; font-size: 14px;
}

.auth { min-height: calc(100vh - 70px - 74px); display: grid; place-items: center; padding: 40px 16px; background: var(--bg); }
.auth .card { width: 100%; max-width: 440px; padding: 32px; }
.auth h1 { font-size: 24px; }

.site-rodape { background: var(--site-bg); border-top: 1px solid var(--borda); color: var(--texto-suave); padding: 26px 0; font-size: 13px; }
.site-rodape .conteudo { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.site-rodape a { color: var(--texto-suave); }
.site-rodape a:hover { color: var(--link); }

/* Pix */
.pix { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--card-2); border: 1px dashed var(--campo-borda); border-radius: 12px; padding: 14px 16px; }
.pix .chave { font: 700 17px "Cascadia Mono", Consolas, monospace; word-break: break-all; flex: 1 1 220px; color: var(--texto); }

/* Rosca (SVG) */
.rosca-legenda { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.rosca-legenda li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--texto-2); }
.rosca-legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.rosca-legenda a { color: inherit; }
.rosca-legenda a:hover { color: var(--link); }
.rosca-legenda b { margin-left: auto; color: var(--texto); }
.rosca-wrap { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.cor-ok { background: var(--c-verde); }
.cor-aviso { background: var(--c-ambar); }
.cor-erro { background: var(--c-vermelho); }

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 1100px) {
    .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grade-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grade-3 > .span-2 { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .app { display: block; }
    .menu { position: fixed; inset: 0 auto 0 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; height: 100%; }
    .app.menu-aberto .menu { transform: none; box-shadow: 20px 0 40px rgba(0, 0, 0, .3); }
    .topo-mobile {
        display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--menu-bg);
        border-bottom: 1px solid var(--menu-borda); padding: 10px 16px; position: sticky; top: 0; z-index: 20;
    }
    .topo-mobile .marca { padding: 0; }
    .topo-mobile .acoes { display: flex; gap: 8px; }
    .topo-mobile .btn-tema { width: 40px; height: 40px; flex-basis: 40px; }
    .topo-mobile button.abrir { min-height: 40px; background: var(--campo-bg); border: 1px solid var(--campo-borda); color: var(--texto); border-radius: 10px; padding: 0 12px; font: 600 14px var(--fonte); cursor: pointer; }
    .principal-app { padding: 20px 16px 32px; }
    .grade-2, .grade-3 { grid-template-columns: minmax(0, 1fr); }
    .span-2 { grid-column: auto; }
    .hero { padding: 48px 0 56px; }
    .hero h1 { font-size: 36px; }
    .downloads { grid-template-columns: 1fr; }
    .recursos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app { background: none; }
    .site-topo nav .ocultar-mobile { display: none; }
}
@media (max-width: 560px) {
    .grade-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .destaque { padding: 14px; }
    .destaque .icone { width: 34px; height: 34px; margin-bottom: 8px; }
    .destaque .valor { font-size: 20px; }
    .recursos { grid-template-columns: minmax(0, 1fr); }
    .site-topo nav .link.ocultar-celular { display: none; }
    h1 { font-size: 24px; }
    .card { padding: 18px; }
    .conteudo { padding: 0 16px; }
    .site-topo .marca small { display: none; }
    .hero h1 { font-size: 32px; }
    .janela-app .corpo { grid-template-columns: 1fr; }
    .secao-site { padding: 52px 0; }
    .cabecalho-pagina .busca { flex-basis: 100%; }
}