/* =========================================================
   SERVICIOS DE CONSULTORÍA
========================================================= */

.dmxConsultingServices {
    position: relative;
    isolation: isolate;

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

    overflow: hidden;

    color: #102a43;

    background:
        linear-gradient(
            180deg,
            #fbfdff 0%,
            #f5f9fd 100%
        );
}


/* =========================================================
   FONDO
========================================================= */

.dmxConsultingServicesBackground {
    position: absolute;
    inset: 0;
    z-index: -2;

    overflow: hidden;
    pointer-events: none;
}

.dmxConsultingServicesPattern {
    position: absolute;
    inset: 0;

    opacity: 0.48;

    background-image:
        linear-gradient(
            rgba(20, 91, 151, 0.04) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(20, 91, 151, 0.04) 1px,
            transparent 1px
        );

    background-size: 58px 58px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );
}

.dmxConsultingServicesGlow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(55px);
    opacity: 0.32;
}

.dmxConsultingServicesGlowOne {
    top: -260px;
    right: -160px;

    background:
        radial-gradient(
            circle,
            rgba(32, 155, 229, 0.24),
            transparent 70%
        );
}

.dmxConsultingServicesGlowTwo {
    bottom: -290px;
    left: -180px;

    background:
        radial-gradient(
            circle,
            rgba(22, 103, 185, 0.17),
            transparent 70%
        );
}


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

.dmxConsultingServicesHeader {
    max-width: 1100px;
    margin-bottom: clamp(46px, 6vw, 74px);
}

.dmxConsultingServicesEyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 24px;
}

.dmxConsultingServicesEyebrow > span {
    width: 38px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #1769ca,
            #35b8ed
        );

    box-shadow:
        0 0 14px rgba(34, 145, 217, 0.22);
}

.dmxConsultingServicesEyebrow small {
    color: #1773c9;

    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.dmxConsultingServicesHeading {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(320px, 0.9fr);

    align-items: end;
    gap: clamp(38px, 7vw, 94px);
}

.dmxConsultingServicesHeading h2 {
    max-width: 700px;
    margin: 0;

    color: #102a43;

    font-size: clamp(2.5rem, 4.6vw, 4.8rem);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.dmxConsultingServicesHeading h2 strong {
    display: block;

    margin-top: 7px;

    color: transparent;

    background:
        linear-gradient(
            110deg,
            #1768c8 0%,
            #158ddc 50%,
            #31b7e9 100%
        );

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

    font-weight: inherit;
}

.dmxConsultingServicesHeading p {
    max-width: 520px;
    margin: 0;

    color: #5c7084;

    font-size: clamp(1rem, 1.2vw, 1.12rem);
    line-height: 1.78;
}


/* =========================================================
   LAYOUT PRINCIPAL
========================================================= */

.dmxConsultingServicesLayout {
    display: grid;
    grid-template-columns:
        minmax(400px, 0.92fr)
        minmax(0, 1.48fr);

    align-items: stretch;
    gap: 22px;
}

.dmxConsultingServicesSecondary {
    display: grid;
    grid-template-rows:
        minmax(0, 1fr)
        minmax(250px, 0.68fr);

    gap: 22px;
}

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

    gap: 22px;
}


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

.dmxConsultingServiceCard {
    --dmx-consulting-card-x: 50%;
    --dmx-consulting-card-y: 50%;

    position: relative;
    isolation: isolate;

    overflow: hidden;

    border:
        1px solid rgba(34, 91, 138, 0.13);
    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 251, 254, 0.95)
        );

    box-shadow:
        0 22px 52px rgba(25, 68, 105, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);

    transform-style: preserve-3d;

    transition:
        transform 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease;
}

.dmxConsultingServiceCard::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        radial-gradient(
            circle at
            var(--dmx-consulting-card-x)
            var(--dmx-consulting-card-y),
            rgba(38, 165, 229, 0.12),
            transparent 40%
        );

    opacity: 0;

    transition: opacity 300ms ease;
}

.dmxConsultingServiceCard:hover {
    transform: translateY(-7px);

    border-color:
        rgba(23, 126, 204, 0.23);

    box-shadow:
        0 32px 68px rgba(21, 73, 113, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

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


/* =========================================================
   NÚMERO
========================================================= */

.dmxConsultingServiceCardNumber {
    position: absolute;
    top: 30px;
    right: 32px;
    z-index: 2;

    color: rgba(29, 93, 148, 0.11);

    font-size: clamp(2.6rem, 4vw, 4.1rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.09em;

    transition:
        color 300ms ease,
        transform 300ms ease;
}

.dmxConsultingServiceCard:hover
.dmxConsultingServiceCardNumber {
    color: rgba(21, 112, 186, 0.18);
    transform: translateY(-3px);
}


/* =========================================================
   ICONOS
========================================================= */

.dmxConsultingServiceIcon {
    position: relative;
    z-index: 3;

    display: grid;
    place-items: center;

    width: 68px;
    height: 68px;

    border:
        1px solid rgba(22, 113, 187, 0.14);
    border-radius: 21px;

    color: #1776cb;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf7fd
        );

    box-shadow:
        0 13px 29px rgba(21, 92, 147, 0.1);

    transition:
        transform 300ms ease,
        color 300ms ease,
        box-shadow 300ms ease;
}

.dmxConsultingServiceIcon svg {
    width: 30px;
    height: 30px;

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

.dmxConsultingServiceCard:hover
.dmxConsultingServiceIcon {
    transform:
        translateY(-3px)
        rotate(-3deg);

    color: #1093d8;

    box-shadow:
        0 17px 34px rgba(20, 111, 173, 0.15);
}


/* =========================================================
   TARJETA DESTACADA
========================================================= */

.dmxConsultingServiceCardFeatured {
    min-height: 660px;
    padding: 34px;

    color: #ffffff;

    border-color:
        rgba(79, 177, 226, 0.14);

    background:
        linear-gradient(
            155deg,
            #071e35 0%,
            #0d3457 52%,
            #075180 100%
        );

    box-shadow:
        0 32px 76px rgba(5, 38, 65, 0.27),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.dmxConsultingServiceCardFeatured::before {
    background:
        radial-gradient(
            circle at
            var(--dmx-consulting-card-x)
            var(--dmx-consulting-card-y),
            rgba(54, 196, 244, 0.17),
            transparent 42%
        );
}

.dmxConsultingServiceCardFeatured:hover {
    border-color:
        rgba(72, 197, 240, 0.26);

    box-shadow:
        0 39px 86px rgba(5, 38, 65, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dmxConsultingServiceCardFeatured
.dmxConsultingServiceCardNumber {
    color: rgba(255, 255, 255, 0.14);
}

.dmxConsultingServiceCardFeatured:hover
.dmxConsultingServiceCardNumber {
    color: rgba(255, 255, 255, 0.21);
}

.dmxConsultingServiceFeaturedTop {
    position: relative;
    z-index: 3;
}

.dmxConsultingServiceCardFeatured
.dmxConsultingServiceIcon {
    color: #ffffff;

    border-color:
        rgba(255, 255, 255, 0.15);

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

    box-shadow:
        0 16px 36px rgba(3, 24, 43, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.dmxConsultingServiceCardFeatured:hover
.dmxConsultingServiceIcon {
    color: #ffffff;

    box-shadow:
        0 18px 40px rgba(2, 26, 46, 0.3),
        0 0 0 6px rgba(55, 193, 238, 0.07);
}

.dmxConsultingServiceFeaturedContent {
    position: relative;
    z-index: 4;

    max-width: 520px;
    margin-top: 82px;
}

.dmxConsultingServiceLabel {
    display: block;

    margin-bottom: 13px;

    color: #1979cc;

    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dmxConsultingServiceCardFeatured
.dmxConsultingServiceLabel {
    color: #4dd2f5;
}

.dmxConsultingServiceFeaturedContent h3 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 820;
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.dmxConsultingServiceFeaturedContent p {
    max-width: 500px;
    margin: 22px 0 0;

    color: rgba(228, 242, 251, 0.78);

    font-size: 1rem;
    line-height: 1.75;
}


/* =========================================================
   CHECKLIST
========================================================= */

.dmxConsultingServiceChecklist {
    display: grid;
    gap: 15px;

    margin: 34px 0 0;
    padding: 30px 0 0;

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

    list-style: none;
}

.dmxConsultingServiceChecklist li {
    display: flex;
    align-items: center;
    gap: 12px;

    color: rgba(241, 248, 253, 0.9);

    font-size: 0.9rem;
    font-weight: 720;
}

.dmxConsultingServiceChecklist li > span {
    display: grid;
    place-items: center;

    width: 23px;
    height: 23px;

    flex: 0 0 auto;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            #1188dd,
            #2bc5f0
        );

    box-shadow:
        0 0 0 6px rgba(38, 182, 231, 0.08);
}

.dmxConsultingServiceChecklist svg {
    width: 13px;
    height: 13px;

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


/* =========================================================
   ONDAS DECORATIVAS
========================================================= */

.dmxConsultingServiceWaves {
    position: absolute;
    right: -3%;
    bottom: -10px;
    left: -4%;
    z-index: 1;

    height: 225px;

    opacity: 0.9;
    pointer-events: none;

    transform: translateZ(0);
}

.dmxConsultingServiceWaves svg {
    width: 100%;
    height: 100%;
}

.dmxConsultingServiceWaveGrid {
    position: absolute;
    right: -20%;
    bottom: -24%;
    z-index: 0;

    width: 120%;
    height: 58%;

    opacity: 0.22;

    background-image:
        linear-gradient(
            rgba(46, 190, 240, 0.28) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(46, 190, 240, 0.28) 1px,
            transparent 1px
        );

    background-size: 17px 17px;

    transform:
        perspective(420px)
        rotateX(65deg)
        rotateZ(-8deg);
}


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

.dmxConsultingServiceCardSmall {
    display: flex;
    min-height: 350px;
    flex-direction: column;

    padding: 30px;
}

.dmxConsultingServiceCardWide {
    display: grid;
    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;
    gap: 28px;

    min-height: 255px;
    padding: 34px;
}

.dmxConsultingServiceContent {
    position: relative;
    z-index: 3;

    margin-top: auto;
}

.dmxConsultingServiceContent h3 {
    max-width: 520px;
    margin: 0;

    color: #102f4b;

    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 820;
    line-height: 1.08;
    letter-spacing: -0.038em;
}

.dmxConsultingServiceContent p {
    max-width: 530px;
    margin: 18px 0 0;

    color: #61758a;

    font-size: 0.96rem;
    line-height: 1.72;
}

.dmxConsultingServiceCardSmall
.dmxConsultingServiceIcon {
    margin-bottom: 68px;
}

.dmxConsultingServiceCardWide
.dmxConsultingServiceContent {
    margin-top: 0;
}


/* =========================================================
   FOOTER
========================================================= */

.dmxConsultingServicesFooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;

    margin-top: 28px;
    padding: 27px 32px;

    border:
        1px solid rgba(27, 88, 139, 0.13);
    border-radius: 24px;

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

    box-shadow:
        0 18px 44px rgba(24, 68, 105, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);

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

.dmxConsultingServicesFooterText {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
}

.dmxConsultingServicesFooterText span {
    color: #6b7f92;

    font-size: 0.97rem;
}

.dmxConsultingServicesFooterText strong {
    color: #153956;

    font-size: 1rem;
    font-weight: 820;
}

.dmxConsultingServicesFooterLink {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    flex: 0 0 auto;

    color: #176fc5;

    font-size: 0.92rem;
    font-weight: 820;
    text-decoration: none;

    transition:
        color 220ms ease,
        transform 220ms ease;
}

.dmxConsultingServicesFooterLink svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 220ms ease;
}

.dmxConsultingServicesFooterLink:hover {
    color: #0f91d5;
    transform: translateX(3px);
}

.dmxConsultingServicesFooterLink:hover svg {
    transform: translateX(5px);
}


/* =========================================================
   REVEAL
========================================================= */

.dmxConsultingReveal {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.dmxConsultingReveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


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

@media (max-width: 1120px) {

    .dmxConsultingServicesLayout {
        grid-template-columns:
            minmax(340px, 0.88fr)
            minmax(0, 1.12fr);
    }

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

    .dmxConsultingServicesSecondary {
        grid-template-rows: auto auto;
    }

    .dmxConsultingServiceCardFeatured {
        min-height: 760px;
    }

    .dmxConsultingServiceCardSmall {
        min-height: 300px;
    }

}


@media (max-width: 900px) {

    .dmxConsultingServicesHeading {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dmxConsultingServicesHeading p {
        max-width: 640px;
    }

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

    .dmxConsultingServiceCardFeatured {
        min-height: 650px;
    }

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

}


@media (max-width: 700px) {

    .dmxConsultingServices {
        padding: 82px 0;
    }

    .dmxConsultingServicesHeading h2 {
        font-size: clamp(2.35rem, 11vw, 3.8rem);
    }

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

    .dmxConsultingServiceCardFeatured {
        min-height: 600px;
        padding: 26px;
    }

    .dmxConsultingServiceFeaturedContent {
        margin-top: 72px;
    }

    .dmxConsultingServiceCardSmall {
        min-height: 300px;
        padding: 25px;
    }

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

        min-height: 320px;
        padding: 25px;
    }

    .dmxConsultingServiceCardWide
    .dmxConsultingServiceContent {
        margin-top: 40px;
    }

    .dmxConsultingServicesFooter {
        align-items: flex-start;
        flex-direction: column;

        padding: 24px;
    }

}


@media (max-width: 470px) {

    .dmxConsultingServicesEyebrow small {
        font-size: 0.67rem;
    }

    .dmxConsultingServiceCard {
        border-radius: 22px;
    }

    .dmxConsultingServiceCardFeatured {
        min-height: 580px;
        padding: 22px;
    }

    .dmxConsultingServiceCardNumber {
        top: 22px;
        right: 22px;
    }

    .dmxConsultingServiceIcon {
        width: 58px;
        height: 58px;

        border-radius: 18px;
    }

    .dmxConsultingServiceIcon svg {
        width: 27px;
        height: 27px;
    }

    .dmxConsultingServiceFeaturedContent {
        margin-top: 64px;
    }

    .dmxConsultingServiceFeaturedContent h3 {
        font-size: 2rem;
    }

    .dmxConsultingServiceChecklist li {
        font-size: 0.83rem;
    }

    .dmxConsultingServiceCardSmall,
    .dmxConsultingServiceCardWide {
        padding: 22px;
    }

    .dmxConsultingServicesFooterText {
        display: grid;
        gap: 3px;
    }

}


/* =========================================================
   REDUCIR MOVIMIENTO
========================================================= */

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

    .dmxConsultingServices *,
    .dmxConsultingServices *::before,
    .dmxConsultingServices *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .dmxConsultingReveal {
        opacity: 1;
        transform: none;
    }

}