@font-face 
{
  font-family:veterano;
  src: url("../5-fuentes/andalemono.ttf");
}

@media only screen and (max-width: 700px) 
{
	body 
	{
		
	}
}


body
{
	margin:0;
	padding:0;
	margin:auto;
	text-align:center;
	background-color:#000;
	font-family:'veterano';
	overflow-x: hidden;
	overflow-y: scroll;
	color:#FFF;
}

video
{
	position:absolute;
	z-index:990;
	left:0px;
	width:100%;
	top:16%;
}

#divEntrar
{
	position:absolute;
	z-index:900;
	width:100%;
	height:100%;
	top:0%;
	left:0%;
	padding:0%;
	background-color:#000;
	color:#FFF;
}

#tituloEntrada
{
	font-size:2.2em;
	padding-top:3%;
}

#creditos1
{
	padding-top:1.5%;
	font-size:0.9em;	
}

#creditos2
{
	padding-top:0.2%;
	font-size:1.2em;	
}

.creditosTexto
{
	padding-top:6%;
	line-height:32px;
	font-size:1.1em;	
}

@media only screen and (max-width: 700px) 
{
	
	.creditosTexto
	{
		padding:6% 4%;
		line-height:26px;
		font-size:1em;
	}
}

#divBotones
{
	width:100%;
}

#filme
{
	font-size:1.6em;
	cursor:pointer;
	float:left;
	margin-left:2%;
}

#filme:hover
{
	color:#69F;
}

#credits
{
	font-size:1.6em;
	cursor:pointer;
	float:right;
	margin-right:2%;
}

#credits:hover
{
	color:#69F;
}

.divCreditos
{
	padding:4% 14%;
	line-height:30px;
	font-size:1.1em;
	overflow:scroll;	
}

#divRegresar
{
	position:fixed;
	font-size:1.6em;
	left:10px;
	top:10px;
	width:25px;
	cursor:pointer;
	z-index:950;
	display:none;
}

#divTexto
{
	line-height:28px;	
}

@media only screen and (max-width: 700px) 
{
	#divTexto
	{
		line-height:20px;
		font-size:0.9em;	
	}	
}

#BotonPlay
{
	margin-top:3%;
	font-size:1.4em;	
}

/* La constelación. Cada sendero es un contenedor con la miniatura y la ficha
   dentro; la ficha aparece encima al pasar el ratón. */
#constelacion
{
	position:absolute;
	inset:0;
	z-index:2;
	/* La capa ocupa la pantalla entera y va por encima de #divInfo, así que
	   se tragaba los clics del botón PLAY. Solo deben responder los senderos. */
	pointer-events:none;
}

.sendero
{
	position:absolute;
	width:11.11%;
	height:18%;
	cursor:pointer;
	overflow:hidden;
	pointer-events:auto;
}

.sendero:focus-visible
{
	outline:2px solid #69F;
	outline-offset:2px;
}

.contenedorImg
{
	position:absolute;
	inset:0;
	overflow:hidden;
	z-index:2;
}

.contenedorImg img
{
	width:100%;
}

.contenedorInfo
{
	position:absolute;
	inset:0;
	overflow:hidden;
	color:#fff;
	z-index:3;
	background-color:#000;
	opacity:0;
	transition:opacity 0.2s;
}

.sendero:hover .contenedorInfo,
.sendero:focus-visible .contenedorInfo,
.sendero.escogido .contenedorInfo
{
	opacity:1;
}

.territorio
{
	padding-top:8%;	
}

.numero
{
	padding:6% 0%;
	height:14%;
}

/* Las diez posiciones de la constelación, en óvalo alrededor del texto. */
#sendero-0 { left:55.55%; top:5%;  }
#sendero-9 { left:33.33%; top:5%;  }
#sendero-1 { left:72.72%; top:20%; }
#sendero-8 { left:16.16%; top:20%; }
#sendero-2 { left:83.33%; top:45%; }
#sendero-7 { left:5.55%;  top:45%; }
#sendero-3 { left:72.72%; top:70%; }
#sendero-6 { left:16.16%; top:70%; }
#sendero-4 { left:55.55%; top:80%; }
#sendero-5 { left:33.33%; top:80%; }

.videoTrailer
{
	width:100%;
}

.videoTrailer:hover
{
	/*filter: invert(100%) grayscale(100%) brightness(40%) sepia(100%) hue-rotate(-50deg) saturate(200%) contrast(0.8);*/
}

.videoS
{
	/*filter: invert(100%);*/
}

.videoS:hover
{
	/*filter: invert(2%);*/
}

.nVideoPopup
{
	position:absolute;
	width:43%;
	height:18%;
	text-align:center;
	padding-top:6%;
	background-color:red;
	background-color:rgba(153,255,102,0);
	z-index:10;
}

.nVideoTexto
{
	background-color:red;
	padding:3% 6%;
	border-radius:3px;
	background-color:rgba(153,255,102,0.8);
}

#divPopup
{
	position:absolute;
	left:0px;
	top:0px;
	height:100%;
	width:100%;
	z-index:10;
	opacity:1;
	display:none;
	text-align:center;
	z-index:980;	
}

#divVideosPelicula
{
	background-color:#000;
	height:100%;
	vertical-align:middle;
	margin:auto;	
}

#divVideosPelicula video
{
	margin:12% auto!important;
}

.x
{
	cursor:pointer!important;
	position:absolute;
	z-index:1000;
	left:0px;
	top:4px;
	background-color:#333;
	color:#fff;
	padding:4px 12px;
	font-size:1.2em;
	border-radius:4px;	
}

.x:hover
{
	cursor:pointer!important;
	background-color:#CCC;
	color:#333;	
}

#divInfo
{
	position:absolute;
	top:40%;
	left:32%;
	width:36%;
	color:#CCC;
	font-size:1.2em;
	z-index:1;
}

#divInfoBoton
{
	padding:8% 0%;
	display:none;
	cursor:pointer;
	font-size:1.2em;
}

#divInfoBoton:hover
{
	
}

.aparece
{
	animation:aparecer 4s;
	opacity:1!important;
}

.desaparece
{
	animation:desaparecer 4s;
	opacity:0!important;
}

@keyframes aparecer
{
	from 
	{ 
		opacity:0;
	}
	to   
	{ 
		opacity:1;
	}
}

@keyframes desaparecer
{
	from 
	{ 
		opacity:1;
	}
	to   
	{ 
		opacity:0;
	}
}

.peliculaFull
{
	width:100%;
	margin:12% auto!important;
}

#loadingImg
{
	position:absolute;
	width:6%;
	left:47%;
	top:30%;
	border-radius:6px;
	z-index:400;
}

#divPopupDescarga
{
	position:fixed;
	z-index:4000;
	top:12%;
	left:45%;
	width:10%;	
	color:#fff;
	text-align:center;
	border-radius:4px;
	font-size:1em;
	font-weight:bold;
	padding:2px 6px;
	background-color:#333;
	display:none;
}



/* Mientras un sendero carga, el indicador gira sobre negro. Antes el gif se
   insertaba y se quitaba a mano desde el JavaScript. */
#divPopup.cargando #divVideosPelicula
{
	background:#000 url("../2-imagenes/loading.gif") no-repeat center center;
	background-size:64px 64px;
}

.avisoError
{
	padding-top:40vh;
	color:#F37;
	font-size:1.1em;
}

/* ---------------------------------------------------------------------------
   Teléfonos y tabletas verticales.

   La constelación está colocada con coordenadas absolutas pensadas para una
   pantalla ancha; en un móvil se amontona. Aquí pasa a ser una rejilla normal
   de dos columnas, con la ficha siempre visible debajo de cada miniatura en
   lugar de aparecer al pasar el ratón, que en una pantalla táctil no ocurre.
   --------------------------------------------------------------------------- */
@media only screen and (max-width: 900px)
{
	body
	{
		overflow-y:auto;
	}

	#constelacion
	{
		position:static;
		display:grid;
		grid-template-columns:repeat(2, 1fr);
		gap:10px;
		padding:10px;
	}

	.sendero
	{
		position:static;
		width:auto;
		height:auto;
	}

	.contenedorImg
	{
		position:static;
		aspect-ratio:16 / 9;
		display:flex;
		align-items:center;
		justify-content:center;
	}

	.contenedorInfo
	{
		position:static;
		opacity:1;
		font-size:0.8em;
		line-height:1.35;
		padding:6px 0 10px;
	}

	.sendero.escogido
	{
		outline:2px solid #69F;
	}

	.territorio
	{
		padding-top:4px;
	}

	.numero
	{
		padding:2px 0;
		height:auto;
	}

	#tituloEntrada
	{
		font-size:1.5em;
		padding-top:6%;
	}

	#creditos2
	{
		font-size:1.05em;
	}

	/* El texto central deja de estar flotando en medio y encabeza la lista.
	   El relleno superior deja hueco para el botón HOME, que va fijo. */
	#divInfo
	{
		position:static;
		width:auto;
		padding:52px 16px 8px;
		font-size:1em;
	}

	#divInfoBoton
	{
		padding:18px 0;
		font-size:1.4em;
	}

	/* El reproductor cuelga de #divPopup, no de #divVideosPelicula. Sin fijarle
	   el top se iba a su posición estática, debajo de la caja de 100% de alto,
	   y quedaba fuera de la pantalla. Centrado va bien en vertical. */
	#divPopup > video
	{
		top:50%;
		transform:translateY(-50%);
		margin:0 !important;
	}

	.divCreditos
	{
		padding:6% 6%;
		line-height:24px;
		font-size:0.95em;
	}

	#filme, #credits
	{
		font-size:1.3em;
	}
}