/* ═══════════════════════════════════════════════════════
   PREMIUM.CSS — Elevação "luxo quieto, alma urbana"
   Camada aditiva, carregada por último. Refina sem reescrever.
   Princípio: caro por ser quieto. Accent cirúrgico, respiro,
   profundidade por camadas finas, motion suave (ease-out-expo).
   ═══════════════════════════════════════════════════════ */

/* ─── 1. AQUIETAR O QUE GRITA ─────────────────────────── */

/* Hero highlight: troca o gradient-text shimmer animado por accent
   sólido com brilho sutil estático — premium, não piscando. */
.hero-line-2 .highlight,
.hero-title .highlight {
    background: none !important;
    -webkit-text-fill-color: var(--accent);
    color: var(--accent);
    -webkit-background-clip: initial;
    background-clip: initial;
    animation: none !important;
    text-shadow: 0 0 32px rgba(255, 149, 0, 0.22);
}

/* CTA não pulsa — a cor já carrega a hierarquia. */
.btn-pulse { animation: none !important; }

/* Glows ambientes do hero: presença, não festa. */
.hero-glow::before {
    background: radial-gradient(ellipse, rgba(255, 149, 0, 0.09) 0%, transparent 70%);
    animation-duration: 14s;
}
.hero-glow::after {
    background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);
    animation-duration: 18s;
}

/* Card destaque: brilho estável, sem pulsar. */
.card-highlight {
    animation: none !important;
    box-shadow: var(--hairline), var(--shadow-glow);
}

/* Grain um pouco mais discreto (mantém a textura urbana). */
body::after { opacity: 0.018; }

/* ─── 2. TIPOGRAFIA — hierarquia por escala e peso ─────── */

.hero-title {
    font-size: clamp(2.5rem, 5.6vw, 4.75rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.hero-subtitle {
    color: var(--text-secondary);
    max-width: 56ch;
    text-wrap: pretty;
}
.section-title {
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    letter-spacing: -0.025em;
    line-height: 1.12;
    text-wrap: balance;
}
.section-subtitle, .hero-subtitle { text-wrap: pretty; }
.dashboard-title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.1rem);
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* ─── 3. RITMO — respiro é status ─────────────────────── */

.section { padding: clamp(72px, 9vw, 120px) 0; }
.section-sm { padding: clamp(40px, 6vw, 64px) 0; }
.section-header { margin-bottom: clamp(40px, 5.5vw, 64px); }

/* Eyebrow de seção: de "badge template" para etiqueta refinada e
   discreta (rule curta + caps suave). Quieto, não decorativo. */
.section-badge {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0;
    letter-spacing: 0.16em;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.section-badge::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--accent);
    opacity: 0.7;
}

/* ─── 4. SUPERFÍCIES — profundidade por camadas finas ─── */

.card, .page-card, .package-card, .rede-card, .stat-card,
.blog-card, .combo-card {
    box-shadow: var(--hairline), var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition-slow),
                border-color var(--transition);
}
.card:hover, .page-card:hover, .package-card:hover,
.rede-card:hover, .blog-card:hover, .combo-card:hover {
    box-shadow: var(--hairline), var(--shadow);
}

/* Navbar: aresta iluminada sob o blur. */
.navbar { box-shadow: var(--hairline); }

/* ─── 5. BOTÕES — accent cirúrgico, lift suave ────────── */

.btn { transition: transform var(--transition), box-shadow var(--transition-slow),
                    background var(--transition), color var(--transition),
                    border-color var(--transition); }
.btn-primary {
    box-shadow: var(--hairline), 0 1px 2px rgba(0, 0, 0, 0.25);
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 149, 0, 0.32);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost, .btn-secondary { box-shadow: var(--hairline); }

/* ─── 6. FORMS — foco calmo e nítido ──────────────────── */

.form-input, .form-select, .form-textarea {
    box-shadow: var(--hairline);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    box-shadow: 0 0 0 3px var(--accent-subtle);
    border-color: var(--accent);
}

/* ─── 7. PAINÉIS INTERNOS (product) ───────────────────── */

/* Sidebar: superfície calma com aresta iluminada. */
.dashboard-sidebar {
    box-shadow: var(--hairline);
}
.sidebar-label {
    letter-spacing: 0.14em;
    color: var(--text-muted);
}
.sidebar-nav a {
    border-radius: var(--radius);
    transition: background var(--transition), color var(--transition);
}
.sidebar-nav a:hover { background: var(--bg-card-hover); color: var(--text-primary); }
.sidebar-nav a.active {
    background: var(--accent-subtle);
    color: var(--accent);
    font-weight: 600;
}

/* Stat cards: número em display, tabular, com respiro. */
.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}
.stat-value {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.stat-label {
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* Tabelas: cabeçalho discreto, linhas com hairline, hover sutil. */
.table th {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}
.table td { border-bottom: 1px solid var(--border); }
.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--accent-subtle); }

/* Avatar do usuário: aresta iluminada. */
.user-avatar { box-shadow: var(--hairline); }

/* Empty states: convidam, não esvaziam. */
.empty-state-icon { opacity: 0.55; }

/* ─── 8. SELECTION & FOCO (refino) ────────────────────── */
::selection { background: rgba(255, 149, 0, 0.22); color: #fff; }

/* ─── 9. REDUCED MOTION ───────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hero-glow::before, .hero-glow::after { animation: none !important; }
}