refactor: ruteo por idioma sin redirección para SEO y aviso de idioma

- Servir el español (idioma por defecto) en la raíz / como contenido real e
  indexable y los idiomas adicionales bajo /<lang> (por ahora /en). Se elimina
  la página de enrutamiento con redirección automática, que impedía a Google
  rastrear el contenido real del sitio.
- Añadir components/global/LangNotice.astro (+ lang-notice.css): aviso discreto
  que invita a cambiar al idioma del navegador —en ese idioma— solo si existe
  esa versión; cambia únicamente al pulsar (sin redirección automática) y
  recuerda el descarte.
- Layout: el idioma llega por prop; URLs canónicas por idioma, alternativas
  hreflang (es-CO, en, x-default) y og:locale dinámico. theme-color a #0a1c2b
  (el fondo real del sitio).
- Centralizar las rutas localizadas en el helper localizedPath (i18n) y usarlo
  en Navbar y Footer; añadir la sección langNotice a los locales.
- Eliminar Router.astro, router.css, la ruta pages/es/ y la sección router del
  i18n, ya innecesarias.
- Actualizar CHANGELOG.md y README.md; elevar la versión a 0.11.0.

Author: SurivZ

CHANGELOG.md

@@ -216,4 +216,22 @@ Todos los cambios notables en este proyecto serán documentados en este archivo
 
 ### Corregido
 
-- **Responsive del hero**: se saca el hero de `u-grid` y se acota con su propio contenedor, de modo que la ventana de código ya no desborda en móvil (su scroll horizontal queda contenido dentro de la ventana). El titular en gradiente deja de recortar los descendentes (la «g» de «digital»).
+- **Responsive del hero**: se saca el hero de `u-grid` y se acota con su propio contenedor, de modo que la ventana de código ya no desborda en móvil (su scroll horizontal queda contenido dentro de la ventana). El titular en gradiente deja de recortar los descendentes (la «g» de «digital»).
+
+## [0.11.0] - 2026-07-11
+
+### Cambiado
+
+- **Ruteo por idioma sin redirección (SEO)**: el español (idioma por defecto) pasa a vivir en la raíz `/` como contenido real e indexable, y los idiomas adicionales bajo `/<lang>` (por ahora `/en`). Se elimina la página de enrutamiento con redirección automática, que impedía a Google rastrear el contenido real del sitio.
+- **`src/layouts/Layout.astro`**: el idioma llega por prop (no por `Astro.params`), lo que da URLs canónicas correctas por idioma; se añaden alternativas `hreflang` (`es-CO`, `en`, `x-default`) y `og:locale` dinámico para SEO multiidioma. `theme-color` actualizado a `#0a1c2b` (el fondo real del sitio).
+- **`Navbar` y `Footer`**: los enlaces y el intercambio de idioma se reconstruyen con el nuevo helper de rutas.
+- **`src/data/i18n.ts`**: nuevo helper `localizedPath(lang, subpath)` como fuente única de rutas localizadas.
+
+### Añadido
+
+- **`src/components/global/LangNotice.astro`** y **`src/styles/lang-notice.css`**: aviso discreto que, solo si el idioma del navegador difiere del de la página y existe esa versión, invita a cambiar de idioma —en el idioma de destino—. No redirige de forma automática: solo cambia si el usuario pulsa, y recuerda el descarte.
+- **`src/data/locales/{es,en}.ts`**: sección `langNotice`.
+
+### Eliminado
+
+- **`src/components/pages/Router.astro`** y **`src/styles/router.css`**: la página de enrutamiento por redirección, ya innecesaria. También la ruta `src/pages/es/` (el español ahora es la raíz) y la sección `router` del esquema i18n.

README.md

@@ -48,11 +48,11 @@ ctgcode.com/
 │   ├── components/                # Componentes reutilizables del sitio.
 │   │   ├── global/                # Componentes globales y de alcance transversal.
 │   │   │   ├── Footer.astro       # Cierre del sitio «el fondo del mar»: invitación, mapa, colofón y marca hundida.
+│   │   │   ├── LangNotice.astro   # Aviso de idioma disponible (cambio manual, sin redirección automática).
 │   │   │   └── Navbar.astro       # Cabecera responsiva: marca, navegación, switch de idioma, CTA y menú móvil.
 │   │   ├── pages/                 # Componentes de composición de páginas completas.
 │   │   │   ├── Home.astro         # Composición de la home (única fuente de la verdad), parametrizada por idioma.
-│   │   │   ├── NotFound.astro     # Página 404 «el náufrago».
-│   │   │   └── Router.astro       # Página de entrada «la carta de navegación» (detección de idioma).
+│   │   │   └── NotFound.astro     # Página 404 «el náufrago».
 │   │   └── ui/                    # Componentes de interfaz reutilizables.
 │   │       └── CTA.astro          # Botón de acción de marca («el faro del atardecer»).
 │   ├── content.config.ts          # Definición de colecciones de contenido y su validación con Astro Content Collections.
@@ -66,11 +66,9 @@ ctgcode.com/
 │   │   └── Layout.astro           # Layout principal con SEO, metadata OG y carga de estilos globales.
 │   ├── pages/                     # Páginas y rutas del sitio.
 │   │   ├── 404.astro              # Página 404 (delega en el componente NotFound).
-│   │   ├── index.astro            # Entrada que detecta el idioma y redirige (delega en Router).
-│   │   ├── en/                    # Carpeta para las páginas en inglés.
-│   │   │   └── index.astro        # Ruta en inglés (delega en el componente Home).
-│   │   └── es/                    # Carpeta para las páginas en español.
-│   │       └── index.astro        # Ruta en español (delega en el componente Home).
+│   │   ├── index.astro            # Home en español (idioma por defecto en la raíz; delega en Home).
+│   │   └── en/                    # Idiomas adicionales bajo /<lang>.
+│   │       └── index.astro        # Home en inglés (delega en el componente Home).
 │   └── styles/                    # Sistema de diseño y estilos de componentes.
 │       ├── global.css             # Punto de entrada (barrel) que orquesta el sistema de diseño.
 │       ├── tokens.css             # Tokens del sistema: paleta, color, spacing, tipografía, movimiento…
@@ -83,9 +81,9 @@ ctgcode.com/
 │       ├── cta.css                # Estilos del CTA de marca (components/ui/CTA.astro).
 │       ├── footer.css             # Estilos del footer (components/global/Footer.astro).
 │       ├── home.css               # Estilos de la home (components/pages/Home.astro).
+│       ├── lang-notice.css        # Estilos del aviso de idioma (components/global/LangNotice.astro).
 │       ├── navbar.css             # Estilos de la navbar (components/global/Navbar.astro).
-│       ├── not-found.css          # Estilos de la 404 (components/pages/NotFound.astro).
-│       └── router.css             # Estilos de la entrada (components/pages/Router.astro).
+│       └── not-found.css          # Estilos de la 404 (components/pages/NotFound.astro).
 ├── .gitignore                     # Reglas de Git para ignorar artefactos generados y archivos locales no deseados.
 ├── astro.config.mjs               # Configuración principal de Astro y sus integraciones.
 ├── bun.lock                       # Lockfile de Bun para reproducibilidad de dependencias.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ctg-code",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "dependencies": {
     "@astrojs/partytown": "^2.1.7",
     "@fontsource-variable/inter": "^5.2.8",

src/components/global/Footer.astro

@@ -9,7 +9,7 @@
  *
  * Estilos en styles/footer.css.
  */
-import { locales, languages, type LocaleSchema } from "../../data/i18n";
+import { locales, languages, localizedPath, type LocaleSchema } from "../../data/i18n";
 import CTA from "../ui/CTA.astro";
 import "../../styles/footer.css";
 
@@ -21,7 +21,7 @@ const { lang } = Astro.props;
 const t: LocaleSchema = locales[lang];
 
 const otherLang = lang === "es" ? "en" : "es";
-const home = `/${lang}/`;
+const home = localizedPath(lang);
 const year = new Date().getFullYear();
 
 // La sonda: continúa la numeración de la navbar (01/02/03) con el idioma (04).
@@ -84,7 +84,7 @@ const navItems = [
         <li>
           <a
             class="ft-link"
-            href={`/${otherLang}/`}
+            href={localizedPath(otherLang)}
             hreflang={otherLang}
             lang={otherLang}
           >

src/components/global/LangNotice.astro

@@ -0,0 +1,120 @@
+---
+/**
+ * LangNotice — aviso de idioma disponible.
+ *
+ * Si el idioma del navegador difiere del de la página Y existe esa versión,
+ * muestra un aviso discreto (en el idioma de destino) invitando a cambiar.
+ * NO redirige solo: únicamente al pulsar el enlace. Se recuerda el descarte.
+ *
+ * Renderiza una tarjeta oculta por cada otro idioma disponible; el script
+ * revela la que coincide con `navigator.language`. Estilos en lang-notice.css.
+ */
+import { locales, localizedPath, type LocaleSchema } from "../../data/i18n";
+import "../../styles/lang-notice.css";
+
+interface Props {
+  lang: keyof typeof locales;
+}
+
+const { lang } = Astro.props;
+
+const others = (Object.keys(locales) as (keyof typeof locales)[]).filter(
+  (l) => l !== lang,
+);
+---
+
+<div class="lang-notice" data-lang-notice>
+  {
+    others.map((l) => {
+      const n: LocaleSchema["langNotice"] = locales[l].langNotice;
+      return (
+        <aside
+          class="ln-card"
+          data-ln-for={l}
+          role="status"
+          aria-label={n.message}
+          lang={l}
+          hidden
+        >
+          <span class="ln-icon" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+              <circle cx="12" cy="12" r="9" />
+              <path d="M3 12h18" />
+              <path d="M12 3c2.5 2.4 3.8 5.6 3.8 9s-1.3 6.6-3.8 9c-2.5-2.4-3.8-5.6-3.8-9s1.3-6.6 3.8-9z" />
+            </svg>
+          </span>
+
+          <p class="ln-msg">{n.message}</p>
+
+          <a
+            class="ln-action"
+            href={localizedPath(l)}
+            hreflang={l}
+            lang={l}
+            data-ln-go
+          >
+            {n.action}
+          </a>
+
+          <button
+            class="ln-close"
+            type="button"
+            data-ln-dismiss
+            aria-label={n.dismiss}
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </aside>
+      );
+    })
+  }
+</div>
+
+<script>
+  const KEY = "ctg-lang-notice-dismissed";
+  const root = document.querySelector<HTMLElement>("[data-lang-notice]");
+
+  if (root && localStorage.getItem(KEY) !== "1") {
+    const browserLang = (navigator.language || "")
+      .split("-")[0]
+      .toLowerCase();
+    const card = root.querySelector<HTMLElement>(
+      `[data-ln-for="${browserLang}"]`,
+    );
+
+    if (card) {
+      const dismiss = () => localStorage.setItem(KEY, "1");
+
+      const close = () => {
+        dismiss();
+        card.removeAttribute("data-open");
+        card.addEventListener(
+          "transitionend",
+          () => {
+            card.hidden = true;
+          },
+          { once: true },
+        );
+      };
+
+      // Revelar (doble rAF para que la transición de entrada corra).
+      card.hidden = false;
+      requestAnimationFrame(() =>
+        requestAnimationFrame(() => card.setAttribute("data-open", "")),
+      );
+
+      card
+        .querySelector<HTMLButtonElement>("[data-ln-dismiss]")
+        ?.addEventListener("click", close);
+
+      // Al cambiar de idioma no hace falta volver a avisar.
+      card
+        .querySelector<HTMLAnchorElement>("[data-ln-go]")
+        ?.addEventListener("click", dismiss);
+
+      document.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && !card.hidden) close();
+      });
+    }
+  }
+</script>

src/components/global/Navbar.astro

@@ -10,7 +10,7 @@
  * Responsive: en <60rem la nav se colapsa en un overlay a pantalla completa
  * (con bloqueo de scroll del documento). En >=60rem se muestra la nav en línea.
  */
-import { locales, type LocaleSchema } from "../../data/i18n";
+import { locales, localizedPath, type LocaleSchema } from "../../data/i18n";
 import CTA from "../ui/CTA.astro";
 import logo from "../../assets/logo.svg?raw";
 import "../../styles/navbar.css";
@@ -23,11 +23,14 @@ const { lang } = Astro.props;
 const t: LocaleSchema = locales[lang];
 
 const otherLang = lang === "es" ? "en" : "es";
-const altPath = Astro.url.pathname.replace(
-  /^\/(es|en)(?=\/|$)/,
-  `/${otherLang}`,
-);
-const home = `/${lang}/`;
+const home = localizedPath(lang);
+
+// Switch de idioma: misma página, otra lengua. Se quita el prefijo del idioma
+// actual (es vive en la raíz) y se reconstruye con el otro.
+const currentSubpath = Astro.url.pathname
+  .replace(/^\/(en)(?=\/|$)/, "")
+  .replace(/^\/+/, "");
+const altPath = localizedPath(otherLang, currentSubpath);
 
 // Enlaces de sección numerados como metadatos de estudio (voz mono).
 const navItems = [

src/components/pages/Home.astro

@@ -2,16 +2,17 @@
 /**
  * Home — composición de la página de inicio (única fuente de la verdad).
  *
- * Los archivos de ruta (pages/es/index.astro, pages/en/index.astro) solo
- * eligen el idioma; toda la estructura, textos (vía locales) y estilos viven
- * aquí una sola vez.
+ * Los archivos de ruta (pages/index.astro = es, pages/en/index.astro = en)
+ * solo eligen el idioma; toda la estructura, textos (vía locales) y estilos
+ * viven aquí una sola vez.
  *
  * HERO — "compilar el atardecer": un snippet se escribe en vivo en la ventana
  * de código y, al terminar, el sol tras ella se enciende (data-compiled).
  */
 import Layout from "../../layouts/Layout.astro";
 import Navbar from "../global/Navbar.astro";
 import Footer from "../global/Footer.astro";
+import LangNotice from "../global/LangNotice.astro";
 import CTA from "../ui/CTA.astro";
 import { locales } from "../../data/i18n";
 import "../../styles/home.css";
@@ -52,7 +53,7 @@ function tokenize(line: string): Token[] {
 const codeLines = t.hero.code.map((line) => tokenize(line));
 ---
 
-<Layout title={title} description={t.hero.description} pageName="home">
+<Layout title={title} description={t.hero.description} pageName="home" lang={lang}>
   <Navbar lang={lang} />
 
   <main>
@@ -185,6 +186,8 @@ const codeLines = t.hero.code.map((line) => tokenize(line));
   </main>
 
   <Footer lang={lang} />
+
+  <LangNotice lang={lang} />
 </Layout>
 
 <script>

src/components/pages/NotFound.astro

@@ -19,7 +19,7 @@ const t = locales.es.notFound;
 const en = locales.en.notFound;
 ---
 
-<Layout title="404 — CTG Code" description={t.lead} pageName="404">
+<Layout title="404 — CTG Code" description={t.lead} pageName="404" lang="es">
   <main class="nf-scene u-grid" data-tone="night">
     <a class="brand-mono nf-brand" href="/">
       <span class="brace">&#123;</span> ctgcode <span class="brace">&#125;</span