/**
 * VIREXIS — ACTIVIDADES / EDITORIAL MAGAZINE V1
 * Elaborado por Miguel Minier | MDesign
 */

.vx-magazine{
    --vx-ink:#021A2D;
    --vx-blue:#073E68;
    --vx-cyan:#20B8F2;
    --vx-paper:#F5F7F8;
    --vx-line:rgba(2,26,45,.16);
    --vx-muted:#61707B;

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

.vx-magazine a{
    color:inherit;
    text-decoration:none;
}


/* ==========================================================
   MASTHEAD
========================================================== */

.vx-magazine-masthead{
    padding:74px 0 62px;
    background:var(--vx-paper);
}

.vx-magazine-masthead__top,
.vx-magazine-masthead__edition{
    display:flex;
    justify-content:space-between;
    gap:30px;

    font-size:10px;
    font-weight:700;
    letter-spacing:.18em;
    line-height:1.5;
}

.vx-magazine-masthead__top{
    color:#71808a;
}

.vx-magazine-masthead__rule{
    height:1px;
    margin:17px 0 14px;
    background:var(--vx-ink);
}

.vx-magazine-masthead__edition{
    color:var(--vx-ink);
}

.vx-magazine-masthead__title{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(280px,.5fr);
    gap:80px;
    align-items:end;

    padding-top:70px;
}

.vx-magazine-eyebrow{
    display:block;
    margin-bottom:20px;

    color:var(--vx-cyan);

    font-size:11px;
    font-weight:800;
    letter-spacing:.22em;
}

.vx-magazine-masthead h1{
    margin:0;

    font-size:clamp(58px,8.2vw,126px);
    font-weight:600;
    letter-spacing:-.065em;
    line-height:.82;
}

.vx-magazine-masthead h1 em{
    color:var(--vx-blue);
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
}

.vx-magazine-masthead__intro{
    position:relative;
    padding-top:22px;
    border-top:1px solid var(--vx-ink);
}

.vx-magazine-masthead__number{
    display:block;
    margin-bottom:42px;

    color:var(--vx-cyan);

    font-size:12px;
    font-weight:800;
    letter-spacing:.16em;
}

.vx-magazine-masthead__intro p{
    max-width:390px;
    margin:0;

    color:#43535f;

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


/* ==========================================================
   COVER
========================================================== */

.vx-magazine-cover{
    padding:78px 0 110px;
}

.vx-magazine-cover__label,
.vx-magazine-section-head{
    display:flex;
    justify-content:space-between;
    gap:30px;

    margin-bottom:18px;
    padding-bottom:13px;

    border-bottom:1px solid var(--vx-ink);

    font-size:10px;
    font-weight:800;
    letter-spacing:.17em;
}

.vx-magazine-cover__label span:last-child,
.vx-magazine-section-head span:last-child{
    color:#72808a;
}

.vx-magazine-cover__grid{
    display:grid;
    grid-template-columns:minmax(0,1.62fr) minmax(320px,.68fr);
    gap:48px;
}

.vx-magazine-cover__visual{
    position:relative;
    min-height:620px;
    overflow:hidden;
    background:var(--vx-ink);
}

.vx-magazine-cover__image{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .8s cubic-bezier(.22,.61,.36,1);
}

.vx-magazine-cover__visual:hover .vx-magazine-cover__image{
    transform:scale(1.025);
}

.vx-magazine-cover__shade{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(2,26,45,.58) 100%
        );
}

.vx-magazine-cover__issue{
    position:absolute;
    left:28px;
    bottom:26px;

    color:#fff;

    font-size:10px;
    font-weight:800;
    letter-spacing:.18em;
}

.vx-magazine-cover__placeholder,
.vx-magazine-card-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    height:100%;

    color:rgba(255,255,255,.14);
    background:var(--vx-ink);

    font-family:Georgia,serif;
    font-size:120px;
}

.vx-magazine-cover__story{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:20px;
    align-content:end;

    padding-bottom:8px;
}

.vx-magazine-index{
    color:var(--vx-cyan);

    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
}

.vx-magazine-story-type{
    display:block;
    margin-bottom:20px;

    color:#75838c;

    font-size:10px;
    font-weight:800;
    letter-spacing:.17em;
}

.vx-magazine-cover__story h2{
    margin:0 0 26px;

    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(38px,4vw,62px);
    font-weight:400;
    letter-spacing:-.04em;
    line-height:1.02;
}

.vx-magazine-cover__story h2 a:hover,
.vx-magazine-edition-card h3 a:hover,
.vx-magazine-archive-item h3 a:hover{
    color:var(--vx-blue);
}

.vx-magazine-cover__story p{
    margin:0 0 36px;

    color:#53626c;

    font-size:15px;
    line-height:1.76;
}

.vx-magazine-read,
.vx-magazine-card-link{
    display:inline-flex;
    align-items:center;
    gap:14px;

    font-size:10px;
    font-weight:800;
    letter-spacing:.16em;
}

.vx-magazine-read span,
.vx-magazine-card-link span{
    color:var(--vx-cyan);
    font-size:18px;
    transition:transform .25s ease;
}

.vx-magazine-read:hover span,
.vx-magazine-card-link:hover span{
    transform:translate(3px,-3px);
}


/* ==========================================================
   EDITION
========================================================== */

.vx-magazine-edition{
    padding:90px 0 120px;
    background:var(--vx-paper);
}

.vx-magazine-edition__grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:30px;
}

.vx-magazine-edition-card{
    display:flex;
    flex-direction:column;
    min-width:0;
}

.vx-magazine-edition-card__media{
    position:relative;
    display:block;

    aspect-ratio:4 / 3;
    overflow:hidden;

    background:var(--vx-ink);
}

.vx-magazine-edition-card__image{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .65s cubic-bezier(.22,.61,.36,1);
}

.vx-magazine-edition-card__media:hover
.vx-magazine-edition-card__image{
    transform:scale(1.035);
}

.vx-magazine-edition-card__body{
    flex:1;
    padding:22px 0 0;
}

.vx-magazine-card-meta{
    display:flex;
    justify-content:space-between;
    gap:15px;

    margin-bottom:25px;
    padding-bottom:12px;

    border-bottom:1px solid var(--vx-line);

    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
}

.vx-magazine-card-meta span{
    color:var(--vx-cyan);
}

.vx-magazine-card-meta time{
    color:#7b8992;
}

.vx-magazine-edition-card h3{
    margin:0 0 17px;

    font-family:Georgia,"Times New Roman",serif;
    font-size:27px;
    font-weight:400;
    letter-spacing:-.025em;
    line-height:1.08;
}

.vx-magazine-edition-card p{
    margin:0 0 25px;

    color:#60707a;

    font-size:13px;
    line-height:1.7;
}

.vx-magazine-card-link{
    margin-top:auto;
}


/* ==========================================================
   EDITORIAL DIVIDER
========================================================== */

.vx-magazine-divider{
    padding:85px 0;
    background:var(--vx-ink);
    color:#fff;
}

.vx-magazine-divider .virexis-container{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:40px;
    align-items:center;
}

.vx-magazine-divider__line{
    height:1px;
    background:rgba(255,255,255,.18);
}

.vx-magazine-divider__content{
    min-width:min(520px,50vw);
    text-align:center;
}

.vx-magazine-divider__content span{
    display:block;

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

    font-size:9px;
    font-weight:800;
    letter-spacing:.22em;
}

.vx-magazine-divider__content strong{
    display:block;
    margin:22px 0;

    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(32px,4vw,54px);
    font-weight:400;
    letter-spacing:-.035em;
    line-height:1.05;
}


/* ==========================================================
   ARCHIVE
========================================================== */

.vx-magazine-archive{
    padding:120px 0;
}

.vx-magazine-archive__heading{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:50px;

    margin-bottom:65px;
    padding-bottom:30px;

    border-bottom:1px solid var(--vx-ink);
}

.vx-magazine-archive__heading > span{
    color:var(--vx-cyan);

    font-size:10px;
    font-weight:800;
    letter-spacing:.18em;
}

.vx-magazine-archive__heading h2{
    max-width:760px;
    margin:0;

    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(38px,5vw,68px);
    font-weight:400;
    letter-spacing:-.045em;
    line-height:1;
}

.vx-magazine-archive__list{
    display:flex;
    flex-direction:column;
    gap:100px;
}

.vx-magazine-archive-item{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    gap:65px;
    align-items:center;
}

.vx-magazine-archive-item.is-reverse
.vx-magazine-archive-item__media{
    order:2;
}

.vx-magazine-archive-item.is-reverse
.vx-magazine-archive-item__body{
    order:1;
}

.vx-magazine-archive-item__media{
    display:block;
    aspect-ratio:16 / 10;
    overflow:hidden;
    background:var(--vx-ink);
}

.vx-magazine-archive-item__image{
    width:100%;
    height:100%;
    object-fit:cover;

    transition:transform .7s cubic-bezier(.22,.61,.36,1);
}

.vx-magazine-archive-item__media:hover
.vx-magazine-archive-item__image{
    transform:scale(1.025);
}

.vx-magazine-archive-item__body{
    padding-top:20px;
    border-top:1px solid var(--vx-ink);
}

.vx-magazine-archive-item__body time{
    display:block;
    margin:26px 0 18px;

    color:#7c8991;

    font-size:9px;
    font-weight:800;
    letter-spacing:.14em;
}

.vx-magazine-archive-item h3{
    margin:0 0 22px;

    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(30px,3vw,46px);
    font-weight:400;
    letter-spacing:-.035em;
    line-height:1.05;
}

.vx-magazine-archive-item p{
    max-width:570px;
    margin:0 0 30px;

    color:#60707a;

    font-size:14px;
    line-height:1.75;
}


/* ==========================================================
   PAGINATION
========================================================== */

.vx-magazine-pagination{
    margin-top:90px;
    padding-top:30px;
    border-top:1px solid var(--vx-line);
}

.vx-magazine-pagination ul{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin:0;
    padding:0;

    list-style:none;
}

.vx-magazine-pagination a,
.vx-magazine-pagination span{
    display:flex;
    align-items:center;
    justify-content:center;

    min-width:42px;
    height:42px;

    border:1px solid var(--vx-line);

    font-size:11px;
    font-weight:700;
}

.vx-magazine-pagination .current{
    color:#fff;
    border-color:var(--vx-ink);
    background:var(--vx-ink);
}


/* ==========================================================
   EMPTY / CLOSING
========================================================== */

.vx-magazine-empty{
    padding:120px 0;
}

.vx-magazine-empty span,
.vx-magazine-closing span{
    color:var(--vx-cyan);

    font-size:10px;
    font-weight:800;
    letter-spacing:.18em;
}

.vx-magazine-empty h2{
    max-width:700px;
    margin:18px 0 0;

    font-family:Georgia,serif;
    font-size:50px;
    font-weight:400;
}

.vx-magazine-closing{
    padding:60px 0;
    border-top:1px solid var(--vx-line);
}

.vx-magazine-closing .virexis-container{
    display:flex;
    justify-content:space-between;
    gap:30px;
    align-items:center;
}

.vx-magazine-closing p{
    margin:0;

    color:#64737d;

    font-family:Georgia,serif;
    font-size:20px;
}


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

@media(max-width:1000px){

    .vx-magazine-masthead__title,
    .vx-magazine-cover__grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .vx-magazine-cover__visual{
        min-height:520px;
    }

    .vx-magazine-cover__story{
        max-width:720px;
    }

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

    .vx-magazine-edition-card:first-child{
        grid-column:1 / -1;
    }

    .vx-magazine-archive-item{
        gap:40px;
    }

}


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

@media(max-width:700px){

    .vx-magazine-masthead{
        padding:48px 0 46px;
    }

    .vx-magazine-masthead__top span:last-child{
        display:none;
    }

    .vx-magazine-masthead__title{
        padding-top:48px;
    }

    .vx-magazine-masthead h1{
        font-size:clamp(54px,18vw,82px);
    }

    .vx-magazine-masthead__intro{
        padding-top:18px;
    }

    .vx-magazine-masthead__number{
        margin-bottom:20px;
    }

    .vx-magazine-cover{
        padding:52px 0 75px;
    }

    .vx-magazine-cover__label{
        align-items:flex-end;
    }

    .vx-magazine-cover__visual{
        min-height:0;
        aspect-ratio:4 / 5;
    }

    .vx-magazine-cover__story{
        grid-template-columns:30px 1fr;
        gap:12px;
    }

    .vx-magazine-cover__story h2{
        font-size:38px;
    }

    .vx-magazine-edition{
        padding:65px 0 80px;
    }

    .vx-magazine-section-head span:last-child{
        display:none;
    }

    .vx-magazine-edition__grid{
        grid-template-columns:1fr;
        gap:50px;
    }

    .vx-magazine-edition-card:first-child{
        grid-column:auto;
    }

    .vx-magazine-divider{
        padding:65px 0;
    }

    .vx-magazine-divider .virexis-container{
        grid-template-columns:1fr;
    }

    .vx-magazine-divider__content{
        min-width:0;
    }

    .vx-magazine-archive{
        padding:80px 0;
    }

    .vx-magazine-archive__heading{
        grid-template-columns:1fr;
        gap:20px;
        margin-bottom:45px;
    }

    .vx-magazine-archive__list{
        gap:70px;
    }

    .vx-magazine-archive-item{
        grid-template-columns:1fr;
        gap:25px;
    }

    .vx-magazine-archive-item.is-reverse
    .vx-magazine-archive-item__media,
    .vx-magazine-archive-item.is-reverse
    .vx-magazine-archive-item__body{
        order:initial;
    }

    .vx-magazine-archive-item__media{
        aspect-ratio:4 / 3;
    }

    .vx-magazine-closing .virexis-container{
        display:block;
    }

    .vx-magazine-closing p{
        margin-top:14px;
        font-size:18px;
    }

}


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

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

    .vx-magazine-cover__image,
    .vx-magazine-edition-card__image,
    .vx-magazine-archive-item__image,
    .vx-magazine-read span,
    .vx-magazine-card-link span{
        transition:none;
    }

}