.block-texto-image {
    padding: 70px var(--wp--custom--section--x);
}

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

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

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

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

.inner-texto-image {
    max-width: 1320px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 60px;
}

.block-texto-image.is-reverse .inner-texto-image {
    flex-direction: row-reverse;
}

.col-text {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 24px;
}

/* Sin imagen ni formulario (ej. "Barras"/"Características" a modo de franja
   completa, sin columna de medios): el texto ocupa todo el ancho. */
.inner-texto-image.sin-media {
    display: block;
}

.inner-texto-image.sin-media .col-text {
    width: 100%;
}

.inner-texto-image.sin-media .col-image {
    display: none;
}

.col-image {
    width: 50%;
    position: relative;
}

.image-texto-image img {
    min-height: 495px;
    object-fit: cover;
}

/* ── Tipo "Formulario" (alternativa a la imagen) ─────────────── */
.si-form {
    width: 100%;
}

.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;
}

.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;
    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;
    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--extra--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);
}

/* Sobre fondo gris claro, la tarjeta e inputs pasan a white-03 para no
   confundirse con el fondo de la sección (mismo criterio que en Formulario). */
.block-texto-image.fondo-white-02 .si-form-card,
.block-texto-image.fondo-white-02 .si-form-card input[type="text"],
.block-texto-image.fondo-white-02 .si-form-card input[type="email"],
.block-texto-image.fondo-white-02 .si-form-card input[type="tel"],
.block-texto-image.fondo-white-02 .si-form-card select,
.block-texto-image.fondo-white-02 .si-form-card textarea {
    background: var(--wp--preset--color--white-03);
}

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

/* ── Tipo "Carrusel de textos" (alternativa a la imagen) ─────── */
/* Lista vertical que sube línea a línea (script.js) y resalta la central:
   apagadas al 32 %, la activa nítida + flecha recta (la de 16px del tema). Caja clara con la misma
   lógica que las tarjetas (blanca sobre white-04, white-03 sobre white-02,
   blanca translúcida sobre negro/azul). Bordes superior/inferior
   desvanecidos con mask-image. Sin JS (o en el editor antes de iniciarse)
   la lista queda centrada en vertical con la primera línea activa. */
.texto-image-carrusel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 495px;
    overflow: hidden;
    border-radius: var(--wp--custom--radius--lg);
    background: var(--wp--preset--color--white);
    box-shadow: var(--shadow-card-soft);
    color: var(--wp--preset--color--black);
}

.block-texto-image.fondo-white-02 .texto-image-carrusel {
    background: var(--wp--preset--color--white-03);
}

.block-texto-image.fondo-black .texto-image-carrusel,
.block-texto-image.fondo-main-blue .texto-image-carrusel {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    color: var(--wp--preset--color--white);
}

.texto-image-carrusel-track {
    margin: 0;
    padding: 0 48px;
    list-style: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
}

/* Con JS: la pista pasa a absoluta y se desplaza con translateY para
   centrar la línea activa. La máscara se queda en la caja (no en la pista)
   para que el degradado no se mueva con ella. */
.texto-image-carrusel.is-ready {
    touch-action: pan-x; /* el arrastre vertical lo gestiona script.js */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 76%, transparent 100%);
}

.texto-image-carrusel.is-ready .texto-image-carrusel-track {
    will-change: transform;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    -webkit-mask-image: none;
    mask-image: none;
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.texto-image-carrusel.is-ready {
    cursor: grab;
    user-select: none;
}

.texto-image-carrusel.is-dragging,
.texto-image-carrusel.is-dragging .texto-image-carrusel-link {
    cursor: grabbing;
}

.texto-image-carrusel.is-ready .texto-image-carrusel-track.no-transition {
    transition: none;
}

.texto-image-carrusel-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 24px;
    padding: 6px 0;
    color: inherit;
    text-decoration: none;
    font-family: 'Space Grotesk', sans-serif;
    font-size: var(--wp--preset--font-size-h4);
    line-height: var(--wp--preset--line-height-h4);
    font-weight: var(--wp--custom--weight-400);
    opacity: 0.32;
    transition: opacity 0.4s ease, color 0.4s ease;
}

.texto-image-carrusel-flecha {
    flex-shrink: 0;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.texto-image-carrusel-item.is-active .texto-image-carrusel-link {
    opacity: 1;
}

/* Sobre fondos claros, la línea activa (texto + flecha) pasa a azul marca;
   en negro/azul se queda en blanco. */
.block-texto-image.fondo-white-04 .texto-image-carrusel-item.is-active .texto-image-carrusel-link,
.block-texto-image.fondo-white-02 .texto-image-carrusel-item.is-active .texto-image-carrusel-link {
    color: var(--wp--preset--color--main-blue);
}

.texto-image-carrusel-item.is-active .texto-image-carrusel-flecha {
    opacity: 1;
    transform: translateX(0);
}

a.texto-image-carrusel-link:focus-visible {
    outline: 2px solid var(--wp--preset--color--main-blue);
    outline-offset: 4px;
    border-radius: var(--wp--custom--radius--xs);
}

.block-texto-image.fondo-black a.texto-image-carrusel-link:focus-visible,
.block-texto-image.fondo-main-blue a.texto-image-carrusel-link:focus-visible {
    outline-color: var(--wp--preset--color--white);
}

/* Movimiento reducido: sin avance automático (script.js no lo arranca); la
   lista se recorre con scroll propio dentro de la caja. */
@media (prefers-reduced-motion: reduce) {
    .texto-image-carrusel {
        justify-content: flex-start;
        overflow-y: auto;
    }

    .texto-image-carrusel-track {
        padding-block: 96px;
    }
}

.texto-image-eyebrow {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
    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;
    margin: 18px 0px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

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

.texto-image-heading {
    margin: 0;
    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);
    text-wrap: balance;
}

.texto-image-subtitulo {
    margin: 0;
    font-size: var(--wp--preset--font-size-h5);
    font-weight: var(--wp--custom--weight-500);
    line-height: var(--wp--preset--line-height-h5);
    color: var(--wp--preset--color--main-blue);
    text-wrap: balance;
}

.texto-image-description {
    margin: 0;
    font-size: var(--wp--preset--font-size--medium);
    font-weight: var(--wp--custom--weight-400);
    line-height: var(--wp--preset--line-height--medium);
    color: var(--wp--preset--color--black);
    text-wrap: balance;
}

.texto-image-list {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.texto-image-list-item {
    display: flex;
    align-items: baseline;
    column-gap: 10px;
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-400);
    color: var(--wp--preset--color--black);
}

.texto-image-list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--white-02);
    color: var(--wp--preset--color--black);
}

.texto-image-list-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}


.texto-image-list-icon.is-check svg {
    width: 14px;
    height: 14px;
}

.texto-image-list-texto {
    display: flex;
    flex-direction: column;
    row-gap: 4px;
    min-width: 0;
    padding-top: 4px;
}

.texto-image-list-titulo {
    margin: 0;
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--preset--line-height--medium);
    font-weight: var(--wp--custom--weight-400);
    color: var(--wp--preset--color--black);
}

.texto-image-list-descripcion {
    margin: 0;
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--preset--line-height--small);
    font-weight: var(--wp--custom--weight-400);
    color: var(--wp--preset--color--text-black);
}

/* ── Tipo de contenido inferior: Barras ──────────────────────── */
.texto-image-barras {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin-bottom: 12px;
    width: 100%;
}

.texto-image-barra-item {
    display: flex;
    width: 100%;
    height: 50px;
    padding: 4px 15px;
    justify-content: space-between;
    align-items: center;
    border-radius: var(--wp--custom--radius--full) 999px;
    background: var(--wp--preset--color--main-blue);
    color: var(--wp--preset--color--white);
    overflow: hidden;

}

.texto-image-barra-valor {
    display: flex;
    align-items: center;
}

/* Variante con relleno animado (campo "Porcentaje" relleno): mismo aspecto
   que la barra normal (píldora, título a la izquierda, valor a la derecha).
   El texto cambia de color según lo que tenga debajo: azul sobre la parte
   sin rellenar (clara), blanco sobre la parte rellenada (azul) — dos copias
   del mismo texto superpuestas, la de arriba recortada al ancho del relleno. */
.texto-image-barra-item.has-fill {
    position: relative;
    background: var(--wp--preset--color--white-02);
}

.block-texto-image.fondo-white-02 .texto-image-barra-item.has-fill {
    background: var(--wp--preset--color--white-03);
}

.block-texto-image.fondo-black .texto-image-barra-item.has-fill,
.block-texto-image.fondo-main-blue .texto-image-barra-item.has-fill {
    background: rgba(255, 255, 255, 0.15);
}

.texto-image-barra-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--wp--preset--color--main-blue);
    transition: width 1.1s ease;
}

.texto-image-barra-content {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 4px 15px;
    justify-content: space-between;
    align-items: center;
}

.texto-image-barra-content--base {
    position: relative;
    z-index: 1;
    color: var(--wp--preset--color--main-blue);
}

.texto-image-barra-content--top {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    color: var(--wp--preset--color--white);
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s ease;
}

.texto-image-barra-label {
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--preset--line-height--medium);
    font-weight: var(--wp--custom--weight-400);
}

.texto-image-barra-valor {
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--preset--line-height--medium);
    font-weight: var(--wp--custom--weight-500);
}

.texto-image-barras-leyenda {
    display: flex;
    flex-direction: column;
    row-gap: 2px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--wp--preset--font-size--extra--small);
    line-height: 1.5;
    color: var(--wp--preset--color--text-secondary);
}

/* ── Tipo de contenido inferior: Galería ──────────────────────── */
.texto-image-galeria {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 30px;
    row-gap: 16px;
    margin-top: 12px;
    width: 100%;
}

.texto-image-galeria-item {
    border-radius: unset;
    height: 75px;
    max-width: 100%;
    object-fit: contain;
}

/* Layout del grupo (fila / columna+ancho completo): centralizado en
   assets/css/base.css ("Grupos de 2 botones"). */
.texto-image-botones {
    margin-top: 12px;
}

/* .texto-image-boton / --secundario, sus variantes sobre fondo oscuro y
   el paso a columna / ancho completo del grupo: todo en "Botón
   unificado" (assets/css/base.css). Aquí solo el margen del contenedor. */

/* Sobre fondo negro o azul, el texto y los "chips" que antes contrastaban
   sobre blanco pasan a sus variantes claras (mismo criterio que .block-caracteristicas) */
.block-texto-image.fondo-black .texto-image-heading,
.block-texto-image.fondo-black .texto-image-list-titulo,
.block-texto-image.fondo-main-blue .texto-image-heading,
.block-texto-image.fondo-main-blue .texto-image-subtitulo,
.block-texto-image.fondo-main-blue .texto-image-list-titulo {
    color: var(--wp--preset--color--white);
}

.block-texto-image.fondo-black .texto-image-subtitulo {
    color: var(--wp--preset--color--electric-blue);
}

.block-texto-image.fondo-black .texto-image-description,
.block-texto-image.fondo-black .texto-image-list-descripcion,
.block-texto-image.fondo-black .texto-image-barras-leyenda,
.block-texto-image.fondo-main-blue .texto-image-description,
.block-texto-image.fondo-main-blue .texto-image-list-descripcion,
.block-texto-image.fondo-main-blue .texto-image-barras-leyenda {
    color: var(--wp--preset--color--white);
}

.block-texto-image.fondo-white-02 .texto-image-list-icon {
    background-color: var(--wp--preset--color--white);
}

.p-140 {
    padding-top: 118px;
}

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

    .col-image {
        max-width: 700px;
    }

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

    .texto-image-carrusel {
        height: 604px;
    }
}

@media (max-width: 1440px) {

    .col-text {
        max-width: 785px;
    }
}

@media (min-width: 1920px) {
    .col-text {
        max-width: 650px;
    }
}

/* 1230px, no 920px: el mismo punto en el que el menú cambia a hamburguesa,
   para que todos los bloques de dos columnas pasen a móvil a la vez que la
   navegación (antes lo hacían 300px antes, dejando una franja donde el menú
   ya era de escritorio pero el contenido ya estaba apilado). El gutter lateral
   sigue el token compartido y baja a x-mobile en 920px (ver más abajo); aquí
   solo cambia el eje vertical. */
@media (max-width: 1230px) {
    .block-texto-image {
        padding-block: 50px;
    }

    .inner-texto-image,
    .block-texto-image.is-reverse .inner-texto-image {
        flex-direction: column-reverse;
        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%;
    }

    /* Repetido con ".block-texto-image.is-reverse" a la misma especificidad
       (3 clases) que la regla de arriba: escritos como ".image_no"/".image_bottom"
       a secas (1 clase) quedaban por debajo de esa regla, así que con
       "Invertir orden" activo la posición de imagen elegida en móvil no
       tenía ningún efecto — siempre se quedaba en column-reverse. */
    .inner-texto-image.image_no .col-image,
    .block-texto-image.is-reverse .inner-texto-image.image_no .col-image {
        display: none;
    }

    .inner-texto-image.image_bottom,
    .block-texto-image.is-reverse .inner-texto-image.image_bottom {
        flex-direction: column;
    }

    /* Apilado: texto e imagen ocupan todo el ancho del inner (topes de
       785px/650px de escritorio anulados) para que sus bordes coincidan con
       el padding del header. */
    .col-text,
    .col-image {
        width: 100%;
        max-width: 100%;
    }

    .image-texto-image img {
        min-height: 349px;
    }

    .texto-image-carrusel {
        height: 380px;
    }

    .texto-image-carrusel-link {
        font-size: var(--wp--preset--font-size-h5);
        line-height: 1.4;
    }

    .texto-image-heading {
        font-size: var(--wp--preset--font-size-h4);
        line-height: var(--wp--preset--line-height-h4);
    }

    .texto-image-botones {
        margin-top: 0;
        margin-bottom: 12px;
    }

    .texto-image-barra-item {
        height: 40px;
    }

    .texto-image-barra-label {
        max-width: 230px;
        font-size: var(--wp--preset--font-size--small);
        line-height: var(--wp--preset--line-height--small);
    }

    .texto-image-barra-valor {
        font-size: var(--wp--preset--font-size--small);
        line-height: var(--wp--preset--line-height--small);
    }

    /* Columna + botón a ancho completo: centralizado en
       assets/css/base.css ("Grupos de 2 botones"). */
}

/* 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-texto-image {
        padding-inline: var(--wp--custom--section--x-mobile);
    }

    /* Igual que en el bloque "formulario": la sombra de la tarjeta se reduce
       al bajar el gutter a 20px, para que no la recorte
       html body { overflow-x: hidden }. Mismo aspecto, menor escala. */
    .si-form-card,
    .texto-image-carrusel {
        box-shadow: var(--shadow-card-sm);
    }

    .texto-image-carrusel-track {
        padding-inline: 24px;
    }
}

/* 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;
    }
}

/* 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;
    }
}