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

body{

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

color:#333;

}

h1,h2,h3{

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

}

.hero{

height:50vh;

background:linear-gradient(135deg,#f1f8f4,#ffffff,#e8f5e9);

display:flex;

align-items:center;

justify-content:center;

text-align:center;

position:relative;

overflow:hidden;

}

.hero-content{

z-index:2;

animation:fadeIn 1.5s ease;

}

.hero h1{

font-size:48px;

margin-bottom:15px;

color:#1b5e20;

}

.hero p{

font-size:20px;

margin-bottom:25px;

}

.btn{

background:#2e7d32;

color:white;

padding:12px 28px;

border-radius:30px;

text-decoration:none;

transition:0.3s;

}

.btn:hover{

background:#1b5e20;

transform:scale(1.05);

}

.flores i{

position:absolute;
font-size:35px;
color:#4CAF50;

opacity:0.35;

animation:flotar 10s infinite ease-in-out;

}

.leaf1{top:10%;left:15%;}
.leaf2{top:70%;left:10%;}
.leaf3{top:30%;right:15%;}
.leaf4{bottom:10%;right:10%;}

.servicios{

padding:80px 20px;

text-align:center;

background:#f5f9f6;

}

.servicios-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:30px;

max-width:1000px;

margin:auto;

}

.servicio{

background:white;

padding:30px;

border-radius:10px;

box-shadow:0 5px 20px rgba(0,0,0,0.05);

transition:0.3s;

}

.servicio i{

font-size:40px;

color:#2e7d32;

margin-bottom:15px;

}

.servicio:hover{

transform:translateY(-10px);

}

.ventajas{

padding:80px 20px;

text-align:center;

}

.ventajas-grid{

display:flex;

justify-content:center;

gap:50px;

margin-top:30px;

}

.ventajas i{

font-size:35px;

color:#2e7d32;

margin-bottom:10px;

}

.ubicacion{

padding:80px 20px;

text-align:center;

background:#f5f9f6;

}

.btn-mapa{

display:inline-block;

margin-top:20px;

padding:14px 28px;

background:#2e7d32;

color:white;

border-radius:30px;

text-decoration:none;

transition:0.3s;

}

.btn-mapa:hover{

background:#1b5e20;

transform:scale(1.05);

}

footer{

background:#222;

color:white;

text-align:center;

padding:30px;

}

@keyframes fadeIn{

from{opacity:0;transform:translateY(20px);}

to{opacity:1;transform:translateY(0);}

}

@keyframes flotar{

0%{transform:translateY(0);}

50%{transform:translateY(-40px);}

100%{transform:translateY(0);}

}

.f1{top:10%;left:8%;}
.f2{top:30%;left:15%;}
.f3{top:15%;right:10%;}
.f4{bottom:15%;left:10%;}
.f5{bottom:10%;right:15%;}
.f6{top:40%;right:20%;}
.f7{top:50%;left:25%;}
.f8{bottom:30%;right:8%;}

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

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

#floresAnimadas{

width:100%;
height:200px;

display:block;

margin:20px auto;

}