/*
----------------------
      GLOBALES
----------------------
*/
body {
  font-family: "Poppins", sans-serif !important;
}

a {
  text-decoration: none;
}

/*
----------------------
      NAVBAR
----------------------
*/
.navbar {
  /* La navbar es siempre oscura (navbar-dark), en los dos temas, así
     que el acento debe quedarse en su versión clara de siempre: la
     variante oscurecida para tema claro (pensada para leerse sobre
     fondos claros) se ve apagada aquí y se pierde contra este fondo. */
  --accent: #e5c07b;
  background-color: rgba(10, 10, 10, 0.86) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.navbar-brand,
.navbar-nav .nav-link {
  font-family: "JetBrains Mono", monospace;
}

.navbar-nav .nav-link {
  position: relative;
  color: rgba(230, 230, 230, 0.72);
  transition: color 0.2s;
}

.navbar-nav .nav-link.active {
  color: var(--accent);
}

/* La línea bajo el link activo solo tiene sitio en la navbar
   horizontal (lg+, ver navbar-expand-lg); en el menú móvil apilado
   se solaparía con el siguiente enlace, así que ahí basta con el
   cambio de color. El pseudo-elemento siempre está presente (oculto
   con scaleX(0)) para poder transicionar tanto la entrada como la
   salida: al quitar Bootstrap la clase .active la línea se repliega
   en vez de desaparecer de golpe. */
@media (min-width: 992px) {
  .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 1px;
    background: var(--accent);
    box-shadow: 0 0 8px 1px var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    /* Curva ease-out fuerte para un elemento que entra/sale, en vez
       del ease nativo del navegador; 220ms se queda dentro del tope
       de 300ms para animaciones de interfaz. */
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1), opacity 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .navbar-nav .nav-link.active::after {
    transform: scaleX(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-nav .nav-link::after {
    transition: opacity 0.2s ease;
  }
}