/* Forzar que las cajas de Contact Form 7 respeten las columnas de Bootstrap */
.card-1 .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    margin-top: 5px !important;
}

/* Forzar que los selectores e inputs ocupen el 100% del espacio disponible */
.card-1 .wpcf7-form-control {
    width: 100% !important;
}

/* Ocultar los saltos de línea basura que inyecta Contact Form 7 */
.card-1 br {
    display: none !important;
}

/* Asegurar que el label quede arriba del input de forma ordenada */
.card-1 .form-label {
    display: block !important;
    margin-bottom: 0 !important;
}

/* Arreglar los mensajes de error de validación para que no se monten */
.card-1 label.error,
.card-1 span.wpcf7-not-valid-tip {
    position: static !important;
    display: block !important;
    color: #dc3545 !important; /* Rojo de Bootstrap */
    font-size: 0.85em !important;
    margin-top: 4px !important;
    font-weight: normal !important;
}

/* Poner el borde rojo a las cajas cuando tienen error */
.card-1 input.error, 
.card-1 select.error,
.card-1 .wpcf7-not-valid {
    border-color: #dc3545 !important;
}

/* 1. Forzar margen inferior en las cajas para que no aplasten a los labels de abajo */
.card-1 .wpcf7-form-control-wrap {
    margin-bottom: 20px !important;
}

/* 2. Truco para apagar la validación en vivo: Ocultar los errores rojas ANTES de presionar el botón */
form.wpcf7-form:not(.invalid) .wpcf7-not-valid-tip {
    display: none !important;
}

/* 3. Evitar que las cajas se pongan rojas ANTES de presionar el botón */
form.wpcf7-form:not(.invalid) input.wpcf7-not-valid,
form.wpcf7-form:not(.invalid) select.wpcf7-not-valid {
    border-color: #dee2e6 !important; 
}