/* === SECCIÓN INICIO CON VIDEO Y TEXTO A LA IZQUIERDA === */
#inicio {
  position: relative;
  width: 100%;
  height: 100vh; /* ocupa toda la pantalla */
  margin-top: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  background-color: #000;
}

#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35;
  filter: brightness(60%) contrast(115%) saturate(130%);
  z-index: 0;
}

/* Contenedor del texto */
.hero-content {
  position: relative;
  z-index: 2;
  color: #fff;
  max-width: 650px;
  margin-left: 5vw;   /* distancia desde el borde izquierdo */
  text-align: left;   /* alineación del texto */
}

/* Gradiente oscuro para mejorar */
#inicio::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.8) 100%);
  z-index: 1;
}

/* Que no quede un hueco negro al hacer scroll */
body, html {
  height: 100%;
  margin: 0;
  background-color: #000;
  overflow-x: hidden;
}

/* === MITIGACIÓN === */
#mitigacion {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  padding-left: 5vw;
  color: #fff;
  background-color: #000;
  z-index: 1;
}

#bg-video-mitigacion {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
  filter: brightness(80%) contrast(110%) saturate(130%);
  z-index: 0;
}

#mitigacion::after {
  /* gradiente oscuro para resaltar el text */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.9) 100%);
  z-index: 1;
}

#mitigacion .hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}