body::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
    url('cesped.webp') center/contain repeat;
  filter: blur(3px);
   
  z-index:-1;
}

body{
  margin:0;
  font-family:Arial, sans-serif;
  background:none;
  color:white;
  position:relative;
}

header{
min-height:100svh;
background:url('logo.webp') center/cover;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
}

.portada {
  height: 90vh;
  background: url('portada.webp') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:0;
}

.portada .overlay {
  background: rgba(0,0,0,0.6);
  padding: 30px;
  border-radius:10px;
}

.about-box{
  background:#1e293b;
  padding:20px;
  border-radius:12px;
}

.overlay-dark{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.65);
top:0;
left:0;
}

.hero{
position:relative;
z-index:2;
max-width:700px;
padding:20px;
}

h1{
font-size:2.8em;
margin-bottom:10px;
}

.highlight{
color:#f97316;
font-weight:bold;
}

.btn{
display:inline-block;
margin-top:20px;
padding:15px 25px;
background:#25D366;
color:white;
text-decoration:none;
border-radius:8px;
font-weight:bold;
transition:0.3s;
}

.btn:hover{
transform:scale(1.05);
}

section{
padding:70px 20px;
text-align:center;
}

.container{
max-width:1000px;
margin:auto;
}

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

.card{
background:rgba(20,40,30,0.95);
padding:20px;
border-radius:12px;
width:220px;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
}

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

.price-card{
background:rgba(20,40,30,0.95);
padding:25px;
border-radius:12px;
width:250px;
border:1px solid rgba(100,255,150,0.1);
}

.price{
font-size:1.8em;
color:#f97316;
margin:10px 0;
}

.testimonials{
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:center;
}

.testimonial{
background:rgba(10,30,20,0.95);
padding:20px;
border-radius:10px;
width:260px;
}

.whatsapp-float{
position:fixed !important;
bottom:20px;
right:20px;
background:#25D366;
padding:15px 18px;
border-radius:50px;
font-weight:bold;
text-decoration:none;
color:white;
box-shadow:0 0 20px rgba(37,211,102,0.7);
animation:pulse 1.8s infinite;
z-index: 10000;
transition:transform 0.2s ease;
}

.whatsapp-float:hover{
transform:scale(1.1);
}

.social-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:20px;
  text-decoration:none;
  color:white;
}

.social-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.social-icon svg{
  width:32px;
  height:32px;
}

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

.gallery img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:12px;
  transition:0.3s;
  cursor:pointer;
}

.gallery img:hover{
  transform:scale(1.05);
  filter:brightness(1.1);
}

.badge{
display:inline-block;
background:#f97316;
padding:5px 10px;
border-radius:5px;
font-size:0.8em;
margin-bottom:10px;
}

footer{
background:black;
padding:20px;
font-size:0.9em;
}

#lightbox{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

#lightbox.show{
  display:flex;
}

#lightbox img{
  max-width:90%;
  max-height:90%;
  border-radius:10px;
}

#cerrar{
  position:absolute;
  top:20px;
  right:30px;
  font-size:3em;
  color:white;
  cursor:pointer;
  z-index:10000;
}

.section-dark{
  background:rgba(15,15,15,0.38);
}

.section-darker{
  background:rgba(17,17,17,0.38);
}

@media (max-width:768px){
  h1{
    font-size:2em;
  }

  .hero{
    padding:15px;
  }

  .card,
  .price-card{
    width:100%;
    max-width:320px;
  }

  .portada{
    height:70vh;
  }
}

@keyframes pulse{
  0%{ transform:scale(1); }
  50%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}

.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
  }
  .video-card {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
  }
  .video-card iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    border-radius: 8px;
  }