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

:root{

--verdeOscuro:#0b6b3a;
--verdeLogo:#7fbf4d;
--verdeClaro:#a7d46b;
--blanco:#ffffff;

}

body{

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

overflow-x:hidden;

background:#fff;

}

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

.header{

position:fixed;

top:0;
left:0;

width:100%;

height:120px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 40px;

background:rgba(167,212,107,.92);

backdrop-filter:blur(10px);

z-index:9999;

}

/* CAMBIO AL HACER SCROLL */

.header.scrolled{

background:rgba(11,107,58,.96);

box-shadow:0 5px 25px rgba(0,0,0,.15);

}

/* =========================
   LOGO
========================= */

.logo{

display:flex;

align-items:center;

justify-content:center;

}

.logo img{

height:130px;

width:auto;

object-fit:contain;

background:transparent !important;

opacity:.98;

filter:
drop-shadow(0 0 15px rgba(127,191,77,.55))
drop-shadow(0 0 35px rgba(127,191,77,.35));

}

.logo img:hover{

transform:scale(1.05);

}

/* =========================
   MENÚ
========================= */

.menu{

display:flex;

align-items:center;

gap:25px;

}

.menu a{

font-family:'Cormorant Garamond',serif;

font-size:25px;

font-weight:700;

letter-spacing:.5px;

white-space:nowrap;

text-decoration:none;

color:var(--verdeOscuro);

transition:.3s;

}

/* EFECTO ELEGANTE */

.menu a::after{

content:"";

position:absolute;

left:0;
bottom:-6px;

width:0%;

height:2px;

background:white;

transition:.4s;

}

.menu a:hover::after{

width:100%;

}

/* MENU AL BAJAR */

.header.scrolled .menu a{

color:white;

}

.menu a:hover{

color:white;

}

/* =========================
   BOTÓN CONTACTO
========================= */

.contacto-wrapper{

position:relative;

display:inline-block;

overflow:visible;

}

.btn-contacto{

position:relative;

z-index:5;

padding:15px 34px;

background:var(--verdeOscuro);

color:white;

text-decoration:none;

border-radius:50px;

font-weight:600;

font-size:17px;

transition:.3s;

box-shadow:
0 0 15px rgba(127,191,77,.35),
0 0 30px rgba(127,191,77,.15);

}

.btn-contacto:hover{

background:var(--verdeLogo);

transform:translateY(-2px);

}

/* =========================
   HOJAS ANIMADAS
========================= */

.hoja{

position:absolute;

width:35px;
height:35px;

background:#dfff8b;

border-radius:0 100% 0 100%;

box-shadow:
0 0 15px #dfff8b,
0 0 30px #dfff8b,
0 0 50px rgba(223,255,139,.8);

z-index:999;

}

/* POSICIONES */

.hoja1{
left:-25px;
top:-5px;
animation:flotar1 2s infinite;
}

.hoja2{
left:-25px;
bottom:-5px;
animation:flotar2 2s infinite .5s;
}

.hoja3{
right:-25px;
top:-5px;
animation:flotar3 2s infinite 1s;
}

.hoja4{
right:-25px;
bottom:-5px;
animation:flotar4 2s infinite 1.5s;
}

/* ANIMACIONES */

@keyframes flotar1{

0%{
opacity:0;
transform:translate(0,0) scale(.2);
}

50%{
opacity:1;
transform:translate(-15px,-15px) rotate(-30deg) scale(1);
}

100%{
opacity:0;
transform:translate(-30px,-30px) scale(.2);
}

}

@keyframes flotar2{

0%{
opacity:0;
transform:translate(0,0) scale(.2);
}

50%{
opacity:1;
transform:translate(-15px,15px) rotate(30deg) scale(1);
}

100%{
opacity:0;
transform:translate(-30px,30px) scale(.2);
}

}

@keyframes flotar3{

0%{
opacity:0;
transform:translate(0,0) scale(.2);
}

50%{
opacity:1;
transform:translate(15px,-15px) rotate(30deg) scale(1);
}

100%{
opacity:0;
transform:translate(30px,-30px) scale(.2);
}

}

@keyframes flotar4{

0%{
opacity:0;
transform:translate(0,0) scale(.2);
}

50%{
opacity:1;
transform:translate(15px,15px) rotate(-30deg) scale(1);
}

100%{
opacity:0;
transform:translate(30px,30px) scale(.2);
}

}

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

.hero{

margin-top:120px;

height:700px;

position:relative;

display:flex;

justify-content:center;

align-items:center;

background-size:cover;
background-position:center;

overflow:hidden;

}

/* TONO VERDE SOBRE FOTO */

.hero::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

background:
linear-gradient(
rgba(127,191,77,.22),
rgba(127,191,77,.22)
);

z-index:1;

}

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

.contenido-hero{

position:relative;

z-index:2;

text-align:center;

color:white;

padding:20px;

}

.contenido-hero h1{

font-family:'Cormorant Garamond',serif;

font-size:125px;

font-weight:700;

text-shadow:
0 0 20px rgba(0,0,0,.30);

}

.contenido-hero p{

font-size:30px;

letter-spacing:2px;

margin-top:10px;

text-shadow:
0 0 15px rgba(0,0,0,.35);

}

/* =========================
   FLECHAS
========================= */

.flecha{

position:absolute;

top:50%;

transform:translateY(-50%);

width:70px;
height:70px;

border:none;

border-radius:50%;

background:rgba(255,255,255,.85);

font-size:32px;

cursor:pointer;

z-index:3;

transition:.3s;

}

.flecha:hover{

background:white;

transform:translateY(-50%) scale(1.1);

}

.izquierda{

left:30px;

}

.derecha{

right:30px;

}

/* =========================
   GALERÍA
========================= */

.galeria-home{

padding:90px 70px 100px 70px;

background:#f7faf5;

position:relative;

z-index:20;

}

.galeria-home h2{

text-align:center;

font-family:'Cormorant Garamond',serif;

font-size:65px;

color:var(--verdeOscuro);

margin-bottom:60px;

}

.grid-galeria{

display:grid;

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

gap:30px;

}

.grid-galeria img{

width:100%;

height:340px;

object-fit:cover;

border-radius:25px;

transition:.4s;

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

}

.grid-galeria img:hover{

transform:scale(1.05);

box-shadow:0 15px 35px rgba(127,191,77,.25);

}

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

footer{

background:var(--verdeOscuro);

padding:50px;

text-align:center;

color:white;

}

footer img{

height:110px;

background:transparent;

mix-blend-mode:multiply;

margin-bottom:15px;

}

footer p{

font-size:15px;

}

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

@media(max-width:900px){

.header{

flex-direction:column;

height:auto;

padding:20px;

}

.logo img{

height:120px;

}

.menu{

flex-wrap:wrap;

justify-content:center;

gap:20px;

margin:20px 0;

}

.menu a{

font-size:22px;

}

.btn-contacto{

padding:12px 24px;

font-size:15px;

}

.hero{

margin-top:180px;

height:70vh;

}

.contenido-hero h1{

font-size:70px;

}

.contenido-hero p{

font-size:22px;

}

.grid-galeria{

grid-template-columns:1fr;

}

.galeria-home{

padding:70px 25px;

}

}