/* ============================================================
   Digitalizando MX
   Incluye — Sitios web
============================================================ */


/* ============================================================
   Sección
============================================================ */

.dmxWebIncludes {
    position: relative;

    padding:
        145px
        0
        150px;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f7fbff 0%,
            #ffffff 24%,
            #ffffff 100%
        );
}

.dmxWebIncludesContainer {
    position: relative;
    z-index: 2;
}


/* ============================================================
   Fondo
============================================================ */

.dmxWebIncludesBackground {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.dmxWebIncludesGrid {
    position: absolute;
    inset: 0;

    opacity: 0.22;

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

    background-size:
        58px
        58px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            black 55%,
            transparent 92%
        );
}

.dmxWebIncludesGlow {
    position: absolute;

    border-radius: 50%;

    filter: blur(100px);
}

.dmxWebIncludesGlowOne {
    top: -320px;
    left: -340px;

    width: 900px;
    height: 900px;

    background: rgba(0, 217, 220, 0.1);
}

.dmxWebIncludesGlowTwo {
    right: -380px;
    bottom: 80px;

    width: 900px;
    height: 900px;

    background: rgba(6, 103, 241, 0.08);
}


/* ============================================================
   Encabezado
============================================================ */

.dmxWebIncludesHeader {
    margin-bottom: 70px;
}

.dmxWebIncludesEyebrow {
    display: flex;
    align-items: center;

    gap: 13px;
}

.dmxWebIncludesEyebrow > span {
    width: 48px;
    height: 1px;

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

.dmxWebIncludesEyebrow small {
    color: var(--dmx-blue);

    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.dmxWebIncludesHeaderGrid {
    margin-top: 27px;

    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(340px, 0.65fr);

    align-items: end;

    gap: 70px;
}

.dmxWebIncludesHeader h2 {
    max-width: 820px;

    margin: 0;

    color: var(--dmx-ink);

    font-size:
        clamp(
            50px,
            5.8vw,
            82px
        );

    line-height: 0.98;
    letter-spacing: -0.067em;
}

.dmxWebIncludesHeader h2 span {
    display: block;

    margin-top: 8px;

    color: transparent;

    background:
        linear-gradient(
            90deg,
            var(--dmx-blue),
            #258bed 48%,
            var(--dmx-cyan)
        );

    -webkit-background-clip: text;
    background-clip: text;
}

.dmxWebIncludesHeader p {
    max-width: 500px;

    margin:
        0
        0
        5px;

    color: var(--dmx-muted);

    font-size: 15px;
    line-height: 1.8;
}


/* ============================================================
   Grid de beneficios
============================================================ */

.dmxWebIncludesGridCards {
    display: grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap: 22px;
}


/* ============================================================
   Tarjetas
============================================================ */

.dmxWebIncludesCard {
    position: relative;

    min-height: 340px;

    padding:
        32px
        32px
        34px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px
        solid
        rgba(220, 230, 238, 0.9);

    border-radius: 26px;

    background:
        rgba(255, 255, 255, 0.86);

    box-shadow:
        0
        22px
        60px
        rgba(15, 51, 88, 0.07);

    backdrop-filter: blur(18px);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.dmxWebIncludesCard::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0;

    background:
        radial-gradient(
            circle at 92% 8%,
            rgba(0, 217, 220, 0.13),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(6, 103, 241, 0.035),
            transparent 45%
        );

    transition: opacity 0.35s ease;

    pointer-events: none;
}

.dmxWebIncludesCard:hover {
    transform: translateY(-8px);

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

    box-shadow:
        0
        34px
        80px
        rgba(15, 51, 88, 0.13);
}

.dmxWebIncludesCard:hover::before {
    opacity: 1;
}

.dmxWebIncludesCardTop,
.dmxWebIncludesCard h3,
.dmxWebIncludesCard p,
.dmxWebIncludesCardLine {
    position: relative;
    z-index: 2;
}

.dmxWebIncludesCardTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dmxWebIncludesIcon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    color: var(--dmx-blue);

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

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(0, 217, 220, 0.12),
            rgba(6, 103, 241, 0.07)
        );

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

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.dmxWebIncludesCard:hover
.dmxWebIncludesIcon {
    color: #ffffff;

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

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

.dmxWebIncludesIcon svg {
    width: 24px;
    height: 24px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dmxWebIncludesCardTop small {
    color: #9aabb8;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.15em;
}

.dmxWebIncludesCard h3 {
    margin:
        32px
        0
        0;

    color: var(--dmx-ink);

    font-size:
        clamp(
            24px,
            2.2vw,
            31px
        );

    line-height: 1.08;
    letter-spacing: -0.045em;
}

.dmxWebIncludesCard p {
    margin:
        17px
        0
        0;

    color: var(--dmx-muted);

    font-size: 13px;
    line-height: 1.72;
}

.dmxWebIncludesCardLine {
    width: 100%;
    height: 2px;

    margin-top: auto;

    overflow: hidden;

    border-radius: 999px;

    background: #e8eff3;
}

.dmxWebIncludesCardLine::after {
    content: "";

    display: block;

    width: 22%;
    height: 100%;

    border-radius: inherit;

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

    transition: width 0.45s ease;
}

.dmxWebIncludesCard:hover
.dmxWebIncludesCardLine::after {
    width: 100%;
}


/* ============================================================
   Ecosistema
============================================================ */

.dmxWebIncludesEcosystem {
    position: relative;

    min-height: 610px;

    margin-top: 34px;
    padding:
        58px
        60px;

    display: grid;
    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(500px, 1.12fr);

    align-items: center;

    gap: 70px;

    overflow: hidden;

    border:
        1px
        solid
        rgba(255, 255, 255, 0.12);

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 86% 18%,
            rgba(0, 217, 220, 0.16),
            transparent 33%
        ),
        radial-gradient(
            circle at 62% 90%,
            rgba(6, 103, 241, 0.2),
            transparent 38%
        ),
        linear-gradient(
            125deg,
            #06162b 0%,
            #082a54 52%,
            #0a4d7b 100%
        );

    box-shadow:
        0
        35px
        90px
        rgba(15, 51, 88, 0.22);
}

.dmxWebIncludesEcosystem::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.18;

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

    background-size:
        42px
        42px;

    mask-image:
        linear-gradient(
            90deg,
            transparent,
            black 40%,
            black
        );

    pointer-events: none;
}

.dmxWebIncludesEcosystemCopy,
.dmxWebIncludesEcosystemVisual {
    position: relative;
    z-index: 2;
}


/* ============================================================
   Copy del ecosistema
============================================================ */

.dmxWebIncludesEcosystemEyebrow {
    display: flex;
    align-items: center;

    gap: 12px;
}

.dmxWebIncludesEcosystemEyebrow > span {
    width: 36px;
    height: 1px;

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

.dmxWebIncludesEcosystemEyebrow small {
    color: #93efec;

    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.dmxWebIncludesEcosystemCopy h3 {
    max-width: 570px;

    margin:
        23px
        0
        0;

    color: #ffffff;

    font-size:
        clamp(
            40px,
            4.6vw,
            68px
        );

    line-height: 0.98;
    letter-spacing: -0.06em;
}

.dmxWebIncludesEcosystemCopy p {
    max-width: 600px;

    margin:
        23px
        0
        0;

    color: #b2c6d7;

    font-size: 14px;
    line-height: 1.78;
}

.dmxWebIncludesEcosystemCopy p + p {
    margin-top: 13px;
}

.dmxWebIncludesEcosystemButton {
    min-height: 58px;

    width: fit-content;

    margin-top: 31px;
    padding:
        0
        8px
        0
        22px;

    display: inline-flex;
    align-items: center;

    gap: 16px;

    color: #07182f;

    border-radius: 999px;

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

    font-size: 11px;
    font-weight: 900;

    box-shadow:
        0
        18px
        38px
        rgba(198, 255, 47, 0.16);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.dmxWebIncludesEcosystemButton b {
    width: 41px;
    height: 41px;

    display: grid;
    place-items: center;

    color: #ffffff;
    background: #07182f;

    border-radius: 50%;

    transition: transform 0.3s ease;
}

.dmxWebIncludesEcosystemButton:hover {
    transform: translateY(-4px);

    box-shadow:
        0
        25px
        48px
        rgba(198, 255, 47, 0.23);
}

.dmxWebIncludesEcosystemButton:hover b {
    transform: rotate(45deg);
}


/* ============================================================
   Visual del ecosistema
============================================================ */

.dmxWebIncludesEcosystemVisual {
    min-height: 490px;
}

.dmxWebIncludesOrbit {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 430px;
    height: 430px;

    border:
        1px
        solid
        rgba(255, 255, 255, 0.09);

    border-radius: 50%;

    box-shadow:
        inset
        0
        0
        0
        58px
        rgba(255, 255, 255, 0.012),
        inset
        0
        0
        0
        116px
        rgba(255, 255, 255, 0.009);

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

    animation:
        dmxWebIncludesOrbitPulse
        5s
        ease-in-out
        infinite;
}

.dmxWebIncludesCore {
    position: absolute;
    top: 50%;
    left: 50%;

    width: 170px;
    height: 170px;

    display: grid;
    place-items: center;
    align-content: center;

    border:
        1px
        solid
        rgba(255, 255, 255, 0.2);

    border-radius: 36px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.15),
            rgba(255, 255, 255, 0.06)
        );

    box-shadow:
        0
        35px
        70px
        rgba(0, 0, 0, 0.22),
        inset
        0
        1px
        0
        rgba(255, 255, 255, 0.22);

    transform:
        translate(-50%, -50%)
        rotate(-4deg);

    backdrop-filter: blur(18px);
}

.dmxWebIncludesCoreIcon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    color: #07182f;

    border-radius: 17px;

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

    box-shadow:
        0
        18px
        36px
        rgba(0, 217, 220, 0.22);
}

.dmxWebIncludesCoreIcon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dmxWebIncludesCore small {
    margin-top: 15px;

    color: #95b6cd;

    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.dmxWebIncludesCore strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 20px;
    letter-spacing: -0.04em;
}


/* ============================================================
   Nodos
============================================================ */

.dmxWebIncludesNode {
    position: absolute;

    min-width: 128px;
    min-height: 64px;

    padding:
        11px
        15px;

    display: flex;
    align-items: center;

    gap: 10px;

    border:
        1px
        solid
        rgba(255, 255, 255, 0.17);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.09);

    box-shadow:
        0
        24px
        48px
        rgba(0, 0, 0, 0.18);

    backdrop-filter: blur(15px);

    animation:
        dmxWebIncludesNodeFloat
        5s
        ease-in-out
        infinite;
}

.dmxWebIncludesNode > span {
    width: 37px;
    height: 37px;

    display: grid;
    place-items: center;

    color: var(--dmx-cyan);

    border-radius: 12px;

    background:
        rgba(0, 217, 220, 0.1);
}

.dmxWebIncludesNode svg {
    width: 19px;
    height: 19px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dmxWebIncludesNode strong {
    color: #ffffff;

    font-size: 10px;
    font-weight: 850;
}

.dmxWebIncludesNodeCrm {
    top: 32px;
    left: 45px;
}

.dmxWebIncludesNodeAutomation {
    top: 85px;
    right: 2px;

    animation-delay: -1.2s;
}

.dmxWebIncludesNodeAi {
    right: 40px;
    bottom: 42px;

    animation-delay: -2.5s;
}

.dmxWebIncludesNodeDashboard {
    bottom: 55px;
    left: 10px;

    animation-delay: -3.5s;
}


/* ============================================================
   Conectores
============================================================ */

.dmxWebIncludesConnector {
    position: absolute;

    height: 1px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.12);

    transform-origin: left center;
}

.dmxWebIncludesConnector::after {
    content: "";

    position: absolute;
    top: 0;
    left: -40%;

    width: 40%;
    height: 100%;

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

    animation:
        dmxWebIncludesSignal
        2.6s
        linear
        infinite;
}

.dmxWebIncludesConnectorOne {
    top: 154px;
    left: 160px;

    width: 125px;

    transform: rotate(31deg);
}

.dmxWebIncludesConnectorTwo {
    top: 172px;
    right: 124px;

    width: 120px;

    transform: rotate(-37deg);
}

.dmxWebIncludesConnectorThree {
    right: 150px;
    bottom: 150px;

    width: 132px;

    transform: rotate(36deg);
}

.dmxWebIncludesConnectorFour {
    bottom: 148px;
    left: 140px;

    width: 140px;

    transform: rotate(-34deg);
}


/* ============================================================
   Animaciones
============================================================ */

@keyframes dmxWebIncludesOrbitPulse {

    0%,
    100% {
        opacity: 0.7;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.025);
    }

}

@keyframes dmxWebIncludesNodeFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

}

@keyframes dmxWebIncludesSignal {

    0% {
        left: -40%;
    }

    100% {
        left: 115%;
    }

}


/* ============================================================
   Responsive
============================================================ */

@media (max-width: 1100px) {

    .dmxWebIncludesHeaderGrid {
        gap: 45px;
    }

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

    .dmxWebIncludesEcosystem {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(440px, 1.1fr);

        gap: 45px;

        padding:
            52px
            45px;
    }

    .dmxWebIncludesOrbit {
        width: 390px;
        height: 390px;
    }

}


@media (max-width: 900px) {

    .dmxWebIncludes {
        padding:
            115px
            0;
    }

    .dmxWebIncludesHeaderGrid {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 24px;
    }

    .dmxWebIncludesHeader p {
        max-width: 680px;
    }

    .dmxWebIncludesEcosystem {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .dmxWebIncludesEcosystemCopy {
        max-width: 720px;
    }

    .dmxWebIncludesEcosystemVisual {
        min-height: 510px;
    }

}


@media (max-width: 680px) {

    .dmxWebIncludes {
        padding:
            95px
            0;
    }

    .dmxWebIncludesHeader {
        margin-bottom: 50px;
    }

    .dmxWebIncludesHeader h2 {
        font-size:
            clamp(
                44px,
                13vw,
                65px
            );
    }

    .dmxWebIncludesGridCards {
        grid-template-columns: 1fr;
    }

    .dmxWebIncludesCard {
        min-height: 310px;
    }

    .dmxWebIncludesEcosystem {
        min-height: 0;

        padding:
            40px
            30px;

        border-radius: 28px;
    }

    .dmxWebIncludesEcosystemVisual {
        min-height: 470px;

        transform: scale(0.9);
    }

}


@media (max-width: 520px) {

    .dmxWebIncludes {
        padding:
            80px
            0;
    }

    .dmxWebIncludesHeader p {
        font-size: 14px;
    }

    .dmxWebIncludesCard {
        min-height: 290px;

        padding:
            28px
            25px
            30px;

        border-radius: 23px;
    }

    .dmxWebIncludesCard h3 {
        font-size: 27px;
    }

    .dmxWebIncludesEcosystem {
        padding:
            35px
            24px;
    }

    .dmxWebIncludesEcosystemCopy h3 {
        font-size: 42px;
    }

    .dmxWebIncludesEcosystemButton {
        width: 100%;

        justify-content: space-between;
    }

    .dmxWebIncludesEcosystemVisual {
        min-height: 430px;

        margin:
            -20px
            -65px
            -30px;

        transform: scale(0.72);
    }

}


/* ============================================================
   Movimiento reducido
============================================================ */

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

    .dmxWebIncludesCard,
    .dmxWebIncludesIcon,
    .dmxWebIncludesCardLine::after,
    .dmxWebIncludesEcosystemButton,
    .dmxWebIncludesEcosystemButton b {
        transition: none;
    }

    .dmxWebIncludesOrbit,
    .dmxWebIncludesNode,
    .dmxWebIncludesConnector::after {
        animation: none;
    }

}