/* =========================================================
   SOLUCIONES — AUTOMATIZACIÓN E IA
========================================================= */

.dmxAutomationSolutions {
    position: relative;

    padding:
        clamp(5rem, 8vw, 8rem)
        0;

    overflow: hidden;

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

.dmxAutomationSolutions::before {
    content: "";

    position: absolute;
    top: -18rem;
    right: -12rem;

    width: 36rem;
    height: 36rem;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(52, 123, 255, 0.08),
            transparent 72%
        );

    pointer-events: none;
}

.dmxAutomationSolutions::after {
    content: "";

    position: absolute;
    bottom: -16rem;
    left: -10rem;

    width: 30rem;
    height: 30rem;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(27, 211, 176, 0.08),
            transparent 72%
        );

    pointer-events: none;
}


/* =========================================================
   HEADER
========================================================= */

.dmxAutomationSolutionsHeader{
    max-width:58rem;
    margin:0 auto 4rem;
    text-align:center;
}

.dmxAutomationSolutionsEyebrow{
    display:inline-flex;
    align-items:center;
    gap:.8rem;

    margin-bottom:1.25rem;
}

.dmxAutomationSolutionsEyebrow span{
    width:3rem;
    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #2f7eff,
            #25d6b3
        );
}

.dmxAutomationSolutionsEyebrow small{
    color:#2576d8;

    font-size:.82rem;
    font-weight:700;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.dmxAutomationSolutionsHeading h2{
    margin:0;

    color:#0f172a;

    font-size:clamp(2.3rem,4vw,3.8rem);
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.04em;
}

.dmxAutomationSolutionsHeading h2 span{
    display:block;

    background:
        linear-gradient(
            90deg,
            #2476e6,
            #1dc7a6
        );

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

    color:transparent;
}

.dmxAutomationSolutionsHeading p{
    max-width:42rem;
    margin:1.4rem auto 0;

    color:#64748b;

    font-size:1.06rem;
    line-height:1.8;
}


/* =========================================================
   GRID
========================================================= */

.dmxAutomationSolutionsGrid{

    display:grid;

    grid-template-columns:
        1.15fr
        1fr
        1fr;

    gap:1.6rem;
}

.dmxAutomationSolutionCard{

    position:relative;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    min-height:18rem;

    padding:2rem;

    border:1px solid rgba(15,23,42,.08);
    border-radius:1.6rem;

    overflow:hidden;

    background:#fff;

    transition:
        transform .45s,
        border-color .45s,
        box-shadow .45s;
}

.dmxAutomationSolutionCard::before{

    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(52,123,255,.03),
            rgba(28,213,179,.03)
        );

    opacity:0;

    transition:opacity .45s;
}

.dmxAutomationSolutionCard:hover{

    transform:
        translateY(-10px);

    border-color:
        rgba(42,126,255,.18);

    box-shadow:
        0 28px 55px
        rgba(16,24,40,.08);
}

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


/* =========================================================
   FEATURED
========================================================= */

.dmxAutomationSolutionCardFeatured{

    grid-row:span 2;

    min-height:37.6rem;

    color:#fff;

    border:none;

    background:
        linear-gradient(
            145deg,
            #0d1728,
            #0b2236 45%,
            #133f59
        );
}

.dmxAutomationSolutionCardFeatured::before{

    opacity:1;

    background:
        radial-gradient(
            circle at top right,
            rgba(60,132,255,.25),
            transparent 55%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(41,214,182,.20),
            transparent 55%
        );
}

.dmxAutomationSolutionCardFeatured h3,
.dmxAutomationSolutionCardFeatured p{
    color:#fff;
}


/* =========================================================
   TOP
========================================================= */

.dmxAutomationSolutionTop{

    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:2rem;
}

.dmxAutomationSolutionNumber{

    color:#8ea6c5;

    font-size:.85rem;
    font-weight:700;
    letter-spacing:.16em;
}

.dmxAutomationSolutionIcon{

    display:flex;
    align-items:center;
    justify-content:center;

    width:4rem;
    height:4rem;

    border-radius:1rem;

    background:
        linear-gradient(
            135deg,
            rgba(47,126,255,.12),
            rgba(29,213,180,.12)
        );
}

.dmxAutomationSolutionCardFeatured
.dmxAutomationSolutionIcon{

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

    backdrop-filter:blur(10px);
}

.dmxAutomationSolutionIcon svg{

    width:1.8rem;
    height:1.8rem;

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

    color:#2576d8;
}

.dmxAutomationSolutionCardFeatured
.dmxAutomationSolutionIcon svg{
    color:#fff;
}


/* =========================================================
   CONTENT
========================================================= */

.dmxAutomationSolutionContent h3{

    margin:0 0 .9rem;

    color:#0f172a;

    font-size:1.45rem;
    font-weight:700;
}

.dmxAutomationSolutionContent p{

    margin:0;

    color:#64748b;

    line-height:1.75;
}


/* =========================================================
   TAG
========================================================= */

.dmxAutomationSolutionTag{

    align-self:flex-start;

    margin-top:2rem;
    padding:.55rem .9rem;

    border-radius:999px;

    background:#eef6ff;

    color:#2576d8;

    font-size:.74rem;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.dmxAutomationSolutionCardFeatured
.dmxAutomationSolutionTag{

    color:#fff;

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

    backdrop-filter:blur(12px);
}


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

.dmxAutomationSolutionsFooter{

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:2rem;

    margin-top:3rem;
    padding-top:2rem;

    border-top:
        1px solid
        rgba(15,23,42,.08);
}

.dmxAutomationSolutionsFooter p{

    margin:0;

    color:#64748b;

    font-size:1rem;
}

.dmxAutomationSolutionsFooter a{

    display:inline-flex;
    align-items:center;
    gap:.8rem;

    color:#2476e6;

    font-weight:700;
    text-decoration:none;

    transition:.35s;
}

.dmxAutomationSolutionsFooter a:hover{
    gap:1rem;
}

.dmxAutomationSolutionsFooter svg{

    width:1rem;
    height:1rem;

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


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

@media (max-width:1100px){

    .dmxAutomationSolutionsGrid{

        grid-template-columns:
            1fr
            1fr;
    }

    .dmxAutomationSolutionCardFeatured{

        grid-column:1 / -1;
        grid-row:auto;

        min-height:21rem;
    }

}

@media (max-width:768px){

    .dmxAutomationSolutionsHeader{

        margin-bottom:3rem;
    }

    .dmxAutomationSolutionsGrid{

        grid-template-columns:1fr;
    }

    .dmxAutomationSolutionCard{

        min-height:auto;
    }

    .dmxAutomationSolutionCardFeatured{

        min-height:auto;
    }

    .dmxAutomationSolutionsFooter{

        flex-direction:column;
        align-items:flex-start;
    }

}
/* =========================================================
   ESTADOS CONTROLADOS POR JAVASCRIPT
========================================================= */

.dmxAutomationSolutionCard {
    --dmx-card-rotate-x: 0deg;
    --dmx-card-rotate-y: 0deg;
    --dmx-pointer-x: 50%;
    --dmx-pointer-y: 50%;

    opacity: 0;

    transform:
        perspective(1100px)
        translateY(2rem)
        rotateX(var(--dmx-card-rotate-x))
        rotateY(var(--dmx-card-rotate-y));

    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 350ms ease,
        box-shadow 350ms ease;

    transition-delay:
        calc(
            var(--dmx-solution-index, 0) *
            90ms
        );
}

.dmxAutomationSolutionCard.is-visible {
    opacity: 1;

    transform:
        perspective(1100px)
        translateY(0)
        rotateX(var(--dmx-card-rotate-x))
        rotateY(var(--dmx-card-rotate-y));
}

.dmxAutomationSolutionCard.is-pointer-active {
    transition:
        opacity 700ms ease,
        transform 120ms ease-out,
        border-color 350ms ease,
        box-shadow 350ms ease;
}

.dmxAutomationSolutionCard::after {
    content: "";

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

    border-radius: inherit;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle 13rem at
            var(--dmx-pointer-x)
            var(--dmx-pointer-y),
            rgba(62, 142, 255, 0.12),
            transparent 70%
        );

    transition: opacity 300ms ease;
}

.dmxAutomationSolutionCard.is-pointer-active::after {
    opacity: 1;
}

.dmxAutomationSolutionCard > * {
    position: relative;
    z-index: 2;
}

.dmxAutomationSolutionCard.is-glowing {
    border-color: rgba(39, 139, 255, 0.28);

    box-shadow:
        0 28px 60px rgba(15, 23, 42, 0.09),
        0 0 0 1px rgba(39, 139, 255, 0.04),
        0 0 2.5rem rgba(43, 186, 180, 0.08);
}


/* =========================================================
   FLUJO — TARJETA DESTACADA
========================================================= */

.dmxAutomationSolutionFlow {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;

    pointer-events: none;

    opacity: 0.72;
}

.dmxAutomationSolutionFlowNode {
    position: absolute;

    width: 0.55rem;
    height: 0.55rem;

    border: 1px solid rgba(119, 230, 209, 0.5);
    border-radius: 50%;

    background: rgba(64, 222, 190, 0.18);

    box-shadow:
        0 0 0 0.35rem rgba(59, 209, 180, 0.035),
        0 0 1.2rem rgba(69, 225, 193, 0.3);
}

.dmxAutomationSolutionFlowNodeOne {
    right: 18%;
    top: 24%;
}

.dmxAutomationSolutionFlowNodeTwo {
    right: 32%;
    top: 47%;
}

.dmxAutomationSolutionFlowNodeThree {
    right: 13%;
    bottom: 18%;
}

.dmxAutomationSolutionFlowLine {
    position: absolute;

    width: 1px;

    overflow: hidden;

    transform-origin: top;

    background:
        linear-gradient(
            to bottom,
            rgba(83, 223, 195, 0),
            rgba(83, 223, 195, 0.34),
            rgba(83, 223, 195, 0)
        );
}

.dmxAutomationSolutionFlowLineOne {
    right: 25%;
    top: 26%;

    height: 24%;

    transform: rotate(34deg);
}

.dmxAutomationSolutionFlowLineTwo {
    right: 25%;
    top: 50%;

    height: 30%;

    transform: rotate(-31deg);
}

.dmxAutomationSolutionFlowPulse {
    position: absolute;

    width: 0.32rem;
    height: 0.32rem;

    border-radius: 50%;

    background: #62e8ca;

    box-shadow:
        0 0 0.65rem rgba(98, 232, 202, 0.8),
        0 0 1.6rem rgba(98, 232, 202, 0.4);

    opacity: 0;
}

.dmxAutomationSolutionFlowPulseOne {
    right: 18%;
    top: 24%;
}

.dmxAutomationSolutionFlowPulseTwo {
    right: 32%;
    top: 47%;
}

.dmxAutomationSolutionCardFeatured.is-flow-active
.dmxAutomationSolutionFlowNode {
    animation:
        dmxAutomationSolutionNodePulse
        2.2s ease-in-out infinite;
}

.dmxAutomationSolutionCardFeatured.is-flow-active
.dmxAutomationSolutionFlowPulseOne {
    animation:
        dmxAutomationSolutionPulseOne
        3.2s linear infinite;
}

.dmxAutomationSolutionCardFeatured.is-flow-active
.dmxAutomationSolutionFlowPulseTwo {
    animation:
        dmxAutomationSolutionPulseTwo
        3.2s linear 1.25s infinite;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes dmxAutomationSolutionNodePulse {

    0%,
    100% {
        opacity: 0.55;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
    }

}

@keyframes dmxAutomationSolutionPulseOne {

    0% {
        right: 18%;
        top: 24%;

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    48% {
        right: 32%;
        top: 47%;

        opacity: 1;
    }

    58%,
    100% {
        right: 32%;
        top: 47%;

        opacity: 0;
    }

}

@keyframes dmxAutomationSolutionPulseTwo {

    0% {
        right: 32%;
        top: 47%;

        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    50% {
        right: 13%;
        top: 81%;

        opacity: 1;
    }

    62%,
    100% {
        right: 13%;
        top: 81%;

        opacity: 0;
    }

}


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

@media (max-width: 900px) {

    .dmxAutomationSolutionCard,
    .dmxAutomationSolutionCard.is-visible {
        transform: translateY(0);
    }

    .dmxAutomationSolutionCard::after {
        display: none;
    }

}


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

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

    .dmxAutomationSolutionCard {
        opacity: 1;

        transform: none;
    }

    .dmxAutomationSolutionFlowNode,
    .dmxAutomationSolutionFlowPulse {
        animation: none !important;
    }

}