From 672c567681ce9a5342e7b485120ed8d3f8c3b83c Mon Sep 17 00:00:00 2001
From: erikgh <erikguzh@outlook.es>
Date: Mon, 3 Aug 2026 15:58:27 -0600
Subject: [PATCH] =?UTF-8?q?feat(header):=20la=20barra=20tambi=C3=A9n=20pas?=
 =?UTF-8?q?a=20a=20azul=20profundo?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Wordmark en negativo, CTA en dorado y borde inferior en blanco al 10%.
Con el hero en azul, una barra blanca encima partía la apertura en dos;
ahora la parte de arriba de la página es un bloque.

Sobre las secciones claras de más abajo deja de leerse como cromo del
navegador y pasa a leerse como la barra de la marca, con el dorado del
CTA sosteniendo el contraste sobre cualquiera de los tres fondos.

Verificado sobre los tres: el hero azul, una sección blanca y el
escenario fotográfico del recorrido.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 components/layout/Header.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index 483457b..72e68d5 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -8,6 +8,10 @@ import { Container } from '@/components/primitives/Container';
 import { ProgresoLectura } from '@/components/primitives/ProgresoLectura';
 import { header } from '@/lib/content';
 
+// Navy like the hero it sits on, so the top of the page is one block instead of
+// a white bar stuck over a dark opening. Over the light sections further down it
+// reads as the brand's own bar rather than as page chrome.
+//
 // The header tightens once the reader leaves the hero: less chrome, more page.
 // Client component because the compaction needs scroll state on the <header>
 // itself; there is no server-rendered data here to lose.
@@ -23,16 +27,16 @@ export function Header() {
 
   return (
     <header
-      className={`sticky top-0 z-50 relative border-b border-azul-profundo/10 bg-white/80 backdrop-blur transition-[padding] duration-300 motion-reduce:transition-none ${
+      className={`sticky top-0 z-50 relative border-b border-white/10 bg-azul-profundo/90 backdrop-blur transition-[padding] duration-300 motion-reduce:transition-none ${
         compacto ? 'py-0' : 'py-3'
       }`}
     >
       <Container className="flex items-center justify-between">
         <a href="#top" aria-label="creeer — inicio" className="block transition-transform duration-300 origin-left motion-reduce:transition-none">
-          <Wordmark size={compacto ? 'sm' : 'md'} />
+          <Wordmark size={compacto ? 'sm' : 'md'} onDark />
         </a>
         <nav aria-label="Principal">
-          <CTA href="#contacto" label={header.cta} variant="light" />
+          <CTA href="#contacto" label={header.cta} variant="dark" />
         </nav>
       </Container>
       <ProgresoLectura />