/* ============================================================
   DIGITALIZANDO MX
   ARTÍCULO DEL BLOG
============================================================ */

.dmxBlogArticle {
    --article-ink: #102039;
    --article-soft: #5e6f84;
    --article-muted: #8795a8;
    --article-line: rgba(18, 46, 82, 0.1);
    --article-blue: #1769ff;
    --article-cyan: #18bfd9;
    --article-purple: #7358ff;
    --article-surface: #ffffff;

    position: relative;
    color: var(--article-ink);
    background: #f7f9fc;
}


/* ============================================================
   PROGRESO
============================================================ */

.dmxBlogArticleProgress {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1500;
    height: 3px;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.12);
}

.dmxBlogArticleProgress span {
    display: block;
    width: 0;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            var(--article-blue),
            var(--article-cyan)
        );
    box-shadow: 0 0 14px rgba(23, 105, 255, 0.5);
}


/* ============================================================
   HERO
============================================================ */

.dmxBlogArticleHero {
    position: relative;
    overflow: hidden;
    padding:
        clamp(165px, 14vw, 210px)
        0
        clamp(90px, 9vw, 130px);
    color: #ffffff;
    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(23, 105, 255, 0.2),
            transparent 29%
        ),
        linear-gradient(
            145deg,
            #040c18,
            #07182f 52%,
            #0b2e58
        );
}

.dmxBlogArticleHeroBackground {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.dmxBlogArticleHeroGrid {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 58px 58px;
    mask-image:
        linear-gradient(
            to bottom,
            #000,
            rgba(0, 0, 0, 0.62),
            transparent
        );
}

.dmxBlogArticleHeroGlow {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
}

.dmxBlogArticleHeroGlowOne {
    top: -240px;
    left: -180px;
    width: 650px;
    aspect-ratio: 1;
    background:
        radial-gradient(
            circle,
            rgba(23, 105, 255, 0.24),
            transparent 70%
        );
}

.dmxBlogArticleHeroGlowTwo {
    right: -240px;
    bottom: -310px;
    width: 720px;
    aspect-ratio: 1;
    background:
        radial-gradient(
            circle,
            rgba(24, 191, 217, 0.18),
            transparent 70%
        );
}

.dmxBlogArticleBreadcrumb {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    margin-bottom: 54px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 11px;
}

.dmxBlogArticleBreadcrumb a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 200ms ease;
}

.dmxBlogArticleBreadcrumb a:hover {
    color: #ffffff;
}

.dmxBlogArticleHeroLayout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(420px, 0.98fr);
    align-items: center;
    gap: clamp(60px, 7vw, 110px);
}

.dmxBlogArticleHeroContent {
    max-width: 810px;
}

.dmxBlogArticleCategory {
    display: inline-flex;
    align-items: center;
    min-height: 31px;
    margin-bottom: 22px;
    padding: 0 13px;
    border: 1px solid rgba(77, 193, 255, 0.2);
    border-radius: 999px;
    color: #87dcff;
    background: rgba(54, 160, 255, 0.08);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dmxBlogArticleHero h1 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(51px, 5.7vw, 84px);
    font-weight: 880;
    line-height: 1;
    letter-spacing: -0.058em;
    text-wrap: balance;
}

.dmxBlogArticleHero h1 span {
    color: transparent;
    background:
        linear-gradient(
            110deg,
            #55a4ff,
            #41e4ee 50%,
            #9b8dff
        );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dmxBlogArticleHeroContent > p {
    max-width: 720px;
    margin: 31px 0 0;
    color: rgba(224, 235, 247, 0.74);
    font-size: clamp(17px, 1.45vw, 20px);
    line-height: 1.8;
    text-wrap: pretty;
}

.dmxBlogArticleMeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin-top: 43px;
}

.dmxBlogArticleMeta > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dmxBlogArticleMeta small {
    color: rgba(255, 255, 255, 0.43);
    font-size: 8px;
    font-weight: 750;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.dmxBlogArticleMeta strong {
    color: rgba(255, 255, 255, 0.86);
    font-size: 11px;
    font-weight: 680;
}

.dmxBlogArticleAuthor {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
}

.dmxBlogArticleAuthorMark {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(101, 189, 255, 0.25);
    border-radius: 13px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--article-blue),
            var(--article-purple)
        );
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.07em;
}

.dmxBlogArticleMetaDivider {
    width: 1px;
    height: 31px;
    background: rgba(255, 255, 255, 0.12);
}


/* ============================================================
   VISUAL DEL HERO
============================================================ */

.dmxBlogArticleHeroVisual {
    position: relative;
}

.dmxBlogArticleBrowser {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow:
        0 42px 90px rgba(0, 0, 0, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px);
    transform:
        perspective(1100px)
        rotateY(-5deg)
        rotateX(2deg);
}

.dmxBlogArticleBrowserHeader {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    padding: 0 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dmxBlogArticleBrowserHeader > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
}

.dmxBlogArticleBrowserHeader div {
    min-width: 150px;
    margin-left: 9px;
    padding: 6px 12px;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.06);
    font-size: 8px;
}

.dmxBlogArticleBrowserBody {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        46px
        minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    min-height: 390px;
    padding: 22px;
}

.dmxBlogArticleBrowserOld,
.dmxBlogArticleBrowserNew {
    min-height: 310px;
    padding: 15px;
    border-radius: 18px;
}

.dmxBlogArticleBrowserOld {
    opacity: 0.58;
    background: rgba(255, 255, 255, 0.055);
    filter: saturate(0.6);
}

.dmxBlogArticleBrowserNew {
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(31, 120, 255, 0.1)
        );
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.dmxBlogArticleBrowserOld small,
.dmxBlogArticleBrowserNew small {
    display: block;
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.48);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dmxBlogArticleOldNavigation,
.dmxBlogArticleNewNavigation {
    height: 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
}

.dmxBlogArticleOldHero {
    height: 92px;
    margin-top: 13px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.07);
}

.dmxBlogArticleOldRows {
    display: grid;
    gap: 9px;
    margin-top: 14px;
}

.dmxBlogArticleOldRows span {
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.055);
}

.dmxBlogArticleBrowserTransformation {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 9px;
    color: #65dce8;
}

.dmxBlogArticleBrowserTransformation > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #65dce8;
    box-shadow:
        0 0 0 7px rgba(101, 220, 232, 0.08),
        0 0 20px rgba(101, 220, 232, 0.38);
}

.dmxBlogArticleBrowserTransformation svg {
    width: 21px;
    height: 21px;
}

.dmxBlogArticleNewHero {
    height: 115px;
    margin-top: 13px;
    padding: 15px;
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            #143965,
            var(--article-blue),
            var(--article-cyan)
        );
}

.dmxBlogArticleNewHero > span {
    display: block;
    width: 62%;
    height: 13px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.75);
}

.dmxBlogArticleNewHero div {
    display: grid;
    gap: 8px;
    margin-top: 17px;
}

.dmxBlogArticleNewHero i {
    display: block;
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.dmxBlogArticleNewHero i:last-child {
    width: 72%;
}

.dmxBlogArticleNewCards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 12px;
}

.dmxBlogArticleNewCards span {
    height: 62px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.1);
}

.dmxBlogArticleHeroBadge {
    position: absolute;
    right: -19px;
    bottom: -19px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border: 1px solid rgba(80, 213, 198, 0.18);
    border-radius: 14px;
    color: #c5f8e7;
    background: rgba(6, 30, 48, 0.9);
    font-size: 9px;
    font-weight: 750;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.24);
    backdrop-filter: blur(16px);
}

.dmxBlogArticleHeroBadge span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #57d99f;
    box-shadow: 0 0 12px rgba(87, 217, 159, 0.7);
}


/* ============================================================
   LAYOUT DEL CONTENIDO
============================================================ */

.dmxBlogArticleContent {
    padding:
        clamp(78px, 8vw, 120px)
        0
        clamp(90px, 9vw, 140px);
}

.dmxBlogArticleLayout {
    display: grid;
    grid-template-columns:
        minmax(220px, 270px)
        minmax(0, 820px);
    justify-content: center;
    gap: clamp(50px, 7vw, 100px);
    align-items: start;
}

.dmxBlogArticleSidebar {
    position: sticky;
    top: 105px;
}

.dmxBlogArticleTableContents,
.dmxBlogArticleShare {
    padding: 24px;
    border: 1px solid var(--article-line);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 20px 50px rgba(19, 48, 82, 0.055);
    backdrop-filter: blur(16px);
}

.dmxBlogArticleShare {
    margin-top: 15px;
}

.dmxBlogArticleSidebarLabel {
    display: block;
    margin-bottom: 16px;
    color: var(--article-blue);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dmxBlogArticleTableContents nav {
    display: grid;
    gap: 2px;
}

.dmxBlogArticleTableContents a {
    padding: 8px 10px;
    border-radius: 9px;
    color: var(--article-soft);
    font-size: 10px;
    font-weight: 580;
    line-height: 1.4;
    text-decoration: none;
    transition:
        color 200ms ease,
        background-color 200ms ease,
        transform 200ms ease;
}

.dmxBlogArticleTableContents a:hover,
.dmxBlogArticleTableContents a.is-active {
    color: var(--article-blue);
    background: rgba(23, 105, 255, 0.07);
    transform: translateX(3px);
}

.dmxBlogArticleShare > div {
    display: flex;
    gap: 8px;
}

.dmxBlogArticleShare button {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--article-line);
    border-radius: 11px;
    color: var(--article-soft);
    background: #ffffff;
    cursor: pointer;
    transition:
        color 200ms ease,
        border-color 200ms ease,
        transform 200ms ease;
}

.dmxBlogArticleShare button:hover {
    color: var(--article-blue);
    border-color: rgba(23, 105, 255, 0.22);
    transform: translateY(-2px);
}

.dmxBlogArticleShare button svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dmxBlogArticleCopyStatus {
    display: block;
    min-height: 15px;
    margin-top: 10px;
    color: #288460;
    font-size: 8px;
}


/* ============================================================
   CUERPO
============================================================ */

.dmxBlogArticleBody {
    min-width: 0;
}

.dmxBlogArticleLead {
    margin-bottom: 70px;
}

.dmxBlogArticleLead > p:first-child {
    color: var(--article-ink);
    font-size: clamp(22px, 2.1vw, 29px);
    font-weight: 620;
    line-height: 1.55;
    letter-spacing: -0.025em;
}

.dmxBlogArticleBody p {
    color: var(--article-soft);
    font-size: 17px;
    line-height: 1.9;
}

.dmxBlogArticleHighlight {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 23px;
    margin-top: 38px;
    padding: 25px;
    border: 1px solid rgba(23, 105, 255, 0.1);
    border-radius: 22px;
    background:
        linear-gradient(
            120deg,
            rgba(23, 105, 255, 0.07),
            rgba(24, 191, 217, 0.025)
        );
}

.dmxBlogArticleHighlight > span {
    display: inline-flex;
    width: 70px;
    height: 70px;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--article-blue),
            var(--article-purple)
        );
    font-size: 25px;
    font-weight: 850;
}

.dmxBlogArticleHighlight p {
    margin: 0;
}

.dmxBlogArticleSection {
    scroll-margin-top: 115px;
    margin-top: 90px;
}

.dmxBlogArticleSectionNumber {
    display: inline-flex;
    min-width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    padding: 0 11px;
    border: 1px solid rgba(23, 105, 255, 0.11);
    border-radius: 14px;
    color: var(--article-blue);
    background: rgba(23, 105, 255, 0.065);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
}

.dmxBlogArticleSection h2 {
    max-width: 780px;
    margin: 0 0 27px;
    color: var(--article-ink);
    font-size: clamp(35px, 4vw, 51px);
    font-weight: 830;
    line-height: 1.07;
    letter-spacing: -0.047em;
    text-wrap: balance;
}

.dmxBlogArticleSection h3 {
    margin: 0 0 10px;
    color: var(--article-ink);
    font-size: 17px;
}

.dmxBlogArticleSection ul {
    margin: 28px 0 0;
    padding-left: 22px;
    color: var(--article-soft);
}

.dmxBlogArticleSection li {
    margin-bottom: 12px;
    padding-left: 5px;
    font-size: 16px;
    line-height: 1.7;
}

.dmxBlogArticleQuestions {
    margin-top: 32px;
    padding: 27px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 22px 50px rgba(19, 48, 82, 0.065);
}

.dmxBlogArticleQuestions strong {
    color: var(--article-ink);
}

.dmxBlogArticleFeatureGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 35px;
}

.dmxBlogArticleFeatureGrid article {
    padding: 23px;
    border: 1px solid var(--article-line);
    border-radius: 19px;
    background: #ffffff;
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.dmxBlogArticleFeatureGrid article:hover {
    border-color: rgba(23, 105, 255, 0.17);
    box-shadow: 0 20px 44px rgba(19, 48, 82, 0.08);
    transform: translateY(-4px);
}

.dmxBlogArticleFeatureGrid p {
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
}

.dmxBlogArticleChecklist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 32px;
}

.dmxBlogArticleChecklist span {
    position: relative;
    padding: 16px 17px 16px 43px;
    border: 1px solid var(--article-line);
    border-radius: 15px;
    color: var(--article-soft);
    background: #ffffff;
    font-size: 13px;
}

.dmxBlogArticleChecklist span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 17px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--article-blue);
    box-shadow: 0 0 0 6px rgba(23, 105, 255, 0.07);
    transform: translateY(-50%);
}

.dmxBlogArticleSection blockquote {
    margin: 34px 0;
    padding: 27px 29px;
    border-left: 4px solid var(--article-blue);
    border-radius: 0 18px 18px 0;
    color: var(--article-ink);
    background:
        linear-gradient(
            90deg,
            rgba(23, 105, 255, 0.08),
            rgba(23, 105, 255, 0.025)
        );
    font-size: 20px;
    font-weight: 650;
    line-height: 1.65;
}

.dmxBlogArticleConclusion {
    padding: 40px;
    border: 1px solid rgba(23, 105, 255, 0.1);
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            rgba(237, 245, 255, 0.8)
        );
    box-shadow: 0 28px 65px rgba(19, 48, 82, 0.07);
}


/* ============================================================
   CTA FINAL
============================================================ */

.dmxBlogArticleCta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 36px;
    margin-top: 85px;
    padding: clamp(35px, 5vw, 55px);
    border-radius: 30px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(24, 191, 217, 0.22),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #061426,
            #0a315d
        );
    box-shadow: 0 35px 70px rgba(9, 35, 68, 0.18);
}

.dmxBlogArticleCta > div > span {
    display: block;
    margin-bottom: 15px;
    color: #73dfe9;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.dmxBlogArticleCta h2 {
    max-width: 630px;
    margin: 0;
    font-size: clamp(33px, 4vw, 50px);
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.dmxBlogArticleCta p {
    max-width: 650px;
    margin: 22px 0 0;
    color: rgba(220, 234, 247, 0.72);
    font-size: 15px;
    line-height: 1.75;
}

.dmxBlogArticleCta > a {
    display: inline-flex;
    min-height: 56px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 21px;
    border-radius: 17px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--article-blue),
            var(--article-cyan)
        );
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 17px 35px rgba(23, 105, 255, 0.25);
    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.dmxBlogArticleCta > a:hover {
    transform: translateY(-3px);
    box-shadow: 0 23px 42px rgba(23, 105, 255, 0.32);
}

.dmxBlogArticleCta > a svg {
    width: 18px;
    height: 18px;
}


/* ============================================================
   FOCUS
============================================================ */

.dmxBlogArticle a:focus-visible,
.dmxBlogArticle button:focus-visible {
    outline: 3px solid rgba(23, 105, 255, 0.3);
    outline-offset: 4px;
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1100px) {

    .dmxBlogArticleHeroLayout {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmxBlogArticleHeroVisual {
        max-width: 760px;
    }

    .dmxBlogArticleLayout {
        grid-template-columns: minmax(0, 820px);
    }

    .dmxBlogArticleSidebar {
        position: static;
        display: grid;
        grid-template-columns:
            minmax(0, 1fr)
            auto;
        gap: 14px;
    }

    .dmxBlogArticleTableContents nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dmxBlogArticleShare {
        margin-top: 0;
    }

}

@media (max-width: 760px) {

    .dmxBlogArticleHero {
        padding:
            125px
            0
            78px;
    }

    .dmxBlogArticleBreadcrumb {
        margin-bottom: 38px;
    }

    .dmxBlogArticleHero h1 {
        font-size: clamp(43px, 11vw, 62px);
    }

    .dmxBlogArticleMetaDivider {
        display: none;
    }

    .dmxBlogArticleBrowser {
        transform: none;
    }

    .dmxBlogArticleBrowserBody {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmxBlogArticleBrowserTransformation {
        flex-direction: row;
        justify-content: center;
    }

    .dmxBlogArticleBrowserTransformation svg {
        transform: rotate(90deg);
    }

    .dmxBlogArticleSidebar {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmxBlogArticleTableContents nav {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmxBlogArticleFeatureGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmxBlogArticleChecklist {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmxBlogArticleHighlight {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmxBlogArticleCta {
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }

    .dmxBlogArticleCta > a {
        justify-self: start;
    }

}

@media (max-width: 520px) {

    .dmxBlogArticleHero h1 {
        font-size: clamp(39px, 12vw, 53px);
    }

    .dmxBlogArticleHeroContent > p {
        font-size: 16px;
    }

    .dmxBlogArticleMeta {
        align-items: flex-start;
        flex-direction: column;
    }

    .dmxBlogArticleHeroVisual {
        display: none;
    }

    .dmxBlogArticleContent {
        padding-top: 60px;
    }

    .dmxBlogArticleTableContents,
    .dmxBlogArticleShare {
        padding: 20px;
    }

    .dmxBlogArticleBody p {
        font-size: 16px;
    }

    .dmxBlogArticleSection {
        margin-top: 72px;
    }

    .dmxBlogArticleSection h2 {
        font-size: clamp(31px, 9vw, 40px);
    }

    .dmxBlogArticleConclusion {
        padding: 25px;
    }

    .dmxBlogArticleCta {
        padding: 28px 23px;
        border-radius: 23px;
    }

    .dmxBlogArticleCta > a {
        width: 100%;
    }

}


/* ============================================================
   MOVIMIENTO REDUCIDO
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .dmxBlogArticle *,
    .dmxBlogArticle *::before,
    .dmxBlogArticle *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }

    .dmxBlogArticleFeatureGrid article:hover,
    .dmxBlogArticleShare button:hover,
    .dmxBlogArticleCta > a:hover {
        transform: none;
    }

}