🎨 (basic): Organiza estilos de Basic e Intro

Divide `basic.css` en parciales SCSS bajo `assets/scss/basic/`, integra
`normalize.css` en `basic.min.css` y compila `intro.scss` por separado a
`intro.min.css`.

assets/scss/basic/_navbar.scss

@@ -0,0 +1,118 @@
+@use "breakpoints" as bp;
+
+.navbar {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 1rem;
+}
+
+.navbar-toggle {
+    display: none;
+    padding: 0.25rem 0.5rem;
+    font-size: 1.25rem;
+    line-height: 1;
+    color: inherit;
+    background-color: transparent;
+    border: 1px solid var(--val-color--border);
+    border-radius: 0.375rem;
+    cursor: pointer;
+}
+.navbar-toggle::before {
+    content: "\2630";
+}
+
+// Pushes the toggle (`BrandLeft`) or the brand (`BrandRight`) to the far end of the bar.
+.brand ~ .navbar-toggle,
+.navbar-toggle ~ .brand {
+    margin-inline-start: auto;
+}
+
+.navbar-content {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex: 1 1 auto;
+}
+// A bar without a toggle button never stacks its `.nav` items in a column, so they wrap onto
+// another line when they don't fit instead of overflowing the bar.
+.navbar-content .nav {
+    flex-wrap: wrap;
+}
+
+.navbar-text {
+    color: var(--val-color--text--muted);
+}
+
+// Navbar position, from the `navbar::Position` classes. `.navbar` has no background of its own, so
+// a bar taken out of the flow (fixed) or pinned while scrolling (sticky) gets one, or the content
+// passing underneath would show through.
+.navbar.fixed-top,
+.navbar.fixed-bottom,
+.navbar.sticky-top,
+.navbar.sticky-bottom {
+    background-color: var(--val-color--bg);
+}
+.navbar.fixed-top,
+.navbar.fixed-bottom {
+    position: fixed;
+    right: 0;
+    left: 0;
+    z-index: 1030;
+}
+.navbar.fixed-top {
+    top: 0;
+}
+.navbar.fixed-bottom {
+    bottom: 0;
+}
+.navbar.sticky-top,
+.navbar.sticky-bottom {
+    position: sticky;
+    z-index: 1020;
+}
+.navbar.sticky-top {
+    top: 0;
+}
+.navbar.sticky-bottom {
+    bottom: 0;
+}
+
+// A navbar with a toggle button collapses below the breakpoint set by its `navbar-expand-{name}`
+// class, added by the `Navbar` component. `navbar-expand` alone (a breakpoint with no minimum
+// width) never collapses and needs no rules, since the base rules above are the expanded layout.
+//
+// While collapsed, the `.nav` items are stacked in a column, so a dropdown menu inside it is laid
+// out in the flow (`position: static`) to push down the following items instead of covering them.
+// A navbar without a toggle button has nothing to collapse: its `.nav` items stay in a row.
+@each $name, $width in bp.$breakpoints {
+    @media (width < $width) {
+        .navbar-expand-#{$name} {
+            flex-wrap: wrap;
+        }
+        .navbar-expand-#{$name}:has(.navbar-toggle) {
+            .navbar-toggle {
+                display: inline-block;
+            }
+            .navbar-content {
+                order: 1;
+                display: none;
+                flex-direction: column;
+                align-items: stretch;
+                width: 100%;
+            }
+            .navbar-content.show {
+                display: flex;
+            }
+            .nav {
+                flex-direction: column;
+                align-items: stretch;
+                width: 100%;
+            }
+            .nav .dropdown-menu {
+                position: static;
+                box-shadow: none;
+            }
+        }
+    }
+}