/* ============================================================
   MARCA PROFESIONAL
============================================================ */

.dmxCvBrand{

    position:relative;

    overflow:hidden;

    padding:
        clamp(110px,12vw,190px)
        0;

    background:
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #ffffff 48%,
            #eef4f8 100%
        );

    color:var(--dmx-ink);

    isolation:isolate;

}


/* ============================================================
   FONDO
============================================================ */

.dmxCvBrandGrid{

    position:absolute;

    inset:0;

    z-index:-3;

    opacity:.34;

    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:
        78px 78px;

    mask-image:
        linear-gradient(
            180deg,
            transparent,
            #000 16%,
            #000 84%,
            transparent
        );

}


.dmxCvBrandGlow{

    position:absolute;

    z-index:-2;

    border-radius:50%;

    pointer-events:none;

}


.dmxCvBrandGlowOne{

    width:720px;
    height:720px;

    top:-340px;
    right:-270px;

    background:
        radial-gradient(
            circle,
            rgba(0,217,220,.13),
            transparent 69%
        );

}


.dmxCvBrandGlowTwo{

    width:700px;
    height:700px;

    bottom:-340px;
    left:-280px;

    background:
        radial-gradient(
            circle,
            rgba(6,103,241,.1),
            transparent 70%
        );

}


/* ============================================================
   ENCABEZADO
============================================================ */

.dmxCvBrandHeader{

    margin-bottom:
        clamp(80px,9vw,140px);

}


.dmxCvBrandEyebrow{

    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:30px;

}


.dmxCvBrandEyebrow > span{

    width:44px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--dmx-blue),
            var(--dmx-cyan)
        );

}


.dmxCvBrandEyebrow small{

    color:var(--dmx-muted);

    font-size:12px;
    font-weight:750;

    letter-spacing:.18em;
    text-transform:uppercase;

}


.dmxCvBrandHeading{

    display:grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(300px,.65fr);

    gap:
        clamp(50px,8vw,130px);

    align-items:end;

}


.dmxCvBrandHeading 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;

}


.dmxCvBrandHeading h2 span{

    display:block;

    color:var(--dmx-blue);

}


.dmxCvBrandIntro{

    padding-bottom:8px;

}


.dmxCvBrandIntro p{

    margin:0;

    color:var(--dmx-muted);

    font-size:
        clamp(16px,1.2vw,19px);

    line-height:1.75;

}


.dmxCvBrandIntro p + p{

    margin-top:18px;

}


/* ============================================================
   EXPERIENCIA PRINCIPAL
============================================================ */

.dmxCvBrandExperience{

    display:grid;

    grid-template-columns:
        minmax(300px,.75fr)
        minmax(590px,1.25fr);

    gap:
        clamp(55px,8vw,125px);

    align-items:center;

}


/* ============================================================
   CONTENIDO
============================================================ */

.dmxCvBrandIndex{

    display:block;

    margin-bottom:32px;

    color:var(--dmx-blue);

    font-size:10px;
    font-weight:850;

    letter-spacing:.18em;

    text-transform:uppercase;

}


.dmxCvBrandContent h3{

    max-width:610px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(42px,4.8vw,74px);

    font-weight:500;

    line-height:.98;

    letter-spacing:-.055em;

}


.dmxCvBrandContent h3 strong{

    display:block;

    margin-top:12px;

    color:var(--dmx-blue);

    font-weight:500;

}


.dmxCvBrandContent > p{

    max-width:540px;

    margin:
        35px 0 0;

    color:var(--dmx-muted);

    font-size:17px;

    line-height:1.75;

}


/* ============================================================
   PRINCIPIOS
============================================================ */

.dmxCvBrandPrinciples{

    margin-top:45px;

    border-top:
        1px solid var(--dmx-line);

}


.dmxCvBrandPrinciples article{

    display:grid;

    grid-template-columns:
        42px 1fr;

    gap:18px;

    padding:
        20px 0;

    border-bottom:
        1px solid var(--dmx-line);

}


.dmxCvBrandPrinciples article > span{

    color:var(--dmx-cyan);

    font-size:9px;
    font-weight:850;

    letter-spacing:.14em;

}


.dmxCvBrandPrinciples strong{

    display:block;

    margin-bottom:6px;

    color:var(--dmx-ink);

    font-size:14px;
    font-weight:700;

}


.dmxCvBrandPrinciples p{

    margin:0;

    color:var(--dmx-muted);

    font-size:13px;

    line-height:1.55;

}


/* ============================================================
   VISUAL
============================================================ */

.dmxCvBrandVisual{

    position:relative;

    min-height:720px;

    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(236,244,249,.88)
        );

    box-shadow:
        0 42px 100px rgba(8,38,77,.12);

    perspective:1500px;

}


.dmxCvBrandVisual::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    border-radius:inherit;

    pointer-events:none;

    background:

        radial-gradient(
            470px circle
            at
            var(--dmx-cv-x,50%)
            var(--dmx-cv-y,40%),

            rgba(0,217,220,.11),

            transparent 68%
        );

}


.dmxCvBrandVisual > *{

    position:relative;

    z-index:2;

}


.dmxCvBrandVisualHalo{

    position:absolute;

    z-index:0;

    width:560px;
    height:560px;

    top:50%;
    left:50%;

    border:
        1px solid rgba(8,38,77,.08);

    border-radius:50%;

    transform:
        translate(-50%,-50%);

    pointer-events:none;

}


.dmxCvBrandVisualHalo::before{

    content:"";

    position:absolute;

    inset:82px;

    border:
        1px solid rgba(0,217,220,.12);

    border-radius:50%;

}


.dmxCvBrandVisualHalo::after{

    content:"";

    position:absolute;

    inset:145px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(6,103,241,.08),
            transparent 70%
        );

}


/* ============================================================
   DOCUMENTO
============================================================ */

.dmxCvBrandDocument{

    position:relative;

    z-index:5;

    width:390px;

    overflow:hidden;

    border:
        1px solid rgba(8,38,77,.12);

    border-radius:22px;

    background:#ffffff;

    box-shadow:
        0 38px 80px rgba(8,38,77,.2);

    opacity:0;

    transform:
        translateY(35px)
        rotateY(-11deg)
        rotateX(5deg);

    transform-style:preserve-3d;

    transition:
        opacity .75s ease,
        transform .9s cubic-bezier(.22,1,.36,1);

}


.dmxCvBrand.is-active
.dmxCvBrandDocument{

    opacity:1;

    transform:
        translate(
            var(--dmx-cv-document-x,0px),
            var(--dmx-cv-document-y,0px)
        )
        rotateY(-5deg)
        rotateX(2deg);

}


/* ============================================================
   TOOLBAR
============================================================ */

.dmxCvBrandDocumentToolbar{

    display:grid;

    grid-template-columns:
        auto 1fr auto;

    gap:14px;

    align-items:center;

    padding:
        14px 16px;

    border-bottom:
        1px solid var(--dmx-line);

    background:#f7f9fb;

}


.dmxCvBrandToolbarDots{

    display:flex;
    gap:5px;

}


.dmxCvBrandToolbarDots span{

    width:7px;
    height:7px;

    border-radius:50%;

    background:#c8d2dc;

}


.dmxCvBrandDocumentToolbar > span{

    overflow:hidden;

    color:#748190;

    font-size:8px;
    font-weight:650;

    text-overflow:ellipsis;
    white-space:nowrap;

}


.dmxCvBrandDocumentToolbar > small{

    color:#7c8997;

    font-size:8px;
    font-weight:750;

}


/* ============================================================
   CUERPO DEL DOCUMENTO
============================================================ */

.dmxCvBrandDocumentBody{

    min-height:520px;

    padding:
        29px 28px 32px;

}


.dmxCvBrandDocumentHeader{

    display:flex;
    align-items:center;
    gap:16px;

    padding-bottom:22px;

    border-bottom:
        1px solid var(--dmx-line);

}


.dmxCvBrandDocumentAvatar{

    position:relative;

    overflow:hidden;

    width:54px;
    height:54px;

    flex:0 0 auto;

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #dbe6ee,
            #eef3f7
        );

}


.dmxCvBrandDocumentAvatar::before{

    content:"";

    position:absolute;

    top:10px;
    left:50%;

    width:17px;
    height:17px;

    border-radius:50%;

    background:#aab8c5;

    transform:
        translateX(-50%);

}


.dmxCvBrandDocumentAvatar span{

    position:absolute;

    left:50%;
    bottom:-7px;

    width:36px;
    height:27px;

    border-radius:50% 50% 0 0;

    background:#aab8c5;

    transform:
        translateX(-50%);

}


.dmxCvBrandDocumentHeader strong{

    display:block;

    color:var(--dmx-ink);

    font-size:18px;
    font-weight:700;

    letter-spacing:-.03em;

}


.dmxCvBrandDocumentHeader > div:last-child > span{

    display:block;

    margin-top:5px;

    color:var(--dmx-muted);

    font-size:8px;

}


/* ============================================================
   CONTACTO
============================================================ */

.dmxCvBrandDocumentContact{

    display:flex;
    gap:7px;

    margin:
        16px 0 25px;

}


.dmxCvBrandDocumentContact span{

    height:5px;

    border-radius:999px;

    background:#dce5ec;

}


.dmxCvBrandDocumentContact span:nth-child(1){

    width:24%;

}


.dmxCvBrandDocumentContact span:nth-child(2){

    width:31%;

}


.dmxCvBrandDocumentContact span:nth-child(3){

    width:19%;

}


/* ============================================================
   SECCIONES DOCUMENTO
============================================================ */

.dmxCvBrandDocumentSection{

    margin-top:21px;

}


.dmxCvBrandDocumentSection > small{

    display:block;

    margin-bottom:12px;

    color:var(--dmx-blue);

    font-size:7px;
    font-weight:850;

    letter-spacing:.13em;
    text-transform:uppercase;

}


.dmxCvBrandDocumentSection > i{

    display:block;

    height:6px;

    margin-bottom:7px;

    border-radius:999px;

    background:#dfe7ed;

}


.dmxCvBrandDocumentSection > i:nth-of-type(1){

    width:100%;

}


.dmxCvBrandDocumentSection > i:nth-of-type(2){

    width:92%;

}


.dmxCvBrandDocumentSection > i:nth-of-type(3){

    width:73%;

}


.dmxCvBrandDocumentColumns{

    display:grid;

    grid-template-columns:
        minmax(0,1.25fr)
        minmax(100px,.75fr);

    gap:23px;

    margin-top:26px;

}


/* ============================================================
   EXPERIENCIA DOCUMENTO
============================================================ */

.dmxCvBrandDocumentJob{

    display:grid;

    grid-template-columns:
        8px 1fr;

    gap:10px;

    margin-bottom:18px;

}


.dmxCvBrandDocumentJob > span{

    width:7px;
    height:7px;

    margin-top:2px;

    border:
        2px solid var(--dmx-cyan);

    border-radius:50%;

}


.dmxCvBrandDocumentJob div{

    display:grid;

    gap:6px;

}


.dmxCvBrandDocumentJob strong,
.dmxCvBrandDocumentJob i{

    display:block;

    height:5px;

    border-radius:999px;

    background:#dfe7ed;

}


.dmxCvBrandDocumentJob strong{

    width:69%;

    background:#b8c6d2;

}


.dmxCvBrandDocumentJob i:nth-of-type(1){

    width:95%;

}


.dmxCvBrandDocumentJob i:nth-of-type(2){

    width:82%;

}


.dmxCvBrandDocumentJob i:nth-of-type(3){

    width:67%;

}


/* ============================================================
   TAGS
============================================================ */

.dmxCvBrandDocumentTags{

    display:flex;
    flex-wrap:wrap;

    gap:6px;

}


.dmxCvBrandDocumentTags span{

    width:42px;
    height:13px;

    border-radius:999px;

    background:
        rgba(6,103,241,.1);

}


.dmxCvBrandDocumentTags span:nth-child(2){

    width:51px;

}


.dmxCvBrandDocumentTags span:nth-child(3){

    width:37px;

}


.dmxCvBrandDocumentTags span:nth-child(4){

    width:46px;

}


/* ============================================================
   IDIOMAS
============================================================ */

.dmxCvBrandDocumentLanguages{

    display:grid;

    gap:9px;

}


.dmxCvBrandDocumentLanguages span{

    position:relative;

    display:block;

    width:100%;
    height:6px;

    overflow:hidden;

    border-radius:999px;

    background:#dfe7ed;

}


.dmxCvBrandDocumentLanguages span::before{

    content:"";

    position:absolute;

    inset:0 auto 0 0;

    border-radius:inherit;

    background:
        linear-gradient(
            90deg,
            var(--dmx-blue),
            var(--dmx-cyan)
        );

}


.dmxCvBrandDocumentLanguages span:first-child::before{

    width:88%;

}


.dmxCvBrandDocumentLanguages span:last-child::before{

    width:72%;

}


/* ============================================================
   SCORE
============================================================ */

.dmxCvBrandDocumentScore{

    position:absolute;

    z-index:7;

    left:50%;
    bottom:-28px;

    min-width:240px;

    display:flex;
    align-items:center;
    gap:12px;

    padding:
        13px 15px;

    border:
        1px solid rgba(8,38,77,.1);

    border-radius:17px;

    background:
        rgba(255,255,255,.94);

    box-shadow:
        0 20px 50px rgba(8,38,77,.15);

    backdrop-filter:
        blur(15px);

    transform:
        translateX(-50%);

}


.dmxCvBrandDocumentScore > div{

    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    border-radius:12px;

    background:
        rgba(198,255,47,.3);

}


.dmxCvBrandDocumentScore svg{

    width:20px;
    height:20px;

    fill:none;

    stroke:var(--dmx-navy);

    stroke-width:2;

    stroke-linecap:round;
    stroke-linejoin:round;

}


.dmxCvBrandDocumentScore p{

    margin:0;

}


.dmxCvBrandDocumentScore small{

    display:block;

    margin-bottom:4px;

    color:var(--dmx-muted);

    font-size:8px;

}


.dmxCvBrandDocumentScore strong{

    display:block;

    color:var(--dmx-ink);

    font-size:11px;

}


/* ============================================================
   ELEMENTOS FLOTANTES
============================================================ */

.dmxCvBrandFloating{

    position:absolute;

    z-index:8;

    border:
        1px solid rgba(8,38,77,.11);

    border-radius:17px;

    background:
        rgba(255,255,255,.9);

    box-shadow:
        0 24px 60px rgba(8,38,77,.15);

    backdrop-filter:
        blur(16px);

    opacity:0;

    transition:
        opacity .7s ease,
        transform .85s cubic-bezier(.22,1,.36,1);

}


.dmxCvBrandFloatingAts{

    top:17%;
    left:4%;

    display:flex;
    align-items:center;
    gap:12px;

    padding:
        14px 16px;

    transform:
        translate(-24px,18px);

}


.dmxCvBrandFloatingAts > span{

    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border-radius:12px;

    background:var(--dmx-navy);

    color:var(--dmx-cyan);

    font-size:11px;
    font-weight:850;

}


.dmxCvBrandFloating strong{

    display:block;

    color:var(--dmx-ink);

    font-size:11px;
    font-weight:700;

}


.dmxCvBrandFloating small{

    display:block;

    margin-top:4px;

    color:var(--dmx-muted);

    font-size:8px;

}


.dmxCvBrandFloatingLanguage{

    right:7%;
    top:28%;

    display:flex;
    align-items:center;
    gap:10px;

    padding:
        13px 15px;

    transform:
        translate(24px,18px);

}


.dmxCvBrandFloatingLanguage span{

    color:var(--dmx-blue);

    font-size:11px;
    font-weight:850;

}


.dmxCvBrandFloatingLanguage i{

    width:18px;
    height:1px;

    background:var(--dmx-line);

}


.dmxCvBrandFloatingMessage{

    right:4%;
    bottom:17%;

    min-width:215px;

    padding:
        15px 17px;

    transform:
        translate(24px,-18px);

}


.dmxCvBrandFloatingMessage small{

    margin:0 0 5px;

    color:var(--dmx-cyan);

    font-size:7px;
    font-weight:850;

    letter-spacing:.12em;

}


/* ============================================================
   ACTIVACIÓN
============================================================ */

.dmxCvBrand.is-active
.dmxCvBrandFloating{

    opacity:1;

    transform:
        translate(
            var(--dmx-cv-floating-x,0px),
            var(--dmx-cv-floating-y,0px)
        );

}


.dmxCvBrand.is-active
.dmxCvBrandFloatingAts{

    transition-delay:.3s;

}


.dmxCvBrand.is-active
.dmxCvBrandFloatingLanguage{

    transition-delay:.48s;

}


.dmxCvBrand.is-active
.dmxCvBrandFloatingMessage{

    transition-delay:.66s;

}


/* ============================================================
   CANALES
============================================================ */

.dmxCvBrandChannels{

    margin-top:
        clamp(120px,13vw,205px);

}


.dmxCvBrandChannelsHeader{

    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,88px);

}


.dmxCvBrandChannelsHeader > div > span{

    display:block;

    margin-bottom:18px;

    color:var(--dmx-blue);

    font-size:11px;
    font-weight:800;

    letter-spacing:.18em;
    text-transform:uppercase;

}


.dmxCvBrandChannelsHeader h3{

    max-width:840px;

    margin:0;

    color:var(--dmx-ink);

    font-size:
        clamp(42px,5vw,75px);

    font-weight:500;

    line-height:1;

    letter-spacing:-.05em;

}


.dmxCvBrandChannelsHeader > p{

    margin:0;

    color:var(--dmx-muted);

    font-size:16px;

    line-height:1.75;

}


.dmxCvBrandChannelsGrid{

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    border-top:
        1px solid var(--dmx-line);

    border-left:
        1px solid var(--dmx-line);

}


.dmxCvBrandChannel{

    position:relative;

    min-height:430px;

    padding:
        clamp(28px,3vw,43px);

    border-right:
        1px solid var(--dmx-line);

    border-bottom:
        1px solid var(--dmx-line);

    background:
        rgba(255,255,255,.58);

    transition:
        background .4s ease,
        transform .4s ease,
        box-shadow .4s ease;

}


.dmxCvBrandChannel::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:0;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--dmx-blue),
            var(--dmx-cyan),
            var(--dmx-lime)
        );

    transition:
        width .45s cubic-bezier(.22,1,.36,1);

}


.dmxCvBrandChannel:hover{

    z-index:2;

    background:#ffffff;

    box-shadow:
        0 28px 70px rgba(8,38,77,.1);

    transform:
        translateY(-6px);

}


.dmxCvBrandChannel:hover::before{

    width:100%;

}


.dmxCvBrandChannelIndex{

    color:var(--dmx-blue);

    font-size:9px;
    font-weight:850;

    letter-spacing:.16em;

}


.dmxCvBrandChannelIcon{

    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    margin:
        65px 0 32px;

    border:
        1px solid rgba(8,38,77,.1);

    border-radius:17px;

    background:
        rgba(6,103,241,.055);

}


.dmxCvBrandChannelIcon svg{

    width:25px;
    height:25px;

    fill:none;

    stroke:var(--dmx-blue);

    stroke-width:1.55;

    stroke-linecap:round;
    stroke-linejoin:round;

}


.dmxCvBrandChannel h4{

    margin:
        0 0 17px;

    color:var(--dmx-ink);

    font-size:
        clamp(24px,2vw,31px);

    font-weight:500;

    line-height:1.05;

    letter-spacing:-.04em;

}


.dmxCvBrandChannel > p{

    min-height:88px;

    margin:0;

    color:var(--dmx-muted);

    font-size:14px;

    line-height:1.7;

}


.dmxCvBrandChannel ul{

    display:grid;

    gap:9px;

    margin:
        29px 0 0;

    padding:0;

    list-style:none;

}


.dmxCvBrandChannel li{

    position:relative;

    padding-left:16px;

    color:#536276;

    font-size:12px;

}


.dmxCvBrandChannel li::before{

    content:"";

    position:absolute;

    top:.48em;
    left:0;

    width:5px;
    height:5px;

    border-radius:50%;

    background:var(--dmx-cyan);

}


/* ============================================================
   CIERRE
============================================================ */

.dmxCvBrandClosing{

    margin-top:
        clamp(100px,11vw,175px);

    padding:
        clamp(45px,6vw,86px);

    border:
        1px solid rgba(8,38,77,.1);

    border-radius:
        clamp(26px,3vw,42px);

    background:
        linear-gradient(
            145deg,
            #071f3a,
            #082b50
        );

    color:#ffffff;

    box-shadow:
        0 35px 90px rgba(8,38,77,.15);

}


.dmxCvBrandClosingLabel{

    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:
        clamp(50px,6vw,82px);

}


.dmxCvBrandClosingLabel > span{

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--dmx-lime);

    box-shadow:
        0 0 17px rgba(198,255,47,.65);

}


.dmxCvBrandClosingLabel small{

    color:rgba(255,255,255,.58);

    font-size:10px;
    font-weight:800;

    letter-spacing:.18em;
    text-transform:uppercase;

}


.dmxCvBrandClosingContent{

    display:grid;

    grid-template-columns:
        minmax(0,1.2fr)
        minmax(280px,.55fr);

    gap:
        clamp(40px,8vw,120px);

    align-items:end;

}


.dmxCvBrandClosingContent h3{

    max-width:820px;

    margin:0;

    color:#ffffff;

    font-size:
        clamp(42px,5.5vw,82px);

    font-weight:450;

    line-height:.97;

    letter-spacing:-.055em;

}


.dmxCvBrandClosingContent h3 strong{

    display:block;

    color:var(--dmx-lime);

    font-weight:500;

}


.dmxCvBrandClosingContent p{

    margin:0;

    color:rgba(255,255,255,.59);

    font-size:16px;

    line-height:1.75;

}


/* ============================================================
   1180 PX
============================================================ */

@media (max-width:1180px){

    .dmxCvBrandExperience{

        grid-template-columns:
            minmax(280px,.72fr)
            minmax(520px,1.28fr);

        gap:50px;

    }


    .dmxCvBrandVisual{

        transform:
            scale(.93);

        transform-origin:center;

    }


    .dmxCvBrandChannelsGrid{

        grid-template-columns:
            repeat(2,minmax(0,1fr));

    }

}


/* ============================================================
   980 PX
============================================================ */

@media (max-width:980px){

    .dmxCvBrandHeading,
    .dmxCvBrandChannelsHeader,
    .dmxCvBrandClosingContent{

        grid-template-columns:
            1fr;

        gap:32px;

    }


    .dmxCvBrandExperience{

        grid-template-columns:
            1fr;

    }


    .dmxCvBrandContent{

        max-width:760px;

    }


    .dmxCvBrandVisual{

        width:100%;

        transform:none;

    }

}


/* ============================================================
   760 PX
============================================================ */

@media (max-width:760px){

    .dmxCvBrand{

        padding:
            100px 0;

    }


    .dmxCvBrandHeading h2{

        font-size:
            clamp(46px,13vw,68px);

    }


    .dmxCvBrandVisual{

        min-height:650px;

    }


    .dmxCvBrandDocument{

        width:350px;

    }


    .dmxCvBrandFloatingAts{

        left:0;

    }


    .dmxCvBrandFloatingLanguage{

        right:0;

    }


    .dmxCvBrandFloatingMessage{

        right:0;

    }

}


/* ============================================================
   620 PX
============================================================ */

@media (max-width:620px){

    .dmxCvBrandVisual{

        min-height:590px;

        width:calc(100% + 20px);

        margin-left:-10px;

    }


    .dmxCvBrandVisualHalo{

        width:470px;
        height:470px;

    }


    .dmxCvBrandDocument{

        width:min(310px,78vw);

    }


    .dmxCvBrandDocumentBody{

        min-height:470px;

        padding:
            25px 22px 28px;

    }


    .dmxCvBrandDocumentColumns{

        grid-template-columns:
            1fr .72fr;

        gap:18px;

    }


    .dmxCvBrandFloating{

        max-width:160px;

    }


    .dmxCvBrandFloatingAts{

        top:12%;

    }


    .dmxCvBrandFloatingLanguage{

        top:27%;

    }


    .dmxCvBrandFloatingMessage{

        bottom:11%;

        min-width:180px;

    }


    .dmxCvBrandChannelsGrid{

        grid-template-columns:
            1fr;

    }


    .dmxCvBrandChannel{

        min-height:auto;

    }


    .dmxCvBrandChannel > p{

        min-height:auto;

    }


    .dmxCvBrandClosing{

        padding:
            38px 27px;

    }

}


/* ============================================================
   470 PX
============================================================ */

@media (max-width:470px){

    .dmxCvBrandVisual{

        min-height:550px;

    }


    .dmxCvBrandDocument{

        width:min(280px,76vw);

    }


    .dmxCvBrandDocumentToolbar{

        grid-template-columns:
            auto 1fr;

    }


    .dmxCvBrandDocumentToolbar > small{

        display:none;

    }


    .dmxCvBrandDocumentBody{

        min-height:430px;

        padding:
            21px 18px 24px;

    }


    .dmxCvBrandDocumentHeader{

        gap:12px;

    }


    .dmxCvBrandDocumentAvatar{

        width:46px;
        height:46px;

    }


    .dmxCvBrandDocumentHeader strong{

        font-size:15px;

    }


    .dmxCvBrandDocumentColumns{

        gap:14px;

    }


    .dmxCvBrandDocumentScore{

        min-width:205px;

    }


    .dmxCvBrandFloating{

        padding:
            11px 12px;

    }


    .dmxCvBrandFloatingAts{

        left:-2px;

    }


    .dmxCvBrandFloatingAts > span{

        width:34px;
        height:34px;

    }


    .dmxCvBrandFloatingMessage{

        right:-2px;

        min-width:150px;

    }


    .dmxCvBrandFloatingMessage small{

        display:none;

    }

}


/* ============================================================
   ACCESIBILIDAD
============================================================ */

@media (prefers-reduced-motion:reduce){

    .dmxCvBrand *,
    .dmxCvBrand *::before,
    .dmxCvBrand *::after{

        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }


    .dmxCvBrandDocument,
    .dmxCvBrandFloating{

        opacity:1;

        transform:none;

    }

}