feat: increase photo opacity + add hero photo backgrounds to all pages

- Hero opacity 0.30→0.55, gradient overlay softened (15%/75% vs 30%/60%)
- DifferenceCards photo opacity 0.15→0.40
- ProcessSteps photo opacity 0.15→0.35, removed backdrop-blur
- Added photo backgrounds to 11 hero sections across all pages:
  - planes/en/plans: datacenter-racks
  - servicios/en/servicios: monitor-grafana
  - nosotros/en/about: team-desk-mate
  - contacto/en/contact: hands-typing-coffee
  - preguntas: maldonado-aerial
  - instructivos/en/tutorials: monitor-grafana
- All hero photos at opacity 0.25 with gradient overlay for text readability

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.15;">
+            <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.40;">
               <img
                 src={`${item.photo}.webp`}
                 alt=""

src/components/Hero.astro

@@ -29,14 +29,14 @@ const { t, whatsappUrl } = Astro.props;
         alt=""
         width="1920" height="800"
         class="w-full h-full object-cover"
-        style="opacity: 0.30;"
+        style="opacity: 0.55;"
         loading="eager"
         fetchpriority="high"
         decoding="async"
       />
     </picture>
     <!-- Gradient overlay for text readability -->
-    <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg) 0%, transparent 30%, transparent 60%, var(--hds-bg) 100%);"></div>
+    <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg) 0%, transparent 15%, transparent 75%, var(--hds-bg) 100%);"></div>
   </div>
 
   <!-- Floating decorative shapes (parallax) -->

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.15; backdrop-filter: blur(4px);">
+  <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.35;">
     <img
       src="/images/photos/hands-typing-coffee-1200x800.webp"
       alt=""

src/pages/contacto.astro

@@ -15,8 +15,12 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
     : 'Hablá con una persona real en Hosting del Sur. WhatsApp, mail o formulario.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/hands-typing-coffee-1200x800.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'Contact' : 'Contacto'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en'

src/pages/en/about.astro

@@ -16,8 +16,12 @@ const whatsappUrl = 'https://wa.me/59899812487';
     : 'Desde 2000, Hosting del Sur brinda servicios de tecnología con atención humana desde Maldonado, Uruguay, con alcance en cuatro países.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/team-desk-mate-1920x1080.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'About us' : 'Nosotros'} />
       <h1 class="font-display leading-tight mt-5 max-w-4xl" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en'

src/pages/en/contact.astro

@@ -15,8 +15,12 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
     : 'Hablá con una persona real en Hosting del Sur. WhatsApp, mail o formulario.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/hands-typing-coffee-1200x800.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'Contact' : 'Contacto'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en'

src/pages/en/plans.astro

@@ -18,8 +18,12 @@ const base = lang === 'en' ? '/en' : '';
     : 'Planes de hosting en USD, con cobro anual. Básico, Institucional y E-commerce, más planes opcionales WordPress, Avanzado y Corporativo.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/datacenter-racks-1920x960.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative 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);">
         {lang === 'en'

src/pages/en/servicios/index.astro

@@ -47,8 +47,12 @@ const groups = [
     : 'Servicios de hosting, desarrollo web, e-commerce, gestión de contenido e infraestructura.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <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>.

src/pages/en/tutorials/index.astro

@@ -24,8 +24,12 @@ const categories = [
     : 'Guías paso a paso para las consultas más frecuentes de los clientes de Hosting del Sur.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'Knowledge base' : 'Base de conocimiento'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en' ? 'Tutorials' : 'Instructivos'}.

src/pages/instructivos/index.astro

@@ -24,8 +24,12 @@ const categories = [
     : 'Guías paso a paso para las consultas más frecuentes de los clientes de Hosting del Sur.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'Knowledge base' : 'Base de conocimiento'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en' ? 'Tutorials' : 'Instructivos'}.

src/pages/nosotros.astro

@@ -16,8 +16,12 @@ const whatsappUrl = 'https://wa.me/59899812487';
     : 'Desde 2000, Hosting del Sur brinda servicios de tecnología con atención humana desde Maldonado, Uruguay, con alcance en cuatro países.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/team-desk-mate-1920x1080.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'About us' : 'Nosotros'} />
       <h1 class="font-display leading-tight mt-5 max-w-4xl" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en'

src/pages/planes.astro

@@ -31,6 +31,10 @@ function monthly(annual: number): string {
   lang={lang}
 >
   <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 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/datacenter-racks-1920x960.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
     <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 reveal">
       <SectionEyebrow text={lang === 'en' ? 'Hosting plans' : 'Planes de hosting'} />

src/pages/preguntas.astro

@@ -34,8 +34,12 @@ const faqs = lang === 'en' ? [
     : 'Preguntas frecuentes sobre Hosting del Sur, nuestros planes, infraestructura y soporte.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/maldonado-aerial-1920x800.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative 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);">

src/pages/servicios/index.astro

@@ -71,7 +71,11 @@ const categoryInfo: Record<keyof typeof plansByCategory, { title: string; subtit
     : 'Servicios de hosting, desarrollo web, e-commerce, gestión de contenido e infraestructura.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative" style="background: var(--hds-bg-soft);">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
     <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 reveal">
       <SectionEyebrow text={lang === 'en' ? 'What we do' : 'Lo que hacemos'} />