@import url('https://fonts.googleapis.com/css2?family=Asap:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css');

:root {
	--rojo: #7d0b14;
	--blanco: #fff;
	--negro: #040405;
	--alternativo1: #4b55a4;
}

* {
	margin: 0;
	padding: 0;
}

img {
	pointer-events: none;
}

body {
	/*background-color: var(--rojo);
  color: var(--negro);*/
	font-family: 'Asap', sans-serif !important;
	position: relative;
	height: 100vh;
}

header {
	display: flex;
	justify-content: space-between;
	padding: 2rem;
}

header img {
	width: 20rem;
}

header a {
	background-color: var(--blanco);
	color: var(--negro);
	box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.5);
	border-radius: 50rem;
	text-decoration: none;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
	height: 2rem;
	padding: 0 1.2rem;

	transition: background-color 0.3s ease;
}

header a:hover {
	background-color: var(--rojo);
	color: var(--blanco);
}

header a i {
	color: var(--rojo);
}

header a:hover i {
	color: var(--blanco);
}

.container {
	width: 100vw;
	height: 100vh;
	text-align: center;
}

.container img {
	width: 20rem;
	margin-top: 2rem;
}

#preloader {
	width: 80%;
	margin: 0 auto;
}

.container-idiomas {
	color: var(--blanco);
}

.container-idiomas p {
	margin-bottom: 2rem;
}

.idiomas {
	/*display: flex;*/
	margin: 0 2rem;
	/* gap: 5rem;*/
}
/*
.videoplay {
  width: 100%;
  height: 50vh;
  position: relative;
}
*/
.ver-video {
	position: absolute;
	bottom: 2rem;
	right: 2rem;
}

video {
	width: 100%;
	height: 100%;
	background-color: #4e080d;
}

button {
	padding: 0.1rem 2rem;
	border-radius: 50rem;
	background-color: transparent;
	color: var(--blanco);
	border: 1px solid var(--blanco);
	transition: background-color 0.5s ease;
	cursor: pointer;
}

button:hover {
	background-color: var(--blanco);
	color: var(--rojo);
}
/*
footer {
  position: relative;
  bottom: 0;
  width: 100vw;
  background-color: var(--blanco);
  text-align: center;
}

footer img {
  width: 20rem;
  margin: 1rem;
}
*/
.accordion ul {
	display: table;
	table-layout: fixed;
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
}

.accordion ul li {
	display: inline-block;
	position: relative;
	width: 100%;
	min-height: 300px;
	background-repeat: no-repeat;
	background-position: center center;
	text-align: center;
	color: #fff;
}

.accordion ul li:nth-child(1) {
	background-image: url('images/menu principal/menu1.webp');
	background-size: cover;
}

.accordion ul li:nth-child(2) {
	background-image: url('images/menu principal/menu2.webp');
	background-size: cover;
}

.accordion ul li:nth-child(3) {
	background-image: url('images/menu principal/menu3.webp');

	background-size: cover;
}

.accordion ul li {
	transition: transform 0.3s ease;
}

.accordion ul li:hover {
	transform: scale(1.1);
}

.accordion ul li::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #7d0b14, transparent);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.accordion ul li div {
	transform: translateY(0px);
	transition: transform 500ms;
}

.accordion ul li a {
	text-decoration: none;
	color: #fff;
}

.accordion ul li h1 {
	text-overflow: clip;
	font-size: 2.5rem;
	line-height: 3rem;
}

.accordion ul li p {
	font-size: 16px;
	line-height: 24px;
	font-weight: 300;
	opacity: 1;
	transition: opacity 200ms;
	margin-left: 10vw;
	margin-right: 10vw;
}

.header-nuestro {
	background-color: var(--alternativo1);
	padding: 2rem;
	padding-bottom: 20rem;

	background-image: url(/assets/img/banners/1-personajes.png),
		url(/assets/img/banners/1-bg-fondo.png);
	background-repeat: no-repeat;
	background-size: contain, cover;
	background-position: center bottom, center;
}
.header-nuestro__texto {
	color: var(--blanco);
	margin: 0 auto;
	width: 40%;
	text-align: center;
}

.header-nuestro__texto::before {
	content: '';
	width: 50px;
	height: 50px;
	background-color: var(--rojo);
}

.header-nuestro__texto span:first-child {
	width: 2rem;
	height: 2rem;
	background-color: #fff;
}
.container-legado h5 {
	font-weight: 300;
}
.container-nuestro {
	margin: 0 auto;
	width: 80vw;
}

.timeline-item:nth-child(odd) .slider {
	order: 2;
}

.timeline-item:nth-child(odd) .contenido {
	order: 1;
}

.timeline-item:nth-child(even) .slider {
	order: 1;
}

.timeline-item:nth-child(even) .contenido {
	order: 2;
}

@media (max-width: 768px) {
	video {
		height: 78%;
	}
	.ver-video {
		bottom: 4rem;
		right: 5rem;
		left: 5rem;
	}
	body {
		overflow-y: scroll;
	}

	.footer_ {
		position: fixed;
	}

	.imgFooter {
		/* width: 60%; */
		width: 184px;
	}
}
@media screen and (min-width: 769px) {
	.accordion {
		height: 90vh;
		min-height: 600px;
		overflow: hidden;
	}

	.accordion ul {
		height: 100%;
	}

	.accordion ul li {
		display: table-cell;
		vertical-align: bottom;
		width: 33%;
		height: 100%;
		min-height: 600px;
		transition: all 500ms ease;

		position: relative;
	}

	.accordion ul li::before {
		content: '';
		position: absolute;
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 40%;
		background: linear-gradient(to top, #7d0b14, transparent);
		mix-blend-mode: multiply;
		pointer-events: none;
	}

	.accordion ul li:hover::before {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background: linear-gradient(to top, #7d0b14, #7d0b14);
		mix-blend-mode: multiply;
		content: '';
	}

	.accordion ul:hover li {
		width: 30%;
	}

	.accordion ul:hover li:hover {
		width: 40%;
	}

	.accordion ul:hover li:hover * {
		opacity: 1;
		transition: opacity 500ms, transform 500ms;
		transform: translateX(0);
	}

	.accordion ul li div {
		transform: translateY(120px);
		transition: transform 500ms;
	}

	.accordion ul li p {
		width: 30vw;
		height: 200px;
		opacity: 0;
		margin-left: auto;
		margin-right: auto;
	}
}