@charset "utf-8";
/* CSS Document */
/*======================================
ARCADNOVA
STYLE.CSS
======================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --black:#080808;
    --cream:#FFFEF2;
    --white:#ffffff;

    --pink:#E6007E;
    --blue:#132075;
    --yellow:#F7A715;
    --green:#00C77D;

    --transition:.45s cubic-bezier(.22,.61,.36,1);

}

html{

    scroll-behavior:smooth;

}

body{

    background:var(--black);

    color:white;

    font-family:'Inter',sans-serif;

    overflow-x:hidden;

}


/*======================================
NAVBAR
======================================*/

header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:9999;

    transition:
    background .45s ease,
    backdrop-filter .45s ease,
    box-shadow .45s ease,
    padding .45s ease;

}


/*======================================
HOME
======================================*/

/* Estado inicial del HOME */

header:not(.inner-page){

    background:transparent;

}


/* HOME cuando haces scroll */

header.scrolled{

    background:rgba(8,8,8,.88);

    backdrop-filter:blur(18px);

    box-shadow:0 8px 35px rgba(0,0,0,.45);

}


/*======================================
PÁGINAS INTERNAS
======================================*/

header.inner-page{

    background:#2a2b2a;

    backdrop-filter:none;

    box-shadow:none;

}


/* Mantener el mismo estado aunque haya scroll */

header.inner-page.scrolled{

    background:#2a2b2a;

    backdrop-filter:none;

    box-shadow:none;

}


.navbar{

    width:min(92%,1450px);

    height:90px;

    margin:auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


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

.logo{

    width:180px;

    display:flex;

    align-items:center;

}

.logo img{

    width:100%;

    transition:.5s;

}

.logo:hover img{

    transform:scale(1.03);

}


/*======================================
MENU
======================================*/

nav ul{

    display:flex;

    gap:50px;

    list-style:none;

}

nav a{

    position:relative;

    color:white;

    text-decoration:none;

    font-size:.78rem;

    letter-spacing:.18em;

    transition:var(--transition);

    text-transform:uppercase;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:1px;

    background:white;

    transition:.4s;

}

nav a:hover{

    letter-spacing:.24em;

}

nav a:hover::after{

    width:100%;

}


/*======================================
HAMBURGUESA
======================================*/

.menu{

    width:34px;

    height:24px;

    display:none;

    flex-direction:column;

    justify-content:space-between;

    cursor:pointer;

}

.menu span{

    width:100%;

    height:2px;

    background:white;

    transition:.4s;

}

.menu.active span:nth-child(1){

    transform:
    rotate(45deg)
    translateY(10px);

}

.menu.active span:nth-child(2){

    opacity:0;

}

.menu.active span:nth-child(3){

    transform:
    rotate(-45deg)
    translateY(-10px);

}


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

@media(max-width:900px){

nav{

    position:fixed;

    top:0;

    right:-100%;

    width:100%;

    height:100vh;

    background:rgba(8,8,8,.97);

    backdrop-filter:blur(30px);

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.6s cubic-bezier(.22,.61,.36,1);

    opacity:0;

}

nav.active{

    right:0;

    opacity:1;

}

nav ul{

    flex-direction:column;

    gap:45px;

}

nav a{

    font-size:1.4rem;

    letter-spacing:.22em;

}

.menu{

    display:flex;

    z-index:10001;

}

.hero-logo{

    width:90%;

}

.subtitle{

    font-size:.72rem;

    letter-spacing:.22em;

}

.categories{

    font-size:.68rem;

    line-height:2;

    gap:12px;

}

}


/* =====================================================
JOURNAL
===================================================== */

:root{

    --journal-bg:#fffef2;
    --journal-dark:#050505;
    --journal-text:#111;
    --journal-muted:#666;
    --journal-line:#dcdad1;
    --journal-container:1300px;

}


/* =====================================================
RESET
===================================================== */

.journal-page *{
    box-sizing:border-box;
}

.journal-page{
    background:var(--journal-bg);
    color:var(--journal-text);
}

.journal-page img{
    display:block;
    width:100%;
}


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

.journal-hero{

    position:relative;

    min-height:390px;

    display:flex;
    align-items:center;

    background-image:
        linear-gradient(
            90deg,
            rgba(0,0,0,.92) 0%,
            rgba(0,0,0,.72) 45%,
            rgba(0,0,0,.15) 100%
        ),
        url("img/journal/hero-journal.jpg");

    background-size:cover;
    background-position:center;

    color:#fff;

}


.journal-hero-content{

    width:min(90%,1300px);
    margin:auto;

    padding-top:40px;

}


.journal-eyebrow{

    display:block;

    margin-bottom:20px;

    font-size:.7rem;

    letter-spacing:.2em;

    font-weight:600;

}


.journal-hero h1{

    margin:0 0 25px;

    font-family:'Cormorant Garamond', Georgia, serif;

    font-size:clamp(4rem,8vw,7rem);

    font-weight:400;

    line-height:.85;

}


.journal-intro-title{

    display:flex;
    align-items:center;
    gap:10px;

    margin-bottom:20px;

    font-size:.75rem;

    font-weight:600;

    letter-spacing:.1em;

}


.journal-intro-title span{

    font-size:1rem;

}


.journal-hero p{

    max-width:480px;

    margin:0 0 25px;

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

    font-size:.9rem;

    line-height:1.7;

}


.journal-subscribe-link{

    display:inline-flex;
    gap:12px;

    padding-top:15px;

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

    color:#fff;

    font-size:.7rem;

    font-weight:600;

    letter-spacing:.12em;

    text-decoration:none;

}


.journal-subscribe-link span{
    font-size:1rem;
}


/* =====================================================
CONTENT
===================================================== */

.journal-content{

    padding:70px 0 100px;

}


.journal-container{

    width:min(92%,var(--journal-container));

    margin:auto;

    display:grid;

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

    gap:30px;

}


/* =====================================================
TOOLBAR
===================================================== */

.journal-toolbar{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:30px;

    margin-bottom:25px;

    padding-bottom:15px;

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

}


.journal-filters{

    display:flex;

    flex-wrap:wrap;

    gap:28px;

}


.journal-filter{

    position:relative;

    padding:0;

    border:0;

    background:none;

    color:#555;

    cursor:pointer;

    font-family:inherit;

    font-size:.68rem;

    font-weight:600;

    letter-spacing:.08em;

}


.journal-filter::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-16px;

    height:1px;

    background:#111;

    transform:scaleX(0);

    transition:.25s ease;

}


.journal-filter:hover,
.journal-filter.active{

    color:#111;

}


.journal-filter.active::after{

    transform:scaleX(1);

}


/* =====================================================
SEARCH
===================================================== */

.journal-search{

    position:relative;

    width:170px;

    flex-shrink:0;

}


.journal-search input{

    width:100%;

    padding:0 25px 10px 0;

    border:0;

    border-bottom:1px solid #bbb;

    outline:none;

    background:none;

    font-family:inherit;

    font-size:.7rem;

}


.journal-search span{

    position:absolute;

    right:0;
    bottom:8px;

    font-size:1rem;

}


/* =====================================================
ARTICLE GRID
===================================================== */

.journal-grid{

    display:grid;

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

    gap:8px;

}


.journal-card{

    min-width:0;

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

    background:#fffdf5;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


.journal-card:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 30px rgba(0,0,0,.06);

}


.journal-card-image{

    position:relative;

    display:block;

    aspect-ratio:4 / 3;

    overflow:hidden;

    background:#111;

}


.journal-card-image img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .6s ease;

}


.journal-card:hover
.journal-card-image img{

    transform:scale(1.04);

}


/* FEATURED */

.journal-featured{

    position:absolute;

    z-index:2;

    top:12px;
    left:12px;

    padding:6px 8px;

    background:#111;

    color:#fff;

    font-size:.55rem;

    letter-spacing:.1em;

}


/* =====================================================
CARD CONTENT
===================================================== */

.journal-card-content{

    padding:17px;

}


.journal-card-meta{

    display:flex;

    justify-content:space-between;

    gap:10px;

    margin-bottom:12px;

    font-size:.55rem;

    font-weight:600;

    letter-spacing:.07em;

    color:#555;

}


.journal-card-meta span{

    text-transform:uppercase;

}


.journal-card-meta time{

    white-space:nowrap;

}


.journal-card h2{

    margin:0 0 12px;

    font-family:'Cormorant Garamond',Georgia,serif;

    font-size:1.65rem;

    font-weight:500;

    line-height:1.05;

}


.journal-card h2 a{

    color:inherit;

    text-decoration:none;

}


.journal-card p{

    margin:0 0 20px;

    color:#555;

    font-size:.75rem;

    line-height:1.6;

}


.journal-read-more{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#111;

    font-size:.62rem;

    font-weight:700;

    letter-spacing:.08em;

    text-decoration:none;

}


.journal-read-more span{

    font-size:1rem;

    transition:transform .2s ease;

}


.journal-read-more:hover span{

    transform:translateX(4px);

}


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

.journal-pagination{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    margin-top:55px;

}


.journal-pagination a,
.journal-pagination span{

    color:#333;

    font-size:.7rem;

    text-decoration:none;

}


.journal-pagination a.active{

    position:relative;

    font-weight:700;

}


.journal-pagination a.active::after{

    content:"";

    position:absolute;

    left:0;
    right:0;
    bottom:-8px;

    height:1px;

    background:#111;

}


.journal-pagination .next{

    margin-left:15px;

    font-weight:700;

    letter-spacing:.08em;

}


.journal-pagination .next span{

    margin-left:8px;

}


/* =====================================================
SIDEBAR
===================================================== */

.journal-sidebar{

    display:flex;

    flex-direction:column;

    gap:15px;

}


.journal-sidebar-box{

    padding:25px;

    background:#f6f3e9;

}


.sidebar-title{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:22px;

    font-size:.65rem;

    font-weight:700;

    letter-spacing:.1em;

}


.sidebar-title span{

    font-size:1rem;

}


.journal-sidebar-box p{

    margin:0 0 18px;

    color:#444;

    font-size:.72rem;

    line-height:1.65;

}


.journal-sidebar-box > a{

    color:#111;

    font-size:.62rem;

    font-weight:700;

    letter-spacing:.07em;

    text-decoration:none;

}


.journal-sidebar-box > a span{

    margin-left:7px;

}


/* =====================================================
SUBSCRIBE FORM
===================================================== */

.journal-subscribe-form input{

    width:100%;

    margin-bottom:8px;

    padding:11px;

    border:1px solid #d4d0c5;

    background:#fffef9;

    outline:none;

    font-family:inherit;

    font-size:.7rem;

}


.journal-subscribe-form button{

    width:100%;

    padding:12px;

    border:0;

    background:#111;

    color:#fff;

    cursor:pointer;

    font-family:inherit;

    font-size:.6rem;

    font-weight:700;

    letter-spacing:.1em;

}


.journal-subscribe-form button span{

    margin-left:8px;

}


/* =====================================================
RECENT ARTICLES
===================================================== */

.recent-articles{

    display:flex;

    flex-direction:column;

}


.recent-articles a{

    display:grid;

    grid-template-columns:55px 1fr;

    gap:10px;

    padding:12px 0;

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

    color:inherit;

    text-decoration:none;

}


.recent-articles a:first-child{

    padding-top:0;

}


.recent-articles img{

    width:55px;
    height:55px;

    object-fit:cover;

}


.recent-articles h3{

    margin:0 0 5px;

    font-family:'Cormorant Garamond',Georgia,serif;

    font-size:.9rem;

    font-weight:500;

    line-height:1.05;

}


.recent-articles span{

    font-size:.5rem;

    color:#777;

}


/* =====================================================
POPULAR TOPICS
===================================================== */

.popular-topics{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

}


.popular-topics span{

    font-size:.62rem;

    color:#555;

}


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

.journal-sidebar-cta{

    padding:35px 25px;

    background:#050505;

    color:#fff;

}


.journal-sidebar-cta > span{

    display:block;

    margin-bottom:25px;

    font-size:1.2rem;

}


.journal-sidebar-cta h2{

    margin:0 0 10px;

    font-family:'Cormorant Garamond',Georgia,serif;

    font-size:1.7rem;

    font-weight:400;

}


.journal-sidebar-cta p{

    margin:0 0 30px;

    color:#aaa;

    font-size:.7rem;

}


.journal-sidebar-cta a{

    color:#fff;

    font-size:.6rem;

    font-weight:700;

    letter-spacing:.08em;

    text-decoration:none;

}


.journal-sidebar-cta a span{

    margin-left:8px;

}


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

@media(max-width:1050px){

    .journal-container{

        grid-template-columns:1fr;

    }


    .journal-sidebar{

        display:grid;

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

    }


    .journal-sidebar-cta{

        grid-column:span 2;

    }

}


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

@media(max-width:800px){

    .journal-grid{

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

    }


    .journal-toolbar{

        align-items:flex-start;

        flex-direction:column;

    }


    .journal-search{

        width:100%;

    }

}


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

@media(max-width:600px){

    .journal-hero{

        min-height:500px;

        background-position:65% center;

    }


    .journal-hero-content{

        width:88%;

    }


    .journal-hero h1{

        font-size:4.5rem;

    }


    .journal-intro-title{

        font-size:.65rem;

        line-height:1.5;

    }


    .journal-content{

        padding:50px 0 70px;

    }


    .journal-container{

        width:88%;

    }


    .journal-filters{

        width:100%;

        gap:18px;

    }


    .journal-filter{

        font-size:.58rem;

    }


    .journal-grid{

        grid-template-columns:1fr;

        gap:15px;

    }


    .journal-card h2{

        font-size:1.8rem;

    }


    .journal-sidebar{

        display:flex;

    }


    .journal-sidebar-cta{

        width:100%;

    }


    .journal-pagination{

        gap:18px;

    }

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

.footer{

    background:#080808;

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

    padding:45px 0;

}

.footer-container{

    width:min(92%,1400px);

    margin:auto;

    display:grid;

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

    align-items:center;

    gap:25px;

}

.footer-logo img{

    width:220px;

}

.footer-copy{

    text-align:center;

    color:#ddd;

    line-height:2;

    letter-spacing:.18em;

    text-transform:uppercase;

    font-size:.82rem;

}

.footer-text{

    color:white;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:.22em;

    line-height:2;

}

.footer-star{

    display:flex;

    justify-content:flex-end;

}

.footer-star img{

    width:65px;

}

/*==================================================
ANIMACIONES
==================================================*/

.contact-info,

.contact-form{

    opacity:0;

    transform:translateY(60px);

    transition:1s;

}

.reveal.active .contact-info{

    opacity:1;

    transform:none;

}

.reveal.active .contact-form{

    opacity:1;

    transform:none;

    transition-delay:.25s;

}

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

@media(max-width:1100px){

.contact-container{

    grid-template-columns:1fr;

    gap:70px;

}

.contact::after{

    width:520px;

    height:520px;

    right:-170px;

}

.footer-container{

    grid-template-columns:1fr;

    text-align:center;

    gap:45px;

}

.footer-star{

    justify-content:center;

}

}

@media(max-width:768px){

.contact{

    padding:90px 0 50px;

}

.contact-info h2{

    font-size:4.2rem;

}

.contact-description{

    font-size:1.15rem;

    line-height:1.7;

}

.contact-details a,

.contact-details span{

    font-size:1.15rem;

}

.contact-social i{

    font-size:1.6rem;

}

.contact-social span{

    font-size:1rem;

}

.btn-contact{

    width:100%;

}

.contact::after{

    width:360px;

    height:360px;

    right:-180px;

    opacity:.08;

}

.footer-logo img{

    width:180px;

}

.footer-star img{

    width:48px;

}

}