/*amencarnacionalmunecar.com | ÚLTIMA ACTUALIZACIÓN: JF. 15.01.2023*/


/*AJUSTES GENERALES. ¡¡¡¡NO CAMBIAR!!!!*/
* {
	margin: 0px;
	padding: 0px;
}
body {
	background: var(--color_1);
	font-family: helvetica, sans-serif;
	color: var(--color_4);
}
#contenedor {
	width: 100%;
	margin: auto;
	margin-top: 0px;
	margin-bottom: 0px;
}

/*AJUSTES PARTICULARES*/

/*Paleta de color.  Para sustituir los colores cambiar los códigos HEX del root.
Cada variable está comentada para tener referencia. El gradiente de la barra de menú precisa cambio manual.
Se puede consultar la paleta en la ruta "/css/paleta.svg"*/
:root{
	--color_1: #0d1321; /*azul marino*/
	--color_2: #a9bcd0; /*celeste*/
	--color_3: #484041; /*gris oscuro*/
	--color_4: #12100e; /*negro*/
	--color_5: #ffa400; /*amarillo*/
	--color_6: #F6E8EA; /*blanco*/
	--color_7: #0f1a66; /*azul institucional*/


}
/*menú*/
header {
    width: 960px;
    margin: 0px auto;
	display: block;
}
#btn-menu {
	display: none;
}
header label {
	display: none;
	width: 30px;
	height: 30px;
	padding: 10px;
}
header label:hover {
	cursor: pointer;
	background: rgba(255,255,255,0.2);
}
.menu{
	background:var(--color_4);
    background-image: -webkit-linear-gradient(top,#484041,#12100e); /*GRIS OSCURO, NEGRO*/
    background-image: -moz-linear-gradient(top,#484041,#12100e);
    background-image: -o-linear-gradient(top,#484041,#12100e);
    background-image: linear-gradient(to bottom,#484041,#12100e);
    border: 1px solid var(--color_4);
    -moz-box-shadow: 0 1px 1px var(--color_4) inset;
    -webkit-box-shadow: 0 1px 1px var(--color_4) inset;
    -o-box-shadow: 0 1px 1px var(--color_4) inset;
    box-shadow: 0 1px 1px var(--color_4) inset;
}
.menu ul {
	margin: 0px;
	list-style: none;
	padding: 0px;
	display: flex;
}
.menu li a:hover {
	color: var(--color_6);
}
.menu li:hover {
	background: rgba(255,255,255,0.3);
}
.menu li a {
	display: block;
	padding: 15px 25px;
	color: var(--color_2);
	text-decoration: none;
}
#activo{
	background: var(--color_4);
	color: var(--color_5);
	border-right: 1px solid var(--color_3);
}

/*banner*/
#banner img{
	width: 100%;
    margin: 0px auto;
	display: block;
}

/*comunes contenido*/
#contenido {
	width: 960px;
	background: var(--color_2);
	margin: 0px auto;
	display: block;
}
.line{
	width: 100%;
	background-image: -webkit-linear-gradient(top,#484041,#12100e); /*GRIS OSCURO, NEGRO*/
    background-image: -moz-linear-gradient(top,#484041,#12100e);
    background-image: -o-linear-gradient(top,#484041,#12100e);
    background-image: linear-gradient(to bottom,#484041,#12100e);
    height: 5px;
}
.titulo{
	background: var(--color_7);
	padding:0px 40px;
}
.titulo img{
	max-width: 35%;
	height: auto;
}
#contenido article{
	padding: 25px 50px;
	text-align: justify;
}
#inicio{
	font-size: 18px;
	font-family: georgia, serif;
	font-style: italic;
}
#secciones{
	font-size: 16px;
	font-family: georgia, serif;
	font-style: italic;

}
.foto{
	max-width: 100%;
	max-height: 330px;
	float: left;
	margin-right: 30px;
	margin-bottom: 20px;
	border-radius: 10px;
}
.fotover{
	max-width: 100%;
	max-height: 550px;
	float: right;
	margin-left: 30px;
	margin-bottom: 20px;
	border-radius: 10px;
}

.fotorep{
	max-width: 100%;
	max-height: 400px;
	float: left;
	margin-right: 30px;
	margin-bottom: 20px;
	border-radius: 10px;
}

/* particulares discografia y repertorio*/

.discografia {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

}

.portada img{	
	margin: 10px;
	width: 250px;
}

.portada img:hover{
	background: rgba(0,0,0,0.3);
}

.cita{
	/*text-align: right;*/
	padding-bottom: 30px;
}
.nota{
	font-size: 15px;
	margin-top: 15px;
}

.spotify {
	float: right;
	font-size: 18px;
	text-align: right;
}
.spotify img{
	width: auto;
	max-height: 35px;
	padding: 8px 15px;
}
.spotify img:hover{
	background: rgba(0,255,0,0.3);
	color: var(--color_6);
}
.apunte{
	font-size: 12px;
	font-style: normal;
	margin-top: 6px;
}
.apuntefotover{
	font-size: 12px;
	font-style: normal;
	margin-top: 6px;
    text-align: right;

}
.apunte a{
	text-decoration: none;
    color: var(--color_4);
}
.apunte a:hover{
	background: rgba(0,0,0,0.3);
	color: var(--color_6);
}
.apuntefotover a{
	text-decoration: none;
     color: var(--color_4);
}
.apuntefotover a:hover{
	background: rgba(0,0,0,0.3);
	color: var(--color_6);
}

.marchas{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding-left: 25px;
	padding-bottom: 15px;
}
.marchas li{
	font-size: 17px;
	font-family: georgia, serif;
	font-style: italic;
}
.marchas_disc{
	padding-left: 25px;
	padding-bottom: 15px;
}
.marchas_disc li{
	font-size: 17px;
	font-family: georgia, serif;
	font-style: italic;
}
.autor{
	font-size: 12px;
	font-family: georgia, serif;
	font-style: italic;
	margin-bottom: 8px;
}

.estreno{
	font-size: 13px;
	color: var(--color_7);
	font-weight: bold;
	text-decoration: underline;
	text-decoration-color:  var(--color_1)
}





/*particulares contacto*/
.title{
	color: var(--color_1);
	font-size: 18px;
	font-style: normal;
	text-decoration: underline;
	font-weight: bold;
	padding-bottom: 12px;
	padding-top: 10px;
}
.subtitle{
	color: var(--color_4);
	font-size: 15px;
	font-weight: bold;
	padding-bottom: 3px;
}
.text{
	color: var(--color_4);
	font-size: 13px;
	font-weight: normal;
	padding-bottom: 7.5px;
}

/*SLIDE DE FOTOS. NO CAMBIAR NADA!!!*/
#slides{
	margin: auto;
	max-width: 100%;
	padding-bottom: 25px;
}
.slidesjs-pagination{
	display: flex;
	background: rgba(0,0,0,0.3);
	overflow: hidden;
	padding: 17px;
}
.slidesjs-pagination li{
	display: none;
}
.slidesjs-navigation{
	background: rgba(0,0,0,0.3);
	color: var(--color_2);
	text-decoration: none;
	display: inline-block;
	padding: 9px 10px;
	overflow: hidden;
}
.slidesjs-navigation:hover{
	background: rgba(0,0,0,0.9);
	color: var(--color_2);
}
.slidesjs-previous,.slidesjs-next {
	float: left;
}
.slidesjs-stop,.slidesjs-play {
	float: right;
}

/*pie*/
footer {
	text-align: center;
	width: 960px;
    margin: 0px auto;
    background: rgba(255,255,255,0.1);
}
.redes ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	display: inline-flex;
}
.redes li:hover {
	background: rgba(0,0,0,0.3);
}
.redes li a {
	display: block;
	padding: 8px 10px;
}
.redes img{
	width: 35px;
}
.links a{
	text-decoration: none;
	font-size: 13.5px;
	color: var(--color_2);
	padding: 3px;
}
.links a:hover{
	background: rgba(0,0,0,0.3);
	color: var(--color_6);
}
.pie{
	font-size: 12px;
	font-style: italic;
	color: var(--color_2);
	padding-bottom: 10px;
	padding-top: 5px;
}








/*RESPONSIVE. !!!!!!NO CAMBIAR NADA!!!!!*/


@media (max-width: 959px) {

	/*menu*/
	header {
		background: var(--color_4);
	    background-image: -webkit-linear-gradient(#484041, #12100e); /*GRIS OSCURO, NEGRO*/
	    background-image: -o-linear-gradient(#484041, #12100e);
	    background-image: linear-gradient(#484041, #12100e);   ;
	    -moz-box-shadow: 0 1px 1px var(--color_4) inset;
	    -webkit-box-shadow: 0 1px 1px var(--color_4) inset;
	    -o-box-shadow: 0 1px 1px var(--color_4) inset;
	    box-shadow: 0 1px 1px var(--color_4) inset;
		width: 100%;
	}
	header label {
		display: block;
	}
	.menu {
			position: absolute;
			background: var(--color_4);
		    background-image: -webkit-linear-gradient(#484041, #12100e);/*GRIS OSCURO, NEGRO*/
		    background-image: -o-linear-gradient(#484041, #12100e);
		    background-image: linear-gradient(#484041, #12100e);
		    border: 1px solid var(--color_4);
		    -moz-box-shadow: 0 1px 1px var(--color_4) inset;
		    -webkit-box-shadow: 0 1px 1px var(--color_4) inset;
		    -o-box-shadow: 0 1px 1px var(--color_4) inset;
		    box-shadow: 0 1px 1px var(--color_4) inset;
		    color: white;
		    width: 35%;
		    margin-left: -50%;
		    transition:  all 0.3s;
		}
	.menu ul {
		flex-direction: column;
	}
	#btn-menu:checked ~ .menu {
		margin: 0px;
	}

	/*banner*/
	#banner img {
		max-width: 100%;
	}

	/*contenido*/
	#contenido{
		max-width: 100%;
	}
	#contenido article{
		padding-right: 25px;
		padding-left: 25px;
	}
	.mapa iframe{
		max-width: 100%;
	}
	.discografia{
		max-width: 100%;
	}
	/*footer*/
	footer{
		max-width: 100%;
	}
}