html, body { margin: 0; padding: 0; background: #04122C; scroll-behavior: smooth; }
  body { font-family: Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  a { color: #78C800; text-decoration: none; }
  a:hover { color: #9CE82A; }
  ::selection { background: #78C800; color: #04122C; }
  summary::-webkit-details-marker { display: none; }
  summary { list-style: none; cursor: pointer; }
  details[open] summary span[data-plus] { transform: rotate(45deg); }
  @keyframes bn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @keyframes bn-pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(120,200,0,0.55); } 50% { opacity: .55; box-shadow: 0 0 0 6px rgba(120,200,0,0); } }
  @keyframes bn-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------------------------------------------------------------------------
   Móvil: el menú se envuelve en vez de esconder opciones tras un scroll
   horizontal que casi nadie descubre. Va aquí, en la hoja que cargan tanto la
   portada como las páginas informativas, para que el menú se comporte igual en
   las dos. Los !important son necesarios: el runtime pinta la barra de la
   portada con estilos en línea.
   --------------------------------------------------------------------------- */
@media (max-width: 700px) {
  nav {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    row-gap: 10px !important;
  }
}