---
import BaseLayout from '../layouts/BaseLayout.astro';
import { comuna, tramites, industria, sostenibilidad, bucci, historia } from '../data/sitio';
---

<BaseLayout headerVariant="hero" title={`${comuna.nombre} · ${comuna.claim}`}>
  <!-- ============================================================
       HERO — clásico institucional: foto del pueblo + claim + BTV.
       El 33 vive como sello en el header; acá no se repite.
       ============================================================ -->
  <section class="hero" aria-labelledby="hero-title">
    <div class="hero-bg" aria-hidden="true"></div>
    <div class="hero-veil" aria-hidden="true"></div>

    <div class="container hero-content">
      <p class="hero-eyebrow">★ Finalista · Best Tourism Villages 2026 · ONU Turismo</p>
      <h1 id="hero-title" class="hero-title">
        Zenón Pereyra.<br />
        Un pueblo que <em>se deja recorrer</em>.
      </h1>
      <p class="hero-sub">
        Colonia piamontesa en el corazón de la pampa santafesina. Treinta y tres calles,
        patrimonio vivo, vida rural a 73 km de Rafaela.
      </p>
      <div class="hero-actions">
        <a href="#servicios" class="btn btn--on-dark">Servicios al vecino</a>
        <a href="#pueblo" class="btn btn--ghost-on-dark">Conocé el pueblo</a>
      </div>
    </div>

    <div class="container hero-foot">
      <span class="mono hero-meta">{comuna.departamento} · {comuna.provincia} · Argentina</span>
      <a href="#servicios" class="hero-scroll">↓ Servicios</a>
    </div>
  </section>

  <!-- ============================================================
       SERVICIOS AL VECINO — primero y claro
       ============================================================ -->
  <section id="servicios" class="section section--paper2" aria-labelledby="servicios-title">
    <div class="container">
      <header class="section-head">
        <span class="eyebrow">Servicios al vecino</span>
        <h2 id="servicios-title" class="h2">¿Qué necesitás hacer hoy?</h2>
        <p class="lead">Accesos rápidos a los trámites y consultas que más se usan en la Comuna.</p>
      </header>

      <div class="servicios-grid">
        <a href="/tramites" class="servicio-card">
          <div class="servicio-icono" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/></svg>
          </div>
          <h3 class="servicio-nombre">Trámites en línea</h3>
          <p class="muted">API, TGI, habilitación comercial, tasa de automotores.</p>
          <span class="servicio-link">Iniciar trámite →</span>
        </a>

        <a href="https://wa.me/5493564492253" target="_blank" rel="noopener" class="servicio-card">
          <div class="servicio-icono" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
          </div>
          <h3 class="servicio-nombre">WhatsApp de la Comuna</h3>
          <p class="muted">Reclamos, consultas, turnos. Atendemos en horario administrativo.</p>
          <span class="servicio-link">Escribir →</span>
        </a>

        <a href="#avisos" class="servicio-card">
          <div class="servicio-icono" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>
          </div>
          <h3 class="servicio-nombre">Avisos de la semana</h3>
          <p class="muted">Cortes de servicios, reuniones, vencimientos de tasas.</p>
          <span class="servicio-link">Ver avisos →</span>
        </a>

        <a href="#industria" class="servicio-card">
          <div class="servicio-icono" aria-hidden="true">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M20 7h-3V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v3H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/><path d="M9 4h6v3H9z"/></svg>
          </div>
          <h3 class="servicio-nombre">Empleo y producción</h3>
          <p class="muted">Industrias regionales, producción local, oferta laboral.</p>
          <span class="servicio-link">Ver →</span>
        </a>
      </div>

      <!-- Avisos vitales -->
      <div class="avisos" id="avisos">
        <div class="avisos-head">
          <h3 class="avisos-h eyebrow">Avisos · 17–23 jul 2026</h3>
          <a href="#" class="avisos-todos">Ver todos</a>
        </div>
        <ul class="avisos-list">
          <li>
            <span class="aviso-tag aviso-tag--vence">Vence</span>
            <span class="aviso-txt">Tasa de automotores · 20/07</span>
          </li>
          <li>
            <span class="aviso-tag aviso-tag--servicio">Servicio</span>
            <span class="aviso-txt">Mantenimiento de alumbrado público · martes 9 a 12 h</span>
          </li>
          <li>
            <span class="aviso-tag aviso-tag--evento">Evento</span>
            <span class="aviso-txt">Reunión de vecinos · jueves 19 h, Centro Cultural</span>
          </li>
        </ul>
      </div>
    </div>
  </section>

  <!-- ============================================================
       EL PUEBLO
       ============================================================ -->
  <section id="pueblo" class="section section--paper" aria-labelledby="pueblo-title">
    <div class="container">
      <header class="section-head">
        <span class="eyebrow">El pueblo</span>
        <h2 id="pueblo-title" class="h2">Un finalista al pueblo más lindo del mundo.</h2>
        <p class="lead">Herencia piamontesa, trazado de treinta y tres calles, vida rural en la llanura santafesina.</p>
      </header>

      <div class="pueblo-feature">
        <figure class="pueblo-feature-img">
          <img src="/img/hero/reserva-tunel.jpg" alt="Camino arbolado en la reserva natural de Zenón Pereyra" loading="lazy" />
          <figcaption>Reserva Ecológica Comunal · Zenón Pereyra</figcaption>
        </figure>
        <div class="pueblo-feature-text">
          <span class="eyebrow">Naturaleza</span>
          <h3 class="h3">La reserva que rodea al pueblo.</h3>
          <p class="muted">Camino de árboles y humedales a pocos minutos del casco urbano.</p>
        </div>
      </div>

      <div class="pueblo-tres">
        <article class="pueblo-card">
          <img src="/img/patrimonio/calle-13.jpg" alt="Calle patrimonial del pueblo" loading="lazy" class="pueblo-card-img" />
          <div class="pueblo-card-body">
            <span class="eyebrow">Patrimonio</span>
            <h3 class="h4">Treinta y tres calles</h3>
            <p class="muted">Una traza que la tradición asocia con el grado 33 de la masonería.</p>
          </div>
        </article>
        <article class="pueblo-card">
          <img src="/img/galeria/gauchos.jpg" alt="Jinetes gauchos en fiesta tradicional" loading="lazy" class="pueblo-card-img" />
          <div class="pueblo-card-body">
            <span class="eyebrow">Cultura</span>
            <h3 class="h4">Fiestas y tradiciones</h3>
            <p class="muted">Fiesta del Ajenjo, tradiciones piamontesas, destrezas criollas.</p>
          </div>
        </article>
        <article class="pueblo-card">
          <img src="/img/galeria/ballet-02.jpg" alt="Ballet en el teatro del pueblo" loading="lazy" class="pueblo-card-img" />
          <div class="pueblo-card-body">
            <span class="eyebrow">Origen</span>
            <h3 class="h4">Herencia piamontesa</h3>
            <p class="muted">Colonia de inmigrantes italianos del Piamonte, viva en la identidad del pueblo.</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <!-- ============================================================
       BANDA FOTOGRÁFICA — full-bleed, solo imagen + caption chiquito
       ============================================================ -->
  <section class="banda-foto" aria-label="Vista panorámica del pueblo">
    <img src="/img/hero/panoramica-wide.jpg" alt="Panorámica de Zenón Pereyra al atardecer" class="banda-foto-img" loading="lazy" />
    <div class="banda-foto-veil" aria-hidden="true"></div>
    <figcaption class="banda-foto-cap">
      <span class="eyebrow eyebrow--on-dark">Panorámica</span>
      <p class="banda-foto-txt">Zenón Pereyra · Santa Fe · Argentina</p>
    </figcaption>
  </section>

  <!-- ============================================================
       PATRIMONIO — timeline con foto, menos texto
       ============================================================ -->
  <section id="patrimonio" class="section section--paper3" aria-labelledby="patrimonio-title">
    <div class="container">
      <header class="section-head">
        <span class="eyebrow">Patrimonio</span>
        <h2 id="patrimonio-title" class="h2">Hitos.</h2>
      </header>

      <div class="timeline">
        <article class="timeline-item">
          <div class="timeline-year mono">1887</div>
          <div class="timeline-body">
            <h3 class="h4">Primeros asentamientos</h3>
            <p class="muted">Llegada de familias piamontesas a la zona rural.</p>
          </div>
        </article>
        <article class="timeline-item">
          <div class="timeline-year mono">1891</div>
          <div class="timeline-body">
            <h3 class="h4">Creación de la Comisión de Fomento</h3>
            <p class="muted">El pueblo toma este año como fundacional.</p>
          </div>
        </article>
        <article class="timeline-item">
          <div class="timeline-year mono">1920</div>
          <div class="timeline-body">
            <h3 class="h4">Nace Clemar Bucci</h3>
            <p class="muted">Pionero argentino en Fórmula 1 (1954–55, Gordini y Maserati).</p>
          </div>
        </article>
        <article class="timeline-item">
          <div class="timeline-year mono">1953</div>
          <div class="timeline-body">
            <h3 class="h4">Se funda Altina en Zenón Pereyra</h3>
            <p class="muted">Pionera sudamericana en fertilización neumática.</p>
          </div>
        </article>
        <article class="timeline-item">
          <div class="timeline-year mono">2026</div>
          <div class="timeline-body">
            <h3 class="h4">Finalista Best Tourism Villages</h3>
            <p class="muted">Una de las 8 propuestas que representan a Argentina ante ONU Turismo.</p>
          </div>
        </article>
      </div>

      <div class="museo-bloque">
        <div class="museo-img"><img src="/img/patrimonio/teatro.jpg" alt="Teatro y biblioteca del pueblo" loading="lazy" /></div>
        <div class="museo-text">
          <span class="eyebrow">{bucci.museo.nombre}</span>
          <h3 class="h3">Automovilismo argentino, en el pueblo donde nació.</h3>
          <p class="muted"><strong>{bucci.domingo.nombre}</strong> ({bucci.domingo.anos}). {bucci.domingo.logro}</p>
          <p class="museo-datos mono">
            {bucci.museo.direccion}<br />
            {bucci.museo.horario} · {bucci.museo.telefono}
          </p>
          <a href={bucci.museo.web} target="_blank" rel="noopener" class="btn btn--ghost">Visitar el museo →</a>
        </div>
      </div>
    </div>
  </section>

  <!-- ============================================================
       GALERÍA — grilla de fotos lindas del pueblo
       ============================================================ -->
  <section class="section section--paper" aria-labelledby="galeria-title">
    <div class="container">
      <header class="section-head">
        <span class="eyebrow">Galería</span>
        <h2 id="galeria-title" class="h2">El pueblo en imágenes.</h2>
      </header>
      <div class="galeria">
        <figure class="galeria-item galeria-item--big">
          <img src="/img/hero/reserva-07.jpg" alt="Reserva natural de Zenón Pereyra" loading="lazy" />
        </figure>
        <figure class="galeria-item"><img src="/img/galeria/gauchos-02.jpg" alt="Jinete gaucha" loading="lazy" /></figure>
        <figure class="galeria-item"><img src="/img/hero/fondo-pueblo.jpg" alt="Vista del pueblo" loading="lazy" /></figure>
        <figure class="galeria-item"><img src="/img/patrimonio/calle-14.jpg" alt="Calle patrimonial" loading="lazy" /></figure>
        <figure class="galeria-item"><img src="/img/galeria/banda-02.jpg" alt="Banda municipal" loading="lazy" /></figure>
        <figure class="galeria-item"><img src="/img/industria/colmenas.jpg" alt="Colmenas en campo" loading="lazy" /></figure>
        <figure class="galeria-item"><img src="/img/galeria/ballet.jpg" alt="Ballet del pueblo" loading="lazy" /></figure>
        <figure class="galeria-item"><img src="/img/hero/pampa-amplia.jpg" alt="Pampa santafesina" loading="lazy" /></figure>
        <figure class="galeria-item"><img src="/img/patrimonio/comuna.jpg" alt="Edificio de la Comuna" loading="lazy" /></figure>
      </div>
    </div>
  </section>

  <!-- ============================================================
       INDUSTRIA — empresa local destacada + lista
       ============================================================ -->
  <section id="industria" class="section section--paper" aria-labelledby="industria-title">
    <div class="container">
      <header class="section-head">
        <span class="eyebrow">{industria.titulo}</span>
        <h2 id="industria-title" class="h2">{industria.intro}</h2>
      </header>

      <article class="altina">
        <div class="altina-img">
          <img src="/img/industria/apicultura.jpg" alt="Producción en Zenón Pereyra" loading="lazy" />
        </div>
        <div class="altina-body">
          <div class="altina-meta">
            <span class="altina-chip">Empresa local</span>
            <span class="altina-chip altina-chip--since">Desde {industria.altina.fundacion}</span>
          </div>
          <h3 class="altina-name">{industria.altina.nombre}</h3>
          <p class="lead altina-lead">{industria.altina.destacado}</p>
          <a href={industria.altina.web} target="_blank" rel="noopener" class="btn btn--primary">Conocer Altina →</a>
        </div>
      </article>

      <div class="produccion">
        <h3 class="h4 produccion-h">Producción local</h3>
        <ul class="produccion-list">
          {industria.produccionLocal.map((p, i) => (
            <li class="produccion-item">
              <img src={i === 0 ? '/img/industria/colmenas.jpg' : '/img/industria/prohuerta-05.jpg'} alt={p.nombre} class="produccion-img" loading="lazy" />
              <div>
                <span class="produccion-name">{p.nombre}</span>
                <p class="muted">{p.desc}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>

      <div class="region">
        <div class="region-head">
          <h3 class="h4">La región · 3er polo industrial de Santa Fe</h3>
          <p class="region-note muted">Las grandes industrias regionales están en Rafaela y localidades vecinas. Zenón Pereyra forma parte de este polo productivo.</p>
        </div>
        <table class="region-table">
          <thead>
            <tr><th>Empresa</th><th>Rubro</th><th>Ubicación</th></tr>
          </thead>
          <tbody>
            {industria.region.map((r) => (
              <tr>
                <td class="region-nombre">{r.nombre}</td>
                <td class="region-rubro muted">{r.rubro}</td>
                <td class="region-ubic mono">{r.ubic}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <!-- ============================================================
       SOSTENIBILIDAD — con números
       ============================================================ -->
  <section class="section section--civic" aria-labelledby="sost-title">
    <div class="container">
      <header class="section-head section-head--on-dark">
        <span class="eyebrow eyebrow--on-dark">Sostenibilidad</span>
        <h2 id="sost-title" class="h2 h2--on-dark">{sostenibilidad.titulo}</h2>
      </header>
      <div class="metricas">
        {sostenibilidad.metricas.map((m) => (
          <div class="metrica">
            <div class="metrica-num mono">{m.valor}</div>
            <div class="metrica-label">{m.label}</div>
          </div>
        ))}
      </div>
      <p class="sost-bio">{sostenibilidad.biodigestor}</p>
    </div>
  </section>

  <!-- ============================================================
       CTA TRÁMITES
       ============================================================ -->
  <section class="section section--paper" aria-labelledby="cta-tramites-title">
    <div class="container">
      <div class="cta-tramites">
        <span class="cta-tramites-demo">★ Demo</span>
        <span class="eyebrow">{tramites.titulo}</span>
        <h2 id="cta-tramites-title" class="h2">{tramites.subtitulo}</h2>
        <p class="muted">{tramites.disclaimer}</p>
        <div class="cta-tramites-actions">
          <a href="/tramites" class="btn btn--primary">Ir a trámites</a>
          <a href={tramites.whatsapp} target="_blank" rel="noopener" class="btn btn--ghost">Trámite real por WhatsApp</a>
        </div>
      </div>
    </div>
  </section>
</BaseLayout>

<style>
  /* ---------- HERO ---------- */
  .hero {
    position: relative;
    min-height: 88svh;
    display: grid;
    grid-template-rows: 1fr auto;
    color: var(--paper);
    overflow: hidden;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background-image: url('/img/hero/panoramica.jpg');
    background-size: cover;
    background-position: center 45%;
    z-index: 0;
  }
  .hero-veil {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(20,32,42,0.85) 0%, rgba(20,32,42,0.5) 45%, rgba(20,32,42,0.25) 100%);
    z-index: 1;
  }
  .hero-content {
    position: relative; z-index: 2;
    align-self: end;
    padding-block: var(--space-7) var(--space-5);
    max-width: 60rem;
  }
  .hero-eyebrow {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-cap);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--paper);
    margin-bottom: var(--space-3);
  }
  .hero-title {
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-hero);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 16ch;
  }
  .hero-title em { font-style: italic; font-weight: 400; }
  .hero-sub {
    margin-top: var(--space-3);
    color: rgba(246,242,232,0.92);
    max-width: 50ch;
    font-size: var(--fs-lead);
    line-height: 1.5;
  }
  .hero-actions {
    margin-top: var(--space-4);
    display: flex; flex-wrap: wrap; gap: var(--space-2);
  }
  .hero-foot {
    position: relative; z-index: 2;
    display: flex; justify-content: space-between; align-items: center;
    padding-block: var(--space-2);
    border-top: 1px solid rgba(246,242,232,0.18);
    font-size: var(--fs-cap);
    letter-spacing: 0.05em;
  }
  .hero-meta { color: rgba(246,242,232,0.75); letter-spacing: 0.12em; }
  .hero-scroll { color: var(--paper); opacity: 0.9; font-family: var(--font-body); font-weight: 600; }
  .hero-scroll:hover { opacity: 1; }

  /* ---------- Section head ---------- */
  .section-head { max-width: var(--container-prose); margin-bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
  .section-head--on-dark .eyebrow { color: var(--paper); }
  .section-head--on-dark .eyebrow::before { background: var(--paper); }
  .h2--on-dark { color: var(--paper) !important; }

  .eyebrow--on-dark { color: var(--paper); }
  .eyebrow--on-dark::before { background: var(--paper); }

  /* ---------- Servicios ---------- */
  .servicios-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: 1fr;
    margin-bottom: var(--space-5);
  }
  @media (min-width: 48rem) { .servicios-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 64rem) { .servicios-grid { grid-template-columns: repeat(4, 1fr); } }

  .servicio-card {
    display: flex; flex-direction: column; gap: 0.5rem;
    background: var(--paper);
    padding: var(--space-3);
    border: 1px solid rgba(20,32,42,0.1);
    border-radius: var(--radius);
    transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
  }
  .servicio-card:hover {
    border-color: var(--civic);
    box-shadow: 0 4px 12px rgba(20,32,42,0.06);
  }
  .servicio-icono {
    width: 2.5rem; height: 2.5rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--civic-soft);
    color: var(--civic);
    border-radius: var(--radius);
    margin-bottom: 0.25rem;
  }
  .servicio-icono svg { width: 1.25rem; height: 1.25rem; }
  .servicio-nombre { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); color: var(--ink); }
  .servicio-card p { font-size: var(--fs-sm); }
  .servicio-link { margin-top: auto; padding-top: var(--space-2); font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--civic); }

  /* Avisos */
  .avisos {
    background: var(--paper);
    border: 1px solid rgba(20,32,42,0.1);
    border-left: 4px solid var(--civic);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
  }
  .avisos-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
  .avisos-h { color: var(--civic); }
  .avisos-todos { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-sm); color: var(--civic); }
  .avisos-list { display: flex; flex-direction: column; gap: 0.625rem; }
  .avisos-list li { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-2); align-items: baseline; font-size: var(--fs-sm); }
  .aviso-tag {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--fs-cap);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    text-align: center;
    display: inline-block;
    width: fit-content;
  }
  .aviso-tag--vence   { background: var(--brick); color: var(--paper); }
  .aviso-tag--servicio{ background: var(--civic); color: var(--paper); }
  .aviso-tag--evento  { background: var(--sage); color: var(--paper); }

  /* ---------- El pueblo ---------- */
  .pueblo-feature { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-bottom: var(--space-5); align-items: center; }
  @media (min-width: 64rem) { .pueblo-feature { grid-template-columns: 3fr 2fr; gap: var(--space-5); } }
  .pueblo-feature-img { margin: 0; }
  .pueblo-feature-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
  .pueblo-feature-img figcaption { margin-top: var(--space-1); font-family: var(--font-body); font-size: var(--fs-cap); color: var(--slate); }
  .pueblo-feature-text { display: flex; flex-direction: column; gap: var(--space-2); }

  .pueblo-tres { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
  @media (min-width: 48rem) { .pueblo-tres { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
  .pueblo-card { display: flex; flex-direction: column; background: var(--paper-2); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(20,32,42,0.06); }
  .pueblo-card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .pueblo-card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--space-3); }
  .pueblo-card-body p { font-size: var(--fs-sm); }

  /* ---------- Banda fotográfica full-bleed ---------- */
  .banda-foto { position: relative; margin: 0; padding: 0; min-height: 60vh; display: flex; align-items: flex-end; overflow: hidden; }
  .banda-foto-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
  .banda-foto-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,32,42,0.7) 0%, rgba(20,32,42,0.0) 50%); z-index: 1; }
  .banda-foto-cap { position: relative; z-index: 2; padding: var(--space-5) var(--space-3); color: var(--paper); display: flex; flex-direction: column; gap: 0.5rem; }
  @media (min-width: 48rem) { .banda-foto-cap { padding: var(--space-5) 2rem; } }
  .banda-foto-txt { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h3); color: var(--paper); }

  /* ---------- Galería masonry ---------- */
  .galeria { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
  @media (min-width: 48rem) { .galeria { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 64rem) { .galeria { grid-template-columns: repeat(4, 1fr); } }
  .galeria-item { margin: 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 1 / 1; }
  .galeria-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
  .galeria-item:hover img { transform: scale(1.04); }
  @media (min-width: 48rem) {
    .galeria-item--big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  }

  /* ---------- Timeline ---------- */
  .timeline { display: flex; flex-direction: column; margin-bottom: var(--space-6); border-left: 2px solid var(--civic); padding-left: var(--space-4); }
  .timeline-item { display: grid; grid-template-columns: 6rem 1fr; gap: var(--space-3); padding: var(--space-3) 0; position: relative; }
  @media (max-width: 47rem) { .timeline-item { grid-template-columns: 1fr; gap: 0.25rem; } }
  .timeline-item::before {
    content: ""; position: absolute; left: calc(-1 * var(--space-4) - 7px); top: 1.5rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--civic); border: 2px solid var(--paper-3);
  }
  .timeline-year { font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-h4); color: var(--civic); }
  .timeline-body h3 { margin-bottom: 0.25rem; }
  .timeline-body p { font-size: var(--fs-sm); }

  /* ---------- Museo bloque ---------- */
  .museo-bloque { display: grid; gap: var(--space-4); grid-template-columns: 1fr; padding-top: var(--space-5); border-top: 1px solid rgba(20,32,42,0.1); align-items: center; }
  @media (min-width: 64rem) { .museo-bloque { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
  .museo-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
  .museo-text { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
  .museo-text p { font-size: var(--fs-sm); }
  .museo-datos { font-size: var(--fs-sm); letter-spacing: 0; color: var(--slate); line-height: 1.7; }

  /* ---------- Industria ---------- */
  .altina {
    display: grid; gap: var(--space-4); grid-template-columns: 1fr;
    padding: var(--space-4);
    background: var(--paper-2);
    border: 1px solid rgba(20,32,42,0.1);
    border-radius: var(--radius);
    margin-bottom: var(--space-5);
    align-items: center;
  }
  @media (min-width: 64rem) { .altina { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
  .altina-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
  .altina-body { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }
  .altina-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .altina-chip {
    font-family: var(--font-body); font-weight: 600; font-size: var(--fs-cap);
    letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.3rem 0.7rem; border-radius: 2px;
    background: var(--civic-soft); color: var(--civic);
  }
  .altina-chip--since { background: transparent; border: 1px solid var(--civic); }
  .altina-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); color: var(--ink); }
  .altina-lead { max-width: 44ch; }

  .produccion { margin-bottom: var(--space-5); }
  .produccion-h { margin-bottom: var(--space-3); }
  .produccion-list { display: grid; gap: var(--space-2); grid-template-columns: 1fr; }
  @media (min-width: 48rem) { .produccion-list { grid-template-columns: repeat(3, 1fr); } }
  .produccion-item { padding: 0; background: var(--paper-2); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(20,32,42,0.06); }
  .produccion-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .produccion-item > div { padding: var(--space-2) var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: 0.25rem; }
  .produccion-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); display: block; font-size: var(--fs-h4); }
  .produccion-item p { font-size: var(--fs-sm); margin-top: 0.25rem; }

  .region {
    background: var(--paper-2);
    border: 1px solid rgba(20,32,42,0.1);
    border-radius: var(--radius);
    padding: var(--space-4);
  }
  .region-head { margin-bottom: var(--space-3); }
  .region-head h3 { margin-bottom: 0.25rem; }
  .region-note { font-size: var(--fs-sm); max-width: 60ch; }
  .region-table { width: 100%; border-collapse: collapse; }
  .region-table th { text-align: left; font-family: var(--font-body); font-weight: 600; font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: 0.08em; color: var(--slate); padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 2px solid rgba(20,32,42,0.1); }
  .region-table td { padding: 0.75rem 0.75rem 0.75rem 0; border-bottom: 1px solid rgba(20,32,42,0.06); vertical-align: baseline; }
  .region-nombre { font-weight: 600; color: var(--ink); }
  .region-rubro { font-size: var(--fs-sm); }
  .region-ubic { font-size: var(--fs-sm); text-align: right; }

  /* ---------- Métricas sostenibilidad ---------- */
  .metricas { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; margin-bottom: var(--space-5); }
  @media (min-width: 64rem) { .metricas { grid-template-columns: repeat(4, 1fr); } }
  .metrica { display: flex; flex-direction: column; gap: 0.25rem; }
  .metrica-num { font-size: var(--fs-h1); font-weight: 500; color: var(--paper); line-height: 1; letter-spacing: -0.02em; }
  @media (min-width: 64rem) { .metrica-num { font-size: var(--fs-mega); font-weight: 400; } }
  .metrica-label { color: rgba(246,242,232,0.78); font-size: var(--fs-sm); line-height: 1.3; }
  .sost-bio { color: rgba(246,242,232,0.88); max-width: var(--container-prose); font-size: var(--fs-lead); line-height: 1.5; }

  /* ---------- CTA trámites ---------- */
  .cta-tramites {
    position: relative;
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-5);
    background: var(--paper-2);
    border: 1px solid rgba(20,32,42,0.1);
    border-left: 4px solid var(--civic);
    border-radius: var(--radius);
    max-width: 52rem;
  }
  .cta-tramites-demo {
    position: absolute; top: 0; right: 0;
    background: var(--brick); color: var(--paper);
    padding: 0.35rem 0.8rem;
    font-family: var(--font-body); font-weight: 700; font-size: var(--fs-cap); letter-spacing: 0.1em; text-transform: uppercase;
    border-radius: 0 var(--radius) 0 var(--radius);
  }
  .cta-tramites-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
</style>