header{
	position: relative;
	background:  rgba(255, 198, 1, 1);
} 

header nav.nav__bar{
	z-index: 50;
	width: 100%;
	font-family: anime-700;
	font-size: clamp(1.08rem, 0.55vw + 0.9rem, 1.36rem);
	background: var(--black-800);
	top: 0;
}

.list-menu{
	display: flex;
	position: relative;
	align-items: center;
	justify-content: center;
	min-height: 90px;
	width: 100%;
}

.list-menu .logo {
	flex: 1 1 0;
	min-width: 0;
	transform: rotate(2deg);
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.list-menu .spacing{
	flex: 1 1 0;
	min-width: 0;
}

.list-menu .logo img{
	display: block;
	margin: 0;
	max-width: 170px;
	width: 100%;
	height: auto;
} 

.lang-selector {
      position: fixed;
      top: 10px;
      right: 50px;
      display: inline-block;
      z-index: 100;
    }

    .lang-selector * {
      box-sizing: border-box;
    }

    .lang-button {
      background-color: #50362a;
      color: #e1d9b0;
      padding: 8px 12px;
      border: 1px solid #2d1212;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 6px;
    }


    .lang-button:focus {
      border: 1px solid #2d1212;
      outline: none;
    }

    .lang-button .arrow {
      font-size: 10px;
    }

    .lang-dropdown {
      list-style: none;
      margin: 0;
      padding: 6px 0;
      position: absolute;
      top: 100%;
      right: 0;
      background-color: white;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      min-width: 140px;
      z-index: 1000;
      display: none;
    }

    .lang-dropdown li {
      padding: 8px 12px;
      cursor: pointer;
      transition: background 0.2s;
    }

    .lang-dropdown li:hover {
      background-color: #f0f0f0;
    }

    .lang-dropdown li.active::after {
      content: '✔';
      float: right;
      font-size: 12px;
    }

    /* Mostrar el menú al hacer hover sobre todo el contenedor */
    .lang-selector:hover .lang-dropdown {
      display: block;
    }


nav .list-menu ul li{
	position: relative;

}

nav .list-menu ul li::before{
	content: '';
	position: absolute;
	bottom: 0px;
	left: 0;
	width: 0%;
	height: 2px;
	background: var(--yellow);
	transition: 0.3s all ease-out;
}

nav .list-menu ul li:hover::before{
	width: 100%;
}

nav .list-menu ul{
	flex: 0 1 auto;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 0 18px;
}

nav .list-menu ul li a{
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	margin: 0 2px;
	padding: 15px 16px 13px 0;
	color: var(--white);
	text-transform: uppercase;
	white-space: nowrap;
	line-height: 1;
	font-size: clamp(1.08rem, 0.55vw + 0.9rem, 1.36rem);
}

nav .list-menu ul li a.active1{
	color: var(--yellow);
}

nav .list-menu ul li a i{
	margin-right: 0.5rem !important;
	font-size: 1.05em;
}

nav .list-menu ul li .item-nav.active_text{
	color: #ff6918;
}

.menu-icon{
	flex-direction: column;
	cursor: pointer;
	position: relative;
	margin: 0;
	z-index: 1;

}

.menu-icon .line{
	width: 30px;
	height: 3px;
	margin-top: 5px;
	background:var(--black) ;
	transition: all 0.3s ease;
}


header .header-img{
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	overflow: hidden;
}

header .header-img .assets-header{
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* base */
header .header-img .assets-header-characters{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	height: auto;
	pointer-events: none;
	width: 100.9%;
	object-fit: contain;
	z-index: 2;
	animation: bgFloat 10s ease-in-out infinite;
}

/* fondo personajes */


/* CRO */
.cro{
	width: 100.9%;
	position: absolute;
	z-index: 3;
	top:0;
	left: 50%;
	transform: translateX(-50%);
	object-fit: contain;
	animation: floatLeft 6s ease-in-out infinite;
}

/* MARSHALL */
.marshall{
	width: 100.9%;
	position: absolute;
	z-index: 3;
	top:0;
	left: 50%;
	transform: translateX(-50%);
	animation: floatRight 7s ease-in-out infinite;
}

/* KANG ADELANTE */
.kang{
	width: 100.9%;
	position: absolute;
	z-index: 3;
	top:0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	animation: kangFloat 4s ease-in-out infinite;
}

.notice{
	position: absolute;
	z-index: 3;
	top:13%;
	left: 3%;;
	z-index: 5;
	width: 20.8%;



}


.btn-play{
	position: absolute;
	z-index: 3;
	top:37%;
	left: 6%;;
	z-index: 5;
	width: 15.15%;
	filter: brightness(100%);
	transform: scale(1.0);	
	transition: filter 500ms ease, transform 500ms ease;
}

.btn-play:hover{
	filter: brightness(110%);
	transform: scale(1.05);




}


/* =========================
   ANIMACIONES
========================= */


@keyframes bgFloat{

	0%{
		transform: translateX(-50%) translateY(0px) scale(1);
	}

	50%{
		transform: translateX(-50%) translateY(-4px) scale(1.005);
	}

	100%{
		transform: translateX(-50%) translateY(0px) scale(1);
	}
}

/* protagonista */
@keyframes kangFloat{

	0%{
		transform: translateX(-50%) translateY(0px) scale(1);
	}

	50%{
		transform: translateX(-50%) translateY(-12px) scale(1.02);
	}

	100%{
		transform: translateX(-50%) translateY(0px) scale(1);
	}
}


/* izquierda */
@keyframes floatLeft{

	0%{
		transform: translateX(-50%) translateY(0px);
	}

	50%{
		transform: translateX(-50%) translateY(-8px);
	}

	100%{
		transform: translateX(-50%) translateY(0px);
	}
}


/* derecha */
@keyframes floatRight{

	0%{
		transform: translateX(-50%) translateY(-5px);
	}

	50%{
		transform: translateX(-50%) translateY(5px);
	}

	100%{
		transform: translateX(-50%) translateY(-5px);
	}
}


header .info-minifighter{
	position: relative;
	width: 100%;
	margin: 0 auto;
	color: white;
	font-family: 'anime-600';
}

header .info-minifighter::before{
	content: '';
	position: absolute;
	top: -3px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: 8;
	background: var(--black);
/*	-webkit-mask-image: url('../img/ripped.webp');
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-position: center;

	mask-image: url('../img/ripped.webp');
	mask-repeat: no-repeat;

	mask-position: top;*/
}

header .info-minifighter .wraper-info{
	padding: 15px 30px;
	position: relative;
	z-index: 8;
	display: flex;
	justify-content: space-around;
	align-items: center;
	min-height: 140px;
	position: relative;
	flex-wrap: wrap;
	gap: 20px 0px;
}

header .info-minifighter .wraper-info .box-info{
	display: flex;
	padding: ;
	justify-content: center;
	align-items: center;
	padding-inline:10px;
	gap: 0 18px;
	flex: 1;
	min-width: 300px;
	position: relative; 
	i{
		font-size: 50px;
	}
}

header .info-minifighter .wraper-info .box-info .icon-info{
	flex: 0.5;
}

header .info-minifighter .wraper-info .box-info .data-info{
	flex: 3;
}

header .info-minifighter .wraper-info .line-separation{

	width: 2px;
	height: 80px;
	background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, #ff1a00 49%, rgba(255, 255, 255, 0) 100%);
	margin-inline: 10px;
}

header .info-minifighter .wraper-info .box-info :is(h3,p){
	margin: 0;
	padding: 0;

}

header .info-minifighter .wraper-info .box-info h3{
	color: #ff1a00;
	font-family: 'anime-700';
	text-transform: uppercase;
}

header .info-minifighter .wraper-info .box-info p{
	font-family: 'anime-600';
	font-size: 1rem;
}


/*--------------------------------------------------------------------*/
/* PORTADA PARALLAX
/*--------------------------------------------------------------------*/

@media screen and (max-width: 1662px){

nav .list-menu ul{
	gap: 0 15px;
}

nav .list-menu ul li a{
	padding-right: 10px;
}

}


@media screen and (max-width: 1600px){

nav .list-menu ul li a{
	padding: 14px 8px 12px 0;
}

}


@media screen and (max-width: 1300px){

nav .list-menu ul{flex:1;}

nav  .list-menu .logo {flex:0; display:none;} 

nav .list-menu .spacing{flex: 0;} 

nav .list-menu ul li a{padding: 14px 10px 12px 0;}

header .info-minifighter .wraper-info{display: block;}

header .info-minifighter::before{display: none;}


header .info-minifighter .wraper-info .line-separation{
	width: 100%;
	height: 1px;
	background:  linear-gradient(90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 238, 0, 0) 100%);
	margin-block: 15px;
}	
header .info-minifighter{background: var(--black)}



}


@media screen and (max-width: 1200px){
	main .news-wraper{display: block;}
	main .news-wraper .promo-new{display: none;}
}



@media screen and (max-width: 991px){
	nav .list-menu{display: none;}
	nav .content-parallax{margin-top: 50px;}
	.black-screen{
			position: fixed;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);
			z-index: 50;
	}

		/* JS sigue inyectando el texto; solo se oculta en móvil */
		main .header-title .home-header-aside{
			display: none !important;
		}

		header .menu__responsive{
			position: fixed;
			width: 100%;
			height:55px;
			padding: 0 20px;
			background: #000;
			top:0;
			left: 0;
			z-index: 80;
		}

		header .menu__responsive .title__menu h3{
			color: #fff;
			font-family: popins-semibold, sans-serif;
			font-size: 1.35rem;
			letter-spacing: 0.01em;
			text-transform: none;
			font-weight: normal;
		}

		header .menu__responsive .title__menu h3 span{
			color: #ff6918;
		}

		header .menu__responsive .menu-icon .line{
			background: #fff;
		}

		header nav.nav__bar{
			z-index: 60;
			width: 100%;
			padding: 0px;
			top: 55px;
			position: fixed;
			background: #1f1f1f;
		}

	header .header-img{padding-top: 50px;}
	header .header-img .assets-header-characters{top: 55px;}

	.cro,
	.marshall,
	.kang,
	.bg-characters,
	.notice{
		top: 55px;
	}

		nav .list-menu{
			background: #1f1f1f;
			min-height: auto;
			align-items: stretch;
			justify-content: flex-start;
			flex-direction: column;
		}

		nav .list-menu ul{
			display: block;
			width: 100%;
			min-height: 0;
			gap: 0;
			background: #1f1f1f;
		}

		nav .list-menu ul li{
			margin:0;
			text-align: left;
			border-top: 1px solid #4a4a4a;
			border-bottom: none;
			background: #1f1f1f;
		}

		nav .list-menu ul li:last-child{
			border-bottom: 1px solid #4a4a4a;
		}

		nav .list-menu ul li:hover{
			background: #2a2a2a;
		}

		nav .list-menu ul li::before{
			width: 0%;
			height: 0px;
			transition: none;
		}

		nav .list-menu ul li:hover::before{
			width: 0;
		}

		nav .list-menu ul li a{
			width: 100%;
			margin:0;
			padding: 15px 20px;
			font-size: 13px;
			font-family: popins-light, sans-serif;
			font-weight: normal;
			letter-spacing: 0.04em;
			box-sizing: border-box;
		}

		.menu-icon .line:nth-child(1).line1{
			transform: rotate(40deg) translate(-2px,0px);
			transform-origin: top left;
		}

		.menu-icon .line:nth-child(2).line2{
			transform: scale(0);
			transform-origin: top left;
		}

		.menu-icon .line:nth-child(3).line3{
			transform: rotate(-40deg) translate(-1px ,0px);
			transform-origin: bottom left;
		}


		.lang-selector {
	      right: 80px;
	 	}


	 	.lang-button {
	      background-color: var(--white);
	      color: #333;
	      border: 1px solid #ccc;
	    }

	  .lang-button:focus {
	       border: 1px solid #ccc;
	    }

		.notice{
			display: none;
		}


	.btn-play{
		display: none;

		}
  
	}


	@media screen and (max-width: 980px){
		main .news-wraper .section-news{display: block;}
		main .news-wraper .section-news .main-new .contain-img{min-height: 200px;}
		main .news-wraper .section-news .main-new .contain-img img{width: 100%;}
	}


	@media screen and (max-width: 500px){
		main .news-wraper .section-news .list-news .content-boxlist .box-prevImage{
			max-width: 110px;
			min-width: 110px;
			height: 110px;
		}

	main .news-wraper .section-news .list-news .content-boxlist .box-listNotice h3{
			font-family: 'popins-regular';
			font-size: 15px;
		} 

		main .news-wraper .section-news .list-news .content-boxlist .box-listNotice p{
			font-family: 'popins-regular';
			font-size: 13px;
		} 	

		main .news-wraper .section-news .main-new .viewmore-content{
			max-width: none 	;
			margin: 12px 12px 20px 12px !important;
			transform: none;
		}

		main .news-wraper .section-news .main-new .viewmore-content a{
			transform: none;
			font-size: 16px;
			font-family: 'popins-semibold';
		}

		main .news-wraper .section-news .list-news{margin-top:0px;}
		main .news-wraper .promo-new{display: block;}
		main .news-wraper .promo-new img{width: 100%;}

		header .info-minifighter .wraper-info .box-info h3{
			font-family: 'popins-semibold';
			font-size:1rem;
		}

		header .info-minifighter .wraper-info .box-info p{
			font-family: 'popins-light';
			font-size: 0.8rem;
		}

		main .news-wraper .header-title,
		main .ranking-wraper .header-title,
		main .characters-wraper .header-title{
			min-height: 52px;
			align-items: center;
			padding-block: 0;
		}

		main .news-wraper .header-title h3,
		main .ranking-wraper .header-title h3,
		main .ranking-wraper .content-ranking .header-title h3,
		main .characters-wraper .header-title h3{
			font-size: 1.8rem;
			line-height: 1;
			margin: 0;
		}

		main .news-wraper .header-title .home-header-aside,
		main .ranking-wraper .header-title .home-header-aside,
		main .characters-wraper .header-title .home-header-aside{
			display: none !important;
		}


}