/* ===========================================================
   HEADER.CSS — barra superior, navegación principal y los
   3 botones de proyecto (P.DIVI / P.FIGMA / P.ASTRA)
   =========================================================== */

.top-bar { background: var(--top-bar-bg); border-bottom: 1px solid var(--border-soft); }
.top-bar .container { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: 10px; }

.top-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    background: var(--pill-bg); color: var(--pill-text);
    font-size: .78rem; white-space: nowrap;
}
.top-search {
    flex: 1; display: flex; align-items: center; gap: 8px;
    background: var(--pill-bg); border-radius: 999px;
    padding: 8px 18px; color: var(--pill-text);
}
.top-search input { flex: 1; background: transparent; border: none; outline: none; color: inherit; font-size: .85rem; }
.top-search input::placeholder { color: var(--pill-text); opacity: .7; }

/* --- 3 botones de proyecto --- */
.project-switch { display: flex; gap: 8px; }
.project-switch a {
    padding: 7px 15px;
    border-radius: var(--radius-sm);
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    border: 1px solid var(--project-btn-border);
    color: var(--project-btn-text);
    transition: background .18s ease, color .18s ease;
}
.project-switch a:hover { background: rgba(255,122,26,.12); }
.project-switch a.active {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
}

/* --- header sticky principal --- */
.site-header {
    position: sticky; top: 0; z-index: 100;
    background: var(--header-bg);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border-soft);
}
.header-row { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }

.main-nav ul { display: flex; gap: 28px; }
.main-nav a {
    font-size: .88rem; font-weight: 600; letter-spacing: .02em;
    color: var(--nav-text); position: relative; padding: 6px 2px;
    transition: color .2s ease;
}
.main-nav a::after {
    content: ""; position: absolute; left: 0; bottom: -4px;
    width: 0; height: 2px; background: var(--primary);
    transition: width .25s ease;
}
.main-nav a:hover, .main-nav a.current { color: var(--primary); }
.main-nav a:hover::after, .main-nav a.current::after { width: 100%; }

.menu-toggle { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.menu-toggle span { width: 24px; height: 2px; background: var(--text); border-radius: 2px; }