/*
 * VIREXIS — SOBRE VIREXIS V1
 * Elaborado por Miguel Minier | MDesign
 */

.vx-about{
    --navy:#021A2D;
    --navy2:#032743;
    --blue:#073E68;
    --blue2:#0A5792;
    --cyan:#20B8F2;
    --ice:#DDF5FE;
    --ink:#071E31;
    --muted:#617485;
    --line:#DDE6EB;
    --soft:#F4F8FA;
    color:var(--ink);
    background:#fff;
    overflow:hidden;
}

.vx-about *,
.vx-about *::before,
.vx-about *::after{
    box-sizing:border-box;
}

.vx-about-shell{
    width:min(1240px,calc(100% - 64px));
    margin-inline:auto;
}

.vx-about-kicker,
.vx-about-eyebrow{
    display:block;
    font-size:10px;
    font-weight:800;
    letter-spacing:.22em;
}


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

.vx-about-hero{
    position:relative;
    min-height:760px;
    display:flex;
    align-items:stretch;
    background:
        linear-gradient(115deg,#021A2D 0%,#032743 60%,#073E68 100%);
    color:#fff;
    isolation:isolate;
}

.vx-about-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    opacity:.12;
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:
        linear-gradient(to right,#000,transparent 82%);
}

.vx-about-hero__orb{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
    filter:blur(4px);
}

.vx-about-hero__orb--one{
    width:620px;
    height:620px;
    right:-180px;
    top:-220px;
    background:rgba(32,184,242,.12);
}

.vx-about-hero__orb--two{
    width:400px;
    height:400px;
    left:32%;
    bottom:-280px;
    background:rgba(32,184,242,.07);
}

.vx-about-hero__inner{
    position:relative;
    padding:190px 0 145px;
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr);
    gap:90px;
    align-items:center;
}

.vx-about-eyebrow{
    color:#87DDFC;
    margin-bottom:28px;
}

.vx-about-hero h1{
    max-width:900px;
    margin:0;
    font-size:clamp(56px,6.2vw,88px);
    line-height:.98;
    letter-spacing:-.055em;
    font-weight:550;
}

.vx-about-hero h1 span{
    display:block;
    color:#8EDFFA;
}

.vx-about-hero__copy p{
    max-width:680px;
    margin:34px 0 0;
    color:rgba(255,255,255,.69);
    font-size:18px;
    line-height:1.75;
}

.vx-about-hero__signature{
    justify-self:end;
    display:flex;
    align-items:center;
    gap:20px;
    padding-left:32px;
    border-left:1px solid rgba(142,223,250,.28);
}

.vx-about-hero__v{
    font-size:78px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.08em;
    color:#20B8F2;
}

.vx-about-hero__signature strong{
    display:block;
    font-size:20px;
    letter-spacing:.13em;
}

.vx-about-hero__signature small{
    display:block;
    margin-top:5px;
    color:rgba(255,255,255,.52);
    font-size:9px;
    letter-spacing:.24em;
}

.vx-about-hero__bottom{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    border-top:1px solid rgba(255,255,255,.11);
}

.vx-about-hero__bottom .vx-about-shell{
    height:70px;
    display:flex;
    align-items:center;
    gap:24px;
    color:rgba(255,255,255,.52);
    font-size:9px;
    font-weight:800;
    letter-spacing:.2em;
}

.vx-about-hero__bottom i{
    width:45px;
    height:1px;
    background:rgba(255,255,255,.2);
}


/* =========================================================
   WHY
========================================================= */

.vx-about-why{
    padding:125px 0 140px;
}

.vx-about-heading{
    display:grid;
    grid-template-columns:minmax(0,1.2fr) minmax(300px,.65fr);
    gap:100px;
    align-items:end;
    margin-bottom:75px;
}

.vx-about-kicker{
    color:var(--blue2);
    margin-bottom:16px;
}

.vx-about-heading h2,
.vx-about-vision__head h2{
    margin:0;
    color:var(--navy);
    font-size:clamp(48px,5vw,68px);
    line-height:1;
    letter-spacing:-.05em;
    font-weight:550;
}

.vx-about-heading h2 strong{
    display:block;
    color:var(--blue2);
    font-weight:550;
}

.vx-about-heading > p{
    margin:0;
    max-width:430px;
    color:var(--muted);
    font-size:16px;
    line-height:1.8;
}

.vx-about-word{
    border-top:1px solid var(--line);
}

.vx-about-word__item{
    min-height:310px;
    display:grid;
    grid-template-columns:70px minmax(220px,.7fr) minmax(0,1fr);
    gap:35px;
    align-items:center;
    border-bottom:1px solid var(--line);
    transition:background .25s ease;
}

.vx-about-word__item:hover{
    background:#F8FBFC;
}

.vx-about-word__index{
    align-self:start;
    padding-top:42px;
    color:#AAB9C3;
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
}

.vx-about-word__letters{
    color:var(--navy);
    font-size:clamp(78px,9vw,132px);
    line-height:.8;
    letter-spacing:-.075em;
    font-weight:750;
}

.vx-about-word__item:nth-child(2)
.vx-about-word__letters{
    color:var(--blue2);
}

.vx-about-word__item:nth-child(3)
.vx-about-word__letters{
    color:var(--cyan);
}

.vx-about-word__meaning{
    max-width:580px;
    padding:48px 0;
}

.vx-about-word__meaning > span{
    display:block;
    margin-bottom:12px;
    color:var(--blue2);
    font-size:10px;
    font-weight:800;
    letter-spacing:.2em;
}

.vx-about-word__meaning h3{
    margin:0;
    max-width:500px;
    color:var(--navy);
    font-size:29px;
    line-height:1.15;
    letter-spacing:-.025em;
    font-weight:600;
}

.vx-about-word__meaning p{
    margin:17px 0 0;
    color:var(--muted);
    font-size:15px;
    line-height:1.75;
}


/* =========================================================
   REVEAL
========================================================= */

.vx-about-reveal{
    position:relative;
    padding:145px 0 155px;
    overflow:hidden;
    background:var(--navy);
    color:#fff;
}

.vx-about-reveal__grid{
    position:absolute;
    inset:0;
    opacity:.09;
    background-image:
        linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
    background-size:64px 64px;
}

.vx-about-reveal__inner{
    position:relative;
    text-align:center;
}

.vx-about-reveal__pre{
    display:block;
    margin-bottom:48px;
    color:#83D9FA;
    font-size:10px;
    font-weight:800;
    letter-spacing:.25em;
}

.vx-about-formula{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:28px;
}

.vx-about-formula span{
    font-size:clamp(44px,7vw,88px);
    line-height:1;
    letter-spacing:-.06em;
    font-weight:700;
}

.vx-about-formula span:nth-of-type(2){
    color:#89DCF9;
}

.vx-about-formula span:nth-of-type(3){
    color:#20B8F2;
}

.vx-about-formula i{
    color:rgba(255,255,255,.25);
    font-size:30px;
    font-style:normal;
    font-weight:300;
}

.vx-about-reveal__line{
    width:1px;
    height:72px;
    margin:45px auto 34px;
    background:linear-gradient(
        to bottom,
        rgba(32,184,242,.2),
        #20B8F2
    );
}

.vx-about-reveal h2{
    margin:0;
    color:#fff;
    font-size:clamp(82px,13vw,170px);
    line-height:.8;
    letter-spacing:-.075em;
    font-weight:800;
}

.vx-about-reveal__tagline{
    margin:35px 0 0;
    color:#8EDFFA;
    font-size:18px;
    font-weight:600;
    letter-spacing:.09em;
}

.vx-about-reveal__statement{
    max-width:730px;
    margin:32px auto 0;
    color:rgba(255,255,255,.66);
    font-size:17px;
    line-height:1.8;
}


/* =========================================================
   VISION
========================================================= */

.vx-about-vision{
    padding:125px 0 135px;
    background:#fff;
}

.vx-about-vision__head{
    max-width:760px;
    margin-bottom:70px;
}

.vx-about-vision__head p{
    margin:24px 0 0;
    max-width:570px;
    color:var(--muted);
    font-size:16px;
    line-height:1.7;
}

.vx-about-pillars{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.vx-about-pillar{
    position:relative;
    min-height:340px;
    padding:42px 32px 38px;
}

.vx-about-pillar + .vx-about-pillar{
    border-left:1px solid var(--line);
}

.vx-about-pillar__number{
    position:absolute;
    top:27px;
    right:25px;
    color:#B0BEC7;
    font-size:9px;
    letter-spacing:.15em;
}

.vx-about-pillar__icon{
    width:48px;
    height:48px;
    margin-bottom:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #CFE0E9;
    border-radius:50%;
}

.vx-about-pillar__icon svg{
    width:23px;
    height:23px;
    fill:none;
    stroke:var(--blue2);
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.vx-about-pillar h3{
    margin:0;
    color:var(--navy);
    font-size:23px;
    font-weight:600;
}

.vx-about-pillar p{
    margin:15px 0 0;
    color:var(--muted);
    font-size:14px;
    line-height:1.75;
}

.vx-about-convergence{
    position:relative;
    width:280px;
    margin:70px auto 0;
    text-align:center;
}

.vx-about-convergence__line{
    width:1px;
    height:55px;
    margin:0 auto 20px;
    background:var(--cyan);
}

.vx-about-convergence span{
    display:block;
    color:var(--blue2);
    font-size:9px;
    font-weight:800;
    letter-spacing:.2em;
}

.vx-about-convergence strong{
    display:block;
    margin-top:8px;
    color:var(--navy);
    font-size:15px;
    letter-spacing:.08em;
}


/* =========================================================
   PRINCIPLE
========================================================= */

.vx-about-principle{
    background:var(--soft);
}

.vx-about-principle__inner{
    min-height:500px;
    padding:100px 0;
    display:grid;
    grid-template-columns:80px minmax(0,1.25fr) minmax(300px,.6fr);
    gap:55px;
    align-items:center;
}

.vx-about-principle__number{
    align-self:start;
    color:#9DADB8;
    font-size:10px;
    letter-spacing:.18em;
}

.vx-about-principle__copy > span{
    display:block;
    margin-bottom:20px;
    color:var(--blue2);
    font-size:10px;
    font-weight:800;
    letter-spacing:.22em;
}

.vx-about-principle h2{
    margin:0;
    max-width:700px;
    color:var(--navy);
    font-size:clamp(43px,5vw,65px);
    line-height:1.03;
    letter-spacing:-.05em;
    font-weight:550;
}

.vx-about-principle h2 strong{
    display:block;
    margin-top:8px;
    color:var(--blue2);
    font-weight:550;
}

.vx-about-principle__inner > p{
    margin:0;
    padding-left:32px;
    border-left:1px solid #CCD9E0;
    color:var(--muted);
    font-size:15px;
    line-height:1.85;
}


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

@media (prefers-reduced-motion:no-preference){

    .vx-about-word__letters{
        transition:
            transform .35s ease,
            color .35s ease;
    }

    .vx-about-word__item:hover
    .vx-about-word__letters{
        transform:translateX(8px);
    }

}


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

@media(max-width:1000px){

    .vx-about-hero__inner{
        grid-template-columns:1fr;
    }

    .vx-about-hero__signature{
        display:none;
    }

    .vx-about-heading{
        grid-template-columns:1fr;
        gap:28px;
    }

    .vx-about-word__item{
        grid-template-columns:50px 220px 1fr;
    }

    .vx-about-pillars{
        grid-template-columns:1fr 1fr;
    }

    .vx-about-pillar:nth-child(3){
        border-left:0;
        border-top:1px solid var(--line);
    }

    .vx-about-pillar:nth-child(4){
        border-top:1px solid var(--line);
    }

    .vx-about-principle__inner{
        grid-template-columns:1fr;
        gap:30px;
    }

    .vx-about-principle__number{
        display:none;
    }

    .vx-about-principle__inner > p{
        max-width:650px;
    }

    .vx-about-cta__inner{
        grid-template-columns:1fr;
        gap:45px;
    }

}


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

@media(max-width:700px){

    .vx-about-shell{
        width:min(100% - 36px,1240px);
    }

    .vx-about-hero{
        min-height:700px;
    }

    .vx-about-hero__inner{
        padding:155px 0 125px;
    }

    .vx-about-hero h1{
        font-size:49px;
    }

    .vx-about-hero__copy p{
        font-size:16px;
    }

    .vx-about-hero__bottom .vx-about-shell{
        gap:11px;
        justify-content:center;
    }

    .vx-about-hero__bottom i{
        width:15px;
    }

    .vx-about-hero__bottom span{
        font-size:7px;
    }

    .vx-about-why,
    .vx-about-vision{
        padding:80px 0;
    }

    .vx-about-heading{
        margin-bottom:45px;
    }

    .vx-about-heading h2,
    .vx-about-vision__head h2{
        font-size:44px;
    }

    .vx-about-word__item{
        min-height:0;
        padding:42px 0;
        grid-template-columns:1fr;
        gap:10px;
    }

    .vx-about-word__index{
        padding:0;
    }

    .vx-about-word__letters{
        margin:15px 0 22px;
        font-size:90px;
    }

    .vx-about-word__meaning{
        padding:0;
    }

    .vx-about-reveal{
        padding:95px 0;
    }

    .vx-about-formula{
        gap:12px;
    }

    .vx-about-formula span{
        font-size:40px;
    }

    .vx-about-formula i{
        font-size:18px;
    }

    .vx-about-reveal h2{
        font-size:76px;
    }

    .vx-about-reveal__tagline{
        font-size:14px;
    }

    .vx-about-pillars{
        grid-template-columns:1fr;
    }

    .vx-about-pillar{
        min-height:auto;
        padding:38px 0;
    }

    .vx-about-pillar + .vx-about-pillar{
        border-left:0;
        border-top:1px solid var(--line);
    }

    .vx-about-pillar__icon{
        margin-bottom:30px;
    }

    .vx-about-principle__inner{
        padding:75px 0;
    }

    .vx-about-principle h2{
        font-size:42px;
    }

    .vx-about-principle__inner > p{
        padding-left:20px;
    }

    .vx-about-cta__inner{
        padding:75px 0;
    }

    .vx-about-cta h2{
        font-size:43px;
    }

}


/* ==========================================================
   VIREXIS — HERO / LOGO OFICIAL
   Elaborado por Miguel Minier | MDesign
   ========================================================== */

.vx-about-hero__signature{
    width:min(100%,360px);
    min-height:112px;

    justify-self:end;

    display:flex;
    align-items:center;

    padding-left:34px;

    border-left:
        1px solid rgba(142,223,250,.30);
}

.vx-about-hero__logo{
    display:block;

    width:min(100%,275px);
    height:auto;

    object-fit:contain;
    object-position:left center;
}


/* Neutralizar elementos anteriores por seguridad */

.vx-about-hero__signature .vx-about-hero__v,
.vx-about-hero__signature > div{
    display:none;
}


@media(max-width:1000px){

    .vx-about-hero__signature{
        display:flex;

        justify-self:start;

        width:300px;
        min-height:auto;

        margin-top:5px;
        padding:0 0 0 24px;
    }

    .vx-about-hero__logo{
        width:235px;
    }

}


@media(max-width:700px){

    .vx-about-hero__signature{
        width:245px;

        margin-top:12px;
        padding-left:18px;
    }

    .vx-about-hero__logo{
        width:205px;
    }

}


/* ==========================================================
   VIREXIS — CIERRE EDITORIAL / SEPARACION CTA GLOBAL
   Elaborado por Miguel Minier | MDesign
   ========================================================== */

/*
 * La última sección propia de Sobre Virexis permanece clara.
 * Esto crea una transición deliberada antes del CTA global.
 */

.vx-about-principle{
    position:relative;
    background:#F5F8FA !important;
    border-top:1px solid #E4EBEF;
    border-bottom:1px solid #E4EBEF;
}

.vx-about-principle__inner{
    min-height:520px;
}

/*
 * Línea editorial cyan que marca el final de la narrativa.
 */

.vx-about-principle::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:64px;
    height:3px;
    transform:translateX(-50%);
    background:#20B8F2;
}


/*
 * Aire adicional antes de salir de la narrativa institucional.
 */

.vx-about-principle__inner{
    padding-top:115px;
    padding-bottom:125px;
}


@media(max-width:700px){

    .vx-about-principle__inner{
        min-height:auto;
        padding-top:80px;
        padding-bottom:90px;
    }

}


/* ==========================================================
   VIREXIS — SOBRE VIREXIS / HERO V2
   BRAND REVEAL
   Elaborado por Miguel Minier | MDesign
   ========================================================== */

.vx-about-hero--v2{
    position:relative;

    min-height:100svh;

    display:block;

    overflow:hidden;
    isolation:isolate;

    background:
        linear-gradient(
            118deg,
            #011522 0%,
            #021D31 46%,
            #052E4C 100%
        );

    color:#fff;
}


/* ----------------------------------------------------------
   ATMOSPHERE
---------------------------------------------------------- */

.vx-about-hero-v2__atmosphere{
    position:absolute;
    inset:0;
    z-index:-4;

    background:
        radial-gradient(
            circle at 77% 35%,
            rgba(32,184,242,.17),
            transparent 27%
        ),
        radial-gradient(
            circle at 34% 82%,
            rgba(10,87,146,.22),
            transparent 34%
        );
}


.vx-about-hero-v2__grid{
    position:absolute;
    inset:0;
    z-index:-3;

    opacity:.11;

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

    background-size:90px 90px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 25%,
            #000 75%,
            transparent 100%
        );
}


/* ----------------------------------------------------------
   GIANT WORDMARK
---------------------------------------------------------- */

.vx-about-hero-v2__ghost{
    position:absolute;

    left:50%;
    bottom:-.12em;

    z-index:-2;

    transform:translateX(-50%);

    color:transparent;

    -webkit-text-stroke:
        1px rgba(137,220,249,.13);

    white-space:nowrap;

    font-size:clamp(170px,24vw,410px);
    line-height:.7;

    font-weight:800;

    letter-spacing:-.085em;

    user-select:none;
}


/* ----------------------------------------------------------
   LAYOUT
---------------------------------------------------------- */

.vx-about-hero-v2__inner{
    position:relative;

    min-height:100svh;

    padding:
        clamp(125px,14vh,170px)
        0
        55px;

    display:flex;
    flex-direction:column;
}


.vx-about-hero-v2__top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-bottom:30px;

    border-bottom:
        1px solid rgba(255,255,255,.11);
}


.vx-about-hero-v2__eyebrow,
.vx-about-hero-v2__edition{
    color:#83DDFC;

    font-size:9px;
    font-weight:800;

    letter-spacing:.25em;
}


.vx-about-hero-v2__edition{
    display:flex;
    align-items:center;
    gap:13px;

    color:rgba(255,255,255,.46);
}


.vx-about-hero-v2__edition i{
    display:block;

    width:3px;
    height:3px;

    border-radius:50%;

    background:#20B8F2;
}


/* ----------------------------------------------------------
   MAIN STAGE
---------------------------------------------------------- */

.vx-about-hero-v2__stage{
    flex:1;

    display:grid;

    grid-template-columns:
        minmax(0,1.38fr)
        minmax(300px,.62fr);

    gap:clamp(70px,9vw,145px);

    align-items:center;

    padding:
        clamp(55px,8vh,90px)
        0;
}


.vx-about-hero-v2__copy h1{
    max-width:900px;

    margin:0;

    font-size:
        clamp(58px,6.1vw,96px);

    line-height:.94;

    letter-spacing:-.065em;

    font-weight:520;
}


.vx-about-hero-v2__copy h1 span{
    display:block;

    margin-top:8px;

    color:#82DAF9;
}


.vx-about-hero-v2__intro{
    max-width:680px;

    margin-top:50px;

    display:grid;

    grid-template-columns:55px 1fr;

    gap:24px;

    align-items:start;
}


.vx-about-hero-v2__intro-line{
    width:55px;
    height:1px;

    margin-top:13px;

    background:#20B8F2;
}


.vx-about-hero-v2__intro p{
    margin:0;

    color:rgba(255,255,255,.63);

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


/* ----------------------------------------------------------
   IDENTITY MODULE
---------------------------------------------------------- */

.vx-about-hero-v2__identity{
    position:relative;

    padding:
        38px 0
        38px 45px;

    border-left:
        1px solid rgba(129,220,250,.22);
}


.vx-about-hero-v2__logo-wrap > span{
    display:block;

    margin-bottom:28px;

    color:rgba(255,255,255,.42);

    font-size:8px;
    font-weight:800;

    letter-spacing:.24em;
}


.vx-about-hero-v2__logo-wrap img{
    display:block;

    width:min(100%,330px);
    height:auto;
}


.vx-about-hero-v2__formula{
    margin-top:55px;

    padding-top:27px;

    display:grid;

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

    gap:15px;

    align-items:center;

    border-top:
        1px solid rgba(255,255,255,.11);
}


.vx-about-hero-v2__formula div{
    display:flex;
    flex-direction:column;
    gap:5px;
}


.vx-about-hero-v2__formula strong{
    color:#fff;

    font-size:12px;
    font-weight:750;

    letter-spacing:.1em;
}


.vx-about-hero-v2__formula small{
    color:rgba(255,255,255,.38);

    font-size:8px;

    letter-spacing:.08em;
}


.vx-about-hero-v2__formula i{
    display:block;

    height:1px;

    background:
        rgba(137,220,249,.25);
}


/* ----------------------------------------------------------
   FOOT
---------------------------------------------------------- */

.vx-about-hero-v2__footer{
    min-height:55px;

    padding-top:23px;

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

    border-top:
        1px solid rgba(255,255,255,.11);
}


.vx-about-hero-v2__footer > span,
.vx-about-hero-v2__scroll span{
    color:rgba(255,255,255,.38);

    font-size:8px;
    font-weight:750;

    letter-spacing:.21em;
}


.vx-about-hero-v2__scroll{
    display:flex;
    align-items:center;
    gap:16px;
}


.vx-about-hero-v2__scroll i{
    position:relative;

    display:block;

    width:1px;
    height:35px;

    overflow:hidden;

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


.vx-about-hero-v2__scroll i::after{
    content:"";

    position:absolute;

    top:-12px;
    left:0;

    width:1px;
    height:12px;

    background:#20B8F2;

    animation:
        vxAboutScrollLine
        2.4s
        ease-in-out
        infinite;
}


@keyframes vxAboutScrollLine{

    0%{
        transform:translateY(0);
    }

    70%,
    100%{
        transform:translateY(48px);
    }

}


/* ----------------------------------------------------------
   REMOVE V1 HERO DECORATION
---------------------------------------------------------- */

.vx-about-hero--v2::before,
.vx-about-hero--v2
.vx-about-hero__orb,
.vx-about-hero--v2
.vx-about-hero__bottom{
    display:none !important;
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media(max-width:1050px){

    .vx-about-hero-v2__stage{
        grid-template-columns:1fr;
        gap:55px;
    }

    .vx-about-hero-v2__identity{
        max-width:560px;

        padding:
            30px 0
            30px 30px;
    }

    .vx-about-hero-v2__logo-wrap img{
        width:270px;
    }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media(max-width:700px){

    .vx-about-hero--v2{
        min-height:auto;
    }

    .vx-about-hero-v2__inner{
        min-height:auto;

        padding:
            120px 0
            35px;
    }

    .vx-about-hero-v2__edition{
        display:none;
    }

    .vx-about-hero-v2__stage{
        padding:55px 0 65px;
    }

    .vx-about-hero-v2__copy h1{
        font-size:53px;
        line-height:.98;
    }

    .vx-about-hero-v2__intro{
        margin-top:36px;

        grid-template-columns:30px 1fr;

        gap:15px;
    }

    .vx-about-hero-v2__intro-line{
        width:30px;
    }

    .vx-about-hero-v2__intro p{
        font-size:15px;
    }

    .vx-about-hero-v2__identity{
        padding:
            28px 0
            28px 22px;
    }

    .vx-about-hero-v2__logo-wrap img{
        width:235px;
    }

    .vx-about-hero-v2__formula{
        gap:9px;
    }

    .vx-about-hero-v2__formula small{
        display:none;
    }

    .vx-about-hero-v2__footer > span{
        max-width:190px;
        line-height:1.7;
    }

    .vx-about-hero-v2__ghost{
        bottom:20px;

        font-size:145px;
    }

}


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

    .vx-about-hero-v2__scroll i::after{
        animation:none;
    }

}


/* ==========================================================
   VIREXIS — SOBRE VIREXIS / HERO V2
   BRAND REVEAL
   Elaborado por Miguel Minier | MDesign
   ========================================================== */

.vx-about-hero--v2{
    position:relative;

    min-height:100svh;

    display:block;

    overflow:hidden;
    isolation:isolate;

    background:
        linear-gradient(
            118deg,
            #011522 0%,
            #021D31 46%,
            #052E4C 100%
        );

    color:#fff;
}


/* ----------------------------------------------------------
   ATMOSPHERE
---------------------------------------------------------- */

.vx-about-hero-v2__atmosphere{
    position:absolute;
    inset:0;
    z-index:-4;

    background:
        radial-gradient(
            circle at 77% 35%,
            rgba(32,184,242,.17),
            transparent 27%
        ),
        radial-gradient(
            circle at 34% 82%,
            rgba(10,87,146,.22),
            transparent 34%
        );
}


.vx-about-hero-v2__grid{
    position:absolute;
    inset:0;
    z-index:-3;

    opacity:.11;

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

    background-size:90px 90px;

    mask-image:
        linear-gradient(
            90deg,
            transparent 0%,
            #000 25%,
            #000 75%,
            transparent 100%
        );
}


/* ----------------------------------------------------------
   GIANT WORDMARK
---------------------------------------------------------- */

.vx-about-hero-v2__ghost{
    position:absolute;

    left:50%;
    bottom:-.12em;

    z-index:-2;

    transform:translateX(-50%);

    color:transparent;

    -webkit-text-stroke:
        1px rgba(137,220,249,.13);

    white-space:nowrap;

    font-size:clamp(170px,24vw,410px);
    line-height:.7;

    font-weight:800;

    letter-spacing:-.085em;

    user-select:none;
}


/* ----------------------------------------------------------
   LAYOUT
---------------------------------------------------------- */

.vx-about-hero-v2__inner{
    position:relative;

    min-height:100svh;

    padding:
        clamp(125px,14vh,170px)
        0
        55px;

    display:flex;
    flex-direction:column;
}


.vx-about-hero-v2__top{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-bottom:30px;

    border-bottom:
        1px solid rgba(255,255,255,.11);
}


.vx-about-hero-v2__eyebrow,
.vx-about-hero-v2__edition{
    color:#83DDFC;

    font-size:9px;
    font-weight:800;

    letter-spacing:.25em;
}


.vx-about-hero-v2__edition{
    display:flex;
    align-items:center;
    gap:13px;

    color:rgba(255,255,255,.46);
}


.vx-about-hero-v2__edition i{
    display:block;

    width:3px;
    height:3px;

    border-radius:50%;

    background:#20B8F2;
}


/* ----------------------------------------------------------
   MAIN STAGE
---------------------------------------------------------- */

.vx-about-hero-v2__stage{
    flex:1;

    display:grid;

    grid-template-columns:
        minmax(0,1.38fr)
        minmax(300px,.62fr);

    gap:clamp(70px,9vw,145px);

    align-items:center;

    padding:
        clamp(55px,8vh,90px)
        0;
}


.vx-about-hero-v2__copy h1{
    max-width:900px;

    margin:0;

    font-size:
        clamp(58px,6.1vw,96px);

    line-height:.94;

    letter-spacing:-.065em;

    font-weight:520;
}


.vx-about-hero-v2__copy h1 span{
    display:block;

    margin-top:8px;

    color:#82DAF9;
}


.vx-about-hero-v2__intro{
    max-width:680px;

    margin-top:50px;

    display:grid;

    grid-template-columns:55px 1fr;

    gap:24px;

    align-items:start;
}


.vx-about-hero-v2__intro-line{
    width:55px;
    height:1px;

    margin-top:13px;

    background:#20B8F2;
}


.vx-about-hero-v2__intro p{
    margin:0;

    color:rgba(255,255,255,.63);

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


/* ----------------------------------------------------------
   IDENTITY MODULE
---------------------------------------------------------- */

.vx-about-hero-v2__identity{
    position:relative;

    padding:
        38px 0
        38px 45px;

    border-left:
        1px solid rgba(129,220,250,.22);
}


.vx-about-hero-v2__logo-wrap > span{
    display:block;

    margin-bottom:28px;

    color:rgba(255,255,255,.42);

    font-size:8px;
    font-weight:800;

    letter-spacing:.24em;
}


.vx-about-hero-v2__logo-wrap img{
    display:block;

    width:min(100%,330px);
    height:auto;
}


.vx-about-hero-v2__formula{
    margin-top:55px;

    padding-top:27px;

    display:grid;

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

    gap:15px;

    align-items:center;

    border-top:
        1px solid rgba(255,255,255,.11);
}


.vx-about-hero-v2__formula div{
    display:flex;
    flex-direction:column;
    gap:5px;
}


.vx-about-hero-v2__formula strong{
    color:#fff;

    font-size:12px;
    font-weight:750;

    letter-spacing:.1em;
}


.vx-about-hero-v2__formula small{
    color:rgba(255,255,255,.38);

    font-size:8px;

    letter-spacing:.08em;
}


.vx-about-hero-v2__formula i{
    display:block;

    height:1px;

    background:
        rgba(137,220,249,.25);
}


/* ----------------------------------------------------------
   FOOT
---------------------------------------------------------- */

.vx-about-hero-v2__footer{
    min-height:55px;

    padding-top:23px;

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

    border-top:
        1px solid rgba(255,255,255,.11);
}


.vx-about-hero-v2__footer > span,
.vx-about-hero-v2__scroll span{
    color:rgba(255,255,255,.38);

    font-size:8px;
    font-weight:750;

    letter-spacing:.21em;
}


.vx-about-hero-v2__scroll{
    display:flex;
    align-items:center;
    gap:16px;
}


.vx-about-hero-v2__scroll i{
    position:relative;

    display:block;

    width:1px;
    height:35px;

    overflow:hidden;

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


.vx-about-hero-v2__scroll i::after{
    content:"";

    position:absolute;

    top:-12px;
    left:0;

    width:1px;
    height:12px;

    background:#20B8F2;

    animation:
        vxAboutScrollLine
        2.4s
        ease-in-out
        infinite;
}


@keyframes vxAboutScrollLine{

    0%{
        transform:translateY(0);
    }

    70%,
    100%{
        transform:translateY(48px);
    }

}


/* ----------------------------------------------------------
   REMOVE V1 HERO DECORATION
---------------------------------------------------------- */

.vx-about-hero--v2::before,
.vx-about-hero--v2
.vx-about-hero__orb,
.vx-about-hero--v2
.vx-about-hero__bottom{
    display:none !important;
}


/* ----------------------------------------------------------
   TABLET
---------------------------------------------------------- */

@media(max-width:1050px){

    .vx-about-hero-v2__stage{
        grid-template-columns:1fr;
        gap:55px;
    }

    .vx-about-hero-v2__identity{
        max-width:560px;

        padding:
            30px 0
            30px 30px;
    }

    .vx-about-hero-v2__logo-wrap img{
        width:270px;
    }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media(max-width:700px){

    .vx-about-hero--v2{
        min-height:auto;
    }

    .vx-about-hero-v2__inner{
        min-height:auto;

        padding:
            120px 0
            35px;
    }

    .vx-about-hero-v2__edition{
        display:none;
    }

    .vx-about-hero-v2__stage{
        padding:55px 0 65px;
    }

    .vx-about-hero-v2__copy h1{
        font-size:53px;
        line-height:.98;
    }

    .vx-about-hero-v2__intro{
        margin-top:36px;

        grid-template-columns:30px 1fr;

        gap:15px;
    }

    .vx-about-hero-v2__intro-line{
        width:30px;
    }

    .vx-about-hero-v2__intro p{
        font-size:15px;
    }

    .vx-about-hero-v2__identity{
        padding:
            28px 0
            28px 22px;
    }

    .vx-about-hero-v2__logo-wrap img{
        width:235px;
    }

    .vx-about-hero-v2__formula{
        gap:9px;
    }

    .vx-about-hero-v2__formula small{
        display:none;
    }

    .vx-about-hero-v2__footer > span{
        max-width:190px;
        line-height:1.7;
    }

    .vx-about-hero-v2__ghost{
        bottom:20px;

        font-size:145px;
    }

}


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

    .vx-about-hero-v2__scroll i::after{
        animation:none;
    }

}


/* ==========================================================
   VIREXIS — IDENTITY LINES / LIVING MOTION V1
   Elaborado por Miguel Minier | MDesign
   ========================================================== */


/* ----------------------------------------------------------
   LINEA VERTICAL — PULSO DESCENDENTE
---------------------------------------------------------- */

.vx-about-hero-v2__identity{
    overflow:hidden;
}

/* ocultamos visualmente el border original para recrearlo animado */
.vx-about-hero-v2__identity{
    border-left-color:transparent !important;
}

.vx-about-hero-v2__identity::before{
    content:"";
    position:absolute;

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

    width:1px;

    background:
        rgba(129,220,250,.18);
}

.vx-about-hero-v2__identity::after{
    content:"";
    position:absolute;

    left:0;
    top:-30%;

    width:1px;
    height:30%;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(32,184,242,.15) 20%,
            rgba(115,221,255,.95) 55%,
            rgba(32,184,242,.30) 80%,
            transparent 100%
        );

    filter:
        drop-shadow(0 0 5px rgba(32,184,242,.65));

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


@keyframes vxIdentityVerticalPulse{

    0%{
        transform:translateY(0);
        opacity:0;
    }

    8%{
        opacity:1;
    }

    72%{
        opacity:1;
    }

    88%,
    100%{
        transform:translateY(440%);
        opacity:0;
    }

}


/* ----------------------------------------------------------
   LINEA HORIZONTAL PRINCIPAL BAJO EL LOGO
---------------------------------------------------------- */

.vx-about-hero-v2__formula{
    position:relative;

    border-top-color:transparent !important;
}

.vx-about-hero-v2__formula::before{
    content:"";
    position:absolute;

    left:0;
    right:0;
    top:0;

    height:1px;

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

.vx-about-hero-v2__formula::after{
    content:"";
    position:absolute;

    top:0;
    left:-25%;

    width:25%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(86,207,250,.35),
            rgba(164,235,255,1),
            rgba(86,207,250,.35),
            transparent
        );

    filter:
        drop-shadow(0 0 4px rgba(32,184,242,.7));

    animation:
        vxIdentityHorizontalSweep
        5.6s
        cubic-bezier(.45,0,.55,1)
        infinite;

    animation-delay:.7s;
}


@keyframes vxIdentityHorizontalSweep{

    0%{
        transform:translateX(0);
        opacity:0;
    }

    10%{
        opacity:1;
    }

    75%{
        opacity:1;
    }

    90%,
    100%{
        transform:translateX(500%);
        opacity:0;
    }

}


/* ----------------------------------------------------------
   LINEAS ENTRE VIR · REX · EXIS
---------------------------------------------------------- */

.vx-about-hero-v2__formula > i{
    position:relative;

    overflow:hidden;

    background:
        rgba(137,220,249,.20);
}

.vx-about-hero-v2__formula > i::after{
    content:"";

    position:absolute;

    top:0;
    left:-55%;

    width:55%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(125,224,255,.95),
            transparent
        );

    filter:
        drop-shadow(0 0 3px rgba(32,184,242,.65));

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


.vx-about-hero-v2__formula > i:nth-of-type(1)::after{
    animation-delay:1.1s;
}

.vx-about-hero-v2__formula > i:nth-of-type(2)::after{
    animation-delay:1.7s;
}


@keyframes vxIdentityConnectorPulse{

    0%,
    18%{
        transform:translateX(0);
        opacity:0;
    }

    30%{
        opacity:1;
    }

    72%{
        opacity:1;
    }

    88%,
    100%{
        transform:translateX(285%);
        opacity:0;
    }

}


/* ----------------------------------------------------------
   MICRO RESPIRACION DE LOS CONCEPTOS
---------------------------------------------------------- */

.vx-about-hero-v2__formula strong{
    transition:
        color .4s ease,
        text-shadow .4s ease;
}

.vx-about-hero-v2__formula div{
    animation:
        vxIdentityWordBreath
        7s
        ease-in-out
        infinite;
}

.vx-about-hero-v2__formula div:nth-of-type(2){
    animation-delay:.65s;
}

.vx-about-hero-v2__formula div:nth-of-type(3){
    animation-delay:1.3s;
}


@keyframes vxIdentityWordBreath{

    0%,
    72%,
    100%{
        opacity:.88;
    }

    82%{
        opacity:1;
    }

}


/* ----------------------------------------------------------
   ACCESIBILIDAD
---------------------------------------------------------- */

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

    .vx-about-hero-v2__identity::after,
    .vx-about-hero-v2__formula::after,
    .vx-about-hero-v2__formula > i::after,
    .vx-about-hero-v2__formula div{
        animation:none !important;
    }

}


/* ==========================================================
   VIREXIS — BRAND REVEAL / LIVING TYPOGRAPHY V2
   VIR > REX > EXIS > VIREXIS
   Elaborado por Miguel Minier | MDesign
   ========================================================== */


/* ----------------------------------------------------------
   PREPARACION
---------------------------------------------------------- */

.vx-about-reveal{
    --vx-cycle:8s;
}

.vx-about-formula span{
    position:relative;
    display:inline-block;

    transform-origin:center;

    will-change:
        transform,
        filter,
        opacity;

    animation:
        vxRevealConcept
        var(--vx-cycle)
        cubic-bezier(.4,0,.2,1)
        infinite;
}


/* VIR */

.vx-about-formula span:nth-of-type(1){
    animation-delay:0s;
}


/* REX */

.vx-about-formula span:nth-of-type(2){
    animation-delay:.7s;
}


/* EXIS */

.vx-about-formula span:nth-of-type(3){
    animation-delay:1.4s;
}


/* ----------------------------------------------------------
   PULSO DE CADA CONCEPTO
---------------------------------------------------------- */

@keyframes vxRevealConcept{

    0%,
    7%{
        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1);

        text-shadow:
            0 0 0 rgba(32,184,242,0);
    }

    11%{
        transform:
            translateY(-4px)
            scale(1.035);

        filter:
            brightness(1.35);

        text-shadow:
            0 0 22px rgba(72,202,248,.32);
    }

    17%{
        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1.08);

        text-shadow:
            0 0 8px rgba(32,184,242,.12);
    }

    25%,
    100%{
        transform:
            translateY(0)
            scale(1);

        filter:
            brightness(1);

        text-shadow:
            0 0 0 rgba(32,184,242,0);
    }

}


/* ----------------------------------------------------------
   LOS SIGNOS +
---------------------------------------------------------- */

.vx-about-formula i{
    position:relative;

    animation:
        vxRevealPlus
        var(--vx-cycle)
        ease-in-out
        infinite;
}


.vx-about-formula i:nth-of-type(1){
    animation-delay:.42s;
}


.vx-about-formula i:nth-of-type(2){
    animation-delay:1.12s;
}


@keyframes vxRevealPlus{

    0%,
    8%{
        color:rgba(255,255,255,.25);
        text-shadow:none;
    }

    12%{
        color:#83DFFA;

        text-shadow:
            0 0 12px rgba(32,184,242,.65);
    }

    18%,
    100%{
        color:rgba(255,255,255,.25);
        text-shadow:none;
    }

}


/* ----------------------------------------------------------
   LINEA CENTRAL
   La energia baja hacia VIREXIS
---------------------------------------------------------- */

.vx-about-reveal__line{
    position:relative;

    overflow:hidden;

    background:
        rgba(32,184,242,.22) !important;
}


.vx-about-reveal__line::after{
    content:"";

    position:absolute;

    top:-45%;
    left:0;

    width:100%;
    height:45%;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(91,213,255,.25) 20%,
            #B7EEFF 55%,
            #20B8F2 75%,
            transparent 100%
        );

    box-shadow:
        0 0 10px rgba(32,184,242,.85);

    animation:
        vxRevealEnergyDrop
        var(--vx-cycle)
        cubic-bezier(.45,0,.55,1)
        infinite;
}


@keyframes vxRevealEnergyDrop{

    0%,
    29%{
        transform:translateY(0);
        opacity:0;
    }

    31%{
        opacity:1;
    }

    43%{
        transform:translateY(325%);
        opacity:1;
    }

    47%,
    100%{
        transform:translateY(325%);
        opacity:0;
    }

}


/* ----------------------------------------------------------
   VIREXIS GRANDE
   BASE
---------------------------------------------------------- */

.vx-about-reveal h2{
    position:relative;

    display:table;

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

    color:#fff;

    isolation:isolate;

    will-change:
        transform,
        filter;

    animation:
        vxRevealMasterBreath
        var(--vx-cycle)
        ease-in-out
        infinite;
}


/* ----------------------------------------------------------
   REFLEJO QUE ATRAVIESA VIREXIS
---------------------------------------------------------- */

.vx-about-reveal h2::after{
    content:"VIREXIS";

    position:absolute;
    inset:0;

    z-index:2;

    color:transparent;

    background:
        linear-gradient(
            105deg,
            transparent 0%,
            transparent 36%,
            rgba(255,255,255,.10) 43%,
            #BCEEFF 49%,
            #FFFFFF 50%,
            #74D8FB 52%,
            rgba(32,184,242,.12) 58%,
            transparent 65%,
            transparent 100%
        );

    background-size:
        260% 100%;

    background-position:
        160% 0;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    pointer-events:none;

    animation:
        vxRevealMasterSweep
        var(--vx-cycle)
        cubic-bezier(.4,0,.2,1)
        infinite;
}


@keyframes vxRevealMasterSweep{

    0%,
    42%{
        background-position:160% 0;
        opacity:0;
    }

    44%{
        opacity:1;
    }

    63%{
        background-position:-60% 0;
        opacity:1;
    }

    67%,
    100%{
        background-position:-60% 0;
        opacity:0;
    }

}


/* ----------------------------------------------------------
   RESPIRACION FINAL DEL NOMBRE
---------------------------------------------------------- */

@keyframes vxRevealMasterBreath{

    0%,
    42%{
        transform:scale(1);

        filter:
            drop-shadow(
                0 0 0 rgba(32,184,242,0)
            );
    }

    51%{
        transform:scale(1.012);

        filter:
            drop-shadow(
                0 0 20px rgba(32,184,242,.16)
            );
    }

    65%{
        transform:scale(1);

        filter:
            drop-shadow(
                0 0 5px rgba(32,184,242,.06)
            );
    }

    75%,
    100%{
        transform:scale(1);

        filter:
            drop-shadow(
                0 0 0 rgba(32,184,242,0)
            );
    }

}


/* ----------------------------------------------------------
   TAGLINE
   Vitalidad. Excelencia. Evolucion.
---------------------------------------------------------- */

.vx-about-reveal__tagline{
    animation:
        vxRevealTagline
        var(--vx-cycle)
        ease-in-out
        infinite;
}


@keyframes vxRevealTagline{

    0%,
    51%{
        opacity:.72;
        letter-spacing:.09em;
    }

    61%{
        opacity:1;
        letter-spacing:.115em;

        text-shadow:
            0 0 12px rgba(32,184,242,.22);
    }

    72%,
    100%{
        opacity:.72;
        letter-spacing:.09em;

        text-shadow:none;
    }

}


/* ----------------------------------------------------------
   ACCESIBILIDAD
---------------------------------------------------------- */

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

    .vx-about-formula span,
    .vx-about-formula i,
    .vx-about-reveal__line::after,
    .vx-about-reveal h2,
    .vx-about-reveal h2::after,
    .vx-about-reveal__tagline{
        animation:none !important;
    }

}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media(max-width:700px){

    .vx-about-reveal h2::after{
        content:"VIREXIS";
    }

}


/* ==========================================================
   VIREXIS — OUTLINE WORDMARK MOTION V1
   Elaborado por Miguel Minier | MDesign
   ========================================================== */


/* El contenedor conserva exactamente su posición actual */

.vx-about-hero-v2__ghost{
    width:100%;
    height:clamp(180px,25vw,410px);

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

    pointer-events:none;
}


/* ----------------------------------------------------------
   FALLBACK
---------------------------------------------------------- */

.vx-about-ghost-fallback{
    position:absolute;

    left:50%;
    bottom:0;

    transform:translateX(-50%);

    color:transparent;

    -webkit-text-stroke:
        1px rgba(137,220,249,.13);

    white-space:nowrap;

    font-size:clamp(170px,24vw,410px);
    line-height:.7;
    font-weight:800;
    letter-spacing:-.085em;
}


/* ----------------------------------------------------------
   SVG
---------------------------------------------------------- */

.vx-about-ghost-svg{
    position:absolute;

    left:50%;
    bottom:-1px;

    width:min(118vw,1800px);
    height:auto;

    transform:translateX(-50%);

    overflow:visible;

    opacity:0;
}


/*
 * Mantenemos una tipografía equivalente al wordmark
 * existente para no alterar la composición.
 */

.vx-about-ghost-svg text{
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:310px;
    font-weight:800;

    letter-spacing:-24px;

    fill:transparent;

    paint-order:stroke;
}


/* Contorno permanente */

.vx-ghost-base{
    stroke:rgba(137,220,249,.12);
    stroke-width:1.3px;
}


/* Trazo que "dibuja" VIREXIS */

.vx-ghost-draw{
    stroke:rgba(137,220,249,.66);
    stroke-width:1.6px;

    stroke-dasharray:2600;
    stroke-dashoffset:2600;

    opacity:.92;
}


/* Pulso que recorrerá el wordmark */

.vx-ghost-energy{
    stroke:#20B8F2;
    stroke-width:2px;

    stroke-dasharray:90 2510;
    stroke-dashoffset:2600;

    opacity:0;
}


/* ----------------------------------------------------------
   X ENERGY
---------------------------------------------------------- */

.vx-ghost-x-energy{
    opacity:0;

    stroke:#20B8F2;
    stroke-width:2;

    fill:#20B8F2;

    vector-effect:non-scaling-stroke;
}

.vx-ghost-x-energy line{
    stroke-dasharray:270;
    stroke-dashoffset:270;
}


/* ----------------------------------------------------------
   CUANDO JS CONFIRMA SOPORTE
---------------------------------------------------------- */

.vx-about-hero-v2__ghost.is-vx-svg-ready
.vx-about-ghost-svg{
    opacity:1;
}

.vx-about-hero-v2__ghost.is-vx-svg-ready
.vx-about-ghost-fallback{
    opacity:0;
}


/* ----------------------------------------------------------
   ENTRADA AL VIEWPORT
---------------------------------------------------------- */

.vx-about-hero-v2__ghost.is-vx-active
.vx-ghost-draw{

    animation:
        vxGhostDraw
        4.2s
        cubic-bezier(.42,0,.18,1)
        forwards;
}


.vx-about-hero-v2__ghost.is-vx-active
.vx-ghost-x-energy{

    animation:
        vxGhostXAppear
        1.15s
        ease
        2.55s
        both;
}


.vx-about-hero-v2__ghost.is-vx-active
.vx-ghost-x-energy line{

    animation:
        vxGhostXDraw
        .72s
        cubic-bezier(.4,0,.2,1)
        2.62s
        forwards;
}


.vx-about-hero-v2__ghost.is-vx-active
.vx-ghost-x-energy circle{

    transform-origin:975px 182px;

    animation:
        vxGhostXCore
        1.3s
        ease-out
        3.1s
        both;
}


/* ----------------------------------------------------------
   DESPUÉS DEL DIBUJO:
   PULSO AMBIENTAL MUY LENTO
---------------------------------------------------------- */

.vx-about-hero-v2__ghost.is-vx-complete
.vx-ghost-energy{

    animation:
        vxGhostEnergySweep
        7.5s
        ease-in-out
        infinite;

    animation-delay:1.8s;
}


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

@keyframes vxGhostDraw{

    0%{
        stroke-dashoffset:2600;
        opacity:.12;
    }

    15%{
        opacity:.9;
    }

    82%{
        stroke:rgba(137,220,249,.72);
    }

    100%{
        stroke-dashoffset:0;
        stroke:rgba(137,220,249,.15);
        opacity:1;
    }

}


@keyframes vxGhostXDraw{

    from{
        stroke-dashoffset:270;
    }

    to{
        stroke-dashoffset:0;
    }

}


@keyframes vxGhostXAppear{

    0%{
        opacity:0;
    }

    35%{
        opacity:.9;
    }

    70%{
        opacity:.38;
    }

    100%{
        opacity:0;
    }

}


@keyframes vxGhostXCore{

    0%{
        opacity:0;
        transform:scale(.3);
    }

    25%{
        opacity:1;
        transform:scale(1);
    }

    60%{
        opacity:.38;
        transform:scale(3.5);
    }

    100%{
        opacity:0;
        transform:scale(6);
    }

}


@keyframes vxGhostEnergySweep{

    0%{
        stroke-dashoffset:2600;
        opacity:0;
    }

    7%{
        opacity:0;
    }

    15%{
        opacity:.62;
    }

    55%{
        opacity:.32;
    }

    82%{
        opacity:0;
    }

    100%{
        stroke-dashoffset:-2600;
        opacity:0;
    }

}


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

@media(max-width:700px){

    .vx-about-hero-v2__ghost{
        height:170px;
    }

    .vx-about-ghost-svg{
        width:150vw;
    }

}


/* ==========================================================
   ACCESSIBILITY
========================================================== */

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

    .vx-about-ghost-svg{
        display:none !important;
    }

    .vx-about-ghost-fallback{
        opacity:1 !important;
    }

}