palabras clave en gradiente

contacto.html

@@ -55,7 +55,7 @@
   <section class="section-tight">
     <div class="container">
       <p class="eyebrow">CONTACTO</p>
-      <h1 style="font-size:var(--step-3); max-width:16ch;">Hablemos de tu próximo proyecto.</h1>
+      <h1 style="font-size:var(--step-3); max-width:16ch;"><span class="grad-word">Hablemos</span> de tu próximo proyecto.</h1>
     </div>
   </section>
 

css/styles.css

@@ -13,6 +13,10 @@
   --c-plum-2: #110916;
   --c-mist: #eaf0ee;
   --c-blush: #dfbdb9;
+  --rose-gold-1: #DFBDB9;
+  --rose-gold-2: #BA8B7A;
+  --rose-gold-3: #C89A82;
+
   
   /* --- Semantic tokens: LIGHT theme --- */
   --bg: var(--c-mist);
@@ -53,6 +57,12 @@
   --radius-arch: 999px 999px 12px 12px;
   --max-w: 1180px;
 
+  .grad-word {
+  background: linear-gradient(100deg, var(--c-teal-web) 0%, var(--c-magenta) 70%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  }
   color-scheme: light;
 }
 
@@ -70,6 +80,12 @@ html[data-theme="dark"] {
   --border: rgba(234, 240, 238, 0.14);
   --border-strong: rgba(234, 240, 238, 0.28);
   --shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.6);
+  .grad-word {
+  background: linear-gradient(100deg, var(--c-magenta) 0%, var(--c-teal-web) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  }
   color-scheme: dark;
 }
 
@@ -102,7 +118,7 @@ h1, h2, h3, h4 {
   margin: 0;
   color: var(--text);
 }
-h1 { font-size: var(--step-4); font-style: italic; font-weight: 700; }
+h1 { font-size: var(--step-4); font-style: italic; font-weight: 600; }
 h2 { font-size: var(--step-3); font-style: italic; }
 h3 { font-size: var(--step-2); }
 h4 { font-size: var(--step-1); font-style: italic; }

index.html

@@ -58,8 +58,8 @@
     <div class="container">
       <div class="hero-copy">
         <p class="eyebrow">ESTUDIO CREATIVO · AGENCIA BOUTIQUE</p>
-        <h1>Marcas con esencia,
+        <h1>Marcas con <span class="grad-word">esencia,</span>
-        construidas con estrategia.</h1>
+        construidas con <span class="grad-word">estrategia.</span></h1>
         <p class="lede" style="margin-top:1.2rem;">Servicios a medida para negocios que quieren crecer sin perder lo que los hace únicos.</p>
         <div class="btn-row">
           <a href="diagnostico.html" class="btn btn-primary">Encontrá tu solución</a>

metodo.html

@@ -55,7 +55,7 @@
   <section class="section-tight">
     <div class="container">
       <p class="eyebrow">MÉTODO</p>
-      <h1 style="font-size:var(--step-4); max-width:20ch;">No empezamos diseñando. Empezamos entendiendo.</h1>
+      <h1 style="font-size:var(--step-4); max-width:30ch;">No empezamos diseñando. Empezamos <span class="grad-word">entendiendo.</span></h1>
       <p class="lede" style="margin-top:1rem;">De la esencia a la estructura: cada proyecto comienza entendiendo el negocio y termina midiendo lo que construimos.</p>
     </div>
   </section>

nosotros.html

@@ -55,7 +55,7 @@
   <section class="section-tight">
     <div class="container">
       <p class="eyebrow">NOSOTROS</p>
-      <h1 style="font-size:var(--step-4); max-width:25ch;">Amor y Roma. <br>Dos fuerzas. <br>Una forma de construir.</h1>
+      <h1 style="font-size:var(--step-4); max-width:25ch;">Amor &amp; Roma. <br>Dos fuerzas. <br><span class="grad-word">Una forma de construir.</span></h1>
     </div>
   </section>
 
@@ -103,7 +103,7 @@
   <section>
     <div class="container">
       <p class="eyebrow">EL EQUIPO</p>
-      <h2 style="max-width:30ch;">Combinamos el arte del Marketing <br>con la Ciencia de los datos.</h2>
+      <h2 style="max-width:30ch;">Combinamos el <span class="grad-word">arte</span> del Marketing <br>con la <span class="grad-word">Una forma de construir.</span> de los Datos.</h2>
       <div class="grid grid-4" style="margin-top:var(--space-4);">
         <div class="team-slot">Foto pendiente<br>Nombre · Rol</div>
         <div class="team-slot">Foto pendiente<br>Nombre · Rol</div>

planes.html

@@ -55,7 +55,7 @@
   <section class="section-tight">
     <div class="container">
       <p class="eyebrow">PLANES RECURRENTES</p>
-      <h1 style="font-size:var(--step-4); max-width:20ch;">Distintos negocios. Distintas etapas. <br>Un mismo objetivo: crecer.</h1>
+      <h1 style="font-size:var(--step-4); max-width:30ch;">Distintos negocios. <br>Distintas etapas. <br>Un mismo objetivo: <span class="grad-word">crecer</span></h1>
       <p class="lede" style="margin-top:1rem;">Los cuatro planes acompañan diferentes niveles de madurez. Hacé clic en una tarjeta para ver el detalle completo.</p>
       <p style="margin-top:0.6rem; font-size:0.82rem; color:var(--text-soft);">* Precios de referencia (placeholder) — a confirmar antes de publicar.</p>
     </div>

portfolio.html

@@ -55,7 +55,7 @@
   <section class="section-tight">
     <div class="container">
       <p class="eyebrow">PORTFOLIO</p>
-      <h1 style="font-size:var(--step-4); max-width:20ch;">Proyectos que combinan identidad, estrategia y estructura.</h1>
+      <h1 style="font-size:var(--step-4); max-width:20ch;">Proyectos que combinan <span class="grad-word">identidad,</span> estrategia y estructura.</h1>
       <p class="lede" style="margin-top:1rem;">Estos casos son placeholders representativos de nuestros cuatro arquetipos de trabajo → se reemplazan por proyectos reales antes de publicar.</p>
     </div>
   </section>

servicios.html

@@ -55,7 +55,7 @@
   <section class="section-tight">
     <div class="container">
       <p class="eyebrow">SERVICIOS</p>
-      <h1 style="font-size:var(--step-4); max-width:20ch;">Soluciones digitales diseñadas para hacer crecer tu marca.</h1>
+      <h1 style="font-size:var(--step-4); max-width:20ch;">Soluciones digitales diseñadas para hacer <span class="grad-word">crecer</span> tu marca.</h1>
       <p class="lede" style="margin-top:1rem;">No vendemos piezas sueltas: cada servicio resuelve un problema concreto de tu negocio, y puede combinarse con otros según tu etapa.</p>
       <a href="diagnostico.html" class="btn btn-primary" style="margin-top:1.5rem;">Encontrá tu solución</a>
     </div>