/* =====================================
   FAVORITOS PREMIUM
===================================== */


*{
box-sizing:border-box;
}



body{

background:

radial-gradient(
circle at top,
#064d2a,
#020806 65%
);

color:white;

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

}






/* CONTAINER */

.favoritos-page{


max-width:1200px;


margin:auto;


padding:40px 20px;


}







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


.pagina-titulo{


text-align:center;


margin-bottom:40px;


}



.pagina-titulo h1{


font-size:42px;


margin-bottom:15px;


}



.pagina-titulo p{


font-size:18px;


opacity:.8;


}









/* =====================================
   BANNER
===================================== */


.favoritos-banner{


padding:45px;


border-radius:30px;


background:

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


border:

1px solid rgba(255,255,255,.18);


backdrop-filter:blur(20px);


text-align:center;


margin-bottom:40px;


box-shadow:

0 20px 50px rgba(0,0,0,.4);


}



.favoritos-banner i{


font-size:60px;


color:#00e676;


margin-bottom:20px;


}



.favoritos-banner h2{


font-size:32px;


margin-bottom:15px;


}



.favoritos-banner p{


opacity:.85;


font-size:17px;


}









/* =====================================
   GRID CARDS
===================================== */


.favoritos-grid{


display:grid;


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


gap:25px;


}








/* CARD */


.favorito-card{


background:

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


border:

1px solid rgba(255,255,255,.18);


border-radius:30px;


padding:35px 25px;


text-align:center;


backdrop-filter:blur(15px);


transition:.4s;


}





.favorito-card:hover{


transform:translateY(-10px);


border-color:#00e676;


box-shadow:

0 0 30px rgba(0,230,118,.25);


}







/* ICONE */


.favorito-icon{


width:80px;


height:80px;


margin:auto;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


background:

rgba(0,230,118,.15);


color:#00e676;


font-size:35px;


margin-bottom:25px;


}







.favorito-card h2{


font-size:24px;


margin-bottom:15px;


}



.favorito-card p{


opacity:.8;


line-height:1.6;


}









/* BOTÃO CARD */


.favorito-card button{


margin-top:25px;


padding:13px 25px;


border:none;


border-radius:30px;


background:#00e676;


color:white;


font-weight:bold;


cursor:pointer;


transition:.3s;


}



.favorito-card button:hover{


box-shadow:

0 0 20px #00e676;


transform:scale(1.05);


}








/* =====================================
   ESTATÍSTICAS
===================================== */


.favoritos-stats{


display:grid;


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


gap:20px;


margin:50px 0;


}



.favoritos-stats div{


background:

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


border-radius:25px;


padding:30px;


text-align:center;


border:

1px solid rgba(255,255,255,.15);


backdrop-filter:blur(15px);


}




.favoritos-stats strong{


display:block;


font-size:40px;


color:#00e676;


}



.favoritos-stats span{


opacity:.8;


}









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


.btn-voltar{


display:flex;


width:max-content;


margin:40px auto;


align-items:center;


gap:10px;


padding:15px 35px;


border-radius:35px;


background:#00e676;


color:white;


text-decoration:none;


font-weight:bold;


transition:.3s;


}



.btn-voltar:hover{


transform:translateY(-5px);


box-shadow:

0 0 30px #00e676;


}









/* =====================================
   RESPONSIVO
===================================== */


@media(max-width:900px){



.favoritos-grid{


grid-template-columns:1fr;


}



.favoritos-stats{


grid-template-columns:1fr;


}



}



@media(max-width:600px){



.pagina-titulo h1{


font-size:32px;


}



.favoritos-banner{


padding:30px 20px;


}



.favorito-card{


padding:30px 20px;


}


}