/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* --------------------   ESTILOS GLOBALES    ----------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

:root {/* LLAMADAS DE LA WEB */
/* Paleta de colores de esta web */
    --azulBase: #2361d2;
    --azulOscuro: #083ea1;
    --azulClaro: #d5dff3;
    --Negrogris: #222222;
/* Tipografias de esta web */
    --fuenteTitulos: "PT Sans", sans-serif;
    --fuenteParrafos: "Open Sans", sans-serif;
}


body {/*DECORACIÓN BASE*/
    background-color: var(--azulClaro);/*color de fondo*/
    font-family: var(--fuenteParrafos);/*tipografia de los textos de base*/
    line-height: 1.5;/*gran interlineado de los textos en general*/
    }


/* COLOR DE LETRA Y FONDO PA CUANDO SE SEÑALE EL TEXTO*/
::-moz-selection {background: var(--azulOscuro); color: var(--azulClaro); text-shadow: none}
::selection {background: var(--azulOscuro); color: var(--azulClaro); text-shadow: none}


/*DECORACIÓN BÁSICA DE TEXTOS*/
h1, h2, h3, h4 {/*Decoracion Títulos*/
    font-family: var(--fuenteTitulos);
    line-height: 1.2;/*pequeño interlineado en títulos (x si caen de renglon)*/
}

h1 {font-size: 4rem; /*40px*/}

h2 {font-size: 3.2rem;/*32px*/}

h3 {font-size: 2.4rem;/*24px*/}

p {/*Decoracion Párrafos*/
    font-family: var(--fuenteParrafos);
    font-size: 1.8rem;
}


/*CLASES PARA RECURRIR EL HTML*/
.contenedor {/*Contenedor de esta web*/
    max-width: 64rem;/*1.200px de ancho*/
    width: 100%;
    margin: 0 auto;/*centrada*/
    padding: 0 2rem; /*y con padding a los lados pal movil*/
    /*background-color: rgba(0, 111, 255, 0.4);*/
}

.contenedor-color {padding: 8rem 0}/*Si va un color al 100%, qe tenga pading*/

.top {margin-top: 4rem }/*Margen de arriba para poner en cada Section de la web*/


.titular {text-align: center; padding-bottom: 5rem; font-weight: 600; color: black}

img {width: 100%;}

.boton {color: white; font-weight: bold;
padding: 1rem 3rem; text-align: center}
    
.bton-100 {display: block;}
    
.btn-azul {background: var(--azulBase)}
.btn-amarillo:hover {background: var(--azulOscuro)}
    

/*FONDO PROCEDURAL DE TODA LA WEB*/
#luces-procedulares, #ondas-procedulares {position: fixed; display: block;
top: 0; left: 0; width: 100%; height: 100%; z-index: 1}
    
.cabecera, .pie, .contenedor {z-index: 2;}
    
.ondas-sutiles {opacity: 0.3}
.luces-sutiles {opacity: 0.7}







/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ------------------------   CABECERA    --------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

.cabecera {display: flex; justify-content: center; padding: 2rem;
background: linear-gradient(to bottom right, 
    #eef1fb 10%,   /*parte superior izquierda */
    #aad3e6 40%,   /*parte inferior derecha */
    #2361d2 80%,   /*parte inferior izquierda */
    #083ea1 100%); /*parte superior derecha */
}

.cabecera img {width: 5.2rem;}

.cabecera h1 {font-size: 3.5rem; margin-top: 2px; margin-left: 13px;
color: var(--azulOscuro);}

.cabecera span {color: var(--azulBase)}







/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* --------------------------  INICIO  -----------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

/*Ruta en la que te encuentras (Inicio)*/
.breadcrumbfalso {font-size: 2.8rem; color: var(--azulOscuro); font-weight: 700;
text-align: center; margin-bottom: 2rem}

/*Estilo de los botones*/
#genres {text-align: center;}
#genres button {background: var(--azulBase); color: white; border-radius: 25px;
padding: 1.2rem 2.7rem; font-size: 1.7rem; font-weight: 500; margin: 0.6rem}

#genres button:hover {background: var(--azulOscuro);}










/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------  CADA GÉNERO  ---------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

/*Ruta en la que te encuentras*/
#breadcrumb {text-align: center; margin-bottom: 2rem}
#breadcrumb a {font-size: 2.8rem; color: var(--azulOscuro); font-weight: 500;
margin-bottom: 2rem; text-decoration: underline}
#breadcrumb a:hover {color: black}
#breadcrumb span {font-size: 2.8rem; color: var(--azulOscuro); font-weight: 700;
margin-bottom: 2rem}


/*Cada botón del Disco a pulsar*/
.portada-disco {width: 100%; display:grid; grid-template-columns: 1fr 3fr;
align-items: center; background: var(--azulBase); cursor: pointer; border-radius: 5px;
margin-bottom: 10px}

.portada-disco:hover {background: var(--azulOscuro)}

.portada-disco img {margin-left: -5px;}
.portada-disco p {color: white; font-size: 2.5rem; margin: 0 1rem}

@media (max-width: 500px) {
    .portada-disco p {font-size: 1.8rem;}
}


/*Zoom en imagen al hacer hover*/
.portada-disco {overflow: hidden}
.portada-disco img {transition: transform 0.3s ease}
.portada-disco:hover img {transform: scale(1.1)} /* Escala la imagen al 110% */









/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------  CADA DISCO  ---------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

/*Separación del Título del Disco de la Ruta*/
.cadadisco #breadcrumb span {display: block; font-size: 3.8rem; margin-top: 3rem; 
text-shadow: 0px 0px 0px #d5dff352, 0 0 0px #d5dff352, -0.1px 0.1px 5px #d5dff352, 0.1px 0.1px 5px #d5dff352; margin-bottom: 7rem;}


/*COLOR Azul degradado encima de la imagen del artista de fondo*/
.fondo-azul {background: linear-gradient(0deg, #083ea1ab 0%, #d5dff3c9 100%);
position: fixed; width: 100%; height: 100%; z-index: -1}


/*Imagen del artista de fondo*/
#poneimagen {position: fixed; width: 100%; height: 100%; background-size: cover;
background-position: center; background-repeat: no-repeat; z-index: -2;
/*imagen pequeña en PC*/max-width: 600px; left: 50%; margin-left: -300px;
}
/*imagen al 100% en Móvil*/
@media (max-width: 600px) {#poneimagen {max-width: 100%; left: 0; margin-left: 0}}



/*Cada botón de canción*/
#songList {margin-bottom: 6rem; padding: 0 10rem}/*poca anchura en PC*/
@media (max-width: 600px) {#songList {padding: 0 2rem}}/*anchura 100% en Movil*/

#songList li {padding: 10px; margin: 15px 0; background: #f6f9ffb5;
border-radius: 5px; cursor: pointer}

#songList li:hover {background: #f0f0f0 !important}



/*REPRODUCTOR DE MÚSICA DEL NAVEGADOR*/
#audioPlayer {position: fixed; bottom: 0; left: 0; background: #f2f3f4;
width: calc(100% + 35px); /*ocupa el 100% + 40px pa ocultar boton "descarga"*/
z-index: 4 /*pa qel z-index funcione y se ponga encima del pie: tiene qe ir al final de la web*/}











/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------  INFORMACIÓN  ---------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

.contenedor.info {max-width: 85rem}/*contenedor mas ancho*/

.info h2 {font-size: 2.9rem; color: var(--azulOscuro); font-weight: 700; text-align: center; margin-bottom: 1rem}

.info h2 span {font-size: 2rem}

.info p {margin-bottom: 0.6rem}

.info .texto-uno {margin-top: 1.5rem}
.info .texto-dos {margin-top: 7.5rem}
.info .texto-tres {margin-top: 7.5rem; margin-bottom: 3rem;}

.info h3 {font-size: 2.15rem; font-weight: 500; margin-bottom: 0.5rem}
.info .parrafo p {margin-left: 4rem; margin-top: 0.4rem; text-align: justify;
margin-bottom: 1rem;}

.parrafo {margin-bottom: 2.4rem;}

.enlace-descarga-app {text-align: center}
.enlace-descarga-app a {color: black; text-decoration: underline; font-weight: 500;}







/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ----------------------   PIE DE PÁGINA    -----------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

/* ----------------- Pie de pag pegado abajo ------------------*/
.contenedor-pie-abajo {display: flex; flex-direction: column;
min-height: 100vh; /*Mínimo alto igual al viewport*/}
.contenido-pal-pie {flex: 1}/*Si hay poco contenido: empuja Footer abajo*/


.pie {padding: 2rem 0; text-align: center;
background: linear-gradient(to bottom right, 
    #083ea1 0%,   /*parte superior izquierda */
    #2361d2 20%,   /*parte inferior derecha */
    #aad3e6 60%,   /*parte inferior izquierda */
    #eef1fb 90%); /*parte superior derecha */
}

.pie p {color: var(--Negrogris); font-weight: 400; font-size: 1.6rem}
.pie a {color: var(--Negrogris); font-weight: 600; font-size: 1.5rem; text-decoration: underline}

.pie a:hover {color: white}

.finpie {margin-top: 1.5rem;}

.piedisco {margin-bottom: 5rem}