/* ==========================================================================
   Formulario de contacto — Transición Energética (FAB)
   Reproduce los estilos de site_3/styles.css (#formulario / .card / .form-field)
   Scoped bajo .fab-form para no chocar con Divi u otros shortcodes del theme.
   ========================================================================== */

.fab-form {
    /* Variables de marca (espejo de site_3/styles.css :root) */
    --ink:        #2A211B;
    --ink-70:     #4A4038;
    --stone:      #6D7173;
    --line:       #DAD6CE;
    --line-soft:  #E9E5DD;
    --surface:    #F2EFEB;
    --white:      #FFFFFF;
    --accent:     #303995;
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --sans:       'IBM Plex Sans', Arial, Helvetica, sans-serif;
    --serif:      'IBM Plex Serif', Georgia, serif;

    box-sizing: border-box;
    font-family: var(--sans);
    color: var(--ink);
}

.fab-form *,
.fab-form *::before,
.fab-form *::after {
    box-sizing: border-box;
}

.fab-form .page-section { padding: 36px 0; }

.fab-form .card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 22px;
}

.fab-form .grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
@media (max-width: 700px) {
    .fab-form .grid-2 { grid-template-columns: 1fr; }
}

.fab-form .t-h3 {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 17px;
    color: var(--ink);
    margin: 0;
}

.fab-form .t-small {
    font-size: 13px;
    color: var(--stone);
    margin: 0;
}

/* --- Campos --- */
.fab-form .form-field {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fab-form .form-field.is-invalid {
    border-color: #C0392B;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, .15);
}

.fab-form .form-field label {
    font-size: 11px;
    color: var(--stone);
    display: block;
    margin-bottom: 4px;
}
.fab-form .form-field input,
.fab-form .form-field textarea {
    border: none;
    outline: none;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
    width: 100%;
    background: transparent;
    resize: none;
}
.fab-form .form-field--textarea { height: 96px; }
.fab-form .form-field--textarea textarea {
    height: 100%;
    resize: vertical;
}

/* --- Botón --- */
.fab-form .btn {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    padding: 13px 26px;
    border-radius: var(--radius-md);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all .15s ease;
}
.fab-form .btn-primary {
    background: var(--ink);
    color: var(--white);
}
.fab-form .btn-primary:hover { background: #453A31; }
.fab-form .btn-sm { padding: 9px 18px; font-size: 12.5px; }

.fab-form .fab-submit.is-loading {
    opacity: .65;
    pointer-events: none;
}

/* --- Honeypot (oculto a humanos, visible a bots) --- */
.fab-form .fab-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
}
.fab-form .fab-hp label,
.fab-form .fab-hp input { font-size: 1px; }

/* --- Captcha --- */
.fab-form .fab-captcha { min-height: 65px; }

/* --- Feedback (mensajes de éxito / error) --- */
.fab-form .fab-feedback {
    display: none;
    font-size: 13.5px;
    line-height: 1.5;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
}
.fab-form .fab-feedback.is-visible { display: block; }
.fab-form .fab-feedback.is-error {
    background: #FBECEA;
    color: #A6302A;
    border: 1px solid #E8B8B2;
}
.fab-form .fab-feedback.is-success {
    background: #EAF4EE;
    color: #1B6A3E;
    border: 1px solid #B6D9C4;
}

/* Lista de errores por campo */
.fab-form .fab-feedback ul {
    margin: 4px 0 0;
    padding-left: 18px;
}
.fab-form .fab-feedback li { margin-bottom: 2px; }

/* --- OK state: oculta el formulario y deja el mensaje --- */
.fab-form .form-contacto.is-sent { display: none; }