<!-- CÓDIGO GLOBAL PARA EL ÁLBUM DE ZITRO -->
<div id="modalAlbumZitro" style="display: none; position: fixed; z-index: 99999; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); overflow-y: auto; align-items: center; justify-content: center;">
  <div style="background-color: #ffffff; padding: 30px; max-width: 650px; width: 90%; margin: 5% auto; position: relative; border-radius: 4px; box-shadow: 0 4px 20px rgba(0,0,0,0.5);">
    <span onclick="cerrarAlbumZitro()" style="position: absolute; right: 20px; top: 10px; font-size: 35px; cursor: pointer; color: #333333; font-weight: bold;">&times;</span>
    <h3 style="margin-top: 0; font-family: sans-serif; color: #111111; font-size: 22px;">Nuestros Proyectos</h3>
    <p style="color: #555555; font-size: 14px; line-height: 1.6; font-family: sans-serif;">Explora los acabados y el diseño de alta gama ejecutados por nuestro equipo.</p>
    
    <!-- Espacio para las fotos -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 25px;">
      <img src="https://via.placeholder.com/400x300" style="width: 100%; height: auto; border-radius: 2px;" alt="Proyecto 1">
      <img src="https://via.placeholder.com/400x300" style="width: 100%; height: auto; border-radius: 2px;" alt="Proyecto 2">
    </div>
  </div>
</div>

<script>
function abrirAlbumZitro() {
  document.getElementById("modalAlbumZitro").style.display = "flex";
}
function cerrarAlbumZitro() {
  document.getElementById("modalAlbumZitro").style.display = "none";
}
</script>