/* ============================================================
   Digitalizando MX
   Core Variables
============================================================ */

:root {

    /* Colores principales */

    --dmx-ink: #0b1420;
    --dmx-navy: #08264d;
    --dmx-blue: #0667f1;
    --dmx-cyan: #00d9dc;
    --dmx-lime: #c6ff2f;

    /* Neutros */

    --dmx-white: #ffffff;
    --dmx-cloud: #f4f7fa;
    --dmx-line: #dce6ee;
    --dmx-muted: #647386;

    /* Layout */

    --dmx-container: 1200px;
    --dmx-radius: 28px;

    /* Sombras */

    --dmx-shadow: 0 28px 80px rgba(15, 51, 88, 0.12);

}



/* ============================================================
   Reset
============================================================ */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    overflow-x: hidden;

    color: var(--dmx-ink);
    background: var(--dmx-white);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
    border: 0;
    background: transparent;
}

.container {
    width: min(calc(100% - 40px), var(--dmx-container));
    margin-inline: auto;
}

.dmxSection {
    padding: 120px 0;
}



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

@media (max-width: 620px) {

    .container {
        width: min(calc(100% - 28px), var(--dmx-container));
    }

    .dmxSection {
        padding: 88px 0;
    }

}



/* ============================================================
   Reduce Motion
============================================================ */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

}


.dmxVisuallyHidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}