/*----------------------------------------
¡Hola! Aquí encontrarás la 
estructura de este archivo .css :-)

——> Reset
——> Variables
——> Header
——> Main
——> Footer
----------------------------------------*/


/*-------------- RESET START --------------*/
* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;}

li { list-style: none;}

/*-Heredan propiedades del body-*/
h1, h2, h3, h4, h5, h6, strong{
    font-size: inherit;
    font-weight: inherit;}

a {
    display: block;
    color: inherit;
    text-decoration: none;}

/*-En caso de que haya enlaces en párrafos-*/    
p a {display: inline;}

img, video, iframe {
    display: block;
    max-width: 100%;
    width: 100%;}  

svg {
    display: block;
    fill: currentColor;}    

/*-Para formularios-*/
form, input, textarea, label, button, fieldset, legend, select{
    background-color: transparent;
    color: inherit;
    display: block;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;}

    /* textarea, input, label {width: 100%;}     */

:root {
    font-size: 100%;
    font-family: 'Roboto', sans-serif;
    color: var(--color-black);

    /*---[VARIABLES]---*/
    /*-Colores principales-*/
    --color-black: #1C1C1C;
    --color-black-opacity: #1c1c1c45;
    --color-grey: #3e3e3e;
    --color-yellow: #FFB94F;
    --color-red: #DF4949;
    --color-blue: #43A7FF;
    --color-green: #95D950;
    --color-white: #FFFFFF;
    --color-white-opacity: #FFFFFF45;
    --color-background-white:#ffffffc2;
    
    /*-Colores específicos sección-*/
    --color-nina:#ff698f;
    --color-lewis:#892234;
    --color-orestes:#2B4894;
    --color-fede:#4BA72A;
    --color-arame:#FB6600;
    --color-toshe:#445DFB;
    --color-elmo:#CD1C2C;


    /*-Medidas estándar-*/
    --width-1150: 71.875rem;
    --width-750: 46.875rem;
    --width-570: 35.625rem;
    --width-350: 21.875rem;

    /*-Font families-*/
    --font-family-roboto: 'Roboto', sans-serif;
    --font-family-ezcar: 'Eczar', serif;

    /*-Tamaños Fonts-*/
    --font-h1-size: 3.375rem;
    --font-h2-size: 3rem;
    --font-h3-size: 2.5rem;
    --font-h4-size: 1.5rem;
    --font-h5-size: 1.25rem;
    --font-h6-size: 1rem;
    --font-smaller-size: .8rem;

    /*-Pesos Fonts-*/
    --font-bolder: 900;
    --font-bold: 700;
    --font-semibold: 600;
    --font-medium: 500;

    /*-Variantes fonts-*/
    --font-smallcaps: all-small-caps;
    --font-uppercase: uppercase;
    
    /*-Transforms-*/
    --transform-scale-up: scale(1.05);
    --transform-scale-down: scale(0.95);
    
    /*-Transitions-*/
    --transition-gen: all .2s ease-in-out;

    /*-Otros-*/
    --text-shadow-gen: .4rem .2rem .5rem rgba(0, 0, 0, 0.267);
    --box-shadow-gen: .5rem .4rem .5rem 0rem var(--color-black-opacity);
}

html{ scroll-behavior: smooth;}

body {
    background: url(../assets/fondo_cuadros.png);
    background-repeat: repeat;
    font-size: 100%;
    position: relative;}
/*-------------- RESET END --------------*/


/*
BUG: El header no se adapta bien, como no tengo
     mucho tiempo per se he decidido ponerle 
     una anchura del 100% para evitar problemas
*/
/*-------------- [HEADER] --------------*/
.Header {
    width: 100%;
    min-height: 4.375rem;
    background-color: var(--color-red);

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 5rem;

    position: fixed;
    top:0;
    left: calc(50% - (100% / 2));
    z-index: 5; /*-Pongo el 5 para darle margen de sobra
                   al header, de manera que no se superpongan
                   otros elementos-*/
}
.Header-img{max-height: 4.375rem;}
.Header-ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4.6875rem;
}
.Header-link, .Header-button {
    color: var(--color-white);
    font-size: var(--font-h4-size);
    font-weight: var(--font-semibold);
    font-variant: var(--font-smallcaps);

    border-bottom: 5px solid transparent;

    transition: var(--transition-gen);}

.Header-button {
    cursor: pointer;
    
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}
.Header-svg {width: 1rem;}
/*-Preparación para Js
   ——>El svg girará cuando salga el dropdown menu-*/
.Header-svg.isActive{transform: rotate(180deg);}

.Header-link:active, .Header-button:active { color: var(--color-black-opacity)}
.Header-link:hover, .Header-button:hover { border-bottom: 5px solid var(--color-white)}

.Header-menu{ position: relative; }
.Header-dropdown {
    background-color: var(--color-black);
    color: var(--color-red);
    width: 12.5rem;

    border-radius: .625rem;
    border: 3px solid var(--color-red);

    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: flex-start;
    
    opacity: 0;
    pointer-events: none;

    position: absolute;
    left: calc((100% - 12.5rem) / 2);
    top: 120%;

    transition: var(--transition-gen);
}
.Dropdown-link {
    width: 100%;
    padding: 1rem .5rem;
    
    font-size: var(--font-h6-size);
    font-weight: var(--font-medium);
    
    transition: var(--transition-gen);
}
.Dropdown-link::before{content: '✦ ';}

/*-Ajustes para el hover de los enlaces
   del dropdown menu, de manera que no
   se estropee el border radius      -*/
.Dropdown-link:hover{
    background-color: var(--color-red);
    color: var(--color-black);}
.Dropdown-link:active {background-color: var(--color-white);}
.Dropdown-link:first-child:hover{border-radius: .3rem .3rem 0 0;}
.Dropdown-link:last-child:hover{border-radius: 0 0 .3rem .3rem;}

.Header-dropdown.isActive {
    opacity: 1;
    pointer-events: initial;
}

/*-Menú responsive-*/
.Responsive {display: none;}

.Responsive-svg {width: 2rem; color: var(--color-black); transition: var(--transition-gen); cursor: pointer;}
.Responsive-svg:hover {color: var(--color-white);}
.Responsive-svg:active {transform: var(--transform-scale-down);}

.Responsive-menu {
    width: 85%;
    min-height: 100px;
    background-color: var(--color-white-opacity);

    padding: 1rem;
    border-radius: 0 0 1rem 1rem;

    opacity: 0;
    pointer-events: none;

    position: absolute;
    left: calc(50% - (85% / 2));
    top: 4.375rem;

    backdrop-filter: blur(.2rem);
    box-shadow: var(--box-shadow-gen);
    transition: var(--transition-gen);
}
.Responsive-menu.isActive {
    opacity: 1;
    pointer-events: initial;}
.Responsive-ul {
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}
.Responsive-li {
    width: 100%;
    background-color: var(--color-black);
    border-bottom: 4px solid transparent;
    
    border-radius: 1rem;
}

.Responsive-juegos {
    margin-top: -2rem;
    padding: 1.5rem 1rem 1rem;
    border-radius: 0 0 1rem 1rem;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 1rem;
}
.Responsive-link {
    width: 100%;
    min-height: 100%;
    color: var(--color-white);

    padding: .5rem;
    border-radius: 1rem;

    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;

    font-size: var(--font-h6-size);
    font-weight: var(--font-bold);

    text-align: center;
}

.Responsive-a, .Responsive-h5 {
    color: var(--color-white);
    padding: 1rem;

    font-size: var(--font-h5-size);
    font-weight: var(--font-bold);
    text-transform: var(--font-uppercase);
    text-align: center;
}

.Responsive-li, .Responsive-link, .Responsive-a{ transition: var(--transition-gen);}
.Responsive-a:hover{color: var(--color-red);}
.Responsive-li:hover{border-bottom: 4px solid var(--color-red);}
.Responsive-link:hover{
    background-color: var(--color-red);
    color: var(--color-black);
    transform: var(--transform-scale-up);}
.Responsive-a:active, .Responsive-link:active {transform: var(--transform-scale-down);}
/*-Menú responsive-*/


/*-------------- [MAIN] --------------*/
.Main {
    margin: 4rem 0;
    min-height: 80vh;
}

/*-Introducción-*/    
.Intro {
    /* background-color: lightgrey; */
    max-width: var(--width-1150);
    padding: 5rem 0 10rem;
    margin: auto;

    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;

    position: relative;
    z-index: 1;
}
.Intro-h2 {
    font-family: var(--font-family-ezcar);
    font-size: var(--font-h1-size);
    font-weight: var(--font-bold);
    font-variant: var(--font-smallcaps);
    line-height: 1;
}
.Intro-h3 {
    font-size: var(--font-h4-size);
    font-weight: var(--font-medium);
    font-variant: var(--font-smallcaps);
    line-height: 1;
}
.Intro-h3, .Intro-p {
    max-width: var(--width-570);
    padding: 0 1rem 0;

    border-left: .5rem solid var(--color-grey);}

.Intro-img {
    max-width: 28.75rem;

    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    animation: introImg 1.2s ease-in-out infinite alternate;
}
@keyframes introImg {
    from{transform: translateY(1rem);}
    to{transform: translateY(0);}
}

/*-Lightbox-*/
.Gallery {
    background: url(../assets/fondo_seccion_roboclub.jpg);
    background-size: cover;
    background-attachment: fixed;
    padding: 4rem 0 5rem;
    margin: auto;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.Gallery-h2 {
    text-align: center;

    font-family: var(--font-family-ezcar);
    font-size: var(--font-h2-size);
    font-weight: var(--font-bold);
    font-variant: var(--font-smallcaps);
    line-height: 1;
}
.Gallery-h4 {
    max-width: var(--width-570);
    padding: 0 .5rem;

    font-size: var(--font-h4-size);
    font-weight: var(--font-medium);
    text-align: justify; /*Solo para desktop, se cambia en responsive*/

    border-left: 1rem solid white;    
    border-right: 1rem solid white;    
}
    
.Gallery-h2, .Gallery-h4 {color: var(--color-white); text-shadow: var(--text-shadow-gen);}

.Gallery-ul {
    width: 100%;
    max-width: var(--width-1150);
    padding: 2.5rem 0;
    margin: 1.5rem auto;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    align-items: center;
    gap: 2rem;
}
.Gallery-img {
    background-color: var(--color-background-white);
    width: 100%;

    box-shadow: var(--box-shadow-gen);
    border-radius: 1rem;

    cursor: pointer;
    transition: var(--transition-gen);}
.Gallery-img:hover{ transform: rotate(1deg) var(--transform-scale-up);}
.Gallery-img:active{ transform: rotate(-1deg) var(--transform-scale-down);}


/*-Slider dentro de lightbox-*/
.Lightbox {
    background-color: var(--color-black-opacity);
    width: 100%;
    min-height: 100%;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;

    opacity: 0;
    pointer-events: none;
    backdrop-filter: blur(.2rem);
    transition: var(--transition-gen);
}
/*-Preparación para Js-*/
.Lightbox.isActive {opacity: 1; pointer-events: initial;}

/*-Wrapper que recoge imágenes + texto de la galería-*/
.Lightbox-wrapper{
    max-width: var(--width-750);
    width: 100%;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: calc(50% - (31.25rem / 2));
    left: calc(50% - (var(--width-750) / 2));
}

/*-Botones lightbox-*/
.Lightbox-next, .Lightbox-prev {
    position: absolute;
    top: calc(50% - (5% / 2));
    z-index: 1;
}
.Lightbox-next {right: 2%}
.Lightbox-prev {left: 2%}
.Lightbox-close {
    position: absolute;
    top: 2%;
    left: 2%;
    z-index: 1;
}
.Lightbox-svg {
    color: white;
    background-color: var(--color-black-opacity);
    width: 2.5rem;
    padding: 0.4rem;
    
    cursor: pointer;
    border-radius: 50%;
    transition: var(--transition-gen);
}

.Lightbox-svg:hover{transform: var(--transform-scale-up);}
.Lightbox-svg:active{transform: var(--transform-scale-down);}

.Lightbox-img {
    background-color: var(--color-background-white);
    max-width: var(--width-750);


    border-radius: 1rem;
    box-shadow: var(--box-shadow-gen);
}

.Lightbox-p {
    background-color: var(--color-background-white);
    width: 90%;
    min-height: 10%;
    padding: 1.5rem 1rem;

    border-radius: 1rem 1rem 0 0;
    
    backdrop-filter: blur(.1rem);
    position:absolute;
    left: calc(50% - (90% / 2));
    bottom: 0;

    opacity: 0;
    transition: opacity .3s ease-in-out;
}
/*-Preparación para JS-*/
.Lightbox-p.isActive{ opacity: 1;}


/*-Personajes-*/
.Personajes {
    max-width: var(--width-1150);
    margin: 4rem auto;
    }
.Personajes-h2 {
    font-family:  var(--font-family-ezcar);
    font-size: var(--font-h2-size);
    font-weight: var(--font-bold);
    font-variant: var(--font-smallcaps);
    line-height: 1;
}
.Personajes-h4 {
    max-width: var(--width-570);

    font-size: var(--font-h4-size);
    font-weight: var(--font-medium);
    line-height: 1;
}
.Personajes-highlight {font-weight: var(--font-bold);}


/*-Slider-*/
.Personajes-wrapper {
    margin:-10rem 0 0;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items:center;
}
.Personajes-slider{
    margin-top: -1rem;

    position: relative;
    right: 5%;
    bottom: 0;
}
/*-Botones slider-*/
.Personajes-next, .Personajes-prev {
    position: absolute;
    top: calc(50% - (20% / 2));
    z-index: 2;

    transition: var(--transition-gen);
}
.Personajes-next {right: 0;}
.Personajes-prev {left: 0;}
.Personajes-svg{
    color: white;
    background-color: var(--color-black-opacity);
    width: 2.5rem;
    padding: 0.4rem;
    
    cursor: pointer;
    border-radius: 50%;
}

.Personajes-next:hover, .Personajes-prev:hover{transform: var(--transform-scale-up);} 
.Personajes-next:active, .Personajes-prev:active{transform: var(--transform-scale-down);} 

.Personajes-img {
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
}
.Personajes-img.Static{position:static;}
.Personajes-img.isActive{opacity: 1;}

/*-Información personajes-*/
.Personajes-info {position: relative;}
.Personajes-desc {
    background-color: var(--color-background-white);
    width: var(--width-570);
    padding: 1rem 1rem 2rem;
    margin-top: -2rem;

    position: absolute;
    left: 0;

    border-radius: 0 1rem 1rem 0;
    border-left: 1rem solid transparent;
    opacity: 0;

    box-shadow: var(--box-shadow-gen);
    transition: opacity .3s ease-in-out;
}
.Personajes-desc.isActive{opacity: 1;}
.Personajes-name {
    font-family: var(--font-family-ezcar);
    font-size: var(--font-h3-size);
    font-weight: var(--font-bold);
    font-variant: var(--font-smallcaps);}

/*-Colores para cada personaje-*/
.Personajes-desc.Nina    {color: var(--color-nina); border-color: var(--color-nina);}
.Personajes-desc.Lewis   {color: var(--color-lewis); border-color: var(--color-lewis) ;}
.Personajes-desc.Orestes {color: var(--color-orestes); border-color: var(--color-orestes);}
.Personajes-desc.Fede    {color: var(--color-fede); border-color: var(--color-fede);}
.Personajes-desc.Arame   {color: var(--color-arame); border-color: var(--color-arame);}
.Personajes-desc.Toshe   {color: var(--color-toshe); border-color: var(--color-toshe);}
.Personajes-desc.Elmo    {color: var(--color-elmo); border-color: var(--color-elmo);}

.Personajes-p {color: var(--color-grey);}


/*--Animaciones--*/

/*-vvv Clase para el js vvv-*/
.Animation {opacity: 0;}

.Fade-in{animation: fadein 1s ease-in-out 1 forwards;}
@keyframes fadein {
    from{ opacity: 0; transform: translateY(-50%);
    }
    to{opacity:1; transform: translateY(0);}
}
/*-------------- [MAIN] --------------*/


/*-------------- [FOOTER] --------------*/
.Footer {
    width: 100%;
    min-height: 30vh;
    background-color: var(--color-red);
    color: var(--color-white);

    padding: 5rem 11rem;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;

    position: relative;
}
.Footer-img {max-width: 12.5rem;}
.Footer-ul {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5rem;
}

.Footer-h4 {
    margin: 0 0 1rem;

    display: flex;
    flex-flow: row;
    align-items: center;
    gap: .5rem;

    font-family: var(--font-family-ezcar);
    line-height: 1;
    font-size: var(--font-h4-size);
    font-weight: var(--font-bold);
    font-variant: var(--font-smallcaps);
    text-decoration: underline;
}
.Footer-svg {
    width: 1.3rem;
    display: inline;}

.Footer-link {font-weight: var(--font-medium);}
    
/*--Esta especifididad distingue a los
    enlaces normales de los iconos--*/
.Footer-li .Footer-link {
    border-bottom: 5px solid transparent;
    transition: var(--transition-gen);}
.Footer-li .Footer-link:hover {
    color: var(--color-black);
    border-color: var(--color-black);}
.Footer-li .Footer-link:active { transform: scale(0.95);}
.Footer-li .Footer-link::before {content: '✦ '}

.Footer-wrapper {
    margin-bottom: 2rem;

    display: flex;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-items: flex-start;
}    
.Footer-rrss {
    margin-bottom: 1rem;

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}    
.Footer-icono { transition: var(--transition-gen);}
.Footer-icono:hover{color: var(--color-black);}   
.Footer-icono:active{transform: scale(0.95);}

.Footer-form {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
    gap: 1rem;
}
.Footer-mail {
    background-color: var(--color-white);
    color: var(--color-black);

    border-radius: .5rem;
    padding: .5rem;
}

.Footer-enviar { display: none;}
.Footer-label {
    cursor: pointer;

    background-color: white;
    color: var(--color-red);
    padding: .5rem 1rem;

    border-radius: 1rem;

    font-weight: var(--font-bold);
    font-variant: var(--font-smallcaps);

    transition: var(--transition-gen);
}
.Footer-label:hover { transform: var(--transform-scale-up);}
.Footer-label:active { transform: var(--transform-scale-down);}

/*-Créditos del footer-*/
.Credits {
    background-color: var(--color-black);
    width: 100%;
    padding: 1rem;
    
    position: absolute;
    bottom: 0;
    left: calc(50% - (100% / 2));

    text-align: center;
    font-size: var(--font-smaller-size);
}
.Credits-h6::before{content: '✦ ';}
.Credits-h6::after{content: ' ✦';}
.Credits-link {
    color: var(--color-red);
    display: inline;
    
    font-weight: var(--font-medium);
    transition: var(--transition-gen); 
}
.Credits-link:hover{color: var(--color-white); transform: var(--transform-scale-up);}
.Credits-link:active{transform: var(--transform-scale-down);}
/*-------------- [FOOTER] --------------*/



/*-------------- [OTROS ELEMENTOS] --------------
    En este apartado aparecen:
    ——> Scrollbar
    ——> Tooltips
*/
::-webkit-scrollbar {width: .7rem; height: .7rem;}
::-webkit-scrollbar-track {background: var(--color-black-opacity); }
::-webkit-scrollbar-thumb {background: var(--color-red);}

::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {border-left: 2px solid white;}

/*-------------- [OTROS ELEMENTOS] --------------*/




/*-- [RESPONSIVE] --*/
@media (max-width:1220px) {

    .Gallery-ul {padding: 0 2rem}

    

    .Intro, .Personajes {padding-left: 1rem; padding-right: 1rem;}

    .Footer {padding: 3rem; gap:2.5rem;}
    .Footer-rrss {margin-bottom: 4rem;}
}
@media (max-width:990px) {
    .Header {
        padding:0 1rem 0 0;
        justify-content: space-between;}
    .Header-nav {display: none;}
    .Responsive {display:inline}   
    
    .Intro{
        padding: 2rem;
        justify-content: center;
        align-items: center;

        position:initial
    }
    .Intro-h2 {text-align: center;}
    .Intro-h3, .Intro-p{ border: initial}
    .Intro-img{position: initial; max-width: calc(460px / 1.5);}


    .Personajes {
        padding: .5rem 1rem ;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 2rem;}

    .Personajes-article{text-align: center;}

    .Personajes-wrapper {margin-top: -1rem; }
    .Personajes-info {position: initial; z-index: 1;}
    .Personajes-desc {
        width: 100%;
        margin-top: 1.5rem;

        backdrop-filter: blur(.1rem);
        border-right:1rem solid transparent;
        border-radius: initial;}
    .Personajes-slider{right: 0;}

    
    .Footer{ grid-template-columns: repeat(2, 1fr);}
    .Footer-rrss {margin-bottom:2rem;}
}


@media (max-width:870px) {
    .Responsive-juegos {grid-template-columns: repeat(2, 1fr);}

    .Gallery-h4 {text-align: initial;}
    .Gallery-ul { grid-template-columns: repeat(2, 1fr);}
    .Footer-form{ flex-direction: column; align-items: center;}
}

@media (max-width: 760px) {
    .Lightbox-wrapper {left: 0;}
    .Lightbox-img {border-radius: initial;}
    
}

@media (max-width:595px) {
    .Responsive-ul {gap: 0.5rem;}
    .Responsive-juegos {gap: .2rem;}

    .Gallery-ul { grid-template-columns: repeat(1, 1fr);}
    .Lightbox-p { padding-top: 10rem; border-radius: 0 0 1rem 1rem; bottom: -35%; z-index: -1;}

    .Footer{ grid-template-columns: 1fr;}
    .Footer-img {margin: auto;}
    .Footer-ul, .Footer-wrapper{ align-items: center;}
}

/* - Responsive para que el texto del lightbox
    sea visible en cualquier dispositivo móvil- */
@media (max-width:595px) {.Lightbox-p { bottom: -40%;}}
@media (max-width:385px) {.Lightbox-p { bottom: -60%;}}