/* Animación fade-in para las secciones */


/* Sección 1: Sección grande */
#seccion-grande {
  height: 100vh;

  background: #f8f9fa;

}

/* Sección 2: Imagen de fondo */
#seccion-publicacion {
  height: 60vh;
  position: relative;
}
/* Contenedor de la imagen con posicionamiento relativo */
.bg-image {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pseudo-elemento para la imagen de fondo con blur */
.bg-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit; /* Hereda la imagen del .bg-image */
  background-size: cover;
  background-position: center center;
  filter: blur(5px); /* Aplica el blur aquí */
  z-index: 0; /* Asegura que esté detrás del overlay */
}

/* Overlay posicionado por encima sin blur */
.overlay {
  position: relative; /* Necesario para z-index */
  z-index: 1; /* Sitúa el overlay por encima del pseudo-elemento */
  background:  #f8f9fa;/*rgba(0, 0, 0, 0.5);*/
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  color:rgba(0, 0, 0, 0.3);
}

/* Sección 3: Vista previa de publicaciones */
#seccion-vista-previa {
  padding: 40px 0;
}