/* ================================================================
   AP NEURAL WEB — EMPRESA / STRUCTURAL SYSTEM V1
================================================================ */


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


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


.company-main > section {
    position: relative;
}



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

.company-field {

    position: fixed;

    inset: 0;

    z-index: 0;

    overflow: hidden;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 50% 48%,
            rgba(88,11,35,.075),
            transparent 29rem
        );
}


.company-field__svg {

    position: absolute;

    left: 50%;
    top: 50%;

    width:
        max(108vw, 92rem);

    height: auto;

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

    opacity: .48;
}


.company-field__frames rect,
.company-field__axes path,
.company-field__blocks rect,
.company-field__core rect,
.company-field__signal {

    fill: none;

    vector-effect:
        non-scaling-stroke;
}


.company-field__frames rect {

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

    stroke-width: 1;
}


.company-field__axes path {

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

    stroke-width: 1;

    stroke-dasharray:
        2 13;
}


.company-field__blocks rect {

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

    stroke-width: 1;
}


.company-field__core rect {

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

    stroke-width: 1;
}


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

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


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

    fill:
        rgba(181,32,74,.10);

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


.company-field__signal {

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

    stroke-width: 1;

    stroke-dasharray:
        5 12;
}


.company-field__traveler {

    fill:
        #B5204A;

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



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

.company-hero {

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

    display: flex;

    align-items: center;

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


.company-hero__grid {

    display: grid;

    grid-template-columns:
        minmax(0,1.13fr)
        minmax(20rem,.55fr);

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

    align-items: end;
}


.company-hero h1 {

    max-width: 11ch;

    margin-bottom: 2rem;

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

    line-height: .90;

    letter-spacing: -.06em;

    text-transform: uppercase;

    text-wrap: balance;
}


.company-hero h1 span {

    display: block;

    color:
        #B5204A;
}


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


.company-hero__actions,
.company-cta__actions {

    display: flex;

    flex-wrap: wrap;

    gap: .75rem;
}



/* ================================================================
   BUTTON SYSTEM — EMPRESA

   Diferente de Proyectos.
================================================================ */

.company-button {

    position: relative;

    isolation: isolate;

    overflow: hidden;
}


.company-button > span {

    position: relative;

    z-index: 3;
}


.company-button > i {

    position: absolute;

    z-index: 2;

    top: 0;
    bottom: 0;

    width: 24%;

    pointer-events: none;

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


.company-button--build > i {

    right: -26%;

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

    transform:
        skewX(-17deg);
}


.company-button--line > i {

    left: 0;
    bottom: 0;
    top: auto;

    width: 0;
    height: 1px;

    background:
        #B5204A;

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


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

    .company-button--build:hover > i {

        transform:
            translateX(-520%)
            skewX(-17deg);
    }


    .company-button--line:hover > i {

        width: 100%;
    }

}



/* ================================================================
   STRUCTURE CARD
================================================================ */

.company-structure {

    position: relative;

    padding:
        1rem;

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

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

    backdrop-filter:
        blur(10px);

    overflow: hidden;
}


.company-structure::before,
.company-structure::after {

    content: "";

    position: absolute;

    width: 2.8rem;
    height: 2.8rem;

    pointer-events: none;
}


.company-structure::before {

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

    border-left:
        1px solid #B5204A;

    border-top:
        1px solid #B5204A;
}


.company-structure::after {

    right: -1px;
    bottom: -1px;

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

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


.company-structure__top {

    display: flex;

    justify-content:
        space-between;

    padding-bottom:
        .85rem;

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

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

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

    font-size: .64rem;

    letter-spacing: .12em;
}


.company-structure__core {

    display: grid;

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

    align-items: center;

    gap: .45rem;

    padding:
        2.3rem 0;
}


.company-structure__core > div {

    min-width: 0;

    padding:
        .75rem .5rem;

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

    text-align: center;
}


.company-structure__core small {

    display: block;

    margin-bottom: .45rem;

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

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

    font-size: .56rem;
}


.company-structure__core strong {

    font-size: .82rem;

    text-transform: uppercase;
}


.company-structure__core > i {

    width: 1.15rem;
    height: 1px;

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


.company-structure__status {

    display: grid;

    gap: .8rem;

    padding-top: .9rem;

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

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

    font-size: .76rem;
}


.company-structure__meter {

    position: relative;

    display: block;

    height: 2px;

    overflow: hidden;

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


.company-structure__meter i {

    position: absolute;

    top: 0;

    width: 28%;
    height: 100%;

    background:
        #B5204A;

    animation:
        companyMeter
        3.2s
        ease-in-out
        infinite;
}



/* ================================================================
   POSITION
================================================================ */

.company-position {

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


.company-position__grid {

    display: grid;

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

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


.company-position h2,
.company-model h2,
.company-principles h2,
.company-capabilities h2,
.company-cta h2 {

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

    line-height: .96;

    letter-spacing: -.05em;

    text-transform: uppercase;

    text-wrap: balance;
}


.company-position h2 span,
.company-model h2 span,
.company-principles h2 span,
.company-capabilities h2 span,
.company-cta h2 span {

    color:
        #B5204A;
}


.company-position__copy {

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

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


.company-position__copy p {

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

    line-height: 1.8;
}


.company-position__copy strong {

    display: block;

    margin-top: 2rem;

    color:
        #F3F3F1;

    line-height: 1.65;
}



/* ================================================================
   MODEL
================================================================ */

.company-model__header,
.company-capabilities__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);
}


.company-model__header > p,
.company-capabilities__head > p {

    margin: 0;

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

    line-height: 1.75;
}



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

.company-stages {

    display: grid;

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

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

    border-bottom: 0;
}


.company-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,.70);

    border: 0;

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

    cursor: pointer;

    overflow: hidden;
}


.company-stage:last-child {

    border-right: 0;
}


.company-stage::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        #B5204A;

    transform:
        translateX(-102%);

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


.company-stage.is-active::after {

    transform:
        translateX(0);
}


.company-stage > span {

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

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

    font-size: .66rem;
}


.company-stage small {

    display: block;

    margin-bottom: .45rem;

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

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

    font-size: .56rem;

    letter-spacing: .10em;
}


.company-stage strong {

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

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

    text-transform: uppercase;
}


.company-stage.is-active {

    background:
        linear-gradient(
            145deg,
            rgba(139,21,56,.10),
            rgba(11,12,15,.88)
        );
}


.company-stage.is-active > span {

    color:
        #B5204A;
}


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

    .company-stage:hover:not(.is-active) {

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

}



/* ================================================================
   READER
================================================================ */

.company-reader {

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

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


.company-reader__header {

    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 1rem;

    min-height: 3.7rem;

    padding:
        .8rem 1.1rem;

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

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

    font-size: .61rem;

    letter-spacing: .12em;
}


.company-reader__header > div {

    display: flex;

    gap: 1rem;
}


.company-reader__header span {

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


.company-reader__header strong {

    color:
        #B5204A;
}


.company-reader__body {

    display: grid;

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


.company-reader__copy {

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

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


.company-reader h3 {

    max-width: 11ch;

    margin-bottom: 1.5rem;

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

    line-height: .96;

    letter-spacing: -.045em;

    text-transform: uppercase;
}


.company-reader__copy > p {

    max-width: 39rem;

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

    line-height: 1.75;
}


.company-reader__question {

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

    padding-top: 1.1rem;

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


.company-reader__question span {

    display: block;

    margin-bottom: .7rem;

    color:
        #B5204A;

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

    font-size: .61rem;

    letter-spacing: .11em;
}


.company-reader__question strong {

    display: block;

    max-width: 32rem;

    line-height: 1.5;
}



/* ================================================================
   READER DIAGRAM
================================================================ */

.company-reader__diagram {

    position: relative;

    display: grid;

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

    gap: .8rem;

    align-content: center;

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

    min-height: 28rem;

    background:

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

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

    background-size:
        42px 42px;

    overflow: hidden;
}


.company-reader__rail {

    position: absolute;

    left: 10%;
    right: 10%;

    top: 50%;

    height: 1px;

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


.company-reader__rail i {

    position: absolute;

    top: 0;
    left: 0;

    width: 20%;
    height: 1px;

    background:
        #B5204A;

    animation:
        companyReaderSignal
        3s
        linear
        infinite;
}


.company-reader__unit {

    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    justify-content:
        space-between;

    min-width: 0;

    min-height: 8.5rem;

    padding: .85rem;

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

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

    transition:

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

        border-color
        280ms ease;
}


.company-reader__unit > span {

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

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

    font-size: .58rem;
}


.company-reader__unit strong {

    font-size: .82rem;

    text-transform: uppercase;
}


.company-reader__unit--core {

    min-height: 10.5rem;

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

    background:
        linear-gradient(
            145deg,
            rgba(139,21,56,.12),
            rgba(10,11,14,.96)
        );
}


.company-reader__unit--core > span {

    color:
        #B5204A;
}


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

    .company-reader__unit:hover {

        transform:
            translateY(-4px);

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

}



/* ================================================================
   PRINCIPLES
================================================================ */

.company-principles {

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


.company-principles__header {

    max-width: 69rem;

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


.company-principles__grid {

    display: grid;

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

    gap: .7rem;
}


.company-principle {

    position: relative;

    min-height: 20rem;

    padding:
        1.4rem;

    background:
        rgba(13,14,17,.70);

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

    overflow: hidden;

    transition:

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

        background
        300ms ease,

        border-color
        300ms ease;
}


.company-principle > span {

    display: block;

    margin-bottom:
        clamp(4rem,7vw,7rem);

    color:
        #B5204A;

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

    font-size: .65rem;
}


.company-principle h3 {

    margin-bottom: .8rem;

    font-size:
        clamp(1.4rem,2vw,1.9rem);

    text-transform: uppercase;
}


.company-principle p {

    margin: 0;

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

    font-size: .87rem;

    line-height: 1.7;
}


/*
Esquinas que se ensamblan.
No repite el borde viajero de Proyectos.
*/

.company-principle__corner::before,
.company-principle__corner::after {

    content: "";

    position: absolute;

    width: 2.3rem;
    height: 2.3rem;

    opacity: .15;

    transition:

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

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

        opacity
        280ms ease;
}


.company-principle__corner::before {

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

    border-left:
        1px solid #B5204A;

    border-top:
        1px solid #B5204A;
}


.company-principle__corner::after {

    right: -1px;
    bottom: -1px;

    border-right:
        1px solid #B5204A;

    border-bottom:
        1px solid #B5204A;
}


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

    .company-principle:hover {

        transform:
            translateY(-5px);

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

        background:
            linear-gradient(
                145deg,
                rgba(139,21,56,.07),
                rgba(13,14,17,.82)
            );
    }


    .company-principle:hover
    .company-principle__corner::before,

    .company-principle:hover
    .company-principle__corner::after {

        width: 5rem;
        height: 5rem;

        opacity: .72;
    }

}



/* ================================================================
   CAPABILITY LIST
================================================================ */

.company-capability-list {

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


.company-capability {

    position: relative;

    display: grid;

    grid-template-columns:
        3.5rem
        minmax(0,.75fr)
        minmax(0,1fr)
        auto;

    gap: 1rem;

    align-items: center;

    min-width: 0;

    padding:
        1.5rem .7rem;

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

    overflow: hidden;

    transition:

        background
        280ms ease,

        padding-left
        320ms
        cubic-bezier(.22,1,.36,1);
}


.company-capability::before {

    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 2px;

    background:
        #B5204A;

    transform:
        translateY(101%);

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


.company-capability > span {

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

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

    font-size: .65rem;
}


.company-capability strong {

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

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

    text-transform: uppercase;
}


.company-capability small {

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

    font-size: .78rem;
}


.company-capability > i {

    color:
        #B5204A;

    font-style: normal;

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


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

    .company-capability:hover {

        padding-left: 1.1rem;

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


    .company-capability:hover::before {

        transform:
            translateY(0);
    }


    .company-capability:hover > i {

        transform:
            translateX(.35rem);
    }

}



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

.company-cta__inner {

    position: relative;

    max-width: 76rem;

    padding:
        clamp(3rem,7vw,6rem);

    text-align: center;

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

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


.company-cta__inner::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 22%;

    height: 1px;

    transform:
        translateX(-50%);

    background:
        #B5204A;
}


.company-cta__index {

    margin-bottom: 1.5rem;

    color:
        #B5204A;

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

    font-size: .64rem;

    letter-spacing: .13em;
}


.company-cta p {

    max-width: 43rem;

    margin:
        0 auto 2rem;

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

    line-height: 1.8;
}


.company-cta__actions {

    justify-content: center;
}



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

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


.company-footer::before {

    content: "";

    position: absolute;

    left: 50%;
    top: -1px;

    width: min(8rem,28vw);
    height: 1px;

    transform:
        translateX(-50%);

    background:
        #B5204A;
}


.company-footer
.site-footer__grid {

    display: grid;

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

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

    align-items: start;
}


.company-footer
.site-footer__brand {

    display: flex;

    align-items: flex-start;

    gap: 1rem;
}


.company-footer
.site-footer__brand > div {

    display: flex;

    flex-direction: column;

    gap: .4rem;
}


.company-footer
.site-footer__brand strong {

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

    text-transform: uppercase;
}


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

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

    font-size: .82rem;
}


.company-footer
.site-footer__nav {

    display: grid;

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

    gap: 2rem;
}


.company-footer
.site-footer__nav > div {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: .68rem;
}


.company-footer
.site-footer__nav strong {

    margin-bottom: .25rem;

    color:
        #B5204A;

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

    font-size: .63rem;

    letter-spacing: .12em;

    text-transform: uppercase;
}


.company-footer
.site-footer__nav a {

    position: relative;

    width: fit-content;

    max-width: 100%;

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

    font-size: .87rem;
}


/*
IMPORTANTE:
No definimos ::after aquí.
El marcador activo pertenece a components.css.
*/


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



/* ================================================================
   CHANGE EFFECT
================================================================ */

.company-reader.is-changing
.company-reader__copy {

    animation:
        companyCopyChange
        500ms
        cubic-bezier(.22,1,.36,1);
}


.company-reader.is-changing
.company-reader__unit {

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


.company-stage.is-tapped {

    animation:
        companyStageTap
        380ms
        cubic-bezier(.22,1,.36,1);
}



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

@media (max-width: 1050px) {

    .company-principles__grid {

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


    .company-reader__body {

        grid-template-columns:
            1fr;
    }


    .company-reader__copy {

        border-right: 0;

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


    .company-reader__diagram {

        min-height: 24rem;
    }

}



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

@media (max-width: 900px) {

    .company-hero__grid,
    .company-position__grid,
    .company-model__header,
    .company-capabilities__head,
    .company-footer .site-footer__grid {

        grid-template-columns: 1fr;
    }


    .company-structure {

        max-width: 40rem;
    }


    .company-stages {

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


    .company-stage:nth-child(2) {

        border-right: 0;
    }


    .company-stage:nth-child(-n+2) {

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

}



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

@media (max-width: 767px) {

    .company-field__svg {

        width:
            max(190vw,59rem);

        opacity: .31;
    }


    .company-hero {

        min-height: 0;

        padding-top: 8rem;
    }


    .company-hero h1 {

        max-width: 10ch;

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


    .company-hero__actions,
    .company-cta__actions {

        display: grid;

        grid-template-columns: 1fr;
    }


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

        width: 100%;

        min-width: 0;

        justify-content: center;
    }


    .company-structure__core {

        grid-template-columns: 1fr;

        gap: .55rem;
    }


    .company-structure__core > i {

        width: 1px;
        height: 1rem;

        justify-self: center;
    }


    .company-position__copy {

        padding-left: 1.1rem;
    }


    .company-stages {

        grid-template-columns: 1fr;
    }


    .company-stage {

        min-height: 5.8rem;

        border-right: 0;

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


    .company-stage:last-child {

        border-bottom: 0;
    }


    .company-reader__header {

        align-items: flex-start;
    }


    .company-reader__header > div {

        flex-direction: column;

        gap: .2rem;
    }


    .company-reader__copy {

        padding:
            1.5rem 1.1rem;
    }


    .company-reader__diagram {

        grid-template-columns: 1fr;

        min-height: 0;

        gap: .7rem;

        padding:
            1.2rem;
    }


    .company-reader__rail {

        left: 50%;
        right: auto;

        top: 8%;
        bottom: 8%;

        width: 1px;
        height: auto;
    }


    .company-reader__rail i {

        width: 1px;
        height: 22%;

        animation:
            companyReaderSignalMobile
            3s linear infinite;
    }


    .company-reader__unit,
    .company-reader__unit--core {

        min-height: 6.5rem;
    }


    .company-principles__grid {

        grid-template-columns: 1fr;
    }


    .company-principle {

        min-height: 0;
    }


    .company-principle > span {

        margin-bottom: 2.5rem;
    }


    .company-capability {

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

        gap: .7rem;

        padding:
            1.25rem .3rem;
    }


    .company-capability small {

        grid-column:
            2 / -1;

        grid-row: 2;
    }


    .company-capability > i {

        grid-column: 3;
        grid-row: 1;
    }


    .company-footer
    .site-footer__nav {

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

        gap:
            2rem 1.4rem;
    }


    .company-footer
    .site-footer__bottom {

        flex-direction: column;

        align-items: flex-start;

        margin-top: 2.7rem;
    }

}



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

@media (max-width: 479px) {

    .company-footer
    .site-footer__nav {

        grid-template-columns: 1fr;
    }


    .company-cta__inner {

        padding:
            2.5rem 1rem;
    }

}



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

@keyframes companyMeter {

    0%,
    100% {

        left: -30%;
    }

    50% {

        left: 102%;
    }

}


@keyframes companyReaderSignal {

    from {
        left: -20%;
    }

    to {
        left: 102%;
    }

}


@keyframes companyReaderSignalMobile {

    from {
        top: -22%;
    }

    to {
        top: 102%;
    }

}


@keyframes companyCopyChange {

    0% {

        opacity: .25;

        transform:
            translateY(.6rem);
    }

    100% {

        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes companyUnitChange {

    0% {

        opacity: .30;

        transform:
            translateY(.5rem);
    }

    100% {

        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes companyStageTap {

    0% {
        transform:
            scale(1);
    }

    45% {
        transform:
            scale(.975);
    }

    100% {
        transform:
            scale(1);
    }

}



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

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

    .company-field__traveler,
    .company-structure__meter i,
    .company-reader__rail i {

        display: none;
    }


    .company-reader.is-changing
    .company-reader__copy,

    .company-reader.is-changing
    .company-reader__unit,

    .company-stage.is-tapped {

        animation: none !important;
    }

}



/* ================================================================
   AP COMPANY BRAND FLOW V2 START
================================================================ */


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

.company-brandflow {

    position: relative;

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

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


.company-brandflow::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width:
        min(11rem,30vw);

    height: 1px;

    transform:
        translateX(-50%);

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


.company-brandflow__eyebrow {

    margin-bottom:
        clamp(2.5rem,5vw,4.5rem);

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

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

    font-size: .64rem;

    letter-spacing: .13em;
}


/* ================================================================
   DESKTOP STRUCTURE
================================================================ */

.company-brandflow__layout {

    display: grid;

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

    gap:
        clamp(1.5rem,4vw,4rem);

    align-items: center;

    max-width: 76rem;

    margin-inline: auto;
}


/* ================================================================
   LOGO
================================================================ */

.company-brandflow__identity {

    display: grid;

    justify-items: center;

    gap: 1.3rem;

    min-width: 0;

    text-align: center;
}


.company-brandflow__logo {

    position: relative;

    display: grid;

    place-items: center;

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

    aspect-ratio: 1;

    isolation: isolate;
}


.company-brandflow__logo::before {

    content: "";

    position: absolute;

    inset: 6%;

    z-index: -2;

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

    transform:
        rotate(45deg);
}


.company-brandflow__logo::after {

    content: "";

    position: absolute;

    inset: 17%;

    z-index: -1;

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

    transform:
        rotate(45deg);

    transition:

        inset
        650ms
        cubic-bezier(.22,1,.36,1),

        border-color
        350ms ease;
}


.company-brandflow__logo img {

    display: block;

    width: 68%;
    height: 68%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 0 1.2rem
            rgba(181,32,74,.08)
        );

    transition:

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

        filter
        400ms ease;
}


.company-brandflow__logo > span {

    position: absolute;

    left: 50%;
    bottom: -1px;

    width: 34%;
    height: 1px;

    transform:
        translateX(-50%);

    background:
        #B5204A;

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


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

    .company-brandflow__identity:hover
    .company-brandflow__logo::after {

        inset: 11%;

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


    .company-brandflow__identity:hover
    .company-brandflow__logo img {

        transform:
            scale(1.035);

        filter:
            drop-shadow(
                0 0 1.8rem
                rgba(181,32,74,.16)
            );
    }

}


.company-brandflow__name {

    display: grid;

    gap: .35rem;

    max-width: 23rem;
}


.company-brandflow__name strong {

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

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

    letter-spacing:
        .03em;

    text-transform: uppercase;
}


.company-brandflow__name small {

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

    font-size: .8rem;

    line-height: 1.6;
}


/* ================================================================
   FLECHA VERTICAL
================================================================ */

.company-brandflow__route {

    position: relative;

    justify-self: center;

    width: 3rem;

    height:
        clamp(20rem,34vw,31rem);
}


.company-brandflow__route::before {

    content: "";

    position: absolute;

    left: 50%;
    top: 0;

    width: 1px;
    height:
        calc(100% - 1.1rem);

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            180deg,
            rgba(181,32,74,.10),
            #B5204A 22%,
            #B5204A 78%,
            rgba(181,32,74,.18)
        );
}


.company-brandflow__route::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: .9rem;
    height: .9rem;

    transform:
        translateX(-50%)
        rotate(45deg);

    border-right:
        2px solid #B5204A;

    border-bottom:
        2px solid #B5204A;
}


.company-brandflow__route > span {

    position: absolute;

    left: 50%;
    top: 0;

    width: 5px;
    height: 5px;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #B5204A;

    box-shadow:
        0 0 .65rem
        rgba(181,32,74,.75);

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


.company-brandflow__route > i {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 1.8rem;
    height: 1px;

    transform:
        translateX(-50%);

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


/* ================================================================
   FRASES
================================================================ */

.company-brandflow__statements {

    display: grid;

    min-width: 0;
}


.company-brandflow__statements article {

    position: relative;

    display: grid;

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

    gap:
        1rem;

    align-items: center;

    min-height:
        clamp(6rem,8vw,7.5rem);

    padding:
        1rem 1.2rem;

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

    overflow: hidden;

    transition:

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

        background
        300ms ease,

        border-color
        300ms ease;
}


.company-brandflow__statements article:first-child {

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


.company-brandflow__statements article::before {

    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 0;
    height: 1px;

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

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


.company-brandflow__statements article::after {

    content: "";

    position: absolute;

    right: 0;
    top: 0;

    width: 2.1rem;
    height: 2.1rem;

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

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

    transition:
        border-color
        280ms ease;
}


.company-brandflow__statements article > span {

    color:
        #B5204A;

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

    font-size: .62rem;
}


.company-brandflow__statements p {

    margin: 0;

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

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

    font-size:
        clamp(1.2rem,2.3vw,2.1rem);

    line-height: 1.08;

    letter-spacing:
        -.025em;

    text-transform: uppercase;
}


.company-brandflow__statements strong {

    color:
        #F3F3F1;

    font-weight: 650;
}


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

    .company-brandflow__statements article:hover {

        padding-left: 1.8rem;

        background:
            linear-gradient(
                90deg,
                rgba(139,21,56,.065),
                transparent 72%
            );

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


    .company-brandflow__statements article:hover::before {

        width: 1.2rem;
    }


    .company-brandflow__statements article:hover::after {

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

}


/* ================================================================
   STRUCTURE — MÁS RESPUESTA
================================================================ */

.company-structure {

    transition:

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

        border-color
        300ms ease,

        box-shadow
        380ms ease;
}


.company-structure__core > div {

    transition:

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

        background
        300ms ease,

        border-color
        300ms ease;
}


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

    .company-structure:hover {

        transform:
            translateY(-4px);

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

        box-shadow:
            0 1.5rem 4rem
            rgba(0,0,0,.16);
    }


    .company-structure__core > div:hover {

        transform:
            translateY(-3px);

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

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

}


/* ================================================================
   STAGE CARDS
================================================================ */

.company-stage {

    transition:

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

        background
        280ms ease,

        border-color
        280ms ease;
}


.company-stage::before {

    content: "";

    position: absolute;

    right: .7rem;
    top: .7rem;

    width: .6rem;
    height: .6rem;

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

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

    opacity: .25;

    transition:

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

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

        opacity
        250ms ease;
}


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

    .company-stage:hover {

        transform:
            translateY(-3px);

        background:
            linear-gradient(
                145deg,
                rgba(139,21,56,.08),
                rgba(11,12,15,.88)
            );
    }


    .company-stage:hover::before {

        width: 1.6rem;
        height: 1.6rem;

        opacity: .8;
    }

}


/* ================================================================
   QUESTION BLOCK
================================================================ */

.company-reader__question {

    position: relative;

    overflow: hidden;

    padding:
        1.2rem;

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

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

    transition:

        background
        300ms ease,

        border-color
        300ms ease;
}


.company-reader__question::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background:
        #B5204A;

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


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

    .company-reader__question:hover {

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

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


    .company-reader__question:hover::after {

        width: 100%;
    }

}


/* ================================================================
   CTA CON MAYOR PROFUNDIDAD
================================================================ */

.company-cta__inner {

    overflow: hidden;

    transition:

        border-color
        340ms ease,

        box-shadow
        400ms ease;
}


.company-cta__inner::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -13rem;

    width: 26rem;
    height: 18rem;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            ellipse,
            rgba(139,21,56,.11),
            transparent 68%
        );

    pointer-events: none;

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


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

    .company-cta__inner:hover {

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

        box-shadow:
            0 2rem 6rem
            rgba(0,0,0,.13);
    }


    .company-cta__inner:hover::after {

        transform:
            translateX(-50%)
            translateY(-2rem);
    }

}


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

@media (max-width: 900px) {

    .company-brandflow__layout {

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

        gap: 1.4rem;
    }


    .company-brandflow__logo {

        width:
            clamp(12rem,25vw,16rem);
    }

}


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

@media (max-width: 767px) {

    .company-brandflow__eyebrow {

        text-align: center;
    }


    .company-brandflow__layout {

        grid-template-columns: 1fr;

        gap: 2rem;
    }


    .company-brandflow__identity {

        width: 100%;
    }


    .company-brandflow__logo {

        width:
            min(58vw,15rem);

        margin-inline: auto;
    }


    /*
    Flecha pasa de vertical a horizontal.
    */

    .company-brandflow__route {

        justify-self: center;

        width:
            min(78vw,22rem);

        height: 2.4rem;
    }


    .company-brandflow__route::before {

        left: 0;
        top: 50%;

        width:
            calc(100% - 1rem);

        height: 1px;

        transform:
            translateY(-50%);

        background:
            linear-gradient(
                90deg,
                rgba(181,32,74,.10),
                #B5204A 25%,
                #B5204A 78%,
                rgba(181,32,74,.18)
            );
    }


    .company-brandflow__route::after {

        left: auto;

        right: 0;
        bottom: 50%;

        transform:
            translateY(50%)
            rotate(-45deg);
    }


    .company-brandflow__route > span {

        left: 0;
        top: 50%;

        transform:
            translateY(-50%);

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


    .company-brandflow__route > i {

        display: none;
    }


    .company-brandflow__statements article {

        min-height: 6rem;

        padding:
            1rem .8rem;
    }


    .company-brandflow__statements p {

        font-size:
            clamp(1.25rem,6.7vw,1.8rem);
    }

}


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

@media (max-width: 479px) {

    .company-brandflow__statements article {

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

        gap: .65rem;
    }


    .company-brandflow__route {

        width:
            min(84vw,19rem);
    }

}


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

@keyframes companyBrandSignalV2 {

    0%,
    100% {

        top: 0;

        opacity: .35;
    }


    48% {

        top:
            calc(100% - 1.4rem);

        opacity: 1;
    }

}


@keyframes companyBrandSignalMobileV2 {

    0%,
    100% {

        left: 0;

        opacity: .35;
    }


    48% {

        left:
            calc(100% - 1.4rem);

        opacity: 1;
    }

}


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

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

    .company-brandflow__route > span {

        animation:
            none !important;

        top: 50%;
    }


    .company-brandflow__logo img,
    .company-brandflow__logo::after,
    .company-brandflow__statements article,
    .company-structure,
    .company-stage,
    .company-reader__question {

        transition:
            none !important;
    }

}


/* AP COMPANY BRAND FLOW V2 END */



/* AP COMPANY CONSTRUCTION LOGO V3 START */


/* ================================================================
   03 / CONSTRUCCIÓN
   Más presencia de color sin alterar el resto de Empresa.
================================================================ */

.company-brandflow {

    background:

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

        radial-gradient(
            circle at 72% 48%,
            rgba(151,154,162,.055),
            transparent 27rem
        ),

        linear-gradient(
            180deg,
            rgba(16,17,20,.34),
            rgba(88,11,35,.035) 48%,
            rgba(8,9,11,.28)
        );
}


/* Número de sección con más identidad */

.company-brandflow__eyebrow {

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

    text-shadow:
        0 0 1rem
        rgba(181,32,74,.10);
}


/* ================================================================
   CONTENEDOR DEL LOGO
================================================================ */

.company-brandflow__logo {

    background:

        radial-gradient(
            circle,
            rgba(181,32,74,.09),
            rgba(88,11,35,.025) 47%,
            transparent 70%
        );
}


/*
El SVG original es negro.
Como máscara conservamos exactamente su forma
y podemos aplicarle los colores AP.
*/

.company-brandflow__logo-art {

    position: relative;

    z-index: 2;

    display: block;

    width: 72%;
    height: 82%;

    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 .6rem
            rgba(243,243,241,.08)
        )
        drop-shadow(
            0 0 1.25rem
            rgba(181,32,74,.18)
        );

    transform:
        translateZ(0);

    transition:

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

        filter
        450ms ease;
}


/* Luz posterior muy discreta */

.company-brandflow__logo-art::before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        inherit;
}


/* ================================================================
   MARCOS
================================================================ */

.company-brandflow__logo::before {

    border-color:
        rgba(151,154,162,.18);
}


.company-brandflow__logo::after {

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

    box-shadow:
        0 0 2rem
        rgba(139,21,56,.035);
}


.company-brandflow__logo > span {

    width: 46%;

    background:

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


/* ================================================================
   HOVER DEL LOGO
================================================================ */

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

    .company-brandflow__identity:hover
    .company-brandflow__logo-art {

        transform:
            scale(1.045);

        filter:
            drop-shadow(
                0 0 .8rem
                rgba(243,243,241,.12)
            )
            drop-shadow(
                0 0 1.8rem
                rgba(181,32,74,.28)
            );
    }


    .company-brandflow__identity:hover
    .company-brandflow__logo::after {

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

        box-shadow:
            0 0 2.5rem
            rgba(139,21,56,.07);
    }

}


/* ================================================================
   NOMBRE
================================================================ */

.company-brandflow__name strong {

    color:
        #F3F3F1;
}


.company-brandflow__name small {

    color:
        rgba(179,181,187,.86);
}


/* ================================================================
   FRASES
   Más luz y contraste sin convertirlas en tarjetas pesadas.
================================================================ */

.company-brandflow__statements article {

    background:

        linear-gradient(
            90deg,
            rgba(16,17,20,.46),
            rgba(16,17,20,.16)
        );
}


/* Alternancia vino / gris */

.company-brandflow__statements
article:nth-child(odd) {

    background:

        linear-gradient(
            90deg,
            rgba(139,21,56,.075),
            rgba(16,17,20,.14) 66%
        );
}


.company-brandflow__statements
article:nth-child(even) {

    background:

        linear-gradient(
            90deg,
            rgba(52,54,61,.11),
            rgba(16,17,20,.13) 66%
        );
}


.company-brandflow__statements
article:nth-child(odd) > span {

    color:
        #B5204A;
}


.company-brandflow__statements
article:nth-child(even) > span {

    color:
        #B7B9BE;
}


.company-brandflow__statements p {

    color:
        rgba(199,201,206,.74);
}


.company-brandflow__statements strong {

    color:
        #F3F3F1;
}


/* ================================================================
   FLECHA
================================================================ */

.company-brandflow__route::before {

    background:

        linear-gradient(
            180deg,
            rgba(181,32,74,.12),
            #B5204A 24%,
            #B5204A 72%,
            rgba(243,243,241,.34)
        );
}


.company-brandflow__route::after {

    border-color:
        #B5204A;

    filter:
        drop-shadow(
            0 0 .35rem
            rgba(181,32,74,.30)
        );
}


.company-brandflow__route > span {

    background:
        #B5204A;

    border:
        1px solid
        rgba(243,243,241,.62);

    box-shadow:

        0 0 .5rem
        rgba(181,32,74,.82),

        0 0 1rem
        rgba(181,32,74,.26);
}


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

@media (max-width:767px) {

    .company-brandflow {

        background:

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

            linear-gradient(
                180deg,
                rgba(16,17,20,.34),
                rgba(88,11,35,.035),
                rgba(8,9,11,.20)
            );
    }


    .company-brandflow__logo {

        width:
            min(66vw,17rem);
    }


    .company-brandflow__logo-art {

        width: 74%;
        height: 84%;
    }


    .company-brandflow__route::before {

        background:

            linear-gradient(
                90deg,
                rgba(181,32,74,.12),
                #B5204A 25%,
                #B5204A 74%,
                rgba(243,243,241,.34)
            );
    }

}


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

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

    .company-brandflow__logo-art {

        transition:
            none !important;
    }

}


/* AP COMPANY CONSTRUCTION LOGO V3 END */



/* === AP COMPANY MOBILE LOGO SEQUENCE V8 20260829 === */


@keyframes apCompanyLogoFrameV8 {

    0%,
    10%,
    100% {

        inset:
            17%;

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

        box-shadow:

            0 0 2rem
            rgba(139,21,56,.035);
    }


    20%,
    38% {

        inset:
            11%;

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

        box-shadow:

            0 0 2.5rem
            rgba(139,21,56,.075);
    }


    52%,
    88% {

        inset:
            17%;

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

        box-shadow:

            0 0 2rem
            rgba(139,21,56,.035);
    }

}


@keyframes apCompanyLogoArtV8 {

    0%,
    18%,
    100% {

        transform:

            translateZ(0)
            scale(1);

        filter:

            drop-shadow(
                0 0 .6rem
                rgba(243,243,241,.08)
            )

            drop-shadow(
                0 0 1.25rem
                rgba(181,32,74,.18)
            );
    }


    28%,
    46% {

        transform:

            translateZ(0)
            scale(1.045);

        filter:

            drop-shadow(
                0 0 .8rem
                rgba(243,243,241,.12)
            )

            drop-shadow(
                0 0 1.8rem
                rgba(181,32,74,.28)
            );
    }


    58%,
    88% {

        transform:

            translateZ(0)
            scale(1);

        filter:

            drop-shadow(
                0 0 .6rem
                rgba(243,243,241,.08)
            )

            drop-shadow(
                0 0 1.25rem
                rgba(181,32,74,.18)
            );
    }

}


@keyframes apCompanyLogoLineV8 {

    0%,
    30%,
    100% {

        transform:

            translateX(-50%)
            scaleX(.42);

        opacity:
            .45;
    }


    42%,
    58% {

        transform:

            translateX(-50%)
            scaleX(1);

        opacity:
            1;

        box-shadow:

            0 0 1rem
            rgba(181,32,74,.48);
    }


    72%,
    90% {

        transform:

            translateX(-50%)
            scaleX(.55);

        opacity:
            .62;
    }

}


@media
(max-width: 767px)
and
(prefers-reduced-motion: no-preference) {

    /* 1. MARCO */

    .company-brandflow__identity
    .company-brandflow__logo::after {

        animation:
            none;
    }


    .company-brandflow__identity
    .company-brandflow__logo-art {

        animation:
            none;
    }


    .company-brandflow__identity
    .company-brandflow__logo > span {

        animation:
            none;

        transform-origin:
            center;
    }


    /* Solo corre cuando está en pantalla */

    .company-brandflow__identity
    .company-brandflow__logo::after {

        animation-play-state:
            paused;
    }


    .company-brandflow__identity
    .company-brandflow__logo-art {

        animation-play-state:
            paused;
    }


    .company-brandflow__identity
    .company-brandflow__logo > span {

        animation-play-state:
            paused;
    }


    .company-brandflow__identity.is-mobile-logo-sequence
    .company-brandflow__logo::after {

        animation:

            apCompanyLogoFrameV8
            5.2s
            cubic-bezier(.45,0,.55,1)
            infinite;

        animation-play-state:
            running;
    }


    /* 2. LOGO */

    .company-brandflow__identity.is-mobile-logo-sequence
    .company-brandflow__logo-art {

        animation:

            apCompanyLogoArtV8
            5.2s
            cubic-bezier(.45,0,.55,1)
            infinite;

        animation-play-state:
            running;
    }


    /* 3. LÍNEA */

    .company-brandflow__identity.is-mobile-logo-sequence
    .company-brandflow__logo > span {

        animation:

            apCompanyLogoLineV8
            5.2s
            ease-in-out
            infinite;

        animation-play-state:
            running;
    }

}


/* ================================================================
   AP NEURAL WEB — COMPANY BRAND FLOW / CURRENT LOGO
   Conserva marcos, línea, hover y animación móvil existentes.
================================================================ */

.company-brandflow__logo
.company-brandflow__logo-art {

    display: block;

    width: 72%;
    height: 82%;

    object-fit: contain;

    /*
     * El diseño anterior utilizaba el SVG viejo
     * como máscara. El nuevo logo debe mostrarse
     * directamente, sin alterar su diseño.
     */
    background: none;

    -webkit-mask: none;
    mask: none;

    /*
     * Se conservan las sombras y transiciones
     * del sistema gráfico original.
     */
    filter:
        drop-shadow(
            0 0 .6rem
            rgba(243,243,241,.08)
        )
        drop-shadow(
            0 0 1.25rem
            rgba(181,32,74,.18)
        );

    transform:
        translateZ(0);

    transition:
        transform
        650ms
        cubic-bezier(.22,1,.36,1),

        filter
        450ms
        ease;
}


/*
 * El pseudo-elemento pertenecía a la máscara
 * antigua y ya no es necesario.
 */
.company-brandflow__logo
.company-brandflow__logo-art::before {

    content: none;
}


/* Hover de escritorio: mismo efecto existente */

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

    .company-brandflow__identity:hover
    .company-brandflow__logo
    .company-brandflow__logo-art {

        transform:
            translateZ(0)
            scale(1.045);

        filter:
            drop-shadow(
                0 0 .8rem
                rgba(243,243,241,.12)
            )
            drop-shadow(
                0 0 1.8rem
                rgba(181,32,74,.28)
            );
    }

}


/* Móvil: conserva las proporciones originales */

@media (max-width:767px) {

    .company-brandflow__logo
    .company-brandflow__logo-art {

        width: 74%;
        height: 84%;
    }

}


/*
 * La secuencia móvil existente sigue usando:
 * apCompanyLogoArtV8
 *
 * Como mantenemos la misma clase
 * .company-brandflow__logo-art,
 * la animación continúa funcionando.
 */

/* ================================================================
   END AP COMPANY CURRENT LOGO
================================================================ */

/* AP COMPANY FIELD VISIBILITY START */


/* ================================================================
   EMPRESA — CAMPO ESTRUCTURAL
================================================================ */

.company-field {

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(181,32,74,.13),
            transparent 26rem
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(243,243,241,.018),
            transparent 42rem
        );
}


.company-field__svg {

    opacity: .76;

    overflow: visible;

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


.company-field__frames rect {

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

    stroke-width: 1;
}


.company-field__axes path {

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

    stroke-width: 1;

    stroke-dasharray:
        2 13;
}


.company-field__blocks rect {

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

    stroke-width: 1.1;
}


.company-field__core rect {

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


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

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


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

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

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


.company-field__signal {

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

    stroke-width: 1.4;

    stroke-dasharray:
        6 12;
}


.company-field__traveler {

    fill:
        #D62C5B;

    filter:
        drop-shadow(
            0 0 8px
            rgba(213,44,91,.88)
        );
}


@media (max-width:767px) {

    .company-field__svg {

        opacity: .58;
    }


    .company-field__frames rect {

        stroke:
            rgba(151,154,162,.13);
    }


    .company-field__signal {

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

}


/* AP COMPANY FIELD VISIBILITY END */