.block-form {
    padding: var(--wp--custom--section--y-compact) var(--wp--custom--section--x);
}

.block-form.fondo-white-04 {
    background-color: var(--wp--preset--color--white-04);
    color: var(--wp--preset--color--black);
}

.block-form.fondo-white-02 {
    background-color: var(--wp--preset--color--white-02);
    color: var(--wp--preset--color--black);
}

.block-form.fondo-black {
    background-color: var(--wp--preset--color--black);
    color: var(--wp--preset--color--white);
}

.block-form.fondo-main-blue {
    background-color: var(--wp--preset--color--main--blue);
    color: var(--wp--preset--color--white);
}

/* Sobre fondo gris claro, los elementos que normalmente son blancos puros
   (tarjeta del formulario e inputs) pasan a white-03 para no confundirse con
   el fondo de la sección. Sobre blanco claro (white-04) se mantienen en
   blanco puro. */
.block-form.fondo-white-02 .si-form-card,
.block-form.fondo-white-02 .si-form-card input[type="text"],
.block-form.fondo-white-02 .si-form-card input[type="email"],
.block-form.fondo-white-02 .si-form-card input[type="tel"],
.block-form.fondo-white-02 .si-form-card select,
.block-form.fondo-white-02 .si-form-card textarea {
    background: var(--wp--preset--color--white-03);
}

.block-form.fondo-white-02 .si-form-card input[type="submit"],
.block-form.fondo-white-02 .si-form-card .wpcf7-submit {
    color: var(--wp--preset--color--white-03);
}

.block-form .inner-form {
    /* Mismo tope que .inner-texto-image / .inner-caracteristicas: 1320px hasta
       1440px y content-size (1600px) a partir de 1441px (ver @media abajo),
       para que las dos columnas midan igual que en el resto de la familia. */
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 60px;
}

.block-form .inner-form.image_left {
    flex-direction: row-reverse;
}

.block-form .column-form {
    width: 50%;
}

.block-form .column-image {
    width: 50%;
    position: relative;
}

.block-form .column-image .image {
    width: 100%;
}

.block-form .column-image .image img {
    min-height: 495px;
    object-fit: cover;
}

.block-form .columnas {
    display: flex;
    align-items: center;
    gap: 7px;
    align-self: stretch;
}


/* ── Columna derecha: formulario ────────────────────────────── */

.block-form .si-form {
    margin: 31px 0;
}

.formulario-eyebrow {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    margin-bottom: 20px;
    padding: 8px 16px;
    border: 1px solid var(--wp--preset--color--transparent--blue);
    border-radius: var(--wp--custom--radius--full);
    background-color: var(--wp--preset--color--transparent--blue);
    color: var(--wp--preset--color--main-blue);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-700);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.formulario-eyebrow-icon {
    width: 16px;
    height: 16px;
    object-fit: contain;
}

.block-form .si-form h2 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size-h2);
    line-height: var(--wp--preset--line-height-h2);
    font-weight: var(--wp--custom--weight-500);
    color: var(--wp--preset--color--black);
    margin: 0 0 20px;
}

/* ── Tarjeta del formulario ────────────────────────────────── */
.si-form-card {
    background: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--radius--lg);
    padding: 24px 24px 0px;
    box-shadow: var(--shadow-card-soft);
}

.si-form-card .wpcf7-form .form-grid {
    display: grid;
    /* grid-template-columns: 1fr 1fr; comentando este estilo se desactiva la disposición en dos columnas del formulario. Para volver a poner 2 columnas nombre-apellido activar. */
    gap: 6px 12px;

}

.si-form-card .form-grid .field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.si-form-card .form-grid .field.empresa,
.si-form-card .form-grid .field.motivo,
.si-form-card .form-grid .field.pregunta,
.si-form-card .form-grid .field.mensaje {
    grid-column: 1 / -1;
}

.si-form-card .form-label,
.si-form-card .overlap {
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size--form-tag);
    font-weight: 400;
    letter-spacing: 0.04em;
    /* Mismo fix que page-solicitar-info.css: grey-06 (#8A8A8A) da 3.34:1
       sobre el fondo del input (white-04, #FBFBFB), por debajo del 4.5:1 de
       WCAG AA. #5B5B63 da 6.50:1 sobre white-04 y 6.73:1 sobre blanco. */
    color: #5B5B63;
}

.si-form-card input[type="text"],
.si-form-card input[type="email"],
.si-form-card input[type="tel"],
.si-form-card select,
.si-form-card textarea {
    width: 100%;
    border: 1px solid var(--wp--preset--color--grey-05);
    border-radius: var(--wp--custom--radius--sm);
    padding: 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--black);
    background: var(--wp--preset--color--white);
}

.si-form-card select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    padding-right: 44px;
}

.si-form-card input::placeholder,
.si-form-card textarea::placeholder {
    color: var(--wp--preset--color--grey-05);
}

.si-form-card input:focus,
.si-form-card select:focus,
.si-form-card textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--main-blue);
}

.si-form-card .privacy-text {
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size--extra--small);
    line-height: 1.5;
    color: var(--wp--preset--color--black);
    margin: 16px 0;
}

.si-form-card .privacy-accept {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size--extra--small);
    color: var(--wp--preset--color--black);
    margin-bottom: 24px;
    cursor: pointer;
}

.si-form-card .privacy-accept input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--wp--preset--color--main-blue);
}

.si-form-card .privacy-accept a {
    color: var(--wp--preset--color--black);
}

.si-form-card .form-submit {
    margin: 0;
}

.si-form-card input[type="submit"],
.si-form-card .wpcf7-submit {
    width: 100%;
    background: var(--wp--preset--color--main-blue);
    color: var(--wp--preset--color--white);
    border: none;
    border-radius: var(--wp--custom--radius--xl);
    padding: 16px 24px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.si-form-card input[type="submit"]:hover {
    transform: translateY(-2px);
}

.si-form-card .wpcf7-not-valid-tip {
    font-size: var(--wp--preset--font-size--extra--small);
    color: var(--wp--preset--color--error);
    margin-top: 4px;
}

.si-form-card .wpcf7-response-output {
    margin: 16px 0 0;
    border-radius: var(--wp--custom--radius--xs);
    font-size: var(--wp--preset--font-size--extra--small);
}


@media (min-width: 1441px) {
    .block-form .inner-form {
        max-width: var(--wp--custom--layout--content-size);
    }

    /* La columna del formulario mide EXACTAMENTE igual que la de la imagen en
       todos los tramos: 50% hasta 1440px y tope de 700px a partir de 1441px.
       No usa el tope de columna de texto (785/650) del resto de la familia
       porque aquí el "contenido" es una tarjeta con sombra que debe leerse
       como par visual de la imagen, no como columna de prosa. Así la tarjeta
       llega al borde del contenedor y su sombra cae dentro del gutter de la
       sección tanto en dos columnas como al apilar. */
    .column-form,
    .column-image {
        max-width: 700px;
    }

    .column-image .image img {
        height: 604px;
    }
}

/* 1230px, no 920px: mismo punto en el que el menú cambia a hamburguesa, para
   que toda la familia de bloques de dos columnas pase a móvil a la vez que
   la navegación (ver texto-imagen). El gutter lateral sigue el token
   compartido y baja a x-mobile en 920px (ver más abajo); aquí solo el eje
   vertical. */
@media (max-width: 1230px) {
    .block-form {
        padding-block: var(--wp--custom--section--y-compact-mobile);
    }

    /* A diferencia de texto-imagen (donde la imagen va última en el HTML y
       "Arriba" necesita column-reverse), aquí .column-image ya es el primer
       hijo del HTML — column-reverse aquí produciría "Abajo", no "Arriba". */
    /* Incluye ".image_left" en ambos selectores (no solo ".inner-form" a
       secas): esa clase invierte a fila en escritorio con una regla sin media
       query y 3 clases de especificidad — iguala o supera a estas reglas de
       aquí si no se repite explícitamente, así que con "Invertir orden"
       activo el bloque se quedaba en row-reverse también en móvil,
       ignorando por completo la posición de imagen elegida. */
    .block-form .inner-form,
    .block-form .inner-form.image_left {
        flex-direction: column;
        row-gap: 24px;
        /* Ya no hay dos columnas: el inner deja de estar topado (1320px /
           content-size) y se ajusta al gutter de la sección, igual que el
           inner del header. */
        max-width: 100%;
    }

    .block-form .inner-form.image_bottom,
    .block-form .inner-form.image_left.image_bottom {
        flex-direction: column-reverse;
    }

    .block-form .inner-form.image_no .column-image {
        display: none;
    }

    .block-form .column-form,
    .block-form .column-image {
        width: 100%;
    }

    .block-form .column-image .image img {
        min-height: 349px;
    }
}

/* Gutter lateral unificado con el resto de secciones: 60px hasta 920px, 20px
   por debajo (el layout a una columna ya cambió antes, en 1230px). */
@media (max-width: 920px) {
    .block-form {
        padding-inline: var(--wp--custom--section--x-mobile);
    }

    /* La sombra de la tarjeta se escala al gutter disponible: con 60px de
       gutter cabe la grande (offset 10 / blur 35 ≈ 45px de extensión); al
       bajar el gutter a 20px en <=920px, esa sombra sobresaldría del viewport
       y html body { overflow-x: hidden } la recortaría. Se reduce de forma
       proporcional para que se siga viendo entera dentro del padding — mismo
       aspecto, solo cambia la escala. */
    .si-form-card {
        box-shadow: var(--shadow-card-sm);
    }
}

/* Móvil: formulario */
@media (max-width: 768px) {
    .si-form-card {
        padding: 28px;
    }

    .si-form-card .wpcf7-form .form-grid {
        grid-template-columns: 1fr;
    }

    .si-form-card .form-grid .field {
        grid-column: 1 / -1;
    }

    .si-feature-card {
        padding: 16px 18px;
    }
}

/* Móvil pequeño (~320-380px de ancho) */
@media (max-width: 380px) {
    .si-form-card {
        padding: 20px;
    }

    .si-form-card input[type="submit"],
    .si-form-card .wpcf7-submit {
        padding: 14px 20px;
    }
}