*{
	font-family: jolly Lodger;
}

.loguito{
	width: 100px;
	height: auto;
	left: 35px;.
	filter: hue-rotate(265.1deg);
}

h1{
	font-size: calc(1.78rem - 5%);
	color:#7de19a;
}

#navbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 50px 10px;
	background: rgb(0, 0, 0);
	opacity: 0.9;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	z-index: 1000;
	transition: all 0.4s ease, padding 0.4s ease, opacity 0.4s ease;/*
	text-decoration: none;
	text-decoration-style: none;
	gap: 10px;*/
}

	#navbar.colapsada{
		padding: 5px 10px;
		opacity: 1;
		background: #3a3a3a;
	}

	#navbar-right{
		font-size: 18px;
	}

		#navbar-right.colapse{
			display: flex;
			font-size: 8px;
			justify-content: center;
		}

	#navbar a{
		float: left;
		text-align: center;
		padding: 12px;
		text-decoration: none;
		border-radius: 4px;
		color: #7de19a;
		align-items: center;
		transition: all 0.5s ease;
	}

	#navbar a:hover{
		font-size: 20px
	}

	#navbar a.active{
		background-color: #7de19a;
		color: white;
	}

.row{
	height: auto;
}

.bannersA1{
	padding: 15px;
	background-color: beige;
	min-height: auto;
}

		/*-----Actividad 2------*/

.cosa{
	font-size: calc(1.78rem - 20%)
}

#cuadro-2{
	height: 385px;
	width: 100vw;
	overflow: auto;
	overflow-y: hidden;
}

#content-2{
	position: relative;
	height: 385px;
	width: 4000px;
	background-image: url(../imagenes/criaturas.png);
	background-repeat: no-repeat;
	background-size: contain;
	align-items: center;
}


#infoA2{
	position: sticky;
	background-color: #cd853f78;
	height: 300px;
	width: 300px;
	left: 400px;
	z-index: 1;
	border-radius: 15px;
	box-shadow: 
		0 0 4px white,
		0 0 4px white,
		0 0 8px peru,
		0 0 8px peru,
		0 0 8px peru,
		0 0 8px peru,
		0 0 12px black,
		0 0 12px black,
		0 0 12px black,
		0 0 12px black,
		0 0 12px black,
		0 0 12px black,
		0 0 12px black,
		0 0 12px black,
		0 0 12px black;
	align-content: center;
	text-shadow: 0 0 2px white;
	backdrop-filter: blur(4px);
}

.descripcionA1{
	text-align: justify;
}

.subtitleA2{
	font-size: 2rem;
	font-weight: bold;
}

.constA2{
	font-size: 1.5rem;
}

.bannersA3{
	min-height: 450px;
}

	.ojoA3{
		background-image: url(../imagenes/ojo-cerrado.png);
		background-size: contain;
		position: absolute;
		height: 2rem;
		width: 2rem;
		top: 1rem;
		right: 1rem;
		cursor: pointer;
		z-index: 2;
	}

		.ojoA3:hover{
			filter: drop-shadow(0 0 4px white);
			background-image: url(../imagenes/ojo.png);
		}

		.ojoA3.apertura{
			background-image: url(../imagenes/ojo.png);
			background-size: contain;
			filter: drop-shadow(0 0 4px white);
		}

	#banner1A3{
		position: relative;
		background-size: cover;
		background-repeat: no-repeat;
		background-image: url(../imagenes/ammit-buena.jpg);
	}

		#banner1A3.juicioammit{
			background-image: url(../imagenes/ammit-mala.jpg);
		}
	
	#banner2A3{
		display: flex;
		background-size: cover;
		background-repeat: no-repeat;
		background-image: url(../imagenes/fondo-ammit.jpg);
		align-items: center;
		justify-content: center;
	}

	.ulA3{
		text-decoration: none;
		list-style: none;
		text-shadow: 0 0 4px white,
					 0 0 4px white,
					 0 0 4px white,
					 0 0 6px peru,
					 0 0 6px peru,
					 0 0 6px peru;
	}

	.contenido{
		display: flex;
		width: 100%;
		min-height: 450px;
		box-sizing: border-box;
		padding: 25px;
		color: black;
		background-color: rgba(0, 0, 0, 0.45);

		border-radius: 15px;
		text-decoration: none;
		list-style: none;
		align-items: center;
		justify-content: center;


		opacity: 0;
		visibility: hidden;
		transform: translateY(20px);
		transition: opacity 0.5s ease, 
					transform 0.5s ease, 
					visibility 0.5s ease;
	}

		.contenido.visible{
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		}

		/*-----Actividad 4------*/

.alumno{
	color: peru;
	font-size: calc(1.78rem - 10%)
}

		/*-----Actividad 5------*/

.dropbanner{
	display: flex;
	height: 600px;
	justify-content: center;
	align-items: center;
	background-image: url(../imagenes/fondo-ammit-306x600.png);
	background-size: cover;
	background-repeat: no-repeat;
}

#dropcontainer{
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url(../imagenes/fondo-ammit-660x600.png);
	background-size: cover;
	background-repeat: no-repeat;
	padding: 50px;
}

#actividad-5 p{
	margin-bottom: 0px;
}

#alimentame{
	margin-top: -300px;
	font-size: 2rem;
}

	#alimentame.active{
		visibility: hidden;
	}

.aura{
	animation: aura 1s ease infinite;
}

#dragtarget{
	position: absolute;
	background-image: url(../imagenes/ammit-acechante.png);
	background-size: contain;
	background-repeat: no-repeat;
	height: 200px;
	width: 200px;
	margin-top: 40px;
	animation: aura 1s linear infinite;
}

		@keyframes aura {
			0% {
				filter: drop-shadow(0 0 0 tomato);
			}
			33% {
				filter: drop-shadow(0 -10px 10px tomato);
				/*filter: drop-shadow(0 -2px 2px rgb(125, 49, 35));*/
			}
			66%{
				filter: drop-shadow(0 -10px 10px tomato);
				filter: drop-shadow(0 -2px 2px rgb(125, 49, 35));
			}
			100% {
				filter: drop-shadow(0 0 0 tomato);
			}
		}

#dropables{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
	width: 500px;
	height: 500px;
	
}

	#dropables > *{
		height: 163px;
		width: 163px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	#dropables > :nth-child(1){
		background-image: url(../imagenes/balanza-juicio-al-injusto.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-color: rgba(205, 134, 63, 0.311);
		border-radius: 25%;
		box-shadow: 0 0 5px white,
					0 0 5px white;
	}

	#dropables > :nth-child(2){
		background-color: transparent;
	}

	#dropables > :nth-child(3){
		background-image: url(../imagenes/balanza-juicio-al-justo.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-color: rgba(205, 134, 63, 0.311);
		border-radius: 25%;
		box-shadow: 0 0 5px white,
					0 0 5px white;
	}

	#dropables > :nth-child(4){
		background-color: transparent;
	}

	#dropables > :nth-child(5){
		background-color: transparent;
	}

	#dropables > :nth-child(6){
		background-color: transparent;
	}

	#dropables > :nth-child(7){
		background-image: url(../imagenes/balanza-juicio-al-justo.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-color: rgba(205, 134, 63, 0.311);
		border-radius: 25%;
		box-shadow: 0 0 5px white,
					0 0 5px white;
	}

	#dropables > :nth-child(8){
		background-color: transparent;
	}

	#dropables > :nth-child(9){
		background-image: url(../imagenes/balanza-juicio-al-injusto.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-color: rgba(205, 134, 63, 0.311);
		border-radius: 25%;
		box-shadow: 0 0 5px white,
					0 0 5px white;
	}

#demo{
	font-size: 2rem;
	text-shadow: 0 0 4px white,
				 0 0 4px white;
}

		/*-----Actividad 6------*/

.word, .word1 {
	font-family: 'Anton', sans-serif;
	perspective: 1000px; 
	letter-spacing: 10px;
	margin-top: 10px;
	transition: all 5s ease;
}


.word1 {
	
	color: black; 
	
	opacity: 0.5;
	filter: blur(2px);
	position: relative;
	z-index: -1;
	perspective: 38rem;
	transform: matrix(0.1, -0.3, 1.5, 0.5, -108, 10) skew(-42deg, 31deg) translateX(226px) translateY(-121px);
}

.word span, .word1 span{
	cursor: pointer;
	display: inline-block;
	font-size: 100px;
	user-select: none;
	line-height: .8;
	font-weight: bold;
	
}

.erre{
  color: black;
  z-index: -2;
  left: -66px;
  top: 0px;
  position: relative;
  z-index: -1;
  filter: blur(0.5px);
  opacity: 0.5;
}


.imagen{

	background-image: url();
	background-repeat: no-repeat;
	background-size: contain;
	height: 330px;
	width: -moz-available;
    scale: 0.5;
}

.word span:hover{
	-webkit-text-stroke: 10px transparent;
	background: linear-gradient(var(--angle), transparent, peru);
	-webkit-background-clip:text;
	background-clip: text;
	paint-order: stroke fill;
	-webkit-text-fill-color:white;
	animation: rotate-gradient 3s linear infinite;
	filter: drop-shadow(0 0 2px black) drop-shadow(0 0 2px black) drop-shadow(0 0 2px black) drop-shadow(0 0 2px black) drop-shadow(0 0 2px black);
	text-shadow: 2px 4px 6px black;
}

	@property --angle{
		syntax: '<angle>';
		initial-value: 0deg;
		inherits: false;
	}

	@keyframes rotate-gradient{
		to{
			--angle: 180deg;
		}
	}

.word span:nth-child(1).active{

	animation:  balance 1.5s ease-out;
	transform-origin: bottom left;
}

.word1 span:nth-child(1).active{

	animation:  balance 1.5s ease-out;
	transform-origin: bottom left;
}



@keyframes balance{

0%, 100% {
		/* En el punto más alto: escala normal y posición inicial */
		transform: translateY(0) scale(1, 1);
		animation-timing-function: ease-in;
	}
	
	30%, 60% {
		/* En el suelo: se desplaza hacia abajo y se aplasta (ancha y chata) */
		transform: translateY(-150px) scale(1.3, 0.7);
		animation-timing-function: ease-out;
	}

	/* Puntos intermedios opcionales para mejorar el efecto de estiramiento al caer/subir */
	15%, 45% {
		/* En el aire bajando/subiendo: se estira (alta y delgada) */
		transform: translateY(-75px) scale(0.8, 1.2);
	}
}

.word span:nth-child(2).active{

animation: saltando 1s ease-out;
transform-origin: bottom center;

}

.word1 span:nth-child(2).active{

animation: saltando 1s ease-out;
transform-origin: bottom center;

}



@keyframes saltando{

10%, 30% {
    color: red;
    transform: scale(2, 0.4) translate(0, 0) rotate(0deg);
    opacity: 1;
    filter: blur(0px);
}
45%, 50% {
    color: blue;
    transform: scale(1) translate(0, -100px) rotate(180deg); 
    opacity: 0.8;
    filter: blur(2px);
    text-shadow: 0 0 10px orange, 0 0 20px red; /* Efecto de disco de acreción (fuego) */
} 
80%, 100% {
    color: black; 
    transform: scale(0) translate(0, -290px) rotate(720deg);
    opacity: 0;
    filter: blur(10px);
    text-shadow: 0 0 0px transparent;
}


}




.word span:nth-child(3).active{
	animation: espejo 3s ease-out;
	transform-origin: bottom center;
}

.word1 span:nth-child(3).active{
	animation: espejo 3s ease-out;
	transform-origin: bottom center;
}




@keyframes espejo{

	0%, 20% {
    color: red;
    /* Efecto de temblor en el motor */
    transform: scale(1) translate(2px, 1px) rotate(0.5deg);
    text-shadow: 0 0 10px orange;
}
5%, 15% {
    transform: scale(1) translate(-2px, -1px) rotate(-0.5deg);
}
10%, 25% {
    transform: scale(1) translate(1px, -2px) rotate(1deg);
}

28% {
    color: orange;
    /* Anticipación: se encoge acumulando energía */
    transform: scale(0.7, 1.3) translate(0, 5px);
    text-shadow: 0 0 25px yellow;
}

30% {
    color: cyan;
    /* ¡Salto hiperespacial! Se deforma por la velocidad y se mueve muy rápido */
    transform: scale(0.1, 4) translate(0, -290px); 
    text-shadow: 0 0 30px white, 0 0 50px cyan;
}

33%, 75% {
    color: blue;
    /* Se estabiliza instantáneamente en su nueva posición */
    transform: scale(1) translate(0, -20000px); 
    text-shadow: none;
}

80%, 100% {
    color: red; 
    /* Regresa a la posición inicial */
    transform: scale(1) translate(0, 0);
    text-shadow: 1px 15px 12px orange;


}

}

.word span:nth-child(4).active{

animation: rotacion 1s ease-out;

}
.word1 span:nth-child(4).active{

animation: rotacion 1s ease-out;


}

@keyframes rotacion{
10% {
    color: red;
    /* Primer escape de aire: se mueve rápido hacia arriba y la derecha */
    transform: scale(0.8, 0.7) translate(40px, -60px) rotate(15deg);
}
30% {
    color: crimson;
    /* Cambio brusco de dirección: cae un poco y se mueve a la izquierda */
    transform: scale(0.6, 0.5) translate(-50px, -30px) rotate(-25deg);
}
45%, 50% {
    color: darkred;
    /* Sale disparado hacia arriba de golpe mientras se sigue encogiendo */
    transform: scale(0.4, 0.4) translate(60px, -150px) rotate(45deg); 
}
80% {
    color: #4a0000; 
    /* El "último suspiro": se encoge al máximo y cae exhausto cerca del centro */
    transform: scale(0.15, 0.15) translate(-10px, 20px) rotate(-10deg);
    text-shadow: none;
}
100% {
    color: red;
    /* Vuelve a su sitio original y se infla de golpe */
    transform: scale(1) translate(0, 0) rotate(0deg);
    text-shadow: 1px 15px 12px orange;
}


}

.word span:nth-child(5).active{
	animation: estirarse 1.5s ease;

}
.word1 span:nth-child(5).active{
	animation: estirarse 1.5s ease;
	/*animation-delay: 0.5s;*/

}

@keyframes estirarse{
 0%, 100% {
		/* Posición inicial estable */
		transform: matrix(1, 0, 0, 1, 0, 0);
		filter: hue-rotate(0deg) blur(0px) saturate(100%) contrast(100%);
	}
	
	20% {
		/* Sacudida a la izquierda: se estira hacia los lados y se desplaza ligeramente */
		transform: matrix(1.15, 0.1, -0.15, 0.9, -8, 4);
		filter: hue-rotate(72deg) blur(1px) saturate(200%) contrast(130%);
	}
	
	40% {
		/* Mareo/Compresión: se aplasta verticalmente y se deforma hacia la derecha */
		transform: matrix(0.85, -0.2, 0.1, 1.15, 6, -5);
		filter: hue-rotate(144deg) blur(5px) saturate(350%) contrast(180%);
	}
	
	60% {
		/* Sacudida violenta: deformación diagonal extrema en su lugar */
		transform: matrix(1.1, -0.15, -0.2, 0.85, -5, -3);
		filter: hue-rotate(216deg) blur(2px) saturate(450%) contrast(200%);
	}
	
	80% {
		/* Intento de estabilización: desenfoque alto mientras recupera la forma */
		transform: matrix(0.95, 0.05, 0.05, 1.05, 4, 2);
		filter: hue-rotate(288deg) blur(6px) saturate(250%) contrast(140%);
	}

}

.word span:nth-child(6).active{

animation: letran 1s ease-out;

}
.word1 span:nth-child(6).active{

animation: letran 1s ease-out;


}

@keyframes letran{
   0% {
    transform: translate(0, 0) scale(1);
    animation-timing-function: ease-in-out;
  }
  
  /* --- PRIMER SALTO --- */
  5% {
    /* La pulga se encoge en el lugar acumulando energía */
    transform: translate(0, 0) scale(1.1, 0.7);
    animation-timing-function: ease-out;
  }
  20% {
    /* Cúspide del primer salto (sube y avanza) */
    transform: translate(100px, -150px) scale(0.9, 1.2);
    animation-timing-function: ease-in;
  }
  35% {
    /* Aterrizaje del primer salto e impacto contra el suelo */
    transform: translate(200px, 0) scale(1.2, 0.6);
    animation-timing-function: ease-in-out;
  }

  /* --- SEGUNDO SALTO (Escape total) --- */
  40% {
    /* Breve pausa para volver a impulsarse */
    transform: translate(200px, 0) scale(1.1, 0.7);
    animation-timing-function: ease-out;
  }
  55% {
    /* Cúspide del segundo salto (vuela más lejos) */
    transform: translate(350px, -180px) scale(0.9, 1.2);
    animation-timing-function: ease-in;
  }
  70%, 100% {
    /* Aterriza fuera de la pantalla (o más lejos) y recupera su forma */
    transform: translate(1000px, 0) scale(1);
  }
}
		/*-----Actividad 7------*/

#shop{
	display: none;
	justify-content: center;
	visibility: hidden;
}
	#shop.active{
		display: flex;
		visibility: visible;
	}

#items{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 30px;
	gap: 5px;
	width: 700px;
	height: 700px;
}



	#items > *{
		display: flex;
		justify-content: center;
		align-items: center;
		border: 2px solid transparent;
		padding: 5px;
		font-size: 25px;
	}

		#items > *:hover{
			border: 2px solid gray;
		}

	#items > :nth-child(3n+2){
		background-color: peru;
		transition: all .5s ease;
	}
		#items > :nth-child(3n+2):hover{
		transform: scale(1.5);
	}

	#items > :nth-child(-n+3){
		background-color: transparent;
	}

		#items > :nth-child(-n+3):hover{
			transform: scale(1);
			border: 2px solid transparent;
	}

.imgshop{
	height: auto;
	width: 100px;
}

#click, #priece{
	cursor: pointer;
}