/* ==========================================================
   VIREXIS — SINGLE GUIDE V1
   Elaborado por Miguel Minier | MDesign
   ========================================================== */

.vx-guide{
    --vx-navy:#021a2d;
    --vx-blue:#073e68;
    --vx-mid:#0a5792;
    --vx-sky:#20b8f2;
    --vx-ink:#09243a;
    --vx-text:#445564;
    --vx-muted:#6d7c88;
    --vx-line:#dce6ec;
    --vx-soft:#f3f7f9;
    --vx-white:#fff;

    overflow:hidden;
    color:var(--vx-ink);
    background:#fff;
}

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

.vx-guide-shell{
    width:min(1180px, calc(100% - 48px));
    margin:0 auto;
}

.vx-guide-hero{
    position:relative;
    padding:72px 0 76px;
    overflow:hidden;
    color:#fff;
    background:
        radial-gradient(
            circle at 82% 18%,
            rgba(32,184,242,.16),
            transparent 28%
        ),
        linear-gradient(
            125deg,
            #021a2d 0%,
            #032743 55%,
            #073e68 100%
        );
}

.vx-guide-hero::after{
    position:absolute;
    top:-140px;
    right:-100px;
    width:460px;
    height:460px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:50%;
    content:"";
}

.vx-guide-back{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-bottom:54px;
    color:rgba(255,255,255,.72);
    text-decoration:none;
    font-size:13px;
    font-weight:650;
    letter-spacing:.03em;
}

.vx-guide-back:hover{
    color:#fff;
}

.vx-guide-hero__grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0, 1fr) 310px;
    gap:90px;
    align-items:end;
}

.vx-guide-kicker,
.vx-guide-section-label{
    margin-bottom:17px;
    color:var(--vx-sky);
    font-size:11px;
    font-weight:800;
    letter-spacing:.15em;
    text-transform:uppercase;
}

.vx-guide-hero h1{
    max-width:800px;
    margin:0;
    color:#fff;
    font-size:clamp(42px, 5vw, 70px);
    line-height:.98;
    letter-spacing:-.045em;
    font-weight:650;
}

.vx-guide-objective{
    max-width:720px;
    margin:27px 0 0;
    color:rgba(255,255,255,.78);
    font-size:18px;
    line-height:1.7;
}

.vx-guide-taxonomy{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:30px;
}

.vx-guide-taxonomy span{
    padding:7px 11px;
    border:1px solid rgba(255,255,255,.15);
    border-radius:999px;
    color:rgba(255,255,255,.78);
    font-size:11px;
    font-weight:650;
}

.vx-guide-summary{
    padding-left:30px;
    border-left:1px solid rgba(255,255,255,.14);
}

.vx-guide-summary__eyebrow{
    margin-bottom:22px;
    color:var(--vx-sky);
    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.vx-guide-summary__item{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:20px;
    padding:13px 0;
    border-bottom:1px solid rgba(255,255,255,.11);
}

.vx-guide-summary__item span{
    color:rgba(255,255,255,.56);
    font-size:12px;
}

.vx-guide-summary__item strong{
    color:#fff;
    text-align:right;
    font-size:13px;
    font-weight:650;
}

.vx-guide-cover{
    padding:0;
    background:#fff;
}

.vx-guide-cover__media{
    position:relative;
    z-index:2;
    height:480px;
    margin:-1px 0 0;
    overflow:hidden;
    background:#e9eff3;
}

.vx-guide-cover__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.vx-guide-body{
    padding:88px 0 105px;
}

.vx-guide-layout{
    display:grid;
    grid-template-columns:minmax(0, 840px) 260px;
    gap:56px;
    align-items:start;
}

.vx-guide-main > section{
    margin-bottom:82px;
}

.vx-guide-main > section:last-child{
    margin-bottom:0;
}

.vx-guide-safety{
    display:grid;
    grid-template-columns:52px minmax(0, 1fr);
    gap:22px;
    padding:28px 30px;
    border:1px solid #dce9ef;
    border-radius:12px;
    background:#f4f9fb;
}

.vx-guide-safety__icon{
    display:grid;
    width:44px;
    height:44px;
    place-items:center;
    border-radius:50%;
    color:#fff;
    background:var(--vx-blue);
    font-size:19px;
    font-weight:800;
}

.vx-guide-safety h2,
.vx-guide-introduction h2,
.vx-guide-disclaimer h2,
.vx-guide-sources h2,
.vx-guide-related h2,
.vx-guide-closing h2{
    margin:0;
    color:var(--vx-navy);
    font-size:clamp(28px, 3vw, 40px);
    line-height:1.08;
    letter-spacing:-.035em;
    font-weight:650;
}

.vx-guide-safety p{
    margin:12px 0 0;
    color:var(--vx-text);
    font-size:15px;
    line-height:1.75;
}

.vx-guide-prose{
    color:var(--vx-text);
    font-size:17px;
    line-height:1.82;
}

.vx-guide-prose > *:first-child{
    margin-top:0;
}

.vx-guide-prose > *:last-child{
    margin-bottom:0;
}

.vx-guide-prose h2,
.vx-guide-prose h3{
    color:var(--vx-navy);
}

.vx-guide-section-head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:32px;
}

.vx-guide-section-head h2{
    max-width:600px;
    margin:0;
    color:var(--vx-navy);
    font-size:clamp(30px, 3.2vw, 43px);
    line-height:1.05;
    letter-spacing:-.04em;
    font-weight:650;
}

.vx-guide-section-count{
    flex:none;
    padding-bottom:5px;
    color:var(--vx-muted);
    font-size:12px;
    font-weight:650;
}

.vx-guide-exercise-list{
    display:grid;
    gap:22px;
}

.vx-exercise{
    overflow:hidden;
    border:1px solid var(--vx-line);
    border-radius:14px;
    background:#fff;
}

.vx-exercise__top{
    display:grid;
    grid-template-columns:92px minmax(0, 1fr);
    border-bottom:1px solid var(--vx-line);
}

.vx-exercise__number{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-height:112px;
    padding:20px;
    border-right:1px solid var(--vx-line);
    background:var(--vx-soft);
}

.vx-exercise__number span{
    margin-bottom:5px;
    color:var(--vx-muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.vx-exercise__number strong{
    color:var(--vx-blue);
    font-size:30px;
    line-height:1;
    font-weight:600;
}

.vx-exercise__title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    min-width:0;
    padding:22px 26px;
}

.vx-exercise__title h3{
    margin:0;
    color:var(--vx-navy);
    font-size:23px;
    line-height:1.2;
    letter-spacing:-.025em;
    font-weight:650;
}

.vx-exercise-dose{
    display:flex;
    flex:none;
    gap:22px;
}

.vx-exercise-dose span{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.vx-exercise-dose small{
    color:var(--vx-muted);
    font-size:9px;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.vx-exercise-dose strong{
    color:var(--vx-blue);
    font-size:12px;
    font-weight:700;
}

.vx-exercise__grid.has-image{
    display:grid;
    grid-template-columns:minmax(280px, 40%) minmax(0, 1fr);
}

.vx-exercise__media{
    height:330px;
    min-height:0;
    margin:0;
    overflow:hidden;
    background:#eef3f5;
}

.vx-exercise__media img{
    display:block;
    width:100%;
    height:100%;
    min-height:0;
    object-fit:cover;
    object-position:center;
}

.vx-exercise__content{
    padding:26px 28px;
}

.vx-exercise-block{
    margin-bottom:20px;
}

.vx-exercise-block:last-child{
    margin-bottom:0;
}

.vx-exercise-block h4{
    margin:0 0 8px;
    color:var(--vx-blue);
    font-size:11px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;
}

.vx-exercise-block p,
.vx-exercise-note p{
    margin:0;
    color:var(--vx-text);
    font-size:15px;
    line-height:1.68;
}

.vx-exercise-block--progress{
    padding-top:18px;
    border-top:1px solid var(--vx-line);
}

.vx-exercise-note{
    margin-top:20px;
    padding:15px 17px;
    border-left:3px solid var(--vx-sky);
    background:#f5fafc;
}

.vx-exercise-note strong{
    display:block;
    margin-bottom:5px;
    color:var(--vx-navy);
    font-size:11px;
    font-weight:800;
}

.vx-guide-disclaimer{
    padding:36px;
    border-radius:14px;
    color:#fff;
    background:var(--vx-navy);
}

.vx-guide-disclaimer .vx-guide-section-label{
    color:var(--vx-sky);
}

.vx-guide-disclaimer h2{
    color:#fff;
}

.vx-guide-disclaimer p{
    margin:18px 0 0;
    color:rgba(255,255,255,.72);
    font-size:14px;
    line-height:1.75;
}

.vx-guide-sources{
    padding-top:4px;
}

.vx-guide-sources ol{
    margin:27px 0 0;
    padding:0;
    list-style:none;
    counter-reset:vx-sources;
}

.vx-guide-sources li{
    position:relative;
    padding:18px 0 18px 46px;
    border-bottom:1px solid var(--vx-line);
    color:var(--vx-text);
    font-size:13px;
    line-height:1.65;
    counter-increment:vx-sources;
}

.vx-guide-sources li::before{
    position:absolute;
    top:18px;
    left:0;
    color:var(--vx-mid);
    content:counter(vx-sources, decimal-leading-zero);
    font-size:11px;
    font-weight:800;
}

.vx-guide-sources__note{
    margin:18px 0 0;
    color:var(--vx-muted);
    font-size:11px;
    line-height:1.6;
}

.vx-guide-side{
    position:sticky;
    top:120px;
}

.vx-guide-sidecard{
    padding:28px;
    border:1px solid var(--vx-line);
    border-radius:14px;
    background:#fff;
}

.vx-guide-sidecard__number{
    color:var(--vx-blue);
    font-size:52px;
    line-height:1;
    letter-spacing:-.05em;
    font-weight:550;
}

.vx-guide-sidecard__label{
    margin:5px 0 25px;
    color:var(--vx-muted);
    font-size:11px;
    font-weight:750;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.vx-guide-sidecard__row{
    display:flex;
    justify-content:space-between;
    gap:20px;
    padding:14px 0;
    border-top:1px solid var(--vx-line);
}

.vx-guide-sidecard__row span{
    color:var(--vx-muted);
    font-size:11px;
}

.vx-guide-sidecard__row strong{
    color:var(--vx-navy);
    text-align:right;
    font-size:11px;
    font-weight:700;
}

.vx-guide-sidecard__action{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:22px;
    padding:14px 16px;
    border-radius:8px;
    color:#fff;
    background:var(--vx-blue);
    text-decoration:none;
    font-size:12px;
    font-weight:750;
}

.vx-guide-help{
    margin-top:14px;
    padding:25px 28px;
    border-radius:14px;
    background:var(--vx-soft);
}

.vx-guide-help span{
    display:block;
    margin-bottom:8px;
    color:var(--vx-mid);
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.vx-guide-help strong{
    display:block;
    color:var(--vx-navy);
    font-size:17px;
    line-height:1.35;
}

.vx-guide-help a{
    display:inline-block;
    margin-top:16px;
    color:var(--vx-blue);
    text-decoration:none;
    font-size:12px;
    font-weight:750;
}

.vx-guide-related{
    padding:92px 0;
    background:var(--vx-soft);
}

.vx-guide-related__head{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:34px;
}

.vx-guide-related__head > a{
    color:var(--vx-blue);
    text-decoration:none;
    font-size:12px;
    font-weight:750;
}

.vx-guide-related__grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:18px;
}

.vx-related-card{
    overflow:hidden;
    border:1px solid var(--vx-line);
    border-radius:12px;
    color:inherit;
    background:#fff;
    text-decoration:none;
}

.vx-related-card__media{
    height:190px;
    overflow:hidden;
    background:#e7eef2;
}

.vx-related-card__media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.vx-related-card__body{
    padding:24px;
}

.vx-related-card__body > span{
    color:var(--vx-mid);
    font-size:9px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.vx-related-card h3{
    margin:10px 0 0;
    color:var(--vx-navy);
    font-size:20px;
    line-height:1.25;
    letter-spacing:-.02em;
}

.vx-related-card p{
    margin:12px 0 0;
    color:var(--vx-text);
    font-size:13px;
    line-height:1.65;
}

.vx-related-card__body > strong{
    display:block;
    margin-top:20px;
    color:var(--vx-blue);
    font-size:11px;
}

.vx-guide-closing{
    padding:76px 0;
    color:#fff;
    background:var(--vx-blue);
}

.vx-guide-closing__inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

.vx-guide-closing .vx-guide-section-label{
    color:#7ad8fb;
}

.vx-guide-closing h2{
    max-width:590px;
    color:#fff;
}

.vx-guide-closing__actions{
    display:flex;
    flex:none;
    gap:10px;
}

.vx-guide-button{
    display:inline-flex;
    min-height:46px;
    align-items:center;
    justify-content:center;
    padding:0 20px;
    border-radius:7px;
    text-decoration:none;
    font-size:12px;
    font-weight:750;
}

.vx-guide-button--light{
    color:var(--vx-blue);
    background:#fff;
}

.vx-guide-button--outline{
    border:1px solid rgba(255,255,255,.32);
    color:#fff;
}

@media(max-width:1000px){

    .vx-guide-hero__grid{
        grid-template-columns:1fr;
        gap:48px;
    }

    .vx-guide-summary{
        max-width:500px;
    }

    .vx-guide-layout{
        grid-template-columns:1fr;
        gap:60px;
    }

    .vx-guide-side{
        position:static;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:16px;
    }

    .vx-guide-related__grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}

@media(max-width:760px){

    .vx-guide-shell{
        width:min(100% - 30px, 1180px);
    }

    .vx-guide-hero{
        padding:46px 0 52px;
    }

    .vx-guide-back{
        margin-bottom:40px;
    }

    .vx-guide-hero h1{
        font-size:40px;
    }

    .vx-guide-objective{
        font-size:16px;
    }

    .vx-guide-summary{
        padding-left:0;
        border-left:0;
        border-top:1px solid rgba(255,255,255,.14);
        padding-top:24px;
    }

    .vx-guide-cover__media{
        height:280px;
    }

    .vx-guide-body{
        padding:62px 0 72px;
    }

    .vx-guide-main > section{
        margin-bottom:60px;
    }

    .vx-guide-safety{
        grid-template-columns:1fr;
        padding:24px;
    }

    .vx-guide-section-head{
        display:block;
    }

    .vx-guide-section-count{
        display:block;
        margin-top:12px;
    }

    .vx-exercise__top{
        grid-template-columns:72px minmax(0, 1fr);
    }

    .vx-exercise__number{
        min-height:100px;
        padding:14px;
    }

    .vx-exercise__number strong{
        font-size:25px;
    }

    .vx-exercise__title{
        display:block;
        padding:18px;
    }

    .vx-exercise__title h3{
        font-size:20px;
    }

    .vx-exercise-dose{
        margin-top:14px;
        gap:18px;
    }

    .vx-exercise__grid.has-image{
        display:block;
    }

    .vx-exercise__media,
    .vx-exercise__media img{
        min-height:0;
        height:auto;
    }

    .vx-exercise__content{
        padding:24px;
    }

    .vx-guide-disclaimer{
        padding:28px 24px;
    }

    .vx-guide-side{
        display:block;
    }

    .vx-guide-help{
        margin-top:14px;
    }

    .vx-guide-related{
        padding:68px 0;
    }

    .vx-guide-related__head{
        display:block;
    }

    .vx-guide-related__head > a{
        display:inline-block;
        margin-top:18px;
    }

    .vx-guide-related__grid{
        grid-template-columns:1fr;
    }

    .vx-guide-closing{
        padding:60px 0;
    }

    .vx-guide-closing__inner{
        display:block;
    }

    .vx-guide-closing__actions{
        flex-wrap:wrap;
        margin-top:28px;
    }

}

@media(max-width:480px){

    .vx-guide-hero h1{
        font-size:35px;
    }

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

    .vx-exercise__number{
        min-height:auto;
        border-right:0;
        border-bottom:1px solid var(--vx-line);
    }

    .vx-exercise__number{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
    }

    .vx-exercise__number span{
        margin:0;
    }

    .vx-exercise-dose{
        display:grid;
        grid-template-columns:1fr;
    }

}