/* RESET */
*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

html,body{
margin:0;
padding:0;
width:100%;
overflow-x:hidden;
}

/* FUNDO */

body{
min-height:100vh;
background-image:linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55)), url("img/coca.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
background-attachment:fixed;
text-align:center;
}

/* CONTAINER */

.container{
max-width:900px;
margin:auto;
padding:30px 20px;
background:rgba(0,0,0,0.15);
border-radius:16px;
backdrop-filter:blur(10px);
}

/* TITULO */

.titulo{
font-size:60px;
letter-spacing:2px;
color:#f2f2f2;
text-shadow:2px 2px 10px black;
margin:0;
}

/* TEXTO */

.desc{
font-size:18px;
margin-top:20px;
color:#f2f2f2;
line-height:1.6;
text-shadow:2px 2px 8px black;
}

/* BOTAO */

.btn-ver{
background-color:red;
color:white;
border:none;
padding:14px 28px;
border-radius:9px;
cursor:pointer;
margin-top:40px;
transition:transform 0.3s ease, background-color 0.3s ease;
position:relative;
animation:pulse 1.5s infinite;
overflow:hidden;
display:inline-block;
}

.btn-ver:hover{
background-color:darkred;
transform:scale(1.08);
}

.btn-ver::before{
content:"";
position:absolute;
top:-50px;
left:-150%;
width:40%;
height:150%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.45),transparent);
transition:left 0.6s ease;
transform:skewX(-20deg);
pointer-events:none;
}

.btn-ver:hover::before{
left:140%;
}

@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(255,0,0,0.6);}
70%{box-shadow:0 0 0 18px rgba(255,0,0,0);}
100%{box-shadow:0 0 0 0 rgba(255,0,0,0);}
}

/* CARDS */

.cards{
display:flex;
gap:20px;
margin-top:30px;
justify-content:center;
flex-wrap:wrap;
}

.card{
background:#f2f2f2;
padding:22px;
border-radius:10px;
margin-top:30px;
transition:0.3s;
box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 15px 30px rgba(0,0,0,0.35);
}

/* PRODUTOS */

.produtos{
padding:80px 20px;
text-align:center;
background:rgba(0,0,0,0.15);
backdrop-filter:blur(10px);
}

.produtos h2{
color:white;
font-size:40px;
margin-top:40px;
}

.produtos-grid{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.produto{
background:white;
padding:30px;
border-radius:12px;
width:220px;
margin-top:60px;
box-shadow:0 20px 40px rgba(0,0,0,0.4);
transition:0.3s;
}

.produto:hover{
transform:translateY(-10px);
box-shadow:0 25px 50px rgba(0,0,0,0.5);
}

.produto h3{
margin-bottom:10px;
}

.produto button{
margin-top:15px;
padding:10px 20px;
background:red;
color:white;
border:none;
border-radius:6px;
cursor:pointer;
transition:0.3s;
}

.produto button:hover{
background:#c40000;
transform:scale(1.08);
}

/* FOOTER */

.final{
font-family:'Courier New', Courier, monospace;
color:white;
padding:50px 20px;
}

/* ANIMAÇÃO */

.titulo,.desc,.btn-ver,.cards{
animation:fadeUp 2s ease both;
}

.desc{animation-delay:0.15s;}
.btn-ver{animation-delay:0.3s;}
.cards{animation-delay:0.45s;}

@keyframes fadeUp{
from{opacity:0; transform:translateY(15px);}
to{opacity:1; transform:translateY(0);}
}

.reveal{
opacity:0;
transform:translateY(50px);
transition:all 0.5s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}

footer{
text-align:center;
padding:30px;
color:white;
font-size:16px;
opacity:0.8;
}

/* MOBILE */

@media (max-width:600px){

body{
background-attachment:scroll;
}

.container{
width:92%;
margin:20px auto;
padding:20px 16px;
}

.titulo{
font-size:34px;
line-height:1.1;
letter-spacing:1px;
}

.desc{
font-size:16px;
line-height:1.4;
}

.btn-ver{
width:85%;
max-width:300px;
}

/* CARDS 2 COLUNAS */

.cards{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}

.card{
margin-top:0;
padding:16px;
font-size:14px;
}

.card:nth-child(3){
grid-column:1/-1;
}

/* PRODUTOS */

.produtos{
padding:50px 16px;
}

.produtos h2{
font-size:30px;
margin-top:10px;
}

.produtos-grid{
flex-direction:column;
align-items:center;
gap:20px;
}

.produto{
width:92%;
max-width:340px;
margin-top:0;
}

.final{
padding:30px 15px;
font-size:14px;
}
}