/* ================================================================
   AP NEURAL WEB — SISTEMAS A MEDIDA / CONTROL ARCHITECTURE V1
================================================================ */

.page-service-systems {

    background: #08090B;

    overflow-x: clip;
}


.systems-main {

    position: relative;

    z-index: 2;
}



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

.systems-field {

    position: fixed;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 50% 50%,
            rgba(139,21,56,.075),
            transparent 28rem
        ),

        linear-gradient(
            180deg,
            rgba(16,17,20,.10),
            transparent 60%
        );
}


.systems-field__svg {

    position: absolute;

    left: 50%;
    top: 50%;

    width: max(110vw,94rem);

    height: auto;

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

    opacity: .44;
}


.systems-field__rails path,
.systems-field__modules rect,
.systems-field__core rect,
.systems-field__route {

    fill: none;

    vector-effect: non-scaling-stroke;
}


.systems-field__rails path {

    stroke: rgba(151,154,162,.05);

    stroke-width: 1;

    stroke-dasharray: 3 14;
}


.systems-field__modules rect {

    stroke: rgba(151,154,162,.065);

    stroke-width: 1;
}


.systems-field__core rect {

    stroke: rgba(151,154,162,.08);

    stroke-width: 1;
}


.systems-field__core rect:nth-child(2) {

    stroke: rgba(181,32,74,.18);
}


.systems-field__core rect:nth-child(3) {

    fill: rgba(139,21,56,.07);

    stroke: rgba(181,32,74,.38);
}


.systems-field__route {

    stroke: rgba(181,32,74,.18);

    stroke-width: 1;

    stroke-dasharray: 6 14;
}


.systems-field__traveler {

    fill: #B5204A;

    filter:
        drop-shadow(
            0 0 7px
            rgba(181,32,74,.65)
        );
}



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

.systems-hero {

    min-height: min(100svh,62rem);

    display: flex;

    align-items: center;

    padding-top:
        clamp(8rem,13vw,11rem);
}


.systems-hero__grid {

    display: grid;

    grid-template-columns:
        minmax(0,1.12fr)
        minmax(20rem,.58fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items: end;
}


.systems-hero h1 {

    max-width: 10.5ch;

    margin-bottom: 2rem;

    font-size:
        clamp(3.7rem,7.3vw,7.8rem);

    line-height: .90;

    letter-spacing: -.06em;

    text-transform: uppercase;

    text-wrap: balance;
}


.systems-hero h1 span {

    display: block;

    color: #B5204A;
}


.systems-hero__lead {

    max-width: 43rem;

    margin-bottom: 2rem;

    color: var(--color-text-soft);

    font-size:
        clamp(1.05rem,1.3vw,1.3rem);

    line-height: 1.75;
}


.systems-hero__actions,
.systems-cta__actions {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem;
}



/* ================================================================
   BUTTON EFFECT V2

   - texto perfectamente centrado
   - líneas invisibles en reposo
   - efecto aparece únicamente al hover
   - las líneas se abren hacia los extremos
================================================================ */

.systems-main
.systems-button {

    position: relative;

    isolation: isolate;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    overflow: hidden;
}


.systems-main
.systems-button > span {

    position: relative;

    z-index: 5;

    display: block;

    width: 100%;

    text-align: center;

    white-space: nowrap;
}


/* ================================================================
   BOTÓN PRINCIPAL / COMPUERTAS

   En reposo NO se ve ninguna línea.
================================================================ */

.systems-button--control::before,
.systems-button--control::after {

    content: "";

    position: absolute;

    z-index: 2;

    top: .45rem;
    bottom: .45rem;

    width: 1px;

    height: auto;

    background:

        linear-gradient(
            180deg,
            transparent,
            rgba(243,243,241,.72) 26%,
            #B5204A 50%,
            rgba(243,243,241,.72) 74%,
            transparent
        );

    opacity: 0;

    pointer-events: none;

    transition:

        left
        480ms
        cubic-bezier(.22,1,.36,1),

        right
        480ms
        cubic-bezier(.22,1,.36,1),

        opacity
        180ms
        ease;
}


/*
Ya NO nacen exactamente encima del texto.
*/

.systems-button--control::before {

    left: 38%;
}


.systems-button--control::after {

    right: 38%;
}


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

.systems-button--open > i {

    position: absolute;

    z-index: 2;

    left: 50%;
    top: 50%;

    width: 0;
    height: 0;

    opacity: 0;

    border:
        1px solid
        rgba(181,32,74,.0);

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

    pointer-events: none;

    transition:

        width
        430ms
        cubic-bezier(.22,1,.36,1),

        height
        430ms
        cubic-bezier(.22,1,.36,1),

        opacity
        220ms ease,

        border-color
        260ms ease;
}


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

@media (hover:hover) and (pointer:fine) {

    .systems-button--control:hover::before {

        left: .7rem;

        opacity: .86;
    }


    .systems-button--control:hover::after {

        right: .7rem;

        opacity: .86;
    }


    .systems-button--open:hover > i {

        width:
            calc(100% - .8rem);

        height:
            calc(100% - .8rem);

        opacity: 1;

        border-color:
            rgba(181,32,74,.36);
    }

}


/* ================================================================
   MOBILE

   El texto nunca se comprime ni sale del botón.
================================================================ */

@media (max-width:767px) {

    .systems-main
    .systems-button {

        width: 100%;

        min-width: 0;

        justify-content: center;
    }


    .systems-main
    .systems-button > span {

        white-space: normal;

        text-wrap: balance;
    }

}


/* ================================================================
   REDUCED MOTION
================================================================ */

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

    .systems-button--control::before,
    .systems-button--control::after,
    .systems-button--open > i {

        transition: none !important;
    }

}




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

.systems-control {

    position: relative;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.14);

    background:
        rgba(10,11,14,.80);

    backdrop-filter: blur(10px);

    overflow: hidden;

    transition:
        transform 340ms cubic-bezier(.22,1,.36,1),
        border-color 280ms ease;
}


.systems-control::before {

    content: "";

    position: absolute;

    left: -1px;
    top: -1px;

    width: 3rem;
    height: 3rem;

    border-left: 1px solid #B5204A;
    border-top: 1px solid #B5204A;
}


.systems-control__header {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    padding-bottom: .9rem;

    border-bottom:
        1px solid
        rgba(151,154,162,.10);

    font-family: var(--font-mono);

    font-size: .59rem;

    letter-spacing: .10em;

    color: var(--color-text-muted);
}


.systems-control__header strong {

    color: #B5204A;
}


.systems-control__display {

    display: grid;

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

    gap: .5rem;

    align-items: center;

    padding: 2rem 0;
}


.systems-control__node {

    display: grid;

    gap: .55rem;

    min-width: 0;

    min-height: 8.5rem;

    padding: .75rem;

    align-content: center;

    text-align: center;

    border:
        1px solid
        rgba(151,154,162,.11);

    background:
        rgba(8,9,11,.58);

    transition:
        transform 300ms cubic-bezier(.22,1,.36,1),
        border-color 260ms ease,
        background 260ms ease;
}


.systems-control__node small,
.systems-control__node span {

    font-family: var(--font-mono);

    font-size: .55rem;

    color: var(--color-text-muted);
}


.systems-control__node strong {

    text-transform: uppercase;

    font-size: .8rem;
}


.systems-control__node--core {

    min-height: 10rem;

    border-color:
        rgba(181,32,74,.36);

    background:
        rgba(139,21,56,.075);
}


.systems-control__node--core span {

    color: #B5204A;
}


.systems-control__display > i {

    width: 1rem;
    height: 1px;

    background:
        rgba(181,32,74,.40);
}


.systems-control__status {

    display: grid;

    gap: .8rem;

    padding-top: .9rem;

    border-top:
        1px solid
        rgba(151,154,162,.10);
}


.systems-control__status > div {

    display: flex;

    justify-content: space-between;

    font-family: var(--font-mono);

    font-size: .58rem;

    color: var(--color-text-muted);
}


.systems-control__status strong {

    color: #B5204A;
}


.systems-control__rail {

    position: relative;

    height: 2px;

    overflow: hidden;

    background:
        rgba(151,154,162,.09);
}


.systems-control__rail i {

    position: absolute;

    left: -24%;

    width: 23%;
    height: 100%;

    background: #B5204A;

    animation:
        systemsControlRail
        3.6s
        ease-in-out
        infinite;
}


@media (hover:hover) and (pointer:fine) {

    .systems-control:hover {

        transform: translateY(-4px);

        border-color:
            rgba(181,32,74,.28);
    }


    .systems-control__node:hover {

        transform: translateY(-3px);

        border-color:
            rgba(181,32,74,.28);

        background:
            rgba(139,21,56,.055);
    }

}



/* ================================================================
   SERVICE NAV
================================================================ */

.systems-service-nav {

    position: relative;

    z-index: 3;

    border-top:
        1px solid
        rgba(151,154,162,.08);

    border-bottom:
        1px solid
        rgba(151,154,162,.08);

    background:
        rgba(8,9,11,.84);

    backdrop-filter: blur(12px);
}


.systems-service-nav__inner {

    display: grid;

    grid-template-columns:
        repeat(5,minmax(0,1fr));
}


.systems-service-nav a {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: .35rem;

    min-width: 0;

    padding: 1rem .8rem;

    color: var(--color-text-muted);

    border-right:
        1px solid
        rgba(151,154,162,.08);

    font-size: .76rem;

    transition:
        color 220ms ease,
        background 220ms ease;
}


.systems-service-nav a:last-child {

    border-right: 0;
}


.systems-service-nav a span {

    color: rgba(181,32,74,.70);

    font-family: var(--font-mono);

    font-size: .55rem;
}


.systems-service-nav
a[aria-current="page"] {

    color: #F3F3F1;

    background:
        rgba(139,21,56,.075);
}


.systems-service-nav
a[aria-current="page"]::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background: #B5204A;
}


@media (hover:hover) and (pointer:fine) {

    .systems-service-nav a:hover {

        color: #F3F3F1;

        background:
            rgba(139,21,56,.045);
    }

}



/* ================================================================
   COMMON HEADINGS
================================================================ */

.systems-problem h2,
.systems-architecture h2,
.systems-modules h2,
.systems-decision h2,
.systems-cta h2 {

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

    line-height: .96;

    letter-spacing: -.05em;

    text-transform: uppercase;

    text-wrap: balance;
}


.systems-problem h2 span,
.systems-architecture h2 span,
.systems-modules h2 span,
.systems-decision h2 span,
.systems-cta h2 span {

    color: #B5204A;
}



/* ================================================================
   PROBLEM
================================================================ */

.systems-problem__grid {

    display: grid;

    grid-template-columns:
        minmax(0,.95fr)
        minmax(0,.72fr);

    gap:
        clamp(3rem,8vw,8rem);
}


.systems-problem__copy {

    padding-left:
        clamp(1.3rem,3vw,2.8rem);

    border-left:
        1px solid
        rgba(181,32,74,.30);
}


.systems-problem__copy p {

    color: var(--color-text-soft);

    line-height: 1.8;
}


.systems-problem__copy strong {

    display: block;

    margin-top: 2rem;

    color: #F3F3F1;

    line-height: 1.6;
}



/* ================================================================
   ARCHITECTURE HEAD
================================================================ */

.systems-architecture {

    border-top:
        1px solid
        rgba(151,154,162,.08);
}


.systems-architecture__head,
.systems-decision__head {

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(18rem,.48fr);

    gap:
        clamp(2rem,7vw,7rem);

    align-items: end;

    margin-bottom:
        clamp(3rem,6vw,5rem);
}


.systems-architecture__head > p,
.systems-decision__head > p {

    margin: 0;

    color: var(--color-text-muted);

    line-height: 1.75;
}



/* ================================================================
   TABS
================================================================ */

.systems-console__tabs {

    display: grid;

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

    border:
        1px solid
        rgba(151,154,162,.11);

    border-bottom: 0;
}


.systems-tab {

    position: relative;

    display: grid;

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

    gap: .7rem;

    min-width: 0;

    min-height: 7rem;

    padding: 1rem;

    text-align: left;

    color: inherit;

    background:
        rgba(11,12,15,.72);

    border: 0;

    border-right:
        1px solid
        rgba(151,154,162,.10);

    cursor: pointer;

    overflow: hidden;

    transition:
        background 280ms ease,
        transform 280ms cubic-bezier(.22,1,.36,1);
}


.systems-tab:last-child {

    border-right: 0;
}


.systems-tab::before,
.systems-tab::after {

    content: "";

    position: absolute;

    bottom: 0;

    width: 50%;
    height: 2px;

    background: #B5204A;

    transition:
        transform
        400ms
        cubic-bezier(.22,1,.36,1);
}


.systems-tab::before {

    left: 0;

    transform: translateX(-102%);
}


.systems-tab::after {

    right: 0;

    transform: translateX(102%);
}


.systems-tab.is-active::before,
.systems-tab.is-active::after {

    transform: translateX(0);
}


.systems-tab > span {

    color: var(--color-text-muted);

    font-family: var(--font-mono);

    font-size: .61rem;
}


.systems-tab small {

    display: block;

    margin-bottom: .4rem;

    color: var(--color-text-muted);

    font-family: var(--font-mono);

    font-size: .55rem;

    letter-spacing: .09em;
}


.systems-tab strong {

    text-transform: uppercase;
}


.systems-tab.is-active {

    background:
        rgba(139,21,56,.075);
}


.systems-tab.is-active > span {

    color: #B5204A;
}


@media (hover:hover) and (pointer:fine) {

    .systems-tab:hover {

        transform: translateY(-3px);

        background:
            rgba(139,21,56,.045);
    }

}



/* ================================================================
   SYSTEM VIEW
================================================================ */

.systems-view {

    border:
        1px solid
        rgba(151,154,162,.11);

    background:
        rgba(9,10,13,.84);
}


.systems-view__top {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    align-items: center;

    padding: .9rem 1.1rem;

    border-bottom:
        1px solid
        rgba(151,154,162,.10);

    font-family: var(--font-mono);

    font-size: .6rem;

    letter-spacing: .11em;
}


.systems-view__top > div {

    display: flex;

    gap: 1rem;
}


.systems-view__top span {

    color: var(--color-text-muted);
}


.systems-view__top strong {

    color: #B5204A;
}


.systems-view__body {

    display: grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(25rem,1fr);
}


.systems-view__copy {

    padding:
        clamp(2rem,4vw,4rem);

    border-right:
        1px solid
        rgba(151,154,162,.10);
}


.systems-view__copy h3 {

    max-width: 10ch;

    margin-bottom: 1.4rem;

    font-size:
        clamp(2.4rem,4.7vw,4.7rem);

    line-height: .96;

    letter-spacing: -.045em;

    text-transform: uppercase;
}


.systems-view__copy > p {

    color: var(--color-text-soft);

    line-height: 1.75;
}


.systems-view__rule {

    margin-top: 2rem;

    padding:
        1rem;

    border:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(8,9,11,.45);
}


.systems-view__rule span {

    display: block;

    margin-bottom: .6rem;

    color: #B5204A;

    font-family: var(--font-mono);

    font-size: .58rem;

    letter-spacing: .11em;
}



/* ================================================================
   MAP
================================================================ */

.systems-map {

    position: relative;

    display: grid;

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

    gap: .55rem;

    align-items: center;

    min-height: 32rem;

    padding:
        clamp(1.5rem,3vw,2.4rem);

    background:

        linear-gradient(
            rgba(151,154,162,.027) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(151,154,162,.027) 1px,
            transparent 1px
        );

    background-size: 32px 32px;

    overflow: hidden;
}


.systems-map__module {

    position: relative;

    z-index: 2;

    display: grid;

    align-content: center;

    min-width: 0;

    min-height: 9rem;

    padding: .7rem;

    text-align: center;

    border:
        1px solid
        rgba(151,154,162,.13);

    background:
        rgba(10,11,14,.94);

    transition:
        transform 360ms cubic-bezier(.22,1,.36,1),
        border-color 300ms ease,
        background 300ms ease,
        box-shadow 300ms ease;
}


.systems-map__module span {

    margin-bottom: .7rem;

    color: var(--color-text-muted);

    font-family: var(--font-mono);

    font-size: .55rem;
}


.systems-map__module strong {

    font-size: .74rem;

    text-transform: uppercase;
}


.systems-map__module.is-emphasis {

    border-color:
        rgba(181,32,74,.48);

    background:
        rgba(139,21,56,.10);

    box-shadow:
        inset 0 0 0 1px
        rgba(181,32,74,.04);
}


.systems-map__module.is-emphasis span {

    color: #B5204A;
}


.systems-map__connection {

    position: relative;

    width: 1.3rem;
    height: 1px;

    background:
        rgba(151,154,162,.20);

    overflow: hidden;
}


.systems-map__connection i {

    position: absolute;

    left: -100%;

    width: 100%;
    height: 100%;

    background: #B5204A;

    animation:
        systemsMapConnection
        3.2s
        linear
        infinite;
}


.systems-map__connection:nth-of-type(4) i {

    animation-delay: -1s;
}


.systems-map__connection:nth-of-type(6) i {

    animation-delay: -2s;
}


.systems-map__axis {

    position: absolute;

    left: 8%;
    right: 8%;
    bottom: 2rem;

    height: 1px;

    background:
        rgba(151,154,162,.08);

    overflow: hidden;
}


.systems-map__axis i {

    position: absolute;

    left: -20%;

    width: 20%;
    height: 100%;

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

    animation:
        systemsMapAxis
        4.5s
        linear
        infinite;
}


.systems-view.is-changing
.systems-view__copy {

    animation:
        systemsCopyChange
        480ms
        cubic-bezier(.22,1,.36,1);
}


.systems-view.is-changing
.systems-map__module {

    animation:
        systemsModuleChange
        520ms
        cubic-bezier(.22,1,.36,1);
}



/* ================================================================
   MODULE CARDS
================================================================ */

.systems-modules {

    border-top:
        1px solid
        rgba(151,154,162,.08);
}


.systems-modules__head {

    max-width: 72rem;

    margin-bottom:
        clamp(3rem,6vw,5rem);
}


.systems-modules__grid {

    display: grid;

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

    gap: .7rem;
}


.systems-module {

    position: relative;

    min-height: 22rem;

    padding: 1.35rem;

    border:
        1px solid
        rgba(151,154,162,.11);

    background:
        rgba(12,13,16,.68);

    overflow: hidden;

    transition:
        transform 340ms cubic-bezier(.22,1,.36,1),
        border-color 280ms ease,
        background 280ms ease;
}


.systems-module > span {

    display: block;

    margin-bottom:
        clamp(3.5rem,6vw,5.5rem);

    color: #B5204A;

    font-family: var(--font-mono);

    font-size: .62rem;
}


.systems-module > small {

    display: block;

    margin-bottom: .65rem;

    color: var(--color-text-muted);

    font-family: var(--font-mono);

    font-size: .55rem;

    letter-spacing: .10em;
}


.systems-module h3 {

    margin-bottom: .8rem;

    font-size:
        clamp(1.35rem,2vw,1.8rem);

    text-transform: uppercase;
}


.systems-module p {

    margin: 0;

    color: var(--color-text-muted);

    font-size: .84rem;

    line-height: 1.7;
}


/*
Dos paneles interiores se abren hacia lados opuestos.
*/

.systems-module__panel i {

    position: absolute;

    top: .65rem;
    bottom: .65rem;

    width: 50%;

    border:
        1px solid
        rgba(181,32,74,.0);

    pointer-events: none;

    transition:
        transform 440ms cubic-bezier(.22,1,.36,1),
        border-color 280ms ease;
}


.systems-module__panel i:first-child {

    left: .65rem;

    border-right: 0;

    transform: translateX(-102%);
}


.systems-module__panel i:last-child {

    right: .65rem;

    border-left: 0;

    transform: translateX(102%);
}


@media (hover:hover) and (pointer:fine) {

    .systems-module:hover {

        transform: translateY(-5px);

        border-color:
            rgba(181,32,74,.24);

        background:
            rgba(139,21,56,.045);
    }


    .systems-module:hover
    .systems-module__panel i {

        transform: translateX(0);

        border-color:
            rgba(181,32,74,.24);
    }

}



/* ================================================================
   DECISION MATRIX
================================================================ */

.systems-decision__matrix {

    border-top:
        1px solid
        rgba(151,154,162,.12);
}


.systems-decision__row {

    position: relative;

    display: grid;

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

    gap: 1rem;

    align-items: center;

    padding:
        1.5rem .7rem;

    border-bottom:
        1px solid
        rgba(151,154,162,.10);

    overflow: hidden;

    transition:
        background 280ms ease,
        padding-left 320ms cubic-bezier(.22,1,.36,1);
}


.systems-decision__row > span {

    color: #B5204A;

    font-family: var(--font-mono);

    font-size: .61rem;
}


.systems-decision__row strong {

    font-size:
        clamp(.95rem,1.4vw,1.15rem);
}


.systems-decision__row small {

    padding:
        .35rem .55rem;

    border:
        1px solid
        rgba(151,154,162,.12);

    color: var(--color-text-muted);

    font-family: var(--font-mono);

    font-size: .55rem;

    letter-spacing: .08em;
}


.systems-decision__row > i {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

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

    transition:
        width
        450ms
        cubic-bezier(.22,1,.36,1);
}


@media (hover:hover) and (pointer:fine) {

    .systems-decision__row:hover {

        padding-left: 1.15rem;

        background:
            rgba(139,21,56,.035);
    }


    .systems-decision__row:hover > i {

        width: 42%;
    }

}



/* ================================================================
   FLOW
================================================================ */

.systems-flow {

    border-top:
        1px solid
        rgba(151,154,162,.08);

    border-bottom:
        1px solid
        rgba(151,154,162,.08);
}


.systems-flow__rail {

    display: grid;

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

    gap: .75rem;

    align-items: center;

    margin-top:
        clamp(2.5rem,5vw,4rem);
}


.systems-flow__rail article {

    display: grid;

    gap: .4rem;

    min-width: 0;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(11,12,15,.62);
}


.systems-flow__rail article span {

    color: #B5204A;

    font-family: var(--font-mono);

    font-size: .58rem;
}


.systems-flow__rail article strong {

    text-transform: uppercase;

    font-size: .88rem;
}


.systems-flow__rail article small {

    color: var(--color-text-muted);

    font-size: .68rem;
}


.systems-flow__rail > i {

    width: 2rem;
    height: 1px;

    background:
        rgba(181,32,74,.36);
}



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

.systems-cta__inner {

    display: grid;

    grid-template-columns:
        minmax(12rem,.35fr)
        minmax(0,1fr);

    gap:
        clamp(3rem,7vw,7rem);

    align-items: center;
}


.systems-cta__console {

    display: grid;

    gap: .65rem;

    padding: 1rem;

    border:
        1px solid
        rgba(151,154,162,.12);

    background:
        rgba(10,11,14,.70);
}


.systems-cta__console > span {

    padding: .65rem;

    color: var(--color-text-muted);

    font-family: var(--font-mono);

    font-size: .57rem;

    letter-spacing: .10em;

    border-bottom:
        1px solid
        rgba(151,154,162,.08);
}


.systems-cta__console > span:last-child {

    border-bottom: 0;

    border-top:
        1px solid
        rgba(151,154,162,.08);

    color: #B5204A;
}


.systems-cta__console > div {

    display: grid;

    grid-template-columns:
        2rem 1fr;

    gap: .8rem;

    align-items: center;

    min-height: 4.2rem;

    padding: .7rem;

    border:
        1px solid
        rgba(151,154,162,.10);

    background:
        rgba(8,9,11,.52);
}


.systems-cta__console i {

    color: #B5204A;

    font-family: var(--font-mono);

    font-size: .58rem;

    font-style: normal;
}


.systems-cta__console strong {

    font-size: .76rem;
}


.systems-cta__copy p {

    max-width: 44rem;

    margin:
        1.5rem 0 2rem;

    color: var(--color-text-muted);

    line-height: 1.75;
}



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

.systems-footer {

    position: relative;

    z-index: 3;

    padding:
        clamp(3.5rem,6vw,5.5rem)
        0
        1.5rem;

    background: #08090B;

    border-top:
        1px solid
        rgba(52,54,61,.55);
}


.systems-footer::before {

    content: "";

    position: absolute;

    left: 50%;
    top: -1px;

    width:
        min(8rem,28vw);

    height: 1px;

    transform:
        translateX(-50%);

    background: #B5204A;
}


.systems-footer
.site-footer__grid {

    display: grid;

    grid-template-columns:
        minmax(0,.8fr)
        minmax(0,1.2fr);

    gap:
        clamp(3rem,8vw,8rem);

    align-items: start;
}


.systems-footer
.site-footer__brand {

    display: flex;

    align-items: flex-start;

    gap: 1rem;
}


.systems-footer
.site-footer__brand > div {

    display: flex;

    flex-direction: column;

    gap: .4rem;
}


.systems-footer
.site-footer__brand strong {

    font-family: var(--font-display);

    text-transform: uppercase;
}


.systems-footer
.site-footer__brand > div span {

    color: var(--color-text-muted);

    font-size: .82rem;
}


.systems-footer
.site-footer__nav {

    display: grid;

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

    gap: 2rem;
}


.systems-footer
.site-footer__nav > div {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: .68rem;
}


.systems-footer
.site-footer__nav strong {

    margin-bottom: .25rem;

    color: #B5204A;

    font-family: var(--font-mono);

    font-size: .63rem;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.systems-footer
.site-footer__nav a {

    position: relative;

    width: fit-content;

    max-width: 100%;

    color: var(--color-text-muted);

    font-size: .87rem;
}


/*
Sin ::after local.
Marcador activo controlado por components.css.
*/


.systems-footer
.site-footer__bottom {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    margin-top: 4rem;

    padding-top: 1.25rem;

    border-top:
        1px solid
        rgba(52,54,61,.48);

    color:
        rgba(151,154,162,.58);

    font-family: var(--font-mono);

    font-size: .61rem;

    letter-spacing: .08em;

    text-transform: uppercase;
}



/* ================================================================
   TABLET
================================================================ */

@media (max-width: 1050px) {

    .systems-modules__grid {

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


    .systems-view__body {

        grid-template-columns: 1fr;
    }


    .systems-view__copy {

        border-right: 0;

        border-bottom:
            1px solid
            rgba(151,154,162,.10);
    }


    .systems-map {

        min-height: 25rem;
    }

}



/* ================================================================
   <= 900
================================================================ */

@media (max-width: 900px) {

    .systems-hero__grid,
    .systems-problem__grid,
    .systems-architecture__head,
    .systems-decision__head,
    .systems-cta__inner,
    .systems-footer
    .site-footer__grid {

        grid-template-columns: 1fr;
    }


    .systems-control {

        max-width: 40rem;
    }


    .systems-service-nav__inner {

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


    .systems-service-nav a {

        border-bottom:
            1px solid
            rgba(151,154,162,.08);
    }


    .systems-console__tabs {

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


    .systems-tab:nth-child(2) {

        border-right: 0;
    }


    .systems-flow__rail {

        grid-template-columns: 1fr;
    }


    .systems-flow__rail > i {

        width: 1px;
        height: 1.2rem;

        justify-self: center;
    }

}



/* ================================================================
   MOBILE
================================================================ */

@media (max-width: 767px) {

    .systems-field__svg {

        width:
            max(190vw,59rem);

        opacity: .28;
    }


    .systems-hero {

        min-height: 0;

        padding-top: 8rem;
    }


    .systems-hero h1 {

        max-width: 10ch;

        font-size:
            clamp(3rem,15vw,5.2rem);
    }


    .systems-hero__actions,
    .systems-cta__actions {

        display: grid;

        grid-template-columns: 1fr;
    }


    .systems-hero__actions .ap-button,
    .systems-cta__actions .ap-button {

        width: 100%;

        min-width: 0;

        justify-content: center;
    }


    .systems-control__display {

        grid-template-columns: 1fr;
    }


    .systems-control__display > i {

        width: 1px;
        height: 1rem;

        justify-self: center;
    }


    .systems-service-nav__inner {

        grid-template-columns: 1fr;
    }


    .systems-service-nav a {

        border-right: 0;
    }


    .systems-problem__copy {

        padding-left: 1rem;
    }


    .systems-console__tabs {

        grid-template-columns: 1fr;
    }


    .systems-tab {

        min-height: 5.8rem;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(151,154,162,.10);
    }


    .systems-tab:last-child {

        border-bottom: 0;
    }


    .systems-view__top {

        align-items: flex-start;
    }


    .systems-view__top > div {

        flex-direction: column;

        gap: .2rem;
    }


    .systems-view__copy {

        padding:
            1.5rem 1rem;
    }


    .systems-map {

        grid-template-columns: 1fr;

        min-height: 0;

        padding: 1rem;

        gap: .55rem;
    }


    .systems-map__connection {

        width: 1px;
        height: 1rem;

        justify-self: center;
    }


    .systems-map__connection i {

        left: 0;
        top: -100%;

        width: 100%;
        height: 100%;

        animation:
            systemsMapConnectionMobile
            3.2s
            linear
            infinite;
    }


    .systems-map__module {

        min-height: 6rem;
    }


    .systems-map__axis {

        display: none;
    }


    .systems-modules__grid {

        grid-template-columns: 1fr;
    }


    .systems-module {

        min-height: 17rem;
    }


    .systems-decision__row {

        grid-template-columns:
            2rem minmax(0,1fr);
    }


    .systems-decision__row small {

        grid-column:
            2 / -1;

        justify-self: start;
    }


    .systems-footer
    .site-footer__nav {

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

        gap:
            2rem 1.4rem;
    }


    .systems-footer
    .site-footer__bottom {

        flex-direction: column;

        align-items: flex-start;

        margin-top: 2.7rem;
    }

}



/* ================================================================
   SMALL MOBILE
================================================================ */

@media (max-width: 479px) {

    .systems-footer
    .site-footer__nav {

        grid-template-columns: 1fr;
    }

}



/* ================================================================
   ANIMATIONS
================================================================ */

@keyframes systemsControlRail {

    0%,
    100% {

        left: -24%;
    }

    50% {

        left: 102%;
    }

}


@keyframes systemsMapConnection {

    from {

        left: -100%;
    }

    to {

        left: 100%;
    }

}


@keyframes systemsMapConnectionMobile {

    from {

        top: -100%;
    }

    to {

        top: 100%;
    }

}


@keyframes systemsMapAxis {

    from {

        left: -20%;
    }

    to {

        left: 102%;
    }

}


@keyframes systemsCopyChange {

    from {

        opacity: .2;

        transform: translateY(.55rem);
    }

    to {

        opacity: 1;

        transform: translateY(0);
    }

}


@keyframes systemsModuleChange {

    0% {

        opacity: .28;

        transform: scale(.96);
    }

    100% {

        opacity: 1;

        transform: scale(1);
    }

}



/* ================================================================
   REDUCED MOTION
================================================================ */

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

    .systems-field__traveler,
    .systems-control__rail i,
    .systems-map__connection i,
    .systems-map__axis i {

        display: none;
    }


    .systems-view.is-changing
    .systems-view__copy,

    .systems-view.is-changing
    .systems-map__module {

        animation: none !important;
    }


    .systems-control,
    .systems-tab,
    .systems-module,
    .systems-decision__row {

        transition: none !important;
    }

}



/* AP SYSTEMS BACKGROUND MOTION V2 START */


/* ================================================================
   BACKGROUND / OPERATION MOTION

   La arquitectura deja de ser estática.
================================================================ */


/* ------------------------------------------------
   RUTA PRINCIPAL

   El patrón se desplaza por la arquitectura.
------------------------------------------------ */

.systems-field__route {

    stroke:
        rgba(181,32,74,.30);

    stroke-dasharray:
        7 18;

    animation:
        systemsFieldRouteFlowV2
        8s
        linear
        infinite;
}


/* ------------------------------------------------
   NÚCLEO

   Tres niveles de actividad distintos.
------------------------------------------------ */

.systems-field__core
rect:nth-child(1) {

    animation:
        systemsCoreOuterV2
        7s
        ease-in-out
        infinite;
}


.systems-field__core
rect:nth-child(2) {

    animation:
        systemsCoreMiddleV2
        5.4s
        ease-in-out
        infinite;
}


.systems-field__core
rect:nth-child(3) {

    animation:
        systemsCoreInnerV2
        4s
        ease-in-out
        infinite;
}


/* ------------------------------------------------
   MÓDULOS EXTERNOS

   Alternan actividad sin parpadear.
------------------------------------------------ */

.systems-field__modules
rect:nth-child(odd) {

    animation:
        systemsModulePulseAV2
        6.4s
        ease-in-out
        infinite;
}


.systems-field__modules
rect:nth-child(even) {

    animation:
        systemsModulePulseBV2
        6.4s
        ease-in-out
        infinite;
}


/* ------------------------------------------------
   SCANNER

   Una línea vertical recorre la arquitectura.
   Recta, discreta y técnica.
------------------------------------------------ */

.systems-field::after {

    content: "";

    position: absolute;

    z-index: 2;

    left: 12%;
    top: 12%;
    bottom: 12%;

    width: 1px;

    background:

        linear-gradient(
            180deg,
            transparent 0%,
            rgba(181,32,74,.05) 18%,
            rgba(181,32,74,.38) 48%,
            rgba(243,243,241,.18) 50%,
            rgba(181,32,74,.38) 52%,
            rgba(181,32,74,.05) 82%,
            transparent 100%
        );

    opacity: 0;

    box-shadow:

        0 0 .8rem
        rgba(181,32,74,.08);

    animation:
        systemsScannerV2
        11s
        cubic-bezier(.45,0,.55,1)
        infinite;
}


/* ------------------------------------------------
   Traveler existente

   Un poco más visible.
------------------------------------------------ */

.systems-field__traveler {

    fill:
        #B5204A;

    filter:

        drop-shadow(
            0 0 5px
            rgba(181,32,74,.85)
        )

        drop-shadow(
            0 0 12px
            rgba(181,32,74,.35)
        );

    animation:
        systemsTravelerPulseV2
        1.8s
        ease-in-out
        infinite;
}


/* ================================================================
   ANIMACIONES
================================================================ */

@keyframes systemsFieldRouteFlowV2 {

    from {

        stroke-dashoffset: 0;
    }

    to {

        stroke-dashoffset: -100;
    }

}


@keyframes systemsCoreOuterV2 {

    0%,
    100% {

        stroke:
            rgba(151,154,162,.06);

        opacity: .48;
    }


    50% {

        stroke:
            rgba(151,154,162,.16);

        opacity: .88;
    }

}


@keyframes systemsCoreMiddleV2 {

    0%,
    100% {

        stroke:
            rgba(181,32,74,.15);

        opacity: .45;
    }


    50% {

        stroke:
            rgba(181,32,74,.38);

        opacity: 1;
    }

}


@keyframes systemsCoreInnerV2 {

    0%,
    100% {

        fill:
            rgba(139,21,56,.05);

        stroke:
            rgba(181,32,74,.27);
    }


    50% {

        fill:
            rgba(139,21,56,.16);

        stroke:
            rgba(243,243,241,.38);
    }

}


@keyframes systemsModulePulseAV2 {

    0%,
    100% {

        stroke:
            rgba(151,154,162,.045);

        opacity: .42;
    }


    50% {

        stroke:
            rgba(181,32,74,.18);

        opacity: .82;
    }

}


@keyframes systemsModulePulseBV2 {

    0%,
    100% {

        stroke:
            rgba(181,32,74,.15);

        opacity: .78;
    }


    50% {

        stroke:
            rgba(151,154,162,.05);

        opacity: .38;
    }

}


@keyframes systemsScannerV2 {

    0% {

        left: 12%;

        opacity: 0;
    }


    10% {

        opacity: .38;
    }


    48% {

        opacity: .18;
    }


    50% {

        left: 88%;

        opacity: .42;
    }


    60% {

        opacity: .18;
    }


    90% {

        opacity: .38;
    }


    100% {

        left: 12%;

        opacity: 0;
    }

}


@keyframes systemsTravelerPulseV2 {

    0%,
    100% {

        opacity: .55;
    }


    50% {

        opacity: 1;
    }

}


/* ================================================================
   MOBILE

   Menos intensidad para no ensuciar la pantalla.
================================================================ */

@media (max-width:767px) {

    .systems-field::after {

        top: 18%;
        bottom: 18%;

        opacity: .16;
    }


    .systems-field__route {

        stroke:
            rgba(181,32,74,.22);
    }

}


/* ================================================================
   REDUCED MOTION
================================================================ */

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

    .systems-field::after {

        display: none;
    }


    .systems-field__route,
    .systems-field__core rect,
    .systems-field__modules rect,
    .systems-field__traveler {

        animation:
            none !important;
    }

}


/* AP SYSTEMS BACKGROUND MOTION V2 END */