/* /assets/css/layout.header.css
   Header + navegación + logo con ring animado
   Requiere: /assets/img/logo1.png
*/

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(140%) blur(8px);
    background: rgba(11, 13, 18, .6);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

/* Marca */
.brand {
    display: flex;
    gap: .6rem;
    align-items: center;
    font-weight: 800;
}

/* =========================================================
   LOGO con EFECTO "CÍRCULO" (ring) + glow
   Ajustes rápidos:
   - --logo-zoom: agranda el PNG dentro del círculo
   - --logo-x / --logo-y: corrige centrado fino
   - --ring-outset: cuánto “sale” el ring hacia afuera
   - --ring-thickness: grosor del ring

   Importante:
   - NO usamos overflow:hidden porque te estaba matando el ring.
   ========================================================= */
.brand__logo {
    width: 34px;
    height: 34px;

    /* Ajuste del logo dentro del círculo (para “menos margen”) */
    --logo-zoom: 195%;
    --logo-x: 50%;
    --logo-y: 50%;

    /* Ajuste del ring */
    --ring-outset: 2px;
    /* cuánto sale hacia afuera */
    --ring-thickness: 2px;
    /* grosor del ring */

    border-radius: 999px;
    position: relative;
    display: inline-block;
    isolation: isolate;
    /* evita quilombos de capas */

    /* Logo al centro */
    background-image: url("../img/logo1.png");
    background-repeat: no-repeat;
    background-size: var(--logo-zoom);
    background-position: var(--logo-x) var(--logo-y);

    /* Base sutil */
    background-color: rgba(255, 255, 255, 0.02);

    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.10) inset,
        0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Ring animado (arriba del logo) */
.brand__logo::before {
    content: "";
    position: absolute;
    inset: calc(var(--ring-outset) * -1);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;

    background:
        /* cuña brillante que viaja */
        conic-gradient(from 0deg,
            rgba(255, 255, 255, 0) 0 70%,
            rgba(255, 255, 255, 0.90) 72% 74%,
            rgba(255, 255, 255, 0) 76% 100%),
        /* ring principal */
        conic-gradient(from 0deg,
            rgba(124, 92, 255, 0.95),
            rgba(0, 186, 255, 0.90),
            rgba(124, 92, 255, 0.95));

    /* Solo borde */
    -webkit-mask: radial-gradient(farthest-side,
            transparent calc(100% - var(--ring-thickness)),
            #000 calc(100% - (var(--ring-thickness) - 0.5px)));
    mask: radial-gradient(farthest-side,
            transparent calc(100% - var(--ring-thickness)),
            #000 calc(100% - (var(--ring-thickness) - 0.5px)));

    filter:
        drop-shadow(0 0 10px rgba(0, 186, 255, 0.18)) drop-shadow(0 0 12px rgba(124, 92, 255, 0.18));

    animation: brandRingSpin 2.6s linear infinite;
    opacity: 0.95;
}

/* Glow atrás del logo */
.brand__logo::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;

    background: radial-gradient(circle at 50% 50%,
            rgba(0, 186, 255, 0.14),
            rgba(124, 92, 255, 0.10),
            transparent 60%);

    filter: blur(10px);
    opacity: 0.85;
}

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

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
    .brand__logo::before {
        animation: none !important;
    }
}

/* =========================================================
   NAV
   ========================================================= */
.nav__list {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav__link {
    padding: .4rem .6rem;
    border-radius: 10px;
}

.nav__link.is-active {
    background: rgba(255, 255, 255, .06);
}

.nav__toggle {
    display: none;
}

/* Responsive menú */
@media (max-width: 880px) {
    .nav__list {
        display: none;
    }

    .nav__toggle {
        display: block;
        background: none;
        border: 0;
        color: var(--text);
        font-size: 1.4rem;
    }

    .nav.is-open .nav__list {
        display: flex;
        position: absolute;
        right: 1rem;
        top: 70px;
        background: var(--surface);
        border: 1px solid rgba(255, 255, 255, .08);
        border-radius: 12px;
        flex-direction: column;
        padding: .6rem;
    }
}