/* Codificación UTF-8, no funciona en Edge o IExplorer en alguna vers, pero si en todos los demás browsers (con CSS3) desde aproximadamente 2005/6. Desde la 1.5 de Firefox por ejemplo... */
@charset "UTF-8";

/**** Quitar márgenes predefinidos ****/
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    /* "box-sizing: border-box" >> Se usa para que un contenedor que ocupa un ancho, como el 100%, no sobrepase dicho ancho teniendo un padding de por ejemplo 5%, lo que daría 105% */
}


/********************* ESTILOS NORMALES GENERALES RESPONSIVE (TODAS) **********************/

/*************** < -768PX	Por defecto para móviles(pantallas reducidas): ***************/
/* Desde 767px hacia abajo hasta la anchura mínima, todas las demás resoluciones */
/* En selector de body irán las propiedades 
    por defecto para que las hereden otros tags */
body {
    font-family: 'RobotoSlab-Regular', "Times New Roman";
    color: #333;
    font-size: 85%;
}

/* MENU */
nav {
    width: 100%;
    padding: 5% 0;
    display: flex;
    justify-content: center;
}

/****     ul#menu >> dentro de nav    ****/
ul#menu {
    list-style: none;
    width: 50%;
    height: 30px;
    display: flex;
    justify-content: center;
}

ul#menu li {
    font-family: 'RobotoSlab-Light';
    font-size: 112.5%;
    padding: 5px 3.75% 4.5px 3.75%;
}

ul#menu li:hover {
    border-bottom: 2px solid rgba(15, 15, 15, 0.8);
}

/* Desactivar "display: none" comentándolo para que se visualice logo en móviles, etc. */
ul#menu li#logo {
    /*! display: none; */
}

ul#menu li#logo:hover {
    border-bottom: none;
}

ul#menu li#logo img {
    height: 35px;
    position: relative;
    top: -80%;
    left: 15px;
}

ul#menu a {
    /* Hereda "font-size: 164.5%" del li css */
    text-decoration: none;
    color: #222;
}

/* CABECERA */
header {
    display: flex;
    justify-content: center;
    border-bottom: 2.85px solid #222;
    margin: 3.5% 0 3.5% 0;
    padding-bottom: 4%;
}

header h1 {
    font-family: "Van Helsing";
    font-size: 275%;
    letter-spacing: 5.85px;
}

header #tituloh1 {
    animation: latir 2.25s alternate infinite ease-in-out;
    color: #111;
}

@keyframes latir {
    from {
        letter-spacing: 10px;
        transform: scale(100%);
    }

    to {
        letter-spacing: 15px;
        transform: scale(110%);
    }
}

/* PIE */
footer {
    /* margin-bottom temporal para poder visualizar hover en el diseño */
    width: 100%;
    padding: 20px 0;
    border-top: 2.85px solid #222;
    display: flex;
    justify-content: center;
}

footer ul#redsoc {
    width: 50%;
    height: 27px;
    list-style: none;
    display: flex;
    justify-content: center;
}

ul#redsoc li {
    /* NO Hereda "font-family:" del body CSS. Span usa las fuentes Fontello importadas */
    font-size: 120.25%;
    padding: 0.25% 6.5%;
}

ul#redsoc li:hover {
    border-bottom: 2px solid rgba(30, 30, 30, 0.7);
}

ul#redsoc a {
    text-decoration: none;
}

ul#redsoc span {
    padding: 0.25%;
    border-radius: 4.5%;
}

ul#redsoc span.shadow {
    padding: 3.5%;
    box-shadow: 1px 1px 10px 3px rgba(40, 40, 40, 0.45);
    opacity: 0.75;
    border-radius: 5px;
    transition: 0.45s ease-in-out;
}

ul#redsoc span.shadow:hover {
    box-shadow: 0px 0px 10.5px 5px rgba(40, 40, 40, 0.45);
    opacity: 1;
}

ul#redsoc span#facebook {
    color: #395898;
}

ul#redsoc span#twitter {
    color: #29A8DF;
}

ul#redsoc span#instagram {
    color: #FDFDFA;
    background: linear-gradient(195deg, #8341C2 10%, #C0308A 40%, #FABA52 85%);
}

ul#redsoc span#instagram:hover {
    background: linear-gradient(173deg, #8341C2 10%, #C0308A 45%, #FABA52 80%);
}

ul#redsoc span#youtube {
    color: #FF3D00;
}

/* CUERPO */
/*             Inicio - Home     */
main#table {
    /* Para mostrar divs que actuan como tablas >> display: table */
    display: table;
    width: 75.95%;
    /* Para centrar el contenedor >> margin: 0 auto >> eje horizontal centra con auto; */
    margin: 0 auto;
    padding: 1.5%;
}

main .tr {
    /* Inserta div que se comporta como fila en tabla div de arriba. >> display: row */
    display: table-row;
}

main #tr-flex {
    /* id="tr-flex" >> Segun tamaño responsive, es un div tipo fila o es flexbox d column */
    display: flex;
    flex-direction: column;
    align-items: center;
}

main .td {
    /* div que se comporta como una celda / td >> display: table-cell. */
    display: table-cell;
}

main#table .tr:first-child h1 {
    font-size: 187.95%;
}

main#table h1,
main#music figcaption h1 {
    /*     Reutilizado en el título de figcaption en map de imagen de música. */
    font-family: "Van Helsing";
    font-size: 185.95%;
    margin: 20px 0;
    text-align: center;
    letter-spacing: 3.5px;
    text-shadow: 3.5px 3.5px 5.5px;
}

main#table p {
    font-size: 87.85%;
    margin-bottom: 5.5%;
    text-align: justify;
}

main#table #imgBio {
    width: 99.5%;
    border-radius: 2.25%;
    opacity: 0.95;
}

main#table #imgQBrecords {
    clear: both;
    width: 75.85%;
    border-radius: 20% 15.5% 37.5% 37.5%;
    margin: 0.085% 0;
}

/*             - Fotos -     */
main#photos,
main#music,
main#videos {
    /*     Reutilizado en el main de música y vídeos. */
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

main#photos .tiraImgs {
    display: flex;
    flex-direction: column;
    width: 95.5%;
    align-items: center;
    padding: 0 2.5%;
    margin: 1.25% 0;
}

.tiraImgs figure {
    width: 95.5%;
}

.tiraImgs img,
.tiraImgs figure figcaption {
    width: 100%;
}

main#photos .tiraImgs figure figcaption {
    font-size: 130.5%;
    font-family: 'Van Helsing', 'RobotoSlab-Thin';
    text-align: center;
    letter-spacing: 2.25px;
    font-weight: bold;
    transition: 0.75s ease-in-out
}

main#photos .tiraImgs figure:hover figcaption {
    text-shadow: 3.5px 3.5px 5.5px;
    text-decoration: underline;
}

main#photos .tiraImgs img {
    margin: 3.5% 0;
    border-radius: 5px;
    opacity: 0.85;
    border: 3.5px solid rgba(44, 44, 44, 0.25);
    transition: 0.75s ease-in-out;
}

main#photos .tiraImgs img:hover {
    opacity: 1;
    border: 3.5px solid rgba(63, 123, 76, 0.67);
    box-shadow: 3.5px 3.5px 5.5px;
}

/*             - Música -     */
.tablamusica {
    width: 55%;
}

.imagendisco {
    width: 150px;
    height: auto;
    margin: 15.5% 0;
    border-radius: 5.5px;
}

.anidada {
    width: 100%;
    text-align: center;
}

/*             - Vídeos -     */
main#videos h3 {
    margin-bottom: 2%;
}

iframe.videos,
video.videos {
    width: 85%;
    height: 312px;
    border-radius: 7px;
    margin-bottom: 5.25%;
}

/*             - Contacto -     */
main#contacto {
    width: 60.5%;
    margin: 0 auto;
}

main#contacto form {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.TextSeccion {
    /* Reutilizado en Música para span título << .TextSeccion */
    width: 55%;
    margin: 0 0 5.75% 0;
}

form legend,
.TextSeccion {
    font-size: 115%;
    font-family: 'RobotoSlab-Bold';
    color: #555;
    text-align: center;
    letter-spacing: 5.5px;
    box-shadow: 0px 8px 8.5px 0px;
    border-radius: 5px;
}

form label,
form input,
form textarea {
    font-size: 85.5%;
    padding: 1%;
    border-radius: 4px;
}

form input,
form textarea {
    font-family: inherit;
    /* inherit, hereda font-family del body >> RobotoSlab-Regular */
    color: #353535;
}

form input:focus,
form textarea:focus {
    box-shadow: 1.5px 2.5px 7px;
}

form label {
    display: inline-block;
    font-family: 'RobotoSlab-Bold';
    color: #555;
    letter-spacing: 1.25px;
}

form legend,
form label,
form input[type="text"],
form input[type="email"] {
    flex-basis: 97.25%;
    flex-grow: 1;
}

form legend {
    margin: 0 1.25% 7.5% 0;
}

form input[type="text"],
form input[type="email"] {
    margin: 0 1.25% 2.5% 0;
}

form label[for="mensaje"],
form textarea {
    flex-basis: 97.25%;
    flex-grow: 2;
    margin-right: 1.25%;
}

form input[type="submit"] {
    flex-basis: 15%;
    font-family: 'RobotoSlab-Light';
    padding: 0.7% 1.5%;
    margin: 3% 0;
    order: 1;
    transition: 0.5s ease-in-out;
    cursor: pointer;
    opacity: 0.7;
}

form input[type="submit"]:hover {
    color: #f4e4dad6;
    background: #BD5D18B5;
    font-weight: bold;
    box-shadow: 4.5px 4.5px 1.5px;
    opacity: 1;
}

.obligatorio {
    color: #8A2405;
    font-weight: bold;
}

/* Organización elementos de formulario para responsive móviles */
form legend {
    order: -9;
}

form label[for="Nombre"] {
    order: -8;
}

form label[for="apellidos"] {
    order: -6;
}

form input[name="nombre"] {
    order: -7;
}

form input[name="apellidos"] {
    order: -5;
}

form label[for="email"] {
    order: -4;
}

form label[for="asunto"] {
    order: -2;
}

form input[name="email"] {
    order: -3;
}

form input[name="asunto"] {
    order: -1;
}

form label[for="mensaje"] {
    order: 0;
}

form textarea[name="mensaje"] {
    order: 0;
}

/************* > +768PX	Responsive para movil(horizontal) y tablet(vertical): *************/
/* Desde 768px hasta 1024px de ancho */
@media (min-width:768px) {

    /* "@media()" >> media queries: Son elementos de código CSS para adaptar la visualización o renderización de la web a distintas pantallas de diferentes medios y tamaños */
    body {
        font-size: 92.5%;
    }

    /* MENU */
    nav {}

    /* "max-width" Sirve para establecer ancho máximo en pantallas de resolución muy alta */
    /* "min-width" Sirve para establecer ancho mínimo en el caso opuesto */
    ul#menu {
        max-width: 800px;
        height: 35px;
    }

    ul#menu li {
        /* Hereda "font-family: Tahoma" del body css */
        font-size: 145.15%;
        padding: 5px 3.75% 5px 3.75%;
    }

    ul#menu li#logo {
        display: block;
        padding: 5px 0.15% 4.5px 0.15%;

    }

    ul#menu li#logo img {
        height: 70px;
        position: relative;
        top: -80%;
    }

    /* CABECERA */
    header {
        border-bottom: 3.35px solid #222;
    }

    header h1 {
        font-size: 335%;
        letter-spacing: 6.7px;
    }

    /* PIE */
    footer {
        border-top: 3.35px solid #222;
    }

    footer ul#redsoc {
        max-width: 800px;
        height: 37px;
    }

    ul#redsoc li {
        /* NO Hereda "font-family:" del body CSS. Span usa las fuentes Fontello importadas */
        font-size: 137.75%;
        padding: 1.1% 5.15%;
    }

    /* CUERPO */
    /*         Inicio - Home     */
    main#table {
        width: 41.75%;
    }

    main #tr-flex {
        display: table-row;
    }

    main#table .tr:first-child h1 {
        font-size: 195.85%;
    }

    main#table h1,
    main#music figcaption h1 {
        /*     Reutilizado en el título de figcaption en map de imagen de música. */
        font-size: 195.5%;
    }

    main#table p {
        font-size: 89.95%;
    }

    main#table #imgQBrecords {
        width: 39.109%;
        float: right;
        shape-outside: margin-box;
        margin: 0.0025% 0.005% 0 0.5%;
    }

    /*
* shape-outside >> Sirve para permitir que el texto que rodea a una imagen o contenedor pueda rodearlo con su forma, ya sea circular, oval o con diversas formas. Dicha propiedad se aplica sobre la imagen o contenedor div, no sobre el texto que la rodea.
    >> Propiedades valor: 
        * margin-box: Toma como referencia las formas a partir del margen externo.
        * border-box: Hace lo mismo pero a partir del borde externo, lo cual lo junta mas.
        * content-box: Igual pero a partir de su contenido, con lo cual aun queda mas junto.
        * url(<urlimage>): Toma como referencia para las formas la imagen transparente hasta llegar a su contenido y sobrepasando las transparencias. También con imagen sin.
        * circle(), ellipse(), polygon() >> Formas personalizadas con funciones & coordens.
    
* shape-image-threshold. Permite definir a partir de cuándo se entiende que sebe      adaptarse la imagen, ajustando a la transparencia. 0.5 indica que el límite para adaptar el texto será cuando la transparencia sea del 50%.
    
* shape-margin. Sirve para provocar un espaciado entre la forma y los elementos que se coloquen al lado.
*/

    /*         - Fotos -     */
    main#photos {
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* flex-wrap: wrap; >> Los elementos - flex se muestran en varias filas (si es necesario), de izquierda a derecha y de arriba abajo. */

    /* flex-wrap: wrap-reverse; >> Los elementos - flex se muestran en varias filas (si es necesario), de izquierda a derecha y de abajo arriba. */

    main#photos .tiraImgs {
        flex-basis: 48%;
    }

    /* flex-basis: auto | <width>; >> Esta propiedad tiene los mismos valores que las propiedades width y height y especifica el tamaño principal del elemento - flex, distribuyéndose de acuerdo con los factores flex. */

    main#photos .tiraImgs figure figcaption {
        font-size: 132.5%;
    }

    /*         - Música -     */
    .imagendisco {
        width: 285px;
        height: auto;
    }

    .anidada {
        width: 100%;
        text-align: center;
    }

    /*         - Vídeos -     */
    iframe.videos,
    video.videos {
        width: 60.75%;
        height: 355px;
    }

    /*             - Contacto -     */
    form legend,
    .TextSeccion {
        font-size: 145.85%;
    }

    form label,
    form input,
    form textarea {
        font-size: 95.5%;
    }

    form label,
    form input[type="text"],
    form input[type="email"] {
        flex-basis: 47.8%;
    }

    /* Organización elementos de formulario para responsive tablets y escritorio */
    form label[for="apellidos"] {
        order: -7;
    }

    form input[name="nombre"] {
        order: -6;
    }

    form input[name="apellidos"] {
        order: -5;
    }

    form label[for="email"] {
        order: -4;
    }

    form label[for="asunto"] {
        order: -3;
    }

    form input[name="email"] {
        order: -2;
    }

}


/******************* > +1024PX	Responsive para escritorio-horizontal: *******************/
/* Desde 1024px de ancho en adelante, altas resoluciones */
@media (min-width:1024px) {
    body {
        font-size: 95%;
    }

    /* MENU */
    /**/
    /* "max-width" Sirve para establecer ancho máximo en pantallas de resolución muy alta */
    /* "min-width" Sirve para establecer ancho mínimo en el caso opuesto */
    ul#menu {
        max-width: 1024px;
        height: 38px;
    }

    ul#menu li {
        /* Hereda "font-family: Times New Roman" del body css */
        font-size: 160.5%;
        padding: 5px 3.75% 5px 3.75%;
    }

    ul#menu li#logo img {
        height: 90px;
        top: -100%;
    }

    /* CABECERA */
    header {
        border-bottom: 5px solid #222;
    }

    header h1 {
        font-size: 500%;
        letter-spacing: 10px;
    }

    /* PIE */
    footer {
        border-top: 5px solid #222;
    }

    footer ul#redsoc {
        max-width: 1024px;
        height: 45px;
    }

    ul#redsoc li {
        /* NO Hereda "font-family:" del body CSS. Span usa las fuentes Fontello importadas */
        font-size: 155.25%;
        padding: 1.15% 3.75%;
    }

    /* CUERPO */
    /*         Inicio - Home     */
    main#table {
        width: 43.5%;
    }

    main#table .tr:first-child h1 {
        font-size: 225%;
    }

    main#table h1,
    main#music figcaption h1 {
        /*     Reutilizado en el título de figcaption en map de imagen de música. */
        font-size: 205%;
    }

    main#table p {
        font-size: 95.5%;
    }

    /*         - Fotos -     */
    main#photos {
        flex-wrap: nowrap;
        align-items: baseline;
    }

    /* flex-wrap: nowrap; >> Los elementos - flex se muestran en una fila y se pueden encoger dependiendo de su contenedor - flex. Con lo cual no sería necesario poner un width a las tiras de imágenes para esta resolución, ya que auto ajusta los anchos. */

    main#photos .tiraImgs figure figcaption {
        font-size: 127%;
    }

    /*         - Música -     */
    .imagendisco {
        width: 450px;
        height: auto;
    }

    .anidada {
        width: 100%;
        text-align: center;
    }

    main#music figure {
        margin-bottom: 2.5%;
    }

    /*         - Vídeos -     */
    iframe.videos,
    video.videos {
        width: 57.316%;
        height: 424px;
    }


    /*        --- Selectores Avanzados ---     */

    /* Selector descendente directo: 
        p > span {} >>> Para seleccionar un elemento que es hijo directo de otro elemento */
    /* */
    /* Selector adyacente (contigüo): 
        elemen1 + elemen2 { ... } >>> Para seleccionar elementos que en el código HTML de la página se encuentran justo a continuación de otros elementos. */
    /* */
    /* Selector de atributos: 
        a[href="http://www.ejemplo.com"] { color: blue; } >>> Para seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos. */
    /* */
    /* */
    /* Selector básico universal (combinación): 
        p * a { color: red; } >>> Para seleccionar elementos <a href> (enlaces) que estén dentro de cualquier tag de un tipo y, a su vez, ese tag no definido, esté dentro de un <p> (parrafo). Ejemplo ... >> <p><span(*)><a href="#">Enlace</a></span></p> */
    /* */
    /* Fuente: https://uniwebsidad.com/libros/css/capitulo-2/selectores-avanzados */

}