From c143311e277ecfdf25fe32634f87e2b587a9cd10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauricio=20L=C3=B3pez=20Coria?=
 <mlopez@mini.hostingdelsur.net>
Date: Thu, 2 Jul 2026 14:13:13 -0300
Subject: [PATCH] fix: opacity fotos + audit completo + rollback legal pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero: Maldonado aerial opacity 0.12→0.30
- DifferenceCards: card photo opacity 0.06→0.15
- ProcessSteps: section photo opacity 0.05→0.15
- servicios/[slug] + en mirror: full Tailwind v3→CSS vars migration
- PricingTiers + PricingTiersFeatured: rounded-2xl→glass-card
- en/plans: hardcoded Spanish H1→i18n + reveal
- planes, servicios/index, en/servicios/index: reveal en hero
- legal pages: bg-hds-marfil+text-hds-humo→CSS vars
---
 src/components/DifferenceCards.astro      |  2 +-
 src/components/Hero.astro                 |  2 +-
 src/components/PricingTiers.astro         |  6 ++--
 src/components/PricingTiersFeatured.astro |  6 ++--
 src/components/ProcessSteps.astro         |  2 +-
 src/pages/en/legal/privacy.astro          |  4 +--
 src/pages/en/legal/terms.astro            |  6 ++--
 src/pages/en/plans.astro                  |  6 ++--
 src/pages/en/servicios/[slug].astro       | 36 +++++++++++------------
 src/pages/en/servicios/index.astro        |  2 +-
 src/pages/legal/privacidad.astro          |  4 +--
 src/pages/legal/terminos.astro            |  6 ++--
 src/pages/planes.astro                    |  2 +-
 src/pages/servicios/[slug].astro          | 36 +++++++++++------------
 src/pages/servicios/index.astro           |  2 +-
 15 files changed, 62 insertions(+), 60 deletions(-)

diff --git a/src/components/DifferenceCards.astro b/src/components/DifferenceCards.astro
index 0450978..49bc67b 100644
--- a/src/components/DifferenceCards.astro
+++ b/src/components/DifferenceCards.astro
@@ -33,7 +33,7 @@ const items = [
       {items.map((item, i) => (
         <article class="glass-card diff-card p-8 flex flex-col relative overflow-hidden" data-diff-index={i}>
           {item.photo && (
-            <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.06;">
+            <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.15;">
               <img
                 src={`${item.photo}.webp`}
                 alt=""
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index fca8edc..d00d402 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -29,7 +29,7 @@ const { t, whatsappUrl } = Astro.props;
         alt=""
         width="1920" height="800"
         class="w-full h-full object-cover"
-        style="opacity: 0.12;"
+        style="opacity: 0.30;"
         loading="eager"
         fetchpriority="high"
         decoding="async"
diff --git a/src/components/PricingTiers.astro b/src/components/PricingTiers.astro
index e6833ca..89de24a 100644
--- a/src/components/PricingTiers.astro
+++ b/src/components/PricingTiers.astro
@@ -20,10 +20,10 @@ function monthlyEquivalent(annual: number): string {
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
   {plans.map((plan) => (
     <div
-      class="relative rounded-2xl p-8 transition-all flex flex-col h-full"
+      class="relative glass-card p-8 transition-all flex flex-col h-full group hover:-translate-y-1"
       style={plan.recommended
-        ? `background: var(--hds-card); border: 2px solid var(--color-hds-naranja); box-shadow: 0 16px 40px rgba(238,118,35,0.15);`
-        : `background: var(--hds-card); border: 1px solid var(--hds-line);`}
+        ? `border: 2px solid var(--color-hds-naranja); box-shadow: 0 16px 40px rgba(238,118,35,0.15);`
+        : ''}
     >
       {plan.recommended && (
         <div class="absolute -top-3.5 left-1/2 -translate-x-1/2 text-[11px] font-bold tracking-[0.2em] uppercase px-4 py-1.5 rounded-full whitespace-nowrap" style="background: var(--color-hds-naranja); color: white; box-shadow: 0 4px 12px rgba(238,118,35,0.3);">
diff --git a/src/components/PricingTiersFeatured.astro b/src/components/PricingTiersFeatured.astro
index ad0e384..6eaf981 100644
--- a/src/components/PricingTiersFeatured.astro
+++ b/src/components/PricingTiersFeatured.astro
@@ -11,10 +11,10 @@ const { plans, whatsappUrl } = Astro.props;
 <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
   {plans.map((plan) => (
     <div
-      class="relative rounded-2xl p-8 transition-all flex flex-col h-full group hover:-translate-y-1"
+      class="relative glass-card p-8 transition-all flex flex-col h-full group hover:-translate-y-1"
       style={plan.recommended
-        ? `background: var(--hds-card); border: 2px solid var(--color-hds-naranja); box-shadow: 0 16px 48px rgba(238,118,35,0.18);`
-        : `background: var(--hds-card); border: 1px solid var(--hds-line);`}
+        ? `border: 2px solid var(--color-hds-naranja); box-shadow: 0 16px 48px rgba(238,118,35,0.18);`
+        : ''}
     >
       {plan.recommended && (
         <div class="absolute -top-3.5 left-1/2 -translate-x-1/2 text-[11px] font-bold tracking-[0.2em] uppercase px-4 py-1.5 rounded-full whitespace-nowrap" style="background: var(--color-hds-naranja); color: white; box-shadow: 0 4px 16px rgba(238,118,35,0.4);">
diff --git a/src/components/ProcessSteps.astro b/src/components/ProcessSteps.astro
index 567ec4c..ffe0fa8 100644
--- a/src/components/ProcessSteps.astro
+++ b/src/components/ProcessSteps.astro
@@ -19,7 +19,7 @@ const steps = [
   <div class="absolute inset-0 pointer-events-none" style="background: var(--hds-gradient-section);" aria-hidden="true"></div>
 
   <!-- Background photo: team working (very subtle, blurred) -->
-  <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.05; backdrop-filter: blur(4px);">
+  <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.15; backdrop-filter: blur(4px);">
     <img
       src="/images/photos/hands-typing-coffee-1200x800.webp"
       alt=""
diff --git a/src/pages/en/legal/privacy.astro b/src/pages/en/legal/privacy.astro
index e37b15a..2154b1c 100644
--- a/src/pages/en/legal/privacy.astro
+++ b/src/pages/en/legal/privacy.astro
@@ -10,10 +10,10 @@ const base = lang === 'en' ? '/en' : '';
   description={lang === 'en' ? 'Privacy policy of Hosting del Sur.' : 'Política de privacidad de Hosting del Sur.'}
   lang={lang}
 >
-  <article class="py-16 md:py-20 bg-hds-marfil">
+  <article class="py-16 md:py-20" style="background: var(--hds-bg);">
     <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 prose prose-lg">
       <h1>{lang === 'en' ? 'Privacy policy' : 'Política de privacidad'}</h1>
-      <p class="text-sm text-hds-humo">
+      <p class="text-sm" style="color: var(--hds-fg-muted);">
         {lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
       </p>
 
diff --git a/src/pages/en/legal/terms.astro b/src/pages/en/legal/terms.astro
index 3113292..66674c5 100644
--- a/src/pages/en/legal/terms.astro
+++ b/src/pages/en/legal/terms.astro
@@ -9,10 +9,10 @@ const lang = getLangFromUrl(Astro.url);
   description={lang === 'en' ? 'Terms of service of Hosting del Sur.' : 'Términos del servicio de Hosting del Sur.'}
   lang={lang}
 >
-  <article class="py-16 md:py-20 bg-hds-marfil">
+  <article class="py-16 md:py-20" style="background: var(--hds-bg);">
     <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 prose prose-lg">
-      <h1>{lang === 'en' ? 'Terms of service' : 'Términos del servicio'}</h1>
-      <p class="text-sm text-hds-humo">
+      <h1>{lang === 'en' ? 'Terms and conditions' : 'Términos y condiciones'}</h1>
+      <p class="text-sm" style="color: var(--hds-fg-muted);">
         {lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
       </p>
 
diff --git a/src/pages/en/plans.astro b/src/pages/en/plans.astro
index 8b6eddc..8d5c8d6 100644
--- a/src/pages/en/plans.astro
+++ b/src/pages/en/plans.astro
@@ -19,10 +19,12 @@ const base = lang === 'en' ? '/en' : '';
   lang={lang}
 >
   <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
       <SectionEyebrow text={lang === 'en' ? 'Hosting plans' : 'Planes de hosting'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
-        Elegí el plan que se<br/>adapta a tu <span style="color: var(--color-hds-naranja); font-style: italic;">proyecto</span>.
+        {lang === 'en'
+          ? <>Choose the plan that<br/>fits your <span style="color: var(--color-hds-naranja); font-style: italic;">project</span>.</>
+          : <>Elegí el plan que se<br/>adapta a tu <span style="color: var(--color-hds-naranja); font-style: italic;">proyecto</span>.</>}
       </h1>
       <p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
         {lang === 'en'
diff --git a/src/pages/en/servicios/[slug].astro b/src/pages/en/servicios/[slug].astro
index 3b56639..113a780 100644
--- a/src/pages/en/servicios/[slug].astro
+++ b/src/pages/en/servicios/[slug].astro
@@ -196,27 +196,27 @@ const whatsappUrl = 'https://wa.me/59899812487';
   description={body}
   lang={lang}
 >
-  <section class="bg-hds-crema py-12 md:py-16">
+  <section class="py-12 md:py-16" style="background: var(--hds-bg-soft);">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <nav aria-label="Breadcrumb" class="text-sm text-hds-humo mb-6">
+      <nav aria-label="Breadcrumb" class="text-sm mb-6" style="color: var(--hds-fg-muted);">
         <ol class="flex flex-wrap items-center gap-2">
-          <li><a href={`${base}/`} class="hover:text-hds-naranja">{lang === 'en' ? 'Home' : 'Inicio'}</a></li>
+          <li><a href={`${base}/`} class="transition-colors" style="color: var(--hds-fg-muted);" onmouseover="this.style.color='var(--color-hds-naranja)'" onmouseout="this.style.color='var(--hds-fg-muted)'">{lang === 'en' ? 'Home' : 'Inicio'}</a></li>
           <li aria-hidden="true">/</li>
-          <li><a href={`${base}/servicios/`} class="hover:text-hds-naranja">{lang === 'en' ? 'Services' : 'Servicios'}</a></li>
+          <li><a href={`${base}/servicios/`} class="transition-colors" style="color: var(--hds-fg-muted);" onmouseover="this.style.color='var(--color-hds-naranja)'" onmouseout="this.style.color='var(--hds-fg-muted)'">{lang === 'en' ? 'Services' : 'Servicios'}</a></li>
           <li aria-hidden="true">/</li>
-          <li class="text-hds-grafito" aria-current="page">{title}</li>
+          <li aria-current="page" style="color: var(--hds-fg-soft);">{title}</li>
         </ol>
       </nav>
 
-      <div class="flex items-start gap-5 mb-4">
-        <div class="flex-shrink-0 bg-white rounded-lg p-3 border border-hds-linea">
+      <div class="flex items-start gap-5 mb-4 reveal">
+        <div class="flex-shrink-0 glass-card p-3 flex items-center justify-center">
           <service.icon class="w-10 h-10" />
         </div>
         <div>
-          <p class="text-xs font-semibold tracking-wider uppercase text-hds-naranja mb-1">
+          <p class="text-xs font-semibold tracking-[0.25em] uppercase mb-1" style="color: var(--color-hds-naranja);">
             {service.category}
           </p>
-          <h1 class="text-3xl md:text-5xl text-hds-tinta leading-tight">
+          <h1 class="font-display leading-tight" style="font-size: clamp(2rem, 4vw, 3rem); color: var(--hds-fg);">
             {title}
           </h1>
         </div>
@@ -224,13 +224,13 @@ const whatsappUrl = 'https://wa.me/59899812487';
     </div>
   </section>
 
-  <section class="py-16 md:py-20 bg-hds-marfil">
-    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-      <p class="text-lg text-hds-grafito leading-relaxed mb-10">
+  <section class="py-16 md:py-20" style="background: var(--hds-bg);">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
+      <p class="text-lg leading-relaxed mb-10" style="color: var(--hds-fg-soft);">
         {body}
       </p>
 
-      <h2 class="text-2xl md:text-3xl text-hds-tinta mb-6">
+      <h2 class="font-display mb-6" style="font-size: clamp(1.5rem, 3vw, 2rem); color: var(--hds-fg);">
         {lang === 'en' ? 'What is included' : 'Qué incluye'}
       </h2>
 
@@ -240,16 +240,16 @@ const whatsappUrl = 'https://wa.me/59899812487';
             <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#EE7623" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-0.5" aria-hidden="true">
               <polyline points="20 6 9 17 4 12"/>
             </svg>
-            <span class="text-hds-grafito">{feature}</span>
+            <span style="color: var(--hds-fg-soft);">{feature}</span>
           </li>
         ))}
       </ul>
 
-      <div class="bg-hds-crema rounded-lg p-8 border border-hds-linea">
-        <h3 class="text-xl text-hds-tinta mb-2">
+      <div class="glass-card p-8">
+        <h3 class="text-xl mb-2" style="color: var(--hds-fg);">
           {lang === 'en' ? 'Want to know more?' : '¿Querés saber más?'}
         </h3>
-        <p class="text-hds-grafito mb-5">
+        <p class="mb-5" style="color: var(--hds-fg-soft);">
           {lang === 'en'
             ? 'Tell us about your project and we will reply with a tailor-made proposal.'
             : 'Contanos sobre tu proyecto y te respondemos con una propuesta a medida.'}
@@ -258,7 +258,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
           href={whatsappUrl}
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center justify-center gap-2 bg-hds-naranja hover:bg-hds-naranja-hover text-white text-sm font-semibold px-5 py-2.5 rounded-md transition-colors"
+          class="btn-secondary text-sm"
         >
           {lang === 'en' ? 'Chat on WhatsApp' : 'Hablar por WhatsApp'}
         </a>
diff --git a/src/pages/en/servicios/index.astro b/src/pages/en/servicios/index.astro
index 8a801b1..50108d9 100644
--- a/src/pages/en/servicios/index.astro
+++ b/src/pages/en/servicios/index.astro
@@ -48,7 +48,7 @@ const groups = [
   lang={lang}
 >
   <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
       <SectionEyebrow text={lang === 'en' ? 'What we do' : 'Lo que hacemos'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en' ? 'Our' : 'Nuestros'} <span style="color: var(--color-hds-naranja); font-style: italic;">{lang === 'en' ? 'services' : 'servicios'}</span>.
diff --git a/src/pages/legal/privacidad.astro b/src/pages/legal/privacidad.astro
index e37b15a..2154b1c 100644
--- a/src/pages/legal/privacidad.astro
+++ b/src/pages/legal/privacidad.astro
@@ -10,10 +10,10 @@ const base = lang === 'en' ? '/en' : '';
   description={lang === 'en' ? 'Privacy policy of Hosting del Sur.' : 'Política de privacidad de Hosting del Sur.'}
   lang={lang}
 >
-  <article class="py-16 md:py-20 bg-hds-marfil">
+  <article class="py-16 md:py-20" style="background: var(--hds-bg);">
     <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 prose prose-lg">
       <h1>{lang === 'en' ? 'Privacy policy' : 'Política de privacidad'}</h1>
-      <p class="text-sm text-hds-humo">
+      <p class="text-sm" style="color: var(--hds-fg-muted);">
         {lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
       </p>
 
diff --git a/src/pages/legal/terminos.astro b/src/pages/legal/terminos.astro
index 3113292..66674c5 100644
--- a/src/pages/legal/terminos.astro
+++ b/src/pages/legal/terminos.astro
@@ -9,10 +9,10 @@ const lang = getLangFromUrl(Astro.url);
   description={lang === 'en' ? 'Terms of service of Hosting del Sur.' : 'Términos del servicio de Hosting del Sur.'}
   lang={lang}
 >
-  <article class="py-16 md:py-20 bg-hds-marfil">
+  <article class="py-16 md:py-20" style="background: var(--hds-bg);">
     <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 prose prose-lg">
-      <h1>{lang === 'en' ? 'Terms of service' : 'Términos del servicio'}</h1>
-      <p class="text-sm text-hds-humo">
+      <h1>{lang === 'en' ? 'Terms and conditions' : 'Términos y condiciones'}</h1>
+      <p class="text-sm" style="color: var(--hds-fg-muted);">
         {lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
       </p>
 
diff --git a/src/pages/planes.astro b/src/pages/planes.astro
index 2037ff2..bde44d9 100644
--- a/src/pages/planes.astro
+++ b/src/pages/planes.astro
@@ -32,7 +32,7 @@ function monthly(annual: number): string {
 >
   <section class="pt-24 pb-16 md:pt-32 md:pb-20 relative overflow-hidden" style="background: var(--hds-bg-soft);">
     <div class="absolute inset-0" style="background: var(--hds-gradient-hero);" aria-hidden="true"></div>
-    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal">
       <SectionEyebrow text={lang === 'en' ? 'Hosting plans' : 'Planes de hosting'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en' ? 'Plans designed around your' : 'Planes pensados alrededor de tu'} <span style="color: var(--color-hds-naranja);">{lang === 'en' ? 'project' : 'proyecto'}</span>.
diff --git a/src/pages/servicios/[slug].astro b/src/pages/servicios/[slug].astro
index 3b56639..113a780 100644
--- a/src/pages/servicios/[slug].astro
+++ b/src/pages/servicios/[slug].astro
@@ -196,27 +196,27 @@ const whatsappUrl = 'https://wa.me/59899812487';
   description={body}
   lang={lang}
 >
-  <section class="bg-hds-crema py-12 md:py-16">
+  <section class="py-12 md:py-16" style="background: var(--hds-bg-soft);">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-      <nav aria-label="Breadcrumb" class="text-sm text-hds-humo mb-6">
+      <nav aria-label="Breadcrumb" class="text-sm mb-6" style="color: var(--hds-fg-muted);">
         <ol class="flex flex-wrap items-center gap-2">
-          <li><a href={`${base}/`} class="hover:text-hds-naranja">{lang === 'en' ? 'Home' : 'Inicio'}</a></li>
+          <li><a href={`${base}/`} class="transition-colors" style="color: var(--hds-fg-muted);" onmouseover="this.style.color='var(--color-hds-naranja)'" onmouseout="this.style.color='var(--hds-fg-muted)'">{lang === 'en' ? 'Home' : 'Inicio'}</a></li>
           <li aria-hidden="true">/</li>
-          <li><a href={`${base}/servicios/`} class="hover:text-hds-naranja">{lang === 'en' ? 'Services' : 'Servicios'}</a></li>
+          <li><a href={`${base}/servicios/`} class="transition-colors" style="color: var(--hds-fg-muted);" onmouseover="this.style.color='var(--color-hds-naranja)'" onmouseout="this.style.color='var(--hds-fg-muted)'">{lang === 'en' ? 'Services' : 'Servicios'}</a></li>
           <li aria-hidden="true">/</li>
-          <li class="text-hds-grafito" aria-current="page">{title}</li>
+          <li aria-current="page" style="color: var(--hds-fg-soft);">{title}</li>
         </ol>
       </nav>
 
-      <div class="flex items-start gap-5 mb-4">
-        <div class="flex-shrink-0 bg-white rounded-lg p-3 border border-hds-linea">
+      <div class="flex items-start gap-5 mb-4 reveal">
+        <div class="flex-shrink-0 glass-card p-3 flex items-center justify-center">
           <service.icon class="w-10 h-10" />
         </div>
         <div>
-          <p class="text-xs font-semibold tracking-wider uppercase text-hds-naranja mb-1">
+          <p class="text-xs font-semibold tracking-[0.25em] uppercase mb-1" style="color: var(--color-hds-naranja);">
             {service.category}
           </p>
-          <h1 class="text-3xl md:text-5xl text-hds-tinta leading-tight">
+          <h1 class="font-display leading-tight" style="font-size: clamp(2rem, 4vw, 3rem); color: var(--hds-fg);">
             {title}
           </h1>
         </div>
@@ -224,13 +224,13 @@ const whatsappUrl = 'https://wa.me/59899812487';
     </div>
   </section>
 
-  <section class="py-16 md:py-20 bg-hds-marfil">
-    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
-      <p class="text-lg text-hds-grafito leading-relaxed mb-10">
+  <section class="py-16 md:py-20" style="background: var(--hds-bg);">
+    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
+      <p class="text-lg leading-relaxed mb-10" style="color: var(--hds-fg-soft);">
         {body}
       </p>
 
-      <h2 class="text-2xl md:text-3xl text-hds-tinta mb-6">
+      <h2 class="font-display mb-6" style="font-size: clamp(1.5rem, 3vw, 2rem); color: var(--hds-fg);">
         {lang === 'en' ? 'What is included' : 'Qué incluye'}
       </h2>
 
@@ -240,16 +240,16 @@ const whatsappUrl = 'https://wa.me/59899812487';
             <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#EE7623" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-0.5" aria-hidden="true">
               <polyline points="20 6 9 17 4 12"/>
             </svg>
-            <span class="text-hds-grafito">{feature}</span>
+            <span style="color: var(--hds-fg-soft);">{feature}</span>
           </li>
         ))}
       </ul>
 
-      <div class="bg-hds-crema rounded-lg p-8 border border-hds-linea">
-        <h3 class="text-xl text-hds-tinta mb-2">
+      <div class="glass-card p-8">
+        <h3 class="text-xl mb-2" style="color: var(--hds-fg);">
           {lang === 'en' ? 'Want to know more?' : '¿Querés saber más?'}
         </h3>
-        <p class="text-hds-grafito mb-5">
+        <p class="mb-5" style="color: var(--hds-fg-soft);">
           {lang === 'en'
             ? 'Tell us about your project and we will reply with a tailor-made proposal.'
             : 'Contanos sobre tu proyecto y te respondemos con una propuesta a medida.'}
@@ -258,7 +258,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
           href={whatsappUrl}
           target="_blank"
           rel="noopener noreferrer"
-          class="inline-flex items-center justify-center gap-2 bg-hds-naranja hover:bg-hds-naranja-hover text-white text-sm font-semibold px-5 py-2.5 rounded-md transition-colors"
+          class="btn-secondary text-sm"
         >
           {lang === 'en' ? 'Chat on WhatsApp' : 'Hablar por WhatsApp'}
         </a>
diff --git a/src/pages/servicios/index.astro b/src/pages/servicios/index.astro
index 81408f8..bd16b40 100644
--- a/src/pages/servicios/index.astro
+++ b/src/pages/servicios/index.astro
@@ -73,7 +73,7 @@ const categoryInfo: Record<keyof typeof plansByCategory, { title: string; subtit
 >
   <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative" style="background: var(--hds-bg-soft);">
     <div class="absolute inset-0 particle-grid opacity-60" aria-hidden="true"></div>
-    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
       <SectionEyebrow text={lang === 'en' ? 'What we do' : 'Lo que hacemos'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en' ? 'Our' : 'Nuestros'} <span style="color: var(--color-hds-naranja); font-style: italic;">{lang === 'en' ? 'services' : 'servicios'}</span>.