/* ======================
   FORMULARIO CONTACTO
====================== */
#contacto {
  display: block;
  padding-top: 1px; /* solo para evitar colapso, opcional */
}

.formulario-contacto {
  background-color: #ffffff;
  padding: 22px 20px 0;
}

.formulario-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 100px;
}

/* TITULOS */

.formulario-titulo {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 10px;
}

.formulario-subtitulo {
  font-size: 18px;
  color: #555;
  margin-bottom: 50px;
}

/* FORM */

.formulario {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.formulario-fila {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 30px;
}

.formulario input,
.formulario textarea {
  width: 100%;
  background-color: #d9d9d9;
  border: none;
  border-radius: 6px;
  padding: 18px 20px;
  font-size: 16px;
  color: #000;
}

.formulario input::placeholder,
.formulario textarea::placeholder {
  color: #000;
}

.formulario textarea {
  min-height: 200px;
  resize: none;
}

.campo-oculto {
  display: none;
}

/* BOTON */

.btn-enviar {
  background-color: #f0b23d;
  color: #000;
  border: none;
  border-radius: 6px;
  padding: 18px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-enviar:hover {
  background-color: #e0a42f;
}


.form-mensaje {
  margin-top: 15px;
  font-size: 14px;
}

.form-mensaje.ok {
  color: #2ecc71;
}

.form-mensaje.error {
  color: #e74c3c;
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .formulario-fila {
    grid-template-columns: 1fr;
  }

  .formulario textarea {
    min-height: 160px;
  }
}