/* Estilos generales para todos los campos de texto, email, tel y textarea de Contact Form 7 */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-textarea {
    width: 100%; /* Ocupa el 100% del ancho de su contenedor */
    max-width: 500px; /* Opcional: Define un ancho máximo para que no sean demasiado grandes en escritorios anchos */
    padding: 10px; /* Espaciado interno */
    margin-bottom: 15px; /* Espacio debajo de cada campo */
    border: 1px solid #ccc; /* Borde del campo */
    border-radius: 4px; /* Bordes ligeramente redondeados */
    box-sizing: border-box; /* Asegura que el padding no añada al ancho total */
    font-size: 16px; /* Tamaño de la fuente dentro del campo */
    line-height: 1.5; /* Altura de línea */
}

/* Ajustes específicos para el área de texto (Su Requerimiento) */
.wpcf7-form-control.wpcf7-textarea {
    min-height: 120px; /* Altura mínima del área de texto */
    resize: vertical; /* Permite al usuario redimensionar verticalmente */
}

/* Estilo para el botón de enviar */
.wpcf7-form-control.wpcf7-submit {
    background-color: #0073aa; /* Color de fondo del botón (ej. azul de WordPress) */
    color: white; /* Color del texto del botón */
    padding: 12px 20px; /* Espaciado interno */
    border: none; /* Sin borde */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Icono de mano al pasar el ratón */
    font-size: 18px; /* Tamaño de fuente */
    transition: background-color 0.3s ease; /* Transición suave al pasar el ratón */
}

.wpcf7-form-control.wpcf7-submit:hover {
    background-color: #005177; /* Color de fondo al pasar el ratón */
}

/* Estilos para las etiquetas (Nombre Completo, Correo electrónico, etc.) */
.wpcf7-form label {
    display: block; /* Hace que cada etiqueta ocupe su propia línea */
    margin-bottom: 5px; /* Espacio entre la etiqueta y el campo */
    font-weight: bold; /* Texto de la etiqueta en negrita */
    color: #333; /* Color del texto de la etiqueta */
}

/* Media Queries para ajustes específicos en pantallas pequeñas (móviles) */
@media (max-width: 768px) {
    .wpcf7-form-control.wpcf7-text,
    .wpcf7-form-control.wpcf7-email,
    .wpcf7-form-control.wpcf7-tel,
    .wpcf7-form-control.wpcf7-textarea {
        width: 100%; /* Asegura que siempre ocupen el 100% en móviles */
        max-width: none; /* Elimina el límite de ancho para móviles */
        padding: 12px; /* Un poco más de padding en móvil para facilidad de toque */
        font-size: 17px; /* Fuente ligeramente más grande en móvil */
    }
}