/* ========================================
   ESTILOS PARA PÁGINA DE CONTACTO
   ======================================== */

/* Contenedor principal */
.contenido {
  display: flex;
  justify-content: center; /* Centra horizontalmente */
  padding: 40px 20px; /* Espaciado interno */
}

/* Bloque que contiene el formulario y la info de contacto */
.bloque-central {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan */
  justify-content: center;
  gap: 40px; /* Espacio entre formulario e info */
  max-width: 1100px;
  width: 100%;
}

/* Estilo del formulario */
.formulario {
  background-color: #ffffff;
  padding: 20px;
  width: 100%;
  max-width: 500px;
  border-left: 5px solid #00bcd4; /* Borde izquierdo azul */
  text-align: left;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
  border-radius: 8px;
}

/* Estilo de la caja de información */
.texto-lateral {
  background-color: #ffffff;
  border: 4px solid #00acc1; /* Borde completo azul */
  border-radius: 15px;
  padding: 20px;
  width: 100%;
  max-width: 500px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Títulos */
h2, h3 {
  margin-top: 0;
  color: black; /* Color negro para títulos */
}

/* Etiquetas */
label {
  display: block; /* Cada label en nueva línea */
  margin-top: 10px; /* Separación superior */
}

/* Inputs y textarea */
input, textarea {
  width: 100%;
  padding: 8px; /* Espaciado interno */
  margin-top: 5px;
  border: 1px solid #b2ebf2; /* Borde azul claro */
  border-radius: 4px;
  box-sizing: border-box; /* Incluye padding en el ancho */
}

/* Botón */
button {
  background-color: #009cb1; /* Color azul */
  color: white;
  padding: 10px;
  margin-top: 15px;
  border: none;
  width: 100%;
  cursor: pointer; /* Cursor de mano al pasar */
  border-radius: 4px;
}

button:hover {
  background-color: #008ba3; /* Color más oscuro al hover */
}

/* Mensaje de confirmación */
#mensaje {
  color: green; /* Verde para mensajes exitosos */
  margin-top: 10px;
}

/* Responsive: ajustes para pantallas pequeñas */
@media (max-width: 768px) {
  .bloque-central {
    flex-direction: column; /* Elementos en columna */
    align-items: center; /* Centrados */
  }
  
  .formulario,
  .texto-lateral {
    max-width: 100%; /* Ancho completo en móvil */
    width: 100%;
  }
  
  .contenido {
    padding: 20px 10px; /* Menos padding en móvil */
  }
}