.block-incluye-empresas {
    display: flex;
    justify-content: center;
    padding: var(--wp--custom--section--y) var(--wp--custom--section--x);
}

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

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

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

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

/* El titular y el título de cada tarjeta son azul fijo (acento): sobre negro
   pasan a un azul más claro para mantener contraste, sobre el propio azul de
   fondo pasan a blanco (si no, quedarían invisibles). */
.block-incluye-empresas.fondo-black .incluye-empresas-heading,
.block-incluye-empresas.fondo-black .incluye-empresas-titulo {
    color: var(--wp--preset--color--electric--blue);
}

.block-incluye-empresas.fondo-main-blue .incluye-empresas-heading,
.block-incluye-empresas.fondo-main-blue .incluye-empresas-titulo {
    color: var(--wp--preset--color--white);
}

/* Los puntos de la lista y las descripciones son texto negro fijo, ilegibles
   sobre negro/azul */
.block-incluye-empresas.fondo-black .incluye-empresas-check-item,
.block-incluye-empresas.fondo-black .incluye-empresas-description,
.block-incluye-empresas.fondo-black .incluye-empresas-item-descripcion,
.block-incluye-empresas.fondo-main-blue .incluye-empresas-check-item,
.block-incluye-empresas.fondo-main-blue .incluye-empresas-description,
.block-incluye-empresas.fondo-main-blue .incluye-empresas-item-descripcion {
    color: var(--wp--preset--color--white);
}

/* 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-incluye-empresas.fondo-white-02 .incluye-empresas-check-icon {
    background-color: var(--wp--preset--color--white);
}

.inner-incluye-empresas {
    display: flex;
    flex-direction: column;
    row-gap: 64px;
    width: 100%;
    max-width: 1140px;
    align-items: center;
}

.incluye-empresas-header {
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    row-gap: 20px;
    max-width: 860px;
    padding: 0 20px;
}

.incluye-empresas-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;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

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

.incluye-empresas-heading {
    margin: 0;
    text-align: center;
    color: var(--wp--preset--color--black);
    font-size: var(--wp--preset--font-size-h2);
    line-height: var(--wp--preset--line-height-h2);
    font-weight: var(--wp--custom--weight-500);
}

.incluye-empresas-description {
    margin: 0;
    text-align: center;
    text-wrap: balance;
    /* Fallback para navegadores sin soporte de text-wrap */
    overflow-wrap: break-word;
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--preset--line-height--medium);
    color: var(--wp--preset--color--text-black);
}

.incluye-empresas-list {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    align-items: flex-start;
}

/* Grid en vez de flex + row-reverse: con flex, el ancho de la columna de foto
   (flex-basis en %) podía calcularse de forma distinta según la fila fuera
   normal o invertida, dejando columnas de anchos distintos entre filas. Con
   grid, la foto siempre usa la misma columna de ancho fijo (28%) en las 3
   filas. El texto usa una columna "auto" (se ajusta a su propio contenido)
   en vez de estirarse a rellenar todo el espacio sobrante — si no, cuando el
   texto es corto (p. ej. "Acceso a psicólogos") queda un hueco enorme y
   vacío antes de llegar a la foto. `justify-content` empuja el conjunto
   texto+foto hacia el lado que corresponde en cada fila. */
.incluye-empresas-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    column-gap: 64px;
}

.incluye-empresas-item .incluye-empresas-media {
    width: 36%;
}

.incluye-empresas-item.is-reverse {
    flex-direction: row-reverse;
}

.incluye-empresas-media {
    aspect-ratio: 4 / 3;
    border-radius: var(--wp--custom--radius--xl);
    overflow: hidden;
}

/* Línea animada del zigzag (solo Tipo 1) — bordea las fotos por fuera y se
   dibuja progresivamente según el usuario baja por la sección (ver script.js). */
.incluye-empresas-line {
    display: none;
    position: absolute;
    top: 0;
    left: -40px;
    z-index: 0;
    overflow: visible;
    pointer-events: none;
}

.incluye-empresas-line-base,
.incluye-empresas-line-progress {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
}

.incluye-empresas-line-base {
    stroke: var(--wp--preset--color--grey-05);
}

.incluye-empresas-line-progress {
    stroke: var(--wp--preset--color--main-blue);
}

.incluye-empresas-line-dot {
    fill: var(--wp--preset--color--main-blue);
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Sobre fondos oscuros, el trazo base gris claro pierde contraste */
.block-incluye-empresas.fondo-black .incluye-empresas-line-base,
.block-incluye-empresas.fondo-main-blue .incluye-empresas-line-base {
    stroke: rgba(255, 255, 255, 0.25);
}

.block-incluye-empresas.fondo-main-blue .incluye-empresas-line-progress,
.block-incluye-empresas.fondo-main-blue .incluye-empresas-line-dot {
    stroke: var(--wp--preset--color--white);
    fill: var(--wp--preset--color--white);
}

.incluye-empresas-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.incluye-empresas-item:hover .incluye-empresas-media img {
    transform: scale(1.06);
}

.incluye-empresas-texto {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    max-width: 420px;
}

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

.incluye-empresas-item-descripcion {
    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--text-black);
}

.incluye-empresas-checks {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.incluye-empresas-check-item {
    display: flex;
    align-items: center;
    column-gap: 10px;
    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);
}

.incluye-empresas-check-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);
}

/* Relleno/tipografía/hover desde "Botón unificado" (assets/css/base.css).
   Aquí solo su colocación dentro de la tarjeta y la flecha. */
.incluye-empresas-boton {
    align-self: flex-start;
    margin-top: 8px;
}

.incluye-empresas-boton-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;
}

.incluye-empresas-boton:hover .incluye-empresas-boton-arrow {
    transform: translateX(4px);
}

/* Tipo 2 — en columnas: las 3 tarjetas se ponen en fila, cada una con la foto
   arriba y el texto debajo (sin zigzag ni botón). */
.block-incluye-empresas--type_2 .incluye-empresas-list {
    flex-direction: row;
    row-gap: 0;
    column-gap: 72px;
}

.block-incluye-empresas--type_2 .incluye-empresas-item,
.block-incluye-empresas--type_2 .incluye-empresas-item.is-reverse {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

/* El marco de cada tarjeta (Tipo 2, escritorio) ya no es un border CSS
   cerrado — vuelve a ser el corchete SVG abierto (ver script.js,
   bracketBottomSegment), ahora dimensionado a la tarjeta entera en vez de
   solo a la foto, y fijo (sin animación de scroll). */

.block-incluye-empresas--type_2 .incluye-empresas-media {
    width: 100%;
    flex-basis: auto;
}

.block-incluye-empresas--type_2 .incluye-empresas-item .incluye-empresas-boton {
    display: none;
}

.incluye-empresas-boton-final-wrap {
    display: flex;
    justify-content: center;
}

.incluye-empresas-boton-final {
    align-self: center;
}

@media (max-width: 920px) {
    .block-incluye-empresas {
        padding: var(--wp--custom--section--y-mobile) var(--wp--custom--section--x-mobile);
    }

    .inner-incluye-empresas {
        row-gap: 40px;
    }

    .incluye-empresas-list {
        row-gap: 48px;
        width: 90%;
        align-self: center;
    }

    .incluye-empresas-check-item {
        font-size: var(--wp--preset--font-size--small);
        line-height: var(--wp--preset--line-height--small);
    }

    /* En móvil el zigzag no tiene efecto: la foto siempre va arriba y el
       texto debajo, en una sola columna — "column" (no "column-reverse")
       cancela el row-reverse de las filas invertidas, así que el orden
       visual vuelve a ser el del HTML (foto primero) sea o no is-reverse. */
    .incluye-empresas-item,
    .incluye-empresas-item.is-reverse {
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        row-gap: 24px;
    }

    .incluye-empresas-item .incluye-empresas-media,
    .incluye-empresas-item.is-reverse .incluye-empresas-media {
        width: 100%;
    }

    .incluye-empresas-texto {
        max-width: none;
    }

    .incluye-empresas-media {
        aspect-ratio: 4 / 3;
    }

    .incluye-empresas-heading {
        font-size: var(--wp--preset--font-size-h4);
    }

    .block-incluye-empresas--type_2 .incluye-empresas-list {
        flex-direction: column;
        column-gap: 0;
        row-gap: 48px;
    }

    .block-incluye-empresas--type_2 .incluye-empresas-item,
    .block-incluye-empresas--type_2 .incluye-empresas-item.is-reverse {
        gap: 24px;
    }
}