<footer class="footer">
  <div class="container">
    <div class="row gy-4 text-center text-md-start">
      
      <!-- Columna 1: Mapa -->
      <div class="col-md-3">
        <h5>Ubicación</h5>
        <iframe 
          src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d470.72746206114255!2d-99.11244015806791!3d19.29020556180476!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMTnCsDE3JzI0LjYiTiA5OcKwMDYnNDQuNiJX!5e0!3m2!1ses-419!2smx!4v1747189055133!5m2!1ses-419!2smx" 
          width="100%" 
          height="200" 
          style="border:0; border-radius: 0.5rem;" 
          allowfullscreen="" 
          loading="lazy" 
          referrerpolicy="no-referrer-when-downgrade">
        </iframe>
      </div>

      <!-- Columna 2: Contacto -->
      <div class="col-md-3">
        <h5>Contacto</h5>
        <ul class="list-unstyled">
          <li class="mb-2">
            <i class="bi bi-geo-alt-fill me-2"></i>
            <a href="https://maps.app.goo.gl/VMCcHh1SJ7eqXcAA8" target="_blank">
              Blvd. Adolfo Ruíz Cortines 2467<br>C.P. 16035, CDMX, México
            </a>
          </li>
          <li class="mb-2"><i class="bi bi-telephone-fill me-2"></i> +52 xxxx xxxx</li>
          <!-- <li class="mb-2"><i class="bi bi-envelope-fill me-2"></i> email@formha.com</li> -->
        </ul>
      </div>

      <!-- Columna 3: Logo -->
      <div class="col-md-3 d-flex flex-column align-items-center text-center">
        <div class="img-cont mb-3">
          <img src="{{ url_for('static', filename='y_img/logos/formha_blanco_vertical.png') }}" alt="Escudo FORMHä" height="100">
        </div>
        <small>&copy; 2025 FORMHä. Todos los derechos reservados.</small>
      </div>

      <!-- Columna 4: Redes Sociales -->
      <div class="col-md-3">
        <h5>Síguenos</h5>
        <div class="social-icons">
          <a href="https://www.facebook.com/formha.mx/" target="_blank"><i class="bi bi-facebook"></i></a>
          <a href="https://x.com/formhamx" target="_blank"><i class="bi bi-twitter-x"></i></a>
          <a href="https://www.instagram.com/formha.mx" target="_blank"><i class="bi bi-instagram"></i></a>
          <a href="https://www.linkedin.com/company/formha-mx/" target="_blank"><i class="bi bi-linkedin"></i></a>
          <a href="#" target="_blank"><i class="bi bi-youtube"></i></a>
        </div>
      </div>
    </div>

    <hr class="my-4 border-secondary">

    <div class="text-center small">
      Desarrollado con ❤️ por FORMHä
    </div>
  </div>
</footer>
