.contacto {
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(to right, #e9ebeb, #f0f3f3);
    font-family: 'Inter', sans-serif;
    padding: 0rem 0rem;
    animation: fadeIn 1s ease-in;
  }
  
  .contacto__form-container,
  .contacto__sidebar {
    flex: 1 1 50%;
    padding: 2rem;
    box-sizing: border-box;
  }
  
  .contacto__title {
    font-size: 3rem;
    font-weight: 800;
    color: #1e293b;
    text-align: center;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  
  .contacto__subtitle {
    text-align: center;
    color: #64748b;
    margin-bottom: 1rem;
  }
  
  .contacto__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .contacto__input,
  .contacto__textarea {
    padding: 1rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    font-size: 1rem;
    transition: box-shadow 0.3s ease;
  }
  
  .contacto__input:focus,
  .contacto__textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px #93c5fd;
  }
  
  .contacto__button {
    background: #2563eb;
    color: white;
    font-weight: 600;
    padding: 1rem;
    border: none;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: background 0.3s ease;
  }
  
  .contacto__button:hover {
    background: #1e40af;
  }
  
  /* Sidebar llamativa */
  .contacto__sidebar {
    background: rgba(15, 15, 15, 0.223);
    color: white;
    box-shadow: 0 8px 20px rgba(211, 206, 206, 0.2);
    text-align: center;
  }
  
  .contacto__sidebar-title {
    font-size: 2rem;
    color: white;
    font-weight: 800;
    margin-bottom: 1rem;
    margin-top: 1.2rem;
  }
  
  .contacto__sidebar-text {
    font-size: 1.1rem;
    font-weight: 400;
  }
  
  .contacto__sidebar-image {
    margin-top: 2rem;
    width: 100%;
    border-radius: 1rem;
    object-fit: cover;
    height: 300px;
    transition: transform 0.3s ease;
  }
  .contacto__sidebar-image:hover {
    transform: scale(1.03);
  }
  .mapaContacto{
    /* background-color: yellow; */
    width: 100%;
    height:400px;
  }
  
  /* Animaciones */
  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(40px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .animate-slide-in-left {
    animation: slideInLeft 0.8s ease forwards;
  }
  
  .animate-slide-in-right {
    animation: slideInRight 0.8s ease forwards;
  }
  
  /* Responsive */
  @media screen and (max-width: 768px) {
    .contacto {
      flex-direction: column;
      padding: 2rem 1rem;
    }
  
    .contacto__form-container,
    .contacto__sidebar {
      flex: 1 1 100%;
      padding: 1.5rem;
      width: 100%;
    }
  
    .contacto__sidebar-image {
      height: 200px;
    }
  }