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

TABLET

768px → 1199px

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

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

TABLET

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


/*======================================================
1199px
======================================================*/

@media (max-width:1199px){

.container{

max-width:960px;

}

.section{

padding:95px 0;

}

.section-title{

margin-bottom:65px;

}

.section-title h2{

font-size:2.8rem;

}

.section-title p{

font-size:1rem;

max-width:720px;

margin:auto;

}


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

header .container{

height:82px;

}

.logo img{

width:155px;

}

nav ul{

gap:28px;

}

.header-button{

padding:15px 28px;

font-size:.9rem;

}


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

.hero{

min-height:auto;

padding:

160px

0

110px;

}

.hero-grid{

grid-template-columns:1fr;

gap:70px;

text-align:center;

}

.hero-content{

max-width:760px;

margin:auto;

}

.hero-content h1{

font-size:3.7rem;

}

.hero-content h2{

font-size:1.35rem;

}

.hero-content p{

max-width:680px;

margin:auto;

margin-bottom:40px;

}

.hero-info{

justify-content:center;

}

.hero-images{

min-height:620px;

max-width:760px;

margin:auto;

}


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

.desktop-device{

width:520px;

left:50%;

right:auto;

transform:translateX(-50%);

}

.notebook-device{

width:430px;

left:50%;

bottom:0;

transform:translateX(-50%);

}

.tablet-device{

width:200px;

right:50px;

bottom:40px;

}

.phone-device{

width:110px;

left:80px;

top:140px;

}


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

.hero-stats{

margin-top:0;

}

.stats-grid{

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

gap:22px;

}


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

.benefits-grid{

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

gap:28px;

}

.benefit-card{

padding:35px;

}


/*=====================================
EBOOK
======================================*/

.ebook-grid{

grid-template-columns:1fr;

gap:60px;

text-align:center;

}

.ebook-left{

order:1;

}

.ebook-right{

order:2;

}

.ebook-left img{

max-width:460px;

margin:auto;

}

.ebook-features{

text-align:left;

max-width:520px;

margin:40px auto;

}


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

.content-grid{

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

gap:24px;

}


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

.map-layout{

grid-template-columns:1fr;

gap:50px;

}

.location-panel{

min-height:320px;

}


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

.inside-grid{

grid-template-columns:1fr;

gap:60px;

}

.inside-left{

position:relative;

top:auto;

}

.inside-left img{

max-width:520px;

margin:auto;

}


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

.timeline-card{

min-width:240px;

}


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

.gallery-grid{

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

gap:26px;

}


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

.library-grid{

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

gap:22px;

}


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

.bonus-card{

grid-template-columns:260px 1fr;

gap:30px;

}

.bonus-info h3{

font-size:1.7rem;

}


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

.offer-grid{

grid-template-columns:1fr;

gap:60px;

text-align:center;

}

.offer-image{

order:1;

}

.offer-content{

order:2;

}

.price-box{

justify-content:center;

}

.countdown{

justify-content:center;

}


/*=====================================
GUARANTEE
======================================*/

.guarantee-grid{

grid-template-columns:1fr;

text-align:center;

gap:45px;

}

.guarantee-image img{

max-width:300px;

}


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

.faq-container{

max-width:100%;

}


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

.final-grid{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.final-image{

order:1;

}

.final-content{

order:2;

}


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

footer .container{

grid-template-columns:1fr;

text-align:center;

gap:45px;

}

.footer-links{

align-items:center;

}

.footer-copy{

justify-content:center;

}

.footer-copy p{

text-align:center;

}

}

/*======================================================
1024px
======================================================*/

@media (max-width:1024px){

.container{

    max-width:920px;

}

.section{

    padding:90px 0;

}

.hero{

    padding-top:150px;

}

.hero-grid{

    gap:60px;

}

.hero-content h1{

    font-size:3.3rem;

}

.hero-content h2{

    font-size:1.25rem;

}

.hero-content p{

    max-width:620px;

}

.hero-images{

    min-height:560px;

}

.desktop-device{

    width:470px;

}

.notebook-device{

    width:390px;

}

.tablet-device{

    width:180px;

    right:35px;

}

.phone-device{

    width:98px;

    left:70px;

}

.section-title h2{

    font-size:2.6rem;

}

.stats-grid{

    gap:18px;

}

.stats-grid article{

    padding:28px;

}

.benefit-card{

    min-height:300px;

}

.content-card{

    min-height:260px;

}

.gallery-grid{

    gap:22px;

}

.library-grid{

    gap:20px;

}

.offer-content h2{

    font-size:2.4rem;

}

.final-content h2{

    font-size:2.6rem;

}

}


/*======================================================
991px
======================================================*/

@media (max-width:991px){

nav{

    display:none;

}

.header-button{

    display:none;

}

#mobile-button{

    display:block;

}

.container{

    max-width:90%;

}

.hero{

    padding:145px 0 90px;

}

.hero-content h1{

    font-size:3rem;

}

.hero-images{

    min-height:520px;

}

.desktop-device{

    width:430px;

}

.notebook-device{

    width:360px;

}

.tablet-device{

    width:165px;

}

.phone-device{

    width:92px;

}

.stats-grid{

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

}

.benefits-grid{

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

}

.content-grid{

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

}

.gallery-grid{

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

}

.library-grid{

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

}

.bonus-card{

    grid-template-columns:1fr;

    text-align:center;

}

.bonus-card img{

    max-width:300px;

    margin:auto;

}

.bonus-info{

    text-align:center;

}

.price-box{

    flex-direction:column;

}

.countdown{

    flex-wrap:wrap;

}

}


/*======================================================
900px
======================================================*/

@media (max-width:900px){

.section{

    padding:80px 0;

}

.section-title{

    margin-bottom:55px;

}

.section-title h2{

    font-size:2.35rem;

}

.hero-content h1{

    font-size:2.8rem;

}

.hero-content h2{

    font-size:1.18rem;

}

.hero-content p{

    font-size:1rem;

}

.hero-images{

    min-height:480px;

}

.desktop-device{

    width:390px;

}

.notebook-device{

    width:320px;

}

.tablet-device{

    width:150px;

}

.phone-device{

    width:85px;

}

.stats-grid article{

    padding:24px;

}

.stats-grid h3{

    font-size:2.1rem;

}

.benefit-card{

    padding:30px;

}

.content-card{

    padding:28px;

}

.offer-content h2{

    font-size:2.2rem;

}

.final-content h2{

    font-size:2.3rem;

}

.popup-box{

    padding:45px;

}

}


/*======================================================
820px
======================================================*/

@media (max-width:820px){

.hero-grid{

    gap:45px;

}

.hero-content{

    max-width:100%;

}

.hero-content h1{

    font-size:2.6rem;

}

.hero-images{

    min-height:430px;

}

.desktop-device{

    width:360px;

}

.notebook-device{

    width:290px;

}

.tablet-device{

    width:135px;

}

.phone-device{

    width:75px;

}

.ebook-left img{

    max-width:380px;

}

.inside-left img{

    max-width:420px;

}

.gallery-grid{

    gap:18px;

}

.library-grid{

    gap:18px;

}

.timeline-card{

    min-width:220px;

}

.offer-image img{

    max-width:420px;

    margin:auto;

}

.final-image img{

    max-width:420px;

    margin:auto;

}

}

/*======================================================
768px
======================================================*/

@media (max-width:768px){

.container{

    width:min(92%,720px);

}

.section{

    padding:75px 0;

}

.section-title{

    margin-bottom:50px;

}

.section-title span{

    font-size:.75rem;

    letter-spacing:2px;

    padding:8px 18px;

}

.section-title h2{

    font-size:2.2rem;

    line-height:1.25;

}

.section-title p{

    font-size:.98rem;

    max-width:100%;

}

header{

    backdrop-filter:blur(16px);

}

header .container{

    height:78px;

}

.logo img{

    width:145px;

}


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

.hero{

    padding:135px 0 70px;

}

.hero-grid{

    gap:35px;

}

.hero-content{

    text-align:center;

}

.hero-content h1{

    font-size:2.35rem;

    line-height:1.15;

}

.hero-content h2{

    font-size:1.08rem;

}

.hero-content p{

    font-size:.96rem;

    margin-bottom:32px;

}

.hero-button{

    width:100%;

    max-width:360px;

    margin:auto;

}

.hero-info{

    justify-content:center;

    gap:16px;

    font-size:.88rem;

}

.hero-images{

    min-height:380px;

}


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

.desktop-device{

    width:310px;

}

.notebook-device{

    width:250px;

}

.tablet-device{

    width:120px;

    right:25px;

}

.phone-device{

    width:68px;

    left:55px;

}


/*=====================================
STATS
======================================*/

.stats-grid{

    grid-template-columns:1fr;

    gap:18px;

}

.stats-grid article{

    padding:24px;

}


/*=====================================
GRIDS
======================================*/

.benefits-grid,

.content-grid,

.gallery-grid,

.library-grid{

    grid-template-columns:1fr 1fr;

    gap:18px;

}


/*=====================================
EBOOK
======================================*/

.ebook-left img{

    max-width:340px;

}

.ebook-features{

    max-width:100%;

}


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

.location-panel{

    min-height:260px;

}

.location-card{

    padding:30px;

}

.location-card h3{

    font-size:1.6rem;

}


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

.inside-item{

    padding:24px;

}

.inside-icon{

    width:60px;

    height:60px;

    font-size:1.7rem;

}


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

.timeline-wrapper{

    gap:22px;

}

.timeline-card{

    min-width:210px;

    padding:28px;

}


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

.bonus-card{

    padding:24px;

}

.bonus-card img{

    max-width:260px;

}

.bonus-info h3{

    font-size:1.45rem;

}


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

.offer-content h2{

    font-size:2rem;

}

.price-box{

    gap:18px;

}

.old-price,

.new-price{

    padding:24px;

}

.old-price strong{

    font-size:1.8rem;

}

.new-price strong{

    font-size:2.5rem;

}

.countdown{

    justify-content:center;

    gap:12px;

}

.countdown div{

    width:78px;

}


/*=====================================
GUARANTEE
======================================*/

.guarantee-image img{

    max-width:260px;

}

.guarantee-content h2{

    font-size:2.2rem;

}


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

.faq-question{

    padding:24px;

    font-size:1rem;

}

.faq-answer p{

    padding:0 24px 24px;

}


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

.final-cta{

    padding:90px 0;

}

.final-content h2{

    font-size:2.2rem;

}

.final-image img{

    max-width:360px;

}


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

footer{

    padding:60px 0 35px;

}

.footer-logo img{

    width:170px;

}

.footer-links{

    gap:15px;

}


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

.popup-box{

    padding:36px;

}

.popup-box h2{

    font-size:2rem;

}


/*=====================================
STICKY
======================================*/

.sticky-buy{

    width:100%;

    padding:0 15px;

}

.sticky-buy a{

    width:100%;

    justify-content:center;

}


/*=====================================
BACK TOP
======================================*/

#backTop{

    width:50px;

    height:50px;

    right:20px;

    bottom:95px;

}

}


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

@media (min-width:768px) and (max-width:1024px) and (orientation:landscape){

.hero{

    min-height:auto;

}

.hero-grid{

    align-items:center;

}

.timeline-wrapper{

    padding-bottom:35px;

}

.gallery figure{

    aspect-ratio:4/5;

}

.library-item{

    aspect-ratio:3/4;

}

}


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

@media (max-width:1024px){

.hero{

    background-attachment:scroll;

}

.hero::before,

.hero::after{

    animation:none;

}

.floating,

.floating-delay,

.floating-delay2,

.floating-slow{

    animation-duration:8s;

}

}