/* ================================================================
       NAVBAR · v7 PREMIUM — Director de arte rediseño completo
       Topbar tech moderna + header con personalidad + mobile real
       ================================================================ */
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

    html, body { margin: 0 !important; padding: 0 !important; width: 100%; overflow-x: hidden; }

    /* ================================================================
       1. TOPBAR CORPORATIVA · gradient teal sofisticado + filete dorado
       ================================================================ */
    .corporate-topbar {
        position: relative;
        background:
            radial-gradient(ellipse 800px 100px at 0% 50%, rgba(201,152,82,.10) 0%, transparent 60%),
            linear-gradient(90deg, #002926 0%, #003E3B 50%, #003E3B 100%);
        color: rgba(255,255,255,.92);
        padding: 8px 0;
        font-family: 'Inter', sans-serif;
        font-size: .82rem;
        z-index: 1001;
    }
    .corporate-topbar::after {
        content: "";
        position: absolute;
        left: 0; right: 0; bottom: 0;
        height: 1px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(201,152,82,0) 8%,
            rgba(201,152,82,.55) 50%,
            rgba(201,152,82,0) 92%,
            transparent 100%);
        pointer-events: none;
    }
    .corporate-topbar-inner {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0 24px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
    }
    .topbar-left, .topbar-right {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    /* "Atendiendo ahora" con dot pulsante */
    .topbar-live {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 600;
        font-size: .78rem;
        color: #ffffff;
        letter-spacing: .2px;
    }
    .topbar-live-text em {
        font-style: normal;
        opacity: .68;
        font-weight: 400;
        margin-left: 4px;
    }
    .dot-live {
        position: relative;
        display: inline-block;
        width: 8px; height: 8px;
        background: #2ecc71;
        border-radius: 50%;
        flex-shrink: 0;
        box-shadow: 0 0 0 0 rgba(46,204,113,.55);
        animation: nav-live-pulse 2.4s cubic-bezier(0.66, 0, 0.34, 1) infinite;
    }
    @keyframes nav-live-pulse {
        0%   { box-shadow: 0 0 0 0 rgba(46,204,113,.55); }
        70%  { box-shadow: 0 0 0 7px rgba(46,204,113,0); }
        100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
    }

    /* Links topbar */
    .topbar-link {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        color: rgba(255,255,255,.88);
        text-decoration: none;
        font-weight: 500;
        font-size: .78rem;
        letter-spacing: .1px;
        transition: color .2s;
    }
    .topbar-link:hover { color: #C99852; }
    .topbar-link svg { flex-shrink: 0; opacity: .88; }
    .topbar-link-wa { color: rgba(46,204,113,.95); }
    .topbar-link-wa:hover { color: #2ecc71; }
    .topbar-divider {
        width: 1px;
        height: 14px;
        background: rgba(255,255,255,.18);
    }

    /* ================================================================
       2. NAVBAR PRINCIPAL · mesh + filete dorado
       ================================================================ */
    .main-navigation {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #ffffff;
        box-shadow: 0 1px 0 rgba(0,62,59,.06), 0 6px 20px rgba(0,0,0,.04);
    }
    .nav-header-row {
        position: relative;
        max-width: 1320px;
        margin: 0 auto;
        padding: 16px 24px;
        display: flex;
        align-items: center;
        gap: 24px;
        background: #ffffff;
    }
    /* Filete dorado superior fino */
    .main-navigation::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 2px;
        background: linear-gradient(90deg,
            transparent 0%,
            rgba(201,152,82,0) 8%,
            rgba(201,152,82,.45) 50%,
            rgba(201,152,82,0) 92%,
            transparent 100%);
        z-index: 2;
        pointer-events: none;
    }

    /* Logo + tagline */
    .nav-header-logo {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }
    .nav-logo-link {
        display: flex;
        align-items: center;
        text-decoration: none;
    }
    .logo-desktop { height: 54px; width: auto; display: block; }
    .logo-mobile { height: 44px; width: auto; display: none; }
    .nav-logo-tagline { display: none; }

    /* Status pills centrales */
    .nav-header-status {
        display: none;
        align-items: center;
        gap: 4px;
        flex: 1 1 auto;
        justify-content: center;
        min-width: 0;
    }
    .nav-status-pill {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 14px;
        background: rgba(0,62,59,.025);
        border: 1px solid rgba(0,62,59,.07);
        border-radius: 10px;
        font-family: 'Inter', sans-serif;
        line-height: 1;
        transition: background .2s, border-color .2s, transform .2s;
        white-space: nowrap;
    }
    .nav-status-pill:hover {
        background: rgba(201,152,82,.06);
        border-color: rgba(201,152,82,.28);
        transform: translateY(-1px);
    }
    .nav-status-text {
        display: inline-flex;
        flex-direction: column;
        gap: 3px;
        text-align: left;
    }
    .nav-status-text strong {
        font-size: 11.5px;
        font-weight: 700;
        color: #003E3B;
        letter-spacing: .1px;
    }
    .nav-status-text em {
        font-style: normal;
        font-size: 10px;
        font-weight: 500;
        color: #7a7a7a;
        letter-spacing: .1px;
    }
    .nav-status-divider {
        width: 1px;
        height: 26px;
        background: rgba(0,62,59,.10);
        margin: 0 2px;
        flex-shrink: 0;
    }

    /* CTA Iniciar trámite */
    .header-cta-desktop { flex: 0 0 auto; }
    .nav-cta-primary {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 11px 22px;
        background: #003E3B;
        color: #ffffff;
        border-radius: 9px;
        text-decoration: none;
        font-weight: 600;
        font-size: 13.5px;
        font-family: 'Inter', sans-serif;
        letter-spacing: .1px;
        border: 1px solid rgba(201,152,82,.45);
        box-shadow: 0 2px 8px rgba(0,62,59,.12), inset 0 1px 0 rgba(255,255,255,.05);
        transition: all .25s;
    }
    .nav-cta-primary:hover {
        background: #C99852;
        border-color: #C99852;
        box-shadow: 0 6px 18px rgba(201,152,82,.32);
        transform: translateY(-1px);
    }
    .nav-cta-primary svg { flex-shrink: 0; }

    /* ================================================================
       3. NAV TABS · toolbar premium estilo despacho
       ================================================================ */
    .nav-tabs-bar {
        background: #ffffff;
        border-top: 1px solid rgba(0,62,59,.05);
    }
    .nav-tabs-inner {
        max-width: 1320px;
        margin: 0 auto;
        padding: 0;
        display: flex;
        justify-content: center;
        gap: 0;
    }
    .nav-tab-modern {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 14px 22px;
        background: transparent;
        border: none;
        box-shadow: none;
        font-family: 'Inter', sans-serif;
        font-size: 13.5px;
        font-weight: 600;
        color: #555;
        letter-spacing: .2px;
        text-decoration: none;
        transition: color .2s;
    }
    .nav-tab-modern::after {
        content: "";
        position: absolute;
        left: 22px; right: 22px;
        bottom: 6px;
        height: 2px;
        background: #C99852;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform .25s ease;
        border-radius: 2px;
    }
    .nav-tab-modern:hover { color: #003E3B; }
    .nav-tab-modern:hover::after { transform: scaleX(.7); }
    .nav-tab-modern.active { color: #003E3B; }
    .nav-tab-modern.active::after { transform: scaleX(1); height: 2.5px; }
    .nav-tab-modern svg {
        width: 14px; height: 14px;
        stroke: currentColor;
        stroke-width: 1.8;
        opacity: .8;
        transition: opacity .2s;
    }
    .nav-tab-modern:hover svg, .nav-tab-modern.active svg { opacity: 1; }

    /* Trust bar mobile — ELIMINADA (la confianza ya vive en el hero) */
    .nav-mobile-trust { display: none !important; }

    /* ================================================================
       3 ESTADOS RESPONSIVE LIMPIOS
       ================================================================ */

    /* === A. DESKTOP REAL (>=1100px) =================== */
    @media (min-width: 1100px) {
        .nav-header-status { display: flex; }
    }

    /* === B. TABLET / DESKTOP-FROM-MOBILE (700–1099px) === */
    @media (min-width: 700px) and (max-width: 1099px) {
        .nav-header-status { display: none !important; }
        .nav-header-row {
            padding: 10px 20px;
            justify-content: space-between;
        }
        .logo-desktop { height: 42px; }
        .nav-cta-primary { padding: 9px 16px; font-size: 12.5px; }
        .nav-cta-primary svg { width: 12px; height: 12px; }
        .nav-tabs-inner { padding: 4px 16px; gap: 0; }
        .nav-tab-modern {
            padding: 10px 14px;
            font-size: 12.5px;
        }
        .nav-tab-modern::after { left: 14px; right: 14px; bottom: 4px; }
        .nav-tab-modern svg { width: 13px; height: 13px; }
        .corporate-topbar { padding: 6px 0; font-size: .74rem; }
        .topbar-live { font-size: .74rem; }
        .topbar-link { font-size: .74rem; }
    }

    /* === C. MOBILE REAL (<700px) ====================== */
    @media (max-width: 699px) {
        /* Topbar mobile */
        .corporate-topbar { padding: 3px 0; font-size: .62rem; }
        .corporate-topbar-inner { padding: 0 12px; gap: 8px; flex-wrap: nowrap; }
        .topbar-live { font-size: .62rem; gap: 5px; min-width: 0; flex-shrink: 1; }
        .topbar-live-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .topbar-live-text em { display: none; }
        .topbar-right { gap: 8px; flex-shrink: 0; }
        .topbar-link { font-size: .62rem; gap: 4px; }
        .topbar-link svg { width: 10px !important; height: 10px !important; }
        .topbar-link-text { display: none; }
        .topbar-link-wa .topbar-link-text { display: inline; font-weight: 600; }
        .topbar-divider { display: none; }
        .dot-live { width: 6px; height: 6px; }

        /* Header logo: solo logo centrado */
        .nav-header-row {
            padding: 6px 14px;
            justify-content: center;
            gap: 0;
        }
        .nav-header-logo {
            flex: 0 0 auto;
            align-items: center;
            justify-content: center;
            display: flex !important;
        }
        .nav-logo-link { justify-content: center; }
        .logo-desktop { display: none; }
        .logo-mobile { display: block; height: 26px; }
        .nav-header-status,
        .header-cta-desktop { display: none !important; }

        /* Navbar mobile · toolbar premium (sin cards, sin fade) */
        .nav-tabs-bar {
            position: relative;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border-top: 1px solid rgba(0,62,59,0.06);
            background: #ffffff;
            scrollbar-width: none;
        }
        .nav-tabs-bar::-webkit-scrollbar { display: none; }
        .nav-tabs-inner {
            justify-content: flex-start;
            padding: 1px 8px;
            min-width: max-content;
            gap: 0;
        }
        .nav-tab-modern {
            font-size: 10.5px;
            font-weight: 600;
            padding: 7px 9px;
            white-space: nowrap;
            flex-shrink: 0;
            border-radius: 0;
            border: none;
            background: transparent;
            gap: 5px;
            letter-spacing: 0;
            color: #5a5a5a;
        }
        .nav-tab-modern::after { display: none; }
        .nav-tab-modern svg {
            width: 11px; height: 11px;
            stroke-width: 2;
            opacity: .85;
        }
        .nav-tab-modern.active {
            color: #003E3B;
        }
        .nav-tab-modern.active::before {
            content: "";
            position: absolute;
            left: 9px; right: 9px;
            bottom: 1px;
            height: 2px;
            background: #C99852;
            border-radius: 2px;
        }
    }

    /* Reducción de movimiento accesibilidad */
    @media (prefers-reduced-motion: reduce) {
        .dot-live { animation: none; }
    }