:root {
  color-scheme: dark;
}
html {
  scroll-behavior: smooth;
}
body {
  background-color: #000;
}
/* Header en fondo oscuro: links blancos */
header.on-dark nav a {
  color: #fff;
}
header.on-dark nav a:hover {
  color: #facd01;
}
/* Header scrolled background capsule */
header {
  transition: background-color .25s ease, border-radius .25s ease, box-shadow .25s ease;
}
header.scrolled {
  background-color: rgba(0,0,0,0.9);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
/* Menú móvil abierto: fondo unificado y sin bordes/sombra */
header.open-menu {
  background-color: #000 !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: none;
}
/* Logo swap segun fondo */
header .logo-black { display: inline; }
header .logo-white { display: none; }
header.on-dark .logo-black { display: none; }
header.on-dark .logo-white { display: inline; }
/* Subrayado móvil bajo hover/active: color adapta al texto */
header [data-nav-underline] { background-color: currentColor; }
/* Nav overlay para efecto máscara por crossfade */
header nav { position: relative; }
header nav .nav-overlay {
  position: absolute;
  inset: 0;
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
header.on-dark nav .nav-overlay { opacity: 1; }
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  scrollbar-width: none;
}

/* Global custom scrollbars (site-wide)
   - WebKit (Chrome/Edge/Safari): ::-webkit-scrollbar*
   - Firefox: scrollbar-color / scrollbar-width
   Yellow knob (thumb) on black track to match brand */

/* Firefox: apply to all scrollable elements */
* {
  scrollbar-color: #facd01 #000; /* thumb track */
  scrollbar-width: thin;
}

/* WebKit: apply to all scrollable elements */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: #000;
}
*::-webkit-scrollbar-thumb {
  background-color: #facd01;
  border-radius: 8px;
  border: 2px solid #000; /* creates a gap effect on dark bg */
}
*::-webkit-scrollbar-thumb:hover {
  background-color: #e0c200;
}