/*base*/
	@charset "utf-8";
    *, *::before, *::after {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	:root{
		--alturaEncabezado: 180px;
	}

/*******************************************************/
/******** PARPADEO *************************************/
.parpadea {
	animation-name: parpadeo;
	animation-duration: 2.5s;
	animation-timing-function: linear;
	animation-iteration-count: 3;
  
	-webkit-animation-name:parpadeo;
	-webkit-animation-duration: 2.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 3;
  }
  
  @-moz-keyframes parpadeo{  
	  0% { opacity: 1.0; }
	 50% { opacity: 0.0; }
	100% { opacity: 1.0; }
  }
  
  @-webkit-keyframes parpadeo {  
	   0% { opacity: 1.0; }
	  50% { opacity: 0.0; }
	 100% { opacity: 1.0; }
  }
  
  @keyframes parpadeo {  
	  0% { opacity: 1.0; }
	 50% { opacity: 0.0; }
	100% { opacity: 1.0; }
  }
/*** CUERPO *******************************************/
	body{
		width: 90%;
		max-width: 1300px;
		margin: 0 auto;
		color: #000;
		font-family: sans-serif;
		font-size: 1rem;
		line-height: 1.6;
	}
	
	/*** ENCABEZADO **********************************/
	header{
		width: 100%;
		min-height: var(--alturaEncabezado);
		display: grid;
			grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
			gap: 5px;
		background-color: #FFFFFF;
		border-bottom: 1px solid black;
		position: sticky;
			top: 0;
	}
	header div#encabezadoIzq{
		line-height: 4.5rem;
        text-align: center;
        display: flex;
            align-items: center;
            justify-content: center;
	}
	header div#encabezadoIzq h1{
		font-size: calc(1.5vw + 1.5rem);
        margin-top: 5px;
	}
	
	header div#encabezadoDcho{
		display: flex;
		background-color: red;
	}
	header div#encabezadoDcho figure{
		float: left;
		width: 15%;
		margin-left: 5px;
	}
	header div#encabezadoDcho figure img{
		width: 100%;
		max-height: auto;
	}
	header div#encabezadoDcho div#txtTelefono{
		width: 85%;
		color: white;
		align-self: center;
		margin-left: 10px;
        margin-bottom: 10px;
        padding-right: 10px;
	}
	header div#encabezadoDcho div#txtTelefono a{
		display: block;
        width: 100%;
        text-decoration: none;
        text-align: center;
		COLOR: white;
		font-size: calc(1.0rem + 0.7vw);
        border: 1px solid white;
        padding: 5px;
	}
	/*Activa la reescala al pulsar el botón*/
	#txtTelefono a:active{
		transform: scale(0.8);
		font-weight: bold;
	}
    .titulo{
        margin-bottom: 5px;
        font-size: calc(0.6rem + 0.8vw);
    }
	
	/*** MISCELANEA **************************************/
	.caja{
		border: 1px solid blue;
		float:  left;
		margin: 1%;
	}
	.portada{
		min-height: 400px;
	}
	/*-----------------------ok-----------*/
	button{
		border: 0;
		width: 10rem;
		background-image: linear-gradient(150deg, #9500FF, #8899FF, #00DDFF);
		border-radius: 8px; 
		color: #FFFFFF;
		font-size: 1.2rem;
		display: flex;
		font-size: 18px;
		padding: 4px;
		cursor: pointer;
		transition: 0.3s;
		margin-bottom: 20px;
		margin-left: 20px;
		margin-top: 20px;
	}
	button span{
		width: 10rem;
		background-color: red;
		padding: 16px 24px;
		border-radius: 6px;
		transition: 0.3s;
	}
	button:hover span{
		background: none;
	}
	button:active{
		transform: scale(0.8);
	}
	hr{
		width: 70%;
		height: 3px;
		background: #a502ee;
		background: linear-gradient(to right, #a502ee, #ffffff, #02fff7);
		margin: 16px auto 16px auto; /* arriba | derecha | abajo | izquierda */
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		border: none;
		border-radius: 5px;
	}
	p.tituloRojo {   
		text-align: left;
		display: inline;
		border: 1px solid blue;
		background-color: red;
		font-size: 12px;
		color: white;
		padding: 5px;
	}
	p.subtitulo{
		padding-bottom: 1rem;
	}
		.blanco{
			color:   red;	
			height:  3rem;
			padding: 2rem;
			border:  1px solid red;
			list-style: none;
		}
		#portada article a.blanco{
			text-decoration: none;
			font-size: 1.1rem;
		}
		#portada article a.blanco:active{
			transform: scale(0.8);
			color: green;
		}
	.espacio{
		margin-bottom: 10px;
	}
	section#portada {
		font-size: 1.3rem;
		width: 100%;
		display: grid;
			grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
			gap: 0.8rem;
	}
	.ocultar{
		display: none;
	}
	
/*** ZONA PRINCIPAL ***************************/
	main {
		padding-top: 1rem;
	}
	
	/****************** DATOS GENERALES ***********/
	article h3, aside h3 {
		margin-top: 16px;
		margin-left: 5px;
		width: 65%;
		font-size: 1.9rem;
	}
	article p.subtitulo {
		margin-top: 8px;
		padding-left: 16px;
		font-size: 1.3rem;
	}
	#portada article ol, #portada article ul{
		margin-left: 40px;
		margin-top: 0px;
	}#portada article ol li a, #portada article ul li a{
		display: block;
		border: 1px solid red;
		margin-bottom: 10px;
		padding-top: 10px;
		padding-bottom: 10px;
		text-decoration: none;
		color: red;
		padding-left: 15px;
	}
	#portada article p{
		margin-left:20px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
	aside.portada {
		display: flex;
			justify-content: center;	
			align-items:center;	
	}
	#portada aside ol {
		margin-left: 40px;
	}
	div.texto ul{
		margin-top: 10px;
		color: red;
	}
	#portada aside ol li{
		margin-bottom: 10px;
	}
	#portada article.cajaArt ul{
		margin: 0;
		color: red;
	}
	img.fotoPortada {
		padding-top: 2rem;
		width: 100%;
		height: auto;
	}
	/**************************************************/
	/*** Centrar la foto en un contenedor *************/
	figure {
		display: flex;
			justify-content: center;
			align-items: center;
	}
	div.texto img {
		float: left;
	}
	div.texto h2{
		width: 60%;
		margin-left: 5px;
	}
	
	/********************** SUBPORTADA ****************************/
	/**************************************************************/
	#subPortada {
		display: grid;
			grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
			gap: 10px;
		margin: 20px;
		font-size: 1.3rem;
	}
		#subPortada article {
			min-height: 280px;
			
		}
		#subPortada article h3 {
			font-size: 2.4rem;
		}
		#subPortada article ul{
			margin-left: 40px;
		}
	
	/*** ARTÍCULOS ****************************************************/
	section#articulos {
		width: 95%;
		margin: 0 auto;
		font-size: 1.3rem;
	}
	div#verArticulos{
		display: grid;
			grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
			gap: 5px;
	}
	article.cajaArt{
		min-height: 500px;
		border: 1px solid red;
		box-shadow: 5px 5px 25px;
		display: flex;
			flex-direction: column;
			justify-content: space-between;
	}
	article.cajaArt div.texto img{
		margin-right: 10px;
		margin-left: 15px;
	}
	article.cajaArt div.texto h4{
		width: 90%;
		margin-left: 10px;
		font-size: calc(1.3rem + 0.5vw); 
		line-height: 1.1;
		margin-top: 20px;
		margin-left: 5px;
		margin-bottom: 20px;
	}
	article.cajaArt div.texto p{
		margin-left: 20px;
		margin-bottom: 20px;
	}
	article.cajaArt ol, article.cajaArt ul{
		margin-left: 40px;
	}
	article.cajaArt ol > li, article.cajaArt ol > li{
		margin-top: 10px;
		font-size: 1.2rem;
	}
	.limpiar{
		clear:both;
	}
	
	/*** PIE DE PÁGINA ********************************/
	footer{
		min-height: 40px;
		padding: 20px;
		display: flex;
			justify-content: center;
			align-items: center;
	}
	footer p{
		margin-left: 10px;
	}

	/*** MEDIAS ************************/			
	@media screen and (max-width: 670px) {
	header div#encabezadoIzq{
		line-height: 2.25rem; 
        align-content: blue;
    }