#form-contacto h2,
#form-contacto p {
    grid-column: 1 / -1; /* se extiende sobre ambas columnas */
    text-align: center;
}

#form-contacto h2 {
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 2.5rem;
}


/* Formulario alineado a la derecha en escritorio */
#form-contacto {
    flex: 1 1 350px;
    max-width: 600px;
    background: #b6f4fc36;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    flex-direction: column;
    display: grid; /* ahora usamos grid */
    grid-template-columns: 1fr 1fr; /* dos columnas iguales */
    gap: 0.75rem 1rem;
}

/* --- Responsive para tablets y móviles --- */
@media (max-width: 768px) {
    #form-contacto {
        max-width: 100%;      /* Ocupa todo el ancho disponible */
        margin: 0 auto;       /* Centrado horizontal */
        padding: 1rem;        /* Padding más compacto */
    }
}

@media (max-width: 480px) {
    #form-contacto {
        padding: 0.75rem;     /* Aún más compacto en móviles pequeños */
        gap: 0.5rem;          /* Menos espacio entre campos */
    }
}

/* Etiquetas */
#form-contacto label {
    font-weight: 600;
    text-align: left;
    font-size: 0.98em;
}

/* Campos de entrada */
#form-contacto input {
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

#form-contacto input:focus {
    border-color: #0073e6;
    box-shadow: 0 0 4px rgba(0, 115, 230, 0.3);
    outline: none;
}
/* Botón del formulario de contacto */
#form-contacto button {
  background: #1AAB8A;
  color: #fff;
  border: none;
  position: relative;
  height: 40px;
  font-size: 1.2em;
  padding: 0 2em;
  cursor: pointer;
  transition: 0.8s ease all;
  outline: none;
  border-radius: 6px; /* opcional para suavizar bordes */
  margin-right: 50px;
  margin-left: 50px;
}

/* Hover */
#form-contacto button:hover {
  background: #fff;
  color: #1AAB8A;
}

/* Efecto de líneas animadas */
#form-contacto button:before,
#form-contacto button:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 2px;
  width: 0;
  background: #1AAB8A;
  transition: 0.4s ease all;
}

#form-contacto button:after {
  right: inherit;
  top: inherit;
  left: 0;
  bottom: 0;
}

#form-contacto button:hover:before,
#form-contacto button:hover:after {
  width: 100%;
  transition: 0.8s ease all;
  
}

#contacto_2 {
  text-align: left; /* Centra el texto del input */
}

#contacto_2::placeholder {
  text-align: left; /* Centra el texto del placeholder */
}

/* Responsive para pantallas pequeñas: vuelve a una sola columna */
@media (max-width: 768px) {
    #form-contacto {
        grid-template-columns: 1fr; /* una columna */
        max-width: 100%;
        margin: 0 auto;
    }
}
/* Responsivo */
@media (max-width: 768px) {
    .contacto_container {
        flex-direction: column;
    }

    #form-contacto {
        max-width: 100%;
    }
}