/* ================================================================
   AP NEURAL WEB — MANTENIMIENTO / CONTINUITY SYSTEM V1
================================================================ */

.page-service-maintenance {
    background: #08090B;
    overflow-x: clip;
}

.maintenance-main {
    position: relative;
    z-index: 2;
}


/* ================================================================
   BACKGROUND / MAINTENANCE NETWORK V4 — XML SAFE
================================================================ */

.maintenance-field {

    position: fixed;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 58% 47%,
            rgba(181,32,74,.12),
            transparent 25rem
        ),

        radial-gradient(
            circle at 58% 47%,
            rgba(88,11,35,.09),
            transparent 46rem
        ),

        #08090B;
}


/* ================================================================
   SVG COMPLETO
================================================================ */

.maintenance-field__inline {

    position: absolute;

    z-index: 2;

    left: 56%;
    top: 49%;

    width:
        min(108vw,102rem);

    max-width: none;

    height: auto;

    overflow: visible;

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

    transform-origin: center;

    opacity: .63;

    animation:
        maintenanceNetworkFloatV4
        14s
        ease-in-out
        infinite;
}


/* ================================================================
   IMPORTANTE

   Conservamos los 112 shapes del SVG.
   No convertimos el diseño completo en simples líneas.
================================================================ */

.maintenance-network__path {

    vector-effect:
        non-scaling-stroke;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* estructura profunda */

.maintenance-network__path--base {

    fill:
        #580B23 !important;

    stroke:
        none !important;

    opacity:
        .33;
}


/* elementos secundarios */

.maintenance-network__path--medium {

    fill:
        #8B1538 !important;

    stroke:
        rgba(181,32,74,.26) !important;

    stroke-width:
        .55px;

    opacity:
        .42;

    filter:
        url(#maintenanceGlowSoftV4);

    animation:
        maintenanceGlowMediumV4
        7.5s
        ease-in-out
        infinite;
}


/* conexiones activas */

.maintenance-network__path--signal {

    fill:
        #8B1538 !important;

    stroke:
        #B5204A !important;

    stroke-width:
        .8px;

    opacity:
        .57;

    filter:
        url(#maintenanceGlowSoftV4);

    animation:
        maintenanceGlowSignalV4
        6s
        ease-in-out
        infinite;
}


/* acentos */

.maintenance-network__path--hot {

    fill:
        #B5204A !important;

    stroke:
        #CF5578 !important;

    stroke-width:
        .9px;

    opacity:
        .68;

    filter:
        url(#maintenanceGlowHotV4);

    animation:
        maintenanceGlowHotV4
        5s
        ease-in-out
        infinite;
}


/* ================================================================
   TRAYECTORIAS DE LUZ

   Punto/segmento fino viajando por 12 trazados reales.
================================================================ */

.maintenance-network__energy-layer {

    fill:
        none !important;

    pointer-events:
        none;
}


.maintenance-network__energy {

    fill:
        none !important;

    stroke:
        #F05A82 !important;

    stroke-width:
        1.25px;

    vector-effect:
        non-scaling-stroke;

    stroke-linecap:
        round;

    stroke-dasharray:
        4 96;

    stroke-dashoffset:
        0;

    opacity:
        .74;

    filter:
        url(#maintenanceGlowHotV4);

    animation:
        maintenanceEnergyV4
        8s
        linear
        infinite;
}


.maintenance-network__energy--1 {
    animation-delay: -2s;
}

.maintenance-network__energy--2 {
    animation-delay: -4s;
}

.maintenance-network__energy--3 {
    animation-delay: -6s;
}


/* ================================================================
   LUZ AMBIENTAL
================================================================ */

.maintenance-field::before {

    content: "";

    position: absolute;

    z-index: 1;

    left: 57%;
    top: 48%;

    width:
        min(55vw,52rem);

    aspect-ratio:
        1;

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

    background:

        radial-gradient(
            circle,
            rgba(181,32,74,.12),
            rgba(139,21,56,.04) 38%,
            transparent 70%
        );

    filter:
        blur(13px);

    animation:
        maintenanceAmbientV4
        8s
        ease-in-out
        infinite;
}


/* ================================================================
   LEGIBILIDAD
================================================================ */

.maintenance-field::after {

    content: "";

    position: absolute;

    z-index: 4;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(8,9,11,.82) 0%,
            rgba(8,9,11,.55) 22%,
            rgba(8,9,11,.14) 46%,
            rgba(8,9,11,.035) 69%,
            rgba(8,9,11,.27) 100%
        ),

        linear-gradient(
            180deg,
            rgba(8,9,11,.15),
            transparent 39%,
            rgba(8,9,11,.38)
        );
}


/* ================================================================
   EFFECTS
================================================================ */

@keyframes maintenanceGlowMediumV4 {

    0%,
    100% {
        opacity: .34;
    }

    50% {
        opacity: .50;
    }

}


@keyframes maintenanceGlowSignalV4 {

    0%,
    100% {
        opacity: .46;
    }

    50% {
        opacity: .70;
    }

}


@keyframes maintenanceGlowHotV4 {

    0%,
    100% {
        opacity: .56;
    }

    50% {
        opacity: .82;
    }

}


@keyframes maintenanceEnergyV4 {

    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -100;
    }

}


@keyframes maintenanceAmbientV4 {

    0%,
    100% {

        opacity: .44;

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

    50% {

        opacity: .70;

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

}


@keyframes maintenanceNetworkFloatV4 {

    0%,
    100% {

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

    50% {

        transform:
            translate(
                -50%,
                calc(-50% - 3px)
            )
            scale(1.015);
    }

}


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

@media (max-width:1000px) {

    .maintenance-field__inline {

        left: 54%;
        top: 45%;

        width:
            max(128vw,64rem);

        opacity: .54;
    }

}


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

@media (max-width:767px) {

    .maintenance-field {

        background:

            radial-gradient(
                circle at 50% 31%,
                rgba(181,32,74,.12),
                transparent 17rem
            ),

            #08090B;
    }


    .maintenance-field__inline {

        left: 50%;
        top: 33%;

        width: 65rem;

        opacity: .39;

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


    .maintenance-network__energy {

        opacity: .46;

        stroke-width: 1px;
    }


    .maintenance-network__path--hot {
        opacity: .58;
    }


    .maintenance-field::after {

        background:

            linear-gradient(
                180deg,
                rgba(8,9,11,.44) 0%,
                rgba(8,9,11,.12) 30%,
                rgba(8,9,11,.10) 49%,
                rgba(8,9,11,.61) 78%,
                rgba(8,9,11,.85) 100%
            );
    }


    @keyframes maintenanceNetworkFloatV4 {

        0%,
        100% {

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

        50% {

            transform:
                translate(
                    -50%,
                    calc(-50% - 2px)
                )
                scale(.905);
        }

    }

}


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

@media (max-width:479px) {

    .maintenance-field__inline {

        top: 31%;

        width: 57rem;

        opacity: .35;
    }

}


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

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

    .maintenance-field__inline,
    .maintenance-field::before,
    .maintenance-network__path,
    .maintenance-network__energy {

        animation:
            none !important;
    }

    .maintenance-network__energy-layer {
        display: none;
    }

}




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

.maintenance-hero {
    min-height:
        min(100svh,62rem);

    display: flex;
    align-items: center;

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

.maintenance-hero__grid {
    display: grid;

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

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

    align-items: end;
}

.maintenance-hero h1 {
    max-width: 9.5ch;

    margin-bottom: 2rem;

    font-size:
        clamp(3.8rem,7.4vw,8rem);

    line-height: .90;

    letter-spacing: -.06em;

    text-transform: uppercase;

    text-wrap: balance;
}

.maintenance-hero h1 span {
    display: block;

    color: #B5204A;
}

.maintenance-hero__lead {
    max-width: 44rem;

    margin-bottom: 2rem;

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

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

    line-height: 1.75;
}

.maintenance-hero__actions,
.maintenance-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}


/* ================================================================
   BUTTONS
================================================================ */

.maintenance-main
.maintenance-button {
    position: relative;

    isolation: isolate;

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

    text-align: center;

    overflow: hidden;
}

.maintenance-main
.maintenance-button > span {
    position: relative;
    z-index: 4;

    width: 100%;

    text-align: center;
}


/*
Un checkpoint aparece y recorre el borde inferior.
*/

.maintenance-button--check > i {
    position: absolute;

    left: .7rem;
    right: .7rem;
    bottom: .5rem;

    height: 1px;

    background:
        rgba(243,243,241,.08);

    opacity: 0;

    overflow: hidden;

    transition:
        opacity 180ms ease;
}

.maintenance-button--check > i::after {
    content: "";

    position: absolute;

    left: -18%;

    width: 16%;
    height: 100%;

    background: #F3F3F1;

    transition:
        left
        520ms
        cubic-bezier(.22,1,.36,1);
}

.maintenance-button--line > i {
    position: absolute;

    left: 50%;
    bottom: .5rem;

    width: 0;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        #B5204A;

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

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

    .maintenance-button--check:hover > i {
        opacity: 1;
    }

    .maintenance-button--check:hover > i::after {
        left: 103%;
    }

    .maintenance-button--line:hover > i {
        width:
            calc(100% - 1.4rem);
    }
}


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

.maintenance-status {
    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;
}

.maintenance-status::before {
    content: "";

    position: absolute;

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

    width: 3rem;
    height: 3rem;

    border-left:
        1px solid #B5204A;

    border-top:
        1px solid #B5204A;
}

.maintenance-status__top {
    display: flex;

    justify-content:
        space-between;

    gap: 1rem;

    padding-bottom: .9rem;

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

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

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

    font-size: .58rem;

    letter-spacing: .10em;
}

.maintenance-status__top strong {
    color: #B5204A;
}

.maintenance-status__core {
    display: grid;

    gap: .55rem;

    padding: 1.5rem 0;
}

.maintenance-status__row {
    display: grid;

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

    gap: .8rem;

    align-items: center;

    padding: .8rem;

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

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

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

.maintenance-status__row > span {
    color: #B5204A;

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

    font-size: .57rem;
}

.maintenance-status__row strong {
    text-transform: uppercase;

    font-size: .78rem;
}

.maintenance-status__row small {
    color:
        var(--color-text-muted);

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

    font-size: .53rem;
}

.maintenance-status__bottom {
    display: grid;

    gap: .7rem;

    padding-top: .9rem;

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

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

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

    font-size: .57rem;
}

.maintenance-status__signal {
    position: relative;

    height: 2px;

    overflow: hidden;

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

.maintenance-status__signal i {
    position: absolute;

    left: -22%;

    width: 20%;
    height: 100%;

    background: #B5204A;

    animation:
        maintenanceStatusSignal
        3.8s linear infinite;
}

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

    .maintenance-status:hover {
        transform:
            translateY(-4px);

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

    .maintenance-status__row:hover {
        transform:
            translateX(.3rem);

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


/* ================================================================
   SERVICES NAV
================================================================ */

.maintenance-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);
}

.maintenance-service-nav__inner {
    display: grid;

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

.maintenance-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;
}

.maintenance-service-nav a:last-child {
    border-right: 0;
}

.maintenance-service-nav a span {
    color:
        rgba(181,32,74,.70);

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

    font-size: .55rem;
}

.maintenance-service-nav
a[aria-current="page"] {
    color: #F3F3F1;

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

.maintenance-service-nav
a[aria-current="page"]::after {
    content: "";

    position: absolute;

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

    height: 2px;

    background: #B5204A;
}


/* ================================================================
   COMMON H2
================================================================ */

.maintenance-continuity h2,
.maintenance-control h2,
.maintenance-work h2,
.maintenance-coverage h2,
.maintenance-when h2,
.maintenance-cta h2 {
    font-size:
        clamp(2.7rem,5vw,5.4rem);

    line-height: .96;

    letter-spacing: -.05em;

    text-transform: uppercase;

    text-wrap: balance;
}

.maintenance-continuity h2 span,
.maintenance-control h2 span,
.maintenance-work h2 span,
.maintenance-coverage h2 span,
.maintenance-when h2 span,
.maintenance-cta h2 span {
    color: #B5204A;
}


/* ================================================================
   CONTINUITY
================================================================ */

.maintenance-continuity__grid {
    display: grid;

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

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

.maintenance-continuity__copy {
    padding-left:
        clamp(1.3rem,3vw,2.8rem);

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

.maintenance-continuity__copy p {
    color:
        var(--color-text-soft);

    line-height: 1.8;
}

.maintenance-continuity__copy strong {
    display: block;

    margin-top: 2rem;

    color: #F3F3F1;

    line-height: 1.65;
}


/* ================================================================
   LOGO / SAME LANGUAGE AS EMPRESA + CONTACTO
================================================================ */

.maintenance-brandflow {
    position: relative;

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

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

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(181,32,74,.075),
            transparent 25rem
        ),
        linear-gradient(
            90deg,
            rgba(139,21,56,.025),
            rgba(151,154,162,.018),
            rgba(139,21,56,.025)
        );
}

.maintenance-brandflow__grid {
    display: grid;

    grid-template-columns:
        minmax(0,.7fr)
        minmax(17rem,.65fr)
        minmax(0,.7fr);

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

    align-items: center;

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

.maintenance-brandflow__input,
.maintenance-brandflow__output {
    display: grid;

    gap: .55rem;
}

.maintenance-brandflow__input {
    text-align: right;
}

.maintenance-brandflow__output {
    text-align: left;
}

.maintenance-brandflow__input > span,
.maintenance-brandflow__output > span {
    color: #B5204A;

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

    font-size: .59rem;

    letter-spacing: .12em;
}

.maintenance-brandflow__input strong,
.maintenance-brandflow__output strong {
    font-family:
        var(--font-display);

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

    text-transform: uppercase;
}

.maintenance-brandflow__input small,
.maintenance-brandflow__output small {
    color:
        var(--color-text-muted);

    font-size: .72rem;
}

.maintenance-brandflow__center {
    display: grid;

    justify-items: center;

    gap: 1rem;

    text-align: center;
}

.maintenance-brandflow__center > strong {
    margin-top: .7rem;

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

    font-size:
        clamp(1.25rem,2vw,1.7rem);

    letter-spacing: .03em;

    text-transform: uppercase;
}

.maintenance-brandflow__center > span {
    color:
        var(--color-text-muted);

    font-size: .8rem;
}


/* LOGO */

.maintenance-brandflow__logo {
    position: relative;

    width:
        clamp(12rem,19vw,18rem);

    aspect-ratio: 1;

    display: grid;
    place-items: center;
}

.maintenance-brandflow__diamond {
    position: absolute;

    left: 50%;
    top: 50%;

    aspect-ratio: 1;

    transform:
        translate(-50%,-50%)
        rotate(45deg);

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

.maintenance-brandflow__diamond--outer {
    width: 74%;

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

.maintenance-brandflow__diamond--inner {
    width: 54%;

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

    box-shadow:
        0 0 1.8rem
        rgba(181,32,74,.035);
}


/*
Exactamente el motivo que el usuario aprobó:
white -> gray -> wine -> dark wine -> white.
*/

.maintenance-brandflow__logo-art {
    position: relative;

    z-index: 2;

    width: 40%;
    height: 40%;

    background:
        linear-gradient(
            150deg,
            #F3F3F1 0%,
            #BFC1C6 27%,
            #B5204A 57%,
            #8B1538 78%,
            #F3F3F1 100%
        );

    -webkit-mask:
        url("../../svg/ap-logo-animated.svg")
        center / contain no-repeat;

    mask:
        url("../../svg/ap-logo-animated.svg")
        center / contain no-repeat;

    filter:
        drop-shadow(
            0 0 8px
            rgba(181,32,74,.20)
        )
        drop-shadow(
            0 0 18px
            rgba(181,32,74,.06)
        );

    transition:
        transform
        500ms
        cubic-bezier(.22,1,.36,1),
        filter 360ms ease;
}

.maintenance-brandflow__logo::after {
    content: "";

    position: absolute;

    left: 26%;
    right: 26%;
    bottom: 6%;

    height: 1px;

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

    opacity: .65;
}

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

    .maintenance-brandflow__logo:hover
    .maintenance-brandflow__diamond--outer {
        transform:
            translate(-50%,-50%)
            rotate(135deg);

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

    .maintenance-brandflow__logo:hover
    .maintenance-brandflow__diamond--inner {
        transform:
            translate(-50%,-50%)
            rotate(-45deg);

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

        box-shadow:
            0 0 2.4rem
            rgba(181,32,74,.08);
    }

    .maintenance-brandflow__logo:hover
    .maintenance-brandflow__logo-art {
        transform:
            scale(1.075);

        filter:
            drop-shadow(
                0 0 10px
                rgba(181,32,74,.28)
            )
            drop-shadow(
                0 0 24px
                rgba(181,32,74,.10)
            );
    }
}


/* ROUTE */

.maintenance-brandflow__route {
    display: grid;

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

    gap: 1rem;

    align-items: center;

    width:
        min(65rem,88%);

    margin:
        2.5rem auto 0;
}

.maintenance-brandflow__route span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(181,32,74,.38)
        );
}

.maintenance-brandflow__route
span:last-child {
    transform:
        scaleX(-1);
}

.maintenance-brandflow__route i {
    width: 7px;
    height: 7px;

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

    transform:
        rotate(45deg);

    animation:
        maintenanceBrandPoint
        3.8s
        ease-in-out
        infinite;
}


/* ================================================================
   CONTROL HEAD
================================================================ */

.maintenance-control__head,
.maintenance-coverage__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);
}

.maintenance-control__head > p,
.maintenance-coverage__head > p {
    margin: 0;

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

    line-height: 1.75;
}


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

.maintenance-console__tabs {
    display: grid;

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

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

    border-bottom: 0;
}

.maintenance-tab {
    position: relative;

    display: grid;

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

    gap: .7rem;

    min-height: 7rem;

    padding: 1rem;

    color: inherit;

    text-align: left;

    border: 0;

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

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

    cursor: pointer;

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

.maintenance-tab:last-child {
    border-right: 0;
}

.maintenance-tab::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 0;
    height: 2px;

    transform:
        translateX(-50%);

    background:
        #B5204A;

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

.maintenance-tab.is-active::after {
    width: 100%;
}

.maintenance-tab > span {
    color:
        var(--color-text-muted);

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

    font-size: .61rem;
}

.maintenance-tab small {
    display: block;

    margin-bottom: .4rem;

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

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

    font-size: .54rem;

    letter-spacing: .10em;
}

.maintenance-tab strong {
    text-transform: uppercase;
}

.maintenance-tab.is-active {
    background:
        rgba(139,21,56,.075);
}

.maintenance-tab.is-active > span {
    color: #B5204A;
}

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

    .maintenance-tab:hover {
        transform:
            translateY(-3px);

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


/* ================================================================
   CONTROL VIEW
================================================================ */

.maintenance-view {
    border:
        1px solid
        rgba(151,154,162,.11);

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

.maintenance-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;
}

.maintenance-view__top > div {
    display: flex;
    gap: 1rem;
}

.maintenance-view__top span {
    color:
        var(--color-text-muted);
}

.maintenance-view__top strong {
    color: #B5204A;
}

.maintenance-view__body {
    display: grid;

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

.maintenance-view__copy {
    padding:
        clamp(2rem,4vw,4rem);

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

.maintenance-view__copy h3 {
    max-width: 11ch;

    margin-bottom: 1.4rem;

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

    line-height: .96;

    letter-spacing: -.045em;

    text-transform: uppercase;
}

.maintenance-view__copy > p {
    color:
        var(--color-text-soft);

    line-height: 1.75;
}

.maintenance-view__objective {
    margin-top: 2rem;

    padding: 1rem;

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

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

.maintenance-view__objective span {
    display: block;

    margin-bottom: .6rem;

    color: #B5204A;

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

    font-size: .58rem;

    letter-spacing: .11em;
}


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

.maintenance-map {
    position: relative;

    display: grid;

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

    gap: .55rem;

    align-items: center;

    min-height: 31rem;

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

    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;
}

.maintenance-map__node {
    display: grid;

    align-content: center;

    min-width: 0;
    min-height: 8rem;

    padding: .7rem;

    text-align: center;

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

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

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

.maintenance-map__node > span {
    margin-bottom: .7rem;

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

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

    font-size: .55rem;
}

.maintenance-map__node strong {
    font-size: .72rem;

    text-transform: uppercase;
}

.maintenance-map__node.is-active {
    border-color:
        rgba(181,32,74,.50);

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

.maintenance-map__node.is-active > span {
    color: #B5204A;
}

.maintenance-map > i {
    width: 1.2rem;
    height: 1px;

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

.maintenance-map__status {
    position: absolute;

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

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 1rem;

    align-items: center;

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

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

    font-size: .55rem;
}

.maintenance-map__status i {
    position: relative;

    height: 1px;

    overflow: hidden;

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

.maintenance-map__status i::after {
    content: "";

    position: absolute;

    left: -20%;

    width: 20%;
    height: 100%;

    background:
        #B5204A;

    animation:
        maintenanceMapSignal
        4s linear infinite;
}

.maintenance-map__status strong {
    color: #B5204A;
}

.maintenance-view.is-changing
.maintenance-view__copy {
    animation:
        maintenanceCopyChange
        470ms
        cubic-bezier(.22,1,.36,1);
}

.maintenance-view.is-changing
.maintenance-map__node {
    animation:
        maintenanceNodeChange
        520ms
        cubic-bezier(.22,1,.36,1);
}


/* ================================================================
   WORK CARDS
================================================================ */

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

.maintenance-work__head {
    max-width: 70rem;

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

.maintenance-work__grid {
    display: grid;

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

    gap: .7rem;
}

.maintenance-work-card {
    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
        330ms
        cubic-bezier(.22,1,.36,1),
        border-color 260ms ease,
        background 260ms ease;
}

.maintenance-work-card > span {
    display: block;

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

    color: #B5204A;

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

    font-size: .62rem;
}

.maintenance-work-card > small {
    display: block;

    margin-bottom: .65rem;

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

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

    font-size: .55rem;

    letter-spacing: .10em;
}

.maintenance-work-card h3 {
    margin-bottom: .8rem;

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

    text-transform: uppercase;
}

.maintenance-work-card p {
    margin: 0;

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

    font-size: .84rem;

    line-height: 1.7;
}

.maintenance-work-card__state {
    position: absolute;

    left: 1.3rem;
    right: 1.3rem;
    bottom: 1.2rem;

    display: grid;

    grid-template-columns:
        1fr auto;

    gap: 1rem;

    align-items: center;

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

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

    font-size: .54rem;
}

.maintenance-work-card__state i {
    height: 1px;

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

    transform:
        scaleX(.14);

    transform-origin: left;

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

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

    .maintenance-work-card:hover {
        transform:
            translateY(-5px);

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

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

    .maintenance-work-card:hover
    .maintenance-work-card__state i {
        transform:
            scaleX(1);

        background:
            #B5204A;
    }
}


/* ================================================================
   COVERAGE
================================================================ */

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

.maintenance-coverage__list article {
    position: relative;

    display: grid;

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

    gap: 1rem;

    align-items: center;

    padding:
        1.5rem .7rem;

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

    overflow: hidden;

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

.maintenance-coverage__list article > span {
    color: #B5204A;

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

    font-size: .61rem;
}

.maintenance-coverage__list article strong {
    text-transform: uppercase;
}

.maintenance-coverage__list article p {
    margin: 0;

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

    font-size: .84rem;

    line-height: 1.65;
}

.maintenance-coverage__list article > 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) {

    .maintenance-coverage__list article:hover {
        padding-left: 1.1rem;

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

    .maintenance-coverage__list article:hover > i {
        width: 38%;
    }
}


/* ================================================================
   CHANGE CONTROL
================================================================ */

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

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

.maintenance-change__track {
    display: grid;

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

    gap: .7rem;

    align-items: center;

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

.maintenance-change__track article {
    display: grid;

    gap: .4rem;

    min-width: 0;

    padding: 1rem;

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

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

.maintenance-change__track article span {
    color: #B5204A;

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

    font-size: .57rem;
}

.maintenance-change__track article small {
    color:
        var(--color-text-muted);

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

    font-size: .51rem;
}

.maintenance-change__track article strong {
    text-transform: uppercase;

    font-size: .82rem;
}

.maintenance-change__track > i {
    width: 1.7rem;
    height: 1px;

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


/* ================================================================
   WHEN
================================================================ */

.maintenance-when__head {
    max-width: 70rem;

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

.maintenance-when__matrix {
    display: grid;

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

    gap: .7rem;
}

.maintenance-when__matrix article {
    display: grid;

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

    gap: 1rem;

    align-items: center;

    min-height: 8rem;

    padding: 1rem;

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

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

.maintenance-when__matrix article span {
    color: #B5204A;

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

    font-size: .6rem;
}

.maintenance-when__matrix article strong {
    line-height: 1.55;
}


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

.maintenance-cta__inner {
    display: grid;

    grid-template-columns:
        minmax(11rem,.30fr)
        minmax(0,1fr);

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

    align-items: center;
}

.maintenance-cta__system {
    display: grid;

    gap: .55rem;

    padding: 1rem;

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

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

.maintenance-cta__system span {
    display: grid;

    place-items: center;

    min-height: 4rem;

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

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

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

    font-size: .58rem;
}

.maintenance-cta__system span:nth-of-type(2) {
    color: #B5204A;

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

.maintenance-cta__system i {
    width: 1px;
    height: .8rem;

    justify-self: center;

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

.maintenance-cta__copy p {
    max-width: 45rem;

    margin:
        1.5rem 0 2rem;

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

    line-height: 1.75;
}


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

.maintenance-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);
}

.maintenance-footer::before {
    content: "";

    position: absolute;

    left: 50%;
    top: -1px;

    width:
        min(8rem,28vw);

    height: 1px;

    transform:
        translateX(-50%);

    background: #B5204A;
}

.maintenance-footer
.site-footer__grid {
    display: grid;

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

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

    align-items: start;
}

.maintenance-footer
.site-footer__brand {
    display: flex;

    align-items: flex-start;

    gap: 1rem;
}

.maintenance-footer
.site-footer__brand > div {
    display: flex;
    flex-direction: column;

    gap: .4rem;
}

.maintenance-footer
.site-footer__brand strong {
    font-family:
        var(--font-display);

    text-transform: uppercase;
}

.maintenance-footer
.site-footer__brand > div span {
    color:
        var(--color-text-muted);

    font-size: .82rem;
}

.maintenance-footer
.site-footer__nav {
    display: grid;

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

    gap: 2rem;
}

.maintenance-footer
.site-footer__nav > div {
    display: flex;
    flex-direction: column;

    align-items: flex-start;

    gap: .68rem;
}

.maintenance-footer
.site-footer__nav strong {
    margin-bottom: .25rem;

    color: #B5204A;

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

    font-size: .63rem;

    letter-spacing: .12em;

    text-transform: uppercase;
}

.maintenance-footer
.site-footer__nav a {
    position: relative;

    width: fit-content;

    max-width: 100%;

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

    font-size: .87rem;
}


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

.maintenance-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) {

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

    .maintenance-view__body {
        grid-template-columns: 1fr;
    }

    .maintenance-view__copy {
        border-right: 0;

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


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

@media (max-width:900px) {

    .maintenance-hero__grid,
    .maintenance-continuity__grid,
    .maintenance-control__head,
    .maintenance-coverage__head,
    .maintenance-cta__inner,
    .maintenance-footer
    .site-footer__grid {
        grid-template-columns: 1fr;
    }

    .maintenance-status {
        max-width: 40rem;
    }

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

    .maintenance-service-nav a {
        border-bottom:
            1px solid
            rgba(151,154,162,.08);
    }

    .maintenance-brandflow__grid {
        grid-template-columns: 1fr;

        max-width: 42rem;

        margin-left: auto;
        margin-right: auto;
    }

    .maintenance-brandflow__input,
    .maintenance-brandflow__output {
        text-align: center;
    }

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

    .maintenance-tab:nth-child(2) {
        border-right: 0;
    }

    .maintenance-change__track {
        grid-template-columns: 1fr;
    }

    .maintenance-change__track > i {
        width: 1px;
        height: 1rem;

        justify-self: center;
    }
}


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

@media (max-width:767px) {

    .maintenance-field__svg {
        width:
            max(190vw,59rem);

        opacity: .28;
    }

    .maintenance-hero {
        min-height: 0;

        padding-top: 8rem;
    }

    .maintenance-hero h1 {
        max-width: 9ch;

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

    .maintenance-hero__actions,
    .maintenance-cta__actions {
        display: grid;

        grid-template-columns: 1fr;
    }

    .maintenance-hero__actions .ap-button,
    .maintenance-cta__actions .ap-button {
        width: 100%;

        min-width: 0;

        justify-content: center;
    }

    .maintenance-main
    .maintenance-button > span {
        white-space: normal;

        text-wrap: balance;
    }

    .maintenance-service-nav__inner {
        grid-template-columns: 1fr;
    }

    .maintenance-service-nav a {
        border-right: 0;
    }

    .maintenance-continuity__copy {
        padding-left: 1rem;
    }

    .maintenance-brandflow__logo {
        width:
            clamp(11rem,62vw,15rem);
    }

    .maintenance-brandflow__route {
        width: 100%;
    }

    .maintenance-console__tabs {
        grid-template-columns: 1fr;
    }

    .maintenance-tab {
        min-height: 5.7rem;

        border-right: 0;

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

    .maintenance-tab:last-child {
        border-bottom: 0;
    }

    .maintenance-view__top {
        align-items: flex-start;
    }

    .maintenance-view__top > div {
        flex-direction: column;

        gap: .2rem;
    }

    .maintenance-view__copy {
        padding:
            1.5rem 1rem;
    }

    .maintenance-map {
        grid-template-columns: 1fr;

        min-height: 0;

        padding:
            1rem 1rem 4rem;
    }

    .maintenance-map > i {
        width: 1px;
        height: 1rem;

        justify-self: center;
    }

    .maintenance-map__node {
        min-height: 6rem;
    }

    .maintenance-map__status {
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
    }

    .maintenance-work__grid {
        grid-template-columns: 1fr;
    }

    .maintenance-work-card {
        min-height: 17rem;
    }

    .maintenance-coverage__list article {
        grid-template-columns:
            2rem minmax(0,1fr);
    }

    .maintenance-coverage__list article p {
        grid-column:
            2 / -1;
    }

    .maintenance-when__matrix {
        grid-template-columns: 1fr;
    }

    .maintenance-footer
    .site-footer__nav {
        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            2rem 1.4rem;
    }

    .maintenance-footer
    .site-footer__bottom {
        flex-direction: column;

        align-items: flex-start;

        margin-top: 2.7rem;
    }
}


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

@media (max-width:479px) {

    .maintenance-footer
    .site-footer__nav {
        grid-template-columns: 1fr;
    }

    .maintenance-map__status {
        grid-template-columns:
            auto 1fr;

        gap: .5rem;
    }

    .maintenance-map__status strong {
        grid-column:
            1 / -1;
    }
}


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

@keyframes maintenanceCheckpoint {

    0%,
    78%,
    100% {
        stroke:
            rgba(151,154,162,.11);

        fill: transparent;
    }

    84% {
        stroke:
            rgba(181,32,74,.48);

        fill:
            rgba(139,21,56,.09);
    }

    90% {
        stroke:
            rgba(181,32,74,.20);

        fill:
            rgba(139,21,56,.025);
    }
}

@keyframes maintenanceStatusSignal {

    from {
        left: -22%;
    }

    to {
        left: 102%;
    }
}

@keyframes maintenanceBrandPoint {

    0%,
    100% {
        opacity: .38;

        transform:
            rotate(45deg)
            scale(.9);
    }

    50% {
        opacity: 1;

        transform:
            rotate(45deg)
            scale(1.15);
    }
}

@keyframes maintenanceMapSignal {

    from {
        left: -20%;
    }

    to {
        left: 102%;
    }
}

@keyframes maintenanceCopyChange {

    from {
        opacity: .2;

        transform:
            translateY(.55rem);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }
}

@keyframes maintenanceNodeChange {

    0% {
        opacity: .25;

        transform:
            scale(.96);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);
    }
}


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

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

    .maintenance-field__checkpoint,
    .maintenance-status__signal i,
    .maintenance-brandflow__route i,
    .maintenance-map__status i::after {
        animation: none !important;
    }

    .maintenance-field__traveler {
        display: none;
    }

    .maintenance-view.is-changing
    .maintenance-view__copy,

    .maintenance-view.is-changing
    .maintenance-map__node {
        animation: none !important;
    }

    .maintenance-status,
    .maintenance-tab,
    .maintenance-work-card,
    .maintenance-coverage__list article,
    .maintenance-brandflow__diamond,
    .maintenance-brandflow__logo-art {
        transition: none !important;
    }
}