.
========================================================= */
/* CAJA GENERAL DEL FORMULARIO */
#fluentform_3,
.fluent_form_3 {
position: relative !important;
max-width: 760px !important;
margin: 0 auto !important;
padding: 34px 36px 36px !important;
background:
linear-gradient(135deg, rgba(43, 71, 141, 0.07), rgba(100, 149, 193, 0.035)),
#ffffff !important;
border-left: 5px solid #2B478D !important;
border-top: 1px solid #e2e8f0 !important;
border-right: 1px solid #e2e8f0 !important;
border-bottom: 1px solid #e2e8f0 !important;
box-sizing: border-box !important;
font-family: "Hanken Grotesk", Arial, sans-serif !important;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08) !important;
overflow: hidden !important;
}
/* TEXTO SUPERIOR */
#fluentform_3::before,
.fluent_form_3::before {
content: "FORMULARIO TÉCNICO";
display: block !important;
margin-bottom: 24px !important;
font-family: "JetBrains Mono", monospace !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.13em !important;
text-transform: uppercase !important;
color: #2B478D !important;
}
/* QUITAR BORDES INTERNOS DE FLUENT */
#fluentform_3 fieldset,
.fluent_form_3 fieldset {
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* FORZAR 2 COLUMNAS EN ORDENADOR */
#fluentform_3 fieldset {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
column-gap: 18px !important;
row-gap: 16px !important;
}
/* CADA CAMPO */
#fluentform_3 .ff-el-group,
.fluent_form_3 .ff-el-group {
margin: 0 !important;
min-width: 0 !important;
}
/* EL CAMPO NOMBRE, SI TIENE NOMBRE/APELLIDOS DENTRO, QUE OCUPE TODO */
#fluentform_3 .ff-el-group:first-of-type,
.fluent_form_3 .ff-el-group:first-of-type {
grid-column: 1 / -1 !important;
}
/* DESCRIPCIÓN DEL PROYECTO A ANCHO COMPLETO */
#fluentform_3 .ff-el-group:has(textarea),
.fluent_form_3 .ff-el-group:has(textarea) {
grid-column: 1 / -1 !important;
}
/* BOTÓN A ANCHO COMPLETO */
#fluentform_3 .ff_submit_btn_wrapper,
.fluent_form_3 .ff_submit_btn_wrapper {
grid-column: 1 / -1 !important;
margin: 4px 0 0 0 !important;
padding: 0 !important;
}
/* LABELS */
#fluentform_3 .ff-el-input--label,
#fluentform_3 .ff-el-input--label label,
.fluent_form_3 .ff-el-input--label,
.fluent_form_3 .ff-el-input--label label {
margin: 0 0 7px 0 !important;
padding: 0 !important;
font-family: "JetBrains Mono", monospace !important;
font-size: 10.5px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
color: #1d3557 !important;
}
/* ASTERISCO DE OBLIGATORIO */
#fluentform_3 .required,
.fluent_form_3 .required {
color: #2B478D !important;
}
/* INPUTS / SELECTS / TEXTAREA */
#fluentform_3 input,
#fluentform_3 select,
#fluentform_3 textarea,
#fluentform_3 .ff-el-form-control,
.fluent_form_3 input,
.fluent_form_3 select,
.fluent_form_3 textarea,
.fluent_form_3 .ff-el-form-control {
width: 100% !important;
min-height: 45px !important;
padding: 12px 14px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 0 !important;
background: #f8fafc !important;
box-sizing: border-box !important;
font-family: "Hanken Grotesk", Arial, sans-serif !important;
font-size: 14.5px !important;
font-weight: 400 !important;
line-height: 1.35 !important;
color: #0a0e14 !important;
outline: none !important;
box-shadow: none !important;
filter: none !important;
opacity: 1 !important;
transition:
border-color 0.18s ease,
background 0.18s ease,
box-shadow 0.18s ease !important;
}
/* SELECT */
#fluentform_3 select,
.fluent_form_3 select {
cursor: pointer !important;
}
/* PLACEHOLDER */
#fluentform_3 input::placeholder,
#fluentform_3 textarea::placeholder,
.fluent_form_3 input::placeholder,
.fluent_form_3 textarea::placeholder {
color: #64748b !important;
opacity: 1 !important;
}
/* FOCUS */
#fluentform_3 input:focus,
#fluentform_3 select:focus,
#fluentform_3 textarea:focus,
#fluentform_3 .ff-el-form-control:focus,
.fluent_form_3 input:focus,
.fluent_form_3 select:focus,
.fluent_form_3 textarea:focus,
.fluent_form_3 .ff-el-form-control:focus {
border-color: #2B478D !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(43, 71, 141, 0.10) !important;
}
/* TEXTAREA */
#fluentform_3 textarea,
.fluent_form_3 textarea {
min-height: 112px !important;
resize: vertical !important;
}
/* BOTÓN */
#fluentform_3 button,
#fluentform_3 .ff-btn-submit,
.fluent_form_3 button,
.fluent_form_3 .ff-btn-submit {
width: 100% !important;
min-height: 50px !important;
padding: 16px 24px !important;
border: none !important;
border-radius: 0 !important;
background: linear-gradient(135deg, #2B478D, #1d3557) !important;
color: #ffffff !important;
cursor: pointer !important;
font-family: "Hanken Grotesk", Arial, sans-serif !important;
font-size: 14.5px !important;
font-weight: 800 !important;
letter-spacing: -0.01em !important;
line-height: 1 !important;
box-shadow: none !important;
filter: none !important;
opacity: 1 !important;
transform: none !important;
transition:
background 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease !important;
}
#fluentform_3 button:hover,
#fluentform_3 .ff-btn-submit:hover,
.fluent_form_3 button:hover,
.fluent_form_3 .ff-btn-submit:hover {
background: linear-gradient(135deg, #1d3557, #0c4a6e) !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
box-shadow: 0 14px 30px rgba(29, 53, 87, 0.18) !important;
}
/* ERRORES */
#fluentform_3 .ff-el-is-error input,
#fluentform_3 .ff-el-is-error select,
#fluentform_3 .ff-el-is-error textarea,
.fluent_form_3 .ff-el-is-error input,
.fluent_form_3 .ff-el-is-error select,
.fluent_form_3 .ff-el-is-error textarea {
border-color: #b91c1c !important;
background: #fffafa !important;
}
#fluentform_3 .ff-el-help-message,
#fluentform_3 .text-danger,
.fluent_form_3 .ff-el-help-message,
.fluent_form_3 .text-danger {
margin-top: 6px !important;
font-family: "Hanken Grotesk", Arial, sans-serif !important;
font-size: 12.5px !important;
line-height: 1.35 !important;
color: #b91c1c !important;
}
/* MENSAJE DE ÉXITO */
#fluentform_3 .ff-response-msg,
#fluentform_3 .ff-message-success,
.fluent_form_3 .ff-response-msg,
.fluent_form_3 .ff-message-success {
grid-column: 1 / -1 !important;
border-radius: 0 !important;
border: 1px solid #cbd5e1 !important;
background: #f8fafc !important;
color: #0a0e14 !important;
font-family: "Hanken Grotesk", Arial, sans-serif !important;
font-size: 14.5px !important;
line-height: 1.45 !important;
}
/* =========================================================
TABLET / IPAD
Solo afecta hasta 1024px.
========================================================= */
@media (max-width: 1024px) {
#fluentform_3,
.fluent_form_3 {
max-width: 760px !important;
padding: 34px 34px 36px !important;
}
}
/* =========================================================
MÓVIL
Solo afecta hasta 760px.
En móvil vuelve a 1 columna.
========================================================= */
@media (max-width: 760px) {
#fluentform_3,
.fluent_form_3 {
max-width: 100% !important;
padding: 30px 26px 32px !important;
}
#fluentform_3 fieldset,
.fluent_form_3 fieldset {
grid-template-columns: 1fr !important;
row-gap: 15px !important;
}
#fluentform_3 .ff-el-group,
.fluent_form_3 .ff-el-group {
grid-column: 1 / -1 !important;
}
#fluentform_3::before,
.fluent_form_3::before {
margin-bottom: 22px !important;
}
}
/* =========================================================
MÓVIL PEQUEÑO
Solo afecta hasta 480px.
========================================================= */
@media (max-width: 480px) {
#fluentform_3,
.fluent_form_3 {
padding: 28px 22px 30px !important;
}
#fluentform_3 input,
#fluentform_3 select,
#fluentform_3 textarea,
#fluentform_3 .ff-el-form-control,
.fluent_form_3 input,
.fluent_form_3 select,
.fluent_form_3 textarea,
.fluent_form_3 .ff-el-form-control {
min-height: 44px !important;
padding: 12px 13px !important;
font-size: 14px !important;
}
#fluentform_3 button,
#fluentform_3 .ff-btn-submit,
.fluent_form_3 button,
.fluent_form_3 .ff-btn-submit {
min-height: 48px !important;
font-size: 14px !important;
}
}
