/* Contenedor principal que envuelve el formulario y el texto */
.contenido {
  display: flex;                      /* Activa flexbox para organización horizontal */
  justify-content: center;           /* Centra todo el bloque horizontalmente */
  padding: 40px 20px;                 /* Espaciado alrededor */
}

/* Contenedor que incluye el formulario y el texto uno al lado del otro */
.bloque-central {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin: 30px;
  flex-wrap: wrap; /* Para que se acomode en pantallas pequeñas */
} 
/* Estilo del formulario */
.formulario {
  background-color: #ffffff;         /* Fondo blanco */
  padding: 20px;                     /* Espacio interno */
  width: 500px;                      /* Ancho fijo del formulario */
  border-left: 5px solid #00bcd4;    /* Línea azul en el borde izquierdo */
  text-align: left;                  /* Texto alineado a la izquierda */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);  /* Sombra suave */
  border-radius: 8px;                /* Bordes redondeados */
}

/* Estilo del texto al lado del formulario */
.texto-lateral {
  background-color: #ffffff;      /* fondo celeste claro */
  border: 4px solid #00acc1;      /* borde más oscuro celeste */
  border-radius: 15px;            /* esquinas redondeadas */
  padding: 20px;                  /* espacio interno */
  margin-right: 30px;            /* separación del formulario */
  width: 500px;                   /* ancho del cuadro */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* sombra sutil */
}


/* Estilo de los títulos (formulario y texto lateral) */
h2, h3 {
  margin-top: 0;                     /* Elimina espacio extra arriba del título */
  color: black;                    /* Color azul del título */
}

/* Estilo de las etiquetas de cada campo */
label {
  display: block;                    /* Ocupan una línea completa */
  margin-top: 10px;                  /* Espacio superior entre campos */
}

/* Estilo para campos de entrada y área de texto */
input, textarea {
  width: 100%;                       /* Ocupan todo el ancho del formulario */
  padding: 8px;                      /* Espacio interno */
  margin-top: 5px;                   /* Espacio entre etiqueta y campo */
  border: 1px solid #b2ebf2;         /* Borde azul claro */
  border-radius: 4px;                /* Bordes redondeados */
  box-sizing: border-box;            /* Incluye padding en el ancho total */
}

/* Estilo del botón "Enviar" */
button {
  background-color: #009cb1;         /* Azul celeste */
  color: white;                      /* Texto blanco */
  padding: 10px;                     /* Tamaño del botón */
  margin-top: 15px;                  /* Espacio superior con respecto al campo anterior */
  border: none;                      /* Sin borde */
  width: 100%;                       /* Ocupa todo el ancho disponible */
  cursor: pointer;                   /* Cursor de mano al pasar el mouse */
  border-radius: 4px;                /* Bordes redondeados */
}

/* Estilo del botón cuando el usuario pasa el mouse encima */
button:hover {
  background-color: #008ba3;         /* Azul más oscuro al pasar el mouse */
}

/* Estilo para el mensaje de éxito */
#mensaje {
  color: green;                      /* Texto en verde */
  margin-top: 10px;                  /* Espacio superior respecto al botón */
}