div.navegador {
	display: block;
	display: var(--navegador);
}
/* * * * * * * * * * */
/* CLASES GENÉRICAS */
/* * * * * * * * * */
.a {
	text-decoration: underline;
	cursor: pointer;
}
.anexo {
	position: fixed;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	text-shadow: none;
	background-color: white;
	opacity: 0.8;
	border: none;
	color: green;
	padding: 3px;
	z-index: 100;
}
.c {
	text-align: center;
}
.cambiar {
	transition: 2s;
}
.flex {
	display: flex;
}
.flujo {
	cursor: pointer;
}
.futuro {
	filter: blur(0.7px) opacity(0.65);
}
.gotic .inicial {
	font-family: var(--f-titulo);
	font-size: 35px;
	padding: 5px 3px 0px;
    margin-right: 2px;
    border: solid 1px var(--c1-c-pastel);
    border-radius: 0.4vmax;
	text-shadow: 0px 0px 12px var(--c1-m), 0px 0px 1px black;
	background-color: var(--c1-mc);
    box-shadow: 0px 0px 5px var(--c1-c-pastel) inset;
    color: var(--c2-m);
    font-weight: bold;
}
.h, .invisible {
	display: none !important;
}
.i {
	opacity: 0;
}
.izda {
	float: left !important;
}
.jen {
	font-family: jen;
}
.l {
	text-align: left;
}
.letraChica {
	font-size: 80% !important;
}
.letraMitad {
	font-size: 50% !important;
}
.letraGrande {
	font-size: 120% !important;
}
.letraGra {
	font-family: var(--f-titulo);
	font-size: 110%;
}
.letraPeq {
	font-family: var(--f-titulo);
	font-size: 80%;
}
.letraSombra {
	color: white;
	text-shadow: 0px 0px 10px black, 0px 0px 8px black, 0px 0px 4px black;
}
.oculto, .oculta {
	display: none;
}
.pasado {
	background-color: #bbb;
	color: var(--c1-m);
	opacity: 0.6;
}
.r {
	text-align: right;
}
	.r.pad {
		padding-right: 15px;
	}
.t {
	vertical-align: top;
}

.vacio {
	background-color: transparent !important;
	box-shadow: none;
	border: none;
}
/* COLORES FIJOS */
.blanco { color: white !important; }
.bgBlanco { background-color: white !important; }

.negro { color: black !important; }
.bgNegro { background-color: black !important; }

.rojo { color: red !important; }

/* * * * * * * * * */
/* OBJETOS POR ID */
/* * * * * * * * */
#altavoz {
	z-index: 1001;
}
#entrar {
	position: fixed;
	display: flex;

	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	padding-right: var(--scrollWidth);
	z-index: 1000;

	justify-content: center;
	background-color: white;
	opacity: 0.8;
}
	#entrar div {
		position: absolute;
		top: calc(50% + 20vmin);
	}
		#entrar div span {
			border: silver groove 3px;
			background-color: var(--c2-c);
			margin-left: 16px;
			padding: 15px;
			border-radius: 4px;
			cursor: pointer;
		}

#mensajes {
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	background-color: var(--c1-c-translucido);
	display: flex;
	align-items: center;
	justify-content: center;
}
	#mensajes * {
		cursor: default;
	}
	#mensajes .tabla {
		width: 60%;
		background-color: white;
		box-shadow: 0px 0px var(--sombra) black;
		padding: 30px;
		text-align: center;
		font-size: 20px;
	}
		#mensajes .tabla span.ERR {
			color: red;
		}

/* * * * * * * * * * */
/* OBJETOS POR TAG */
/* * * * * * * * */
a,
a:visited {
	color: black;
}

form {
	width: 100%;
	font-size: 20px;
	font-family: var(--f-normal);
}
	form.normal {
		width: 500px;
		min-width: 500px;
		max-width: 90%;
	}
	form.ancho {
		width: 800px;
		min-width: 400px;
		max-width: 100%;
	}
	form h2 {
		color: var(--c2-mc);
	}
	form .par {
		display: inline-block;
		width: 100%;
		margin: 10px 0px;
	}
		form * {
			font-size: inherit;
			font-family: inherit;		
		}
		form .par label {
			display: inline-block;
			width: 33%;
			padding: 7px 10px;
			text-align: right;
			color: var(--c1-mc);
		}
		form .par.boton label {
			width: 68%;
			text-align: left;
			vertical-align: bottom;
		}
		form .par input {
			display: block;
			width: 65%;
			border: none;
			border-bottom: solid 1px var(--c1-m-pastel);

			background-color: var(--c1-mc);
			box-shadow: 0px 0px var(--sombra) var(--c1-m) inset, 0px 0px var(--sombra) var(--c1-m) inset;
			padding: 7px 10px;
			float: right;
		}
		form .par button {
			display: block;
			width: 30%;
			height: 50px;
			border: none;
			border-bottom-left-radius: 20px;
			color: white;
			background-color: var(--c1-o-translucido);
			transition: 1s;
			cursor: pointer;
			float: right;
		}
			form .par button:hover {
				background-color: var(--c1-o);
				box-shadow: 0px 0px var(--sombra) var(--c1-mc), 0px 0px var(--sombra) var(--c1-mc);
			}
		form .par a {
			font-size: 80%;
			color: var(--c1-c) !important;
		}
		form > b {
			color: var(--c2-xc);
		}

h1, h2, h3, h4 {
	width: 100%;
}
h1 {
	text-align: center;
}
h2 {
	font-size: 25px;
}
h4 {
	margin: 0px 0px 20px;
}

sup, sub {
	font-size: 70% !important;
}

video {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* * * * * */
/* PARTES */
/* * * * */

/* DATOS */
#datos {
	bottom: 2px;
	right: var(--scrollWidth);
}

/* BODY */
body {
	padding: 0px;
	margin: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-family: var(--f-normal);
	overflow-x: hidden;
	height: 100%;
	width: 100%;
	position: absolute;
/*	background-color: var(--c1-o);*/
}
	body.out {
		display: flex;
		justify-content: center;
	}
body * {
	box-sizing: border-box;
	outline: none;
}

/* PIE */
footer, footer.normal {
	position: fixed;
	left: 0px;
	bottom: 0px;
	width: 100%;

	overflow: hidden;
	margin: 0px;

	background-color: var(--c1-c-pastel);
	border-top: solid 1px black;
	font-size: 15px;
	font-weight: bold;

	z-index: 5;
}
	footer.cambiar {
		height: 0px;
		padding: 0px;
	}
	footer, footer.normal {
		height: var(--alt-pie);
		padding: 5px;
	}

	footer img {
		position: absolute;
		right: 6px;
		top: 10%;
		height: 80%;
		display: none;
		cursor: pointer;
	}

	footer span#miga span.flujo:hover {
		color: var(--c2-o);
	}

/* CUERPO */

/* HUECOS */
.hueco {
	position: relative;
	left: 0px;
	width: 100%;
	padding: 60px 10%;
	overflow: hidden;

	background-color: var(--c2-mo);
	background-image: url("/_cliente/images/texturas/marmolNegro.4.jpg");
	background-size: cover;
	background-blend-mode: screen;
	
	box-shadow: 0px 0px var(--sombra) black inset, 0px 0px var(--sombra) black inset;

	display: none;
	align-items: center;
    justify-content: center;
}
	.huecoHijo {
		display: none;
		width: 100%;
		box-shadow: 0px 0px var(--sombra) black, 0px 0px var(--sombra) black;
		background-color: var(--c1-m);
		border-bottom-left-radius: 20px;
		padding: 20px;
	}

	.hueco .barraCerrar {
		position: absolute;
		top: 0px;
		height: 100%;
		width: 30px;
		right: 10px;
		cursor: ns-resize;
		display: flex;

		align-items: center;
		justify-content: center;
		}
		.hueco .barraCerrar .girado {
			transform: rotate(-90deg);
			color: white;
			font-size: 10px;
			text-shadow: 0px 0px 5px black, 0px 0px 5px black, 0px 0px 10px black, 0px 0px 10px black;
			letter-spacing: 3px;
			transition: 0.5s;
		}
			.hueco .barraCerrar:hover .girado {
				font-size: 20px;
				letter-spacing: normal;
			}
		.hueco .barraCerrar .flechita {
			position: absolute;
			left: 0px;
			height: 40px;
			width: 30px;

			background-color: white;
			box-shadow: 0px 0px var(--sombra) black, 0px 0px var(--sombra) black;
			border-radius: 0 0 45% 45% / 0 0 55% 55%;

			background-size: 20px;
			background-repeat: no-repeat;
			background-image: url(/_cliente/images/flecha.gif);
			background-position: top center;
		}
			.hueco .barraCerrar .flechita.arriba {
				top: 0px;
			}
			.hueco .barraCerrar .flechita.abajo {
				bottom: 0px;
				transform: rotate(180deg);
			}

/* TROZOS */
.trozos {
	position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
	right: 0px;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: white;
}
	.trozo {
		position: relative;
		overflow-x: hidden;
		top: 0px;
		width: 100%;
		margin: 0px;
		padding: 0px;
		z-index: 5;
	}
		.tapaTrozo {
			position: absolute;
			top: 0px;
			left: 0px;
			height: 100%;
			width: calc(100% - var(--scrollWidth));
			z-index: 3;
		}
		section.trozo {
			margin: 40px 0px 40px 60px;
			width: calc(100% - var(--scrollWidth) - 60px);
			background-color: var(--c2-xc);
			border-radius: 3px;
			box-shadow: 0px 0px 10px var(--c1-c-pastel) inset;
			padding: 10px;
		}
		.trozo h2 {
			font-size: 35px;
			padding-right: 25px;
			text-align: right;
		}
		.trozo h3 {
			font-size: 35px;
			text-align: center;
			padding: 30px 0px 10px;
		}
	
		.trozo p {
			margin: 20px 10%;
			font-size: 20px;
			line-height: 27px;
			text-align: justify;
			text-indent: -20px;
		}
			.trozo p span.sangrado {
				text-indent: 0px;
				padding-left: 40px;
				display: inline-block;
				margin-bottom: 10px;
				font-size: 90%;
			}

		/* TROZOS CONCRETOS */
		/* COMUNES */

		/* INTRO */
		.trozo#intro {
			height: 100%;
			top: 0px;
			z-index: 0;
		}
			.trozo#intro video#inicio {
				position: fixed;
				z-index: 0;
			}

			.trozo#intro #flecha {
				position: absolute;
				height: 160px;
				top: 50%;
				background-image: url(/_cliente/images/flecha.gif);
				background-size: contain;
				background-repeat: no-repeat;
				transition: opacity 5s;
				z-index: 0;
			}

			.trozo#titulo {
				position: absolute;
				top: 0px;
				z-index: 10;
				overflow: visible;
			}
				.trozo#titulo h1 {
					position: fixed;
					width: 99%;
					top: 100px;
					margin: 0px;
					color: var(--c1-c);
					font-size: 10vw;
					font-weight: normal;
					font-family: Jen;
					text-shadow: 0 0 15px black;
				}

		.trozo#cuerpo {
			height: 5000px;
		}

/* * * * * * * */
/* FLOTANTES */
/* * * * * */
#flotantes {
	position: fixed;
	top:0px;
	left: 0px;
	right: 0px;
	bottom: 0px;

	display: none;
	
	align-items: center;
	justify-content: center;
	
	background-color: var(--c1-o-translucido);
	background-image: url("/_cliente/images/plafon.wait.gif");
	background-position: center;
	background-repeat: no-repeat;

	z-index: 20;
}

.flotante {
	position: absolute;
	padding: 20px;
	z-index: 10;
	background-color: var(--c1-c-pastel);
	min-width: 35%;
	max-width: 98%;
	max-height: 98%;
	overflow: auto;
}


@media screen and (max-width: 800px) {
	section.trozo {
		margin-left: 55px;
		width: calc(100% - 55px);
	}

	.trozo#intro #flecha {
		transform: rotate(180deg);
	}

	.trozo p {
		margin: 20px 5px 20px 10px;
		text-indent: -15px;
	}

	.trozo#intro nav#botonesSueltos a {
		padding-right: 5px;
	}

	.trozo#quien_soy div#makros {
		width: 40%;
	}
}