feat: refresh nosotros team gallery

src/pages/nosotros.astro

@@ -3,45 +3,48 @@ import MainLayout from '../layouts/MainLayout.astro';
 
 import Icon from '../components/Icon.astro';
 
-const teamMembers = [
-  {
-    nombre: 'Mateo Navarro',
-    rol: 'Director Ejecutivo',
-    src: '/images/generated/gallery-2.webp',
-    pos: 'center top',
-    width: 1024,
-    height: 1024,
+const whatsappAriaLabel = 'Contactar con MNQ por WhatsApp';
+
+const teamGallery = {
+  lead: {
+    src: '/images/team/mnq-team-lead.webp',
+    alt: 'Equipo de MNQ durante un servicio',
+    width: 1439,
+    height: 1919,
+    pos: 'center 24%',
   },
-  {
-    nombre: 'Lucía Quintana',
-    rol: 'Chef Creativa',
-    src: '/images/generated/hero-nosotros-gen.webp',
-    pos: 'center top',
-    width: 1264,
-    height: 848,
-  },
-  {
-    nombre: 'Julián Marín',
-    rol: 'Head Sommelier',
-    src: '/images/foto-canapes.jpg',
-    pos: 'center 30%',
-    width: 1264,
-    height: 848,
-  },
-  {
-    nombre: 'Elena Soler',
-    rol: 'Diseño de Experiencias',
-    src: '/images/foto-plato-mnq.jpg',
-    pos: 'center top',
-    width: 1200,
-    height: 805,
-  },
-];
+  support: [
+    {
+      src: '/images/team/mnq-team-service.jpg',
+      alt: 'Montaje y coordinación del servicio de MNQ',
+      width: 1080,
+      height: 1440,
+      pos: 'center 28%',
+      caption: 'Montaje, tiempos y atención coordinados con naturalidad.',
+    },
+    {
+      src: '/images/team/mnq-team-kitchen.webp',
+      alt: 'Preparación gastronómica del equipo de MNQ',
+      width: 1439,
+      height: 1439,
+      pos: 'center center',
+      caption: 'Cocina en movimiento, detalle en cada pase.',
+    },
+    {
+      src: '/images/team/mnq-team-close.webp',
+      alt: 'Momento cercano del equipo de MNQ',
+      width: 1079,
+      height: 1079,
+      pos: 'center center',
+      caption: 'Una presencia cercana que acompaña sin invadir.',
+    },
+  ],
+};
 ---
 
 <MainLayout
   title="Nosotros | MNQ Catering y Evento"
-  description="El arte de la hospitalidad elevada. Descubra la filosofía, valores y equipo detrás de MNQ Catering y Evento."
+  description="Conozca el equipo real de MNQ Catering y Evento: oficio, cercanía y una hospitalidad cuidada en cada servicio."
   activeNav="nosotros"
 >
 
@@ -52,26 +55,26 @@ const teamMembers = [
 
         <div class="nosotros-text">
           <span class="section-eyebrow reveal">Nuestra Esencia</span>
-          <h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom:var(--space-8);">El arte de la hospitalidad elevada.</h1>
+          <h1 class="text-display reveal" style="--reveal-delay: 150;margin-bottom:var(--space-8);">Hospitalidad con oficio, calma y cercanía.</h1>
           <p class="text-muted leading-relaxed" style="max-width:32rem;">
-            Desde nuestra fundación, MNQ Catering ha redefinido el concepto de exclusividad culinaria. No solo servimos comida; curamos momentos que perduran en la memoria de los paladares más exigentes.
+            En MNQ cada evento se construye desde dentro: cocina en movimiento, coordinación real y un equipo que cuida el ambiente con discreción. Nos importa que todo salga bien y que se sienta natural.
           </p>
         </div>
 
         <div class="nosotros-image" style="position:relative;">
           <div class="overflow-hidden rounded-lg" style="aspect-ratio:4/3;">
             <img
-              src="/images/generated/hero-nosotros-gen.webp"
-              alt="Chef ejecutiva MNQ — el arte de la hospitalidad"
-              width="1264"
-              height="848"
-              style="width:100%;height:100%;object-fit:cover;object-position:center top;"
+              src={teamGallery.lead.src}
+              alt={teamGallery.lead.alt}
+              width={teamGallery.lead.width}
+              height={teamGallery.lead.height}
+              style={`width:100%;height:100%;object-fit:cover;object-position:${teamGallery.lead.pos};`}
               loading="eager"
               fetchpriority="high"
             />
           </div>
           <div class="quote-card-desktop border-outline-soft" style="position:absolute;bottom:-2.5rem;left:-2.5rem;background:var(--color-surface-container);padding:var(--space-10);display:none;">
-            <p class="text-headline-md text-primary italic">"La perfección no es un acto, es un hábito."</p>
+            <p class="text-headline-md text-primary italic">"Detrás de cada servicio hay manos reales, ritmo y mucho cuidado."</p>
           </div>
         </div>
 
@@ -83,12 +86,12 @@ const teamMembers = [
   <section class="section-pad bg-container-low" style="border-top:1px solid rgb(208 197 175/10%);border-bottom:1px solid rgb(208 197 175/10%);">
     <div class="page-wrap">
       <div class="grid-2" style="gap:var(--space-16);">
-        <h2 class="text-headline-lg" style="margin-bottom:var(--space-8);">Filosofía de Exclusividad</h2>
+        <h2 class="text-headline-lg" style="margin-bottom:var(--space-8);">Filosofía de servicio</h2>
         <div style="display:flex;flex-direction:column;gap:var(--space-6);">
-          <p class="text-muted leading-relaxed">Creemos que cada evento tiene su propia alma. Nuestra filosofía se basa en la escucha activa y la personalización radical. En un mundo de producciones en serie, MNQ apuesta por lo artesanal, lo local y lo extraordinario.</p>
-          <p class="text-muted leading-relaxed">Cada ingrediente es seleccionado por su trazabilidad y calidad superior, trabajando codo a codo con productores que comparten nuestra pasión por la excelencia.</p>
+          <p class="text-muted leading-relaxed">Creemos que un buen catering no solo se nota en el plato: también se nota en cómo acompaña, en cómo resuelve y en la tranquilidad que deja a quien organiza el evento.</p>
+          <p class="text-muted leading-relaxed">Trabajamos con producto bien seleccionado, proveedores de confianza y una coordinación muy cuidada para que cocina, sala y montaje hablen el mismo idioma.</p>
           <div style="padding-top:var(--space-4);">
-            <a href="/contacto" class="btn-underline" style="display:inline-flex;align-items:center;gap:var(--space-3);">Explorar Menú de Autor</a>
+            <a href="/contacto" class="btn-underline" style="display:inline-flex;align-items:center;gap:var(--space-3);">Explorar propuesta gastronómica</a>
           </div>
         </div>
       </div>
@@ -123,36 +126,78 @@ const teamMembers = [
   </section>
 
   <!-- ─── EQUIPO ─── -->
-  <section class="section-pad bg-inverse" style="overflow:hidden;">
+  <section class="section-pad bg-container-low team-gallery-section" style="overflow:hidden;">
     <div class="page-wrap">
-      <div style="display:flex;flex-direction:column;gap:var(--space-8);margin-bottom:var(--space-20);">
-        <div>
-          <span class="section-eyebrow reveal" style="color:var(--color-primary-fixed);">El Capital Humano</span>
-          <h2 class="text-headline-lg reveal" style="--reveal-delay: 150;color:var(--color-surface);">Mentes tras el menú</h2>
-        </div>
-        <p class="text-body-sm" style="color:rgb(234 225 212/80%);max-width:24rem;">Un equipo multidisciplinar de chefs, sommeliers y diseñadores de eventos unidos por un propósito común.</p>
-      </div>
+      <div class="team-gallery-grid">
+        <div class="team-gallery-copy">
+          <div>
+            <span class="section-eyebrow reveal">El Equipo</span>
+            <h2 class="text-headline-lg reveal" style="--reveal-delay: 150;">Personas reales detrás de cada servicio</h2>
+          </div>
+          <p class="text-muted leading-relaxed">Nos gusta que quien nos contrata sienta que hay un equipo presente, resolutivo y cercano. Desde la primera conversación hasta el último detalle del montaje, acompañamos con calma y criterio.</p>
+          <p class="text-muted leading-relaxed">Esta galería muestra parte de esa energía de trabajo: menos pose, más coordinación, más cocina viva y más confianza en el trato.</p>
 
-      <div class="grid-4">
-        {teamMembers.map(({ nombre, rol, src, pos, width, height }) => (
-          <div style="display:flex;flex-direction:column;gap:var(--space-6);">
-            <div class="overflow-hidden team-card" style="aspect-ratio:3/4;">
+          <div class="team-trust-points">
+            <div class="team-trust-point">
+              <span class="label-caps">Cercanía</span>
+              <p class="text-body-sm text-muted">Comunicación clara y acompañamiento real durante todo el proceso.</p>
+            </div>
+            <div class="team-trust-point">
+              <span class="label-caps">Coordinación</span>
+              <p class="text-body-sm text-muted">Cocina, sala y montaje trabajando con un mismo ritmo.</p>
+            </div>
+            <div class="team-trust-point">
+              <span class="label-caps">Presencia</span>
+              <p class="text-body-sm text-muted">Un servicio atento y discreto para que el evento fluya sin tensión.</p>
+            </div>
+          </div>
+
+          <div style="padding-top:var(--space-2);">
+            <a
+              href="https://wa.me/34678171513?text=Hola%20MNQ%2C%20quiero%20hablar%20con%20el%20equipo%20sobre%20mi%20evento"
+              class="btn-underline"
+              target="_blank"
+              rel="noreferrer"
+              aria-label={whatsappAriaLabel}
+            >Hablar con el equipo</a>
+          </div>
+        </div>
+
+        <div class="team-gallery-visuals">
+          <figure class="team-photo-card team-photo-lead">
+            <div class="overflow-hidden rounded-lg team-photo-frame" style="aspect-ratio:4/5;">
               <img
-                src={src}
-                alt={nombre}
-                width={width}
-                height={height}
-                style={`width:100%;height:100%;object-fit:cover;object-position:${pos};filter:grayscale(1);transition:filter 700ms;`}
+                src={teamGallery.lead.src}
+                alt={teamGallery.lead.alt}
+                width={teamGallery.lead.width}
+                height={teamGallery.lead.height}
+                style={`width:100%;height:100%;object-fit:cover;object-position:${teamGallery.lead.pos};`}
                 loading="lazy"
                 decoding="async"
               />
             </div>
-            <div>
-              <h4 style="font-size:1.25rem;color:var(--color-surface);font-family:var(--font-serif);margin-bottom:var(--space-1);">{nombre}</h4>
-              <p class="label-caps" style="font-size:0.625rem;color:var(--color-primary-fixed);">{rol}</p>
-            </div>
+            <figcaption class="team-photo-caption">Coordinación cercana, montaje cuidado y una forma de trabajar que se nota en el ambiente.</figcaption>
+          </figure>
+
+          <div class="team-support-grid">
+            {teamGallery.support.map(({ src, alt, width, height, pos, caption }) => (
+              <figure class="team-photo-card">
+                <div class="overflow-hidden rounded-lg team-photo-frame" style="aspect-ratio:1/1;">
+                  <img
+                    src={src}
+                    alt={alt}
+                    width={width}
+                    height={height}
+                    style={`width:100%;height:100%;object-fit:cover;object-position:${pos};`}
+                    loading="lazy"
+                    decoding="async"
+                  />
+                </div>
+                <figcaption class="team-photo-caption">{caption}</figcaption>
+              </figure>
+            ))}
           </div>
-        ))}
+        </div>
       </div>
     </div>
   </section>
@@ -171,19 +216,106 @@ const teamMembers = [
 </MainLayout>
 
 <style>
-  .team-card:hover img { filter: grayscale(0) !important; }
-
   .nosotros-hero-grid {
     display: grid;
     gap: var(--space-12);
   }
 
+  .team-gallery-section {
+    border-top: 1px solid rgb(208 197 175 / 16%);
+    border-bottom: 1px solid rgb(208 197 175 / 16%);
+  }
+
+  .team-gallery-grid {
+    display: grid;
+    gap: var(--space-12);
+  }
+
+  .team-gallery-copy {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+  }
+
+  .team-trust-points {
+    display: grid;
+    gap: var(--space-5);
+    padding: var(--space-8) 0;
+    border-top: 1px solid rgb(208 197 175 / 28%);
+    border-bottom: 1px solid rgb(208 197 175 / 28%);
+  }
+
+  .team-trust-point {
+    display: grid;
+    gap: var(--space-2);
+  }
+
+  .team-gallery-visuals {
+    display: grid;
+    gap: var(--space-8);
+  }
+
+  .team-support-grid {
+    display: grid;
+    gap: var(--space-6);
+  }
+
+  .team-photo-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .team-photo-frame {
+    border: 1px solid rgb(208 197 175 / 22%);
+    background: var(--color-surface-container-high);
+  }
+
+  .team-photo-frame img {
+    transition: transform 700ms ease;
+  }
+
+  .team-photo-card:hover img {
+    transform: scale(1.03);
+  }
+
+  .team-photo-caption {
+    font-size: var(--text-sm);
+    line-height: 1.6;
+    color: var(--color-on-surface-variant);
+  }
+
   @media (min-width: 48rem) {
     .nosotros-hero-grid {
       grid-template-columns: 5fr 7fr;
       align-items: center;
     }
     .quote-card-desktop { display: block !important; }
+
+    .team-trust-points {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: var(--space-6);
+    }
+
+    .team-support-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .team-support-grid > :last-child {
+      grid-column: 1 / -1;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    .team-gallery-grid {
+      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+      align-items: start;
+    }
+
+    .team-gallery-visuals {
+      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+      align-items: start;
+    }
   }
 
   /* ─── VALUE CARD TIMELINE ANIMATION ──────────── */