/* ============================================================
   HEADER
   Fijo, translucido y con blur. Tres zonas: marca, navegacion y
   acciones. La navegacion va centrada por grid, no por margenes,
   para que se mantenga centrada aunque cambie el ancho del logo.
   ============================================================ */

.header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    height: var(--alto-header);
    background: rgba(8, 19, 33, .80);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    transition: background var(--t-medio) var(--curva),
                border-color var(--t-medio) var(--curva);
}

/* Al bajar, el header se opaca para no competir con el contenido. */
.header.desplazado {
    background: rgba(8, 19, 33, .94);
    border-bottom-color: rgba(255, 255, 255, .11);
}

.header-fila {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--e-8);
    height: 100%;
}

/* ---------- Marca ---------- */
.logo {
    display: flex;
    align-items: center;
    gap: var(--e-3);
    flex-shrink: 0;
}
.logo img { width: 48px; height: 52px; }
.logo-texto { display: flex; flex-direction: column; line-height: 1; }
.logo-texto b {
    font-size: var(--txt-lg);
    font-weight: var(--peso-negro);
    letter-spacing: -.03em;
    color: #fff;
}
.logo-texto em {
    font-style: normal;
    font-size: 9px;
    font-weight: var(--peso-semi);
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--azul-claro);
    margin-top: 3px;
}

/* ---------- Navegacion ---------- */
.nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-1);
}
.nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--e-2);
    padding: var(--e-2) var(--e-4);
    border-radius: var(--r-sm);
    font-size: var(--txt-sm);
    font-weight: var(--peso-medio);
    color: rgba(255, 255, 255, .72);
    white-space: nowrap;
    transition: color var(--t-rapido) var(--curva),
                background var(--t-rapido) var(--curva);
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .07); }

.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: var(--e-4); right: var(--e-4);
    bottom: -26px;
    height: 2px;
    border-radius: 2px;
    background: var(--azul-claro);
    box-shadow: 0 0 12px var(--azul-claro);
}

.nav-tag {
    padding: 2px 6px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: var(--peso-bold);
    letter-spacing: .07em;
    line-height: 1.4;
}
.nav-tag.hot   { background: var(--naranja); color: #fff; }
.nav-tag.nuevo { background: var(--azul-claro); color: #06121F; }

/* ---------- Acciones ---------- */
.header-acciones {
    display: flex;
    align-items: center;
    gap: var(--e-2);
}

.header-buscador { position: relative; width: 260px; }
.header-buscador input {
    width: 100%;
    height: 44px;
    padding: 0 var(--e-10) 0 var(--e-4);
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: var(--r-input);
    color: #fff;
    font-size: var(--txt-sm);
    transition: background var(--t-rapido) var(--curva),
                border-color var(--t-rapido) var(--curva),
                box-shadow var(--t-rapido) var(--curva);
}
.header-buscador input::placeholder { color: rgba(255, 255, 255, .42); }
.header-buscador input:focus {
    outline: none;
    background: rgba(255, 255, 255, .10);
    border-color: var(--azul);
    box-shadow: 0 0 0 4px rgba(22, 119, 255, .18);
}
.header-buscador button {
    position: absolute;
    right: 6px; top: 6px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 10px;
    color: rgba(255, 255, 255, .55);
    transition: color var(--t-rapido) var(--curva);
}
.header-buscador button:hover { color: #fff; }

.icono-btn {
    position: relative;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: var(--r-sm);
    color: rgba(255, 255, 255, .72);
    transition: color var(--t-rapido) var(--curva),
                background var(--t-rapido) var(--curva),
                transform var(--t-rapido) var(--curva);
}
.icono-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    transform: translateY(-1px);
}

.icono-btn .cuenta {
    position: absolute;
    top: 4px; right: 4px;
    min-width: 17px; height: 17px;
    padding: 0 4px;
    display: grid; place-items: center;
    background: var(--naranja);
    color: #fff;
    border-radius: var(--r-full);
    font-size: 10px;
    font-weight: var(--peso-bold);
    border: 2px solid var(--navbar);
}

.menu-movil { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
    .header-buscador { width: 200px; }
    .nav a { padding: var(--e-2) var(--e-3); }
}

@media (max-width: 980px) {
    .header-fila { grid-template-columns: auto 1fr; }
    .nav, .header-buscador { display: none; }
    .header-acciones { justify-content: flex-end; }
    .menu-movil { display: grid; }

    .nav.abierto {
        position: absolute;
        top: var(--alto-header); left: 0; right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--e-1);
        padding: var(--e-4);
        background: rgba(8, 19, 33, .97);
        backdrop-filter: blur(18px);
        border-bottom: 1px solid rgba(255, 255, 255, .10);
        box-shadow: var(--sombra-alta);
    }
    .nav.abierto a { padding: var(--e-3) var(--e-4); font-size: var(--txt-base); }
    .nav.abierto a[aria-current="page"]::after { display: none; }
}