.smu-blog-cta-ultra {
    box-sizing: border-box;

    width: 100%;

    margin:
        clamp(48px, 6vw, 72px)
        0;

    padding:
        clamp(30px, 4vw, 44px);

    border-radius: 18px;

    background: #12100f;
    color: #f7f5f0;
}

.smu-blog-cta-ultra__eyebrow {
    margin:
        0
        0
        14px;

    color: #e2aa4f;

    font-family: var(--smu-font-data);
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;

    letter-spacing: .09em;
    text-transform: uppercase;
}

.smu-blog-cta-ultra__title {
    max-width: 620px;

    margin: 0;

    color: #f7f5f0;

    font-family: var(--smu-font-display);

    font-size:
        clamp(
            1.35rem,
            2.2vw,
            1.85rem
        );

    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.018em;
}

.smu-blog-cta-ultra__actions {
    margin-top: 28px;
}

.smu-blog-cta-ultra__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 46px;

    padding:
        12px
        20px;

    border-radius: 10px;

    background: #e2aa4f;
    color: #12100f;

    font-family: var(--smu-font-body);
    font-size: .88rem;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    transition:
        transform .18s ease,
        opacity .18s ease;
}

.smu-blog-cta-ultra__button:hover,
.smu-blog-cta-ultra__button:focus-visible {
    color: #12100f;
    text-decoration: none;

    transform: translateY(-1px);
}

.smu-blog-cta-ultra__button:focus-visible {
    outline:
        2px solid
        #f7f5f0;

    outline-offset: 3px;
}

@media (max-width: 600px) {

    .smu-blog-cta-ultra {
        padding:
            28px
            24px;

        border-radius: 14px;
    }

    .smu-blog-cta-ultra__button {
        width: 100%;
    }
}


/* =========================================================
   SINGLE BLOG CONTEXT
   =========================================================
   El single aplica estilos editoriales generales a h2, p y a.
   Estas reglas mantienen la identidad visual propia del CTA
   sin recurrir a !important.
*/

.smu-blog-single__content .smu-blog-cta-ultra {
    background: #12100f;
    color: #f7f5f0;
}

.smu-blog-single__content .smu-blog-cta-ultra__eyebrow {
    color: #e2aa4f;
}

.smu-blog-single__content .smu-blog-cta-ultra__title {
    margin: 0;

    color: #f7f5f0;

    font-family: var(--smu-font-display);
}

.smu-blog-single__content .smu-blog-cta-ultra__button,
.smu-blog-single__content .smu-blog-cta-ultra__button:visited {
    background: #e2aa4f;
    color: #12100f;
    text-decoration: none;
}

.smu-blog-single__content .smu-blog-cta-ultra__button:hover,
.smu-blog-single__content .smu-blog-cta-ultra__button:focus-visible {
    color: #12100f;
    text-decoration: none;
}


/* =========================================================
   BLOG CTA · TYPOGRAPHY OVERRIDE
   =========================================================
   Debe ganar al h2 editorial general del single.
*/

.smu-blog-single__content .smu-blog-cta-ultra__title {
    max-width: 680px;

    font-size:
        clamp(
            1.3rem,
            1.8vw,
            1.65rem
        );

    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.015em;
}

@media (max-width: 600px) {

    .smu-blog-single__content .smu-blog-cta-ultra__title {
        font-size:
            clamp(
                1.2rem,
                6vw,
                1.45rem
            );
    }
}