/* ==========================
   RESET
========================== */

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

body{
	font-family:'Poppins', sans-serif;
	background:#F6F3ED;
	color:#2E2E2E;
	overflow-x:hidden;
}

/* ==========================
   HEADER
========================== */

header{
	position:fixed;
	top:0;
	width:100%;
	padding:20px 8%;
	display:flex;
	justify-content:space-between;
	align-items:center;
background: rgba(255,255,255,0.92);	backdrop-filter:blur(8px);
	z-index:1000;
}

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    max-height:50px;
    width:auto;
    max-width:200px;
    object-fit:contain;
}


nav{
	display:flex;
	gap:35px;
}

nav a{
    color:#005D2D;
    text-decoration:none;
    transition:0.3s;
    font-weight:600;
}


nav a:hover{
    color:#C8A96A;
}


/* ==========================
   HERO
========================== */

.hero{
    height:100vh;
    background:url("images/hero.jpg") center center/cover no-repeat;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.overlay{
	position:absolute;
	inset:0;
background: rgba(0,0,0,.45);}

.hero-content{
    position:relative;
    z-index:2;
    max-width:800px;
    padding:20px;
    margin:auto;
    text-align:center;
}


.hero h1{
    font-family:'Playfair Display', serif;
    color:#FFFFFF;
    font-size:4.5rem;
    margin-bottom:20px;
}


.hero p{
	color:white;
	font-size:1.2rem;
	margin-bottom:35px;
	line-height:1.7;
}

.btn{
	display:inline-block;
	background:#4D6A3D;
	color:white;
	padding:16px 36px;
	border-radius:40px;
	text-decoration:none;
	transition:.3s;
}

.btn:hover{
	background:#C8A96A;
	transform:translateY(-3px);
}

/* ==========================
   SECCIONES
========================== */

section{
	padding:100px 10%;
}

section h2{
	font-family:'Playfair Display', serif;
	font-size:3rem;
	color:#1E3A34;
	margin-bottom:25px;
}

.about{
	text-align:center;
}

.about p{
	max-width:750px;
	margin:auto;
	line-height:1.8;
}

/* ==========================
   PRODUCTOS
========================== */

.products{
	background:white;
}

.cards{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:30px;
	margin-top:40px;
}

.card{
	background:#F8F8F8;
	padding:35px;
	border-radius:18px;
	transition:.35s;
	cursor:pointer;
}

.card:hover{
	transform:translateY(-12px);
	box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.card h3{
	font-size:1.6rem;
	margin-bottom:15px;
}

/* ==========================
   PROCESO
========================== */

.process{
	text-align:center;
}

.steps{
	display:flex;
	justify-content:center;
	gap:25px;
	flex-wrap:wrap;
	margin-top:50px;
}

.steps div{
	background:#1E3A34;
	color:white;
	padding:25px;
	border-radius:15px;
	min-width:150px;
}

/* ==========================
   CONTACTO
========================== */

.contact{
	background:#1E3A34;
	text-align:center;
	color:white;
}

.contact h2{
	color:white;
}

.contact p{
	margin-bottom:35px;
}

/* ==========================
   FOOTER
========================== */

footer{
	background:#102420;
	color:white;
	text-align:center;
	padding:25px;
}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:768px){

	header{
		flex-direction:column;
		gap:15px;
	}

	nav{
		gap:15px;
		flex-wrap:wrap;
		justify-content:center;
	}

	.hero h1{
		font-size:2.8rem;
	}

	section h2{
		font-size:2.2rem;
	}

}