/* ============================================================
   subnav.css — sub-nav de anclas, fijo justo debajo del header
   (misma estrategia position:fixed que header.css, para que el
   borde inferior quede pegado sin huecos). Usa los MISMOS tokens
   de tema que header.css y portafolios.css, así que hereda modo
   claro/oscuro (y la paleta morado/verde) automáticamente, sin
   código propio de color.

   --header-height la fija header.js en tiempo real (altura real
   medida del <header>), con un valor de respaldo (73px, la altura
   aproximada del header en móvil) por si ese script no ha corrido
   todavía.

   IMPORTANTE al adoptar esto en una vista (Academia, Consultoría):
   como el subnav es position:fixed (no ocupa espacio en el flujo),
   la primera sección de la página necesita padding-top adicional
   igual a la altura del subnav (~50px) SUMADA al padding-top que
   ya usa para compensar el header. Por ejemplo, si hoy el hero usa
   padding-top: 130px para el header, con subnav debería quedar
   alrededor de 180px.
   ============================================================ */

.subnav {
    position: fixed;
    top: var(--header-height, 73px);
    left: 0;
    right: 0;
    z-index: 998;
    background: var(--overlay-nav);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.3s ease, border-color 0.3s ease, top 0.2s ease;
}

.subnav-links {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
    display: flex;
    gap: 2rem;
    list-style: none;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.subnav-links::-webkit-scrollbar { display: none; }

.subnav-links li { flex-shrink: 0; }

.subnav-links a {
    display: inline-block;
    padding: 0.9rem 0.1rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.subnav-links a:hover,
.subnav-links a:focus-visible { color: var(--text-primary); }

.subnav-links a.active {
    color: var(--purple-light);
    border-bottom-color: var(--purple);
}

/* Para que el destino del ancla no quede tapado por header +
   subnav al saltar con el navegador. */
[id] { scroll-margin-top: calc(var(--header-height, 73px) + 48px); }

@media (max-width: 1024px) { .subnav-links { padding: 0 2rem; } }

@media (max-width: 900px) {
    .subnav-links { padding: 0 1.25rem; gap: 1.5rem; }
}

@media (max-width: 480px) {
    .subnav-links { padding: 0 1rem; gap: 1.25rem; }
    .subnav-links a { font-size: 0.85rem; padding: 0.75rem 0.1rem; }
}