/*===============================
  Reset de los estilos navegador.
  ===============================*/
html, body, h1, h2, h3, h4, h5, h6, p, q, ol, ul, li, pre, code, address, variable, form, fieldset, blockquote, figure, figcaption, 
section, header, footer, aside { 
	padding: 0px; margin: 0px; border: 0px; outline: 0px; font-size: 100%; font-weight: normal; line-height: normal;
}
table { 
	border-collapse: collapse; border-spacing: 0px; 
}
td, th, caption {
	font-weight: normal; text-align: left; 
}
img, fieldset { 
	border: 0px none; 
}
ol { 
	list-style: decimal; padding-left: 28px;
}
ul { 
	list-style:square; padding-left: 28px;
}
q:before, q:after {  }

/*=======================================
  Estilos de elementos (por pabra clave).
  =======================================*/
html {
	min-width: 614px;
	max-width: 1228px;
	margin: 0 auto;
}

body {
	margin: 0;
	font-family: Arial; font-size:19px; line-height:30px;
	text-align: left;
}

h1 {
	font-size: 54px;
	font-weight:bold;
}
	
h2, h4, h5, h6 {
	font-size: 19px;
}

h3 {
	font-size: 19px;
	font-weight:bold;
}

q {
	quotes: none; /* Antes tenía "«" "»"; pero da problemas en los segundos includes*/
	/* Reemplazo <q> por <q>&laquo; y </q> por &raquo;</q> Conservo las q por semántica. */
}

figure {
	margin: 0px;
}

figcaption {
	font-size:12px; line-height:16px;
	text-align:center;
	color:#0A628B;
}

mark {
	background-color: #AFFFFF;
}

/*======================
  Estilo de los enlaces.
  ======================*/
a {	text-decoration:underline; 
}
a:link { 
	color: #0000FF;
}
a:visited { 
	color: #0000FF;
}
a:hover {
	transition: color 0.5s ease-in-out;
	color: #FF0000;
}
a:active { 
	color: #FF0000;
	font-style: italic;
}

/*===========================================================
  Estilos para los ítems de las últimas noticias (por clase).
  ===========================================================
*/
/*Comun para todos los artículos (en la etiqueta article.
  -------------------------------------------------------*/
.atcl_comu {
	width: 100%;
}
/*Cabecera, fecha y autor y contenido de laa actividades.
---------------------------------------------------------*/
.cbcr_atvd {
	margin: 0px 0px 5px 2px;
	font-weight: bold;
	color: #0099FF;
}
.fcat_atvd {
	margin:0px 0px 5px 2px;
	color: #CC6600;
}
.ctnd_atvd {
	margin:0px 0px 0px 24px;
	color: #000000;
}
/*Cabecera, fecha y autor y contenido de los avisos.
----------------------------------------------------*/
.cbcr_avso {
	margin: 0px 0px 5px 2px;
	font-weight: bold;
	color: #6600CC;
}
.fcat_avso {
	margin:0px 0px 5px 2px;
	color: #CC6600;
}
.ctnd_avso {
	margin:0px 0px 0px 24px;
	color: #000000;
}
/*Cabecera, fecha y autor y contenido de las carteleras.
--------------------------------------------------------*/
.cbcr_ctlr {
	margin: 0px 0px 5px 2px;
	font-weight: bold;
	color: #006600;
}
.fcat_ctlr {
	margin:0px 0px 5px 2px;
	color: #CC6600;
}
.ctnd_ctlr {
	margin:0px 0px 0px 24px;
	color: #000000;
}
/*Cabecera, fecha y autor y contenido de las noticias.
------------------------------------------------------*/
.cbcr_ntci {
	margin: 0px 0px 5px 2px;
	font-weight: bold;
	color: #0000FF;
}
.fcat_ntci {
	margin:0px 0px 5px 2px;
	color: #CC6600;
}
.ctnd_ntci {
	margin:0px 0px 5px 24px;
	color: #000000;
}
/*Cabecera, fecha y autor y contenido de las publicidades.
----------------------------------------------------------*/
.cbcr_pbcd {
	margin: 0px 0px 5px 2px;
	font-weight: bold;
	color: #FF0000;
}
.fcat_pbcd {
	margin:0px 0px 5px 2px;
	color: #CC6600;
}
.ctnd_pbcd {
	margin:0px 0px 0px 24px;
	color: #000000;
}
/*===========================================================
  Mis tooptils para los titles sustituidos por data-loquesea.
  ===========================================================
  
  No sirve para los elementos reemplazados como <img> o <br>. Se utiliza sustituyento el 'title' por 'data-title'.
  data-title contiene lo que se mostrará en el tooltip. El cuadrado es tan ancho como el enlace o el texto entre 
  <spam> que deba tener el tooptil. */

/*Pensado para explicar enlaces internos.
  ---------------------------------------
  
  La explesión data-title="txto" puede ir dentro de la etiqueta <a>. No necesita ir en un <span> ... </span>. Vg:
  
  <a data-title="Explicación" href="Enlace">Texto del enlace</a>
*/
[data-title] {
	position: relative;
}
[data-title]::after {
	content: attr(data-title);
	position: absolute; left:0; top: 32px; z-index: 100;
	width: auto; padding: 5px;
	font-weight:normal; font-style:normal; line-height:18px;
	text-align: center; font-size: 15px; color: #000000;
	border: 1px #AAAAAA solid; border-radius: 8px; box-shadow: #999999 5px 5px 10px;
	background-color: rgba(204, 255, 204, 0.9);
	visibility:hidden;
}
[data-title]:hover::after {
	transition: all 0.2s ease-in-out 0.7s;
	visibility:visible;
}
[data-title]:active::after {
	transition: none;
	visibility: hidden;
}
/*Pensado para avisar que el enlace se abre en una solapa nueva.
  --------------------------------------------------------------
  
  La explesión data-solapa puede ir dentro de la etiqueta <a>.
*/
[data-solapa] {
	position: relative;
}
[data-solapa]::after {
	content: "Se abre en una nueva solapa.";
	position: absolute; left:0; top: 32px; z-index: 100;
	width: auto; padding: 5px;
	font-weight:normal; font-style:normal; line-height:18px;
	text-align: center; font-size: 15px; color: #000000;
	border: 1px #AAAAAA solid; border-radius: 8px; box-shadow: #999999 5px 5px 10px;
	background-color: rgba(220, 193, 250, 0.9);
	visibility:hidden;
}
[data-solapa]:hover::after {
	transition: all 0.2s ease-in-out 0.7s;
	visibility:visible;
}
[data-solapa]:active::after {
	transition: none;
	visibility: hidden;
}
/*Pensado para enlaces a sitioa ejenos.
  -------------------------------------

La explesión data-title a secas (el texto es común) debe ir dentro de la etiqueta <a. No necesita ir en 
un <span> ... </span> Los corchetes de enlace ajeno van antes y despues de las etiquetas <a> </a>. Vg:

[<a target="_blank" href="https://es.wikipedia..."><span data-wiki>concepto</span></a>]

*/
[data-ajeno] {
	position: relative;
}
[data-ajeno]::after {
	content: "Ojo: El enlace redirige a un sitio web ajeno.";
	position: absolute; left:0; top: 32px; z-index: 100;
	width: auto; min-width:85px; padding: 5px;
	font-weight:normal; font-style:normal; line-height:18px;
	text-align: center; font-size: 15px; color: #000000;
	border: 1px #AAAAAA solid; border-radius: 8px; box-shadow: #999999 5px 5px 10px;
	background-color: rgba(255, 153, 153, 0.9);
	visibility:hidden;
}
[data-ajeno]:hover::after {
	transition: all 0.2s ease-in-out 0.7s;
	visibility:visible;
}
[data-ajeno]:active::after {
	transition: none;
	visibility: hidden;
}
/*Pensado para enlaces a Wikipedia (RAE, similares).
  --------------------------------------------------
  
La explesión data-title a secas (el texto es común) debe ir dentro de una etiqueta <span> que rodea el texto 
del enlacce. Los corchetes de enlace ajeno van antes y despues de las etiquetas <a> </a>. Vg:

[<a target="_blank" href="https://es.wikipedia..."><span data-wiki>concepto</span></a>]
*/
[data-wiki] {
	position: relative;
	color: #993300;
}
[data-wiki]::after {
	content: "Puede obtener mas detalles sobre este texto en el propio enlace.";
	position: absolute; left:0; top: 32px; z-index: 100;
	width: auto; min-width:85px; padding: 5px;
	font-weight:normal; font-style:normal; line-height:18px;
	text-align: center; font-size: 15px; color: #000000;
	border: 1px #AAAAAA solid; border-radius: 8px; box-shadow: #999999 5px 5px 10px;
	background-color: rgba(255, 255, 153, 0.9);
	visibility:hidden;
}
[data-wiki]:hover::after {
	transition: all 0.2s ease-in-out 0.7s;
	visibility:visible;
}
[data-wiki]:active::after {
	transition: none;
	visibility: hidden;
}
/*Pensado para explicar una palabra o unas siglas.
  ------------------------------------------------

La expresión data-title="explicación" debe ir dentro de una etiqueta <span> que rodea el texto a explicar. Vg:

<span data-help="Programa de Actuaci&oacute;n Integrada">PAI</span>

O bien dentro de la etiqueta <mark> que pondrá el texto con fosforito amarillo.

*/
[data-help] {
	position: relative;
	/*text-decoration: underline;*/
	cursor: help;
}
[data-help]::after {
	content: attr(data-help);
	position: absolute; left:0; top: 32px; z-index: 100;
	width: auto; padding: 5px;
	font-weight:normal; font-style:normal; line-height:18px;
	text-align: center; font-size: 15px; font-weight:normal; color: #000000;
	border: 1px #AAAAAA solid; border-radius: 8px; box-shadow: #999999 5px 5px 10px;
	background-color: rgba(175, 255, 255, 0.9);
	visibility:hidden;
}
[data-help]:hover::after {
	transition: all 0.2s ease-in-out 0.7s;
	visibility:visible;
}
[data-help]:active::after {
	transition: none;
	visibility: hidden;
}
/*Pensado para title de imágenes.
  -------------------------------

La explesión data-img="txto" debe dentro de la etiqueta <figure... Vg:

<figure data-img="Imagen del Ayuntamiento de Moncada." style="..."><img alt="..." src="..."></figure>	
*/ 
[data-img] {
	position: relative;
}
[data-img]::after {
	content: attr(data-img);
	position: absolute; left:3px; top: 13px; z-index: 100;
	width: auto; padding: 5px;
	font-weight:normal; font-style:normal; line-height:18px;
	text-align: center; font-size: 15px; color: #000000;
	border: 1px #AAAAAA solid; border-radius: 8px; box-shadow: #999999 5px 5px 10px;
	background-color: rgba(255, 255, 255, 0.9);
	visibility:hidden;
}
[data-img]:hover::after {
	transition: all 0.2s ease-in-out 0.7s;
	visibility: visible;
}
[data-img]:active::after {
	transition: none;
	visibility: hidden;
}
/*=======================================
  Página de índice con iconos (CSS grid).
  =======================================
*/
/*Todo el indice.
  ---------------*/
.indice {
	width: 100%;
	align-items:center;
	display:grid;
	grid-template-columns: 20px 44px 1fr;
}
/*Renglóm del título del índice.
  ------------------------------*/
.indice .titulo {
	grid-column: span 3;
	height: 50px;*/
}
/*Renglon de una línea del indice con icono.
  ------------------------------------------*/
.indice .icono {
	height:46px;
}


/*================================================================
  Página de contenido lincada por el indice con iconos (CSS grid). 
  ================================================================
*/
/*Todo el contenido.
  ------------------*/
.contenido {
	line-height: 24px;
	width: 100%;
	align-items:star;
	display:grid;
	grid-template-columns: 20px 20px 1fr;
}
/*Renglón del título de la página.
  --------------------------------*/
.contenido .titulo {
	grid-column: span 3;
	height: 50px;*/
}
/*Renglón de una sección en negrita.
  ----------------------------------*/
.contenido .seccion {
	grid-column: span 2;
	font-weight: bold;
}
/*Renglon de una sección NO en negrita.
  -------------------------------------*/
.contenido .blabla {
	grid-column: span 2;
}
/*===========================================================
  Títulos de las página y menu izquierdo cuando quite frames.
  ===========================================================*/
.titulopagina {
	z-index:1;
	float:left;
	position:sticky; top:0px;
	/*height:45px;*/
	width:100%;
	padding:5px 0px 5px 0px;
	/*margin-top:0px;*/
	margin-bottom:5px;
	background-color:rgb(255,255,255,0.88);
	border-bottom:dashed 1px #CC9900;
}
.menu {
	position:fixed; left:0px; top:0px;
	z-index:3;
	font-size:19px; line-height:19px;
	float:left;
	/*z-index:10;
	width:200px;
	font-size:1em; line-height:1em;
	position:sticky; top:0px;*/
}
.section {
	position:relative;
	margin-left:200px;
		max-width:824px;
	z-index:5;
	padding-right:10px;
	background-color:#FFFFFF;
}

/*======================================
  Estilos para una página inicial index.
  ======================================*/

.bodyindex {
	/*margin-top:150px;*/
	/*z-index:1;*/
	margin:0;
}
.headerindex {
	position:absolute; left:0px; top:0px;
	height:200px; width:100%;
	background: linear-gradient(10deg, #EEFFFF, #AAFFFF, #CAF7FF, #00FCFF, #4BD5F8, #00A0EB);
	display:flex; align-items:center; /* Centra verticalmente el contenido. */
}
.headerindex h1{
	font-family:"Arial"; /*font-size:2.8em; line-height:1em;*/
	padding-left:200px; margin:0 auto; text-align:center;
	text-shadow:5px 5px 6px #336699;
}

.sectionindex {
	position:relative;
	top:200px;
	margin-left:200px;
	z-index:5;
	padding-right:10px;
	background-color:#FFFFFF;
}
.footerindex {
	margin:200px 10px 0 0;
	padding-top:15px;
	border-top:dashed 1px #CC9900;
	margin-left:200px;
}







.zoom {
    transition: transform 0.2s ease-in-out;
}
.zoom:hover {
	transform:  scale(2);
}

.goto {
	transition: transform 2s;
}
.goto:hover {
	transform: translate(600px, 0px);
}