/* ================================================================
   HorizonCash — CSS ÚNICO (site.css)
   Tokens · base · cabeçalho · menu lateral · componentes · páginas ·
   calculadoras (classes dos fragmentos e das respostas da api/) · rodapé
   ================================================================ */

:root {
    /* Cores do logo: cada uma marca uma categoria. A cheia é fundo de ícone
       (sempre com ícone escuro por cima); a -ink é a versão para texto; a -50
       é a tinta de fundo. */
    --coral: #F03858;
    --coral-50: #FDE8EC;
    --coral-ink: #D42A4A;
    --coral-deep: #A3122E;
    --laranja: #F89800;
    --laranja-50: #FEF1DA;
    --laranja-ink: #8A4B00;
    --azul: #2888E8;
    --azul-50: #E4F0FC;
    --azul-ink: #145BB0;
    --ciano: #48C8E8;
    --ciano-50: #E0F5FA;
    --ciano-ink: #0E6A82;
    --neutro: #EEF0F3;
    --neutro-50: #F1F2F5;

    /* Neutros */
    --ink: #17181C;
    --ink-2: #3A3D47;
    --muted: #55596A;
    --line: #DADDE3;
    --line-soft: #ECEEF2;
    --bg: #FFFFFF;
    --soft: #F6F7F9;
    --soft-2: #F1F2F5;

    /* Blocos escuros (herói, resultados em destaque, rodapé) */
    --painel: #17181C;
    --painel-2: #24262D;
    --painel-linha: #3B3D45;
    --painel-texto: #C9CCD3;
    --sobre-cor: #17181C;

    --font-head: 'Bricolage Grotesque', -apple-system, 'Segoe UI', sans-serif;
    --font-body: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;

    --r-sm: 10px;
    --r: 14px;
    --r-md: 18px;
    --r-lg: 22px;
    --r-xl: 28px;
    --container: 1360px;
    --sombra: 0 10px 30px rgba(23, 24, 28, 0.08);
    --topo-h: 72px;
}

:root[data-theme="dark"] {
    --coral-50: #3A1C23;
    --coral-ink: #FF8197;
    --coral-deep: #FFB3C0;
    --laranja-50: #3A2A12;
    --laranja-ink: #FFC266;
    --azul-50: #16273C;
    --azul-ink: #8EC1FF;
    --ciano-50: #13313A;
    --ciano-ink: #7FDCF2;
    --neutro: #2A2C33;
    --neutro-50: #202127;

    --ink: #ECEDF0;
    --ink-2: #C5C8D0;
    --muted: #9EA3B0;
    --line: #34373F;
    --line-soft: #2A2C33;
    --bg: #121317;
    --soft: #1B1C21;
    --soft-2: #202127;

    --painel: #0B0C0F;
    --painel-2: #1B1C21;
    --painel-linha: #34373F;
    --sombra: 0 10px 30px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; scroll-behavior: smooth; scroll-padding-top: calc(var(--topo-h) + 16px); }
body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}
body.menu-aberto { overflow: hidden; }
img, svg, canvas { max-width: 100%; }
img { height: auto; }
a { color: var(--azul-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--font-head); color: var(--ink); line-height: 1.1; letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: var(--r-sm); }
.pular:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* ===== CORES POR CATEGORIA ===== */
.cor-coral   { --c: var(--coral);   --c-50: var(--coral-50);   --c-ink: var(--coral-ink); }
.cor-azul    { --c: var(--azul);    --c-50: var(--azul-50);    --c-ink: var(--azul-ink); }
.cor-laranja { --c: var(--laranja); --c-50: var(--laranja-50); --c-ink: var(--laranja-ink); }
.cor-ciano   { --c: var(--ciano);   --c-50: var(--ciano-50);   --c-ink: var(--ciano-ink); }
.cor-neutro  { --c: var(--neutro);  --c-50: var(--neutro-50);  --c-ink: var(--ink); }
.cor-tinta   { --c: var(--ink);     --c-50: var(--soft-2);     --c-ink: var(--ink); }

/* Quadrado de ícone: cor cheia da categoria com ícone escuro (contraste em qualquer tema). */
.ico {
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; font-size: 19px;
    background: var(--c, var(--neutro)); color: #17181C;
}
.cor-neutro .ico { color: var(--ink); }
.cor-tinta .ico { color: var(--bg); }
.ico-sm { width: 34px; height: 34px; border-radius: 10px; font-size: 15px; }
.ico-lg { width: 60px; height: 60px; border-radius: 18px; font-size: 26px; }
.ponto { width: 12px; height: 12px; border-radius: 999px; background: var(--c, var(--ink)); display: inline-block; flex-shrink: 0; }
.cor-neutro .ponto { background: var(--ink); }

/* ===== BOTÕES ===== */
.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 46px; padding: 0 22px; border-radius: 999px; border: 0;
    font-weight: 700; font-size: 15px; cursor: pointer; text-decoration: none !important;
    transition: transform .15s, background .15s;
}
.botao:active { transform: translateY(1px); }
.botao-tinta { background: var(--ink); color: var(--bg); }
.botao-tinta:hover { background: var(--ink-2); }
.botao-coral { background: var(--coral); color: #17181C; }
.botao-coral:hover { background: #F25A75; }
.botao-contorno { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.botao-contorno:hover { border-color: var(--ink); }
.botao-icone {
    width: 44px; height: 44px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink);
    cursor: pointer; font-size: 17px; text-decoration: none !important;
}
.botao-icone:hover { border-color: var(--ink); }
.link-sublinhado { font-weight: 700; font-size: 15px; color: var(--ink); border-bottom: 2px solid var(--c, var(--coral)); text-decoration: none !important; padding-bottom: 1px; }
.cor-neutro .link-sublinhado { border-color: var(--ink); }
.link-botao { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; }

/* ===== LISTRAS DO LOGO ===== */
.listras { display: flex; height: 6px; }
.listras span { flex: 1; }
.listras span:nth-child(1) { background: var(--coral); }
.listras span:nth-child(2) { background: var(--laranja); }
.listras span:nth-child(3) { background: var(--ciano); }
.listras span:nth-child(4) { background: var(--azul); }

/* ===== CABEÇALHO ===== */
.topo { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: 1px solid var(--line-soft); }
.topo-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; height: var(--topo-h); display: flex; align-items: center; gap: 16px; }
.logo { display: flex; flex-shrink: 0; }
.logo svg { height: 32px; width: auto; display: block; color: var(--ink); }
.menu-toggle { display: none; }
.topo-acoes { display: flex; gap: 8px; margin-left: auto; align-items: center; }
.busca-atalho { display: none; }
.pg-home .busca-topo { display: none; }
.pg-home .busca-atalho { display: inline-flex; }

.busca-topo { position: relative; flex: 1 1 200px; max-width: 520px; margin-left: 24px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 999px; padding: 0 16px; background: var(--bg); }
.busca-topo:focus-within { border-color: var(--ink); }
.busca-topo > i { color: var(--muted); }
.busca-topo input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 11px 0; font-size: 16px; }

.busca-sugestoes {
    position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 50;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sombra);
    padding: 6px; display: flex; flex-direction: column; max-height: 420px; overflow: auto; text-align: left;
}
.busca-sugestoes a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink); text-decoration: none; }
.busca-sugestoes a:hover, .busca-sugestoes a.ativa { background: var(--soft); }
.busca-sugestoes a strong { display: block; font-size: 15px; }
.busca-sugestoes a small { color: var(--muted); font-size: 13px; }
.busca-sugestoes .busca-todas { justify-content: center; font-weight: 700; font-size: 14px; border-top: 1px solid var(--line-soft); border-radius: 0 0 12px 12px; }
.busca-sugestoes p { padding: 12px; color: var(--muted); font-size: 14px; }

/* Busca em modal (ícone do topo) */
.busca-modal {
    width: min(640px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: 10vh auto auto; padding: 0;
    border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); color: var(--ink); box-shadow: var(--sombra); overflow: hidden;
}
.busca-modal::backdrop { background: rgba(23, 24, 28, 0.55); }
.busca-modal form { display: flex; flex-direction: column; max-height: inherit; }
.busca-modal-campo { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 18px; }
.busca-modal-campo > i { color: var(--muted); }
.busca-modal-campo input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 10px 0; font-size: 17px; }
.busca-modal-campo input::-webkit-search-cancel-button { display: none; }
.busca-modal .busca-sugestoes { position: static; flex: 1; min-height: 0; max-height: none; border: 0; border-top: 1px solid var(--line-soft); border-radius: 0; box-shadow: none; }
body:has(.busca-modal[open]) { overflow: hidden; }

/* ===== LAYOUT E MENU LATERAL ===== */
.layout { max-width: var(--container); margin: 0 auto; padding: 24px; display: flex; gap: 28px; align-items: flex-start; }
.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px; }

.lateral {
    flex: 0 0 250px; position: sticky; top: calc(var(--topo-h) + 24px);
    max-height: calc(100vh - var(--topo-h) - 48px); overflow-y: auto;
    background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-lg);
    padding: 14px; display: flex; flex-direction: column; gap: 4px;
}
.lateral-topo { display: none; }
.lateral-rotulo { margin: 14px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lateral-item { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--r); color: var(--ink); font-weight: 600; font-size: 15px; text-decoration: none !important; }
.lateral-item:hover { background: var(--soft); }
.lateral-item.ativo { background: var(--c-50); font-weight: 700; }
.lateral-nome { flex: 1; }
.lateral-total { font-size: 13px; font-weight: 600; color: var(--muted); }
.lateral-item.ativo .lateral-total { color: var(--ink); }
.lateral-divisa { margin: 10px 4px; border-color: var(--line-soft); }
.lateral-link { padding: 7px 10px; border-radius: var(--r-sm); color: var(--ink-2); font-size: 14px; }
.lateral-link:hover { background: var(--soft); text-decoration: none; }
.lateral-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 59; }

/* ===== SEÇÕES E GRADES ===== */
.secao { display: flex; flex-direction: column; gap: 16px; }
.secao-cabeca { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.secao-titulo { font-size: 28px; font-weight: 800; }
.secao-titulo.com-ponto { display: flex; align-items: center; gap: 12px; font-size: 24px; }
.secao-nota { color: var(--muted); font-size: 15px; }
.grade { display: grid; gap: 12px; }
.grade-200 { grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); }
.grade-220 { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
.grade-240 { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.grade-260 { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.grade-280 { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 16px; }

/* Cartões */
.atalho, .cartao, .cartao-ferramenta, .assunto, .tinta, .cartao-artigo { text-decoration: none !important; color: var(--ink); transition: transform .15s, border-color .15s; }
.atalho { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); font-weight: 700; font-size: 16px; }
.atalho .ico { width: 40px; height: 40px; font-size: 17px; }
.cartao { border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.cartao strong { font-family: var(--font-head); font-size: 18px; line-height: 1.25; }
.cartao-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--ink-2); }
.cartao-sub .ponto { width: 10px; height: 10px; }
.cartao-ferramenta { border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.cartao-ferramenta strong { font-family: var(--font-head); font-size: 18px; line-height: 1.25; }
.cartao-ferramenta span { color: var(--muted); font-size: 15px; line-height: 1.5; }
.tinta { background: var(--c-50, var(--soft)); border-radius: 16px; padding: 18px; font-weight: 700; font-size: 16px; }
.assunto { background: var(--c-50); border-radius: var(--r-md); padding: 18px 20px; display: flex; align-items: center; gap: 14px; }
.assunto .ico { width: 40px; height: 40px; font-size: 17px; }
.assunto-nome { flex: 1; font-family: var(--font-head); font-weight: 700; font-size: 19px; }
.assunto-total { font-size: 14px; font-weight: 700; }
.cartao-artigo { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.cartao-artigo img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--soft); }
.cartao-artigo strong { font-family: var(--font-head); font-size: 19px; line-height: 1.25; padding: 16px 18px 6px; }
.cartao-artigo span { padding: 0 18px 18px; color: var(--muted); font-size: 15px; }
.atalho:hover, .cartao:hover, .cartao-ferramenta:hover, .cartao-artigo:hover { border-color: var(--ink); }
.tinta:hover, .assunto:hover { transform: translateY(-2px); }

/* ===== HOME ===== */
.hero {
    background: var(--painel); color: #FFFFFF; border-radius: var(--r-xl);
    padding: 56px 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 32px; overflow: hidden; position: relative;
}
.hero-texto { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.hero-sobre { font-size: 15px; font-weight: 600; color: var(--ciano); }
.hero h1 { color: #FFFFFF; font-size: clamp(38px, 5vw, 56px); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; }
.hero h1 span { color: var(--laranja); }
.hero-lead { font-size: 18px; line-height: 1.55; color: var(--painel-texto); max-width: 540px; }
.busca-hero { position: relative; display: flex; align-items: center; gap: 8px; background: #FFFFFF; color: #17181C; border-radius: 999px; padding: 6px 6px 6px 20px; max-width: 560px; }
.busca-hero > i { color: #55596A; }
.busca-hero input { flex: 1; min-width: 0; width: 100%; border: 0; outline: none; background: transparent; padding: 12px 0; font-size: 17px; color: #17181C; }
.busca-hero .botao { min-height: 48px; }
.busca-hero .busca-sugestoes { color: var(--ink); }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-chips a { font-size: 14px; font-weight: 600; color: #FFFFFF; border: 1px solid var(--painel-linha); border-radius: 999px; padding: 8px 14px; text-decoration: none; }
.hero-chips a:hover { border-color: #FFFFFF; }
.hero-listras { flex: 0 1 320px; height: 320px; position: relative; }
.hero-listras span { position: absolute; top: 120px; width: 300px; height: 56px; border-radius: 999px; transform: rotate(-38deg); }
.hero-listras span:nth-child(1) { left: 10px; background: var(--coral); }
.hero-listras span:nth-child(2) { left: 45px; background: var(--laranja); transform: rotate(-38deg) translateY(66px); }
.hero-listras span:nth-child(3) { left: 80px; background: var(--ciano); transform: rotate(-38deg) translateY(132px); }
.hero-listras span:nth-child(4) { left: 115px; background: var(--azul); transform: rotate(-38deg) translateY(198px); }

.rapido { display: flex; flex-wrap: wrap; gap: 16px; align-items: stretch; }
.rapido > .grade { flex: 3 1 420px; align-content: start; }
.pct-rapida { flex: 2 1 300px; background: var(--soft); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.pct-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pct-topo h3 { font-size: 20px; font-weight: 800; }
.pct-topo .link-sublinhado { border-color: var(--laranja); }
.pct-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-2); }
.pct-linha input { width: 72px; font-size: 16px; font-weight: 700; text-align: right; padding: 8px 10px; border: 2px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--ink); }
.pct-linha input.largo { width: 104px; }
.pct-linha input:focus { outline: none; border-color: var(--ink); }
.pct-resultado { font-family: var(--font-head); font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }

.faixa-cartoes { background: var(--laranja-50); border-radius: var(--r-xl); padding: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.faixa-texto { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.faixa-texto h2 { font-size: 34px; font-weight: 800; }
.faixa-texto p { font-size: 17px; color: var(--ink-2); }
.faixa-desenho { flex: 0 1 300px; height: 180px; position: relative; }
.faixa-desenho span { position: absolute; width: 200px; height: 126px; border-radius: 16px; }
.faixa-desenho span:nth-child(1) { left: 0; top: 36px; background: var(--azul); transform: rotate(-10deg); }
.faixa-desenho span:nth-child(2) { left: 46px; top: 22px; background: var(--ciano); transform: rotate(-2deg); }
.faixa-desenho span:nth-child(3) { left: 92px; top: 14px; background: var(--coral); transform: rotate(7deg); }

/* ===== TOPO DAS PÁGINAS INTERNAS ===== */
.banda { background: var(--c-50, var(--soft)); border-radius: var(--r-xl); padding: 32px 40px 36px; display: flex; flex-direction: column; gap: 14px; }
.banda.cor-neutro { background: var(--soft); }
.banda h1 { font-size: clamp(32px, 4vw, 46px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 800; }
.banda-titulo { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.banda-lead { font-size: 18px; line-height: 1.55; color: var(--ink-2); max-width: 720px; }
.banda-meta { font-size: 14px; color: var(--ink-2); }
.banda-meta a { color: var(--ink); font-weight: 600; text-decoration: underline; }
.trilha { font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px; }
.trilha a { color: var(--ink); font-weight: 600; }

.pilulas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -16px; }
.pilulas a { font-size: 14px; font-weight: 700; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; text-decoration: none; }
.pilulas a:hover { border-color: var(--ink); }

/* ===== LISTA DE FERRAMENTAS (categoria e busca) ===== */
.lista-ferramentas { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.lista-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.campo-filtro { flex: 1 1 260px; max-width: 420px; display: flex; align-items: center; gap: 8px; border: 2px solid var(--line); border-radius: 999px; padding: 0 16px; background: var(--bg); }
.campo-filtro:focus-within { border-color: var(--ink); }
.campo-filtro > i { color: var(--muted); }
.campo-filtro input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 11px 0; font-size: 16px; }
.campo-filtro-solto { flex: none; width: 100%; max-width: 520px; margin-top: -16px; }
.alternador { display: flex; gap: 4px; background: var(--soft-2); border-radius: 999px; padding: 4px; }
.alternador button { padding: 8px 16px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer; min-height: 40px; background: transparent; color: var(--ink-2); }
.alternador button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.lista { list-style: none; margin: 0; padding: 0; counter-reset: item; }
.lista li { counter-increment: item; }
.lista li + li { border-top: 1px solid var(--line-soft); }
.lista li[hidden] { display: none; }
.lista a { display: flex; align-items: center; gap: 18px; padding: 16px 22px; color: var(--ink); text-decoration: none; }
.lista a:hover { background: var(--soft); }
.lista a > i { color: var(--muted); }
.lista-num::before { content: counter(item, decimal-leading-zero); font-family: var(--font-head); font-size: 16px; font-weight: 800; color: var(--c-ink, var(--coral-ink)); min-width: 26px; display: inline-block; }
.lista-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lista-texto strong { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.25; }
.lista-texto span { font-size: 15px; color: var(--muted); }
.lista-solta { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.selo { font-size: 12px; font-weight: 700; color: var(--coral-deep); background: var(--coral-50); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }
.lista-vazia, .vazio { padding: 32px 20px; text-align: center; color: var(--muted); }
.vazio { display: flex; flex-direction: column; align-items: center; gap: 16px; border: 1px dashed var(--line); border-radius: var(--r-lg); }

/* ===== TEXTO DO POST ===== */
.texto { max-width: 780px; font-size: 17px; line-height: 1.75; color: var(--ink-2); display: flex; flex-direction: column; gap: 16px; }
.texto h2 { font-size: 30px; font-weight: 800; margin-top: 16px; color: var(--ink); }
.texto h3 { font-size: 22px; font-weight: 800; margin-top: 8px; color: var(--ink); }
.texto h4 { font-size: 18px; margin: 4px 0 0; color: var(--ink); }
.texto ul, .texto ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.texto a { color: var(--azul-ink); text-decoration: underline; }
.texto img { border-radius: var(--r); }
.texto blockquote { margin: 0; padding: 16px 20px; background: var(--soft); border-radius: var(--r); }
.texto table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.texto th, .texto td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.texto th { background: var(--soft); color: var(--ink); }
.texto strong, .texto b { color: var(--ink); }
.texto pre { margin: 0; padding: 14px 18px; background: var(--soft); border-radius: var(--r); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; }
.texto code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .92em; color: var(--ink); overflow-wrap: anywhere; }
.texto-data { font-size: 14px; color: var(--muted); }
.capa { margin: 0; }
.capa img { width: 100%; border-radius: var(--r-xl); aspect-ratio: 16 / 9; object-fit: cover; }

.perguntas { max-width: 780px; display: flex; flex-direction: column; gap: 12px; }
.perguntas h2 { font-size: 30px; font-weight: 800; margin-bottom: 6px; }
.perguntas details { background: var(--soft); border-radius: var(--r-md); padding: 18px 22px; }
.perguntas summary { font-size: 17px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.perguntas summary::-webkit-details-marker { display: none; }
.perguntas summary::after { content: "+"; font-family: var(--font-head); font-size: 22px; line-height: 1; color: var(--muted); }
.perguntas details[open] summary::after { content: "−"; }
.resposta { margin-top: 12px; font-size: 16px; line-height: 1.7; color: var(--ink-2); display: flex; flex-direction: column; gap: 10px; }
.resposta p { margin: 0; }

.autor-caixa { max-width: 780px; display: flex; gap: 16px; align-items: flex-start; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); }
.autor-caixa img { width: 64px; height: 64px; border-radius: 999px; object-fit: cover; background: var(--soft); }
.autor-caixa p { color: var(--ink-2); font-size: 15px; }
.autor-caixa .autor-nome { font-weight: 700; font-size: 17px; margin-bottom: 4px; }
.autor-caixa .autor-nome a { color: var(--ink); }
.autor-topo { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.autor-topo img { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; }
.autor-topo > div { display: flex; flex-direction: column; gap: 10px; flex: 1 1 300px; }

/* ===== FORMULÁRIOS ===== */
.formulario { max-width: 780px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.formulario > .grade { width: 100%; }
.campo { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.campo label { font-size: 15px; font-weight: 700; }
.campo input, .campo select, .campo textarea { width: 100%; border: 2px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--bg); font-size: 16px; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--ink); }
.campo textarea { resize: vertical; min-height: 140px; }
.isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario-aviso { padding: 12px 16px; border-radius: var(--r); font-weight: 600; width: 100%; }
.formulario-aviso.ok { background: var(--azul-50); color: var(--azul-ink); }
.formulario-aviso.erro { background: var(--coral-50); color: var(--coral-deep); }
.formulario-nota { font-size: 14px; color: var(--muted); }
.busca-pagina { display: flex; align-items: center; gap: 8px; background: var(--bg); border: 2px solid var(--line); border-radius: 999px; padding: 4px 4px 4px 18px; max-width: 620px; width: 100%; }
.busca-pagina:focus-within { border-color: var(--ink); }
.busca-pagina > i { color: var(--muted); }
.busca-pagina input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; padding: 10px 0; font-size: 16px; }

.erro-404 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; padding: 56px 16px; }
.erro-codigo { font-family: var(--font-head); font-size: clamp(80px, 14vw, 140px); font-weight: 800; line-height: 1; background: linear-gradient(90deg, var(--coral), var(--laranja), var(--ciano), var(--azul)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.erro-404 h1 { font-size: 36px; font-weight: 800; }
.erro-404 p { color: var(--ink-2); font-size: 17px; }

/* ===== ANÚNCIOS ===== */
.anuncio { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed var(--line); border-radius: var(--r-md); text-align: center; min-height: 110px; width: 100%; }
.anuncio-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.anuncio-moldura { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 90px; color: var(--muted); font-size: 13px; background: var(--soft); border-radius: var(--r-sm); }
.anuncio-calculadora { margin: 4px 0; }

/* ===== CALCULADORAS (fragmentos e respostas da api/calculadora.php) ===== */
.ferramenta { display: flex; flex-direction: column; gap: 20px; }
.calculadora__block, section.container__input__calculadora { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.ferramenta form.container__input__calculadora { border: 1px solid var(--line); border-radius: 24px; padding: 26px; background: var(--bg); }
.row__titulo__calculadora { margin-bottom: 18px; }
.row__titulo__calculadora h2 { font-size: 24px; font-weight: 800; }
.row__titulo__calculadora p { color: var(--ink-2); margin-top: 6px; }
.row__input__calculadora { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); align-items: end; }
.row__input__calculadora + .row__input__calculadora { margin-top: 18px; }
.grid-width-100, .buttons__calculadora { grid-column: 1 / -1; }
.input__calculadora { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.titulo__input { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.titulo__input label, .titulo__input span { font-weight: 700; }

.tooltip { position: relative; display: inline-flex; }
.tooltip-icon { margin: 0; width: 18px; height: 18px; border-radius: 999px; background: var(--soft-2); color: var(--muted); cursor: help; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; }
.tooltip-icon::before { content: "?"; }
.tooltiptext, .tooltiptext__table, .tooltiptext__left {
    display: none; position: absolute; z-index: 20; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
    width: max-content; max-width: 260px; padding: 10px 12px; border-radius: 12px;
    background: var(--painel); color: #FFFFFF; font-size: 13px; font-weight: 500; line-height: 1.45; box-shadow: var(--sombra);
}
.tooltip:hover .tooltiptext, .tooltip:focus-within .tooltiptext,
.tooltip:hover .tooltiptext__table, .tooltip:hover .tooltiptext__left { display: block; }

.input__valor { display: flex; align-items: stretch; border: 2px solid var(--line); border-radius: var(--r); background: var(--bg); min-height: 50px; }
.input__valor:focus-within { border-color: var(--ink); }
.cifrao { display: flex; align-items: center; padding-left: 14px; color: var(--muted); font-weight: 600; }
.input__valor input, .input__valor select, .input__calculadora > input, .input__calculadora > select, .input__data, .input__type__number {
    flex: 1; min-width: 0; border: 0; border-radius: var(--r); background: transparent;
    font-family: var(--font-head); font-size: 19px; font-weight: 700; color: var(--ink); padding: 10px 12px;
}
.input__calculadora > input, .input__calculadora > select { border: 2px solid var(--line); min-height: 50px; }
.input__valor input:focus, .input__valor select:focus, .input__calculadora > input:focus, .input__calculadora > select:focus { outline: none; }
.input__calculadora > input:focus, .input__calculadora > select:focus { border-color: var(--ink); }
.input__disabled, .input__valor input:disabled { opacity: .6; }
.selecionar__periodo, .selecionar__periodo__poup { display: flex; border-left: 1px solid var(--line); }
.selecionar__opcoes, .selecionar__opcoes__poup, .selecionar__periodo select { font-family: var(--font-body) !important; font-size: 16px !important; font-weight: 600 !important; padding: 0 12px !important; cursor: pointer; background: transparent; }
.selecionar__uma__opcao { display: flex; flex: 1; width: 100%; min-width: 0; }
.selecionar__uma__opcao select, .select__maior, .select__regra, .select__atividade, .select__correcao__indice { width: 100%; min-width: 0; }
.input__calculadora select option { color: #17181C; }
.holiday_expired { display: flex; flex-wrap: wrap; gap: 10px; }
.holiday_expired label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

.buttons__calculadora { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.button__limpar, .button__calcular { min-height: 48px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.button__limpar { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.button__limpar:hover { border-color: var(--ink); }
.button__calcular { background: var(--ink); color: var(--bg); border: 0; }
.button__calcular:hover { background: var(--ink-2); }
.container__input__calculadora .loading { display: none; }
.loader svg { width: 22px; height: 22px; animation: girar 1s linear infinite; }
.loader circle { stroke-dasharray: 90 150; stroke-dashoffset: 0; }
@keyframes girar { to { transform: rotate(360deg); } }

.simulation-results, .simulation-results-simulation { display: none; flex-direction: column; gap: 16px; width: 100%; overflow-x: auto; }
.simulation-results > .loader { display: flex; justify-content: center; padding: 40px; color: var(--muted); }
.simulation-results > .loader svg { width: 36px; height: 36px; }
.simulation-results-simulation::before { content: "Exemplo"; align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.simulation-page { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg); width: 100%; }
.simulation-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; background: var(--soft); }
.simulation-header .flex { display: flex; align-items: center; gap: 10px; }
.simulation-header-title { font-family: var(--font-head); font-size: 18px; font-weight: 800; }
.share.print .icon, #print { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); background: var(--bg); }
.share.print .icon::before, #print::before { content: "\f02f"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 15px; }
/* Resumo: cada linha se completa sozinha (flex), sem sobrar célula vazia; as divisórias são sombras de 1px. */
.simulation-summary { display: flex; flex-wrap: wrap; }
.summary-item { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px 22px; background: var(--bg); box-shadow: -1px -1px 0 var(--line-soft); }
.simulation-summary .grid-width-100 { flex-basis: 100%; }
.simulation-title { font-size: 13px; color: var(--muted); }
.simulation-value { font-family: var(--font-head); font-size: 20px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; }
.simulation-value.green, .simulation-value .green { font-size: 26px; color: var(--azul-ink); }
.simulation-value.blue, .simulation-value .blue { color: var(--azul-ink); }
.simulation-value.red, .simulation-value .red, .red { color: var(--coral-ink); }
.simulation-icon { width: 40px; height: 40px; }
.simulation-page.alert, .simulation-error, .simulation-results > p, .alert { padding: 16px 20px; border-radius: var(--r); background: var(--coral-50); color: var(--coral-deep); font-weight: 600; border: 0; }

.table-headline { display: flex; padding: 12px 2px 0; }
.table-subtitle { font-family: var(--font-head); font-size: 18px; font-weight: 800; }
.info-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.info-table th { background: var(--soft); font-size: 13px; font-weight: 700; color: var(--ink); padding: 12px 14px; text-align: left; white-space: nowrap; }
.info-table tr:first-child > th:first-child { border-top-left-radius: calc(var(--r-md) - 1px); }
.info-table tr:first-child > th:last-child { border-top-right-radius: calc(var(--r-md) - 1px); }
.info-table td { padding: 11px 14px; border-top: 1px solid var(--line-soft); color: var(--ink-2); text-align: left; vertical-align: top; }
.info-table td b, .info-table td strong { color: var(--ink); }
/* Colunas de número (marcadas pelo site.js): à direita, algarismos da mesma largura e sem quebrar. */
.info-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.info-table tr.destaque td { background: var(--c-50); color: var(--c-ink); font-weight: 700; }
.info-table tr.linha-total td { font-weight: 700; color: var(--ink); }
.info-table tr.linha-total td[colspan]:last-child { text-align: right; }
.tabela-rolagem { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.simulation-page { overflow-x: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.info-note { font-size: 13px; color: var(--muted); text-align: center; padding: 4px 8px; }

.toggle-buttons { display: flex; gap: 4px; background: var(--soft-2); border-radius: 999px; padding: 4px; width: 100%; max-width: 360px; align-self: center; }
.toggle-buttons button { flex: 1; border: 0; border-radius: 999px; padding: 10px 16px; font-weight: 700; font-size: 15px; cursor: pointer; background: transparent; color: var(--ink-2); }
.toggle-buttons button.active { background: var(--ink); color: var(--bg); }
#containerGrafico { display: none; flex-direction: column; gap: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; width: 100%; }
#card-pie { position: relative; height: 260px; }
#card-chart { position: relative; height: 300px; }

/* ===== RODAPÉ ===== */
.rodape { background: var(--painel); color: var(--painel-texto); margin-top: 40px; }
.rodape-inner { max-width: var(--container); margin: 0 auto; padding: 56px 24px 32px; display: flex; flex-wrap: wrap; gap: 48px; }
.rodape-marca { flex: 2 1 280px; display: flex; flex-direction: column; gap: 14px; }
.rodape-marca svg { height: 34px; width: auto; align-self: flex-start; color: #FFFFFF; }
.rodape-marca p { font-size: 15px; line-height: 1.6; max-width: 320px; }
.rodape nav { flex: 1 1 160px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.rodape nav h2 { font-family: var(--font-body); font-size: 14px; letter-spacing: 0; color: #FFFFFF; margin-bottom: 4px; }
.rodape a { color: var(--painel-texto); }
.rodape a:hover { color: #FFFFFF; }
.rodape-base { max-width: var(--container); margin: 0 auto; padding: 20px 24px 32px; border-top: 1px solid var(--painel-linha); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 14px; }
.rodape-base .link-botao { color: #FFFFFF; }

.cookies {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 70; max-width: 760px; margin: 0 auto;
    background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sombra);
    padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.cookies[hidden] { display: none; }
.cookies p { flex: 1 1 320px; font-size: 15px; color: var(--ink-2); }
.cookies-acoes { display: flex; gap: 8px; }

/* ===== RESPONSIVO ===== */
@media (max-width: 1100px) {
    .hero-listras, .faixa-desenho { display: none; }
}
@media (max-width: 900px) {
    .menu-toggle { display: inline-flex; }
    .lateral {
        position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: min(320px, 86vw); max-height: none;
        border-radius: 0 var(--r-lg) var(--r-lg) 0; border-left: 0;
        transform: translateX(-105%); transition: transform .2s ease;
    }
    .menu-aberto .lateral { transform: translateX(0); }
    .lateral-topo { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 10px 10px; }
    .lateral-titulo { font-family: var(--font-head); font-weight: 800; font-size: 20px; }
    .layout { padding: 16px; }
}
@media (max-width: 700px) {
    :root { --topo-h: 64px; }
    .topo-inner { padding: 0 16px; gap: 10px; }
    .busca-topo { display: none; }
    .busca-atalho { display: inline-flex; }
    .logo svg { height: 28px; }
    .busca-modal { width: 100%; max-height: 100dvh; margin: 0 auto auto; border-width: 0 0 1px; border-radius: 0 0 var(--r-md) var(--r-md); }
    .hero { padding: 36px 22px; border-radius: var(--r-lg); }
    .busca-hero { padding-left: 16px; }
    .busca-hero .botao { padding: 0 16px; }
    .pct-linha input { width: 60px; }
    .pct-linha input.largo { width: 84px; }
    .banda { padding: 24px 20px 26px; border-radius: var(--r-lg); }
    .faixa-cartoes { padding: 28px 22px; }
    .ferramenta form.container__input__calculadora { padding: 18px; }
    .lista a { padding: 14px 16px; gap: 12px; }
    .selo { display: none; }
    .secao-titulo { font-size: 24px; }
    .texto h2, .perguntas h2 { font-size: 24px; }
    .simulation-header, .summary-item { padding-left: 16px; padding-right: 16px; }
    .simulation-value.green, .simulation-value .green { font-size: 22px; }
    .info-table { font-size: 14px; }
    .info-table th, .info-table td { padding: 9px 10px; }
}

/* ===== IMPRESSÃO (botão de imprimir a simulação) ===== */
@media print {
    .listras, .topo, .lateral, .lateral-fundo, .rodape, .cookies, .anuncio, .pilulas, .perguntas, .autor-caixa, #relacionadas, .texto, form, .toggle-buttons, .share, .pular { display: none !important; }
    .layout { display: block; padding: 0; }
    .banda { background: none; padding: 0 0 16px; }
    body { background: #FFFFFF; color: #000000; }
}