:root {
            /* —— Cores —— */
            --bg: #000000;
            --surface: #0a0a0a;
            --surface-2: #0c0e12;
            --surface-3: #111318;
            --gold: #D4AF37;
            --gold-dark: var(--gold-dark, #b8941f);
            --gold-soft: #c9a84c;
            --gold-glow: rgba(212, 175, 55, 0.25);
            --border: rgba(255, 255, 255, 0.08);
            --border-strong: rgba(255, 255, 255, 0.14);
            --text-main: #ffffff;
            --text-body: #c5cad3;
            --text-dim: #888888;
            --text-muted: #6b7280;
            --blue-real: #55aaff;
            --danger: #ff3e3e;
            --ok: #7dcea0;

            /* —— Tipografia —— */
            --font-display: 'Orbitron', system-ui, sans-serif;
            --font-body: Inter, system-ui, sans-serif;
            --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

            /* —— Escala de tipo —— */
            --fs-xs: 0.62rem;
            --fs-sm: 0.72rem;
            --fs-md: 0.88rem;
            --fs-lg: 1.05rem;
            --fs-xl: 1.35rem;
            --fs-hero: clamp(1.25rem, 5vw, 2.5rem);

            /* —— Espaçamento —— */
            --sp-1: 4px;
            --sp-2: 8px;
            --sp-3: 12px;
            --sp-4: 16px;
            --sp-5: 24px;
            --sp-6: 32px;

            /* —— Forma (padrão angular do site) —— */
            --radius: 0;
            --radius-sm: 0;
            --radius-md: 0;
            --radius-lg: 0;
            --radius-pill: 0;

            /* —— Controles —— */
            --btn-h: 40px;
            --btn-h-sm: 34px;
            --btn-px: 14px;
            --btn-fs: 0.72rem;
            --control-h: 40px;

            /* —— Elevação / motion —— */
            --shadow-fab: 0 8px 28px rgba(0, 0, 0, 0.55);
            --shadow-panel: 0 16px 48px rgba(0, 0, 0, 0.65);
            --ease: cubic-bezier(0.16, 1, 0.3, 1);
            --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

            /* —— Chrome (ticker + header) —— */
            --ticker-h: 42px;
            --header-h: 58px;
            --chrome-h: calc(var(--ticker-h) + var(--header-h));
        }

        /* Reset & Base */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        /* ========== TICKER PROFISSIONAL TEMPO REAL ========== */
        .top-ticker {
            width: 100%;
            background: var(--bg, #000000);
            border-bottom: 1px solid rgba(212, 175, 55, 0.35);
            height: 42px;
            display: flex;
            align-items: center;
            overflow: hidden;
            position: fixed;
            top: 0;
            z-index: 9999;
            font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
        }

        .ticker-live-badge {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            gap: 7px;
            padding: 0 22px 0 16px;
            height: 100%;
            min-width: 118px;
            background: var(--gold, #D4AF37);
            color: #0a0a0a;
            border-right: none;
            font-family: Orbitron, sans-serif;
            font-size: 0.58rem;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            font-weight: 900;
            z-index: 2;
            clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 100%, 0 100%);
            transition: background 0.3s ease, color 0.3s ease;
        }

        .ticker-live-badge #ticker-live-label {
            color: inherit;
        }

        .ticker-live-badge .ticker-live-dot {
            background: rgba(0, 0, 0, 0.45) !important;
            box-shadow: none !important;
            animation: none !important;
            opacity: 0.7;
        }

        .ticker-live-badge.is-offline {
            background: #ff5252;
            color: #fff;
        }

        .ticker-live-badge.is-stale {
            background: var(--gold, #D4AF37);
            color: #0a0a0a;
        }

        .ticker-live-badge.is-live {
            background: var(--gold, #D4AF37);
            color: #0a0a0a;
        }

        .ticker-live-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #00c853;
            box-shadow: 0 0 8px rgba(0, 200, 83, 0.85);
            animation: livePulse 1.5s ease-in-out infinite;
        }

        .ticker-live-dot.live {
            background: #00c853;
            box-shadow: 0 0 8px rgba(0, 200, 83, 0.85);
        }

        .ticker-live-dot.offline {
            background: #ff1744;
            box-shadow: 0 0 8px rgba(255, 23, 68, 0.75);
            animation: none;
        }

        .ticker-live-dot.stale {
            background: #ffb300;
            box-shadow: 0 0 8px rgba(255, 179, 0, 0.75);
            animation: none;
        }

        .ticker-live-badge.is-offline {
            color: #fff;
        }

        .ticker-live-badge.is-stale {
            color: #0a0a0a;
        }

        .ticker-live-badge.is-live {
            color: #0a0a0a;
        }

        .ticker-item.is-ref .symbol::after {
            content: '';
        }

        .ticker-item[data-kind="ref"] {
            opacity: 0.95;
            background: rgba(212, 175, 55, 0.03);
        }

        .ticker-item[data-kind="ref"] .symbol {
            color: #c9a84c;
        }

        .ticker-item[data-kind="mkt"] .symbol {
            color: #8eb4d4;
        }

        .ticker-item .kind-tag {
            font-size: 0.52rem;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            padding: 1px 4px;
            border-radius: 2px;
            margin-left: 2px;
            font-weight: 600;
            opacity: 0.85;
        }

        .ticker-item[data-kind="ref"] .kind-tag {
            color: #c9a84c;
            background: rgba(212, 175, 55, 0.12);
            border: 1px solid rgba(212, 175, 55, 0.2);
        }

        .ticker-item[data-kind="mkt"] .kind-tag {
            color: #8eb4d4;
            background: rgba(85, 170, 255, 0.1);
            border: 1px solid rgba(85, 170, 255, 0.18);
        }

        @media (max-width: 768px) {
            .ticker-item .kind-tag {
                display: none;
            }
        }

        @keyframes livePulse {

            0%,
            100% {
                opacity: 1;
                transform: scale(1);
            }

            50% {
                opacity: 0.4;
                transform: scale(0.82);
            }
        }

        .ticker-viewport {
            flex: 1;
            overflow: hidden;
            position: relative;
            height: 100%;
            mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
            -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
        }

        .ticker-track {
            display: flex;
            flex-wrap: nowrap;
            white-space: nowrap;
            height: 100%;
            align-items: center;
            width: max-content;
            /* largura = soma dos itens (essencial pro scroll) */
            /* Duração base; JS ajusta pela largura real (~px/s constante) */
            animation: tickerScroll 42s linear infinite;
            will-change: transform;
            transform: translate3d(0, 0, 0);
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        /* Pausar só em desktop com hover (mobile não tem hover real) */
        @media (hover: hover) and (pointer: fine) {
            .top-ticker:hover .ticker-track {
                animation-play-state: paused;
            }
        }

        .ticker-item {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            /* NÃO encolher — senão só CDI/Selic “cabem” na barra */
            padding: 0 26px;
            height: 42px;
            border-right: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 0.82rem;
            gap: 11px;
            letter-spacing: 0.02em;
            -webkit-font-smoothing: antialiased;
            text-rendering: geometricPrecision;
            transition: background 0.15s;
            cursor: default;
            white-space: nowrap;
        }

        .ticker-item:hover {
            background: rgba(212, 175, 55, 0.05);
        }



        /* Resultado triplo: nominal / real / líquido */
        .res-triple {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-top: 12px;
            width: 100%;
        }

        .res-triple-item {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            padding: 8px 6px;
            text-align: center;
        }

        .res-triple-item span {
            display: block;
            font-size: 0.62rem;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.4px;
            margin-bottom: 4px;
        }

        .res-triple-item b {
            font-size: 0.85rem;
            color: #eee;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
        }

        .res-triple-item b.is-real {
            color: var(--blue-real, #55aaff);
        }

        .res-triple-item b.is-liq {
            color: #7dcea0;
        }

        @media (max-width: 480px) {
            .res-triple {
                gap: 6px;
            }

            .res-triple-item b {
                font-size: 0.72rem;
            }
        }

        .stats-grid-extra {
            grid-template-columns: repeat(3, 1fr);
        }

        @media (max-width: 600px) {
            .stats-grid-extra {
                grid-template-columns: 1fr 1fr;
            }

            .stats-grid-extra .stat-box:last-child {
                grid-column: 1 / -1;
            }
        }

        /* Botão conversor de câmbio (header) */
        .fx-nav-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            margin-left: 18px;
            padding: 7px 12px;
            border-radius: 999px;
            border: 1px solid rgba(212, 175, 55, 0.35);
            background: rgba(212, 175, 55, 0.08);
            color: var(--gold, #D4AF37);
            font-size: 0.72rem;
            font-weight: 600;
            letter-spacing: 0.6px;
            text-transform: uppercase;
            cursor: pointer;
            transition: 0.2s;
            font-family: Inter, system-ui, sans-serif;
        }

        .fx-nav-btn:hover {
            background: rgba(212, 175, 55, 0.16);
            border-color: var(--gold, #D4AF37);
            box-shadow: 0 0 18px rgba(212, 175, 55, 0.15);
        }

        .fx-nav-btn i {
            font-size: 0.85rem;
        }

        @media (max-width: 720px) {
            .fx-nav-btn span {
                display: none;
            }

            .fx-nav-btn {
                margin-left: 10px;
                padding: 8px 10px;
            }
        }

        /* Menu mobile: Câmbio redondo (não retângulo largo) */
        @media (max-width: 860px) {
            .site-nav .fx-nav-btn {
                align-self: center !important;
                width: 44px !important;
                height: 44px !important;
                min-width: 44px !important;
                min-height: 44px !important;
                max-width: 44px !important;
                padding: 0 !important;
                margin: 8px auto !important;
                border-radius: 50% !important;
                justify-content: center !important;
                align-items: center !important;
                flex: 0 0 44px !important;
                box-sizing: border-box !important;
            }
            .site-nav .fx-nav-btn span {
                display: none !important;
            }
            .site-nav .fx-nav-btn i {
                font-size: 1rem !important;
                margin: 0 !important;
            }
        }

        /* FAB mobile alternativo (canto inferior) */
        .fx-fab {
            display: none;
            position: fixed;
            right: 16px;
            bottom: 88px;
            z-index: 9000;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            border: 1px solid rgba(212, 175, 55, 0.45);
            background: linear-gradient(145deg, #1a1e28, #0c0e14);
            color: var(--gold, #D4AF37);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            cursor: pointer;
        }

        @media (max-width: 720px) {
            .fx-fab {
                display: flex;
            }
        }

        .fx-fab:active {
            transform: scale(0.96);
        }

        /* Aviso educativo — só no footer / modal, sem quebrar layout */
        .edu-disclaimer-footer {
            margin-top: 18px;
            padding-top: 14px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            color: #7a808a;
            font-size: 0.72rem;
            line-height: 1.55;
            max-width: 42rem;
        }

        .edu-disclaimer-footer strong {
            color: #a89b6a;
            font-weight: 600;
        }

        .modal-edu-note {
            margin-top: 10px;
            padding: 8px 10px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            color: #7a808a;
            font-size: 0.68rem;
            line-height: 1.45;
        }

        /* ========== CONVERSOR DE CÂMBIO (estilo Wise) ========== */
        .fx-converter {
            display: none;
            position: fixed;
            z-index: 10050;
            width: min(360px, calc(100vw - 24px));
            background: linear-gradient(165deg, #12151c 0%, #0a0c10 100%);
            border: 1px solid rgba(212, 175, 55, 0.35);
            border-radius: 14px;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04);
            padding: 18px 18px 14px;
            font-family: Inter, system-ui, sans-serif;
            color: #eee;
            animation: fxIn 0.18s ease-out;
        }

        .fx-converter.open {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            z-index: 10060 !important;
        }

        @keyframes fxIn {
            from {
                opacity: 0;
                transform: translateY(6px) scale(0.98);
            }

            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .fx-converter-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14px;
        }

        .fx-converter-header h4 {
            margin: 0;
            font-size: 0.82rem;
            font-weight: 600;
            letter-spacing: 0.4px;
            color: var(--gold);
            font-family: Orbitron, sans-serif;
        }

        .fx-converter-header button {
            background: none;
            border: none;
            color: #777;
            cursor: pointer;
            font-size: 1.1rem;
            padding: 4px 6px;
            line-height: 1;
        }

        .fx-converter-header button:hover {
            color: #fff;
        }

        .fx-rate-line {
            font-size: 0.72rem;
            color: #888;
            margin-bottom: 10px;
            font-variant-numeric: tabular-nums;
        }

        .fx-rate-line strong {
            color: #ccc;
            font-weight: 500;
        }

        .fx-box {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            padding: 12px 14px;
            margin-bottom: 8px;
            transition: border-color 0.15s;
        }

        .fx-box:focus-within {
            border-color: rgba(212, 175, 55, 0.45);
            background: rgba(212, 175, 55, 0.04);
        }

        .fx-box-label {
            font-size: 0.65rem;
            color: #777;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            margin-bottom: 6px;
        }

        .fx-box-row {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .fx-box-row input {
            flex: 1;
            background: transparent;
            border: none;
            outline: none;
            color: #fff;
            font-size: 1.35rem;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            min-width: 0;
            font-family: Inter, system-ui, sans-serif;
        }

        .fx-box-row select {
            background: #1a1e28;
            border: 1px solid rgba(255, 255, 255, 0.1);
            color: #fff;
            border-radius: 8px;
            padding: 8px 10px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            outline: none;
            max-width: 110px;
        }

        .fx-swap {
            display: flex;
            justify-content: center;
            margin: -2px 0 6px;
        }

        .fx-swap button {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid rgba(212, 175, 55, 0.35);
            background: #141820;
            color: var(--gold);
            cursor: pointer;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: 0.15s;
        }

        .fx-swap button:hover {
            background: rgba(212, 175, 55, 0.15);
            transform: rotate(180deg);
        }

        .fx-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 12px;
            font-size: 0.65rem;
            color: #666;
        }

        .fx-footer .fx-live {
            color: #00c853;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .fx-footer .fx-live i {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #00c853;
            display: inline-block;
        }

        .ticker-meta {
            display: block;
            font-size: 0.5rem;
            color: #6b7280;
            letter-spacing: 0.2px;
            margin-top: 1px;
            max-width: 110px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .ticker-item.fx-currency {
            cursor: pointer;
        }

        .ticker-item.fx-currency:hover {
            background: rgba(212, 175, 55, 0.12);
        }

        /* ===== MOBILE / RESPONSIVO GLOBAL ===== */
        @media (max-width: 900px) {

            .fx-converter,
            .fx-converter.open {
                left: 50% !important;
                right: auto !important;
                top: 50% !important;
                bottom: auto !important;
                transform: translate(-50%, -50%) !important;
                width: min(380px, calc(100vw - 28px)) !important;
                max-width: calc(100vw - 28px) !important;
                max-height: min(88dvh, 640px) !important;
                border-radius: 16px !important;
                padding: 16px 16px 14px !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                box-sizing: border-box !important;
                z-index: 2147482000 !important;
                box-shadow: 0 24px 64px rgba(0,0,0,0.55) !important;
            }

            .fx-box-row input {
                font-size: 1.15rem !important;
                min-width: 0 !important;
            }

            .fx-box-row select {
                max-width: 42% !important;
                font-size: 0.8rem !important;
            }

            .fx-fab {
                bottom: calc(99px + env(safe-area-inset-bottom, 0px)) !important;
                right: 30px !important;
            }
        }

        @media (max-width: 900px) {

            /* Modal terminal: coluna, altura controlada */
            .modal {
                padding: 0 !important;
                align-items: stretch !important;
            }

            .modal-content {
                width: 100vw !important;
                max-width: 100vw !important;
                height: 100% !important;
                height: 100dvh !important;
                max-height: 100dvh !important;
                border-radius: 0 !important;
                border: none !important;
                display: flex !important;
                flex-direction: column !important;
                overflow: hidden !important;
            }

            .modal-header {
                flex-shrink: 0 !important;
                padding: 10px 12px !important;
            }

            .modal-header h2,
            #terminalTitle {
                font-size: 0.8rem !important;
                max-width: 55vw;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            /* v4: NÃO partir em dois scrolls — ver bloco MOBILE UX v4 no final */
            .modal-body {
                display: flex !important;
                flex-direction: column !important;
                grid-template-columns: 1fr !important;
                flex: 1 1 auto !important;
                min-height: 0 !important;
                gap: 0 !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
                padding: 0 !important;
                margin: 0 !important;
            }

            .control-panel {
                flex: none !important;
                max-height: none !important;
                min-height: 0 !important;
                overflow: visible !important;
                border-right: none !important;
                border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
                padding: 12px 14px 8px !important;
            }

            .results-container {
                flex: none !important;
                max-height: none !important;
                min-height: 0 !important;
                overflow: visible !important;
                padding: 10px 14px 20px !important;
            }

            .chart-wrap {
                position: relative !important;
                width: 100% !important;
                max-width: 100% !important;
                height: auto !important;
                max-height: none !important;
                min-height: 0 !important;
                margin: 8px 0 12px !important;
                overflow: visible !important;
                flex-shrink: 0 !important;
            }

            .chart-wrap canvas {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            .res-display h2 {
                font-size: 1.25rem !important;
                word-break: break-word;
            }

            .res-triple {
                grid-template-columns: repeat(3, 1fr) !important;
                gap: 6px !important;
            }

            .res-triple-item {
                padding: 6px 4px !important;
            }

            .res-triple-item b {
                font-size: 0.68rem !important;
            }

            .stats-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 6px !important;
            }

            .btn-group {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 6px !important;
            }

            .btn-group .btn {
                flex: 1 1 auto !important;
                min-width: 42% !important;
                font-size: 0.7rem !important;
                padding: 8px 10px !important;
            }

            header {
                padding: 10px 4% !important;
                top: 36px !important;
            }

            nav a {
                margin-left: 12px !important;
                font-size: 0.7rem !important;
            }

            .hero {
                padding: 16px 4% 20px !important;
            }

            .hero h1 {
                font-size: clamp(1.4rem, 7vw, 2rem) !important;
            }

            body {
                padding-top: var(--chrome-h) !important;
                overflow-x: hidden !important;
            }

            html,
            body {
                max-width: 100vw !important;
            }

            img,
            canvas,
            svg {
                max-width: 100% !important;
            }
        }

        /* Telas muito estreitas */
        @media (max-width: 380px) {
            .fx-nav-btn span,
            .install-nav-btn span.label {
                display: none !important;
            }

            .res-triple-item span {
                font-size: 0.55rem !important;
            }
        }

        /* Landscape phone */
        @media (max-width: 900px) and (max-height: 420px) and (orientation: landscape) {
            /* landscape: mantém scroll único (MOBILE UX v4); só ajusta conversor FX */
            .fx-converter.open {
                max-height: 95dvh !important;
            }
        }


        .ticker-item.tick-flash {
            background: rgba(0, 230, 118, 0.08);
            transition: background 0.35s ease;
        }

        .ticker-item .symbol {
            color: #c9a84c;
            font-weight: 700;
            letter-spacing: 0.4px;
            font-size: 0.72rem;
        }

        .ticker-item .price {
            font-weight: 700;
            color: #f0f0f0;
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.2px;
        }

        /* Preço acompanha a variação do dia */
        .ticker-item .price.up {
            color: #00e676;
        }

        .ticker-item .price.down {
            color: #ff5252;
        }

        .ticker-item .price.flat {
            color: #e0e0e0;
        }

        .ticker-item .change {
            font-size: 0.68rem;
            display: inline-flex;
            align-items: center;
            gap: 2px;
            font-weight: 600;
            padding: 2px 7px;
            border-radius: 3px;
            font-variant-numeric: tabular-nums;
            letter-spacing: -0.3px;
        }

        /* Alta = verde | Baixa = vermelho | Neutro = cinza */
        .change.up {
            color: #00e676;
            background: rgba(0, 230, 118, 0.12);
            border: 1px solid rgba(0, 230, 118, 0.22);
        }

        .change.down {
            color: #ff5252;
            background: rgba(255, 82, 82, 0.12);
            border: 1px solid rgba(255, 82, 82, 0.22);
        }

        .change.flat {
            color: #9e9e9e;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .ticker-item .sep {
            width: 1px;
            height: 14px;
            background: rgba(212, 175, 55, 0.15);
            margin: 0 2px;
        }

        .ticker-updated {
            flex-shrink: 0;
            padding: 0 10px;
            font-size: 0.56rem;
            color: #888;
            border-left: 1px solid rgba(255, 255, 255, 0.06);
            height: 100%;
            display: flex;
            align-items: center;
            white-space: nowrap;
            letter-spacing: 0.2px;
            max-width: 220px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ticker-updated .tu-src {
            color: #a89b6a;
            margin-left: 4px;
        }

        @keyframes tickerScroll {
            0% {
                transform: translate3d(0, 0, 0);
            }

            100% {
                transform: translate3d(-50%, 0, 0);
            }
        }

        @media (max-width: 768px) {
            .top-ticker {
                height: 36px;
            }

            .ticker-live-badge {
                padding: 0 8px;
                font-size: 0.55rem;
                gap: 5px;
            }

            .ticker-item {
                padding: 0 12px;
                font-size: 0.68rem;
                gap: 6px;
                height: 36px;
                flex: 0 0 auto;
            }

            .ticker-item .symbol {
                font-size: 0.68rem;
            }

            .ticker-item .price {
                font-size: 0.68rem;
            }

            .ticker-item .change {
                font-size: 0.6rem;
                padding: 1px 5px;
            }

            .ticker-updated {
                display: none;
            }

            /* Velocidade confortável no mobile */
            .ticker-track {
                animation: tickerScroll 26s linear infinite !important;
                will-change: transform;
                animation-play-state: running !important;
            }

            .top-ticker:active .ticker-track {
                animation-play-state: paused;
            }
        }

        @media (max-width: 480px) {
            .ticker-track {
                animation-duration: 24s !important;
            }
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-font-smoothing: antialiased;
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: calc(var(--chrome-h) + 12px);
            /* ticker + header fixed */
        }

        :root {
            --ticker-h: 42px;
            --header-h: 58px;
            --chrome-h: calc(var(--ticker-h) + var(--header-h));
        }
        body {
            background: var(--bg, #000000);
            color: #888888;
            font-family: 'Inter', sans-serif;
            overflow-x: hidden;
            padding-top: var(--chrome-h);
            letter-spacing: -0.01em;
        }

        /* HEADER & HERO — site-header is the real nav (fixed below ticker) */
        header.site-header {
            padding: 12px 4%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid rgba(212, 175, 55, 0.18);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            background: rgba(0, 0, 0, 0.92);
            position: fixed;
            top: var(--ticker-h);
            left: 0;
            right: 0;
            width: 100%;
            z-index: 9998;
        }

        .institutional-strip {
            display: none;
        }

        .hero-meta {
            margin-top: 22px;
            font-size: 0.7rem;
            color: #5a616c;
            letter-spacing: 0.06em;
            display: flex;
            flex-wrap: wrap;
            gap: 6px 8px;
            justify-content: center;
            align-items: center;
        }

        .hero-meta a {
            color: #8a7a4a;
            text-decoration: none;
            border-bottom: 1px solid rgba(212, 175, 55, 0.25);
        }

        .hero-meta a:hover {
            color: var(--gold);
        }

        .hero-meta-sep {
            opacity: 0.4;
        }

        .strip-item {
            display: none;
        }


        .logo,
        .logo-brand {
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            font-size: 1.15rem;
            letter-spacing: 4px;
            color: var(--gold);
            text-decoration: none;
            transition: 0.3s;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .logo-img {
            width: 40px;
            height: 40px;
            object-fit: contain;
            border-radius: 8px;
            flex-shrink: 0;
            display: block;
            background: var(--bg, #000);
        }

        .logo-text {
            letter-spacing: 3px;
        }

        .logo:hover,
        .logo-brand:hover {
            text-shadow: 0 0 15px var(--gold);
        }

        @media (max-width: 480px) {
            .logo-text {
                font-size: 0.85rem;
                letter-spacing: 2px;
            }

            .logo-img {
                width: 34px;
                height: 34px;
            }
        }

        nav a {
            color: var(--text-dim);
            text-decoration: none;
            font-size: 0.82rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-left: 30px;
            transition: 0.2s;
        }

        nav a:hover {
            color: #fff;
        }

        .hero {
            padding: 48px 5% 36px;
            text-align: center;
            max-width: 720px;
            margin: 0 auto;
        }

        .section-tag {
            color: var(--gold, #D4AF37);
            font-size: 0.99rem;
            text-transform: uppercase;
            letter-spacing: 0.28em;
            margin-bottom: 18px;
            display: block;
            font-weight: 500;
            font-family: Inter, system-ui, sans-serif;
            transition: color 0.3s ease;
            opacity: 0.92;
        }

        .hero h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(1.75rem, 5vw, 2.75rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            line-height: 1.12;
            margin: 0 0 16px;
            color: #f4f1ea;
        }

        .hero h1 span {
            color: var(--gold);
            font-weight: 700;
        }

        .hero-lead {
            margin: 0 auto;
            max-width: 34em;
            font-size: 0.95rem;
            font-weight: 400;
            line-height: 1.65;
            color: #8b919c;
            letter-spacing: 0.01em;
        }

        .hero-lead em {
            font-style: normal;
            color: #6b7280;
        }

        .hero-lead strong {
            color: #c5c9d1;
            font-weight: 500;
        }

        .hero p {
            letter-spacing: 0.01em;
            line-height: 1.65;
            max-width: 34em;
            margin-inline: auto;
            font-weight: 400;
            font-size: 0.95rem;
            color: #8b919c;
        }

        .hero-mini-line {
            margin-top: 20px;
            color: #5c6370;
            font-size: 0.7rem;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .hero-cta {
            display: flex;
            flex-wrap: wrap;
            gap: 10px 14px;
            justify-content: center;
            align-items: center;
            margin-top: 28px;
        }

        .hero-cta a,
        .hero-cta button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 11px 22px;
            border-radius: 999px;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            cursor: pointer;
            text-decoration: none;
            transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
            border: 1px solid transparent;
            font-family: Inter, system-ui, sans-serif;
        }

        .cta-primary {
            background: var(--gold);
            color: #0a0a0a;
            border-color: var(--gold);
        }

        .cta-primary:hover {
            background: var(--gold-soft, var(--gold, #D4AF37));
            box-shadow: 0 8px 28px var(--gold-glow, rgba(212, 175, 55, 0.22));
            filter: brightness(1.05);
        }

        .cta-ghost {
            background: transparent;
            color: #a8aeb8;
            border-color: rgba(255, 255, 255, 0.12);
        }

        .cta-ghost:hover {
            color: var(--gold);
            border-color: rgba(212, 175, 55, 0.35);
        }

        .cta-secondary {
            background: transparent;
            color: var(--gold);
            border-color: rgba(212, 175, 55, 0.45);
        }

        .cta-secondary:hover {
            background: rgba(212, 175, 55, 0.1);
            border-color: var(--gold);
        }

        /* Páginas legais (modal) */
        .legal-modal {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.92);
            z-index: 10001;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .legal-modal.active {
            display: flex;
        }

        .legal-content {
            background: #111;
            border: 1px solid rgba(212, 175, 55, 0.25);
            border-radius: 4px;
            max-width: 720px;
            width: 100%;
            max-height: 85vh;
            overflow-y: auto;
            padding: 32px 28px;
            color: #b8bcc7;
            line-height: 1.7;
            font-size: 0.9rem;
        }

        .legal-content h2 {
            color: var(--gold);
            font-family: 'Orbitron', sans-serif;
            font-size: 1.2rem;
            margin-bottom: 16px;
            letter-spacing: 2px;
        }

        .legal-content h3 {
            color: #fff;
            font-size: 0.95rem;
            margin: 20px 0 8px;
        }

        .legal-content p,
        .legal-content li {
            margin-bottom: 10px;
        }

        .legal-content ul {
            padding-left: 20px;
        }

        .legal-close {
            margin-top: 24px;
            width: 100%;
            padding: 12px;
            background: transparent;
            border: 1px solid var(--gold);
            color: var(--gold);
            cursor: pointer;
            font-family: 'Orbitron', sans-serif;
            font-size: 0.8rem;
            letter-spacing: 1px;
        }

        .legal-close:hover {
            background: var(--gold);
            color: #000;
        }

        .tool-card {
            cursor: pointer;
        }

        .tool-card:focus {
            outline: 2px solid var(--gold);
            outline-offset: 2px;
        }

        .onboarding-toast {
            position: fixed;
            bottom: 90px;
            right: 28px;
            z-index: 1001;
            background: linear-gradient(145deg, #151820, #0a0c10);
            border: 1px solid rgba(212, 175, 55, 0.35);
            border-radius: 6px;
            padding: 16px 18px;
            max-width: 300px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
            display: none;
            animation: fadeIn 0.4s ease;
        }

        .onboarding-toast.show {
            display: block;
        }

        .onboarding-toast p {
            color: #ccc;
            font-size: 0.82rem;
            line-height: 1.5;
            margin-bottom: 10px;
        }

        .onboarding-toast button {
            background: var(--gold);
            border: none;
            color: #000;
            padding: 6px 14px;
            font-size: 0.75rem;
            font-weight: 600;
            cursor: pointer;
            border-radius: 3px;
        }


        /* ===== Onboarding iniciante BR ===== */
        .onboard-modal {
            position: fixed;
            inset: 0;
            z-index: 10080;
            background: rgba(0, 0, 0, 0.72);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 16px;
            backdrop-filter: blur(6px);
        }

        .onboard-modal[hidden] {
            display: none !important;
        }

        .onboard-card {
            width: min(440px, 100%);
            background: linear-gradient(165deg, #141820, #0a0c10);
            border: 1px solid rgba(212, 175, 55, 0.35);
            border-radius: 16px;
            padding: 22px 20px 16px;
            box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
        }

        .onboard-kicker {
            font-size: 0.68rem;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--gold);
            margin-bottom: 8px;
            font-weight: 600;
        }

        .onboard-card h2 {
            font-size: 1.25rem;
            color: #fff;
            margin-bottom: 8px;
            font-family: Inter, system-ui, sans-serif;
        }

        .onboard-sub {
            color: #999;
            font-size: 0.85rem;
            line-height: 1.5;
            margin-bottom: 16px;
        }

        .onboard-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .onboard-btn {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            text-align: left;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            padding: 12px 14px;
            color: #eee;
            cursor: pointer;
            transition: 0.15s;
            font-family: Inter, system-ui, sans-serif;
        }

        .onboard-btn:hover,
        .onboard-btn:focus {
            border-color: rgba(212, 175, 55, 0.45);
            background: rgba(212, 175, 55, 0.08);
            outline: none;
        }

        .onboard-btn i {
            color: var(--gold);
            font-size: 1.1rem;
            margin-top: 2px;
        }

        .onboard-btn strong {
            display: block;
            font-size: 0.9rem;
            margin-bottom: 2px;
        }

        .onboard-btn small {
            display: block;
            color: #888;
            font-size: 0.72rem;
            line-height: 1.35;
        }

        .onboard-skip {
            margin-top: 14px;
            width: 100%;
            background: none;
            border: none;
            color: #777;
            font-size: 0.78rem;
            cursor: pointer;
            padding: 8px;
        }

        .onboard-skip:hover {
            color: #ccc;
        }

        .onboard-note {
            font-size: 0.65rem;
            color: #555;
            text-align: center;
            margin-top: 6px;
        }

        .rate-toast {
            position: fixed;
            top: 42px;
            left: 50%;
            transform: translateX(-50%) translateY(-120%);
            z-index: 9997;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            max-width: min(520px, calc(100vw - 24px));
            padding: 8px 16px;
            border-radius: 999px;
            background: rgba(12, 14, 18, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            font-size: 0.72rem;
            color: #c5cad3;
            line-height: 1.35;
            pointer-events: none;
            opacity: 0;
            transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
        }
        .rate-toast.is-show {
            transform: translateX(-50%) translateY(8px);
            opacity: 1;
        }
        .rate-toast[hidden] {
            display: none !important;
        }
        .rate-toast-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #ffb300;
            flex-shrink: 0;
            box-shadow: 0 0 8px rgba(255, 179, 0, 0.5);
        }
        .rate-toast.is-live .rate-toast-dot {
            background: #00c853;
            box-shadow: 0 0 8px rgba(0, 200, 83, 0.55);
        }
        .rate-toast.is-offline .rate-toast-dot {
            background: #ff5252;
            box-shadow: 0 0 8px rgba(255, 82, 82, 0.45);
        }
        .rate-toast.is-stale .rate-toast-dot {
            background: #ffb300;
        }
        @media (max-width: 860px) {
            .rate-toast { top: 40px; font-size: 0.68rem; padding: 7px 14px; }
        }


        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }

        .human-insight {
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 10px;
            background: rgba(85, 170, 255, 0.06);
            border: 1px solid rgba(85, 170, 255, 0.18);
            color: #c5d4e8;
            font-size: 0.78rem;
            line-height: 1.5;
            max-height: 140px;
            overflow-y: auto;
            flex-shrink: 0;
        }

        .human-insight strong {
            color: #fff;
        }

        .poupanca-compare {
            margin-top: 8px;
            font-size: 0.74rem;
            color: #a89b6a;
            line-height: 1.45;
        }

        /* Modal desktop: duas colunas com scroll por painel */
        @media (min-width: 901px) {
          .modal-body {
              display: grid !important;
              grid-template-columns: minmax(280px, 340px) 1fr !important;
              min-height: 0 !important;
              overflow: hidden !important;
          }

          .control-panel {
              overflow-x: hidden !important;
              overflow-y: auto !important;
              -webkit-overflow-scrolling: touch;
              max-height: 100% !important;
              min-height: 0 !important;
              padding-bottom: 24px !important;
          }

          .results-container {
              overflow-x: hidden !important;
              overflow-y: auto !important;
              min-height: 0 !important;
              max-height: 100% !important;
              display: flex !important;
              flex-direction: column !important;
          }

          .results-container .chart-wrap {
              flex-shrink: 0;
              max-height: none !important;
              height: auto !important;
          }
        }


/* [removed legacy mobile dual-scroll block] */

        /* GRID DE FERRAMENTAS */




        /* FASE 7 — Terminal UX */
        .modal-header .header-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .modal-header .header-actions button.term-link {
            background: transparent;
            border: 1px solid rgba(212, 175, 55, 0.3);
            color: var(--gold);
            font-size: 0.65rem;
            font-family: Inter, system-ui, sans-serif;
            font-weight: 600;
            padding: 5px 8px;
            border-radius: 4px;
            cursor: pointer;
            letter-spacing: 0.3px;
        }

        .modal-header .header-actions button.term-link:hover {
            background: rgba(212, 175, 55, 0.12);
        }

        .term-next-strip {
            margin: 10px 0 4px;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid rgba(85, 170, 255, 0.2);
            background: rgba(85, 170, 255, 0.06);
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 0.72rem;
            color: #b8c9de;
            line-height: 1.4;
        }

        .term-next-strip[hidden] {
            display: none !important;
        }

        .term-next-strip strong {
            color: #fff;
        }

        .term-next-strip button {
            border: 1px solid rgba(85, 170, 255, 0.35);
            background: rgba(85, 170, 255, 0.12);
            color: #9ec9ff;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 6px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
            white-space: nowrap;
        }

        .term-panel-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 10px;
        }

        .term-panel-actions button {
            width: 100%;
            padding: 9px 10px;
            border-radius: 6px;
            font-size: 0.72rem;
            font-weight: 600;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
            border: 1px solid rgba(212, 175, 55, 0.3);
            background: rgba(212, 175, 55, 0.08);
            color: var(--gold);
        }

        .term-panel-actions button.secondary {
            border-color: rgba(255, 255, 255, 0.12);
            background: transparent;
            color: #aaa;
        }

        .term-panel-actions button:hover {
            filter: brightness(1.1);
        }

        #insightsBox {
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(0, 0, 0, 0.25);
            padding: 12px 14px;
            margin-top: 10px;
        }

        #insightsBox .insights-title {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--gold);
            margin-bottom: 8px;
            font-weight: 600;
        }


        /* —— Mobile Terminal (pós AO VIVO) —— */
        @media (max-width: 768px) {
            .modal.active {
                padding: 0 !important;
                align-items: stretch !important;
            }

            .modal-content {
                width: 100% !important;
                max-width: 100% !important;
                height: 100% !important;
                max-height: 100dvh !important;
                border-radius: 0 !important;
                display: flex !important;
                flex-direction: column !important;
            }

            .modal-header {
                flex-shrink: 0 !important;
                position: sticky !important;
                top: 0 !important;
                z-index: 5 !important;
                padding: 8px 10px !important;
                padding-top: max(8px, env(safe-area-inset-top)) !important;
                padding-right: max(10px, env(safe-area-inset-right)) !important;
                background: #0a0c10 !important;
                overflow: hidden !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            .modal-header .header-actions {
                gap: 8px !important;
            }

            .modal-header .header-actions button.term-link {
                padding: 8px 10px !important;
                font-size: 0.62rem !important;
                min-height: 36px !important;
            }

            .modal-header .header-actions i {
                font-size: 1.05rem !important;
                padding: 8px !important;
            }

            .modal-body {
                flex: 1 1 auto !important;
                min-height: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                overflow-x: hidden !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
            }
            .modal-body > .control-panel,
            .modal-body > .results-container {
                overflow: visible !important;
                max-height: none !important;
                height: auto !important;
            }

            .term-next-strip {
                flex-direction: column !important;
                align-items: stretch !important;
            }

            .term-next-strip button {
                width: 100% !important;
                min-height: 40px !important;
            }

            .term-panel-actions button {
                min-height: 40px !important;
                font-size: 0.75rem !important;
            }

            .share-buttons-container .btn-group {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 8px !important;
            }

            .share-buttons-container .btn {
                min-height: 42px !important;
                font-size: 0.72rem !important;
            }

            /* altura do plot fica em .chart-plot — não esmagar o wrap */
            .chart-wrap {
                height: auto !important;
                max-height: none !important;
            }

            #insightsBox {
                font-size: 0.78rem !important;
            }

            .res-display h2 {
                font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
                word-break: break-word !important;
            }

            .projection-limits,
            .modal-edu-note {
                font-size: 0.62rem !important;
            }
        }

        @media (max-width: 380px) {
            .modal-header .header-actions button.term-link {
                display: none !important;
                /* ícones bastam em telas muito estreitas */
            }

            /* Modal header — mobile: nunca cortar o X */
            @media (max-width: 768px) {
                #modalTerminal.modal.active {
                    padding: 0 !important;
                    align-items: stretch !important;
                }

                #modalTerminal .modal-content {
                    width: 100% !important;
                    max-width: 100vw !important;
                    height: 100% !important;
                    max-height: 100dvh !important;
                    border-radius: 0 !important;
                    overflow: hidden !important;
                }

                #modalTerminal .modal-header {
                    padding: 8px 10px !important;
                    padding-top: max(8px, env(safe-area-inset-top)) !important;
                    padding-right: max(10px, env(safe-area-inset-right)) !important;
                    gap: 6px !important;
                    flex-wrap: nowrap !important;
                }

                #modalTerminal .modal-header-kicker {
                    display: none;
                    /* libera espaço no título */
                }

                #modalTerminal .modal-header-title {
                    font-size: 0.72rem !important;
                    padding-left: 0 !important;
                    border-left: none !important;
                    max-width: 42vw;
                }

                #modalTerminal .header-actions {
                    gap: 2px !important;
                    flex-shrink: 0 !important;
                }

                #modalTerminal .header-actions .term-link {
                    display: none !important;
                    /* Meu Plano / Método: usam botões no painel */
                }

                #modalTerminal .header-icon-chart {
                    display: inline-flex !important;
                }

                #modalTerminal .header-icon-btn {
                    width: 40px !important;
                    height: 40px !important;
                    min-width: 40px !important;
                }

                #modalTerminal .header-close-btn {
                    margin-right: 0 !important;
                }
            }

            @media (max-width: 380px) {
                #modalTerminal .modal-header-title {
                    max-width: 36vw;
                    font-size: 0.65rem !important;
                }

                #modalTerminal .header-icon-btn {
                    width: 38px !important;
                    height: 38px !important;
                    min-width: 38px !important;
                }
            }

            .share-buttons-container .btn-group {
                grid-template-columns: 1fr !important;
            }
        }

        /* FASE 4 — Jornada Financeira */
        .jornada-bar {
            max-width: 1100px;
            margin: 0 auto 22px;
            padding: 14px 14px 12px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.07);
            background: rgba(255, 255, 255, 0.02);
        }

        .jornada-bar[hidden] {
            display: none !important;
        }

        .jornada-title {
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 1.2px;
            color: #8a9099;
            margin-bottom: 10px;
        }

        .jornada-steps {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: stretch;
        }

        .jornada-step {
            flex: 1 1 100px;
            min-width: 90px;
            text-align: center;
            padding: 8px 6px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(0, 0, 0, 0.2);
            cursor: pointer;
            transition: 0.15s;
            font-family: Inter, system-ui, sans-serif;
        }

        .jornada-step:hover {
            border-color: rgba(212, 175, 55, 0.3);
        }

        .jornada-step .js-num {
            display: block;
            font-size: 0.62rem;
            color: #666;
            margin-bottom: 2px;
            letter-spacing: 0.5px;
        }

        .jornada-step .js-name {
            display: block;
            font-size: 0.72rem;
            color: #bbb;
            font-weight: 600;
        }

        .jornada-step.is-done {
            border-color: rgba(0, 200, 83, 0.25);
            background: rgba(0, 200, 83, 0.06);
        }

        .jornada-step.is-done .js-name {
            color: #7dcea0;
        }

        .jornada-step.is-current {
            border-color: rgba(212, 175, 55, 0.45);
            background: rgba(212, 175, 55, 0.1);
            box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.15);
        }

        .jornada-step.is-current .js-name {
            color: var(--gold);
        }

        .jornada-step.is-current .js-num {
            color: var(--gold);
        }

        .jornada-hint {
            margin-top: 10px;
            font-size: 0.72rem;
            color: #7a808a;
            line-height: 1.4;
        }

        @media (max-width: 600px) {
            .jornada-step {
                flex: 1 1 40%;
            }
        }

        /* FASE 3 — Diagnóstico Financeiro (educativo) */
        .diag-panel {
            max-width: 1100px;
            margin: 20px auto 0;
            padding: 18px 16px 16px;
            border-radius: 12px;
            border: 1px solid rgba(212, 175, 55, 0.2);
            background: linear-gradient(165deg, rgba(212, 175, 55, 0.05), rgba(255, 255, 255, 0.02));
        }

        .diag-panel[hidden] {
            display: none !important;
        }

        .diag-top {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            margin-bottom: 16px;
        }

        .diag-score-main {
            display: flex;
            align-items: baseline;
            gap: 10px;
        }

        .diag-score-main .ds-num {
            font-family: 'Orbitron', sans-serif;
            font-size: 2rem;
            color: var(--gold);
            font-weight: 700;
            line-height: 1;
        }

        .diag-score-main .ds-den {
            font-size: 0.85rem;
            color: #888;
        }

        .diag-score-main .ds-label {
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: #a89b6a;
            width: 100%;
            margin-bottom: 2px;
        }

        .diag-note {
            font-size: 0.72rem;
            color: #7a808a;
            line-height: 1.45;
            max-width: 420px;
        }

        .diag-bars {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 12px;
        }

        .diag-bar-item {
            background: rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            padding: 10px 12px;
        }

        .diag-bar-item .db-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
            font-size: 0.72rem;
            color: #bbb;
        }

        .diag-bar-item .db-head b {
            font-family: 'JetBrains Mono', monospace;
            color: var(--gold);
            font-weight: 600;
        }

        .diag-track {
            height: 6px;
            border-radius: 99px;
            background: rgba(255, 255, 255, 0.08);
            overflow: hidden;
        }

        .diag-fill {
            height: 100%;
            border-radius: 99px;
            background: linear-gradient(90deg, var(--gold-dark, #b8941f), var(--gold));
            transition: width 0.45s ease;
        }

        .diag-fill.ok {
            background: linear-gradient(90deg, #2e7d32, #00c853);
        }

        .diag-fill.mid {
            background: linear-gradient(90deg, #f9a825, #ffb300);
        }

        .diag-fill.low {
            background: linear-gradient(90deg, #c62828, #ff5252);
        }

        .diag-bar-item .db-hint {
            margin-top: 6px;
            font-size: 0.65rem;
            color: #777;
            line-height: 1.35;
        }

        /* FASE 2 — Meu Plano Financeiro (compacto / refinado) */
        .plano-section {
            padding: 20px 5% 18px;
            background: transparent;
            border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06));
            border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.04));
        }

        .plano-shell {
            max-width: 1100px;
            margin: 0 auto;
        }

        .plano-bar {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 12px 16px;
        }

        .plano-bar-main {
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: 8px 14px;
            min-width: 0;
            flex: 1 1 220px;
        }

        .plano-bar-main .section-tag {
            margin: 0;
            font-size: 0.55rem;
        }

        .plano-bar-main h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: 0.95rem;
            color: #e8e4d8;
            margin: 0;
            letter-spacing: 0.8px;
            font-weight: 700;
        }

        .plano-bar-main .plano-lede {
            color: #6b7280;
            font-size: 0.72rem;
            margin: 0;
            max-width: 340px;
            line-height: 1.35;
        }

        .plano-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            flex-shrink: 0;
        }

        .plano-actions button {
            font-family: Inter, system-ui, sans-serif;
            font-size: 0.7rem;
            font-weight: 600;
            padding: 7px 12px;
            border-radius: 999px;
            cursor: pointer;
            border: 1px solid rgba(212, 175, 55, 0.35);
            background: rgba(212, 175, 55, 0.08);
            color: var(--gold);
            transition: 0.15s;
        }

        .plano-actions button:hover {
            background: rgba(212, 175, 55, 0.18);
        }

        .plano-actions button.secondary {
            background: transparent;
            border-color: rgba(255, 255, 255, 0.12);
            color: #888;
        }

        .plano-actions button.secondary:hover {
            border-color: rgba(255, 255, 255, 0.28);
            color: #ccc;
        }

        .plano-actions button.ghost {
            border-color: transparent;
            background: transparent;
            color: #6b7280;
            padding-left: 8px;
            padding-right: 8px;
        }

        .plano-actions button.ghost:hover {
            color: var(--gold);
        }

        .plano-empty {
            margin-top: 10px;
            padding: 10px 14px;
            border-radius: 8px;
            border: 1px dashed rgba(255, 255, 255, 0.1);
            color: #6b7280;
            font-size: 0.75rem;
            line-height: 1.45;
            text-align: left;
        }

        .plano-empty strong {
            color: #b0a070;
            font-weight: 600;
        }

        .plano-dashboard {
            margin-top: 12px;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 8px;
        }

        @media (max-width: 820px) {
            .plano-dashboard {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 420px) {
            .plano-dashboard {
                grid-template-columns: 1fr 1fr;
                gap: 6px;
            }
        }

        .plano-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            padding: 8px 10px;
            min-height: 0;
        }

        .plano-card .pc-label {
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.7px;
            color: #6b7280;
            margin-bottom: 2px;
        }

        .plano-card .pc-value {
            font-family: 'JetBrains Mono', ui-monospace, monospace;
            font-size: 0.88rem;
            color: #f0f0f0;
            font-weight: 600;
            font-variant-numeric: tabular-nums;
            line-height: 1.2;
        }

        .plano-card .pc-sub {
            display: none;
            /* compacto: subtítulo some no strip */
        }

        .plano-card.is-accent {
            border-color: rgba(212, 175, 55, 0.22);
            background: rgba(212, 175, 55, 0.05);
        }

        .plano-card.is-accent .pc-value {
            color: var(--gold);
        }

        .plano-next {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 14px;
            padding: 8px 12px;
            border-radius: 8px;
            border: 1px solid rgba(85, 170, 255, 0.18);
            background: rgba(85, 170, 255, 0.04);
        }

        .plano-next p {
            flex: 1 1 200px;
            margin: 0;
            font-size: 0.72rem;
            color: #9aa3ad;
            line-height: 1.4;
        }

        .plano-next strong {
            color: #d8dee6;
            font-weight: 600;
        }

        .plano-next button {
            flex-shrink: 0;
            padding: 7px 12px;
            border-radius: 999px;
            border: 1px solid rgba(85, 170, 255, 0.35);
            background: rgba(85, 170, 255, 0.1);
            color: #8ec8ff;
            font-size: 0.7rem;
            font-weight: 600;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
        }

        .plano-next button:hover {
            background: rgba(85, 170, 255, 0.2);
        }

        /* Detalhes recolhíveis (diagnóstico + jornada) */
        .plano-details {
            margin-top: 8px;
        }

        .plano-details[hidden] {
            display: none !important;
        }

        .plano-details-toggle {
            margin-top: 8px;
            background: none;
            border: none;
            color: #6b7280;
            font-size: 0.68rem;
            cursor: pointer;
            padding: 4px 0;
            font-family: Inter, system-ui, sans-serif;
            text-decoration: underline;
            text-underline-offset: 3px;
        }

        .plano-details-toggle:hover {
            color: var(--gold);
        }

        .jornada-bar {
            margin-top: 8px;
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(0, 0, 0, 0.25);
        }

        .jornada-bar[hidden] {
            display: none !important;
        }

        .jornada-title {
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: #6b7280;
            margin-bottom: 6px;
        }

        .jornada-steps {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .jornada-step {
            font-size: 0.62rem;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: #7a808a;
            background: transparent;
        }

        .jornada-step.is-done {
            border-color: rgba(125, 206, 160, 0.35);
            color: #7dcea0;
        }

        .jornada-step.is-current {
            border-color: rgba(212, 175, 55, 0.4);
            color: var(--gold);
            background: rgba(212, 175, 55, 0.08);
        }

        .jornada-hint {
            margin: 6px 0 0;
            font-size: 0.62rem;
            color: #555;
            line-height: 1.35;
        }

        .diag-panel {
            margin-top: 8px;
            padding: 10px 12px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(255, 255, 255, 0.02);
        }

        .diag-panel[hidden] {
            display: none !important;
        }

        .diag-top {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 16px;
        }

        .diag-score-main {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }

        .diag-score-main .diag-num {
            font-family: Orbitron, sans-serif;
            font-size: 1.35rem;
            color: var(--gold);
            font-weight: 700;
        }

        .diag-score-main .diag-label {
            font-size: 0.68rem;
            color: #8a9099;
        }

        .diag-scores {
            display: flex;
            flex-wrap: wrap;
            gap: 6px 10px;
            flex: 1;
        }

        .diag-chip {
            font-size: 0.62rem;
            color: #9aa3ad;
            padding: 2px 8px;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0.04);
        }

        .diag-chip b {
            color: #e0e0e0;
            margin-left: 4px;
        }

        .diag-msg {
            margin: 8px 0 0;
            font-size: 0.72rem;
            color: #8f96a3;
            line-height: 1.4;
        }

        .plano-form-modal {
            position: fixed;
            inset: 0;
            z-index: 2147483647;
            background: rgba(0, 0, 0, 0.88);
            display: none;
            align-items: flex-end;
            justify-content: center;
            padding: 0;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        .plano-form-modal.active {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            pointer-events: auto !important;
        }

        .plano-form-shell {
            width: min(420px, 100%);
            max-height: min(88dvh, 640px);
            overflow: auto;
            background: linear-gradient(165deg, #141820, #0a0c10);
            border: 1px solid rgba(212, 175, 55, 0.22);
            border-radius: 14px 14px 0 0;
            padding: 12px 12px 14px;
            box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.5);
            -webkit-overflow-scrolling: touch;
        }

        @media (min-width: 560px) {
            .plano-form-modal {
                align-items: center;
                padding: 16px;
            }
            .plano-form-shell {
                border-radius: 12px;
                max-height: min(85dvh, 620px);
                width: min(440px, 100%);
            }
        }

        .plano-form-shell h3 {
            font-family: Inter, system-ui, sans-serif;
            font-size: 0.82rem;
            color: var(--gold);
            margin: 0 0 2px;
            letter-spacing: 0.02em;
            font-weight: 600;
        }

        .plano-form-shell .pf-sub {
            color: #777;
            font-size: 0.62rem;
            margin-bottom: 8px;
            line-height: 1.35;
        }

        .pf-grid {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .pf-group {
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            padding: 8px 8px 7px;
            background: rgba(255, 255, 255, 0.015);
        }

        .pf-group-title {
            font-size: 0.58rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--gold);
            margin: 0 0 6px;
            opacity: 0.9;
        }

        .pf-group-fields {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 6px;
        }

        @media (max-width: 420px) {
            .pf-group-fields {
                grid-template-columns: 1fr 1fr;
                gap: 5px;
            }
        }

        .pf-field {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .pf-field.full {
            grid-column: 1 / -1;
        }

        .pf-field label {
            font-size: 0.55rem;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            color: #7a808a;
        }

        .pf-field input,
        .pf-field select {
            background: #12151c;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            color: #fff;
            padding: 6px 8px;
            font-size: 0.78rem;
            font-family: Inter, system-ui, sans-serif;
            outline: none;
            min-height: 34px;
        }

        .pf-field input:focus,
        .pf-field select:focus {
            border-color: rgba(212, 175, 55, 0.45);
        }

        .pf-foot {
            display: flex;
            gap: 6px;
            margin-top: 8px;
            flex-wrap: nowrap;
            position: sticky;
            bottom: 0;
            background: linear-gradient(180deg, transparent, #0a0c10 30%);
            padding-top: 6px;
        }

        .pf-foot button {
            flex: 1;
            min-width: 0;
            padding: 9px 8px;
            border-radius: 7px;
            font-weight: 600;
            font-size: 0.74rem;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
            min-height: 40px;
        }

        .pf-save {
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            border: none;
            color: #000;
        }

        .pf-cancel {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.15);
            color: #aaa;
        }

        .pf-note {
            margin-top: 6px;
            font-size: 0.55rem;
            color: #555;
            line-height: 1.3;
        }

        .diag-bar-item {
            flex: 1 1 100px;
            min-width: 90px;
        }

        .diag-bar-item .db-head {
            display: flex;
            justify-content: space-between;
            font-size: 0.58rem;
            color: #8a9099;
            margin-bottom: 2px;
        }

        .diag-bar-item .db-head b {
            color: #ccc;
        }

        .diag-track {
            height: 3px;
            border-radius: 2px;
            background: rgba(255, 255, 255, 0.06);
            overflow: hidden;
        }

        .diag-fill {
            height: 100%;
            border-radius: 2px;
            background: #555;
        }

        .diag-fill.ok {
            background: #7dcea0;
        }

        .diag-fill.warn {
            background: #e6b84d;
        }

        .diag-fill.bad {
            background: #e07a7a;
        }

        .diag-bar-item .db-hint {
            display: none;
        }


        .term-scenario-bar {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            margin: 8px 0 4px;
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(0, 0, 0, 0.25);
        }

        .term-scenario-bar span {
            font-size: 0.62rem;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #6b7280;
            margin-right: 4px;
        }

        .term-scenario-bar button {
            font-size: 0.68rem;
            padding: 6px 10px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: transparent;
            color: #aaa;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
        }

        .term-scenario-bar button.is-active {
            border-color: rgba(212, 175, 55, 0.45);
            color: var(--gold);
            background: rgba(212, 175, 55, 0.1);
        }

        .term-scenario-bar button:hover {
            color: #fff;
        }


        .hist-panel {
            margin-top: 8px;
            padding: 10px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(0, 0, 0, 0.2);
        }

        .hist-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            font-size: 0.65rem;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: #6b7280;
        }

        .hist-head button {
            font-size: 0.65rem;
        }

        .hist-list {
            display: flex;
            flex-direction: column;
            gap: 4px;
            max-height: 180px;
            overflow: auto;
        }

        .hist-item {
            display: grid;
            grid-template-columns: 72px 1fr;
            gap: 2px 8px;
            text-align: left;
            padding: 8px 10px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            background: rgba(255, 255, 255, 0.02);
            color: #ccc;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
        }

        .hist-item:hover {
            border-color: rgba(212, 175, 55, 0.3);
        }

        .hist-date {
            font-size: 0.6rem;
            color: #666;
            grid-row: span 2;
            align-self: center;
        }

        .hist-title {
            font-size: 0.75rem;
            color: #e8e4d8;
        }

        .hist-sum {
            font-size: 0.65rem;
            color: #7a808a;
            grid-column: 2;
        }

        .hist-empty {
            font-size: 0.72rem;
            color: #666;
            margin: 0;
        }

        .nav-plano {
            color: var(--gold) !important;
        }

        /* F1.07 — grade por objetivo */
        .tools-section {
            padding: 72px 5% 40px;
            background: transparent;
            border-top: 1px solid var(--border, rgba(255, 255, 255, 0.05));
        }

        .tools-intro {
            max-width: 480px;
            margin: 0 auto 36px;
            text-align: center;
        }

        .tools-intro h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(1.15rem, 2.8vw, 1.55rem);
            color: #e8e4dc;
            margin: 8px 0 8px;
            letter-spacing: 0.12em;
            font-weight: 600;
            text-transform: uppercase;
        }

        .tools-intro-text {
            color: #6b7280;
            font-size: 0.85rem;
            line-height: 1.55;
            margin: 0;
        }

        .tools-section {
            padding-top: var(--chrome-h) !important;
        }

        .tools-group {
            max-width: 860px;
            margin: 0 auto 28px;
        }

        .tools-group-head {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.15);
        }

        .tools-group-num {
            font-family: 'Orbitron', sans-serif;
            font-size: 0.7rem;
            color: rgba(212, 175, 55, 0.55);
            letter-spacing: 0.15em;
            padding-top: 6px;
            min-width: 24px;
        }

        .tools-group-head h3 {
            font-family: 'Orbitron', sans-serif;
            font-size: 0.85rem;
            color: #d8d4cc;
            letter-spacing: 0.14em;
            margin: 0 0 4px;
            text-transform: uppercase;
            font-weight: 600;
        }

        .tools-group-head p {
            margin: 0;
            color: #5c6370;
            font-size: 0.78rem;
            line-height: 1.45;
        }

        .tools-grid {
            padding: 0 !important;
            background: transparent !important;
            gap: 12px !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            max-width: 860px !important;
            margin-left: auto !important;
            margin-right: auto !important;
        }

        .tools-footnote {
            max-width: 720px;
            margin: 8px auto 0;
            text-align: center;
            color: #666;
            font-size: 0.75rem;
            line-height: 1.55;
        }

        .tools-footnote a {
            color: var(--gold);
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        @media (max-width: 600px) {
            .tools-section {
                padding: 48px 4% 28px;
            }

            .tools-group-head {
                gap: 12px;
            }
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
            gap: 30px;
            padding: 0;
            background: transparent;
        }

        .tool-card {
            background: rgba(12, 14, 18, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 7px;
            padding: 8px 10px;
            position: relative;
            overflow: hidden;
            transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            flex-direction: column;
            gap: 3px;
        }

        .card:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
                linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
            background-size: 100% 2px, 3px 100%;
            opacity: 0;
            transition: 0.3s;
            pointer-events: none;
        }

        .tool-card:hover {
            border-color: rgba(212, 175, 55, .45);
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, .45), 0 0 40px rgba(212, 175, 55, .08);
        }

        .tool-card:hover i {
            transform: scale(1.08);
            transition: transform 0.3s ease;

        }

        .tool-card i {
            font-size: 0.72rem;
            color: var(--gold);
            margin-bottom: 2px;
            filter: none;
        }

        .tool-card h3 {
            font-family: Inter, system-ui, sans-serif;
            font-size: 0.7rem;
            letter-spacing: 0.01em;
            margin-bottom: 1px;
            color: #e8ecf0;
            font-weight: 600;
        }

        .tool-card p {
            color: var(--text-dim);
            font-size: 0.62rem;
            line-height: 1.25;
        }

        .resources-section {
            padding: 100px 6%;
            border-top: 1px solid var(--border);
            background: var(--bg, #000000);
            text-align: center;

        }

        .resources-section h2 {
            font-size: 2rem;
            color: #fff;
            margin-bottom: 15px;
            font-family: 'Orbitron';
        }

        /* --- CARDS DAS FERRAMENTAS --- */
        .modal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.98);
            backdrop-filter: blur(20px);
            z-index: 10000;
            padding: 1px 4%;
            overflow-y: auto;
            transition: opacity 0.25s ease;

        }

        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            pointer-events: auto;
        }

        .modal-body {
            display: grid;
            grid-template-columns: 360px minmax(0, 1fr);
            gap: 22px;
            margin-top: 6px;
            flex: 1 1 auto;
            min-height: 0;
            overflow: hidden;
            padding: 12px 16px 16px;
            box-sizing: border-box;
            align-items: stretch;
        }

        /* Desktop: cada coluna rola. Mobile sobrescreve para um único scroll. */
        @media (min-width: 901px) {
          .modal-body>.control-panel,
          .modal-body>.results-container {
              min-height: 0;
              max-height: 100%;
              overflow-x: hidden;
              overflow-y: auto;
              -webkit-overflow-scrolling: touch;
          }
        }

        @media (max-width: 900px) {
          .modal-body {
              display: flex !important;
              flex-direction: column !important;
              grid-template-columns: none !important;
              gap: 14px !important;
              overflow-x: hidden !important;
              overflow-y: auto !important;
              -webkit-overflow-scrolling: touch !important;
              overscroll-behavior: contain !important;
              padding: 12px 14px max(20px, env(safe-area-inset-bottom)) !important;
          }
          .modal-body>.control-panel,
          .modal-body>.results-container {
              min-height: 0 !important;
              max-height: none !important;
              height: auto !important;
              overflow: visible !important;
              flex: 0 0 auto !important;
          }
        }

        @media (min-width: 900px) {
            .modal-wrap {
                flex-direction: row;
            }
        }

        .modal.fullscreen {
            padding: 0;
        }

        .modal.fullscreen .modal-content {
            width: 99vw;
            height: 100vh;
            border: none;
        }

        .modal-content {
            background: linear-gradient(180deg, #111111 0%, #0b0b0c 100%);
            width: 90%;
            height: 97vh;
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 1px;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65);
            transform: translateZ(0);
            backface-visibility: hidden;
            will-change: transform, opacity;
            gap: 0;
        }

        /* Performance */
        .modal-content,
        .control-panel,
        .results-container {
            will-change: transform;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .modal-header {
            padding: 10px 14px;
            padding-top: max(10px, env(safe-area-inset-top));
            background: rgba(255, 255, 255, 0.015);
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
            backdrop-filter: blur(12px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            min-width: 0;
            width: 100%;
            box-sizing: border-box;
            overflow: hidden;
        }

        .modal-header-left {
            display: flex;
            align-items: center;
            gap: 8px;
            min-width: 0;
            flex: 1 1 auto;
            overflow: hidden;
        }

        .modal-header-kicker {
            font-size: 0.55rem;
            letter-spacing: 1.5px;
            opacity: 0.45;
            flex-shrink: 0;
            font-family: Orbitron, sans-serif;
        }

        .modal-header-title {
            color: var(--gold);
            font-family: 'JetBrains Mono', ui-monospace, monospace;
            font-size: 0.78rem;
            border-left: 2px solid #333;
            padding-left: 8px;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .header-actions {
            display: flex;
            gap: 4px;
            align-items: center;
            flex-shrink: 0;
            margin-left: auto;
        }

        .header-actions .term-link {
            font-size: 0.65rem;
            padding: 6px 8px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: transparent;
            color: #aaa;
            cursor: pointer;
            white-space: nowrap;
            font-family: Inter, system-ui, sans-serif;
        }

        .header-actions .term-link:hover {
            color: var(--gold);
            border-color: rgba(212, 175, 55, 0.35);
        }

        .header-icon-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            min-width: 36px;
            padding: 0;
            border: none;
            border-radius: 8px;
            background: transparent;
            color: var(--text-dim);
            cursor: pointer;
            flex-shrink: 0;
            font-size: 0.95rem;
            -webkit-tap-highlight-color: transparent;
        }

        .header-icon-btn:hover {
            color: var(--gold);
            background: rgba(255, 255, 255, 0.05);
        }

        .header-close-btn {
            color: #ff6b6b !important;
        }

        .header-close-btn:hover {
            color: #ff3e3e !important;
            background: rgba(255, 62, 62, 0.12);
        }

        .header-actions i {
            color: inherit;
            font-size: inherit;
            pointer-events: none;
        }

        .results-container {
            padding: 10px 10px 20px;
            display: flex;
            flex-direction: column;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            border: 0.6px solid rgba(212, 175, 55, 0.3);
            width: 100%;
            height: auto;
            max-height: 100%;
            min-height: 0;
            flex: 1 1 auto;
            box-sizing: border-box;
        }

        /* Ações do terminal sempre alcançáveis ao rolar a coluna de resultados */
        .share-buttons-container {
            flex-shrink: 0;
            margin-top: 12px;
            padding: 12px 8px 20px;
            padding-bottom: max(20px, env(safe-area-inset-bottom));
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35) 12%);
            position: relative;
            z-index: 2;
        }

        .share-buttons-container .share-title {
            font-size: 0.65rem;
            letter-spacing: 1px;
            color: #888;
            margin: 8px 0 8px;
            text-align: center;
        }

        .share-buttons-container .btn-group {
            margin-top: 8px;
            flex-wrap: wrap;
        }

        /* ESTADO GRÁFICO EXPANDIDO */
        .results-container.expanded-chart .res-display,
        .results-container.expanded-chart .stats-grid,
        .results-container.expanded-chart .stats-grid-extra,
        .results-container.expanded-chart .modal-edu-note,
        .results-container.expanded-chart .projection-limits,
        .results-container.expanded-chart .res-premises,
        .results-container.expanded-chart .term-next-strip,
        .results-container.expanded-chart .share-buttons-container .share-title,
        .results-container.expanded-chart .share-buttons-container .btn-group {
            display: none !important;
        }

        .results-container.expanded-chart .chart-wrap {
            flex: 1 1 auto !important;
            height: auto !important;
            min-height: 55vh !important;
            margin: 0 !important;
            max-height: none !important;
        }
        .results-container.expanded-chart .chart-plot {
            height: min(62vh, 520px) !important;
            min-height: 280px !important;
        }
        .results-container.expanded-chart .share-buttons-container {
            margin-top: 8px !important;
            padding-top: 8px !important;
        }
        .results-container.expanded-chart .term-scenario-bar {
            display: flex !important;
        }

        /* PAINEL DE CONTROLE REFINADO */
        .control-panel {
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(2, 255, 255, 0.01));
            padding: 13px 15px;
            border-bottom: 1px solid var(--border);
            overflow-y: auto;
            flex: 0 0 auto;
            scrollbar-width: none;
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        @media (min-width: 900px) {
            .controls {
                width: 380px;
                border-bottom: none;
                border-right: 1px solid var(--border);
                padding: 24px 20px;
                flex: 0 0 380px;
            }
        }

        .input-group {
            margin-bottom: 5.2px;
            position: relative;
        }

        .input-label {
            display: flex;
            justify-content: space-between;
            font-size: 0.7rem;
            color: var(--text-dim);
            text-transform: uppercase;
            letter-spacing: 0.7px;
            margin-bottom: 0.85px;
        }

        .input-label b {
            color: var(--gold);
        }

        .dual-input input[type="number"] {
            background: #141922;
            border: rgba(198, 169, 91, 0.45);
            box-shadow: 0 0 0 1px rgba(198, 169, 91, 0.08);
            border-radius: 1px;
            color: #fff;
            font-family: 'Inter', sans-serif;
            font-size: 0.93rem;
            padding: 2px 4px;
            width: 84.1%;
            outline: none;
        }

        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            background: rgba(255, 255, 255, 0.08);
            height: 2px;
            outline: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            background: var(--gold);
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid #111;
            box-shadow: 0 0 0 3px rgba(198, 169, 91, 0.15);
            transition: transform 0.15s ease, box-shadow 0.15s ease;
        }

        /* RESULTADOS — F1.04 padronização */
        .res-display {
            text-align: center;
            margin: 4px 0 14px;
            padding: 14px 12px 12px;
            background: linear-gradient(165deg, rgba(212, 175, 55, 0.06), rgba(255, 255, 255, 0.02));
            border: 1px solid rgba(212, 175, 55, 0.22);
            border-radius: 8px;
            color: #fff;
            letter-spacing: -0.5px;
        }

        .res-display small,
        .res-display #resLabel {
            display: block;
            font-family: 'Inter', system-ui, sans-serif;
            font-size: 0.68rem;
            font-weight: 600;
            color: var(--gold);
            margin: 0 0 6px;
            text-transform: uppercase;
            letter-spacing: 1.2px;
        }

        .res-display h2,
        .res-display #resValue {
            font-family: 'Orbitron', Inter, sans-serif;
            font-size: clamp(1.35rem, 3.2vw, 1.85rem);
            font-weight: 700;
            color: #fff;
            margin: 0;
            font-variant-numeric: tabular-nums;
            line-height: 1.2;
            word-break: break-word;
        }

        .res-display .res-unit-hint {
            display: block;
            margin-top: 4px;
            font-size: 0.65rem;
            color: #777;
            letter-spacing: 0.3px;
            font-weight: 400;
            text-transform: none;
        }

        .res-premises {
            margin: 0 0 12px;
            padding: 8px 10px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            font-size: 0.68rem;
            color: #8a9099;
            line-height: 1.45;
            text-align: left;
        }

        .res-premises strong {
            color: #b8bcc7;
            font-weight: 600;
        }

        .res-premises[hidden] {
            display: none !important;
        }

        /* F1.05 — gráficos e unidades padronizados */
        .chart-wrap {
            position: relative;
            width: 100%;
            margin: 8px 0 12px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.25);
            padding: 8px 8px 4px;
            box-sizing: border-box;
        }

        .chart-caption {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            padding: 0 4px 6px;
            font-size: 0.62rem;
            color: #777;
            letter-spacing: 0.3px;
        }

        .chart-caption strong {
            color: #a89b6a;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.8px;
        }

        .chart-caption .chart-unit {
            color: #888;
            font-variant-numeric: tabular-nums;
        }

        /* F1.08 — avisos educativos e limites */
        .modal-edu-note {
            margin-top: 10px;
            padding: 10px 12px;
            border-radius: 6px;
            background: rgba(255, 180, 0, 0.06);
            border: 1px solid rgba(255, 180, 0, 0.18);
            color: #a8a08a;
            font-size: 0.68rem;
            line-height: 1.5;
            text-align: left;
        }

        .modal-edu-note strong {
            color: #c4b896;
            font-weight: 600;
        }

        .projection-limits {
            margin: 10px 0 0;
            padding: 8px 10px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px dashed rgba(255, 255, 255, 0.08);
            font-size: 0.65rem;
            color: #777;
            line-height: 1.45;
            text-align: left;
        }

        .projection-limits[hidden] {
            display: none !important;
        }



        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 8px;
            margin-bottom: 14px;
        }

        .stat-box {
            background: rgba(255, 255, 255, 0.025);
            padding: 12px 10px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.06);
            text-align: center;
            transform: translateZ(0);
            backface-visibility: hidden;
            min-height: 64px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
        }

        .stat-box:hover {
            border-color: rgba(212, 175, 55, 0.22);
            background: rgba(212, 175, 55, 0.04);
        }

        .stat-box span {
            display: block;
            color: var(--text-dim);
            font-size: 0.62rem;
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            font-weight: 500;
        }

        .stat-box b {
            font-size: 0.88rem;
            color: var(--gold);
            font-family: 'JetBrains Mono', ui-monospace, monospace;
            font-variant-numeric: tabular-nums;
            font-weight: 600;
            line-height: 1.25;
            word-break: break-word;
        }

        .stat-box b.is-real {
            color: var(--blue-real, #55aaff);
        }

        .stat-box b.is-muted {
            color: #9aa0a8;
        }

        .stat-box .stat-unit {
            display: block;
            font-size: 0.58rem;
            color: #666;
            text-transform: none;
            letter-spacing: 0;
            margin-top: 2px;
        }

        /* Insights didáticos e tabela de evolução */
        .scenario-bar {
            display: flex;
            gap: 6px;
            margin-bottom: 12px;
        }

        .scenario-btn {
            flex: 1;
            padding: 7px 4px;
            font-size: 0.72rem;
            font-family: 'Inter', sans-serif;
            letter-spacing: 0.3px;
            border: 1px solid rgba(212, 175, 55, 0.25);
            background: transparent;
            color: #888;
            border-radius: 3px;
            cursor: pointer;
            transition: 0.25s;
        }

        .scenario-btn:hover {
            border-color: var(--gold);
            color: #fff;
        }

        .scenario-btn.active {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.08));
            border-color: var(--gold);
            color: var(--gold);
            font-weight: 600;
        }

        .insights-box {
            margin: 12px 0 18px;
            padding: 14px 16px;
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.08), rgba(85, 170, 255, 0.05));
            border: 1px solid rgba(212, 175, 55, 0.25);
            border-radius: 4px;
            font-size: 0.82rem;
            color: #c8ccd4;
            line-height: 1.55;
        }

        .insights-title {
            color: var(--gold);
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 0.85rem;
            letter-spacing: 0.5px;
        }

        .insights-box ul {
            margin: 0;
            padding-left: 18px;
        }

        .insights-box li {
            margin-bottom: 6px;
        }

        .evo-table-wrap {
            margin-top: 12px;
        }

        .evo-table-wrap summary {
            cursor: pointer;
            color: var(--gold);
            font-size: 0.8rem;
            margin-bottom: 8px;
            outline: none;
        }

        .evo-table-scroll {
            max-height: 220px;
            overflow: auto;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 3px;
        }

        .evo-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.72rem;
            font-family: 'JetBrains Mono', monospace;
        }

        .evo-table th {
            position: sticky;
            top: 0;
            background: #151820;
            color: var(--gold);
            padding: 6px 8px;
            text-align: right;
            border-bottom: 1px solid rgba(212, 175, 55, 0.3);
        }

        .evo-table th:first-child,
        .evo-table td:first-child {
            text-align: center;
        }

        .evo-table td {
            padding: 5px 8px;
            text-align: right;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
            color: #aaa;
        }

        .evo-table tr:hover td {
            background: rgba(212, 175, 55, 0.06);
            color: #fff;
        }

        .chart-wrap {
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        @media (max-width: 768px) {
            .chart-wrap canvas {
                touch-action: pan-y pinch-zoom;
            }
        }

        footer {
            padding: 80px 5% 40px;
            border-top: 1px solid var(--border);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 60px;
            margin-bottom: 80px;
        }

        .footer-logo {
            font-family: 'Orbitron';
            color: var(--gold);
            font-size: 1rem;
            letter-spacing: 4px;
            margin-bottom: 25px;
            display: block;
        }

        .social-links {
            display: flex;
            gap: 15px;
            margin-top: 30px;
        }

        .social-links a {
            width: 30px;
            height: 30px;
            border: 2px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0%;
            color: var(--text-dim);
            transition: 0.5s;
            text-decoration: none;
        }

        .social-links a:hover {
            background: var(--gold-dark);
            color: #000;
            border-color: var(--gold);
            box-shadow: 0 10px 30px rgba(212, 175, 55, .08);
        }

        .footer-col h5 {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 25px;
            color: #fff;
        }

        .footer-col a {
            display: block;
            color: var(--text-dim);
            text-decoration: none;
            font-size: 0.85rem;
            margin-bottom: 12px;
            transition: 0.3s;
        }

        .footer-col a:hover {
            color: var(--gold);
            transform: translateX(5px);
        }

        /* Botões de compartilhamento minimalistas e responsivos */
        .btn-group {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        .luxury-btn {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            padding: 0.4rem 1rem;
            border-radius: 3px;
            font-weight: 500;
            font-size: 0.88rem;
            cursor: pointer;
            border: 1px solid var(--gold);
            background: transparent;
            color: var(--gold);
        }

        .btn {
            flex: 1;
            padding: 8px;
            background: transparent;
            border: 1px solid var(--gold);
            color: var(--gold);
            font-family: 'Orbitron';
            font-size: 11px;
            cursor: pointer;
            transition: 0.3s;
            letter-spacing: 1px;
        }

        .btn:hover {
            background: var(--gold);
            color: #000;
            transform: translateY(-2px);
        }

        .btn-close {
            border-color: #ff3e3e;
            color: #ff3e3e;
        }

        .btn-close:hover {
            background: #ff3e3e;
            color: #fff;
        }

        /* Adições recomendadas */
        .loading {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px;
            color: var(--gold);
        }

        .spinner {
            border: 3px solid rgba(212, 175, 55, 0.2);
            border-top: 3px solid var(--gold);
            border-radius: 2%;
            width: 28px;
            height: 28px;
            animation: spin 1s linear infinite;
            margin-right: 12px;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .input-group {
            position: relative;
        }

        .input-group[data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: calc(100% + 6px);
            left: 0;
            right: auto;
            transform: none;
            background: #151820;
            color: #e2e6ec;
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 0.72rem;
            line-height: 1.4;
            font-weight: 400;
            white-space: normal;
            width: max(100%, 220px);
            max-width: min(320px, 92vw);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.18s ease, visibility 0.18s ease;
            z-index: 10050;
            border: 1px solid rgba(212, 175, 55, 0.25);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
            text-align: left;
        }

        .input-group[data-tooltip]:hover::after,
        .input-group[data-tooltip]:focus-within::after,
        .input-group[data-tooltip].is-tip-open::after {
            opacity: 1;
            visibility: visible;
        }

        @media (max-width: 720px) {
            .input-group[data-tooltip]::after {
                left: 0;
                right: 0;
                width: auto;
                max-width: none;
                bottom: auto;
                top: calc(100% + 4px);
            }
        }

        /* ====================== APRENDA NO SEU RITMO ====================== */
        .resources-section {
            padding: 96px 5% 96px;
            background: transparent;
            text-align: center;
            border-top: 1px solid var(--border, rgba(255, 255, 255, 0.04));
        }

        .resources-section .section-tag {
            margin-bottom: 0;
        }

        .resources-section h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(1.45rem, 3.2vw, 2rem);
            font-weight: 700;
            letter-spacing: 0.4px;
            color: #fff;
            line-height: 1.3;
            margin: 14px auto 0;
            max-width: 640px;
        }

        .resources-subtitle {
            max-width: 520px;
            margin: 14px auto 0;
            color: #8b939f;
            line-height: 1.65;
            font-size: 0.92rem;
            font-weight: 400;
        }

        .controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 16px;
            margin: 36px auto 40px;
            width: 100%;
            max-width: 720px;
        }

        .tabs-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 6px;
            padding: 6px;
            background: rgba(255, 255, 255, 0.025);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            width: 100%;
            max-width: 480px;
        }

        .tab-btn {
            flex: 1 1 auto;
            min-width: 72px;
            padding: 10px 14px;
            border-radius: 9px;
            font-size: 0.8rem;
            font-weight: 500;
            color: #9aa0a8;
            background: transparent;
            border: 1px solid transparent;
            cursor: pointer;
            transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
            min-height: 42px;
            font-family: Inter, system-ui, sans-serif;
            letter-spacing: 0.02em;
        }

        .tab-btn:hover {
            color: #eee;
            background: rgba(255, 255, 255, 0.04);
        }

        .tab-btn.active {
            background: color-mix(in srgb, var(--gold, #D4AF37) 16%, transparent);
            border-color: color-mix(in srgb, var(--gold, #D4AF37) 40%, transparent);
            color: var(--gold, #D4AF37);
            font-weight: 600;
        }

        .tab-btn:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 2px;
        }

        .search-box {
            position: relative;
            width: 100%;
            max-width: 400px;
        }

        .search-box i {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #666;
            font-size: 0.85rem;
            pointer-events: none;
        }

        .search-box input {
            background: rgba(12, 14, 18, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.08);
            height: 46px;
            border-radius: 11px;
            padding: 0 16px 0 42px;
            width: 100%;
            transition: border-color 0.25s ease, box-shadow 0.25s ease;
            color: #fff;
            font-size: 0.88rem;
            outline: none;
            font-family: Inter, system-ui, sans-serif;
            box-sizing: border-box;
        }

        .search-box input::placeholder {
            color: #5c6570;
        }

        .search-box input:focus {
            border-color: rgba(212, 175, 55, 0.35);
            box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08);
        }

        .res-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 18px;
            max-width: 1100px;
            margin: 0 auto;
            text-align: left;
        }

        .resource-card {
            position: relative;
            background: rgba(14, 16, 22, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 14px;
            padding: 22px 22px 18px;
            display: flex;
            flex-direction: column;
            min-height: 200px;
            transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
            cursor: pointer;
            overflow: hidden;
        }

        .resource-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45), transparent);
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        .resource-card:hover {
            border-color: rgba(212, 175, 55, 0.28);
            transform: translateY(-3px);
            box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
        }

        .resource-card:hover::before {
            opacity: 1;
        }

        .resource-card:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 2px;
        }

        .resource-card.resource-featured {
            border-color: rgba(212, 175, 55, 0.32);
            background:
                linear-gradient(165deg, rgba(212, 175, 55, 0.09) 0%, transparent 42%),
                rgba(14, 16, 22, 0.9);
            grid-column: span 1;
        }

        .resource-card.resource-featured::before {
            opacity: 1;
            background: linear-gradient(90deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.7), rgba(212, 175, 55, 0.15));
        }

        .resource-card.resource-soon {
            opacity: 0.9;
            border-style: dashed;
            border-color: rgba(255, 255, 255, 0.1);
            cursor: default;
        }

        .resource-card.resource-soon:hover {
            transform: none;
            box-shadow: none;
            border-color: rgba(212, 175, 55, 0.2);
        }

        .resource-card .resource-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 14px;
        }

        .resource-card .resource-icon {
            width: 42px;
            height: 42px;
            border-radius: 11px;
            background: rgba(212, 175, 55, 0.08);
            border: 1px solid rgba(212, 175, 55, 0.15);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--gold);
            font-size: 1rem;
            flex-shrink: 0;
        }

        .resource-card .resource-category {
            display: none;
            /* ícone + level já bastam */
        }

        .resource-card .resource-level {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: #8a929e;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
            padding: 5px 9px;
            border-radius: 6px;
            white-space: nowrap;
        }

        .resource-card.resource-featured .resource-level {
            color: #c9b27a;
            border-color: rgba(212, 175, 55, 0.25);
            background: rgba(212, 175, 55, 0.08);
        }

        .resource-card.resource-soon .resource-level {
            color: var(--gold);
            border-color: rgba(212, 175, 55, 0.25);
        }

        .resource-card h3 {
            font-family: Inter, system-ui, sans-serif;
            font-size: 1.02rem;
            font-weight: 600;
            color: #f2f2f2;
            margin: 0 0 8px;
            line-height: 1.35;
            letter-spacing: -0.01em;
        }

        .resource-card>p {
            font-size: 0.82rem;
            color: #8b939f;
            line-height: 1.55;
            margin: 0 0 16px;
            flex: 1;
        }

        .dl-counter {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 0.72rem;
            color: #777;
            margin: 0 0 12px;
            font-variant-numeric: tabular-nums;
            padding: 5px 10px;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 6px;
            width: fit-content;
        }

        .dl-counter i {
            color: var(--gold);
            font-size: 0.68rem;
        }

        .dl-counter .dl-count-num {
            color: #ddd;
            font-weight: 600;
        }

        .resource-card .actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px;
            margin-top: auto;
            padding-top: 4px;
            border-top: 1px solid rgba(255, 255, 255, 0.05);
            padding-top: 14px;
        }

        button.resource-link {
            font: inherit;
        }

        .resource-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 9px 14px;
            border-radius: 8px;
            font-size: 0.78rem;
            font-weight: 600;
            text-decoration: none;
            background: linear-gradient(165deg, #1c1c1c 0%, #0a0a0a 55%, #121212 100%);
            color: #e6e2d6;
            border: 1px solid rgba(255, 255, 255, 0.12);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.35);
            cursor: pointer;
            transition: border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
            font-family: Inter, system-ui, sans-serif;
        }

        .resource-link:hover {
            border-color: rgba(212, 175, 55, 0.4);
            color: #fff;
            transform: translateY(-1px);
        }

        .resource-link-secondary {
            background: transparent;
            color: #b0b0b0;
            border: 1px solid rgba(255, 255, 255, 0.14);
            font-weight: 500;
            box-shadow: none;
        }

        .resource-link-secondary:hover {
            border-color: rgba(212, 175, 55, 0.35);
            color: #fff;
            opacity: 1;
        }

        .badge-interno {
            font-size: 0.65rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #888;
            padding: 5px 8px;
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.06);
        }

        .badge-soon {
            background: rgba(212, 175, 55, 0.1) !important;
            color: var(--gold) !important;
            border-color: rgba(212, 175, 55, 0.28) !important;
        }

        .resource-soon-btn {
            opacity: 0.75;
            cursor: not-allowed !important;
            pointer-events: none;
            background: transparent !important;
            color: #999 !important;
            border: 1px solid #444 !important;
        }

        .waitlist-box {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            width: 100%;
            margin-top: 4px;
        }

        .waitlist-box input {
            flex: 1;
            min-width: 120px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            padding: 10px 12px;
            color: #fff;
            font-size: 0.8rem;
            outline: none;
            font-family: Inter, system-ui, sans-serif;
        }

        .waitlist-box input:focus {
            border-color: rgba(212, 175, 55, 0.35);
        }

        .waitlist-box button {
            background: linear-gradient(165deg, #1c1c1c 0%, #0a0a0a 55%, #121212 100%) !important;
            color: #e6e2d6 !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
            text-shadow: none !important;
        }

        .waitlist-msg {
            font-size: 0.72rem;
            color: var(--gold);
            margin-top: 4px;
            width: 100%;
            min-height: 1em;
        }

        .resources-footnote {
            margin-top: 40px !important;
            color: #555 !important;
            font-size: 0.72rem !important;
            max-width: 480px !important;
            margin-left: auto !important;
            margin-right: auto !important;
            line-height: 1.5;
        }

        @media (min-width: 900px) {
            .resource-card.resource-featured {
                grid-column: span 2;
                min-height: 180px;
                padding: 26px 28px 22px;
            }

            .resource-card.resource-featured h3 {
                font-size: 1.15rem;
            }

            .resource-card.resource-featured>p {
                font-size: 0.88rem;
                max-width: 85%;
            }
        }

        @media (max-width: 768px) {
            .resources-section {
                padding: 56px 4% 64px;
            }

            .resources-section h2 {
                font-size: 1.35rem;
            }

            .resources-subtitle {
                font-size: 0.86rem;
                padding: 0 4px;
            }

            .controls {
                margin: 28px auto 28px;
                gap: 12px;
            }

            .tabs-container {
                max-width: 100%;
                gap: 4px;
                padding: 5px;
            }

            .tab-btn {
                padding: 9px 10px;
                font-size: 0.75rem;
                min-width: 0;
                min-height: 40px;
            }

            .search-box input {
                height: 44px;
                font-size: 16px;
                /* sem zoom iOS */
            }

            .res-grid {
                grid-template-columns: 1fr;
                gap: 14px;
            }

            .resource-card {
                min-height: 0;
                padding: 18px 18px 16px;
                border-radius: 12px;
            }

            .resource-card.resource-featured {
                grid-column: span 1;
            }

            .resource-card:hover {
                transform: none;
            }

            .resource-card .actions {
                gap: 8px;
            }

            button.resource-link {
                font: inherit;
            }

            .resource-link {
                flex: 1 1 auto;
                justify-content: center;
                min-height: 44px;
                padding: 11px 14px;
            }

            .resource-link-secondary {
                flex: 1 1 auto;
            }
        }

        @media (max-width: 400px) {
            .tab-btn {
                font-size: 0.7rem;
                padding: 8px 6px;
            }
        }


        /* Modal de guias internos — acima do sheet mobile (Mais) */
        .resource-modal {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 2147483600;
            background: rgba(0, 0, 0, 0.72);
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px);
            align-items: center;
            justify-content: center;
            padding: 16px;
            box-sizing: border-box;
        }

        .resource-modal.active {
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        .guia-shell {
            width: min(640px, 100%);
            max-height: min(88vh, 720px);
            max-height: min(88dvh, 720px);
            background: linear-gradient(165deg, #12151c 0%, #0a0c10 100%);
            border: 1px solid rgba(212, 175, 55, 0.28);
            border-radius: 14px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .guia-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 18px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.07);
            flex-shrink: 0;
        }

        .guia-top h2 {
            margin: 0;
            font-family: Inter, system-ui, sans-serif;
            font-size: 1.1rem;
            font-weight: 600;
            color: #f0e6c8;
            line-height: 1.3;
            text-align: left;
        }

        .guia-close {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(255, 255, 255, 0.05);
            color: #ccc;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1rem;
        }

        .guia-close:hover {
            color: #fff;
            border-color: var(--gold);
        }

        .guia-body {
            padding: 20px 22px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            text-align: left;
            color: #c5c9d0;
            font-size: 0.92rem;
            line-height: 1.65;
            flex: 1 1 auto;
            min-height: 0;
        }

        .guia-body p {
            margin: 0 0 12px;
        }

        .guia-body ol,
        .guia-body ul {
            margin: 0 0 12px;
            padding-left: 18px;
        }

        .guia-body li {
            margin-bottom: 8px;
        }

        .guia-body strong {
            color: #eee;
        }

        .guia-foot {
            padding: 14px 20px 18px;
            border-top: 1px solid rgba(255, 255, 255, 0.06);
            flex-shrink: 0;
            text-align: left;
        }

        .guia-note {
            margin: 0 0 12px;
            font-size: 0.72rem;
            color: #777;
            line-height: 1.4;
        }

        .guia-btn-close {
            width: 100%;
            padding: 12px 16px;
            border: none;
            border-radius: 9px;
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            color: #0a0a0a;
            font-weight: 700;
            font-size: 0.85rem;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
            letter-spacing: 0.04em;
        }

        .guia-btn-close:hover {
            opacity: 0.92;
        }

        @media (max-width: 600px) {
            .resource-modal {
                padding: 10px;
                align-items: flex-end;
            }

            .guia-shell {
                max-height: 92dvh;
                border-radius: 14px 14px 10px 10px;
                width: 100%;
            }

            .guia-top {
                padding: 14px 16px;
            }

            .guia-top h2 {
                font-size: 1rem;
            }

            .guia-body {
                padding: 16px;
                font-size: 0.88rem;
            }
        }


        /* Botões de Recursos — preto reluzente (legibilidade) */
        .resources-section .resource-link,
        .res-grid .resource-link,
        button.resource-link,
        a.resource-link {
            background: linear-gradient(165deg, #1c1c1c 0%, #0a0a0a 55%, #121212 100%) !important;
            color: #e6e2d6 !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 4px 14px rgba(0, 0, 0, 0.4) !important;
            text-shadow: none !important;
        }

        .resources-section .resource-link:hover,
        .res-grid .resource-link:hover,
        button.resource-link:hover,
        a.resource-link:hover {
            border-color: rgba(212, 175, 55, 0.4) !important;
            color: #fff !important;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 18px rgba(212, 175, 55, 0.1) !important;
        }

        .resource-link-secondary {
            background: transparent !important;
            color: #aaa !important;
            border: 1px solid rgba(255, 255, 255, 0.14) !important;
            box-shadow: none !important;
        }

        .resources-section .resource-card h3,
        .resources-section .res-card h3 {
            color: #e8e4dc !important;
        }

        .resources-section .resource-category {
            color: #a89860 !important;
        }

        .chatbot-container {
            position: fixed;
            bottom: 28px;
            right: 28px;
            z-index: 100040;
        }

        .chatbot-btn {
            background: linear-gradient(135deg, var(--gold, #D4AF37), var(--gold-dark, #b8941f));
            color: #0A0A0A;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.3s, box-shadow 0.3s;
            box-shadow: 0 0 14px rgba(212, 175, 55, 0.45), 0 8px 28px rgba(0, 0, 0, 0.55);
            border: 1px solid rgba(255, 255, 255, 0.08);
        }

        .chatbot-btn:hover {
            transform: translateY(-4px) scale(1.05);
        }

        .chatbot-btn i {
            font-size: 1.5rem;
        }

        .chatbot-window {
            display: none;
            position: absolute;
            bottom: 62px;
            right: 0;
            background: linear-gradient(145deg, #0a0a0a, #000000);
            backdrop-filter: blur(20px);
            width: 380px;
            height: min(510px, calc(100dvh - 100px));
            max-height: calc(100dvh - 100px);
            border-radius: 14px;
            border: 1px solid rgba(212, 175, 55, 0.22);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85);
            overflow: hidden;
            flex-direction: column;
            z-index: 10050;
        }

        .chatbot-window.is-open {
            display: flex !important;
        }

        .chatbot-container {
            z-index: 10040 !important;
        }

        .chatbot-window .chatbot-header {
            flex-shrink: 0;
        }

        .chatbot-window .chatbot-body {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .chatbot-window .chat-suggestions {
            flex-shrink: 0;
            max-height: 72px;
            overflow-x: auto;
            overflow-y: hidden;
        }

        .chatbot-window .chatbot-input {
            flex-shrink: 0;
        }

        .chatbot-header .chat-close-btn {
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.12);
            color: #ccc;
            cursor: pointer;
            font-size: 1.15rem;
            width: 36px;
            height: 36px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .chatbot-header .chat-close-btn:hover {
            color: #fff;
            border-color: var(--gold);
        }

        @media (max-width: 768px) {
            .chatbot-container {
                bottom: 16px;
                right: 12px;
            }

            .chatbot-window {
                position: fixed;
                left: 10px;
                right: 10px;
                bottom: 72px;
                top: auto;
                width: auto !important;
                height: auto !important;
                max-height: calc(100dvh - 88px);
                max-height: calc(100svh - 88px);
                border-radius: 12px;
            }

            .chatbot-header {
                padding: 12px 14px !important;
            }

            .chatbot-header h4 {
                font-size: 0.95rem !important;
                letter-spacing: 2px !important;
            }

            .chatbot-header .disclaimer-header {
                margin-top: 6px !important;
                font-size: 0.58rem !important;
            }

            .chatbot-body {
                padding: 12px !important;
            }

            .chatbot-input {
                padding: 10px !important;
            }

            /* Banner LGPD não deve cobrir o fechar do chat */
            .lgpd-banner.show~* .chatbot-window,
            body:has(.lgpd-banner.show) .chatbot-window {
                max-height: calc(100dvh - 160px);
                bottom: 80px;
            }
        }

        .chatbot-header {
            background: linear-gradient(90deg, #111111, #0a0a0a);
            padding: 20px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.3);
            text-align: center;
        }

        .chatbot-header h4 {
            margin: 0;
            color: var(--gold);
            font-family: 'Orbitron', sans-serif;
            font-size: 1.1rem;
            letter-spacing: 3px;
        }

        .chatbot-header small {
            display: block;
            margin-top: 6px;
            color: var(--text-dim);
            font-size: 0.75rem;
        }

        .chatbot-header .disclaimer-header {
            margin-top: 10px;
            font-size: 0.62rem;
            color: #ff8888;
            letter-spacing: 1px;
        }

        .chatbot-body {
            flex: 1;
            padding: 16px;
            overflow-y: auto;
            scrollbar-width: thin;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .chatbot-message {
            padding: 11px 15px;
            border-radius: 14px;
            max-width: 88%;
            font-size: 0.88rem;
            line-height: 1.5;
            align-self: flex-start;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
        }

        .chatbot-message.bot {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(212, 175, 55, 0.08));
            color: #ffffff;
            border: 1px solid rgba(212, 175, 55, 0.4);
        }

        .chatbot-message.user {
            background: linear-gradient(135deg, rgba(85, 170, 255, 0.15), rgba(85, 170, 255, 0.08));
            color: #ffffff;
            align-self: flex-end;
            border: 1px solid rgba(85, 170, 255, 0.4);
        }

        .simulation-result {
            background: linear-gradient(135deg, rgba(212, 175, 55, 0.12), rgba(85, 170, 255, 0.06));
            border-left: 3px solid var(--gold);
            padding: 14px 16px;
            margin: 6px 0 4px;
            border-radius: 8px;
            font-size: 0.86rem;
            line-height: 1.55;
        }

        .chatbot-message.bot .chat-chip {
            margin-top: 10px;
            display: inline-flex;
        }

        .disclaimer-box {
            background: rgba(200, 50, 50, 0.15);
            border: 1px solid rgba(200, 50, 50, 0.4);
            color: #ff8888;
            padding: 10px;
            border-radius: 8px;
            margin-top: 10px;
            font-size: 0.8rem;
            text-align: center;
        }

        .chatbot-input {
            display: flex;
            padding: 14px 18px;
            background: #0a0a0a;
            border-top: 1px solid rgba(212, 175, 55, 0.2);
        }

        .chatbot-input input {
            flex: 1;
            background: rgba(15, 15, 15, 0.9);
            border: 1px solid rgba(212, 175, 55, 0.2);
            color: #fff;
            padding: 12px 18px;
            border-radius: 30px 0 0 30px;
            font-size: 0.9rem;
            outline: none;
        }

        .chatbot-input input:focus {
            border-color: var(--gold);
        }

        .chatbot-input button {
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            color: #000;
            padding: 0 22px;
            border: none;
            border-radius: 0 30px 30px 0;
            cursor: pointer;
        }

        .chat-suggestions {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            padding: 8px 14px 4px;
            background: #0a0a0a;
            border-top: 1px solid rgba(212, 175, 55, 0.12);
        }

        .chat-chip {
            font-size: 0.72rem;
            padding: 6px 11px;
            border-radius: 20px;
            border: 1px solid rgba(212, 175, 55, 0.3);
            background: transparent;
            color: var(--gold);
            cursor: pointer;
            transition: 0.2s;
            font-family: Inter, sans-serif;
        }

        .chat-chip:hover {
            background: rgba(212, 175, 55, 0.12);
            transform: translateY(-1px);
        }

        .search-box {
            position: relative;
            display: flex;
            align-items: center;
        }

        .resource-card .resource-level {
            font-size: 0.65rem;
            color: #666;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 6px;
        }

        .resource-card.resource-soon {
            opacity: 0.88;
            border-style: dashed;
        }

        .resource-card.resource-soon:hover {
            border-color: rgba(212, 175, 55, 0.25);
        }

        .resource-soon-btn {
            opacity: 0.7;
            cursor: not-allowed !important;
            pointer-events: none;
            border-color: #555 !important;
            color: #999 !important;
        }

        .badge-soon {
            background: rgba(212, 175, 55, 0.12) !important;
            color: var(--gold) !important;
            border: 1px solid rgba(212, 175, 55, 0.3);
        }

        .dl-counter {
            display: flex;
            align-items: center;
            gap: 7px;
            font-size: 0.72rem;
            color: #888;
            margin: 8px 0 4px;
            font-variant-numeric: tabular-nums;
        }

        .dl-counter i {
            color: var(--gold);
            font-size: 0.7rem;
        }

        .dl-counter .dl-count-num {
            color: #ddd;
            font-weight: 600;
        }

        .resource-card.resource-featured {
            border-color: rgba(212, 175, 55, 0.35);
            background: linear-gradient(160deg, rgba(212, 175, 55, 0.06) 0%, transparent 50%);
        }

        .resource-card .badge-interno {
            display: inline-block;
            font-size: 0.65rem;
            color: var(--gold);
            border: 1px solid rgba(212, 175, 55, 0.35);
            padding: 2px 8px;
            border-radius: 2px;
            margin-top: 8px;
        }

        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: #0b0b0c;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(198, 169, 91, 0.18);
            border-radius: 999px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background:
                rgba(198, 169, 91, 0.35);
        }

        /* RESPONSIVITY IMPROVEMENTS */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @media (max-width: 900px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 40px;
            }

            .modal-body {
                grid-template-columns: 1fr;
            }

            .hero h1 {
                font-size: clamp(1.4rem, 4vw, 2.2rem);
            }
        }

        @media (max-width: 600px) {
            header {
                flex-direction: column;
                gap: 20px;
            }

            nav a {
                margin-left: 14px;
                font-size: 0.65rem;
            }

            .hero h1 {
                font-size: clamp(1.25rem, 6.5vw, 1.75rem);
            }

            .grid-container {
                grid-template-columns: 1fr;
            }

            .modal {
                padding: 2px;
            }

        }

        @media(max-width:768px) {

            .hero {
                padding-top: 20px;
            }

            /* Chat: regras mobile já definidas acima (não usar 100vh — cobre o botão fechar) */

            .tool-card {
                padding: 22px;
            }

            .hero h1 {
                line-height: 1.1;
            }

            /* Modal profissional no mobile */
            .modal {
                padding: 0;
                align-items: stretch;
            }

            .modal-content {
                width: 100vw !important;
                height: 100vh !important;
                max-height: 100vh;
                border-radius: 0;
                border: none;
            }

            .modal-body {
                grid-template-columns: 1fr !important;
                gap: 8px;
                overflow-y: auto;
                flex: 1;
                padding: 0 8px 12px;
            }

            .control-panel {
                max-height: 42vh;
                overflow-y: auto;
                border-right: none !important;
                border-bottom: 1px solid var(--border);
                padding: 10px 12px !important;
            }

            .results-container {
                height: auto !important;
                min-height: 45vh;
                max-height: none;
            }

            .res-display h2 {
                font-size: 1.35rem !important;
            }

            .stats-grid {
                grid-template-columns: 1fr 1fr !important;
                gap: 8px;
            }

            .scenario-bar {
                flex-wrap: wrap;
            }

            .scenario-btn {
                flex: 1;
                min-width: 90px;
                font-size: 0.75rem;
                padding: 8px 6px;
            }

            .btn-group {
                flex-wrap: wrap;
            }

            .btn-group .btn {
                min-width: 45%;
            }

            .insights-box {
                font-size: 0.78rem;
                padding: 10px 12px;
            }

            .evo-table {
                font-size: 0.65rem;
            }

            .modal-header {
                padding: 8px 10px;
            }
        }

        /* Acessibilidade & mobile */
        @media (prefers-reduced-motion: reduce) {

            *,
            *::before,
            *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }

            .ticker-track {
                animation: none !important;
            }
        }

        :focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 2px;
        }

        .skip-link {
            position: absolute;
            left: -9999px;
            top: 0;
            background: var(--gold);
            color: #000;
            padding: 10px 16px;
            z-index: 100000;
            font-weight: 700;
        }

        .skip-link:focus {
            left: 12px;
            top: 48px;
        }

        @media (max-width: 768px) {
            .tool-card {
                min-height: 48px;
                padding: 16px 14px;
            }

            .modal-content {
                max-height: 92vh;
                -webkit-overflow-scrolling: touch;
            }

            input,
            select,
            button,
            .dual-input input {
                font-size: 16px !important;
                /* evita zoom iOS */
            }
        }

        /* Banner LGPD / armazenamento local (Brasil) */
        .lgpd-banner {
            display: none;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 100060;
            background: linear-gradient(180deg, #12151c 0%, #0a0c10 100%);
            border-top: 1px solid rgba(212, 175, 55, 0.35);
            box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.55);
            padding: 16px 5%;
            font-family: Inter, system-ui, sans-serif;
        }

        .lgpd-banner.show {
            display: block;
        }

        .lgpd-inner {
            max-width: 960px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 14px 20px;
        }

        .lgpd-text {
            flex: 1 1 280px;
            font-size: 0.82rem;
            color: #bbb;
            line-height: 1.55;
        }

        .lgpd-text a {
            color: var(--gold);
            text-decoration: underline;
        }

        .lgpd-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .lgpd-actions button {
            border: none;
            cursor: pointer;
            padding: 11px 18px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: 600;
            font-family: Inter, sans-serif;
        }

        .lgpd-accept {
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            color: #000;
        }

        .lgpd-essential {
            background: transparent;
            color: #ccc;
            border: 1px solid #555 !important;
        }

        .lgpd-essential:hover {
            border-color: #888 !important;
            color: #fff;
        }

        @media (max-width: 600px) {
            .lgpd-banner {
                padding: 14px 4%;
            }

            .lgpd-actions {
                width: 100%;
            }

            .lgpd-actions button {
                flex: 1;
            }
        }

        /* Lista de espera app */
        .waitlist-box {
            margin-top: 10px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .waitlist-box input {
            flex: 1;
            min-width: 140px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(212, 175, 55, 0.25);
            border-radius: 4px;
            padding: 10px 12px;
            color: #fff;
            font-size: 0.8rem;
            outline: none;
        }

        .waitlist-box button {
            background: linear-gradient(165deg, #1c1c1c 0%, #0a0a0a 55%, #121212 100%) !important;
            color: #e6e2d6;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            padding: 10px 14px;
            border-radius: 4px;
            font-weight: 600;
            cursor: pointer;
            font-size: 0.75rem;
        }

        .waitlist-msg {
            font-size: 0.7rem;
            color: var(--gold);
            margin-top: 6px;
            min-height: 1em;
        }



        /* PWA offline indicator */
        .offline-banner {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100050;
            background: rgba(180, 100, 20, 0.95);
            color: #fff;
            text-align: center;
            font-size: 0.75rem;
            padding: 8px 12px;
            padding-top: max(8px, env(safe-area-inset-top));
            font-family: Inter, system-ui, sans-serif;
        }

        .offline-banner.show {
            display: block;
        }

        /* Banner instalar app (PWA) */
        /* Banner instalar app — discreto, só mobile, acima do chat */
        .pwa-install {
            display: none;
            position: fixed;
            left: 10px;
            right: 10px;
            bottom: calc(72px + env(safe-area-inset-bottom, 0px));
            z-index: 2147483500;
            /* acima da bottom nav; abaixo de modais full */
            background: rgba(14, 16, 22, 0.96);
            border: 1px solid rgba(212, 175, 55, 0.28);
            border-radius: 12px;
            padding: 10px 12px;
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
            align-items: center;
            gap: 10px;
            max-width: 400px;
            margin: 0 auto;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
        }

        .pwa-install.show {
            display: flex;
        }

        .pwa-install-text {
            flex: 1;
            min-width: 0;
            font-size: 0.72rem;
            color: #a8aeb8;
            line-height: 1.35;
        }

        .pwa-install-text strong {
            color: #e8e0c8;
            display: block;
            margin-bottom: 2px;
            font-size: 0.78rem;
            font-weight: 600;
        }

        .pwa-install-actions {
            display: flex;
            gap: 6px;
            flex-shrink: 0;
        }

        .pwa-install-actions button {
            border: none;
            border-radius: 8px;
            padding: 8px 11px;
            font-size: 0.72rem;
            font-weight: 600;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
            min-height: 36px;
        }

        .pwa-install-go {
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            color: #000;
        }

        .pwa-install-no {
            background: transparent;
            color: #888;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
        }

        /* Desktop: banner compacto no canto inferior direito */
        @media (min-width: 769px) {
            .pwa-install {
                left: auto;
                right: 20px;
                bottom: 20px;
                width: min(420px, calc(100vw - 40px));
                max-width: 420px;
                margin: 0;
            }
            .pwa-install.show {
                display: flex !important;
            }
        }

        /* chart-line-fix: evita gráfico estourar / labels quebrando layout */
        @media (max-width: 900px) {
            /* altura do gráfico no mobile: ver MOBILE UX v4 (.chart-plot 240px) */
            #resultsArea .chart-wrap,
            .results-container .chart-wrap {
                height: auto !important;
                max-height: none !important;
                min-height: 0 !important;
                width: 100% !important;
                overflow: visible !important;
            }
            #resultsArea .chart-wrap canvas,
            .results-container .chart-wrap canvas {
                max-height: none !important;
            }
        }

        @media (min-width: 901px) {

            #resultsArea .chart-wrap,
            .results-container .chart-wrap {
                height: 280px !important;
                max-height: 320px !important;
            }
        }

        /* —— Redesign Home / Meu Plano privado —— */
        .header-end {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
            flex-shrink: 0;
        }

        .site-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 10px 4%;
            position: fixed;
            flex-wrap: wrap;
            top: 42px;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 9998;
            background: rgba(0, 0, 0, 0.94);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(212, 175, 55, 0.18);
            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
        }

        @media (max-width: 860px) {
            .site-header {
                top: 40px;
            }

            body {
                padding-top: var(--chrome-h);
            }

            .top-ticker {
                height: 40px;
            }
        }

        .site-nav {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 4px 14px;
        }

        .site-nav a {
            color: #9aa3ad;
            text-decoration: none;
            font-size: 0.82rem;
            font-weight: 500;
        }

        .site-nav a:hover {
            color: #fff;
        }

        .nav-mp {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            margin-left: 0;
            padding: 7px 14px;
            border-radius: 999px;
            border: 1px solid rgba(212, 175, 55, 0.35);
            background: rgba(212, 175, 55, 0.08);
            color: var(--gold);
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
            transition: background 0.2s, box-shadow 0.2s;
        }

        .nav-mp:hover {
            background: rgba(212, 175, 55, 0.16);
            box-shadow: 0 0 16px rgba(212, 175, 55, 0.12);
        }

        .nav-mp-dot {
            font-size: 0.72rem;
            line-height: 1;
            opacity: 0.95;
        }

        .nav-ai-link { display: none !important; /* AI só no Terminal */

            color: #9aa3ad !important;
        }

        .nav-ai-link:hover {
            color: var(--gold) !important;
        }

        @media (max-width: 380px) {
            .nav-mp-label {
                display: none;
            }

            .nav-mp {
                padding: 8px 10px;
            }
        }

        .nav-burger {
            display: none;
            flex-direction: column;
            gap: 5px;
            background: none;
            border: none;
            padding: 8px;
            cursor: pointer;
        }

        .nav-burger span {
            display: block;
            width: 20px;
            height: 2px;
            background: #ccc;
        }

        /* Mobile: menu sempre visível em linha (scroll horizontal) — sem depender do hambúrguer */
        @media (max-width: 860px) {
            .nav-burger {
                display: none !important;
            }

            .site-header {
                flex-wrap: wrap;
                align-items: center;
                gap: 8px 12px;
                padding-bottom: 8px;
            }

            .site-nav {
                display: flex !important;
                position: static !important;
                width: 100%;
                flex-direction: row !important;
                flex-wrap: nowrap;
                align-items: center;
                gap: 6px;
                padding: 0;
                overflow-x: auto;
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                border: none;
                background: transparent;
            }
            .site-nav::-webkit-scrollbar { display: none; }

            .site-nav a {
                flex: 0 0 auto;
                white-space: nowrap;
                font-size: 0.72rem;
                padding: 7px 12px;
                border-radius: 999px;
                border: 1px solid rgba(255,255,255,0.08);
                background: rgba(255,255,255,0.03);
                color: #b8c0c8;
            }
            .site-nav a:hover,
            .site-nav a:focus {
                color: #fff;
                border-color: rgba(212,175,55,0.35);
                background: rgba(212,175,55,0.08);
            }
            .site-nav .fx-nav-btn {
                flex: 0 0 auto;
                width: 36px !important;
                height: 36px !important;
                min-width: 36px !important;
                border-radius: 50% !important;
                padding: 0 !important;
            }
            .site-nav .fx-nav-btn span {
                display: none !important;
            }
        }

        .hero-platform {
            padding: 56px 5% 40px;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .hero-brand {
            font-family: Orbitron, sans-serif;
            font-size: 0.7rem;
            letter-spacing: 3px;
            color: var(--gold);
            margin: 0 0 12px;
            opacity: 0.9;
        }

        .hero-platform h1 {
            font-size: clamp(1.75rem, 4.5vw, 2.6rem);
            margin: 0 0 14px;
            line-height: 1.15;
        }

        .hero-platform h1 span {
            color: #e8e4d8;
            font-weight: 600;
        }

        .journey-section {
            padding: 40px 5% 56px;
            max-width: 1100px;
            margin: 0 auto;
        }

        .journey-intro {
            text-align: center;
            margin-bottom: 24px;
        }

        .journey-intro h2 {
            font-family: Orbitron, sans-serif;
            font-size: 1.15rem;
            color: #fff;
            margin: 8px 0 6px;
            letter-spacing: 1px;
        }

        .journey-intro p {
            color: #7a808a;
            font-size: 0.88rem;
            margin: 0;
        }

        .journey-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 12px;
        }

        .journey-grid-4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
        }

        @media (max-width: 900px) {
            .journey-grid-4 {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 480px) {
            .journey-grid-4 {
                grid-template-columns: 1fr;
            }
        }

        .journey-card {
            text-align: left;
            padding: 14px 14px 12px;
            border-radius: 10px;
            border: 1px solid rgba(255, 255, 255, 0.07);
            background: rgba(255, 255, 255, 0.02);
            color: #ccc;
            cursor: pointer;
            transition: border-color 0.2s, background 0.2s, transform 0.15s;
            font-family: Inter, system-ui, sans-serif;
        }

        .journey-card:hover {
            border-color: rgba(212, 175, 55, 0.3);
            background: rgba(212, 175, 55, 0.05);
            transform: translateY(-1px);
        }

        .jc-ico {
            display: block;
            font-size: 1.1rem;
            margin-bottom: 6px;
        }

        .jc-title {
            display: block;
            font-size: 0.82rem;
            font-weight: 600;
            color: #e8e4d8;
        }

        .jc-desc {
            display: block;
            font-size: 0.68rem;
            color: #6b7280;
            margin-top: 3px;
        }

        .home-slots {
            padding: 48px 5%;
            max-width: 1100px;
            margin: 0 auto;
            border-top: 1px solid rgba(255, 255, 255, 0.04);
        }

        .slots-intro {
            text-align: center;
            margin-bottom: 28px;
        }

        .slots-intro h2 {
            font-family: Orbitron, sans-serif;
            font-size: 1.1rem;
            color: #ddd;
            margin: 8px 0 6px;
        }

        .slots-intro p {
            color: #666;
            font-size: 0.85rem;
            margin: 0;
        }

        .slots-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 14px;
        }

        .slot-card {
            border: 1px dashed rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 14px;
            background: rgba(255, 255, 255, 0.015);
        }

        .slot-img {
            height: 80px;
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.04);
            margin-bottom: 10px;
        }

        .slot-card h3 {
            font-size: 0.85rem;
            color: #888;
            margin: 0 0 4px;
            font-weight: 600;
        }

        .slot-card p {
            font-size: 0.75rem;
            color: #555;
            margin: 0;
        }

        .slot-date {
            font-size: 0.65rem;
            color: #444;
        }

        .partners-placeholder {
            text-align: center;
            padding: 28px;
            border: 1px dashed rgba(255, 255, 255, 0.08);
            border-radius: 10px;
            color: #555;
            font-size: 0.85rem;
        }



        /* Centro de Recursos — layout premium  */
        .resources-section {
            padding: 72px 5% 80px !important;
            background: var(--bg, #000) !important;
            border-top: 1px solid rgba(212, 175, 55, 0.12) !important;
            text-align: center;
        }

        .resources-section .slots-intro,
        .resources-section .section-tag {
            text-align: center;
        }

        .resources-section h2 {
            font-family: Orbitron, sans-serif !important;
            font-size: clamp(1.15rem, 3vw, 1.6rem) !important;
            letter-spacing: 0.12em !important;
            color: #fff !important;
            margin: 8px 0 12px !important;
        }

        .resources-section .slots-intro p,
        .resources-section>.slots-intro+p,
        .resources-section p {
            color: #7a808a;
            max-width: 560px;
            margin-left: auto;
            margin-right: auto;
        }

        .resources-controls {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 18px;
            margin: 28px auto 40px;
            width: 100%;
            max-width: 920px;
        }

        .resources-section .tabs-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            padding: 10px 14px;
            background: rgba(10, 10, 10, 0.9);
            border-radius: 4px;
            border: 1px solid rgba(212, 175, 55, 0.14);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
        }

        .resources-section .tab-btn {
            background: transparent;
            border: none;
            color: #888;
            padding: 10px 20px;
            font-size: 0.82rem;
            font-weight: 500;
            border-radius: 3px;
            cursor: pointer;
            transition: 0.25s;
            font-family: Inter, system-ui, sans-serif;
        }

        .resources-section .tab-btn.active,
        .resources-section .tab-btn:hover {
            background: #111;
            color: #fff;
            box-shadow: 0 4px 16px rgba(212, 175, 55, 0.12);
        }

        .resources-section .res-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            max-width: 1100px;
            margin: 0 auto;
            text-align: left;
        }

        .resources-section .resource-card,
        .resources-section .res-card {
            background: linear-gradient(145deg, #0a0a0a 0%, #111 100%);
            border: 1px solid rgba(212, 175, 55, 0.14);
            border-radius: 2px;
            padding: 22px 20px;
            transition: 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.2);
            text-align: left;
        }

        .resources-section .resource-card:hover,
        .resources-section .res-card:hover {
            border-color: rgba(212, 175, 55, 0.4);
            transform: translateY(-4px);
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(212, 175, 55, 0.08);
        }

        .resources-section .resource-category {
            color: var(--gold);
            font-size: 0.72rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            margin-bottom: 10px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .resources-section .resource-card h3,
        .resources-section .res-card h3 {
            font-family: Orbitron, sans-serif;
            font-size: 0.85rem;
            letter-spacing: 1px;
            color: var(--gold);
            margin: 0 0 10px;
        }

        .resources-section .resource-card p,
        .resources-section .res-card p {
            color: #888;
            font-size: 0.82rem;
            line-height: 1.5;
            margin: 0 0 14px;
        }

        .resources-section .resource-link {
            color: var(--gold);
            font-size: 0.8rem;
            text-decoration: none;
            border-bottom: 1px solid rgba(212, 175, 55, 0.35);
        }

        .resources-section .resource-link:hover {
            border-color: var(--gold);
        }

        /* Meu Plano — visual alinhado a "Guias e links úteis" */
        #modalTerminal.modal,
        #modalTerminal.modal.active {
            z-index: 10150 !important;
        }

        .mp-overlay {
            position: fixed;
            inset: 0;
            z-index: 10080;
            background: rgba(5, 6, 8, 0.78);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease;
        }

        .mp-overlay.is-open {
            opacity: 1;
            pointer-events: auto;
        }

        .mp-overlay[hidden] {
            display: none !important;
        }

        .mp-drawer {
            width: min(920px, 90vw);
            max-height: min(90dvh, 860px);
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background:
                radial-gradient(ellipse 90% 40% at 50% 0%, rgba(212, 175, 55, 0.07), transparent 55%),
                linear-gradient(180deg, #0c0e12 0%, #080a0e 100%);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 18px;
            box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
            transform: translateY(12px) scale(0.97);
            transition: transform 0.25s ease, opacity 0.25s ease;
            outline: none;
            text-align: left;
            overscroll-behavior: contain;
        }

        .mp-overlay.is-open .mp-drawer {
            transform: translateY(0) scale(1);
        }

        @media (min-width: 900px) {
            .mp-drawer {
                width: min(960px, 88vw);
                max-height: min(88dvh, 900px);
            }
        }

        @media (max-width: 640px) {
            .mp-overlay {
                padding: 0;
                align-items: stretch;
            }

            .mp-drawer {
                width: 100%;
                max-width: 100%;
                max-height: 100%;
                height: 100%;
                min-height: 100dvh;
                border-radius: 0;
                border: none;
            }
        }

        /* PWA standalone: respeitar safe areas */
        @media (display-mode: standalone) {
            .mp-overlay {
                padding-top: max(16px, env(safe-area-inset-top));
                padding-bottom: max(16px, env(safe-area-inset-bottom));
            }
        }

        .mp-drawer-head {
            padding: 16px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
            position: relative;
            background: transparent;
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            text-align: left;
        }

        .mp-drawer-head>div:first-child {
            flex: 1 1 auto;
            min-width: 0;
            max-width: none;
            margin: 0;
            text-align: left;
        }

        .mp-drawer-head .section-tag {
            display: block;
            margin-bottom: 0;
        }

        .mp-drawer-head h2 {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(1.05rem, 2.5vw, 1.35rem);
            font-weight: 700;
            letter-spacing: 0.4px;
            color: #fff;
            line-height: 1.3;
            margin: 6px 0 0;
            max-width: none;
        }

        .mp-drawer-head h2 .mp-gold {
            color: var(--gold);
            font-weight: 700;
        }

        .mp-sub {
            max-width: none;
            margin: 6px 0 0;
            color: #8b939f;
            line-height: 1.45;
            font-size: 0.78rem;
            font-weight: 400;
            padding-right: 4px;
        }

        .mp-head-actions {
            position: static;
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            z-index: 2;
        }

        .mp-mask-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 12px;
            border-radius: 9px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            background: rgba(255, 255, 255, 0.025);
            color: #9aa0a8;
            font-size: 0.72rem;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
            transition: 0.2s ease;
            min-height: 40px;
        }

        .mp-mask-btn:hover,
        .mp-mask-btn[aria-pressed="true"] {
            color: var(--gold);
            border-color: rgba(212, 175, 55, 0.3);
            background: rgba(212, 175, 55, 0.06);
        }

        /* labels do mask: sempre visíveis (ver #mp-mask-fix-v10) */
        .mp-mask-btn span {
            display: inline;
        }

        .mp-close {
            width: 40px;
            height: 40px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 9px;
            background: rgba(255, 255, 255, 0.025);
            color: #9aa0a8;
            font-size: 1.25rem;
            cursor: pointer;
            line-height: 1;
            transition: 0.2s ease;
        }

        .mp-close:hover {
            color: #fff;
            border-color: rgba(255, 255, 255, 0.15);
        }

        .mp-drawer-body {
            padding: 14px 16px 20px;
            text-align: left;
        }

        @media (min-width: 480px) {
            .mp-drawer-body {
                padding: 16px 20px 24px;
            }
        }

        .mp-empty {
            max-width: 440px;
            margin: 0 auto 24px;
            padding: 0;
            border: none;
            background: none;
            text-align: center;
            font-size: 0.92rem;
            color: #8b939f;
            line-height: 1.65;
        }

        .mp-empty strong {
            color: var(--gold);
            font-weight: 600;
        }

        /* Cards no estilo resource-card */
        .mp-summary {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            margin: 8px 0 24px;
            max-width: 560px;
            margin-left: auto;
            margin-right: auto;
        }

        @media (min-width: 640px) {
            .mp-summary {
                grid-template-columns: repeat(4, minmax(0, 1fr));
                max-width: none;
            }
        }

        .mp-kpi {
            position: relative;
            background: rgba(14, 16, 22, 0.85);
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 10px;
            padding: 12px 12px 10px;
            display: flex;
            flex-direction: column;
            min-height: 100px;
            transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
            overflow: hidden;
            text-align: left;
        }

        .mp-kpi::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.45), transparent);
            opacity: 0;
            transition: opacity 0.25s ease;
        }

        .mp-kpi:hover {
            border-color: rgba(212, 175, 55, 0.28);
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
        }

        .mp-kpi:hover::before {
            opacity: 1;
        }

        .mp-kpi.is-accent {
            border-color: rgba(212, 175, 55, 0.18);
            background: rgba(14, 16, 22, 0.95);
        }

        .mp-kpi.is-accent::before {
            opacity: 0.55;
        }

        .mp-kpi-label {
            display: block;
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: #7a828c;
            margin-bottom: 10px;
            font-weight: 500;
        }

        .mp-kpi-value {
            font-family: 'JetBrains Mono', ui-monospace, monospace;
            font-size: 0.95rem;
            font-weight: 600;
            color: #e8e4d8;
            letter-spacing: -0.02em;
            margin-top: auto;
        }

        .mp-kpi.is-accent .mp-kpi-value {
            color: var(--gold);
        }

        .mp-next {
            max-width: 560px;
            margin: 0 auto 20px;
            padding: 18px 20px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.07);
            background: rgba(14, 16, 22, 0.85);
            text-align: left;
        }

        .mp-next p {
            margin: 0 0 12px;
            color: #b0b6c0;
            font-size: 0.88rem;
            line-height: 1.5;
        }

        .mp-next button {
            padding: 10px 16px;
            border-radius: 9px;
            border: 1px solid rgba(212, 175, 55, 0.35);
            background: rgba(212, 175, 55, 0.08);
            color: var(--gold);
            font-size: 0.78rem;
            font-weight: 600;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
        }

        .mp-actions-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: stretch;
            margin: 6px 0 4px;
        }

        .mp-actions-row .mp-btn-primary {
            flex: 1 1 100%;
        }

        .mp-actions-row .mp-btn-secondary,
        .mp-actions-row .mp-btn-ghost {
            flex: 1 1 auto;
            min-width: 0;
        }

        .mp-btn-primary {
            padding: 11px 16px;
            border-radius: 9px;
            border: none;
            background: var(--gold);
            color: #0a0a0a;
            font-weight: 600;
            font-size: 0.85rem;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
            min-height: 44px;
            transition: box-shadow 0.2s ease, transform 0.15s ease;
        }

        .mp-btn-primary:hover {
            box-shadow: 0 8px 28px rgba(212, 175, 55, 0.28);
            transform: translateY(-1px);
        }

        .mp-btn-secondary {
            padding: 12px 18px;
            border-radius: 9px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.025);
            color: #9aa0a8;
            font-size: 0.82rem;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
            min-height: 44px;
            transition: 0.2s ease;
        }

        .mp-btn-secondary:hover {
            color: var(--gold);
            border-color: rgba(212, 175, 55, 0.3);
        }

        .mp-btn-ghost {
            padding: 12px 14px;
            border: none;
            background: transparent;
            color: #6b7280;
            font-size: 0.8rem;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
            min-height: 44px;
        }

        .mp-btn-ghost:hover {
            color: var(--gold);
        }

        .plano-form-shell {
            border: 1px solid rgba(255, 255, 255, 0.07) !important;
            background:
                radial-gradient(ellipse 80% 40% at 50% -10%, rgba(212, 175, 55, 0.05), transparent 50%),
                linear-gradient(180deg, #0c0e12 0%, #080a0e 100%) !important;
        }

        .plano-form-shell h3 {
            font-family: Inter, system-ui, sans-serif !important;
            letter-spacing: 0.02em !important;
            color: var(--gold, #D4AF37) !important;
            font-size: 0.82rem !important;
        }

        body>.plano-section {
            display: none !important;
        }


        /* Recursos — alinhado ao design da Home */
        .resources-section.home-slots {
            padding: 48px 5%;
            max-width: 1100px;
            margin: 0 auto;
            border-top: 1px solid rgba(255, 255, 255, 0.04);
            background: transparent;
            text-align: center;
        }

        .resources-section .slots-intro {
            text-align: center;
            margin-bottom: 28px;
        }

        .resources-section .slots-intro h2 {
            font-family: Orbitron, sans-serif;
            font-size: 1.15rem;
            color: #e8e4d8;
            margin: 8px 0 6px;
            letter-spacing: 0.6px;
        }

        .resources-section .slots-intro p {
            color: #6b7280;
            font-size: 0.88rem;
            margin: 0 auto;
            max-width: 520px;
        }

        .resources-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .resources-section .search-box {
            flex: 1;
            min-width: 180px;
            max-width: 320px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.03);
            padding: 8px 12px;
        }

        .resources-section .search-box input {
            background: transparent;
            border: none;
            color: #ddd;
            width: 100%;
            outline: none;
            font-size: 0.85rem;
        }

        .resources-section .tabs-container {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .resources-section .tabs-container button,
        .resources-section .tab-btn {
            padding: 7px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: transparent;
            color: #9aa3ad;
            font-size: 0.75rem;
            cursor: pointer;
            font-family: Inter, system-ui, sans-serif;
        }

        .resources-section .tabs-container button.active,
        .resources-section .tab-btn.active {
            border-color: rgba(212, 175, 55, 0.35);
            color: var(--gold);
            background: rgba(212, 175, 55, 0.08);
        }

        .resources-section .res-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 12px;
        }

        .resources-section .res-card,
        .resources-section .resource-card {
            border: 1px solid rgba(255, 255, 255, 0.07);
            border-radius: 10px;
            padding: 14px;
            background: rgba(255, 255, 255, 0.02);
            text-align: left;
            transition: border-color 0.2s, background 0.2s;
        }

        .resources-section .res-card:hover,
        .resources-section .resource-card:hover {
            border-color: rgba(212, 175, 55, 0.25);
            background: rgba(212, 175, 55, 0.04);
        }

        .resources-footnote {
            text-align: center;
            font-size: 0.72rem;
            color: #555;
            margin-top: 20px;
        }


        /* FAB PRÓXIMA AI — só com Terminal aberto */
        #chatbotRoot.chatbot-container,
        #chatbotRoot {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
            opacity: 0 !important;
        }
        body.terminal-open #chatbotRoot,
        #modalTerminal.active ~ #chatbotRoot {
            display: block !important;
            visibility: visible !important;
            pointer-events: auto !important;
            opacity: 1 !important;
            position: fixed !important;
            bottom: 24px !important;
            right: 24px !important;
            z-index: 100250 !important;
        }
        body.terminal-open #chatbotFab,
        #modalTerminal.active ~ #chatbotRoot #chatbotFab {
            display: flex !important;
            width: 56px !important;
            height: 56px !important;
            border-radius: 50% !important;
            background: linear-gradient(135deg, var(--gold, #D4AF37), var(--gold-dark, #b8941f)) !important;
            color: #0a0a0a !important;
            box-shadow: 0 0 16px rgba(212, 175, 55, 0.45), 0 8px 28px rgba(0, 0, 0, 0.55) !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            border: none !important;
        }
        .chatbot-window.is-open {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
        }


/* ========== extracted block ========== */

        body:not(.terminal-open) #chatbotRoot {
            display: none !important;
            visibility: hidden !important;
            pointer-events: none !important;
        }
        body.terminal-open #chatbotRoot {
            display: block !important;
            visibility: visible !important;
            pointer-events: auto !important;
            position: fixed !important;
            bottom: 20px !important;
            right: 20px !important;
            z-index: 100250 !important;
        }
        body.terminal-open #chatbotFab {
            display: flex !important;
            width: 56px !important;
            height: 56px !important;
            border-radius: 50%;
            background: linear-gradient(145deg, #E8C547, var(--gold, #D4AF37) 45%, var(--gold-dark, #b8941f)) !important;
            color: #000 !important;
            align-items: center;
            justify-content: center;
            border: none;
            cursor: pointer;
            box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25), 0 8px 28px rgba(0, 0, 0, 0.55);
        }
        body.terminal-open #mfpWindow.is-open {
            display: flex !important;
            flex-direction: column !important;
        }


/* ========== extracted block ========== */

        /* Tipografia — Ferramentas, Recursos, Jornada (compacta) */
        .tool-card h3,
        .tools-grid .tool-card h3,
        #ferramentas h3,
        .lab-card h3 {
            font-size: 0.82rem !important;
            letter-spacing: 0.01em;
            line-height: 1.25 !important;
        }

        .tool-card p,
        .tools-grid .tool-card p,
        .lab-card p {
            font-size: 0.72rem !important;
            line-height: 1.35 !important;
        }

        .tool-card i,
        .lab-card i {
            font-size: 0.85rem !important;
        }

        .resource-card h3,
        .resources-section .resource-card h3,
        .resources-section .res-card h3 {
            font-size: 0.72rem !important;
            line-height: 1.25 !important;
        }

        .resource-card>p,
        .resources-section .resource-card p,
        .resources-section .res-card p {
            font-size: 0.62rem !important;
            line-height: 1.3 !important;
        }

        .resource-card .resource-level,
        .resource-card .badge-interno {
            font-size: 0.72rem !important;
        }

        .journey-intro h2,
        #jornada h2,
        .journey-section h2 {
            font-size: 1.45rem !important;
            line-height: 1.3 !important;
        }

        .journey-intro p,
        .journey-section p,
        #jornada p {
            font-size: 1rem !important;
            line-height: 1.55 !important;
        }

        .journey-step h3,
        .journey-card h3,
        .step-card h3 {
            font-size: 1.05rem !important;
        }

        .journey-step p,
        .journey-card p,
        .step-card p {
            font-size: 0.95rem !important;
        }

        .section-title,
        .section-head h2,
        main section>h2 {
            font-size: clamp(1.35rem, 2.5vw, 1.65rem) !important;
        }

        .tab-btn {
            font-size: 0.88rem !important;
        }

        @media (max-width: 768px) {

            .tool-card h3,
            .lab-card h3 {
                font-size: 0.7rem !important;
            }

            .tool-card p,
            .lab-card p {
                font-size: 0.62rem !important;
            }

            .resource-card h3 {
                font-size: 0.72rem !important;
            }

            .journey-intro h2 {
                font-size: 1.15rem !important;
            }
        }


/* ========== extracted block ========== */

        .tool-card, .lab-card, .journey-card {
            transition: transform 0.22s cubic-bezier(0.16,1,0.3,1), border-color 0.22s, box-shadow 0.22s;
            border: 1px solid rgba(255,255,255,0.08);
        }
        .tool-card:hover, .lab-card:hover, .journey-card:hover {
            transform: translateY(-3px);
            border-color: rgba(212,175,55,0.35);
            box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,175,55,0.12);
        }
        .term-ai-btn {
            color: #0a0a0a !important;
            background: linear-gradient(135deg, #E8C547, var(--gold, #D4AF37)) !important;
            border: none !important;
            border-radius: 6px !important;
            padding: 4px 10px !important;
            font-weight: 700 !important;
        }
        #resValue, .stat-box b { font-variant-numeric: tabular-nums; }
        @media (max-width: 768px) {
            body.terminal-open .modal-body { padding-bottom: 72px; }
        }


/* ========== extracted block ========== */

      /* Garante: zero FAB na home */
      body:not(.terminal-open) #chatbotRoot,
      body:not(.terminal-open) #chatbotFab,
      body:not(.terminal-open) #mfpWindow {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        clip: rect(0,0,0,0) !important;
      }


/* ========== extracted block ========== */

      /* ===== Recursos: centralizar título e lead ===== */
      #recursos.resources-section,
      #recursos.resources-section.home-slots {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 64px 5% 72px !important;
        text-align: center !important;
        display: block !important;
      }
      #recursos .slots-intro,
      #recursos .resources-intro {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 720px !important;
        margin: 0 auto 32px !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
      }
      #recursos .section-tag {
        display: inline-block !important;
        text-align: center !important;
        margin: 0 auto 10px !important;
      }
      #recursos #recursosHeading,
      #recursos .slots-intro h2 {
        text-align: center !important;
        width: 100% !important;
        margin: 0 0 12px !important;
        font-family: Inter, system-ui, sans-serif !important;
        font-size: clamp(1.35rem, 3.2vw, 1.75rem) !important;
        font-weight: 700 !important;
        letter-spacing: -0.02em !important;
        color: #f0ece3 !important;
      }
      #recursos .resources-lead,
      #recursos .slots-intro p {
        text-align: center !important;
        margin: 0 auto !important;
        max-width: 36rem !important;
        color: #9aa3ad !important;
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
      }
      #recursos .resources-controls {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 920px !important;
        margin: 0 auto 28px !important;
      }
      #recursos .tabs-container {
        justify-content: center !important;
      }
      #recursos .search-box {
        width: min(100%, 360px) !important;
        margin: 0 auto !important;
      }
      #recursos .res-grid {
        max-width: 1100px !important;
        margin: 0 auto !important;
      }
      #recursos .resources-footnote {
        text-align: center !important;
        margin: 24px auto 0 !important;
        max-width: 36rem !important;
      }

      /* ===== Design system polish ===== */
      body {
        font-size: 16px;
        line-height: 1.5;
        color: #e6e8ec;
      }
      .tool-card, .lab-card, .journey-card, .resource-card, .res-card {
        min-height: 0;
        border-radius: 10px !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        background: linear-gradient(165deg, #12141a, #0a0b0e) !important;
        transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
      }
      .tool-card:hover, .lab-card:hover, .journey-card:hover,
      .resource-card:hover, .res-card:hover {
        transform: translateY(-3px);
        border-color: rgba(212,175,55,0.35) !important;
        box-shadow: 0 12px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,175,55,0.1);
      }
      .tool-card:focus-visible, .journey-card:focus-visible, button:focus-visible, a:focus-visible {
        outline: 2px solid var(--gold, #D4AF37);
        outline-offset: 3px;
      }
      .tool-card i {
        color: var(--gold, #D4AF37);
        font-size: 1.35rem;
        margin-bottom: 10px;
      }
      .tool-card h3 {
        font-size: 1.05rem !important;
        color: #f2f0ea !important;
        font-family: Inter, system-ui, sans-serif !important;
      }
      .tool-card p {
        font-size: 0.88rem !important;
        color: #9aa3ad !important;
        line-height: 1.45 !important;
      }
      /* Ouro só em CTA / destaques */
      .section-tag {
        color: #c9a84c !important;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        font-size: 0.72rem !important;
        font-weight: 600;
      }
      /* Tipografia legível */
      .hero-lead, .tools-intro-text, .slots-intro p {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        color: #a8b0ba !important;
      }
      #resValue {
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
      }
      .stat-box b { font-variant-numeric: tabular-nums; }
      /* Contraste texto secundário */
      .text-dim, .res-unit-hint, .modal-edu-note {
        color: #8b939e !important;
      }
      /* Touch targets */
      .term-link, .header-icon-btn, .tab-btn {
        min-height: 40px;
        min-width: 40px;
      }
      /* Reduced motion */
      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          transition-duration: 0.01ms !important;
        }
      }
      /* Terminal mobile: mais respiro */
      @media (max-width: 768px) {
        #modalTerminal .modal-body {
          gap: 12px;
        }
        .tool-card {
          padding: 16px !important;
        }
        body.terminal-open .modal-body {
          padding-bottom: 80px;
        }
      }
      /* Safe areas */
      .top-ticker {
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
      }
      body {
        padding-bottom: env(safe-area-inset-bottom, 0);
      }


/* ========== extracted block ========== */

      .mp-summary {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 10px !important;
      }
      .mp-kpi-sub {
        display: block;
        font-size: 0.72rem;
        color: #9aa3ad;
        margin-top: 4px;
        font-weight: 500;
      }
      .mp-folga-warn {
        margin: 10px 0 0;
        padding: 10px 12px;
        border-radius: 8px;
        background: rgba(255, 179, 0, 0.1);
        border: 1px solid rgba(255, 179, 0, 0.35);
        color: #e8c56a;
        font-size: 0.82rem;
        line-height: 1.45;
      }
      .mp-folga-warn[hidden] { display: none !important; }


/* ========== extracted block ========== */

      /* Hero mobile: texto completo, sem corte */
      .hero,
      .hero-platform {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        padding-left: max(16px, 5%) !important;
        padding-right: max(16px, 5%) !important;
      }
      .hero-brand {
        font-size: 0.65rem !important;
        letter-spacing: 0.12em !important;
        white-space: normal !important;
        overflow: visible !important;
        word-break: break-word !important;
        max-width: 100% !important;
        line-height: 1.4 !important;
      }
      .hero h1,
      .hero-platform h1 {
        font-size: clamp(1.25rem, 6.5vw, 2rem) !important;
        line-height: 1.25 !important;
        letter-spacing: -0.01em !important;
        white-space: normal !important;
        overflow: visible !important;
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        max-width: 100% !important;
        hyphens: manual;
        padding: 0 2px !important;
        box-sizing: border-box !important;
      }
      .hero h1 span,
      .hero-platform h1 span {
        display: inline !important;
        white-space: normal !important;
      }
      .hero-lead {
        max-width: 100% !important;
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        overflow: visible !important;
        padding: 0 2px !important;
      }
      @media (max-width: 480px) {
        .hero,
        .hero-platform {
          padding-top: 28px !important;
          padding-bottom: 28px !important;
        }
        .hero h1,
        .hero-platform h1 {
          font-size: clamp(1.2rem, 7vw, 1.55rem) !important;
          line-height: 1.3 !important;
        }
        .hero-brand {
          font-size: 0.62rem !important;
          letter-spacing: 0.1em !important;
        }
        /* sobrescreve regras antigas que forçavam 2rem+ no mobile */
        .hero h1 {
          font-size: clamp(1.2rem, 7vw, 1.55rem) !important;
        }
      }
      @media (max-width: 360px) {
        .hero h1,
        .hero-platform h1 {
          font-size: 1.15rem !important;
        }
      }


/* ========== extracted block ========== */

      /* ===== Terminal calculadoras: preto-fumo + contraste ===== */
      #modalTerminal.modal {
        background: rgba(0, 0, 0, 0.92) !important;
      }
      #modalTerminal .modal-content {
        background: linear-gradient(180deg, #0e0f12 0%, #08090b 55%, #050607 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.07) !important;
        box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75) !important;
        color: #e8eaed !important;
      }
      #modalTerminal .modal-header {
        background: #0a0b0e !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        backdrop-filter: none !important;
      }
      #modalTerminal .modal-header-kicker {
        color: #8b939e !important;
        opacity: 1 !important;
      }
      #modalTerminal .modal-header-title {
        color: #e8c547 !important;
        border-left-color: rgba(255, 255, 255, 0.15) !important;
      }
      #modalTerminal .modal-body {
        background: #08090b !important;
      }
      #modalTerminal .control-panel {
        background: #0c0d10 !important;
        border-color: rgba(255, 255, 255, 0.06) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
      }
      #modalTerminal .results-container {
        background: #090a0d !important;
        border: 1px solid rgba(255, 255, 255, 0.06) !important;
      }
      /* Inputs escuros, borda discreta (sem amarelo forte) */
      #modalTerminal .dual-input input[type="number"],
      #modalTerminal input[type="number"],
      #modalTerminal input[type="text"],
      #modalTerminal select {
        background: #12141a !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        box-shadow: none !important;
        color: #f0f2f5 !important;
        border-radius: 6px !important;
      }
      #modalTerminal .dual-input input[type="number"]:focus,
      #modalTerminal input[type="number"]:focus {
        border-color: rgba(212, 175, 55, 0.45) !important;
        outline: none !important;
        background: #16181f !important;
      }
      #modalTerminal .input-label {
        color: #9aa3ad !important;
      }
      #modalTerminal .input-label b {
        color: var(--gold, #D4AF37) !important;
      }
      #modalTerminal input[type="range"] {
        background: rgba(255, 255, 255, 0.12) !important;
      }
      /* Bloco resultado principal — quase preto, ouro só no detalhe */
      #modalTerminal .res-display {
        background: linear-gradient(165deg, #12141a 0%, #0a0b0e 100%) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
      }
      #modalTerminal .res-display small,
      #modalTerminal .res-display #resLabel {
        color: #c9a84c !important;
      }
      #modalTerminal .res-display h2,
      #modalTerminal .res-display #resValue {
        color: #ffffff !important;
      }
      #modalTerminal .res-display .res-unit-hint {
        color: #8b939e !important;
      }
      /* Triple + stats */
      #modalTerminal .res-triple-item {
        background: #101218 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
      }
      #modalTerminal .res-triple-item span {
        color: #8b939e !important;
      }
      #modalTerminal .res-triple-item b {
        color: #eef0f3 !important;
      }
      #modalTerminal .res-triple-item b.is-real {
        color: #6eb6ff !important;
      }
      #modalTerminal .res-triple-item b.is-liq {
        color: #7dcea0 !important;
      }
      #modalTerminal .stat-box {
        background: #101218 !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
      }
      #modalTerminal .stat-box:hover {
        background: #14161c !important;
        border-color: rgba(212, 175, 55, 0.25) !important;
      }
      #modalTerminal .stat-box span {
        color: #8b939e !important;
      }
      #modalTerminal .stat-box b {
        color: #e8c547 !important;
      }
      #modalTerminal .stat-box b.is-real {
        color: #6eb6ff !important;
      }
      #modalTerminal .stat-box .stat-unit {
        color: #6b7280 !important;
      }
      /* Notas educativas — menos amarelo */
      #modalTerminal .modal-edu-note {
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
        color: #9aa3ad !important;
      }
      #modalTerminal .modal-edu-note strong {
        color: #c9a84c !important;
      }
      #modalTerminal .projection-limits,
      #modalTerminal .res-premises {
        background: rgba(0, 0, 0, 0.35) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
        color: #8b939e !important;
      }
      #modalTerminal .chart-wrap {
        background: #0a0b0e !important;
        border: 1px solid rgba(255, 255, 255, 0.08) !important;
      }
      #modalTerminal .share-buttons-container {
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5) 20%) !important;
        border-top-color: rgba(255, 255, 255, 0.08) !important;
      }
      #modalTerminal .term-link {
        background: #14161c !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        color: #c5cad3 !important;
      }
      #modalTerminal .term-link:hover {
        border-color: rgba(212, 175, 55, 0.4) !important;
        color: #e8c547 !important;
      }
      #modalTerminal .term-ai-btn {
        background: linear-gradient(135deg, #c9a84c, #a8892e) !important;
        color: #0a0a0a !important;
        border: none !important;
      }
      #modalTerminal .header-icon-btn {
        color: #9aa3ad !important;
      }
      #modalTerminal .header-icon-btn:hover {
        color: #e8c547 !important;
        background: rgba(255, 255, 255, 0.06) !important;
      }
      /* radios / chips no painel */
      #modalTerminal label,
      #modalTerminal .radio-row label {
        color: #c5cad3 !important;
      }
      @media (max-width: 768px) {
        #modalTerminal .modal-content {
          background: #08090b !important;
        }
        #modalTerminal .control-panel,
        #modalTerminal .results-container {
          background: #0a0b0e !important;
        }
      }


/* ========== extracted block ========== */

      /* ——— Terminal: gráfico + ações sem sobreposição ——— */
      #modalTerminal .chart-wrap {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        padding: 10px !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
        flex-shrink: 0 !important;
      }
      #modalTerminal .chart-caption {
        flex: 0 0 auto;
        padding: 0 2px 2px;
        font-size: 0.65rem;
      }
      #modalTerminal .chart-plot {
        position: relative;
        width: 100%;
        height: 280px;
        min-height: 280px;
        flex: 0 0 auto;
        overflow: hidden;
        z-index: 1;
      }
      #modalTerminal .chart-plot canvas,
      #modalTerminal #mainChart {
        width: 100% !important;
        height: 100% !important;
        min-height: 280px !important;
        display: block !important;
        max-height: none !important;
      }
      #modalTerminal .chart-explain {
        flex: 0 0 auto;
        margin: 0;
        padding: 6px 8px;
        font-size: 0.62rem;
        line-height: 1.35;
        color: #8a929c;
        background: rgba(255,255,255,0.03);
        border: 1px solid rgba(255,255,255,0.06);
        border-radius: 2px;
        max-height: 3.8em;
        overflow: hidden;
        position: relative;
        z-index: 1;
      }
      #modalTerminal .chart-explain[hidden] { display: none !important; }

      /* Ações (cenário + Meu Plano) SEMPRE abaixo do gráfico, no fluxo normal */
      #modalTerminal .share-buttons-container {
        position: relative !important;
        z-index: 1 !important;
        flex-shrink: 0 !important;
        margin-top: 14px !important;
        padding: 12px 8px max(16px, env(safe-area-inset-bottom)) !important;
        border-top: 1px solid rgba(255,255,255,0.08) !important;
        background: rgba(8,9,12,0.95) !important;
        clear: both;
      }
      #modalTerminal .term-scenario-bar {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin: 0 0 10px !important;
        width: 100%;
        box-sizing: border-box;
      }
      #modalTerminal .term-scenario-bar button {
        flex: 1 1 auto;
        min-width: 88px;
        text-align: center;
      }
      #modalTerminal .share-buttons-container .btn-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
      }

      @media (min-width: 901px) {
        #modalTerminal .results-container {
          display: flex !important;
          flex-direction: column !important;
          overflow-x: hidden !important;
          overflow-y: auto !important;
          -webkit-overflow-scrolling: touch;
          min-height: 0 !important;
        }
      }


/* [removed legacy mobile dual-scroll block] */


/* ========== extracted block ========== */

      #modalTerminal .term-scenario-bar {
        gap: 5px !important;
        padding: 6px 8px !important;
        margin: 0 0 8px !important;
        border-radius: 2px !important;
      }
      #modalTerminal .term-scenario-bar span {
        font-size: 0.58rem !important;
        width: 100%;
        margin: 0 0 2px !important;
      }
      #modalTerminal .term-scenario-bar button {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        min-height: 32px !important;
        padding: 4px 8px !important;
        font-size: 0.66rem !important;
        border-radius: 1px !important;
      }
      #modalTerminal .term-export-group {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
      }
      #modalTerminal .term-export-group .btn {
        min-height: 38px !important;
        font-size: 0.7rem !important;
        padding: 6px 8px !important;
        border-radius: 1px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
      }
      @media (min-width: 720px) {
        #modalTerminal .term-export-group {
          grid-template-columns: repeat(3, 1fr) !important;
        }
      }
      @media (max-width: 900px) {
        #modalTerminal .header-actions .term-link {
          display: none !important;
        }
        #modalTerminal .header-icon-chart {
          display: inline-flex !important;
        }
        #modalTerminal .header-icon-btn {
          width: 38px !important;
          height: 38px !important;
          min-width: 38px !important;
          border-radius: 2px !important;
        }
        #modalTerminal .modal-edu-note {
          font-size: 0.62rem !important;
          padding: 8px !important;
          border-radius: 2px !important;
        }
      }
      #modalTerminal.fullscreen .modal-content {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
      }
      .site-header {
        backdrop-filter: blur(12px);
        background: rgba(10, 12, 16, 0.92);
        border-bottom: 1px solid rgba(255,255,255,0.06);
      }
      .nav-mp {
        border-radius: 1px !important;
      }
      @media (max-width: 860px) {
        .site-nav a {
          border-radius: 1px !important;
          padding: 6px 10px !important;
          font-size: 0.7rem !important;
        }
        .site-nav .fx-nav-btn {
          border-radius: 2px !important;
        }
      }
      #modalTerminal .share-buttons-container .btn-group:first-of-type {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-bottom: 10px;
      }
      @media (max-width: 480px) {
        #modalTerminal .share-buttons-container .btn-group:first-of-type {
          grid-template-columns: 1fr;
        }
      }


/* ========== extracted block ========== */

      /* Header 2 linhas no mobile: logo + nav pills → mais padding no body */
      @media (max-width: 860px) {
        :root {
          --header-h: 112px;
        }
        body {
          padding-top: var(--chrome-h) !important;
          scroll-padding-top: calc(var(--chrome-h) + 12px);
        }
        header.site-header {
          top: var(--ticker-h) !important;
          padding: 10px 4% 10px !important;
          min-height: auto !important;
        }
        .hero-platform,
        .hero {
          padding-top: 20px !important;
          margin-top: 0 !important;
        }
        .hero-platform h1,
        .hero h1 {
          font-size: clamp(1.35rem, 6.2vw, 1.85rem) !important;
          line-height: 1.2 !important;
          white-space: normal !important;
          overflow: visible !important;
          word-break: break-word;
        }
        .hero-brand {
          margin-top: 4px !important;
        }
        .hero-lead {
          font-size: 0.88rem !important;
          line-height: 1.45 !important;
          padding: 0 4px;
        }
      }
      @media (max-width: 400px) {
        :root { --header-h: 118px; }
        .hero-platform h1, .hero h1 {
          font-size: clamp(1.2rem, 6.5vw, 1.55rem) !important;
        }
      }

      /* —— Range / sliders refinados (padrão único) —— */
      #modalTerminal input[type="range"],
      .control-panel input[type="range"] {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        height: 28px !important;
        margin: 2px 0 0 !important;
        background: transparent !important;
        cursor: pointer;
        touch-action: pan-y;
      }
      #modalTerminal input[type="range"]::-webkit-slider-runnable-track,
      .control-panel input[type="range"]::-webkit-slider-runnable-track {
        height: 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, rgba(212,175,55,0.35), rgba(255,255,255,0.1)) !important;
        border: none !important;
      }
      #modalTerminal input[type="range"]::-moz-range-track,
      .control-panel input[type="range"]::-moz-range-track {
        height: 4px !important;
        border-radius: 999px !important;
        background: linear-gradient(90deg, rgba(212,175,55,0.35), rgba(255,255,255,0.1)) !important;
        border: none !important;
      }
      #modalTerminal input[type="range"]::-webkit-slider-thumb,
      .control-panel input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 18px !important;
        height: 18px !important;
        margin-top: -7px !important;
        border-radius: 50% !important;
        background: var(--gold, #D4AF37) !important;
        border: 2px solid #0c0e12 !important;
        box-shadow: 0 0 0 3px rgba(212,175,55,0.18), 0 2px 6px rgba(0,0,0,0.4) !important;
        transition: transform 0.15s ease, box-shadow 0.15s ease !important;
      }
      #modalTerminal input[type="range"]::-moz-range-thumb,
      .control-panel input[type="range"]::-moz-range-thumb {
        width: 18px !important;
        height: 18px !important;
        border-radius: 50% !important;
        background: var(--gold, #D4AF37) !important;
        border: 2px solid #0c0e12 !important;
        box-shadow: 0 0 0 3px rgba(212,175,55,0.18) !important;
      }
      #modalTerminal input[type="range"]:active::-webkit-slider-thumb,
      #modalTerminal input[type="range"]:focus::-webkit-slider-thumb {
        transform: scale(1.12);
        box-shadow: 0 0 0 4px rgba(212,175,55,0.28), 0 2px 8px rgba(0,0,0,0.45) !important;
      }
      @media (max-width: 720px) {
        #modalTerminal input[type="range"]::-webkit-slider-thumb,
        .control-panel input[type="range"]::-webkit-slider-thumb {
          width: 22px !important;
          height: 22px !important;
          margin-top: -9px !important;
        }
        #modalTerminal input[type="range"]::-moz-range-thumb {
          width: 22px !important;
          height: 22px !important;
        }
        #modalTerminal input[type="range"],
        .control-panel input[type="range"] {
          height: 32px !important;
        }
      }

      /* Dual input mais limpo */
      #modalTerminal .dual-input {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: #12141a !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 10px !important;
        padding: 0 10px !important;
        min-height: 42px !important;
      }
      #modalTerminal .dual-input span {
        color: #8a929c !important;
        font-size: 0.75rem !important;
        flex-shrink: 0;
      }
      #modalTerminal .dual-input input[type="number"] {
        border: none !important;
        background: transparent !important;
        color: #fff !important;
        font-size: 0.95rem !important;
        width: 100% !important;
        min-height: 40px !important;
        padding: 6px 0 !important;
      }

      /* Transições modais */
      #modalTerminal.modal {
        transition: opacity 0.28s ease, visibility 0.28s ease !important;
      }
      #modalTerminal.modal .modal-content {
        transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease !important;
        transform: translateY(12px) scale(0.985);
        opacity: 0.92;
      }
      #modalTerminal.modal.active .modal-content {
        transform: translateY(0) scale(1);
        opacity: 1;
      }
      @media (prefers-reduced-motion: reduce) {
        #modalTerminal.modal,
        #modalTerminal.modal .modal-content,
        #modalTerminal input[type="range"]::-webkit-slider-thumb {
          transition: none !important;
        }
      }

      /* Ícones e botões: transições suaves */
      .header-icon-btn,
      .term-link,
      .btn,
      .tool-card,
      .journey-card,
      .fx-nav-btn,
      .nav-mp,
      .site-nav a {
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
      }
      .tool-card:active,
      .journey-card:active,
      .btn:active {
        transform: scale(0.98);
      }

      /* Navegação mobile: scroll-snap sem setas */
      @media (max-width: 860px) {
        .btn .fa-arrow-right,
        .btn .fa-chevron-right,
        .btn .fa-chevron-left,
        #btnRelatedCalc .fa-arrow-right {
          display: none !important;
        }
      }

      /* Grid ferramentas responsivo */
      @media (max-width: 600px) {
        .tools-grid,
        .grid-container {
          grid-template-columns: 1fr !important;
          gap: 12px !important;
        }
      }


/* ========== extracted block ========== */

      /* Inputs clean · cantos retos (design original) */
      #modalTerminal .control-panel {
        --field-bg: #0e1014;
        --field-border: rgba(255,255,255,0.08);
        --field-radius: 2px;
      }
      #modalTerminal .input-group {
        margin: 0 0 12px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }
      #modalTerminal .input-group.invalid {
        box-shadow: none !important;
      }
      #modalTerminal .input-label {
        display: flex !important;
        justify-content: space-between !important;
        align-items: baseline !important;
        gap: 8px !important;
        margin-bottom: 5px !important;
        font-size: 0.7rem !important;
        color: #8b939e !important;
        letter-spacing: 0.02em;
      }
      #modalTerminal .input-label b {
        color: #c9a84c !important;
        font-size: 0.78rem !important;
        font-weight: 600 !important;
        font-variant-numeric: tabular-nums;
      }
      #modalTerminal .dual-input {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        background: var(--field-bg) !important;
        border: 1px solid var(--field-border) !important;
        border-radius: var(--field-radius) !important;
        padding: 0 10px !important;
        min-height: 42px !important;
        transition: border-color 0.15s ease !important;
        box-shadow: none !important;
      }
      #modalTerminal .dual-input:focus-within {
        border-color: rgba(212,175,55,0.4) !important;
        box-shadow: none !important;
      }
      #modalTerminal .input-group.invalid .dual-input {
        border-color: rgba(255,107,107,0.5) !important;
      }
      #modalTerminal .dual-input span {
        color: #6b7280 !important;
        font-size: 0.7rem !important;
        flex-shrink: 0 !important;
      }
      #modalTerminal .dual-input input[type="number"],
      #modalTerminal .dual-input input[type="text"] {
        flex: 1 1 auto !important;
        width: 100% !important;
        border: 0 !important;
        background: transparent !important;
        color: #e8eaed !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        min-height: 40px !important;
        padding: 6px 4px 6px 0 !important;
        outline: none !important;
        font-variant-numeric: tabular-nums;
      }
      /* setas controladas pelo design-system (hover/focus) */
      #modalTerminal input[type="range"] {
        -webkit-appearance: none !important;
        appearance: none !important;
        width: 100% !important;
        height: 28px !important;
        margin: 4px 0 0 !important;
        background: transparent !important;
      }
      #modalTerminal input[type="range"]::-webkit-slider-runnable-track {
        height: 2px !important;
        border-radius: 0 !important;
        background: rgba(255,255,255,0.12) !important;
      }
      #modalTerminal input[type="range"]::-moz-range-track {
        height: 2px !important;
        border-radius: 0 !important;
        background: rgba(255,255,255,0.12) !important;
        border: none !important;
      }
      #modalTerminal input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none !important;
        width: 14px !important;
        height: 14px !important;
        margin-top: -6px !important;
        border-radius: 1px !important;
        background: #c9a84c !important;
        border: 1px solid #0a0a0a !important;
        box-shadow: none !important;
      }
      #modalTerminal input[type="range"]::-moz-range-thumb {
        width: 14px !important;
        height: 14px !important;
        border-radius: 1px !important;
        background: #c9a84c !important;
        border: 1px solid #0a0a0a !important;
      }
      #modalTerminal .reset-btn,
      #modalTerminal .luxury-btn {
        border-radius: 1px !important;
        min-height: 40px !important;
        font-size: 0.75rem !important;
      }
      #modalTerminal .scenario-bar button,
      #modalTerminal .term-scenario-bar button {
        border-radius: 1px !important;
        min-height: 32px !important;
        font-size: 0.68rem !important;
      }
      #modalTerminal .btn {
        border-radius: 1px !important;
      }
      #modalTerminal .header-icon-btn {
        border-radius: 2px !important;
      }
      #modalTerminal .chart-wrap,
      #modalTerminal .res-display,
      #modalTerminal .stat-box,
      #modalTerminal .error-msg {
        border-radius: 2px !important;
      }
      #modalTerminal .chart-explain {
        border-radius: 2px !important;
      }
      @media (max-width: 900px) {
        #modalTerminal .control-panel {
          padding: 10px 12px 16px !important;
        }
        #modalTerminal .dual-input {
          min-height: 44px !important;
        }
        #modalTerminal .dual-input input[type="number"] {
          font-size: 0.98rem !important;
        }
        #modalTerminal input[type="range"] {
          height: 32px !important;
        }
        #modalTerminal input[type="range"]::-webkit-slider-thumb {
          width: 16px !important;
          height: 16px !important;
          margin-top: -7px !important;
          border-radius: 1px !important;
        }
      }


/* ========== extracted block ========== */

      #modalTerminal .input-group.invalid .dual-input {
        border-color: rgba(255, 107, 107, 0.5) !important;
      }
      #modalTerminal .error-msg {
        display: block;
        margin-top: 4px;
        font-size: 0.65rem;
        line-height: 1.3;
        color: #ff8a8a;
        border-radius: 0;
      }
      #modalTerminal .error-msg:empty {
        display: none;
      }


/* ========== extracted block ========== */

      /* ===== PRÓXIMAINVEST — tokens únicos (clean · angular) ===== */
      :root {
        --radius: 0;
        --radius-sm: 0;
        --radius-none: 0;
        --border-subtle: rgba(255,255,255,0.08);
        --border-gold: rgba(212,175,55,0.28);
        --bg-elevated: #0e1014;
        --bg-panel: #0a0c10;
        --text-muted: #8b939e;
        --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
      }

      /* Unifica cantos em UI principal (exceto avatares/dots 50%) */
      .tool-card,
      .journey-card,
      .res-display,
      .stat-box,
      .chart-wrap,
      .chart-explain,
      .modal-edu-note,
      .projection-limits,
      .dual-input,
      .btn,
      .luxury-btn,
      .reset-btn,
      .term-link,
      .header-icon-btn,
      .term-scenario-bar,
      .term-scenario-bar button,
      .scenario-bar button,
      .share-buttons-container .btn,
      .nav-mp,
      .site-nav a,
      .cta-primary,
      .cta-secondary,
      .resources-section .res-card,
      .resource-card,
      .onboard-card,
      .onboard-btn,
      .mp-drawer,
      .fx-panel,
      .insights-box,
      .evo-table-wrap,
      input[type="email"],
      input[type="text"],
      input[type="number"],
      select,
      textarea {
        border-radius: var(--radius) !important;
      }
      .fx-nav-btn,
      .fx-fab,
      .nav-mp-dot {
        border-radius: var(--radius) !important;
      }
      /* Setas number: ocultas por padrão, só no hover/focus (desktop) */
      #modalTerminal .dual-input input[type="number"] {
        -moz-appearance: textfield;
      }
      #modalTerminal .dual-input input[type="number"]::-webkit-inner-spin-button,
      #modalTerminal .dual-input input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
        opacity: 0;
        pointer-events: none;
        width: 0;
        height: 0;
      }
      #modalTerminal .dual-input:hover input[type="number"],
      #modalTerminal .dual-input:focus-within input[type="number"] {
        -moz-appearance: number-input;
      }
      #modalTerminal .dual-input:hover input[type="number"]::-webkit-inner-spin-button,
      #modalTerminal .dual-input:hover input[type="number"]::-webkit-outer-spin-button,
      #modalTerminal .dual-input:focus-within input[type="number"]::-webkit-inner-spin-button,
      #modalTerminal .dual-input:focus-within input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: auto !important;
        opacity: 0.9 !important;
        pointer-events: auto !important;
        width: auto !important;
        height: 22px !important;
        margin: 0 2px !important;
        cursor: pointer;
      }
      /* Mobile: setas ao focar o campo */
      @media (hover: none) {
        #modalTerminal .dual-input:focus-within input[type="number"]::-webkit-inner-spin-button,
        #modalTerminal .dual-input:focus-within input[type="number"]::-webkit-outer-spin-button {
          -webkit-appearance: auto !important;
          opacity: 0.9 !important;
          pointer-events: auto !important;
          width: auto !important;
          height: 24px !important;
        }
      }
      #modalTerminal .dual-input {
        padding-right: 4px !important;
      }

      /* Range: thumb angular fino */
      #modalTerminal input[type="range"]::-webkit-slider-thumb {
        border-radius: var(--radius-sm) !important;
        width: 14px !important;
        height: 14px !important;
        box-shadow: none !important;
      }
      #modalTerminal input[type="range"]::-moz-range-thumb {
        border-radius: var(--radius-sm) !important;
      }

      /* Modal transitions */
      #modalTerminal.modal {
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.28s var(--ease-out), visibility 0.28s var(--ease-out) !important;
      }
      #modalTerminal.modal.active {
        opacity: 1;
        visibility: visible;
      }
      #modalTerminal.modal .modal-content {
        transform: translateY(16px);
        opacity: 0.96;
        transition: transform 0.34s var(--ease-out), opacity 0.28s ease !important;
      }
      #modalTerminal.modal.active .modal-content {
        transform: translateY(0);
        opacity: 1;
      }
      @media (prefers-reduced-motion: reduce) {
        #modalTerminal.modal,
        #modalTerminal.modal .modal-content {
          transition: none !important;
        }
      }

      /* Jornada compacta no mobile */
      .journey-section {
        padding: 28px 5% 36px !important;
      }
      .journey-intro h2 {
        font-size: clamp(1.15rem, 3.5vw, 1.55rem) !important;
        margin: 8px 0 6px !important;
        line-height: 1.25 !important;
      }
      .journey-intro p {
        font-size: 0.85rem !important;
        max-width: 420px;
        margin: 0 auto 14px !important;
        color: var(--text-muted);
      }
      .journey-card {
        padding: 12px 12px 10px !important;
        border-radius: var(--radius) !important;
      }
      .journey-card .jc-ico {
        font-size: 1.1rem !important;
      }
      .journey-card .jc-title {
        font-size: 0.88rem !important;
      }
      .journey-card .jc-desc {
        font-size: 0.72rem !important;
        opacity: 0.75;
      }
      @media (max-width: 860px) {
        .journey-section {
          padding: 20px 4% 28px !important;
        }
        .journey-intro h2 {
          font-size: 1.2rem !important;
        }
        .journey-grid,
        .journey-grid-4 {
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          gap: 8px !important;
          overflow: visible !important;
          flex-wrap: unset !important;
        }
        .journey-card {
          flex: unset !important;
          min-width: 0 !important;
          padding: 10px 10px 8px !important;
        }
        .journey-card .jc-desc {
          display: none; /* mobile: só título + ícone — mais clean */
        }
      }
      @media (max-width: 380px) {
        .journey-grid-4 {
          grid-template-columns: 1fr 1fr !important;
        }
      }

      /* Hint de validação (não erro) */
      #modalTerminal .input-group.is-hint .error-msg {
        color: #a89b6a;
      }
      #modalTerminal .input-group.is-hint .dual-input {
        border-color: rgba(212,175,55,0.25) !important;
      }
      #modalTerminal .error-msg {
        color: #d4a0a0;
        font-size: 0.64rem;
      }

      /* Footer / resources alinhados */
      .resources-section,
      footer {
        border-top: 1px solid var(--border-subtle);
      }
      footer a,
      .footer-col a {
        border-radius: 0 !important;
      }

      /* Tool cards padrão */
      .tool-card {
        border-radius: var(--radius) !important;
        border: 1px solid var(--border-subtle);
        background: rgba(255,255,255,0.02);
        transition: border-color 0.2s ease, background 0.2s ease !important;
      }
      .tool-card:hover {
        border-color: var(--border-gold);
        background: rgba(212,175,55,0.04);
      }


/* ========== extracted block ========== */

      .mp-overlay {
        background: rgba(0, 0, 0, 0.72) !important;
      }
      .mp-drawer {
        border-radius: 2px !important;
        border: 1px solid rgba(255,255,255,0.08) !important;
        background: linear-gradient(180deg, #0c0e12 0%, #080a0e 100%) !important;
        box-shadow: 0 20px 50px rgba(0,0,0,0.55) !important;
      }
      @media (max-width: 640px) {
        .mp-drawer {
          border-radius: 0 !important;
        }
      }
      .mp-drawer-head {
        text-align: left !important;
        padding: 14px 16px !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
      }
      .mp-drawer-head h2 {
        font-size: 1.05rem !important;
        margin: 4px 0 0 !important;
        font-family: Orbitron, sans-serif !important;
        letter-spacing: 0.5px;
      }
      .mp-drawer-head .section-tag {
        font-size: 0.58rem !important;
        letter-spacing: 1.5px;
        color: #8b939e !important;
      }
      .mp-close,
      .mp-mask-btn {
        border-radius: 2px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        background: #12151c !important;
        color: #c5cad3 !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
      }
      .mp-close:hover,
      .mp-mask-btn:hover {
        border-color: rgba(212,175,55,0.35) !important;
        color: #e8c547 !important;
      }
      .mp-drawer-body {
        padding: 14px 16px 20px !important;
      }
      .mp-btn-primary,
      .mp-btn-secondary,
      .mp-btn-ghost,
      .pf-cancel,
      #planoForm button[type="submit"] {
        border-radius: 2px !important;
        min-height: 40px !important;
        font-size: 0.78rem !important;
        letter-spacing: 0.3px;
      }
      .mp-btn-primary,
      #planoForm button[type="submit"] {
        background: linear-gradient(135deg, #c9a84c, #a8892e) !important;
        color: #0a0a0a !important;
        border: none !important;
        font-weight: 600 !important;
      }
      .mp-btn-secondary {
        background: transparent !important;
        border: 1px solid rgba(212,175,55,0.3) !important;
        color: #c9a84c !important;
      }
      .mp-btn-ghost,
      .pf-cancel {
        background: transparent !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        color: #9aa3ad !important;
      }
      #planoForm input[type="number"],
      #planoForm input[type="text"],
      #planoForm select {
        border-radius: 2px !important;
        background: #0e1014 !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        color: #e8eaed !important;
        min-height: 40px !important;
        padding: 8px 10px !important;
      }
      #planoForm label {
        font-size: 0.68rem !important;
        color: #8b939e !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .mp-stat,
      .mp-card,
      .plano-metric {
        border-radius: 2px !important;
        border: 1px solid rgba(255,255,255,0.06) !important;
        background: rgba(255,255,255,0.02) !important;
      }
      .nav-mp {
        border-radius: 2px !important;
        border: 1px solid rgba(212,175,55,0.3) !important;
        background: rgba(212,175,55,0.06) !important;
      }


/* ========== extracted block ========== */

      /* —— Meu Plano: header limpo, sem texto cortado —— */
      .mp-drawer-head {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        gap: 12px !important;
        text-align: left !important;
        padding: 16px 16px 12px !important;
        position: relative !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
      }
      .mp-drawer-head > div:first-child {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        padding-right: 8px !important;
        text-align: left !important;
        margin: 0 !important;
        max-width: none !important;
      }
      .mp-drawer-head h2 {
        font-size: clamp(1.05rem, 2.5vw, 1.35rem) !important;
        margin: 6px 0 0 !important;
        max-width: none !important;
        line-height: 1.25 !important;
        text-align: left !important;
      }
      .mp-sub {
        margin: 6px 0 0 !important;
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        max-width: 36rem !important;
        padding-right: 0 !important;
      }
      .mp-head-actions {
        position: static !important;
        top: auto !important;
        right: auto !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        margin: 0 !important;
      }
      .mp-mask-btn {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 10px !important;
        min-height: 36px !important;
        height: 36px !important;
        border-radius: 2px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        background: #12151c !important;
        color: #b8c0c8 !important;
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        max-width: none !important;
      }
      .mp-mask-btn span,
      .mp-mask-btn .mp-mask-label {
        display: inline !important;
        white-space: nowrap !important;
      }
      .mp-close {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 2px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        background: #12151c !important;
        color: #b8c0c8 !important;
        font-size: 1.15rem !important;
        line-height: 1 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      /* mask label sempre visível — ver mp-mask-fix-v10 */

      /* —— Recursos: tabs limpas, estilo site —— */
      .resources-section {
        background: linear-gradient(180deg, #080a0e 0%, #050608 100%) !important;
        padding: 48px 5% 56px !important;
      }
      .resources-section .section-tag {
        letter-spacing: 1.6px;
        color: #8b939e !important;
      }
      .resources-section h2 {
        font-family: Orbitron, sans-serif !important;
        font-size: clamp(1.25rem, 3vw, 1.65rem) !important;
        margin: 10px auto 8px !important;
        color: #fff !important;
        font-weight: 700 !important;
      }
      .resources-lead {
        max-width: 520px !important;
        margin: 0 auto 20px !important;
        font-size: 0.88rem !important;
        line-height: 1.5 !important;
        color: #8b939e !important;
      }
      .resources-controls {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px 12px !important;
        margin: 0 auto 22px !important;
        max-width: 900px;
      }
      .resources-section .tabs-container,
      #recursos .tabs-container {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: center !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
      }
      .resources-section .tab-btn,
      #recursos .tab-btn {
        border-radius: 2px !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        background: #0e1014 !important;
        color: #9aa3ad !important;
        font-size: 0.72rem !important;
        font-weight: 500 !important;
        padding: 8px 14px !important;
        min-height: 36px !important;
        letter-spacing: 0.3px !important;
        text-transform: none !important;
        box-shadow: none !important;
        transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease !important;
      }
      .resources-section .tab-btn:hover,
      #recursos .tab-btn:hover {
        color: var(--text-main, #e8e4d8) !important;
        border-color: color-mix(in srgb, var(--gold, #D4AF37) 40%, transparent) !important;
        background: color-mix(in srgb, var(--gold, #D4AF37) 8%, transparent) !important;
      }
      .resources-section .tab-btn.active,
      #recursos .tab-btn.active {
        color: #0a0a0a !important;
        background: var(--gold, #D4AF37) !important;
        border-color: var(--gold, #D4AF37) !important;
        font-weight: 600 !important;
      }
      .resources-section .search-box {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        background: #0e1014 !important;
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 2px !important;
        padding: 0 12px !important;
        min-height: 36px !important;
        min-width: min(100%, 220px);
      }
      .resources-section .search-box input {
        background: transparent !important;
        border: none !important;
        color: #e8eaed !important;
        font-size: 0.8rem !important;
        outline: none !important;
        width: 100%;
        min-height: 34px;
      }
      .resources-section .search-box i {
        color: #6b7280 !important;
        font-size: 0.8rem;
      }
      .resources-section .resource-card,
      .resources-section .res-card {
        border-radius: 2px !important;
        border: 1px solid rgba(255,255,255,0.07) !important;
        background: rgba(255,255,255,0.02) !important;
        box-shadow: none !important;
        transition: border-color 0.2s ease, background 0.2s ease !important;
      }
      .resources-section .resource-card:hover,
      .resources-section .res-card:hover {
        border-color: rgba(212,175,55,0.28) !important;
        background: rgba(212,175,55,0.04) !important;
        transform: none !important;
      }
      .resources-section .resource-category {
        border-radius: 2px !important;
        font-size: 0.62rem !important;
        letter-spacing: 0.6px;
      }
      .resources-section .resource-link {
        border-radius: 2px !important;
        color: #c9a84c !important;
      }
      .resources-footnote {
        text-align: center;
        font-size: 0.7rem;
        color: #6b7280;
        margin-top: 20px;
      }

      /* —— Coesão geral: menos “instagram”, mais produto único —— */
      .tool-card,
      .journey-card,
      .cta-primary,
      .cta-secondary {
        box-shadow: none !important;
      }
      .cta-primary {
        border-radius: 2px !important;
        background: #c9a84c !important;
        color: #0a0a0a !important;
        border: none !important;
        font-weight: 600 !important;
      }
      .cta-secondary {
        border-radius: 2px !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        background: transparent !important;
      }
      .hero-platform,
      .journey-section,
      .tools-section,
      section.grid-section {
        background-image: none !important;
      }
      footer {
        border-top: 1px solid rgba(255,255,255,0.06) !important;
        background: #050608 !important;
      }


/* ========== extracted block ========== */

      .chatbot-window {
        border-radius: 2px !important;
      }
      .chatbot-input input,
      .chatbot-input button {
        border-radius: 2px !important;
      }
      .chatbot-message {
        border-radius: 2px !important;
      }


/* ========== extracted block ========== */

      /* ===== Telas pequenas — refinamento global ===== */

      /* Extra small phones */
      @media (max-width: 360px) {
        .site-header .brand-text,
        .logo-text { font-size: 0.72rem !important; }
        .hero-title,
        .hero-platform h1 {
          font-size: clamp(1.05rem, 6vw, 1.35rem) !important;
          line-height: 1.2 !important;
        }
        .hero-sub,
        .hero-platform p {
          font-size: 0.78rem !important;
        }
        .journey-intro h2,
        .resources-section h2 {
          font-size: 1.05rem !important;
        }
        .tool-card {
          padding: 12px 10px !important;
        }
        #mfpWindow .chat-chip {
          flex: 1 1 100% !important;
          max-width: 100% !important;
          font-size: 0.68rem !important;
        }
        #userInput {
          font-size: 16px !important; /* evita zoom iOS */
        }
      }

      /* Small phones */
      @media (max-width: 480px) {
        :root {
          --chrome-h: 108px;
        }
        body {
          padding-top: var(--chrome-h, 100px) !important;
        }
        .site-header {
          padding-left: 10px !important;
          padding-right: 10px !important;
        }
        .site-nav a {
          padding: 6px 8px !important;
          font-size: 0.65rem !important;
        }
        .nav-mp {
          font-size: 0.65rem !important;
          padding: 6px 8px !important;
        }
        .hero-platform,
        .journey-section,
        .tools-section,
        .resources-section {
          padding-left: 4% !important;
          padding-right: 4% !important;
        }
        .journey-grid,
        .journey-grid-4 {
          grid-template-columns: 1fr 1fr !important;
          gap: 8px !important;
        }
        .tools-grid,
        .tool-grid {
          grid-template-columns: 1fr !important;
          gap: 10px !important;
        }
        /* Terminal modal */
        #modalTerminal .modal-content {
          width: 100% !important;
          max-width: 100% !important;
          border-radius: 0 !important;
          max-height: 100dvh !important;
        }
        #modalTerminal .term-scenario-bar button {
          min-height: 30px !important;
          font-size: 0.62rem !important;
          padding: 4px 6px !important;
        }
        #modalTerminal .dual-input {
          min-height: 44px !important;
        }
        #modalTerminal .chart-plot {
          min-height: 200px !important;
          height: 28vh !important;
        }
        /* Chat */
        #mfpWindow {
          left: 8px !important;
          right: 8px !important;
          bottom: 72px !important;
          max-height: min(68dvh, calc(100dvh - 84px)) !important;
        }
        #mfpWindow #chatbotBody {
          min-height: 100px !important;
          padding: 10px !important;
        }
        #chatSuggestions {
          max-height: 64px !important;
          gap: 5px !important;
          padding: 6px 8px !important;
        }
        body.terminal-open #chatbotFab {
          width: 48px !important;
          height: 48px !important;
        }
        /* Meu Plano */
        #meuPlanoDrawer .mp-drawer-head {
          padding: 12px !important;
        }
        #meuPlanoDrawer .mp-drawer-body {
          padding: 12px !important;
        }
      }

      /* Phones landscape / large phones */
      @media (max-width: 600px) {
        .resources-controls {
          flex-direction: column !important;
          align-items: stretch !important;
        }
        .resources-section .tabs-container {
          justify-content: flex-start !important;
          overflow-x: auto !important;
          flex-wrap: nowrap !important;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
        }
        .resources-section .tabs-container::-webkit-scrollbar { display: none; }
        .resources-section .tab-btn {
          flex: 0 0 auto !important;
          white-space: nowrap !important;
        }
        .resources-section .search-box {
          width: 100% !important;
          min-width: 0 !important;
        }
      }

      /* Safe areas (notch / home indicator) */
      @media (max-width: 720px) {
        body.terminal-open #chatbotRoot {
          bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
          right: max(10px, env(safe-area-inset-right, 0px)) !important;
        }
        #mfpWindow {
          bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
          padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        #modalTerminal.fullscreen .modal-content {
          padding-top: env(safe-area-inset-top, 0px);
          padding-bottom: env(safe-area-inset-bottom, 0px);
        }
        footer {
          padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
        }
      }

      /* Short viewports (landscape phone) */
      @media (max-height: 480px) and (orientation: landscape) {
        #mfpWindow {
          max-height: calc(100dvh - 56px) !important;
          bottom: 56px !important;
        }
        #mfpWindow #chatbotBody {
          min-height: 60px !important;
        }
        #chatSuggestions {
          max-height: 40px !important;
        }
        #modalTerminal .chart-plot {
          height: 22vh !important;
          min-height: 140px !important;
        }
      }

      /* Prefer reduced data / motion already handled elsewhere */
      @media (max-width: 480px) {
        #userInput,
        #modalTerminal input[type="number"],
        #modalTerminal input[type="text"],
        #planoForm input {
          font-size: 16px !important; /* iOS zoom prevention */
        }
      }


/* ========== extracted block ========== */

            #chatbotRoot {
                display: none !important;
                position: fixed !important;
                bottom: 20px !important;
                right: 20px !important;
                z-index: 100250 !important;
                width: auto !important;
                height: auto !important;
                max-width: none !important;
            }
            body.terminal-open #chatbotRoot {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                pointer-events: auto !important;
            }
            body.terminal-open #chatbotFab {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 52px !important;
                height: 52px !important;
                border-radius: 2px !important;
                border: 1px solid rgba(212,175,55,0.35) !important;
                cursor: pointer !important;
                background: #c9a84c !important;
                color: #0a0a0a !important;
                box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
                position: relative !important;
                z-index: 100052 !important;
            }
            .fab-pulse-ring { display: none !important; }

            /* Janela proporcional ao conteúdo */
            #mfpWindow {
                display: none;
                position: absolute;
                bottom: calc(52px + 12px);
                right: 0;
                left: auto;
                width: min(400px, calc(100vw - 24px));
                height: auto;
                max-height: min(560px, calc(100dvh - 100px));
                background: #0c0e12;
                border: 1px solid rgba(255,255,255,0.1);
                border-radius: 2px;
                box-shadow: 0 16px 48px rgba(0,0,0,0.65);
                overflow: hidden;
                flex-direction: column;
                z-index: 100051;
            }
            #mfpWindow.is-open {
                display: flex !important;
            }

            #mfpWindow .chatbot-header {
                padding: 12px 14px 10px !important;
                border-bottom: 1px solid rgba(255,255,255,0.07) !important;
                background: #0a0c10 !important;
                flex: 0 0 auto !important;
            }
            .chatbot-header-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
                width: 100%;
            }
            .chatbot-header-title {
                display: flex;
                align-items: center;
                gap: 10px;
                min-width: 0;
            }
            .chatbot-header-title i { color: #c9a84c; font-size: 1.05rem; }
            .chatbot-header-title h4 {
                margin: 0;
                color: #e8c547;
                font-size: 0.88rem;
                font-family: Orbitron, sans-serif;
                font-weight: 600;
            }
            .chatbot-header-title small {
                display: block;
                color: #7a8490;
                font-size: 0.65rem;
                margin-top: 2px;
            }
            #chatbotCloseBtn {
                flex-shrink: 0;
                background: #12151c;
                border: 1px solid rgba(255,255,255,0.1);
                color: #b8c0c8;
                width: 34px;
                height: 34px;
                border-radius: 2px;
                cursor: pointer;
                font-size: 1.15rem;
                line-height: 1;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            .disclaimer-header {
                margin-top: 8px;
                font-size: 0.62rem;
                color: #6b7280;
                line-height: 1.3;
            }

            /* Corpo: cresce, scrolls se precisar */
            #mfpWindow #chatbotBody,
            #chatbotBody {
                flex: 1 1 auto !important;
                min-height: 140px !important;
                max-height: none !important;
                height: auto !important;
                overflow-y: auto !important;
                padding: 12px 12px 8px !important;
                -webkit-overflow-scrolling: touch;
            }
            #mfpWindow .chatbot-message {
                max-width: 100% !important;
                font-size: 0.82rem !important;
                line-height: 1.45 !important;
                padding: 10px 12px !important;
                border-radius: 2px !important;
                margin-bottom: 8px !important;
            }
            #mfpWindow .chat-chip,
            #mfpWindow .chatbot-message .chat-chip {
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
                flex-wrap: wrap !important;
                margin: 4px 4px 0 0 !important;
                padding: 7px 11px !important;
                font-size: 0.72rem !important;
                line-height: 1.25 !important;
                border-radius: 2px !important;
                border: 1px solid rgba(212,175,55,0.3) !important;
                background: rgba(212,175,55,0.08) !important;
                color: #e8d9a0 !important;
                white-space: normal !important;
                text-align: center !important;
                max-width: 100% !important;
                min-height: 32px !important;
                cursor: pointer !important;
            }

            /* Sugestões: compactas, wrap limpo */
            #chatSuggestions,
            #mfpWindow .chat-suggestions {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 6px !important;
                padding: 6px 12px 8px !important;
                flex: 0 0 auto !important;
                max-height: 88px !important;
                overflow-y: auto !important;
                background: #0a0c10 !important;
                border-top: 1px solid rgba(255,255,255,0.05) !important;
            }
            #chatSuggestions:empty { display: none !important; padding: 0 !important; }

            /* Input proporcional */
            #mfpWindow .chatbot-input {
                display: flex !important;
                align-items: stretch !important;
                gap: 0 !important;
                padding: 10px 12px 12px !important;
                border-top: 1px solid rgba(255,255,255,0.08) !important;
                background: #0a0c10 !important;
                flex: 0 0 auto !important;
            }
            #userInput {
                flex: 1 1 auto !important;
                min-width: 0 !important;
                background: #12151c !important;
                border: 1px solid rgba(255,255,255,0.1) !important;
                border-right: none !important;
                color: #e8eaed !important;
                padding: 10px 12px !important;
                border-radius: 2px 0 0 2px !important;
                font-size: 0.84rem !important;
                outline: none !important;
                min-height: 42px !important;
            }
            #userInput:focus {
                border-color: rgba(212,175,55,0.4) !important;
            }
            #chatSendBtn {
                flex: 0 0 auto !important;
                background: #c9a84c !important;
                color: #0a0a0a !important;
                border: 1px solid #c9a84c !important;
                padding: 0 14px !important;
                border-radius: 0 2px 2px 0 !important;
                cursor: pointer !important;
                font-weight: 600 !important;
                min-width: 44px !important;
            }

            /* Tablet / mobile: quase full-width, altura equilibrada */
            @media (max-width: 720px) {
                body.terminal-open #chatbotRoot {
                    bottom: 14px !important;
                    right: 12px !important;
                    left: auto !important;
                }
                #mfpWindow {
                    position: fixed !important;
                    left: 10px !important;
                    right: 10px !important;
                    bottom: 78px !important;
                    width: auto !important;
                    max-width: none !important;
                    max-height: min(70dvh, calc(100dvh - 90px)) !important;
                    border-radius: 2px !important;
                }
                #mfpWindow #chatbotBody,
                #chatbotBody {
                    min-height: 120px !important;
                }
                #chatSuggestions {
                    max-height: 72px !important;
                }
                #mfpWindow .chat-chip {
                    font-size: 0.7rem !important;
                    padding: 8px 10px !important;
                    flex: 1 1 calc(50% - 6px) !important;
                    max-width: calc(50% - 4px) !important;
                }
            }
            @media (max-width: 400px) {
                #mfpWindow .chat-chip {
                    flex: 1 1 100% !important;
                    max-width: 100% !important;
                }
            }
            @media (min-width: 900px) {
                #mfpWindow {
                    width: 420px;
                    max-height: min(580px, calc(100dvh - 110px));
                }
            }



/* ==========================================================================
   DESIGN SYSTEM — PRÓXIMAINVEST v1.0.7
   Padronização: tokens, botões, terminal toolbar, hero, chat
   ========================================================================== */

/* —— Botões base (padrão do site) —— */
#modalTerminal .btn,
#modalTerminal .share-buttons-container .btn,
.share-buttons-container .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--btn-h);
  padding: 8px var(--btn-px);
  font-family: var(--font-display);
  font-size: var(--btn-fs);
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.2;
  border-radius: var(--radius);
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s, border-color 0.2s, transform 0.15s;
  box-sizing: border-box;
}
#modalTerminal .btn:hover,
#modalTerminal .share-buttons-container .btn:hover,
.share-buttons-container .btn:hover {
  background: var(--gold);
  color: #0a0a0a;
  transform: translateY(-1px);
}
#modalTerminal .btn:active,
.share-buttons-container .btn:active {
  transform: translateY(0) scale(0.98);
}
#modalTerminal .btn.secondary,
.share-buttons-container .btn.secondary {
  border-color: var(--border-strong);
  color: var(--text-body);
}
#modalTerminal .btn.secondary:hover,
.share-buttons-container .btn.secondary:hover {
  border-color: rgba(212, 175, 55, 0.45);
  color: var(--gold);
  background: rgba(212, 175, 55, 0.08);
}
#modalTerminal .btn.btn-close,
.share-buttons-container .btn.btn-close {
  border-color: var(--danger);
  color: var(--danger);
}
#modalTerminal .btn.btn-close:hover,
.share-buttons-container .btn.btn-close:hover {
  background: var(--danger);
  color: #fff;
}

/* —— Toolbar do Terminal —— */
#modalTerminal .share-buttons-container.term-toolbar,
#modalTerminal .share-buttons-container {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-2) max(var(--sp-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.35) 12%);
}
#modalTerminal .term-edu-note {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  margin: 0 0 var(--sp-2);
  line-height: 1.4;
}

/* Cenários */
#modalTerminal .term-scenario-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  margin: 0 0 var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
}
#modalTerminal .term-scenario-bar .term-scenario-label,
#modalTerminal .term-scenario-bar > span {
  width: auto;
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: var(--sp-1);
}
#modalTerminal .term-scenario-bar button {
  flex: 1 1 auto;
  min-width: 76px;
  min-height: var(--btn-h-sm);
  padding: 6px 12px;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: transparent;
  color: #aaa;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
#modalTerminal .term-scenario-bar button:hover {
  color: #fff;
  border-color: rgba(212, 175, 55, 0.35);
}
#modalTerminal .term-scenario-bar button.is-active {
  border-color: rgba(212, 175, 55, 0.5);
  color: var(--gold);
  background: rgba(212, 175, 55, 0.1);
}

/* Grupos de ação */
#modalTerminal .term-actions-compact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
#modalTerminal .term-actions-compact .btn-group,
#modalTerminal .share-buttons-container .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  justify-content: stretch;
}
#modalTerminal .term-integ-group .btn,
#modalTerminal .term-export-group .btn,
#modalTerminal .share-buttons-container .btn.btn-compact {
  flex: 1 1 auto;
  min-height: var(--btn-h);
}

@media (max-width: 520px) {
  #modalTerminal .term-integ-group,
  #modalTerminal .term-export-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2);
  }
  #modalTerminal .term-export-group .btn.btn-close {
    grid-column: 1 / -1;
  }
  #modalTerminal .share-buttons-container .btn,
  #modalTerminal .share-buttons-container .btn.btn-compact {
    min-height: var(--btn-h-sm);
    font-size: 0.68rem;
    padding: 7px 10px;
  }
  #modalTerminal .term-scenario-bar button {
    min-height: 32px;
    font-size: 0.68rem;
  }
}

/* —— Hero (base) —— */
.hero-platform {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  padding: 48px 5% 36px;
  overflow: visible;
}
.hero-platform .hero-brand {
  font-family: var(--font-display, Orbitron, sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 14px;
  opacity: 0.95;
}
.hero-platform .hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  margin: 0 0 16px;
  padding: 0;
  max-width: 100%;
  overflow: visible;
  font-family: var(--font-display, Orbitron, sans-serif);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2.5rem);
  line-height: 1.28;
  letter-spacing: -0.02em;
  color: #f4f1ea;
  text-align: center;
}
.hero-platform .hero-line {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  white-space: normal;
  line-height: inherit;
}
.hero-platform .hero-line-1 {
  color: #f4f1ea;
}
.hero-platform .hero-line-2 {
  color: var(--gold);
}
.hero-platform .hero-lead {
  margin: 0 auto 20px;
  max-width: 34em;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #8b919c;
}
.hero-platform .hero-cta {
  margin-top: 8px;
}

/* —— Chatbot: fechado por padrão; 1 scrollbar —— */
#mfpWindow.chatbot-window,
#mfpWindow,
.chatbot-window {
  display: none;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  box-shadow: var(--shadow-panel);
}
#mfpWindow.is-open,
#mfpWindow.chatbot-window.is-open,
.chatbot-window.is-open {
  display: flex !important;
  overflow: hidden !important;
}
#mfpWindow .chatbot-header,
#mfpWindow .chat-suggestions,
#mfpWindow .chatbot-input {
  flex: 0 0 auto;
}
#mfpWindow .chat-suggestions {
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 64px;
  scrollbar-width: none;
}
#mfpWindow .chat-suggestions::-webkit-scrollbar {
  display: none;
}
#mfpWindow #chatbotBody,
#mfpWindow .chatbot-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (max-width: 768px) {
  #mfpWindow.is-open,
  #mfpWindow.chatbot-window.is-open {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: 72px;
    width: auto;
    height: min(58dvh, 460px);
    max-height: calc(100dvh - 96px);
  }
}

/* —— Meu Plano: ações alinhadas ao sistema —— */
.mp-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}
.mp-actions-row .mp-btn-primary,
.mp-actions-row .mp-btn-secondary,
.mp-actions-row .mp-btn-ghost {
  min-height: var(--btn-h-sm);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  padding: 7px 12px;
}

/* —— Inputs / controles do terminal —— */
#modalTerminal .control-panel input[type="number"],
#modalTerminal .control-panel input[type="text"],
#modalTerminal .control-panel select {
  border-radius: var(--radius);
  min-height: var(--control-h);
  font-family: var(--font-body);
  border-color: var(--border-strong);
}

/* —— Cards / painéis —— */
#modalTerminal .stat-box,
#modalTerminal .res-display,
#modalTerminal .chart-wrap {
  border-radius: var(--radius);
}

/* —— Chart mobile —— */
/* removed 38vh chart-plot — altura só no MOBILE UX v4 */

/* ==========================================================================
   v1.0.8 — FAB / chat / toast sem CSS-in-JS (só classes)
   ========================================================================== */

/* FAB oculto por padrão; visível com terminal aberto */
#chatbotRoot {
  display: none;
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 100050;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
#chatbotRoot.is-fab-visible,
body.terminal-open #chatbotRoot {
  display: block;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}
#chatbotRoot.is-fab-visible #chatbotFab,
body.terminal-open #chatbotFab,
#chatbotFab.chatbot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50% !important;
  border: 1px solid rgba(212, 175, 55, 0.35);
  cursor: pointer;
  background: var(--gold-soft, #c9a84c);
  color: #0a0a0a;
  box-shadow: var(--shadow-fab, 0 8px 28px rgba(0, 0, 0, 0.55));
  overflow: hidden;
  padding: 0;
  aspect-ratio: 1 / 1;
}

/* PWA update toast — acima da bottom nav (não cortar) */
.prox-sw-update {
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  z-index: 2147483646 !important;
  background: var(--surface-3, #12161f);
  border: 1px solid rgba(212, 175, 55, 0.45);
  color: #eee;
  padding: 10px 14px;
  border-radius: 10px;
  font: 600 13px/1.3 var(--font-body, system-ui, sans-serif);
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  max-width: min(420px, calc(100vw - 24px));
  width: auto;
  box-sizing: border-box;
  pointer-events: auto !important;
}
.prox-sw-update span {
  flex: 1 1 auto;
  min-width: 0;
}
.prox-sw-update-btn {
  background: linear-gradient(145deg, var(--gold, #D4AF37), var(--gold-dark, #b8941f));
  color: #111;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body, system-ui, sans-serif);
  flex: 0 0 auto;
  white-space: nowrap;
}
/* Mobile / PWA: sobe acima do menu inferior (~56–62px + safe area) */
@media screen and (max-width: 1024px) {
  .prox-sw-update {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
  }
}
/* App instalado (standalone): mesmo offset */
@media (display-mode: standalone) {
  .prox-sw-update {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    right: 12px !important;
    transform: none !important;
  }
}
@media (display-mode: standalone) and (min-width: 1025px) {
  .prox-sw-update {
    bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    max-width: 420px !important;
  }
}

/* Chat chips / next steps (sem style inline) */
.chat-chip {
  margin: 4px 4px 0 0;
}
.chat-chip-spaced {
  margin-top: 8px;
}
.chat-next-steps {
  margin-top: 10px;
}
.chat-next-label {
  font-size: 0.68rem;
  color: #8b919c;
  margin-bottom: 4px;
}
.chat-didactic-hint {
  opacity: 0.9;
}

/* ==========================================================================
   Hero mobile — refinado (duas linhas sempre visíveis sob header 2 fileiras)
   ========================================================================== */

@media (max-width: 900px) {
  :root {
    --ticker-h: 40px;
    /* logo + Meu Plano + nav; syncChromeH ajusta em runtime */
    --header-h: 140px;
    --chrome-h: calc(var(--ticker-h) + var(--header-h));
  }

  body {
    padding-top: var(--chrome-h) !important;
  }

  .hero.hero-platform,
  section.hero-platform {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 5% 28px !important;
    overflow: visible !important;
    position: relative;
    z-index: 0;
  }

  .hero-platform .hero-brand {
    display: block !important;
    margin: 0 0 10px !important;
    font-size: 0.65rem !important;
    letter-spacing: 0.16em !important;
    line-height: 1.3 !important;
    color: var(--gold, #D4AF37) !important;
    opacity: 1 !important;
  }

  .hero-platform .hero-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.18em !important;
    margin: 0 0 12px !important;
    padding: 0 2px !important;
    font-size: clamp(1.28rem, 6.2vw, 1.65rem) !important;
    line-height: 1.32 !important;
    letter-spacing: -0.015em !important;
    color: #f4f1ea !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }

  .hero-platform .hero-line,
  .hero-platform .hero-line-1,
  .hero-platform .hero-line-2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    word-break: normal !important;
    line-height: 1.32 !important;
    padding: 1px 0 !important;
    margin: 0 !important;
  }

  .hero-platform .hero-line-1 {
    color: #f0ebe3 !important;
  }

  .hero-platform .hero-line-2 {
    color: var(--gold, #D4AF37) !important;
  }

  .hero-platform .hero-lead {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    margin: 0 auto 18px !important;
    padding: 0 4px !important;
    max-width: 100% !important;
  }

  .hero-platform .hero-cta {
    margin-top: 4px !important;
    gap: 10px !important;
  }

  .hero-platform .hero-meta {
    margin-top: 16px !important;
    font-size: 0.65rem !important;
  }
}

@media (max-width: 480px) {
  :root {
    --header-h: 148px;
  }

  .hero.hero-platform,
  section.hero-platform {
    padding: 16px 4% 24px !important;
  }

  .hero-platform .hero-title {
    font-size: clamp(1.18rem, 6.8vw, 1.42rem) !important;
    gap: 0.14em !important;
  }

  .hero-platform .hero-brand {
    font-size: 0.6rem !important;
    margin-bottom: 8px !important;
  }

  .hero-platform .hero-lead {
    font-size: 0.82rem !important;
  }
}

@media (max-width: 360px) {
  :root {
    --header-h: 156px;
  }

  .hero-platform .hero-title {
    font-size: 1.12rem !important;
  }
}

/* landscape phone: header mais baixo, hero compacto */
@media (max-width: 900px) and (max-height: 430px) and (orientation: landscape) {
  :root {
    --header-h: 72px;
  }

  .hero.hero-platform {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .hero-platform .hero-title {
    font-size: 1.1rem !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.35em !important;
  }

  .hero-platform .hero-line {
    display: inline !important;
    width: auto !important;
  }
}

/* Chat body: altura mínima para mensagens aparecerem */
#mfpWindow.is-open #chatbotBody,
#mfpWindow.is-open .chatbot-body {
  min-height: 140px !important;
  flex: 1 1 auto !important;
}

/* Chat: mensagem de abertura sempre legível */
#mfpWindow .chatbot-message,
#chatbotBody .chatbot-message {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #f0f0f0 !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0.06)) !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  max-width: 100% !important;
}
#mfpWindow .chatbot-message.bot,
#chatbotBody .chatbot-message.bot {
  color: #ffffff !important;
}
#chatbotBody {
  min-height: 120px !important;
}


/* ==========================================================================
   Chatbot UX aprimorado
   ========================================================================== */

.chat-context-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  padding: 6px 12px;
  font-size: 0.62rem;
  letter-spacing: 0.02em;
  color: #8b919c;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}
.chat-context-bar #chatCtxPlano {
  color: #c9a84c;
}
.chat-ctx-sep {
  opacity: 0.4;
}
.chat-welcome-lead {
  margin: 8px 0 12px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #c5cad3;
}
.chat-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.chat-plano-hint {
  font-size: 0.72rem;
  color: #c9a84c;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 2px;
  padding: 6px 10px;
  margin-bottom: 10px;
}
#mfpWindow .disclaimer-box {
  margin-top: 8px;
  padding: 6px 8px;
  font-size: 0.62rem;
  color: #8b919c;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent;
}
#mfpWindow .chatbot-input input {
  font-size: 16px; /* evita zoom iOS */
}
#mfpWindow .chat-suggestions {
  padding: 6px 10px;
  gap: 6px;
  display: flex;
  flex-wrap: wrap;
}

/* ProxError toast */
.prox-error-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(120%);
  z-index: 100080;
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: 2px;
  font: 600 0.8rem/1.35 Inter, system-ui, sans-serif;
  color: #f4f1ea;
  background: #1a1212;
  border: 1px solid rgba(255, 80, 80, 0.45);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.prox-error-toast.is-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.prox-error-toast.is-ok {
  border-color: rgba(125, 206, 160, 0.5);
  background: #0f1a14;
}
.prox-error-toast.is-warn {
  border-color: rgba(212, 175, 55, 0.5);
  background: #1a170f;
}
.chat-error-hint {
  display: block;
  margin-top: 6px;
  font-size: 0.78rem;
  color: #9aa3ad;
}
.chat-typing-label { opacity: 0.75; }
.chat-typing-dots { color: var(--gold, #D4AF37); }
#chatSendBtn:disabled {
  opacity: 0.55;
  cursor: wait;
}





/* ============================================================
   MOBILE UX v4 — uma tela, um scroll, gráfico e tooltips visíveis
   Especificidade alta para ganhar das regras legadas
   ============================================================ */

@media (max-width: 900px) {

  /* ---- Shell do terminal ---- */
  #modalTerminal.modal {
    padding: 0 !important;
    align-items: stretch !important;
  }
  #modalTerminal .modal-content {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* só o body interno rola */
  }
  #modalTerminal .modal-header {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 20 !important;
    background: #0a0a0a !important;
    padding: 10px 12px !important;
  }
  #modalTerminal .modal-header .term-link:not(.term-ai-btn) {
    display: none !important;
  }
  #modalTerminal .modal-header .header-icon-chart {
    display: none !important;
  }

  /* ---- Único scroll: modal-body ---- */
  #modalTerminal .modal-body {
    display: block !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 0 !important;
    margin: 0 !important;
    grid-template-columns: none !important;
  }

  /* Painéis em fluxo normal (sem altura % e sem scroll próprio) */
  #modalTerminal .control-panel,
  #modalTerminal .results-container {
    display: block !important;
    position: relative !important;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important; /* tooltips não cortam */
    -webkit-overflow-scrolling: auto !important;
  }

  #modalTerminal .control-panel {
    border-right: none !important;
    border-bottom: 1px solid rgba(212, 175, 55, 0.22) !important;
    padding: 14px 16px 12px !important;
    z-index: 5 !important;
  }

  #modalTerminal .results-container {
    padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1 !important;
  }

  #modalTerminal .results-container::before {
    content: "Resultado";
    display: block;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold, #D4AF37);
    font-weight: 700;
    margin: 0 0 12px;
  }

  /* ---- Gráfico: altura real via .chart-plot (não esmagar) ---- */
  #modalTerminal .chart-wrap {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 10px 0 14px !important;
    padding: 10px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }
  #modalTerminal .chart-plot {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 240px !important;
    min-height: 240px !important;
    max-height: 240px !important;
    flex: 0 0 240px !important;
    overflow: hidden !important;
  }
  #modalTerminal .chart-plot canvas,
  #modalTerminal #mainChart,
  #modalTerminal .chart-wrap canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 240px !important;
    max-height: 240px !important;
  }

  /* ---- Inputs / tooltips ---- */
  #modalTerminal .control-panel .input-group {
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 14px !important;
    overflow: visible !important;
  }
  #modalTerminal .control-panel .input-group.is-tip-open,
  #modalTerminal .control-panel .input-group:focus-within {
    z-index: 30 !important;
  }
  /* Tooltip abaixo do campo, largura da coluna, não cortado */
  #modalTerminal .input-group[data-tooltip]::after {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
    bottom: auto !important;
    width: auto !important;
    max-width: none !important;
    z-index: 40 !important;
    white-space: normal !important;
  }

  #modalTerminal .control-panel input[type="number"],
  #modalTerminal .control-panel input[type="text"],
  #modalTerminal .control-panel input[type="search"],
  #modalTerminal .control-panel input:not([type]),
  #modalTerminal .control-panel select,
  #modalTerminal .control-panel textarea {
    font-size: 16px !important;
    min-height: 44px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #modalTerminal .control-panel input[type="radio"],
  #modalTerminal .control-panel input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }
  #modalTerminal .control-panel .radio-group label,
  #modalTerminal .control-panel .checkbox-group label,
  #modalTerminal .control-panel label:has(input[type="radio"]),
  #modalTerminal .control-panel label:has(input[type="checkbox"]) {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    font-size: 0.82rem !important;
  }

  #modalTerminal .res-display h2 {
    font-size: clamp(1.35rem, 6vw, 1.75rem) !important;
    word-break: break-word;
  }

  /* ---- Chat: NÃO forçar fullscreen automático (só com .is-fullscreen) ---- */
  #mfpWindow.chatbot-window.is-open.is-fullscreen,
  .chatbot-window.is-open.is-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 2147483500 !important;
  }
  .chatbot-window.is-open .chatbot-header,
  .chatbot-window.is-open .chat-context-bar {
    flex-shrink: 0 !important;
  }
  .chatbot-window.is-open .chatbot-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .chatbot-window.is-open .chat-suggestions {
    flex-shrink: 0 !important;
    max-height: 72px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  .chatbot-window.is-open .chatbot-input {
    flex-shrink: 0 !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    background: #0a0a0a !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
  }
  .chatbot-window.is-open .chatbot-input input {
    font-size: 16px !important;
  }
}

/* Telas estreitas: gráfico um pouco menor, ainda legível */
@media (max-width: 900px) and (max-height: 700px) {
  #modalTerminal .chart-plot {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    flex-basis: 200px !important;
  }
  #modalTerminal .chart-plot canvas,
  #modalTerminal #mainChart,
  #modalTerminal .chart-wrap canvas {
    min-height: 200px !important;
    max-height: 200px !important;
  }
}

@media (max-width: 380px) {
  #modalTerminal .chart-plot {
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    flex-basis: 180px !important;
  }
  #modalTerminal .chart-plot canvas,
  #modalTerminal #mainChart,
  #modalTerminal .chart-wrap canvas {
    min-height: 180px !important;
    max-height: 180px !important;
  }
}


/* ============================================================
   ENHANCEMENTS v2 — clean, refined, mobile-first
   ============================================================ */

/* Header icon buttons — minimal */
.nav-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--text-dim, #888);
  border-radius: 50%;
  cursor: pointer;
  transition: color .18s, background .18s;
}
.nav-icon-btn:hover {
  color: var(--gold, #D4AF37);
  background: rgba(212, 175, 55, 0.08);
}
.nav-icon-btn:focus-visible {
  outline: 2px solid var(--gold, #D4AF37);
  outline-offset: 2px;
}
.nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  border-radius: 99px;
  background: var(--gold, #D4AF37);
  color: #0a0a0a;
}

/* Tool cards — refined icon treatment (compact) */
.tools-grid .tool-card {
  position: relative;
  padding-top: 10px;
}
.tools-grid .tool-card > i {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 4px;
  font-size: 0.72rem !important;
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(212,175,55,0.12), rgba(212,175,55,0.04));
  color: var(--gold, #D4AF37) !important;
  border: 1px solid rgba(212,175,55,0.18);
  transition: transform .2s ease, box-shadow .2s ease, background .2s;
}
.tools-grid .tool-card:hover > i {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(212,175,55,0.12);
  background: linear-gradient(145deg, rgba(212,175,55,0.2), rgba(212,175,55,0.08));
}

/* Favorite — mini star, clean */
.tool-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 0.65rem;
  line-height: 1;
  opacity: 1;
  transition: color .15s ease, background .15s ease, transform .12s ease;
}
.tool-fav i {
  font-size: 0.65rem !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  display: block !important;
}
.tool-card:hover .tool-fav {
  color: rgba(255, 255, 255, 0.45);
}
.tool-fav:hover {
  color: var(--gold, #D4AF37);
  background: rgba(212, 175, 55, 0.08);
}
.tool-fav:focus-visible {
  outline: 1px solid rgba(212, 175, 55, 0.5);
  outline-offset: 1px;
}
.tool-fav.is-active {
  color: var(--gold, #D4AF37);
  background: transparent;
}
.tool-fav.is-active:hover {
  background: rgba(212, 175, 55, 0.1);
}
.tool-card-highlight {
  box-shadow: 0 0 0 1px var(--gold, #D4AF37) !important;
}
html[data-theme="light"] .tool-fav {
  color: rgba(15, 23, 42, 0.28);
}
html[data-theme="light"] .tool-card:hover .tool-fav {
  color: rgba(15, 23, 42, 0.45);
}
html[data-theme="light"] .tool-fav.is-active,
html[data-theme="light"] .tool-fav:hover {
  color: var(--gold, #a67c00);
}

/* ========== Calendar — refined grid + modal ========== */
.cal-section {
  max-width: 920px;
  margin: 0 auto;
  padding: 1.75rem 1.25rem 1.25rem;
}
.cal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 0.9rem;
}
.cal-head-text .section-tag { display: inline-block; margin-bottom: 0.2rem; }
.cal-head h2 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--text-main, #fff);
}
.cal-sub {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--text-dim, #888);
  line-height: 1.4;
  max-width: 36ch;
}
.cal-notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-top: 2px;
  padding: 6px 11px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 99px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  background: transparent;
  color: var(--text-dim, #888);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.cal-notify-btn:hover,
.cal-notify-btn.is-on {
  color: var(--gold, #D4AF37);
  border-color: rgba(212,175,55,0.35);
  background: rgba(212,175,55,0.06);
}
.cal-notify-btn i { font-size: 0.68rem; }

.cal-grid {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}
@media (max-width: 900px) {
  .cal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px) {
  .cal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
}

.cal-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 5px;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  background: var(--surface-2, #0c0e12);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
  min-height: 78px;
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.cal-card:hover {
  border-color: rgba(212,175,55,0.4);
  background: var(--surface-3, #111318);
  transform: translateY(-1px);
}
.cal-card:focus-visible {
  outline: 2px solid var(--gold, #D4AF37);
  outline-offset: 2px;
}
.cal-card.is-active {
  border-color: var(--gold, #D4AF37);
  background: rgba(212,175,55,0.08);
  box-shadow: 0 0 0 1px rgba(212,175,55,0.2);
}
.cal-card-date {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--gold, #D4AF37);
  letter-spacing: 0.03em;
}
.cal-card-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-main, #fff);
  line-height: 1.25;
}
.cal-card-tag {
  font-size: 0.58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 99px;
  margin-top: auto;
}
.cal-card-tag.high { background: rgba(255,62,62,0.12); color: #ff7a7a; }
.cal-card-tag.medium { background: rgba(212,175,55,0.12); color: var(--gold, #D4AF37); }
.cal-card-tag.low { background: rgba(125,206,160,0.1); color: #7dcea0; }

/* Modal — sempre no centro da viewport */
.cal-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100dvh !important;
  z-index: 2147483000 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin: 0;
  box-sizing: border-box;
}
.cal-modal[hidden],
.cal-modal:not(.is-open) { display: none !important; visibility: hidden !important; pointer-events: none !important; }
.cal-modal.is-open { display: flex !important; visibility: visible !important; pointer-events: auto !important; }
.cal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.cal-modal-sheet {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 32px));
  max-width: 420px;
  margin: 0 auto;
  padding: 1.35rem 1.25rem 1.15rem;
  border-radius: 16px;
  background: var(--surface-2, #0c0e12);
  border: 1px solid var(--border-strong, rgba(255,255,255,0.12));
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  animation: calSheetIn .22s ease;
  max-height: min(80vh, 560px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes calSheetIn {
  from { transform: scale(0.96) translateY(10px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.cal-modal-x {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-dim, #888);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.cal-modal-x:hover { color: var(--text-main, #fff); background: rgba(255,255,255,0.06); }
.cal-modal-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0.45rem;
  padding-right: 28px;
}
.cal-modal-sheet h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main, #fff);
  letter-spacing: -0.02em;
  padding-right: 28px;
}
.cal-modal-sheet p {
  margin: 0 0 1rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-dim, #888);
}
.cal-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cal-action-primary {
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  border-radius: 99px;
  background: var(--gold, #D4AF37);
  color: #0a0a0a;
  cursor: pointer;
}
.cal-action-primary:hover { filter: brightness(1.06); }
.cal-action-secondary {
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 99px;
  border: 1px solid rgba(212,175,55,0.4);
  background: rgba(212,175,55,0.08);
  color: var(--gold, #D4AF37);
  cursor: pointer;
}
.cal-action-ghost {
  padding: 8px 14px;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 99px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  background: transparent;
  color: var(--text-dim, #888);
  cursor: pointer;
}
html.cal-modal-open,
body.cal-modal-open { overflow: hidden; }

/* Favoritos removidos */
.tool-fav,
#btnFavorites,
#favBadge {
  display: none !important;
}

html[data-theme="light"] .cal-card,
html[data-theme="light"] .cal-modal-sheet {
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,0.06);
}
html[data-theme="light"] .cal-modal-backdrop { background: rgba(15,23,42,0.35); }

@media (max-width: 640px) {
  .cal-section { padding: 1.35rem 1rem 1rem; }
  .cal-head h2 { font-size: 1.02rem; }
  .cal-card { min-height: 72px; padding: 10px; }
  .cal-card-title { font-size: 0.76rem; }
}

/* Toast — acima da bottom nav no mobile */
.pi-toast {
  position: fixed;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2147483645;
  max-width: min(340px, calc(100vw - 32px));
  padding: 11px 16px;
  background: var(--surface-3, #111318);
  border: 1px solid var(--border-strong, rgba(255,255,255,0.14));
  border-radius: 12px;
  color: var(--text-main, #fff);
  font-size: 0.82rem;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  animation: piToastIn .22s ease;
  box-sizing: border-box;
}
@media screen and (max-width: 1024px) {
  .pi-toast {
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    left: 12px;
    right: 12px;
    transform: none;
    max-width: none;
    width: auto;
  }
}
.pi-toast-out { opacity: 0; transition: opacity .22s; }
@keyframes piToastIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Light theme refinements */
html[data-theme="light"] {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f0f1f4;
  --border: rgba(15, 23, 42, 0.08);
  --border-strong: rgba(15, 23, 42, 0.12);
  --text-main: #0f172a;
  --text-body: #334155;
  --text-dim: #64748b;
  --text-muted: #94a3b8;
  --gold: #a67c00;
  --gold-dark: #8a6800;
  color-scheme: light;
}
html[data-theme="light"] body { background: var(--bg); color: var(--text-body); }
html[data-theme="light"] .site-header {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(12px);
}
html[data-theme="light"] .tools-grid .tool-card > i {
  background: linear-gradient(145deg, rgba(166,124,0,0.1), rgba(166,124,0,0.03));
  border-color: rgba(166,124,0,0.15);
}
html[data-theme="light"] .pi-toast {
  background: #fff;
  color: #0f172a;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
}

/* Mobile polish */
@media (max-width: 640px) {
  .nav-icon-btn { width: 34px; height: 34px; }
  .tools-grid .tool-card > i {
    width: 38px;
    height: 38px;
    font-size: 0.95rem !important;
    border-radius: 10px;
  }
}




/* ==========================================================================
   Controles simples (modelo original + foto): bolinha + texto, SEM caixa
   ========================================================================== */

/* Cenários: botões em linha compacta (como no arquivo original) */
.scenario-bar,
#modalTerminal .scenario-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}
.scenario-btn,
#modalTerminal .scenario-btn {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  min-height: 34px !important;
  padding: 7px 8px !important;
  font-size: 0.72rem !important;
  font-family: Inter, system-ui, sans-serif !important;
  letter-spacing: 0.3px !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  background: transparent !important;
  color: #888 !important;
  border-radius: 3px !important;
  cursor: pointer !important;
  width: auto !important;
  text-align: center !important;
  font-weight: 500 !important;
}
.scenario-btn::before,
#modalTerminal .scenario-btn::before {
  content: none !important;
  display: none !important;
}
.scenario-btn:hover,
#modalTerminal .scenario-btn:hover {
  border-color: var(--gold, #D4AF37) !important;
  color: #fff !important;
}
.scenario-btn.active,
.scenario-btn.is-active,
#modalTerminal .scenario-btn.active,
#modalTerminal .scenario-btn.is-active {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.08)) !important;
  border-color: var(--gold, #D4AF37) !important;
  color: var(--gold, #D4AF37) !important;
  font-weight: 600 !important;
}

/* term-scenario-bar: original */
#modalTerminal .term-scenario-bar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}
#modalTerminal .term-scenario-bar button::before {
  content: none !important;
  display: none !important;
}

/* Grupos radio/checkbox: linha simples, sem card */
#modalTerminal .radio-group,
#modalTerminal .checkbox-group,
.radio-group,
.checkbox-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 14px !important;
  margin-top: 8px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

#modalTerminal .radio-group label,
#modalTerminal .checkbox-group label,
.radio-group label,
.checkbox-group label,
#modalTerminal .input-group label:has(input[type="radio"]),
#modalTerminal .input-group label:has(input[type="checkbox"]),
#modalTerminal .control-panel label:has(input[type="radio"]),
#modalTerminal .control-panel label:has(input[type="checkbox"]),
#modalTerminal .input-group > div[style*="display:flex"] label {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: none !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  color: #c5cad3 !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  text-align: left !important;
}

#modalTerminal .radio-group label:has(input:checked),
#modalTerminal .checkbox-group label:has(input:checked),
.radio-group label:has(input:checked),
.checkbox-group label:has(input:checked),
#modalTerminal .input-group label:has(input:checked),
#modalTerminal .input-group > div[style*="display:flex"] label:has(input:checked) {
  border: none !important;
  background: transparent !important;
  color: #f0f2f5 !important;
}

/* Bolinha nativa-like, tamanho fixo — SEM caixa */
#modalTerminal input[type="radio"],
#modalTerminal input[type="checkbox"],
.control-panel input[type="radio"],
.control-panel input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 16px !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  background: transparent !important;
  border-radius: 50% !important;
  box-shadow: none !important;
  position: relative !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  accent-color: var(--gold, #D4AF37) !important;
}

#modalTerminal input[type="radio"]:checked,
#modalTerminal input[type="checkbox"]:checked,
.control-panel input[type="radio"]:checked,
.control-panel input[type="checkbox"]:checked {
  border-color: var(--gold, #D4AF37) !important;
  background: var(--gold, #D4AF37) !important;
}

#modalTerminal input[type="radio"]:checked::after,
.control-panel input[type="radio"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 5px !important;
  height: 5px !important;
  margin: -2.5px 0 0 -2.5px !important;
  border-radius: 50% !important;
  background: #0a0a0a !important;
}

#modalTerminal input[type="checkbox"]:checked::after,
.control-panel input[type="checkbox"]:checked::after {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 4px !important;
  width: 4px !important;
  height: 8px !important;
  border: solid #0a0a0a !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  background: transparent !important;
}

/* IR / inline flex wrappers */
#modalTerminal .input-group > div[style*="display:flex"] {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  margin-top: 6px !important;
  align-items: center !important;
}


/* FX converter — sempre centralizado */
.fx-converter.open {
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2147482000 !important;
}
body.fx-open {
  overflow: hidden !important;
}

body.fx-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2147481990;
  pointer-events: auto;
}

/* ==========================================================================
   v1.5.25 — Chatbot centrado + fullscreen/minimize + transições de modais
   ========================================================================== */

/* Legal modal acima do terminal (desktop e mobile) */
.legal-modal {
  z-index: 2147483600 !important;
}
.legal-modal.active {
  display: flex !important;
  animation: proxModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.legal-modal:not(.active) {
  animation: none;
}

/* Transições suaves — modais principais */
@keyframes proxModalIn {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes proxModalOut {
  from { opacity: 1; transform: scale(1) translateY(0); }
  to   { opacity: 0; transform: scale(0.96) translateY(8px); }
}
@keyframes proxChatIn {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes proxChatOut {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(12px) scale(0.96); }
}
@keyframes proxFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

#modalTerminal.modal.active,
#modalTerminal.active {
  animation: proxFadeIn 0.22s ease both;
}
/* NÃO usar transform no .modal-content — Chart.js fica preto/vazio com ancestor transform */
#modalTerminal.active .modal-content {
  animation: proxFadeIn 0.22s ease both;
  transform: none !important;
}
#calModal.is-open .cal-modal-sheet,
#calModal:not([hidden]) .cal-modal-sheet {
  animation: proxModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#resourceModal.active .resource-modal-content,
#resourceModal.active .modal-content {
  animation: proxModalIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* —— Chatbot window: base + transição —— */
#mfpWindow.chatbot-window {
  display: none;
  opacity: 0;
  transform: translateY(16px) scale(0.94);
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              width 0.3s ease, height 0.3s ease,
              top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease,
              border-radius 0.3s ease, max-height 0.3s ease;
  flex-direction: column;
  overflow: hidden;
  will-change: opacity, transform;
}

#mfpWindow.chatbot-window.is-open {
  display: flex !important;
  opacity: 1 !important;
  animation: proxChatIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (min-width: 769px) {
  #mfpWindow.chatbot-window.is-open:not(.is-fullscreen):not(.is-minimized) {
    animation: proxChatInCenter 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
}
@keyframes proxChatInCenter {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

#mfpWindow.chatbot-window.is-closing {
  display: flex !important;
  animation: proxChatOut 0.22s ease both;
  pointer-events: none;
}

/* Desktop: janela centrada (não “descentralizada”) */
@media (min-width: 769px) {
  body.terminal-open #mfpWindow.chatbot-window.is-open:not(.is-fullscreen):not(.is-minimized),
  #mfpWindow.chatbot-window.is-open:not(.is-fullscreen):not(.is-minimized) {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    top: 50% !important;
    width: min(420px, calc(100vw - 48px)) !important;
    height: min(560px, calc(100dvh - 80px)) !important;
    max-height: calc(100dvh - 80px) !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 16px !important;
    z-index: 2147483100 !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(212, 175, 55, 0.18) !important;
  }
}

/* Mobile: posicionado acima da bottom nav, centralizado horizontalmente */
@media (max-width: 768px) {
  body.terminal-open #mfpWindow.chatbot-window.is-open:not(.is-fullscreen):not(.is-minimized),
  #mfpWindow.chatbot-window.is-open:not(.is-fullscreen):not(.is-minimized) {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: min(62dvh, calc(100dvh - 100px)) !important;
    transform: none !important;
    border-radius: 14px !important;
    z-index: 2147483100 !important;
  }
}

/* Fullscreen */
#mfpWindow.chatbot-window.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  transform: none !important;
  z-index: 2147483500 !important;
}
#mfpWindow.chatbot-window.is-fullscreen .chatbot-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Minimizado: só header */
#mfpWindow.chatbot-window.is-minimized {
  position: fixed !important;
  left: auto !important;
  right: 20px !important;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  width: min(320px, calc(100vw - 24px)) !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
  border-radius: 12px !important;
  z-index: 2147483100 !important;
}
#mfpWindow.chatbot-window.is-minimized .chatbot-body,
#mfpWindow.chatbot-window.is-minimized .chat-suggestions,
#mfpWindow.chatbot-window.is-minimized .chatbot-input,
#mfpWindow.chatbot-window.is-minimized .chat-context-bar,
#mfpWindow.chatbot-window.is-minimized .disclaimer-header {
  display: none !important;
}
#mfpWindow.chatbot-window.is-minimized .chatbot-header {
  padding: 10px 12px !important;
  border-bottom: none !important;
}

/* Controles do header (minimizar / tela cheia / fechar) */
.chat-header-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.chat-ctrl-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ccc;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
  padding: 0;
  line-height: 1;
}
.chat-ctrl-btn:hover {
  color: #fff;
  border-color: var(--gold, #D4AF37);
  background: rgba(212, 175, 55, 0.12);
}
.chat-ctrl-btn:active {
  transform: scale(0.94);
}
.chat-ctrl-btn.is-active {
  color: var(--gold, #D4AF37);
  border-color: rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.15);
}

/* FAB sobe suavemente */
#chatbotFab {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease, opacity 0.2s ease;
}
body.terminal-open #chatbotRoot.is-fab-visible #chatbotFab,
body.terminal-open #chatbotFab {
  animation: proxFadeIn 0.35s ease both;
}

/* Backdrop sutil quando chat fullscreen */
body.chat-fullscreen::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2147483400;
  pointer-events: none;
  animation: proxFadeIn 0.25s ease both;
}

@media (prefers-reduced-motion: reduce) {
  #mfpWindow.chatbot-window,
  #mfpWindow.chatbot-window.is-open,
  #modalTerminal.active .modal-content,
  #calModal.is-open .cal-modal-sheet,
  .legal-modal.active {
    animation: none !important;
    transition: none !important;
  }
}


/* ==========================================================================
   v1.5.26 — Chart never blank (no transform on terminal content)
   ========================================================================== */
#modalTerminal .chart-wrap {
  background: #0c0e12 !important;
  position: relative !important;
  transform: none !important;
  filter: none !important;
  contain: layout style !important;
}
#modalTerminal .chart-plot {
  position: relative !important;
  width: 100% !important;
  height: 280px !important;
  min-height: 280px !important;
  max-height: 420px !important;
  overflow: hidden !important;
  background: #0a0b0e !important;
  transform: none !important;
}
#modalTerminal .chart-plot canvas,
#modalTerminal #mainChart {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 240px !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 2 !important;
}
@media (max-width: 900px) {
  #modalTerminal .chart-plot {
    height: 240px !important;
    min-height: 240px !important;
  }
}
@media (max-width: 900px) and (max-height: 700px) {
  #modalTerminal .chart-plot {
    height: 200px !important;
    min-height: 200px !important;
  }
}
/* Placeholder quando chart ainda não pintou */
#modalTerminal .chart-plot.is-empty::before {
  content: "Carregando gráfico…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  font-size: 0.78rem;
  z-index: 1;
  pointer-events: none;
}


/* ===== Agenda modal: fonte + ações organizadas (v1.5.38) ===== */
.cal-modal-source {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin: 14px 0 4px !important;
  padding: 12px 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.03) !important;
}
.cal-modal-source .cal-source-label,
.cal-modal-source > strong {
  display: block !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--text-dim, #8a919c) !important;
}
.cal-modal-source .cal-source-link,
.cal-modal-source a#calModalSourceLink,
.cal-modal-source a {
  display: block !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--gold, #D4AF37) !important;
  text-decoration: none !important;
  word-break: break-word !important;
  max-width: 100% !important;
}
.cal-modal-source a:hover {
  text-decoration: underline !important;
}
.cal-modal-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
  padding-top: 4px !important;
}
.cal-modal-actions .cal-action-primary,
.cal-modal-actions .cal-action-secondary,
.cal-modal-actions .cal-action-ghost,
.cal-modal-actions .cal-action-as-btn,
.cal-modal-actions a.cal-action-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
.cal-modal-actions a.cal-action-as-btn,
.cal-modal-actions a.cal-action-secondary {
  padding: 8px 14px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border-radius: 99px !important;
  border: 1px solid rgba(212,175,55,0.4) !important;
  background: rgba(212,175,55,0.08) !important;
  color: var(--gold, #D4AF37) !important;
  text-decoration: none !important;
}
.cal-modal-actions a.cal-action-as-btn:hover {
  filter: brightness(1.08);
  text-decoration: none !important;
}

/* ============================================================
   PRÓXIMAINVEST v1.0 — Correção de rolagem da página
   Corrige: página só rolava pela barra lateral; roda do mouse
   e gesto touch não moviam o conteúdo.
   Causa típica: overflow-x:hidden no html/body + height:100%
   ============================================================ */

/* Base: permitir scroll vertical com roda do mouse e touch */
html {
  overflow-x: clip !important;
  overflow-y: scroll !important;
  height: auto !important;
  min-height: 100% !important;
  overscroll-behavior-y: auto !important;
}

body {
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important;
  min-height: 100% !important;
  max-width: 100% !important;
  position: static !important;
  touch-action: pan-y pinch-zoom !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: auto !important;
}

/* Estado normal (sem modal): forçar página rolável */
html:not(.cal-modal-open):not(.modal-open),
body:not(.cal-modal-open):not(.modal-open):not(.plano-open):not(.mais-open) {
  overflow-y: scroll !important;
  overflow-x: clip !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
  touch-action: manipulation !important;
  overscroll-behavior-y: auto !important;
}

/* Garantir que o conteúdo principal recebe a roda do mouse */
body:not(.cal-modal-open):not(.modal-open) main,
body:not(.cal-modal-open):not(.modal-open) #app,
body:not(.cal-modal-open):not(.modal-open) .page,
body:not(.cal-modal-open):not(.modal-open) {
  touch-action: pan-y pinch-zoom !important;
  pointer-events: auto !important;
}

/* Imagens não estouram layout */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}

/* Mobile / tablet */
@media screen and (max-width: 1024px) {
  html:not(.cal-modal-open):not(.modal-open),
  body:not(.cal-modal-open):not(.modal-open):not(.plano-open):not(.mais-open) {
    overflow-y: scroll !important;
    overflow-x: clip !important;
    height: auto !important;
    position: static !important;
    touch-action: manipulation !important;
  }

  body {
    padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px));
  }
}

/* Quando um overlay está aberto: trava só o fundo (esperado) */
html.cal-modal-open,
body.cal-modal-open,
html.modal-open,
body.modal-open,
body.plano-open,
body.mais-open {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}


/* ============================================================
   PRÓXIMAINVEST v1.0 — Recursos / Novidades / Parceiros (padrão único)
   Cartões compactos + modal pequeno + grid responsivo
   ============================================================ */
.info-section .slots-intro,
.resources-section .slots-intro {
  margin-bottom: 1.1rem;
}
.info-grid,
.res-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)) !important;
  gap: 12px !important;
  width: 100%;
  align-items: stretch;
}
@media (min-width: 720px) {
  .info-grid,
  .res-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1100px) {
  .info-grid,
  .res-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Cartão compacto (novidades / parceiros) */
.info-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-height: 128px;
  padding: 14px 14px 12px;
  text-align: left;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(165deg, rgba(20,24,32,0.95), rgba(10,12,16,0.98));
  color: inherit;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, transform .15s ease;
}
.info-card:hover,
.info-card:focus-visible {
  border-color: rgba(212,175,55,0.4);
  outline: none;
  transform: translateY(-1px);
}
.info-card-kicker {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a929e;
}
.info-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #f0f2f5;
  line-height: 1.25;
}
.info-card-blurb {
  font-size: 0.78rem;
  color: #9aa3b2;
  line-height: 1.35;
  flex: 1 1 auto;
}
.info-card-meta {
  font-size: 0.68rem;
  color: rgba(212,175,55,0.85);
  margin-top: 4px;
}

/* Cartões de recursos: altura mais controlada */
.resource-card {
  min-height: 0 !important;
  padding: 14px 14px 12px !important;
}
.resource-card h3 {
  font-size: 0.95rem !important;
  margin: 6px 0 4px !important;
  line-height: 1.3 !important;
}
.resource-card > p {
  font-size: 0.78rem !important;
  line-height: 1.35 !important;
  color: #9aa3b2 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px !important;
}
.resource-card .actions {
  margin-top: auto !important;
  gap: 6px !important;
}
.resource-card .resource-link,
button.resource-link {
  padding: 8px 10px !important;
  font-size: 0.72rem !important;
}

/* Modal de apresentação — compacto + centrado (desktop e mobile) */
#resourceModal.resource-modal,
.resource-modal {
  z-index: 2147483600 !important;
}
#resourceModal.resource-modal.active,
.resource-modal.active {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  inset: 0 !important;
}
.guia-shell.info-modal-sheet,
#resourceModal .guia-shell {
  width: min(400px, calc(100vw - 32px)) !important;
  max-width: 400px !important;
  max-height: min(72vh, 520px) !important;
  margin: auto !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transform: none !important;
  bottom: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  animation: resourceModalIn 0.18s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes resourceModalIn {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
#resourceModal .guia-top {
  padding: 14px 16px 8px !important;
  flex: 0 0 auto;
}
#resourceModal .guia-top h2,
#resourceModal #guiaTitle {
  font-size: 1rem !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  padding-right: 28px;
}
#resourceModal .guia-body,
#resourceModal .info-modal-body {
  padding: 4px 16px 8px !important;
  overflow-y: auto !important;
  flex: 1 1 auto;
  max-height: none !important;
}
#resourceModal .guia-body p {
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  margin: 0 0 8px !important;
}
.info-modal-list {
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: disc;
}
.info-modal-list li {
  font-size: 0.84rem;
  line-height: 1.4;
  color: #c5cad3;
  margin: 0 0 8px;
}
#resourceModal .guia-foot,
.info-modal-foot {
  padding: 10px 16px 14px !important;
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,0.06);
}
#resourceModal .guia-note {
  font-size: 0.65rem !important;
  margin: 0 0 10px !important;
  color: #7a8490 !important;
}
.info-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.info-modal-cta,
#resourceModal .guia-btn-close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 8px 14px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border-radius: 99px !important;
  text-decoration: none !important;
  cursor: pointer;
  border: none;
}
.info-modal-cta {
  background: linear-gradient(145deg, var(--gold, #D4AF37), var(--gold-dark, #b8941f)) !important;
  color: #111 !important;
}
#resourceModal .guia-btn-close {
  background: transparent !important;
  color: #9aa3b2 !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}
@media (max-width: 640px) {
  /* Sempre centralizado no meio da tela (não bottom sheet) */
  #resourceModal.resource-modal.active {
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 14px !important;
  }
  .guia-shell.info-modal-sheet,
  #resourceModal .guia-shell {
    width: min(400px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    max-height: min(70vh, 480px) !important;
    border-radius: 14px !important;
    margin: auto !important;
  }
}


/* ============================================================
   Recursos cards — layout clean / fontes menores (v1.0.2)
   ============================================================ */
.res-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)) !important;
  gap: 10px !important;
}
@media (min-width: 720px) {
  .res-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
}
@media (min-width: 1100px) {
  .res-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.resource-card {
  min-height: 0 !important;
  height: auto !important;
  padding: 10px 11px 10px !important;
  border-radius: 8px !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
.resource-card .resource-top {
  margin-bottom: 4px !important;
  gap: 6px !important;
}
.resource-card .resource-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 0.75rem !important;
  border-radius: 6px !important;
}
.resource-card .resource-icon i {
  font-size: 0.78rem !important;
}
.resource-card .resource-level,
.resource-card .resource-category {
  font-size: 0.58rem !important;
  padding: 2px 6px !important;
  letter-spacing: 0.03em !important;
}
.resource-card h3 {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 2px 0 4px !important;
  letter-spacing: 0 !important;
  font-family: Inter, system-ui, sans-serif !important;
}
.resource-card > p {
  font-size: 0.68rem !important;
  line-height: 1.3 !important;
  color: #8b939e !important;
  margin: 0 0 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.resource-card .actions {
  margin-top: auto !important;
  gap: 5px !important;
  flex-wrap: wrap !important;
}
.resource-card .resource-link,
button.resource-link,
.resource-card a.resource-link {
  padding: 5px 8px !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  min-height: 28px !important;
  line-height: 1.2 !important;
}
.resource-card .dl-count,
.resource-card .extra-meta,
.resource-card .waitlist-box {
  font-size: 0.62rem !important;
}
.resource-card .waitlist-box input {
  padding: 6px 8px !important;
  font-size: 0.68rem !important;
  min-height: 28px !important;
}
.resource-card.resource-featured {
  padding: 10px 11px !important;
}
.resource-card.resource-featured h3 {
  font-size: 0.8rem !important;
}

/* info-card (novidades/parceiros) alinhado ao mesmo clean */
.info-card {
  min-height: 110px !important;
  padding: 11px 12px 10px !important;
  border-radius: 8px !important;
}
.info-card-kicker {
  font-size: 0.58rem !important;
}
.info-card-title {
  font-size: 0.8rem !important;
}
.info-card-blurb {
  font-size: 0.68rem !important;
}
.info-card-meta {
  font-size: 0.62rem !important;
}


/* ============================================================
   Tool cards (calculadoras) — mesmo padrão clean dos Recursos (v1.0)
   ============================================================ */
.tools-grid,
.grid-container.tools-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)) !important;
  gap: 10px !important;
}
@media (min-width: 720px) {
  .tools-grid,
  .grid-container.tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1100px) {
  .tools-grid,
  .grid-container.tools-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

.tool-card,
.tools-grid .tool-card,
#ferramentas .tool-card {
  padding: 10px 11px 10px !important;
  border-radius: 8px !important;
  gap: 6px !important;
  min-height: 0 !important;
  transform: none !important;
}
.tool-card:hover,
.tools-grid .tool-card:hover,
#ferramentas .tool-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35) !important;
}

.tool-card i,
.tools-grid .tool-card > i,
#ferramentas .tool-card i {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  font-size: 0.78rem !important;
  margin-bottom: 2px !important;
  border-radius: 6px !important;
  filter: none !important;
}

.tool-card h3,
.tools-grid .tool-card h3,
#ferramentas .tool-card h3,
#ferramentas h3 {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  margin: 0 0 2px !important;
  color: #e8ecf0 !important;
}

.tool-card p,
.tools-grid .tool-card p,
#ferramentas .tool-card p {
  font-size: 0.68rem !important;
  line-height: 1.3 !important;
  color: #8b939e !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* journey / lab cards alinhados */
.journey-card,
.lab-card {
  padding: 10px 12px !important;
  border-radius: 8px !important;
}
.journey-card strong,
.lab-card h3 {
  font-size: 0.8rem !important;
}
.journey-card small,
.lab-card p {
  font-size: 0.68rem !important;
}

.tools-group-head h3,
.tools-group-head .tools-group-title {
  font-size: 0.78rem !important;
}

/* ============================================================
   Ferramentas — cards clean, um pouco maiores (v1.0.5)
   ============================================================ */
#ferramentas.tools-section,
section#ferramentas {
  padding-left: 4% !important;
  padding-right: 4% !important;
}

#ferramentas .tools-intro {
  max-width: 440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#ferramentas .tools-group {
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 32px !important;
}

#ferramentas .tools-group-head {
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  gap: 12px !important;
}

#ferramentas .tools-group-num {
  font-size: 0.65rem !important;
  padding-top: 4px !important;
  min-width: 22px !important;
}

#ferramentas .tools-group-head h3 {
  font-size: 0.78rem !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 3px !important;
}

#ferramentas .tools-group-head p {
  font-size: 0.72rem !important;
  line-height: 1.4 !important;
  color: #6b7280 !important;
}

#ferramentas .grid-container.tools-grid,
#ferramentas .tools-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 860px !important;
  width: 100% !important;
  justify-content: center !important;
  background: transparent !important;
}

@media (max-width: 640px) {
  #ferramentas .grid-container.tools-grid,
  #ferramentas .tools-grid {
    grid-template-columns: 1fr !important;
    max-width: 400px !important;
  }
}
@media (min-width: 641px) and (max-width: 900px) {
  #ferramentas .grid-container.tools-grid,
  #ferramentas .tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    max-width: 760px !important;
  }
}

#ferramentas .tool-card,
#ferramentas .tools-grid .tool-card {
  padding: 14px 14px 13px !important;
  border-radius: 10px !important;
  gap: 6px !important;
  min-height: 0 !important;
  height: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

#ferramentas .tool-card:hover,
#ferramentas .tools-grid .tool-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.32) !important;
}

#ferramentas .tool-card i,
#ferramentas .tools-grid .tool-card > i,
#ferramentas .tool-card > i {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  font-size: 0.85rem !important;
  margin-bottom: 4px !important;
  border-radius: 8px !important;
  filter: none !important;
}

#ferramentas .tool-card h3,
#ferramentas .tools-grid .tool-card h3 {
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.25 !important;
  margin: 0 0 2px !important;
  color: #e8ecf0 !important;
}

#ferramentas .tool-card p,
#ferramentas .tools-grid .tool-card p {
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
  color: #8b939e !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

#ferramentas .tools-footnote {
  max-width: 600px !important;
  margin: 8px auto 0 !important;
  font-size: 0.7rem !important;
}

/* Recursos cards — alinhados */
#recursos .res-grid {
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#recursos .resource-card h3 {
  font-size: 0.8rem !important;
}
#recursos .resource-card > p {
  font-size: 0.7rem !important;
}
#recursos .resource-card {
  padding: 12px 12px !important;
}

/* ============================================================
   Footer compacto (v1.0.5)
   ============================================================ */
footer,
footer#footer {
  padding: 36px 5% 28px !important;
  border-top: 1px solid var(--border, rgba(255,255,255,0.06)) !important;
}

footer .footer-grid,
#footer .footer-grid {
  display: grid !important;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr !important;
  gap: 24px 28px !important;
  margin-bottom: 24px !important;
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

footer .footer-logo,
#footer .footer-logo {
  font-size: 0.78rem !important;
  letter-spacing: 0.18em !important;
  margin-bottom: 10px !important;
}

footer .social-links,
#footer .social-links {
  gap: 8px !important;
  margin-top: 12px !important;
}

footer .social-links a,
#footer .social-links a {
  width: 28px !important;
  height: 28px !important;
  font-size: 0.75rem !important;
  border-width: 1px !important;
  transition: 0.2s !important;
}

footer .footer-col h5,
#footer .footer-col h5 {
  font-size: 0.62rem !important;
  letter-spacing: 0.12em !important;
  margin-bottom: 10px !important;
  color: var(--text-main, #e8ecf0) !important;
}

footer .footer-col a,
#footer .footer-col a {
  font-size: 0.72rem !important;
  margin-bottom: 6px !important;
  line-height: 1.35 !important;
}

footer .footer-col a:hover,
#footer .footer-col a:hover {
  transform: translateX(3px) !important;
}

footer .edu-disclaimer-footer,
#footer .edu-disclaimer-footer {
  margin-top: 10px !important;
  padding-top: 10px !important;
  font-size: 0.62rem !important;
  line-height: 1.45 !important;
  max-width: 36rem !important;
}

footer .footer-col p,
#footer .footer-col p {
  font-size: 0.7rem !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
}

footer #newsletter-form input[type="email"],
#footer #newsletter-form input[type="email"] {
  padding: 8px 10px !important;
  font-size: 0.72rem !important;
}

footer #newsletter-form button,
#footer #newsletter-form button {
  padding: 8px 12px !important;
  font-size: 0.72rem !important;
}

@media (max-width: 768px) {
  footer .footer-grid,
  #footer .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 16px !important;
  }
}
@media (max-width: 480px) {
  footer .footer-grid,
  #footer .footer-grid {
    grid-template-columns: 1fr !important;
  }
  footer,
  footer#footer {
    padding: 28px 4% 22px !important;
  }
}

/* ============================================================
   v1.0.6 — Mobile section sheets + tool cards app-list
   ============================================================ */

/* Mobile section sheet (Recursos / Novidades como “aba”) */
.ms-sheet {
  display: none;
  position: fixed;
  inset: 0;
  /* abaixo da bottom nav (2147483000) para Home/Calcs funcionarem */
  z-index: 2147482000;
  flex-direction: column;
  background: var(--bg, #07090d);
  color: var(--text-body, #c5cad3);
  /* deixa espaço para a bottom nav */
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.ms-sheet.is-open {
  display: flex !important;
}
.ms-sheet-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-top, 0px));
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
  background: color-mix(in srgb, var(--surface-2, #0c0e12) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.ms-sheet-back {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 8px;
  background: transparent;
  color: var(--text-main, #e8ecf0);
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ms-sheet-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-main, #e8ecf0);
  margin: 0;
}
.ms-sheet-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 12px calc(72px + env(safe-area-inset-bottom, 0px));
}
.ms-sheet-body .resources-section,
.ms-sheet-body .info-section,
.ms-sheet-body #recursos,
.ms-sheet-body #novidades {
  padding: 8px 0 24px !important;
  margin: 0 !important;
  max-width: none !important;
  border: none !important;
  background: transparent !important;
}
body.ms-open {
  overflow: hidden !important;
}

/* Em mobile: Recursos/Novidades/Parceiros saem do scroll longo da home */
@media (max-width: 1024px) {
  body:not(.ms-open) #recursos.resources-section,
  body:not(.ms-open) #novidades.info-section,
  body:not(.ms-open) #parceiros.info-section {
    /* mantém no DOM para o sheet mover; esconde no fluxo da home */
  }
}

/* Tool cards — mobile estilo lista de app */
@media (max-width: 720px) {
  #ferramentas .tools-group {
    max-width: 100% !important;
    margin-bottom: 20px !important;
    padding: 0 2px;
  }
  #ferramentas .grid-container.tools-grid,
  #ferramentas .tools-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  #ferramentas .tool-card,
  #ferramentas .tools-grid .tool-card {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 12px !important;
    border-radius: 12px !important;
    min-height: 56px !important;
  }
  #ferramentas .tool-card i,
  #ferramentas .tools-grid .tool-card > i {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  #ferramentas .tool-card h3,
  #ferramentas .tools-grid .tool-card h3 {
    font-size: 0.84rem !important;
    margin: 0 0 2px !important;
  }
  #ferramentas .tool-card p,
  #ferramentas .tools-grid .tool-card p {
    font-size: 0.7rem !important;
    -webkit-line-clamp: 1 !important;
    line-height: 1.3 !important;
  }
  /* texto ao lado do ícone */
  #ferramentas .tool-card > i + h3 {
    /* structure is i, h3, p — wrap via grid on the text block */
  }
  #ferramentas .tool-card {
    display: grid !important;
    grid-template-columns: 40px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 2px !important;
    align-items: center !important;
  }
  #ferramentas .tool-card > i {
    grid-row: 1 / span 2 !important;
    grid-column: 1 !important;
    align-self: center !important;
  }
  #ferramentas .tool-card > h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  #ferramentas .tool-card > p {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }
  #ferramentas .tools-group-head {
    margin-bottom: 8px !important;
    padding-bottom: 6px !important;
  }
  #ferramentas .tools-section {
    padding: 20px 4% 16px !important;
  }
}

@media (min-width: 421px) and (max-width: 720px) {
  #ferramentas .grid-container.tools-grid,
  #ferramentas .tools-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Home mobile mais clean: seções longas só via Mais */
@media (max-width: 1024px) {
  body:not(.ms-open) #recursos,
  body:not(.ms-open) #novidades,
  body:not(.ms-open) #parceiros {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }
  /* quando dentro do sheet, normal */
  .ms-sheet-body #recursos,
  .ms-sheet-body #novidades,
  .ms-sheet-body #parceiros {
    position: static !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }
}

/* ============================================================
   v1.0.8 — Mobile-first polish: tipografia, transições, nav
   ============================================================ */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 0.1s;
  --dur-med: 0.16s;
  --dur-slow: 0.22s;
}

/* —— Tipografia calculadoras mobile (títulos + texto legíveis) —— */
@media (max-width: 720px) {
  #ferramentas .tools-intro h2,
  #ferramentas #toolsHeading {
    font-size: 1.15rem !important;
    letter-spacing: 0.06em !important;
  }
  #ferramentas .tools-intro-text {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }
  #ferramentas .tools-group-head h3 {
    font-size: 0.78rem !important;
    letter-spacing: 0.1em !important;
  }
  #ferramentas .tools-group-head p {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
  }
  #ferramentas .tools-group-num {
    font-size: 0.68rem !important;
  }

  #ferramentas .tool-card,
  #ferramentas .tools-grid .tool-card {
    display: grid !important;
    grid-template-columns: 44px 1fr !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 3px !important;
    align-items: center !important;
    padding: 14px 14px !important;
    border-radius: 14px !important;
    min-height: 64px !important;
    transition:
      transform var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) ease,
      background var(--dur-fast) ease,
      box-shadow var(--dur-med) var(--ease-out) !important;
  }
  #ferramentas .tool-card > i,
  #ferramentas .tools-grid .tool-card > i {
    grid-row: 1 / span 2 !important;
    grid-column: 1 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    font-size: 1.05rem !important;
    border-radius: 12px !important;
    margin: 0 !important;
    transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease !important;
  }
  #ferramentas .tool-card > h3,
  #ferramentas .tools-grid .tool-card h3 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    letter-spacing: 0.01em !important;
    margin: 0 !important;
  }
  #ferramentas .tool-card > p,
  #ferramentas .tools-grid .tool-card p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    -webkit-line-clamp: 2 !important;
    margin: 0 !important;
  }
  #ferramentas .tool-card:active,
  #ferramentas .tools-grid .tool-card:active {
    transform: scale(0.98) !important;
  }
  #ferramentas .tool-card:active > i {
    transform: scale(1.08) !important;
  }
}

/* —— Bottom nav: feedback ao toque —— */
@media (max-width: 1024px) {
  #bottomNav .bn-item {
    transition:
      color var(--dur-fast) ease,
      background var(--dur-fast) ease,
      transform var(--dur-fast) var(--ease-out) !important;
    border-radius: 12px !important;
    -webkit-tap-highlight-color: transparent;
  }
  #bottomNav .bn-item i,
  #bottomNav .bn-item svg {
    transition: transform var(--dur-fast) var(--ease-spring) !important;
  }
  #bottomNav .bn-item:active {
    transform: scale(0.92) !important;
  }
  #bottomNav .bn-item:active i,
  #bottomNav .bn-item:active svg {
    transform: scale(1.12) !important;
  }
  #bottomNav .bn-item.is-active {
    transition: color var(--dur-med) ease, background var(--dur-med) ease !important;
  }
  #bottomNav .bn-item.is-active i {
    animation: bnIconPop 0.35s var(--ease-spring) both;
  }
}

@keyframes bnIconPop {
  0% { transform: scale(0.85); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* —— Menu Mais: entrada/saída suave —— */
.bn-mais-sheet {
  transition: opacity var(--dur-med) var(--ease-out) !important;
}
.bn-mais-sheet:not(.is-open) {
  opacity: 0;
  pointer-events: none;
}
.bn-mais-sheet.is-open {
  opacity: 1 !important;
  animation: maisFadeIn var(--dur-med) var(--ease-out) both;
}
.bn-mais-backdrop {
  transition: opacity var(--dur-med) ease !important;
}
.bn-mais-panel {
  transform: translateY(100%);
  transition: transform var(--dur-slow) var(--ease-out) !important;
}
.bn-mais-sheet.is-open .bn-mais-panel {
  transform: translateY(0) !important;
  animation: maisSlideUp var(--dur-slow) var(--ease-out) both;
}

@keyframes maisFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes maisSlideUp {
  from { transform: translateY(28%); opacity: 0.85; }
  to { transform: translateY(0); opacity: 1; }
}

.bn-mais-list button,
.bn-mais-list a {
  transition:
    background var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out),
    color var(--dur-fast) ease !important;
  -webkit-tap-highlight-color: transparent;
}
.bn-mais-list button:active,
.bn-mais-list a:active {
  transform: scale(0.98) !important;
  background: color-mix(in srgb, var(--gold, #D4AF37) 12%, transparent) !important;
}
.bn-mais-ico {
  transition: transform var(--dur-fast) var(--ease-spring) !important;
}
.bn-mais-list button:active .bn-mais-ico,
.bn-mais-list a:active .bn-mais-ico {
  transform: scale(1.12) !important;
}
.bn-q {
  transition:
    transform var(--dur-fast) var(--ease-spring),
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease !important;
}
.bn-q:active {
  transform: scale(0.9) !important;
}
.bn-q i {
  transition: transform var(--dur-fast) var(--ease-spring) !important;
}
.bn-q:active i {
  transform: scale(1.15) rotate(-6deg) !important;
}
.bn-theme {
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease !important;
}
.bn-theme:active {
  transform: scale(0.88) !important;
}
.bn-theme.is-active {
  animation: bnIconPop 0.4s var(--ease-spring) both;
}

/* —— Mobile section sheet (Recursos etc.) —— */
.ms-sheet {
  opacity: 0;
  transform: translateX(12%);
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out) !important;
}
.ms-sheet.is-open {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
.ms-sheet-back {
  transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease !important;
}
.ms-sheet-back:active {
  transform: scale(0.9) !important;
}

/* —— Meu Plano drawer —— */
.mp-overlay {
  transition: opacity var(--dur-med) ease !important;
}
.mp-overlay[hidden] {
  display: none !important;
}
.mp-drawer {
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-med) ease !important;
}
.mp-overlay.is-open .mp-drawer,
.mp-overlay:not([hidden]) .mp-drawer {
  animation: maisSlideUp var(--dur-slow) var(--ease-out) both;
}
.mp-btn-primary,
.mp-btn-secondary,
.mp-btn-ghost,
.mp-close,
.mp-mask-btn {
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease !important;
}
.mp-btn-primary:active,
.mp-btn-secondary:active,
.mp-btn-ghost:active {
  transform: scale(0.96) !important;
}
.mp-close:active,
.mp-mask-btn:active {
  transform: scale(0.9) !important;
}

/* —— Form perfil modal —— */
.plano-form-modal {
  transition: opacity var(--dur-med) ease !important;
}
.plano-form-modal.active .plano-form-shell {
  animation: formSheetIn var(--dur-slow) var(--ease-out) both;
}
@keyframes formSheetIn {
  from { transform: translateY(24px); opacity: 0.6; }
  to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 559px) {
  @keyframes formSheetIn {
    from { transform: translateY(40%); opacity: 0.7; }
    to { transform: translateY(0); opacity: 1; }
  }
}
.pf-save,
.pf-cancel {
  transition: transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) ease !important;
}
.pf-save:active,
.pf-cancel:active {
  transform: scale(0.97) !important;
}
.pf-field input:focus {
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold, #D4AF37) 25%, transparent);
}

/* —— Terminal / calculadora modal —— */
#modalTerminal.modal {
  transition: opacity var(--dur-med) ease !important;
}
#modalTerminal .modal-content {
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-med) ease !important;
}
#modalTerminal.active .modal-content {
  animation: modalRise var(--dur-slow) var(--ease-out) both;
}
@keyframes modalRise {
  from { transform: translateY(18px) scale(0.98); opacity: 0.5; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
#modalTerminal .header-icon-btn,
#modalTerminal .term-link,
#modalTerminal .btn {
  transition:
    transform var(--dur-fast) var(--ease-out),
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    border-color var(--dur-fast) ease !important;
}
#modalTerminal .header-icon-btn:active,
#modalTerminal .btn:active {
  transform: scale(0.92) !important;
}

/* —— Chatbot FAB feedback —— */
#chatbotFab.chatbot-btn {
  transition:
    transform var(--dur-med) var(--ease-spring),
    box-shadow var(--dur-med) ease,
    border-radius 0s !important;
}
#chatbotFab.chatbot-btn:active {
  transform: scale(0.9) !important;
}

/* —— Journey / home cards mobile —— */
@media (max-width: 720px) {
  .journey-card {
    transition:
      transform var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) ease,
      box-shadow var(--dur-med) ease !important;
  }
  .journey-card:active {
    transform: scale(0.98) !important;
  }
  .nav-icon-btn,
  .nav-mp,
  .theme-palette-btn {
    transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease !important;
  }
  .nav-icon-btn:active,
  .nav-mp:active,
  .theme-palette-btn:active {
    transform: scale(0.9) !important;
  }
}

/* —— Preferência: menos movimento —— */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Agenda dentro do sheet mobile */
.ms-sheet-body .cal-section,
.ms-sheet-body #calendario {
  position: static !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  pointer-events: auto !important;
  padding: 8px 0 24px !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
  max-width: none !important;
}

/* ============================================================
   v1.0.12 — Ações do terminal COMPACTAS + gráfico com mais espaço
   ============================================================ */

#modalTerminal .share-buttons-container {
  margin-top: 6px !important;
  padding: 6px 4px 8px !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: transparent !important;
}

#modalTerminal .share-buttons-container .share-title,
#modalTerminal .term-edu-line {
  font-size: 0.55rem !important;
  margin: 0 0 4px !important;
  line-height: 1.3 !important;
  opacity: 0.75;
}

/* Cenários em faixa fina */
#modalTerminal .term-scenario-bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 0 6px !important;
  padding: 3px 4px !important;
  border-radius: 6px !important;
  min-height: 0 !important;
}
#modalTerminal .term-scenario-bar .term-scenario-label,
#modalTerminal .term-scenario-bar > span {
  font-size: 0.52rem !important;
  margin: 0 2px 0 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap;
}
#modalTerminal .term-scenario-bar button {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  min-height: 26px !important;
  height: 26px !important;
  padding: 0 6px !important;
  font-size: 0.62rem !important;
  border-radius: 4px !important;
  line-height: 1 !important;
}

/* Grid de ações denso */
#modalTerminal .term-actions-compact {
  gap: 4px !important;
}
#modalTerminal .term-actions-compact .btn-group,
#modalTerminal .share-buttons-container .btn-group,
#modalTerminal .term-integ-group,
#modalTerminal .term-export-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 4px !important;
  margin: 0 !important;
}

#modalTerminal .term-integ-group .btn,
#modalTerminal .term-export-group .btn,
#modalTerminal .share-buttons-container .btn,
#modalTerminal .share-buttons-container .btn.btn-compact,
#modalTerminal .btn.btn-compact {
  min-height: 30px !important;
  height: auto !important;
  padding: 5px 8px !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  border-radius: 5px !important;
  gap: 5px !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}
#modalTerminal .btn.btn-compact i,
#modalTerminal .term-export-group .btn i,
#modalTerminal .term-integ-group .btn i {
  font-size: 0.7rem !important;
}
#modalTerminal .term-export-group .btn.btn-close {
  grid-column: 1 / -1 !important;
  min-height: 28px !important;
  padding: 4px 8px !important;
  font-size: 0.62rem !important;
}

/* Gráfico: mais altura por padrão no terminal */
#modalTerminal .chart-wrap {
  min-height: 220px !important;
}
#modalTerminal .chart-plot {
  min-height: 200px !important;
  height: min(42vh, 360px) !important;
}

/* Expandido: esconde ações e dá quase toda a altura ao gráfico */
#modalTerminal .results-container.expanded-chart .share-buttons-container,
#modalTerminal .results-container.expanded-chart .term-scenario-bar,
#modalTerminal .results-container.expanded-chart .term-actions-compact {
  display: none !important;
}
#modalTerminal .results-container.expanded-chart .chart-wrap {
  flex: 1 1 auto !important;
  min-height: 70vh !important;
  max-height: none !important;
  margin: 0 !important;
}
#modalTerminal .results-container.expanded-chart .chart-plot {
  height: min(78vh, 640px) !important;
  min-height: 320px !important;
}

@media (max-width: 720px) {
  #modalTerminal .share-buttons-container {
    padding: 4px 2px 6px !important;
    margin-top: 4px !important;
  }
  #modalTerminal .term-scenario-bar {
    padding: 2px 3px !important;
    margin: 0 0 4px !important;
  }
  #modalTerminal .term-scenario-bar button {
    min-height: 24px !important;
    height: 24px !important;
    font-size: 0.58rem !important;
    padding: 0 4px !important;
  }
  #modalTerminal .term-integ-group .btn,
  #modalTerminal .term-export-group .btn,
  #modalTerminal .btn.btn-compact {
    min-height: 28px !important;
    padding: 4px 6px !important;
    font-size: 0.6rem !important;
    border-radius: 4px !important;
  }
  #modalTerminal .btn.btn-compact span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #modalTerminal .chart-plot {
    height: min(38vh, 280px) !important;
    min-height: 180px !important;
  }
  #modalTerminal .results-container.expanded-chart .chart-plot {
    height: min(72vh, 560px) !important;
    min-height: 280px !important;
  }
  /* Em mobile expandido, footer de ações some de vez */
  #modalTerminal .results-container.expanded-chart .share-buttons-container {
    display: none !important;
  }
}

@media (min-width: 900px) {
  #modalTerminal .chart-plot {
    height: min(48vh, 420px) !important;
  }
  #modalTerminal .results-container.expanded-chart .chart-plot {
    height: min(75vh, 680px) !important;
  }
}

/* ============================================================
   v1.0.13 — Radios/checkboxes: interior preenchido quando ativo
   ============================================================ */

#modalTerminal input[type="radio"],
#modalTerminal input[type="checkbox"],
.control-panel input[type="radio"],
.control-panel input[type="checkbox"],
#modalTerminal .control-panel input[type="radio"],
#modalTerminal .control-panel input[type="checkbox"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 18px !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  position: relative !important;
  display: inline-grid !important;
  place-content: center !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Radio = círculo */
#modalTerminal input[type="radio"],
.control-panel input[type="radio"] {
  border-radius: 50% !important;
}

/* Checkbox = canto arredondado */
#modalTerminal input[type="checkbox"],
.control-panel input[type="checkbox"] {
  border-radius: 4px !important;
}

/* ATIVO: preenche interior com a cor da paleta */
#modalTerminal input[type="radio"]:checked,
#modalTerminal input[type="checkbox"]:checked,
.control-panel input[type="radio"]:checked,
.control-panel input[type="checkbox"]:checked,
html[data-theme] #modalTerminal input[type="radio"]:checked,
html[data-theme] #modalTerminal input[type="checkbox"]:checked {
  border-color: var(--gold, #D4AF37) !important;
  background-color: var(--gold, #D4AF37) !important;
  background-image: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #D4AF37) 22%, transparent) !important;
}

/* Ponto interior no radio ativo (contraste) */
#modalTerminal input[type="radio"]:checked::after,
.control-panel input[type="radio"]:checked::after,
html[data-theme] #modalTerminal input[type="radio"]:checked::after {
  content: "" !important;
  display: block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #0a0a0a !important;
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  border: none !important;
}

/* Checkmark no checkbox ativo */
#modalTerminal input[type="checkbox"]:checked::after,
.control-panel input[type="checkbox"]:checked::after,
html[data-theme] #modalTerminal input[type="checkbox"]:checked::after {
  content: "" !important;
  display: block !important;
  width: 5px !important;
  height: 9px !important;
  border: solid #0a0a0a !important;
  border-width: 0 2px 2px 0 !important;
  transform: rotate(45deg) !important;
  position: static !important;
  margin: -1px 0 0 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Label do item ativo mais legível */
#modalTerminal .radio-group label:has(input:checked),
#modalTerminal .checkbox-group label:has(input:checked),
#modalTerminal .input-group label:has(input:checked),
#modalTerminal .control-panel label:has(input:checked) {
  color: var(--text-main, #f0f2f5) !important;
  font-weight: 600 !important;
}

/* Hit-area maior no mobile sem aumentar o desenho */
@media (max-width: 720px) {
  #modalTerminal input[type="radio"],
  #modalTerminal input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex: 0 0 20px !important;
  }
  #modalTerminal .radio-group label,
  #modalTerminal .checkbox-group label,
  #modalTerminal .control-panel label:has(input[type="radio"]),
  #modalTerminal .control-panel label:has(input[type="checkbox"]) {
    min-height: 44px !important;
    padding: 8px 4px !important;
    gap: 10px !important;
  }
}

/* ============================================================
   v1.0.14 — Transições CSS suaves (global, performante)
   ============================================================ */

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 0.1s;
  --dur-med: 0.16s;
  --dur-slow: 0.22s;
  --dur-theme: 0.18s;
}

/* —— Tema / fundo: transição de cores —— */
html {
  transition:
    background-color var(--dur-theme) var(--ease-in-out),
    color var(--dur-theme) var(--ease-in-out);
}
body,
.site-header,
.top-ticker,
#bottomNav,
.bn-mais-panel,
.ms-sheet,
.mp-drawer,
#modalTerminal .modal-content,
.tool-card,
.journey-card,
.info-card,
.resource-card {
  transition:
    background-color var(--dur-theme) var(--ease-in-out),
    background var(--dur-theme) var(--ease-in-out),
    border-color var(--dur-theme) var(--ease-in-out),
    color var(--dur-theme) var(--ease-in-out),
    box-shadow var(--dur-med) var(--ease-out);
}

/* Accent / gold surfaces */
.section-tag,
.ticker-live-badge,
.cta-primary,
.tab-btn,
.bn-mais-logo,
.logo-text {
  transition:
    color var(--dur-theme) var(--ease-in-out),
    background-color var(--dur-theme) var(--ease-in-out),
    background var(--dur-theme) var(--ease-in-out),
    border-color var(--dur-theme) var(--ease-in-out);
}

/* —— Interativos genéricos —— */
a, button, .btn,
.nav-icon-btn, .header-icon-btn,
.tool-card, .journey-card, .info-card, .resource-card,
.bn-item, .bn-q, .bn-mais-tile, .bn-theme,
.tab-btn, .ms-sheet-back, .mp-close,
#chatbotFab,
input, select, textarea {
  transition:
    transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    background var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-med) var(--ease-out),
    filter var(--dur-fast) ease;
}

/* Hover desktop (só onde faz sentido) */
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover,
  .journey-card:hover,
  .info-card:hover,
  .resource-card:hover {
    transform: translateY(-2px);
  }
  .btn:hover,
  .cta-primary:hover,
  .tab-btn:hover {
    filter: brightness(1.06);
  }
  a:hover {
    opacity: 0.92;
  }
}

/* Active / press */
.btn:active,
.tool-card:active,
.journey-card:active,
.bn-item:active,
.bn-q:active,
.bn-mais-tile:active,
.tab-btn:active,
.cta-primary:active {
  transform: scale(0.98);
  transition-duration: 0.08s;
}

/* —— Bottom nav —— */
#bottomNav .bn-item {
  transition:
    color var(--dur-fast) ease,
    background-color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}
#bottomNav .bn-item i {
  transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-fast) ease;
}
#bottomNav .bn-item.is-active i {
  animation: bnIconPop 0.34s var(--ease-spring) both;
}

/* —— Menu Mais —— */
.bn-mais-sheet {
  transition: opacity var(--dur-med) var(--ease-out);
}
.bn-mais-backdrop {
  transition: opacity var(--dur-med) ease;
}
.bn-mais-panel {
  transition: transform var(--dur-slow) var(--ease-out);
}
.bn-mais-sheet.is-open .bn-mais-panel {
  transform: translateY(0);
}
.bn-mais-list button,
.bn-mais-list a,
.bn-mais-tile {
  transition:
    background-color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) ease;
}
.bn-mais-ico {
  transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) ease;
}
.bn-soc {
  transition:
    transform var(--dur-med) var(--ease-spring),
    background var(--dur-fast) ease,
    color var(--dur-fast) ease,
    box-shadow var(--dur-med) ease,
    border-color var(--dur-fast) ease;
}

/* —— Sheets mobile (Recursos etc.) —— */
.ms-sheet {
  transition:
    opacity var(--dur-med) var(--ease-out),
    transform var(--dur-med) var(--ease-out);
}
.ms-sheet.is-open {
  opacity: 1;
  transform: translateX(0);
}
.ms-sheet-back {
  transition: transform var(--dur-fast) var(--ease-spring), background-color var(--dur-fast) ease;
}

/* —— Modal terminal —— */
#modalTerminal.modal {
  transition: opacity var(--dur-med) var(--ease-out);
}
#modalTerminal .modal-content {
  transition:
    transform var(--dur-slow) var(--ease-out),
    opacity var(--dur-med) ease;
}
#modalTerminal.active .modal-content {
  animation: modalRise var(--dur-slow) var(--ease-out) both;
}
#modalTerminal .btn,
#modalTerminal .header-icon-btn {
  transition:
    transform var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease;
}
#modalTerminal input[type="radio"],
#modalTerminal input[type="checkbox"] {
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-spring) !important;
}
#modalTerminal input[type="radio"]:checked,
#modalTerminal input[type="checkbox"]:checked {
  transform: scale(1.05);
}
#modalTerminal .term-scenario-bar button {
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}
#modalTerminal .chart-wrap,
#modalTerminal .chart-plot {
  transition: height var(--dur-slow) var(--ease-out), min-height var(--dur-slow) var(--ease-out);
}

/* —— Resource / info modal —— */
#resourceModal.resource-modal {
  transition: opacity var(--dur-med) ease, background-color var(--dur-med) ease;
}
#resourceModal .guia-shell {
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-med) ease;
}

/* —— Meu Plano —— */
.mp-overlay {
  transition: opacity var(--dur-med) ease;
}
.mp-drawer {
  transition: transform var(--dur-slow) var(--ease-out);
}

/* —— Chat FAB —— */
#chatbotFab.chatbot-btn {
  transition:
    transform var(--dur-med) var(--ease-spring),
    box-shadow var(--dur-med) ease,
    background-color var(--dur-fast) ease;
}
#chatbotFab.chatbot-btn:hover {
  transform: scale(1.06);
}
#chatbotFab.chatbot-btn:active {
  transform: scale(0.92);
}

/* —— Focus visível suave —— */
:focus-visible {
  outline: 2px solid var(--gold, #D4AF37);
  outline-offset: 2px;
  transition: outline-offset var(--dur-fast) ease;
}

/* —— Tabs recursos —— */
.tab-btn {
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    color var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-out);
}

/* —— Preferência: reduzir movimento —— */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   v1.0.15 — FLIP helpers (não competir com transform do JS)
   ============================================================ */
.ms-sheet.is-open .ms-sheet-body.flip-animating,
.bn-mais-panel.flip-animating,
#modalTerminal .chart-wrap.flip-animating {
  /* estilos aplicados só via inline durante FLIP */
}
@media (prefers-reduced-motion: reduce) {
  .ms-sheet,
  .bn-mais-panel,
  #modalTerminal .chart-wrap {
    transition: none !important;
  }
}


/* ============================================================
   v1.0.16 — Performance: content-visibility + contain
   ============================================================ */

/* Secções abaixo da dobra: o browser pode adiar render/layout */
#ferramentas.tools-section,
#recursos.resources-section,
#novidades,
#parceiros,
#calendario.cal-section,
footer#footer,
.cal-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px;
}

/* Isolar layout de cards (menos invalidação em cascata) */
.tool-card,
.journey-card,
.info-card,
.resource-card,
.bn-mais-tile {
  contain: layout paint style;
}

/* Ticker: só anima quando visível (pausar offscreen via CSS se possível) */
.top-ticker {
  content-visibility: auto;
  contain-intrinsic-size: 42px 42px;
}
.ticker-track {
  /* will-change só durante animação contínua — ok no ticker */
  contain: layout;
}

/* Modal terminal: isola pintura */
#modalTerminal .modal-content {
  contain: layout paint;
}
#modalTerminal .chart-wrap {
  contain: strict;
  content-visibility: auto;
  contain-intrinsic-size: 240px 240px;
}

/* Reduz custo de sombra em mobile */
@media (max-width: 720px) {
  .tool-card,
  .journey-card,
  .info-card {
    box-shadow: none;
  }
  .ticker-track {
    animation-duration: 56s; /* mais lento = menos trabalho percetível */
  }
}

/* GPU: transforms já preferidos nas transições v1.0.14 */


/* ============================================================
   v1.0.18 — Windows topo cortado + Ferramentas mobile
   ============================================================ */

:root {
  --ticker-h: 42px;
  --header-h: 64px;
  --chrome-h: calc(var(--ticker-h) + var(--header-h));
}

/* Desktop: garantir espaço real sob ticker+header (evita corte do hero) */
@media (min-width: 1025px) {
  body {
    padding-top: calc(var(--chrome-h) + 8px) !important;
  }
  html {
    scroll-padding-top: calc(var(--chrome-h) + 16px) !important;
  }
  #hero.hero,
  #hero.hero-platform,
  .hero-platform {
    padding-top: 48px !important;
    overflow: visible !important;
  }
  .hero-title,
  .hero-platform h1,
  .hero-line {
    overflow: visible !important;
    line-height: 1.3 !important;
    padding-top: 4px !important;
  }
  header.site-header,
  .site-header {
    top: var(--ticker-h) !important;
    min-height: var(--header-h);
    box-sizing: border-box;
  }
  .top-ticker {
    height: var(--ticker-h) !important;
  }
}

/* Mobile: só ticker fixo (header escondido) — menos padding, secções acessíveis */
@media (max-width: 1024px) {
  :root {
    --chrome-h: calc(var(--ticker-h) + env(safe-area-inset-top, 0px));
  }
  body {
    padding-top: calc(var(--ticker-h) + env(safe-area-inset-top, 0px) + 6px) !important;
  }
  html {
    scroll-padding-top: calc(var(--ticker-h) + env(safe-area-inset-top, 0px) + 12px) !important;
  }
  #ferramentas,
  #ferramentas.tools-section {
    content-visibility: visible !important;
    contain: none !important;
    scroll-margin-top: calc(var(--ticker-h) + 12px) !important;
  }
  #jornada,
  #calendario,
  #hero {
    scroll-margin-top: calc(var(--ticker-h) + 12px) !important;
  }
}

/* Bottom nav: label Ferramentas legível (5 itens) */
@media (max-width: 1024px) {
  #bottomNav .bn-item span {
    font-size: 0.55rem !important;
    line-height: 1.1 !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #bottomNav .bn-item[data-bn="calcs"] span {
    font-size: 0.52rem !important;
    letter-spacing: -0.02em;
  }
}
@media (max-width: 380px) {
  #bottomNav .bn-item span {
    font-size: 0.5rem !important;
  }
}


/* ============================================================
   v1.0.19 — Transições mais rápidas
   ============================================================ */
:root {
  --dur-fast: 0.08s !important;
  --dur-med: 0.14s !important;
  --dur-slow: 0.2s !important;
  --dur-theme: 0.15s !important;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.25, 1.1, 0.4, 1);
}

/* Cap geral: nada de animações longas (exceto ticker e reduced-motion) */
a, button, .btn, .tool-card, .journey-card, .info-card, .resource-card,
.bn-item, .bn-q, .bn-mais-tile, .tab-btn, .nav-icon-btn, .header-icon-btn,
#chatbotFab, .ms-sheet, .bn-mais-sheet, .bn-mais-panel, .mp-overlay, .mp-drawer,
#modalTerminal.modal, #modalTerminal .modal-content, #resourceModal,
input, select, textarea {
  transition-duration: 0.12s !important;
  transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.bn-mais-panel,
.ms-sheet,
#modalTerminal .modal-content,
.mp-drawer {
  transition-duration: 0.18s !important;
}

/* Theme change um pouco mais longo, ainda rápido */
body, .site-header, .top-ticker, #bottomNav {
  transition-duration: 0.15s !important;
}

@keyframes maisSlideUp {
  from { transform: translateY(12%); opacity: 0.9; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes modalRise {
  from { transform: translateY(8px) scale(0.99); opacity: 0.7; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes resourceModalIn {
  from { opacity: 0; transform: scale(0.97) translateY(4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes formSheetIn {
  from { transform: translateY(12px); opacity: 0.75; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes bnIconPop {
  0% { transform: scale(0.92); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* v1.0.19-PLAN — stamp taxas */
.market-stamp {
  color: #7a8494;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

/* ===== Plano ALL — skeleton, CTAs, cenários, stamp ===== */
.term-market-stamp {
  font-size: 0.68rem;
  color: #8b93a7;
  margin: 6px 0 8px;
  line-height: 1.35;
  letter-spacing: 0.01em;
}
.term-example-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.35);
  background: rgba(212,175,55,0.08);
  color: #e8d5a3;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}
.term-example-chip:active { transform: scale(0.98); }

#resultsArea.is-chart-loading .chart-wrap,
#resultsArea.is-chart-loading .chart-plot,
.chart-wrap.is-chart-loading,
.chart-plot.is-chart-loading {
  position: relative;
  min-height: 180px;
}
#resultsArea.is-chart-loading .chart-wrap::after,
.chart-wrap.is-chart-loading::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  background-size: 200% 100%;
  animation: proxSkeleton 1.1s ease-in-out infinite;
  pointer-events: none;
}
@keyframes proxSkeleton {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.plano-plan-ctas {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.plano-cta-hint {
  font-size: 0.78rem;
  color: #9aa3b2;
  margin: 0;
}
.plano-cta-why { opacity: 0.85; font-size: 0.72rem; }
.plano-cta-sim { width: 100%; }
.plano-scenario-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: end;
}
.plano-scenario-row label {
  grid-column: 1 / -1;
  font-size: 0.7rem;
  color: #8b93a7;
}
.plano-scenario-row input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: #eee;
  font-size: 0.85rem;
}
.plano-scenario-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plano-scenario-item {
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  color: #d0d5dd;
  font-size: 0.8rem;
  cursor: pointer;
}
.plano-scenario-item:hover { border-color: rgba(212,175,55,0.4); }
.plano-scenario-empty { font-size: 0.75rem; color: #6b7280; }

/* Fase 1 lite: content-visibility already in opt if present */

/* ===== Calendário ao vivo ===== */
.cal-skel {
  min-height: 72px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.09), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  animation: cal-shimmer 1.2s ease-in-out infinite;
}
@keyframes cal-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.cal-loading-msg,
.cal-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 4px;
  font-size: 0.82rem;
  color: #a1a1aa;
  text-align: center;
}
.cal-retry-btn {
  grid-column: 1 / -1;
  justify-self: center;
  margin: 4px auto 8px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(212,175,55,0.35);
  background: rgba(212,175,55,0.1);
  color: #D4AF37;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}
.cal-sub-live {
  font-size: 0.75rem;
  color: #71717a;
}