/* static\css\home\contacto\contacto-formulario.css*/

.contacto-formulario {
    flex-basis: 55%;
    padding: 2vh;
    background-color: rgba(50, 67, 87, 0.7); /* Fondo celeste semitransparente */
   
}

.form-header, .form-footer {
    text-align: center; /* Centra el contenido dentro de estos contenedores */
}

.contacto-formulario h3 {
    font-size: 2vw; /* Tamaño del texto en vh */
    color: white; /* Color del texto en blanco */
    letter-spacing: 0.1em; /* Ajusta el espaciado entre letras */
}

.contacto-formulario label,
.contacto-formulario input,
.contacto-formulario textarea,
.contacto-formulario button {
    color: white; /* Establece el color del texto en blanco para etiquetas, campos de entrada, área de texto y botón */
}

.contacto-formulario input,
.contacto-formulario textarea {
    background-color: rgba(255, 255, 255, 0.1); /* Fondo blanco semitransparente para los campos de entrada y área de texto */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Borde blanco semitransparente */
    color: white; /* Color del texto en blanco en los campos de entrada y área de texto */
    padding: 0.5em; /* Espacio interno para una mejor apariencia */
    width: 100%; /* Ajusta el ancho al 100% del contenedor */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del elemento */
    margin-bottom: 1.5vh; /* Añade separación entre los campos */
    width: calc(100% - 2px); /* Ajusta el ancho para tener en cuenta el padding, si es necesario */
   
}

input[type="submit"] {
    background-color: rgba(255, 255, 255, 0.1); /* Color de fondo inicial (azul) */
    color: #fff; /* Color del texto */
    border: none; /* Elimina el borde por defecto */
    padding: 0.5em 1em; /* Espaciado interno del botón */
    font-size: 1rem; /* Tamaño de fuente del botón */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    border-radius: 4px; /* Bordes redondeados del botón */
    transition: background-color 0.3s ease; /* Transición suave para el cambio de color */
}

input[type="submit"]:hover {
    background-color: #0056b3; /* Color de fondo cuando el ratón está sobre el botón */
}

.contacto-formulario p {
    text-align: center; /* Centra el contenido dentro de estos contenedores */
    margin: 0;
    padding: 0.5em 0;
    color: white; /* Color del texto */
    font-size: 1rem; /* Tamaño de fuente por defecto */
}

.contacto-formulario p:first-of-type {
    font-weight: bold;
    font-size: 1.2rem; /* Tamaño de fuente para el primer párrafo */
}