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

.dmxMarketingKits{

    position:relative;

    overflow:hidden;

    padding:
        clamp(100px,10vw,170px)
        0;

    background:
        radial-gradient(
            circle at 9% 15%,
            rgba(6,103,241,.11),
            transparent 34%
        ),
        radial-gradient(
            circle at 91% 18%,
            rgba(0,217,220,.11),
            transparent 32%
        ),
        radial-gradient(
            circle at 78% 88%,
            rgba(142,91,255,.10),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #f8fbfd 0%,
            #ffffff 48%,
            #f1f7fb 100%
        );

    isolation:isolate;

}


.dmxMarketingKits::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

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

    background-size:
        58px 58px;

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

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

}


.dmxMarketingKits::after{

    content:"";

    position:absolute;

    top:42%;

    left:-210px;

    width:470px;

    height:470px;

    z-index:-1;

    border-radius:50%;

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

    filter:blur(24px);

    pointer-events:none;

}


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

.dmxMarketingKitsGrid{

    display:grid;

    grid-template-columns:
        minmax(0,.92fr)
        minmax(540px,1.08fr);

    gap:
        clamp(64px,7vw,112px);

    align-items:center;

}


/* ============================================================
   CONTENIDO
============================================================ */

.dmxMarketingKitsContent{

    position:relative;

    z-index:5;

}


.dmxMarketingKitsEyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:24px;

}


.dmxMarketingKitsEyebrow > 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,.36);

}


.dmxMarketingKitsEyebrow small{

    color:var(--dmx-blue);

    font-size:.75rem;

    font-weight:850;

    letter-spacing:.15em;

    line-height:1.2;

    text-transform:uppercase;

}


.dmxMarketingKitsContent h2{

    max-width:770px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(2.7rem,4.7vw,5.15rem);

    font-weight:850;

    letter-spacing:-.058em;

    line-height:.98;

    text-wrap:balance;

}


.dmxMarketingKitsContent 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;

}


.dmxMarketingKitsLead{

    max-width:690px;

    margin:
        30px
        0
        0;

    color:var(--dmx-muted);

    font-size:
        clamp(1.02rem,1.35vw,1.18rem);

    line-height:1.85;

}


/* ============================================================
   BENEFICIOS
============================================================ */

.dmxMarketingKitsBenefits{

    display:grid;

    gap:16px;

    margin-top:38px;

}


.dmxMarketingKitsBenefit{

    position:relative;

    display:grid;

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

    gap:18px;

    align-items:flex-start;

    padding:
        20px
        22px;

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

    border-radius:20px;

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

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

    backdrop-filter:
        blur(16px);

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

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

}


.dmxMarketingKitsBenefit::after{

    content:"";

    position:absolute;

    top:50%;

    right:18px;

    width:6px;

    height:34px;

    border-radius:999px;

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

    opacity:0;

    transform:
        translateY(-50%)
        scaleY(.3);

    transition:
        opacity .35s ease,
        transform .35s ease;

}


.dmxMarketingKitsBenefit:hover{

    transform:
        translateY(-5px)
        translateX(4px);

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

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

    box-shadow:
        0 24px 50px rgba(15,51,88,.10);

}


.dmxMarketingKitsBenefit:hover::after{

    opacity:1;

    transform:
        translateY(-50%)
        scaleY(1);

}


.dmxMarketingKitsBenefitIcon{

    position:relative;

    display:grid;

    place-items:center;

    width:49px;

    height:49px;

    flex:0 0 auto;

    border-radius:16px;

    color:var(--dmx-blue);

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

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

}


.dmxMarketingKitsBenefit h3{

    margin:
        1px
        0
        7px;

    color:var(--dmx-ink);

    font-size:1rem;

    font-weight:850;

    letter-spacing:-.018em;

    line-height:1.3;

}


.dmxMarketingKitsBenefit p{

    margin:0;

    color:var(--dmx-muted);

    font-size:.92rem;

    line-height:1.7;

}


/* ============================================================
   ICONO IDENTIDAD
============================================================ */

.dmxMarketingKitsIconIdentity{

    position:relative;

    width:25px;

    height:25px;

    border:
        2px solid
        currentColor;

    border-radius:7px;

}


.dmxMarketingKitsIconIdentity::before{

    content:"";

    position:absolute;

    top:4px;

    left:4px;

    width:6px;

    height:6px;

    border-radius:2px;

    background:
        currentColor;

    box-shadow:
        9px 0 0 currentColor,
        0 9px 0 currentColor,
        9px 9px 0 currentColor;

}


.dmxMarketingKitsIconIdentity::after{

    content:"";

    position:absolute;

    right:-5px;

    bottom:-5px;

    width:9px;

    height:9px;

    border-radius:50%;

    background:
        var(--dmx-cyan);

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

}


/* ============================================================
   ICONO RECURSOS
============================================================ */

.dmxMarketingKitsIconResources{

    position:relative;

    width:25px;

    height:23px;

}


.dmxMarketingKitsIconResources::before{

    content:"";

    position:absolute;

    top:0;

    left:1px;

    width:18px;

    height:15px;

    border:
        2px solid
        currentColor;

    border-radius:5px;

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

}


.dmxMarketingKitsIconResources::after{

    content:"";

    position:absolute;

    right:0;

    bottom:0;

    width:18px;

    height:15px;

    border:
        2px solid
        currentColor;

    border-radius:5px;

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

    box-shadow:
        inset 0 0 0 3px rgba(6,103,241,.05);

}


/* ============================================================
   ICONO ESCALABLE
============================================================ */

.dmxMarketingKitsIconScalable{

    position:relative;

    width:24px;

    height:24px;

    border-left:
        2px solid
        currentColor;

    border-bottom:
        2px solid
        currentColor;

}


.dmxMarketingKitsIconScalable::before{

    content:"";

    position:absolute;

    left:4px;

    bottom:4px;

    width:14px;

    height:10px;

    border-top:
        2px solid
        currentColor;

    border-right:
        2px solid
        currentColor;

    transform:
        skewY(-28deg);

}


.dmxMarketingKitsIconScalable::after{

    content:"";

    position:absolute;

    top:-1px;

    right:-1px;

    width:7px;

    height:7px;

    border-top:
        2px solid
        currentColor;

    border-right:
        2px solid
        currentColor;

}


/* ============================================================
   TIPOS DE KIT
============================================================ */

.dmxMarketingKitsTypes{

    margin-top:30px;

}


.dmxMarketingKitsTypes > p{

    margin:
        0
        0
        13px;

    color:var(--dmx-muted);

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.dmxMarketingKitsTypeList{

    display:flex;

    flex-wrap:wrap;

    gap:9px;

}


.dmxMarketingKitsTypeList span{

    display:inline-flex;

    align-items:center;

    min-height:34px;

    padding:
        0
        13px;

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

    border-radius:999px;

    color:var(--dmx-navy);

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

    font-size:.72rem;

    font-weight:750;

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

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

}


.dmxMarketingKitsTypeList span:hover{

    transform:
        translateY(-3px);

    color:var(--dmx-blue);

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

    background:
        var(--dmx-white);

}


/* ============================================================
   ACCIONES
============================================================ */

.dmxMarketingKitsActions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    align-items:center;

    margin-top:38px;

}


.dmxMarketingKitsPrimary,
.dmxMarketingKitsSecondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:54px;

    border-radius:16px;

    font-size:.92rem;

    font-weight:850;

    line-height:1;

    text-decoration:none;

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

}


.dmxMarketingKitsPrimary{

    gap:12px;

    padding:
        0
        24px;

    color:var(--dmx-white);

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

    box-shadow:
        0 18px 38px rgba(6,103,241,.23);

}


.dmxMarketingKitsPrimary svg{

    transition:
        transform .3s ease;

}


.dmxMarketingKitsPrimary:hover{

    transform:
        translateY(-3px);

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

}


.dmxMarketingKitsPrimary:hover svg{

    transform:
        translateX(4px);

}


.dmxMarketingKitsSecondary{

    padding:
        0
        22px;

    color:var(--dmx-navy);

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

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

}


.dmxMarketingKitsSecondary:hover{

    transform:
        translateY(-3px);

    color:var(--dmx-blue);

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

    background:
        var(--dmx-white);

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

}


.dmxMarketingKitsPrimary:focus-visible,
.dmxMarketingKitsSecondary:focus-visible{

    outline:
        3px solid
        rgba(0,217,220,.38);

    outline-offset:4px;

}


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

.dmxMarketingKitsVisual{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:850px;

    isolation:isolate;

}


.dmxMarketingKitsGlow{

    position:absolute;

    z-index:-2;

    border-radius:50%;

    filter:
        blur(28px);

    pointer-events:none;

}


.dmxMarketingKitsGlowOne{

    top:5%;

    right:1%;

    width:360px;

    height:360px;

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

}


.dmxMarketingKitsGlowTwo{

    bottom:5%;

    left:1%;

    width:320px;

    height:320px;

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

}


/* ============================================================
   TABLERO
============================================================ */

.dmxMarketingKitsBoard{

    position:relative;

    z-index:2;

    width:min(100%,660px);

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

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

    border-radius:32px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(241,248,252,.82)
        );

    box-shadow:
        0 42px 115px rgba(15,51,88,.18),
        inset 0 1px 0 rgba(255,255,255,.94);

    backdrop-filter:
        blur(26px);

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

    transform:
        perspective(1500px)
        rotateY(-4deg)
        rotateX(1.5deg);

    transform-style:
        preserve-3d;

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

}


.dmxMarketingKitsVisual:hover .dmxMarketingKitsBoard{

    transform:
        perspective(1500px)
        rotateY(0deg)
        rotateX(0deg)
        translateY(-6px);

    box-shadow:
        0 52px 135px rgba(15,51,88,.23),
        inset 0 1px 0 rgba(255,255,255,.96);

}


/* ============================================================
   HEADER DEL TABLERO
============================================================ */

.dmxMarketingKitsBoardHeader{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-bottom:22px;

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

}


.dmxMarketingKitsBoardIdentity{

    display:flex;

    align-items:center;

    gap:13px;

}


.dmxMarketingKitsBoardMark{

    display:grid;

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

    grid-template-rows:
        repeat(2,10px);

    gap:4px;

    flex:0 0 auto;

    padding:10px;

    border-radius:13px;

    background:
        var(--dmx-navy);

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

}


.dmxMarketingKitsBoardMark span{

    display:block;

    border-radius:3px;

}


.dmxMarketingKitsBoardMark span:nth-child(1){

    background:
        var(--dmx-blue);

}


.dmxMarketingKitsBoardMark span:nth-child(2){

    background:
        var(--dmx-cyan);

}


.dmxMarketingKitsBoardMark span:nth-child(3){

    background:
        #8e5bff;

}


.dmxMarketingKitsBoardMark span:nth-child(4){

    background:
        var(--dmx-lime);

}


.dmxMarketingKitsBoardIdentity small{

    display:block;

    margin-bottom:4px;

    color:var(--dmx-muted);

    font-size:.68rem;

    font-weight:750;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.dmxMarketingKitsBoardIdentity strong{

    display:block;

    color:var(--dmx-ink);

    font-size:.97rem;

    font-weight:850;

}


.dmxMarketingKitsBoardStatus{

    display:inline-flex;

    align-items:center;

    gap:8px;

    flex:0 0 auto;

    padding:
        9px
        12px;

    border:
        1px solid
        rgba(0,190,150,.16);

    border-radius:999px;

    color:#087966;

    background:
        rgba(0,190,150,.09);

    font-size:.68rem;

    font-weight:800;

}


.dmxMarketingKitsBoardStatus > span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:
        #00be96;

    box-shadow:
        0 0 0 5px rgba(0,190,150,.12);

    animation:
        dmxMarketingKitsStatusPulse
        2.2s ease-in-out
        infinite;

}


/* ============================================================
   RESUMEN
============================================================ */

.dmxMarketingKitsSummary{

    display:grid;

    grid-template-columns:
        minmax(160px,.75fr)
        minmax(0,1.25fr);

    gap:24px;

    align-items:center;

    padding:
        28px
        0
        24px;

}


.dmxMarketingKitsSummary > div:first-child small{

    display:block;

    margin-bottom:8px;

    color:var(--dmx-muted);

    font-size:.68rem;

    font-weight:750;

    letter-spacing:.06em;

    text-transform:uppercase;

}


.dmxMarketingKitsSummary > div:first-child strong{

    display:block;

    color:var(--dmx-ink);

    font-size:
        clamp(2.1rem,3.8vw,3.2rem);

    font-weight:900;

    letter-spacing:-.06em;

    line-height:1;

}


.dmxMarketingKitsSummary > div:first-child span{

    display:block;

    margin-top:8px;

    color:#087d70;

    font-size:.70rem;

    font-weight:800;

}


.dmxMarketingKitsSummaryStats{

    display:grid;

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

    gap:10px;

}


.dmxMarketingKitsSummaryStats > div{

    padding:
        15px
        13px;

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

    border-radius:16px;

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

    text-align:center;

}


.dmxMarketingKitsSummaryStats small{

    display:block;

    margin-bottom:6px;

    color:var(--dmx-muted);

    font-size:.60rem;

    font-weight:750;

}


.dmxMarketingKitsSummaryStats strong{

    display:block;

    color:var(--dmx-ink);

    font-size:1.18rem;

    font-weight:900;

}


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

.dmxMarketingKitsAssets{

    padding:
        20px;

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

    border-radius:21px;

    background:
        rgba(248,251,254,.82);

}


.dmxMarketingKitsAssetsHeader{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:18px;

    margin-bottom:16px;

}


.dmxMarketingKitsAssetsHeader small{

    display:block;

    margin-bottom:4px;

    color:var(--dmx-muted);

    font-size:.64rem;

    font-weight:750;

    letter-spacing:.06em;

    text-transform:uppercase;

}


.dmxMarketingKitsAssetsHeader strong{

    display:block;

    color:var(--dmx-ink);

    font-size:.91rem;

    font-weight:850;

}


.dmxMarketingKitsAssetsHeader > span{

    color:var(--dmx-muted);

    font-size:.62rem;

    font-weight:750;

}


.dmxMarketingKitsAssetGrid{

    display:grid;

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

    gap:12px;

}


.dmxMarketingKitsAsset{

    min-width:0;

    overflow:hidden;

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

    border-radius:17px;

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

    box-shadow:
        0 10px 24px rgba(15,51,88,.05);

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

}


.dmxMarketingKitsAsset:hover{

    transform:
        translateY(-5px);

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

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

}


.dmxMarketingKitsAssetPreview{

    position:relative;

    overflow:hidden;

    min-height:128px;

    padding:
        16px;

}


.dmxMarketingKitsAssetPreview::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.12),
            transparent 48%
        );

}


.dmxMarketingKitsAssetPreview small,
.dmxMarketingKitsAssetPreview strong,
.dmxMarketingKitsAssetPreview span,
.dmxMarketingKitsAssetPreview div{

    position:relative;

    z-index:2;

}


/* ============================================================
   PIEZA SOCIAL
============================================================ */

.dmxMarketingKitsAsset.is-social
.dmxMarketingKitsAssetPreview{

    display:flex;

    flex-direction:column;

    justify-content:flex-end;

    color:var(--dmx-white);

    background:
        radial-gradient(
            circle at 84% 16%,
            rgba(198,255,47,.42),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--dmx-navy),
            var(--dmx-blue) 58%,
            var(--dmx-cyan)
        );

}


.dmxMarketingKitsAsset.is-social
.dmxMarketingKitsAssetPreview > span{

    position:absolute;

    top:16px;

    left:16px;

    width:32px;

    height:32px;

    border-radius:10px;

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

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

}


.dmxMarketingKitsAsset.is-social
.dmxMarketingKitsAssetPreview strong{

    max-width:180px;

    font-size:1rem;

    font-weight:900;

    letter-spacing:-.04em;

    line-height:1.06;

}


.dmxMarketingKitsAsset.is-social
.dmxMarketingKitsAssetPreview small{

    margin-top:7px;

    font-size:.53rem;

    font-weight:750;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/* ============================================================
   HISTORIA
============================================================ */

.dmxMarketingKitsAsset.is-story
.dmxMarketingKitsAssetPreview{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    justify-content:center;

    min-height:128px;

    color:var(--dmx-ink);

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(142,91,255,.28),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #eef8ff,
            #f9f5ff
        );

}


.dmxMarketingKitsAsset.is-story
.dmxMarketingKitsAssetPreview small{

    color:var(--dmx-blue);

    font-size:.49rem;

    font-weight:850;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.dmxMarketingKitsAsset.is-story
.dmxMarketingKitsAssetPreview strong{

    max-width:170px;

    margin-top:8px;

    font-size:1rem;

    font-weight:900;

    letter-spacing:-.04em;

    line-height:1.06;

}


.dmxMarketingKitsAsset.is-story
.dmxMarketingKitsAssetPreview span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:25px;

    margin-top:11px;

    padding:
        0
        10px;

    border-radius:8px;

    color:var(--dmx-white);

    background:
        var(--dmx-blue);

    font-size:.48rem;

    font-weight:850;

}


/* ============================================================
   BANNER
============================================================ */

.dmxMarketingKitsAsset.is-banner{

    grid-column:
        1 / -1;

}


.dmxMarketingKitsAsset.is-banner
.dmxMarketingKitsAssetPreview{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    min-height:104px;

    color:var(--dmx-white);

    background:
        linear-gradient(
            110deg,
            var(--dmx-navy),
            var(--dmx-blue) 56%,
            #8e5bff
        );

}


.dmxMarketingKitsAsset.is-banner
.dmxMarketingKitsAssetPreview div{

    max-width:320px;

}


.dmxMarketingKitsAsset.is-banner
.dmxMarketingKitsAssetPreview small{

    display:block;

    margin-bottom:6px;

    font-size:.48rem;

    font-weight:750;

    letter-spacing:.09em;

    text-transform:uppercase;

}


.dmxMarketingKitsAsset.is-banner
.dmxMarketingKitsAssetPreview strong{

    display:block;

    font-size:1.05rem;

    font-weight:900;

    letter-spacing:-.035em;

    line-height:1.05;

}


.dmxMarketingKitsAsset.is-banner
.dmxMarketingKitsAssetPreview > span{

    width:74px;

    height:74px;

    flex:0 0 auto;

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

    border-radius:50%;

}


/* ============================================================
   PRESENTACIÓN
============================================================ */

.dmxMarketingKitsAsset.is-presentation{

    grid-column:
        1 / -1;

}


.dmxMarketingKitsAsset.is-presentation
.dmxMarketingKitsAssetPreview{

    display:grid;

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

    gap:16px;

    align-items:center;

    min-height:112px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(238,245,252,.96)
        );

}


.dmxMarketingKitsAsset.is-presentation
.dmxMarketingKitsAssetPreview > span{

    display:grid;

    place-items:center;

    width:48px;

    height:48px;

    border-radius:15px;

    color:var(--dmx-white);

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

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

    font-size:.66rem;

    font-weight:900;

}


.dmxMarketingKitsAsset.is-presentation
.dmxMarketingKitsAssetPreview small{

    display:block;

    margin-bottom:6px;

    color:var(--dmx-blue);

    font-size:.49rem;

    font-weight:850;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.dmxMarketingKitsAsset.is-presentation
.dmxMarketingKitsAssetPreview strong{

    display:block;

    max-width:330px;

    color:var(--dmx-ink);

    font-size:.92rem;

    font-weight:900;

    letter-spacing:-.03em;

    line-height:1.1;

}


/* ============================================================
   INFORMACIÓN DE PIEZA
============================================================ */

.dmxMarketingKitsAssetInfo{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    padding:
        12px
        14px;

}


.dmxMarketingKitsAssetInfo strong{

    overflow:hidden;

    color:var(--dmx-ink);

    font-size:.66rem;

    font-weight:850;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.dmxMarketingKitsAssetInfo span{

    flex:0 0 auto;

    color:var(--dmx-muted);

    font-size:.54rem;

    font-weight:750;

}


/* ============================================================
   PAQUETE DE ARCHIVOS
============================================================ */

.dmxMarketingKitsPackage{

    margin-top:18px;

    padding:
        20px;

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

    border-radius:21px;

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

}


.dmxMarketingKitsPackageHeader{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:18px;

    margin-bottom:15px;

}


.dmxMarketingKitsPackageHeader small{

    display:block;

    margin-bottom:4px;

    color:var(--dmx-muted);

    font-size:.64rem;

    font-weight:750;

    letter-spacing:.06em;

    text-transform:uppercase;

}


.dmxMarketingKitsPackageHeader strong{

    display:block;

    color:var(--dmx-ink);

    font-size:.91rem;

    font-weight:850;

}


.dmxMarketingKitsPackageHeader > span{

    color:var(--dmx-muted);

    font-size:.62rem;

    font-weight:750;

}


.dmxMarketingKitsPackageList{

    display:grid;

    gap:9px;

}


.dmxMarketingKitsPackageItem{

    display:grid;

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

    gap:11px;

    align-items:center;

    padding:
        11px
        12px;

    border-radius:15px;

    background:
        rgba(248,251,254,.82);

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

}


.dmxMarketingKitsPackageItem:hover{

    transform:
        translateX(4px);

    background:
        var(--dmx-white);

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

}


.dmxMarketingKitsPackageIcon{

    position:relative;

    width:35px;

    height:35px;

    flex:0 0 auto;

    border-radius:12px;

}


.dmxMarketingKitsPackageIcon::before{

    content:"";

    position:absolute;

    top:8px;

    left:8px;

    width:15px;

    height:17px;

    border:
        2px solid
        currentColor;

    border-radius:4px;

}


.dmxMarketingKitsPackageIcon::after{

    content:"";

    position:absolute;

    top:12px;

    left:12px;

    width:7px;

    height:2px;

    border-radius:999px;

    background:
        currentColor;

    box-shadow:
        0 5px 0 currentColor;

}


.dmxMarketingKitsPackageIcon.is-blue{

    color:var(--dmx-blue);

    background:
        rgba(6,103,241,.10);

}


.dmxMarketingKitsPackageIcon.is-cyan{

    color:#078990;

    background:
        rgba(0,217,220,.11);

}


.dmxMarketingKitsPackageIcon.is-purple{

    color:#7443bd;

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

}


.dmxMarketingKitsPackageItem > div{

    min-width:0;

}


.dmxMarketingKitsPackageItem strong{

    display:block;

    overflow:hidden;

    color:var(--dmx-ink);

    font-size:.74rem;

    font-weight:850;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.dmxMarketingKitsPackageItem small{

    display:block;

    overflow:hidden;

    margin-top:4px;

    color:var(--dmx-muted);

    font-size:.58rem;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.dmxMarketingKitsPackageItem > span:last-child{

    color:var(--dmx-ink);

    font-size:.74rem;

    font-weight:900;

}


/* ============================================================
   FORMATOS
============================================================ */

.dmxMarketingKitsFormats{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    margin-top:18px;

    padding:
        18px
        20px;

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

    border-radius:20px;

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

}


.dmxMarketingKitsFormats small{

    display:block;

    margin-bottom:4px;

    color:var(--dmx-muted);

    font-size:.62rem;

    font-weight:750;

    letter-spacing:.06em;

    text-transform:uppercase;

}


.dmxMarketingKitsFormats strong{

    display:block;

    color:var(--dmx-ink);

    font-size:.80rem;

    font-weight:850;

}


.dmxMarketingKitsFormatBadges{

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-end;

    gap:7px;

}


.dmxMarketingKitsFormatBadges span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-width:38px;

    min-height:29px;

    padding:
        0
        8px;

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

    border-radius:9px;

    color:var(--dmx-navy);

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

    font-size:.56rem;

    font-weight:900;

}


/* ============================================================
   ELEMENTOS FLOTANTES
============================================================ */

.dmxMarketingKitsFloating{

    position:absolute;

    z-index:5;

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

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

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

    backdrop-filter:
        blur(20px);

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

    pointer-events:none;

}


.dmxMarketingKitsFloatingApproved,
.dmxMarketingKitsFloatingFiles{

    display:flex;

    align-items:center;

    gap:11px;

    padding:
        13px
        16px;

    border-radius:17px;

}


.dmxMarketingKitsFloatingApproved{

    top:8%;

    left:-5%;

    animation:
        dmxMarketingKitsFloatApproved
        5.6s ease-in-out
        infinite;

}


.dmxMarketingKitsFloatingFiles{

    right:-5%;

    bottom:18%;

    animation:
        dmxMarketingKitsFloatFiles
        6.1s ease-in-out
        infinite;

}


.dmxMarketingKitsFloating small{

    display:block;

    margin-bottom:3px;

    color:var(--dmx-muted);

    font-size:.60rem;

    font-weight:750;

}


.dmxMarketingKitsFloating strong{

    display:block;

    color:var(--dmx-ink);

    font-size:.74rem;

    font-weight:850;

}


.dmxMarketingKitsApprovedIcon{

    display:grid;

    place-items:center;

    width:36px;

    height:36px;

    flex:0 0 auto;

    border-radius:50%;

    color:#087966;

    background:
        rgba(0,190,150,.11);

    box-shadow:
        0 0 0 6px rgba(0,190,150,.06);

    font-size:.88rem;

    font-weight:900;

}


.dmxMarketingKitsFilesIcon{

    position:relative;

    width:36px;

    height:36px;

    flex:0 0 auto;

    border-radius:12px;

    color:var(--dmx-blue);

    background:
        rgba(6,103,241,.10);

}


.dmxMarketingKitsFilesIcon::before{

    content:"";

    position:absolute;

    top:8px;

    left:9px;

    width:16px;

    height:19px;

    border:
        2px solid
        currentColor;

    border-radius:4px;

}


.dmxMarketingKitsFilesIcon::after{

    content:"";

    position:absolute;

    top:13px;

    left:13px;

    width:7px;

    height:2px;

    border-radius:999px;

    background:
        currentColor;

    box-shadow:
        0 5px 0 currentColor;

}


.dmxMarketingKitsFloatingChannels{

    top:8%;

    right:-7%;

    min-width:185px;

    padding:
        15px
        17px;

    border-radius:18px;

    animation:
        dmxMarketingKitsFloatChannels
        6.4s ease-in-out
        infinite;

}


.dmxMarketingKitsFloatingChannels > div{

    display:flex;

    gap:6px;

    margin-top:10px;

}


.dmxMarketingKitsFloatingChannels > div span{

    width:22px;

    height:22px;

    border-radius:7px;

    background:
        rgba(6,103,241,.10);

}


.dmxMarketingKitsFloatingChannels > div span:nth-child(2){

    background:
        rgba(0,217,220,.13);

}


.dmxMarketingKitsFloatingChannels > div span:nth-child(3){

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

}


.dmxMarketingKitsFloatingChannels > div span:nth-child(4){

    background:
        rgba(198,255,47,.25);

}


.dmxMarketingKitsFloatingChannels > div span:nth-child(5){

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

}


.dmxMarketingKitsFloatingProgress{

    bottom:5%;

    left:3%;

    min-width:175px;

    padding:
        15px
        17px;

    border-radius:18px;

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

}


.dmxMarketingKitsFloatingProgress strong{

    margin-top:4px;

    font-size:1.35rem;

    letter-spacing:-.04em;

}


.dmxMarketingKitsFloatingProgress > div{

    height:6px;

    margin-top:10px;

    overflow:hidden;

    border-radius:999px;

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

}


.dmxMarketingKitsFloatingProgress > div span{

    display:block;

    width:100%;

    height:100%;

    border-radius:inherit;

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

}


/* ============================================================
   PROCESO
============================================================ */

.dmxMarketingKitsProcess{

    position:relative;

    z-index:4;

    margin-top:
        clamp(76px,8vw,118px);

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

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

    border-radius:28px;

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

    box-shadow:
        0 30px 80px rgba(15,51,88,.10);

    backdrop-filter:
        blur(20px);

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

}


.dmxMarketingKitsProcessHeader{

    display:grid;

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

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

    align-items:end;

    padding-bottom:28px;

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

}


.dmxMarketingKitsProcessHeader small{

    display:block;

    margin-bottom:10px;

    color:var(--dmx-blue);

    font-size:.70rem;

    font-weight:850;

    letter-spacing:.13em;

    text-transform:uppercase;

}


.dmxMarketingKitsProcessHeader h3{

    max-width:680px;

    margin:0;

    color:var(--dmx-ink);

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

    font-weight:850;

    letter-spacing:-.045em;

    line-height:1.05;

    text-wrap:balance;

}


.dmxMarketingKitsProcessHeader p{

    max-width:500px;

    margin:0;

    color:var(--dmx-muted);

    font-size:.98rem;

    line-height:1.75;

}


.dmxMarketingKitsProcessList{

    position:relative;

    display:grid;

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

    gap:14px;

    margin:
        30px
        0
        0;

    padding:0;

    list-style:none;

}


.dmxMarketingKitsProcessList::before{

    content:"";

    position:absolute;

    top:28px;

    left:8%;

    right:8%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            rgba(6,103,241,.14),
            rgba(0,217,220,.35),
            rgba(142,91,255,.30),
            rgba(198,255,47,.28)
        );

}


.dmxMarketingKitsProcessList li{

    position:relative;

    z-index:2;

    min-width:0;

    padding:
        0
        8px;

    text-align:center;

}


.dmxMarketingKitsProcessList li > span{

    display:grid;

    place-items:center;

    width:56px;

    height:56px;

    margin:
        0
        auto
        16px;

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

    border-radius:18px;

    color:var(--dmx-blue);

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

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

    font-size:.72rem;

    font-weight:900;

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

}


.dmxMarketingKitsProcessList li:hover > span{

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

    color:var(--dmx-white);

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

    box-shadow:
        0 20px 38px rgba(6,103,241,.22);

}


.dmxMarketingKitsProcessList strong{

    display:block;

    color:var(--dmx-ink);

    font-size:.88rem;

    font-weight:850;

}


.dmxMarketingKitsProcessList small{

    display:block;

    margin-top:5px;

    color:var(--dmx-muted);

    font-size:.66rem;

    line-height:1.5;

}


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

@keyframes dmxMarketingKitsStatusPulse{

    0%,
    100%{

        transform:scale(1);

        box-shadow:
            0 0 0 5px rgba(0,190,150,.12);

    }

    50%{

        transform:scale(.86);

        box-shadow:
            0 0 0 9px rgba(0,190,150,.04);

    }

}


@keyframes dmxMarketingKitsFloatApproved{

    0%,
    100%{

        transform:
            translate3d(0,0,0)
            rotate(-1deg);

    }

    50%{

        transform:
            translate3d(8px,-10px,0)
            rotate(1deg);

    }

}


@keyframes dmxMarketingKitsFloatFiles{

    0%,
    100%{

        transform:
            translate3d(0,0,0);

    }

    50%{

        transform:
            translate3d(-8px,-11px,0);

    }

}


@keyframes dmxMarketingKitsFloatChannels{

    0%,
    100%{

        transform:
            translate3d(0,0,0)
            rotate(1deg);

    }

    50%{

        transform:
            translate3d(-7px,-12px,0)
            rotate(-1deg);

    }

}


@keyframes dmxMarketingKitsFloatProgress{

    0%,
    100%{

        transform:
            translate3d(0,0,0);

    }

    50%{

        transform:
            translate3d(6px,-9px,0);

    }

}


/* ============================================================
   RESPONSIVE 1320px
============================================================ */

@media (max-width:1320px){

    .dmxMarketingKitsGrid{

        grid-template-columns:
            minmax(0,.94fr)
            minmax(500px,1.06fr);

        gap:58px;

    }


    .dmxMarketingKitsVisual{

        min-height:820px;

    }


    .dmxMarketingKitsFloatingChannels{

        right:-2%;

    }


    .dmxMarketingKitsFloatingApproved{

        left:-1%;

    }


    .dmxMarketingKitsFloatingFiles{

        right:-1%;

    }

}


/* ============================================================
   RESPONSIVE 1120px
============================================================ */

@media (max-width:1120px){

    .dmxMarketingKitsGrid{

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

    }


    .dmxMarketingKitsContent{

        max-width:820px;

    }


    .dmxMarketingKitsVisual{

        width:min(100%,830px);

        min-height:870px;

        margin:
            18px
            auto
            0;

    }


    .dmxMarketingKitsBoard{

        width:min(100%,690px);

    }


    .dmxMarketingKitsFloatingChannels{

        right:0;

    }


    .dmxMarketingKitsFloatingApproved{

        left:0;

    }


    .dmxMarketingKitsFloatingFiles{

        right:0;

    }


    .dmxMarketingKitsProcessList{

        grid-template-columns:
            repeat(5,minmax(130px,1fr));

        overflow-x:auto;

        padding-bottom:12px;

        scrollbar-width:thin;

    }


    .dmxMarketingKitsProcessList::before{

        left:65px;

        right:65px;

    }

}


/* ============================================================
   RESPONSIVE 820px
============================================================ */

@media (max-width:820px){

    .dmxMarketingKits{

        padding:
            90px
            0;

    }


    .dmxMarketingKitsContent h2{

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

    }


    .dmxMarketingKitsActions{

        align-items:stretch;

    }


    .dmxMarketingKitsPrimary,
    .dmxMarketingKitsSecondary{

        width:100%;

    }


    .dmxMarketingKitsVisual{

        min-height:auto;

        padding:
            55px
            0
            110px;

    }


    .dmxMarketingKitsBoard{

        padding:
            22px;

        border-radius:26px;

        transform:none;

    }


    .dmxMarketingKitsVisual:hover
    .dmxMarketingKitsBoard{

        transform:
            translateY(-3px);

    }


    .dmxMarketingKitsSummary{

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

        align-items:start;

    }


    .dmxMarketingKitsProcessHeader{

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

        align-items:start;

    }


    .dmxMarketingKitsProcessList{

        grid-template-columns:
            repeat(5,minmax(150px,1fr));

    }


    .dmxMarketingKitsFloatingChannels{

        top:0;

        right:12px;

    }


    .dmxMarketingKitsFloatingApproved{

        top:23px;

        left:12px;

    }


    .dmxMarketingKitsFloatingFiles{

        right:12px;

        bottom:35px;

    }


    .dmxMarketingKitsFloatingProgress{

        display:none;

    }

}


/* ============================================================
   RESPONSIVE 600px
============================================================ */

@media (max-width:600px){

    .dmxMarketingKits::before{

        background-size:
            40px 40px;

    }


    .dmxMarketingKitsContent h2{

        letter-spacing:-.046em;

        line-height:1.02;

    }


    .dmxMarketingKitsLead{

        margin-top:24px;

        font-size:.98rem;

        line-height:1.75;

    }


    .dmxMarketingKitsBenefits{

        margin-top:30px;

    }


    .dmxMarketingKitsBenefit{

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

        gap:14px;

        padding:
            18px;

    }


    .dmxMarketingKitsBenefit::after{

        display:none;

    }


    .dmxMarketingKitsBenefitIcon{

        width:45px;

        height:45px;

    }


    .dmxMarketingKitsBoard{

        padding:
            18px;

        border-radius:22px;

    }


    .dmxMarketingKitsBoardHeader{

        align-items:flex-start;

        flex-direction:column;

        gap:14px;

    }


    .dmxMarketingKitsBoardStatus{

        align-self:flex-start;

    }


    .dmxMarketingKitsSummaryStats{

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

    }


    .dmxMarketingKitsAssets{

        padding:
            16px;

    }


    .dmxMarketingKitsAssetGrid{

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

    }


    .dmxMarketingKitsAsset.is-banner,
    .dmxMarketingKitsAsset.is-presentation{

        grid-column:auto;

    }


    .dmxMarketingKitsAsset.is-banner
    .dmxMarketingKitsAssetPreview{

        align-items:flex-start;

        flex-direction:column;

    }


    .dmxMarketingKitsAsset.is-banner
    .dmxMarketingKitsAssetPreview > span{

        position:absolute;

        top:14px;

        right:14px;

        width:58px;

        height:58px;

    }


    .dmxMarketingKitsPackage{

        padding:
            16px;

    }


    .dmxMarketingKitsFormats{

        align-items:flex-start;

        flex-direction:column;

    }


    .dmxMarketingKitsFormatBadges{

        justify-content:flex-start;

    }


    .dmxMarketingKitsFloatingChannels,
    .dmxMarketingKitsFloatingApproved,
    .dmxMarketingKitsFloatingFiles{

        display:none;

    }


    .dmxMarketingKitsVisual{

        padding:
            20px
            0
            0;

    }


    .dmxMarketingKitsProcess{

        margin-top:65px;

        padding:
            26px
            20px;

        border-radius:23px;

    }


    .dmxMarketingKitsProcessList{

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

        gap:10px;

        overflow:visible;

    }


    .dmxMarketingKitsProcessList::before{

        top:28px;

        bottom:28px;

        left:27px;

        right:auto;

        width:2px;

        height:auto;

    }


    .dmxMarketingKitsProcessList li{

        display:grid;

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

        gap:16px;

        align-items:center;

        padding:0;

        text-align:left;

    }


    .dmxMarketingKitsProcessList li > span{

        margin:0;

    }


    .dmxMarketingKitsProcessList small{

        margin-top:3px;

    }

}


/* ============================================================
   RESPONSIVE 420px
============================================================ */

@media (max-width:420px){

    .dmxMarketingKitsEyebrow{

        align-items:flex-start;

    }


    .dmxMarketingKitsEyebrow > span{

        margin-top:7px;

    }


    .dmxMarketingKitsContent h2{

        font-size:
            clamp(2.2rem,12vw,3.1rem);

    }


    .dmxMarketingKitsSummaryStats{

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

    }


    .dmxMarketingKitsAssetsHeader,
    .dmxMarketingKitsPackageHeader{

        align-items:flex-start;

        flex-direction:column;

        gap:6px;

    }


    .dmxMarketingKitsPackageItem{

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

    }


    .dmxMarketingKitsPackageItem > span:last-child{

        grid-column:
            2;

        justify-self:start;

    }


    .dmxMarketingKitsAsset.is-presentation
    .dmxMarketingKitsAssetPreview{

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

    }


    .dmxMarketingKitsProcessHeader h3{

        font-size:1.75rem;

    }

}


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

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

    .dmxMarketingKitsBoardStatus > span,
    .dmxMarketingKitsFloatingApproved,
    .dmxMarketingKitsFloatingFiles,
    .dmxMarketingKitsFloatingChannels,
    .dmxMarketingKitsFloatingProgress{

        animation:none;

    }


    .dmxMarketingKitsBenefit,
    .dmxMarketingKitsTypeList span,
    .dmxMarketingKitsPrimary,
    .dmxMarketingKitsSecondary,
    .dmxMarketingKitsBoard,
    .dmxMarketingKitsAsset,
    .dmxMarketingKitsPackageItem,
    .dmxMarketingKitsProcessList li > span{

        transition:none;

    }

}