.contact-section {
    color: #fff;
	border-radius: 0 !important;
  padding: 40px; /* Espaciado interno para separar el texto de los bordes */
  
  /* Fusiona el fondo azul con la imagen */
  background-image: linear-gradient(
      rgba(24, 43, 73, 0.85), /* Color azul con 85% de opacidad (ajusta el 0.85 a tu gusto) */
      rgba(24, 43, 73, 0.85)
    ), 
    url("../img/contacto.jpg"); /* Pon aquí la ruta que te funcionó */
    
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: var(--radius-md); /* Opcional: redondea las esquinas si lo deseas */
}
.contact-grid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 80px;
  align-items: start
}
.contact-copy h2 {
  color: #fff
}
.contact-copy p {
  color: #c3ced8;
  max-width: 480px;
  margin-top: 20px
}
.contact-form {
  background: #fff;
  color: var(--color-dark);
  padding: 35px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card)
}
.contact-form label {
  display: block;
  font-size: .76rem;
  font-weight: 800;
  margin-bottom: 16px
}
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  margin-top: 7px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 12px 13px;
  outline: none;
  background: #fff
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus {
  border-color: var(--color-accent)
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px
}
.contact-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-feedback {
    margin: 0 auto 20px;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 0.95rem;
}

.contact-feedback.success {
    background: #e8f6ed;
    color: #176536;
    border: 1px solid #b8e2c5;
}

.contact-feedback.error {
    background: #fff0ef;
    color: #9b2525;
    border: 1px solid #efc1bd;
}

@media(max-width:800px) {
    .contact-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .contact-section {
    /* En móviles el degradado va hacia abajo (to bottom) */
    background-image: 
      linear-gradient(
        to bottom, 
        rgba(10, 25, 41, 0.88) 0%, 
        rgba(10, 25, 41, 0.95) 50%, 
        rgba(10, 25, 41, 1) 60%
      ), 
      url("../img/contacto.jpg");
  }
}
@media(max-width:500px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}