/* ================================================================
   AP NEURAL WEB — DESARROLLO WEB / BUILD INTERFACE V1
================================================================ */


.page-service-web {

    background:
        #08090B;

    overflow-x:
        clip;
}


.web-main {

    position: relative;

    z-index: 2;
}



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

.web-field {

    position: fixed;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 50% 48%,
            rgba(181,32,74,.06),
            transparent 27rem
        ),

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


.web-field__svg {

    position: absolute;

    left: 50%;
    top: 50%;

    width:
        max(108vw,92rem);

    height: auto;

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

    opacity: .42;
}


.web-field__frames rect,
.web-field__layout path,
.web-field__route {

    fill: none;

    vector-effect:
        non-scaling-stroke;
}


.web-field__frames rect {

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

    stroke-width: 1;
}


.web-field__layout path {

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

    stroke-width: 1;

    stroke-dasharray:
        2 13;
}


.web-field__route {

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

    stroke-width: 1;

    stroke-dasharray:
        6 14;
}


.web-field__traveler {

    fill:
        #B5204A;

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



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

.web-hero {

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

    display: flex;

    align-items: center;

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


.web-hero__grid {

    display: grid;

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

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

    align-items: end;
}


.web-hero h1 {

    max-width: 10.5ch;

    margin-bottom: 2rem;

    font-size:
        clamp(3.7rem,7.4vw,7.9rem);

    line-height: .90;

    letter-spacing: -.06em;

    text-transform: uppercase;

    text-wrap: balance;
}


.web-hero h1 span {

    display: block;

    color:
        #B5204A;
}


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


.web-hero__actions,
.web-cta__actions {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem;
}



/* ================================================================
   BUTTONS / BUILD EFFECT
================================================================ */

.web-main .web-button {

    position: relative;

    isolation: isolate;

    overflow: hidden;
}


.web-main
.web-button > span {

    position: relative;

    z-index: 4;
}


/*
Dos paneles rectos se ensamblan.
No repite el barrido de Contacto.
*/

.web-button--build::before,
.web-button--build::after {

    content: "";

    position: absolute;

    z-index: 2;

    top: 0;
    bottom: 0;

    width: 52%;

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

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


.web-button--build::before {

    left: 0;

    transform:
        translateX(-103%);
}


.web-button--build::after {

    right: 0;

    transform:
        translateX(103%);
}


.web-button--inspect > i {

    position: absolute;

    left: .7rem;
    right: .7rem;

    bottom: .55rem;

    height: 1px;

    background:
        #B5204A;

    transform:
        scaleX(.16);

    transform-origin:
        center;

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


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

    .web-button--build:hover::before,
    .web-button--build:hover::after {

        transform:
            translateX(0);
    }


    .web-button--inspect:hover > i {

        transform:
            scaleX(1);
    }

}



/* ================================================================
   BROWSER
================================================================ */

.web-browser {

    position: relative;

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

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

    overflow: hidden;

    backdrop-filter:
        blur(10px);

    transition:

        transform
        360ms
        cubic-bezier(.22,1,.36,1),

        border-color
        300ms ease,

        box-shadow
        340ms ease;
}


.web-browser__top {

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    gap: 1rem;

    align-items: center;

    min-height: 3rem;

    padding:
        .7rem .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: .09em;
}


.web-browser__top > div {

    display: flex;

    gap: .35rem;
}


.web-browser__top > div i {

    width: 5px;
    height: 5px;

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


.web-browser__top > div i:nth-child(2) {

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


.web-browser__top > span:nth-child(2) {

    text-align: center;
}


.web-browser__top > span:last-child {

    color:
        #B5204A;
}


.web-browser__viewport {

    position: relative;

    min-height: 24rem;

    padding: 1rem;

    background:

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

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

    background-size:
        28px 28px;
}


.web-browser__nav {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    height: 2.4rem;

    padding:
        0 .7rem;

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

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


.web-browser__nav > span {

    width: 4rem;
    height: .42rem;

    background:
        rgba(243,243,241,.65);
}


.web-browser__nav > div {

    display: flex;

    gap: .45rem;
}


.web-browser__nav i {

    width: 1.2rem;
    height: .28rem;

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


.web-browser__hero {

    display: grid;

    align-content: center;

    min-height: 12rem;

    padding:
        1.1rem;

    margin-top: .7rem;

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

    background:
        rgba(16,17,20,.60);
}


.web-browser__hero > span {

    width: 3.4rem;
    height: .35rem;

    margin-bottom: 1rem;

    background:
        #B5204A;
}


.web-browser__hero > strong {

    display: block;

    height: .72rem;

    margin-bottom: .45rem;

    background:
        rgba(243,243,241,.78);
}


.web-browser__hero > strong:nth-of-type(1) {

    width: 77%;
}


.web-browser__hero > strong:nth-of-type(2) {

    width: 52%;

    opacity: .45;
}


.web-browser__hero > div {

    display: flex;

    gap: .5rem;

    margin-top: 1.2rem;
}


.web-browser__hero > div i {

    display: block;

    width: 5.5rem;
    height: 1.55rem;

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


.web-browser__hero > div i:first-child {

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

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


.web-browser__cards {

    display: grid;

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

    gap: .5rem;

    margin-top: .7rem;
}


.web-browser__cards span {

    height: 4.2rem;

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

    background:
        rgba(12,13,16,.66);
}


.web-browser__scan {

    position: absolute;

    left: 0;
    top: -1px;

    width: 100%;
    height: 1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            #B5204A,
            rgba(243,243,241,.62),
            #B5204A,
            transparent
        );

    box-shadow:
        0 0 .7rem
        rgba(181,32,74,.18);

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


.web-browser__bottom {

    display: flex;

    justify-content:
        space-between;

    padding:
        .75rem .9rem;

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

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

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

    font-size: .57rem;

    letter-spacing: .09em;
}


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

    .web-browser:hover {

        transform:
            translateY(-4px);

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

        box-shadow:
            0 2rem 5rem
            rgba(0,0,0,.18);
    }

}



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

.web-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,.82);

    backdrop-filter:
        blur(12px);
}


.web-service-nav__inner {

    display: grid;

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


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


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

    border-right: 0;
}


.web-service-nav a span {

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

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

    font-size: .55rem;
}


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

    color:
        #F3F3F1;

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


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

    .web-service-nav a:hover {

        color:
            #F3F3F1;

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

}



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

.web-problem {

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


.web-problem__grid {

    display: grid;

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

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


.web-problem h2,
.web-build h2,
.web-types h2,
.web-engineering h2,
.web-cta h2 {

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

    line-height: .96;

    letter-spacing: -.05em;

    text-transform: uppercase;

    text-wrap: balance;
}


.web-problem h2 span,
.web-build h2 span,
.web-types h2 span,
.web-engineering h2 span,
.web-cta h2 span {

    color:
        #B5204A;
}


.web-problem__copy {

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

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


.web-problem__copy p {

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

    line-height: 1.8;
}


.web-problem__copy strong {

    display: block;

    margin-top: 2rem;

    color:
        #F3F3F1;

    line-height: 1.6;
}



/* ================================================================
   BUILD HEAD
================================================================ */

.web-build__head,
.web-engineering__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);
}


.web-build__head > p,
.web-engineering__head > p {

    margin: 0;

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

    line-height: 1.75;
}



/* ================================================================
   BUILD STAGES
================================================================ */

.web-builder__stages {

    display: grid;

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

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

    border-bottom: 0;
}


.web-build-stage {

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


.web-build-stage:last-child {

    border-right: 0;
}


.web-build-stage::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    width: 0;
    height: 0;

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

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

    transition:

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

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

        border-color
        280ms ease;
}


.web-build-stage::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        #B5204A;

    transform:
        scaleX(0);

    transform-origin:
        center;

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


.web-build-stage > span {

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

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

    font-size: .62rem;
}


.web-build-stage small {

    display: block;

    margin-bottom: .45rem;

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

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

    font-size: .55rem;

    letter-spacing: .10em;
}


.web-build-stage strong {

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

    text-transform: uppercase;
}


.web-build-stage.is-active {

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


.web-build-stage.is-active::after {

    transform:
        scaleX(1);
}


.web-build-stage.is-active > span {

    color:
        #B5204A;
}


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

    .web-build-stage:hover {

        transform:
            translateY(-3px);
    }


    .web-build-stage:hover::before {

        width:
            calc(100% - 1rem);

        height:
            calc(100% - 1rem);

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

}



/* ================================================================
   BUILDER VIEW
================================================================ */

.web-builder__view {

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

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


.web-builder__view-top {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 1rem;

    padding:
        .9rem 1.1rem;

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

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

    font-size: .6rem;

    letter-spacing: .11em;
}


.web-builder__view-top > div {

    display: flex;

    gap: 1rem;
}


.web-builder__view-top span {

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


.web-builder__view-top strong {

    color:
        #B5204A;
}


.web-builder__view-body {

    display: grid;

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


.web-builder__copy {

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

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


.web-builder__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;
}


.web-builder__copy p {

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

    line-height: 1.75;
}


.web-builder__metric {

    margin-top: 2rem;

    padding-top: 1rem;

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


.web-builder__metric span {

    display: block;

    margin-bottom: .6rem;

    color:
        #B5204A;

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

    font-size: .59rem;

    letter-spacing: .11em;
}



/* ================================================================
   CANVAS
================================================================ */

.web-canvas {

    position: relative;

    min-height: 32rem;

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

    background:

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

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

    background-size:
        32px 32px;

    overflow: hidden;
}


.web-canvas__header {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    min-height: 3rem;

    padding:
        0 .8rem;

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

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


.web-canvas__header > span {

    width: 4.4rem;
    height: .42rem;

    background:
        rgba(243,243,241,.70);
}


.web-canvas__header > div {

    display: flex;

    gap: .4rem;
}


.web-canvas__header i {

    width: 1.3rem;
    height: .28rem;

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


.web-canvas__layout {

    display: grid;

    grid-template-columns:
        1.25fr .75fr;

    grid-template-rows:
        8rem 5rem 4rem;

    gap: .65rem;

    margin-top: .65rem;
}


.web-canvas__block {

    position: relative;

    padding: .8rem;

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

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

    overflow: hidden;

    transition:

        transform
        440ms
        cubic-bezier(.22,1,.36,1),

        border-color
        320ms ease,

        background
        320ms ease;
}


.web-canvas__block small {

    display: block;

    margin-bottom: .55rem;

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

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

    font-size: .54rem;
}


.web-canvas__block strong {

    text-transform: uppercase;

    font-size:
        clamp(.9rem,1.5vw,1.2rem);
}


.web-canvas__block--hero {

    grid-row:
        1 / span 2;
}


.web-canvas__block--side {

    grid-column: 2;

    grid-row:
        1;
}


.web-canvas__block--a,
.web-canvas__block--b {

    display: grid;

    place-items: center;
}


.web-canvas__block--a span,
.web-canvas__block--b span {

    width: 55%;
    height: 34%;

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


.web-canvas__block--cta {

    grid-column:
        1 / -1;

    display: flex;

    justify-content:
        center;

    align-items: center;

    color:
        #F3F3F1;

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

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

    text-transform: uppercase;
}


.web-canvas__signal {

    position: absolute;

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

    height: 2px;

    overflow: hidden;

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


.web-canvas__signal i {

    position: absolute;

    left: -20%;

    width: 20%;
    height: 100%;

    background:
        #B5204A;

    animation:
        webCanvasSignal
        3.4s
        linear
        infinite;
}


.web-builder__view.is-changing
.web-builder__copy {

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


.web-builder__view.is-changing
.web-canvas__block {

    animation:
        webBlockAssemble
        560ms
        cubic-bezier(.22,1,.36,1);
}



/* ================================================================
   TYPES
================================================================ */

.web-types {

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


.web-types__head {

    max-width: 72rem;

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


.web-types__grid {

    display: grid;

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

    gap: .7rem;
}


.web-type-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
        340ms
        cubic-bezier(.22,1,.36,1),

        background
        280ms ease,

        border-color
        280ms ease;
}


.web-type-card > span {

    display: block;

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

    color:
        #B5204A;

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

    font-size: .62rem;
}


.web-type-card > small {

    display: block;

    margin-bottom: .65rem;

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

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

    font-size: .56rem;

    letter-spacing: .10em;
}


.web-type-card h3 {

    margin-bottom: .8rem;

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

    line-height: 1.05;

    text-transform: uppercase;
}


.web-type-card p {

    margin: 0;

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

    font-size: .84rem;

    line-height: 1.7;
}


/*
Marco que se ensambla desde el centro.
*/

.web-type-card__frame {

    position: absolute;

    inset: .65rem;

    pointer-events: none;

    opacity: 0;

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

    transform:
        scale(.88);

    transition:

        opacity
        260ms ease,

        transform
        420ms
        cubic-bezier(.22,1,.36,1),

        border-color
        260ms ease;
}


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

    .web-type-card:hover {

        transform:
            translateY(-5px);

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

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


    .web-type-card:hover
    .web-type-card__frame {

        opacity: 1;

        transform:
            scale(1);

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

}



/* ================================================================
   ENGINEERING
================================================================ */

.web-engineering__list {

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


.web-engineering__item {

    position: relative;

    display: grid;

    grid-template-columns:
        3rem
        minmax(12rem,.65fr)
        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
        340ms
        cubic-bezier(.22,1,.36,1),

        background
        280ms ease;
}


.web-engineering__item > span {

    color:
        #B5204A;

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

    font-size: .62rem;
}


.web-engineering__item strong {

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

    font-size:
        clamp(1.15rem,1.8vw,1.6rem);

    text-transform: uppercase;
}


.web-engineering__item p {

    margin: 0;

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

    font-size: .84rem;

    line-height: 1.65;
}


.web-engineering__item > i {

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background:

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

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


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

    .web-engineering__item:hover {

        padding-left: 1.15rem;

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


    .web-engineering__item:hover > i {

        width: 34%;
    }

}



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

.web-flow {

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

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


.web-flow__track {

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


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


.web-flow__track article span {

    color:
        #B5204A;

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

    font-size: .58rem;
}


.web-flow__track article strong {

    text-transform: uppercase;

    font-size: .88rem;
}


.web-flow__track article small {

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

    font-size: .68rem;
}


.web-flow__track > i {

    width: 2rem;
    height: 1px;

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



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

.web-cta__inner {

    display: grid;

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

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

    align-items: stretch;
}


.web-cta__technical {

    display: grid;

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

    grid-template-rows:
        repeat(2,1fr);

    min-height: 23rem;

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

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


.web-cta__technical span {

    display: grid;

    place-items: center;

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

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

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

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

    font-size: .62rem;
}


.web-cta__technical span:nth-child(2),
.web-cta__technical span:nth-child(4) {

    border-right: 0;
}


.web-cta__technical span:nth-child(3),
.web-cta__technical span:nth-child(4) {

    border-bottom: 0;
}


.web-cta__technical span:nth-child(2) {

    color:
        #B5204A;

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

    font-size:
        clamp(2rem,4vw,4rem);
}


.web-cta__copy {

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.web-cta__copy p {

    max-width: 45rem;

    margin:
        1.5rem 0 2rem;

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

    line-height: 1.75;
}



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

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


.web-footer::before {

    content: "";

    position: absolute;

    left: 50%;
    top: -1px;

    width:
        min(8rem,28vw);

    height: 1px;

    transform:
        translateX(-50%);

    background:
        #B5204A;
}


.web-footer
.site-footer__grid {

    display: grid;

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

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

    align-items: start;
}


.web-footer
.site-footer__brand {

    display: flex;

    align-items: flex-start;

    gap: 1rem;
}


.web-footer
.site-footer__brand > div {

    display: flex;

    flex-direction: column;

    gap: .4rem;
}


.web-footer
.site-footer__brand strong {

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

    text-transform: uppercase;
}


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

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

    font-size: .82rem;
}


.web-footer
.site-footer__nav {

    display: grid;

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

    gap: 2rem;
}


.web-footer
.site-footer__nav > div {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: .68rem;
}


.web-footer
.site-footer__nav strong {

    margin-bottom: .25rem;

    color:
        #B5204A;

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

    font-size: .63rem;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.web-footer
.site-footer__nav a {

    position: relative;

    width: fit-content;

    max-width: 100%;

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

    font-size: .87rem;
}


/*
No ::after local:
el marcador activo depende de components.css.
*/


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

    .web-types__grid {

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


    .web-builder__view-body {

        grid-template-columns: 1fr;
    }


    .web-builder__copy {

        border-right: 0;

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

}



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

@media (max-width: 900px) {

    .web-hero__grid,
    .web-problem__grid,
    .web-build__head,
    .web-engineering__head,
    .web-cta__inner,
    .web-footer
    .site-footer__grid {

        grid-template-columns: 1fr;
    }


    .web-browser {

        max-width: 40rem;
    }


    .web-service-nav__inner {

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


    .web-service-nav a {

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


    .web-builder__stages {

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


    .web-build-stage:nth-child(2) {

        border-right: 0;
    }


    .web-flow__track {

        grid-template-columns: 1fr;
    }


    .web-flow__track > i {

        width: 1px;
        height: 1.2rem;

        justify-self: center;
    }


    .web-cta__technical {

        min-height: 16rem;
    }

}



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

@media (max-width: 767px) {

    .web-field__svg {

        width:
            max(190vw,59rem);

        opacity: .28;
    }


    .web-hero {

        min-height: 0;

        padding-top: 8rem;
    }


    .web-hero h1 {

        max-width: 10ch;

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


    .web-hero__actions,
    .web-cta__actions {

        display: grid;

        grid-template-columns: 1fr;
    }


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

        width: 100%;

        min-width: 0;

        justify-content: center;
    }


    .web-browser__viewport {

        min-height: 20rem;
    }


    .web-service-nav__inner {

        grid-template-columns: 1fr;
    }


    .web-service-nav a {

        border-right: 0;
    }


    .web-problem__copy {

        padding-left: 1rem;
    }


    .web-builder__stages {

        grid-template-columns: 1fr;
    }


    .web-build-stage {

        min-height: 5.8rem;

        border-right: 0;

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


    .web-build-stage:last-child {

        border-bottom: 0;
    }


    .web-builder__view-top {

        align-items: flex-start;
    }


    .web-builder__view-top > div {

        flex-direction: column;

        gap: .2rem;
    }


    .web-builder__copy {

        padding:
            1.5rem 1rem;
    }


    .web-canvas {

        min-height: 25rem;

        padding:
            1rem;
    }


    .web-canvas__layout {

        grid-template-columns: 1fr;

        grid-template-rows: auto;
    }


    .web-canvas__block,
    .web-canvas__block--hero,
    .web-canvas__block--side,
    .web-canvas__block--a,
    .web-canvas__block--b,
    .web-canvas__block--cta {

        grid-column: auto;
        grid-row: auto;

        min-height: 5rem;
    }


    .web-types__grid {

        grid-template-columns: 1fr;
    }


    .web-type-card {

        min-height: 17rem;
    }


    .web-engineering__item {

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

        gap: .7rem;
    }


    .web-engineering__item p {

        grid-column:
            2 / -1;
    }


    .web-footer
    .site-footer__nav {

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

        gap:
            2rem 1.4rem;
    }


    .web-footer
    .site-footer__bottom {

        flex-direction: column;

        align-items: flex-start;

        margin-top: 2.7rem;
    }

}



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

@media (max-width: 479px) {

    .web-footer
    .site-footer__nav {

        grid-template-columns: 1fr;
    }


    .web-browser__hero > div {

        flex-direction: column;
    }

}



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

@keyframes webBrowserScan {

    0%,
    100% {

        top: 0;

        opacity: .2;
    }

    50% {

        top:
            calc(100% - 1px);

        opacity: 1;
    }

}


@keyframes webCanvasSignal {

    from {

        left: -20%;
    }

    to {

        left: 102%;
    }

}


@keyframes webCopyChange {

    from {

        opacity: .2;

        transform:
            translateY(.55rem);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes webBlockAssemble {

    0% {

        opacity: .25;

        transform:
            scale(.96);
    }

    100% {

        opacity: 1;

        transform:
            scale(1);
    }

}



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

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

    .web-field__traveler,
    .web-browser__scan,
    .web-canvas__signal i {

        display: none;
    }


    .web-builder__view.is-changing
    .web-builder__copy,

    .web-builder__view.is-changing
    .web-canvas__block {

        animation:
            none !important;
    }


    .web-browser,
    .web-build-stage,
    .web-type-card,
    .web-engineering__item {

        transition:
            none !important;
    }

}


/* AP WEB COVERAGE CSS START */


/* ================================================================
   COBERTURA WEB
================================================================ */

.web-coverage {

    position: relative;

    overflow: hidden;

    background:
        #0a0b0d;

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

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


.web-coverage::before {

    content: "";

    position: absolute;

    right: -14rem;
    top: -14rem;

    width: 34rem;
    height: 34rem;

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

    border-radius: 50%;

    box-shadow:
        0 0 0 5rem rgba(181,32,74,.016),
        0 0 0 10rem rgba(181,32,74,.012);

    pointer-events: none;
}


.web-coverage__head,
.web-presence__head {

    display: grid;

    grid-template-columns:
        minmax(0,.82fr)
        minmax(0,1.18fr);

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

    align-items: end;

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


.web-coverage__eyebrow,
.web-presence__eyebrow {

    display: inline-block;

    margin-bottom: 1.15rem;

    color:
        var(--color-accent);

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

    font-size: .67rem;

    font-weight: 700;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.web-coverage__head h2,
.web-presence__head h2 {

    max-width: 11ch;

    margin: 0;

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

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

    line-height: .94;

    letter-spacing: -.055em;
}


.web-coverage__head h2 span,
.web-presence__head h2 span {

    display: block;

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


.web-coverage__head > p,
.web-presence__head > p {

    max-width: 44rem;

    margin: 0;

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

    font-size:
        clamp(1rem,1.4vw,1.14rem);

    line-height: 1.82;
}


.web-coverage__grid {

    display: grid;

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

    gap: 1px;

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

    background:
        rgba(52,54,61,.55);
}


.web-coverage-card {

    position: relative;

    min-height: 18rem;

    padding:
        clamp(1.4rem,2.6vw,2.1rem);

    overflow: hidden;

    background:
        linear-gradient(
            155deg,
            rgba(19,20,24,.98),
            rgba(10,11,13,.98)
        );

    transition:
        background
        var(--duration-normal)
        var(--ease-ap);
}


.web-coverage-card::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 2px;

    background:
        var(--color-accent);

    transition:
        width
        var(--duration-normal)
        var(--ease-ap);
}


.web-coverage-card:hover {

    background:
        linear-gradient(
            155deg,
            rgba(181,32,74,.09),
            rgba(10,11,13,.98) 58%
        );
}


.web-coverage-card:hover::after {

    width: 100%;
}


.web-coverage-card > span {

    display: block;

    color:
        var(--color-accent);

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

    font-size: .61rem;

    font-weight: 700;

    letter-spacing: .13em;
}


.web-coverage-card h3 {

    max-width: 15ch;

    margin:
        2.4rem 0 .9rem;

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

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

    line-height: 1.08;

    letter-spacing: -.035em;
}


.web-coverage-card p {

    margin: 0;

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

    font-size: .84rem;

    line-height: 1.72;
}


.web-sector-spectrum {

    display: grid;

    grid-template-columns:
        minmax(0,1.35fr)
        minmax(13rem,.65fr);

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

    align-items: center;

    margin-top:
        clamp(2rem,4vw,3.5rem);

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

    border-left:
        2px solid
        var(--color-accent);

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


.web-sector-spectrum strong {

    display: block;

    margin-bottom: .7rem;

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

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


.web-sector-spectrum p {

    max-width: 60rem;

    margin: 0;

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

    font-size: .9rem;

    line-height: 1.75;
}


.web-sector-spectrum > span {

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

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

    font-size: .65rem;

    line-height: 1.7;

    letter-spacing: .05em;

    text-transform: uppercase;
}


/* ================================================================
   PRESENCIA DIGITAL CONECTADA
================================================================ */

.web-presence {

    position: relative;

    background:
        linear-gradient(
            180deg,
            #0d0e11,
            #08090b
        );
}


.web-presence__network {

    display: grid;

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

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

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


.web-presence-card {

    position: relative;

    min-height: 17rem;

    display: flex;

    flex-direction: column;

    padding:
        2rem 1.4rem;

    border-right:
        1px solid
        rgba(52,54,61,.58);

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


.web-presence-card:last-child {

    border-right: 0;
}


.web-presence-card strong {

    min-height: 3rem;

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

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

    line-height: 1.12;
}


.web-presence-card p {

    margin:
        1.1rem 0 1.8rem;

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

    font-size: .79rem;

    line-height: 1.68;
}


.web-presence-card small {

    margin-top: auto;

    color:
        var(--color-accent);

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

    font-size: .58rem;

    font-weight: 700;

    letter-spacing: .1em;
}


.web-presence__flow {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: .8rem;

    padding:
        clamp(1.6rem,3vw,2.5rem)
        0;

    overflow-x: auto;

    scrollbar-width: none;
}


.web-presence__flow::-webkit-scrollbar {

    display: none;
}


.web-presence__flow span {

    flex: 0 0 auto;

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

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

    font-size: .62rem;

    font-weight: 700;

    letter-spacing: .08em;
}


.web-presence__flow i {

    flex: 1 1 2rem;

    min-width: 2rem;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--color-accent),
            rgba(181,32,74,.12)
        );
}


.web-presence__note {

    display: grid;

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

    gap:
        2rem;

    align-items: center;

    padding:
        clamp(1.4rem,3vw,2.2rem);

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

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


.web-presence__note p {

    max-width: 48rem;

    margin: 0;

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

    font-size: .84rem;

    line-height: 1.72;
}


.web-presence__note > div {

    display: flex;

    flex-wrap: wrap;

    gap: .7rem;
}


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

@media (max-width: 1100px) {

    .web-presence__network {

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


    .web-presence-card {

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


    .web-presence-card:nth-child(2n) {

        border-right: 0;
    }


    .web-presence-card:last-child {

        grid-column: 1 / -1;

        min-height: 12rem;
    }

}


@media (max-width: 900px) {

    .web-coverage__head,
    .web-presence__head,
    .web-sector-spectrum,
    .web-presence__note {

        grid-template-columns: 1fr;
    }


    .web-coverage__grid {

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


    .web-presence__note > div {

        width: 100%;
    }

}


@media (max-width: 620px) {

    .web-coverage__grid,
    .web-presence__network {

        grid-template-columns: 1fr;
    }


    .web-coverage-card {

        min-height: 0;
    }


    .web-presence-card {

        min-height: 0;

        border-right: 0;

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


    .web-presence-card:last-child {

        grid-column: auto;
    }


    .web-presence__flow {

        justify-content: flex-start;

        padding-bottom: 1.8rem;
    }


    .web-presence__flow i {

        flex: 0 0 2.5rem;
    }


    .web-presence__note > div {

        flex-direction: column;
    }


    .web-presence__note .ap-button {

        width: 100%;
    }

}


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

    .web-coverage-card,
    .web-coverage-card::after {

        transition: none;
    }

}


/* AP WEB COVERAGE CSS END */