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

CÓDIGO DIVINO V2.0
desktop.css

DESKTOP

PARTE 1

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


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

HEADER

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

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

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

    backdrop-filter:blur(12px);

    box-shadow:0 5px 25px rgba(0,0,0,.05);

}

header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:90px;

}

.logo img{

    height:78px;

    width:auto;

    transition:.3s;

}

nav{

    display:flex;

    align-items:center;

    gap:38px;

}

nav a{

    color:var(--primary);

    font-weight:600;

    font-size:.97rem;

    position:relative;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--gold);

    transition:.35s;

}

nav a:hover::after{

    width:100%;

}

.btn-header{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:15px 28px;

    border-radius:999px;

    background:var(--gold);

    color:var(--primary);

    font-weight:700;

    box-shadow:var(--shadow-sm);

}

.btn-header:hover{

    background:var(--gold-hover);

    transform:translateY(-3px);

}


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

HERO

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

.hero{

    background:

    linear-gradient(

    135deg,

    #08172B,

    #173A5F

    );

    color:#fff;

    padding:160px 0 90px;

}

.hero-grid{

    display:grid;

    grid-template-columns:52% 48%;

    gap:40px;

    align-items:center;

}

.hero-text{

    max-width:620px;

}

.tag{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:999px;

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

    color:#fff;

    font-size:.9rem;

    margin-bottom:25px;

}

.hero h1{

    color:#fff;

    font-size:4rem;

    line-height:1.1;

    margin-bottom:28px;

    font-weight:800;

}

.hero h1 span{

    color:var(--gold);

}

.hero p{

    color:#E7E7E7;

    font-size:1.1rem;

    margin-bottom:35px;

}


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

BENEFÍCIOS HERO

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

.hero-list{

    display:grid;

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

    gap:15px;

    margin-bottom:35px;

}

.hero-list div{

    padding:18px;

    border-radius:16px;

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

    backdrop-filter:blur(8px);

    color:#fff;

    font-size:.95rem;

}


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

BOTÕES HERO

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

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:40px;

}


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

INDICADORES

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

.hero-info{

    display:flex;

    gap:50px;

}

.hero-info strong{

    display:block;

    color:#fff;

    font-size:2rem;

}

.hero-info p{

    color:#D8D8D8;

    font-size:.9rem;

}


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

MOCKUP

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

.hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-image img{

    width:100%;

    max-width:640px;

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

    animation:heroFloat 6s ease-in-out infinite;

}

@keyframes heroFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}


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

BENEFÍCIOS

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

.beneficios{

    background:#fff;

}

.beneficios-grid{

    display:grid;

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

    gap:30px;

}

.card{

    padding:40px 30px;

    text-align:center;

}

.card img{

    width:72px;

    margin:auto auto 25px;

}

.card h3{

    margin-bottom:15px;

    font-size:1.4rem;

}

.card p{

    font-size:.98rem;

}

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

ABOUT

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

.about{

    background:#F7F8FB;

}

.about-grid{

    display:grid;

    grid-template-columns:48% 52%;

    gap:70px;

    align-items:center;

}

.about-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.about-image img{

    width:100%;

    max-width:560px;

    filter:drop-shadow(0 25px 50px rgba(0,0,0,.15));

}

.about-content{

    max-width:600px;

}

.section-tag{

    display:inline-flex;

    align-items:center;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(212,168,79,.12);

    color:var(--gold);

    font-weight:700;

    margin-bottom:25px;

}

.about h2{

    font-size:3rem;

    margin-bottom:25px;

}

.about p{

    font-size:1.05rem;

    margin-bottom:22px;

}

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

TARGET

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

.target{

    background:#fff;

}

.target-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.target-card{

    background:#fff;

    padding:35px;

    border-radius:22px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.target-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.target-card h3{

    margin-bottom:18px;

    font-size:1.4rem;

}

.target-card p{

    font-size:.96rem;

}

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

NOT FOR

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

.not-for{

    background:linear-gradient(135deg,#08172B,#173A5F);

    color:#fff;

}

.not-for h2{

    color:#fff;

    text-align:center;

    margin-bottom:50px;

    font-size:2.7rem;

}

.not-grid{

    display:grid;

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

    gap:25px;

    max-width:1000px;

    margin:auto;

}

.not-grid div{

    padding:28px;

    border-radius:18px;

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

    backdrop-filter:blur(12px);

    font-size:1rem;

}

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

LIBRARY

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

.library{

    background:#fff;

}

.library-grid{

    display:grid;

    grid-template-columns:50% 50%;

    gap:60px;

    align-items:center;

}

.library-content{

    max-width:560px;

}

.library-content h2{

    font-size:3rem;

    margin:25px 0;

}

.library-content p{

    margin-bottom:30px;

}

.library-content ul{

    margin-bottom:35px;

}

.library-content li{

    padding:15px 0;

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

    font-size:1rem;

}

.library-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.library-image img{

    width:100%;

    max-width:620px;

    filter:drop-shadow(0 30px 60px rgba(0,0,0,.18));

}

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

BONUS

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

.bonus{

    background:#F7F8FB;

}

.bonus-grid{

    display:grid;

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

    gap:25px;

}

.bonus-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.bonus-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow);

}

.bonus-card img{

    width:100%;

    height:auto;

    display:block;

    object-fit:contain;

}

.bonus-card h3{

    padding:22px 20px 10px;

    font-size:1.1rem;

}

.bonus-card p{

    padding:0 20px 25px;

    font-size:.92rem;

    line-height:1.6;

}

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

OFERTA

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

.offer{

    background:linear-gradient(135deg,#08172B,#173A5F);

    color:#fff;

}

.offer-box{

    max-width:950px;

    margin:auto;

    padding:70px;

    border-radius:30px;

    text-align:center;

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

    backdrop-filter:blur(15px);

    box-shadow:var(--shadow-lg);

}

.offer-tag{

    display:inline-block;

    padding:10px 20px;

    border-radius:999px;

    background:rgba(212,168,79,.15);

    color:var(--gold);

    font-weight:700;

    margin-bottom:25px;

}

.offer-box h2{

    color:#fff;

    font-size:3rem;

    margin-bottom:25px;

}

.offer-box p{

    color:#E5E7EB;

    font-size:1.1rem;

}

.prices{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:25px;

    margin:40px 0;

}

.old-price{

    color:#C8CDD6;

    font-size:2rem;

    text-decoration:line-through;

    opacity:.6;

}

.new-price{

    color:var(--gold);

    font-size:5rem;

    font-weight:800;

    line-height:1;

}

.offer-box .btn-buy{

    margin-top:25px;

}

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

GARANTÍA

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

.guarantee{

    background:#fff;

}

.guarantee-grid{

    display:grid;

    grid-template-columns:40% 60%;

    align-items:center;

    gap:70px;

}

.guarantee-image{

    display:flex;

    justify-content:center;

}

.guarantee-image img{

    width:100%;

    max-width:340px;

}

.guarantee-content h2{

    font-size:2.8rem;

    margin-bottom:25px;

}

.guarantee-content p{

    font-size:1.05rem;

    margin-bottom:35px;

}

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

FAQ

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

.faq{

    background:#F7F8FB;

}

.faq h2{

    text-align:center;

    font-size:3rem;

    margin-bottom:60px;

}

.faq-item{

    background:#fff;

    border-radius:18px;

    padding:28px 35px;

    margin-bottom:20px;

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.faq-item:hover{

    transform:translateY(-4px);

    box-shadow:var(--shadow);

}

.faq-item h3{

    margin-bottom:15px;

    font-size:1.3rem;

}

.faq-item p{

    font-size:1rem;

}

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

CTA FINAL

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

.cta-final{

    background:linear-gradient(135deg,#173A5F,#08172B);

    text-align:center;

    color:#fff;

}

.cta-final h2{

    color:#fff;

    font-size:3.2rem;

    max-width:900px;

    margin:auto auto 25px;

}

.cta-final p{

    color:#E5E7EB;

    max-width:700px;

    margin:auto auto 40px;

    font-size:1.1rem;

}

.cta-final .btn-buy{

    font-size:1.1rem;

    padding:20px 45px;

}

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

FOOTER

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

footer{

    background:#071320;

    color:#fff;

    padding-top:80px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    gap:60px;

    padding-bottom:50px;

}

.footer-logo{

    height:70px;

    margin-bottom:25px;

}

footer h4{

    color:#fff;

    font-size:1.3rem;

    margin-bottom:20px;

}

footer p{

    color:#C8CDD6;

    line-height:1.8;

    margin-bottom:15px;

}

footer a{

    display:block;

    color:#C8CDD6;

    margin-bottom:14px;

}

footer a:hover{

    color:var(--gold);

}

.copyright{

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

    text-align:center;

    padding:25px;

    color:#B8BEC8;

    font-size:.9rem;

}

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

EFEITOS EXTRAS

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

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

    transition:.45s ease;

}

.hero-image img:hover,
.about-image img:hover,
.library-image img:hover,
.guarantee-image img:hover{

    transform:translateY(-8px);

}

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

    transition:.35s ease;

}

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

    transform:translateY(-8px);

}

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

    cursor:pointer;

}

::selection{

    background:var(--gold);

    color:#08172B;

}

.hero-image a{

    display:inline-block;

    transition:.35s ease;

}

.hero-image a:hover{

    transform:translateY(-8px) scale(1.02);

}

.hero-image img{

    cursor:pointer;

}

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

FIM DO DESKTOP.CSS

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