feat: el escaparate de proyectos con el sitio del cliente recorriéndose

La sección de proyectos de la Home deja de ser una cáscara con escena
reservada. Con un solo trabajo entregable la pieza NO es una rejilla
esperando compañía, sino un caso destacado a ancho completo, y el
argumento son cifras verificables en vez de adjetivos: rendimiento, SEO
y accesibilidad medidos con PageSpeed Insights, citando herramienta y
fecha para que cualquiera pueda repetir la medición.

- Nuevo ScrollShot: una captura de página completa vive dentro de un
  marco con barra de navegador y se traslada conforme bajas, así se
  recorre el sitio del cliente sin salir del nuestro. El teléfono se le
  superpone en una esquina y avanza a otra velocidad — sincronizados se
  leen mecánicos, desfasados dan profundidad.
- Las capturas se sirven con <picture> en cadena de respaldo AVIF ->
  WebP -> PNG: el navegador se queda con el primer formato que entienda,
  642 KB en AVIF frente a los 3.3 MB del PNG de reserva.
- Dos salidas: el sitio en producción del cliente (la prueba) y la
  página que engloba todo el trabajo (la continuidad).
- Sección `projects` en el esquema de i18n y en ambos idiomas, con el
  slug localizado de la página índice (/proyectos/ y /projects/).

Incluye además el ajuste del favicon .ico con `sizes="any"`, que estaba
pendiente en el árbol de trabajo.

Técnico: el recorrido de las capturas se ata AL MARCO, no a la sección.
Atarlo a la sección —mucho más alta y con el marco a media altura— hacía
que al llegar a verlo el progreso fuera ya del 45 % y el visitante se
perdiera la cabecera del sitio capturado. El recorrido se limita además
en unidades de viewport, porque estas capturas son larguísimas (la móvil
ronda 1:19) y recorrerlas enteras las hacía pasar volando; con el tope la
velocidad queda por debajo de 1x respecto al scroll. No llegar al pie es
aceptable; perderse la cabecera, no. El contraste sobre la banda de fuego
se resuelve apartando el sol en móvil y con un velo bajo la tarjeta, no
con sombras detrás del texto. Cabecera y caso comparten una sola rejilla
en escritorio para que la tarjeta arranque a la altura del titular sin
márgenes negativos, y desde 90rem se lleva algo más de ancho para que las
cuatro cifras entren en una fila.

Author: SurivZ

CHANGELOG.md

@@ -341,3 +341,21 @@ Todos los cambios notables en este proyecto serán documentados en este archivo
 ### Técnico
 
 - Los identificadores de página (`pageName`) siguen siendo estables e internos; la traducción a slug real vive en `pageSlug()` (`src/data/i18n.ts`), único punto donde se resuelve la equivalencia. El JSON-LD se omite por completo en las páginas fuera del índice y escapa `<` para que su contenido no pueda cerrar el `<script>` que lo aloja.
+
+## [0.20.0] - 2026-07-19
+
+### Añadido
+
+- **Sección de proyectos en la Home — «el escaparate»** (`src/components/sections/Projects/`): con un solo trabajo entregable, la pieza NO es una rejilla esperando compañía, sino un **caso destacado a ancho completo**. El argumento son cifras verificables —rendimiento, SEO y accesibilidad medidos con PageSpeed Insights, citando herramienta y fecha— en vez de adjetivos. Dos salidas deliberadas: el sitio en producción del cliente (la prueba) y la página que engloba todo el trabajo (la continuidad).
+- **`src/components/ui/ScrollShot/`**: componente reutilizable que **recorre el sitio del cliente sin salir del nuestro**. Una captura de página completa vive dentro de un marco con barra de navegador y se traslada conforme bajas; el teléfono se le superpone en una esquina y avanza a otra velocidad, porque sincronizados se leen mecánicos y desfasados dan profundidad. Sirve las capturas con `<picture>` en cadena de respaldo **AVIF → WebP → PNG**: el navegador se queda con el primer formato que entienda (642 KB en AVIF frente a 3.3 MB del PNG de reserva).
+- **`src/data/i18n.ts`** y **`src/data/locales/{es,en}.ts`**: sección `projects` en el esquema y en ambos idiomas, con el slug localizado de la página índice (`/proyectos/` · `/projects/`).
+
+### Cambiado
+
+- **`src/components/pages/Home/Home.astro`**: la sección `#projects` deja de ser una cáscara con escena reservada y pasa a montar el caso destacado; la escena del sol viaja ahora dentro del propio componente.
+
+### Técnico
+
+- El recorrido de las capturas se ata **al marco**, no a la sección: vale 0 justo cuando el marco asoma en pantalla. Atarlo a la sección —mucho más alta y con el marco a media altura— hacía que al llegar a verlo el progreso fuera ya del 45 %, y el visitante se perdía la cabecera del sitio capturado. Además el recorrido se **limita en unidades de viewport**, porque estas capturas son larguísimas (la móvil ronda 1:19) y recorrerlas enteras las hacía pasar volando: con el tope, la velocidad queda por debajo de 1× respecto al scroll. Que no se llegue al pie es aceptable; perderse la cabecera, no.
+- El contraste sobre la banda de fuego se resuelve **apartando el sol** en móvil (se corre a estribor y encoge) y con un velo oscuro bajo la tarjeta, no con sombras detrás del texto.
+- Cabecera y caso comparten una sola rejilla en escritorio, de modo que la tarjeta arranca a la altura del titular sin márgenes negativos que se descuadren al cambiar el texto. Desde 90rem la tarjeta se lleva algo más de ancho (6/5 en vez de 7/5) para que las cuatro cifras entren en una sola fila.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ctg-code",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "dependencies": {
     "@astrojs/sitemap": "^3.7.3",
     "@fontsource-variable/inter": "^5.2.8",

src/assets/recograscolombia_escritorio.avif

@@ -16,7 +16,7 @@ import LangNotice from "../../global/LangNotice/LangNotice.astro";
 import About from "../../sections/About/About.astro";
 import CTA from "../../ui/CTA/CTA.astro";
 import Starfield from "../../backdrop/Starfield/Starfield.astro";
-import Sun from "../../backdrop/Sun/Sun.astro";
+import Projects from "../../sections/Projects/Projects.astro";
 import Waves from "../../backdrop/Waves/Waves.astro";
 import CompassRose from "../../backdrop/CompassRose/CompassRose.astro";
 import { locales } from "../../../data/i18n";
@@ -181,12 +181,9 @@ const codeLines = t.hero.code.map((line) => tokenize(line));
     <!-- 02 · ABOUT — el CIELO: cirros de atardecer (tono dusk) -->
     <About lang={lang} />
 
-    <!-- 03 · PROJECTS — el HORIZONTE: la banda de fuego, el sol midiéndose
-         con el sextante. SOLO escena + altura reservada: el contenido del
-         escaparate llegará después, sección por sección. No inventar copy. -->
-    <section id="projects" class="horizon-stage" data-tone="horizon">
-      <Sun />
-    </section>
+    <!-- 03 · PROJECTS — el HORIZONTE: la banda de fuego y el escaparate. El
+         caso destacado monta su propia escena (el sol con su sextante). -->
+    <Projects lang={lang} />
 
     <!-- 04 · SERVICES — el MAR: la hondura, olas a contracorriente y la rosa
          de los vientos como marca de agua. SOLO escena + altura reservada. -->

src/assets/recograscolombia_escritorio.png

@@ -0,0 +1,145 @@
+---
+/**
+ * Projects — el escaparate (sección del Home · tono horizon).
+ *
+ * Con un solo trabajo entregable, la pieza NO es una rejilla esperando
+ * compañía: es un caso destacado a ancho completo. El sitio del cliente se
+ * recorre solo dentro de su marco (<ScrollShot />) conforme bajas, y el
+ * argumento son cifras verificables por cualquiera, no adjetivos.
+ *
+ * Dos salidas deliberadas: el sitio en producción del cliente (prueba) y la
+ * página que engloba todo el trabajo (continuidad).
+ */
+import { locales, localizedPath } from "../../../data/i18n";
+import ScrollShot from "../../ui/ScrollShot/ScrollShot.astro";
+import Sun from "../../backdrop/Sun/Sun.astro";
+import "./Projects.css";
+
+/* Capturas de página completa del sitio del cliente, en los tres formatos de
+   la cadena de respaldo (AVIF → WebP → PNG). Ya vienen optimizadas: se
+   importan como assets y se emiten tal cual. */
+import deskAvif from "../../../assets/recograscolombia_escritorio.avif";
+import deskWebp from "../../../assets/recograscolombia_escritorio.webp";
+import deskPng from "../../../assets/recograscolombia_escritorio.png";
+import mobAvif from "../../../assets/recograscolombia_movil.avif";
+import mobWebp from "../../../assets/recograscolombia_movil.webp";
+import mobPng from "../../../assets/recograscolombia_movil.png";
+
+interface Props {
+  lang: keyof typeof locales;
+}
+
+const { lang } = Astro.props;
+const t = locales[lang].projects;
+const p = t.featured;
+
+const desktopShot = { avif: deskAvif, webp: deskWebp, png: deskPng };
+const mobileShot = { avif: mobAvif, webp: mobWebp, png: mobPng };
+---
+
+<section
+  id="projects"
+  class="projects horizon-stage"
+  data-tone="horizon"
+  aria-labelledby="projects-title"
+>
+  <Sun />
+
+  <div class="pj-wrap">
+    <header class="pj-head">
+      <p class="eyebrow pj-eyebrow">
+        <span class="pj-idx">02</span>
+        <span class="pj-sep">/</span>
+        {t.eyebrow}
+      </p>
+      <h2 id="projects-title" class="pj-title">{t.title}</h2>
+      <p class="pj-lead">{t.lead}</p>
+    </header>
+
+    <article class="pj-case">
+      <div class="pj-shot">
+        <ScrollShot
+          desktop={desktopShot}
+          mobile={mobileShot}
+          alt={`${p.client} — ${p.tagline}`}
+          url={p.urlLabel}
+        />
+
+      <!-- La prueba humana ANTES de la visual: la voz de quien pagó el trabajo
+           encabeza el caso y las capturas lo sustentan. La cita va RECORTADA
+           (con elipsis) sobre el original de Google; se transcribe a mano a
+           propósito, no por API. -->
+      <figure class="pj-quote">
+        <p class="pj-quote-label">{t.testimonial.label}</p>
+        <blockquote
+          class="pj-quote-text"
+          cite={t.testimonial.sourceUrl || undefined}
+        >
+          {t.testimonial.quote}
+        </blockquote>
+
+        <figcaption class="pj-quote-by">
+          <span class="pj-quote-author">{t.testimonial.author}</span>
+          <span class="pj-quote-source">
+            {
+              t.testimonial.sourceUrl ? (
+                <a
+                  href={t.testimonial.sourceUrl}
+                  target="_blank"
+                  rel="noopener noreferrer nofollow"
+                >
+                  {t.testimonial.source}
+                </a>
+              ) : (
+                t.testimonial.source
+              )
+            }
+          </span>
+        </figcaption>
+
+        {t.testimonial.note && <p class="pj-quote-note">{t.testimonial.note}</p>}
+      </figure>
+      </div>
+
+      <div class="pj-body">
+        <p class="pj-tagline">{p.tagline}</p>
+        <h3 class="pj-client">{p.client}</h3>
+        <p class="pj-summary">{p.summary}</p>
+
+        <ul class="pj-stack" role="list">
+          {p.stack.map((tech) => <li class="pj-tech">{tech}</li>)}
+        </ul>
+
+        <!-- Las cifras: la prueba dura, con su procedencia declarada -->
+        <dl class="pj-metrics">
+          {
+            p.metrics.map((m) => (
+              <div class="pj-metric">
+                <dt class="pj-metric-label">{m.label}</dt>
+                <dd class="pj-metric-value">{m.value}</dd>
+              </div>
+            ))
+          }
+        </dl>
+        <p class="pj-source">{t.metricsSource}</p>
+
+        <div class="pj-actions">
+          <a
+            class="pj-visit"
+            href={p.url}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {t.visit}
+            <span class="pj-visit-arrow" aria-hidden="true">↗</span>
+          </a>
+
+          <a class="pj-all" href={localizedPath(lang, t.indexSlug)}>
+            {t.ctaAll}
+            <span class="pj-all-arrow" aria-hidden="true">→</span>
+          </a>
+        </div>
+      </div>
+    </article>
+  </div>
+</section>