From 99d9713a406c2e8b23bf577d3cd18b3210a20f6b 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 02:30:46 -0300
Subject: [PATCH] =?UTF-8?q?fix:=20design=20system=20rollout=20a=20todas=20?=
 =?UTF-8?q?las=20p=C3=A1ginas?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- planes.astro: CloudDivider fillClass→fill (2 instancias)
- en/about.astro: WorldMap card→glass-card + reveal
- en/contact.astro: 3 aside cards→glass-card, form→glass-card, reveal en aside+form
- en/tutorials/index.astro: banner→glass-card+reveal, category cards service-card→glass-card
- Limpieza de patrones legacy (fillClass, service-card, rounded-2xl+inline bg)
---
 src/pages/contacto.astro           | 13 ++++++-------
 src/pages/en/about.astro           |  2 +-
 src/pages/en/contact.astro         | 13 ++++++-------
 src/pages/en/index.astro           | 10 +++++-----
 src/pages/en/tutorials/index.astro |  4 ++--
 src/pages/instructivos/index.astro |  4 ++--
 src/pages/nosotros.astro           |  6 +++---
 src/pages/planes.astro             |  4 ++--
 src/pages/preguntas.astro          |  2 ++
 src/pages/servicios/index.astro    | 10 +++++-----
 10 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/pages/contacto.astro b/src/pages/contacto.astro
index 9c5cfc8..8cef14c 100644
--- a/src/pages/contacto.astro
+++ b/src/pages/contacto.astro
@@ -34,8 +34,8 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
   <section class="py-20 md:py-24" style="background: var(--hds-bg);">
     <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <aside class="lg:col-span-1 space-y-4">
-          <div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
+        <aside class="lg:col-span-1 space-y-4 reveal">
+          <div class="glass-card p-6">
             <h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">WhatsApp</h2>
             <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="text-lg font-semibold hover:underline break-all" style="color: var(--color-hds-naranja);">+598 99 812 487</a>
             <p class="text-sm mt-2" style="color: var(--hds-fg-soft);">
@@ -43,23 +43,22 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
             </p>
           </div>
 
-          <div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
+          <div class="glass-card p-6">
             <h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">Email</h2>
             <a href="mailto:contacto@hostingdelsur.net" class="text-lg font-semibold hover:underline break-all" style="color: var(--color-hds-naranja);">contacto@hostingdelsur.net</a>
           </div>
 
-          <div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
+          <div class="glass-card p-6">
             <h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">{lang === 'en' ? 'Location' : 'Ubicación'}</h2>
             <p style="color: var(--hds-fg-soft);">Maldonado, Uruguay</p>
           </div>
         </aside>
 
-        <div class="lg:col-span-2">
+        <div class="lg:col-span-2 reveal">
           <form
             action="/api/contact.php"
             method="POST"
-            class="rounded-2xl p-8 md:p-10 space-y-5"
-            style="background: var(--hds-card); border: 1px solid var(--hds-line);"
+            class="glass-card p-8 md:p-10 space-y-5"
             id="contact-form"
             novalidate
           >
diff --git a/src/pages/en/about.astro b/src/pages/en/about.astro
index 5022919..3376e70 100644
--- a/src/pages/en/about.astro
+++ b/src/pages/en/about.astro
@@ -86,7 +86,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
           </ul>
         </div>
 
-        <div class="rounded-2xl p-6 lg:p-8" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
+        <div class="glass-card p-6 lg:p-8 reveal">
           <WorldMap class="w-full h-auto" />
         </div>
       </div>
diff --git a/src/pages/en/contact.astro b/src/pages/en/contact.astro
index 9c5cfc8..8cef14c 100644
--- a/src/pages/en/contact.astro
+++ b/src/pages/en/contact.astro
@@ -34,8 +34,8 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
   <section class="py-20 md:py-24" style="background: var(--hds-bg);">
     <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        <aside class="lg:col-span-1 space-y-4">
-          <div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
+        <aside class="lg:col-span-1 space-y-4 reveal">
+          <div class="glass-card p-6">
             <h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">WhatsApp</h2>
             <a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="text-lg font-semibold hover:underline break-all" style="color: var(--color-hds-naranja);">+598 99 812 487</a>
             <p class="text-sm mt-2" style="color: var(--hds-fg-soft);">
@@ -43,23 +43,22 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
             </p>
           </div>
 
-          <div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
+          <div class="glass-card p-6">
             <h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">Email</h2>
             <a href="mailto:contacto@hostingdelsur.net" class="text-lg font-semibold hover:underline break-all" style="color: var(--color-hds-naranja);">contacto@hostingdelsur.net</a>
           </div>
 
-          <div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
+          <div class="glass-card p-6">
             <h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">{lang === 'en' ? 'Location' : 'Ubicación'}</h2>
             <p style="color: var(--hds-fg-soft);">Maldonado, Uruguay</p>
           </div>
         </aside>
 
-        <div class="lg:col-span-2">
+        <div class="lg:col-span-2 reveal">
           <form
             action="/api/contact.php"
             method="POST"
-            class="rounded-2xl p-8 md:p-10 space-y-5"
-            style="background: var(--hds-card); border: 1px solid var(--hds-line);"
+            class="glass-card p-8 md:p-10 space-y-5"
             id="contact-form"
             novalidate
           >
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index 9f28923..920220f 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -6,7 +6,7 @@ import DifferenceCards from '@/components/DifferenceCards.astro';
 import CloudDivider from '@/components/CloudDivider.astro';
 import ServicesSection from '@/components/ServicesSection.astro';
 import ProcessSteps from '@/components/ProcessSteps.astro';
-import GalleryMosaic from '@/components/GalleryMosaic.astro';
+import Testimonials from '@/components/Testimonials.astro';
 import FAQAccordion from '@/components/FaqSection.astro';
 import CtaFinal from '@/components/CtaFinal.astro';
 import { getLangFromUrl, useTranslations } from '@/i18n/utils';
@@ -24,20 +24,20 @@ const description = 'Cloud hosting, websites, e-commerce and infrastructure with
 >
   <Hero t={t} whatsappUrl={whatsappUrl} />
 
-  <CloudDivider fillClass="fill-hds-bg-soft" />
+  <CloudDivider fill="var(--hds-bg-soft)" />
 
   <StatsSection t={t} lang={lang} />
   <DifferenceCards t={t} />
 
-  <CloudDivider fillClass="fill-hds-bg" flip={true} />
+  <CloudDivider fill="var(--hds-bg)" flip={true} />
 
   <ServicesSection t={t} lang={lang} />
 
-  <CloudDivider fillClass="fill-hds-bg-soft" />
+  <CloudDivider fill="var(--hds-bg-soft)" />
 
   <ProcessSteps t={t} />
 
-  <GalleryMosaic lang={lang} />
+  <Testimonials lang={lang} />
 
   <FAQAccordion lang={lang} />
 
diff --git a/src/pages/en/tutorials/index.astro b/src/pages/en/tutorials/index.astro
index d1da8d1..6465c68 100644
--- a/src/pages/en/tutorials/index.astro
+++ b/src/pages/en/tutorials/index.astro
@@ -40,7 +40,7 @@ const categories = [
 
   <section class="py-20 md:py-24" style="background: var(--hds-bg);">
     <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="rounded-2xl p-6 md:p-8 mb-12 flex flex-col md:flex-row md:items-center md:justify-between gap-6" style="background: linear-gradient(135deg, rgba(238,118,35,0.08) 0%, rgba(250,159,92,0.12) 100%); border: 1px solid rgba(238,118,35,0.25);">
+      <div class="glass-card p-6 md:p-8 mb-12 flex flex-col md:flex-row md:items-center md:justify-between gap-6 reveal">
         <div>
           <h2 class="text-xl font-semibold mb-2" style="color: var(--hds-fg);">
             {lang === 'en' ? 'Coming soon' : 'Próximamente'}
@@ -67,7 +67,7 @@ const categories = [
 
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
         {categories.map((cat) => (
-          <div class="service-card">
+          <div class="glass-card p-6">
             <h3 class="text-base font-semibold mb-1" style="color: var(--hds-fg);">{cat.title}</h3>
             <p class="text-sm mb-3" style="color: var(--hds-fg-soft);">{cat.desc}</p>
             <p class="text-xs italic" style="color: var(--hds-fg-muted);">
diff --git a/src/pages/instructivos/index.astro b/src/pages/instructivos/index.astro
index d1da8d1..6465c68 100644
--- a/src/pages/instructivos/index.astro
+++ b/src/pages/instructivos/index.astro
@@ -40,7 +40,7 @@ const categories = [
 
   <section class="py-20 md:py-24" style="background: var(--hds-bg);">
     <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
-      <div class="rounded-2xl p-6 md:p-8 mb-12 flex flex-col md:flex-row md:items-center md:justify-between gap-6" style="background: linear-gradient(135deg, rgba(238,118,35,0.08) 0%, rgba(250,159,92,0.12) 100%); border: 1px solid rgba(238,118,35,0.25);">
+      <div class="glass-card p-6 md:p-8 mb-12 flex flex-col md:flex-row md:items-center md:justify-between gap-6 reveal">
         <div>
           <h2 class="text-xl font-semibold mb-2" style="color: var(--hds-fg);">
             {lang === 'en' ? 'Coming soon' : 'Próximamente'}
@@ -67,7 +67,7 @@ const categories = [
 
       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
         {categories.map((cat) => (
-          <div class="service-card">
+          <div class="glass-card p-6">
             <h3 class="text-base font-semibold mb-1" style="color: var(--hds-fg);">{cat.title}</h3>
             <p class="text-sm mb-3" style="color: var(--hds-fg-soft);">{cat.desc}</p>
             <p class="text-xs italic" style="color: var(--hds-fg-muted);">
diff --git a/src/pages/nosotros.astro b/src/pages/nosotros.astro
index 5022919..5a7cd2a 100644
--- a/src/pages/nosotros.astro
+++ b/src/pages/nosotros.astro
@@ -29,7 +29,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
 
   <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">
-      <div class="prose prose-lg max-w-none" style="color: var(--hds-fg-soft);">
+      <div class="prose prose-lg max-w-none reveal" style="color: var(--hds-fg-soft);">
         <p class="text-lg leading-relaxed" style="color: var(--hds-fg-soft);">
           {lang === 'en'
             ? 'We are a small team of senior SysAdmins and SREs based in Maldonado, Uruguay. We work with clients across Latin America and the world.'
@@ -61,7 +61,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
   <section class="py-20 md:py-24" style="background: var(--hds-bg-soft);">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
-        <div>
+        <div class="reveal">
           <SectionEyebrow text={lang === 'en' ? 'Where we work' : 'Dónde trabajamos'} />
           <h2 class="font-display leading-tight mt-5" style="font-size: clamp(2rem, 4.5vw, 3rem); color: var(--hds-fg);">
             {lang === 'en'
@@ -86,7 +86,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
           </ul>
         </div>
 
-        <div class="rounded-2xl p-6 lg:p-8" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
+        <div class="glass-card p-6 lg:p-8 reveal">
           <WorldMap class="w-full h-auto" />
         </div>
       </div>
diff --git a/src/pages/planes.astro b/src/pages/planes.astro
index 2d22a79..2037ff2 100644
--- a/src/pages/planes.astro
+++ b/src/pages/planes.astro
@@ -45,7 +45,7 @@ function monthly(annual: number): string {
     </div>
   </section>
 
-  <CloudDivider fillClass="fill-hds-bg" />
+  <CloudDivider fill="var(--hds-bg)" />
 
   <!-- Hero plan: Empresarial (glass-card-hero) -->
   {empresarial && (
@@ -192,7 +192,7 @@ function monthly(annual: number): string {
     </div>
   </section>
 
-  <CloudDivider fillClass="fill-hds-bg-soft" />
+  <CloudDivider fill="var(--hds-bg-soft)" />
 
   <!-- CTA -->
   <section class="py-16 md:py-24" style="background: var(--hds-bg-soft);">
diff --git a/src/pages/preguntas.astro b/src/pages/preguntas.astro
index 913e000..156cedf 100644
--- a/src/pages/preguntas.astro
+++ b/src/pages/preguntas.astro
@@ -36,12 +36,14 @@ const faqs = lang === 'en' ? [
 >
   <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="reveal">
       <SectionEyebrow text={lang === 'en' ? 'FAQ' : 'Preguntas frecuentes'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en'
           ? <>Common <span style="color: var(--color-hds-naranja); font-style: italic;">questions</span>.</>
           : <>Preguntas <span style="color: var(--color-hds-naranja); font-style: italic;">frecuentes</span>.</>}
       </h1>
+      </div>
     </div>
   </section>
 
diff --git a/src/pages/servicios/index.astro b/src/pages/servicios/index.astro
index ffc38ae..81408f8 100644
--- a/src/pages/servicios/index.astro
+++ b/src/pages/servicios/index.astro
@@ -86,7 +86,7 @@ const categoryInfo: Record<keyof typeof plansByCategory, { title: string; subtit
     </div>
   </section>
 
-  <CloudDivider fillClass="fill-hds-bg" />
+  <CloudDivider fill="var(--hds-bg)" />
 
   <section class="py-20 md:py-24" style="background: var(--hds-bg);">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
@@ -105,8 +105,8 @@ const categoryInfo: Record<keyof typeof plansByCategory, { title: string; subtit
           {customServices.map((service) => (
             <a
               href={`${base}/servicios/${service.slug}/`}
-              class="service-card group flex flex-col h-full"
-              style="border-top: 4px solid var(--color-hds-coral); padding-top: 1.5rem;"
+              class="glass-card group flex flex-col h-full p-6 md:p-7"
+              style="border-top: 3px solid var(--color-hds-coral);"
             >
               <div class="icon-circle mb-5" style="width: 48px; height: 48px;">
                 <service.Icon class="w-6 h-6" />
@@ -149,8 +149,8 @@ const categoryInfo: Record<keyof typeof plansByCategory, { title: string; subtit
               return (
                 <a
                   href={`${base}/planes/#${plan.slug}`}
-                  class="service-card group flex flex-col h-full relative"
-                  style={`border-top: 4px solid ${plan.recommended ? 'var(--color-hds-naranja)' : 'var(--hds-line)'}; padding-top: 1.5rem;`}
+                  class="glass-card group flex flex-col h-full p-6 md:p-7 relative"
+                  style={`border-top: 3px solid ${plan.recommended ? 'var(--color-hds-naranja)' : 'var(--hds-line)'};`}
                 >
                   {plan.recommended && (
                     <div class="absolute -top-3 right-4 text-[10px] font-bold tracking-[0.15em] uppercase px-2.5 py-0.5 rounded-full" style="background: var(--color-hds-naranja); color: white;">