body{
margin:0;
font-family:'Segoe UI',sans-serif;
background:radial-gradient(circle at top,#0f172a,#020617);
color:white;
}

/* HEADER */

.header{
position:sticky;
top:0;
z-index:999;
background:rgba(0,0,0,0.7);
backdrop-filter:blur(12px);
display:flex;
align-items:center;
justify-content:space-between;
padding:15px 40px;
border-bottom:1px solid rgba(255,255,255,0.08);
flex-wrap:wrap;
}

.logo img{
width:55px;
height:55px;
border-radius:50%;
box-shadow:0 0 10px rgba(255,215,0,0.4);
}

.menu{
display:flex;
gap:25px;
}

.menu a{
color:#cbd5f5;
text-decoration:none;
font-weight:500;
transition:0.3s;
}

.menu a:hover{
color:#facc15;
}

.header-whatsapp{
background:#25d366;
padding:8px 16px;
border-radius:8px;
color:white;
text-decoration:none;
font-weight:600;
display:flex;
align-items:center;
gap:6px;
transition:0.3s;
}

.header-whatsapp:hover{
transform:scale(1.05);
}

/* BANNER */

.banner{
text-align:center;
padding:80px 20px;
}

.banner h2{
font-size:42px;
background:linear-gradient(90deg,#facc15,#fde047);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.banner p{
color:#94a3b8;
font-size:18px;
}

/* ABOUT */

.about{
max-width:900px;
margin:auto;
text-align:center;
padding:40px 20px;
}

.about h2{
font-size:32px;
color:#facc15;
margin-bottom:10px;
}

.subtitle{
font-size:20px;
color:#e2e8f0;
margin-bottom:15px;
}

.description{
color:#94a3b8;
line-height:1.6;
margin-bottom:25px;
}

.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:12px;
margin-bottom:30px;
font-size:15px;
color:#cbd5f5;
}

/* BOTÃO WHATSAPP */

.cta{
display:inline-block;
margin-top:25px;
background:#25d366;
padding:12px 20px;
border-radius:8px;
color:white;
text-decoration:none;
font-weight:bold;
transition:0.3s;
}

.cta:hover{
transform:scale(1.05);
}

/* PROMO */

.promo{
display:flex;
align-items:center;
justify-content:center;
gap:50px;
padding:60px 30px;
max-width:1200px;
margin:auto;
flex-wrap:wrap;
}

.promo-text{
max-width:500px;
}

.promo-text h2{
color:#facc15;
font-size:32px;
margin-bottom:15px;
}

.promo-text p{
color:#94a3b8;
margin-bottom:20px;
}

.promo-text ul{
list-style:none;
padding:0;
}

.promo-text li{
margin-bottom:10px;
color:#cbd5f5;
}

.promo-image img{
width:420px;
max-width:100%;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.6);
}

/* GAME PASS */

.gamepass{
padding:80px 20px;
}

.gamepass-container{
max-width:1100px;
margin:auto;
display:flex;
align-items:center;
justify-content:center;
gap:50px;
flex-wrap:wrap;
}

.gamepass-image img{
width:350px;
max-width:100%;
border-radius:14px;
box-shadow:0 10px 40px rgba(0,0,0,0.6);
}

.gamepass-text{
max-width:500px;
}

.gamepass-text h2{
color:#facc15;
margin-bottom:10px;
}

.price{
font-size:20px;
color:#22c55e;
margin-bottom:15px;
}

.gamepass-text p{
color:#94a3b8;
margin-bottom:15px;
}

.gamepass-text ul{
list-style:none;
padding:0;
margin-bottom:15px;
}

.gamepass-text li{
margin-bottom:8px;
color:#cbd5f5;
}

.steps{
color:#e2e8f0;
margin-bottom:20px;
}

.benefits{
display:flex;
gap:15px;
flex-wrap:wrap;
margin-bottom:20px;
}

.benefits span{
background:rgba(255,255,255,0.05);
padding:8px 12px;
border-radius:6px;
font-size:14px;
}

.gamepass-btn{
display:inline-block;
background:#25d366;
padding:12px 20px;
border-radius:8px;
text-decoration:none;
color:white;
font-weight:bold;
transition:0.3s;
}

.gamepass-btn:hover{
transform:scale(1.05);
}

.warning{
margin-top:10px;
color:#f87171;
font-size:14px;
}

/* COMBOS HEADER */

.combosHeader{
text-align:center;
margin-top:40px;
}

.combosHeader h3{
color:#fde047;
font-size:28px;
}

.combosHeader p{
color:#94a3b8;
}

/* SEARCH */

.search{
display:flex;
justify-content:center;
margin:40px 0;
}

.search input{
padding:14px 18px;
width:320px;
border-radius:10px;
border:none;
background:#020617;
color:white;
outline:none;
font-size:15px;
border:1px solid rgba(255,255,255,0.1);
}

/* GRID DOS COMBOS */

.container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
padding:30px;
}

/* BOTÃO VER MAIS */

.loadMoreContainer{
display:flex;
justify-content:center;
margin-bottom:40px;
}

#loadMoreBtn{
background:linear-gradient(135deg,#facc15,#fde047);
border:none;
padding:14px 28px;
border-radius:10px;
font-weight:bold;
font-size:16px;
cursor:pointer;
transition:0.3s;
}

#loadMoreBtn:hover{
transform:scale(1.05);
box-shadow:0 8px 25px rgba(250,204,21,0.4);
}

/* --- ESTILO DO CARROSSEL PARA CAPAS VERTICAIS --- */
.carousel-container {
    position: relative;
    max-width: 500px; /* Reduzimos a largura máxima para o card vertical não ficar gigante */
    margin: 40px auto;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.6);
    background-color: #020617; /* Mantém o padrão de fundo alternado */
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carousel-slide {
    min-width: 100%; /* Mostra 1 card por vez */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* DEFINE O FORMATO DO CARD VERTICAL (PROPORÇÃO CAPA JOGO) */
    /* Uma proporção comum de capa de jogo é ~3:4 ou 2:3. Ajuste se necessário. */
    aspect-ratio: 3 / 4; 
    
    /* Fundo preto para preencher caso a imagem seja menor que o card */
    background-color: #000; 
    overflow: hidden;
}

.carousel-slide img {
    /* GARANTE QUE A IMAGEM APAREÇA INTEIRA */
    width: 100%;
    height: 100%;
    
    /* 'contain' faz a imagem inteira caber dentro do card, sem cortes e sem distorção. */
    object-fit: contain; 
    
    display: block;
}

/* Botões Next/Prev (Ajustados para o card vertical) */
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: #facc15;
    border: none;
    padding: 12px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    transition: 0.3s;
    z-index: 10;
}

.prev:hover, .next:hover {
    background: #facc15;
    color: black;
}

.next { right: 10px; }
.prev { left: 10px; }

.card .combo-img {
    max-width: 50%;       /* largura máxima da imagem */ 
    margin-bottom: 20px;   /* espaçamento abaixo da imagem */
    border-radius: 8px;    /* cantos arredondados */
    display: flex;
    margin: auto;
}

/* Responsivo para Celular */
@media (max-width: 768px) {
    .carousel-container {
        max-width: 80%; /* Ocupa mais espaço na tela do celular */
    }
    
    .carousel-slide img {
        height: auto; /* Deixa o aspect-ratio controlar a altura */
    }
    
    .prev, .next {
        padding: 8px;
        font-size: 14px;
    }
}

/* RESPONSIVO GRID */

@media (max-width:1000px){

.container{
grid-template-columns:repeat(2,1fr);
}

}

@media (max-width:600px){

.container{
grid-template-columns:1fr;
}

}

/* HEADER RESPONSIVO MOBILE */

@media (max-width:768px){

.header{
flex-direction:column;
align-items:center;
gap:15px;
padding:20px;
text-align:center;
}

.menu{
flex-direction:column;
align-items:center;
gap:12px;
}

.header-whatsapp{
justify-content:center;
}

}

/* CARD */

.card{
background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
border:1px solid rgba(255,255,255,0.08);
border-radius:16px;
padding:22px;
transition:all 0.35s ease;
position:relative;
overflow:hidden;
box-shadow:0 10px 25px rgba(0,0,0,0.45);
}

.card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,#facc15,#fde047);
}

.card:hover{
transform:translateY(-8px) scale(1.02);
border:1px solid rgba(250,204,21,0.6);
box-shadow:0 18px 45px rgba(0,0,0,0.7);
}

.card h3{
font-size:20px;
color:#fde047;
margin-bottom:12px;
}

.games{
font-size:14px;
color:#cbd5f5;
line-height:1.5;
max-height:140px;
overflow:auto;
margin-bottom:18px;
}

/* BOTÃO COMPRAR */

.btn{
display:block;
text-align:center;
padding:12px;
border-radius:10px;
background:linear-gradient(135deg,#facc15,#fde047);
color:black;
font-weight:700;
text-decoration:none;
transition:0.25s;
}

.btn:hover{
transform:scale(1.05);
box-shadow:0 6px 20px rgba(250,204,21,0.45);
}

/* WHATSAPP FLUTUANTE */

.whatsapp{
position:fixed;
bottom:25px;
right:25px;
background:#25d366;
color:white;
padding:14px 18px;
border-radius:50px;
font-weight:bold;
text-decoration:none;
box-shadow:0 6px 20px rgba(0,0,0,0.4);
transition:0.3s;
}

.whatsapp:hover{
transform:scale(1.08);
}

/* FOOTER */

footer{
text-align:center;
padding:30px;
margin-top:40px;
color:#94a3b8;
border-top:1px solid rgba(255,255,255,0.1);
}