/* Theme: green + black + blue */
:root { --green:#2e7d32; --dark:#0b0f0c; --blue:#1565c0; }
body { background:#0c0f0d; color:#e9fff0; }
/* Navbar usa estilos globales (styles/navbar.css) para mantener consistencia */
.hero { position:relative; min-height:48vh; display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:0 }
/* Hacer que el hero sea full-bleed (ocupe todo el ancho de la pantalla) aunque esté dentro de un .container */
.hero{ width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw }
.hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.8)) }
.hero-title{ position:relative; z-index:1; color:#fff; text-align:center }
.hero-title h1{ font-weight:800; letter-spacing:.6px; text-shadow:0 2px 10px rgba(0,0,0,.6) }
.underline{ width:110px; height:4px; background:linear-gradient(90deg,var(--green),var(--blue)); margin:18px auto 0 }
.section-card{ position:relative; background:#101614; border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:28px; box-shadow: 0 16px 40px rgba(0,0,0,.25) }
/* Full-bleed card (ocupa todo el ancho fuera del container) */
.section-card.section-card--full{
  width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; border-radius:12px; padding:38px 28px;
}
.muted{ color:#bde9c7 }
.btn-primary{ background:linear-gradient(90deg,var(--green),var(--blue)); border:none }
.btn-primary:hover{ filter:brightness(1.1) }

/* Galería de 3 imágenes por servicio */
.service-gallery{ 
  width:100vw; 
  left:50%; 
  right:50%; 
  margin-left:-50vw; 
  margin-right:-50vw; 
  position:relative; 
  padding:24px 0;
}
.service-gallery .grid{ 
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:16px; 
}
.service-gallery .tile{ 
  position:relative; 
  overflow:hidden; 
  border-radius:12px; 
  border:1px solid rgba(255,255,255,.1); 
  background:#0f1412; 
}
.service-gallery .tile::before{ 
  content:""; 
  display:block; 
  padding-top:56.25%; 
}
.service-gallery .tile picture{
  position:absolute;
  inset:0;
  display:block;
}
.service-gallery .tile img{ 
  position:absolute; 
  top:0;
  left:0;
  width:100%; 
  height:100%; 
  object-fit:cover; 
  object-position:center;
  transition:transform .35s ease;
  display:block;
  z-index:1;
}
.service-gallery .tile:hover img{ 
  transform:scale(1.05); 
}

/* Galería de imágenes - contenedor */
.service-gallery .container{
  padding:0 15px;
  max-width:100%;
}
/* Video de fondo para voladuras */
.service-gallery .video-wrapper{
  position:relative;
  width:55%;
  max-width:650px;
  margin:0 auto;
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  background:#0f1412;
  box-shadow:0 16px 40px rgba(0,0,0,.25);
  display:block;
}
.service-gallery .video-wrapper::before{
  content:"";
  display:block;
  padding-top:56.25%; /* 16:9 aspect ratio */
}
.service-gallery .background-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}