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

.dmxMarketingContact{

    position:relative;

    overflow:hidden;

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

    background:
        radial-gradient(
            circle at 10% 16%,
            rgba(6,103,241,.11),
            transparent 32%
        ),
        radial-gradient(
            circle at 88% 20%,
            rgba(0,217,220,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 72% 88%,
            rgba(142,91,255,.10),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f7fbfd 0%,
            #ffffff 44%,
            #edf5fa 100%
        );

    isolation:isolate;

}


.dmxMarketingContact::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:-2;

    pointer-events:none;

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

    background-size:
        58px 58px;

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

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

}


.dmxMarketingContact::after{

    content:"";

    position:absolute;

    left:-190px;

    bottom:-180px;

    z-index:-1;

    width:480px;

    height:480px;

    border-radius:50%;

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

    filter:blur(20px);

    pointer-events:none;

}


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

.dmxMarketingContactGrid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,.88fr)
        minmax(520px,1.12fr);

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

    align-items:start;

}


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

.dmxMarketingContactContent{

    position:relative;

    padding-top:18px;

}


.dmxMarketingContactEyebrow{

    display:inline-flex;

    align-items:center;

    gap:12px;

    margin-bottom:25px;

}


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

}


.dmxMarketingContactEyebrow small{

    color:var(--dmx-blue);

    font-size:.74rem;

    font-weight:850;

    letter-spacing:.15em;

    line-height:1.2;

    text-transform:uppercase;

}


.dmxMarketingContactContent h2{

    max-width:760px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(2.8rem,4.8vw,5.2rem);

    font-weight:850;

    letter-spacing:-.06em;

    line-height:.98;

    text-wrap:balance;

}


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

}


.dmxMarketingContactLead{

    max-width:680px;

    margin:
        28px
        0
        0;

    color:var(--dmx-muted);

    font-size:
        clamp(1rem,1.3vw,1.15rem);

    line-height:1.82;

}


/* ============================================================
   CANALES
============================================================ */

.dmxMarketingContactChannels{

    display:grid;

    gap:14px;

    margin-top:42px;

}


.dmxMarketingContactChannel{

    display:grid;

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

    gap:15px;

    align-items:center;

    padding:
        17px
        18px;

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

    border-radius:20px;

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

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

    backdrop-filter:
        blur(14px);

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

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

}


.dmxMarketingContactChannel:hover{

    transform:
        translateY(-5px);

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

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

}


.dmxMarketingContactChannelIcon{

    position:relative;

    display:grid;

    place-items:center;

    width:50px;

    height:50px;

    flex:0 0 auto;

    border-radius:17px;

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

    transition:
        transform .35s ease,
        color .35s ease,
        background .35s ease;

}


.dmxMarketingContactChannel:hover
.dmxMarketingContactChannelIcon{

    transform:
        rotate(-5deg)
        scale(1.05);

    color:var(--dmx-white);

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

}


.dmxMarketingContactChannel small{

    display:block;

    margin-bottom:5px;

    color:var(--dmx-muted);

    font-size:.62rem;

    font-weight:750;

    letter-spacing:.07em;

    text-transform:uppercase;

}


.dmxMarketingContactChannel a,
.dmxMarketingContactChannel strong{

    display:inline-block;

    color:var(--dmx-ink);

    font-size:.93rem;

    font-weight:850;

    line-height:1.4;

    text-decoration:none;

    transition:
        color .3s ease;

}


.dmxMarketingContactChannel a:hover{

    color:var(--dmx-blue);

}


.dmxMarketingContactChannel a:focus-visible{

    outline:
        3px solid
        rgba(6,103,241,.24);

    outline-offset:4px;

    border-radius:5px;

}


/* ============================================================
   ICONOS
============================================================ */

.dmxMarketingContactIconEmail{

    position:relative;

    width:24px;

    height:18px;

    border:
        2px solid
        currentColor;

    border-radius:5px;

}


.dmxMarketingContactIconEmail::before,
.dmxMarketingContactIconEmail::after{

    content:"";

    position:absolute;

    top:4px;

    width:13px;

    height:2px;

    border-radius:999px;

    background:
        currentColor;

}


.dmxMarketingContactIconEmail::before{

    left:2px;

    transform:
        rotate(34deg);

    transform-origin:left center;

}


.dmxMarketingContactIconEmail::after{

    right:2px;

    transform:
        rotate(-34deg);

    transform-origin:right center;

}


.dmxMarketingContactIconWhatsapp{

    position:relative;

    width:24px;

    height:24px;

    border:
        2px solid
        currentColor;

    border-radius:50%;

}


.dmxMarketingContactIconWhatsapp::before{

    content:"";

    position:absolute;

    left:1px;

    bottom:-3px;

    width:7px;

    height:7px;

    border-left:
        2px solid
        currentColor;

    border-bottom:
        2px solid
        currentColor;

    transform:
        rotate(-18deg);

}


.dmxMarketingContactIconWhatsapp::after{

    content:"";

    position:absolute;

    top:6px;

    left:6px;

    width:8px;

    height:8px;

    border-right:
        2px solid
        currentColor;

    border-bottom:
        2px solid
        currentColor;

    border-radius:
        0 0 7px 0;

    transform:
        rotate(15deg);

}


.dmxMarketingContactIconClock{

    position:relative;

    width:24px;

    height:24px;

    border:
        2px solid
        currentColor;

    border-radius:50%;

}


.dmxMarketingContactIconClock::before{

    content:"";

    position:absolute;

    top:5px;

    left:10px;

    width:2px;

    height:7px;

    border-radius:999px;

    background:
        currentColor;

}


.dmxMarketingContactIconClock::after{

    content:"";

    position:absolute;

    top:11px;

    left:10px;

    width:6px;

    height:2px;

    border-radius:999px;

    background:
        currentColor;

    transform:
        rotate(25deg);

    transform-origin:left center;

}


/* ============================================================
   CONFIANZA
============================================================ */

.dmxMarketingContactTrust{

    display:grid;

    gap:12px;

    margin-top:32px;

}


.dmxMarketingContactTrust > div{

    display:grid;

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

    gap:11px;

    align-items:center;

}


.dmxMarketingContactTrust > div > span{

    display:grid;

    place-items:center;

    width:27px;

    height:27px;

    border-radius:50%;

    color:#2f8e54;

    background:
        rgba(47,142,84,.10);

    box-shadow:
        inset 0 0 0 1px rgba(47,142,84,.10);

    font-size:.66rem;

    font-weight:900;

}


.dmxMarketingContactTrust p{

    margin:0;

    color:var(--dmx-navy);

    font-size:.80rem;

    font-weight:750;

    line-height:1.5;

}


/* ============================================================
   ENVOLVENTE DEL FORMULARIO
============================================================ */

.dmxMarketingContactFormWrap{

    position:relative;

    overflow:hidden;

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

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

    border-radius:
        clamp(28px,4vw,36px);

    background:
        radial-gradient(
            circle at 90% 5%,
            rgba(0,217,220,.10),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(241,247,252,.91)
        );

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

    backdrop-filter:
        blur(24px);

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

}


.dmxMarketingContactFormWrap::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-100px;

    width:300px;

    height:300px;

    border:
        46px solid
        rgba(6,103,241,.035);

    border-radius:50%;

    pointer-events:none;

}


.dmxMarketingContactFormWrap::after{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

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

}


/* ============================================================
   HEADER DEL FORMULARIO
============================================================ */

.dmxMarketingContactFormHeader{

    position:relative;

    z-index:2;

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:24px;

    padding-bottom:26px;

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

}


.dmxMarketingContactFormHeader small{

    display:block;

    margin-bottom:7px;

    color:var(--dmx-blue);

    font-size:.65rem;

    font-weight:850;

    letter-spacing:.10em;

    text-transform:uppercase;

}


.dmxMarketingContactFormHeader h3{

    max-width:470px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(1.55rem,2.6vw,2.35rem);

    font-weight:850;

    letter-spacing:-.045em;

    line-height:1.08;

    text-wrap:balance;

}


.dmxMarketingContactFormStatus{

    display:inline-flex;

    align-items:center;

    gap:8px;

    flex:0 0 auto;

    min-height:34px;

    padding:
        0
        12px;

    border:
        1px solid
        rgba(47,142,84,.12);

    border-radius:999px;

    color:#2f8e54;

    background:
        rgba(47,142,84,.07);

    font-size:.60rem;

    font-weight:850;

}


.dmxMarketingContactFormStatus > span{

    width:7px;

    height:7px;

    border-radius:50%;

    background:#4ab974;

    box-shadow:
        0 0 0 5px rgba(74,185,116,.10);

    animation:
        dmxMarketingContactStatusPulse
        2.1s ease-in-out
        infinite;

}


/* ============================================================
   FORMULARIO
============================================================ */

.dmxMarketingContactForm{

    position:relative;

    z-index:2;

    margin-top:28px;

}


.dmxMarketingContactFormGrid{

    display:grid;

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

    gap:20px;

}


.dmxMarketingContactField{

    position:relative;

    min-width:0;

}


.dmxMarketingContactFieldFull{

    grid-column:
        1 / -1;

}


.dmxMarketingContactField label,
.dmxMarketingContactBudget legend{

    display:block;

    margin-bottom:9px;

    color:var(--dmx-navy);

    font-size:.71rem;

    font-weight:850;

    line-height:1.4;

}


.dmxMarketingContactField input,
.dmxMarketingContactField select,
.dmxMarketingContactField textarea{

    width:100%;

    min-width:0;

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

    border-radius:16px;

    color:var(--dmx-ink);

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

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        0 9px 24px rgba(15,51,88,.035);

    font:inherit;

    font-size:.90rem;

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

}


.dmxMarketingContactField input,
.dmxMarketingContactField select{

    min-height:54px;

    padding:
        0
        16px;

}


.dmxMarketingContactField textarea{

    min-height:150px;

    padding:
        15px
        16px;

    line-height:1.65;

    resize:vertical;

}


.dmxMarketingContactField input::placeholder,
.dmxMarketingContactField textarea::placeholder{

    color:
        rgba(100,115,134,.72);

}


.dmxMarketingContactField select{

    appearance:none;

    -webkit-appearance:none;

    padding-right:48px;

    background-image:
        linear-gradient(
            45deg,
            transparent 50%,
            var(--dmx-muted) 50%
        ),
        linear-gradient(
            135deg,
            var(--dmx-muted) 50%,
            transparent 50%
        );

    background-position:
        calc(100% - 21px) 24px,
        calc(100% - 15px) 24px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat:no-repeat;

}


.dmxMarketingContactField input:hover,
.dmxMarketingContactField select:hover,
.dmxMarketingContactField textarea:hover{

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

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

}


.dmxMarketingContactField input:focus,
.dmxMarketingContactField select:focus,
.dmxMarketingContactField textarea:focus{

    outline:none;

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

    background:
        var(--dmx-white);

    box-shadow:
        0 0 0 4px rgba(6,103,241,.09),
        0 16px 35px rgba(15,51,88,.08);

}


.dmxMarketingContactField input:user-invalid,
.dmxMarketingContactField select:user-invalid,
.dmxMarketingContactField textarea:user-invalid{

    border-color:
        rgba(205,60,60,.45);

}


.dmxMarketingContactField input:user-valid,
.dmxMarketingContactField select:user-valid,
.dmxMarketingContactField textarea:user-valid{

    border-color:
        rgba(47,142,84,.28);

}


/* ============================================================
   PRESUPUESTO
============================================================ */

.dmxMarketingContactBudget{

    min-width:0;

    margin:0;

    padding:0;

    border:0;

}


.dmxMarketingContactBudgetOptions{

    display:grid;

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

    gap:10px;

}


.dmxMarketingContactBudgetOptions label{

    position:relative;

    display:block;

    margin:0;

    cursor:pointer;

}


.dmxMarketingContactBudgetOptions input{

    position:absolute;

    width:1px;

    height:1px;

    overflow:hidden;

    opacity:0;

    pointer-events:none;

}


.dmxMarketingContactBudgetOptions span{

    display:flex;

    align-items:center;

    min-height:47px;

    padding:
        10px
        14px
        10px
        42px;

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

    border-radius:15px;

    color:var(--dmx-navy);

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

    font-size:.72rem;

    font-weight:750;

    line-height:1.4;

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

}


.dmxMarketingContactBudgetOptions span::before{

    content:"";

    position:absolute;

    top:50%;

    left:14px;

    width:16px;

    height:16px;

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

    border-radius:50%;

    background:
        var(--dmx-white);

    transform:
        translateY(-50%);

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

}


.dmxMarketingContactBudgetOptions span::after{

    content:"";

    position:absolute;

    top:50%;

    left:19px;

    width:6px;

    height:6px;

    border-radius:50%;

    background:
        var(--dmx-white);

    opacity:0;

    transform:
        translateY(-50%)
        scale(.4);

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

}


.dmxMarketingContactBudgetOptions label:hover span{

    transform:
        translateY(-3px);

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

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

}


.dmxMarketingContactBudgetOptions input:checked + span{

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

    color:var(--dmx-blue);

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

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

}


.dmxMarketingContactBudgetOptions input:checked + span::before{

    border-color:
        var(--dmx-blue);

    background:
        var(--dmx-blue);

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

}


.dmxMarketingContactBudgetOptions input:checked + span::after{

    opacity:1;

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

}


.dmxMarketingContactBudgetOptions input:focus-visible + span{

    outline:
        3px solid
        rgba(6,103,241,.22);

    outline-offset:3px;

}


/* ============================================================
   CONSENTIMIENTO
============================================================ */

.dmxMarketingContactConsent{

    margin-top:22px;

}


.dmxMarketingContactConsent label{

    position:relative;

    display:grid;

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

    gap:11px;

    align-items:flex-start;

    cursor:pointer;

}


.dmxMarketingContactConsent input{

    width:18px;

    height:18px;

    margin-top:2px;

    accent-color:
        var(--dmx-blue);

}


.dmxMarketingContactConsent span{

    color:var(--dmx-muted);

    font-size:.69rem;

    line-height:1.55;

}


/* ============================================================
   HONEYPOT
============================================================ */

.dmxMarketingContactHoneypot{

    position:absolute !important;

    left:-9999px !important;

    width:1px !important;

    height:1px !important;

    overflow:hidden !important;

}


/* ============================================================
   BOTÓN
============================================================ */

.dmxMarketingContactSubmit{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    min-height:58px;

    margin-top:25px;

    padding:
        0
        24px;

    overflow:hidden;

    border:0;

    border-radius:17px;

    color:var(--dmx-white);

    background:
        linear-gradient(
            110deg,
            var(--dmx-navy) 0%,
            var(--dmx-blue) 56%,
            var(--dmx-cyan) 100%
        );

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

    font:inherit;

    font-size:.92rem;

    font-weight:900;

    line-height:1;

    cursor:pointer;

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

}


.dmxMarketingContactSubmit::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:55%;

    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

    transform:
        skewX(-18deg);

    transition:
        left .65s ease;

}


.dmxMarketingContactSubmit > span,
.dmxMarketingContactSubmit svg{

    position:relative;

    z-index:2;

}


.dmxMarketingContactSubmit svg{

    transition:
        transform .3s ease;

}


.dmxMarketingContactSubmit:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 28px 58px rgba(6,103,241,.29);

    filter:
        saturate(1.05);

}


.dmxMarketingContactSubmit:hover::before{

    left:140%;

}


.dmxMarketingContactSubmit:hover svg{

    transform:
        translateX(4px);

}


.dmxMarketingContactSubmit:focus-visible{

    outline:
        3px solid
        rgba(6,103,241,.30);

    outline-offset:4px;

}


.dmxMarketingContactSubmit:disabled{

    cursor:not-allowed;

    opacity:.62;

    transform:none;

}


/* ============================================================
   PRIVACIDAD
============================================================ */

.dmxMarketingContactPrivacy{

    max-width:540px;

    margin:
        14px
        auto
        0;

    color:
        rgba(100,115,134,.82);

    font-size:.60rem;

    line-height:1.55;

    text-align:center;

}


/* ============================================================
   BARRA INFERIOR
============================================================ */

.dmxMarketingContactBottom{

    position:relative;

    z-index:3;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

    margin-top:
        clamp(58px,6vw,90px);

    padding:
        clamp(25px,4vw,38px);

    overflow:hidden;

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

    border-radius:28px;

    background:
        radial-gradient(
            circle at 86% 20%,
            rgba(0,217,220,.17),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            var(--dmx-navy) 0%,
            #0b4381 52%,
            var(--dmx-blue) 100%
        );

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

}


.dmxMarketingContactBottom::before{

    content:"";

    position:absolute;

    top:-100px;

    right:14%;

    width:240px;

    height:240px;

    border:
        36px solid
        rgba(255,255,255,.04);

    border-radius:50%;

    pointer-events:none;

}


.dmxMarketingContactBottom > div{

    position:relative;

    z-index:2;

    max-width:760px;

}


.dmxMarketingContactBottom small{

    display:block;

    margin-bottom:7px;

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

    font-size:.65rem;

    font-weight:800;

    letter-spacing:.10em;

    text-transform:uppercase;

}


.dmxMarketingContactBottom strong{

    display:block;

    color:var(--dmx-white);

    font-size:
        clamp(1.22rem,2.2vw,2.05rem);

    font-weight:850;

    letter-spacing:-.035em;

    line-height:1.15;

}


.dmxMarketingContactBottom > a{

    position:relative;

    z-index:2;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:54px;

    flex:0 0 auto;

    padding:
        0
        22px;

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

    border-radius:16px;

    color:var(--dmx-navy);

    background:
        var(--dmx-white);

    box-shadow:
        0 17px 38px rgba(0,0,0,.16);

    font-size:.86rem;

    font-weight:900;

    line-height:1;

    text-decoration:none;

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

}


.dmxMarketingContactBottom > a svg{

    transition:
        transform .3s ease;

}


.dmxMarketingContactBottom > a:hover{

    transform:
        translateY(-4px);

    background:
        #eefcff;

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

}


.dmxMarketingContactBottom > a:hover svg{

    transform:
        translateX(4px);

}


.dmxMarketingContactBottom > a:focus-visible{

    outline:
        3px solid
        rgba(198,255,47,.52);

    outline-offset:4px;

}


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

@keyframes dmxMarketingContactStatusPulse{

    0%,
    100%{

        transform:
            scale(1);

        box-shadow:
            0 0 0 5px rgba(74,185,116,.10);

    }

    50%{

        transform:
            scale(.85);

        box-shadow:
            0 0 0 9px rgba(74,185,116,.035);

    }

}


/* ============================================================
   RESPONSIVE 1200px
============================================================ */

@media (max-width:1200px){

    .dmxMarketingContactGrid{

        grid-template-columns:
            minmax(0,.82fr)
            minmax(500px,1.18fr);

        gap:55px;

    }

}


/* ============================================================
   RESPONSIVE 1020px
============================================================ */

@media (max-width:1020px){

    .dmxMarketingContactGrid{

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

    }


    .dmxMarketingContactContent{

        max-width:820px;

        padding-top:0;

    }


    .dmxMarketingContactChannels{

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

    }


    .dmxMarketingContactChannel{

        align-items:start;

    }


    .dmxMarketingContactFormWrap{

        max-width:900px;

    }

}


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

@media (max-width:760px){

    .dmxMarketingContact{

        padding:
            88px
            0;

    }


    .dmxMarketingContactContent h2{

        font-size:
            clamp(2.35rem,10vw,4rem);

    }


    .dmxMarketingContactChannels{

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

    }


    .dmxMarketingContactChannel{

        align-items:center;

    }


    .dmxMarketingContactFormWrap{

        padding:
            30px
            24px;

        border-radius:28px;

    }


    .dmxMarketingContactFormGrid{

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

    }


    .dmxMarketingContactFieldFull{

        grid-column:1;

    }


    .dmxMarketingContactBudgetOptions{

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

    }


    .dmxMarketingContactBottom{

        align-items:flex-start;

        flex-direction:column;

    }


    .dmxMarketingContactBottom > a{

        width:100%;

    }

}


/* ============================================================
   RESPONSIVE 560px
============================================================ */

@media (max-width:560px){

    .dmxMarketingContact::before{

        background-size:
            42px 42px;

    }


    .dmxMarketingContactEyebrow{

        align-items:flex-start;

    }


    .dmxMarketingContactEyebrow > span{

        margin-top:7px;

    }


    .dmxMarketingContactContent h2{

        letter-spacing:-.048em;

        line-height:1.01;

    }


    .dmxMarketingContactFormWrap{

        padding:
            26px
            18px;

        border-radius:24px;

    }


    .dmxMarketingContactFormHeader{

        align-items:flex-start;

        flex-direction:column;

        gap:15px;

    }


    .dmxMarketingContactFormStatus{

        align-self:flex-start;

    }


    .dmxMarketingContactField input,
    .dmxMarketingContactField select{

        min-height:52px;

    }


    .dmxMarketingContactConsent label{

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

    }


    .dmxMarketingContactBottom{

        padding:
            27px
            21px;

        border-radius:24px;

    }

}


/* ============================================================
   RESPONSIVE 400px
============================================================ */

@media (max-width:400px){

    .dmxMarketingContactFormWrap{

        padding:
            24px
            15px;

    }


    .dmxMarketingContactChannel{

        padding:
            15px;

    }


    .dmxMarketingContactChannelIcon{

        width:46px;

        height:46px;

    }


    .dmxMarketingContactBudgetOptions span{

        padding-right:10px;

        font-size:.67rem;

    }


    .dmxMarketingContactSubmit{

        min-height:55px;

    }

}


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

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

    .dmxMarketingContactFormStatus > span{

        animation:none;

    }


    .dmxMarketingContactChannel,
    .dmxMarketingContactChannelIcon,
    .dmxMarketingContactField input,
    .dmxMarketingContactField select,
    .dmxMarketingContactField textarea,
    .dmxMarketingContactBudgetOptions span,
    .dmxMarketingContactBudgetOptions span::before,
    .dmxMarketingContactBudgetOptions span::after,
    .dmxMarketingContactSubmit,
    .dmxMarketingContactSubmit::before,
    .dmxMarketingContactSubmit svg,
    .dmxMarketingContactBottom > a,
    .dmxMarketingContactBottom > a svg{

        transition:none;

    }

}