.block-caracteristicas {
    display: flex;
    justify-content: center;
    /* Mismo padding que .block-texto-image, no el genérico
       var(--wp--custom--section--y) que usan otros bloques — así la posición
       y el aire alrededor coinciden exactamente con texto-imagen. El gutter
       lateral usa el token compartido var(--wp--custom--section--x). */
    padding: 70px var(--wp--custom--section--x);
}

/* Color de fondo (campo ACF "fondo") — 4 colores principales del tema */
.block-caracteristicas.fondo-white-04 {
    background-color: var(--wp--preset--color--white-04);
}

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

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

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

/* Sobre fondo negro o azul, el texto y los "chips" que antes contrastaban
   sobre blanco pasan a sus variantes claras (contraste relativo a la
   sección, no solo al propio elemento) */
.block-caracteristicas.fondo-black .caracteristicas-heading,
.block-caracteristicas.fondo-black .caracteristica-titulo,
.block-caracteristicas.fondo-main-blue .caracteristicas-heading,
.block-caracteristicas.fondo-main-blue .caracteristica-titulo {
    color: var(--wp--preset--color--white);
}

.block-caracteristicas.fondo-black .caracteristicas-description,
.block-caracteristicas.fondo-black .caracteristica-descripcion,
.block-caracteristicas.fondo-main-blue .caracteristicas-description,
.block-caracteristicas.fondo-main-blue .caracteristica-descripcion {
    color: var(--wp--preset--color--grey-05);
}

/* Sobre fondo gris claro, el icono (fondo white-02 por defecto) pasaría
   desapercibido si el fondo de la sección es ese mismo gris */
.block-caracteristicas.fondo-white-02 .caracteristica-icon {
    background-color: var(--wp--preset--color--white);
}

/* Flex + justify-content:space-between (no grid) a propósito: mismo mecanismo
   de layout que .inner-texto-image de texto-imagen. Con grid, el tope de
   ancho de .caracteristicas-texto en pantallas anchas (más abajo) se queda
   como hueco muerto dentro de su columna; con flex, ese hueco se reparte
   igual que en texto-imagen — así el espacio visible entre columnas coincide
   en todos los anchos de pantalla, no solo en los intermedios. */
.inner-caracteristicas {
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 60px;
    width: 100%;
    max-width: 1320px;
}

/* Sin imagen lateral: el listado se centra en la sección en vez de ir a dos columnas */
.block-caracteristicas.no-image .inner-caracteristicas {
    max-width: 760px;
}

.block-caracteristicas.no-image .caracteristicas-texto {
    width: 100%;
}

/* Invertir orden: intercambia las dos columnas. En la variante estándar la
   imagen pasa a la izquierda; en "Listado lateral" el listado pasa a la
   izquierda y el texto a la derecha (.caracteristicas-media--listado también
   lleva .caracteristicas-media, así que estas reglas ya lo cubren). */
.block-caracteristicas.is-reverse .caracteristicas-texto {
    order: 2;
}

.block-caracteristicas.is-reverse .caracteristicas-media {
    order: 1;
}

/* Variante "Listado lateral": el listado ocupa la columna de la imagen. Mismo
   mecanismo de dos columnas que la variante estándar con imagen (el layout de
   .inner-caracteristicas ya es flex + space-between por defecto). */
.block-caracteristicas.is-listado-lateral .caracteristicas-media--listado {
    display: flex;
    align-items: center;
    width: 50%;
}

.block-caracteristicas.is-listado-lateral .caracteristicas-media--listado .caracteristicas-list {
    margin: 0;
}

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

/* Mismo tope que .col-text de texto-imagen, para que la columna de texto no
   se ensanche más de la cuenta y el hueco frente a la imagen quede igual.
   Los mismos dos breakpoints que .col-text (≤1440px y ≥1920px, sin tope en
   el rango intermedio) — no es un error, texto-imagen tiene exactamente el
   mismo salto y hay que igualarlo también ahí para que el hueco entre
   columnas no crezca solo en uno de los dos componentes en monitores anchos. */
@media (max-width: 1440px) {
    .caracteristicas-texto {
        max-width: 785px;
    }
}

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

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

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

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

.caracteristicas-description {
    margin: 0;
    text-wrap: balance;
    /* Fallback for browsers that do not support text-wrap */
    overflow-wrap: break-word;
}

.caracteristicas-list {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.caracteristica-item {
    display: flex;
    align-items: flex-start;
    column-gap: 16px;
}

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

.caracteristica-icon img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* Variante "check" — mismo círculo con marca ya usado en .incluye-empresas-check-icon */
.caracteristica-icon.is-check {
    color: var(--wp--preset--color--main-blue);
}

.caracteristica-icon.is-check svg {
    width: 24px;
    height: 24px;
}

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

.caracteristica-titulo {
    margin: 0;
    font-size: var(--wp--preset--font-size-h6);
    line-height: var(--wp--preset--line-height-h6);
    font-weight: var(--wp--custom--weight-700);
    color: var(--wp--preset--color--black);
}

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

.caracteristicas-media {
    width: 50%;
    position: relative;
}

/* Tamaño de imagen igualado a .image-texto-image de texto-imagen: recorte
   "cover" a una altura fija, no la altura natural de la imagen subida. Sin
   border-radius, también para igualar a .image-texto-image (que no lleva). */
.caracteristicas-media img {
    display: block;
    width: 100%;
    min-height: 495px;
    object-fit: cover;
}

/* Mismo salto de ancho que .inner-texto-image en monitores ≥1441px, para que
   ambos componentes de dos columnas midan exactamente lo mismo */
@media (min-width: 1441px) {
    .inner-caracteristicas {
        max-width: var(--wp--custom--layout--content-size);
    }

    .caracteristicas-media {
        max-width: 700px;
    }

    .caracteristicas-media img {
        height: 604px;
    }
}

/* ── Galería y botones (variante "Listado lateral", bajo la descripción) ──
   Mismo patrón visual que en texto-imagen. */
.caracteristicas-galeria {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 30px;
    row-gap: 16px;
    margin: 12px 0 0;
    width: 100%;
}

.caracteristicas-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"). */
.caracteristicas-botones {
    margin-top: 12px;
}

/* .caracteristicas-boton / --secundario y sus variantes sobre fondo
   oscuro: estilo desde "Botón unificado" (assets/css/base.css). Aquí
   solo el contenedor .caracteristicas-botones (arriba). */

/* 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, en cambio, sigue el
   token compartido y baja a x-mobile en 920px como el resto de secciones
   (ver @media max-width:920px más abajo); aquí solo cambia el eje vertical. */
@media (max-width: 1230px) {
    .block-caracteristicas {
        padding-block: 50px;
    }

    .inner-caracteristicas,
    .block-caracteristicas.no-image .inner-caracteristicas {
        flex-direction: column;
        row-gap: 32px;
        max-width: 100%;
    }

    .caracteristicas-list {
        row-gap: 12px;
    }

    /* Apilado: la columna de texto pierde el tope de 785px/650px de escritorio
       y ocupa todo el ancho del inner, para que sus bordes coincidan con el
       padding del header (el inner ya está a max-width:100% arriba). */
    .caracteristicas-texto,
    .caracteristicas-media {
        width: 100%;
        max-width: 100%;
    }

    .caracteristica-icon {
        width: 32px;
        height: 32px;
        margin-top: 5px;
        align-self: start;
    }

    .caracteristica-icon.is-check svg {
        width: 20px;
        height: 20px;
    }

    .caracteristica-titulo {
        font-size: var(--wp--preset--font-size--medium);
        line-height: var(--wp--preset--line-height--medium);
    }

    .block-caracteristicas.has-image .caracteristicas-media,
    .block-caracteristicas.is-reverse .caracteristicas-media {
        order: 2;
    }

    .block-caracteristicas.is-reverse .caracteristicas-texto {
        order: 1;
    }

    /* Especificidad mayor que la regla de dos columnas de arriba: sin esto el
       50% de escritorio ganaría en móvil. */
    .block-caracteristicas.is-listado-lateral .caracteristicas-media--listado {
        width: 100%;
    }

    .caracteristicas-media img {
        min-height: 349px;
    }

    /* Columna + botón a ancho completo: centralizado en
       assets/css/base.css ("Grupos de 2 botones"). Aquí solo el margen. */
    .caracteristicas-botones {
        margin-top: 0;
    }

    /* "Posición de la imagen en móvil" (campo ACF "mobile-image"), igual que
       texto-imagen / formulario. Por defecto (image_bottom) la columna de
       media queda debajo del texto — comportamiento heredado, no hace falta
       regla. "image_top" la sube por encima; "image_no" la oculta solo en
       móvil. Van después de las reglas de order de arriba para ganar el
       desempate por orden de fuente. */
    .inner-caracteristicas.image_top .caracteristicas-media {
        order: 1;
    }

    .inner-caracteristicas.image_top .caracteristicas-texto {
        order: 2;
    }

    .inner-caracteristicas.image_no .caracteristicas-media {
        display: none;
    }
}

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