/* ============================================================
   MATERIAL PUBLICITARIO
============================================================ */

.dmxAdvertisingMaterial{

    position:relative;

    overflow:hidden;

    padding:
        clamp(110px,12vw,190px)
        0;

    background:
        linear-gradient(
            180deg,
            #f5f8fb 0%,
            #ffffff 48%,
            #eef4f8 100%
        );

    color:var(--dmx-ink);

    isolation:isolate;

}


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

.dmxAdvertisingMaterialBackdrop{

    position:absolute;

    inset:0;

    z-index:-3;

    opacity:.38;

    background-image:

        linear-gradient(
            rgba(8,38,77,.045) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(8,38,77,.045) 1px,
            transparent 1px
        );

    background-size:
        80px 80px;

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

}


.dmxAdvertisingMaterialGlow{

    position:absolute;

    z-index:-2;

    border-radius:50%;

    pointer-events:none;

}


.dmxAdvertisingMaterialGlowOne{

    width:760px;
    height:760px;

    top:-360px;
    right:-280px;

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

}


.dmxAdvertisingMaterialGlowTwo{

    width:720px;
    height:720px;

    left:-300px;
    bottom:-320px;

    background:
        radial-gradient(
            circle,
            rgba(6,103,241,.1),
            transparent 68%
        );

}


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

.dmxAdvertisingMaterialHeader{

    margin-bottom:
        clamp(80px,9vw,140px);

}


.dmxAdvertisingMaterialEyebrow{

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

    margin-bottom:30px;

}


.dmxAdvertisingMaterialEyebrow span{

    width:44px;
    height:1px;

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

}


.dmxAdvertisingMaterialEyebrow small{

    color:var(--dmx-muted);

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

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

}


.dmxAdvertisingMaterialHeading{

    display:grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(300px,.65fr);

    gap:
        clamp(50px,8vw,130px);

    align-items:end;

}


.dmxAdvertisingMaterialHeading h2{

    max-width:920px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(52px,7vw,106px);

    font-weight:500;

    line-height:.94;

    letter-spacing:-.065em;

}


.dmxAdvertisingMaterialHeading h2 span{

    display:block;

    color:var(--dmx-blue);

}


.dmxAdvertisingMaterialIntro{

    padding-bottom:8px;

}


.dmxAdvertisingMaterialIntro p{

    margin:0;

    color:var(--dmx-muted);

    font-size:
        clamp(16px,1.2vw,19px);

    line-height:1.75;

}


.dmxAdvertisingMaterialIntro p + p{

    margin-top:18px;

}


/* ============================================================
   EXPERIENCIA
============================================================ */

.dmxAdvertisingMaterialExperience{

    display:grid;

    grid-template-columns:
        minmax(560px,1.25fr)
        minmax(300px,.75fr);

    gap:
        clamp(60px,8vw,130px);

    align-items:center;

}


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

.dmxAdvertisingMaterialVisual{

    position:relative;

    min-height:760px;

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

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

    border-radius:
        clamp(26px,3vw,42px);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.94),
            rgba(235,243,249,.85)
        );

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

    perspective:1500px;

}


.dmxAdvertisingMaterialVisualGrid{

    position:absolute;

    inset:0;

    overflow:hidden;

    border-radius:inherit;

    background-image:

        linear-gradient(
            rgba(8,38,77,.055) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(8,38,77,.055) 1px,
            transparent 1px
        );

    background-size:
        34px 34px;

    mask-image:
        radial-gradient(
            circle at center,
            #000 18%,
            transparent 78%
        );

}


.dmxAdvertisingMaterialBlueprint{

    position:absolute;

    inset:34px;

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

    border-radius:25px;

    pointer-events:none;

}


.dmxAdvertisingMaterialMeasure{

    position:absolute;

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

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

    letter-spacing:.14em;

}


.dmxAdvertisingMaterialMeasureTop{

    top:-18px;
    left:50%;

    transform:translateX(-50%);

}


.dmxAdvertisingMaterialMeasureSide{

    top:50%;
    left:-31px;

    transform:
        translateY(-50%)
        rotate(-90deg);

}


.dmxAdvertisingMaterialCross{

    position:absolute;

    width:10px;
    height:10px;

}


.dmxAdvertisingMaterialCross::before,
.dmxAdvertisingMaterialCross::after{

    content:"";

    position:absolute;

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

}


.dmxAdvertisingMaterialCross::before{

    top:4px;
    left:0;

    width:10px;
    height:1px;

}


.dmxAdvertisingMaterialCross::after{

    top:0;
    left:4px;

    width:1px;
    height:10px;

}


.dmxAdvertisingMaterialCrossOne{

    top:20%;
    left:12%;

}


.dmxAdvertisingMaterialCrossTwo{

    right:14%;
    top:14%;

}


.dmxAdvertisingMaterialCrossThree{

    right:10%;
    bottom:15%;

}


/* ============================================================
   PIEZAS
============================================================ */

.dmxAdvertisingMaterialPiece{

    position:absolute;

    overflow:hidden;

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

    background:#ffffff;

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

    transform-style:preserve-3d;

    transition:
        transform .4s ease-out;

}


.dmxAdvertisingMaterialPieceBack{

    width:330px;
    height:455px;

    left:13%;
    top:15%;

    padding:28px;

    background:
        linear-gradient(
            160deg,
            #071a32,
            #083967
        );

    color:#ffffff;

    transform:
        rotate(-8deg)
        translateZ(-20px);

}


.dmxAdvertisingMaterialPieceHeader{

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

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

    letter-spacing:.13em;

}


.dmxAdvertisingMaterialPieceHeader small{

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

}


.dmxAdvertisingMaterialPieceBackContent{

    position:absolute;

    left:28px;
    right:28px;
    bottom:70px;

}


.dmxAdvertisingMaterialPieceBackContent span{

    display:block;

    margin-bottom:8px;

    color:var(--dmx-lime);

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

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

}


.dmxAdvertisingMaterialPieceBackContent strong{

    display:block;

    max-width:230px;

    font-size:31px;
    font-weight:500;

    line-height:1;

    letter-spacing:-.04em;

}


.dmxAdvertisingMaterialPieceMarks{

    position:absolute;

    right:26px;
    bottom:26px;

    display:flex;
    gap:4px;

}


.dmxAdvertisingMaterialPieceMarks span{

    width:10px;
    height:10px;

    border-radius:2px;

}


.dmxAdvertisingMaterialPieceMarks span:nth-child(1){

    background:var(--dmx-blue);

}


.dmxAdvertisingMaterialPieceMarks span:nth-child(2){

    background:var(--dmx-cyan);

}


.dmxAdvertisingMaterialPieceMarks span:nth-child(3){

    background:var(--dmx-lime);

}


.dmxAdvertisingMaterialPieceMain{

    z-index:3;

    width:350px;
    height:500px;

    right:16%;
    top:12%;

    padding:34px;

    transform:
        rotate(5deg)
        translateZ(40px);

}


.dmxAdvertisingMaterialPieceMainTop{

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

}


.dmxAdvertisingMaterialMiniLogo,
.dmxAdvertisingMaterialCardLogo{

    display:grid;

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

    gap:3px;

}


.dmxAdvertisingMaterialMiniLogo span,
.dmxAdvertisingMaterialCardLogo span{

    width:10px;
    height:10px;

    border-radius:2px;

}


.dmxAdvertisingMaterialMiniLogo span:nth-child(1),
.dmxAdvertisingMaterialCardLogo span:nth-child(1){

    background:var(--dmx-blue);

}


.dmxAdvertisingMaterialMiniLogo span:nth-child(2),
.dmxAdvertisingMaterialCardLogo span:nth-child(2){

    background:var(--dmx-cyan);

}


.dmxAdvertisingMaterialMiniLogo span:nth-child(3),
.dmxAdvertisingMaterialCardLogo span:nth-child(3){

    background:var(--dmx-lime);

}


.dmxAdvertisingMaterialMiniLogo span:nth-child(4),
.dmxAdvertisingMaterialCardLogo span:nth-child(4){

    background:var(--dmx-navy);

}


.dmxAdvertisingMaterialPieceMainTop small{

    color:var(--dmx-muted);

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

    letter-spacing:.14em;

}


.dmxAdvertisingMaterialPieceMainCopy{

    position:absolute;

    left:34px;
    right:34px;
    top:145px;

}


.dmxAdvertisingMaterialPieceMainCopy span{

    display:block;

    margin-bottom:10px;

    color:var(--dmx-blue);

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

}


.dmxAdvertisingMaterialPieceMainCopy strong{

    display:block;

    color:var(--dmx-ink);

    font-size:38px;
    font-weight:500;

    line-height:.96;

    letter-spacing:-.05em;

}


.dmxAdvertisingMaterialPieceMainFooter{

    position:absolute;

    left:34px;
    right:34px;
    bottom:32px;

    padding-top:17px;

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

}


.dmxAdvertisingMaterialPieceMainFooter p{

    margin:
        0 0 10px;

    color:var(--dmx-muted);

    font-size:8px;

}


.dmxAdvertisingMaterialPieceMainFooter span{

    color:var(--dmx-navy);

    font-size:9px;
    font-weight:750;

}


.dmxAdvertisingMaterialCard{

    position:absolute;

    z-index:6;

    left:16%;
    bottom:10%;

    width:300px;

    padding:21px;

    display:grid;

    grid-template-columns:
        auto 1fr;

    gap:14px;

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

    border-radius:19px;

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

    box-shadow:
        0 24px 60px rgba(8,38,77,.16);

    backdrop-filter:
        blur(16px);

    transform:
        rotate(4deg)
        translateZ(70px);

}


.dmxAdvertisingMaterialCard strong{

    display:block;

    color:var(--dmx-ink);

    font-size:12px;

}


.dmxAdvertisingMaterialCard small{

    display:block;

    margin-top:3px;

    color:var(--dmx-muted);

    font-size:9px;

}


.dmxAdvertisingMaterialCard p{

    grid-column:1 / -1;

    margin:7px 0 0;

    padding-top:13px;

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

    color:var(--dmx-blue);

    font-size:9px;
    font-weight:700;

}


.dmxAdvertisingMaterialRibbon{

    position:absolute;

    z-index:8;

    right:-45px;
    bottom:18%;

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

    padding:
        11px 22px;

    background:var(--dmx-lime);

    color:var(--dmx-navy);

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

    letter-spacing:.12em;

    transform:
        rotate(-8deg);

    box-shadow:
        0 15px 35px rgba(8,38,77,.12);

}


.dmxAdvertisingMaterialRibbon i{

    width:4px;
    height:4px;

    border-radius:50%;

    background:var(--dmx-navy);

}


/* ============================================================
   ESTADO
============================================================ */

.dmxAdvertisingMaterialStatus{

    position:absolute;

    z-index:10;

    left:50%;
    bottom:28px;

    min-width:310px;

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

    padding:
        13px 17px;

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

    border-radius:999px;

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

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

    backdrop-filter:
        blur(14px);

    transform:
        translateX(-50%);

}


.dmxAdvertisingMaterialStatus > span{

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--dmx-cyan);

    box-shadow:
        0 0 16px rgba(0,217,220,.6);

}


.dmxAdvertisingMaterialStatus p{

    margin:0;

    color:var(--dmx-muted);

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

}


.dmxAdvertisingMaterialStatus strong{

    margin-left:auto;

    color:var(--dmx-navy);

    font-size:10px;

}


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

.dmxAdvertisingMaterialIndex{

    display:block;

    margin-bottom:32px;

    color:var(--dmx-blue);

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

    letter-spacing:.18em;

}


.dmxAdvertisingMaterialContent h3{

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(43px,4.7vw,74px);

    font-weight:500;

    line-height:.98;

    letter-spacing:-.055em;

}


.dmxAdvertisingMaterialContent h3 span{

    display:block;

    color:var(--dmx-blue);

}


.dmxAdvertisingMaterialContent > p{

    max-width:520px;

    margin:
        34px 0 0;

    color:var(--dmx-muted);

    font-size:17px;

    line-height:1.75;

}


.dmxAdvertisingMaterialContentList{

    margin-top:45px;

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

}


.dmxAdvertisingMaterialContentList > div{

    display:grid;

    grid-template-columns:
        40px 1fr;

    gap:18px;

    padding:
        19px 0;

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

}


.dmxAdvertisingMaterialContentList span{

    color:var(--dmx-cyan);

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

    letter-spacing:.14em;

}


.dmxAdvertisingMaterialContentList p{

    margin:0;

    color:var(--dmx-ink);

    font-size:14px;

    line-height:1.55;

}


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

.dmxAdvertisingMaterialFormats{

    margin-top:
        clamp(120px,13vw,210px);

}


.dmxAdvertisingMaterialFormatsHeader{

    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(280px,.55fr);

    gap:
        clamp(40px,8vw,130px);

    align-items:end;

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

}


.dmxAdvertisingMaterialFormatsHeader span{

    display:block;

    margin-bottom:18px;

    color:var(--dmx-blue);

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

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

}


.dmxAdvertisingMaterialFormatsHeader h3{

    max-width:850px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(42px,5vw,76px);

    font-weight:500;

    line-height:1;

    letter-spacing:-.05em;

}


.dmxAdvertisingMaterialFormatsHeader p{

    margin:0;

    color:var(--dmx-muted);

    font-size:16px;

    line-height:1.75;

}


.dmxAdvertisingMaterialFormatsGrid{

    display:grid;

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

    gap:14px;

}


.dmxAdvertisingMaterialFormat{

    position:relative;

    overflow:hidden;

    min-height:390px;

    padding:
        clamp(30px,3vw,46px);

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

    border-radius:28px;

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

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

}


.dmxAdvertisingMaterialFormat::before{

    content:"";

    position:absolute;

    width:240px;
    height:240px;

    right:-150px;
    bottom:-150px;

    border-radius:50%;

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

    transition:
        transform .5s ease;

}


.dmxAdvertisingMaterialFormat:hover{

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

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

    transform:
        translateY(-7px);

}


.dmxAdvertisingMaterialFormat:hover::before{

    transform:
        scale(1.5);

}


.dmxAdvertisingMaterialFormatLarge{

    grid-row:
        span 2;

    min-height:794px;

    display:flex;
    flex-direction:column;

    background:
        linear-gradient(
            160deg,
            #072342,
            #075286
        );

    color:#ffffff;

}


.dmxAdvertisingMaterialFormatWide{

    grid-column:
        span 2;

    min-height:320px;

    background:
        linear-gradient(
            135deg,
            #edf5fa,
            #ffffff
        );

}


.dmxAdvertisingMaterialFormatTop{

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

    margin-bottom:60px;

}


.dmxAdvertisingMaterialFormatTop span{

    color:var(--dmx-blue);

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

    letter-spacing:.16em;

}


.dmxAdvertisingMaterialFormatTop small{

    color:var(--dmx-muted);

    font-size:8px;
    font-weight:750;

    letter-spacing:.14em;

}


.dmxAdvertisingMaterialFormatLarge
.dmxAdvertisingMaterialFormatTop span{

    color:var(--dmx-lime);

}


.dmxAdvertisingMaterialFormatLarge
.dmxAdvertisingMaterialFormatTop small{

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

}


.dmxAdvertisingMaterialFormatIcon{

    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    margin-bottom:36px;

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

    border-radius:18px;

    background:#ffffff;

}


.dmxAdvertisingMaterialFormatIcon svg{

    width:27px;
    height:27px;

    fill:none;

    stroke:var(--dmx-blue);

    stroke-width:1.5;

    stroke-linecap:round;
    stroke-linejoin:round;

}


.dmxAdvertisingMaterialFormatLarge
.dmxAdvertisingMaterialFormatIcon{

    margin-top:auto;

    border-color:
        rgba(255,255,255,.12);

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

}


.dmxAdvertisingMaterialFormatLarge
.dmxAdvertisingMaterialFormatIcon svg{

    stroke:var(--dmx-cyan);

}


.dmxAdvertisingMaterialFormat h4{

    margin:
        0 0 18px;

    color:var(--dmx-ink);

    font-size:
        clamp(28px,2.2vw,36px);

    font-weight:500;

    letter-spacing:-.04em;

}


.dmxAdvertisingMaterialFormatLarge h4{

    color:#ffffff;

    font-size:
        clamp(38px,4vw,60px);

}


.dmxAdvertisingMaterialFormat p{

    margin:0;

    color:var(--dmx-muted);

    font-size:15px;

    line-height:1.7;

}


.dmxAdvertisingMaterialFormatLarge p{

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

}


.dmxAdvertisingMaterialFormatTags{

    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:42px;

}


.dmxAdvertisingMaterialFormatTags span{

    padding:
        10px 13px;

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

    border-radius:999px;

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

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

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

}


.dmxAdvertisingMaterialFormatWideContent{

    display:grid;

    grid-template-columns:
        minmax(260px,.8fr)
        minmax(280px,1fr);

    gap:60px;

    align-items:end;

}


.dmxAdvertisingMaterialFormatWideContent p{

    padding-bottom:5px;

}


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

.dmxAdvertisingMaterialProcess{

    margin-top:
        clamp(110px,12vw,190px);

    padding:
        clamp(45px,6vw,85px);

    border-radius:
        clamp(26px,3vw,42px);

    background:var(--dmx-navy);

    color:#ffffff;

}


.dmxAdvertisingMaterialProcessIntro{

    display:grid;

    grid-template-columns:
        minmax(180px,.4fr)
        minmax(0,1fr);

    gap:60px;

    align-items:start;

    margin-bottom:70px;

}


.dmxAdvertisingMaterialProcessIntro span{

    color:var(--dmx-cyan);

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

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

}


.dmxAdvertisingMaterialProcessIntro h3{

    max-width:830px;

    margin:0;

    font-size:
        clamp(40px,5vw,72px);

    font-weight:450;

    line-height:1;

    letter-spacing:-.05em;

}


.dmxAdvertisingMaterialProcessSteps{

    display:grid;

    grid-template-columns:
        repeat(4,1fr);

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

    border-left:
        1px solid rgba(255,255,255,.12);

}


.dmxAdvertisingMaterialProcessStep{

    min-height:250px;

    padding:
        30px;

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

    border-right:
        1px solid rgba(255,255,255,.12);

    border-bottom:
        1px solid rgba(255,255,255,.12);

}


.dmxAdvertisingMaterialProcessStep > span{

    color:var(--dmx-lime);

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

    letter-spacing:.16em;

}


.dmxAdvertisingMaterialProcessStep strong{

    display:block;

    margin-bottom:13px;

    font-size:23px;
    font-weight:500;

}


.dmxAdvertisingMaterialProcessStep p{

    margin:0;

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

    font-size:13px;

    line-height:1.65;

}


/* ============================================================
   CIERRE
============================================================ */

.dmxAdvertisingMaterialClosing{

    display:grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(280px,.55fr);

    gap:
        clamp(50px,8vw,130px);

    align-items:end;

    margin-top:
        clamp(100px,11vw,170px);

    padding-top:
        clamp(60px,7vw,100px);

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

}


.dmxAdvertisingMaterialClosing > div > span{

    display:block;

    margin-bottom:22px;

    color:var(--dmx-blue);

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

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

}


.dmxAdvertisingMaterialClosing h3{

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(44px,6vw,88px);

    font-weight:500;

    line-height:.96;

    letter-spacing:-.055em;

}


.dmxAdvertisingMaterialClosing h3 strong{

    display:block;

    color:var(--dmx-blue);

    font-weight:500;

}


.dmxAdvertisingMaterialClosing > p{

    margin:0;

    color:var(--dmx-muted);

    font-size:16px;

    line-height:1.8;

}


/* ============================================================
   ANIMACIÓN INICIAL
============================================================ */

.dmxAdvertisingMaterialPiece,
.dmxAdvertisingMaterialCard,
.dmxAdvertisingMaterialRibbon{

    opacity:0;

    transition:
        opacity .75s ease,
        transform 1s cubic-bezier(.22,1,.36,1);

}


.dmxAdvertisingMaterial.is-active
.dmxAdvertisingMaterialPiece,
.dmxAdvertisingMaterial.is-active
.dmxAdvertisingMaterialCard,
.dmxAdvertisingMaterial.is-active
.dmxAdvertisingMaterialRibbon{

    opacity:1;

}


.dmxAdvertisingMaterialPieceBack{

    transform:
        translate(-40px,30px)
        rotate(-14deg)
        translateZ(-20px);

}


.dmxAdvertisingMaterial.is-active
.dmxAdvertisingMaterialPieceBack{

    transform:
        rotate(-8deg)
        translateZ(-20px);

}


.dmxAdvertisingMaterialPieceMain{

    transform:
        translate(40px,-20px)
        rotate(11deg)
        translateZ(40px);

}


.dmxAdvertisingMaterial.is-active
.dmxAdvertisingMaterialPieceMain{

    transform:
        rotate(5deg)
        translateZ(40px);

    transition-delay:.15s;

}


.dmxAdvertisingMaterialCard{

    transform:
        translate(-25px,40px)
        rotate(10deg)
        translateZ(70px);

}


.dmxAdvertisingMaterial.is-active
.dmxAdvertisingMaterialCard{

    transform:
        rotate(4deg)
        translateZ(70px);

    transition-delay:.35s;

}


.dmxAdvertisingMaterialRibbon{

    transform:
        translateX(40px)
        rotate(-12deg);

}


.dmxAdvertisingMaterial.is-active
.dmxAdvertisingMaterialRibbon{

    transform:
        rotate(-8deg);

    transition-delay:.5s;

}


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

@media (max-width:1100px){

    .dmxAdvertisingMaterialExperience{

        grid-template-columns:
            1fr;

    }


    .dmxAdvertisingMaterialContent{

        max-width:760px;

    }


    .dmxAdvertisingMaterialFormatsGrid{

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

    }


    .dmxAdvertisingMaterialFormatLarge{

        grid-row:auto;

        min-height:500px;

    }


    .dmxAdvertisingMaterialFormatWide{

        grid-column:
            span 2;

    }


    .dmxAdvertisingMaterialProcessSteps{

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

    }

}


/* ============================================================
   RESPONSIVE 820 PX
============================================================ */

@media (max-width:820px){

    .dmxAdvertisingMaterialHeading,
    .dmxAdvertisingMaterialFormatsHeader,
    .dmxAdvertisingMaterialClosing{

        grid-template-columns:
            1fr;

        gap:34px;

    }


    .dmxAdvertisingMaterialVisual{

        min-height:680px;

    }


    .dmxAdvertisingMaterialPieceBack{

        left:8%;

    }


    .dmxAdvertisingMaterialPieceMain{

        right:10%;

    }


    .dmxAdvertisingMaterialProcessIntro{

        grid-template-columns:
            1fr;

        gap:24px;

    }

}


/* ============================================================
   RESPONSIVE 650 PX
============================================================ */

@media (max-width:650px){

    .dmxAdvertisingMaterial{

        padding:
            100px 0;

    }


    .dmxAdvertisingMaterialHeading h2{

        font-size:
            clamp(46px,13vw,67px);

    }


    .dmxAdvertisingMaterialVisual{

        min-height:620px;

    }


    .dmxAdvertisingMaterialPieceBack{

        width:250px;
        height:350px;

        left:4%;
        top:17%;

        padding:23px;

    }


    .dmxAdvertisingMaterialPieceBackContent{

        left:23px;
        right:23px;
        bottom:55px;

    }


    .dmxAdvertisingMaterialPieceBackContent strong{

        font-size:25px;

    }


    .dmxAdvertisingMaterialPieceMain{

        width:265px;
        height:390px;

        right:5%;
        top:13%;

        padding:26px;

    }


    .dmxAdvertisingMaterialPieceMainCopy{

        top:115px;
        left:26px;
        right:26px;

    }


    .dmxAdvertisingMaterialPieceMainCopy strong{

        font-size:29px;

    }


    .dmxAdvertisingMaterialPieceMainFooter{

        left:26px;
        right:26px;
        bottom:25px;

    }


    .dmxAdvertisingMaterialCard{

        left:7%;
        bottom:8%;

        width:250px;

    }


    .dmxAdvertisingMaterialRibbon{

        display:none;

    }


    .dmxAdvertisingMaterialStatus{

        min-width:260px;

        bottom:20px;

    }


    .dmxAdvertisingMaterialFormatsGrid{

        grid-template-columns:
            1fr;

    }


    .dmxAdvertisingMaterialFormatWide{

        grid-column:auto;

    }


    .dmxAdvertisingMaterialFormatWideContent{

        grid-template-columns:
            1fr;

        gap:24px;

    }


    .dmxAdvertisingMaterialProcess{

        padding:
            38px 26px;

    }


    .dmxAdvertisingMaterialProcessSteps{

        grid-template-columns:
            1fr;

    }


    .dmxAdvertisingMaterialProcessStep{

        min-height:210px;

    }

}


/* ============================================================
   RESPONSIVE 480 PX
============================================================ */

@media (max-width:480px){

    .dmxAdvertisingMaterialVisual{

        min-height:570px;

    }


    .dmxAdvertisingMaterialBlueprint{

        inset:18px;

    }


    .dmxAdvertisingMaterialPieceBack{

        width:215px;
        height:310px;

    }


    .dmxAdvertisingMaterialPieceMain{

        width:225px;
        height:345px;

        padding:21px;

    }


    .dmxAdvertisingMaterialPieceMainCopy{

        top:95px;
        left:21px;
        right:21px;

    }


    .dmxAdvertisingMaterialPieceMainCopy strong{

        font-size:25px;

    }


    .dmxAdvertisingMaterialPieceMainFooter{

        left:21px;
        right:21px;

    }


    .dmxAdvertisingMaterialCard{

        width:220px;

        padding:17px;

    }


    .dmxAdvertisingMaterialStatus{

        min-width:230px;

    }


    .dmxAdvertisingMaterialStatus strong{

        display:none;

    }

}


/* ============================================================
   ACCESIBILIDAD
============================================================ */

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

    .dmxAdvertisingMaterial *,
    .dmxAdvertisingMaterial *::before,
    .dmxAdvertisingMaterial *::after{

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }


    .dmxAdvertisingMaterialPiece,
    .dmxAdvertisingMaterialCard,
    .dmxAdvertisingMaterialRibbon{

        opacity:1;

    }

}

.dmxAdvertisingMaterialVisual::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    border-radius:inherit;

    pointer-events:none;

    opacity:.8;

    background:

        radial-gradient(
            460px circle
            at
            var(--dmx-advertising-x,50%)
            var(--dmx-advertising-y,50%),

            rgba(0,217,220,.1),

            transparent 68%
        );

}