.contact-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 25px;
          margin-bottom: 50px;
        }

        .contact-card {
          background: #fff;
          padding: 25px;
          border-radius: 12px;
          box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
          margin-bottom: 20px;
        }

        .contact-card strong {
          font-size: 14px;
          margin: 0 0 5px;
        }


        .contact-card p {
          color: var(--muted);
          margin: 0;
          font-size: 13px;
        }

        .contact-card .puesto {
          font-size: 13px;
          color: #777;
          margin-bottom: 10px;
          display: block;
        }

        .contact-card a {
          color: #0066cc;
          text-decoration: none;
        }

        .contact-card a:hover {
          text-decoration: underline;
        }

        .right-column {
          flex: 1.3;
        }

        .right-column h3 {
          font-size: 26px;
          margin-bottom: 20px;
        }

        .contact-card a {
          text-decoration: none;
          color: #0056b3;
        }

        .contact-card a:hover {
          text-decoration: underline;
        }

        /* WRAPPER PRINCIPAL */

        .contacto {
          padding: 60px 20px;

        }

        .contact-wrapper {
          display: flex;
          gap: 40px;
        }


        /* COLUMNA IZQUIERDA (MAPA) */


        .contact-map h3 {
          font-size: 26px;
        }

        .left-column {
          flex: 2;
        }

        .left-column h3 {
          font-size: 26px;
          margin-bottom: 15px;
        }

        .map-container {
          width: 100%;
          height: 500px;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
        }

        .map-container iframe {
          width: 100%;
          height: 100%;
          border: 0;
        }



        /* RESPONSIVE */
        @media (max-width: 900px) {
          .contact-wrapper {
            flex-direction: column;
          }

          .map-container {
            height: 350px;
          }
        }