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

CÓDIGO DIVINO V2.0
mobile.css

SMARTPHONES

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

@media screen and (max-width:768px){

/*====================================================
GERAL
====================================================*/

html{

    font-size:15px;

}

body{

    overflow-x:hidden;

}

.container{

    width:92%;

    margin:auto;

}

section{

    padding:70px 0;

}

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

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    background:rgba(255,255,255,.98);

    backdrop-filter:blur(10px);

    z-index:999;

}

header .container{

    display:flex;

    justify-content:center;

    align-items:center;

    height:90px;

    padding:0;

}

.logo{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

}

.logo img{

    display:block;

    height:60px;

    width:auto;

    margin:0 auto;

}

nav{

    display:none;

}

.btn-header{

    display:none;

}

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

.hero{

    padding:120px 0 55px;

}

.hero-grid{

    display:flex;

    flex-direction:column-reverse;

    gap:25px;

}

/*====================================================
IMAGEM
====================================================*/

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:20px;

}

.hero-image img{

    width:95%;

    max-width:380px;

    filter:drop-shadow(0 25px 45px rgba(0,0,0,.35));

    animation:none;

}

/*====================================================
TAG
====================================================*/

.tag{

    margin:auto;

    margin-bottom:18px;

    font-size:13px;

}

/*====================================================
TÍTULO
====================================================*/

.hero h1{

    font-size:2.2rem;

    line-height:1.15;

    margin-bottom:20px;

}

.hero p{

    font-size:1rem;

    line-height:1.7;

    margin-bottom:28px;

}

/*====================================================
LISTA
====================================================*/

.hero-list{

    display:grid;

    grid-template-columns:1fr;

    gap:12px;

}

.hero-list div{

    padding:16px;

}

/*====================================================
BOTÕES
====================================================*/

.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

    margin:30px 0;

}

.btn-primary,
.btn-secondary,
.btn-buy{

    width:100%;

    justify-content:center;

    padding:18px;

    font-size:15px;

}

/*====================================================
INDICADORES
====================================================*/

.hero-info{

    display:grid;

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

    gap:8px;

    margin-top:20px;

}

.hero-info strong{

    font-size:20px;

}

.hero-info p{

    font-size:11px;

    line-height:1.3;

}

/*====================================================
BENEFÍCIOS
====================================================*/

.beneficios-grid{

    grid-template-columns:1fr;

    gap:20px;

}

.card{

    padding:30px;

}

.card img{

    width:60px;

}

.card h3{

    font-size:1.3rem;

}

/*====================================================
ABOUT
====================================================*/

.about-grid{

    display:flex;

    flex-direction:column;

    text-align:center;

    gap:40px;

}

.about-image{

    order:-1;

}

.about-image img{

    max-width:360px;

    margin:auto;

}

.about h2{

    font-size:2.2rem;

}

.about p{

    font-size:1rem;

}


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

TARGET

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

.target{

    padding:70px 0;

}

.target-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

    margin-top:35px;

}

.target-card{

    padding:28px;

    text-align:center;

}


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

NOT FOR

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

.not-for{

    padding:70px 0;

}

.not-for h2{

    font-size:2rem;

}

.not-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

}

.not-grid div{

    padding:22px;

    font-size:.95rem;

}


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

LIBRARY

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

.library{

    padding:70px 0;

}

.library-grid{

    display:flex;

    flex-direction:column;

    gap:40px;

    text-align:center;

}

.library-image{

    order:-1;

}

.library-image img{

    width:100%;

    max-width:370px;

    margin:auto;

}

.library-content h2{

    font-size:2.2rem;

}

.library-content ul{

    text-align:left;

}

.library-content li{

    font-size:.95rem;

    padding:12px 0;

}


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

BONUS

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

.bonus{

    padding:70px 0;

}

.bonus-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:25px;

}

.bonus-card{

    max-width:360px;

    margin:auto;

}

.bonus-card img{

    aspect-ratio:3/4;

    object-fit:cover;

}


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

OFERTA

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

.offer{

    padding:70px 0;

}

.offer-box{

    padding:35px 20px;

    border-radius:22px;

}

.offer-box h2{

    font-size:2rem;

}

.offer-box p{

    font-size:.95rem;

}

.prices{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin:30px 0;

}

.old-price{

    font-size:1.5rem;

}

.new-price{

    font-size:3.6rem;

}

.offer-box .btn-buy{

    width:100%;

}


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

GARANTÍA

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

.guarantee{

    padding:70px 0;

}

.guarantee-grid{

    display:flex;

    flex-direction:column;

    gap:35px;

    text-align:center;

}

.guarantee-image{

    order:-1;

}

.guarantee-image img{

    max-width:220px;

    margin:auto;

}

.guarantee-content h2{

    font-size:2rem;

}

.guarantee-content p{

    font-size:1rem;

}


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

FAQ

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

.faq{

    padding:70px 0;

}

.faq h2{

    font-size:2.1rem;

    margin-bottom:35px;

}

.faq-item{

    padding:22px;

    border-radius:16px;

}

.faq-item h3{

    font-size:1.1rem;

}

.faq-item p{

    font-size:.95rem;

}


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

CTA FINAL

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

.cta-final{

    padding:70px 20px;

}

.cta-final h2{

    font-size:2.2rem;

    line-height:1.2;

}

.cta-final p{

    font-size:1rem;

    margin:20px auto 35px;

}

.cta-final .btn-buy{

    width:100%;

}


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

FOOTER

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

footer{

    padding-top:60px;

}

.footer-grid{

    display:flex;

    flex-direction:column;

    gap:35px;

    text-align:center;

}

.footer-logo{

    height:55px;

    margin:auto auto 20px;

}

footer h4{

    margin-bottom:15px;

}

.copyright{

    font-size:.8rem;

    padding:20px;

}


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

ESPAÇAMENTOS

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

.section-title{

    margin-bottom:40px;

}

.section-title h2{

    font-size:2rem;

}

.section-title p{

    font-size:.95rem;

}


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

MELHORIAS MOBILE

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

.hero-image img,
.about-image img,
.library-image img{

    transition:none;

}

.card:hover,
.target-card:hover,
.bonus-card:hover,
.faq-item:hover{

    transform:none;

}

.btn-primary,
.btn-secondary,
.btn-buy{

    min-height:56px;

    font-size:16px;

}

}

.logo img{

    height:80px;

    width:auto;

    transition:.3s;

    filter:drop-shadow(0 6px 12px rgba(212,168,79,.20));

}

.logo img:hover{

    transform:scale(1.04);

}