/* ==========================================================================
   HOME V4 ZONES — Redesign task #290 + audit visual #296
   Estrutura: member-card -> sub-alert -> hero -> onboarding slot -> progress
   -> quick-grid -> last-transactions slot -> discover -> invite
   Preservado abaixo: banner + categorias + produtos (intocados no PHP).
   Tokens: design-tokens.css (--main-color, --gray-*, --radius-*, --space-*)
   @since 4.85.0 — audit #296 em 4.86.0: font-family canônica, radius 2xl,
   logo dourado, gradientes do progress/invite, span .currency no saldo.
   ========================================================================== */

/* ──────────────────────────────────────────────────────────────────────────
   COMMON wrapper — gap global padronizado + font-family canônica do mockup
   Propaga font-family pra todas as zonas filhas (member-card, hero, progress,
   quick-grid, discover, invite, last-transactions). Deriva do mockup-v4.
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-wrap,
#homeV4Wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: 0 !important;
    /* #297 A1: zero padding horizontal — cada zona filha controla seu próprio margin horizontal */
    padding: 0;
    margin: 0 0 var(--space-4);
    margin-bottom: 10px !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, sans-serif;
}

/* #297 A1: margin horizontal próprio em cada zona filha (antes estava no padding do wrap) */
.home-v4-member-card,
.home-v4-sub-alert,
.home-v4-hero-card,
.home-v4-slot,
.home-v4-onboarding-checklist,
.home-v4-progress-strip,
.home-v4-quick-grid,
.home-v4-last-transactions,
.home-v4-section-head,
.home-v4-invite-card,
.home-v4-divider {
    /* margin-left: var(--space-4);
    margin-right: var(--space-4); */
}

/* discover-scroll já faz bleed lateral (margin negativo + padding interno) — manter assim */

/* skeleton neutro pra evitar layout shift */
.home-v4-skel {
    background: linear-gradient(90deg, var(--gray-100) 0%, var(--gray-200) 50%, var(--gray-100) 100%);
    background-size: 200% 100%;
    animation: homeV4Shimmer 1.4s linear infinite;
    border-radius: var(--radius-md);
}

@keyframes homeV4Shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   SUB-ALERT — faixa abaixo do header (só veterano com pendências)
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-sub-alert {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: var(--font-xs);
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.home-v4-sub-alert.is-visible { display: flex; }
.home-v4-sub-alert__icon { color: #fbbf24; font-size: 11px; }
.home-v4-sub-alert__text strong { color: #fff; font-weight: var(--weight-semibold); }

/* ──────────────────────────────────────────────────────────────────────────
   MEMBER CARD — topo da home, sempre renderiza
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-member-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    /* #296 D2: margin-bottom extra (space-5) pra destacar como bloco-mãe */
    /* #297 A1: horizontal mantido pela regra de zonas filhas (var(--space-4)); top/bottom explícitos */
    margin: 0;
    padding: var(--space-5);
    color: #fff;
    /* #296 D4: 28px em vez de 20px — cantos mais arredondados (mockup radius-2xl) */
    border-radius: var(--radius-2xl, 28px);
    /* COR DO CLUBE, nao cor fixa. Antes aqui havia
         linear-gradient(135deg, #0f2340, #0C1E34, #081527)
       — azul-marinho cravado — e dois radiais dourados. Resultado: o card
       saia cinza-escuro em TODO clube, ignorando o app_config.color.
       Agora a base e' a --main-color (preenchida por page-loading.php com a
       cor salva do tenant) e a profundidade vem de camadas pretas/brancas
       POR CIMA dela, com opacidade — assim funciona com qualquer cor, clara
       ou escura, sem precisar calcular tom por tom.
       Fallback #3B82F6 = mesmo default de design-tokens.css. */
    background:
        radial-gradient(circle at 85% 10%, rgba(255, 255, 255, 0.16), transparent 55%),
        radial-gradient(circle at 15% 110%, rgba(0, 0, 0, 0.22), transparent 55%),
        linear-gradient(135deg,
            var(--main-color, #3B82F6) 0%,
            var(--main-color, #3B82F6) 55%,
            rgba(0, 0, 0, 0.18) 100%),
        var(--main-color, #3B82F6);
    box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35),
                0 8px 16px -8px rgba(0, 0, 0, 0.22);
    min-height: 168px;
}

.home-v4-member-card::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%);
    pointer-events: none;
    z-index: -1;
}

.home-v4-member-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.home-v4-member-card__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.home-v4-member-card__logo {
    /* #296 D5: logo dourado (mockup) — 32x32, bg+border dourado alpha, cor main-color, weight 900 */
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    /* Branco translucido em vez do dourado fixo (189,160,95): o card agora
       usa a cor do clube como fundo, e o dourado brigava com qualquer cor
       que nao fosse o azul-marinho antigo. Branco alpha funciona sobre
       qualquer tom. */
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white !important;
    font-weight: 900;
    font-size: var(--font-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-v4-member-card__brand-text {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.25;
}

.home-v4-member-card__brand-text strong {
    display: block;
    color: #fff;
    /* #296 D7: explícito com fallback 13px (mockup --font-sm) */
    font-size: var(--font-sm, 13px);
    letter-spacing: 0.05em;
    font-weight: var(--weight-semibold);
}

.home-v4-member-card__since {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.55);
    text-align: right;
    line-height: 1.3;
}

.home-v4-member-card__since strong {
    display: block;
    color: #fff;
    font-size: var(--font-xs);
    letter-spacing: 0.05em;
    font-weight: var(--weight-medium);
    margin-top: 2px;
}

/* Saldos lado a lado */
.home-v4-member-card__balance-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-3);
}

.home-v4-member-card__balance-block {
    min-width: 0;
}

.home-v4-member-card__balance-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 2px;
}

.home-v4-member-card__balance-value {
    font-size: var(--font-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #fff;
}

/* #296 D6: .currency com margin-right pra destacar o valor; .cents segue o padrão */
.home-v4-member-card__balance-value .currency {
    font-size: var(--font-lg, 17px);
    color: rgba(255, 255, 255, 0.7);
    font-weight: var(--weight-medium);
    margin-right: 4px;
}

.home-v4-member-card__balance-value .cents {
    font-size: var(--font-md, 15px);
    color: rgba(255, 255, 255, 0.7);
    font-weight: var(--weight-medium);
}

.home-v4-member-card__balance-value .unit {
    font-size: var(--font-xs);
    color: rgba(255, 255, 255, 0.55);
    margin-left: 4px;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.home-v4-member-card__balance-sub {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.55);
    margin-top: var(--space-1);
}

.home-v4-member-card__delta {
    color: #4ade80;
    font-weight: var(--weight-semibold);
}

.home-v4-member-card__hint {
    color: rgba(255, 255, 255, 0.65);
}

/* Faixa de expiração (condicional) */
.home-v4-member-card__expiry {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.22);
    border-radius: var(--radius-sm);
    margin-top: var(--space-3);
}

.home-v4-member-card__expiry.is-visible { display: flex; }
.home-v4-member-card__expiry-icon { color: #fbbf24; font-size: 11px; }
.home-v4-member-card__expiry-text { font-size: var(--font-xs); color: rgba(255, 255, 255, 0.9); }
.home-v4-member-card__expiry-text strong { color: #fbbf24; font-weight: var(--weight-semibold); }

/* Ações */
.home-v4-member-card__actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-1);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.home-v4-member-card__action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.home-v4-member-card__action:active { background: rgba(255, 255, 255, 0.08); }

.home-v4-member-card__action i {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.home-v4-member-card__action span {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.78);
    font-weight: var(--weight-medium);
}

/* ──────────────────────────────────────────────────────────────────────────
   HERO CARD — rotativo (pesquisa / raspadinha / boas-vindas)
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-hero-card {
    display: none;
    position: relative;
    overflow: hidden;
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #ffffff 0%, var(--gray-50) 100%);
    border: 1px solid var(--gray-100);
    box-shadow: var(--shadow-sm);
    min-height: 130px;
    /* #297 A3: conteúdo do hero alinhado à esquerda */
    text-align: left;
}

.home-v4-hero-card.is-visible { display: block; }

.home-v4-hero-card::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(var(--main-color-rgb), 0.15), transparent 70%);
    pointer-events: none;
}

.home-v4-hero-card--onboard::before {
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%);
}

.home-v4-hero-card__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-xs);
    font-weight: var(--weight-semibold);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: relative;
    z-index: 1;
}

.home-v4-hero-card__badge--warning { background: rgba(245, 158, 11, 0.12); color: #b45309; }
.home-v4-hero-card__badge--info { background: rgba(59, 130, 246, 0.12); color: #1d4ed8; }
.home-v4-hero-card__badge--brand {
    background: rgba(var(--main-color-rgb), 0.12);
    color: var(--main-color);
}
.home-v4-hero-card__badge i { font-size: 9px; }

.home-v4-hero-card__title {
    font-size: var(--font-xl);
    font-weight: var(--weight-bold);
    color: var(--gray-900);
    line-height: 1.25;
    margin: 0 0 var(--space-2);
    letter-spacing: -0.02em;
    position: relative;
    z-index: 1;
}

.home-v4-hero-card__title strong {
    color: var(--main-color);
    font-weight: var(--weight-bold);
}

.home-v4-hero-card__sub {
    font-size: var(--font-sm);
    color: var(--gray-500);
    margin: 0 0 var(--space-4);
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

.home-v4-hero-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: #0C1E34;
    color: #fff;
    padding: var(--space-3) var(--space-5);
    border-radius: 999px;
    font-weight: var(--weight-semibold);
    font-size: var(--font-sm);
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 1;
    transition: transform var(--transition-fast);
}

.home-v4-hero-card__cta:active { transform: scale(0.97); }
.home-v4-hero-card__cta i { font-size: 11px; }

.home-v4-hero-card__meta {
    font-size: 10px;
    color: var(--gray-400);
    margin-top: var(--space-2);
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.home-v4-hero-card__meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ──────────────────────────────────────────────────────────────────────────
   SLOT — onboarding (preenchido pela task 291)
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-slot {
    /* container vazio, sem estilos visuais até ser preenchido */
}

.home-v4-slot:empty { display: none; }

/* ──────────────────────────────────────────────────────────────────────────
   ONBOARDING CHECKLIST — "Primeiros passos" (task #291)
   Só renderiza pra user.is_new_user && onboarding.show === true.
   Posição: dentro de #homeV4OnboardingSlot (abaixo do hero, antes do progress).
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-onboarding-checklist {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: var(--shadow-sm);
}

.home-v4-onboarding-checklist__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}

.home-v4-onboarding-checklist__title {
    margin: 0;
    font-size: var(--font-md);
    font-weight: var(--weight-semibold);
    color: var(--gray-900);
    letter-spacing: -0.01em;
}

.home-v4-onboarding-checklist__progress {
    font-size: var(--font-xs);
    color: var(--gray-500);
    font-weight: var(--weight-medium);
    padding: 2px 8px;
    background: var(--gray-100);
    border-radius: 999px;
}

.home-v4-onboarding-checklist__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.home-v4-onboarding-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-top: 1px dashed var(--gray-200);
}

.home-v4-onboarding-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.home-v4-onboarding-item__check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    border: 2px solid var(--gray-300, #d1d5db);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 11px;
    transition: background 0.25s ease, border-color 0.25s ease,
                color 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home-v4-onboarding-item--done .home-v4-onboarding-item__check {
    background: var(--color-success, #10b981);
    border-color: var(--color-success, #10b981);
    color: #fff;
}

.home-v4-onboarding-item--done .home-v4-onboarding-item__check i {
    animation: homeV4CheckPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes homeV4CheckPop {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

.home-v4-onboarding-item__body {
    flex: 1;
    min-width: 0;
}

.home-v4-onboarding-item__title {
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    color: var(--gray-900);
    line-height: 1.3;
}

.home-v4-onboarding-item--done .home-v4-onboarding-item__title {
    color: var(--gray-500);
    text-decoration: line-through;
    text-decoration-color: rgba(107, 114, 128, 0.4);
}

.home-v4-onboarding-item__reward {
    font-size: 11px;
    color: #b45309;
    font-weight: var(--weight-semibold);
    margin-top: 2px;
    letter-spacing: 0.01em;
}

.home-v4-onboarding-item--done .home-v4-onboarding-item__reward {
    color: var(--color-success, #10b981);
}

.home-v4-onboarding-item__cta {
    flex-shrink: 0;
    background: #0C1E34;
    color: #fff;
    font-size: var(--font-xs);
    font-weight: var(--weight-semibold);
    padding: 6px 14px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.home-v4-onboarding-item__cta:active { transform: scale(0.96); }
.home-v4-onboarding-item__cta:focus-visible {
    outline: 2px solid var(--main-color);
    outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────────
   PROGRESS STRIP — só quando há marco de pontos próximo
   v4.99.x: virou <button> (abre modal-points aba Vitrine via data-action="open-points")
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-progress-strip {
    display: none;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.home-v4-progress-strip.is-visible { display: flex; }
.home-v4-progress-strip:active { background: var(--gray-50, #fafafa); }

.home-v4-progress-strip__icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, #fde68a, #f59e0b);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}

.home-v4-progress-strip__body { flex: 1; min-width: 0; display: block; }
.home-v4-progress-strip__title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--gray-900); display: block; }
.home-v4-progress-strip__sub { font-size: 11px; color: var(--gray-500); display: block; }

.home-v4-progress-strip__chevron {
    color: var(--gray-400, #a1a1aa);
    font-size: 13px;
    flex-shrink: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   STATEMENT CHOICE — bottom sheet "qual extrato?" (créditos vs pontos)
   Disparado pelo "Ver extrato →" no card de últimas transações.
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-statement-choice {
    position: fixed;
    inset: 0;
    z-index: 9999999999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.home-v4-statement-choice.open {
    pointer-events: auto;
    opacity: 1;
}

.home-v4-statement-choice__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.home-v4-statement-choice__sheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary, #fff);
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
    padding: var(--space-3, 12px) var(--space-4, 16px) calc(var(--space-4, 16px) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}

.home-v4-statement-choice.open .home-v4-statement-choice__sheet {
    transform: translateY(0);
}

.home-v4-statement-choice__handle {
    width: 40px;
    height: 4px;
    background: var(--gray-200, #e4e4e7);
    border-radius: 999px;
    margin: 0 auto var(--space-3, 12px);
}

.home-v4-statement-choice__title {
    font-size: var(--font-md, 15px);
    font-weight: var(--weight-semibold, 600);
    color: var(--gray-900, #18181b);
    margin: 0 0 var(--space-3, 12px);
    text-align: center;
}

.home-v4-statement-choice__option {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    width: 100%;
    padding: var(--space-3, 12px);
    background: var(--bg-primary, #fff);
    border: 1px solid var(--gray-200, #e4e4e7);
    border-radius: var(--radius-md, 12px);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    margin-bottom: var(--space-2, 8px);
    transition: background 0.15s ease;
}

.home-v4-statement-choice__option:active {
    background: var(--gray-50, #fafafa);
}

.home-v4-statement-choice__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.home-v4-statement-choice__icon--credits {
    background: linear-gradient(135deg, #34d399, #059669);
}

.home-v4-statement-choice__icon--points {
    background: linear-gradient(135deg, #fde68a, #f59e0b);
}

.home-v4-statement-choice__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.home-v4-statement-choice__label {
    font-size: var(--font-sm, 14px);
    font-weight: var(--weight-semibold, 600);
    color: var(--gray-900, #18181b);
}

.home-v4-statement-choice__sub {
    font-size: 12px;
    color: var(--gray-500, #71717a);
}

.home-v4-statement-choice__chevron {
    color: var(--gray-400, #a1a1aa);
    font-size: 13px;
    flex-shrink: 0;
}

.home-v4-statement-choice__cancel {
    display: block;
    width: 100%;
    padding: var(--space-3, 12px);
    background: transparent;
    border: none;
    color: var(--gray-500, #71717a);
    font-size: var(--font-sm, 14px);
    font-family: inherit;
    cursor: pointer;
    margin-top: var(--space-2, 8px);
}

.home-v4-progress-strip__bar {
    display: block;
    height: 4px;
    background: var(--gray-100);
    border-radius: 999px;
    margin-top: 6px;
    overflow: hidden;
}

.home-v4-progress-strip__bar-fill {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #f59e0b, var(--main-color));
    border-radius: 999px;
    transition: width 0.6s ease;
}

/* ──────────────────────────────────────────────────────────────────────────
   QUICK GRID — 4 itens (Jogar / Indicar / Compras / Vales ou variações)
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

.home-v4-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: var(--space-3) var(--space-2);
    background: var(--bg-primary);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    cursor: pointer;
    position: relative;
    transition: transform var(--transition-fast);
    color: var(--gray-700);
    text-decoration: none;
    min-height: 72px;
}

.home-v4-quick-item:active { transform: scale(0.96); }

.home-v4-quick-item i {
    font-size: 18px;
    color: var(--gray-700);
    margin-bottom: 2px;
}

.home-v4-quick-item__label {
    font-size: 10px;
    color: var(--gray-600);
    font-weight: var(--weight-medium);
    text-align: center;
    line-height: 1.2;
}

.home-v4-quick-item--play i { color: #a855f7; }
.home-v4-quick-item--invite i { color: var(--color-info); }
.home-v4-quick-item--purchases i { color: var(--gray-700); }
.home-v4-quick-item--coupons i { color: #ca8a04; }
.home-v4-quick-item--flyers i { color: #0284c7; }
.home-v4-quick-item--help i { color: var(--gray-700); }

.home-v4-quick-item[data-badge]::after {
    content: attr(data-badge);
    position: absolute;
    top: 6px;
    right: 10px;
    background: var(--color-error);
    color: #fff;
    font-size: 9px;
    font-weight: var(--weight-bold);
    padding: 1px 5px;
    border-radius: 999px;
    min-width: 14px;
    text-align: center;
    line-height: 1.3;
}

.home-v4-quick-item[data-badge=""] {
    /* quando data-badge vazio, esconde badge */
}

.home-v4-quick-item:not([data-badge])::after,
.home-v4-quick-item[data-badge=""]::after {
    display: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   SECTION TITLES (discover / últimas transações)
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /* #296 D3: gap do wrap (var(--space-3)) já cuida do espaço entre zonas — */
    /* remove margin-top próprio pra evitar acumular 58px antes do discover. */
    margin-top: 0;
    margin-bottom: var(--space-1);
}

.home-v4-section-head__title {
    font-size: var(--font-md);
    font-weight: var(--weight-semibold);
    color: var(--gray-900);
    margin: 0;
}

.home-v4-section-head__link {
    font-size: var(--font-xs);
    color: var(--main-color);
    font-weight: var(--weight-medium);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}

.home-v4-section-head__link:active { opacity: 0.7; }

/* ──────────────────────────────────────────────────────────────────────────
   LAST TRANSACTIONS — card com 3 últimas transações (task #292)
   Renderiza só pra veterano (primeira_compra=1) com array >= 1 item.
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-last-transactions {
    background: var(--bg-primary, #fff);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    /* #296 D13: padding uniforme var(--space-4) (mockup history-card) */
    padding: var(--space-4);
}

.home-v4-last-transactions__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.home-v4-last-transactions__title {
    font-size: var(--font-md);
    font-weight: var(--weight-semibold);
    color: var(--gray-900);
    margin: 0;
    line-height: 1.25;
}

.home-v4-last-transactions__link {
    font-size: var(--font-xs);
    /* #296 D12: dourado (main-color) com fallback pra garantir render correto */
    color: var(--main-color, #bda05f);
    font-weight: var(--weight-medium);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
}

.home-v4-last-transactions__link:active { opacity: 0.7; }

.home-v4-last-transactions__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.home-v4-last-transactions__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
}

.home-v4-last-transactions__item + .home-v4-last-transactions__item {
    /* #296 D14: border + padding-top explícito entre items (mockup history-item) */
    border-top: 1px dashed var(--gray-100);
    padding-top: var(--space-3);
    margin-top: var(--space-1);
}

.home-v4-last-transactions__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Variantes por tipo (bg rgba 12% + cor de ícone sólida) */
.home-v4-last-transactions__icon--points-earn {
    background: rgba(5, 150, 105, 0.12);
    color: var(--color-success);
}
.home-v4-last-transactions__icon--cashback {
    background: rgba(var(--main-color-rgb), 0.12);
    color: var(--main-color);
}
.home-v4-last-transactions__icon--survey-reward {
    background: rgba(59, 130, 246, 0.12);
    color: var(--color-info);
}
.home-v4-last-transactions__icon--redeem {
    background: rgba(168, 85, 247, 0.12);
    color: #a855f7;
}
.home-v4-last-transactions__icon--expire {
    background: rgba(245, 158, 11, 0.12);
    color: var(--color-warning);
}
.home-v4-last-transactions__icon--generic {
    background: var(--gray-100);
    color: var(--gray-500);
}

.home-v4-last-transactions__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.home-v4-last-transactions__title-row {
    font-size: var(--font-sm);
    color: var(--gray-900);
    font-weight: var(--weight-medium);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-v4-last-transactions__time {
    font-size: var(--font-xs);
    color: var(--gray-400);
    line-height: 1.2;
}


/* ──────────────────────────────────────────────────────────────────────────
   DISCOVER SCROLL — 3-4 micro-cards horizontais
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-discover-scroll {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0;
    scroll-snap-type: x mandatory;
    margin: 0;
}

.home-v4-discover-scroll::-webkit-scrollbar { display: none; }

.home-v4-micro-card {
    flex: 0 0 140px;
    background: var(--bg-primary);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    cursor: pointer;
    scroll-snap-align: start;
    transition: transform var(--transition-fast);
    text-decoration: none;
    color: inherit;
    /* #307 item 32: micro-card pode ser <button>, que herda text-align:center do UA.
       Forçar left garante que title/sub fiquem alinhados ao padrão Pharus de card. */
    text-align: left;
}

.home-v4-micro-card:active { transform: scale(0.96); }

.home-v4-micro-card__icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-bottom: var(--space-1);
}

.home-v4-micro-card__title {
    font-size: var(--font-sm);
    font-weight: var(--weight-semibold);
    color: var(--gray-900);
    line-height: 1.2;
}

.home-v4-micro-card__sub {
    font-size: 10px;
    color: var(--gray-500);
}

.home-v4-micro-card--gold .home-v4-micro-card__icon {
    background: rgba(var(--main-color-rgb), 0.15);
    color: var(--main-color);
}
.home-v4-micro-card--purple .home-v4-micro-card__icon {
    background: rgba(168, 85, 247, 0.15);
    color: #a855f7;
}
.home-v4-micro-card--green .home-v4-micro-card__icon {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success);
}
.home-v4-micro-card--blue .home-v4-micro-card__icon {
    background: rgba(59, 130, 246, 0.15);
    color: var(--color-info);
}

/* ──────────────────────────────────────────────────────────────────────────
   INVITE CARD — banner discreto de indicação
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-invite-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    /* #296 D9/D11: gradient dourado suave + border dashed dourado alpha 0.4 (mockup) */
    background: linear-gradient(135deg,
        rgba(189, 160, 95, 0.10),
        rgba(189, 160, 95, 0.02));
    border: 1px dashed rgba(189, 160, 95, 0.4);
    border-radius: var(--radius-md);
}

.home-v4-invite-card__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    /* #296 D10: cores invertidas — bg dourado, ícone navy (mockup) */
    background: var(--main-color);
    color: var(--on-main-color, #fff); /* branco em tema escuro, navy em tema claro */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.home-v4-invite-card__body { flex: 1; min-width: 0; }
.home-v4-invite-card__title { font-size: var(--font-sm); font-weight: var(--weight-semibold); color: var(--gray-900); }
.home-v4-invite-card__sub { font-size: var(--font-xs); color: var(--gray-600); margin-top: 2px; }

.home-v4-invite-card__cta {
    background: #0C1E34;
    color: #fff;
    font-size: var(--font-xs);
    font-weight: var(--weight-semibold);
    padding: 8px 14px;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.home-v4-invite-card__cta:active { transform: scale(0.96); }

/* ──────────────────────────────────────────────────────────────────────────
   SECTION DIVIDER — marca inicio do bloco preservado (banner/categorias)
   ────────────────────────────────────────────────────────────────────────── */
.home-v4-divider {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* #297 A1: horizontal controlado pela regra comum; top/bottom explícitos */
    margin-top: var(--space-5);
    margin-bottom: var(--space-3);
    padding: 0 var(--space-1);
    font-size: var(--font-xs);
    color: var(--gray-400);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.home-v4-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--gray-200);
}

/* ──────────────────────────────────────────────────────────────────────────
   LEGACY HIDES — elementos da versão antiga ficam ocultos
   (mantidos no DOM por compat com JS legado que pode querer encontrá-los)
   ────────────────────────────────────────────────────────────────────────── */
#infosCliente,
#points-home-card,
#gam-home-card,
#survey-banner-container,
.boxInd,
.boxCashback {
    display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE — telas muito estreitas
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
    .home-v4-member-card__balance-value { font-size: var(--font-xl); }
    .home-v4-quick-item__label { font-size: 9px; }
    .home-v4-member-card__action span { font-size: 9px; }
}