/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

.logo-header-planetar {
	position: absolute;
    z-index: 2;
    /* bottom: 220px; */
    /* left: 50%; */
    /* background: red; */
    /* width: 200px; */
    /* height: 200px; */
    
    /* font-size: 2rem; */
    text-align: center;
    color: #222;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.logo-header-planetar img{
	max-width: 300px;
}
#img-qs img{
	max-width: 70%;
	border-radius: 3px;
}



@media (max-width: 767.98px) {
	.story-box-info{
		padding: 30px;
	}
	#gotoMundial img{
		max-height: 60px;
		width: auto;
	}
	#gotoMundial > div{
		font-size: 1.2em !important;
	}
}

#gotoMundial{
	display: block;
	position: fixed;
	bottom: 1em;
	left: 1em;
	z-index: 10000;

	font-weight:600;    
    /* font-size: 1.2em; */
    text-align: center;	
	letter-spacing: 1px;

}

#gotoMundial > div{
	background: rgba(255, 255, 255, 0.9);
    display: inline-block;
    padding: 10px;
    border: 5px #D69A43 solid;
    font-size: 1.6em;
    font-weight: 800;
    line-height: 34px;
    /* max-width: 254px; */
    animation: blink 1s infinite;
    border-radius: 50%;
    /* padding: 1em; */
    text-align: center;
    padding: 1em 2em;
}
#gotoMundial > span{
	display: block;
	margin-bottom: 10px;
    animation-name: cambioColorTexto; /* Nombre de la animación */
    animation-duration: 1s; /* Duración de cada ciclo: 2 segundos */
    animation-timing-function: linear;
    animation-iteration-count: infinite; /* Repetición infinita */	
}
@keyframes blink {
	0% { opacity: 1.0; }   /* Opacidad completa (visible) */
    50% { opacity: 0.7; }  /* Opacidad parcial (transparente pero visible) */
    100% { opacity: 1.0; } /* Opacidad completa de nuevo */
}


@keyframes cambioColorTexto {
    0% { color: #ffffff; }   /* Inicio: Blanco (#ffffff) */
    50% { color: #000000; }  /* Mitad: Negro (#000000) */
    100% { color: #ffffff; } /* Fin: Blanco de nuevo */
}