/* cash-b — tokens de marca compartilhados entre todas as páginas.
   Ver identidade completa no manual de marca (brand book). */

@font-face {
    font-family: "Familjen";
    src: url("../fonts/familjen-grotesk.449245976afc.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "JB Mono";
    src: url("../fonts/jetbrains-mono.d6dbac3c14dd.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #111827;
    --ink-soft: #374151;
    --muted: #6b7280;
    --brand: #6d28d9;
    --brand-strong: #4c1d95;
    --highlight: #f59e0b;
    --highlight-ink: #111827;
    --paper: #f8fafc;
    --paper-2: #f1eefb;
    --line: #e0dcef;
    --line-soft: #ede9f7;
    --danger: #dc2626;
    --danger-bg: #fee2e2;
    --info: #2563eb;
    --info-bg: #eef2ff;
    --success: #059669;
    --success-bg: #ecfdf5;
}

body {
    font-family: "Familjen", "Helvetica Neue", Arial, sans-serif;
}

.mono {
    font-family: "JB Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
    font-variant-numeric: tabular-nums;
}

/* wordmark — sempre em minúsculo, nunca com ícone */
.marca {
    font-family: "Familjen", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* ilustrações de marca — formas planas, sem foto, usadas nos painéis gráficos */
.grafico-blob { fill: var(--highlight); opacity: 0.16; }
.grafico-anel { fill: none; stroke: var(--highlight); stroke-width: 10; stroke-linecap: round; }
.grafico-moeda { fill: var(--paper); }
.grafico-cifrao {
    fill: var(--brand-strong);
    font-family: "Familjen", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
}
.grafico-sacola { fill: var(--paper); }
.grafico-alca { fill: none; stroke: var(--brand-strong); stroke-width: 10; stroke-linecap: round; }
.grafico-selo { fill: var(--highlight); }
.grafico-selo-texto {
    fill: var(--brand-strong);
    font-family: "Familjen", "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
}

/* destaque estilo marca-texto — usar no máximo uma vez por página */
.mark {
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    padding: 0 0.08em;
    color: var(--highlight-ink);
}
.mark::before {
    content: "";
    position: absolute;
    left: -0.08em;
    right: -0.08em;
    top: 0.1em;
    bottom: 0.02em;
    background: var(--highlight);
    z-index: -1;
}

/* botão de call-to-action — usado nas páginas de conteúdo (ex: /cash-b-e-confiavel/)
   pra converter quem chegou via busca, diferente das páginas legais ao lado que só
   têm link de texto. */
.botao-primario {
    display: inline-block; background: var(--brand); color: var(--paper);
    padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: 600;
    margin-top: 8px;
}
.botao-primario:hover { background: var(--brand-strong); }

/* card de oferta — compartilhado entre a home (Em alta) e /ofertas/ (grade completa).
   Ver ofertas/templates/ofertas/_card.html pro markup. */
.grade-ofertas {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px;
}
.oferta-cartao {
    background: var(--paper); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
    display: flex; flex-direction: column;
}
.oferta-cartao .imagem { position: relative; aspect-ratio: 1 / 1; background: var(--paper-2); }
.oferta-cartao .imagem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oferta-cartao .desconto {
    position: absolute; top: 8px; left: 8px; background: var(--danger); color: #fff;
    font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 10px;
}
.oferta-cartao .cashback {
    position: absolute; top: 8px; right: 8px; background: var(--success); color: #fff;
    font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 10px;
}
.oferta-cartao .corpo { padding: 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.oferta-cartao .nome { font-size: 14px; line-height: 1.4; max-height: 2.8em; overflow: hidden; color: var(--ink); }
.oferta-cartao .categoria { font-size: 12px; color: var(--muted); }
.oferta-cartao .preco { font-family: "JB Mono", monospace; font-size: 17px; font-weight: 500; margin-top: auto; color: var(--ink); }
.oferta-cartao .preco-riscado { font-size: 13px; font-weight: 400; color: var(--muted); text-decoration: line-through; margin-right: 6px; }
.oferta-cartao .preco-avista { font-size: 12.5px; color: var(--muted); }
.oferta-cartao .cashback-valor { font-size: 12.5px; font-weight: 700; color: var(--success); }
.oferta-cartao .botao-cta { text-align: center; margin: 4px 14px 14px; }

/* selo "oferta imperdível" - só nas ofertas cadastradas manualmente no admin (ver
   OfertaManual.imperdivel) */
.oferta-cartao.imperdivel { border-color: var(--highlight); }
.oferta-cartao .selo-imperdivel {
    background: var(--highlight); color: var(--highlight-ink); text-align: center;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 5px;
}

/* carrossel horizontal (Em alta, na home) */
.carrossel-ofertas {
    display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 12px; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.carrossel-ofertas .oferta-cartao { flex: 0 0 200px; scroll-snap-align: start; }

/* banner de instalação do PWA (Android: botão real; iOS: instrução) */
.pwa-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 50;
    background: var(--ink);
    color: var(--paper);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    font-size: 14px;
    max-width: 480px;
    margin: 0 auto;
}
.pwa-banner[hidden] { display: none; }
.pwa-banner-texto { flex: 1; line-height: 1.4; }
.pwa-banner-texto strong { color: var(--paper); }
.pwa-banner-acao {
    background: var(--brand);
    color: var(--paper);
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.pwa-banner-acao:hover { background: var(--brand-strong); }
.pwa-banner-fechar {
    background: none;
    border: none;
    color: var(--paper);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
    flex-shrink: 0;
}
.pwa-banner-fechar:hover { opacity: 1; }