/* ============================================================
   DIGITALIZANDO MX
   MARKETING DIGITAL
   COMPONENTE: PUBLICIDAD DIGITAL
============================================================ */

.dmxAdvertising{

    position:relative;

    overflow:hidden;

    padding:
        clamp(96px,10vw,160px)
        0;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(0,217,220,.10),
            transparent 34%
        ),
        radial-gradient(
            circle at 92% 78%,
            rgba(6,103,241,.10),
            transparent 36%
        ),
        linear-gradient(
            180deg,
            #f7fbfe 0%,
            #ffffff 48%,
            #f3f8fc 100%
        );

    isolation:isolate;

}


.dmxAdvertising::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

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

    background-size:
        54px 54px;

    mask-image:
        linear-gradient(
            180deg,
            transparent,
            #000 18%,
            #000 82%,
            transparent
        );

}


.dmxAdvertising::after{

    content:"";

    position:absolute;

    top:10%;

    left:-180px;

    width:420px;

    height:420px;

    z-index:-1;

    border-radius:50%;

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

    filter:blur(12px);

    pointer-events:none;

}


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

.dmxAdvertisingGrid{

    display:grid;

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

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

    align-items:center;

}


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

.dmxAdvertisingContent{

    position:relative;

    z-index:3;

}


.dmxAdvertisingEyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:24px;

}


.dmxAdvertisingEyebrow > span{

    width:38px;

    height:2px;

    border-radius:999px;

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

    box-shadow:
        0 0 18px rgba(0,217,220,.40);

}


.dmxAdvertisingEyebrow small{

    color:var(--dmx-blue);

    font-size:.76rem;

    font-weight:800;

    letter-spacing:.15em;

    line-height:1.2;

    text-transform:uppercase;

}


.dmxAdvertisingContent h2{

    max-width:760px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(2.65rem,4.5vw,5rem);

    font-weight:850;

    letter-spacing:-.055em;

    line-height:.98;

    text-wrap:balance;

}


.dmxAdvertisingContent h2 span{

    display:block;

    margin-top:12px;

    color:transparent;

    background:
        linear-gradient(
            105deg,
            var(--dmx-blue) 0%,
            var(--dmx-cyan) 52%,
            #13a8c9 100%
        );

    background-clip:text;

    -webkit-background-clip:text;

}


.dmxAdvertisingLead{

    max-width:680px;

    margin:
        30px
        0
        0;

    color:var(--dmx-muted);

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

    line-height:1.85;

}


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

.dmxAdvertisingBenefits{

    display:grid;

    gap:16px;

    margin-top:38px;

}


.dmxAdvertisingBenefit{

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

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

    backdrop-filter:
        blur(16px);

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

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

}


.dmxAdvertisingBenefit::before{

    content:"";

    position:absolute;

    top:20px;

    right:20px;

    width:7px;

    height:7px;

    border-radius:50%;

    background:
        var(--dmx-cyan);

    box-shadow:
        0 0 0 6px rgba(0,217,220,.10),
        0 0 18px rgba(0,217,220,.35);

    opacity:0;

    transform:scale(.5);

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

}


.dmxAdvertisingBenefit:hover{

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

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

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

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

}


.dmxAdvertisingBenefit:hover::before{

    opacity:1;

    transform:scale(1);

}


.dmxAdvertisingBenefitIcon{

    position:relative;

    display:grid;

    place-items:center;

    flex:0 0 auto;

    width:48px;

    height:48px;

    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);

}


/* ============================================================
   ICONO TARGET
============================================================ */

.dmxAdvertisingBenefitTarget{

    position:relative;

    width:23px;

    height:23px;

    border:
        2px solid
        currentColor;

    border-radius:50%;

}


.dmxAdvertisingBenefitTarget::before{

    content:"";

    position:absolute;

    inset:5px;

    border:
        2px solid
        currentColor;

    border-radius:50%;

}


.dmxAdvertisingBenefitTarget::after{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:5px;

    height:5px;

    border-radius:50%;

    background:
        currentColor;

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

}


/* ============================================================
   ICONO CHART
============================================================ */

.dmxAdvertisingBenefitChart{

    position:relative;

    width:25px;

    height:23px;

    border-left:
        2px solid
        currentColor;

    border-bottom:
        2px solid
        currentColor;

}


.dmxAdvertisingBenefitChart::before{

    content:"";

    position:absolute;

    left:4px;

    bottom:4px;

    width:16px;

    height:12px;

    border-top:
        2px solid
        currentColor;

    border-right:
        2px solid
        currentColor;

    transform:
        skewY(-30deg);

}


.dmxAdvertisingBenefitChart::after{

    content:"";

    position:absolute;

    top:1px;

    right:-1px;

    width:6px;

    height:6px;

    border-top:
        2px solid
        currentColor;

    border-right:
        2px solid
        currentColor;

}


/* ============================================================
   ICONO REPORTE
============================================================ */

.dmxAdvertisingBenefitReport{

    position:relative;

    width:20px;

    height:25px;

    border:
        2px solid
        currentColor;

    border-radius:4px;

}


.dmxAdvertisingBenefitReport::before{

    content:"";

    position:absolute;

    top:6px;

    left:4px;

    width:10px;

    height:2px;

    border-radius:999px;

    background:
        currentColor;

    box-shadow:
        0 5px 0 currentColor,
        0 10px 0 currentColor;

}


.dmxAdvertisingBenefitReport::after{

    content:"";

    position:absolute;

    top:-3px;

    right:-3px;

    width:7px;

    height:7px;

    border-radius:50%;

    background:
        var(--dmx-cyan);

    box-shadow:
        0 0 0 3px rgba(0,217,220,.18);

}


.dmxAdvertisingBenefit h3{

    margin:
        1px
        0
        7px;

    color:var(--dmx-ink);

    font-size:1rem;

    font-weight:800;

    letter-spacing:-.015em;

    line-height:1.3;

}


.dmxAdvertisingBenefit p{

    margin:0;

    color:var(--dmx-muted);

    font-size:.92rem;

    line-height:1.7;

}


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

.dmxAdvertisingActions{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    align-items:center;

    margin-top:38px;

}


.dmxAdvertisingPrimary,
.dmxAdvertisingSecondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:54px;

    border-radius:16px;

    font-size:.93rem;

    font-weight:800;

    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;

}


.dmxAdvertisingPrimary{

    gap:12px;

    padding:
        0
        24px;

    color:var(--dmx-white);

    background:
        linear-gradient(
            105deg,
            var(--dmx-blue),
            #0784ec 55%,
            var(--dmx-cyan)
        );

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

}


.dmxAdvertisingPrimary svg{

    transition:
        transform .3s ease;

}


.dmxAdvertisingPrimary:hover{

    transform:
        translateY(-3px);

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

}


.dmxAdvertisingPrimary:hover svg{

    transform:
        translateX(4px);

}


.dmxAdvertisingSecondary{

    padding:
        0
        22px;

    color:var(--dmx-navy);

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

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

}


.dmxAdvertisingSecondary:hover{

    color:var(--dmx-blue);

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

    background:
        var(--dmx-white);

    transform:
        translateY(-3px);

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

}


.dmxAdvertisingPrimary:focus-visible,
.dmxAdvertisingSecondary:focus-visible{

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

    outline-offset:4px;

}


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

.dmxAdvertisingVisual{

    position:relative;

    min-height:720px;

    display:flex;

    align-items:center;

    justify-content:center;

    isolation:isolate;

}


.dmxAdvertisingGlow{

    position:absolute;

    z-index:-2;

    border-radius:50%;

    filter:
        blur(24px);

    pointer-events:none;

}


.dmxAdvertisingGlowOne{

    top:11%;

    right:2%;

    width:330px;

    height:330px;

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

}


.dmxAdvertisingGlowTwo{

    bottom:5%;

    left:4%;

    width:280px;

    height:280px;

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

}


/* ============================================================
   DASHBOARD
============================================================ */

.dmxAdvertisingDashboard{

    position:relative;

    z-index:2;

    width:min(100%,620px);

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

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

    border-radius:32px;

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

    box-shadow:
        0 38px 100px rgba(15,51,88,.18),
        inset 0 1px 0 rgba(255,255,255,.90);

    backdrop-filter:
        blur(24px);

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

    transform:
        perspective(1400px)
        rotateY(-4deg)
        rotateX(2deg);

    transform-style:
        preserve-3d;

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

}


.dmxAdvertisingVisual:hover .dmxAdvertisingDashboard{

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

    box-shadow:
        0 48px 120px rgba(15,51,88,.22),
        inset 0 1px 0 rgba(255,255,255,.94);

}


/* ============================================================
   HEADER DEL DASHBOARD
============================================================ */

.dmxAdvertisingDashboardHeader{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-bottom:22px;

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

}


.dmxAdvertisingDashboardIdentity{

    display:flex;

    align-items:center;

    gap:13px;

}


.dmxAdvertisingDashboardMark{

    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 24px rgba(8,38,77,.18);

}


.dmxAdvertisingDashboardMark span{

    display:block;

    border-radius:3px;

}


.dmxAdvertisingDashboardMark span:nth-child(1){

    background:
        var(--dmx-blue);

}


.dmxAdvertisingDashboardMark span:nth-child(2){

    background:
        var(--dmx-cyan);

}


.dmxAdvertisingDashboardMark span:nth-child(3){

    background:
        var(--dmx-lime);

}


.dmxAdvertisingDashboardMark span:nth-child(4){

    background:
        var(--dmx-white);

}


.dmxAdvertisingDashboardIdentity small{

    display:block;

    margin-bottom:4px;

    color:var(--dmx-muted);

    font-size:.70rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.dmxAdvertisingDashboardIdentity strong{

    display:block;

    color:var(--dmx-ink);

    font-size:.98rem;

    font-weight:850;

}


.dmxAdvertisingCampaignStatus{

    display:inline-flex;

    align-items:center;

    gap:8px;

    flex:0 0 auto;

    padding:
        9px
        12px;

    border:
        1px solid
        rgba(0,217,220,.16);

    border-radius:999px;

    color:#08757a;

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

    font-size:.72rem;

    font-weight:800;

}


.dmxAdvertisingCampaignStatus > span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:
        var(--dmx-cyan);

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

    animation:
        dmxAdvertisingStatusPulse
        2s ease-in-out
        infinite;

}


/* ============================================================
   PERFORMANCE
============================================================ */

.dmxAdvertisingPerformance{

    display:grid;

    grid-template-columns:
        minmax(170px,.72fr)
        minmax(0,1.28fr);

    gap:26px;

    align-items:end;

    padding:
        30px
        0
        26px;

}


.dmxAdvertisingPerformance small{

    display:block;

    margin-bottom:8px;

    color:var(--dmx-muted);

    font-size:.72rem;

    font-weight:750;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.dmxAdvertisingPerformance strong{

    display:block;

    color:var(--dmx-ink);

    font-size:
        clamp(2.25rem,4vw,3.5rem);

    font-weight:900;

    letter-spacing:-.06em;

    line-height:1;

}


.dmxAdvertisingPerformance > div:first-child > span{

    display:block;

    margin-top:10px;

    color:#07856f;

    font-size:.76rem;

    font-weight:750;

}


.dmxAdvertisingPerformanceChart{

    position:relative;

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:8px;

    height:130px;

    padding:
        10px
        4px
        0;

}


.dmxAdvertisingPerformanceChart::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    border-radius:18px;

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

    background-size:
        100% 32px;

}


.dmxAdvertisingPerformanceChart span{

    position:relative;

    display:block;

    width:100%;

    max-width:30px;

    height:
        var(--dmx-bar-height);

    min-height:12px;

    border-radius:
        9px
        9px
        4px
        4px;

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

    box-shadow:
        0 12px 24px rgba(6,103,241,.16);

    transform-origin:bottom;

    animation:
        dmxAdvertisingBarRise
        1.15s cubic-bezier(.18,.8,.2,1)
        both;

}


.dmxAdvertisingPerformanceChart span:nth-child(2){

    animation-delay:.08s;

}


.dmxAdvertisingPerformanceChart span:nth-child(3){

    animation-delay:.16s;

}


.dmxAdvertisingPerformanceChart span:nth-child(4){

    animation-delay:.24s;

}


.dmxAdvertisingPerformanceChart span:nth-child(5){

    animation-delay:.32s;

}


.dmxAdvertisingPerformanceChart span:nth-child(6){

    animation-delay:.40s;

}


.dmxAdvertisingPerformanceChart span:nth-child(7){

    animation-delay:.48s;

}


.dmxAdvertisingPerformanceChart span:last-child{

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

}


/* ============================================================
   MÉTRICAS
============================================================ */

.dmxAdvertisingMetrics{

    display:grid;

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

    gap:12px;

}


.dmxAdvertisingMetric{

    position:relative;

    padding:
        17px
        16px;

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

    border-radius:17px;

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

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

}


.dmxAdvertisingMetric:hover{

    transform:
        translateY(-4px);

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

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

}


.dmxAdvertisingMetric small{

    display:block;

    margin-bottom:8px;

    color:var(--dmx-muted);

    font-size:.68rem;

    font-weight:750;

    letter-spacing:.04em;

}


.dmxAdvertisingMetric strong{

    display:block;

    color:var(--dmx-ink);

    font-size:1.22rem;

    font-weight:900;

    letter-spacing:-.035em;

}


.dmxAdvertisingMetric > span{

    display:block;

    margin-top:6px;

    font-size:.68rem;

    font-weight:800;

}


.dmxAdvertisingMetric .is-positive{

    color:#07856f;

}


/* ============================================================
   DISTRIBUCIÓN
============================================================ */

.dmxAdvertisingDistribution{

    margin-top:18px;

    padding:
        20px;

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

    border-radius:21px;

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

}


.dmxAdvertisingDistributionHeader{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:20px;

    margin-bottom:16px;

}


.dmxAdvertisingDistributionHeader small{

    display:block;

    margin-bottom:5px;

    color:var(--dmx-muted);

    font-size:.67rem;

    font-weight:750;

    letter-spacing:.06em;

    text-transform:uppercase;

}


.dmxAdvertisingDistributionHeader strong{

    display:block;

    color:var(--dmx-ink);

    font-size:.93rem;

    font-weight:850;

}


.dmxAdvertisingDistributionHeader > span{

    color:var(--dmx-muted);

    font-size:.68rem;

    font-weight:700;

}


.dmxAdvertisingChannels{

    display:grid;

    gap:9px;

}


.dmxAdvertisingChannel{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

    padding:
        12px
        14px;

    border-radius:14px;

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

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

}


.dmxAdvertisingChannel:hover{

    transform:
        translateX(4px);

    background:
        var(--dmx-white);

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

}


.dmxAdvertisingChannelName{

    display:flex;

    align-items:center;

    min-width:0;

    gap:11px;

}


.dmxAdvertisingChannelIcon{

    display:grid;

    place-items:center;

    flex:0 0 auto;

    width:34px;

    height:34px;

    border-radius:11px;

    font-size:.76rem;

    font-weight:900;

}


.dmxAdvertisingChannelIcon.is-google{

    color:#0a63cf;

    background:
        rgba(66,133,244,.13);

}


.dmxAdvertisingChannelIcon.is-meta{

    color:#2851c7;

    background:
        rgba(60,89,221,.12);

}


.dmxAdvertisingChannelIcon.is-bing{

    color:#058577;

    background:
        rgba(0,180,160,.12);

}


.dmxAdvertisingChannelName strong{

    display:block;

    overflow:hidden;

    color:var(--dmx-ink);

    font-size:.79rem;

    font-weight:800;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.dmxAdvertisingChannelName small{

    display:block;

    overflow:hidden;

    margin-top:3px;

    color:var(--dmx-muted);

    font-size:.65rem;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.dmxAdvertisingChannelValue{

    flex:0 0 auto;

    text-align:right;

}


.dmxAdvertisingChannelValue strong{

    display:block;

    color:var(--dmx-ink);

    font-size:.80rem;

    font-weight:900;

}


.dmxAdvertisingChannelValue span{

    display:block;

    margin-top:3px;

    color:var(--dmx-muted);

    font-size:.60rem;

    font-weight:700;

}


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

.dmxAdvertisingFloating{

    position:absolute;

    z-index:4;

    display:flex;

    align-items:center;

    gap:12px;

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

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

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

    backdrop-filter:
        blur(18px);

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

    pointer-events:none;

}


.dmxAdvertisingFloating small{

    display:block;

    margin-bottom:4px;

    color:var(--dmx-muted);

    font-size:.62rem;

    font-weight:750;

    letter-spacing:.04em;

}


.dmxAdvertisingFloating strong{

    display:block;

    color:var(--dmx-ink);

    font-size:.76rem;

    font-weight:850;

}


.dmxAdvertisingFloatingAudience{

    top:15%;

    left:-6%;

    padding:
        14px
        17px;

    border-radius:17px;

    animation:
        dmxAdvertisingFloatOne
        5.5s ease-in-out
        infinite;

}


.dmxAdvertisingFloatingIcon{

    display:grid;

    place-items:center;

    width:38px;

    height:38px;

    border-radius:13px;

    color:var(--dmx-blue);

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

    font-size:1.15rem;

    font-weight:900;

}


.dmxAdvertisingFloatingConversion{

    right:-5%;

    bottom:22%;

    padding:
        14px
        17px;

    border-radius:17px;

    animation:
        dmxAdvertisingFloatTwo
        6.2s ease-in-out
        infinite;

}


.dmxAdvertisingFloatingPulse{

    position:relative;

    width:13px;

    height:13px;

    border-radius:50%;

    background:
        var(--dmx-lime);

    box-shadow:
        0 0 0 7px rgba(198,255,47,.16),
        0 0 22px rgba(198,255,47,.40);

}


.dmxAdvertisingFloatingBudget{

    left:4%;

    bottom:8%;

    display:block;

    min-width:180px;

    padding:
        16px
        18px;

    border-radius:18px;

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

}


.dmxAdvertisingFloatingBudget strong{

    margin-top:4px;

    font-size:1.4rem;

    letter-spacing:-.04em;

}


.dmxAdvertisingFloatingBudget > div{

    height:6px;

    margin-top:11px;

    overflow:hidden;

    border-radius:999px;

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

}


.dmxAdvertisingFloatingBudget > div span{

    display:block;

    width:92%;

    height:100%;

    border-radius:inherit;

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

}


/* ============================================================
   PLATAFORMAS
============================================================ */

.dmxAdvertisingPlatforms{

    position:relative;

    z-index:3;

    margin-top:
        clamp(70px,8vw,110px);

    padding:
        28px
        clamp(22px,4vw,38px);

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

    border-radius:24px;

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

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

    backdrop-filter:
        blur(18px);

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

}


.dmxAdvertisingPlatforms > p{

    margin:
        0
        0
        20px;

    color:var(--dmx-muted);

    font-size:.74rem;

    font-weight:800;

    letter-spacing:.11em;

    text-align:center;

    text-transform:uppercase;

}


.dmxAdvertisingPlatformList{

    display:grid;

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

    gap:12px;

}


.dmxAdvertisingPlatform{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    min-height:58px;

    padding:
        10px
        14px;

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

    border-radius:15px;

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

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

}


.dmxAdvertisingPlatform:hover{

    transform:
        translateY(-4px);

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

    background:
        var(--dmx-white);

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

}


.dmxAdvertisingPlatform > span{

    display:grid;

    place-items:center;

    width:30px;

    height:30px;

    flex:0 0 auto;

    border-radius:10px;

    color:var(--dmx-blue);

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

    font-size:.72rem;

    font-weight:900;

}


.dmxAdvertisingPlatform strong{

    color:var(--dmx-ink);

    font-size:.74rem;

    font-weight:800;

}


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

@keyframes dmxAdvertisingStatusPulse{

    0%,
    100%{

        transform:scale(1);

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

    }

    50%{

        transform:scale(.86);

        box-shadow:
            0 0 0 9px rgba(0,217,220,.04);

    }

}


@keyframes dmxAdvertisingBarRise{

    from{

        opacity:0;

        transform:
            scaleY(.15);

    }

    to{

        opacity:1;

        transform:
            scaleY(1);

    }

}


@keyframes dmxAdvertisingFloatOne{

    0%,
    100%{

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

    }

    50%{

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

    }

}


@keyframes dmxAdvertisingFloatTwo{

    0%,
    100%{

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

    }

    50%{

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

    }

}


@keyframes dmxAdvertisingFloatThree{

    0%,
    100%{

        transform:
            translate3d(0,0,0);

    }

    50%{

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

    }

}


/* ============================================================
   RESPONSIVE 1260px
============================================================ */

@media (max-width:1260px){

    .dmxAdvertisingGrid{

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

        gap:54px;

    }


    .dmxAdvertisingVisual{

        min-height:670px;

    }


    .dmxAdvertisingFloatingAudience{

        left:-2%;

    }


    .dmxAdvertisingFloatingConversion{

        right:-1%;

    }

}


/* ============================================================
   RESPONSIVE 1080px
============================================================ */

@media (max-width:1080px){

    .dmxAdvertisingGrid{

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

    }


    .dmxAdvertisingContent{

        max-width:800px;

    }


    .dmxAdvertisingVisual{

        width:min(100%,760px);

        min-height:720px;

        margin:
            10px
            auto
            0;

    }


    .dmxAdvertisingDashboard{

        width:min(100%,650px);

    }


    .dmxAdvertisingFloatingAudience{

        left:0;

    }


    .dmxAdvertisingFloatingConversion{

        right:0;

    }


    .dmxAdvertisingPlatformList{

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

    }

}


/* ============================================================
   RESPONSIVE 760px
============================================================ */

@media (max-width:760px){

    .dmxAdvertising{

        padding:
            88px
            0;

    }


    .dmxAdvertisingContent h2{

        font-size:
            clamp(2.35rem,11vw,3.6rem);

    }


    .dmxAdvertisingBenefit{

        padding:
            18px;

    }


    .dmxAdvertisingActions{

        align-items:stretch;

    }


    .dmxAdvertisingPrimary,
    .dmxAdvertisingSecondary{

        width:100%;

    }


    .dmxAdvertisingVisual{

        min-height:auto;

        padding:
            44px
            0
            90px;

    }


    .dmxAdvertisingDashboard{

        padding:
            22px;

        border-radius:26px;

        transform:none;

    }


    .dmxAdvertisingVisual:hover .dmxAdvertisingDashboard{

        transform:
            translateY(-3px);

    }


    .dmxAdvertisingPerformance{

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

        align-items:start;

    }


    .dmxAdvertisingPerformanceChart{

        height:120px;

    }


    .dmxAdvertisingMetrics{

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

    }


    .dmxAdvertisingDistributionHeader{

        align-items:flex-start;

        flex-direction:column;

        gap:8px;

    }


    .dmxAdvertisingFloatingAudience{

        top:5px;

        left:12px;

    }


    .dmxAdvertisingFloatingConversion{

        right:12px;

        bottom:25px;

    }


    .dmxAdvertisingFloatingBudget{

        display:none;

    }


    .dmxAdvertisingPlatformList{

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

    }

}


/* ============================================================
   RESPONSIVE 520px
============================================================ */

@media (max-width:520px){

    .dmxAdvertising::before{

        background-size:
            38px 38px;

    }


    .dmxAdvertisingEyebrow{

        margin-bottom:20px;

    }


    .dmxAdvertisingContent h2{

        letter-spacing:-.045em;

        line-height:1.02;

    }


    .dmxAdvertisingLead{

        margin-top:24px;

        font-size:.98rem;

        line-height:1.75;

    }


    .dmxAdvertisingBenefits{

        margin-top:30px;

    }


    .dmxAdvertisingBenefit{

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

        gap:14px;

    }


    .dmxAdvertisingBenefitIcon{

        width:44px;

        height:44px;

    }


    .dmxAdvertisingDashboard{

        padding:
            18px;

        border-radius:22px;

    }


    .dmxAdvertisingDashboardHeader{

        align-items:flex-start;

        flex-direction:column;

        gap:14px;

    }


    .dmxAdvertisingCampaignStatus{

        align-self:flex-start;

    }


    .dmxAdvertisingPerformance{

        padding-top:24px;

    }


    .dmxAdvertisingChannel{

        align-items:flex-start;

    }


    .dmxAdvertisingChannelValue{

        margin-top:2px;

    }


    .dmxAdvertisingFloating{

        display:none;

    }


    .dmxAdvertisingPlatforms{

        margin-top:60px;

        padding:
            22px
            16px;

    }


    .dmxAdvertisingPlatformList{

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

    }


    .dmxAdvertisingPlatform{

        justify-content:flex-start;

    }

}


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

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

    .dmxAdvertisingCampaignStatus > span,
    .dmxAdvertisingPerformanceChart span,
    .dmxAdvertisingFloatingAudience,
    .dmxAdvertisingFloatingConversion,
    .dmxAdvertisingFloatingBudget{

        animation:none;

    }


    .dmxAdvertisingBenefit,
    .dmxAdvertisingPrimary,
    .dmxAdvertisingSecondary,
    .dmxAdvertisingDashboard,
    .dmxAdvertisingMetric,
    .dmxAdvertisingChannel,
    .dmxAdvertisingPlatform{

        transition:none;

    }

}