/*======================================================
ATLAS VISUAL DE LA BIBLIA

Desktop

======================================================*/


/*======================================================
1920px
======================================================*/

@media (min-width:1920px){

.container{

max-width:1500px;

}

.hero{

min-height:100vh;

}

.hero-grid{

gap:140px;

}

.hero-content h1{

font-size:6rem;

}

.hero-content h2{

font-size:1.8rem;

}

.hero-content p{

font-size:1.18rem;

max-width:720px;

}

.hero-images{

min-height:900px;

}

.desktop-device{

width:720px;

right:20px;

}

.notebook-device{

width:620px;

left:-20px;

bottom:0;

}

.tablet-device{

width:300px;

right:-20px;

bottom:70px;

}

.phone-device{

width:160px;

left:120px;

top:220px;

}

.section{

padding:160px 0;

}

.section-title{

margin-bottom:100px;

}

.section-title h2{

font-size:4rem;

}

.section-title p{

font-size:1.2rem;

}

.stats-grid{

gap:40px;

}

.stats-grid article{

padding:55px;

}

.benefits-grid{

gap:45px;

}

.content-grid{

gap:40px;

}

.gallery-grid{

gap:40px;

}

.library-grid{

gap:35px;

}

.offer-grid{

gap:120px;

}

.final-grid{

gap:120px;

}

}


/*======================================================
1700px
======================================================*/

@media (max-width:1700px){

.container{

max-width:1450px;

}

.hero-content h1{

font-size:5.6rem;

}

.hero-images{

min-height:820px;

}

.desktop-device{

width:660px;

}

.notebook-device{

width:560px;

}

}


/*======================================================
1600px
======================================================*/

@media (max-width:1600px){

.container{

max-width:1380px;

}

.hero-grid{

gap:100px;

}

.hero-content h1{

font-size:5.1rem;

}

.desktop-device{

width:620px;

}

.notebook-device{

width:520px;

}

.tablet-device{

width:260px;

}

.phone-device{

width:140px;

}

}


/*======================================================
1500px
======================================================*/

@media (max-width:1500px){

.container{

max-width:1320px;

}

.section{

padding:130px 0;

}

.hero-content h1{

font-size:4.9rem;

}

.hero-content p{

max-width:580px;

}

}

/*======================================================
1440px
======================================================*/

@media (max-width:1440px){

.container{

max-width:1280px;

}

header .container{

height:88px;

}

.hero-grid{

gap:90px;

}

.hero-content{

max-width:620px;

}

.hero-content h1{

font-size:4.7rem;

}

.hero-content h2{

font-size:1.45rem;

}

.hero-content p{

font-size:1.05rem;

}

.hero-images{

min-height:760px;

}

.desktop-device{

width:590px;

right:0;

}

.notebook-device{

width:500px;

left:10px;

}

.tablet-device{

width:240px;

right:-5px;

bottom:60px;

}

.phone-device{

width:130px;

left:110px;

top:190px;

}

.hero-info{

gap:22px;

}

.stats-grid{

gap:24px;

}

.stats-grid article{

padding:36px;

}

.section-title h2{

font-size:3.2rem;

}

.section-title p{

max-width:760px;

margin:auto;

}

.benefits-grid{

gap:30px;

}

.benefit-card{

padding:38px;

}

.content-grid{

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

gap:22px;

}

.gallery-grid{

gap:26px;

}

.library-grid{

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

gap:24px;

}

.offer-grid{

gap:80px;

}

.final-grid{

gap:80px;

}

}


/*======================================================
1366px
======================================================*/

@media (max-width:1366px){

.container{

max-width:1200px;

}

.hero{

padding-top:90px;

}

.hero-content h1{

font-size:4.3rem;

}

.hero-content h2{

font-size:1.35rem;

}

.hero-images{

min-height:700px;

}

.desktop-device{

width:540px;

}

.notebook-device{

width:460px;

}

.tablet-device{

width:215px;

}

.phone-device{

width:118px;

left:95px;

}

.section{

padding:115px 0;

}

.ebook-grid{

gap:70px;

}

.inside-grid{

gap:70px;

}

.offer-grid{

gap:70px;

}

.final-grid{

gap:70px;

}

.price-box{

gap:20px;

}

.countdown{

gap:15px;

}

.countdown div{

width:82px;

}

}


/*======================================================
1300px
======================================================*/

@media (max-width:1300px){

.container{

max-width:1160px;

}

.hero-grid{

grid-template-columns:1.05fr .95fr;

}

.hero-content{

max-width:560px;

}

.hero-content h1{

font-size:4rem;

}

.hero-content p{

font-size:1rem;

}

.desktop-device{

width:500px;

}

.notebook-device{

width:420px;

}

.tablet-device{

width:195px;

}

.phone-device{

width:108px;

}

.hero-images{

min-height:650px;

}

.section-title{

margin-bottom:70px;

}

.section-title h2{

font-size:3rem;

}

.benefit-card{

padding:34px;

}

.content-card{

padding:28px;

}

.timeline-card{

min-width:240px;

}

.popup-box{

max-width:580px;

}

}


/*======================================================
1280px
======================================================*/

@media (max-width:1280px){

.container{

max-width:1120px;

}

.hero-grid{

gap:70px;

}

.hero-content h1{

font-size:3.8rem;

}

.hero-content h2{

font-size:1.28rem;

}

.hero-info{

font-size:.9rem;

}

.desktop-device{

width:470px;

}

.notebook-device{

width:395px;

}

.tablet-device{

width:185px;

}

.phone-device{

width:100px;

}

.stats-grid{

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

}

.stats-grid article{

padding:30px;

}

.benefits-grid{

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

}

.content-grid{

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

}

.gallery-grid{

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

}

.library-grid{

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

}

.offer-content h2{

font-size:2.6rem;

}

.final-content h2{

font-size:2.8rem;

}

}


/*======================================================
1200px
======================================================*/

@media (max-width:1200px){

.container{

max-width:1080px;

}

.hero-grid{

gap:55px;

}

.hero-content{

max-width:520px;

}

.hero-content h1{

font-size:3.5rem;

line-height:1.08;

}

.hero-content p{

max-width:500px;

}

.hero-images{

min-height:620px;

}

.desktop-device{

width:450px;

}

.notebook-device{

width:380px;

left:0;

}

.tablet-device{

width:175px;

}

.phone-device{

width:95px;

left:85px;

top:165px;

}

.ebook-grid{

grid-template-columns:1fr 1fr;

gap:60px;

}

.inside-grid{

grid-template-columns:1fr 1fr;

gap:60px;

}

.map-layout{

grid-template-columns:1.2fr .8fr;

gap:45px;

}

.offer-grid{

grid-template-columns:1fr 1fr;

gap:60px;

}

.final-grid{

grid-template-columns:1fr 1fr;

gap:60px;

}

footer .container{

gap:35px;

}

}

/*======================================================
DESKTOP PREMIUM EFFECTS
======================================================*/

@media (min-width:1200px){

/*=====================================
HEADER
======================================*/

header{

    transition:

    background .35s ease,

    height .35s ease,

    box-shadow .35s ease;

}

header:hover{

    background:

    rgba(7,29,43,.90);

}


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

nav ul li{

    position:relative;

}

nav ul li::before{

    content:"";

    position:absolute;

    bottom:-18px;

    left:50%;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.35s;

    transform:translateX(-50%);

}

nav ul li:hover::before{

    width:70%;

}


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

.hero{

    overflow:hidden;

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

        circle at top right,

        rgba(255,214,115,.12),

        transparent 45%

    );

    pointer-events:none;

}

.hero-content{

    position:relative;

    z-index:3;

}

.hero-content h1{

    max-width:700px;

}

.hero-content p{

    max-width:620px;

}


/*=====================================
DEVICES
======================================*/

.desktop-device{

    transition:

    transform .6s ease,

    filter .6s ease;

}

.desktop-device:hover{

    transform:

    rotate(-1deg)

    scale(1.03);

}

.notebook-device{

    transition:.6s;

}

.notebook-device:hover{

    transform:

    rotate(1deg)

    scale(1.03);

}

.tablet-device{

    transition:.6s;

}

.tablet-device:hover{

    transform:

    rotate(-3deg)

    scale(1.05);

}

.phone-device{

    transition:.6s;

}

.phone-device:hover{

    transform:

    translateY(-12px)

    scale(1.08);

}


/*=====================================
SECTION TITLE
======================================*/

.section-title{

    max-width:900px;

}

.section-title h2{

    max-width:850px;

    margin:auto;

}


/*=====================================
BENEFITS
======================================*/

.benefit-card{

    min-height:360px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.benefit-card img{

    transition:.5s;

}

.benefit-card:hover img{

    transform:

    scale(1.12)

    rotate(-8deg);

}


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

.content-card{

    min-height:300px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.content-card img{

    transition:.45s;

}

.content-card:hover img{

    transform:

    scale(1.1);

}


/*=====================================
MAP
======================================*/

.map-area{

    transition:.5s;

}

.map-area:hover{

    transform:

    scale(1.01);

}

.location-card{

    min-height:380px;

}


/*=====================================
INSIDE
======================================*/

.inside-left{

    position:sticky;

    top:120px;

}


/*=====================================
TIMELINE
======================================*/

.timeline-wrapper{

    padding-bottom:60px;

}

.timeline-wrapper::-webkit-scrollbar{

    height:8px;

}

.timeline-wrapper::-webkit-scrollbar-thumb{

    background:var(--gold);

}


/*=====================================
GALLERY
======================================*/

.gallery figure{

    aspect-ratio:4/5;

}

.gallery figure img{

    width:100%;

    height:100%;

}


/*=====================================
LIBRARY
======================================*/

.library-item{

    aspect-ratio:3/4;

}

.library-item img{

    width:100%;

    height:100%;

}


/*=====================================
BONUS
======================================*/

.bonus-card{

    min-height:330px;

}

.bonus-card img{

    transition:.45s;

}

.bonus-card:hover img{

    transform:

    scale(1.04);

}


/*=====================================
OFFER
======================================*/

.offer{

    overflow:hidden;

}

.offer::before{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    right:-180px;

    top:-220px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,214,115,.08),

        transparent

    );

}

.price-box{

    align-items:stretch;

}

.old-price,

.new-price{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.new-price{

    transform:scale(1.05);

}


/*=====================================
COUNTDOWN
======================================*/

.countdown div{

    transition:.35s;

}

.countdown div:hover{

    transform:

    translateY(-5px);

}


/*=====================================
FAQ
======================================*/

.faq-item{

    transition:.35s;

}

.faq-item:hover{

    box-shadow:

    var(--shadow-medium);

}


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

.final-image{

    text-align:right;

}

.final-image img{

    max-width:700px;

}


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

footer{

    overflow:hidden;

}

footer::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:1px;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.12),

        transparent

    );

}

.footer-links a{

    width:max-content;

}


/*=====================================
POPUP
======================================*/

.popup-box{

    animation:

    popupDesktop

    .5s ease;

}

@keyframes popupDesktop{

    from{

        opacity:0;

        transform:

        translateY(40px)

        scale(.92);

    }

    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}

}

/*======================================================
DESKTOP REFINEMENT
======================================================*/

@media (min-width:1200px){

/*======================================
GLOBAL
======================================*/

body{

    overflow-x:hidden;

}

.section{

    position:relative;

}


/*======================================
SECTION TITLE
======================================*/

.section-title{

    position:relative;

}

.section-title::after{

    content:"";

    display:block;

    width:120px;

    height:3px;

    margin:35px auto 0;

    border-radius:50px;

    background:

    linear-gradient(

    90deg,

    transparent,

    var(--gold),

    transparent

    );

}


/*======================================
HEADER
======================================*/

header{

    backdrop-filter:

    blur(25px);

}

.logo{

    transition:.35s;

}

.logo:hover{

    transform:

    scale(1.03);

}


/*======================================
BUTTONS
======================================*/

.primary-button,

.offer-button,

.hero-button,

.header-button{

    position:relative;

    overflow:hidden;

}

.primary-button::before,

.offer-button::before,

.hero-button::before,

.header-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:70%;

    height:100%;

    background:

    linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.35),

        transparent

    );

    transition:.7s;

}

.primary-button:hover::before,

.offer-button:hover::before,

.hero-button:hover::before,

.header-button:hover::before{

    left:150%;

}


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

.hero{

    isolation:isolate;

}

.hero::after{

    content:"";

    position:absolute;

    bottom:-250px;

    right:-150px;

    width:650px;

    height:650px;

    border-radius:50%;

    background:

    radial-gradient(

        rgba(255,215,120,.10),

        transparent

    );

}

.hero-content{

    animation:

    heroFade

    1.3s ease;

}

.hero-images{

    animation:

    heroImage

    1.6s ease;

}

@keyframes heroFade{

from{

opacity:0;

transform:

translateX(-80px);

}

to{

opacity:1;

transform:

translateX(0);

}

}

@keyframes heroImage{

from{

opacity:0;

transform:

translateX(80px);

}

to{

opacity:1;

transform:

translateX(0);

}

}


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

.hero-info div{

    transition:.35s;

}

.hero-info div:hover{

    transform:

    translateY(-4px);

}


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

.benefit-card,

.content-card,

.timeline-card,

.library-item,

.gallery figure,

.bonus-card{

    will-change:

    transform;

}


/*======================================
SHADOWS
======================================*/

.benefit-card:hover,

.content-card:hover,

.timeline-card:hover,

.library-item:hover,

.gallery figure:hover{

    box-shadow:

    0 40px 90px rgba(0,0,0,.18);

}


/*======================================
IMAGES
======================================*/

.gallery img,

.library img,

.bonus img,

.offer img,

.ebook img{

    image-rendering:auto;

}


/*======================================
TIMELINE
======================================*/

.timeline-wrapper{

    position:relative;

}

.timeline-wrapper::before{

    content:"";

    position:absolute;

    top:72px;

    left:0;

    width:100%;

    height:3px;

    background:

    linear-gradient(

    90deg,

    rgba(200,155,60,.15),

    rgba(200,155,60,.45),

    rgba(200,155,60,.15)

    );

}


/*======================================
MAP
======================================*/

.location-card{

    border-left:

    4px solid

    var(--gold);

}


/*======================================
INSIDE
======================================*/

.inside-item{

    border-left:

    4px solid transparent;

}

.inside-item:hover{

    border-left:

    4px solid

    var(--gold);

}


/*======================================
OFFER
======================================*/

.offer-content{

    position:relative;

}

.offer-content::after{

    content:"";

    position:absolute;

    bottom:-25px;

    left:0;

    width:180px;

    height:4px;

    border-radius:20px;

    background:

    linear-gradient(

    90deg,

    var(--gold),

    transparent

    );

}


/*======================================
COUNTDOWN
======================================*/

.countdown div{

    backdrop-filter:

    blur(12px);

}


/*======================================
FAQ
======================================*/

.faq-item{

    border:

    1px solid

    rgba(200,155,60,.08);

}


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

.footer-links a{

    position:relative;

}

.footer-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:

    var(--gold);

    transition:.35s;

}

.footer-links a:hover::after{

    width:100%;

}


/*======================================
SCROLLBAR
======================================*/

.timeline-wrapper::-webkit-scrollbar{

height:7px;

}

.timeline-wrapper::-webkit-scrollbar-thumb{

border-radius:30px;

}


/*======================================
LIGHTBOX
======================================*/

.lightbox-image{

    transition:

    transform .35s;

}

.lightbox-image:hover{

    transform:

    scale(1.01);

}

}



/*=====================================
GALLERY FIX
======================================*/

.gallery-grid{

    display:grid !important;

    grid-template-columns:repeat(4,220px) !important;

    justify-content:center !important;

    gap:25px !important;

}

.gallery figure{

    width:220px !important;

    height:auto !important;

    padding:10px !important;

    margin:auto !important;

}

.gallery figure img{

    width:100% !important;

    height:auto !important;

    max-height:320px !important;

    object-fit:contain !important;

    display:block;

}