/* ============================================================
   HERO — Seções de Destaque para Landing Pages
   ============================================================
   Seções hero com título grande, subtítulo e badge.
   Centralizado, padding generoso, tipografia display.
   ============================================================ */

/* ========== HERO SECTION ========== */

.hero {
    text-align: center;
    padding: var(--space-24) var(--space-6);
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
}

/* ========== HERO TITLE ========== */

.hero-title {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tighter);
    color: var(--graphite-depth);
    margin: 0 0 var(--space-4) 0;
}

/* ========== HERO SUBTITLE ========== */

.hero-subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    line-height: var(--leading-loose);
    color: var(--soft-steel);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
}

/* ========== HERO BADGE ========== */

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-full);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--teal-intense);
    background: var(--mint-signal);
    margin-bottom: var(--space-6);
}