From df700bcbfb73b2849737bf21504e77a23eb77d6c Mon Sep 17 00:00:00 2001
From: Carlos Narro <carlos@relabtive.com>
Date: Thu, 11 Jun 2026 17:25:15 +0200
Subject: [PATCH] =?UTF-8?q?Landing=20B2B:=20galer=C3=ADa=20de=20ejemplos?=
 =?UTF-8?q?=20apaisada=20con=20lightbox=20y=20quita=20"Entrar"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Nueva sección "Ejemplos reales": 3 renders (cocina, baño, salón-comedor) en
  formato apaisado (16/10), clicables.
- Lightbox reutilizable (data-zoom + data-gallery): amplía la imagen con
  navegación ‹ ›, Esc y clic fuera para cerrar; agrupa por galería.
- El antes/después de "Cómo funciona" pasa a apaisado (4/3) y también abre el
  lightbox (grupo cocina).
- Quita el botón "Entrar" del header (queda solo "Empezar gratis").

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 mvp/b2c/public/b2b.html | 126 ++++++++++++++++++++++++++++++++++++++--
 1 file changed, 121 insertions(+), 5 deletions(-)

diff --git a/mvp/b2c/public/b2b.html b/mvp/b2c/public/b2b.html
index cd026cb..21a2773 100644
--- a/mvp/b2c/public/b2b.html
+++ b/mvp/b2c/public/b2b.html
@@ -1472,8 +1472,8 @@ h3, h4, h5, h6 {
     overflow: hidden;
     border: 1px solid var(--surface-border);
   }
-  .step .ba figure { position: relative; margin: 0; aspect-ratio: 1 / 1; }
-  .step .ba img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .step .ba figure { position: relative; margin: 0; aspect-ratio: 4 / 3; }
+  .step .ba img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
   .step .ba figcaption {
     position: absolute; top: 6px; left: 6px;
     background: rgba(0, 0, 0, 0.6); color: #fff;
@@ -1482,6 +1482,34 @@ h3, h4, h5, h6 {
   }
   .step .ba figure.after figcaption { background: var(--color-primary-600); }
 
+  /* Galería de ejemplos (apaisada, ampliable) */
+  .gallery-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-8); }
+  @media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }
+  @media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
+  .gcard {
+    position: relative; margin: 0; border-radius: 14px; overflow: hidden;
+    border: 1px solid var(--surface-border); cursor: zoom-in;
+    background: var(--color-neutral-100, #f4f4f5);
+  }
+  .gcard img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform .45s ease; }
+  .gcard:hover img { transform: scale(1.04); }
+  .gcard figcaption {
+    position: absolute; left: 10px; bottom: 10px;
+    background: rgba(0, 0, 0, 0.62); color: #fff;
+    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
+    padding: 3px 8px; border-radius: 6px;
+  }
+
+  /* Lightbox */
+  #lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 12, 20, 0.92); }
+  #lightbox.open { display: flex; }
+  #lightbox .lb-img { max-width: min(1100px, 94vw); max-height: 86vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
+  #lightbox .lb-cap { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: rgba(255, 255, 255, 0.85); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; padding: 0 16px; }
+  #lightbox .lb-close { position: absolute; top: 16px; right: 18px; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
+  #lightbox .lb-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
+  #lightbox .lb-prev { left: 18px; } #lightbox .lb-next { right: 18px; }
+  #lightbox .lb-close:hover, #lightbox .lb-btn:hover { background: rgba(255, 255, 255, 0.26); }
+
   /* Bajo reduced-motion: mostrar todo sin animar */
   @media (prefers-reduced-motion: reduce) {
     html.js .reveal,
@@ -1508,7 +1536,6 @@ h3, h4, h5, h6 {
       <a href="#faq">Preguntas</a>
     </nav>
     <div class="topbar-actions">
-      <a href="/login" class="btn btn-ghost btn-sm">Entrar</a>
       <a href="/signup" class="btn btn-primary btn-sm">Empezar gratis</a>
     </div>
   </div>
@@ -1705,8 +1732,8 @@ h3, h4, h5, h6 {
         <h4>Se genera un render orientativo</h4>
         <p>A partir de las fotos del cliente, Reformix devuelve 3 propuestas visuales con calidades básica, media y premium. Ya tienes de qué hablar en la visita.</p>
         <div class="ba" aria-label="Comparativa antes y después del render">
-          <figure><img src="/b2b-assets/img/antes.webp" alt="Cocina antes de la reforma" loading="lazy" decoding="async"><figcaption>ANTES</figcaption></figure>
-          <figure class="after"><img src="/b2b-assets/img/despues.webp" alt="Render de la cocina reformada" loading="lazy" decoding="async"><figcaption>DESPUÉS</figcaption></figure>
+          <figure><img src="/b2b-assets/img/antes.webp" alt="Cocina antes de la reforma" data-zoom data-gallery="ba-cocina" data-zoom-cap="Cocina · antes" loading="lazy" decoding="async"><figcaption>ANTES</figcaption></figure>
+          <figure class="after"><img src="/b2b-assets/img/despues.webp" alt="Render de la cocina reformada" data-zoom data-gallery="ba-cocina" data-zoom-cap="Cocina · render orientativo" loading="lazy" decoding="async"><figcaption>DESPUÉS</figcaption></figure>
         </div>
         <div class="tag">⌁ Render IA</div>
       </div>
@@ -1726,6 +1753,33 @@ h3, h4, h5, h6 {
   </div>
 </section>
 
+<!-- ============================================
+ Galería de ejemplos
+============================================ -->
+<section class="section section-muted" id="ejemplos">
+  <div class="container">
+    <div class="section-head center">
+      <p class="section-kicker">Ejemplos reales</p>
+      <h2 class="section-title">El «después» que tu cliente ve <em>antes de que vayas</em>.</h2>
+      <p class="section-lede">Una foto del espacio y Reformix devuelve el render orientativo. Toca cualquiera para ampliarla.</p>
+    </div>
+    <div class="gallery-grid">
+      <figure class="gcard">
+        <img src="/b2b-assets/img/despues.webp" alt="Render de cocina reformada" data-zoom data-gallery="ejemplos" data-zoom-cap="Cocina · render orientativo" loading="lazy" decoding="async">
+        <figcaption>Cocina</figcaption>
+      </figure>
+      <figure class="gcard">
+        <img src="/b2b-assets/img/despues-bano.webp" alt="Render de baño reformado" data-zoom data-gallery="ejemplos" data-zoom-cap="Baño · render orientativo" loading="lazy" decoding="async">
+        <figcaption>Baño</figcaption>
+      </figure>
+      <figure class="gcard">
+        <img src="/b2b-assets/img/despues-comedor.webp" alt="Render de salón-comedor reformado" data-zoom data-gallery="ejemplos" data-zoom-cap="Salón-comedor · render orientativo" loading="lazy" decoding="async">
+        <figcaption>Salón-comedor</figcaption>
+      </figure>
+    </div>
+  </div>
+</section>
+
 <!-- ============================================
  Demo / WhatsApp
 ============================================ -->
@@ -2160,4 +2214,66 @@ h3, h4, h5, h6 {
 })();
 </script>
 
+<!-- ============================================
+ Lightbox (galería ampliable)
+============================================ -->
+<div id="lightbox" aria-hidden="true" role="dialog" aria-modal="true" aria-label="Imagen ampliada">
+  <button class="lb-close" type="button" aria-label="Cerrar">×</button>
+  <button class="lb-btn lb-prev" type="button" aria-label="Anterior">‹</button>
+  <img class="lb-img" src="" alt="">
+  <button class="lb-btn lb-next" type="button" aria-label="Siguiente">›</button>
+  <div class="lb-cap"></div>
+</div>
+<script>
+(function () {
+  var lb = document.getElementById('lightbox');
+  if (!lb) return;
+  var imgEl = lb.querySelector('.lb-img');
+  var capEl = lb.querySelector('.lb-cap');
+  var btns = lb.querySelectorAll('.lb-btn');
+  var group = [], idx = 0;
+
+  function render() {
+    var t = group[idx];
+    if (!t) return;
+    imgEl.src = t.currentSrc || t.src;
+    imgEl.alt = t.alt || '';
+    capEl.textContent = t.getAttribute('data-zoom-cap') || t.alt || '';
+    var multi = group.length > 1;
+    Array.prototype.forEach.call(btns, function (b) { b.style.display = multi ? '' : 'none'; });
+  }
+  function open(trigger) {
+    var g = trigger.getAttribute('data-gallery') || 'default';
+    group = Array.prototype.slice.call(document.querySelectorAll('[data-zoom][data-gallery="' + g + '"]'));
+    idx = group.indexOf(trigger);
+    if (idx < 0) idx = 0;
+    render();
+    lb.classList.add('open');
+    lb.setAttribute('aria-hidden', 'false');
+    document.body.style.overflow = 'hidden';
+  }
+  function close() {
+    lb.classList.remove('open');
+    lb.setAttribute('aria-hidden', 'true');
+    document.body.style.overflow = '';
+  }
+  function move(d) { if (group.length) { idx = (idx + d + group.length) % group.length; render(); } }
+
+  document.addEventListener('click', function (e) {
+    var z = e.target.closest && e.target.closest('[data-zoom]');
+    if (z) { e.preventDefault(); open(z); return; }
+    if (!lb.classList.contains('open')) return;
+    if (e.target === lb || (e.target.closest && e.target.closest('.lb-close'))) { close(); return; }
+    if (e.target.closest && e.target.closest('.lb-prev')) { move(-1); return; }
+    if (e.target.closest && e.target.closest('.lb-next')) { move(1); return; }
+  });
+  document.addEventListener('keydown', function (e) {
+    if (!lb.classList.contains('open')) return;
+    if (e.key === 'Escape') close();
+    else if (e.key === 'ArrowRight') move(1);
+    else if (e.key === 'ArrowLeft') move(-1);
+  });
+})();
+</script>
+
 </body></html>
\ No newline at end of file