/* =====================================================================
   AEROFLUENT DESIGN SYSTEM v1
   Aviation Intelligence Platform — Unified Visual Identity
   ---------------------------------------------------------------------
   Escopo: APENAS camada visual. Não altera APIs, lógica, IDs, classes
   funcionais existentes, idiomas, rotas, ou comportamento.
   Os tokens usam o prefixo --af-* para coexistir com :root atual.
   Todas as classes utilitárias usam o prefixo .af-*.
   ===================================================================== */

/* ---------- 1. DESIGN TOKENS ----------------------------------------- */
:root {
    /* PRIMARY — Midnight Navy / Deep Aviation Blue / Gold Intelligence */
    --af-midnight:        #050B1C;
    --af-midnight-2:      #07112A;
    --af-deep-blue:       #0B1A3A;
    --af-deep-blue-2:     #142450;
    --af-aviation-blue:   #1A2B5C;

    --af-gold:            #CFA64A;
    --af-gold-soft:       #F0D68F;
    --af-gold-deep:       #A8821F;
    --af-gold-glow:       rgba(207, 166, 74, 0.45);

    /* SECONDARY — Graphite / Soft Cyan / Premium White */
    --af-graphite-900:    #0E1422;
    --af-graphite-800:    #131B2E;
    --af-graphite-700:    #1A2440;
    --af-graphite-600:    #232E4D;
    --af-graphite-400:    #5A6584;
    --af-graphite-300:    #8A93AD;
    --af-graphite-200:    #B3BACB;

    --af-cyan:            #5EE3E3;
    --af-cyan-soft:       #8FE9E9;
    --af-cyan-deep:       #1E9AAB;

    --af-white:           #F7F8FA;
    --af-ivory:           #F5EFE0;

    /* SEMANTIC */
    --af-success:         #10B981;
    --af-success-soft:    #34D8A2;
    --af-warning:         #F4B740;
    --af-danger:          #EF4444;
    --af-danger-soft:     #F87171;
    --af-info:            #5EE3E3;

    /* SURFACES (tokenized for light/dark layering on dark UI) */
    --af-surface-0:       var(--af-midnight);
    --af-surface-1:       linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.006));
    --af-surface-2:       linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
    --af-surface-elevated: linear-gradient(180deg, rgba(20,36,80,0.55), rgba(11,26,58,0.35));

    /* BORDERS / HAIRLINES */
    --af-border-subtle:   rgba(255,255,255,0.06);
    --af-border:          rgba(255,255,255,0.10);
    --af-border-strong:   rgba(255,255,255,0.18);
    --af-border-gold:     rgba(207,166,74,0.22);
    --af-border-gold-strong: rgba(207,166,74,0.45);

    /* RADIUS */
    --af-radius-xs:  4px;
    --af-radius-sm:  6px;
    --af-radius-md:  10px;
    --af-radius-lg:  14px;
    --af-radius-xl:  18px;
    --af-radius-2xl: 24px;
    --af-radius-pill: 999px;

    /* SPACING (semantic) */
    --af-space-1:  4px;
    --af-space-2:  8px;
    --af-space-3:  12px;
    --af-space-4:  16px;
    --af-space-5:  20px;
    --af-space-6:  24px;
    --af-space-8:  32px;
    --af-space-10: 40px;
    --af-space-12: 48px;
    --af-space-16: 64px;

    /* SHADOWS — dark luxury depth */
    --af-shadow-xs:  0 1px 2px rgba(0,0,0,0.30);
    --af-shadow-sm:  0 4px 12px rgba(0,0,0,0.28);
    --af-shadow-md:  0 12px 32px -10px rgba(0,0,0,0.45);
    --af-shadow-lg:  0 24px 60px -18px rgba(0,0,0,0.55);
    --af-shadow-xl:  0 40px 80px -24px rgba(0,0,0,0.65);

    /* GLOW — signature aviation gold glow */
    --af-glow-gold-sm: 0 0 8px rgba(207,166,74,0.18);
    --af-glow-gold-md: 0 6px 22px -6px rgba(207,166,74,0.30);
    --af-glow-gold-lg: 0 14px 48px -14px rgba(207,166,74,0.38);
    --af-glow-cyan:    0 0 10px rgba(94,227,227,0.18);
    --af-glow-success: 0 0 8px rgba(16,185,129,0.30);

    /* GRADIENTS */
    --af-gradient-gold:      linear-gradient(135deg, #F0D68F 0%, #CFA64A 55%, #A8821F 100%);
    --af-gradient-gold-soft: linear-gradient(135deg, rgba(240,214,143,0.18), rgba(207,166,74,0.06));
    --af-gradient-navy:      linear-gradient(180deg, #050B1C 0%, #0B1A3A 100%);
    --af-gradient-hud:       linear-gradient(135deg, rgba(94,227,227,0.10), rgba(207,166,74,0.06));
    --af-gradient-text-gold: linear-gradient(135deg, #F0D68F 0%, #CFA64A 55%, #A8821F 100%);
    --af-gradient-cyan:      linear-gradient(135deg, #8FE9E9 0%, #5EE3E3 50%, #1E9AAB 100%);

    /* TYPOGRAPHY */
    --af-font-display: 'Sora', 'Space Grotesk', 'Fraunces', 'Inter', system-ui, sans-serif;
    --af-font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --af-font-mono:    'JetBrains Mono', 'SF Mono', Menlo, monospace;
    --af-font-serif:   'Fraunces', 'Sora', serif; /* legado/landing */

    /* TYPE SCALE */
    --af-text-xs:   0.72rem;   /* 11.5px */
    --af-text-sm:   0.82rem;   /* 13px */
    --af-text-base: 0.95rem;   /* 15px */
    --af-text-md:   1.05rem;   /* 17px */
    --af-text-lg:   1.25rem;   /* 20px */
    --af-text-xl:   1.5rem;    /* 24px */
    --af-text-2xl:  1.875rem;  /* 30px */
    --af-text-3xl:  2.25rem;   /* 36px */
    --af-text-4xl:  3rem;      /* 48px */
    --af-text-5xl:  3.75rem;   /* 60px */

    /* MOTION */
    --af-ease:           cubic-bezier(0.16, 1, 0.3, 1);
    --af-ease-out:       cubic-bezier(0.2, 0.8, 0.2, 1);
    --af-dur-fast:       150ms;
    --af-dur-base:       250ms;
    --af-dur-slow:       450ms;

    /* GLASS */
    --af-glass-bg:       rgba(11, 26, 58, 0.55);
    --af-glass-bg-strong:rgba(7, 17, 42, 0.78);
    --af-glass-blur:     blur(18px) saturate(140%);

    /* Z-INDEX */
    --af-z-nav:    40;
    --af-z-modal:  60;
    --af-z-toast:  70;
}

/* ---------- 2. FONT LOADING (Sora + Space Grotesk extras) ------------ */
/* Importação não destrutiva — Inter, Fraunces e JetBrains Mono já são
   carregadas no <head> de cada página. Aqui apenas adicionamos Sora
   para reforçar a hierarquia executiva moderna sem remover Fraunces. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');


/* =====================================================================
   3. UTILITÁRIOS — Tipografia / Display / HUD
   ===================================================================== */
.af-display {
    font-family: var(--af-font-display);
    font-weight: 500;
    letter-spacing: -0.022em;
    line-height: 1.06;
}
.af-display-strong {
    font-family: var(--af-font-display);
    font-weight: 600;
    letter-spacing: -0.028em;
    line-height: 1.02;
}
.af-mono { font-family: var(--af-font-mono); font-variant-numeric: tabular-nums; }
.af-body { font-family: var(--af-font-body); }

.af-eyebrow {
    font-family: var(--af-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--af-gold);
    font-weight: 500;
}
.af-eyebrow-cyan { color: var(--af-cyan); }
.af-eyebrow-muted { color: var(--af-graphite-300); }

.af-text-gold {
    background: var(--af-gradient-text-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.af-text-cyan {
    background: var(--af-gradient-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.af-text-muted { color: var(--af-graphite-300); }
.af-text-subtle { color: var(--af-graphite-400); }


/* =====================================================================
   4. SURFACES — Cards, Glass, HUD Panels
   ===================================================================== */
.af-card {
    background: var(--af-surface-1);
    border: 1px solid var(--af-border-gold);
    border-radius: var(--af-radius-lg);
    backdrop-filter: var(--af-glass-blur);
    -webkit-backdrop-filter: var(--af-glass-blur);
    transition:
        border-color var(--af-dur-base) var(--af-ease),
        transform var(--af-dur-base) var(--af-ease),
        box-shadow var(--af-dur-base) var(--af-ease);
}
.af-card:hover {
    border-color: var(--af-border-gold);
    transform: translateY(-1px);
    box-shadow: var(--af-glow-gold-md);
}
.af-card-flat {
    background: var(--af-surface-1);
    border: 1px solid var(--af-border-subtle);
    border-radius: var(--af-radius-lg);
}
.af-card-elevated {
    background: var(--af-surface-elevated);
    border: 1px solid var(--af-border-gold);
    border-radius: var(--af-radius-xl);
    backdrop-filter: var(--af-glass-blur);
    -webkit-backdrop-filter: var(--af-glass-blur);
    box-shadow: var(--af-shadow-lg);
}
.af-glass {
    background: var(--af-glass-bg);
    backdrop-filter: var(--af-glass-blur);
    -webkit-backdrop-filter: var(--af-glass-blur);
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-lg);
}

/* HUD-style panel — aviation operations-inspired (minimal) */
.af-hud-panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(212,166,79,0.015), rgba(10,31,61,0.012)),
        var(--af-graphite-900);
    border: 1px solid rgba(212,166,79,0.10);
    border-radius: var(--af-radius-lg);
    overflow: hidden;
}
.af-hud-panel::before {
    content: '';
    position: absolute; inset: 0;
    background-image:
        linear-gradient(rgba(212,166,79,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,166,79,0.02) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 25%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 25%, transparent 85%);
}
.af-hud-panel > * { position: relative; }


/* =====================================================================
   5. BUTTONS
   ===================================================================== */
.af-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border-radius: var(--af-radius-md);
    font-family: var(--af-font-body);
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.005em;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    transition:
        transform var(--af-dur-base) var(--af-ease),
        box-shadow var(--af-dur-base) var(--af-ease),
        background var(--af-dur-base) var(--af-ease),
        border-color var(--af-dur-base) var(--af-ease),
        filter var(--af-dur-base) var(--af-ease);
    text-decoration: none;
    white-space: nowrap;
}
.af-btn:active { transform: translateY(1px); }
.af-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.af-btn-primary {
    background: var(--af-gradient-gold);
    color: #0B1220;
    box-shadow: var(--af-glow-gold-sm);
}
.af-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--af-glow-gold-md);
    filter: brightness(1.06);
}
.af-btn-secondary {
    background: rgba(255,255,255,0.014);
    color: var(--af-white);
    border-color: var(--af-border);
}
.af-btn-secondary:hover:not(:disabled) {
    border-color: var(--af-gold);
    background: rgba(207,166,74,0.06);
}
.af-btn-ghost {
    background: transparent;
    color: var(--af-graphite-200);
    border-color: transparent;
}
.af-btn-ghost:hover:not(:disabled) {
    color: var(--af-white);
    background: rgba(255,255,255,0.04);
}
.af-btn-cyan {
    background: linear-gradient(135deg, #8FE9E9 0%, #5EE3E3 60%, #1E9AAB 100%);
    color: #0B1220;
    box-shadow: var(--af-glow-cyan);
}
.af-btn-danger {
    background: rgba(239,68,68,0.10);
    color: var(--af-danger-soft);
    border-color: rgba(239,68,68,0.30);
}
.af-btn-danger:hover:not(:disabled) {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.55);
}
.af-btn-sm { padding: 0.45rem 0.85rem; font-size: 0.78rem; }
.af-btn-lg { padding: 0.95rem 1.5rem; font-size: 0.95rem; }


/* =====================================================================
   6. INPUTS
   ===================================================================== */
.af-input,
.af-select,
.af-textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    background: rgba(255,255,255,0.022);
    border: 1px solid var(--af-border);
    border-radius: var(--af-radius-md);
    color: var(--af-white);
    font-family: var(--af-font-body);
    font-size: 0.875rem;
    line-height: 1.4;
    transition:
        border-color var(--af-dur-base) var(--af-ease),
        background var(--af-dur-base) var(--af-ease),
        box-shadow var(--af-dur-base) var(--af-ease);
    appearance: none;
}
.af-input::placeholder,
.af-textarea::placeholder { color: var(--af-graphite-400); }
.af-input:focus,
.af-select:focus,
.af-textarea:focus {
    outline: none;
    border-color: var(--af-gold);
    background: rgba(255,255,255,0.035);
    box-shadow: 0 0 0 3px rgba(207,166,74,0.12);
}
.af-select {
    background-color: rgba(11,18,32,0.7);
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23CFA64A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 14px;
    padding-right: 2.2rem;
    cursor: pointer;
}
.af-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--af-graphite-200);
    margin-bottom: 0.4rem;
}


/* =====================================================================
   7. PILLS / BADGES / TAGS
   ===================================================================== */
.af-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--af-radius-pill);
    font-family: var(--af-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: rgba(207,166,74,0.08);
    border: 1px solid var(--af-border-gold);
    color: var(--af-gold-soft);
    line-height: 1.4;
    white-space: nowrap;
}
.af-pill-mute {
    background: rgba(255,255,255,0.04);
    border-color: var(--af-border);
    color: var(--af-graphite-300);
}
.af-pill-cyan {
    background: rgba(94,227,227,0.08);
    border-color: rgba(94,227,227,0.30);
    color: var(--af-cyan-soft);
}
.af-pill-success {
    background: rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.40);
    color: var(--af-success-soft);
}
.af-pill-danger {
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.40);
    color: var(--af-danger-soft);
}
.af-pill-premium {
    background: var(--af-gradient-gold-soft);
    border-color: var(--af-border-gold-strong);
    color: var(--af-gold-soft);
}
.af-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--af-gold);
    box-shadow: 0 0 8px var(--af-gold);
}
.af-dot-live {
    background: var(--af-success);
    box-shadow: 0 0 8px var(--af-success);
    animation: afPulse 2.4s ease-in-out infinite;
}
.af-dot-error {
    background: var(--af-danger);
    box-shadow: 0 0 8px var(--af-danger);
}


/* =====================================================================
   8. KPI / METRIC TILES
   ===================================================================== */
.af-kpi {
    position: relative;
    padding: 1.25rem 1.4rem;
    background: var(--af-surface-1);
    border: 1px solid var(--af-border-gold);
    border-radius: var(--af-radius-lg);
    backdrop-filter: var(--af-glass-blur);
    overflow: hidden;
    transition: transform var(--af-dur-base) var(--af-ease),
                border-color var(--af-dur-base) var(--af-ease),
                box-shadow var(--af-dur-base) var(--af-ease);
}
.af-kpi:hover {
    transform: translateY(-1px);
    border-color: var(--af-border-gold);
    box-shadow: var(--af-glow-gold-sm);
}
.af-kpi::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 100px; height: 100px;
    background: radial-gradient(circle at top right, rgba(207,166,74,0.05), transparent 70%);
    pointer-events: none;
    opacity: 0.5;
}
.af-kpi-label {
    font-family: var(--af-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--af-gold);
}
.af-kpi-value {
    font-family: var(--af-font-display);
    font-weight: 500;
    font-size: 2.1rem;
    letter-spacing: -0.02em;
    color: var(--af-white);
    margin-top: 0.4rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.af-kpi-value-gold {
    background: var(--af-gradient-text-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.af-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-family: var(--af-font-mono);
    font-size: 0.68rem;
    color: var(--af-success-soft);
}
.af-kpi-delta.neg { color: var(--af-danger-soft); }
.af-kpi-caption {
    font-size: 0.68rem;
    color: var(--af-graphite-400);
    margin-top: 0.35rem;
    letter-spacing: 0.02em;
}


/* =====================================================================
   9. DATA BARS / PROGRESS
   ===================================================================== */
.af-bar-track {
    height: 6px;
    background: rgba(255,255,255,0.05);
    border-radius: var(--af-radius-pill);
    overflow: hidden;
}
.af-bar-fill {
    display: block;
    height: 100%;
    background: var(--af-gradient-gold);
    border-radius: var(--af-radius-pill);
    transition: width var(--af-dur-slow) var(--af-ease);
}
.af-bar-fill-cyan { background: var(--af-gradient-cyan); }
.af-bar-fill-success { background: linear-gradient(90deg, #34D8A2, #10B981); }


/* =====================================================================
   10. DIVIDERS / HAIRLINES
   ===================================================================== */
.af-hairline {
    border-top: 1px solid var(--af-border-subtle);
}
.af-divider-gold {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(207,166,74,0.4), transparent);
    border: 0;
}
.af-divider-cyan {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(94,227,227,0.4), transparent);
    border: 0;
}


/* =====================================================================
   11. NAV / SIDEBAR
   ===================================================================== */
.af-nav {
    position: sticky;
    top: 0;
    z-index: var(--af-z-nav);
    background: var(--af-glass-bg-strong);
    backdrop-filter: var(--af-glass-blur);
    -webkit-backdrop-filter: var(--af-glass-blur);
    border-bottom: 1px solid var(--af-border-subtle);
}
.af-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--af-border-subtle);
    border-radius: var(--af-radius-md);
}
.af-tab {
    padding: 0.45rem 0.9rem;
    border-radius: var(--af-radius-sm);
    font-family: var(--af-font-body);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--af-graphite-300);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color var(--af-dur-fast) var(--af-ease),
                background var(--af-dur-fast) var(--af-ease);
    white-space: nowrap;
}
.af-tab:hover { color: var(--af-white); }
.af-tab.is-active {
    color: var(--af-midnight);
    background: var(--af-gradient-gold);
    box-shadow: var(--af-glow-gold-sm);
}


/* =====================================================================
   12. TABLES
   ===================================================================== */
.af-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--af-font-body);
    font-size: 0.85rem;
}
.af-table thead th {
    font-family: var(--af-font-mono);
    font-size: 0.62rem;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: var(--af-graphite-400);
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--af-border-subtle);
    font-weight: 500;
    background: rgba(255,255,255,0.012);
}
.af-table tbody td {
    padding: 0.85rem 1rem;
    color: var(--af-white);
    border-bottom: 1px solid var(--af-border-subtle);
    vertical-align: middle;
}
.af-table tbody tr {
    transition: background var(--af-dur-fast) var(--af-ease);
}
.af-table tbody tr:hover { background: rgba(255,255,255,0.022); }
.af-table tbody tr:last-child td { border-bottom: 0; }


/* =====================================================================
   13. ANIMATIONS
   ===================================================================== */
@keyframes afFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes afPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.55; }
}
@keyframes afShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.af-fade-up { animation: afFadeUp 0.6s var(--af-ease) both; }
.af-fade-up-d1 { animation: afFadeUp 0.6s 0.08s var(--af-ease) both; }
.af-fade-up-d2 { animation: afFadeUp 0.6s 0.16s var(--af-ease) both; }
.af-fade-up-d3 { animation: afFadeUp 0.6s 0.24s var(--af-ease) both; }
.af-shimmer {
    background: linear-gradient(90deg,
        rgba(255,255,255,0.02) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.02) 100%);
    background-size: 200% 100%;
    animation: afShimmer 2s linear infinite;
}


/* =====================================================================
   14. SCROLLBAR
   ===================================================================== */
.af-scope ::-webkit-scrollbar { width: 8px; height: 8px; }
.af-scope ::-webkit-scrollbar-track { background: var(--af-midnight); }
.af-scope ::-webkit-scrollbar-thumb {
    background: var(--af-graphite-700);
    border-radius: var(--af-radius-sm);
}
.af-scope ::-webkit-scrollbar-thumb:hover { background: var(--af-gold); }


/* =====================================================================
   15. BACKGROUNDS — Signature ambient layers
   ===================================================================== */
.af-bg-radial {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(20,36,80,0.55), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(207,166,74,0.05), transparent 60%),
        radial-gradient(700px 400px at 50% 110%, rgba(94,227,227,0.03), transparent 60%),
        var(--af-midnight);
}
.af-bg-grid {
    background-image:
        linear-gradient(rgba(212,166,79,0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,166,79,0.018) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 100%);
}


/* =====================================================================
   16. WORDMARK — Brand lockup
   ===================================================================== */
.af-wordmark {
    font-family: var(--af-font-display);
    font-weight: 500;
    font-size: 1.15rem;
    color: var(--af-white);
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    line-height: 1;
    letter-spacing: -0.01em;
    text-shadow: 0 0 24px rgba(207,166,74,0.08);
    transition: text-shadow var(--af-dur-slow) var(--af-ease);
}
.af-wordmark:hover { text-shadow: 0 0 28px rgba(207,166,74,0.20); }
.af-wordmark .ai {
    background: var(--af-gradient-text-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}
.af-wordmark .tm {
    font-family: var(--af-font-body);
    font-size: 0.55em;
    color: rgba(207,166,74,0.55);
    transform: translateY(-0.55em);
    margin-left: 0.05em;
    font-weight: 400;
}
.af-wordmark-sub {
    display: block;
    font-family: var(--af-font-body);
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(207,166,74,0.55);
    line-height: 1;
    margin-top: 0.3rem;
}


/* =====================================================================
   17. REFINAMENTOS RETROCOMPATÍVEIS — não alteram lógica nem IDs
   Apenas refinam classes legadas já presentes nas páginas atuais.
   ===================================================================== */

/* — Landing & Admin shared legacy classes — */
.card { /* refinamento: cantos um pouco mais arredondados e blur */
    border-radius: var(--af-radius-lg) !important;
}
.eyebrow {
    font-weight: 500 !important;
}
.bar {
    height: 6px;
    border-radius: var(--af-radius-pill) !important;
    background: rgba(255,255,255,0.05) !important;
    overflow: hidden;
}
.bar > span {
    display: block;
    height: 100%;
    background: var(--af-gradient-gold) !important;
    border-radius: var(--af-radius-pill);
    transition: width var(--af-dur-slow) var(--af-ease);
}
.pill {
    line-height: 1.4 !important;
}

/* — Form refinement (Landing modal) — */
.form-input {
    border-radius: var(--af-radius-md) !important;
}
.form-input:focus {
    box-shadow: 0 0 0 3px rgba(207,166,74,0.14) !important;
}

/* — Premium button micro-interaction (landing) — */
.btn-primary-institutional,
.btn-gold {
    letter-spacing: 0.01em;
}


/* =====================================================================
   18. ACCESSIBILITY
   ===================================================================== */
.af-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}
:focus-visible {
    outline: 2px solid var(--af-gold);
    outline-offset: 2px;
    border-radius: var(--af-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
    .af-fade-up, .af-fade-up-d1, .af-fade-up-d2, .af-fade-up-d3,
    .af-shimmer, .af-dot-live {
        animation: none !important;
    }
    .af-card:hover, .af-btn:hover:not(:disabled), .af-kpi:hover {
        transform: none !important;
    }
}


/* =====================================================================
   19. RESPONSIVE HELPERS
   ===================================================================== */
@media (max-width: 640px) {
    .af-kpi-value { font-size: 1.75rem; }
    .af-btn { padding: 0.65rem 1rem; }
}


/* =====================================================================
   20. LANDING v8.1 — REFINOS PREMIUM (Aviation Intelligence Platform)
   ---------------------------------------------------------------------
   Alinha a Landing à identidade visual do "Centro de Inteligência
   AeroFluent AI™" (admin). Apenas camada visual.
   Aplicado via classes legadas já presentes em index.html — nenhum
   ID, name, onclick ou script é tocado.
   Escopo: ativa-se quando <body> recebe a classe .af-landing.
   ===================================================================== */

/* ---------- 20.1 — Base & Background ambient ------------------------- */
body.af-landing {
    font-family: var(--af-font-body);
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(20,36,80,0.55), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(207,166,74,0.05), transparent 60%),
        radial-gradient(700px 400px at 50% 110%, rgba(94,227,227,0.03), transparent 60%),
        var(--af-midnight);
    color: var(--af-white);
    -webkit-font-smoothing: antialiased;
}

/* Reforço da camada radial nas seções com .bg-radial-navy (mesma da admin) */
body.af-landing .bg-radial-navy {
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(20,36,80,0.55), transparent 60%),
        radial-gradient(900px 500px at 0% 100%, rgba(207,166,74,0.05), transparent 60%),
        radial-gradient(700px 400px at 50% 110%, rgba(94,227,227,0.03), transparent 60%),
        var(--af-midnight);
}

/* ---------- 20.2 — Typography (Sora institucional) ------------------- */
body.af-landing .display,
body.af-landing h1.display,
body.af-landing h2.display,
body.af-landing h3.display,
body.af-landing .display-hero {
    font-family: var(--af-font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -0.024em !important;
    line-height: 1.06 !important;
}
body.af-landing h1.display,
body.af-landing .display-hero {
    font-weight: 600 !important;
    letter-spacing: -0.028em !important;
    line-height: 1.02 !important;
}
body.af-landing .num {
    font-family: var(--af-font-display) !important;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em !important;
    font-weight: 500 !important;
}
/* Recupera o italic original do destaque dourado no hero (continua serif aviation) */
body.af-landing h1.display .text-gold-gradient {
    font-family: 'Fraunces', var(--af-font-display), serif !important;
    font-style: italic;
    font-weight: 400 !important;
    letter-spacing: -0.018em !important;
}
/* Eyebrow institucional uniforme com o admin */
body.af-landing .eyebrow {
    font-family: var(--af-font-mono) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase;
    color: var(--af-gold) !important;
    font-weight: 500 !important;
}

/* ---------- 20.3 — Wordmark institucional ---------------------------- */
body.af-landing .wordmark {
    font-family: var(--af-font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -0.012em !important;
}
body.af-landing .wordmark .ai {
    font-weight: 700 !important;
}
body.af-landing .wordmark-sub {
    font-family: var(--af-font-mono) !important;
    font-size: 0.58rem !important;
    letter-spacing: 0.24em !important;
    color: rgba(207,166,74,0.6) !important;
}

/* ---------- 20.4 — Navigation premium glass -------------------------- */
body.af-landing nav.fixed {
    background: var(--af-glass-bg-strong) !important;
    backdrop-filter: blur(22px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
    border-bottom: 1px solid var(--af-border-subtle) !important;
}
body.af-landing nav.fixed a {
    transition: color var(--af-dur-base) var(--af-ease);
}

/* ---------- 20.5 — Cards (alinhado ao admin) ------------------------- */
body.af-landing .card {
    background: linear-gradient(180deg, rgba(255,255,255,0.024), rgba(255,255,255,0.006)) !important;
    border: 1px solid rgba(207,166,74,0.14) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    transition:
        border-color var(--af-dur-base) var(--af-ease),
        transform var(--af-dur-base) var(--af-ease),
        box-shadow var(--af-dur-base) var(--af-ease) !important;
}
body.af-landing .card:hover {
    border-color: rgba(207,166,74,0.30) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 18px 50px -24px rgba(207,166,74,0.22) !important;
}

/* Card de destaque dourado (linha "A resposta", etc.) — gradient suave */
body.af-landing .card[style*="rgba(207,166,74,0.08)"] {
    background: linear-gradient(180deg, rgba(207,166,74,0.10), rgba(207,166,74,0.02)) !important;
    border-color: rgba(207,166,74,0.30) !important;
}

/* "Mini card" do hero (operação contínua) — pill premium */
body.af-landing .card.px-4.py-2\.5 {
    background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.010)) !important;
    border-color: rgba(207,166,74,0.28) !important;
    box-shadow: 0 8px 24px -10px rgba(207,166,74,0.25);
    border-radius: 999px !important;
}

/* ---------- 20.6 — Tag / Pill institucional do hero ------------------ */
body.af-landing .tag {
    background: rgba(94,227,227,0.06) !important;
    border: 1px solid rgba(94,227,227,0.28) !important;
    color: #8FE9E9 !important;
    font-family: var(--af-font-mono) !important;
    font-size: 0.62rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    padding: 0.32rem 0.75rem !important;
    border-radius: 999px;
    transition: border-color var(--af-dur-base) var(--af-ease);
}
body.af-landing .tag:hover { border-color: rgba(94,227,227,0.50) !important; }
/* O dot interno do tag passa a ser cyan-glow */
body.af-landing .tag .bg-gold {
    background: var(--af-success) !important;
    box-shadow: 0 0 8px var(--af-success) !important;
}

/* ---------- 20.7 — Buttons institucionais (gold + outline) ---------- */
body.af-landing .btn-gold,
body.af-landing .btn-primary-institutional {
    background: linear-gradient(135deg, #F0D68F 0%, #CFA64A 55%, #A8821F 100%) !important;
    color: #0B1220 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 8px 24px -10px rgba(207,166,74,0.50) !important;
    transition:
        transform var(--af-dur-base) var(--af-ease),
        box-shadow var(--af-dur-base) var(--af-ease),
        filter var(--af-dur-base) var(--af-ease) !important;
}
body.af-landing .btn-gold:hover,
body.af-landing .btn-primary-institutional:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 38px -10px rgba(207,166,74,0.55) !important;
    filter: brightness(1.06) !important;
}
body.af-landing .btn-outline,
body.af-landing .btn-secondary-institutional {
    border: 1px solid rgba(247,248,250,0.16) !important;
    background: rgba(255,255,255,0.014) !important;
    border-radius: 10px !important;
    color: var(--af-white) !important;
    transition: border-color var(--af-dur-base) var(--af-ease),
                background var(--af-dur-base) var(--af-ease) !important;
}
body.af-landing .btn-outline:hover,
body.af-landing .btn-secondary-institutional:hover {
    border-color: var(--af-gold) !important;
    background: rgba(207,166,74,0.05) !important;
}

/* ---------- 20.8 — Hero stats (KPIs inline) -------------------------- */
body.af-landing header#top .num {
    color: var(--af-white);
}

/* ---------- 20.9 — Form (inputs do modal) --------------------------- */
body.af-landing .form-input {
    background: rgba(255,255,255,0.025) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 10px !important;
    color: var(--af-white) !important;
    transition:
        border-color var(--af-dur-base) var(--af-ease),
        background var(--af-dur-base) var(--af-ease),
        box-shadow var(--af-dur-base) var(--af-ease) !important;
}
body.af-landing .form-input::placeholder { color: var(--af-graphite-400); }
body.af-landing .form-input:focus {
    border-color: var(--af-gold) !important;
    background: rgba(255,255,255,0.045) !important;
    box-shadow: 0 0 0 3px rgba(207,166,74,0.14) !important;
    outline: none !important;
}
body.af-landing .form-select {
    background-color: rgba(11,18,32,0.7) !important;
}

/* ---------- 20.10 — Modal premium ----------------------------------- */
body.af-landing .modal {
    background: rgba(5, 11, 28, 0.78) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
}
body.af-landing .modal .modal-card {
    background:
        linear-gradient(180deg, rgba(11,26,58,0.95), rgba(5,11,28,0.97)) !important;
    border: 1px solid rgba(207,166,74,0.30) !important;
    border-radius: 18px !important;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04) inset,
        0 40px 80px -24px rgba(0,0,0,0.65) !important;
}

/* ---------- 20.11 — Cookie banner (institucional) ------------------- */
body.af-landing .cookie-banner {
    background: linear-gradient(180deg, rgba(7,17,42,0.94), rgba(5,11,28,0.98)) !important;
    backdrop-filter: blur(20px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
    border-top: 1px solid rgba(207,166,74,0.22) !important;
}

/* ---------- 20.12 — Hairlines & dividers ---------------------------- */
body.af-landing .hairline { border-top: 1px solid rgba(255,255,255,0.06) !important; }
body.af-landing .divider-gold {
    background: linear-gradient(90deg, transparent, rgba(207,166,74,0.40), transparent) !important;
}

/* ---------- 20.13 — Pulse / Microinterações ------------------------- */
body.af-landing .pulse-dot {
    /* Mantém o keyframe original, apenas refina o ritmo */
    animation-duration: 2.4s !important;
}

/* ---------- 20.14 — Footer alinhado ao admin ------------------------ */
body.af-landing footer {
    background: var(--af-midnight) !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}
body.af-landing footer a { transition: color var(--af-dur-base) var(--af-ease); }

/* ---------- 20.15 — Section heads (alinhado ao admin) --------------- */
/* Seções com eyebrow + título grande recebem respiro institucional */
body.af-landing section > div > .max-w-2xl,
body.af-landing section > div > .max-w-xl {
    padding-bottom: 0.5rem;
}

/* ---------- 20.16 — Aviation HUD detail (sutil) --------------------- */
body.af-landing header#top::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(207,166,74,0.18), transparent);
    pointer-events: none;
}

/* ---------- 20.17 — Mobile finetune --------------------------------- */
@media (max-width: 640px) {
    body.af-landing .card { border-radius: 12px !important; }
    body.af-landing .modal .modal-card { border-radius: 14px !important; }
    body.af-landing .display-hero { font-size: 2.65rem !important; line-height: 1.05 !important; }
}


/* =====================================================================
   21. LANDING v8.3 — REFINOS DE COMPACTAÇÃO, HIERARQUIA & COPY INSTITUCIONAL
   ---------------------------------------------------------------------
   Reduz espaços vazios excessivos, melhora hierarquia visual, refina
   tags institucionais, aumenta legibilidade de textos secundários,
   compacta seções para ritmo de leitura premium. Aplicado em escopo
   .af-landing — preserva 100% do funcionamento.
   ===================================================================== */

/* ---------- 21.1 — Section spacing (mais compacto, ritmo executivo) -- */
body.af-landing section {
    /* Reduz py-16/py-20 para um respiro mais executivo, sem quebrar grid */
}
body.af-landing section.py-16 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
body.af-landing section.lg\:py-20 { /* preserva mobile, reduz desktop */ }
@media (min-width: 1024px) {
    body.af-landing section.lg\:py-20 { padding-top: 4.25rem !important; padding-bottom: 4.25rem !important; }
}

/* Hero — respiro otimizado */
body.af-landing header#top {
    min-height: 78vh !important;
}
body.af-landing header#top .py-12 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
@media (min-width: 1024px) {
    body.af-landing header#top .lg\:py-16 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
}

/* Section heads — menos margin-bottom */
body.af-landing section .mb-10 { margin-bottom: 2rem !important; }
body.af-landing section .mb-12 { margin-bottom: 2.25rem !important; }

/* ---------- 21.2 — Tag institucional do hero (Web Summit) ------------ */
body.af-landing #heroBadgeWebSummit {
    background: linear-gradient(135deg, rgba(240,214,143,0.10), rgba(207,166,74,0.04)) !important;
    border: 1px solid rgba(207,166,74,0.32) !important;
    color: var(--af-gold-soft) !important;
    box-shadow: 0 8px 28px -10px rgba(207,166,74,0.30);
    padding: 0.36rem 0.85rem !important;
    font-size: 0.6rem !important;
}
body.af-landing #heroBadgeWebSummit .bg-gold {
    background: var(--af-gold) !important;
    box-shadow: 0 0 10px var(--af-gold) !important;
}

/* ---------- 21.3 — Hierarquia tipográfica refinada ------------------- */
/* Títulos H2 das seções: respiro vertical reduzido + contraste */
body.af-landing section h2.display {
    line-height: 1.04 !important;
    margin-top: 0.6rem !important;
}
/* Parágrafos descritivos (introduções de seção) — mais legíveis */
body.af-landing section .max-w-2xl > p,
body.af-landing section .max-w-xl > p,
body.af-landing section .lg\:col-span-5 > p {
    color: #B3BACB !important;            /* graphite-200, mais legível que gray-400 */
    line-height: 1.65 !important;
}

/* Eyebrow institucional (alinhado ao admin) */
body.af-landing .eyebrow {
    display: inline-block;
    margin-bottom: 0.15rem;
}

/* ---------- 21.4 — Cards mais compactos & uniformes ------------------ */
body.af-landing .card.p-6 { padding: 1.25rem 1.35rem !important; }
body.af-landing .card.p-5 { padding: 1.1rem 1.25rem !important; }
body.af-landing .card.p-4 { padding: 0.95rem 1.1rem !important; }

/* Card de destaque "A resposta" — gradient suave alinhado ao admin */
body.af-landing #mercado .card[style*="rgba(207,166,74,0.08)"] {
    background: linear-gradient(180deg, rgba(207,166,74,0.10), rgba(207,166,74,0.02)) !important;
    border-color: rgba(207,166,74,0.30) !important;
    box-shadow: inset 0 0 0 1px rgba(207,166,74,0.04), 0 18px 48px -24px rgba(207,166,74,0.18);
}

/* Big numbers (mercado) — refinamento de proporção */
body.af-landing #mercado .num.text-4xl,
body.af-landing #mercado .num.text-5xl {
    line-height: 1 !important;
    letter-spacing: -0.028em !important;
}

/* ---------- 21.5 — Tag das etapas (timeline Evolução) ---------------- */
body.af-landing .timeline-rail ~ * .tag,
body.af-landing section .tag.mb-2 {
    background: rgba(207,166,74,0.06) !important;
    border-color: rgba(207,166,74,0.28) !important;
    color: var(--af-gold-soft) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.2em !important;
    padding: 0.22rem 0.6rem !important;
}

/* Timeline — articles mais compactos */
body.af-landing .timeline-rail ~ .space-y-7 > article,
body.af-landing .space-y-7 > article {
    /* Já estamos com space-y-7 (28px); refinamos dot */
}
body.af-landing .timeline-rail {
    background: linear-gradient(180deg, rgba(207,166,74,0.5) 0%, rgba(207,166,74,0.10) 70%, transparent 100%) !important;
}

/* Hero stats — refinamento de proporção */
body.af-landing header#top .num.text-2xl,
body.af-landing header#top .num.text-3xl {
    letter-spacing: -0.025em !important;
    line-height: 1 !important;
}

/* ---------- 21.6 — Centro de Comando (Plataforma) -------------------- */
body.af-landing #plataforma .card.p-4.sm\:p-6 {
    padding: 1.25rem !important;
}
@media (min-width: 640px) {
    body.af-landing #plataforma .card.p-4.sm\:p-6 { padding: 1.5rem !important; }
}
/* Os 3 sub-painéis do centro de comando recebem identidade unificada */
body.af-landing #plataforma .card.p-4.sm\:p-6 > .grid > div[class*="rounded-lg"] {
    border-radius: 12px !important;
    border-color: rgba(255,255,255,0.07) !important;
}

/* ---------- 21.7 — Cards de capacidade (Plataforma) ------------------ */
body.af-landing #plataforma .grid.sm\:grid-cols-2.lg\:grid-cols-3 .card.p-5 {
    transition: all 0.25s var(--af-ease);
}
body.af-landing #plataforma .grid.sm\:grid-cols-2.lg\:grid-cols-3 .card.p-5 h3 {
    font-family: var(--af-font-display) !important;
    font-weight: 600 !important;
    letter-spacing: -0.012em !important;
    color: var(--af-white) !important;
}
body.af-landing #plataforma .grid.sm\:grid-cols-2.lg\:grid-cols-3 .card.p-5 p {
    color: #B3BACB !important;
}

/* ---------- 21.8 — Enterprise cards (eyebrow Capitalize) ------------- */
body.af-landing #enterprise .card .font-mono.tracking-widest {
    font-family: var(--af-font-mono) !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    color: var(--af-gold) !important;
    font-weight: 500 !important;
}
body.af-landing #enterprise .card h3.display {
    margin-top: 0.45rem !important;
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
}

/* ---------- 21.9 — Parcerias cards (institucional) ------------------- */
body.af-landing .card .text-\[10px\].tracking-\[0\.22em\].uppercase.text-gold {
    font-family: var(--af-font-mono) !important;
    font-weight: 500 !important;
}

/* ---------- 21.10 — Hero stats (4 KPIs inline) ----------------------- */
body.af-landing header#top .grid.grid-cols-2.sm\:grid-cols-4 {
    padding-top: 1.5rem !important;
}
body.af-landing header#top .grid.grid-cols-2.sm\:grid-cols-4 .num {
    background: linear-gradient(135deg, #F0D68F 0%, #CFA64A 60%, #A8821F 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---------- 21.11 — Contraste de textos secundários ------------------ */
/* Levanta um pouco o cinza usado em textos secundários para legibilidade */
body.af-landing .text-gray-400 {
    color: #9CA3AF !important; /* Tailwind gray-400 mais opaco */
}
body.af-landing p.text-gray-400,
body.af-landing .card p.text-gray-400 {
    color: #B3BACB !important; /* parágrafos com mais legibilidade */
}
body.af-landing .text-gray-500 {
    color: #8A93AD !important;
}

/* ---------- 21.12 — CTA Final (mais compacto) ------------------------ */
body.af-landing section[class*="from-navy"],
body.af-landing section[style*="navy-deep"] {
    /* nenhum override pesado, apenas afirmar limit superior */
}

/* ---------- 21.13 — Cookie banner: hierarquia ------------------------ */
body.af-landing .cookie-banner .text-gold {
    font-family: var(--af-font-mono) !important;
}

/* ---------- 21.14 — Glow institucional no hero (sutil radar) --------- */
body.af-landing header#top .ring-gold {
    box-shadow:
        inset 0 0 0 1px rgba(207,166,74,0.22),
        0 0 60px -20px rgba(207,166,74,0.25);
}

/* ---------- 21.15 — Hero CTA: glow premium --------------------------- */
body.af-landing header#top .btn-gold {
    box-shadow:
        0 8px 24px -10px rgba(207,166,74,0.55),
        0 0 0 1px rgba(240,214,143,0.20) inset !important;
}

/* ---------- 21.16 — Wordmark-sub (header) ---------------------------- */
body.af-landing .wordmark-sub {
    font-family: var(--af-font-mono) !important;
    font-size: 0.56rem !important;
    letter-spacing: 0.18em !important;
    color: rgba(207,166,74,0.65) !important;
    max-width: 32ch;
    white-space: normal !important;
    line-height: 1.3 !important;
    margin-top: 0.25rem !important;
}
@media (max-width: 1023px) {
    body.af-landing .wordmark-sub { display: none !important; }
}

/* ---------- 21.17 — Mobile refinement (proporção) -------------------- */
@media (max-width: 640px) {
    body.af-landing section.py-16 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    body.af-landing section h2.display.text-5xl,
    body.af-landing section h2.display.sm\:text-5xl {
        font-size: 2rem !important;
        line-height: 1.08 !important;
    }
    body.af-landing #mercado .num.text-5xl { font-size: 2.25rem !important; }
    body.af-landing .card.p-6 { padding: 1.1rem 1.15rem !important; }
    body.af-landing .card.p-5 { padding: 1rem 1.1rem !important; }
    body.af-landing header#top { min-height: 70vh !important; }
}

/* ---------- 21.18 — Reduced motion (preserva acessibilidade) --------- */
@media (prefers-reduced-motion: reduce) {
    body.af-landing #heroBadgeWebSummit .pulse-dot { animation: none !important; }
}

/* =====================================================================
   22. LANDING HOTFIX — FORM SELECTS LEGÍVEIS (dark + gold focus)
   ---------------------------------------------------------------------
   Problema corrigido: após o redesign v8.3, os <select> apareciam com
   lista nativa branca e texto cinza claro praticamente invisível em
   alguns browsers (Chrome/Safari/Firefox no Windows e iOS).
   Escopo: apenas Landing (body.af-landing). NÃO altera lógica, IDs,
   names, handlers, fetch, redirects ou o admin/MVP.
   ===================================================================== */

/* ---------- 22.1 — Selects: superfície escura premium --------------- */
body.af-landing select,
body.af-landing select.form-input,
body.af-landing select.form-select,
body.af-landing #profissao,
body.af-landing #nivel,
body.af-landing #idioma,
body.af-landing #estado,
body.af-landing #objetivo {
    background-color: #0B132B !important;
    color: #F7F8FA !important;
    -webkit-text-fill-color: #F7F8FA !important;
    border: 1px solid rgba(207,166,74,0.22) !important;
    /* Caret dropdown dourado custom (SVG inline) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23CFA64A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.9rem center !important;
    padding-right: 2.2rem !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* ---------- 22.2 — Options: fundo dark, texto branco --------------- */
body.af-landing select option,
body.af-landing select optgroup {
    background-color: #0B132B !important;
    color: #F7F8FA !important;
}

/* Placeholder (option disabled) — visível mas suave */
body.af-landing select option[disabled],
body.af-landing select option[value=""] {
    background-color: #0B132B !important;
    color: #8892A6 !important;
}

/* Option selecionada / hover (suporte limitado entre browsers,
   mas garantimos legibilidade onde o browser respeitar) */
body.af-landing select option:checked,
body.af-landing select option:hover {
    background-color: rgba(207,166,74,0.18) !important;
    color: #F7F8FA !important;
}

/* ---------- 22.3 — Foco dourado premium ---------------------------- */
body.af-landing select:focus,
body.af-landing select.form-input:focus,
body.af-landing select.form-select:focus {
    outline: none !important;
    border-color: #CFAB4A !important;
    box-shadow: 0 0 0 3px rgba(207,171,74,0.20) !important;
    background-color: #0B132B !important;
}

/* ---------- 22.4 — Estado válido (cor restaurada ao escolher) ------ */
body.af-landing select:valid {
    color: #F7F8FA !important;
}
body.af-landing select:invalid {
    color: #8892A6 !important; /* placeholder visível, não invisível */
}

/* ---------- 22.5 — Inputs de texto: harmonização com selects ------- */
body.af-landing input[type="text"].form-input,
body.af-landing input[type="email"].form-input {
    background-color: rgba(11,19,43,0.55) !important;
    color: #F7F8FA !important;
    -webkit-text-fill-color: #F7F8FA !important;
}
body.af-landing input[type="text"].form-input::placeholder,
body.af-landing input[type="email"].form-input::placeholder {
    color: #8892A6 !important;
    opacity: 1 !important;
}
body.af-landing input[type="text"].form-input:focus,
body.af-landing input[type="email"].form-input:focus {
    outline: none !important;
    border-color: #CFAB4A !important;
    box-shadow: 0 0 0 3px rgba(207,171,74,0.20) !important;
}

/* ---------- 22.6 — Autofill (Chrome/Safari) ------------------------- */
body.af-landing input:-webkit-autofill,
body.af-landing select:-webkit-autofill {
    -webkit-text-fill-color: #F7F8FA !important;
    -webkit-box-shadow: 0 0 0 1000px #0B132B inset !important;
    caret-color: #F7F8FA !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* ---------- 22.7 — Firefox: opções nativas legíveis ----------------- */
@-moz-document url-prefix() {
    body.af-landing select,
    body.af-landing select option {
        background-color: #0B132B !important;
        color: #F7F8FA !important;
    }
}

/* =====================================================================
   23. LANDING v8.3.3 — HARD CASCADE OVERRIDES
   ---------------------------------------------------------------------
   PROBLEMA: O <style> interno do index.html (linhas 52-398) declara
   regras `.display`, `.num`, `.card`, `.btn-gold`, `.tag`, etc. com a
   MESMA especificidade do DS. Como o <style> interno era carregado
   DEPOIS do <link rel="stylesheet">, o legado vencia pela regra
   "later wins" da cascata.
   SOLUÇÃO COMBINADA:
   1. Movemos o <link> do DS para DEPOIS do </style> no index.html
      (resolução estrutural — cascata correta).
   2. Esta Seção 23 garante OVERRIDES blindados com especificidade
      ainda maior (body.af-landing + classe + estado) e !important,
      caso algum cache CDN sirva ordem antiga.
   Escopo: apenas .af-landing. NÃO altera scripts, IDs, names, form.
   ===================================================================== */

/* ---------- 23.1 — Typography Sora institucional (vence Fraunces) ---- */
body.af-landing .display,
body.af-landing h1.display,
body.af-landing h2.display,
body.af-landing h3.display,
body.af-landing h4.display,
body.af-landing .display-hero {
    font-family: 'Sora', 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.024em !important;
    line-height: 1.06 !important;
}
body.af-landing h1.display,
body.af-landing .display-hero {
    font-weight: 600 !important;
    letter-spacing: -0.028em !important;
    line-height: 1.02 !important;
}

/* "inteligente" mantém Fraunces italic (assinatura institucional) */
body.af-landing .display em,
body.af-landing .display i,
body.af-landing .display-hero em,
body.af-landing .display-hero i {
    font-family: 'Fraunces', 'Georgia', serif !important;
    font-style: italic !important;
    font-weight: 400 !important;
}

/* Números: Sora display também (não Fraunces) */
body.af-landing .num {
    font-family: 'Sora', 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: -0.03em !important;
}

/* Eyebrow institucional */
body.af-landing .eyebrow {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.66rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.28em !important;
    text-transform: uppercase !important;
    color: rgba(207,166,74,0.85) !important;
}

/* ---------- 23.2 — Cards premium (raio 14-18px, glass) -------------- */
body.af-landing .card {
    background: linear-gradient(180deg, rgba(255,255,255,0.030), rgba(255,255,255,0.008)) !important;
    border: 1px solid rgba(207,166,74,0.12) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    transition: border-color .4s ease, transform .4s ease, box-shadow .4s ease !important;
}
body.af-landing .card:hover {
    border-color: rgba(207,166,74,0.32) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 22px 60px -24px rgba(207,166,74,0.20) !important;
}

/* Cards grandes (Enterprise, plataforma) ganham raio 18px */
body.af-landing #enterprise .card,
body.af-landing #plataforma .card.p-6 {
    border-radius: 18px !important;
}

/* ---------- 23.3 — Botões premium (gold gradient + glow) ----------- */
body.af-landing .btn-gold,
body.af-landing .btn-primary-institutional {
    background: linear-gradient(135deg, #F0D68F 0%, #CFA64A 55%, #A8821F 100%) !important;
    color: #0B1220 !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.005em !important;
    border-radius: 10px !important;
    box-shadow:
        0 10px 28px -10px rgba(207,166,74,0.55),
        inset 0 1px 0 rgba(255,255,255,0.18) !important;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}
body.af-landing .btn-gold:hover,
body.af-landing .btn-primary-institutional:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        0 18px 46px -10px rgba(207,166,74,0.65),
        inset 0 1px 0 rgba(255,255,255,0.22) !important;
    filter: brightness(1.05) !important;
}
body.af-landing .btn-outline,
body.af-landing .btn-secondary-institutional {
    border: 1px solid rgba(247,248,250,0.20) !important;
    color: #F7F8FA !important;
    background: rgba(255,255,255,0.02) !important;
    border-radius: 10px !important;
    transition: border-color .25s ease, background .25s ease !important;
}
body.af-landing .btn-outline:hover,
body.af-landing .btn-secondary-institutional:hover {
    border-color: rgba(207,166,74,0.65) !important;
    background: rgba(207,166,74,0.06) !important;
}

/* ---------- 23.4 — Tag/Pill HUD (cyan accent + gold gradient) ------ */
body.af-landing .tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: .5rem !important;
    padding: .32rem .75rem !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(94,227,227,0.08), rgba(207,166,74,0.04)) !important;
    border: 1px solid rgba(94,227,227,0.22) !important;
    font-family: 'JetBrains Mono', monospace !important;
    font-size: .66rem !important;
    letter-spacing: 0.20em !important;
    text-transform: uppercase !important;
    color: rgba(240,214,143,0.92) !important;
}

/* ---------- 23.5 — Wordmark premium ---------------------------------- */
body.af-landing .wordmark {
    font-family: 'Sora', system-ui, sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-shadow: 0 0 24px rgba(207,166,74,0.10) !important;
}
body.af-landing .wordmark .ai {
    background: linear-gradient(135deg, #F0D68F 0%, #CFA64A 60%, #A8821F 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}
body.af-landing .wordmark .tm {
    font-family: 'Inter', sans-serif !important;
    color: rgba(207,166,74,0.55) !important;
}
body.af-landing .wordmark-sub {
    font-family: 'JetBrains Mono', monospace !important;
    font-size: 0.56rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: rgba(207,166,74,0.62) !important;
    line-height: 1.3 !important;
    margin-top: 0.28rem !important;
    white-space: normal !important;
    max-width: 32ch;
}
@media (max-width: 1023px) {
    body.af-landing .wordmark-sub { display: none !important; }
}

/* ---------- 23.6 — Form inputs (dark navy + gold focus) ------------- */
body.af-landing .form-input {
    background: rgba(11,19,43,0.55) !important;
    border: 1px solid rgba(207,166,74,0.22) !important;
    border-radius: 10px !important;
    color: #F7F8FA !important;
    -webkit-text-fill-color: #F7F8FA !important;
    transition: all 0.3s ease !important;
}
body.af-landing .form-input:focus {
    border-color: #CFA64A !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(207,166,74,0.18) !important;
}
body.af-landing .form-input::placeholder {
    color: #8892A6 !important;
    opacity: 1 !important;
}

/* ---------- 23.7 — Modal premium (gold border + 80px shadow) -------- */
body.af-landing .modal {
    background: rgba(5, 11, 28, 0.94) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}
body.af-landing .modal-card,
body.af-landing .modal .card {
    border: 1px solid rgba(207,166,74,0.30) !important;
    box-shadow:
        0 80px 120px -40px rgba(0,0,0,0.65),
        0 0 0 1px rgba(207,166,74,0.10) !important;
    border-radius: 18px !important;
}

/* ---------- 23.8 — Cookie banner premium ---------------------------- */
body.af-landing .cookie-banner {
    background: linear-gradient(180deg, rgba(5,11,28,0.94), rgba(5,11,28,0.98)) !important;
    backdrop-filter: blur(22px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
    border-top: 1px solid rgba(207,166,74,0.25) !important;
    box-shadow: 0 -20px 60px -20px rgba(0,0,0,0.6) !important;
}

/* ---------- 23.9 — Divider gold (mais sutil) ------------------------ */
body.af-landing .divider-gold {
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(207,166,74,0.40), transparent) !important;
}

/* ---------- 23.10 — Spacing global mais compacto (executivo) -------- */
/* Reduz padding vertical de seções py-16/py-20 do Tailwind */
body.af-landing section.py-16   { padding-top: 3rem !important;  padding-bottom: 3rem !important; }
body.af-landing section.py-20   { padding-top: 3.75rem !important; padding-bottom: 3.75rem !important; }
@media (min-width: 1024px) {
    body.af-landing section.lg\:py-20 { padding-top: 4rem !important; padding-bottom: 4rem !important; }
    body.af-landing section.lg\:py-24 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
}
body.af-landing section .mb-10 { margin-bottom: 1.85rem !important; }
body.af-landing section .mb-12 { margin-bottom: 2.1rem !important; }
body.af-landing section .mb-16 { margin-bottom: 2.5rem !important; }

/* Hero — respiro premium reduzido */
body.af-landing header#top { min-height: 76vh !important; }
body.af-landing header#top .py-12 { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
@media (min-width: 1024px) {
    body.af-landing header#top .lg\:py-16 { padding-top: 2.75rem !important; padding-bottom: 2.75rem !important; }
}

/* ---------- 23.11 — Contraste de textos secundários ----------------- */
/* Tailwind .text-gray-400 (#9CA3AF) → mais legível (#B3BACB +18%) */
body.af-landing p.text-gray-400,
body.af-landing .text-gray-400 {
    color: #B3BACB !important;
}
body.af-landing p.text-gray-300,
body.af-landing .text-gray-300 {
    color: #C7CCD9 !important;
}
body.af-landing p.text-gray-500,
body.af-landing .text-gray-500 {
    color: #97A0B5 !important;
}

/* Parágrafos institucionais (descrições de seção) */
body.af-landing section .max-w-xl > p,
body.af-landing section .max-w-2xl > p,
body.af-landing section .max-w-3xl > p {
    line-height: 1.65 !important;
}

/* ---------- 23.12 — Hairline e ring-gold premium -------------------- */
body.af-landing .hairline {
    border-top: 1px solid rgba(255,255,255,0.06) !important;
}
body.af-landing .ring-gold {
    box-shadow: inset 0 0 0 1px rgba(207,166,74,0.25) !important;
}

/* ---------- 23.13 — Mobile finetune (proporção premium) ------------- */
@media (max-width: 640px) {
    body.af-landing section.py-16 { padding-top: 2.25rem !important; padding-bottom: 2.25rem !important; }
    body.af-landing section.py-20 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    body.af-landing header#top    { min-height: 68vh !important; }
    body.af-landing h2.display.text-5xl,
    body.af-landing h2.display.sm\:text-5xl {
        font-size: 1.95rem !important;
        line-height: 1.08 !important;
    }
    body.af-landing .display-hero {
        font-size: 2.4rem !important;
        line-height: 1.04 !important;
    }
    body.af-landing #mercado .num.text-5xl { font-size: 2.1rem !important; }
    body.af-landing .card.p-6 { padding: 1rem 1.1rem !important; }
    body.af-landing .card.p-5 { padding: 0.9rem 1rem !important; }
    body.af-landing section .mb-10 { margin-bottom: 1.5rem !important; }
    body.af-landing section .mb-12 { margin-bottom: 1.75rem !important; }
}

/* =====================================================================
   24. ADMIN v12 — RADICAL SIMPLIFICATION
   ---------------------------------------------------------------------
   Escopo: admin.html (não-landing).
   Estética: Palantir · Bloomberg Terminal · Apple Enterprise
   Flat · Silent · Institutional · No glow · No gradients on UI
   Gold restrained · Cyan near-invisible · Maximum whitespace
   ===================================================================== */

/* ---------- 24.1 — Live Operations · Hero flat ──────────────────── */
.live-hero {
    position: relative;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 12px;
    min-height: 280px;
    box-shadow: none;
}
.live-radar {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.35;
}
.live-content {
    position: relative;
    z-index: 2;
    padding: 2.5rem 2rem 2rem;
}
.live-counter {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(3rem, 6vw, 5rem);
    line-height: 1;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    color: var(--gold, #D4A64F);
    -webkit-text-fill-color: var(--gold, #D4A64F);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
}
.live-mini {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    transition: border-color .3s ease;
}
.live-mini:hover {
    border-color: rgba(255,255,255,0.06);
}
.live-mini-label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.58rem;
    letter-spacing: 0.06em;
    text-transform: none;
    color: #5A6584;
    margin-bottom: 0.35rem;
    font-weight: 500;
}
.live-mini-value {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.35rem;
    font-variant-numeric: tabular-nums;
    color: var(--ivory, #F5F7FA);
    letter-spacing: -0.025em;
}

/* ---------- 24.2 — Funil (Jornada) ─ flat, silent ───────────────── */
.funnel {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
}
@media (max-width: 768px) {
    .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.funnel-step {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.03);
    border-radius: 10px;
    padding: 1.15rem 0.85rem;
    text-align: center;
    transition: border-color .3s ease;
}
.funnel-step:hover {
    border-color: rgba(255,255,255,0.06);
}
.funnel-num {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--gold, #D4A64F);
    -webkit-text-fill-color: var(--gold, #D4A64F);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
    margin-bottom: 0.4rem;
}
.funnel-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    text-transform: none;
    color: #5A6584;
    font-weight: 500;
}
.funnel-step-cyan {
    border-color: rgba(111,184,201,0.06);
}
.funnel-step-cyan .funnel-num {
    color: rgba(143,196,209,0.65);
    -webkit-text-fill-color: rgba(143,196,209,0.65);
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
}
.funnel-step-cyan:hover {
    border-color: rgba(111,184,201,0.12);
}

/* ---------- 24.3 — Web Summit toggle ─ smaller ──────────────────── */
.ws-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.ws-toggle-track {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background .3s ease, border-color .3s ease;
}
.ws-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #D4A64F;
    box-shadow: none;
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.ws-toggle input:checked + .ws-toggle-track {
    background: rgba(212,166,79,0.08);
    border-color: rgba(212,166,79,0.20);
}
.ws-toggle input:checked + .ws-toggle-track .ws-toggle-thumb {
    transform: translateX(16px);
    background: var(--gold, #D4A64F);
}
.ws-toggle input:focus-visible + .ws-toggle-track {
    outline: 2px solid rgba(212,166,79,0.25);
    outline-offset: 2px;
}

/* ---------- 24.4 — Modo Web Summit (body.ws-mode) ───────────────── */
body.ws-mode {
    background: #030914 !important;
}
body.ws-mode aside {
    display: none !important;
}
body.ws-mode .max-w-\[1400px\] > .grid {
    grid-template-columns: 1fr !important;
}
body.ws-mode #sec-live {
    margin-top: 1rem !important;
    margin-bottom: 3rem !important;
}
body.ws-mode #sec-live .live-hero {
    min-height: 420px;
    border-color: rgba(255,255,255,0.04) !important;
}
body.ws-mode #sec-live .live-radar { opacity: 0.45; }
body.ws-mode #sec-live .live-counter {
    font-size: clamp(4.5rem, 11vw, 8rem);
    letter-spacing: -0.05em;
}
body.ws-mode #sec-live .live-mini {
    padding: 1.1rem 1.25rem;
    border-color: rgba(255,255,255,0.04);
}
body.ws-mode #sec-live .live-mini-value {
    font-size: 1.75rem;
}
body.ws-mode #sec-live .live-mini-label {
    font-size: 0.58rem;
}
body.ws-mode #sec-live .eyebrow {
    font-size: 0.62rem;
    letter-spacing: 0.12em;
}
/* Secondary sections — muted in keynote */
body.ws-mode #sec-overview,
body.ws-mode #sec-acquisition,
body.ws-mode #sec-programa-beta,
body.ws-mode #sec-behavior,
body.ws-mode #sec-survey,
body.ws-mode #sec-journey,
body.ws-mode #sec-investors,
body.ws-mode #sec-table {
    opacity: 0.55;
    transition: opacity .4s ease;
}
body.ws-mode #sec-overview:hover,
body.ws-mode #sec-acquisition:hover,
body.ws-mode #sec-programa-beta:hover,
body.ws-mode #sec-behavior:hover,
body.ws-mode #sec-survey:hover,
body.ws-mode #sec-journey:hover,
body.ws-mode #sec-investors:hover,
body.ws-mode #sec-table:hover {
    opacity: 1;
}
body.ws-mode label[for="webSummitToggle"] span:first-child {
    color: rgba(212,166,79,0.55) !important;
}
body.ws-mode header {
    background: rgba(3,9,20,0.85) !important;
    border-bottom-color: rgba(255,255,255,0.02) !important;
}

/* ---------- 24.5 — Tempo real badge ── quiet ────────────────────── */
.realtime-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: none;
    color: #5A6584;
    font-weight: 500;
}
.realtime-badge::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold, #D4A64F);
    box-shadow: none;
    animation: af-rt-pulse 3s ease-in-out infinite;
}
@keyframes af-rt-pulse {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.35; }
}

/* ---------- 24.6 — Mobile finetune ─────────────────────────────── */
@media (max-width: 640px) {
    .live-content    { padding: 1.5rem 1rem 1.5rem; }
    .live-counter    { font-size: 2.5rem; letter-spacing: -0.035em; }
    .live-mini       { padding: 0.7rem 0.8rem; }
    .live-mini-value { font-size: 1.1rem; }
    .live-mini-label { font-size: 0.52rem; }
    .funnel-num      { font-size: 1.35rem; }
    .funnel-step     { padding: 0.85rem 0.65rem; }
}

/* ---------- 24.7 — Tabela ── flat hover ─────────────────────────── */
#leadsTableBody tr,
#journeyTableBody tr,
#surveyTableBody tr {
    border-color: rgba(255,255,255,0.025) !important;
}
#leadsTableBody tr:hover,
#journeyTableBody tr:hover,
#surveyTableBody tr:hover {
    background: rgba(255,255,255,0.012) !important;
}

/* ---------- 24.8 — Filtros bar ── clean ─────────────────────────── */
.filters-bar select,
.filters-bar input {
    background: rgba(255,255,255,0.02) !important;
    border-color: rgba(255,255,255,0.04) !important;
    color: var(--ivory, #F5F7FA) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
}
.filters-bar select:focus,
.filters-bar input:focus {
    border-color: rgba(212,166,79,0.25) !important;
    background: rgba(255,255,255,0.025) !important;
    box-shadow: none !important;
}
.filters-bar select option {
    background: #08182F;
    color: #F5F7FA;
}