:root{

--bege:#F3E6D4;
--bege2:#FAF4EC;

--marrom:#6E472E;
--marrom-dark:#4A2D1B;

--verde:#306e2e;
--verde-dark:#1b4a1f;

}

html {
  scroll-behavior: smooth;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:'Poppins',sans-serif;

background:var(--bege2);

color:var(--marrom-dark);

}

.container{

width:90%;
max-width:1300px;
margin:auto;

}

header{

position:fixed;
width:100%;

background:rgba(250,244,236,.95);

backdrop-filter:blur(10px);

z-index:999;

}

.nav{

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

padding:10px 0;

}

.logo{

height:80px;

}

nav{

display:flex;
gap:40px;

}

nav a{

text-decoration:none;
color:var(--marrom);

font-weight:500;

}

.cart-btn{

background:white;

padding:12px 20px;

border-radius:50px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

cursor:pointer;

}

.texto {
    color:var(--marrom-dark);
}

.hero{

padding-top:150px;
min-height:100vh;

display:flex;
align-items:center;
background-image: url('../img/fundo.png');
background-size: cover;
}

.hero-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;

}

.hero-text h1{

font-family:'Cormorant Garamond',serif;

font-size:82px;

line-height:1;

color:var(--marrom-dark);

margin-bottom:30px;

}

.hero-text p{

font-size:20px;

line-height:1.8;

margin-bottom:35px;

}

.hero-image img{

width:100%;

filter:drop-shadow(0 30px 50px rgba(0,0,0,.2));

}

.botao {
  display:inline-block;
  background:linear-gradient(90deg, var(--marrom-dark), var(--marrom));
  padding:18px 40px;
  border-radius:50px;
  text-decoration:none;
  color:white;
  font-weight:600;
  border: 1pt solid transparent;
}

.botao-verde {
  display:inline-block;
  background:linear-gradient(90deg, var(--verde-dark), var(--verde));
  padding:18px 40px;
  border-radius:50px;
  text-decoration:none;
  color:white;
  font-weight:600;
  border: 1pt solid transparent;
}

.botao-sm {
  display:inline-block;
  background:linear-gradient(90deg, var(--marrom-dark), var(--marrom));
  padding:8px 10px;
  border-radius:100px;
  text-decoration:none;
  color:white;
  border: 1pt solid transparent;
}

.botao-sm-verde {
  display:inline-block;
  background:linear-gradient(90deg, var(--verde-dark), var(--verde));
  padding:8px 10px;
  border-radius:100px;
  text-decoration:none;
  color:white;
  border: 1pt solid transparent;
}

.botao-t {
  display:inline-block;
  background: transparent;
  padding:18px 40px;
  border-radius:50px;
  text-decoration:none;
  color: var(--marrom-dark);
  font-weight:600;
  border: 1pt solid transparent;
}

.titulo-p {
    font-size: 12px;
}

.negrito {
    font-weight: bold;
}

.products{

padding:120px 0;

}

.section-title{

text-align:center;

margin-bottom:60px;

}

.section-title span{

letter-spacing:4px;
color:var(--marrom);

}

.section-title h2{

font-size:60px;

font-family:'Cormorant Garamond',serif;

}

.products-grid{

width:90%;
max-width:1300px;

margin:auto;

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

gap:30px;

}

.card{

background:white;

border-radius:30px;

overflow:hidden;

transition:.4s;

box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.card:hover{

transform:translateY(-10px);

}

.card img{

width:100%;
height:300px;

object-fit:cover;

}

.content{

padding:25px;

}

.content h3{

font-size:30px;

font-family:'Cormorant Garamond',serif;

}

.content p{

margin:15px 0;

}

.price{

font-size:32px;

font-weight:700;

color:var(--marrom);

margin-bottom:20px;

}

.card button{

width:100%;

padding:15px;

border:none;

background:var(--marrom);

color:white;

border-radius:15px;

cursor:pointer;

}

.benefits{

background:var(--bege);

padding:100px 0;

}

.benefits .container{

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

gap:40px;

}

.benefit{

text-align:center;

}

.benefit h3{

margin-bottom:15px;

color:var(--marrom);

}

.cta{

padding:120px 20px;

text-align:center;

}

.cta h2{

font-size:70px;

font-family:'Cormorant Garamond',serif;

margin-bottom:20px;

}

.cta p{

margin-bottom:30px;

}

footer{

background:#4A2D1B;

padding:60px 0;

color:white;

}

.footer-content{

width:90%;
max-width:1200px;

margin:auto;

display:flex;
justify-content:space-between;

}

.footer-logo{

height:80px;

filter:brightness(0) invert(1);

}

@media(max-width:900px){

.hero-grid{

grid-template-columns:1fr;

}

.products-grid{

grid-template-columns:1fr;

}

.benefits .container{

grid-template-columns:1fr;

}

.hero-text h1{

font-size:52px;

}

.section-title h2{

font-size:40px;

}

}

.nav-cafe {
    position: fixed;
    width: 100%;
    background-color: #fff;
}

.nav-link {
  text-decoration: none;
  color: var(--marrom-dark);
}