body,
  html {
      font-family: 'Inter', sans-serif;
      background-color: #f8f9fa;
      /* Fondo suave */
  }

  /* Hero Section para Contacto: Degradado y sombra de texto */
  .contact-hero-section {
      background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://placehold.co/1920x600/343a40/ffffff?text=__________________');
      background-size: cover;
      background-position: center;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }

  /* Estilos para los iconos grandes de la info de contacto */
  .contact-info-item i {
      font-size: 2rem;
      /* Tamaño más grande para los iconos */
      vertical-align: middle;
      /* Alineación vertical */
      margin-right: 0.75rem;
      /* Espacio a la derecha */
  }

  /* Estilos para el mapa placeholder */
  .map-placeholder {
      width: 100%;
      height: 300px;
      /* Altura fija para el mapa */
      background-color: #e9ecef;
      /* Color de fondo del placeholder */
      border-radius: 0.5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #6c757d;
      font-size: 1.2rem;
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      /* Asegura que no haya scrollbar si el iframe es muy grande */
  }

  .map-placeholder iframe {
      border: none;
      /* Quita el borde del iframe */
  }


  /* Media queries para responsividad */
  @media (max-width: 991.98px) {

      /* Tablet y pantallas más pequeñas */
      .contact-hero-section h1 {
          font-size: 2.8rem;
      }

      .contact-hero-section p {
          font-size: 1.2rem;
      }

      .contact-card {
          margin-bottom: 1.5rem;
      }
  }

  @media (max-width: 767.98px) {

      /* Móviles pequeños */
      .contact-hero-section {
          padding: 4rem 0;
      }

      .contact-hero-section h1 {
          font-size: 2.2rem;
      }

      .contact-hero-section p {
          font-size: 1rem;
      }
  }