*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}


body{

    background:#020617;

    color:white;

}



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


.header{

    width:100%;

    padding:20px 8%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    background:#020617;

    position:sticky;

    top:0;

    z-index:999;

    border-bottom:1px solid #1e293b;

}



.logo{

    font-size:28px;

    font-weight:900;

    color:#38bdf8;

}



nav{

    display:flex;

    gap:25px;

}



nav a{

    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}



nav a:hover{

    color:#38bdf8;

}




.whatsapp{

    background:#22c55e;

    color:white;

    padding:12px 25px;

    border-radius:30px;

    text-decoration:none;

    font-weight:bold;

}



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


.hero{

    min-height:480px;

    display:flex;

    align-items:center;

    padding:50px 8%;


    background:

    linear-gradient(
        rgba(2,6,23,.65),
        rgba(2,6,23,.95)
    ),

    url("admin/uploads/banner.jpg");


    background-size:cover;

    background-position:center;


}




.hero-text{

    max-width:650px;

}



.hero h1{

    font-size:58px;

    line-height:1.1;

    margin-bottom:20px;

}



.hero p{

    font-size:22px;

    color:#cbd5e1;

    margin-bottom:30px;

}



.btn{

    display:inline-block;

    background:#38bdf8;

    color:#020617;

    padding:15px 35px;

    border-radius:30px;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}



.btn:hover{

    transform:scale(1.05);

}

/* =====================
 PRODUTO DESTAQUE
===================== */


.destaque{


    width:90%;

    max-width:1300px;

    margin:50px auto;


    padding:50px;


    border-radius:30px;


    background:

    linear-gradient(
        135deg,
        #0f172a,
        #1e293b
    );


    border:1px solid #334155;


}




.destaque-conteudo{


    max-width:700px;


}



.destaque span{


    background:#ef4444;


    padding:8px 18px;


    border-radius:20px;


    font-weight:bold;


}




.destaque h2{


    font-size:40px;


    margin:20px 0;


    color:#38bdf8;


}




.destaque p{


    color:#cbd5e1;


    font-size:18px;


    margin-bottom:30px;


}




.destaque a{


    display:inline-block;


    background:#38bdf8;


    color:#020617;


    padding:15px 30px;


    border-radius:30px;


    text-decoration:none;


    font-weight:bold;


}





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


.beneficios{


    width:90%;


    max-width:1300px;


    margin:auto;


    padding:40px 0;


}




.titulo-area{


    text-align:center;


    margin-bottom:35px;


}



.titulo-area h2{


    font-size:35px;


    color:#38bdf8;


}




.titulo-area p{


    margin-top:10px;


    color:#94a3b8;


}




.beneficios-grid{


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));


    gap:25px;


}




.beneficio{


    background:#0f172a;


    padding:30px;


    border-radius:25px;


    text-align:center;


    border:1px solid #1e293b;


    transition:.3s;


}




.beneficio:hover{


    transform:translateY(-8px);


    border-color:#38bdf8;


}





.icone{


    font-size:45px;


    margin-bottom:15px;


}



.beneficio h3{


    margin-bottom:15px;


}




.beneficio p{


    color:#cbd5e1;


}




/* =====================
 CONTAINER
===================== */


.container{


    width:90%;


    max-width:1300px;


    margin:auto;


    padding:40px 0;


}







/* =====================
 MINHA CONTA
===================== */


.minha-conta{


    background:#0f172a;


    padding:30px;


    border-radius:30px;


    margin-bottom:50px;


}





.meus-grid{


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));


    gap:25px;


}




.meu-produto{


    background:#020617;


    padding:20px;


    border-radius:20px;


    display:flex;


    gap:20px;


}





.meu-img img{


    width:100px;


    height:100px;


    object-fit:cover;


    border-radius:20px;


}




.meu-info h3{


    margin-bottom:15px;


}




.meu-info p{


    color:#cbd5e1;


    margin:8px 0;


}




.btn-renovar{


    display:inline-block;


    margin-top:10px;


    padding:10px 20px;


    background:#16a34a;


    color:white;


    border-radius:25px;


    text-decoration:none;


    font-weight:bold;


}

/* =====================
 PRODUTOS
===================== */


.produtos-grid{


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));


    gap:25px;


}





.produto{


    background:#0f172a;


    border-radius:25px;


    overflow:hidden;


    border:1px solid #1e293b;


    transition:.3s;


}





.produto:hover{


    transform:translateY(-10px);


    border-color:#38bdf8;


}





.produto-imagem{


    height:240px;


    position:relative;


}





.produto-imagem img{


    width:100%;


    height:100%;


    object-fit:cover;


}





.badge{


    position:absolute;


    top:15px;


    left:15px;


    background:#ef4444;


    padding:8px 18px;


    border-radius:20px;


    font-weight:bold;


    z-index:2;


}




.produto-conteudo{


    padding:25px;


}





.produto-conteudo h3{


    font-size:22px;


    margin-bottom:15px;


}




.valor{


    font-size:32px;


    font-weight:bold;


    color:#38bdf8;


    margin-bottom:15px;


}





.produto-conteudo p{


    color:#cbd5e1;


    margin:8px 0;


}





.btn-comprar{


    display:block;


    text-align:center;


    margin-top:20px;


    background:#38bdf8;


    color:#020617;


    padding:15px;


    border-radius:30px;


    text-decoration:none;


    font-weight:bold;


    transition:.3s;


}




.btn-comprar:hover{


    transform:scale(1.05);


}




.sem-produtos{


    background:#0f172a;


    padding:30px;


    border-radius:20px;


    text-align:center;


}





/* =====================
 DEPOIMENTOS
===================== */


.depoimentos{


    width:90%;


    max-width:1300px;


    margin:60px auto;


}





.depoimentos-grid{


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));


    gap:25px;


}





.depoimento{


    background:#0f172a;


    padding:30px;


    border-radius:25px;


    border:1px solid #1e293b;


}





.estrelas{


    font-size:22px;


    margin-bottom:15px;


}




.depoimento p{


    color:#cbd5e1;


    line-height:1.6;


    margin-bottom:20px;


}





.depoimento strong{


    color:#38bdf8;


}






/* =====================
 WHATSAPP FLUTUANTE
===================== */


.whatsapp-float{


    position:fixed;


    right:25px;


    bottom:25px;


    width:60px;


    height:60px;


    background:#22c55e;


    border-radius:50%;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:32px;


    text-decoration:none;


    z-index:999;


    box-shadow:0 5px 20px rgba(0,0,0,.4);


    transition:.3s;


}





.whatsapp-float:hover{


    transform:scale(1.15);


}

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


footer{


    background:#020617;


    padding:50px 8%;


    border-top:1px solid #1e293b;


}




.footer-box{


    display:grid;


    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));


    gap:40px;


}




.footer-col h2{


    color:#38bdf8;


    margin-bottom:15px;


}




.footer-col h3{


    color:white;


    margin-bottom:15px;


}




.footer-col p{


    color:#cbd5e1;


    line-height:1.6;


}




.footer-col a{


    display:block;


    color:#cbd5e1;


    text-decoration:none;


    margin:10px 0;


    transition:.3s;


}




.footer-col a:hover{


    color:#38bdf8;


}





.direitos{


    text-align:center;


    margin-top:40px;


    padding-top:20px;


    border-top:1px solid #1e293b;


    color:#64748b;


}







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


@media(max-width:900px){



.header{


    flex-direction:column;


    gap:20px;


}




nav{


    flex-wrap:wrap;


    justify-content:center;


}




.hero{


    min-height:400px;


    padding:40px 5%;


}




.hero h1{


    font-size:38px;


}




.hero p{


    font-size:18px;


}




.destaque{


    padding:30px;


}



.destaque h2{


    font-size:30px;


}





.meu-produto{


    flex-direction:column;


    align-items:center;


    text-align:center;


}





.meu-img img{


    width:130px;


    height:130px;


}





.produto-imagem{


    height:200px;


}



}





@media(max-width:500px){



.logo{


    font-size:22px;


}




.whatsapp{


    padding:10px 18px;


}




.titulo-area h2{


    font-size:28px;


}




.produto-conteudo h3{


    font-size:20px;


}




.valor{


    font-size:26px;


}




.whatsapp-float{


    width:55px;


    height:55px;


    right:15px;


    bottom:15px;


}


}