/* ============================================================
   Digitalizando MX
   Header Premium
============================================================ */


/* ============================================================
   Header general
============================================================ */

.dmxSiteHeader {
    position: fixed;
    inset: 0 0 auto;

    z-index: 1000;

    transition:
        transform 0.3s ease,
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* ============================================================
   Barra superior
============================================================ */
.dmxTopBar {
    position: relative;

    height: 30px;

    color: rgba(255, 255, 255, 0.82);

    background:
        linear-gradient(
            90deg,
            #061426,
            #092e59 55%,
            #074b77
        );

    overflow: visible;

    transition:
        height 0.3s ease,
        opacity 0.3s ease;
}
.dmxTopBar::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    overflow: hidden;
}

.dmxTopBarInner {
    position: relative;

    height: 100%;

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

    gap: 30px;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.055em;
}

.dmxTopAvailability,
.dmxTopMeta {
    display: flex;
    align-items: center;

    gap: 10px;
}

.dmxAvailabilityPulse {
    position: relative;

    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--dmx-lime);
}

.dmxAvailabilityPulse::after {
    content: "";

    position: absolute;
    inset: -4px;

    border: 1px solid rgba(198, 255, 47, 0.5);
    border-radius: inherit;

    animation: dmxAvailabilityPulse 2s ease-out infinite;
}

.dmxTopMeta {
    color: rgba(255, 255, 255, 0.65);
}

.dmxTopSeparator {
    width: 1px;
    height: 10px;

    background: rgba(255, 255, 255, 0.22);
}


/* ============================================================
   Contenedor principal
============================================================ */

.dmxHeaderMain {
    position: relative;

    background: rgba(255, 255, 255, 0.91);

    border-bottom: 1px solid rgba(218, 229, 238, 0.82);

    box-shadow:
        0 10px 35px rgba(8, 38, 77, 0.035);

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

    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease;
}

.dmxHeaderMain::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(6, 103, 241, 0.14),
            rgba(0, 217, 220, 0.28),
            rgba(6, 103, 241, 0.14),
            transparent
        );

    opacity: 0;

    transition: opacity 0.3s ease;
}

.dmxHeaderInner {
    min-height: 96px;

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

    gap: 38px;

    transition: min-height 0.3s ease;
}


/* ============================================================
   Header con scroll
============================================================ */

.dmxSiteHeader.scrolled .dmxTopBar {
    height: 0;
    opacity: 0;
}

.dmxSiteHeader.scrolled .dmxHeaderMain {
    background: rgba(255, 255, 255, 0.95);

    box-shadow:
        0 14px 42px rgba(8, 38, 77, 0.08);
}

.dmxSiteHeader.scrolled .dmxHeaderMain::after {
    opacity: 1;
}

.dmxSiteHeader.scrolled .dmxHeaderInner {
    min-height: 76px;
}

.dmxSiteHeader.scrolled .dmxHeaderLogo {
    width: 235px;
}


/* ============================================================
   Logo
============================================================ */

.dmxHeaderBrand {
    position: relative;

    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    isolation: isolate;

    transition: transform 0.25s ease;
}

.dmxHeaderBrand:hover {
    transform: translateY(-1px);
}

.dmxHeaderBrandGlow {
    position: absolute;

    inset: 18% 8%;

    z-index: -1;

    opacity: 0;

    border-radius: 50%;

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

    filter: blur(18px);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}

.dmxHeaderBrand:hover .dmxHeaderBrandGlow {
    opacity: 1;
    transform: scale(1.08);
}

.dmxHeaderLogo {
    display: block;

    width: 285px;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(0 8px 16px rgba(8, 38, 77, 0.08));

    transition:
        width 0.3s ease,
        filter 0.3s ease;
}

.dmxHeaderBrand:hover .dmxHeaderLogo {
    filter:
        drop-shadow(0 10px 22px rgba(6, 103, 241, 0.16));
}


/* ============================================================
   Navegación
============================================================ */

.dmxMainNav {
    display: flex;
    align-items: center;

    gap: 5px;
}

.dmxNavLink,
.dmxNavDropdownButton {
    position: relative;

    min-height: 46px;

    padding: 0 13px;

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

    gap: 7px;

    border: 0;
    border-radius: 13px;

    color: #22354b;
    background: transparent;

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

    white-space: nowrap;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}

.dmxNavLink::after,
.dmxNavDropdownButton::after {
    content: "";

    position: absolute;
    right: 13px;
    bottom: 4px;
    left: 13px;

    height: 2px;

    border-radius: 999px;

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

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.25s ease;
}

.dmxNavLink:hover,
.dmxNavDropdownButton:hover,
.dmxNavGroup.active .dmxNavDropdownButton {
    color: var(--dmx-blue);

    background: rgba(6, 103, 241, 0.055);
}

.dmxNavLink:hover::after,
.dmxNavDropdownButton:hover::after,
.dmxNavGroup.active .dmxNavDropdownButton::after {
    transform: scaleX(1);
}

.dmxNavArrow {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.25s ease;
}

.dmxNavGroup.active .dmxNavArrow,
.dmxNavGroup:hover .dmxNavArrow {
    transform: rotate(180deg);
}


/* ============================================================
   Is On Code
============================================================ */

.dmxNavPlatform {
    gap: 8px;
}

.dmxNavPlatform small {
    min-height: 21px;

    padding: 0 7px;

    display: inline-flex;
    align-items: center;

    gap: 5px;

    color: #315115;
    background: rgba(198, 255, 47, 0.53);

    border: 1px solid rgba(138, 184, 22, 0.18);
    border-radius: 999px;

    font-size: 7px;
    font-weight: 950;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.dmxNavPlatform small i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #5e9d11;

    box-shadow:
        0 0 0 3px rgba(94, 157, 17, 0.12);
}


/* ============================================================
   CTA principal
============================================================ */

.dmxHeaderCta {
    min-height: 50px;

    margin-left: 6px;
    padding: 0 9px 0 20px;

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

    gap: 14px;

    color: #ffffff;

    border-radius: 999px;

    background:
        linear-gradient(
            110deg,
            #07182d,
            #0a315d 58%,
            #075b96
        );

    box-shadow:
        0 14px 28px rgba(7, 24, 45, 0.15);

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

    white-space: nowrap;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.dmxHeaderCta:hover {
    transform: translateY(-2px);

    box-shadow:
        0 20px 38px rgba(7, 24, 45, 0.22);
}

.dmxHeaderCta b {
    width: 33px;
    height: 33px;

    display: grid;
    place-items: center;

    color: #073555;
    background: var(--dmx-cyan);

    border-radius: 50%;

    font-size: 13px;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}

.dmxHeaderCta:hover b {
    transform: rotate(45deg);
    background: var(--dmx-lime);
}


/* ============================================================
   Grupo del mega menú
============================================================ */

.dmxNavGroup {
    position: relative;
}


/* Puente invisible para mantener el hover */

.dmxNavGroup::after {
    content: "";

    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;
    height: 22px;

    pointer-events: none;
}

.dmxNavGroup.active::after {
    pointer-events: auto;
}


/* ============================================================
   Mega menú
============================================================ */

.dmxMegaMenu {
    position: absolute;
    top: calc(100% + 20px);
    left: 50%;

    width: min(1180px, calc(100vw - 40px));

    padding: 24px;

    color: var(--dmx-ink);
    background: rgba(255, 255, 255, 0.985);

    border: 1px solid rgba(204, 220, 232, 0.9);
    border-radius: 28px;

    box-shadow:
        0 42px 110px rgba(8, 38, 77, 0.18),
        0 12px 30px rgba(8, 38, 77, 0.07);

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

    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform:
        translateX(-50%)
        translateY(14px)
        scale(0.985);

    transform-origin: top center;

    transition:
        opacity 0.24s ease,
        visibility 0.24s ease,
        transform 0.24s ease;
}

.dmxNavGroup.active .dmxMegaMenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform:
        translateX(-50%)
        translateY(0)
        scale(1);
}


/* Flecha superior */

.dmxMegaMenu::before {
    content: "";

    position: absolute;
    top: -7px;
    left: 50%;

    width: 14px;
    height: 14px;

    background: #ffffff;

    border-top: 1px solid rgba(204, 220, 232, 0.9);
    border-left: 1px solid rgba(204, 220, 232, 0.9);

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* ============================================================
   Patrón decorativo
============================================================ */

.dmxMegaPattern {
    position: absolute;
    top: 18px;
    right: 18px;

    width: 120px;
    height: 120px;

    pointer-events: none;

    opacity: 0.055;
}

.dmxMegaPattern i {
    position: absolute;

    width: 18px;
    height: 18px;

    border-radius: 4px;

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

.dmxMegaPattern i:nth-child(1) {
    top: 0;
    right: 0;
}

.dmxMegaPattern i:nth-child(2) {
    top: 24px;
    right: 24px;
}

.dmxMegaPattern i:nth-child(3) {
    top: 48px;
    right: 0;
}

.dmxMegaPattern i:nth-child(4) {
    top: 48px;
    right: 48px;
}

.dmxMegaPattern i:nth-child(5) {
    top: 72px;
    right: 24px;
}

.dmxMegaPattern i:nth-child(6) {
    top: 72px;
    right: 72px;
}

.dmxMegaPattern i:nth-child(7) {
    top: 96px;
    right: 48px;
}

.dmxMegaPattern i:nth-child(8) {
    top: 24px;
    right: 72px;
}

.dmxMegaPattern i:nth-child(9) {
    top: 96px;
    right: 96px;
}


/* ============================================================
   Header del mega menú
============================================================ */

.dmxMegaHeader {
    position: relative;

    padding: 2px 4px 22px;

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

    gap: 35px;

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

.dmxMegaHeading {
    max-width: 690px;

    display: flex;
    flex-direction: column;

    gap: 7px;
}

.dmxMegaEyebrow {
    color: var(--dmx-blue);

    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.dmxMegaHeading strong {
    font-size: 18px;
    line-height: 1.35;
    letter-spacing: -0.015em;
}

.dmxMegaAllLink {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    color: var(--dmx-blue);

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

    white-space: nowrap;
}

.dmxMegaAllLink span {
    transition: transform 0.2s ease;
}

.dmxMegaAllLink:hover span {
    transform: translate(3px, -3px);
}


/* ============================================================
   Cuerpo del mega menú
============================================================ */

.dmxMegaBody {
    padding: 20px 0;

    display: grid;
    grid-template-columns: minmax(460px, 0.96fr) minmax(400px, 1.04fr);

    gap: 20px;
}


/* ============================================================
   Soluciones
============================================================ */

.dmxMegaSolutions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.dmxMegaSolution {
    position: relative;

    min-height: 118px;

    padding: 15px;

    display: grid;
    grid-template-columns: 42px 1fr 18px;

    align-items: start;

    gap: 12px;

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

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f9fbfd
        );

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease;
}

.dmxMegaSolution:hover,
.dmxMegaSolution.active {
    transform: translateY(-2px);

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

    background:
        linear-gradient(
            145deg,
            rgba(237, 248, 255, 0.95),
            #ffffff
        );

    box-shadow:
        0 14px 32px rgba(8, 38, 77, 0.075);
}

.dmxMegaSolutionIcon {
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    color: var(--dmx-blue);

    border-radius: 13px;

    background: rgba(6, 103, 241, 0.075);

    transition:
        color 0.22s ease,
        background-color 0.22s ease,
        transform 0.22s ease;
}

.dmxMegaSolution:hover .dmxMegaSolutionIcon,
.dmxMegaSolution.active .dmxMegaSolutionIcon {
    color: #ffffff;

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

    transform: translateY(-2px);
}

.dmxMegaSolutionIcon svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dmxMegaSolutionContent {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.dmxMegaSolutionContent small {
    color: var(--dmx-blue);

    font-size: 7px;
    font-weight: 950;
    letter-spacing: 0.13em;
}

.dmxMegaSolutionContent strong {
    margin-top: 3px;

    font-size: 13px;
    line-height: 1.3;
}

.dmxMegaSolutionContent > span {
    margin-top: 5px;

    color: var(--dmx-muted);

    font-size: 9px;
    line-height: 1.5;
}

.dmxMegaSolution > b {
    align-self: center;

    color: #9bafc1;

    font-size: 12px;

    transition:
        color 0.22s ease,
        transform 0.22s ease;
}

.dmxMegaSolution:hover > b,
.dmxMegaSolution.active > b {
    color: var(--dmx-blue);
    transform: translateX(3px);
}


/* ============================================================
   Preview
============================================================ */

.dmxMegaPreview {
    position: relative;

    min-height: 440px;

    border-radius: 22px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 86% 10%,
            rgba(0, 217, 220, 0.17),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            #07182f,
            #0b3972
        );
}

.dmxPreviewPanel {
    position: absolute;
    inset: 0;

    padding: 22px;

    display: grid;
    grid-template-rows: 1.05fr 0.95fr;

    gap: 18px;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition:
        opacity 0.24s ease,
        visibility 0.24s ease,
        transform 0.24s ease;
}

.dmxPreviewPanel.active {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* Visual general */

.dmxPreviewVisual {
    position: relative;

    min-height: 205px;

    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;

    background: rgba(255, 255, 255, 0.065);

    overflow: hidden;
}


/* Contenido */

.dmxPreviewContent {
    color: #ffffff;
}

.dmxPreviewLabel {
    color: #8ff5f1;

    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dmxPreviewContent h3 {
    max-width: 490px;

    margin: 8px 0 14px;

    font-size: 22px;
    line-height: 1.12;
    letter-spacing: -0.035em;
}

.dmxPreviewTags {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.dmxPreviewTags span {
    padding: 5px 8px;

    color: #bcd1e4;
    background: rgba(255, 255, 255, 0.075);

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;

    font-size: 8px;
    font-weight: 700;
}

.dmxPreviewContent > a {
    margin-top: 14px;

    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: #8ff5f1;

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

.dmxPreviewContent > a span {
    transition: transform 0.2s ease;
}

.dmxPreviewContent > a:hover span {
    transform: translate(3px, -3px);
}


/* ============================================================
   Preview: sitios web
============================================================ */

.dmxPreviewWeb {
    display: grid;
    place-items: center;
}

.dmxPreviewBrowser {
    width: 82%;

    padding: 8px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.94);

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.18);

    transform:
        perspective(700px)
        rotateY(-5deg)
        rotateX(3deg);
}

.dmxPreviewBrowserTop {
    padding: 2px 2px 8px;

    display: flex;

    gap: 4px;
}

.dmxPreviewBrowserTop span {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #bdd0de;
}

.dmxPreviewBrowserBody {
    padding: 10px;

    border-radius: 10px;

    background: #f2f7fb;
}

.dmxPreviewWebHero {
    height: 67px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #0b3567,
            var(--dmx-blue),
            var(--dmx-cyan)
        );
}

.dmxPreviewWebGrid {
    margin-top: 8px;

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

    gap: 6px;
}

.dmxPreviewWebGrid i {
    height: 38px;

    border-radius: 7px;

    background: #ffffff;

    box-shadow:
        0 4px 10px rgba(8, 38, 77, 0.06);
}


/* ============================================================
   Preview: aplicaciones
============================================================ */

.dmxPreviewApps {
    padding: 14px;

    display: grid;
    grid-template-columns: 48px 1fr;

    gap: 10px;
}

.dmxAppSidebar {
    padding: 10px;

    display: flex;
    flex-direction: column;

    gap: 9px;

    border-radius: 12px;

    background: rgba(0, 0, 0, 0.18);
}

.dmxAppSidebar span {
    width: 100%;
    aspect-ratio: 1;

    border-radius: 8px;

    background: rgba(255, 255, 255, 0.11);
}

.dmxAppSidebar span:first-child {
    background:
        linear-gradient(
            145deg,
            var(--dmx-cyan),
            var(--dmx-blue)
        );
}

.dmxAppDashboard {
    padding: 12px;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.08);
}

.dmxAppHeader {
    width: 45%;
    height: 12px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.25);
}

.dmxAppStats {
    margin-top: 13px;

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

    gap: 7px;
}

.dmxAppStats span {
    height: 42px;

    border-radius: 9px;

    background: rgba(255, 255, 255, 0.08);
}

.dmxAppChart {
    height: 75px;

    margin-top: 10px;

    padding: 10px;

    display: flex;
    align-items: flex-end;

    gap: 8px;

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);
}

.dmxAppChart i {
    flex: 1;

    border-radius: 4px 4px 1px 1px;

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

.dmxAppChart i:nth-child(1) {
    height: 30%;
}

.dmxAppChart i:nth-child(2) {
    height: 48%;
}

.dmxAppChart i:nth-child(3) {
    height: 40%;
}

.dmxAppChart i:nth-child(4) {
    height: 72%;
}

.dmxAppChart i:nth-child(5) {
    height: 90%;
}


/* ============================================================
   Preview: marca
============================================================ */

.dmxPreviewBrand {
    display: grid;
    place-items: center;
}

.dmxBrandSymbol {
    width: 110px;
    height: 110px;

    display: grid;
    place-items: center;

    color: #ffffff;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            var(--dmx-cyan),
            var(--dmx-blue) 62%,
            #1631a6
        );

    box-shadow:
        0 20px 42px rgba(0, 217, 220, 0.18);

    font-size: 25px;
    font-weight: 950;
    letter-spacing: -0.08em;
}

.dmxBrandPalette {
    position: absolute;
    right: 20px;
    bottom: 18px;

    display: flex;

    gap: 6px;
}

.dmxBrandPalette i {
    width: 25px;
    height: 25px;

    border-radius: 8px;
}

.dmxBrandPalette i:nth-child(1) {
    background: #07182f;
}

.dmxBrandPalette i:nth-child(2) {
    background: var(--dmx-blue);
}

.dmxBrandPalette i:nth-child(3) {
    background: var(--dmx-cyan);
}

.dmxBrandPalette i:nth-child(4) {
    background: var(--dmx-lime);
}

.dmxBrandDocument {
    position: absolute;
    top: 18px;
    left: 20px;

    width: 82px;

    padding: 12px;

    border-radius: 11px;

    background: rgba(255, 255, 255, 0.94);

    transform: rotate(-5deg);
}

.dmxBrandDocument span {
    display: block;

    height: 5px;

    margin-bottom: 6px;

    border-radius: 999px;

    background: #d8e5ef;
}

.dmxBrandDocument span:nth-child(2) {
    width: 75%;
}

.dmxBrandDocument span:nth-child(3) {
    width: 55%;
}


/* ============================================================
   Preview: marketing
============================================================ */

.dmxPreviewMarketing {
    padding: 24px;

    display: flex;
    align-items: flex-end;

    gap: 20px;
}

.dmxMarketingGraph {
    height: 145px;

    flex: 1;

    display: flex;
    align-items: flex-end;

    gap: 12px;
}

.dmxMarketingGraph i {
    flex: 1;

    border-radius: 7px 7px 2px 2px;

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

.dmxMarketingGraph i:nth-child(1) {
    height: 28%;
}

.dmxMarketingGraph i:nth-child(2) {
    height: 45%;
}

.dmxMarketingGraph i:nth-child(3) {
    height: 63%;
}

.dmxMarketingGraph i:nth-child(4) {
    height: 78%;
}

.dmxMarketingGraph i:nth-child(5) {
    height: 100%;
}

.dmxMarketingMetric {
    min-width: 110px;

    padding: 16px;

    border-radius: 14px;

    background: rgba(255, 255, 255, 0.1);
}

.dmxMarketingMetric small,
.dmxMarketingMetric strong {
    display: block;
}

.dmxMarketingMetric small {
    color: #9db7cf;

    font-size: 8px;
}

.dmxMarketingMetric strong {
    margin-top: 5px;

    color: #ffffff;

    font-size: 23px;
}


/* ============================================================
   Preview: automatización
============================================================ */

.dmxPreviewAutomation {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;
}

.dmxAutomationNode {
    width: 76px;
    height: 76px;

    display: grid;
    place-items: center;

    color: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;

    background: rgba(255, 255, 255, 0.09);

    font-size: 11px;
    font-weight: 900;
}

.dmxAutomationNode:nth-of-type(2) {
    color: #061426;

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

.dmxPreviewAutomation > span {
    color: var(--dmx-cyan);

    font-weight: 900;
}


/* ============================================================
   Preview: consultoría
============================================================ */

.dmxPreviewConsulting {
    display: grid;
    place-items: center;
}

.dmxConsultingOrbit {
    position: relative;

    width: 155px;
    height: 155px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
}

.dmxConsultingOrbit::before {
    content: "";

    position: absolute;
    inset: 25px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: inherit;
}

.dmxConsultingOrbit span {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    color: #ffffff;

    border-radius: 18px;

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

    font-size: 13px;
    font-weight: 950;
}

.dmxConsultingOrbit i {
    position: absolute;

    width: 17px;
    height: 17px;

    border-radius: 6px;

    background: var(--dmx-lime);
}

.dmxConsultingOrbit i:nth-child(2) {
    top: 9px;
    left: 50%;

    transform: translateX(-50%);
}

.dmxConsultingOrbit i:nth-child(3) {
    right: 14px;
    bottom: 30px;
}

.dmxConsultingOrbit i:nth-child(4) {
    bottom: 22px;
    left: 18px;
}


/* ============================================================
   Preview: hosting
============================================================ */

.dmxPreviewHosting {
    padding: 24px;

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

    gap: 26px;
}

.dmxServerRack {
    width: 180px;

    display: grid;

    gap: 8px;
}

.dmxServerRack span {
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.075);
}

.dmxServerRack span::before {
    content: "";

    display: block;

    width: 7px;
    height: 7px;

    margin: 17px 0 0 16px;

    border-radius: 50%;

    background: var(--dmx-lime);

    box-shadow:
        14px 0 0 rgba(0, 217, 220, 0.8);
}

.dmxHostingStatus {
    padding: 12px;

    display: flex;
    align-items: center;

    gap: 8px;

    color: #ffffff;

    border-radius: 12px;

    background: rgba(255, 255, 255, 0.09);

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

.dmxHostingStatus i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--dmx-lime);
}


/* ============================================================
   Footer del mega menú
============================================================ */

.dmxMegaFooter {
    padding: 18px 4px 2px;

    display: grid;
    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 26px;

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

.dmxMegaAvailability {
    display: flex;
    align-items: center;

    gap: 12px;
}

.dmxMegaAvailabilityDot {
    width: 10px;
    height: 10px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--dmx-lime);

    box-shadow:
        0 0 0 7px rgba(198, 255, 47, 0.17);
}

.dmxMegaAvailability small,
.dmxMegaAvailability strong {
    display: block;
}

.dmxMegaAvailability small {
    color: var(--dmx-muted);

    font-size: 8px;
}

.dmxMegaAvailability strong {
    font-size: 10px;
}

.dmxMegaAdvantages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 7px;
}

.dmxMegaAdvantages span {
    padding: 5px 8px;

    color: #52677d;
    background: var(--dmx-cloud);

    border-radius: 999px;

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

.dmxMegaContact {
    color: var(--dmx-muted);

    font-size: 9px;
    text-align: right;
}

.dmxMegaContact strong {
    margin-left: 5px;

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

.dmxMegaContact strong span {
    display: inline-block;

    transition: transform 0.2s ease;
}

.dmxMegaContact:hover strong span {
    transform: translateX(3px);
}


/* ============================================================
   Botón móvil
============================================================ */

.dmxMenuToggle {
    display: none;

    width: 46px;
    height: 46px;

    padding: 0;

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

    background: rgba(255, 255, 255, 0.9);

    cursor: pointer;
}

.dmxMenuToggle span {
    display: block;

    width: 20px;
    height: 2px;

    margin: 5px auto;

    border-radius: 999px;

    background: var(--dmx-ink);

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.dmxMenuToggle[aria-expanded="true"] span:first-child {
    transform: translateY(3.5px) rotate(45deg);
}

.dmxMenuToggle[aria-expanded="true"] span:last-child {
    transform: translateY(-3.5px) rotate(-45deg);
}


/* ============================================================
   Animaciones
============================================================ */

@keyframes dmxAvailabilityPulse {

    0% {
        opacity: 0.8;
        transform: scale(0.7);
    }

    100% {
        opacity: 0;
        transform: scale(1.5);
    }

}

@keyframes dmxTopBarLight {

    0% {
        transform: translateX(-100%);
    }

    50%,
    100% {
        transform: translateX(100%);
    }

}


/* ============================================================
   Responsive
============================================================ */

@media (max-width: 1240px) {

    .dmxHeaderLogo {
        width: 245px;
    }

    .dmxNavLink,
    .dmxNavDropdownButton {
        padding-inline: 10px;

        font-size: 12px;
    }

    .dmxHeaderCta {
        padding-left: 16px;

        font-size: 12px;
    }

    .dmxMegaMenu {
        left: auto;
        right: -180px;

        transform:
            translateY(14px)
            scale(0.985);
    }

    .dmxNavGroup.active .dmxMegaMenu {
        transform:
            translateY(0)
            scale(1);
    }

    .dmxMegaMenu::before {
        right: 210px;
        left: auto;

        transform: rotate(45deg);
    }

}


@media (max-width: 1040px) {

    .dmxTopBar {
        display: none;
    }

    .dmxHeaderInner {
        min-height: 78px;
    }

    .dmxHeaderLogo,
    .dmxSiteHeader.scrolled .dmxHeaderLogo {
        width: 220px;
    }

    .dmxMenuToggle {
        display: block;
    }

    .dmxMainNav {
        position: absolute;
        top: calc(100% + 10px);
        right: 14px;
        left: 14px;

        max-height: calc(100vh - 105px);

        padding: 14px;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 4px;

        overflow-y: auto;

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

        background: rgba(255, 255, 255, 0.985);

        box-shadow: var(--dmx-shadow);

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

    .dmxMainNav.open {
        display: flex;
    }

    .dmxNavLink,
    .dmxNavDropdownButton {
        width: 100%;
        min-height: 49px;

        padding-inline: 15px;

        justify-content: space-between;

        font-size: 13px;
    }

    .dmxNavLink::after,
    .dmxNavDropdownButton::after {
        display: none;
    }

    .dmxHeaderCta {
        min-height: 52px;

        margin: 9px 0 0;
    }

    .dmxNavGroup::after {
        display: none;
    }

    .dmxMegaMenu {
        position: static;

        width: 100%;

        margin-top: 6px;
        padding: 14px;

        display: none;

        opacity: 1;
        visibility: visible;

        transform: none;

        border-radius: 19px;

        box-shadow: none;
    }

    .dmxNavGroup.active .dmxMegaMenu {
        display: block;

        transform: none;
    }


    .dmxMegaMenu::before,
    .dmxMegaPattern {
        display: none;
    }

    .dmxMegaHeader {
        align-items: flex-start;
        flex-direction: column;

        gap: 12px;
    }

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

    .dmxMegaSolutions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dmxMegaPreview {
        display: none;
    }

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

        align-items: flex-start;
    }

    .dmxMegaAdvantages {
        justify-content: flex-start;
    }

    .dmxMegaContact {
        text-align: left;
    }

}


@media (max-width: 640px) {

    .dmxHeaderLogo,
    .dmxSiteHeader.scrolled .dmxHeaderLogo {
        width: 182px;
    }

    .dmxHeaderInner {
        min-height: 72px;
    }

    .dmxMainNav {
        right: 10px;
        left: 10px;
    }

    .dmxMegaHeading strong {
        font-size: 15px;
    }

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

    .dmxMegaSolution {
        min-height: 106px;
    }

    .dmxMegaAllLink {
        font-size: 11px;
    }

}


/* ============================================================
   Accesibilidad: reducir movimiento
============================================================ */

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

    .dmxTopBar::before,
    .dmxAvailabilityPulse::after {
        animation: none;
    }

    .dmxSiteHeader *,
    .dmxSiteHeader *::before,
    .dmxSiteHeader *::after {
        transition-duration: 0.001ms !important;
    }

}

/* ============================================================
   Selector de idioma
============================================================ */

.dmxLanguageSelector {
    position: relative;
}

.dmxLanguageButton {
    min-height: 26px;

    padding: 0 8px;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    color: rgba(255, 255, 255, 0.74);
    background: rgba(255, 255, 255, 0.055);

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 999px;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.dmxLanguageButton:hover,
.dmxLanguageSelector.active .dmxLanguageButton {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(0, 217, 220, 0.28);
}

.dmxLanguageGlobe {
    width: 14px;
    height: 14px;

    flex: 0 0 auto;

    fill: none;
    stroke: var(--dmx-cyan);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dmxLanguageCurrent {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.045em;
}

.dmxLanguageArrow {
    width: 12px;
    height: 12px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.22s ease;
}

.dmxLanguageSelector.active .dmxLanguageArrow {
    transform: rotate(180deg);
}


/* ============================================================
   Menú desplegable de idioma
============================================================ */

.dmxLanguageMenu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;

    z-index: 1200;

    width: 220px;

    padding: 10px;

    color: var(--dmx-ink);
    background: rgba(255, 255, 255, 0.985);

    border: 1px solid rgba(205, 220, 232, 0.92);
    border-radius: 17px;

    box-shadow:
        0 22px 54px rgba(6, 20, 38, 0.2),
        0 6px 16px rgba(6, 20, 38, 0.07);

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

    opacity: 0;
    visibility: hidden;

    transform:
        translateY(8px)
        scale(0.98);

    transform-origin: top right;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease,
        transform 0.2s ease;
}

.dmxLanguageMenu::before {
    content: "";

    position: absolute;
    top: -6px;
    right: 22px;

    width: 11px;
    height: 11px;

    background: #ffffff;

    border-top: 1px solid rgba(205, 220, 232, 0.92);
    border-left: 1px solid rgba(205, 220, 232, 0.92);

    transform: rotate(45deg);
}

.dmxLanguageSelector.active .dmxLanguageMenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

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

.dmxLanguageMenuLabel {
    display: block;

    padding: 4px 8px 8px;

    color: var(--dmx-muted);

    font-size: 8px;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dmxLanguageOption {
    min-height: 58px;

    padding: 9px;

    display: grid;
    grid-template-columns: 34px 1fr 18px;

    align-items: center;

    gap: 10px;

    border-radius: 12px;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.dmxLanguageOption:hover {
    background: var(--dmx-cloud);
    transform: translateX(2px);
}

.dmxLanguageOption.active {
    background:
        linear-gradient(
            135deg,
            rgba(6, 103, 241, 0.08),
            rgba(0, 217, 220, 0.075)
        );
}

.dmxLanguageCode {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    color: var(--dmx-blue);
    background: rgba(6, 103, 241, 0.08);

    border-radius: 10px;

    font-size: 9px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.dmxLanguageOption.active .dmxLanguageCode {
    color: #ffffff;

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

.dmxLanguageOptionText {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.dmxLanguageOptionText strong {
    color: var(--dmx-ink);

    font-size: 11px;
    line-height: 1.2;
}

.dmxLanguageOptionText small {
    margin-top: 3px;

    color: var(--dmx-muted);

    font-size: 8px;
}

.dmxLanguageCheck {
    width: 15px;
    height: 15px;

    fill: none;
    stroke: var(--dmx-blue);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 0;
}

.dmxLanguageOption.active .dmxLanguageCheck {
    opacity: 1;
}

.dmxNavGroup.forceClosed .dmxMegaMenu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transform:
        translateX(-50%)
        translateY(14px)
        scale(0.985) !important;
}

@media (max-width: 1240px) {

    .dmxNavGroup.forceClosed .dmxMegaMenu {
        transform:
            translateY(14px)
            scale(0.985) !important;
    }

}

@media (max-width: 1040px) {

    .dmxNavGroup.forceClosed .dmxMegaMenu {
        display: none !important;
        transform: none !important;
    }

}