.block-servicios-lista {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 46px;
    padding: var(--wp--custom--section--y) var(--wp--custom--section--x);
}

/* Campo "Fondo" — 4 colores principales del tema */
.block-servicios-lista.fondo-white-04 {
    background-color: var(--wp--preset--color--white-04);
}

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

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

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

/* Contraste sobre fondo negro/azul: el texto por defecto (oscuro, heredado)
   pasa a blanco. */
.block-servicios-lista.fondo-black .servicios-lista-header h2,
.block-servicios-lista.fondo-black .servicios-lista-header p,
.block-servicios-lista.fondo-black .servicio-lista-titulo,
.block-servicios-lista.fondo-black .servicio-lista-descripcion,
.block-servicios-lista.fondo-main-blue .servicios-lista-header h2,
.block-servicios-lista.fondo-main-blue .servicios-lista-header p,
.block-servicios-lista.fondo-main-blue .servicio-lista-titulo,
.block-servicios-lista.fondo-main-blue .servicio-lista-descripcion {
    color: var(--wp--preset--color--white);
}

/* El hover normal invierte a fondo azul + texto blanco (ver más abajo), lo
   que sobre una sección ya azul dejaría la tarjeta invisible al pasar el
   ratón — en fondo-main-blue se invierte al revés: fondo blanco + texto azul. */
.block-servicios-lista.fondo-main-blue .servicio-lista-item.has-link:hover {
    background-color: var(--wp--preset--color--white);
}

.block-servicios-lista.fondo-main-blue .servicio-lista-item.has-link:hover .servicio-lista-titulo,
.block-servicios-lista.fondo-main-blue .servicio-lista-item.has-link:hover .servicio-lista-descripcion {
    color: var(--wp--preset--color--main-blue);
}

.inner-servicios-lista {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 46px;
    width: 100%;
    max-width: 1200px;
}

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

.servicios-lista-eyebrow {
    display: inline-flex;
    align-items: center;
    align-self: 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;
}

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

.servicios-lista-header h2 {
    margin: 0;
}

.servicios-lista-header p {
    margin: 0;
}

.grid-servicios-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    width: 100%;
}

/* Campo "Columnas" = 2 (solo tiene sentido/efecto en Tipo 2). Sin media query
   propia a propósito: al tener la misma especificidad que .grid-servicios-lista
   y venir después en el archivo, esta regla gana en escritorio; los @media de
   1024px/768px de más abajo (misma especificidad, pero declarados después
   todavía) siguen ganando en pantallas estrechas y colapsando a 2/1 columna
   igual que la variante de 3 columnas, sin tener que repetir los breakpoints. */
.grid-servicios-lista--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.servicio-lista-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 24px 18px;
    border-radius: var(--wp--custom--radius--lg);
    background-color: var(--wp--preset--color--white);
    transition: background-color 0.25s ease;
    box-shadow: var(--shadow-card);
}

/* Sobre fondo gris claro, la tarjeta blanca pasa a white-03 para no
   confundirse con el fondo de la sección. Sobre blanco claro (white-04) se
   mantiene en blanco puro (mismo criterio que texto-imagen/slider-cards). */
.block-servicios-lista.fondo-white-02 .servicio-lista-item {
    background-color: var(--wp--preset--color--white-03);
}

.servicio-lista-item.has-link {
    cursor: pointer;
}

.servicio-lista-full-link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.servicio-lista-media {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--wp--custom--radius--md);
    overflow: hidden;
    background-color: #3238c417;
    display: flex;
    align-items: center;
    justify-content: center;
}

.servicio-lista-media.is-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
}

.servicio-lista-media.is-icono {
    border-radius: 50%;
}

.servicio-lista-media.is-icono img {
    width: auto;
    height: auto;
    max-width: 50%;
    max-height: 50%;
    object-fit: contain;
    display: block;
}

.servicio-lista-texto {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

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

.servicio-lista-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);
    text-wrap: balance;
}

/* Hover — solo tarjetas con enlace, invierte a fondo azul + texto blanco
   (mismo lenguaje que el estado "activo" del acordeón ya usado en el sitio). */
.servicio-lista-item.has-link:hover {
    background-color: var(--wp--preset--color--main-blue);
}

.servicio-lista-item.has-link:hover .servicio-lista-titulo,
.servicio-lista-item.has-link:hover .servicio-lista-descripcion {
    color: var(--wp--preset--color--white);
}

.servicio-lista-item.has-link:hover .servicio-lista-media {
    background-color: var(--wp--preset--color--white);
}


.servicios-lista-cta {
    display: flex;
    justify-content: center;
}

/* .servicios-lista-cta-button: estilo desde "Botón unificado"
   (assets/css/base.css); antes no tenía ni :hover. */

/* Tipo 2 — en columna: icono/foto arriba centrado, texto debajo centrado.
   Mismos colores que Tipo 1, solo cambia la disposición. */
.block-servicios-lista--type_2 .servicio-lista-item {
    flex-direction: column;
    text-align: center;
    padding: 24px 18px;
    gap: 24px;
}

.block-servicios-lista--type_2 .servicio-lista-media {
    width: 64px;
    height: 64px;
}

.block-servicios-lista--type_2 .servicio-lista-texto {
    align-items: center;
}

/* Tipo 3 — dos columnas: texto a la izquierda, tarjetas apiladas a la derecha
   (mismo patrón de layout 50/50 que .inner-texto-image en el bloque texto-imagen). */
.block-servicios-lista--type_3 .inner-servicios-lista {
    display: grid;
    /* minmax(0, 1fr) en vez de 1fr a secas: por defecto cada columna de grid
       tiene un mínimo implícito = min-content de su contenido, así que la
       tarjeta con el texto más largo ("Aumento del absentismo y bajas
       laborales") empujaba su columna por encima del 50% real, robándole
       espacio a la de texto. minmax(0, 1fr) fuerza el reparto 50/50 exacto,
       igual que el width:50% explícito de .col-text/.col-image en
       texto-imagen. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 60px;
    row-gap: 46px;
    max-width: 1320px;
}

.block-servicios-lista--type_3 .servicios-lista-header {
    max-width: none;
    text-align: left;
    align-items: flex-start;
    padding: 0;
}

.block-servicios-lista--type_3 .servicios-lista-eyebrow {
    align-self: flex-start;
}

/* Invertir orden (campo ACF "invertir_orden"): tarjetas a la izquierda, texto
   a la derecha en escritorio. Basta con "order" sobre los hijos del grid: el
   grid coloca cada item en la celda que le toca según su order. */
.block-servicios-lista--type_3.is-reverse .grid-servicios-lista {
    order: 1;
}

.block-servicios-lista--type_3.is-reverse .servicios-lista-header {
    order: 2;
}

.block-servicios-lista--type_3.is-reverse .servicios-lista-cta {
    order: 3;
}

/* Mismo padding de sección que .block-texto-image / .block-caracteristicas
   (70px de alto + gutter lateral var(--wp--custom--section--x)) en vez del
   genérico var(--wp--custom--section--y) (100px) que usa el resto de tipos de
   este bloque — para que el aire alrededor coincida con el resto de bloques de
   dos columnas. Solo Tipo 3: Tipo 1/2 ya se usan en otras páginas y no se
   tocan. */
.block-servicios-lista--type_3 {
    padding: 70px var(--wp--custom--section--x);
}

/* Mismo tope que .col-text de texto-imagen / .caracteristicas-texto, para que
   la columna de texto no se ensanche más de la cuenta frente a la de tarjetas.
   texto-imagen aplica este tope en dos tramos separados (≤1440px y ≥1920px,
   dejando 1441-1919px sin tope) — se replica igual, no es un descuido. */
@media (max-width: 1440px) {
    .block-servicios-lista--type_3 .servicios-lista-header {
        max-width: 785px;
    }
}

@media (min-width: 1920px) {
    .block-servicios-lista--type_3 .servicios-lista-header {
        max-width: 650px;
    }
}

/* Mismo tope que .col-image de texto-imagen (700px) a partir de 1441px, para
   que el efecto visual sea idéntico: en vez de que las dos columnas sigan
   repartiéndose 50/50 (lo que en pantallas anchas dejaba un gap fijo de solo
   60px, muy distinto al de texto-imagen), la columna de tarjetas deja de
   crecer y se ancla al borde derecho — el espacio sobrante pasa a formar
   parte del hueco entre columnas, igual que hace el "justify-content:
   space-between" de la versión flexbox de texto-imagen. */
@media (min-width: 1441px) {
    .block-servicios-lista--type_3 .grid-servicios-lista {
        max-width: 700px;
        justify-self: end;
    }

    /* Con el orden invertido, las tarjetas van pegadas al borde izquierdo. */
    .block-servicios-lista--type_3.is-reverse .grid-servicios-lista {
        justify-self: start;
    }
}

.block-servicios-lista--type_3 .grid-servicios-lista {
    grid-template-columns: 1fr;
}

.block-servicios-lista--type_3 .servicios-lista-cta {
    grid-column: 1 / -1;
}

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

@media (max-width: 1024px) {
    .grid-servicios-lista {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Exactamente 3 items: con 2 columnas el 3º quedaría solo en su fila.
       Se salta directo a 1 columna (los layouts de 4+ items sí aprovechan
       las 2 columnas de este tramo). */
    .grid-servicios-lista:has(> .servicio-lista-item:nth-child(3):last-child) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 920px) {
    .block-servicios-lista--type_2 .servicio-lista-item {
        gap: 16px;
    }
}

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

    .servicio-lista-texto {
        gap: 8px;
    }

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

/* Tipo 3 (el único de dos columnas de este bloque) pasa a una columna en
   1230px, no en 920px como el resto de tipos — el mismo punto en el que el
   menú cambia a hamburguesa, igual que el resto de la familia de bloques de
   dos columnas (texto-imagen, características, central, formulario...). */
@media (max-width: 1230px) {
    .block-servicios-lista--type_3 .inner-servicios-lista {
        grid-template-columns: 1fr;
        /* 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-servicios-lista--type_3 .servicios-lista-header {
        text-align: center;
        align-items: center;
        /* Sin el tope de 785px/650px de escritorio: el texto ocupa todo el
           ancho del inner al apilar. */
        max-width: 100%;
    }

    /* Solo el eje vertical: el gutter lateral lo da la regla base
       .block-servicios-lista (token var(--wp--custom--section--x)) y baja a
       x-mobile en 920px como el resto de secciones. */
    .block-servicios-lista--type_3 {
        padding-block: 50px;
    }

    /* Al apilar se ignora el orden de escritorio (is-reverse) y manda el campo
       "orden_movil": por defecto texto arriba; "elemento_arriba" sube las
       tarjetas por encima del texto. */
    .block-servicios-lista--type_3.is-reverse .servicios-lista-header,
    .block-servicios-lista--type_3.is-reverse .grid-servicios-lista,
    .block-servicios-lista--type_3.is-reverse .servicios-lista-cta {
        order: 0;
    }

    .block-servicios-lista--type_3.orden-movil--elemento-arriba .grid-servicios-lista {
        order: -1;
    }
}

@media (max-width: 768px) {
    .grid-servicios-lista {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}