/* Base visual dos dois sites. Tokens, tipografia e componentes. O que é de uma página só fica no CSS do site. */

@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../fonts/bricolage-grotesque.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "Caveat";
    src: url("../fonts/caveat.woff2") format("woff2-variations");
    font-weight: 400 700;
    font-display: swap;
}

/* ---------- tokens ---------- */

:root {
    color-scheme: light;

    --fundo: #f4f1ec;
    --fundo-alt: #ebe6df;
    --superficie: #ffffff;
    --superficie-2: #f1ede7;
    --borda: rgba(30, 20, 10, 0.09);
    --borda-forte: rgba(30, 20, 10, 0.18);
    --texto: #181512;
    --texto-suave: #5f574e;

    --destaque: #ff5a1f;
    --sobre-destaque: #170a04;
    --destaque-texto: #b83a0c;
    --destaque-suave: rgba(255, 90, 31, 0.12);

    --invertido: #181512;
    --sobre-invertido: #f7f3ee;
    --invertido-suave: #ada59b;
    --invertido-superficie: #26231f;
    --invertido-borda: rgba(255, 240, 225, 0.16);

    --ok: #0e7a4b;
    --ok-suave: rgba(14, 122, 75, 0.12);
    --espera: #8a5300;
    --espera-suave: rgba(230, 150, 0, 0.16);
    --andamento: #2f5fd0;
    --andamento-suave: rgba(47, 95, 208, 0.12);
    --erro: #c0263f;
    --erro-suave: rgba(192, 38, 63, 0.1);

    /* O finance pinta receita, despesa e investimento sempre com estas três. */
    --receita: var(--ok);
    --receita-suave: var(--ok-suave);
    --despesa: var(--destaque);
    --despesa-suave: var(--destaque-suave);
    --investimento: var(--andamento);
    --investimento-suave: var(--andamento-suave);

    --papel: #fff8dc;
    --papel-tinta: #2b3a67;
    --papel-linha: rgba(43, 58, 103, 0.18);

    --sombra: 0 1px 2px rgba(30, 20, 10, 0.05), 0 30px 60px -40px rgba(30, 20, 10, 0.35);
    --sombra-flutuante: 0 24px 60px -20px rgba(30, 20, 10, 0.45);
    --fundo-gaveta: rgba(16, 15, 14, 0.55);
    --foco: 0 0 0 3px color-mix(in srgb, var(--destaque) 45%, transparent);

    --fonte-titulo: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
    --fonte-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --fonte-mao: "Caveat", "Segoe Print", cursive;
    --fonte-codigo: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --raio: 28px;
    --raio-medio: 20px;
    --raio-pequeno: 14px;
    --largura: 1200px;
    --respiro: 20px;
    --espaco-topo: clamp(24px, 4vw, 44px);
    --espaco-rodape: clamp(48px, 7vw, 80px);
    --transicao: 160ms ease;
}

:root[data-tema="escuro"] {
    color-scheme: dark;

    --fundo: #100f0e;
    --fundo-alt: #171513;
    --superficie: #1c1a17;
    --superficie-2: #26231f;
    --borda: rgba(255, 240, 225, 0.09);
    --borda-forte: rgba(255, 240, 225, 0.18);
    --texto: #f7f3ee;
    --texto-suave: #ada59b;

    --destaque-texto: #ff8350;
    --destaque-suave: rgba(255, 90, 31, 0.16);

    --invertido: #f7f3ee;
    --sobre-invertido: #171513;
    --invertido-suave: #5f574e;
    --invertido-superficie: #e6dfd6;
    --invertido-borda: rgba(30, 20, 10, 0.16);

    --ok: #3dd68c;
    --ok-suave: rgba(61, 214, 140, 0.14);
    --espera: #ffc266;
    --espera-suave: rgba(255, 194, 102, 0.14);
    --andamento: #7aa7ff;
    --andamento-suave: rgba(122, 167, 255, 0.14);
    --erro: #ff7a90;
    --erro-suave: rgba(255, 122, 144, 0.14);

    --papel: #2e2a23;
    --papel-tinta: #e8e0d2;
    --papel-linha: rgba(122, 167, 255, 0.22);

    --sombra: 0 30px 60px -40px rgba(0, 0, 0, 0.8);
    --sombra-flutuante: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}

/* Preferência de acessibilidade do finance: borda e texto no máximo, laranja só onde já era. */
:root[data-tema="alto-contraste"] {
    color-scheme: dark;

    --fundo: #000000;
    --fundo-alt: #000000;
    --superficie: #000000;
    --superficie-2: #141414;
    --borda: #ffffff;
    --borda-forte: #ffffff;
    --texto: #ffffff;
    --texto-suave: #ffffff;

    --destaque: #ff7a3d;
    --destaque-texto: #ffb08a;
    --destaque-suave: #2a1206;

    --invertido: #ffffff;
    --sobre-invertido: #000000;
    --invertido-suave: #000000;
    --invertido-superficie: #e5e5e5;
    --invertido-borda: #000000;

    --ok: #5dffb0;
    --ok-suave: #002a16;
    --espera: #ffd166;
    --espera-suave: #2a1f00;
    --andamento: #9cc0ff;
    --andamento-suave: #001a40;
    --erro: #ff9fb0;
    --erro-suave: #33000a;

    --papel: #000000;
    --papel-tinta: #ffffff;
    --papel-linha: #444444;

    --sombra: none;
    --sombra-flutuante: none;
}

/* Sem JavaScript o tema.js não roda, e a página ainda segue o aparelho. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema]) {
        color-scheme: dark;
        --fundo: #100f0e;
        --fundo-alt: #171513;
        --superficie: #1c1a17;
        --superficie-2: #26231f;
        --borda: rgba(255, 240, 225, 0.09);
        --borda-forte: rgba(255, 240, 225, 0.18);
        --texto: #f7f3ee;
        --texto-suave: #ada59b;
        --destaque-texto: #ff8350;
        --invertido: #f7f3ee;
        --sobre-invertido: #171513;
        --invertido-suave: #5f574e;
        --invertido-superficie: #e6dfd6;
    }
}

:root[data-tamanho-fonte="grande"] { font-size: 112.5%; }
:root[data-tamanho-fonte="maior"] { font-size: 125%; }

/* ---------- base ---------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Coluna da altura da tela com o main esticando, para o rodapé ficar no fim mesmo em página curta. */
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte-texto);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--fonte-titulo);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

p { margin: 0; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
code, pre, kbd { font-family: var(--fonte-codigo); font-size: 0.92em; }
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--foco); border-radius: 10px; }

::selection { background: var(--destaque); color: var(--sobre-destaque); }

.so-leitor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- layout ---------- */

body > main { flex: 1 0 auto; width: 100%; }

.conteiner {
    width: 100%;
    max-width: var(--largura);
    margin-inline: auto;
    padding-inline: var(--respiro);
}

.secao { padding-block: 72px; }
.secao-invertida { background: var(--invertido); color: var(--sobre-invertido); }

.pilha { display: flex; flex-direction: column; gap: 14px; }
.linha { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.linha-espacada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* Cartões em grade que quebram sozinhos no celular, sem media query, e esticam quando são poucos. */
.grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(var(--grade-minimo, 300px), 100%), 1fr)); }

.so-celular { display: none !important; }

/* Título da página com a ação ao lado, que continua na mesma linha no celular. */
.cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabecalho-pagina > :first-child { min-width: 0; }
.cabecalho-pagina > :last-child { flex: none; }

.conteiner-estreito { max-width: calc(760px + 2 * var(--respiro)); }

@media (max-width: 640px) {
    .so-celular { display: flex !important; }
    .so-computador { display: none !important; }

    /* Botão de ação do cabeçalho fica só com o ícone, o nome segue no aria-label. */
    .botao.botao-recolhe { width: 44px; min-height: 44px; height: 44px; padding: 0; }
    .botao-recolhe > span { display: none; }
    .secao { padding-block: 56px; }
}

/* ---------- tipografia ---------- */

.titulo-gigante { font-size: clamp(2.6rem, 7.5vw, 6rem); line-height: 0.98; letter-spacing: -0.045em; }
.titulo-grande { font-size: clamp(2.1rem, 5vw, 3.5rem); line-height: 1; letter-spacing: -0.04em; }
.titulo-secao { font-size: clamp(1.9rem, 4.5vw, 3rem); line-height: 1; letter-spacing: -0.04em; }
.titulo-cartao { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }

.rotulo {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--destaque-texto);
}

.texto-suave { color: var(--texto-suave); }
.texto-grande { font-size: clamp(1.06rem, 2vw, 1.25rem); }
.texto-pequeno { font-size: 0.875rem; }
.numero { font-family: var(--fonte-titulo); font-weight: 800; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.tabular { font-variant-numeric: tabular-nums; }
.destaque { color: var(--destaque); }
.secao-invertida .destaque, .cartao-invertido .destaque { color: var(--destaque); }

.marca {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    font-family: var(--fonte-titulo);
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--texto);
}

.marca-ponto { color: var(--destaque); }
.marca-sufixo { font-size: 0.66em; font-weight: 700; letter-spacing: -0.02em; color: var(--texto-suave); }

/* ---------- ícone ---------- */

.icone {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icone-quadro {
    width: 44px;
    height: 44px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--raio-pequeno);
    background: var(--destaque-suave);
    color: var(--destaque-texto);
}

/* ---------- botões ---------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao), transform var(--transicao);
}

.botao:active { transform: scale(0.98); }
.botao:disabled, .botao[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.botao-primario { background: var(--destaque); color: var(--sobre-destaque); }
.botao-primario:hover { background: color-mix(in srgb, var(--destaque) 88%, var(--texto)); }

.botao-escuro { background: var(--texto); color: var(--fundo); }
.botao-escuro:hover { background: color-mix(in srgb, var(--texto) 85%, var(--destaque)); }

.botao-contorno { border-color: currentColor; }
.botao-contorno:hover { background: var(--superficie-2); }
.secao-invertida .botao-contorno:hover, .cartao-invertido .botao-contorno:hover { background: var(--invertido-superficie); }

.botao-perigo { background: var(--erro); color: #ffffff; }

.botao-grande { min-height: 56px; padding: 0 28px; font-size: 1.06rem; }
.botao-bloco { width: 100%; }

.botao-icone {
    width: 44px;
    height: 44px;
    min-height: 0;
    padding: 0;
    flex: none;
    border: 1px solid var(--borda);
    background: var(--superficie);
    color: var(--texto);
}

.botao-icone:hover { border-color: var(--borda-forte); }
.botao-icone-plano { border-color: transparent; background: transparent; }
.botao-icone[aria-current="page"] { border-color: var(--texto); background: var(--texto); color: var(--fundo); }

/* O ícone de sol aparece no escuro e o de lua no claro, só com CSS. */
.icone-lua { display: block; }
.icone-sol { display: none; }
:root[data-tema="escuro"] .icone-lua, :root[data-tema="alto-contraste"] .icone-lua { display: none; }
:root[data-tema="escuro"] .icone-sol, :root[data-tema="alto-contraste"] .icone-sol { display: block; }

/* ---------- chips e controle segmentado ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border: 1.5px solid var(--borda-forte);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao);
}

.chip:hover { border-color: var(--texto); }
.chip[aria-pressed="true"], .chip[aria-current="page"], .chip:has(input:checked) { background: var(--texto); border-color: var(--texto); color: var(--fundo); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip-pequeno { min-height: 40px; padding: 0 14px; }

/* No celular as pílulas quebram linha e repartem a largura, então nenhuma fica cortada na borda. Quatro longas vão de duas em duas. */
@media (max-width: 640px) {
    .chips > .chip { flex: 1 1 auto; justify-content: center; }
    .chips-par { display: grid; grid-template-columns: 1fr 1fr; }
}

.segmentado { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--superficie-2); }

.segmentado > * {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--texto-suave);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.segmentado > [aria-pressed="true"], .segmentado > [aria-current="page"], .segmentado > :has(input:checked) { background: var(--texto); color: var(--fundo); }
.segmentado input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado-bloco { display: flex; }
.segmentado-bloco > * { flex: 1; min-height: 44px; }

/* ---------- cartões ---------- */

.cartao {
    padding: 24px;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
}

.cartao-sombra { box-shadow: var(--sombra); }
.cartao-invertido { border-color: transparent; background: var(--invertido); color: var(--sobre-invertido); }
.cartao-invertido .texto-suave { color: var(--invertido-suave); }
.cartao-destaque { border-color: transparent; background: var(--destaque); color: var(--sobre-destaque); }

/* :where zera a especificidade, senão o display: block passava por cima do flex de quem usa a classe. */
:where(a.cartao) { display: block; }
a.cartao { text-decoration: none; color: inherit; transition: border-color var(--transicao); }
a.cartao:hover { border-color: var(--borda-forte); }

.cartao-cabecalho { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 18px; }

/* ---------- formulário ---------- */

.campo { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.campo > label, .campo-rotulo { font-size: 0.875rem; font-weight: 600; color: var(--texto-suave); }

.entrada {
    width: 100%;
    min-height: 52px;
    padding: 0 18px;
    border: 1px solid var(--borda-forte);
    border-radius: 16px;
    background: var(--fundo);
    color: var(--texto);
    transition: border-color var(--transicao);
}

.entrada:hover { border-color: var(--texto-suave); }
.entrada:focus { outline: none; border-color: var(--destaque); box-shadow: var(--foco); }
.entrada::placeholder { color: var(--texto-suave); opacity: 0.75; }
textarea.entrada { min-height: 140px; padding-block: 14px; resize: vertical; }
select.entrada { appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }

.secao-invertida .entrada, .cartao-invertido .entrada { border-color: var(--invertido-borda); background: var(--invertido-superficie); color: var(--sobre-invertido); }
.secao-invertida .entrada::placeholder, .cartao-invertido .entrada::placeholder { color: var(--invertido-suave); }


/* Busca com a lupa por dentro da pílula. */
.busca {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 18px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto-suave);
}

.busca:focus-within { border-color: var(--destaque); box-shadow: var(--foco); }
.busca input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--texto); }

.interruptor { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border: 1px solid var(--borda-forte); border-radius: 16px; font-weight: 600; cursor: pointer; }
.interruptor input { width: 22px; height: 22px; accent-color: var(--destaque); }

.erro-campo { font-size: 0.8125rem; font-weight: 600; color: var(--erro); }
.erro-campo:empty { display: none; }

/* ---------- selos ---------- */

.selo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--superficie-2);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.selo-ponto::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo-ok { background: var(--ok-suave); color: var(--ok); }
.selo-espera { background: var(--espera-suave); color: var(--espera); }
.selo-andamento { background: var(--andamento-suave); color: var(--andamento); }
.selo-erro { background: var(--erro-suave); color: var(--erro); }
.selo-destaque { background: var(--destaque-suave); color: var(--destaque-texto); }

/* ---------- lista ---------- */

.lista { border: 1px solid var(--borda); border-radius: var(--raio-medio); background: var(--superficie); overflow: hidden; }

.lista-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--borda);
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
}

.lista-item:last-child { border-bottom: 0; }
button.lista-item, a.lista-item { cursor: pointer; }
button.lista-item:hover, a.lista-item:hover { background: var(--superficie-2); }
.lista-item-corpo { flex: 1; min-width: 0; }
.lista-item-titulo { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-item-detalhe { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--texto-suave); }

/* ---------- barras (a largura e a altura vêm do lawllit.js, a CSP não aceita style inline) ---------- */

.barra-trilho { display: block; height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.barra-preenchimento { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--destaque); transition: width 600ms ease; }

.grafico-colunas { display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 20px); height: 200px; }
.grafico-coluna { flex: 1; display: flex; flex-direction: column; gap: 8px; height: 100%; min-width: 0; }
.grafico-barras { flex: 1; display: flex; align-items: flex-end; gap: 4px; }
.grafico-barra { flex: 1; height: 0; min-height: 2px; border-radius: 99px; transition: height 600ms ease; }
.grafico-rotulo { text-align: center; font-size: 0.75rem; font-weight: 600; color: var(--texto-suave); }

.legenda { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--superficie-2); font-size: 0.8125rem; }
.legenda::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor, currentColor); }

.cor-receita { --cor: var(--receita); }
.cor-despesa { --cor: var(--despesa); }
.cor-investimento { --cor: var(--investimento); }
.grafico-barra.cor-receita, .barra-preenchimento.cor-receita { background: var(--receita); }
.grafico-barra.cor-despesa, .barra-preenchimento.cor-despesa { background: var(--despesa); }
.grafico-barra.cor-investimento, .barra-preenchimento.cor-investimento { background: var(--investimento); }
.texto-receita { color: var(--receita); }
.texto-despesa { color: var(--despesa); }
.texto-investimento { color: var(--investimento); }
.texto-ok { color: var(--ok); }
.texto-erro { color: var(--erro); }

/* ---------- estado vazio ---------- */

.estado-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 20px;
    border: 2px dashed var(--borda-forte);
    border-radius: var(--raio-medio);
    color: var(--texto-suave);
    text-align: center;
}

.estado-vazio .icone { width: 2rem; height: 2rem; opacity: 0.6; }

/* ---------- página de erro ---------- */

.erro-pagina { padding-block: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }

/* ---------- avisos ---------- */

.avisos {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(380px, calc(100% - 32px));
}

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--raio-pequeno);
    background: var(--invertido);
    color: var(--sobre-invertido);
    box-shadow: var(--sombra-flutuante);
    font-weight: 600;
    animation: surgir 220ms ease;
}

.aviso .icone { margin-top: 2px; }
.aviso-ok .icone { color: var(--ok); }
.aviso-erro .icone { color: var(--erro); }

/* Aviso que vem do servidor dentro da página, como a mensagem do formulário de contato. */
.alerta { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--raio-pequeno); font-weight: 600; }
.alerta-ok { background: var(--ok-suave); color: var(--ok); }
.alerta-erro { background: var(--erro-suave); color: var(--erro); }
.alerta-info { background: var(--andamento-suave); color: var(--andamento); }

/* ---------- gaveta (dialog nativo): sobe de baixo no celular, abre no centro no computador ---------- */

.gaveta {
    width: min(520px, 100%);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto);
    box-shadow: var(--sombra-flutuante);
    overflow: auto;
}

.gaveta::backdrop { background: var(--fundo-gaveta); }
.gaveta[open] { animation: surgir 220ms ease; }
.gaveta-corpo { display: flex; flex-direction: column; gap: 16px; padding: 20px 20px 24px; }
.gaveta-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gaveta-titulo { font-size: 1.5rem; }

@media (max-width: 640px) {
    .gaveta {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 24px);
        margin: auto 0 0;
        border-radius: var(--raio) var(--raio) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    .gaveta[open] { animation: subir 260ms ease; }
}

/* ---------- topo e navegação ---------- */

.topo { position: relative; z-index: 20; margin-bottom: var(--espaco-topo); }
.topo-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.topo-acoes { display: flex; align-items: center; gap: 8px; }

.menu-pilula { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); }

.menu-pilula a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    color: var(--texto-suave);
    font-weight: 600;
    text-decoration: none;
}

.menu-pilula a:hover { color: var(--texto); }
.menu-pilula a[aria-current="page"] { background: var(--texto); color: var(--fundo); }


/* Barra fixa embaixo no celular, com a ação principal no meio. */
.barra-inferior {
    position: sticky;
    bottom: 0;
    z-index: 30;
    align-items: center;
    justify-content: space-around;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--borda);
    background: var(--superficie);
}

.barra-inferior a {
    min-width: 56px;
    min-height: 48px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--texto-suave);
    font-size: 0.6875rem;
    font-weight: 600;
    text-decoration: none;
}

.barra-inferior a[aria-current="page"] { color: var(--texto); }
.barra-inferior .icone { width: 22px; height: 22px; }

.botao-flutuante {
    width: 56px;
    height: 56px;
    margin-top: -24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--destaque);
    color: var(--sobre-destaque);
    box-shadow: 0 10px 24px -10px var(--destaque);
    cursor: pointer;
}

.botao-flutuante .icone { width: 26px; height: 26px; stroke-width: 2.6; }

.rodape {
    margin-top: var(--espaco-rodape);
    padding-block: 40px calc(28px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--borda);
    color: var(--texto-suave);
    font-size: 0.875rem;
}

/* Página que termina numa seção de fundo próprio, como a home, já se separa do rodapé por ela. */
body:has(> main > .secao:last-child) .rodape { margin-top: 0; }

.rodape-conteudo { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 32px 64px; }
.rodape-marca { display: flex; flex-direction: column; gap: 6px; max-width: 320px; }
.marca-rodape { font-size: 1.25rem; }
.rodape-grupos { display: flex; flex-wrap: wrap; gap: 24px 64px; }
.rodape-grupo { display: flex; flex-direction: column; }
.rodape-grupo-titulo { margin-bottom: 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto); }
.rodape-grupo a { display: inline-flex; align-items: center; min-height: 40px; color: var(--texto-suave); text-decoration: none; }
.rodape-grupo a:hover { color: var(--texto); text-decoration: underline; }
.rodape-grupo-linha { flex-direction: row; flex-wrap: wrap; gap: 0 24px; }
.rodape-direitos { font-size: 0.8125rem; opacity: 0.8; }

/* No celular tudo fica no eixo do meio, com os grupos lado a lado. */
@media (max-width: 640px) {
    .rodape-conteudo, .rodape-marca, .rodape-grupo { align-items: center; text-align: center; }
    .rodape-grupo-linha { justify-content: center; }
    .rodape-conteudo { flex-direction: column; }
    .rodape-marca { max-width: none; }
    .rodape-grupos { width: 100%; justify-content: space-evenly; gap: 24px; }
}

/* ---------- voltar ao topo ---------- */

.voltar-topo {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 40;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borda-forte);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--texto);
    box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.45);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity var(--transicao), transform var(--transicao), visibility var(--transicao);
}

.voltar-topo.visivel { opacity: 1; visibility: visible; transform: none; }
.voltar-topo:hover { border-color: var(--texto); }
.voltar-topo .icone { width: 22px; height: 22px; stroke-width: 2.4; }

/* ---------- paginação ---------- */

.paginacao { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.paginacao a, .paginacao span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.paginacao a:hover { background: var(--superficie-2); }
.paginacao [aria-current="page"] { background: var(--texto); color: var(--fundo); }

/* ---------- movimento ---------- */

@keyframes surgir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes subir { from { transform: translateY(100%); } to { transform: none; } }

/* O lawllit.js só marca como oculto o que está abaixo da dobra, então a primeira tela nasce pronta. */
[data-revelar] { transition: opacity 500ms ease, transform 500ms ease; }
[data-revelar].oculto { opacity: 0; transform: translateY(16px); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    [data-revelar].oculto { opacity: 1; transform: none; }
}