@import '../fonts/stylesheet.css';

.lenis.lenis-smooth {
	scroll-behavior: auto;
}
.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}
.lenis.lenis-scrolling iframe {
	pointer-events: none;
}
.lenis.lenis-stopped {
	overflow: hidden;
}

.no-scroll {
	overflow: hidden !important;
}

:root {
	--primary: #161616;
	--secondary: #f7f7f7;
	--alternate: #f0edba
}
/* Pagina page-id-15 */
.page-id-15 header {
	display: none;
}

.page-id-15 h1.has-text-align-center.wp-block-post-title {
	display: none;
}

.page-id-15 .wp-block-spacer {
	height: 0 !important;
}
/* Pagina page-id-9165 */
.page-id-9165 header {
	display: none;
}

.page-id-9165 h1.has-text-align-center.wp-block-post-title {
	display: none;
}

.page-id-9165 .wp-block-spacer {
	height: 0 !important;
}

body {
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	scroll-behavior: smooth !important;
}

body p {
	font-family: 'avarabold' !important;    
}

.wp-block-cover {
	/* position: relative; */
}

.ocultar-seccion {
	display: none;
}

/* Contenedor de las barras de progreso */
.progress-container {
	position: fixed;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	/* gap: 10px; */
	z-index: 40;
	padding: 10px;
	background-color: #00000094;
}  
.progress-bar {
	width: 30px;
	height: 8px;
	background-color: #ffffff;
	border-radius: 4px;
	transition: background-color 0.3s ease, transform 0.3s ease;
	/* cursor: pointer; */
	position: relative;
	opacity: 0.7;
	margin-bottom: 7px;
} 
.progress-bar.active {
	background-color: #0f6737;
	transform: scale(1.1);
	opacity: 1;
}
.section-bar {
	/* position: relative; */
}  
/* Animación de desvanecimiento */
.fade-out {
	animation: fadeOut 0.5s ease-out forwards;
}  
@keyframes fadeOut {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
/* Fin Contenedor de las barras de progreso */

.seccion {
	position: sticky !important;
	top: 0 !important;
	left: 0 !important;
	width: 100vw;
	height: 100vh;
	background-size: cover !important;
	background-position: center !important;
	z-index: 1;
	transition: z-index 0.3s !important;
}

.seccion_horizontal {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-size: cover;
	background-position: center;
	z-index: 1;
	transition: z-index 0.3s;
}

/* Clases Un poblado indígena llamado Darién */
.seccion-1 {
	width: 100vw;
	height: 550vh;
}
.upilld-1 img {
	width: 150vw !important;
	height: 200vh !important;
	aspect-ratio: auto !important;
}
.upilld-1 {
	width: 150vw;
	height: 200vh;
	background-repeat: no-repeat;
	overflow: hidden;
	z-index: 1;
}
.upilld-1 #upilld-1-img_background-2 {
	position: absolute;
	top: 76vh;
	left: 20vw;
}
.upilld-1 > #upilld-1-img_background-2 img {
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
}
.contenedor-textos-1 {
	position: absolute;
	top: 0;
	font-family: 'avarabold';    
	color: white;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	width: 100%;
	height: 100%;
	margin: 0 auto;    
}
.contenedor-textos-1 p {
	font-family: 'avarabold';    
	color: white;
}
.primera-seccion-upilld-1 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	width: 80%;
	top: 4%;
	position: relative;
}

.primera-seccion-upilld-2 {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 80%;
	bottom: 89%;
	position: relative;
}

.upilld-1 .text-left p {
	font-size: 80px;
}

.upilld-1 .text-right {
	top: 45vh;
	right: 3vw;
	width: 36vw;    
	padding: 2%;
	background-color: rgba(43, 87, 64, 0.76);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.upilld-1 .text-right p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	line-height: 1.6;
}
.upilld-1 .text-right .button-modal-p div p {
	background-color: #000;
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.upilld-1 .text-right .button-modal-p p {
	font-size: 14px !important;
	font-family: 'interregular' !important;
	color: #fff !important;
}

.upilld-1 .text-right .button-modal-p div p:hover {
	background-color: #333;
}

.upilld-1 .texto-1-seccion-1 {
	font-size: 24px;
	width: 32%;
	text-align: center;
	color: black;
}
.upilld-1 .texto-1-seccion-1 p {
	color: black !important;
	font-size: 26px;
}
.upilld-1 .texto-2-seccion-1 p {
	font-size: 50px;
	color: black;
}
.upilld-1 .texto-3-seccion-1 {
	width: 44%;
	text-align: center;
	position: absolute;
}
.upilld-1 .texto-3-seccion-1 p {
	font-size: 26px;
	color: black;
}
.upilld-1 .primer-texto-1, .texto-3-seccion-1 {
	opacity: 0;
}

/* Primera letra grande */
.upilld-1 .dropcap::first-letter {
	font-size: 3.1em;
	float: left;
	margin-right: 1px;
	line-height: 0.1;
	font-family: 'avarabold';
}
/* Fin Clases Un poblado indígena llamado Darién */

/* Clases La llegada del Darién */
.seccion-2-horizontal {
	z-index: 2;
	width: 120vw;
	height: 380vh;
}

.lldd-2-horizontal {
	width: 120vw;
	height: 130vh;
	top: 0;
	font-family: 'avarabold';    
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: flex-start !important;
	background-repeat: no-repeat;    
	padding: 0 0vw;
	min-height: 0 !important;
	margin: 0 auto;
}

.lldd-2-horizontal > #lldd-2-img_background img {
	width: 140vw !important;
    height: 130vh !important;
    max-width: none !important; /* Evita restricciones en MacBook */
    aspect-ratio: auto !important;
    object-fit: cover;
}

.lldd-2-horizontal .text-left-2 {
	right: 39%;
	position: absolute;
}
.lldd-2-horizontal .text-left-2 p {
	font-family: 'avarabold_italic' !important;
	font-size: 70px;
	color: black;
}
.lldd-2-horizontal .text-right-2 {
	width: 31vw;
	padding: 2%;
	background-color: rgba(43, 87, 64, 0.76);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.lldd-2-horizontal .text-right-2 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	line-height: 1.6;
	color: white;
}
.lldd-2-horizontal .text-right-2 .button-modal-p div p {
	background-color: #000;
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin-top: auto;
}

.lldd-2-horizontal .text-right-2 .button-modal-p p {
	font-size: 14px !important;
	font-family: 'interregular' !important;
	color: #fff !important;
}

.lldd-2-horizontal .text-right-2 .button-modal-p div p:hover {
	background-color: #333;
}

.contenedor-textos-lldd-2 {
	position: absolute;
	top: 0;
	font-family: 'avarabold';    
	color: white;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}

.segunda-seccion-lldd-2 {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: flex-end !important;
	align-content: flex-end;
	width: 90%;
	top: 10%;
	position: absolute;
	bottom: 9%;
	gap: 10em;
}

/* Fin Clases La llegada del Darién */

/* Clases El encuentro con el mar del sur */
.seccion-3 {
	height: 250vh;
}

.eecemds-3 img {
	width: 100vw !important;
	height: 142vh !important;
	aspect-ratio: auto !important;
	object-fit: cover;
}

.eecemds-3 {
	width: 100vw;
	height: 168vh;
	overflow: hidden;
	background-repeat: no-repeat;
	z-index: 3;
	padding-top: 20%;
	position: relative;
	background-color: #fff7e1;
}

.contenedor-textos-3 {
	position: absolute;
	top: 4%;
	font-family: 'avarabold';
	color: white;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	width: 100%;
	height: 94%;
	margin: 0 auto;
}

.tercera-seccion-eecemds-3 {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	align-content: flex-start !important;
	width: 80%;
	height: 95%;
	gap: 5em;
}

.eecemds-3 .text-top-3 {
	top: 5%;
	left: 5%;
	opacity: 0;
	transition: transform 0.3s ease-out;
}
.eecemds-3 .text-top-3 p {
	font-family: 'avarabold_italic' !important;
	font-size: 48px;
	color: black;
}
.eecemds-3 .text-top-3.active {
	opacity: 1;
	transform: translateY(1000px); /* Se mueve hacia abajo */
}

.eecemds-3 .text-center-3 {
	position: relative;
	bottom: 4%;
	width: 32vw;
	background-color: rgba(43, 87, 64, 0.76);
	padding: 2%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.eecemds-3 .text-center-3 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	line-height: 1.6;
	color: white;
}
.eecemds-3 .text-center-3 .button-modal-p div p {
	background-color: #000;
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin-top: auto;
}
.eecemds-3 .text-center-3 .button-modal-p p {
	font-family: 'interregular' !important;
	font-size: 14px;
	color: #fff;
}
.eecemds-3 .text-center-3 .button-modal-p div p:hover {
	background-color: #333;
}

/* Fin Clases El encuentro con el mar del sur */

/* Clases Un proyecto utópico_ la llegada de la armada de Pedrarias Responsive */
.seccion-4-responsive {
	z-index: 4;
	height: 100vh;
}
.seccion-4-responsive {
	display: none;
}
.upulldladp-seccion-4 {
	display: block;
}

.upu-4-resp img {
	width: 100vw !important;
	height: 100vh !important;
	aspect-ratio: auto !important;
}

.upu-4-resp {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: row;
	justify-content: center;
	overflow: hidden;
	background-repeat: no-repeat;
}
.contenedor-textos-4-resp {
	position: absolute;
	top: 0%;
	left: 0;
	font-family: 'avarabold';
	color: white;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
	background-color: rgba(43, 87, 64, 0.76);
}
.cuarta-seccion-upu-4-resp {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-content: flex-start !important;
	width: 90%;
	height: 100vh;
	gap: 2em;
	position: relative;
}

.upu-4-resp .text-title-resp p {
	font-family: 'avarabold_italic' !important;
	font-size: 50px;
}
.upu-4-resp .text-left-4-resp {
	width: 90vw;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	position: relative;
}
.upu-4-resp .text-left-4-resp p {
	font-family: 'interregular' !important;
	font-size: 17px;
	line-height: 1.3;
	color: white;
}
.upu-4-resp .text-left-4-resp .button-modal-p {
	font-family: 'interregular' !important;
	background-color: #000;
	color: #fff;
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease;
	font-size: 14px;
}
.upu-4-resp .text-left-4-resp .button-modal-p:hover {
	background-color: #333;
}

/* Clases Un proyecto utópico_ la llegada de la armada de Pedrarias */
.upulldladp-seccion-4 {
	z-index: 4;
	position: relative;
	height: 380vh;
}
.upulldladp-4 {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-repeat: no-repeat;
}
.upulldladp-4 > #upulldladp-4-img_background-1 img {
	width: 100vw !important;
	height: 100vh !important;
	aspect-ratio: auto !important;
	min-width: 100vw;
}
.upulldladp-4 #upulldladp-4-img_background-2 {
	position: relative;
	bottom: 181vh;
}
.upulldladp-4 > #upulldladp-4-img_background-2 img {
	width: 100vw !important;
	height: 100vh !important;
	aspect-ratio: auto !important;
}
.upulldladp-4 #upulldladp-4-img_background-3 {
	position: relative;
	bottom: 245vh;
	text-align: right;
}
.upulldladp-4 > #upulldladp-4-img_background-3 img {
	width: 40vw !important;
	height: 76vh !important;
	aspect-ratio: auto !important;
}
.upulldladp-4 #upulldladp-4-img_background-4 {
	position: relative;
	bottom: 91vh;
}
.upulldladp-4 > #upulldladp-4-img_background-4 img {
	width: 67vw !important;
	height: 81vh !important;
	aspect-ratio: auto !important;
}
.contenedor-textos-upulldladp-4 {
	position: absolute;
	top: 0%;
	font-family: 'avarabold';
	color: white;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
}
.cuarta-seccion-upulldladp-4 {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	width: 34vw;
	height: 100vh;
	position: relative;
	background-color: rgba(43, 87, 64, 0.76);
}
.upulldladp-4 .title-upulldladp-4 {
	width: 40vw;
	padding: 0% 17% 0% 17%;
}
.upulldladp-4 .title-upulldladp-4 p {
	font-family: 'avarabold_italic' !important;
	font-size: 60px;
	color: #fff;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0;
}
.upulldladp-4 .text-upulldladp-4 {
	width: 32vw;
	
	padding: 0% 17% 0% 17%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.upulldladp-4 .text-upulldladp-4 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	line-height: 1.6;
	color: #fff;
}
.upulldladp-4 .text-upulldladp-4 .button-modal-p div p {
	background-color: #000;
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin-top: auto;
}
.upulldladp-4 .text-upulldladp-4 .button-modal-p p {
	font-family: 'interregular' !important;
	font-size: 14px;
	color: #fff;
}
.upulldladp-4 .text-upulldladp-4 .button-modal-p div p:hover {
	background-color: #333;
}

/* Clases Vitruvio en los tropicos */
.velt-5 img {
	width: 100vw !important;
	height: 100vh !important;
	aspect-ratio: auto !important;
}

.velt-5-title-4 {
	display: none !important;
	/* position: absolute !important; */
}

.velt-5 {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: row;
	justify-content: center;
	/* position: relative; */
	overflow: hidden;
	background-repeat: no-repeat;
	clip-path: circle(13% at 50% 28%);
}

.contenedor-textos-5 {
	position: absolute;
	top: 0%;
	font-family: 'avarabold';    
	color: white;
	background-color: #F7E9C2;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	align-content: flex-start;
	width: 100%;
	height: 85vh;
	margin: 0 auto;    
}

.quinta-seccion-velt-5 {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
	width: 80%;
	height: 85vh;
	gap: 0em;
}

.contenedor-textos-5-C {
	position: absolute;
	top: 0%;
	font-family: 'avarabold';
	color: white;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: stretch;
	align-content: flex-end;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
}

.quinta-seccion-velt-5-C {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: flex-end !important;
	align-items: stretch !important;
	align-content: flex-end !important;
	width: 90%;
	height: 100vh;
	margin: 0 auto;
	position: relative;
}

.velt-5-title-1 p {
	font-family: 'avarabold_italic' !important;
	font-size: 60px;
	z-index: 9;
	color: #22704A;
	justify-content: center;
	transform: translateX(-29%);
	margin-top: 0;
	margin-bottom: 0;
}
.velt-5-title-2 p {
	font-family: 'avarabold_italic' !important;
	font-size: 60px;
	z-index: 9;
	color: #22704A;
	justify-content: center;
	margin-top: 0;
	margin-bottom: 0;
}
.velt-5-title-3 p {
	font-family: 'avarabold_italic' !important;
	font-size: 60px;
	z-index: 9;
	color: #22704A;
	justify-content: center;
	transform: translateX(29%);
	margin-top: 0;
	margin-bottom: 0;
}

.velt-5-2 img {
	width: 100vw !important;
	height: 100vh !important;
	aspect-ratio: auto !important;
}

.velt-5-2 {
	width: 100vw;
	height: 100vh;
	/* display: flex; */
	flex-direction: row;
	justify-content: flex-end;
	/* position: relative; */
	overflow: hidden;
	background-repeat: no-repeat;
	color: white;
}

.velt-5-2 .text-left-5 {
	top: 0%;
	width: 33vw;
	right: 0%;
	background-color: rgba(43, 87, 64, 0.76);
	padding: 2% 2% 2% 2%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	height: 100vh;
	justify-content: center;
}
.velt-5-2 .text-left-5 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	line-height: 1.6;
	color: white;
}
.velt-5-2 .text-left-5 .button-modal-p div p {
	background-color: #000;
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.velt-5-2 .text-left-5 .button-modal-p p {
	font-size: 14px;
	font-family: 'interregular' !important;
	color: #fff;
}
.velt-5-2 .text-left-5 .button-modal-p div p:hover {
	background-color: #333;
}

.seccion-5-a {
	z-index: 9;
	height: 85vh;
}
.seccion-5-b {
	z-index: 10;
	height: 140vh;
}
.seccion-5-c {
	z-index: 10;
	height: 200vh;
	margin-top: -7vh;
}

/* Clases  La esclavitud y el saqueo */
.seccion-6 {
	position: relative;
	z-index: 12;
	height: 360vh;
	width: 100vw;
}
.leyes-6 {
	width: 114vw;
	height: 182vh;
	overflow: hidden;
	background-repeat: no-repeat;
	padding-top: 49vh;
	background-color: #fcecc4;
}
.leyes-6 img {
	width: 114vw !important;
	height: 133vh !important;
	aspect-ratio: auto !important;
}
.contenedor-textos-6 {
	position: absolute;
	top: 0%;
	font-family: 'avarabold';
	color: white;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
}
.sexta-seccion-leyes-6 {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	width: 32vw;
	height: 100vh;
	position: relative;
	background-color: transparent;
}
.leyes-6 .text-title-6 {
	width: 32vw;
	padding: 7% 7% 0% 7%;
	bottom: 12%;
    position: relative;
}
.leyes-6 .text-title-6 p {
	font-family: 'avarabold_italic' !important;
	font-size: 60px;
	color: #000;
	font-weight: 600;
	margin-top: 0;
	margin-bottom: 0;
}
.leyes-6 .text-left-6 {
	width: 32vw;
	padding: 0% 7% 7% 7%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	bottom: 12%;
}
.leyes-6 .text-left-6 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	line-height: 1.3;
	color: #000;
}
.leyes-6 .text-left-6 .button-modal-p div p {
	background-color: #000;
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease;
	margin-top: auto;
}
.leyes-6 .text-left-6 .button-modal-p p {
	font-family: 'interregular' !important;
	font-size: 14px;
	color: #fff;
}
.leyes-6 .text-left-6 .button-modal-p div p:hover {
	background-color: #333;
}

/* fondo para la seccion 7 */
.fondo-6 {
	width: 100vw;
	height: 100vh;
	background: #F3E5B2;
	z-index: 16;
	position: absolute;
	top: 0;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none; 
}

/* Clases El final de la ciudad */
.seccion-7-responsive {
	display: none;
}
.efdlc-seccion-7 {
	display: block;
}
.efdlc-7-resp img {
	width: 100vw !important;
	height: 100vh !important;
	aspect-ratio: auto !important;
}
.efdlc-seccion-7 {
	z-index: 14;
	position: relative;
	height: 480vh;
	background-color: #F3E5B2;
}
.efdlc-7 {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-repeat: no-repeat;
}
.efdlc-7 > #efdlc-7-img_background-1 img {
	width: 100vw !important;
	height: 38vh !important;
	aspect-ratio: auto !important;
	min-width: 100vw;
}
.efdlc-7 #efdlc-7-img_background-2 {
	position: relative;
	bottom: 26vh;
	text-align: left;
}
.efdlc-7 > #efdlc-7-img_background-2 img {
	width: 77vw !important;
	height: 56vh !important;
	aspect-ratio: auto !important;
}
.efdlc-7 #efdlc-7-img_background-3 {
	position: relative;
	bottom: 83vh;
	text-align: right;
}
.efdlc-7 > #efdlc-7-img_background-3 img {
	width: 67vw !important;
	height: 96vh !important;
	aspect-ratio: auto !important;
}
.efdlc-7 #efdlc-7-img_background-4 {
	position: relative;
	bottom: 168vh;
}
.efdlc-7 > #efdlc-7-img_background-4 img {
	width: 100vw !important;
	height: 100vh !important;
	aspect-ratio: auto !important;
}
.contenedor-textos-7 {
	position: absolute;
	top: 0%;
	font-family: 'avarabold';
	color: black;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
}
.septima-seccion-efdlc-7 {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: space-around !important;
	align-items: flex-start !important;
	align-content: flex-start !important;
	width: 60%;
	gap: 2em;
	position: relative;
	margin: 0 auto;
	top: 25%;
}
.efdlc-7 .text-title-7 {
	position: relative;
	opacity: 1;
	transition: opacity 1.5s ease;
}
.efdlc-7 .text-title-7 p {
	font-family: 'avarabold_italic' !important;
	font-size: 50px;
	color: #000;
	margin-top: 0;
	margin-bottom: 0;
}
.efdlc-7 .text-left-7 {
	width: 30vw;
	line-height: 1.3;
	position: relative;
	opacity: 1;
	transition: opacity 1.5s ease;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.efdlc-7 .text-left-7 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	color: #000;
	margin-top: 0;
}
.efdlc-7 .text-left-7 .button-modal-p div p {
	background-color: #000;
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.efdlc-7 .text-left-7 .button-modal-p p {
	font-size: 14px;
	font-family: 'interregular' !important;
	color: #fff;
}
.efdlc-7 .text-left-7 .button-modal-p div p:hover {
	background-color: #333;
}

/* Clases Los primeros pobladores afro */
.seccion-8 {
	z-index: 18;
	position: relative;
	height: 360vh;
	width: 100vw;
}

.lppa-8 {
	width: 100vw;
	height: 180vh;
	overflow: hidden;
	background-repeat: no-repeat;
}

.lppa-8 > #lppa-8-img_background img {
	width: 100vw !important;
	height: 180vh !important;
	aspect-ratio: auto !important;
	transition: transform 0.5s ease;
}

.contenedor-textos-8 {
	position: absolute;
	top: 4%;
	font-family: 'avarabold';    
	color: white;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	width: 100%;
	height: 90%;
	margin: 0 auto;    
}

.octava-seccion-lppa-8 {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: space-between !important;
	align-items: flex-start !important;
	align-content: flex-start !important;
	width: 90%;
}

.lppa-8 .text-left-8 {
	width: 32vw;
	background-color: rgba(43, 87, 64, 0.76);
	padding: 2%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	position: relative;
}
.lppa-8 .text-left-8 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	line-height: 1.3;
	color: #fff;
}
.lppa-8 .text-title-8 {
	top: 5%;
	left: 5%;
}
.lppa-8 .text-title-8 p {
	font-family: 'avarabold_italic' !important;
	font-size: 48px;
	color: #fff;
}
.lppa-8 .text-left-8 .button-modal-p div p {
	background-color: #000;
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.lppa-8 .text-left-8 .button-modal-p p {
	font-size: 14px;
	font-family: 'interregular' !important;
	color: #fff;
}
.lppa-8 .text-left-8 .button-modal-p div p:hover {
	background-color: #333;
}

/* Clases Desempolvando la ciudad */
.seccion-9 {
	z-index: 19;
	height: 200vh;
}

.dlc-9 {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-repeat: no-repeat;
}

.dlc-9 > #dlc-9-img_background img {
	width: 100vw !important;
	height: 100vh !important;
	aspect-ratio: auto !important;
	object-fit: cover;
	object-position: 0% 71%;
}

.contenedor-textos-9 {
	position: absolute;
	top: 0%;
	font-family: 'avarabold';
	color: white;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: flex-start;
	width: 100%;
	height: 100vh;
	margin: 0 auto;
}

.novena-seccion-dlc-9 {
	display: flex !important;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	width: 32vw;
	height: 100vh;
	position: relative;
	background-color: rgba(43, 87, 64, 0.76);
}

.dlc-9 .text-left-9 {
	width: 32vw;
	padding: 7% 7% 0% 7%;
}
.dlc-9 .text-left-9 p {
	font-family: 'avarabold_italic' !important;
	font-size: 43px;
	color: white;
	margin-top: 0;
	margin-bottom: 0;
}
.dlc-9 .text-right-9 {
	width: 32vw;
	padding: 0% 7% 7% 7%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.dlc-9 .text-right-9 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	line-height: 1.6;
	color: white;
	margin-bottom: 0;
}
.dlc-9 .text-right-9 .button-modal-p div p {
	background-color: #000;
	padding: 8px 16px;
	border-radius: 16px;
	text-align: center;
	display: inline-block;
	cursor: pointer;
	transition: background-color 0.3s ease;
}
.dlc-9 .text-right-9 .button-modal-p p {
	font-size: 14px;
	font-family: 'interregular' !important;
	color: #fff;
}
.dlc-9 .text-right-9 .button-modal-p div p:hover {
	background-color: #333;
}

/* Clases El plano imaginario de Santa maria */
.seccion-10 {
	z-index: 19
}

/* SECCION HORIZONTAL 1 */
.epidsm-10 {
	width: auto;
	height: auto;
	display: flex;
	flex-direction: row;
	justify-content: flex-start !important;
	background-repeat: no-repeat;
	padding: 0 0vw;
	min-height: 0 !important;
}

.epidsm-10 img {
	width: auto !important;
	height: auto !important;
	aspect-ratio: auto !important;
	max-width: 100vw !important;
}

.contenedor-textos-10 {
	position: absolute;
	font-family: 'avarabold';
	color: white;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	left: 0;
}

.decima-seccion-epidsm-10 {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: space-around !important;
	align-items: flex-start !important;
	align-content: flex-start !important;
	width: 100%;
	gap: 4em;
	top: 32%;
	position: relative;
}

.epidsm-10 .text-left-10 {
	top: 20%;
	width: 35vw;
	background-color: #e8d4a7bf;
	padding: 2% 2% 2% 2%;
	position: relative;
}
.epidsm-10 .text-left-10 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	color: black;
	margin: 0;
}
.epidsm-10 .text-right-10 {
	top: 20%;
	width: 35vw;
	padding: 1% 3% 1% 3%;
	background-color: rgb(49 143 114 / 83%);
	position: relative;
}
.epidsm-10 .text-right-10 p {
	font-family: 'avarabold_italic' !important;
	font-size: 40px;
	color: white;
	margin: 0;
}
/* SECCION HORIZONTAL 2 */
.epidsm-10-2 {
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;    
	padding: 0 0vw;
	position: relative;
	background-color: #e5d3a5;
}

.contenedor-textos-10-2 {
	position: absolute;
	font-family: 'avarabold';
	color: black;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
	width: 100%;
	height: 70%;
	margin: 0 auto;
	left: 0;
}

.decima-seccion-epidsm-10-2 {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
	width: 100%;
	gap: 4em;
}

.epidsm-10-2 .text-center-10-2 {
	width: 22vw;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	position: relative;
}
.epidsm-10-2 .text-center-10-2 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	line-height: 1.3;
	margin: 0;
}
.epidsm-10-2 .text-title-10-2 {
	position: relative;
}
.epidsm-10-2 .text-title-10-2 p {
	font-family: 'avarabold_italic' !important;
	font-size: 27px;
	color: #000;
	margin: 0;
}
/* SECCION HORIZONTAL 3 */
.epidsm-10-3-1 {
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	padding: 0 0vw;
	position: relative;
	background-color: #fff;
}

.contenedor-textos-10-3-1 {
	position: absolute;
	font-family: 'avarabold';
	color: black;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
	width: 100%;
	height: 90%;
	margin: 0 auto;
	left: 0;
}

.decima-seccion-epidsm-10-3-1 {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
	width: 90%;
	gap: 4em;
}

.epidsm-10-3-1 .text-center-10-3 {
	width: 22vw;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	position: relative;
}
.epidsm-10-3-1 .text-center-10-3 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	margin: 0;
	color: #000;
}
.epidsm-10-3-1 .text-title-10-3 {
	position: relative;
	width: 22vw;
}
.epidsm-10-3-1 .text-title-10-3 p {
	font-family: 'avarabold_italic' !important;
	font-size: 27px;
	margin: 0;
	color: #000;
}
/* SECCION HORIZONTAL 4 */
.epidsm-10-3 {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	background-repeat: no-repeat;    
	padding: 0 0vw;
	position: relative;
}

.epidsm-10-3 > #epidsm-10-3-img_background img {
	width: 80vw !important;
	height: 100vh !important;
	aspect-ratio: auto !important;
	max-width: 80vw !important;
}

/* SECCION HORIZONTAL 5 */

.epidsm-10-3-3 {
	width: 100vw;
	height: 100vh;
	background-repeat: no-repeat;
	padding: 0 0vw;
	position: relative;
	background-color: #fff;
}

.contenedor-textos-10-3-3 {
	position: absolute;
	font-family: 'avarabold';
	color: black;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	align-content: stretch;
	width: 100%;
	height: 90%;
	margin: 0 auto;
	left: 0;
}

.decima-seccion-epidsm-10-3-3 {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
	width: 90%;
	gap: 4em;
}

.epidsm-10-3-3 .text-title-10-3-3 {
	position: relative;
}
.epidsm-10-3-3 .text-title-10-3-3 p {
	font-family: 'avarabold_italic' !important;
	font-size: 27px;
	color: #000;
}
.epidsm-10-3-3 .text-center-10-3-3 {
	width: 22vw;
	position: relative;
}
.epidsm-10-3-3 .text-center-10-3-3 p {
	font-family: 'interregular' !important;
	font-size: 17px;
	text-align: left;
	line-height: 1.3;
	margin: 0;
	color: #000;
}
/* SECCION HORIZONTAL 6 */
.epidsm-10-4 {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	background-repeat: no-repeat;    
	padding: 0 0vw;
	position: relative;
}

.epidsm-10-4 > #epidsm-10-4-img_background img {
	width: 80vw !important;
	height: 100vh !important;
	aspect-ratio: auto !important;
	max-width: 80vw !important;
}

/* CLASES CAROUSEL */
.carousel-container, .seccion-A-resp {
	display: none !important;
}
.section_to-pin {
	display: flex !important;
}
.seccion-A-resp {
	height: 173vh !important;
	padding-top: 152%;
}
.contenedor-textos-10-A {
	position: absolute;
	font-family: 'avarabold';
	color: black;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100vw;
	height: 100vh;
	margin: 0 auto;
	left: 0;
}
.decima-seccion-epidsm-10-A {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
	width: 90vw;
	height: 50vh;
	gap: 2em;
}
.contenedor-textos-10-B-resp {
	position: absolute;
	font-family: 'avarabold';
	color: black;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100vw;
	height: 100vh;
	margin: 0 auto;
	left: 0;
}
.decima-seccion-epidsm-10-B-resp {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
	width: 90vw;
	height: 50vh;
	gap: 2em;
}
.contenedor-textos-10-C-resp {
	position: absolute;
	font-family: 'avarabold';
	color: black;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100vw;
	height: 100vh;
	margin: 0 auto !important;
	left: 0;
}
.decima-seccion-epidsm-10-C-resp {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
	width: 90vw;
	gap: 2em;
}
.contenedor-textos-10-E-resp {
	position: absolute;
	font-family: 'avarabold';
	color: black;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	align-content: center;
	width: 100vw;
	height: 100vh;
	margin: 0 auto !important;
	left: 0;
}
.decima-seccion-epidsm-10-E-resp {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	align-content: center !important;
	width: 90vw;
	gap: 2em;
}
.epidsm-10-A-resp {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: row;
	justify-content: flex-start !important;
	flex-wrap: wrap !important;
	background-repeat: no-repeat;    
	padding: 0 0vw;
	background-color: #E3D0A5;
}
.epidsm-10-A-resp .text-center-10-2 {
	font-family: 'interregular' !important;
	font-size: 17px;
	top: 16%;
	width: 22vw;
	left: 8%;
	text-align: justify;
	line-height: 1.3;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding-bottom: 80%;
	position: relative;
}

.epidsm-10-A-resp .text-title-10-2 {
	font-family: 'avarabold_italic' !important;
	font-size: 27px;
	left: 8%;
	top: 21%;
	position: relative;
}
.imagenes-seccion-10 img {
	width: 100vw !important;
	height: 100vh !important;
	aspect-ratio: auto !important;
}

.carousel-container .text-left-10 {
	font-family: 'interregular' !important;
	font-size: 17px;
	color: black;
	top: 5%;
	left: 1%;
	width: 35vw;
	background-color: #e8d4a7bf;
	padding: 2% 2% 2% 2%;
	position: absolute;
}
.carousel-container .text-right-10 {
	font-family: 'avarabold_italic' !important;
	font-size: 40px;
	top: 7%;
	right: 25vw;
	padding: 1% 3% 1% 3%;
	background-color: rgb(49 143 114 / 83%);
	position: absolute;
}

/*--------------------------------------------------------*/

.section {
	height: 100vh;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.section_to-pin {
	height: 100vh;
	display: flex;
	position: relative;
}
.section_to-pin-2 {
	height: 130vh !important;
	display: flex;
	position: relative;
}
.content_wrapper {
	min-width: 35%;
	padding: 0 5vw;
}

/* BOTONES IMAGENES */
.button-container {
	position: absolute;
	width: 38vw;
	height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 18vw;
	top: 26vh;
}
.diamond-button {
	position: absolute;
	width: 45px;
    height: 45px;
	background-color: rgb(0, 0, 0);
	border: none;
	color: #ffffff;
	font-size: 45px;
	font-weight: 300;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}
.epidsm-10-3 .diamond-button.top {
	top: 49%;
	right: 40%;
}
.epidsm-10-3 .diamond-button.left {
	left: 17%;
	top: 78%;
}
.epidsm-10-3 .diamond-button.right {
	right: 0;
	top: 63%;
}
.epidsm-10-3 .diamond-button.bottom {
	bottom: 0;
	right: 37%;
}

.button-container-10-4 {
	position: absolute;
	width: 38vw;
	height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
	right: 18vw;
	top: 26vh;
}
.diamond-button-10-4 {
	position: absolute;
	width: 60px;
	height: 60px;
	background-color: rgb(0, 0, 0);
	border: none;
	color: #ffffff;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}
.epidsm-10-4 .diamond-button.left {
	left: 17%;
	bottom: -6%;
}
.epidsm-10-4 .diamond-button.right {
	right: 9%;
	top: 35%;
}
.epidsm-10-4 .diamond-button.bottom {
	bottom: 0;
	left: 37%;
}