/* Estilos generales para el body */
body {
	background-color: transparent; /* Un color de fondo base */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Estilos para el banner */
.banner-section {
	width: 100%;
	/* Es importante que el banner no sea transparente si no quieres que el fondo se vea a través de él */
	padding: 0 0 15px 0;
	z-index: 2; /* Asegura que el banner esté por encima de main_umbral si se solapan */
	position: relative; /* Necesario para que z-index funcione */
}

/* Estilos para el div.container dentro de main_umbral */
.main_umbral .container {
	background-color: transparent; /* Fondo semi-transparente para tu contenido */
	position: relative;
	z-index: 1; /* Asegura que el contenido esté por encima del fondo */

	width: 100%; /* Ocupa el 100% del espacio disponible hasta el max-width */
	margin-left: auto; /* Centra el contenedor horizontalmente */
	margin-right: auto; /* Centra el contenedor horizontalmente */
	/* Asegúrate de que no haya un margen-top en el container si el main_umbral ya tiene padding-top */
	margin-top: 0;
}

/* Media Query para pantallas de escritorio (PC o laptop, a partir de 1200px de ancho) */
@media (min-width: 1200px) {
	/* Corresponde al breakpoint 'xl' de Bootstrap */
	/* Estilos para el div que contendrá la imagen de fondo y el contenido */
	.main_umbral {
		background-image: url("./imagenes/about-f.jpg"); /* ¡ACTUALIZA ESTA RUTA! */
		background-repeat: no-repeat;
		/* === CAMBIO CLAVE: Eliminar o cambiar background-attachment === */
		/* background-attachment: fixed;  <-- LO ELIMINAMOS */
		background-attachment: scroll; /* (Este es el valor por defecto, lo pongo explícito para claridad) */

		background-position: center top; /* Centramos la imagen y la anclamos arriba del div */
		/* background-position: center center;  <-- Podrías probar con center center si top no funciona bien */
		background-size: contain auto; /* La imagen ocupará el 100% del ancho del div, la altura se ajusta. Esto es crucial si las personas están en los bordes y no quieres que se recorten fácilmente. */
		/* background-size: contain; <-- Otra opción a probar si 100% auto no funciona del todo, pero puede dejar espacios vacíos si la proporción no coincide. */
		/* background-size: cover; <-- Si esta opción recorta tus personas, evita usarla. */

		min-height: 1518px; /* === AJUSTE CLAVE: Asegura que el div sea al menos tan alto como tu imagen === */
		/* Si tu contenido es más alto que 1518px, el div se expandirá, y la imagen se repetirá si no hay 'no-repeat'.
                    Si quieres que el fondo sea siempre la imagen completa, esta min-height es vital. */

		flex-grow: 1; /* Permite que este div ocupe el espacio restante si usas flexbox en el body */
		display: flex; /* Para centrar el container dentro de main_umbral */
		align-items: flex-start; /* Alinea el contenido (container) al inicio verticalmente dentro del main_umbral */
		justify-content: center; /* Centra horizontalmente el contenido (container) */
		padding-top: 30px; /* Padding vertical para el contenido dentro de main_umbral */
		padding-bottom: 30px;
	}

	.main_umbral .container {
		max-width: 1000px;
	}
}