/* =========================================================
   IDENTIDAD DIGITAL
========================================================= */

.dmxIdentity{
    position:relative;

    padding:130px 0;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6f9fd 52%,
            #ffffff 100%
        );

    isolation:isolate;
}


/*==========================================================
BACKGROUND
==========================================================*/

.dmxIdentityBackground{
    position:absolute;
    inset:0;

    z-index:-2;

    overflow:hidden;

    pointer-events:none;
}


.dmxIdentityGrid{
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(39,55,88,.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(39,55,88,.045) 1px,
            transparent 1px
        );

    background-size:58px 58px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9),
            transparent 92%
        );
}


.dmxIdentityGlow{
    position:absolute;

    border-radius:50%;

    filter:blur(28px);
}


.dmxIdentityGlowOne{

    top:-180px;
    right:-180px;

    width:560px;
    height:560px;

    background:
        radial-gradient(
            circle,
            rgba(49,93,232,.15),
            transparent 72%
        );
}


.dmxIdentityGlowTwo{

    bottom:-240px;
    left:-220px;

    width:620px;
    height:620px;

    background:
        radial-gradient(
            circle,
            rgba(35,191,138,.14),
            transparent 72%
        );
}


/*==========================================================
LAYOUT
==========================================================*/

.dmxIdentityLayout{

    display:grid;

    grid-template-columns:
        minmax(0,.85fr)
        minmax(560px,1.15fr);

    align-items:center;

    gap:clamp(70px,8vw,120px);

}


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

.dmxIdentityContent{
    position:relative;

    z-index:3;
}


.dmxIdentityEyebrow{

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

    margin-bottom:24px;

}


.dmxIdentityEyebrow span{

    width:40px;
    height:2px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #315de8,
            #27c18e
        );

}


.dmxIdentityEyebrow small{

    color:#315de8;

    font-size:.72rem;
    font-weight:800;

    letter-spacing:.15em;

    text-transform:uppercase;

}


.dmxIdentityContent h2{

    margin:0;

    color:#16243a;

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

    font-weight:760;

    line-height:.98;

    letter-spacing:-.06em;

    text-wrap:balance;

}


.dmxIdentityContent h2 span{

    display:block;

    color:transparent;

    background:
        linear-gradient(
            120deg,
            #315de8,
            #45cfa3
        );

    background-clip:text;
    -webkit-background-clip:text;

}


.dmxIdentityDescription{

    max-width:560px;

    margin:30px 0 0;

    color:#667286;

    font-size:1.03rem;

    line-height:1.85;

}


/*==========================================================
PRINCIPIOS
==========================================================*/

.dmxIdentityPrinciples{

    display:grid;

    gap:18px;

    margin-top:42px;

}


.dmxIdentityPrinciple{

    display:grid;

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

    gap:18px;

    padding:18px 20px;

    border:1px solid rgba(26,42,71,.08);

    border-radius:18px;

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

    backdrop-filter:blur(14px);

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

}


.dmxIdentityPrinciple:hover{

    transform:translateY(-4px);

    border-color:
        rgba(
            49,
            93,
            232,
            .16
        );

    box-shadow:
        0 18px 36px
        rgba(
            22,
            41,
            70,
            .08
        );

}


.dmxIdentityPrinciple>span{

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

    width:46px;
    height:46px;

    flex:0 0 46px;

    border-radius:14px;

    color:#315de8;

    background:
        rgba(
            49,
            93,
            232,
            .08
        );

    font-size:.72rem;
    font-weight:800;

}


.dmxIdentityPrinciple h3{

    margin:0;

    color:#17243a;

    font-size:1rem;
    font-weight:800;

}


.dmxIdentityPrinciple p{

    margin:8px 0 0;

    color:#687488;

    font-size:.9rem;

    line-height:1.65;

}


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

.dmxIdentityButton{

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

    min-height:58px;

    margin-top:42px;

    padding:0 28px;

    border-radius:18px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #315de8,
            #4678f5
        );

    box-shadow:
        0 20px 38px
        rgba(
            49,
            93,
            232,
            .22
        );

    font-size:.92rem;
    font-weight:800;

    text-decoration:none;

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

}


.dmxIdentityButton:hover,
.dmxIdentityButton:focus-visible{

    transform:translateY(-4px);

    box-shadow:
        0 28px 48px
        rgba(
            49,
            93,
            232,
            .3
        );

}


.dmxIdentityButton span{

    font-size:1.1rem;

    transition:transform .3s ease;

}


.dmxIdentityButton:hover span{

    transform:translateX(5px);

}


.dmxIdentityButton:focus-visible{

    outline:3px solid rgba(49,93,232,.22);

    outline-offset:4px;

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

.dmxIdentityVisual{
    position:relative;

    width:100%;
    max-width:760px;

    margin-left:auto;
}


.dmxIdentitySystem{

    position:relative;

    padding:28px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.8);
    border-radius:30px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(245,248,253,.92)
        );

    box-shadow:
        0 40px 90px rgba(23,41,71,.12),
        inset 0 1px 0 rgba(255,255,255,.9);

    backdrop-filter:blur(24px);

}


.dmxIdentitySystem::before{

    content:"";

    position:absolute;

    top:-170px;
    right:-130px;

    width:360px;
    height:360px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(49,93,232,.12),
            transparent 72%
        );

}


/*==========================================================
HEADER
==========================================================*/

.dmxIdentitySystemHeader{

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

    gap:20px;

    margin-bottom:35px;

}


.dmxIdentitySystemHeader small{

    display:block;

    color:#7b8798;

    font-size:.63rem;
    font-weight:800;

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

}


.dmxIdentitySystemHeader strong{

    display:block;

    margin-top:6px;

    color:#18263d;

    font-size:1rem;
    font-weight:800;

}


.dmxIdentitySystemStatus{

    display:inline-flex;
    align-items:center;
    gap:9px;

    color:#198a66;

    font-size:.7rem;
    font-weight:800;

}


.dmxIdentitySystemStatus i{

    width:9px;
    height:9px;

    border-radius:50%;

    background:#27c18e;

    box-shadow:
        0 0 0 5px
        rgba(39,193,142,.12);

}


/*==========================================================
CANVAS
==========================================================*/

.dmxIdentitySystemCanvas{

    position:relative;

    height:480px;

}


/*==========================================================
CONEXIONES
==========================================================*/

.dmxIdentityConnections{

    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    overflow:visible;

}


.dmxIdentityConnections path{

    fill:none;

    stroke:#bfd2ff;

    stroke-width:3;

    stroke-linecap:round;

    stroke-linejoin:round;

    stroke-dasharray:1;
    stroke-dashoffset:1;

}


/*==========================================================
NUCLEO
==========================================================*/

.dmxIdentityCore{

    position:absolute;

    top:50%;
    left:50%;

    width:185px;
    height:185px;

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

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

    border-radius:50%;

    background:
        linear-gradient(
            145deg,
            #315de8,
            #4778f3
        );

    color:#ffffff;

    box-shadow:
        0 35px 60px
        rgba(
            49,
            93,
            232,
            .28
        );

}


.dmxIdentityCoreMark{

    position:relative;

    width:58px;
    height:58px;

    margin-bottom:14px;

}


.dmxIdentityCoreMark span{

    position:absolute;

    border-radius:16px;

}


.dmxIdentityCoreMark span:nth-child(1){

    inset:0;

    border:2px solid rgba(255,255,255,.45);

    transform:rotate(15deg);

}


.dmxIdentityCoreMark span:nth-child(2){

    top:11px;
    right:11px;
    bottom:11px;
    left:11px;

    background:#ffffff;

    transform:rotate(-12deg);

}


.dmxIdentityCoreMark span:nth-child(3){

    top:21px;
    right:21px;
    bottom:21px;
    left:21px;

    border-radius:50%;

    background:#315de8;

}


.dmxIdentityCore small{

    font-size:.7rem;

    font-weight:700;

    opacity:.82;

}


.dmxIdentityCore strong{

    margin-top:5px;

    font-size:1rem;
    font-weight:800;

}


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

.dmxIdentityElement{

    position:absolute;

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

    width:210px;

    padding:16px;

    border:1px solid rgba(27,43,71,.08);
    border-radius:18px;

    background:#ffffff;

    box-shadow:
        0 15px 30px
        rgba(
            25,
            43,
            71,
            .06
        );

}


.dmxIdentityElementIcon{

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

    width:52px;
    height:52px;

    flex:0 0 52px;

    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            #edf2ff,
            #e8fbf4
        );

    color:#315de8;

    font-size:1rem;
    font-weight:800;

}


.dmxIdentityElement small{

    display:block;

    color:#8a96a8;

    font-size:.6rem;
    font-weight:700;

    text-transform:uppercase;

}


.dmxIdentityElement strong{

    display:block;

    margin-top:5px;

    color:#16243a;

    font-size:.84rem;
    font-weight:800;

}


/*==========================================================
POSICIONES
==========================================================*/

.dmxIdentityElementVisual{

    top:0;
    left:0;

}


.dmxIdentityElementVoice{

    top:0;
    right:0;

}


.dmxIdentityElementSocial{

    bottom:0;
    left:0;

}


.dmxIdentityElementCampaign{

    bottom:0;
    right:0;

}


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

.dmxIdentityElementVoice .dmxIdentityElementIcon{

    gap:4px;

}


.dmxIdentityElementVoice i{

    display:block;

    width:4px;
    height:20px;

    border-radius:99px;

    background:#315de8;

}


.dmxIdentityElementSocial .dmxIdentityElementIcon i{

    display:block;

    width:22px;
    height:22px;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #6c50de,
            #315de8
        );

}


.dmxIdentityElementCampaign .dmxIdentityElementIcon{

    align-items:flex-end;

    gap:3px;

}


.dmxIdentityElementCampaign i{

    display:block;

    width:6px;

    border-radius:99px 99px 2px 2px;

    background:#26c08d;

}


.dmxIdentityElementCampaign i:nth-child(1){
    height:12px;
}

.dmxIdentityElementCampaign i:nth-child(2){
    height:18px;
}

.dmxIdentityElementCampaign i:nth-child(3){
    height:26px;
}


/*==========================================================
FOOTER
==========================================================*/

.dmxIdentitySystemFooter{

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

    margin-top:38px;

}


.dmxIdentitySystemFooter span,
.dmxIdentitySystemFooter strong{

    font-size:.72rem;
    font-weight:700;

}


.dmxIdentitySystemFooter span{

    color:#738094;

}


.dmxIdentitySystemFooter strong{

    color:#27b985;

}


.dmxIdentitySystemFooter i{

    width:24px;
    height:1px;

    background:#d9e2ef;

}


/*==========================================================
RESULTADO
==========================================================*/

.dmxIdentityResult{

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

    margin-top:24px;
    margin-left:auto;

    max-width:330px;

    padding:18px 20px;

    border-radius:18px;

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

    border:1px solid rgba(39,193,142,.16);

    box-shadow:
        0 18px 36px
        rgba(
            24,
            60,
            44,
            .08
        );

}


.dmxIdentityResult>span{

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

    width:42px;
    height:42px;

    flex:0 0 42px;

    border-radius:12px;

    color:#ffffff;

    background:
        linear-gradient(
            135deg,
            #24bf8a,
            #45d3a7
        );

    font-weight:800;

}


.dmxIdentityResult p{

    margin:0;

    color:#687488;

    font-size:.84rem;

    line-height:1.6;

}


.dmxIdentityResult strong{

    display:block;

    color:#17243a;

    font-size:.92rem;

    font-weight:800;

    margin-top:4px;

}
/* =========================================================
   ESTADOS INICIALES
========================================================= */

.dmxIdentityContent,
.dmxIdentityVisual {
    opacity: 0;

    transform: translateY(30px);
}


.dmxIdentity.is-active .dmxIdentityContent {
    animation:
        dmxIdentityContentReveal
        0.85s
        ease
        forwards;
}


.dmxIdentity.is-active .dmxIdentityVisual {
    animation:
        dmxIdentityVisualReveal
        0.95s
        ease
        0.15s
        forwards;
}


/* =========================================================
   ANIMACIÓN DE CONEXIONES
========================================================= */

.dmxIdentity.is-active
.dmxIdentityConnections path {
    animation:
        dmxIdentityPathDraw
        1.3s
        cubic-bezier(0.22, 1, 0.36, 1)
        forwards;
}


.dmxIdentity.is-active
.dmxIdentityConnections path:nth-child(1) {
    animation-delay: 0.55s;
}


.dmxIdentity.is-active
.dmxIdentityConnections path:nth-child(2) {
    animation-delay: 0.7s;
}


.dmxIdentity.is-active
.dmxIdentityConnections path:nth-child(3) {
    animation-delay: 0.85s;
}


.dmxIdentity.is-active
.dmxIdentityConnections path:nth-child(4) {
    animation-delay: 1s;
}


/* =========================================================
   ANIMACIÓN DEL NÚCLEO
========================================================= */

.dmxIdentityCore {
    opacity: 0;

    transform:
        translate(-50%, -50%)
        scale(0.72);
}


.dmxIdentity.is-active
.dmxIdentityCore {
    animation:
        dmxIdentityCoreReveal
        0.8s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.35s
        forwards;
}


.dmxIdentityCore::after {
    content: "";

    position: absolute;
    inset: -14px;

    border: 1px solid rgba(49, 93, 232, 0.22);
    border-radius: 50%;

    opacity: 0;

    animation:
        dmxIdentityCorePulse
        2.8s
        ease-out
        1.4s
        infinite;
}


/* =========================================================
   ANIMACIÓN DE ELEMENTOS
========================================================= */

.dmxIdentityElement {
    opacity: 0;

    transform: translateY(18px) scale(0.96);
}


.dmxIdentity.is-active
.dmxIdentityElementVisual {
    animation:
        dmxIdentityElementReveal
        0.65s
        ease
        0.75s
        forwards;
}


.dmxIdentity.is-active
.dmxIdentityElementVoice {
    animation:
        dmxIdentityElementReveal
        0.65s
        ease
        0.9s
        forwards;
}


.dmxIdentity.is-active
.dmxIdentityElementSocial {
    animation:
        dmxIdentityElementReveal
        0.65s
        ease
        1.05s
        forwards;
}


.dmxIdentity.is-active
.dmxIdentityElementCampaign {
    animation:
        dmxIdentityElementReveal
        0.65s
        ease
        1.2s
        forwards;
}


/* =========================================================
   MICROANIMACIONES
========================================================= */

.dmxIdentitySystemStatus i::after {
    content: "";

    position: absolute;
    inset: -5px;

    border: 1px solid rgba(39, 193, 142, 0.4);
    border-radius: 50%;

    animation:
        dmxIdentityStatusPulse
        2s
        ease-out
        infinite;
}


.dmxIdentitySystemStatus i {
    position: relative;
}


.dmxIdentityElementVisual
.dmxIdentityElementIcon {
    animation:
        dmxIdentityIconFloat
        3.8s
        ease-in-out
        infinite;
}


.dmxIdentityElementVoice
.dmxIdentityElementIcon {
    animation:
        dmxIdentityIconFloat
        4.2s
        ease-in-out
        0.4s
        infinite;
}


.dmxIdentityElementSocial
.dmxIdentityElementIcon {
    animation:
        dmxIdentityIconFloat
        3.6s
        ease-in-out
        0.8s
        infinite;
}


.dmxIdentityElementCampaign
.dmxIdentityElementIcon {
    animation:
        dmxIdentityIconFloat
        4s
        ease-in-out
        1.1s
        infinite;
}


.dmxIdentityElementVoice i {
    transform-origin: center bottom;

    animation:
        dmxIdentityVoiceBars
        1.6s
        ease-in-out
        infinite;
}


.dmxIdentityElementVoice i:nth-child(2) {
    animation-delay: 0.16s;
}


.dmxIdentityElementVoice i:nth-child(3) {
    animation-delay: 0.32s;
}


.dmxIdentityElementCampaign i {
    transform-origin: bottom;

    animation:
        dmxIdentityCampaignBars
        1.8s
        ease-in-out
        infinite
        alternate;
}


.dmxIdentityElementCampaign i:nth-child(2) {
    animation-delay: 0.2s;
}


.dmxIdentityElementCampaign i:nth-child(3) {
    animation-delay: 0.4s;
}


.dmxIdentityResult {
    opacity: 0;

    transform: translateY(18px);
}


.dmxIdentity.is-active
.dmxIdentityResult {
    animation:
        dmxIdentityResultReveal
        0.7s
        ease
        1.45s
        forwards;
}


/* =========================================================
   HOVER
========================================================= */

.dmxIdentityElement {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.dmxIdentityElement:hover {
    border-color: rgba(49, 93, 232, 0.16);

    transform: translateY(-5px);

    box-shadow:
        0 22px 40px
        rgba(
            25,
            43,
            71,
            0.1
        );
}


.dmxIdentitySystem {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


.dmxIdentitySystem:hover {
    transform: translateY(-5px);

    box-shadow:
        0 48px 100px rgba(23, 41, 71, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.92);
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes dmxIdentityContentReveal {

    from {
        opacity: 0;

        transform: translateY(30px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


@keyframes dmxIdentityVisualReveal {

    from {
        opacity: 0;

        transform:
            translateY(34px)
            scale(0.97);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes dmxIdentityPathDraw {

    from {
        stroke-dashoffset: 1;
    }

    to {
        stroke-dashoffset: 0;
    }

}


@keyframes dmxIdentityCoreReveal {

    from {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.72);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }

}


@keyframes dmxIdentityCorePulse {

    0% {
        opacity: 0.55;

        transform: scale(0.88);
    }

    100% {
        opacity: 0;

        transform: scale(1.22);
    }

}


@keyframes dmxIdentityElementReveal {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes dmxIdentityStatusPulse {

    0% {
        opacity: 0.8;

        transform: scale(0.7);
    }

    100% {
        opacity: 0;

        transform: scale(1.5);
    }

}


@keyframes dmxIdentityIconFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

}


@keyframes dmxIdentityVoiceBars {

    0%,
    100% {
        transform: scaleY(0.55);
    }

    50% {
        transform: scaleY(1);
    }

}


@keyframes dmxIdentityCampaignBars {

    from {
        transform: scaleY(0.82);
    }

    to {
        transform: scaleY(1.08);
    }

}


@keyframes dmxIdentityResultReveal {

    from {
        opacity: 0;

        transform: translateY(18px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }

}


/* =========================================================
   RESPONSIVE — LAPTOP
========================================================= */

@media (max-width: 1220px) {

    .dmxIdentity {
        padding: 115px 0;
    }


    .dmxIdentityLayout {
        grid-template-columns:
            minmax(0, 0.9fr)
            minmax(520px, 1.1fr);

        gap: 60px;
    }


    .dmxIdentitySystemCanvas {
        height: 450px;
    }


    .dmxIdentityElement {
        width: 195px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET HORIZONTAL
========================================================= */

@media (max-width: 1050px) {

    .dmxIdentity {
        padding: 100px 0;
    }


    .dmxIdentityLayout {
        grid-template-columns: 1fr;

        gap: 70px;
    }


    .dmxIdentityContent {
        max-width: 760px;
    }


    .dmxIdentityVisual {
        max-width: 760px;

        margin: 0 auto;
    }


    .dmxIdentityDescription {
        max-width: 650px;
    }


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

        gap: 14px;
    }


    .dmxIdentityPrinciple {
        grid-template-columns: 1fr;

        gap: 14px;
    }

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 780px) {

    .dmxIdentity {
        padding: 86px 0;
    }


    .dmxIdentityContent h2 {
        font-size:
            clamp(
                2.75rem,
                10vw,
                4.5rem
            );
    }


    .dmxIdentityPrinciples {
        grid-template-columns: 1fr;
    }


    .dmxIdentitySystem {
        padding: 22px;

        border-radius: 25px;
    }


    .dmxIdentitySystemCanvas {
        height: 620px;
    }


    .dmxIdentityCore {
        width: 165px;
        height: 165px;
    }


    .dmxIdentityConnections {
        display: none;
    }


    .dmxIdentityElement {
        width: calc(50% - 10px);
    }


    .dmxIdentityElementVisual {
        top: 0;
        left: 0;
    }


    .dmxIdentityElementVoice {
        top: 0;
        right: 0;
    }


    .dmxIdentityElementSocial {
        right: auto;
        bottom: 0;
        left: 0;
    }


    .dmxIdentityElementCampaign {
        right: 0;
        bottom: 0;
    }


    .dmxIdentitySystemFooter {
        flex-wrap: wrap;
    }

}


/* =========================================================
   RESPONSIVE — MÓVIL
========================================================= */

@media (max-width: 560px) {

    .dmxIdentity {
        padding: 72px 0;
    }


    .dmxIdentityGrid {
        background-size: 42px 42px;
    }


    .dmxIdentityEyebrow {
        margin-bottom: 20px;
    }


    .dmxIdentityEyebrow span {
        width: 30px;
    }


    .dmxIdentityEyebrow small {
        font-size: 0.64rem;

        letter-spacing: 0.11em;
    }


    .dmxIdentityContent h2 {
        font-size:
            clamp(
                2.45rem,
                13vw,
                3.5rem
            );

        line-height: 1;
    }


    .dmxIdentityDescription {
        margin-top: 24px;

        font-size: 0.95rem;

        line-height: 1.72;
    }


    .dmxIdentityPrinciples {
        margin-top: 32px;
    }


    .dmxIdentityPrinciple {
        padding: 16px;
    }


    .dmxIdentityPrinciple > span {
        width: 42px;
        height: 42px;

        flex-basis: 42px;
    }


    .dmxIdentityButton {
        width: 100%;

        justify-content: center;

        margin-top: 34px;
    }


    .dmxIdentitySystem {
        padding: 16px;

        border-radius: 22px;
    }


    .dmxIdentitySystemHeader {
        align-items: flex-start;

        margin-bottom: 22px;
    }


    .dmxIdentitySystemHeader strong {
        font-size: 0.9rem;
    }


    .dmxIdentitySystemStatus {
        font-size: 0.62rem;
    }


    .dmxIdentitySystemCanvas {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;

        height: auto;
    }


    .dmxIdentityCore,
    .dmxIdentityElement {
        position: relative;
        inset: auto;

        width: 100%;
    }


    .dmxIdentityCore {
        top: auto;
        left: auto;

        height: auto;
        min-height: 185px;

        border-radius: 24px;

        transform: none;
    }


    .dmxIdentity.is-active
    .dmxIdentityCore {
        animation:
            dmxIdentityCoreRevealMobile
            0.8s
            cubic-bezier(0.22, 1, 0.36, 1)
            0.35s
            forwards;
    }


    .dmxIdentityElement {
        min-height: 84px;
    }


    .dmxIdentitySystemFooter {
        justify-content: flex-start;

        margin-top: 22px;
    }


    .dmxIdentitySystemFooter i {
        width: 16px;
    }


    .dmxIdentityResult {
        max-width: none;

        margin-top: 18px;
    }

}


/* =========================================================
   RESPONSIVE — MÓVIL PEQUEÑO
========================================================= */

@media (max-width: 390px) {

    .dmxIdentityContent h2 {
        font-size: 2.35rem;
    }


    .dmxIdentitySystemHeader {
        flex-direction: column;
    }


    .dmxIdentitySystemFooter {
        gap: 8px;
    }


    .dmxIdentitySystemFooter span,
    .dmxIdentitySystemFooter strong {
        font-size: 0.64rem;
    }


    .dmxIdentityResult {
        padding: 16px;
    }

}


/* =========================================================
   KEYFRAME MÓVIL
========================================================= */

@keyframes dmxIdentityCoreRevealMobile {

    from {
        opacity: 0;

        transform:
            translateY(15px)
            scale(0.96);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================================
   MOVIMIENTO REDUCIDO
========================================================= */

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

    .dmxIdentity *,
    .dmxIdentity *::before,
    .dmxIdentity *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        transition-duration: 0.01ms !important;
    }


    .dmxIdentityContent,
    .dmxIdentityVisual,
    .dmxIdentityCore,
    .dmxIdentityElement,
    .dmxIdentityResult {
        opacity: 1;

        transform: none;
    }


    .dmxIdentityCore {
        transform:
            translate(-50%, -50%);
    }


    .dmxIdentityConnections path {
        stroke-dashoffset: 0;
    }

}


@media (
    prefers-reduced-motion: reduce
) and (
    max-width: 560px
) {

    .dmxIdentityCore {
        transform: none;
    }

}
/* =========================================================
   IDENTIDAD DIGITAL — VARIANTE OSCURA
   Agregar al final del CSS actual
========================================================= */

.dmxIdentity {
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(67, 104, 232, 0.18),
            transparent 30%
        ),
        radial-gradient(
            circle at 12% 84%,
            rgba(35, 191, 138, 0.12),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #09111f 0%,
            #0d1829 46%,
            #111f34 100%
        );
}


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

.dmxIdentityGrid {
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.045) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.045) 1px,
            transparent 1px
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.9),
            transparent 95%
        );
}


.dmxIdentityGlowOne {
    background:
        radial-gradient(
            circle,
            rgba(64, 101, 238, 0.24),
            transparent 72%
        );
}


.dmxIdentityGlowTwo {
    background:
        radial-gradient(
            circle,
            rgba(35, 191, 138, 0.18),
            transparent 72%
        );
}


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

.dmxIdentityEyebrow small {
    color: #82a1ff;
}


.dmxIdentityContent h2 {
    color: #f4f7ff;
}


.dmxIdentityContent h2 span {
    background:
        linear-gradient(
            115deg,
            #86a3ff 0%,
            #5f85f3 40%,
            #4dd4a7 100%
        );

    background-clip: text;
    -webkit-background-clip: text;
}


.dmxIdentityDescription {
    color: rgba(224, 232, 245, 0.7);
}


/* =========================================================
   PRINCIPIOS
========================================================= */

.dmxIdentityPrinciple {
    border-color: rgba(255, 255, 255, 0.08);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.075),
            rgba(255, 255, 255, 0.035)
        );

    box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.12);

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


.dmxIdentityPrinciple:hover {
    border-color: rgba(111, 145, 255, 0.28);

    box-shadow:
        0 22px 46px rgba(0, 0, 0, 0.2),
        0 0 35px rgba(49, 93, 232, 0.08);
}


.dmxIdentityPrinciple > span {
    color: #92acff;

    border: 1px solid rgba(109, 143, 255, 0.13);

    background:
        linear-gradient(
            145deg,
            rgba(78, 113, 230, 0.22),
            rgba(43, 75, 177, 0.12)
        );
}


.dmxIdentityPrinciple h3 {
    color: #f2f5fb;
}


.dmxIdentityPrinciple p {
    color: rgba(220, 229, 241, 0.62);
}


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

.dmxIdentityButton {
    border: 1px solid rgba(129, 157, 255, 0.28);

    background:
        linear-gradient(
            135deg,
            #406ce8,
            #537ff1
        );

    box-shadow:
        0 20px 42px rgba(30, 72, 190, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.17);
}


.dmxIdentityButton:hover,
.dmxIdentityButton:focus-visible {
    box-shadow:
        0 28px 55px rgba(38, 79, 198, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.19);
}


/* =========================================================
   PANEL PRINCIPAL
========================================================= */

.dmxIdentitySystem {
    border-color: rgba(255, 255, 255, 0.1);

    background:
        linear-gradient(
            145deg,
            rgba(20, 35, 58, 0.95),
            rgba(13, 25, 43, 0.96)
        );

    box-shadow:
        0 45px 100px rgba(0, 0, 0, 0.28),
        0 18px 45px rgba(0, 0, 0, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
}


.dmxIdentitySystem::before {
    background:
        radial-gradient(
            circle,
            rgba(75, 112, 235, 0.2),
            transparent 72%
        );
}


.dmxIdentitySystem::after {
    background:
        radial-gradient(
            280px circle at
            var(--dmx-identity-pointer-x, 50%)
            var(--dmx-identity-pointer-y, 50%),
            rgba(101, 137, 255, 0.11),
            transparent 70%
        );
}


.dmxIdentitySystem:hover {
    box-shadow:
        0 55px 115px rgba(0, 0, 0, 0.34),
        0 20px 48px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* =========================================================
   HEADER DEL PANEL
========================================================= */

.dmxIdentitySystemHeader small {
    color: rgba(198, 210, 229, 0.48);
}


.dmxIdentitySystemHeader strong {
    color: #f3f6fc;
}


.dmxIdentitySystemStatus {
    color: #52d6aa;
}


/* =========================================================
   CONEXIONES
========================================================= */

.dmxIdentityConnections path {
    stroke: rgba(116, 151, 255, 0.46);
}


/* =========================================================
   NÚCLEO
========================================================= */

.dmxIdentityCore {
    background:
        linear-gradient(
            145deg,
            #426fe8,
            #3259c9
        );

    box-shadow:
        0 35px 70px rgba(25, 68, 188, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.17);
}


.dmxIdentityCore::after {
    border-color: rgba(111, 145, 255, 0.32);
}


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

.dmxIdentityElement {
    border-color: rgba(255, 255, 255, 0.085);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.085),
            rgba(255, 255, 255, 0.04)
        );

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

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


.dmxIdentityElement:hover {
    border-color: rgba(109, 143, 255, 0.27);

    box-shadow:
        0 24px 48px rgba(0, 0, 0, 0.24),
        0 0 28px rgba(61, 98, 220, 0.07);
}


.dmxIdentityElementIcon {
    color: #8da8ff;

    border: 1px solid rgba(110, 143, 255, 0.12);

    background:
        linear-gradient(
            135deg,
            rgba(71, 108, 224, 0.2),
            rgba(35, 191, 138, 0.12)
        );
}


.dmxIdentityElement small {
    color: rgba(194, 207, 226, 0.46);
}


.dmxIdentityElement strong {
    color: #edf2fb;
}


.dmxIdentityElementVoice i {
    background: #82a1ff;
}


.dmxIdentityElementSocial
.dmxIdentityElementIcon i {
    background:
        linear-gradient(
            135deg,
            #8d72ea,
            #547ff1
        );
}


.dmxIdentityElementCampaign i {
    background: #45cea1;
}


/* =========================================================
   FOOTER DEL SISTEMA
========================================================= */

.dmxIdentitySystemFooter span {
    color: rgba(203, 214, 231, 0.5);
}


.dmxIdentitySystemFooter strong {
    color: #4bd2a5;
}


.dmxIdentitySystemFooter i {
    background: rgba(255, 255, 255, 0.12);
}


/* =========================================================
   RESULTADO
========================================================= */

.dmxIdentityResult {
    border-color: rgba(66, 205, 160, 0.2);

    background:
        linear-gradient(
            135deg,
            rgba(32, 83, 70, 0.56),
            rgba(17, 35, 48, 0.93)
        );

    box-shadow:
        0 20px 42px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);

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


.dmxIdentityResult > span {
    box-shadow:
        0 10px 24px rgba(31, 180, 132, 0.24);
}


.dmxIdentityResult p {
    color: rgba(218, 229, 239, 0.65);
}


.dmxIdentityResult strong {
    color: #f0f5fa;
}


/* =========================================================
   TRANSICIONES SUPERIOR E INFERIOR
========================================================= */

.dmxIdentity::before,
.dmxIdentity::after {
    content: "";

    position: absolute;
    right: 0;
    left: 0;
    z-index: 2;

    height: 1px;

    pointer-events: none;
}


.dmxIdentity::before {
    top: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(110, 143, 255, 0.28),
            transparent
        );
}


.dmxIdentity::after {
    bottom: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(71, 205, 163, 0.22),
            transparent
        );
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 780px) {

    .dmxIdentitySystem {
        background:
            linear-gradient(
                155deg,
                rgba(20, 35, 58, 0.98),
                rgba(12, 24, 41, 0.98)
            );
    }

}


@media (max-width: 560px) {

    .dmxIdentity {
        background:
            radial-gradient(
                circle at 90% 10%,
                rgba(67, 104, 232, 0.18),
                transparent 26%
            ),
            radial-gradient(
                circle at 5% 92%,
                rgba(35, 191, 138, 0.12),
                transparent 28%
            ),
            linear-gradient(
                155deg,
                #09111f 0%,
                #0d192b 100%
            );
    }


    .dmxIdentityPrinciple {
        background:
            linear-gradient(
                145deg,
                rgba(255, 255, 255, 0.07),
                rgba(255, 255, 255, 0.035)
            );
    }


    .dmxIdentityCore {
        background:
            linear-gradient(
                145deg,
                #426fe8,
                #3157c5
            );
    }

}