/* ============================================================
   BRAND KITS
============================================================ */

.dmxBrandKits{

    position:relative;
    overflow:hidden;

    padding:
        clamp(110px,10vw,180px)
        0;

    background:
        radial-gradient(
            circle at 8% 10%,
            rgba(0,217,220,.09),
            transparent 28%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(6,103,241,.08),
            transparent 30%
        ),
        linear-gradient(
            180deg,
            #f8fafc 0%,
            #ffffff 48%,
            #f3f7fb 100%
        );

    color:var(--dmx-ink);

}


/* Decoración de fondo */

.dmxBrandKits::before{

    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:min(1500px,94%);
    height:1px;

    transform:translateX(-50%);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(8,38,77,.14),
        transparent
    );

}


.dmxBrandKits::after{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:-420px;
    top:12%;

    border:1px solid rgba(6,103,241,.08);
    border-radius:50%;

    box-shadow:
        0 0 0 80px rgba(6,103,241,.025),
        0 0 0 160px rgba(0,217,220,.018);

    pointer-events:none;

}


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

.dmxBrandKitsHeader{

    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(220px,.7fr)
        minmax(0,1.65fr);

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

    align-items:start;

    margin-bottom:
        clamp(50px,7vw,90px);

}


.dmxBrandKitsEyebrow{

    display:flex;
    align-items:center;
    gap:14px;

    padding-top:14px;

}


.dmxBrandKitsEyebrow > span{

    position:relative;

    width:46px;
    height:1px;

    background:var(--dmx-blue);

}


.dmxBrandKitsEyebrow > span::after{

    content:"";

    position:absolute;

    right:0;
    top:50%;

    width:6px;
    height:6px;

    transform:translateY(-50%);

    border-radius:50%;

    background:var(--dmx-cyan);

    box-shadow:
        0 0 0 5px rgba(0,217,220,.13);

}


.dmxBrandKitsEyebrow small{

    color:var(--dmx-navy);

    font-size:12px;
    font-weight:800;

    letter-spacing:.16em;
    line-height:1.3;

    text-transform:uppercase;

}


.dmxBrandKitsHeading h2{

    max-width:900px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(42px,5.7vw,82px);

    font-weight:750;
    line-height:.98;

    letter-spacing:
        clamp(-3.6px,-.055em,-1.4px);

}


.dmxBrandKitsHeading h2 > span{

    display:block;

    margin-top:8px;

    color:transparent;

    background:
        linear-gradient(
            100deg,
            var(--dmx-blue) 0%,
            #158fd7 48%,
            var(--dmx-cyan) 100%
        );

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

}


.dmxBrandKitsHeading p{

    max-width:720px;

    margin:
        clamp(26px,3vw,38px)
        0
        0;

    color:var(--dmx-muted);

    font-size:
        clamp(17px,1.4vw,20px);

    line-height:1.8;

}


/* ============================================================
   INTRO
============================================================ */

.dmxBrandKitsIntro{

    position:relative;
    z-index:2;

    display:grid;

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

    gap:
        clamp(25px,4vw,50px);

    align-items:start;

    max-width:880px;

    margin:
        0
        0
        clamp(55px,7vw,90px)
        auto;

    padding-left:
        clamp(0px,4vw,60px);

}


.dmxBrandKitsIntroNumber{

    color:rgba(8,38,77,.28);

    font-size:13px;
    font-weight:800;

    letter-spacing:.18em;

}


.dmxBrandKitsIntro p{

    margin:0;

    color:#35465a;

    font-size:
        clamp(18px,1.7vw,24px);

    font-weight:500;
    line-height:1.65;

}


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

.dmxBrandKitsGrid{

    position:relative;
    z-index:2;

    display:grid;

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

    gap:
        clamp(20px,2vw,30px);

    align-items:stretch;

}


/* ============================================================
   CARD
============================================================ */

.dmxBrandKitCard{

    position:relative;
    isolation:isolate;
    overflow:hidden;

    display:flex;
    flex-direction:column;

    min-height:760px;

    padding:
        clamp(24px,2.2vw,34px);

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

    border-radius:
        clamp(24px,2.2vw,32px);

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

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

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

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

}


.dmxBrandKitCard::before{

    content:"";

    position:absolute;
    z-index:-1;

    inset:0;

    border-radius:inherit;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.55),
            transparent 40%
        );

    pointer-events:none;

}


.dmxBrandKitCard:hover{

    transform:translateY(-12px);

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

    box-shadow:
        0 34px 90px rgba(15,51,88,.14);

}


/* Featured */

.dmxBrandKitCardFeatured{

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

    background:
        linear-gradient(
            160deg,
            rgba(255,255,255,.98) 0%,
            rgba(237,247,255,.96) 100%
        );

    box-shadow:
        0 30px 85px rgba(6,103,241,.13);

}


.dmxBrandKitCardFeatured::after{

    content:"";

    position:absolute;
    z-index:-1;

    width:290px;
    height:290px;

    top:-150px;
    right:-120px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,217,220,.16),
            transparent 67%
        );

    pointer-events:none;

}


.dmxBrandKitFeaturedLabel{

    position:absolute;

    top:20px;
    right:20px;

    padding:
        8px
        12px;

    border-radius:100px;

    background:var(--dmx-lime);

    color:#122000;

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

    letter-spacing:.1em;
    text-transform:uppercase;

}


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

.dmxBrandKitCardTop{

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

    gap:20px;

    min-height:34px;

    margin-bottom:25px;

}


.dmxBrandKitIndex{

    color:rgba(8,38,77,.38);

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

    letter-spacing:.16em;

}


.dmxBrandKitLevel{

    padding:
        7px
        11px;

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

    border-radius:100px;

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

    color:var(--dmx-navy);

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

    letter-spacing:.12em;
    line-height:1;

    text-transform:uppercase;

}


.dmxBrandKitCardFeatured
.dmxBrandKitCardTop{

    padding-right:112px;

}


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

.dmxBrandKitVisual{

    position:relative;
    overflow:hidden;

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

    height:230px;

    margin-bottom:34px;

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

    border-radius:22px;

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

}


.dmxBrandKitVisual::before{

    content:"";

    position:absolute;

    inset:0;

    opacity:.45;

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

    background-size:22px 22px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

}


.dmxBrandKitVisualGlow{

    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,217,220,.18),
            rgba(6,103,241,.06) 45%,
            transparent 72%
        );

    filter:blur(3px);

}


/* Logo sample */

.dmxBrandKitLogoSample{

    position:relative;
    z-index:2;

    display:grid;

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

    gap:5px;

    padding:25px;

    border-radius:18px;

    background:var(--dmx-navy);

    box-shadow:
        0 20px 40px rgba(8,38,77,.23);

    transform:
        translateX(-25px)
        rotate(-5deg);

}


.dmxBrandKitLogoSample span{

    width:22px;
    height:22px;

    border-radius:5px;

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

}


.dmxBrandKitLogoSample span:nth-child(2),
.dmxBrandKitLogoSample span:nth-child(3){

    background:var(--dmx-lime);

}


.dmxBrandKitLines{

    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    gap:9px;

    width:110px;

    padding:24px 20px;

    border-radius:14px;

    background:white;

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

    transform:
        translateX(8px)
        rotate(5deg);

}


.dmxBrandKitLines span{

    display:block;

    height:6px;

    border-radius:100px;

    background:#dce6ee;

}


.dmxBrandKitLines span:first-child{

    width:52%;
    background:var(--dmx-blue);

}


.dmxBrandKitLines span:last-child{

    width:76%;

}


/* Professional */

.dmxBrandKitDocument{

    position:relative;
    z-index:2;

    width:150px;
    height:180px;

    padding:18px;

    border-radius:12px;

    background:white;

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

    transform:
        translateX(-16px)
        rotate(-4deg);

}


.dmxBrandKitDocumentHeader{

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

    padding-bottom:14px;

    border-bottom:
        1px solid var(--dmx-line);

}


.dmxBrandKitDocumentHeader > span{

    width:28px;
    height:28px;

    border-radius:8px;

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

}


.dmxBrandKitDocumentHeader div{

    display:flex;
    flex-direction:column;
    gap:5px;

}


.dmxBrandKitDocumentHeader i{

    display:block;

    width:54px;
    height:5px;

    border-radius:100px;

    background:#d7e1e9;

}


.dmxBrandKitDocumentHeader i:last-child{

    width:36px;

}


.dmxBrandKitDocumentBody{

    display:flex;
    flex-direction:column;
    gap:10px;

    padding-top:19px;

}


.dmxBrandKitDocumentBody span{

    height:8px;

    border-radius:100px;

    background:#e2e9ef;

}


.dmxBrandKitDocumentBody span:first-child{

    width:72%;
    background:rgba(6,103,241,.2);

}


.dmxBrandKitCardMini{

    position:relative;
    z-index:3;

    width:145px;
    height:82px;

    display:flex;
    align-items:center;
    gap:14px;

    padding:15px;

    border-radius:15px;

    background:var(--dmx-navy);

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

    transform:
        translateX(-2px)
        translateY(36px)
        rotate(7deg);

}


.dmxBrandKitCardMini > span{

    flex:0 0 35px;

    width:35px;
    height:35px;

    border-radius:9px;

    background:var(--dmx-lime);

}


.dmxBrandKitCardMini div{

    display:flex;
    flex:1;
    flex-direction:column;
    gap:7px;

}


.dmxBrandKitCardMini i{

    display:block;

    width:100%;
    height:5px;

    border-radius:100px;

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

}


.dmxBrandKitCardMini i:last-child{

    width:60%;

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

}


/* Enterprise */

.dmxBrandKitScreen{

    position:relative;
    z-index:2;

    overflow:hidden;

    width:190px;
    height:140px;

    border:
        5px solid var(--dmx-navy);

    border-radius:12px;

    background:white;

    box-shadow:
        0 22px 48px rgba(8,38,77,.22);

    transform:
        translateX(-14px)
        rotate(-3deg);

}


.dmxBrandKitScreenBar{

    display:flex;
    align-items:center;
    gap:5px;

    height:22px;

    padding:0 8px;

    background:var(--dmx-navy);

}


.dmxBrandKitScreenBar i{

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--dmx-cyan);

}


.dmxBrandKitScreenContent{

    padding:16px;

}


.dmxBrandKitScreenContent div{

    width:65%;
    height:36px;

    margin-bottom:14px;

    border-radius:8px;

    background:
        linear-gradient(
            135deg,
            rgba(6,103,241,.18),
            rgba(0,217,220,.2)
        );

}


.dmxBrandKitScreenContent span{

    display:block;

    width:100%;
    height:6px;

    margin-top:8px;

    border-radius:100px;

    background:#dde6ed;

}


.dmxBrandKitScreenContent span:last-child{

    width:68%;

}


.dmxBrandKitSocialCard{

    position:relative;
    z-index:3;

    width:96px;
    height:128px;

    padding:12px;

    border-radius:15px;

    background:white;

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

    transform:
        translateX(-1px)
        translateY(25px)
        rotate(7deg);

}


.dmxBrandKitSocialCard > span{

    display:block;

    width:22px;
    height:22px;

    margin-bottom:10px;

    border-radius:7px;

    background:var(--dmx-blue);

}


.dmxBrandKitSocialCard div{

    height:55px;

    margin-bottom:10px;

    border-radius:8px;

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

}


.dmxBrandKitSocialCard i{

    display:block;

    width:75%;
    height:5px;

    border-radius:100px;

    background:#dce5ec;

}


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

.dmxBrandKitContent{

    display:flex;
    flex-direction:column;
    flex:1;

}


.dmxBrandKitContent h3{

    margin:
        0
        0
        17px;

    color:var(--dmx-navy);

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

    font-weight:750;
    line-height:1.08;

    letter-spacing:-.035em;

}


.dmxBrandKitContent > p{

    margin:
        0
        0
        27px;

    color:var(--dmx-muted);

    font-size:15px;
    line-height:1.75;

}


.dmxBrandKitContent ul{

    display:flex;
    flex-direction:column;
    gap:13px;

    margin:0;
    padding:0;

    list-style:none;

}


.dmxBrandKitContent li{

    position:relative;

    padding-left:28px;

    color:#34465a;

    font-size:14px;
    font-weight:600;
    line-height:1.5;

}


.dmxBrandKitContent li::before{

    content:"";

    position:absolute;

    left:0;
    top:.43em;

    width:14px;
    height:14px;

    border-radius:50%;

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

    box-shadow:
        0 0 0 4px rgba(6,103,241,.08);

}


.dmxBrandKitContent li::after{

    content:"";

    position:absolute;

    left:5px;
    top:
        calc(.43em + 3px);

    width:4px;
    height:6px;

    border:
        solid white;

    border-width:
        0 1.5px 1.5px 0;

    transform:rotate(45deg);

}


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

.dmxBrandKitFooter{

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:16px;

    margin-top:35px;
    padding-top:25px;

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

}


.dmxBrandKitFooter > span{

    color:var(--dmx-muted);

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

    letter-spacing:.1em;
    text-transform:uppercase;

}


.dmxBrandKitFooter a{

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

    color:var(--dmx-navy);

    font-size:14px;
    font-weight:800;

    text-decoration:none;

    transition:
        color .3s ease,
        gap .3s ease;

}


.dmxBrandKitFooter a > span{

    display:grid;
    place-items:center;

    width:31px;
    height:31px;

    border-radius:50%;

    background:var(--dmx-navy);
    color:white;

    transition:
        background .3s ease,
        transform .3s ease;

}


.dmxBrandKitFooter a:hover{

    gap:17px;

    color:var(--dmx-blue);

}


.dmxBrandKitFooter a:hover > span{

    background:var(--dmx-blue);

    transform:rotate(-35deg);

}


/* ============================================================
   CUSTOM KIT
============================================================ */

.dmxBrandKitsCustom{

    position:relative;
    z-index:2;
    overflow:hidden;

    display:grid;

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

    gap:
        clamp(22px,3vw,38px);

    align-items:center;

    margin-top:
        clamp(25px,3vw,40px);

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

    border-radius:
        clamp(24px,2.7vw,36px);

    background:
        linear-gradient(
            120deg,
            var(--dmx-navy) 0%,
            #06366d 58%,
            #075fa7 100%
        );

    box-shadow:
        0 28px 80px rgba(8,38,77,.22);

}


.dmxBrandKitsCustom::before{

    content:"";

    position:absolute;

    width:340px;
    height:340px;

    top:-190px;
    right:18%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,217,220,.25),
            transparent 68%
        );

    pointer-events:none;

}


.dmxBrandKitsCustomIcon{

    position:relative;

    width:70px;
    height:70px;

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

    border-radius:20px;

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

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

}


.dmxBrandKitsCustomIcon span{

    position:absolute;

    top:50%;
    left:50%;

    width:28px;
    height:4px;

    border-radius:100px;

    background:var(--dmx-lime);

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

}


.dmxBrandKitsCustomIcon span:last-child{

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

}


.dmxBrandKitsCustomContent{

    position:relative;
    z-index:2;

}


.dmxBrandKitsCustomContent small{

    display:block;

    margin-bottom:9px;

    color:var(--dmx-cyan);

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

    letter-spacing:.15em;
    text-transform:uppercase;

}


.dmxBrandKitsCustomContent h3{

    margin:
        0
        0
        10px;

    color:white;

    font-size:
        clamp(25px,2.4vw,36px);

    font-weight:750;
    line-height:1.08;

    letter-spacing:-.035em;

}


.dmxBrandKitsCustomContent p{

    max-width:710px;

    margin:0;

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

    font-size:15px;
    line-height:1.65;

}


.dmxBrandKitsCustomButton{

    position:relative;
    z-index:2;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-height:56px;

    padding:
        0
        23px;

    border-radius:15px;

    background:var(--dmx-lime);
    color:#132200;

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

    text-decoration:none;
    white-space:nowrap;

    box-shadow:
        0 15px 30px rgba(0,0,0,.16);

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

}


.dmxBrandKitsCustomButton:hover{

    transform:translateY(-4px);

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

}


.dmxBrandKitsCustomButton span{

    font-size:18px;

}


/* ============================================================
   RESPONSIVE — 1100PX
============================================================ */

@media (max-width:1100px){

    .dmxBrandKitsGrid{

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

    }


    .dmxBrandKitCard:last-child{

        grid-column:1 / -1;

        min-height:auto;

    }


    .dmxBrandKitCard:last-child
    .dmxBrandKitContent{

        max-width:760px;

    }

}


/* ============================================================
   RESPONSIVE — 900PX
============================================================ */

@media (max-width:900px){

    .dmxBrandKitsHeader{

        grid-template-columns:1fr;

        gap:28px;

    }


    .dmxBrandKitsEyebrow{

        padding-top:0;

    }


    .dmxBrandKitsIntro{

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

        margin-left:0;
        padding-left:0;

    }


    .dmxBrandKitsCustom{

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

    }


    .dmxBrandKitsCustomButton{

        grid-column:1 / -1;

        width:100%;

    }

}


/* ============================================================
   RESPONSIVE — 720PX
============================================================ */

@media (max-width:720px){

    .dmxBrandKits{

        padding:
            95px
            0;

    }


    .dmxBrandKitsGrid{

        grid-template-columns:1fr;

    }


    .dmxBrandKitCard,
    .dmxBrandKitCard:last-child{

        grid-column:auto;

        min-height:auto;

    }


    .dmxBrandKitVisual{

        height:220px;

    }


    .dmxBrandKitCard:hover{

        transform:none;

    }


    .dmxBrandKitsCustom{

        grid-template-columns:1fr;

    }


    .dmxBrandKitsCustomIcon{

        width:62px;
        height:62px;

    }

}


/* ============================================================
   RESPONSIVE — 520PX
============================================================ */

@media (max-width:520px){

    .dmxBrandKitsHeader{

        margin-bottom:44px;

    }


    .dmxBrandKitsHeading h2{

        font-size:
            clamp(39px,12vw,56px);

    }


    .dmxBrandKitsIntro{

        grid-template-columns:1fr;

        gap:12px;

        margin-bottom:45px;

    }


    .dmxBrandKitsIntroNumber{

        font-size:11px;

    }


    .dmxBrandKitCard{

        padding:21px;

        border-radius:24px;

    }


    .dmxBrandKitCardFeatured
    .dmxBrandKitCardTop{

        padding-right:0;

        padding-top:40px;

    }


    .dmxBrandKitFeaturedLabel{

        top:18px;
        right:auto;
        left:21px;

    }


    .dmxBrandKitVisual{

        height:205px;

        margin-bottom:28px;

    }


    .dmxBrandKitLogoSample{

        transform:
            translateX(-14px)
            rotate(-5deg);

    }


    .dmxBrandKitLines{

        width:95px;

        transform:
            translateX(2px)
            rotate(5deg);

    }


    .dmxBrandKitDocument{

        width:135px;

        transform:
            translateX(-5px)
            rotate(-4deg);

    }


    .dmxBrandKitCardMini{

        width:118px;

        transform:
            translateX(-4px)
            translateY(35px)
            rotate(7deg);

    }


    .dmxBrandKitScreen{

        width:165px;

        transform:
            translateX(-2px)
            rotate(-3deg);

    }


    .dmxBrandKitSocialCard{

        width:82px;

        transform:
            translateX(-4px)
            translateY(28px)
            rotate(7deg);

    }


    .dmxBrandKitsCustom{

        padding:25px;

        border-radius:25px;

    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

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

    .dmxBrandKitCard,
    .dmxBrandKitFooter a,
    .dmxBrandKitFooter a > span,
    .dmxBrandKitsCustomButton{

        transition:none;

    }

}