/* =====================================
   PROMOÇÕES - MELHOR PLATAFORMAS
===================================== */


*{
    box-sizing:border-box;
}



body{

    margin:0;

    font-family:
    Arial,
    Helvetica,
    sans-serif;


    background:

    linear-gradient(
    135deg,
    #087f3d,
    #00a854
    );


    color:white;


}






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


.pagina-promocoes{


    min-height:100vh;


    padding:60px 30px;


    display:flex;


    flex-direction:column;


    align-items:center;


}







/* =====================================
   TITULO
===================================== */


.pagina-titulo{


    text-align:center;


    margin-bottom:45px;


}



.pagina-titulo h1{


    font-size:42px;


    font-weight:900;


    margin-bottom:10px;


}



.pagina-titulo p{


    font-size:18px;


    opacity:.9;


}







/* =====================================
   GRID PROMOÇÕES
===================================== */


.promocoes-grid{


    width:100%;


    max-width:1100px;


    display:grid;


    grid-template-columns:

    repeat(3,1fr);


    gap:25px;



}






/* =====================================
   CARD PROMOÇÃO
===================================== */


.card-promocao{


    position:relative;


    padding:30px;



    background:

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



    border:

    1px solid

    rgba(255,255,255,.25);



    border-radius:25px;



    backdrop-filter:blur(10px);



    box-shadow:

    0 15px 35px

    rgba(0,0,0,.25);



    transition:.3s;



}




.card-promocao:hover{


    transform:

    translateY(-10px);



    background:

    rgba(255,255,255,.20);


}







/* ETIQUETA */


.promocao-tag{


    position:absolute;


    top:20px;


    right:20px;



    background:#ffd600;


    color:#333;



    padding:7px 15px;


    border-radius:20px;


    font-weight:bold;


    font-size:13px;



}







/* ICONES */


.promocao-icon{


    width:65px;


    height:65px;



    display:flex;


    align-items:center;


    justify-content:center;



    background:#00e676;


    border-radius:50%;



    font-size:28px;



    margin-bottom:20px;



}







.card-promocao h2{


    font-size:24px;


    margin-bottom:15px;



}



.card-promocao p{


    line-height:1.6;


    color:#f1f1f1;


}






/* BOTAO DA PROMOÇÃO */


.btn-promocao{


    display:inline-flex;


    align-items:center;


    justify-content:center;


    gap:8px;



    margin-top:20px;



    padding:12px 25px;



    background:#00e676;



    color:white;



    text-decoration:none;



    border-radius:30px;



    font-weight:bold;



    transition:.3s;



}



.btn-promocao:hover{


    background:#00c853;


    transform:scale(1.05);


}







/* =====================================
   ESTATISTICAS
===================================== */


.promocoes-estatisticas{


    margin-top:45px;



    width:100%;


    max-width:900px;



    display:grid;


    grid-template-columns:

    repeat(4,1fr);



    gap:20px;



}




.promocoes-estatisticas div{


    background:white;



    color:#087f3d;



    padding:25px;



    text-align:center;



    border-radius:20px;



    box-shadow:

    0 10px 25px

    rgba(0,0,0,.25);



}




.promocoes-estatisticas strong{


    display:block;


    font-size:30px;


    font-weight:900;


}




.promocoes-estatisticas span{


    color:#555;


}








/* =====================================
   BOTÃO VOLTAR
===================================== */


.btn-voltar{


    margin-top:45px;


    width:230px;



    padding:15px;



    display:flex;


    justify-content:center;


    align-items:center;



    gap:10px;



    border-radius:35px;



    background:#00e676;



    color:white;



    text-decoration:none;



    font-weight:bold;



    box-shadow:

    0 10px 30px

    rgba(0,255,120,.4);



    transition:.3s;



}




.btn-voltar:hover{


    background:#00c853;


    transform:

    translateY(-5px);



}







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


@media(max-width:1000px){



.promocoes-grid{


    grid-template-columns:

    repeat(2,1fr);


}



}





@media(max-width:700px){



.pagina-promocoes{


    padding:40px 20px;


}




.promocoes-grid{


    grid-template-columns:1fr;


}




.promocoes-estatisticas{


    grid-template-columns:

    repeat(2,1fr);


}



}





@media(max-width:450px){



.promocoes-estatisticas{


    grid-template-columns:1fr;


}



.pagina-titulo h1{


    font-size:32px;


}



}