/* ============================================================
   DIGITALIZANDO MX
   MARKETING DIGITAL
   COMPONENTE: PROCESO DE MARKETING
============================================================ */

.dmxMarketingProcess{

    position:relative;

    overflow:hidden;

    padding:
        clamp(105px,10vw,175px)
        0;

    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(6,103,241,.12),
            transparent 33%
        ),
        radial-gradient(
            circle at 92% 20%,
            rgba(0,217,220,.11),
            transparent 30%
        ),
        radial-gradient(
            circle at 74% 86%,
            rgba(142,91,255,.12),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f7fbfd 0%,
            #ffffff 42%,
            #eef6fb 100%
        );

    isolation:isolate;

}


.dmxMarketingProcess::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

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

    background-size:
        62px 62px;

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

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

}


.dmxMarketingProcess::after{

    content:"";

    position:absolute;

    top:38%;

    left:-240px;

    z-index:-1;

    width:520px;

    height:520px;

    border-radius:50%;

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

    filter:blur(25px);

    pointer-events:none;

}


/* ============================================================
   ENCABEZADO
============================================================ */

.dmxMarketingProcessHeader{

    position:relative;

    z-index:3;

}


.dmxMarketingProcessEyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

}


.dmxMarketingProcessEyebrow > span{

    width:40px;

    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--dmx-blue),
            var(--dmx-cyan),
            #8e5bff
        );

    box-shadow:
        0 0 18px rgba(0,217,220,.34);

}


.dmxMarketingProcessEyebrow small{

    color:var(--dmx-blue);

    font-size:.75rem;

    font-weight:850;

    letter-spacing:.15em;

    line-height:1.2;

    text-transform:uppercase;

}


.dmxMarketingProcessHeaderGrid{

    display:grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(360px,.8fr);

    gap:
        clamp(48px,7vw,110px);

    align-items:end;

}


.dmxMarketingProcessHeader h2{

    max-width:820px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(2.8rem,5vw,5.5rem);

    font-weight:850;

    letter-spacing:-.06em;

    line-height:.97;

    text-wrap:balance;

}


.dmxMarketingProcessHeader h2 span{

    display:block;

    margin-top:12px;

    color:transparent;

    background:
        linear-gradient(
            108deg,
            var(--dmx-blue) 0%,
            var(--dmx-cyan) 48%,
            #8e5bff 100%
        );

    background-clip:text;

    -webkit-background-clip:text;

}


.dmxMarketingProcessHeaderContent{

    max-width:520px;

}


.dmxMarketingProcessHeaderContent > p{

    margin:0;

    color:var(--dmx-muted);

    font-size:
        clamp(1rem,1.25vw,1.14rem);

    line-height:1.82;

}


.dmxMarketingProcessHeaderMeta{

    display:grid;

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

    gap:12px;

    margin-top:30px;

}


.dmxMarketingProcessHeaderMeta > div{

    padding:
        17px
        14px;

    border:
        1px solid
        rgba(8,38,77,.08);

    border-radius:17px;

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

    box-shadow:
        0 12px 28px rgba(15,51,88,.055);

    text-align:center;

    backdrop-filter:
        blur(14px);

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

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

}


.dmxMarketingProcessHeaderMeta > div:hover{

    transform:
        translateY(-4px);

    border-color:
        rgba(6,103,241,.18);

    box-shadow:
        0 18px 38px rgba(15,51,88,.09);

}


.dmxMarketingProcessHeaderMeta strong{

    display:block;

    color:var(--dmx-ink);

    font-size:1.28rem;

    font-weight:900;

    letter-spacing:-.04em;

}


.dmxMarketingProcessHeaderMeta span{

    display:block;

    margin-top:5px;

    color:var(--dmx-muted);

    font-size:.62rem;

    font-weight:750;

    line-height:1.35;

}


/* ============================================================
   RECORRIDO PRINCIPAL
============================================================ */

.dmxMarketingProcessJourney{

    position:relative;

    z-index:2;

    margin-top:
        clamp(75px,8vw,120px);

}


.dmxMarketingProcessJourneyLine{

    position:absolute;

    top:32px;

    bottom:32px;

    left:50%;

    width:2px;

    z-index:0;

    overflow:hidden;

    border-radius:999px;

    background:
        rgba(8,38,77,.08);

    transform:
        translateX(-50%);

}


.dmxMarketingProcessJourneyLine > span{

    display:block;

    width:100%;

    height:100%;

    border-radius:inherit;

    background:
        linear-gradient(
            180deg,
            var(--dmx-blue) 0%,
            var(--dmx-cyan) 38%,
            #8e5bff 72%,
            var(--dmx-lime) 100%
        );

    transform-origin:
        top center;

    animation:
        dmxMarketingProcessJourneyReveal
        2.2s cubic-bezier(.2,.8,.2,1)
        both;

}


.dmxMarketingProcessSteps{

    position:relative;

    z-index:2;

    display:grid;

    gap:
        clamp(48px,6vw,86px);

    margin:0;

    padding:0;

    list-style:none;

}


.dmxMarketingProcessStep{

    position:relative;

    display:grid;

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

    gap:30px;

    align-items:center;

}


.dmxMarketingProcessStep:nth-child(odd)
.dmxMarketingProcessStepCard{

    grid-column:1;

    grid-row:1;

}


.dmxMarketingProcessStep:nth-child(odd)
.dmxMarketingProcessStepNumber{

    grid-column:2;

    grid-row:1;

}


.dmxMarketingProcessStep:nth-child(even)
.dmxMarketingProcessStepCard{

    grid-column:3;

    grid-row:1;

}


.dmxMarketingProcessStep:nth-child(even)
.dmxMarketingProcessStepNumber{

    grid-column:2;

    grid-row:1;

}


/* ============================================================
   NÚMERO DE PASO
============================================================ */

.dmxMarketingProcessStepNumber{

    position:relative;

    z-index:4;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:108px;

    min-height:108px;

    margin:auto;

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

    border-radius:31px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(237,246,252,.94)
        );

    box-shadow:
        0 24px 55px rgba(15,51,88,.15),
        inset 0 1px 0 rgba(255,255,255,.98);

    backdrop-filter:
        blur(18px);

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

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

}


.dmxMarketingProcessStepNumber::before{

    content:"";

    position:absolute;

    inset:9px;

    border:
        1px solid
        rgba(6,103,241,.10);

    border-radius:23px;

    pointer-events:none;

}


.dmxMarketingProcessStep:hover
.dmxMarketingProcessStepNumber{

    transform:
        translateY(-6px)
        rotate(-3deg);

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

    box-shadow:
        0 32px 65px rgba(15,51,88,.20),
        0 0 35px rgba(0,217,220,.14);

}


.dmxMarketingProcessStepNumber > span{

    position:relative;

    z-index:2;

    color:var(--dmx-blue);

    font-size:1.28rem;

    font-weight:900;

    letter-spacing:-.04em;

}


.dmxMarketingProcessStepNumber small{

    position:relative;

    z-index:2;

    margin-top:5px;

    color:var(--dmx-muted);

    font-size:.60rem;

    font-weight:850;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/* ============================================================
   TARJETAS
============================================================ */

.dmxMarketingProcessStepCard{

    position:relative;

    overflow:hidden;

    padding:
        clamp(27px,3vw,38px);

    border:
        1px solid
        rgba(8,38,77,.08);

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(244,249,253,.84)
        );

    box-shadow:
        0 28px 78px rgba(15,51,88,.10),
        inset 0 1px 0 rgba(255,255,255,.96);

    backdrop-filter:
        blur(22px);

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

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

}


.dmxMarketingProcessStepCard::before{

    content:"";

    position:absolute;

    top:-95px;

    right:-95px;

    width:220px;

    height:220px;

    border-radius:50%;

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

    pointer-events:none;

}


.dmxMarketingProcessStep:nth-child(2)
.dmxMarketingProcessStepCard::before,
.dmxMarketingProcessStep:nth-child(5)
.dmxMarketingProcessStepCard::before{

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

}


.dmxMarketingProcessStep:nth-child(3)
.dmxMarketingProcessStepCard::before,
.dmxMarketingProcessStep:nth-child(6)
.dmxMarketingProcessStepCard::before{

    background:
        radial-gradient(
            circle,
            rgba(142,91,255,.12),
            rgba(142,91,255,0) 70%
        );

}


.dmxMarketingProcessStepCard::after{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:
        linear-gradient(
            90deg,
            var(--dmx-blue),
            var(--dmx-cyan),
            #8e5bff
        );

    transform-origin:
        left center;

    transform:
        scaleX(.28);

    transition:
        transform .45s ease;

}


.dmxMarketingProcessStep:hover
.dmxMarketingProcessStepCard{

    transform:
        translateY(-7px);

    border-color:
        rgba(6,103,241,.18);

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

}


.dmxMarketingProcessStep:hover
.dmxMarketingProcessStepCard::after{

    transform:
        scaleX(1);

}


/* ============================================================
   PARTE SUPERIOR DE TARJETA
============================================================ */

.dmxMarketingProcessStepTop{

    position:relative;

    z-index:2;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    margin-bottom:23px;

}


.dmxMarketingProcessStepIcon{

    position:relative;

    display:grid;

    place-items:center;

    width:54px;

    height:54px;

    flex:0 0 auto;

    border-radius:18px;

    color:var(--dmx-blue);

    background:
        linear-gradient(
            145deg,
            rgba(6,103,241,.14),
            rgba(0,217,220,.08)
        );

    box-shadow:
        inset 0 0 0 1px rgba(6,103,241,.10),
        0 12px 25px rgba(6,103,241,.08);

    transition:
        transform .35s ease,
        color .35s ease,
        background .35s ease;

}


.dmxMarketingProcessStep:hover
.dmxMarketingProcessStepIcon{

    transform:
        rotate(-5deg)
        scale(1.06);

    color:var(--dmx-white);

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

}


.dmxMarketingProcessStepLabel{

    display:inline-flex;

    align-items:center;

    min-height:31px;

    padding:
        0
        12px;

    border:
        1px solid
        rgba(8,38,77,.08);

    border-radius:999px;

    color:var(--dmx-navy);

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

    font-size:.62rem;

    font-weight:850;

    letter-spacing:.07em;

    text-transform:uppercase;

}


/* ============================================================
   ICONOS DEL PROCESO
============================================================ */

.dmxMarketingProcessIconDiscover{

    position:relative;

    width:25px;

    height:25px;

    border:
        2px solid
        currentColor;

    border-radius:50%;

}


.dmxMarketingProcessIconDiscover::before{

    content:"";

    position:absolute;

    right:-7px;

    bottom:-5px;

    width:10px;

    height:2px;

    border-radius:999px;

    background:
        currentColor;

    transform:
        rotate(45deg);

}


.dmxMarketingProcessIconDiscover::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:6px;

    height:6px;

    border-radius:50%;

    background:
        currentColor;

    transform:
        translate(-50%,-50%);

}


.dmxMarketingProcessIconPlan{

    position:relative;

    width:25px;

    height:25px;

    border:
        2px solid
        currentColor;

    border-radius:6px;

}


.dmxMarketingProcessIconPlan::before{

    content:"";

    position:absolute;

    top:5px;

    left:5px;

    width:11px;

    height:2px;

    border-radius:999px;

    background:
        currentColor;

    box-shadow:
        0 5px 0 currentColor,
        0 10px 0 currentColor;

}


.dmxMarketingProcessIconPlan::after{

    content:"";

    position:absolute;

    top:-5px;

    left:5px;

    width:11px;

    height:7px;

    border:
        2px solid
        currentColor;

    border-radius:
        5px 5px 0 0;

    border-bottom:0;

}


.dmxMarketingProcessIconCreate{

    position:relative;

    width:25px;

    height:25px;

}


.dmxMarketingProcessIconCreate::before{

    content:"";

    position:absolute;

    inset:2px;

    border:
        2px solid
        currentColor;

    border-radius:6px;

    transform:
        rotate(8deg);

}


.dmxMarketingProcessIconCreate::after{

    content:"";

    position:absolute;

    top:7px;

    left:7px;

    width:11px;

    height:11px;

    border-radius:3px;

    background:
        currentColor;

    box-shadow:
        8px -8px 0 -3px currentColor;

}


.dmxMarketingProcessIconLaunch{

    position:relative;

    width:25px;

    height:25px;

    transform:
        rotate(-12deg);

}


.dmxMarketingProcessIconLaunch::before{

    content:"";

    position:absolute;

    top:1px;

    left:8px;

    width:11px;

    height:19px;

    border:
        2px solid
        currentColor;

    border-radius:
        50% 50% 35% 35%;

}


.dmxMarketingProcessIconLaunch::after{

    content:"";

    position:absolute;

    bottom:0;

    left:3px;

    width:19px;

    height:8px;

    border-bottom:
        2px solid
        currentColor;

    border-radius:50%;

}


.dmxMarketingProcessIconMeasure{

    position:relative;

    width:25px;

    height:24px;

    border-left:
        2px solid
        currentColor;

    border-bottom:
        2px solid
        currentColor;

}


.dmxMarketingProcessIconMeasure::before{

    content:"";

    position:absolute;

    left:4px;

    bottom:4px;

    width:4px;

    height:8px;

    border-radius:2px 2px 0 0;

    background:
        currentColor;

    box-shadow:
        6px -4px 0 currentColor,
        12px -9px 0 currentColor;

}


.dmxMarketingProcessIconMeasure::after{

    content:"";

    position:absolute;

    top:0;

    right:-1px;

    width:7px;

    height:7px;

    border-top:
        2px solid
        currentColor;

    border-right:
        2px solid
        currentColor;

}


.dmxMarketingProcessIconEvolve{

    position:relative;

    width:25px;

    height:25px;

    border:
        2px solid
        currentColor;

    border-radius:50%;

    border-left-color:transparent;

}


.dmxMarketingProcessIconEvolve::before{

    content:"";

    position:absolute;

    top:-2px;

    left:-3px;

    width:8px;

    height:8px;

    border-top:
        2px solid
        currentColor;

    border-left:
        2px solid
        currentColor;

    transform:
        rotate(-20deg);

}


.dmxMarketingProcessIconEvolve::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:5px;

    height:5px;

    border-radius:50%;

    background:
        currentColor;

    box-shadow:
        0 -8px 0 -1px currentColor,
        7px 4px 0 -1px currentColor,
        -7px 4px 0 -1px currentColor;

    transform:
        translate(-50%,-50%);

}


/* ============================================================
   TEXTO DE TARJETA
============================================================ */

.dmxMarketingProcessStepCard h3{

    position:relative;

    z-index:2;

    max-width:520px;

    margin:
        0
        0
        14px;

    color:var(--dmx-ink);

    font-size:
        clamp(1.42rem,2.2vw,2.05rem);

    font-weight:850;

    letter-spacing:-.04em;

    line-height:1.08;

    text-wrap:balance;

}


.dmxMarketingProcessStepCard > p{

    position:relative;

    z-index:2;

    margin:0;

    color:var(--dmx-muted);

    font-size:.94rem;

    line-height:1.75;

}


.dmxMarketingProcessStepCard ul{

    position:relative;

    z-index:2;

    display:grid;

    gap:9px;

    margin:
        22px
        0
        0;

    padding:0;

    list-style:none;

}


.dmxMarketingProcessStepCard ul li{

    position:relative;

    padding-left:24px;

    color:var(--dmx-navy);

    font-size:.79rem;

    font-weight:750;

    line-height:1.45;

}


.dmxMarketingProcessStepCard ul li::before{

    content:"";

    position:absolute;

    top:6px;

    left:0;

    width:11px;

    height:6px;

    border-left:
        2px solid
        var(--dmx-cyan);

    border-bottom:
        2px solid
        var(--dmx-cyan);

    transform:
        rotate(-45deg);

}


/* ============================================================
   RESULTADO
============================================================ */

.dmxMarketingProcessStepResult{

    position:relative;

    z-index:2;

    margin-top:24px;

    padding:
        16px
        18px;

    border:
        1px solid
        rgba(6,103,241,.10);

    border-radius:17px;

    background:
        linear-gradient(
            110deg,
            rgba(6,103,241,.07),
            rgba(0,217,220,.06)
        );

}


.dmxMarketingProcessStepResult small{

    display:block;

    margin-bottom:5px;

    color:var(--dmx-blue);

    font-size:.60rem;

    font-weight:850;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.dmxMarketingProcessStepResult strong{

    display:block;

    color:var(--dmx-ink);

    font-size:.80rem;

    font-weight:850;

    line-height:1.45;

}


/* ============================================================
   OPERACIÓN CONECTADA
============================================================ */

.dmxMarketingProcessOperation{

    position:relative;

    z-index:3;

    display:grid;

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

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

    align-items:center;

    margin-top:
        clamp(95px,10vw,150px);

    padding:
        clamp(34px,5vw,62px);

    overflow:hidden;

    border:
        1px solid
        rgba(8,38,77,.08);

    border-radius:34px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.94),
            rgba(239,247,252,.84)
        );

    box-shadow:
        0 38px 100px rgba(15,51,88,.14),
        inset 0 1px 0 rgba(255,255,255,.98);

    backdrop-filter:
        blur(25px);

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

}


.dmxMarketingProcessOperation::before{

    content:"";

    position:absolute;

    top:-170px;

    right:-140px;

    width:480px;

    height:480px;

    border-radius:50%;

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

    pointer-events:none;

}


.dmxMarketingProcessOperation::after{

    content:"";

    position:absolute;

    bottom:-180px;

    left:-150px;

    width:430px;

    height:430px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(142,91,255,.12),
            rgba(142,91,255,0) 70%
        );

    pointer-events:none;

}


.dmxMarketingProcessOperationContent{

    position:relative;

    z-index:3;

}


.dmxMarketingProcessOperationEyebrow{

    display:inline-flex;

    align-items:center;

    gap:11px;

    margin-bottom:20px;

}


.dmxMarketingProcessOperationEyebrow > span{

    width:34px;

    height:2px;

    border-radius:999px;

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

}


.dmxMarketingProcessOperationEyebrow small{

    color:var(--dmx-blue);

    font-size:.68rem;

    font-weight:850;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.dmxMarketingProcessOperationContent h3{

    max-width:560px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(2.05rem,4vw,4.1rem);

    font-weight:850;

    letter-spacing:-.055em;

    line-height:.98;

    text-wrap:balance;

}


.dmxMarketingProcessOperationContent > p{

    max-width:600px;

    margin:
        25px
        0
        0;

    color:var(--dmx-muted);

    font-size:1rem;

    line-height:1.8;

}


.dmxMarketingProcessOperationTags{

    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin-top:28px;

}


.dmxMarketingProcessOperationTags span{

    display:inline-flex;

    align-items:center;

    min-height:35px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(8,38,77,.09);

    border-radius:999px;

    color:var(--dmx-navy);

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

    font-size:.70rem;

    font-weight:800;

    box-shadow:
        0 8px 20px rgba(15,51,88,.04);

}


/* ============================================================
   ÓRBITA
============================================================ */

.dmxMarketingProcessOperationVisual{

    position:relative;

    z-index:3;

    display:grid;

    place-items:center;

    min-height:540px;

}


.dmxMarketingProcessOrbit{

    position:relative;

    width:
        min(100%,480px);

    aspect-ratio:1;

}


.dmxMarketingProcessOrbit::before{

    content:"";

    position:absolute;

    inset:14%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.96) 0%,
            rgba(236,246,252,.90) 60%,
            rgba(6,103,241,.08) 100%
        );

    box-shadow:
        0 30px 80px rgba(15,51,88,.16),
        inset 0 1px 0 rgba(255,255,255,.98);

}


.dmxMarketingProcessOrbitRing{

    position:absolute;

    border:
        1px dashed
        rgba(6,103,241,.20);

    border-radius:50%;

}


.dmxMarketingProcessOrbitRingOuter{

    inset:2%;

    animation:
        dmxMarketingProcessOrbitSpin
        32s linear
        infinite;

}


.dmxMarketingProcessOrbitRingInner{

    inset:20%;

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

    animation:
        dmxMarketingProcessOrbitSpinReverse
        24s linear
        infinite;

}


.dmxMarketingProcessOrbitCore{

    position:absolute;

    top:50%;

    left:50%;

    z-index:4;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:46%;

    aspect-ratio:1;

    padding:25px;

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

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            var(--dmx-navy),
            #0b4d96 58%,
            var(--dmx-blue)
        );

    box-shadow:
        0 30px 70px rgba(8,38,77,.28),
        inset 0 1px 0 rgba(255,255,255,.15);

    color:var(--dmx-white);

    text-align:center;

    transform:
        translate(-50%,-50%);

}


.dmxMarketingProcessOrbitCore small{

    margin-bottom:6px;

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

    font-size:.63rem;

    font-weight:750;

    letter-spacing:.09em;

    text-transform:uppercase;

}


.dmxMarketingProcessOrbitCore strong{

    font-size:
        clamp(1.55rem,3vw,2.6rem);

    font-weight:900;

    letter-spacing:-.05em;

    line-height:.95;

}


.dmxMarketingProcessOrbitCore span{

    max-width:150px;

    margin-top:11px;

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

    font-size:.57rem;

    font-weight:700;

    line-height:1.45;

}


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

.dmxMarketingProcessOrbitNode{

    position:absolute;

    z-index:5;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    width:104px;

    min-height:82px;

    padding:12px;

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

    border-radius:22px;

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

    box-shadow:
        0 22px 55px rgba(15,51,88,.16);

    backdrop-filter:
        blur(18px);

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

    text-align:center;

}


.dmxMarketingProcessOrbitNode > span{

    display:grid;

    place-items:center;

    width:29px;

    height:29px;

    margin-bottom:7px;

    border-radius:10px;

    color:var(--dmx-white);

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

    font-size:.55rem;

    font-weight:900;

}


.dmxMarketingProcessOrbitNode small{

    color:var(--dmx-ink);

    font-size:.61rem;

    font-weight:850;

}


.dmxMarketingProcessOrbitNodeOne{

    top:1%;

    left:50%;

    transform:
        translateX(-50%);

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

}


.dmxMarketingProcessOrbitNodeTwo{

    top:50%;

    right:-1%;

    transform:
        translateY(-50%);

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

}


.dmxMarketingProcessOrbitNodeThree{

    bottom:1%;

    left:50%;

    transform:
        translateX(-50%);

    animation:
        dmxMarketingProcessNodeThree
        6.6s ease-in-out
        infinite;

}


.dmxMarketingProcessOrbitNodeFour{

    top:50%;

    left:-1%;

    transform:
        translateY(-50%);

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

}


/* ============================================================
   CIERRE
============================================================ */

.dmxMarketingProcessClosing{

    position:relative;

    z-index:4;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:
        clamp(30px,5vw,70px);

    margin-top:
        clamp(64px,7vw,100px);

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

    overflow:hidden;

    border-radius:30px;

    background:
        radial-gradient(
            circle at 84% 20%,
            rgba(0,217,220,.22),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            var(--dmx-navy) 0%,
            #0b4381 48%,
            var(--dmx-blue) 100%
        );

    box-shadow:
        0 36px 90px rgba(8,38,77,.25);

}


.dmxMarketingProcessClosing::before{

    content:"";

    position:absolute;

    top:-110px;

    right:8%;

    width:260px;

    height:260px;

    border:
        40px solid
        rgba(255,255,255,.05);

    border-radius:50%;

    pointer-events:none;

}


.dmxMarketingProcessClosing > div{

    position:relative;

    z-index:2;

    max-width:760px;

}


.dmxMarketingProcessClosing small{

    display:block;

    margin-bottom:10px;

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

    font-size:.68rem;

    font-weight:850;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.dmxMarketingProcessClosing h3{

    margin:0;

    color:var(--dmx-white);

    font-size:
        clamp(1.65rem,3.2vw,3.25rem);

    font-weight:850;

    letter-spacing:-.045em;

    line-height:1.04;

    text-wrap:balance;

}


.dmxMarketingProcessClosingButton{

    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:56px;

    flex:0 0 auto;

    padding:
        0
        24px;

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

    border-radius:17px;

    color:var(--dmx-navy);

    background:
        var(--dmx-white);

    box-shadow:
        0 18px 40px rgba(0,0,0,.16);

    font-size:.90rem;

    font-weight:900;

    line-height:1;

    text-decoration:none;

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

}


.dmxMarketingProcessClosingButton svg{

    transition:
        transform .3s ease;

}


.dmxMarketingProcessClosingButton:hover{

    transform:
        translateY(-4px);

    background:
        #f3fbff;

    box-shadow:
        0 25px 50px rgba(0,0,0,.22);

}


.dmxMarketingProcessClosingButton:hover svg{

    transform:
        translateX(4px);

}


.dmxMarketingProcessClosingButton:focus-visible{

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

    outline-offset:4px;

}


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

@keyframes dmxMarketingProcessJourneyReveal{

    from{

        transform:
            scaleY(0);

    }

    to{

        transform:
            scaleY(1);

    }

}


@keyframes dmxMarketingProcessOrbitSpin{

    from{

        transform:
            rotate(0deg);

    }

    to{

        transform:
            rotate(360deg);

    }

}


@keyframes dmxMarketingProcessOrbitSpinReverse{

    from{

        transform:
            rotate(360deg);

    }

    to{

        transform:
            rotate(0deg);

    }

}


@keyframes dmxMarketingProcessNodeOne{

    0%,
    100%{

        transform:
            translateX(-50%)
            translateY(0)
            rotate(-1deg);

    }

    50%{

        transform:
            translateX(-50%)
            translateY(-9px)
            rotate(1deg);

    }

}


@keyframes dmxMarketingProcessNodeTwo{

    0%,
    100%{

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

    }

    50%{

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

    }

}


@keyframes dmxMarketingProcessNodeThree{

    0%,
    100%{

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

    }

    50%{

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

    }

}


@keyframes dmxMarketingProcessNodeFour{

    0%,
    100%{

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

    }

    50%{

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

    }

}


/* ============================================================
   RESPONSIVE 1250px
============================================================ */

@media (max-width:1250px){

    .dmxMarketingProcessHeaderGrid{

        grid-template-columns:
            minmax(0,1.12fr)
            minmax(340px,.88fr);

        gap:55px;

    }


    .dmxMarketingProcessStep{

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

        gap:22px;

    }


    .dmxMarketingProcessStepNumber{

        width:96px;

        min-height:96px;

        border-radius:27px;

    }


    .dmxMarketingProcessOperation{

        grid-template-columns:
            minmax(0,.9fr)
            minmax(400px,1.1fr);

        gap:45px;

    }

}


/* ============================================================
   RESPONSIVE 1050px
============================================================ */

@media (max-width:1050px){

    .dmxMarketingProcessHeaderGrid{

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

        align-items:start;

    }


    .dmxMarketingProcessHeaderContent{

        max-width:760px;

    }


    .dmxMarketingProcessStep{

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

        gap:24px;

        align-items:start;

    }


    .dmxMarketingProcessJourneyLine{

        left:41px;

        transform:none;

    }


    .dmxMarketingProcessStep:nth-child(odd)
    .dmxMarketingProcessStepCard,
    .dmxMarketingProcessStep:nth-child(even)
    .dmxMarketingProcessStepCard{

        grid-column:2;

        grid-row:1;

    }


    .dmxMarketingProcessStep:nth-child(odd)
    .dmxMarketingProcessStepNumber,
    .dmxMarketingProcessStep:nth-child(even)
    .dmxMarketingProcessStepNumber{

        grid-column:1;

        grid-row:1;

    }


    .dmxMarketingProcessStepNumber{

        width:82px;

        min-height:82px;

        border-radius:24px;

    }


    .dmxMarketingProcessStepNumber::before{

        inset:7px;

        border-radius:18px;

    }


    .dmxMarketingProcessOperation{

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

    }


    .dmxMarketingProcessOperationContent{

        max-width:760px;

    }


    .dmxMarketingProcessOperationVisual{

        width:min(100%,610px);

        margin:auto;

    }

}


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

@media (max-width:760px){

    .dmxMarketingProcess{

        padding:
            90px
            0;

    }


    .dmxMarketingProcessHeader h2{

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

    }


    .dmxMarketingProcessHeaderMeta{

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

    }


    .dmxMarketingProcessJourney{

        margin-top:65px;

    }


    .dmxMarketingProcessStep{

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

        gap:18px;

    }


    .dmxMarketingProcessJourneyLine{

        left:34px;

    }


    .dmxMarketingProcessStepNumber{

        width:68px;

        min-height:68px;

        border-radius:20px;

    }


    .dmxMarketingProcessStepNumber::before{

        inset:6px;

        border-radius:15px;

    }


    .dmxMarketingProcessStepNumber > span{

        font-size:1rem;

    }


    .dmxMarketingProcessStepNumber small{

        display:none;

    }


    .dmxMarketingProcessStepCard{

        padding:
            25px
            22px;

        border-radius:24px;

    }


    .dmxMarketingProcessStepCard h3{

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

    }


    .dmxMarketingProcessOperation{

        margin-top:85px;

        padding:
            32px 24px;

        border-radius:28px;

    }


    .dmxMarketingProcessOperationVisual{

        min-height:480px;

    }


    .dmxMarketingProcessOrbit{

        width:min(100%,420px);

    }


    .dmxMarketingProcessOrbitNode{

        width:90px;

        min-height:72px;

        border-radius:18px;

    }


    .dmxMarketingProcessClosing{

        align-items:flex-start;

        flex-direction:column;

    }


    .dmxMarketingProcessClosingButton{

        width:100%;

    }

}


/* ============================================================
   RESPONSIVE 560px
============================================================ */

@media (max-width:560px){

    .dmxMarketingProcess::before{

        background-size:
            42px 42px;

    }


    .dmxMarketingProcessEyebrow{

        align-items:flex-start;

    }


    .dmxMarketingProcessEyebrow > span{

        margin-top:7px;

    }


    .dmxMarketingProcessHeader h2{

        letter-spacing:-.048em;

        line-height:1.01;

    }


    .dmxMarketingProcessHeaderMeta{

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

    }


    .dmxMarketingProcessHeaderMeta > div{

        display:flex;

        align-items:center;

        justify-content:space-between;

        gap:15px;

        text-align:left;

    }


    .dmxMarketingProcessHeaderMeta span{

        margin-top:0;

        text-align:right;

    }


    .dmxMarketingProcessStep{

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

    }


    .dmxMarketingProcessJourneyLine{

        display:none;

    }


    .dmxMarketingProcessStep:nth-child(odd)
    .dmxMarketingProcessStepCard,
    .dmxMarketingProcessStep:nth-child(even)
    .dmxMarketingProcessStepCard{

        grid-column:1;

        grid-row:2;

    }


    .dmxMarketingProcessStep:nth-child(odd)
    .dmxMarketingProcessStepNumber,
    .dmxMarketingProcessStep:nth-child(even)
    .dmxMarketingProcessStepNumber{

        grid-column:1;

        grid-row:1;

        margin:0;

    }


    .dmxMarketingProcessStepNumber{

        flex-direction:row;

        justify-content:flex-start;

        gap:10px;

        width:auto;

        min-height:50px;

        padding:
            0
            16px;

        border-radius:16px;

    }


    .dmxMarketingProcessStepNumber::before{

        display:none;

    }


    .dmxMarketingProcessStepNumber small{

        display:block;

        margin-top:0;

    }


    .dmxMarketingProcessStepCard{

        padding:
            22px
            18px;

        border-radius:21px;

    }


    .dmxMarketingProcessStepTop{

        align-items:flex-start;

        flex-direction:column;

        gap:12px;

    }


    .dmxMarketingProcessStepIcon{

        width:50px;

        height:50px;

        border-radius:16px;

    }


    .dmxMarketingProcessOperationContent h3{

        font-size:
            clamp(2rem,10vw,3rem);

    }


    .dmxMarketingProcessOperationVisual{

        min-height:410px;

    }


    .dmxMarketingProcessOrbit{

        width:min(100%,350px);

    }


    .dmxMarketingProcessOrbitCore{

        width:48%;

        padding:17px;

    }


    .dmxMarketingProcessOrbitNode{

        width:76px;

        min-height:63px;

        padding:8px;

        border-radius:15px;

    }


    .dmxMarketingProcessOrbitNode > span{

        width:25px;

        height:25px;

        margin-bottom:5px;

    }


    .dmxMarketingProcessOrbitNode small{

        font-size:.52rem;

    }


    .dmxMarketingProcessClosing{

        padding:
            28px
            22px;

        border-radius:25px;

    }

}


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

@media (max-width:400px){

    .dmxMarketingProcessOperation{

        padding:
            28px
            18px;

    }


    .dmxMarketingProcessOperationVisual{

        min-height:350px;

    }


    .dmxMarketingProcessOrbit{

        width:min(100%,300px);

    }


    .dmxMarketingProcessOrbitNode{

        width:68px;

        min-height:58px;

    }


    .dmxMarketingProcessOrbitCore small{

        font-size:.50rem;

    }


    .dmxMarketingProcessOrbitCore strong{

        font-size:1.38rem;

    }


    .dmxMarketingProcessOrbitCore span{

        display:none;

    }


    .dmxMarketingProcessOrbitNodeOne{

        top:0;

    }


    .dmxMarketingProcessOrbitNodeTwo{

        right:-4%;

    }


    .dmxMarketingProcessOrbitNodeThree{

        bottom:0;

    }


    .dmxMarketingProcessOrbitNodeFour{

        left:-4%;

    }

}


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

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

    .dmxMarketingProcessJourneyLine > span,
    .dmxMarketingProcessOrbitRingOuter,
    .dmxMarketingProcessOrbitRingInner,
    .dmxMarketingProcessOrbitNodeOne,
    .dmxMarketingProcessOrbitNodeTwo,
    .dmxMarketingProcessOrbitNodeThree,
    .dmxMarketingProcessOrbitNodeFour{

        animation:none;

    }


    .dmxMarketingProcessHeaderMeta > div,
    .dmxMarketingProcessStepNumber,
    .dmxMarketingProcessStepCard,
    .dmxMarketingProcessStepIcon,
    .dmxMarketingProcessClosingButton,
    .dmxMarketingProcessClosingButton svg{

        transition:none;

    }

}