body{

font-family: Arial;
background:#f4f4f4;
text-align:center;

}

h1{

color:brown;

}

header{

display:flex;
justify-content:space-between;
align-items:center;
padding:20px;

}

nav{

position:absolute;
top:30px;
right:40px;

}

nav a{

margin-left:20px;
text-decoration:none;
color:black;
font-weight:bold;

}

nav a:hover{

color:#c0392b;

}

.banner{

background:#8b1e1e;
color:white;
text-align:center;
padding:80px 20px;
margin-bottom:40px;
width:100%;

}

.banner h1{

font-size:42px;
margin-bottom:20px;
color:#ffd27a;

}

.banner p{

font-size:18px;
max-width:900px;
margin:auto;
line-height:1.6;

}

.produtos{

display:grid;
grid-template-columns:repeat(4, 1fr);
gap:25px;
max-width:1100px;
margin:40px auto;

}

.produto{

background:white;
padding:15px;
border-radius:8px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
transition:0.3s;
width:220px;
position:relative;

}

.produto:hover{

transform:translateY(-8px);
box-shadow:0 8px 20px rgba(0,0,0,0.2);

}

.produto img{

width:100%;
height:170px;
object-fit:contain;
transition:0.3s;

}

button{

background:#8b1e1e;
color:white;
border:none;
padding:12px 25px;
border-radius:6px;
cursor:pointer;
font-weight:bold;
transition:0.3s;

}

button:hover{

background:#b52b2b;
transform:scale(1.05);

}

.avaliacao{

color:#f1c40f;
font-size:18px;
margin:5px 0;

}

.promo{

position:absolute;
background:#e74c3c;
color:white;
padding:6px 10px;
font-size:14px;
font-weight:bold;
border-radius:6px;

}

/* CARRINHO */

#carrinho{

position:fixed;
top:0;
right:-400px;
width:350px;
height:100%;
background:white;
box-shadow:-5px 0 20px rgba(0,0,0,0.2);
padding:20px;
transition:0.4s;
overflow:auto;
text-align:left;

}

#carrinho.ativo{

right:0;

}

#carrinho h2{

margin-top:0;

}

/* LISTA PRODUTOS CARRINHO */

#listaCarrinho{

list-style:none;
padding:0;

}

#listaCarrinho li{

display:flex;
justify-content:space-between;
align-items:center;
padding:8px 0;
border-bottom:1px solid #eee;
font-size:14px;

}

/* BOTAO REMOVER */

#listaCarrinho button{

background:#e74c3c;
border:none;
color:white;
border-radius:4px;
padding:4px 8px;
cursor:pointer;
font-size:12px;

}

#listaCarrinho button:hover{

background:#c0392b;

}

/* TOTAL */

.total{

font-size:20px;
font-weight:bold;
margin-top:20px;

}

/* BOTAO FINALIZAR */

.finalizar{

background:#27ae60;
color:white;
border:none;
padding:14px;
width:100%;
margin-top:20px;
font-weight:bold;
cursor:pointer;
border-radius:6px;
font-size:16px;

}

.finalizar:hover{

background:#219150;

}

/* BOTAO CARRINHO FLUTUANTE */

#botaoCarrinho{

position:fixed;
bottom:30px;
right:30px;
background:#8b1e1e;
color:white;
width:60px;
height:60px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
cursor:pointer;
box-shadow:0 6px 20px rgba(0,0,0,0.3);
transition:0.3s;

}

#botaoCarrinho:hover{

transform:scale(1.1);

}

#botaoCarrinho span{

margin-left:5px;
font-size:14px;

}

/* AREA DOS KITS */

.kits{

background:#8b1e1e;
text-align:center;
padding:80px 20px;
margin-top:80px;

}

.kits h2{

font-size:36px;
color:#ffd27a;
margin-bottom:20px;

}

.kits p{

font-size:18px;
color:white;
max-width:800px;
margin:auto;
line-height:1.6;

}

.quantidade{

display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin:10px 0;

}

.quantidade button{

background:#ddd;
color:black;
border:none;
padding:5px 10px;
font-size:18px;
cursor:pointer;
border-radius:4px;

}

.quantidade span{

font-size:18px;
font-weight:bold;
width:20px;
text-align:center;

}

.preco-kit{

margin:10px 0;
display:flex;
align-items:center;
justify-content:center;
gap:10px;
flex-wrap:wrap;

}

.antigo{

text-decoration:line-through;
color:#999;
font-size:14px;

}

.novo{

color:#000;
font-size:22px;
font-weight:bold;

}

.desconto{

background:#27ae60;
color:white;
padding:4px 8px;
font-size:12px;
font-weight:bold;
border-radius:4px;

}

.preco-kit{

margin:10px 0;
font-size:16px;

}

.antigo{

color:red;
text-decoration:line-through;
margin-right:8px;

}

.novo{

font-weight:bold;
font-size:20px;
margin-right:8px;

}

.off{

color:green;
font-weight:bold;

}

.banner-secundario{

background:#8b1e1e;
color:white;
text-align:center;
padding:60px 20px;
margin:40px 0;

}

.banner-secundario h2{

font-size:32px;
color:#ffd27a;
margin-bottom:15px;

}

.banner-secundario p{

font-size:18px;
max-width:700px;
margin:auto;
line-height:1.6;

}

.preco-destaque{

color:#27ae60; /* verde de dinheiro 💰 */
font-size:22px;
font-weight:bold;
margin:10px 0;

}