/* =====================================================
   GLOBAL — componentes compartilhados entre páginas
   ===================================================== */

/* ─── Tipografia utilitária ──────────────────────────
   Padrão: eyebrow label em maiúsculo espaçado.
   Usado em: product-eyebrow, product-category,
   lei-num, bonus-eyebrow, section-label.
   ─────────────────────────────────────────────────── */
.eyebrow {
    display: block;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Variante maior (section-label usa 0.62rem e 0.25em) */
.eyebrow--lg {
    font-size: 0.62rem;
    letter-spacing: 0.25em;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* ─── Seção produto ───────────────────────────────── */
.product-section {
    padding: 96px 0;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

/* ─── Lista com check ─────────────────────────────── */
/* Substitui: .checklist (identity) e .includes-list (produto) */
.check-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.88rem;
    color: var(--text-mid);
}

/* ─── Ícone de check ──────────────────────────────── */
/* Substitui: .chk (identity) e .inc-check (produto) */
.check-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    background: var(--green-dim);
    border: 1px solid var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green-hi);
    font-size: 0.65rem;
    font-weight: 900;
}

/* ─── Bloco de preço ──────────────────────────────── */
/* Substitui: .price-stack (identity) e .price-block (produto) */
.price-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ─── Trust row ───────────────────────────────────── */
/* Substitui: .trust-row-item (identity) e .aside-trust-item (produto) */
.trust-row { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; margin-top: 24px; }

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.74rem;
    color: var(--text-muted);
}

.trust-item svg {
    color: var(--green-hi);
    flex-shrink: 0;
}

/* ─── Divisores ───────────────────────────────────── */
hr.div-full {
    border: none;
    height: 2px;
    background: linear-gradient(to right, var(--blue), var(--red), transparent);
}

hr.div-short {
    border: none;
    width: 48px;
    height: 2px;
    background: var(--red);
    display: block;
    margin: 16px 0;
}