.olcards,
    .olcards * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .olcards {
        list-style: none;
        counter-reset: cardCount;
        font-family: sans-serif;
        display: flex;
        flex-direction: column;
        --cardsGap: 1rem;
        gap: var(--cardsGap);
        padding-bottom: var(--cardsGap);
        width: 100%;
        /* Ocupa todo el ancho de la pantalla */
    }

    .olcards li {
        counter-increment: cardCount;
        display: flex;
        color: white;
        --labelOffset: 1rem;
        --arrowClipSize: 1.5rem;
        margin-top: var(--labelOffset);
        width: 100%;
        /* Cada tarjeta ocupa todo el ancho */
    }

    .olcards li::before {
        content: counter(cardCount, decimal-leading-zero);
        background: white;
        color: var(--cardColor);
        font-size: 2em;
        font-weight: 700;
        transform: translateY(calc(-1 * var(--labelOffset)));
        margin-right: calc(-1 * var(--labelOffset));
        z-index: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-inline: 0.5em;
    }

    .olcards li .content {
    background-color: var(--cardColor);
    --inlinePadding: 1em;
    --boxPadding: 0.75em;
    display: flex;
    align-items: center;
    gap: 1em;
    padding: var(--boxPadding) calc(var(--inlinePadding) + var(--arrowClipSize)) var(--boxPadding) calc(var(--inlinePadding) + var(--labelOffset));
    clip-path: polygon(0 0,
        calc(100% - var(--arrowClipSize)) 0,
        100% 50%,
        calc(100% - var(--arrowClipSize)) 100%,
        calc(100% - var(--arrowClipSize)) calc(100% + var(--cardsGap)),
        0 calc(100% + var(--cardsGap)));
    position: relative;
    width: 100%;
}


    .olcards li .content::before {
        content: "";
        position: absolute;
        width: var(--labelOffset);
        height: var(--labelOffset);
        background: var(--cardColor);
        left: 0;
        bottom: 0;
        clip-path: polygon(0 0, 100% 0, 0 100%);
        filter: brightness(0.75);
    }

    .olcards li .content::after {
        content: "";
        position: absolute;
        height: var(--cardsGap);
        width: var(--cardsGap);
        background: linear-gradient(to right, rgba(0, 0, 0, 0.25), transparent 50%);
        left: 0;
        top: 100%;
    }

    .olcards li .icon {
        font-size: 1.8em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .olcards li .content .title {
        grid-area: title;
        font-size: 1.25em;
    }

    .olcards li .content .text {
        grid-area: text;
    }