.meler-content-pillar {
    max-width: 763px;
    position: absolute;
    right: 60px;
    bottom: 0;
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 48px;
    overflow: hidden;
    border: 1px solid #4dc4cf;
    border-radius: 16px;
    background: #1c1c1e;
    color: #dad3cd;
}

.meler-content-pillar *,
.meler-content-pillar *::before,
.meler-content-pillar *::after {
    box-sizing: border-box;
}

.meler-content-pillar__header {
    padding: 24px 32px 0;
}

.meler-content-pillar__eyebrow {
    display: block;
    margin: 0 0 4px;
    color: #4dc4cf;
    font-family: "PODIUM Sharp", "DM Sans", sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.meler-content-pillar__title {
    margin: 0;
    color: #fff;
    font-family: "DM Sans", sans-serif;
    font-size: 22px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
}

.meler-content-pillar__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px;
    padding: 40px 32px;
}

.meler-content-pillar__column {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.meler-content-pillar__item {
    margin: 0;
    padding: 0;
}

.meler-content-pillar__link {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    color: #dad3cd;
    font-family: "DM Sans", sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    transition: color .2s ease;
}

.meler-content-pillar__number {
    flex: 0 0 auto;
}

.meler-content-pillar__text {
    min-width: 0;
}

.meler-content-pillar__link:hover,
.meler-content-pillar__link:focus-visible {
    color: #4dc4cf;
}

.meler-content-pillar__link:focus-visible {
    outline: 2px solid #4dc4cf;
    outline-offset: 4px;
    border-radius: 2px;
}

/*
 * Compensa la cabecera sticky al navegar a los H2.
 * Se puede ajustar desde el tema sin tocar el plugin:
 *   :root { --meler-content-pillar-anchor-offset: 154px; }
 */
.meler-content-pillar-anchor {
    scroll-margin-top: var(--meler-content-pillar-anchor-offset, 154px);
}


/*
 * Compatibilidad: versiones anteriores llegaron a imprimir is-current en el
 * primer elemento. Aunque el PHP actual ya no anade esa clase, evitamos que
 * una salida cacheada pueda mostrarlo como activo.
 */
.meler-content-pillar__item.is-current .meler-content-pillar__link {
    color: #dad3cd;
}

/*
 * Por debajo de 1547px el Content Pillar deja de estar superpuesto en la cabecera
 * y entra en el flujo normal justo despues del titulo.
 */
@media (max-width: 1546px) {
    /*
     * En este breakpoint el bloque deja de superponerse a la cabecera.
     * Forzamos tambien header-bottom-content a volver al flujo normal porque
     * en el tema puede estar posicionado de forma absoluta y quedar debajo
     * del Content Pillar.
     */
    body.has-meler-content-pillar .header-bottom.header-news {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch;
        height: auto !important;
        min-height: 0 !important;
    }

    body.has-meler-content-pillar .header-bottom.header-news .header-bottom-content {
        position: relative !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        z-index: 2;
        order: 1;
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }

    body.has-meler-content-pillar .header-bottom.header-news .meler-content-pillar {
        position: relative !important;
        inset: auto !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 1;
        order: 2;
        clear: both;
        flex: 0 0 auto;
        align-self: center;
        max-width: none;
        width: calc(100% - 32px);
        margin: 32px 16px 48px;
    }
}

@media (max-width: 767px) {
    .meler-content-pillar__header {
        padding: 24px 24px 0;
    }

    .meler-content-pillar__grid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 32px 24px;
    }
}