/* ============================================================
   Estilo "clasico" (heredado del antiguo bloque destacados-blog v1,
   fusionado aquí como opción del selector "estilo")
   ============================================================ */
.block-destacados {
    padding: 70px var(--wp--custom--section--x);
}

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

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

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

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

.block-destacados .inner-destacados {
    max-width: 879px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: 39px;
}

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

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

.tit-cta-destacados {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.tit-cta-destacados a {
    width: auto;
    text-transform: uppercase;
    position: relative;
    padding: 13px 40px 13px 24px;
}

.tit-cta-destacados a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 10px;
    color: #EEEEEE;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url('./../../assets/img/right.svg');
    mask-image: url('./../../assets/img/right.svg');
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
}

.block-destacados h2 {
    margin: 0 !important;
}

.grid-destacados {
    display: grid;
    grid-template-columns: 48% 52%;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 24px;
    row-gap: 20px;
    text-align: left;
}

.destacado-principal {
    grid-column: 1 / 2;
    grid-row: 1 / 4 !important;
    border-radius: 30px;
    background: radial-gradient(52% 40% at 100% 100%, #3238C4 50%, rgba(255, 255, 255, 0.00) 50.7%), var(--wp--preset--color--white) !important;
    box-shadow: var(--shadow-card);
}

/* Sobre fondo gris claro, la tarjeta destacada (base blanca del degradado)
   pasa a white-03 para no confundirse con el fondo de la sección. Sobre
   blanco claro (white-04) se mantiene en blanco puro. */
.block-destacados.fondo-white-02 .destacado-principal {
    background: radial-gradient(52% 40% at 100% 100%, #3238C4 50%, rgba(255, 255, 255, 0.00) 50.7%), var(--wp--preset--color--white-03) !important;
}

.block-destacados.fondo-white-02 .card-destacado {
    background: radial-gradient(36% 83% at 100% 100%, var(--wp--preset--color--white-02) 50%, rgba(0, 0, 0, 0.00) 50%), var(--wp--preset--color--white-03);
}

.destacado-secundario:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1;
}

.destacado-secundario:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2;
}

.destacado-secundario:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 3;
}

.card-destacado {
    border-radius: 10px;
    background: radial-gradient(36% 83% at 100% 100%, var(--wp--preset--color--white-02) 50%, rgba(0, 0, 0, 0.00) 50%), var(--wp--preset--color--white);
    padding: 0;
    margin: 0;
}

.card-destacado a {
    text-decoration: none;
}

.card-destacado .thumb img {
    width: 100%;
    border-radius: 15px 15px 0 0;
    object-fit: cover;
    display: block;
}

.card-destacado .post-category {
    color: var(--wp--preset--color--main--blue);
    font-style: normal;
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--preset--line-height--small);
    margin-bottom: 7px;
}

.card-destacado:first-child .post-category {
    font-weight: var(--wp--custom--weight-700);
    font-size: var(--wp--preset--font-size-h6);
    line-height: var(--wp--preset--line-height-h6);
}

.card-destacado .post-title {
    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--black);
    font-style: normal;
    margin: 0;
}

.card-destacado:first-child .post-title {
    color: var(--wp--preset--color--main--blue);
    font-size: var(--wp--preset--font-size-h3);
    line-height: var(--wp--preset--line-height-h3);
    margin: 20px 0;
}

.card-destacado:first-child {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    border-radius: 30px;
}

.card-destacado:first-child .card-content {
    padding: 21px 32px 30px 32px;
    position: relative;
}

.grid-destacados>.card-destacado:not(:first-child) {
    padding: 15px;
}

/* Añade la flecha como pseudo-elemento */
.block-destacados .card-link:not(.block-destacados .destacado-principal .card-link)::after {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    color: var(--wp--preset--color--main--blue);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url('./../../assets/img/arrow-right.svg');
    mask-image: url('./../../assets/img/arrow-right.svg');
    top: -10px;
}

.block-destacados .card-link {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    padding-right: 16px;
    position: relative;
    height: 24px;
    /* Altura fija para el contenedor */
}

/* Estilo especial para la primera tarjeta (destacado principal) */
.destacado-principal::after {
    content: "";
    bottom: 0;
    position: relative;
    left: calc(100% - 24px - 45px);
    top: 16px;
    width: 40px;
    aspect-ratio: 1;
    display: block;
    color: var(--wp--preset--color--white);
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url('./../../assets/img/arrow-right.svg');
    mask-image: url('./../../assets/img/arrow-right.svg');
}

.block-destacados .grid-destacados .card-link {
    margin-top: 0;
    padding-right: 0;
}

.block-destacados .card-destacado:first-child .card-link {
    display: flex;
    flex-direction: column;
    justify-content: end;
    height: 100%;
}

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

    .grid-destacados {
        display: block;
    }

    .destacado-secundario {
        margin-top: 16px;
    }

    .destacado-principal::after {
        top: -16px;
    }

    .destacado-principal {
        background: radial-gradient(72% 44% at 100% 100%, #3238C4 50%, rgba(255, 255, 255, 0.00) 50.7%), var(--wp--preset--color--white) !important;
    }

    .block-destacados.fondo-white-02 .destacado-principal {
        background: radial-gradient(72% 44% at 100% 100%, #3238C4 50%, rgba(255, 255, 255, 0.00) 50.7%), var(--wp--preset--color--white-03) !important;
    }

    .block-destacados.fondo-white-02 .card-destacado {
        background: radial-gradient(48% 95% at 100% 100%, var(--wp--preset--color--white-02) 50%, rgba(0, 0, 0, 0.00) 50%), var(--wp--preset--color--white-03);
    }

    .card-destacado {
        border-radius: 10px;
        background: radial-gradient(48% 95% at 100% 100%, var(--wp--preset--color--white-02) 50%, rgba(0, 0, 0, 0.00) 50%), var(--wp--preset--color--white);
    }
}

@media (min-width: 921px) and (max-width: 1230px) {
    .destacado-principal::after {
        top: -14px;
    }

    .block-destacados .card-link:not(.block-destacados .destacado-principal .card-link)::after {
        top: 17px;
        position: relative;
    }
}

/* ============================================================
   Estilo "carrusel" (diseño actual, con overlay + slider móvil)
   ============================================================ */
.block-destacados-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 46px;
    padding: var(--wp--custom--section--y) var(--wp--custom--section--x);
}

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

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

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

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

.block-destacados-2 .inner-destacados-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 46px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.tit-cta-destacados-2 {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.tit-cta-destacados-2 h2 {
    font-size: var(--wp--preset--font-size-h3);
    line-height: var(--wp--preset--line-height-h3);
}

/* El CTA es <a class="wp-block-button__link ...">, así que ya lo estiliza
   "Botón unificado" (assets/css/base.css). */

.cta-blog-2-arrow {
    display: inline-flex;
}

.block-destacados-2 h2 {
    margin: 0 !important;
}

/* Rejilla de escritorio: 1 tarjeta grande + 3 secundarias, igual reparto que destacados-blog v1 */
.grid-destacados-2 {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-template-rows: 1fr 1fr 1fr;
    column-gap: 24px;
    row-gap: 20px;
    text-align: left;
}

.destacado-principal-2 {
    grid-column: 1 / 2;
    grid-row: 1 / 4;
}

.destacado-secundario-2:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1;
}

.destacado-secundario-2:nth-child(3) {
    grid-column: 2 / 3;
    grid-row: 2;
}

.destacado-secundario-2:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 3;
}

.card-destacado-2 {
    position: relative;
    height: 100%;
    border-radius: var(--wp--custom--radius--xl);
    background-color: var(--wp--preset--color--white);
    overflow: hidden;
}

/* Sobre fondo gris claro, las tarjetas blancas (incluida la base del
   degradado de la principal) 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-destacados-2.fondo-white-02 .card-destacado-2 {
    background-color: var(--wp--preset--color--white-03);
}

.block-destacados-2.fondo-white-02 .destacado-principal-2 {
    background: radial-gradient(52% 40% at 100% 100%, var(--wp--preset--color--main-blue) 50%, rgba(255, 255, 255, 0) 50.7%), var(--wp--preset--color--white-03);
}

.block-destacados-2.fondo-white-02 .destacado-principal-2::before {
    background-color: var(--wp--preset--color--white-03);
}

.card-destacado-2 a {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}

/* --- Tarjeta destacada (principal) --- */

.destacado-principal-2 {
    background: radial-gradient(52% 40% at 100% 100%, var(--wp--preset--color--main-blue) 50%, rgba(255, 255, 255, 0) 50.7%), var(--wp--preset--color--white);
    box-shadow: var(--shadow-card);
}

/* Al pasar el ratón, el degradado azul de la esquina se aclara (mismo concepto que el amarillo de la referencia perdiendo intensidad) */
.destacado-principal-2::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: var(--wp--preset--color--white);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

/* .destacado-principal-2:hover::before {
    opacity: 0.35;
} */

.destacado-principal-2 .thumb-2 {
    position: relative;
    z-index: 1;
    aspect-ratio: 4 / 3;
    border-radius: var(--wp--custom--radius--xl) var(--wp--custom--radius--xl) 0 0;
    overflow: hidden;
}

.destacado-principal-2 .thumb-2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.destacado-principal-2 .card-content-2 {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 40px 30px 30px;
}

.destacado-principal-2 .post-category-2 {
    position: relative;
    z-index: 1;
    color: var(--wp--preset--color--main-blue);
    font-weight: var(--wp--custom--weight-700);
    font-size: var(--wp--preset--font-size-h6);
    line-height: var(--wp--preset--line-height-h6);
    margin-bottom: 6px;
    text-transform: uppercase;
}

.destacado-principal-2 .post-title-2 {
    position: relative;
    z-index: 1;
    color: var(--wp--preset--color--black);
    font-size: var(--wp--preset--font-size-h3);
    line-height: var(--wp--preset--line-height-h3);
    font-weight: var(--wp--custom--weight-500);
    margin: 20px 0;
    width: 80%;
}

.destacado-principal-2 .card-arrow-2 {
    position: relative;
    z-index: 1;
    margin-top: auto;
    align-self: flex-end;
    color: var(--wp--preset--color--white);
}

/* --- Tarjetas secundarias --- */

.destacado-secundario-2 .card-content-2 {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 20px 24px;
}

.destacado-secundario-2 .post-category-2 {
    position: relative;
    z-index: 1;
    color: var(--wp--preset--color--main-blue);
    font-weight: var(--wp--custom--weight-700);
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--preset--line-height--small);
    margin-bottom: 12px;
    transition: color 0.35s ease;
    text-transform: uppercase;
}

.destacado-secundario-2 .post-title-2 {
    position: relative;
    z-index: 1;
    color: var(--wp--preset--color--black);
    font-size: var(--wp--preset--font-size-h5);
    line-height: var(--wp--preset--line-height-h5);
    font-weight: var(--wp--custom--weight-500);
    margin: 0 0 18px;
    transition: color 0.35s ease;
}

.destacado-secundario-2 .card-arrow-2 {
    position: relative;
    z-index: 1;
    margin-top: auto;
    align-self: flex-end;
    color: var(--wp--preset--color--main-blue);
    transition: color 0.35s ease, transform 0.3s ease;
}

/* Pie de tarjeta: texto ("Leer más" / "Descargar artículo") + flecha, como en
   index.php / page-recursos.php. En escritorio solo se ve la flecha abajo a la
   derecha (igual que antes); el texto aparece en tablet/móvil. */
.card-footer-2 {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.card-cta-text-2 {
    display: none;
}

/* Imagen redonda: solo tablet/móvil. En escritorio la principal sigue usando
   su banner .thumb-2 y las secundarias no llevan imagen. */
.card-avatar-2 {
    display: none;
}

.destacado-principal-2 .card-fill-principal-2 {
    position: absolute;
    inset: 0;
    background-color: var(--wp--preset--color--main-blue);
    /* 80px de radio: alcanza hasta debajo de la flecha (que está a ~24-40px de la
       esquina por el padding de la tarjeta + su propio tamaño), no solo el pico
       de la esquina. */
    clip-path: circle(116px at 100% 100%);
    transition: clip-path 0.45s ease, background-color 0.45s ease;
    z-index: 0;
    pointer-events: none;
    margin: -16px;
    /* para que el círculo recorte también la zona de padding de la tarjeta */
}

/* Cuarto de círculo de la esquina (notch), ya presente en v1 como detalle discreto.
   Aquí se anima con clip-path: un círculo recortado sobre una capa que ocupa toda la
   tarjeta (inset: 0), anclado en la esquina inferior derecha. El radio de reposo es un
   valor fijo en px (pequeño, a juego con el tamaño de la flecha) y el de hover usa un
   porcentaje: por especificación CSS, el porcentaje de un circle() se resuelve contra
   la diagonal de la caja, así que 150% cubre por completo cualquier tarjeta sin
   importar su proporción ancho/alto — a diferencia del intento anterior con
   transform/scale, que dependía del tamaño de viewport (vmax) y no daba un resultado
   consistente en todas las tarjetas. */
.destacado-secundario-2 .card-fill-secundario-2 {
    position: absolute;
    inset: 0;
    background-color: var(--wp--preset--color--white);
    /* 116px de radio: alcanza hasta debajo de la flecha (que está a ~24-40px de la
       esquina por el padding de la tarjeta + su propio tamaño), no solo el pico
       de la esquina. */
    clip-path: circle(116px at 100% 100%);
    transition: clip-path 0.45s ease, background-color 0.45s ease;
    z-index: 0;
    pointer-events: none;
    margin: -16px;
    /* para que el círculo recorte también la zona de padding de la tarjeta */
}

/* Solo en dispositivos con puntero real. En táctil el :hover se queda "pegado"
   tras pulsar la tarjeta y la animación del círculo (.card-fill-*) se congela a
   media expansión — una mancha azul apagada en mitad del slide. */
@media (hover: hover) {
    .destacado-principal-2:hover .card-fill-principal-2,
    .destacado-secundario-2:hover .card-fill-secundario-2 {
        /* Radio fijo, muy por encima de cualquier tamaño real de tarjeta, en vez de un
           porcentaje: así la cobertura total no depende de fórmulas de resolución de
           porcentaje de clip-path ni de la proporción ancho/alto de la tarjeta. */
        clip-path: circle(2000px at 100% 100%);
        background-color: var(--wp--preset--color--main-blue);
    }

    .destacado-principal-2:hover .post-category-2,
    .destacado-principal-2:hover .post-title-2,
    .destacado-principal-2:hover .card-arrow-2,
    .destacado-principal-2:hover .card-cta-text-2,
    .destacado-secundario-2:hover .post-category-2,
    .destacado-secundario-2:hover .post-title-2,
    .destacado-secundario-2:hover .card-arrow-2,
    .destacado-secundario-2:hover .card-cta-text-2 {
        color: var(--wp--preset--color--white);
    }
}

/* .card-destacado-2:hover .card-arrow-2 {
    transform: translateX(6px);
} */

/* --- Carrusel móvil (oculto en escritorio) --- */
.container-swiper-destacados-2 {
    display: none;
}

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

    /* La disposición no cambia: en tablet/móvil sigue el carrusel de siempre;
       solo se rediseñan las tarjetas (imagen redonda + etiqueta píldora + pie). */
    .grid-destacados-2 {
        display: none;
    }

    .container-swiper-destacados-2 {
        display: flex;
        flex-direction: column;
        row-gap: 20px;
        width: 100%;
    }

    /* Imagen redonda arriba a la derecha de cada tarjeta (mismo tamaño y
       posición que .arc-card-media / .pr-card-media). */
    .card-avatar-2 {
        display: block;
        position: relative;
        z-index: 1;
        align-self: flex-end;
        width: 120px;
        height: 120px;
        margin-bottom: 12px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
    }

    .card-avatar-2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .card-footer-2 {
        justify-content: space-between;
    }

    .card-cta-text-2 {
        display: inline-block;
        color: var(--wp--preset--color--main-blue);
        font-weight: var(--wp--custom--weight-700);
        font-size: var(--wp--preset--font-size--small);
        line-height: var(--wp--preset--line-height--small);
        text-transform: uppercase;
        transition: color 0.35s ease;
    }

    .destacado-principal-2 .card-content-2,
    .destacado-secundario-2 .card-content-2 {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 20px 24px;
        text-align: left;
    }

    .destacado-principal-2::before {
        content: unset;
    }

    .destacado-principal-2 {
        background: unset;
        box-shadow: unset;
        position: relative;
        height: 100%;
        border-radius: var(--wp--custom--radius--xl);
        background-color: var(--wp--preset--color--white);
        overflow: hidden;
    }

    .destacado-principal-2 .thumb-2 {
        display: none;
    }

    /* Etiqueta en formato píldora, igual que .arc-card-tag / .pr-card-tag:
       texto azul marca sobre fondo azul translúcido, alineada a la izquierda. */
    .destacado-principal-2 .post-category-2,
    .destacado-secundario-2 .post-category-2 {
        position: relative;
        z-index: 1;
        align-self: flex-start;
        width: fit-content;
        display: inline-flex;
        align-items: center;
        column-gap: 8px;
        margin-bottom: 18px;
        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-weight: var(--wp--custom--weight-700);
        font-size: var(--wp--preset--font-size--small);
        line-height: var(--wp--preset--line-height--small);
        letter-spacing: 0.02em;
        text-transform: uppercase;
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.35s ease;
    }

    .destacado-principal-2 .post-title-2 {
        position: relative;
        z-index: 1;
        color: var(--wp--preset--color--black);
        font-size: var(--wp--preset--font-size-h5);
        line-height: var(--wp--preset--line-height-h5);
        font-weight: var(--wp--custom--weight-500);
        margin: 0 0 18px;
        transition: color 0.35s ease;
        width: 100%;
    }

    .destacado-secundario-2 .post-title-2 {
        margin: 0 0 18px;
    }

    .destacado-principal-2 .card-fill-principal-2,
    .destacado-secundario-2 .card-fill-secundario-2 {
        background-color: var(--wp--preset--color--white-03);
        clip-path: circle(116px at 100% 100%);
    }

    .destacado-principal-2 .card-arrow-2 {
        color: var(--wp--preset--color--main-blue);
    }

    /* El CSS base de Swiper pone margin-left/right:auto en .swiper (pensado para
       centrar un carrusel de ancho fijo). Dentro de un contenedor flex en columna
       eso desactiva el "stretch" por defecto (los márgenes auto se comen la
       alineación) y el carrusel pasa a medirse por su contenido en vez de ocupar
       el 100% disponible — así es como una tarjeta acababa ocupando casi toda la
       pantalla. Forzamos el ancho explícitamente para evitarlo. */
    .container-swiper-destacados-2 .swiper {
        width: 100%;
        /* El bloque servicios-cards define una regla global sin ámbito
           ".swiper { overflow: unset; }" (pensada para su propio efecto "peek"),
           que al ser CSS afecta a cualquier .swiper del sitio, incluido este, y
           anula el overflow:hidden que Swiper pone por defecto. Sin ese recorte,
           las 4 tarjetas quedaban visibles en fila y desbordaban toda la página
           horizontalmente. Lo recuperamos aquí, acotado a este carrusel. */
        overflow: hidden;
    }

    .destacados-2-pagination {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .destacados-2-pagination .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        margin: 0;
        background-color: var(--wp--preset--color--grey-05);
        opacity: 1;
        transition: background-color 0.2s ease, transform 0.2s ease;
    }

    .destacados-2-pagination .swiper-pagination-bullet-active {
        background-color: var(--wp--preset--color--main-blue);
        transform: scale(1.2);
    }
}