/* =========================================================
   NOMISIS - VENTAJAS
========================================================= */

:root {
    --adv-blue: #0a7cff;
    --adv-blue-light: #45a1ff;
    --adv-navy: #061630;
    --adv-navy-light: #092d62;
    --adv-green: #16c58d;
    --adv-orange: #ff9638;
    --adv-purple: #7251e8;
}


/* =========================================================
   HERO
========================================================= */

.advantages-hero {
    position: relative;
    overflow: hidden;

    min-height: 720px;

    display: flex;
    align-items: center;

    padding: 135px 0 85px;

    background:
        radial-gradient(
            circle at 78% 25%,
            rgba(0,126,255,.19),
            transparent 30%
        ),
        radial-gradient(
            circle at 18% 80%,
            rgba(22,197,141,.10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #04142e,
            #082d62
        );

    color: white;
}

.advantages-grid-bg,
.core26-grid-bg {
    position: absolute;
    inset: 0;

    opacity: .055;

    background-image:
        linear-gradient(
            rgba(77,158,255,.75) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(77,158,255,.75) 1px,
            transparent 1px
        );

    background-size: 52px 52px;
}

.advantages-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    border-radius: 50%;

    filter: blur(130px);

    pointer-events: none;
}

.glow-one {
    top: -220px;
    right: -100px;

    background: rgba(10,124,255,.22);
}

.glow-two {
    bottom: -300px;
    left: -200px;

    background: rgba(22,197,141,.13);
}

.advantages-hero-content {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: .9fr 1.1fr;

    align-items: center;

    gap: 80px;
}

.advantages-badge {
    width: fit-content;

    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 22px;

    color: #72b7ff;

    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.advantages-badge > span {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #168aff,
            #0866dc
        );

    box-shadow:
        0 10px 25px rgba(0,119,255,.25);

    color: white;

    font-size: 16px;
}

.advantages-hero h1 {
    max-width: 590px;

    font-size: clamp(46px, 5vw, 68px);
    line-height: .99;

    letter-spacing: -3px;
}

.advantages-hero h1 span,
.advantages-hero h1 strong {
    display: block;
}

.advantages-hero h1 strong {
    color: #48a5ff;
}

.advantages-hero-copy > p {
    max-width: 550px;

    margin-top: 24px;

    color: #afc3dd;

    font-size: 16px;
    line-height: 1.75;
}

.advantages-hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}

.advantages-secondary-button {
    min-height: 54px;

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

    padding: 0 24px;

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

    border-radius: 14px;

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

    color: #d7e7fa;

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

    transition:
        background .2s ease,
        transform .2s ease;
}

.advantages-secondary-button:hover {
    transform: translateY(-2px);

    background:
        rgba(255,255,255,.09);
}


/* =========================================================
   ARCHITECTURE HERO
========================================================= */

.architecture-visual {
    position: relative;

    min-height: 470px;
}

.architecture-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    border:
        1px solid rgba(74,157,255,.16);

    border-radius: 50%;

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

.orbit-one {
    width: 330px;
    height: 330px;
}

.orbit-two {
    width: 455px;
    height: 455px;

    border-style: dashed;
}

.architecture-core {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 145px;
    height: 145px;

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

    border:
        1px solid rgba(91,174,255,.40);

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #0a3c7c,
            #082658
        );

    box-shadow:
        0 0 80px rgba(0,120,255,.22);

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

.core-pulse {
    position: absolute;
    inset: -13px;

    border:
        1px solid rgba(43,148,255,.15);

    border-radius: 50%;
}

.architecture-core small {
    color: #659dd8;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.architecture-core strong {
    margin: 3px 0;

    font-size: 19px;
}

.architecture-core > span {
    color: #4fa9ff;

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

.architecture-node {
    position: absolute;

    min-width: 155px;

    display: flex;
    align-items: center;

    gap: 9px;

    padding: 11px;

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

    border-radius: 12px;

    background:
        rgba(7,30,67,.92);

    box-shadow:
        0 15px 35px rgba(0,6,20,.22);

    backdrop-filter: blur(10px);
}

.architecture-node small {
    display: block;

    color: #587493;

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

.architecture-node strong {
    color: #d9e8fa;

    font-size: 10px;
}

.node-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    color: white;

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

.node-blue {
    background: #1685ff;
}

.node-green {
    background: #16c58d;
}

.node-orange {
    background: #ff9638;
}

.node-purple {
    background: #7251e8;
}

.node-nomina {
    top: 25px;
    left: 20px;
}

.node-facturacion {
    top: 80px;
    right: 0;
}

.node-pos {
    bottom: 60px;
    left: 0;
}

.node-admin {
    right: 15px;
    bottom: 20px;
}

.architecture-status {
    position: absolute;

    left: 50%;
    bottom: 5px;

    display: flex;
    align-items: center;

    gap: 7px;

    color: #7896b8;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;

    transform: translateX(-50%);
}

.architecture-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #1ed397;

    box-shadow:
        0 0 0 5px rgba(30,211,151,.08),
        0 0 13px rgba(30,211,151,.35);
}


/* =========================================================
   INTRO
========================================================= */

.advantages-intro {
    padding: 95px 0 45px;

    background: white;
}

.advantages-intro-heading {
    max-width: 760px;

    margin: auto;

    text-align: center;
}

.advantages-intro-heading > span {
    color: #0877ed;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.advantages-intro-heading h2 {
    margin-top: 10px;

    color: #0b2854;

    font-size: clamp(35px, 4vw, 49px);
    line-height: 1.06;

    letter-spacing: -2px;
}

.advantages-intro-heading h2 strong {
    display: block;

    color: #0877ed;
}

.advantages-intro-heading p {
    max-width: 650px;

    margin: 18px auto 0;

    color: #718199;

    font-size: 14px;
    line-height: 1.75;
}

.advantages-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 10px;

    margin-top: 50px;
}

.summary-item {
    padding: 16px;

    border:
        1px solid #e0e8f1;

    border-radius: 12px;

    background: #fbfcfe;

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

.summary-item:hover {
    transform: translateY(-3px);

    border-color: #bddcff;

    box-shadow:
        0 13px 30px rgba(20,48,88,.08);
}

.summary-item > span {
    display: block;

    margin-bottom: 12px;

    color: #1685ff;

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

.summary-item strong {
    display: block;

    color: #304d70;

    font-size: 11px;
}

.summary-item small {
    display: block;

    margin-top: 3px;

    color: #8a9aae;

    font-size: 8px;
}


/* =========================================================
   GENERAL ADVANTAGE
========================================================= */

.advantage-section {
    padding: 105px 0;

    background: white;
}

.advantage-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;

    align-items: center;

    gap: 85px;
}

.advantage-copy {
    max-width: 490px;
}

.advantage-number {
    display: block;

    margin-bottom: 12px;

    color: #0877ed;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.advantage-copy h2,
.modular-heading h2,
.core26-copy h2,
.mexico-heading h2 {
    color: #0b2854;

    font-size: clamp(35px, 4vw, 48px);
    line-height: 1.05;

    letter-spacing: -2px;
}

.advantage-copy h2 strong,
.modular-heading h2 strong,
.mexico-heading h2 strong {
    display: block;

    color: #0877ed;
}

.advantage-copy > p,
.modular-heading > p,
.mexico-heading > p {
    margin-top: 18px;

    color: #718199;

    font-size: 14px;
    line-height: 1.75;
}

.advantage-list {
    display: flex;
    flex-direction: column;

    gap: 10px;

    margin-top: 25px;
    padding: 0;

    list-style: none;
}

.advantage-list li {
    display: flex;
    align-items: center;

    gap: 9px;

    color: #4f647f;

    font-size: 12px;
    font-weight: 600;
}

.advantage-list span {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #eaf4ff;

    color: #0877ed;

    font-size: 9px;
}


/* =========================================================
   MULTI COMPANY
========================================================= */

.multi-company-visual {
    position: relative;

    min-height: 420px;
}

.company-main {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 260px;

    padding: 25px;

    border:
        1px solid #dce6f1;

    border-radius: 20px;

    background: white;

    box-shadow:
        0 25px 65px rgba(17,43,81,.13);

    text-align: center;

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

.company-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 25px;

    color: #8393a7;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.company-header i {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #17c78e;
}

.company-logo {
    width: 65px;
    height: 65px;

    display: grid;
    place-items: center;

    margin: auto auto 12px;

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #1687ff,
            #0868dc
        );

    color: white;

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

.company-main > strong {
    display: block;

    color: #244565;

    font-size: 14px;
}

.company-main > small {
    display: block;

    margin-top: 4px;

    color: #8a9aad;

    font-size: 8px;
}

.company-modules {
    display: flex;
    justify-content: center;

    gap: 6px;

    margin-top: 20px;
}

.company-modules span {
    width: 27px;
    height: 27px;

    display: grid;
    place-items: center;

    border-radius: 7px;

    background: #edf5ff;

    color: #1476df;

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

.company-small {
    position: absolute;

    min-width: 190px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 13px;

    border:
        1px solid #e0e8f1;

    border-radius: 12px;

    background: #fbfcfe;

    box-shadow:
        0 12px 30px rgba(17,43,81,.08);
}

.company-small > span {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #edf5ff;

    color: #0877ed;

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

.company-small strong {
    display: block;

    color: #49627f;

    font-size: 10px;
}

.company-small small {
    display: block;

    margin-top: 2px;

    color: #93a1b2;

    font-size: 7px;
}

.company-two {
    top: 30px;
    right: 0;
}

.company-three {
    left: 0;
    bottom: 35px;
}


/* =========================================================
   MODULAR
========================================================= */

.modular-section {
    background: #f5f9fd;
}

.modular-heading {
    max-width: 760px;

    margin-bottom: 45px;
}

.module-network {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 14px;
}

.network-module {
    position: relative;

    min-height: 275px;

    padding: 25px;

    border:
        1px solid #dfe7f0;

    border-radius: 18px;

    background: white;

    color: inherit;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

a.network-module:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 45px rgba(17,43,81,.10);
}

.network-module-icon {
    width: 44px;
    height: 44px;

    display: grid;
    place-items: center;

    margin-bottom: 35px;

    border-radius: 12px;

    color: white;

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

.network-module-icon.blue {
    background: #1685ff;
}

.network-module-icon.green {
    background: #16c58d;
}

.network-module-icon.orange {
    background: #ff9638;
}

.network-module-icon.purple {
    background: #7251e8;
}

.network-module > small {
    display: block;

    color: #9aa9ba;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.network-module > strong {
    display: block;

    margin-top: 3px;

    color: #254666;

    font-size: 18px;
}

.network-module p {
    margin-top: 10px;

    color: #76869b;

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

.network-link,
.network-coming {
    position: absolute;

    left: 25px;
    bottom: 22px;

    color: #0877ed;

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

.network-coming {
    color: #d67c2e;

    letter-spacing: .7px;
}


/* =========================================================
   SECURITY
========================================================= */

.security-section {
    background: white;
}

.security-grid {
    display: grid;
    grid-template-columns: 1.15fr .85fr;

    align-items: center;

    gap: 85px;
}

.security-window {
    overflow: hidden;

    border:
        1px solid #dce6f1;

    border-radius: 20px;

    background: white;

    box-shadow:
        0 30px 70px rgba(17,43,81,.13);
}

.security-window-top {
    height: 45px;

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

    padding: 0 18px;

    border-bottom:
        1px solid #e7edf4;

    background: #f9fbfd;

    color: #75869b;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.security-online {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #0ca975;
}

.security-online i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #16c58d;
}

.security-user {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 22px;
}

.security-avatar {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background:
        linear-gradient(
            145deg,
            #1687ff,
            #0868dc
        );

    color: white;

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

.security-user small,
.security-user strong,
.security-user span {
    display: block;
}

.security-user small {
    color: #9ba9b9;

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

.security-user strong {
    margin-top: 2px;

    color: #304d70;

    font-size: 12px;
}

.security-user span {
    margin-top: 2px;

    color: #8796a8;

    font-size: 8px;
}

.permission-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    padding: 0 22px 22px;
}

.permission {
    display: grid;
    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 9px;

    padding: 12px;

    border:
        1px solid #e3e9f0;

    border-radius: 10px;

    background: #fafbfd;
}

.permission > span {
    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: #edf1f6;

    color: #7f8ea0;

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

.permission small {
    display: block;

    color: #95a3b3;

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

.permission strong {
    display: block;

    color: #728297;

    font-size: 8px;
}

.permission > i {
    color: #9ba9b9;

    font-style: normal;
}

.permission.active {
    border-color: #cce7dc;

    background: #f3fbf8;
}

.permission.active > span {
    background: #dcf7ed;

    color: #0da875;
}

.permission.active strong,
.permission.active > i {
    color: #0da875;
}

.security-points {
    display: flex;
    flex-direction: column;

    gap: 12px;

    margin-top: 25px;
}

.security-points > div {
    display: flex;

    gap: 13px;

    padding: 13px 0;

    border-bottom:
        1px solid #e8edf3;
}

.security-points > div > span {
    color: #0877ed;

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

.security-points strong {
    display: block;

    color: #415c7b;

    font-size: 11px;
}

.security-points p {
    margin-top: 3px;

    color: #8493a6;

    font-size: 9px;
}


/* =========================================================
   MULTIUSER
========================================================= */

.multiuser-section {
    background: #f5f9fd;
}

.multiuser-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    margin-top: 28px;
}

.multiuser-features > div {
    padding: 12px;

    border:
        1px solid #dfe7f0;

    border-radius: 10px;

    background: white;
}

.multiuser-features strong {
    display: block;

    color: #405d7e;

    font-size: 10px;
}

.multiuser-features span {
    display: block;

    margin-top: 3px;

    color: #8998aa;

    font-size: 7px;
}

.server-visual {
    position: relative;

    min-height: 390px;
}

.server {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 155px;
    height: 190px;

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

    border:
        1px solid #d8e4f1;

    border-radius: 18px;

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

    box-shadow:
        0 25px 60px rgba(17,43,81,.12);

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

.server-light {
    width: 8px;
    height: 8px;

    margin-bottom: 20px;

    border-radius: 50%;

    background: #16c58d;

    box-shadow:
        0 0 0 6px rgba(22,197,141,.08),
        0 0 18px rgba(22,197,141,.35);
}

.server small {
    color: #8c9bae;

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

.server strong {
    margin-top: 3px;

    color: #21496f;

    font-size: 16px;
}

.server-lines {
    width: 75px;

    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-top: 20px;
}

.server-lines span {
    height: 3px;

    border-radius: 3px;

    background: #dce7f3;
}

.workstation {
    position: absolute;

    width: 145px;

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

    align-items: center;

    gap: 8px;

    padding: 11px;

    border:
        1px solid #dfe7f0;

    border-radius: 10px;

    background: white;

    box-shadow:
        0 10px 25px rgba(17,43,81,.07);
}

.workstation span {
    color: #1685ff;

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

.workstation strong {
    color: #526a84;

    font-size: 9px;
}

.workstation i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #16c58d;
}

.ws-one {
    top: 25px;
    right: 0;
}

.ws-two {
    left: 0;
    bottom: 35px;
}

.ws-three {
    right: 10px;
    bottom: 20px;
}


/* =========================================================
   CORE26
========================================================= */

.core26-section {
    position: relative;
    overflow: hidden;

    padding: 110px 0;

    background:
        linear-gradient(
            145deg,
            #061630,
            #082d62
        );

    color: white;
}

.core26-grid-bg {
    opacity: .04;
}

.core26-grid {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: .85fr 1.15fr;

    align-items: center;

    gap: 85px;
}

.core26-copy h2 {
    color: white;
}

.core26-copy h2 strong {
    display: block;

    color: #47a6ff;
}

.core26-copy > p {
    margin-top: 18px;

    color: #afc3dd;

    font-size: 14px;
    line-height: 1.75;
}

.core26-features {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 8px;

    margin-top: 25px;
}

.core26-features > div {
    display: flex;
    align-items: center;

    gap: 8px;

    color: #bed0e6;

    font-size: 10px;
}

.core26-features span {
    color: #21d498;
}

.core26-card {
    max-width: 510px;

    margin-left: auto;

    padding: 28px;

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

    border-radius: 20px;

    background:
        rgba(5,25,57,.72);

    box-shadow:
        0 30px 70px rgba(0,7,25,.28);

    backdrop-filter: blur(10px);
}

.core26-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 40px;
}

.core26-card-top > span {
    color: #5faeff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1px;
}

.core26-card-top > div {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #64dbb4;

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

.core26-card-top i {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: #1ed397;
}

.core26-logo {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    margin-bottom: 14px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #168aff,
            #0867db
        );

    box-shadow:
        0 12px 30px rgba(0,119,255,.22);

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

.core26-card > small {
    display: block;

    color: #6784a5;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.core26-card > strong {
    display: block;

    margin-top: 3px;

    color: #e4effc;

    font-size: 17px;
}

.core26-progress {
    margin-top: 30px;
}

.core26-progress-info {
    display: flex;
    justify-content: space-between;

    margin-bottom: 8px;

    color: #819cba;

    font-size: 8px;
}

.core26-progress-info strong {
    color: #46a6ff;
}

.core26-progress-bar {
    height: 5px;

    overflow: hidden;

    border-radius: 5px;

    background: #102f58;
}

.core26-progress-bar span {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #168aff,
            #16c58d
        );
}

.core26-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    margin-top: 25px;
}

.core26-data > div {
    padding: 11px;

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

    border-radius: 9px;

    background:
        rgba(255,255,255,.035);
}

.core26-data small {
    display: block;

    color: #5d7897;

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

.core26-data strong {
    display: block;

    margin-top: 3px;

    color: #aec3dc;

    font-size: 8px;
}


/* =========================================================
   MEXICO
========================================================= */

.mexico-section {
    padding: 105px 0;

    background: white;
}

.mexico-heading {
    max-width: 700px;

    margin-bottom: 45px;
}

.mexico-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);

    gap: 12px;
}

.mexico-card {
    min-height: 180px;

    padding: 22px;

    border:
        1px solid #dfe7f0;

    border-radius: 16px;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fafcff
        );
}

.mexico-card > span {
    display: block;

    margin-bottom: 35px;

    color: #1685ff;

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

.mexico-card strong {
    display: block;

    color: #294a6d;

    font-size: 16px;
}

.mexico-card p {
    margin-top: 8px;

    color: #8190a3;

    font-size: 10px;
    line-height: 1.6;
}


/* =========================================================
   FINAL
========================================================= */

.advantages-final {
    padding: 85px 0;

    background: #f4f8fd;
}

.advantages-final-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 50px;

    padding: 50px;

    border-radius: 26px;

    background:
        linear-gradient(
            135deg,
            #0878ed,
            #074a9e
        );

    box-shadow:
        0 25px 65px rgba(8,104,190,.18);

    color: white;
}

.advantages-final-box > div:first-child > span {
    display: block;

    margin-bottom: 9px;

    color: #bcdcff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.advantages-final h2 {
    max-width: 650px;

    font-size: clamp(30px, 4vw, 43px);
    line-height: 1.08;

    letter-spacing: -1.5px;
}

.advantages-final h2 strong {
    color: #83c4ff;
}

.advantages-final p {
    max-width: 580px;

    margin-top: 13px;

    color: #d7eaff;

    font-size: 13px;
}

.advantages-final-actions {
    min-width: 215px;

    display: flex;
    flex-direction: column;

    gap: 9px;
}


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

@media (max-width: 1050px) {

    .advantages-hero-content,
    .advantage-grid,
    .security-grid,
    .core26-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .advantages-hero-copy {
        max-width: 720px;

        margin: auto;

        text-align: center;
    }

    .advantages-badge {
        margin-inline: auto;
    }

    .advantages-hero-copy > p {
        margin-inline: auto;
    }

    .advantages-hero-actions {
        justify-content: center;
    }

    .architecture-visual {
        max-width: 650px;
        width: 100%;

        margin: auto;
    }

    .advantages-summary {
        grid-template-columns: repeat(3, 1fr);
    }

    .module-network {
        grid-template-columns: 1fr 1fr;
    }

    .advantage-copy {
        max-width: 650px;
    }

    .core26-card {
        margin: auto;
    }

    .mexico-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .advantages-final-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .advantages-final-actions {
        width: 100%;

        flex-direction: row;
    }

    .advantages-final-actions .btn {
        flex: 1;
    }

}


@media (max-width: 760px) {

    .advantages-hero {
        min-height: auto;

        padding: 115px 0 70px;
    }

    .advantages-hero h1 {
        font-size: 44px;
    }

    .architecture-visual {
        min-height: 390px;

        transform: scale(.85);
    }

    .advantages-summary {
        grid-template-columns: 1fr 1fr;
    }

    .advantage-section,
    .core26-section,
    .mexico-section {
        padding: 75px 0;
    }

    .module-network {
        grid-template-columns: 1fr;
    }

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

    .multiuser-features {
        grid-template-columns: 1fr;
    }

    .core26-features {
        grid-template-columns: 1fr;
    }

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

    .advantages-final-box {
        padding: 35px 25px;
    }

    .advantages-final-actions {
        flex-direction: column;
    }

}


@media (max-width: 500px) {

    .advantages-summary,
    .mexico-grid,
    .core26-data {
        grid-template-columns: 1fr;
    }

    .architecture-visual {
        margin: -40px auto;

        transform: scale(.68);
    }

    .company-small {
        display: none;
    }

}

/* =========================================================
   COMPATIBILIDAD / CONVIVENCIA
========================================================= */

.compatibility-section {
    position: relative;

    overflow: hidden;

    padding: 110px 0;

    background:
        linear-gradient(
            180deg,
            #ffffff,
            #f5f9fd
        );
}

.compatibility-grid {
    display: grid;
    grid-template-columns: .9fr 1.1fr;

    align-items: center;

    gap: 90px;
}

.compatibility-copy {
    max-width: 510px;
}

.compatibility-copy h2 {
    color: #0b2854;

    font-size: clamp(35px, 4vw, 48px);
    line-height: 1.05;

    letter-spacing: -2px;
}

.compatibility-copy h2 strong {
    display: block;

    color: #0877ed;
}

.compatibility-lead {
    margin-top: 18px;

    color: #718199;

    font-size: 14px;
    line-height: 1.75;
}


/* =========================================================
   PUNTOS
========================================================= */

.compatibility-points {
    display: flex;
    flex-direction: column;

    gap: 6px;

    margin-top: 28px;
}

.compatibility-point {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 15px 0;

    border-bottom:
        1px solid #e2e9f1;
}

.compatibility-point-icon {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 9px;

    background: #eaf4ff;

    color: #0877ed;

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

.compatibility-point strong {
    display: block;

    margin-top: 1px;

    color: #405d7e;

    font-size: 11px;
}

.compatibility-point p {
    margin-top: 4px;

    color: #8796a8;

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


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

.compatibility-visual {
    position: relative;

    padding: 25px;

    border:
        1px solid #dce6f1;

    border-radius: 22px;

    background: white;

    box-shadow:
        0 30px 70px rgba(17,43,81,.12);
}

.compatibility-status {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 22px;

    color: #75899f;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.compatibility-status > span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #16c58d;

    box-shadow:
        0 0 0 5px rgba(22,197,141,.08);
}


/* =========================================================
   SISTEMAS
========================================================= */

.compat-system {
    overflow: hidden;

    border:
        1px solid #e0e7ef;

    border-radius: 14px;

    background: #fbfcfe;
}

.compat-system-top {
    min-height: 38px;

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

    padding: 0 14px;

    border-bottom:
        1px solid #e7edf4;

    background: #f7f9fc;
}

.compat-system-top > span {
    color: #8797a9;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.compat-system-top > i {
    padding: 4px 7px;

    border-radius: 20px;

    background: #e9f8f3;

    color: #0ca975;

    font-size: 6px;
    font-style: normal;
    font-weight: 900;
}

.compat-system-body {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 19px;
}

.generic-app-icon,
.nomisis-app-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

    display: grid;
    place-items: center;

    border-radius: 13px;

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

.generic-app-icon {
    background:
        linear-gradient(
            145deg,
            #6f7f93,
            #47596e
        );

    color: white;
}

.nomisis-app-icon {
    background:
        linear-gradient(
            145deg,
            #168aff,
            #0868dc
        );

    box-shadow:
        0 10px 25px rgba(8,119,237,.20);

    color: white;
}

.compat-system-body small,
.compat-system-body strong,
.compat-system-body p {
    display: block;
}

.compat-system-body small {
    color: #98a6b7;

    font-size: 6px;
    font-weight: 900;
    letter-spacing: .7px;
}

.compat-system-body strong {
    margin-top: 2px;

    color: #314e70;

    font-size: 13px;
}

.compat-system-body p {
    margin-top: 3px;

    color: #8796a8;

    font-size: 8px;
}


/* =========================================================
   + CENTRAL
========================================================= */

.compatibility-center {
    height: 46px;

    display: flex;
    align-items: center;

    gap: 12px;

    padding: 0 25px;
}

.compat-line {
    height: 1px;

    flex: 1;

    background:
        linear-gradient(
            90deg,
            transparent,
            #d5e1ee,
            transparent
        );
}

.compatibility-plus {
    width: 28px;
    height: 28px;

    display: grid;
    place-items: center;

    border:
        1px solid #cfe3fa;

    border-radius: 50%;

    background: #edf6ff;

    color: #0877ed;

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


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

.compatibility-result {
    display: flex;
    align-items: center;

    gap: 12px;

    margin-top: 18px;

    padding: 14px;

    border:
        1px solid #ccebdd;

    border-radius: 12px;

    background:
        linear-gradient(
            90deg,
            #f3fbf8,
            #f8fcfb
        );
}

.compatibility-check {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #16c58d;

    color: white;

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

.compatibility-result small {
    display: block;

    color: #62a78f;

    font-size: 6px;
    font-weight: 900;
    letter-spacing: .8px;
}

.compatibility-result strong {
    display: block;

    margin-top: 2px;

    color: #34745f;

    font-size: 9px;
}


/* =========================================================
   MENSAJE INFERIOR
========================================================= */

.compatibility-message {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-top: 55px;

    padding: 25px 30px;

    border:
        1px solid #d9e7f5;

    border-radius: 16px;

    background:
        linear-gradient(
            90deg,
            #edf6ff,
            #f8fbff
        );
}

.compatibility-message-icon {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #0877ed;

    color: white;

    font-size: 18px;
}

.compatibility-message small {
    display: block;

    margin-bottom: 3px;

    color: #7892ad;

    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.compatibility-message strong {
    color: #294a6d;

    font-size: clamp(17px, 2vw, 23px);
    line-height: 1.3;
}

.compatibility-message strong span {
    color: #0877ed;
}


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

@media (max-width: 1050px) {

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

        gap: 50px;
    }

    .compatibility-copy {
        max-width: 680px;
    }

    .compatibility-visual {
        max-width: 650px;
        width: 100%;

        margin: auto;
    }

}


@media (max-width: 760px) {

    .compatibility-section {
        padding: 75px 0;
    }

    .compatibility-message {
        align-items: flex-start;

        padding: 20px;
    }

}


@media (max-width: 500px) {

    .compat-system-body {
        padding: 15px;
    }

    .compatibility-message {
        flex-direction: column;
    }

}

/* Responsive safety: evita desbordamiento en páginas internas */
@media (max-width: 900px) {
    main, section, [class*="-grid"], [class*="-content"], [class*="-wrapper"], [class*="-panel"] { min-width: 0; }
}
@media (max-width: 520px) {
    [class*="-card"], [class*="-box"] { min-width: 0; }
}

/* NOMISIS 26 - arquitectura completa de módulos */
.architecture-modules-all{position:absolute;inset:20px 0 28px;display:grid;grid-template-columns:repeat(2,minmax(130px,1fr));align-content:space-between;gap:8px 150px;pointer-events:none}
.architecture-mini{display:flex;align-items:center;gap:9px;padding:8px 10px;border:1px solid rgba(110,165,220,.28);border-radius:11px;background:rgba(6,35,72,.88);box-shadow:0 8px 22px rgba(0,0,0,.12)}
.architecture-mini span{min-width:30px;height:30px;padding:0 4px;border-radius:8px;display:grid;place-items:center;background:#1685f8;color:#fff;font-size:10px;font-weight:900}
.architecture-mini small{display:block;font-size:6px;letter-spacing:.8px;color:#7899bb}.architecture-mini strong{font-size:10px;color:#fff;white-space:nowrap}
.architecture-core{z-index:4}.architecture-status{z-index:5}
.module-network{grid-template-columns:repeat(5,1fr)!important}.network-module-icon{background:#1476e8;color:white}
.permission-grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:1100px){.module-network{grid-template-columns:repeat(2,1fr)!important}.architecture-modules-all{gap:6px 90px}}
@media(max-width:760px){.module-network{grid-template-columns:1fr!important}.architecture-modules-all{position:relative;inset:auto;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:20px}.architecture-visual{min-height:auto}.architecture-core,.architecture-orbit,.architecture-status{display:none}}

/* NOMISIS 26 R4 - ecosistema orbital: módulos dispersos con iconografía real */
.architecture-modules-all{position:absolute;inset:0;display:block;pointer-events:none;z-index:3}
.architecture-mini{position:absolute;width:166px;min-height:52px;display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid rgba(110,165,220,.27);border-radius:12px;background:rgba(6,35,72,.82);box-shadow:0 12px 28px rgba(0,0,0,.14);backdrop-filter:blur(5px);animation:nomisisFloat 5.5s ease-in-out infinite}
.architecture-mini img{width:38px;height:38px;object-fit:contain;flex:0 0 38px;filter:drop-shadow(0 5px 8px rgba(0,0,0,.28))}
.architecture-mini div{min-width:0}.architecture-mini small{display:block;font-size:6px;letter-spacing:.9px;color:#78a3cf;font-weight:800}.architecture-mini strong{display:block;margin-top:2px;font-size:10px;color:#fff;white-space:nowrap}.architecture-mini em{display:block;margin-top:2px;font-size:5px;line-height:1.15;letter-spacing:.45px;color:#69b5ff;font-style:normal;font-weight:800;white-space:nowrap}
.architecture-mini.future{opacity:.58;filter:saturate(.65)}
.architecture-mini.nomina{left:2%;top:3%;animation-delay:-.4s}.architecture-mini.facturacion{right:1%;top:11%;animation-delay:-2.1s}.architecture-mini.pos{left:0;top:29%;animation-delay:-3.4s}.architecture-mini.cxc{right:0;top:34%;animation-delay:-1.1s}.architecture-mini.inventarios{left:5%;top:54%;animation-delay:-4.3s}.architecture-mini.carta{right:4%;top:57%;animation-delay:-2.8s}.architecture-mini.compras{left:1%;bottom:8%;animation-delay:-1.8s}.architecture-mini.cxp{right:0;bottom:7%;animation-delay:-4.9s}.architecture-mini.contabilidad{left:25%;bottom:8%;animation-delay:-3.7s}.architecture-mini.bancos{right:23%;bottom:9%;animation-delay:-.8s}
@keyframes nomisisFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}}
.architecture-core{z-index:5}.architecture-status{z-index:6}
@media(max-width:1100px){.architecture-mini{width:145px}.architecture-mini.contabilidad{left:20%;bottom:10%}.architecture-mini.bancos{right:18%;bottom:11%}}
@media(max-width:760px){.architecture-modules-all{position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}.architecture-mini{position:relative!important;inset:auto!important;width:auto;min-height:54px;animation:none}.architecture-mini img{width:34px;height:34px;flex-basis:34px}.architecture-core,.architecture-orbit,.architecture-status{display:none}.architecture-visual{min-height:auto}}
@media(prefers-reduced-motion:reduce){.architecture-mini{animation:none}}

/* Enlaces accesibles para cada módulo del diagrama de arquitectura */
.architecture-modules-all{pointer-events:none}
.architecture-modules-all a.architecture-mini{pointer-events:auto;text-decoration:none;cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.architecture-modules-all a.architecture-mini:hover,.architecture-modules-all a.architecture-mini:focus-visible{border-color:#61b9ff;background:#103d72;box-shadow:0 14px 34px rgba(0,0,0,.25);outline:2px solid #68b9ff;outline-offset:2px}
.architecture-mini.future{opacity:1;filter:none}
@media(max-width:760px){.architecture-modules-all a.architecture-mini{width:auto;min-width:0;white-space:normal}.architecture-mini strong,.architecture-mini em{white-space:normal}}