/********************************************************************************************************************************************
 														ESQUEMAS. DATOS ESTRUCTURALES 
*********************************************************************************************************************************************/
.estructura, .hide, hr, .hideout { display: none !important; }
a,[onclick],[onfocus] {
		min-width: 48px;
		min-height: 48px;
		vertical-align: baseline;
}
/**********************
	CABECERAS Y MAIN
**********************/
@media screen and (min-width:10px){
	
	body { padding:0; margin:0;  }
	#wrapper { 
		position: relative;
		width: 100%;
		min-width:var(--minC);
		height: auto; 
		margin: 0 auto; 
		padding:0;
		display:grid; 
		grid-template-columns: 100%;
		grid-gap: 0;	
	}

	#overHead { 
		grid-row: 1; 
		z-index:101; 
		position: sticky; 
		top:0; 
		margin:0; 
		padding:0 1%; 
	}
	aside#banner1 { 
		grid-row: 1; 
		grid-column: 1; 
	}
	aside#banner2 { 
		grid-row: 2; 
		grid-column: 1; 
	} 


	/*ROW 1: cabecera */
	#wrapper>header {
		grid-row: 1;
		grid-column: 1; 
		width : 100%; 
		height: auto !important; 	
		min-height: calc(2rem + var(--ancho));
		margin: 0; 	
	 	padding : 0;		 
		 
	 	display: flex;
	 	justify-content:flex-start;
	 	align-items: center;	
	 
	}
	





	/*CABECERAS ESPECÍFICAS*/
	/*la estrecha. Es la más usable. La definición general de header (arriba) hace referencia a ella- Tan sólo atribuirle el fijado en interfaz */
	#wrapper>header#Hc {
		position: sticky; 
		top:0; 
		z-index: 10001;
	}
	#wrapper>header#Hx {
		position: absolute; 
		height: 0;
		min-height: 0;
	}
	#wrapper>header#Hx.pretrans {
		top:0;
		z-index: 10001;
		max-height: 1px;
		position: sticky;
		align-items: flex-start;
	}
	#wrapper>header#H {
		min-height: calc(10rem + var(--ancho));
	}
	#wrapper>header#Hf {
		max-height: 80vh;
		display: grid;
		justify-content:center;
		overflow: hidden;
		align-items: start;
		grid-template-columns: 100%;	
	}
	/*ROW 2: cuerpo */
	main {
		grid-row:3;
		width:100%; 
		height: auto;
		position: relative;
	}

}/*LIMPIA*/


 /**********************
 	TRANSVERSAL y TEMAS
 ***********************/
@media screen and (min-width:10px){
	
	#TRANS { 
		width: auto;
		overflow: hidden;
		display:flex;
		flex-flow: row wrap;
		align-items: center;
		column-gap: var(--ancho);
		row-gap:calc(var(--alto) * 3);
		margin: 0 0 calc(var(--alto) * 2) 0;
		padding: 0;
	}
	main>:is(#breadcrumbs,h2) { 
		position:absolute;  
		margin: 0;
		padding: 0 var(--ancho);
		top: calc(2rem + calc(var(--alto) * 4));
		left: 0; 
		justify-content:center;
		text-align: center;		
		width: calc(100% - calc(var(--ancho) * 2));
		z-index: 103;
	}
	
	:is(#Hx,#Hc)+main { 
		margin-top: 0; 
		padding-top: 0; 
	}
	#Hx+main > #TRANS {
		top: 0;
		position: sticky;
		z-index: 10000;
		justify-content:center;
		padding-top: calc(2.5rem + calc(var(--alto) * 3));
		padding-bottom: var(--alto);
	}	
	
	/*header#Hf + main >  #TRANS { justify-content: center; }*/		
	
	/*#Hx+main>#TRANS.largo { padding-top: calc(2.5rem + calc(var(--ancho) * 2)); padding-left:0; }*/
	/*main>#breadcrumbs.largo { top: calc(2.5rem + var(--ancho)); left:var(--ancho); right: var(--ancho); }*/
	
	/*REVISAR ESTO!!*/
	/*#temas {width:100%; padding:0; text-align:center; float:left; font-size:1em; }
	#temas ul { float:right; width:auto; list-style:none; margin:0 4% 0 0; padding:5px 0; }
	#temas li { float:left; padding:0; font-size:15px; line-height:30px; vertical-align:top; margin-left:20px; } 
	#temas li.aa { font-weight:var(--bold); }
	#temas li.aa:after { content:"\3014"; font-size:30px; margin-left:10px; font-weight:normal; vertical-align:baseline; }
	#temas ul:after { content:"\3015"; float:right; font-size:30px; margin-left:10px; font-weight:normal; vertical-align:top; }*/

}/*LIMPIA*/

@media screen and (min-width: 800px){
		
	#Hx+main>#TRANS {
		justify-content: flex-start;
		padding: calc(var(--alto) * 2.5) calc(var(--ancho) * 2); 
	}	
	main>:is(#breadcrumbs,h2) {
		left: calc(4rem + calc(var(--ancho) * 12)) !important;
		right: var(--ancho) !important;
		top: calc(var(--alto) * 2.5) !important;
		padding:0;
		width: auto;
		justify-content: flex-start !important;
	}
}


/**********************
		CUERPOS
***********************/
@media screen and (min-width:10px){
	[id^="cuerpo"] {
		width: 100%; 
		/*max-width: var(--max); */
		min-width:var(--min); 
		display:grid; 
		margin: var(--alto) auto;
		grid-template-columns: 100%;
		grid-auto-rows: minmax(min-content, max-content);
		gap: 0;
		justify-content:stretch;
	
	}
	#Hx+main > [id^=cuerpo] {
		margin-top: 0;
	}
	#Hx+main > [id^=cuerpo].canon > [id^=col] {	
		margin-top: 10vh;
	}
	#Hx+main > [id^=cuerpo].canon > #contenidos { margin: 0; }
	
	#Hx.pretrans+main > [id^=cuerpo].canon > :is([id^=col], #contenidos) {
		margin-top: calc(var(--alto) * 2);	
	}	
	/*ROW 2 -> ROW2 body del main main */
	[id^="cuerpo"]> header{
		grid-row: 1;
		grid-column: 1;
	}
	#contenidos, #colI, #colD { 
			height:auto; 
			margin : 0 calc(var(--ancho) * 2); 
			padding : 0; 
			overflow : hidden; 
			/*width: calc(100% - 4vw);*/
			grid-column: 1; 
			grid-row: 3; 
	} 	
	#colI { grid-row: 4;   } 
	#colD { grid-row: 5; } 
	#cuerpo #contenidos { 
		margin: 0 calc(var(--ancho) * 2); 
	}
	/*ROW 3: pie */
	#wrapper>footer { 
		grid-row:5;
		width: 100%;
		overflow : hidden; 
		padding-bottom: 20px; 
		text-align : center; 
	}
}/*LIMPIA*/


/***************************************************
 INTRO	(común a portadas y doculevel)	 
***************************************************/
@media screen and (min-width:10px){
	
	#Intro { 
		width: calc(100% - calc(var(--ancho) * 4));
		height:auto; 
		margin:0 calc(var(--ancho) * 2) calc(var(--alto) * 2) calc(var(--ancho) * 2);
		padding: calc(var(--alto) * 2) 0; 
		overflow: hidden; 
		display: grid;
		grid-template-columns: 2vw auto auto 2vw; 
		grid-template-rows: repeat(7, auto);
		row-gap: 0;  
		align-items: center;
		justify-items: center;
	}
	 #Hx:not(.pretrans) + main > [id^="cuerpo"] > #Intro {
		width: 100%;
		padding: 0; 
		margin: 0 0 calc(var(--alto) * 2) 0; 
	 }
	#Hx:not(.pretrans)+main>[id^="cuerpo"]>#Intro > .as {
		padding-top: calc(var(--alto) * 12);
	}


}/*LIMPIA*/
@media screen and (min-width: 600px){
	#Intro { grid-template-columns: calc(var(--ancho) * 2) auto auto calc(var(--ancho) * 2); }
}
@media screen and (min-width: 800px){	
	#Hx:not(.pretrans) + main > [id^="cuerpo"] > #Intro > .as { padding-top: calc(var(--alto) * 8); 	}
}


/***************************************************
 	Bp		(específicos de portadas y BOXER)	 
***************************************************/
@media screen and (min-width:10px){

	.contenedor { 
		justify-self: stretch;
		display:flex; 
		flex-direction: row; 
		flex-wrap: wrap; 
		justify-content: stretch; 
		align-items: stretch;
		overflow: hidden;
		gap: var(--ancho);
	}
	.asides { 
		display:flex; 
		flex-flow: row wrap;
		justify-content: stretch;
		align-items: flex-start;
		align-content: flex-start;
		overflow: hidden;
		gap: var(--ancho);
	}
	
	
	/*columnas contenedoras de varias cajas. Comportamiento:*/ 
	.contenedor [class^="columna"]:not(.Bbox){
		display:flex;
		flex-flow: column wrap;
		row-gap: calc(var(--alto) * 2);
	
	}
 
 	/*por defecto las cajas son FLEX (en columnas) */
	.Bbox, .Bbox .INbox {  
		overflow:hidden; 
		position:relative; 
		display: flex;
		flex-flow: column wrap;
	} 
	.Bbox:not([class*="columna"]), .Bbox:not([class*="columna"]) .INbox {
		/*max-width: 100%;*/
		width: 100%;	
	}
	/*variante color para las cajas*/
	.Bbox.painted {
			padding: var(--ancho);	
	}

	/* Variantes GRILLA de las cajas: inlay, carro (box-[A-B] (mod 3) se activa a partir de los 600px de pantalla )
		Estudiar ese inbox del carro, que lo veo raro
	*/
	.Bbox:is(.inlay,.carro,[class*="box-"]), .Bbox:is(.inlay,.carro,[class*="box-"]) .INbox {
			display: grid;
			grid-template-columns: 100%;		
			/*justify-items: center;*/		
		}
			
	.Bbox:is(.inlay,.carro)>*, .Bbox:is(.inlay,.carro) .INbox>*{
			grid-column:1;
	}
	
	/*SE ACTIVAN LOS TRES ESTADOS DEL OVERPRINT (vertical)*/
	/*:is(.Bbox,.carro.Bbox):is(.inlay,.inlay.painted,.painted):is(.In-A, .In-A .INbox) { */
	.Bbox:is(.In-A, .In-A .INbox) {
		align-items: start;
	}
	/*:is(.Bbox,.carro.Bbox):is(.inlay,.inlay.painted,.painted):is(.In-B, .In-B .INbox) { */ 
	.Bbox:is(.In-B, .In-B .INbox) {						
		align-items: end;
	}
	/*:is(.Bbox,.carro.Bbox):is(.inlay,.inlay.painted,.painted):is(.In-C, .In-C .INbox) {*/
	.Bbox:is(.In-C, .In-C .INbox) {  
		align-items: center;
	}
	.Bbox:is(.In-D, .In-D .INbox) {  
		align-items: stretch;
	}
	.Bbox:is(.In-A, .In-A .INbox)>*:not(.foto,.Hbox,.manta) { align-self: start; }
	.Bbox:is(.In-B, .In-B .INbox)>*:not(.foto,.Hbox,.manta) { align-self: end; }
	.Bbox:is(.In-C, .In-C .INbox)>*:not(.foto,.Hbox,.manta) { align-self: center; }
	.Bbox:is(.In-D, .In-D .INbox)>*:not(.foto,.Hbox,.manta) { align-self: stretch; }

	
	/*las columnas, los anchos y los altos se activan a partir de 600px (ver en C) */
	[class^="columna"], .box96 { 
		width : 100%;
		min-width: var(--min);
		padding : 0; 
		overflow : hidden; 
		align-self: stretch;
	} 
	.asides > [class^="columna"] {
		min-width: var(--minC);	
	}
	
	[class^="columna"].Bbox {
		align-self: flex-start;
	}
				
	.br100, .br75, .br50, .br25 { float:left; margin:0; padding:0; width:99%; } 

	/************************
 	Bp(extra) CAJA SLIDER: botonera 
 	************************/
	.carro.Bbox {
		row-gap: 0;
	}

}/*LIMPIA*/
@media screen and (min-width: 600px) {

				
			/*SE ACTIVA VARIANTE NO OVERLAY DE GRID: distribuye el grid en 2 columnas. Para Flotar las imágenes */
				.Bbox[class*="box-"]:not(.carro,.inlay), .Bbox[class*="box-"]:not(.inlay) .INbox {

					display: grid;
					column-gap: calc(var(--ancho) * 2);

				}
				.Bbox[class*="box-"].doble5:not(.carro,.inlay), .doble5:not(.inlay) .INbox {
					grid-template-columns: calc(50% - var(--ancho)) calc(50% - var(--ancho));
				}
				.Bbox.box-A.doble4:not(.carro,.inlay), .doble4:not(.inlay) .INbox {
					grid-template-columns: calc(40% - var(--ancho)) calc(60% - var(--ancho));
				}
				.Bbox.box-B.doble4:not(.carro,.inlay), .doble4:not(.inlay) .INbox {
					grid-template-columns: calc(60% - var(--ancho)) calc(40% - var(--ancho));
				}
				.Bbox.box-A.doble3:not(.carro,.inlay), .doble3:not(.inlay) .INbox {
					grid-template-columns: calc(30% - var(--ancho)) calc(70% - var(--ancho));
				}
				.Bbox.box-B.doble3:not(.carro,.inlay), .doble3:not(.inlay) .INbox {
					grid-template-columns: calc(70% - var(--ancho)) calc(30% - var(--ancho));
				}
				.Bbox.box-A.doble2:not(.carro,.inlay), .doble2:not(.inlay) .INbox {
					grid-template-columns: calc(20% - var(--ancho)) calc(80% - var(--ancho));
				}
				.Bbox.box-B.doble2:not(.carro,.inlay), .doble2:not(.inlay) .INbox {
					grid-template-columns: calc(80% - var(--ancho)) calc(20% - var(--ancho));
				}
				
				
				
				/*En overlay el box- se usa para justificar elementos */
				.Bbox.inlay.box-A, .Bbox.inlay.box-B .INbox {
					justify-items: start;
				}
				.Bbox.inlay.box-B, .Bbox.inlay.box-C .INbox {
					justify-items: end;
				}
				.Bbox.inlay.box-D, .Bbox.inlay.box-D .INbox {
					justify-items: stretch;
				}
				
			
		
					
		/*SE ACTIVAN LAS COLUMNAS*/
			
			/*flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]*/
				.columna100, .columna10 { 
					flex: 1 1 100%;  
				} 
				/*columna9 en banchos */
				
				/*
					Oct 22 
					
					columnas 80,75 y 60 se reunifican en 3/4 (sigue llamándose 75)					
					columna 40 desaparece. Obsoleta.
					
					Explicación de la fórmula (errónea):
						tomamos el valor base del ancho de la columna hermana, en este caso columna20
							x = calc(20% - 2vw)
						lo restamos al valor mínimo de todas las cajas. Si min es superior sale negativo
							a = calc(x - var(--min))
						restamos el resultado al valor base del ancho deseado 
							b = calc(calc(80% - 2vw) + a) 
						NOTAS:
									No funciona cuando el valor es superior al min
									recuerda que el max-width NO se puede usar

					*/
		
				.columna60, .columna6, .columna75, .columna7, .columna80, .columna8  { 
					flex: 1 4 calc(60% - calc(var(--ancho) * 4));  
				} 
				.columna50, .columna5 { 
					flex: 2 2 calc(50% - calc(var(--ancho) * 4)); 
				} 
				
				.columna40, .columna4 { 
					flex: 4 1 calc(40% - calc(var(--ancho) * 4));
					min-width:300px; 
				} 
				.columna33, .columna3 { 
					flex: 3 1 calc(33.3% - calc(var(--ancho) * 4));
					min-width:300px; 
				} 
				.columna25, .columna2 { 
					flex: 1 2 calc(25% - calc(var(--ancho) * 4));
					min-width:300px;
				} 
				.columna20, .columna1 { 
					flex: 1 2 calc(20% - calc(var(--ancho) * 4)); 
					min-width:300px;
				}
		
		/*se activa el tamaño específico de los break internos de columnas*/
		.br75 { width:74%; } 
		.br50 { width:49%; } 
		.br25 { width:24%; } 	
		
}


/*****************************
	PAGINADORES / LISTADOS
*****************************/
@media screen and (min-width:10px){

	.LSh { 
		width : 100%; 
		height: fit-content;
		margin : 0; 
		padding : calc(var(--alto) / 2) 0; 
		overflow : hidden; 
		display: flex;
		flex-flow: column wrap;
		column-gap:calc(var(--ancho) * 2);
		justify-content: center;
		align-items: center;
	}
	/*.LSh > * {
		min-width: var(--min);
	}*/
	#Intro .LSh {
		justify-content: center;
	}

}/*LIMPIA*/
@media screen and (min-width: 760px){
	.LSh { flex-flow:  row wrap; }	
}


/***************************************************
 	B		(específicos de doculevel)	 
***************************************************/
@media screen and (min-width:10px){
 
	#plantillero { 
		width : 96%; 
		max-width:1000px; 
		margin: var(--alto) auto; 
	} 

}/*LIMPIA*/




/***************************************************  
						ESPECÍFICOS 
****************************************************/
@media screen and (min-width:10px){

	/*Herramienta Redes Sociales */
	.doscero { 
		min-width: 90%;
		margin: 1vh auto;
		display:flex;
		flex-flow:row wrap;
		justify-content:center;
		align-items: center;
		gap:2vw;	
	}
	/*Politica de cookies*/
	#politica_cookies { 
		width:100%; 
		float:left; 
		position:fixed; 
		bottom:0; 
		left:0; 
		z-index:120; 
	}
	/*VENTANA EMERGENTE*/
	#POPup { 
		position : fixed; 
		top : 0; 
		left : 0; 
		right : 0; 
		bottom : 0; 
		overflow : hidden; 
		z-index : 121; 
		padding : 0; 
		text-align : center; 
		display:none;
		align-items: center;
		justify-content:center; 
	} 
	#inPOPup { 
		width: 80%;
		overflow:hidden;
		display: grid;
		grid-template-rows: 3vh 75vh;
		grid-template-columns:	100%;
	}
	
	
	/*USUARIOS REGISTRADOS. CINTO SUPERIOR DE CONTROL*/
	#controlUser { 
		position:absolute; 
		top:3vh;
		right: 5vw;
		height : auto; 
		color:#FFFFFF; 
		display: flex;
		flex-flow: row no-wrap;
		justify-content: flex-start;
		align-content: center;
		gap: 1vw;
	}	
	/*IDIOMAS*/
	main > #cintoLang {
		position: absolute;
		z-index: 200;
		top: 1vh;
		right: 1vw;
	}
	
	
}/*LIMPIA*/















/*******************************************
		FLUJO DE ANCHOS
********************************************/
@media screen and (min-width: 768px) {
	
			#cuerpo1 { 
				grid-template-columns: minmax(calc(var(--minC) + calc(var(--ancho) * 4)),35%) 1fr; 
				column-gap:var(--ancho); 
			} /* sólo columna izquierda */
			
			#cuerpo3, #cuerpo2 { 
				grid-template-columns: 1fr minmax(calc(var(--minC) + calc(var(--ancho) * 4)),35%); 
				column-gap:var(--ancho); 
			} /* sólo columna derecha */	
			
			#contenidos, #colI, #colD {
				margin: 0;	
			}	
			#colI, #colD {
				justify-content: stretch;
			}	
			:is(#colI, #colD)>:is([class^=columna], .Bbox:not([class^=columna])) { flex: 2 1 100%; }	
			#contenidos {
				margin-left: var(--ancho);			
			}
			#cuerpo1 > #contenidos {
					grid-column: 2;
					margin-left:0;
			}
			:is(#cuerpo1, #cuerpo2,#cuerpo3) > #contenidos { 
				grid-row: 3 / 6; 
			}
			
			:is(#cuerpo2,#cuerpo3) > :is(#colI, #colD) { 
				grid-column: 2;
				margin-right: var(--ancho); 		
			}
			
			
			:is(#cuerpo1, #cuerpo2,#cuerpo3) > :is(#colI,#colD) {
				grid-row: 3;
			}
			:is(#cuerpo1, #cuerpo2,#cuerpo3) > #colI + #colD {
				grid-row: 4;
			}

			
			:is(#cuerpo1, #cuerpo2)> header{
					grid-column: 1 / 3;
			}			
			#cuerpo3 > header {
					grid-column: 1 / 4;
			}							
}
@media screen and (min-width: 1000px) {
	:root{
		--ancho: 1vw;
	}
}
@media screen and (min-height: 1000px) {
	:root{
		--alto: 1vh;
	}

}
/*activamos las tres columnas*/	
@media screen and (min-width: 1280px) {

		#cuerpo1 { 
			grid-template-columns: calc(25% - var(--ancho)) 1fr; 
			column-gap:var(--ancho); 
		} /* sólo columna izquierda */

		#cuerpo2 { 
			grid-template-columns: 1fr calc(25% - var(--ancho)); 
			column-gap:var(--ancho); 
		} /* sólo columna derecha */	
		
		#cuerpo3 { 
			grid-template-columns: minmax(calc(var(--minC) + calc(var(--ancho) * 4)),25%) 1fr minmax(calc(var(--minC) + calc(var(--ancho) * 4)),25%); 
			column-gap:var(--ancho); 
		}
		#cuerpo3 > header{
					grid-column: 1 / 4;
		}
		[id^="cuerpo"]> #contenidos { grid-row: 3; }
		:is(#cuerpo3,#cuerpo1) > #contenidos { grid-column: 2; }
		
		#cuerpo3 > #colI { grid-column: 1; grid-row: 3; }
		#cuerpo3 > #colD { grid-column: 3; grid-row: 3; }
		#cuerpo3 > #colI + #colD { grid-row: 3; }
		#colI, #colD { position: sticky; top:0px; }
		
		#cuerpo3 > #contenidos { margin: 0; }
		#cuerpo2 > #contenidos { margin: 0 0 0 var(--ancho); }
		#cuerpo1 > #contenidos { margin: 0 var(--ancho) 0 0; }			
		:is(#cuerpo1, #cuerpo3) > #colI { margin: 0 0 0 var(--ancho); }	
		:is(#cuerpo2, #cuerpo3) > #colD { margin: 0 var(--ancho) 0 0; }	
		
		
}
@media screen and (min-width: 2000px) {
	:root{
		--ancho: 20px;
	}
}
@media screen and (min-height: 2000px) {
	:root{
		--alto: 20px;
	}
}
@media screen and (min-width: 2260px) {
		[id^="cuerpo"] { column-gap:20px; }
		#cuerpo { grid-template-columns: auto var(--max) auto;  }
		#cuerpo1 { grid-template-columns: auto 480px 1800px auto;  } /* sólo columna izquierda */
		#cuerpo2 { grid-template-columns: auto 1800px 480px auto; } /* sólo columna derecha */	
		#cuerpo3 { grid-template-columns: auto 450px 1310px 450px auto; }
		
		:is(#cuerpo1,#cuerpo2) > aside#banner5 { grid-column: 2 / 4; }
		#cuerpo3 > aside#banner5 { grid-column: 2 / 5; }		
		
		[id^="cuerpo"] :is(#colI,#colD, #contenidos){
			margin: 0;
		}
		#cuerpo > header{
					grid-column: 1 / 4;
		}
		:is(#cuerpo1,#cuerpo2) > header{
					grid-column: 1 / 5;
		}
		#cuerpo3 > header{
					grid-column: 1 / 6;
		}
		:is(#cuerpo,#cuerpo2) > #contenidos { grid-column: 2; }
		:is(#cuerpo1,#cuerpo3) > #contenidos { grid-column: 3; }
		
		:is(#cuerpo1,#cuerpo3)> #colI { grid-column: 2; }
		
		#cuerpo2 > #colD { grid-column: 3; }
		#cuerpo3 > #colD { grid-column: 4; }
		
}