From 40f8f74d1d05d633cd567b96dba294ad76af066b Mon Sep 17 00:00:00 2001
From: erikgh <erikguzh@outlook.es>
Date: Fri, 31 Jul 2026 11:44:00 -0600
Subject: [PATCH] feat(ritmo): dos niveles de titular y alternancia de fondos

---
 components/sections/Cierre.tsx          | 2 +-
 components/sections/ComoEmpezar.tsx     | 4 ++--
 components/sections/Disciplinas.tsx     | 2 +-
 components/sections/Dolores.tsx         | 4 ++--
 components/sections/Estratega.tsx       | 4 ++--
 components/sections/FraseAncla.tsx      | 2 +-
 components/sections/Mecanismo.tsx       | 2 +-
 components/sections/ParaQuien.tsx       | 2 +-
 components/sections/PuntosInflexion.tsx | 2 +-
 tailwind.config.ts                      | 7 +++++++
 10 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/components/sections/Cierre.tsx b/components/sections/Cierre.tsx
index 7c1ea6c..9b3e4af 100644
--- a/components/sections/Cierre.tsx
+++ b/components/sections/Cierre.tsx
@@ -18,7 +18,7 @@ export function Cierre() {
           className="flex flex-col items-center">
           <motion.div variants={fadeInUp}><Wordmark size="lg" onDark showTagline /></motion.div>
           <motion.p variants={fadeInUp}
-            className="mt-12 font-sans font-black text-3xl md:text-5xl leading-[1.05] tracking-tight max-w-3xl">
+            className="mt-12 font-sans font-black text-ancla max-w-3xl">
             {cierre.quote}
           </motion.p>
           <motion.div variants={fadeInUp} className="mt-10">
diff --git a/components/sections/ComoEmpezar.tsx b/components/sections/ComoEmpezar.tsx
index 8ac28aa..9597cf1 100644
--- a/components/sections/ComoEmpezar.tsx
+++ b/components/sections/ComoEmpezar.tsx
@@ -15,11 +15,11 @@ export function ComoEmpezar() {
   const waHref = `${cierre.contact.whatsapp.href}?text=${encodeURIComponent(comoEmpezar.whatsappText)}`;
   const { active, setActive, hoverProps } = useAutoStep(comoEmpezar.steps.length, 3200);
   return (
-    <section className="bg-gris-claro">
+    <section className="bg-white">
       <Container className="py-24 md:py-32 grid gap-12 md:grid-cols-[1fr_auto] md:items-center">
         <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}>
           <motion.p variants={fadeInUp} className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{comoEmpezar.eyebrow}</motion.p>
-          <motion.h2 variants={fadeInUp} className="mt-4 font-sans font-black text-4xl md:text-6xl leading-[0.95] tracking-tight text-azul-profundo max-w-xl">{comoEmpezar.title}</motion.h2>
+          <motion.h2 variants={fadeInUp} className="mt-4 font-sans font-black text-seccion text-azul-profundo max-w-xl">{comoEmpezar.title}</motion.h2>
           <motion.ol variants={staggerContainer} {...hoverProps} className="mt-12 grid gap-10 sm:grid-cols-3 md:grid-cols-1 md:gap-8">
             {comoEmpezar.steps.map((step, i) => (
               <motion.li key={step.n} variants={fadeInUp}>
diff --git a/components/sections/Disciplinas.tsx b/components/sections/Disciplinas.tsx
index f2b573e..5bc1d79 100644
--- a/components/sections/Disciplinas.tsx
+++ b/components/sections/Disciplinas.tsx
@@ -17,7 +17,7 @@ export function Disciplinas() {
         <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{disciplinas.eyebrow}</motion.p>
         <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
-          className="mt-4 font-sans font-black text-4xl md:text-6xl text-azul-profundo tracking-tight">{disciplinas.title}</motion.h2>
+          className="mt-4 font-sans font-black text-seccion text-azul-profundo">{disciplinas.title}</motion.h2>
         <motion.div variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="mt-4 md:flex md:items-center md:justify-between md:gap-10">
           <p className="text-gris-medio text-lg">{disciplinas.lead}</p>
diff --git a/components/sections/Dolores.tsx b/components/sections/Dolores.tsx
index 4632bf4..8eba47d 100644
--- a/components/sections/Dolores.tsx
+++ b/components/sections/Dolores.tsx
@@ -16,7 +16,7 @@ export function Dolores() {
         <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{dolores.eyebrow}</motion.p>
         <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
-          className="mt-4 font-sans font-black text-4xl md:text-6xl text-azul-profundo leading-[0.95] max-w-3xl tracking-tight">{dolores.title}</motion.h2>
+          className="mt-4 font-sans font-black text-seccion text-azul-profundo max-w-3xl">{dolores.title}</motion.h2>
         <motion.ul variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="mt-14 grid gap-8 md:grid-cols-2 list-none p-0">
           {dolores.quotes.map((quote) => (
@@ -33,7 +33,7 @@ export function Dolores() {
           ))}
         </motion.ul>
         <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
-          className="mt-16 font-sans font-black text-3xl md:text-5xl leading-[1.05] text-azul-profundo max-w-4xl tracking-tight">
+          className="mt-16 font-sans font-black text-ancla text-azul-profundo max-w-4xl">
           {dolores.remate.before}{' '}
           <span className="text-dorado">{dolores.remate.accent}</span>
         </motion.p>
diff --git a/components/sections/Estratega.tsx b/components/sections/Estratega.tsx
index 0901871..94c97b6 100644
--- a/components/sections/Estratega.tsx
+++ b/components/sections/Estratega.tsx
@@ -11,7 +11,7 @@ import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, moti
 export function Estratega() {
   const reduced = usePrefersReducedMotion();
   return (
-    <section className="bg-white">
+    <section className="bg-gris-claro">
       <Container className="py-24 md:py-32">
         <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="grid gap-12 md:grid-cols-[auto_1fr] md:items-center">
@@ -29,7 +29,7 @@ export function Estratega() {
             <motion.p variants={fadeInUp} className="text-xs tracking-[0.3em] uppercase font-black text-dorado">
               {estratega.eyebrow.before} <span className="normal-case">{estratega.eyebrow.brand}</span>
             </motion.p>
-            <motion.h2 variants={fadeInUp} className="mt-4 font-sans font-black text-4xl md:text-6xl text-azul-profundo tracking-tight">{estratega.title}</motion.h2>
+            <motion.h2 variants={fadeInUp} className="mt-4 font-sans font-black text-seccion text-azul-profundo">{estratega.title}</motion.h2>
             <motion.div variants={fadeInUp} className="mt-6 flex items-baseline gap-3">
               <ContadorNumero hasta={30} sufijo="+" className="font-sans font-black text-5xl md:text-6xl text-dorado leading-none" />
               <p className="text-xs uppercase tracking-[0.2em] text-gris-medio font-semibold max-w-[8rem] leading-tight">años construyendo marcas</p>
diff --git a/components/sections/FraseAncla.tsx b/components/sections/FraseAncla.tsx
index 41762bb..dd20255 100644
--- a/components/sections/FraseAncla.tsx
+++ b/components/sections/FraseAncla.tsx
@@ -24,7 +24,7 @@ export function FraseAncla() {
           whileInView="visible"
           viewport={viewportOnce}
           {...motionProps(reduced)}
-          className="mt-10 font-sans font-black text-4xl md:text-6xl leading-[0.95] tracking-tight text-white"
+          className="mt-10 font-sans font-black text-ancla text-white"
         >
           <TextoDesenfoque
             segments={[
diff --git a/components/sections/Mecanismo.tsx b/components/sections/Mecanismo.tsx
index ac74384..8976cb6 100644
--- a/components/sections/Mecanismo.tsx
+++ b/components/sections/Mecanismo.tsx
@@ -20,7 +20,7 @@ export function Mecanismo() {
         <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{mecanismo.eyebrow}</motion.p>
         <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
-          className="mt-4 font-sans font-black text-4xl md:text-6xl tracking-tight">{mecanismo.title}</motion.h2>
+          className="mt-4 font-sans font-black text-seccion">{mecanismo.title}</motion.h2>
 
         {/* Conector de pasos: avanza solo cada ~3s (se pausa con hover o si el
             usuario elige un paso), y adelanta la línea de progreso — el mismo
diff --git a/components/sections/ParaQuien.tsx b/components/sections/ParaQuien.tsx
index 4a9ccb6..65c00d2 100644
--- a/components/sections/ParaQuien.tsx
+++ b/components/sections/ParaQuien.tsx
@@ -12,7 +12,7 @@ export function ParaQuien() {
     <section className="bg-white relative overflow-hidden">
       <Container className="relative pt-24 md:pt-32 pb-12 md:pb-16 md:flex md:items-center md:justify-between md:gap-12">
         <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
-          className="font-sans font-black text-4xl md:text-6xl text-azul-profundo leading-[0.95] max-w-3xl tracking-tight">{paraQuien.title}</motion.h2>
+          className="font-sans font-black text-seccion text-azul-profundo max-w-3xl">{paraQuien.title}</motion.h2>
         <motion.div variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="mt-8 md:mt-0 shrink-0">
           <IlustracionBifurcacion className="w-56 md:w-72 h-auto mx-auto" />
diff --git a/components/sections/PuntosInflexion.tsx b/components/sections/PuntosInflexion.tsx
index 4141e14..2acc29f 100644
--- a/components/sections/PuntosInflexion.tsx
+++ b/components/sections/PuntosInflexion.tsx
@@ -32,7 +32,7 @@ export function PuntosInflexion() {
             <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
               className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{puntosInflexion.eyebrow}</motion.p>
             <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
-              className="mt-4 font-sans font-black text-4xl md:text-6xl text-azul-profundo leading-[0.95] tracking-tight max-w-3xl">{puntosInflexion.title}</motion.h2>
+              className="mt-4 font-sans font-black text-seccion text-azul-profundo max-w-3xl">{puntosInflexion.title}</motion.h2>
           </div>
           <motion.div variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
             className="mt-8 md:mt-0 shrink-0">
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7e10cec..0c9f423 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -27,6 +27,13 @@ const config: Config = {
       maxWidth: {
         content: '1152px',
       },
+      fontSize: {
+        // Two title roles, so a brand statement never looks like a section
+        // heading. Fluid so they hold from 360px to desktop without a stack of
+        // breakpoint overrides.
+        ancla: ['clamp(2.5rem, 6.5vw, 4.5rem)', { lineHeight: '0.98', letterSpacing: '-0.025em' }],
+        seccion: ['clamp(2rem, 4vw, 3.25rem)', { lineHeight: '1.02', letterSpacing: '-0.02em' }],
+      },
     },
   },
   plugins: [],