/* ============================================================
   DIGITALIZANDO MX
   MARKETING DIGITAL
   COMPONENTE: CTA FINAL
============================================================ */

.dmxMarketingCta{

    position:relative;

    overflow:hidden;

    padding:
        clamp(90px,9vw,150px)
        0;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(6,103,241,.09),
            transparent 34%
        ),
        radial-gradient(
            circle at 88% 18%,
            rgba(0,217,220,.10),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #f5f9fc 0%,
            #ffffff 100%
        );

    isolation:isolate;

}


.dmxMarketingCta::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(8,38,77,.028) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,38,77,.028) 1px,
            transparent 1px
        );

    background-size:
        58px 58px;

    -webkit-mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            #000 14%,
            #000 86%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            180deg,
            transparent 0%,
            #000 14%,
            #000 86%,
            transparent 100%
        );

}


/* ============================================================
   PANEL PRINCIPAL
============================================================ */

.dmxMarketingCtaPanel{

    position:relative;

    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(480px,.95fr);

    gap:
        clamp(52px,7vw,100px);

    align-items:center;

    min-height:720px;

    padding:
        clamp(42px,6vw,78px);

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius:
        clamp(30px,4vw,48px);

    background:
        radial-gradient(
            circle at 84% 12%,
            rgba(0,217,220,.16),
            transparent 26%
        ),
        radial-gradient(
            circle at 14% 84%,
            rgba(142,91,255,.15),
            transparent 30%
        ),
        linear-gradient(
            125deg,
            #061a35 0%,
            var(--dmx-navy) 42%,
            #0a4381 72%,
            var(--dmx-blue) 100%
        );

    box-shadow:
        0 46px 120px rgba(8,38,77,.28),
        inset 0 1px 0 rgba(255,255,255,.11);

    isolation:isolate;

}


.dmxMarketingCtaPanel::before{

    content:"";

    position:absolute;

    top:-130px;

    right:30%;

    width:360px;

    height:360px;

    z-index:-1;

    border:
        55px solid
        rgba(255,255,255,.035);

    border-radius:50%;

    pointer-events:none;

}


.dmxMarketingCtaPanel::after{

    content:"";

    position:absolute;

    right:-110px;

    bottom:-160px;

    width:420px;

    height:420px;

    z-index:-1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(198,255,47,.16),
            rgba(198,255,47,0) 68%
        );

    filter:blur(15px);

    pointer-events:none;

}


/* ============================================================
   ELEMENTOS DE FONDO
============================================================ */

.dmxMarketingCtaGlow{

    position:absolute;

    z-index:-1;

    border-radius:50%;

    filter:
        blur(30px);

    pointer-events:none;

}


.dmxMarketingCtaGlowOne{

    top:-120px;

    left:-100px;

    width:370px;

    height:370px;

    background:
        radial-gradient(
            circle,
            rgba(6,103,241,.40),
            rgba(6,103,241,0) 70%
        );

}


.dmxMarketingCtaGlowTwo{

    right:-90px;

    bottom:-100px;

    width:390px;

    height:390px;

    background:
        radial-gradient(
            circle,
            rgba(0,217,220,.26),
            rgba(0,217,220,0) 70%
        );

}


.dmxMarketingCtaGridPattern{

    position:absolute;

    inset:0;

    z-index:-2;

    opacity:.18;

    pointer-events:none;

    background-image:
        linear-gradient(
            rgba(255,255,255,.07) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.07) 1px,
            transparent 1px
        );

    background-size:
        52px 52px;

    -webkit-mask-image:
        radial-gradient(
            circle at 70% 50%,
            #000 0%,
            transparent 70%
        );

    mask-image:
        radial-gradient(
            circle at 70% 50%,
            #000 0%,
            transparent 70%
        );

}


/* ============================================================
   CONTENIDO
============================================================ */

.dmxMarketingCtaContent{

    position:relative;

    z-index:4;

    max-width:740px;

}


.dmxMarketingCtaEyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

}


.dmxMarketingCtaEyebrow > span{

    width:40px;

    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--dmx-cyan),
            var(--dmx-lime)
        );

    box-shadow:
        0 0 20px rgba(0,217,220,.42);

}


.dmxMarketingCtaEyebrow small{

    color:
        rgba(255,255,255,.72);

    font-size:.74rem;

    font-weight:850;

    letter-spacing:.15em;

    line-height:1.2;

    text-transform:uppercase;

}


.dmxMarketingCtaContent h2{

    max-width:780px;

    margin:0;

    color:var(--dmx-white);

    font-size:
        clamp(2.8rem,4.8vw,5.3rem);

    font-weight:850;

    letter-spacing:-.06em;

    line-height:.98;

    text-wrap:balance;

}


.dmxMarketingCtaContent h2 span{

    display:block;

    margin-top:12px;

    color:transparent;

    background:
        linear-gradient(
            110deg,
            #ffffff 0%,
            var(--dmx-cyan) 48%,
            var(--dmx-lime) 100%
        );

    background-clip:text;

    -webkit-background-clip:text;

}


.dmxMarketingCtaContent > p{

    max-width:670px;

    margin:
        28px
        0
        0;

    color:
        rgba(255,255,255,.70);

    font-size:
        clamp(1rem,1.3vw,1.16rem);

    line-height:1.8;

}


/* ============================================================
   ACCIONES
============================================================ */

.dmxMarketingCtaActions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    align-items:center;

    margin-top:36px;

}


.dmxMarketingCtaPrimary,
.dmxMarketingCtaSecondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:56px;

    border-radius:17px;

    font-size:.92rem;

    font-weight:900;

    line-height:1;

    text-decoration:none;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        color .3s ease,
        border-color .3s ease,
        background-color .3s ease;

}


.dmxMarketingCtaPrimary{

    gap:12px;

    padding:
        0
        25px;

    color:var(--dmx-navy);

    background:
        linear-gradient(
            110deg,
            var(--dmx-white),
            #eafcff 55%,
            var(--dmx-cyan)
        );

    box-shadow:
        0 20px 45px rgba(0,0,0,.22);

}


.dmxMarketingCtaPrimary svg{

    transition:
        transform .3s ease;

}


.dmxMarketingCtaPrimary:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 27px 58px rgba(0,0,0,.28);

}


.dmxMarketingCtaPrimary:hover svg{

    transform:
        translateX(4px);

}


.dmxMarketingCtaSecondary{

    padding:
        0
        23px;

    border:
        1px solid
        rgba(255,255,255,.18);

    color:var(--dmx-white);

    background:
        rgba(255,255,255,.07);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

}


.dmxMarketingCtaSecondary:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(255,255,255,.32);

    background:
        rgba(255,255,255,.12);

    box-shadow:
        0 20px 45px rgba(0,0,0,.18);

}


.dmxMarketingCtaPrimary:focus-visible,
.dmxMarketingCtaSecondary:focus-visible{

    outline:
        3px solid
        rgba(198,255,47,.56);

    outline-offset:4px;

}


/* ============================================================
   CONFIANZA
============================================================ */

.dmxMarketingCtaTrust{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:12px;

    margin-top:40px;

}


.dmxMarketingCtaTrust > div{

    display:grid;

    grid-template-columns:
        auto
        minmax(0,1fr);

    gap:11px;

    align-items:center;

    min-width:0;

    padding:
        14px
        15px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:17px;

    background:
        rgba(255,255,255,.055);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background-color .3s ease;

}


.dmxMarketingCtaTrust > div:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(0,217,220,.24);

    background:
        rgba(255,255,255,.09);

}


.dmxMarketingCtaTrustIcon{

    display:grid;

    place-items:center;

    width:32px;

    height:32px;

    flex:0 0 auto;

    border-radius:50%;

    color:var(--dmx-lime);

    background:
        rgba(198,255,47,.10);

    box-shadow:
        inset 0 0 0 1px rgba(198,255,47,.12);

    font-size:.72rem;

    font-weight:900;

}


.dmxMarketingCtaTrust strong{

    display:block;

    overflow:hidden;

    color:var(--dmx-white);

    font-size:.70rem;

    font-weight:850;

    line-height:1.35;

    text-overflow:ellipsis;

}


.dmxMarketingCtaTrust small{

    display:block;

    margin-top:3px;

    color:
        rgba(255,255,255,.54);

    font-size:.56rem;

    line-height:1.35;

}


/* ============================================================
   VISUAL
============================================================ */

.dmxMarketingCtaVisual{

    position:relative;

    z-index:4;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:580px;

    isolation:isolate;

}


/* ============================================================
   SISTEMA
============================================================ */

.dmxMarketingCtaSystem{

    position:relative;

    z-index:3;

    width:min(100%,560px);

    padding:
        clamp(24px,3vw,32px);

    border:
        1px solid
        rgba(255,255,255,.16);

    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.13),
            rgba(255,255,255,.055)
        );

    box-shadow:
        0 38px 95px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.15);

    backdrop-filter:
        blur(25px);

    -webkit-backdrop-filter:
        blur(25px);

    transform:
        perspective(1400px)
        rotateY(-5deg)
        rotateX(2deg);

    transform-style:
        preserve-3d;

    transition:
        transform .65s cubic-bezier(.2,.8,.2,1),
        box-shadow .65s ease;

}


.dmxMarketingCtaVisual:hover
.dmxMarketingCtaSystem{

    transform:
        perspective(1400px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-6px);

    box-shadow:
        0 48px 120px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(255,255,255,.18);

}


/* ============================================================
   HEADER DEL SISTEMA
============================================================ */

.dmxMarketingCtaSystemHeader{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    padding-bottom:20px;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);

}


.dmxMarketingCtaSystemIdentity{

    display:flex;

    align-items:center;

    gap:12px;

}


.dmxMarketingCtaSystemMark{

    display:grid;

    grid-template-columns:
        repeat(2,9px);

    grid-template-rows:
        repeat(2,9px);

    gap:4px;

    flex:0 0 auto;

    padding:10px;

    border-radius:13px;

    background:
        rgba(255,255,255,.10);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.12);

}


.dmxMarketingCtaSystemMark span{

    display:block;

    border-radius:3px;

}


.dmxMarketingCtaSystemMark span:nth-child(1){

    background:
        var(--dmx-blue);

}


.dmxMarketingCtaSystemMark span:nth-child(2){

    background:
        var(--dmx-cyan);

}


.dmxMarketingCtaSystemMark span:nth-child(3){

    background:
        #8e5bff;

}


.dmxMarketingCtaSystemMark span:nth-child(4){

    background:
        var(--dmx-lime);

}


.dmxMarketingCtaSystemIdentity small{

    display:block;

    margin-bottom:4px;

    color:
        rgba(255,255,255,.54);

    font-size:.61rem;

    font-weight:750;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.dmxMarketingCtaSystemIdentity strong{

    display:block;

    color:var(--dmx-white);

    font-size:.91rem;

    font-weight:850;

}


.dmxMarketingCtaSystemStatus{

    display:inline-flex;

    align-items:center;

    gap:8px;

    flex:0 0 auto;

    padding:
        9px
        12px;

    border:
        1px solid
        rgba(198,255,47,.15);

    border-radius:999px;

    color:var(--dmx-lime);

    background:
        rgba(198,255,47,.07);

    font-size:.60rem;

    font-weight:800;

}


.dmxMarketingCtaSystemStatus > span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:
        var(--dmx-lime);

    box-shadow:
        0 0 0 5px rgba(198,255,47,.09);

    animation:
        dmxMarketingCtaStatusPulse
        2.2s ease-in-out
        infinite;

}


/* ============================================================
   NÚCLEO DEL SISTEMA
============================================================ */

.dmxMarketingCtaSystemCore{

    position:relative;

    display:grid;

    place-items:center;

    min-height:390px;

    margin:
        18px
        0;

}


.dmxMarketingCtaSystemCore::before{

    content:"";

    position:absolute;

    inset:14%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,217,220,.11),
            rgba(6,103,241,.05) 48%,
            transparent 72%
        );

    filter:blur(4px);

}


.dmxMarketingCtaSystemCoreCenter{

    position:relative;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:190px;

    aspect-ratio:1;

    padding:24px;

    border:
        1px solid
        rgba(255,255,255,.17);

    border-radius:50%;

    color:var(--dmx-white);

    background:
        radial-gradient(
            circle at 35% 20%,
            rgba(255,255,255,.13),
            transparent 36%
        ),
        linear-gradient(
            145deg,
            rgba(8,38,77,.98),
            rgba(6,103,241,.90)
        );

    box-shadow:
        0 30px 70px rgba(0,0,0,.30),
        0 0 55px rgba(0,217,220,.11),
        inset 0 1px 0 rgba(255,255,255,.14);

    text-align:center;

}


.dmxMarketingCtaSystemCoreCenter small{

    margin-bottom:7px;

    color:
        rgba(255,255,255,.58);

    font-size:.59rem;

    font-weight:750;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.dmxMarketingCtaSystemCoreCenter strong{

    font-size:
        clamp(1.65rem,3vw,2.45rem);

    font-weight:900;

    letter-spacing:-.055em;

    line-height:.95;

}


.dmxMarketingCtaSystemCoreCenter span{

    max-width:145px;

    margin-top:11px;

    color:
        rgba(255,255,255,.64);

    font-size:.55rem;

    line-height:1.45;

}


/* ============================================================
   ÓRBITAS
============================================================ */

.dmxMarketingCtaSystemOrbit{

    position:absolute;

    z-index:2;

    border:
        1px dashed
        rgba(255,255,255,.16);

    border-radius:50%;

}


.dmxMarketingCtaSystemOrbitOne{

    width:310px;

    aspect-ratio:1;

    animation:
        dmxMarketingCtaOrbitSpin
        28s linear
        infinite;

}


.dmxMarketingCtaSystemOrbitTwo{

    width:390px;

    aspect-ratio:1;

    border-color:
        rgba(0,217,220,.16);

    animation:
        dmxMarketingCtaOrbitSpinReverse
        36s linear
        infinite;

}


/* ============================================================
   NODOS
============================================================ */

.dmxMarketingCtaSystemNode{

    position:absolute;

    z-index:6;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-width:92px;

    min-height:72px;

    padding:
        11px
        13px;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius:19px;

    background:
        rgba(255,255,255,.09);

    box-shadow:
        0 20px 48px rgba(0,0,0,.23);

    backdrop-filter:
        blur(17px);

    -webkit-backdrop-filter:
        blur(17px);

    text-align:center;

}


.dmxMarketingCtaSystemNode > span{

    display:grid;

    place-items:center;

    width:28px;

    height:28px;

    margin-bottom:6px;

    border-radius:9px;

    color:var(--dmx-navy);

    background:
        linear-gradient(
            145deg,
            var(--dmx-white),
            var(--dmx-cyan)
        );

    font-size:.51rem;

    font-weight:900;

}


.dmxMarketingCtaSystemNode strong{

    color:var(--dmx-white);

    font-size:.59rem;

    font-weight:850;

}


.dmxMarketingCtaSystemNodeOne{

    top:5%;

    left:50%;

    transform:
        translateX(-50%);

    animation:
        dmxMarketingCtaNodeOne
        5.8s ease-in-out
        infinite;

}


.dmxMarketingCtaSystemNodeTwo{

    top:50%;

    right:1%;

    transform:
        translateY(-50%);

    animation:
        dmxMarketingCtaNodeTwo
        6.2s ease-in-out
        infinite;

}


.dmxMarketingCtaSystemNodeThree{

    bottom:5%;

    left:50%;

    transform:
        translateX(-50%);

    animation:
        dmxMarketingCtaNodeThree
        6.5s ease-in-out
        infinite;

}


.dmxMarketingCtaSystemNodeFour{

    top:50%;

    left:1%;

    transform:
        translateY(-50%);

    animation:
        dmxMarketingCtaNodeFour
        5.9s ease-in-out
        infinite;

}


/* ============================================================
   FOOTER DEL SISTEMA
============================================================ */

.dmxMarketingCtaSystemFooter{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;

    padding-top:20px;

    border-top:
        1px solid
        rgba(255,255,255,.10);

}


.dmxMarketingCtaSystemFooter > div{

    padding:
        13px
        11px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:14px;

    background:
        rgba(255,255,255,.05);

    text-align:center;

}


.dmxMarketingCtaSystemFooter small{

    display:block;

    margin-bottom:5px;

    color:
        rgba(255,255,255,.48);

    font-size:.53rem;

    font-weight:700;

}


.dmxMarketingCtaSystemFooter strong{

    display:block;

    color:var(--dmx-white);

    font-size:.80rem;

    font-weight:900;

}


/* ============================================================
   ELEMENTOS FLOTANTES
============================================================ */

.dmxMarketingCtaFloating{

    position:absolute;

    z-index:8;

    border:
        1px solid
        rgba(255,255,255,.16);

    background:
        rgba(8,27,53,.76);

    box-shadow:
        0 24px 60px rgba(0,0,0,.28);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);

    pointer-events:none;

}


.dmxMarketingCtaFloating small{

    display:block;

    margin-bottom:3px;

    color:
        rgba(255,255,255,.49);

    font-size:.56rem;

    font-weight:750;

}


.dmxMarketingCtaFloating strong{

    display:block;

    color:var(--dmx-white);

    font-size:.70rem;

    font-weight:850;

}


.dmxMarketingCtaFloatingLead,
.dmxMarketingCtaFloatingConversion{

    display:flex;

    align-items:center;

    gap:10px;

    padding:
        13px
        15px;

    border-radius:17px;

}


.dmxMarketingCtaFloatingLead{

    top:8%;

    left:-4%;

    animation:
        dmxMarketingCtaFloatLead
        5.7s ease-in-out
        infinite;

}


.dmxMarketingCtaFloatingIcon{

    display:grid;

    place-items:center;

    width:34px;

    height:34px;

    flex:0 0 auto;

    border-radius:12px;

    color:var(--dmx-navy);

    background:
        linear-gradient(
            145deg,
            var(--dmx-lime),
            var(--dmx-cyan)
        );

    font-size:1rem;

    font-weight:900;

}


.dmxMarketingCtaFloatingGrowth{

    right:-4%;

    bottom:17%;

    min-width:155px;

    padding:
        15px
        17px;

    border-radius:18px;

    animation:
        dmxMarketingCtaFloatGrowth
        6.1s ease-in-out
        infinite;

}


.dmxMarketingCtaFloatingGrowth strong{

    margin-top:3px;

    font-size:1.3rem;

    letter-spacing:-.045em;

}


.dmxMarketingCtaFloatingGrowth > div{

    height:5px;

    margin-top:9px;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(255,255,255,.09);

}


.dmxMarketingCtaFloatingGrowth > div span{

    display:block;

    width:78%;

    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            var(--dmx-blue),
            var(--dmx-cyan),
            var(--dmx-lime)
        );

}


.dmxMarketingCtaFloatingConversion{

    right:0;

    top:10%;

    animation:
        dmxMarketingCtaFloatConversion
        6.4s ease-in-out
        infinite;

}


.dmxMarketingCtaConversionDot{

    width:13px;

    height:13px;

    flex:0 0 auto;

    border-radius:50%;

    background:
        var(--dmx-lime);

    box-shadow:
        0 0 0 6px rgba(198,255,47,.09),
        0 0 20px rgba(198,255,47,.25);

}


/* ============================================================
   ANIMACIONES
============================================================ */

@keyframes dmxMarketingCtaStatusPulse{

    0%,
    100%{

        transform:
            scale(1);

        box-shadow:
            0 0 0 5px rgba(198,255,47,.09);

    }

    50%{

        transform:
            scale(.86);

        box-shadow:
            0 0 0 9px rgba(198,255,47,.035);

    }

}


@keyframes dmxMarketingCtaOrbitSpin{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


@keyframes dmxMarketingCtaOrbitSpinReverse{

    from{

        transform:
            rotate(360deg);

    }

    to{

        transform:
            rotate(0deg);

    }

}


@keyframes dmxMarketingCtaNodeOne{

    0%,
    100%{

        transform:
            translateX(-50%)
            translateY(0);

    }

    50%{

        transform:
            translateX(-50%)
            translateY(-8px);

    }

}


@keyframes dmxMarketingCtaNodeTwo{

    0%,
    100%{

        transform:
            translateY(-50%)
            translateX(0);

    }

    50%{

        transform:
            translateY(-50%)
            translateX(8px);

    }

}


@keyframes dmxMarketingCtaNodeThree{

    0%,
    100%{

        transform:
            translateX(-50%)
            translateY(0);

    }

    50%{

        transform:
            translateX(-50%)
            translateY(8px);

    }

}


@keyframes dmxMarketingCtaNodeFour{

    0%,
    100%{

        transform:
            translateY(-50%)
            translateX(0);

    }

    50%{

        transform:
            translateY(-50%)
            translateX(-8px);

    }

}


@keyframes dmxMarketingCtaFloatLead{

    0%,
    100%{

        transform:
            translate3d(0,0,0)
            rotate(-1deg);

    }

    50%{

        transform:
            translate3d(7px,-10px,0)
            rotate(1deg);

    }

}


@keyframes dmxMarketingCtaFloatGrowth{

    0%,
    100%{

        transform:
            translate3d(0,0,0);

    }

    50%{

        transform:
            translate3d(-8px,-10px,0);

    }

}


@keyframes dmxMarketingCtaFloatConversion{

    0%,
    100%{

        transform:
            translate3d(0,0,0);

    }

    50%{

        transform:
            translate3d(-7px,-9px,0);

    }

}


/* ============================================================
   RESPONSIVE 1260px
============================================================ */

@media (max-width:1260px){

    .dmxMarketingCtaPanel{

        grid-template-columns:
            minmax(0,1.02fr)
            minmax(440px,.98fr);

        gap:52px;

    }


    .dmxMarketingCtaFloatingLead{

        left:0;

    }


    .dmxMarketingCtaFloatingGrowth{

        right:0;

    }


    .dmxMarketingCtaFloatingConversion{

        right:1%;

    }

}


/* ============================================================
   RESPONSIVE 1080px
============================================================ */

@media (max-width:1080px){

    .dmxMarketingCtaPanel{

        grid-template-columns:
            minmax(0,1fr);

        min-height:auto;

    }


    .dmxMarketingCtaContent{

        max-width:830px;

    }


    .dmxMarketingCtaVisual{

        width:min(100%,700px);

        min-height:620px;

        margin:auto;

    }


    .dmxMarketingCtaSystem{

        width:min(100%,590px);

    }

}


/* ============================================================
   RESPONSIVE 760px
============================================================ */

@media (max-width:760px){

    .dmxMarketingCta{

        padding:
            80px
            0;

    }


    .dmxMarketingCtaPanel{

        gap:46px;

        padding:
            38px
            28px;

        border-radius:32px;

    }


    .dmxMarketingCtaContent h2{

        font-size:
            clamp(2.35rem,10vw,4rem);

    }


    .dmxMarketingCtaTrust{

        grid-template-columns:
            minmax(0,1fr);

    }


    .dmxMarketingCtaTrust > div{

        max-width:420px;

    }


    .dmxMarketingCtaVisual{

        min-height:570px;

    }


    .dmxMarketingCtaSystem{

        padding:
            22px;

        border-radius:25px;

        transform:none;

    }


    .dmxMarketingCtaVisual:hover
    .dmxMarketingCtaSystem{

        transform:
            translateY(-3px);

    }


    .dmxMarketingCtaSystemCore{

        min-height:360px;

    }


    .dmxMarketingCtaSystemOrbitOne{

        width:280px;

    }


    .dmxMarketingCtaSystemOrbitTwo{

        width:350px;

    }


    .dmxMarketingCtaFloatingLead{

        top:1%;

        left:1%;

    }


    .dmxMarketingCtaFloatingConversion{

        top:2%;

        right:1%;

    }


    .dmxMarketingCtaFloatingGrowth{

        bottom:4%;

        right:1%;

    }

}


/* ============================================================
   RESPONSIVE 580px
============================================================ */

@media (max-width:580px){

    .dmxMarketingCtaPanel{

        padding:
            32px
            20px;

        border-radius:26px;

    }


    .dmxMarketingCtaEyebrow{

        align-items:flex-start;

    }


    .dmxMarketingCtaEyebrow > span{

        margin-top:7px;

    }


    .dmxMarketingCtaContent h2{

        letter-spacing:-.048em;

        line-height:1.01;

    }


    .dmxMarketingCtaContent > p{

        font-size:.97rem;

        line-height:1.75;

    }


    .dmxMarketingCtaActions{

        align-items:stretch;

    }


    .dmxMarketingCtaPrimary,
    .dmxMarketingCtaSecondary{

        width:100%;

    }


    .dmxMarketingCtaVisual{

        min-height:auto;

        padding:
            22px
            0
            0;

    }


    .dmxMarketingCtaSystem{

        padding:
            18px;

        border-radius:22px;

    }


    .dmxMarketingCtaSystemHeader{

        align-items:flex-start;

        flex-direction:column;

        gap:13px;

    }


    .dmxMarketingCtaSystemStatus{

        align-self:flex-start;

    }


    .dmxMarketingCtaSystemCore{

        min-height:330px;

    }


    .dmxMarketingCtaSystemCoreCenter{

        width:155px;

        padding:18px;

    }


    .dmxMarketingCtaSystemOrbitOne{

        width:235px;

    }


    .dmxMarketingCtaSystemOrbitTwo{

        width:295px;

    }


    .dmxMarketingCtaSystemNode{

        min-width:73px;

        min-height:59px;

        padding:
            8px
            9px;

        border-radius:15px;

    }


    .dmxMarketingCtaSystemNode > span{

        width:24px;

        height:24px;

        margin-bottom:4px;

    }


    .dmxMarketingCtaSystemNode strong{

        font-size:.51rem;

    }


    .dmxMarketingCtaSystemFooter{

        grid-template-columns:
            minmax(0,1fr);

    }


    .dmxMarketingCtaFloatingLead,
    .dmxMarketingCtaFloatingGrowth,
    .dmxMarketingCtaFloatingConversion{

        display:none;

    }

}


/* ============================================================
   RESPONSIVE 400px
============================================================ */

@media (max-width:400px){

    .dmxMarketingCtaPanel{

        padding:
            28px
            16px;

    }


    .dmxMarketingCtaContent h2{

        font-size:
            clamp(2.15rem,12vw,3.05rem);

    }


    .dmxMarketingCtaSystemCore{

        min-height:290px;

    }


    .dmxMarketingCtaSystemCoreCenter{

        width:135px;

        padding:14px;

    }


    .dmxMarketingCtaSystemCoreCenter strong{

        font-size:1.45rem;

    }


    .dmxMarketingCtaSystemCoreCenter span{

        display:none;

    }


    .dmxMarketingCtaSystemOrbitOne{

        width:205px;

    }


    .dmxMarketingCtaSystemOrbitTwo{

        width:255px;

    }


    .dmxMarketingCtaSystemNode{

        min-width:64px;

        min-height:54px;

    }

}


/* ============================================================
   REDUCCIÓN DE MOVIMIENTO
============================================================ */

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

    .dmxMarketingCtaSystemStatus > span,
    .dmxMarketingCtaSystemOrbitOne,
    .dmxMarketingCtaSystemOrbitTwo,
    .dmxMarketingCtaSystemNodeOne,
    .dmxMarketingCtaSystemNodeTwo,
    .dmxMarketingCtaSystemNodeThree,
    .dmxMarketingCtaSystemNodeFour,
    .dmxMarketingCtaFloatingLead,
    .dmxMarketingCtaFloatingGrowth,
    .dmxMarketingCtaFloatingConversion{

        animation:none;

    }


    .dmxMarketingCtaPrimary,
    .dmxMarketingCtaPrimary svg,
    .dmxMarketingCtaSecondary,
    .dmxMarketingCtaTrust > div,
    .dmxMarketingCtaSystem{

        transition:none;

    }

}