@font-face {
    font-family: "Catamaran-Bold";
    src: url(fuentes/Catamaran-Bold.ttf);
}

@font-face {
    font-family: "Catamaran-Regular";
    src: url(fuentes/Catamaran-Regular.ttf);
}

@font-face {
    font-family: "Inter-Bold";
    src: url(fuentes/Inter-Bold.ttf);
}

@font-face {
    font-family: "Inter-Regular";
    src: url(fuentes/Inter-Regular.ttf);
}

@font-face {
    font-family: "Inter-Medium";
    src: url(fuentes/Catamaran-Medium.ttf);
}

@font-face {
    font-family: "Inter-Semibold";
    src: url(fuentes/Inter-SemiBold.ttf);
}

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

/** Hay que modificar los valores a nuestra webapp **/
:root {
    --color-textos-1: hsl(180, 12%, 93%); 
    --color-textos-2: hsl(189, 6%, 56%);
    --color-textos-3: hsl(256, 80%, 55%);
    --color-textos-alfa: hsl(0, 0%, 0%, 25%);
    --color-fondos: hsl(216, 89%, 7%);
    --color-fondos-2: hsl(216, 88%, 13%);
    --color-fondos-3:hsl(217, 89%, 7%);
    --color-fondos-4:hsl(0, 0%, 100%, 16%);
    --color-fondos-5: hsl(185, 7%, 32%, 50%);
    --color-fondos-6:hsl(217, 89%, 7%, 78%);
    --color-fondos-7:hsl(217, 89%, 7%, 40%);
    --color-fondos-8:hsl(217, 89%, 7%, 95%);
    --color-fondos-botones: hsl(256, 80%, 55%);
    --color-vermas: #8052ff;


    --sombras:
    0
    4px
    2px
    var(--color-textos-alfa); 
}

/* PAUTAS GENERALES */
body {
    background-color: var(--color-fondos);
    color: var(--color-textos-1);
    overflow-x: hidden;
}

img {
    max-width: 100%;
}

.pelicula {
    border-radius: 0.6em;
    box-shadow: var(--sombras);
    width: 10em;
    min-width: 10em;
    margin-bottom: 2em;
}


    /* links */
    ul,
    ol {
        list-style: none;
    }

    a {
        text-decoration: none;
    }

    .atras {
        font-size: 1.3em;
        font-family: "Inter-Bold";
        color: var(--color-textos-2);
    }


main > section {
    width: 90%;
    margin-inline: auto;
}

    /* titulos */
    h2 {
        font-size: 1.8em;
        font-family: "Inter-Bold";
    } 

    h4 {
        font-size: 1.9em;
        font-family: "Inter-Semibold";
    }

    /* botones violetas */
    .boton {
        color: var(--color-textos-1);
        background-color: var(--color-fondos-botones);
        box-shadow: var(--sombras);
        padding-block: 0.3em;
        font-size: 1.1em;
        font-family: "Inter-Bold";
        padding-inline: 1em;
        border-radius: .4em;
    }

    header{
        width: 100%;
        height: 80px;
        padding: 1.5em;
        display: grid;
        grid-template-columns: 1fr 40px;
        grid-template-rows: 1fr;
        grid-gap: 1em;
        background-color: #041B3E;
        position: relative;
        z-index: 5;
    }
    
    header >div:first-of-type{
        display: flex;
        align-self: center;
        justify-self: flex-start;
        width: fit-content;
        height: fit-content;
    }
    
    header >div:first-of-type >a{
        display: block;
        width: 100px;
        height:30px;
        background-image: url("../imagenes/logos/logovf_sintexto.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: left;
        font-size: 0;
    }
    
    header >div:last-of-type{
        display: flex;
        align-self: center;
        justify-self: center;
        width: fit-content;
        height: fit-content;
    }
    
    header >div:nth-of-type(2) >button{
        width: 100%;
        height: fit-content;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-gap: 5px;
        outline: none;
        border: 1px solid #020E21;
        background-color: #020E21;
        border: 5px;
        font-size: 0;
        padding: 5px;
    }
    
    header >div:nth-of-type(2) >button >span{
        width: 100%;
        height: 3px;
        background-color: white;
        border:1px solid white;
        border-radius: 50px;
    }
    
    header >div:last-of-type{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 1px;
        width: 100%;
        height: calc(100vh - 80px);
        top: 80px;
        right: 0;
        position: absolute;
        background-color: rgba(2, 14, 33, 0.9);
        transform: translateX(100%);
        transition: 1s;
        visibility: hidden;
    }

    header >div:last-of-type >nav{
        width:50%;
        height: fit-content;
        background-color: grey;
        display: flex;
        align-self: flex-start;
        justify-self: flex-end;
    }
    
    header >div:last-of-type >nav >ul{
        width: 100%;
        background-color: #020E21;
        list-style: none;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-gap: 10px;
    }
    
    header >div:last-of-type >nav >ul >li >a{
        width: 100%;
        height: fit-content;
        padding: 10px;
        display: block;
        text-decoration: none;
        color: white;
    }

    @media (min-width:900px) {
        header{
            grid-template-columns: auto 1fr;
            width: 75%;
            margin-left: auto;
            margin-right: auto;
        }
        header >div:nth-of-type(2){
            display: none;
        }
        header >div:last-of-type{
            width: 100%;
            height:fit-content;
            top: 0;
            background-color: transparent;
            transform: translateX(0);
            position: initial;
            visibility: unset;
        }

        header >div:last-of-type >nav{
            width:fit-content;
            height: fit-content;
            align-self: flex-end;
            background-color: transparent;
        }

        header >div:last-of-type >nav >ul{
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
            grid-template-rows: 1fr;
            text-align: center;
            background-color: transparent;
            width: fit-content;
        }
    }



/*********************** PAGINA: INICIAR SESION *****************************************/
.iniciasesion {
    display: flex;
    flex-direction: column;
    padding: 2em;
    background-color: #020E21;
    width: 330px;
    margin: auto;
    padding-bottom: 3em;
}

.index {
    border-bottom: 0.1px solid var(--color-textos-1);
}

.iniciasesion h1, h2 {
    color: rgb(223, 229, 235);
    padding-top: 0.2em;
}

.iniciasesion h1 {
    font-size: 1.875em;
}

.iniciasesion h3 {
    color: rgb(223, 229, 235);
    margin-top: 0.9em;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 300;
}

.controls {
    padding: 0.625em;
    width: 100%;
    background: var(--color-fondos-2);
    border-radius: 0.3em;
    font-size: 1.1em;
    margin-bottom: 0.2em;
}

.iniciasesion div {
    display: flex;
    gap: 13px;
    margin-top: 0.2em;
}

.iniciasesion a {
    width: 100%;
    margin-bottom: 1.5em;
    font-size: 1em;
    color: var(--color-fondos-botones);
}

.iniciasesion > div > a {
    text-align: center;
    font-family: "Inter-Bold";
    font-size: 0.9em;
    padding-block: 0.6em;
}

.iniciasesion a:first-of-type:hover{
    /* color: var(--color-fondos-botones); */
}
.iniciasesion div a{
    color:aliceblue ;
}


/*********************** PAGINA: CREAR CUENTA *****************************************/

.crearcuenta{
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.iniciasesion div:nth-of-type(2) a{
    text-align: center;
    max-width: 9em;
    margin-top: 1em;
}


/*********************** PÁGINA: INICIO ********************************************************/

/** INICIO **/
.inicio {
    background: url(../imagenes/imgfondoinicio.jpg) top left;
    background-size: cover; 
    margin-block: 2em;
    background-color: var(--color-fondos-6); 
}

.inicio h2 {
    padding-block: 1em;
    font-family: "Inter-Medium";
    line-height: 1.2em;
    font-size: 1.4em;

}

.logoinicio {
    margin-top: 1em;
    width: 12em;

}

.inicio > div {
    width: 90%;
    margin-inline: auto;
    padding-block: 1.5em;
}


/** ENVIVO **/
.envivo > article:not(:last-of-type) {
    border-bottom: solid 0.1px var(--color-textos-1);
}

.envivo > article {
    padding-bottom: 2em;
}

.fecha {
    background-color: var(--color-fondos-4);
    display: flex;
    margin-block: 1.8em; 
    align-items: center;
    flex-wrap: wrap;
}

.envivo h2 {
    border-top: solid 0.1px var(--color-textos-1);
    padding-top: 0.5em;
}

h3 {
    font-family: "Inter-Regular";
    margin-block: 0.3em;
    font-size: 1.3em;
    padding-block: 0.1em;
}

.dia {
    flex-grow: 1;
    padding-inline: 0.6em;
}

.hora {
    font-family: "Inter-Bold";
    font-size: 1.2em;
    padding-inline: 0.6em;
}

.envivo > article > .pelidelasemana {
    display: flex;
    gap: 1em;
}

.envivo > article > .peli {
    display: flex;
    gap: 1em;
}

.ano {
    font-size: 1em;
    font-family: "Inter-Regular";
    margin-block: 0.2em;
}

.director {
    font-family: "Inter-Regular";
    font-size: 1.3em;
    color: var(--color-textos-1);
    flex-grow: 1;
}

.calificacionpelix {
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 0.5em;
    margin-bottom: 0.5em;
}

.calificacionpelix img {
    width: 1.5em;
}

.dp {
    color: var(--color-textos-2);
    text-transform: uppercase;
    font-size: 0.9em;
    font-family: "Inter-Regular";
}

.lugar {
    padding-block: 0.5em;
    font-family: "Inter-Regular";
    font-size: 1.1em;
    width: 100%;
    border-top: solid 0.1px var(--color-textos-1);
    margin-inline: 0.8em;
    display: flex;
    align-items: center;
    gap: 0.6em;
}

.lugar img {
    width: 1em;
}

.pelidelasemana > section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.4em;
    margin-bottom: 2em;
    flex-grow: 1;
}

.peli > section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 0.4em;
    margin-bottom: 2em;
    flex-grow: 1;
}

.sinopsis {
    font-family: "Catamaran-Regular";
    font-size: 1.1em;
    line-height: 1.4em;
    margin-bottom: 1.5em;
}

.vermas {
    color: var(--color-textos-3); 
    display: flex;
    margin-bottom: 2em;
    margin-top: 1em;
}

.envivo > article > .botones {
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
    align-items: center;
}

.trailer {
    display: flex;
    align-items: center;
    gap: 0.8em;
    justify-content: center;
    padding-block: 0.7em;
}


/* VOTACION */
.votacion {
    border-block: solid 0.1px var(--color-textos-1);
    padding-block: 2em;
}

.votacion h2 {
    margin-bottom: 0.8em;
}

.votacion h4 {
    font-size: 1.1em;
    font-family: "Inter-Regular";
    text-align: center;
}

.votacion p {
    font-family: "Inter-Regular";
    font-size: 1.1em;
    line-height: 1.4em;
    margin-bottom: 2em;
}

.votacion .hs {
    font-family: "Inter-Bold";
}

.votacion > div {
    display: flex;
    gap: 1em;
}

.votacion img {
    margin-bottom: 1em;
    width: 13em;
    min-width: 13em;
}

.pelisavotar {
    display: flex;
    gap: 1em;
    overflow-x: scroll;
}

.voto {
    background-color: var(--color-fondos-5);
    border: solid 5px var(--color-textos-1);
    border-radius: 0.6em;
    padding: 1em;
    width: 2em;
    margin-block: 1em;
    margin-inline: auto;
}

.pelisavotar > li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tld {
    background-color: var(--color-fondos-botones);
}

.pelisavotar li div{
    cursor: pointer;
} 

/*********************** PAGINA: PELICULAS ****************************************************/
.peliculas {
    margin-block: 1em;
    margin-top: 1em;
    margin-bottom: 2em;
    border-bottom: solid 0.1px var(--color-textos-1);
}

.seccionpeliculas {
    padding-top: 2em;
    border-bottom: solid 0.1px var(--color-textos-1);
}

.peliculas > ul {
    overflow-x: scroll;
    scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0);
    scrollbar-width: thin;
    display: flex;
    gap: 1em;
}

.peliculas > ul::-webkit-scrollbar {
    -webkit-appearance: none;
}

.peliculas > ul::-webkit-scrollbar:horizontal {
    height:7px;
    width: 15px;
}
.peliculas > ul::-webkit-scrollbar-thumb {
    background-color: #797979;
    border-radius: 20px;
}

.peliculas > ul::-webkit-scrollbar-track {
    border-radius: 10px;
}

.seccionpeliculas h2 {
    font-size: 1.8em;
    margin-bottom: 0.5em;

}

.peliculas h3 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 1em;
}

.peliculas img {
    min-width: 11em;
}

.peliculas > ul > li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.peliculas h4 {
    font-size: 1.1em;
    font-family: "Inter-Regular";
    text-align: center;
    margin-bottom: 0.9em;
}


/*********************** PÁGINA: PELÍCULA X / A PROYECTAR ********************************************************/

/** PELIX **/
.atras img {
    width: 0.6em;
}

.iniciopeli {
    position: relative;
    width: 90%;
    margin-inline: auto;
}

.fondotransparente {
    padding: 3em;
    background: linear-gradient(to top, var(--color-fondos) 10%, transparent);
    position: absolute;
    bottom: 0;
    width: 100%;
}

.atras {
    display: flex;
    gap: 0.5em;
}

.pelix h1 {
    font-size: 1.3em;
    font-family: "Inter-Bold";
    color: var(--color-textos-1);
}

.pelix {
    display: flex;
    gap: 0.5em;
    margin-block: 1em;
}


/** PELICULA X **/
.peli {
    position: absolute;
    top: 19.5em;
}

.poster {
    border-radius: 0.4em;
    width: 9em;
    margin-bottom: 1em;
}

.peliculax .peli {
    display: flex;
    gap: 1em;
}

.peliculax .director {
    flex-grow: 1;
}

.genero {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 1em;
}

.masinfo {
    position: relative;
    top: 12.5em;
}

.masinfo .sinopsis {
    margin-bottom: 2em;
}

.genero p {
    font-family: "Inter-Regular";
}

.trailer img {
    width: 0.8em;
}

.res-as {
    display: block;
    padding-block: 0.7em;
}

.peliculax .trailer {
    margin-block: 2em;
}

.masinfo .botones {
    display: flex;
    justify-content: space-between;
}


/** VALORACION **/
.valoracion {
    background-color: var(--color-fondos-2);
    border-radius: 0.4em;
    padding: 1em;
    margin-block: 2em;
    margin-top: 15em;
}

.valoracion .interact {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 1em;
}

.vista {
    display: flex;
    align-items: center;
    gap: 1em;
    padding-right: 2em;
    border-right: solid 0.1px var(--color-textos-1);;
    width: 50%;
    justify-content: center;
}

.vista img {
    height: 2.6em;
}

.vista p {
    color: var(--color-textos-2);
}

.agregaralista {
    display: flex;
    align-items: center;
    gap: 1em;
    width: 50%;
    justify-content: center;
}

.agregaralista img {
    height: 2.6em;
}

.agregaralista p {
    color: var(--color-textos-2);
}

.calificacion {
    text-align: center;
    margin-top: 1em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.calificacion h4 {
    font-size: 1em;
    font-family: "Inter-Regular";
    margin-top: 0.4em;
}

.calificacion p {
    color: var(--color-textos-2);
    margin-block: 0.2em;
}

.calificacion img {
    width: 3.3em;
}

.estrellas {
    display: flex;
    justify-content: space-around;
    max-width: 20em;
    gap: 0.5em;
    align-self: center;
}

.interact > div {
    text-align: center;
}


/** PLAYFILM **/
video {
    width: 100%; 
    aspect-ratio: 16/9;
}

.playfilm {
    border-block: solid 0.1px var(--color-textos-1);
    padding-block: 2em;
}


/** EQUIPO Y ELENCO **/
.equipo {
    margin-bottom: 1em;
    border-bottom: solid 0.1px var(--color-textos-1);
    border-top: solid 0.1px var(--color-textos-1);
    padding-bottom: 2em;
    padding-top: 1em;
}

.datospeli h3 {
    text-transform: uppercase;
    font-family: "Inter-Regular";
}

.datospeli h4 {
    text-transform: uppercase;
    font-family: "Inter-Regular"; 
    color: var(--color-textos-2);
    font-size: 1em;
    margin-block: 0.2em;
    margin-top: 1em;
}

.equipo li {
    font-family: "Inter-Regular"; 
    font-size: 1em;
    margin-block: 0.2em;
    margin-right: 0.7em;
}

.equipo > ul {
    display: flex;
    flex-wrap: wrap;
}

.elenco {
    border-bottom: solid 0.1px var(--color-textos-1);
    padding-bottom: 2em;
    margin-bottom: 1em;
}

.elenco h4, h5 {
    font-size: 1em;
}

.elenco h4 {
    color: var(--color-textos-2);
    margin-block: 0.3em;
    margin-right: 0.5em;
    text-transform: none;
}

.elenco h5 {
    margin-block: 0.3em;
    font-family: "Inter-Regular";
}

.elenco > ul {
    display: flex;
    flex-wrap: wrap;
}

.elenco li {
    display: flex;
    margin-right: 0.7em;
}


/** RESEÑAS **/
.resenax {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.resenax:not(:last-of-type) {
    margin-bottom: 2em;
}

.resenas h3 {
    text-transform: uppercase;
    font-family: "Inter-Regular";
    margin-bottom: 1em;
}

.resenax img {
    border-radius: 50%;
    width: 3em;
    height: 3em;
    margin-right: 1em;
}

.resenax h5 {
    color: var(--color-textos-2);
    font-family: "Inter-Regular";
    font-size: 1.1em;
    margin-right: 0.5em;
}

.nombreusuario {
    font-family: "Inter-Regular";
    font-size: 1.1em;
    flex-grow: 1;
}

.fecharesena {
    display: none;
}

.resenadeusuario {
    font-family: "Catamaran-Regular";
    margin-top: 1em;
    font-size: 1.1em;
    width: 100%;
}

.miresena {
    background-color: var(--color-fondos-2);
    border-radius: 0.4em;
    display: flex;
    padding-block: 0.2em;
    justify-content: space-between;
    margin-block: 2em;
}

.miresena > .controls {
    align-content: center;
}

.miresena p {
    margin-left: 1em;
    color: var(--color-textos-2);
    font-size: 1.1em;
}

.miresena .publicar {
    color: var(--color-textos-3);
    margin-right: 1em;
    font-family: "Inter-Semibold";
    font-size: 1.1em;
    align-self: center;
}

.resenas {
    border-bottom: solid 0.1px var(--color-textos-1);
    padding-bottom: 2em;
    margin-bottom: 1em;
}


/*********************** PAGINA: ARTISTA ***********************************************/
#artistasSelect{
   display: flex;
   padding-top: 5em;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 1em;
   border-bottom: solid 0.1px var(--color-textos-1);
   padding-bottom: 1em;
}

#artistasSelect > select {
    background-color: var(--color-fondos-botones);
    outline: none;
    border-radius: 6px;
    display: flex;
    padding-block: 0.5em;
    padding-left: 0.5em;
    color: var(--color-textos-1);
}

#pais {
    font-size: 1em;
}

.recomendacionartistas > ul {
    overflow-x: scroll;
    scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0);
    scrollbar-width: thin;
    display: flex;
    gap: 2em;
    margin-bottom: 1em;
    border-bottom: solid 0.1px var(--color-textos-1);
    padding-bottom: 1em;
}

.recomendacionartistas > ul > li > img {
    margin-bottom: 1em;
}

.recomendacionartistas h4{
    font-size: 1.1em;
    font-family: "Inter-Regular";
    text-align: center;
    margin-bottom: 0.5em;
}

#artistaIndependiente {
    text-align: center;
    padding-block: 1em;
    padding-bottom: 3em;
    border-bottom: solid 0.1px var(--color-textos-1);
}

#artistaIndependiente p {
    font-family: "Inter-Regular";
    margin-bottom: 1em;
    font-size: 1.1em;
    line-height: 1.4em;
}

#artistaIndependiente p:last-of-type {
    padding-bottom: 2em;
}

#artistaIndependiente h2 {
    margin-bottom: 1em;
}

#artistaIndependiente a {
    padding-block: 0.7em;
    padding-inline: 1.5em;
    margin-top: 2em;
}

.recomendacionartistas h3 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 1em;
}

.recomendacionartistas h4 {
    font-size: 1.1em;
    font-family: "Inter-Regular";
    text-align: center;
    margin-bottom: 0.9em;
}




@media (min-width:900px) {
    #artistasSelect{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }

    #artistas{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #artistas >section{
        width: 100%;
    }

    #artistas >section >ul{
        width:50%;
        margin-left: 0;
    }
    
    #artistas >section>ul >li{
        width: 100%;
    }

    
#artistaIndependiente{
    width: 75%;
}

#artistaIndependiente >div{
    width: 100%;
}
}

/*********************** PÁGINA: PERFIL USUARIO ********************************************************/

/** MI PERFIL **/
.artistax {
    display: flex;
    gap: 1em;
    margin-bottom: 2em;
}

.artistax h2 {
    margin: auto 0 0 0;
}

.biografiaartista p {
    font-family: "Catamaran-Regular";
    font-size: 1.1em;
    line-height: 1.4em;
    margin-bottom: 1.5em;
}

.posterartista {
    width: 9em;
}

.pelisdeartista {
    border-top: solid 0.1px var(--color-textos-1);
    padding-top: 1em;
}






/*********************** PÁGINA: PERFIL USUARIO ********************************************************/

/** MI PERFIL **/
.miperfil {
    margin-bottom: 1.2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 4em;
}

.miperfil img {
    width: 2em;
}



/** PERFIL INFO **/
.perfilinfo > div {
    display: flex;
    gap: 1em;
    padding-bottom: 1.5em;
}

.perfilinfo img {
    border-radius: 50%;
    width: 7em;
    height: 7em;
}

.miperfil h1 {
    font-size: 1.3em;
    font-family: "Inter-Bold";
    color: var(--color-textos-1);
}

.perfilinfo h2 {
    font-family: "Inter-Regular";
    font-size: 1.3em;
    margin-block: 0.4em;
    padding-bottom: 0.5em;
}

#boton_usu1{
    background-color: var(--color-fondos-botones);
}

#boton_usu2{
    color: var(--color-textos-2);
}

.cantidadpelis {
    font-size: 1.3em;
    font-family: "Catamaran-Bold";
}

.usuarioinfo {
    display: flex;
    gap: 1em;
}

.usuarioinfo > div {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    text-align: center;
}

.usuarioinfo a {
    text-decoration: none;
    color: var(--color-textos-1);
    border: solid 1px var(--color-fondos-botones);
    border-radius: 6px;
    padding: 0.5em 1.5em 0.5em 1.5em;
}


/** PELICULAS VISTAS **/

#linkpelisv{
    padding: 0 0 0 0;
    border: none;
}
.peliculasvistas {
    margin-block: 1em;
    border-top: solid 0.1px var(--color-textos-1);
    padding-top: 1em;
}

.peliculasvistas > ul, .peliculasporver > ul {
    overflow-x: scroll;
    scrollbar-color: rgba(0, 0, 0, .5) rgba(0, 0, 0, 0);
    scrollbar-width: thin;
    display: flex;
    gap: 1em;
}

.peliculasvistas > ul::-webkit-scrollbar, .peliculasporver > ul::-webkit-scrollbar{
    -webkit-appearance: none;
}

.peliculasvistas > ul::-webkit-scrollbar:horizontal, .peliculasporver > ul::-webkit-scrollbar:horizontal{
    height:7px;
    width: 15px;
}
.peliculasvistas > ul::-webkit-scrollbar-thumb,.peliculasporver > ul::-webkit-scrollbar-thumb {
    background-color: #797979;
    border-radius: 20px;
}

.peliculasvistas > ul::-webkit-scrollbar-track, .peliculasporver > ul::-webkit-scrollbar-track {
    border-radius: 10px;
}

.peliculasvistas h3 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 1em;
}

.peliculasvistas img {
    min-width: 11em;
}

.peliculasvistas > ul > li {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.peliculasvistas h4 {
    font-size: 1.1em;
    font-family: "Inter-Regular";
    text-align: center;
    margin-bottom: 0.9em;
}

/** PELICULAS POR VER **/
.peliculasporver {
    margin-block: 2em;
    border-top: solid 0.1px var(--color-textos-1);
    padding-top: 1em;
}

.peliculasporver > ul {
    overflow-x: scroll;
    display: flex;
    gap: 1em;
}

.peliculasporver h3 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 1em;
}

.peliculasporver img {
    min-width: 11em;
}

.peliculasporver > ul > li {
    display: flex;
    flex-direction: column;
    align-items: center;

}

.peliculasporver h4 {
    font-size: 1.1em;
    font-family: "Inter-Regular";
    text-align: center;
}


/** RESEÑAS **/
.misresenas {
    margin-block: 2em;
    border-top: solid 0.1px var(--color-textos-1);
    padding-top: 1em;
}

.misresenas h3 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 1em;
}

.misresenas > ul {
    display: flex;
    overflow-x: scroll;
    gap: 1em;
}

.misresenas img {
    width: 5em;
    min-width: 5em;
    margin-bottom: 0;
}

.misresenas h4 {
    font-size: 1.3em;
}

.misresenas .año {
    flex-grow: 1;
}

.resena {
    font-family: "Catamaran-Regular";
    font-size: 1.1em;
    position: relative;
}

.fechaderesena {
    color: var(--color-textos-2);
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.misresenas > ul > li > div {
    display: flex;
    gap: 1em;
    padding-right: 1em;
    margin-bottom: 1em;
    border-right: solid 0.1px var(--color-textos-1);
}

.misresenas > ul > li {
    padding-right: 1em;
    margin-bottom: 1em;
    max-height: 20em;
    max-width: 300px;
}

.misresenas > ul > li > div > div {
    width: 8em;
}

#linkvermas{
    color: var(--color-vermas);
    padding: 0.3em 2em 0.3em 4em;
    font-size: 0.9em;
    position: absolute;
    right: 1px;
    background: linear-gradient(to left, hsl(216, 89%, 7%) 75%,rgba(255, 0, 0, 0));
}




/** FUNCIONES **/
.misfunciones {
    margin-block: 2em;
    border-top: solid 0.1px var(--color-textos-1);
    border-bottom: solid 0.1px var(--color-textos-1);
    padding-block: 1em;
}

.misfunciones h3 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 1em;
}

.misfunciones > div > div {
    display: flex;
    gap: 1em;
    height: 16.5em;
}

.misfunciones > div > div > div {
    display: flex;
    flex-direction: column;
    gap: 0.4em;
    flex-grow: 1;
}

.misfunciones .año {
    margin-bottom: 0.5em;
}

.misfunciones .fecha {
    padding: 0.5em;
    font-size: 1.1em;
    max-width: 8.5em;
}

.misfunciones .director {
    flex-grow: 1;
}



/*********************** PÁGINA: PERFIL ARTISTA ********************************************************/

/** MI PERFIL / ARTISTA **/
.mascont {
    
    display: flex;
    justify-content: space-around;
    gap: 1em;
    margin-block: 1em;
    border-top: solid 0.1px var(--color-textos-2);
    border-bottom: solid 0.1px var(--color-textos-2);
    padding-block: 1em;
}

.mascont a {
    color: var(--color-textos-2);
    background-color: var( --color-fondos);
    border-radius: 6px;
    padding: 0.7em 1.1em 0.7em 1.1em;
    border: 1px solid var(--color-fondos-botones);
}

.iconsperfil {
    display: flex;
    gap: 1em;

}

.iconsperfil a img {
    width: 1.6em;
}


.upscont {
    margin-top: 1.5em;
    gap: 1em;    
}

.upscont h3 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 1em;
}

.upscont div {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    gap: 0.5em;
    margin-top: 5em;
    padding-bottom: 8em;
    border-bottom: solid 0.1px var(--color-textos-1); 
}

.upscont div a {
    color: var(--color-textos-1);
    background-color: var(--color-fondos-botones);
    border-radius: 6px;
    padding: 0.5em 1.5em 0.5em 1.5em;
    font-size: 1.1em;
}

.upscont div a:hover {
    color: var(--color-textos-1);
    background-color: var(--color-fondos-botones);
    border-radius: 6px;
    padding: 0.5em 1.5em 0.5em 1.5em;
}

.upscont div a {
    margin-top: 1em;
}

.upscont p {
    font-size: 1.1em;
}

#boton_usua1{
    color: var(--color-textos-2);
}

#boton_usua2{
    background-color: var(--color-fondos-botones);
}

/*********************** PÁGINA: PELICULAS VISTAS ********************/

#peliculasVistasPerfil{
    background-color: #020E21;
    width: 100%;
    height: fit-content;
}

#peliculasVistasPerfil >div{
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    color: white;
}

#peliculasVistasPerfil >div:first-of-type{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

#peliculasVistasPerfil >div:first-of-type >a{
    display: flex;
    width: 30px;
    height: 30px;
    align-self: center;
    font-size: 0;
    outline: none;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

#peliculasVistasPerfil >div:first-of-type >a:first-of-type{
    justify-self: flex-start;
    background-image: url('../imagenes/back.png');
}

#peliculasVistasPerfil >div:first-of-type >a:last-of-type{
    justify-self: flex-end;
    background-image: url('../imagenes/configuracion.svg');
}

#peliculasVistasPerfil >div:nth-of-type(2){
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 5px;
}

#peliculasVistasPerfil >div:nth-of-type(2) h2{
    font-size: 18px;
}

#peliculasVistasPerfil >div:nth-of-type(2) >div{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 10px;
    width: 70%;
}

#peliculasVistasPerfil >div:nth-of-type(2) >div >button{
    border: 1px solid #6030E8;
    border-radius: 6px;
    background-color: transparent;
    color: white;
    padding: 5px;
}

#peliculasVistasPerfil >div:nth-of-type(2) >div >button:first-of-type{
    background-color: #6030E8;
}

#peliculasVistasPerfil >div:last-of-type{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: 5px;
}

#peliculasVistasPerfil >div:last-of-type >select{
    width: 50%;
    height: 30px;
    border: 1px solid #6030E8;
    border-radius: 5px;
    outline: none;
    background-color: #6030E8;
    color: white;
}

#peliculasVistas{
    background-color: #020E21;
    width: 100%;
    height: fit-content;
}

#peliculasVistas >div{
    border-top: 1px solid grey;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
    color: white;
}

#peliculasVistas >div >ul{
    width:85vw;
    height: fit-content;
    list-style: none;
    overflow-x: scroll;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 15px;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    overflow-y: hidden;
}

#peliculasVistas >div >ul >li >a{
    width: 45vw;
    height: fit-content;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 30px;
    grid-gap: 10px;
    color: white;
    outline: none;
    font-size: 12px;
    text-align: center;
}

#peliculasVistas >div >ul >li >a >img{
    width: 100%;
    border: 1px solid black;
    border-radius: 10px;
}

#peliculasVistas >div >ul >li >a >h4{
    margin-left: auto;
    margin-right: auto;
    display: block;
}

#peliculasVistasInfo{
    background-color: #020E21;
    width: 100%;
    height: fit-content;
    
    border-top: 1px solid grey;
}

#peliculasVistasInfo > ul {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 30px;
    grid-template-rows: 1fr 1fr 1fr;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    padding: 15px;
}


#peliculasVistasInfo > ul > li {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 40px auto;
    grid-gap: 5px;
    text-align: center;
}

#peliculasVistasInfo > ul > li > div{
    width: 40px;
    height: 40px;
    display: flex;
    align-self: center;
    justify-self: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#peliculasVistasInfo >ul >li:first-of-type >div:first-of-type{
    background-image: url('../imagenes/reloj.png');
}
#peliculasVistasInfo >ul >li:nth-of-type(2) >div:first-of-type{
    background-image: url('../imagenes/flechas.png');
}
#peliculasVistasInfo >ul >li:last-of-type >div:first-of-type{
    background-image: url('../imagenes/lupa.png');
}
#peliculasVistasInfo >ul >li >p{
    width: 60%;
    display: flex;
    align-self: center;
    justify-self: center;
}

@media (min-width:900px) {
    #peliculasVistasPerfil{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        padding: 10px 0 10px 0;
    }

    #peliculasVistasPerfil >div{
        padding: 5px 0 5px 0;
    }

    #peliculasVistas{
        width: 75%;
        margin-left: auto;
        margin-right: auto;
    }
    
    #peliculasVistas >div{
        width: 100%;
    }

    #peliculasVistas >div >ul{
        width:50%;
        margin-left: 0;
    }

    #peliculasVistas >div >ul >li >a{
        width: 70%;
    }

    #peliculasVistasInfo{
        background-color: #020E21;
        width: 75%;
    }
    
    #peliculasVistasInfo >ul{
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        padding: 40px 15px 40px 15px;
    }
    
    
    #peliculasVistasInfo >ul >li{
        grid-template-rows: 40px auto;
        grid-gap: 10px;
    }
    
    #peliculasVistasInfo >ul >li >p{
        align-self: flex-start;
    }
}

/*********************** PÁGINA: FORMULARIO DE ARTISTA ********************************************************/


/** FORMULARIO ARTISTA **/
.formulario_a {
    display: flex;
    flex-direction: column;
    border-radius: 6px;
    background-color: var(--color-fondos);
    width: 330px;
    margin: auto;
    margin-top: 2em;
}

.preguntaformulario {
    font-size: 1.2em;
    font-family: "Inter-Regular";
}

.respuestaformulario {
    font-size: 1em;
    font-family: "Inter-Regular";
}

.formulario_a h1 {
    font-size: 1.8em;
}

.controls {
    padding: 0.625em;
    width: 100%;
    background: var(--color-fondos-2);
    border-radius: 0.3em;
    font-size: 1em;
    color: var(--color-textos-1);
    outline: none;
}

#formbutton {
    height: 55px;
    background-color: var(--color-fondos-2);
    color: var(--color-fondos-botones);
    font-size: 0.9em;
    border: 1px solid var(--color-fondos-botones);
    border-style: dotted;
    border-radius: 3px;
}
#formbutton:hover {
    color: var(--color-vermas);
    background-color: var(--color-fondos-3) ;
    cursor: pointer;
}

#enviarformu {
    width: 100%;
    padding: 12px;
    cursor: pointer;
}

.checkformu {
    display: flex;
    align-items: baseline;
    gap: 1em;
}

.checkformu :not(:last-of-type) {
    margin-top: 6em;
}

.checkformu input{
    -ms-transform: scale(1.5); /* IE */
    -moz-transform: scale(1.5); /* FF */
    -webkit-transform: scale(1.5); /* Safari y Chrome */
    padding: 10px;
}

.formulario_a p {
    font-family: "Inter-regular"; 
    font-weight: 100;
    font-size: 0.95em;
    line-height: 1.5em; 
}

.formulario_a > article { 
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-top: 3em;
    margin-bottom: 2em;
}

.formulario_a li {
    display: flex;
    flex-direction: column;
    gap: 0.6em;
    margin-top: 1.2em;
}

.enviar {
    padding-bottom: 3em;
    border-bottom: solid 0.1px var(--color-textos-1); 
}

textarea{
    height: 120px;
    padding: 8px;
    resize: none;
    background-color: var(--color-fondos-2);
    color: var(--color-textos-1);
}

.caracts{
    font-size: 0.5em;
    color: var(--color-textos-2);
}





/* -----------------------------------PAGINA RESERVA------------------------------------------------------------- */
.reserva{
    display: flex;
    margin: auto;
    gap: 0.9em;
    margin-top: 2em;
    height: 250px;
}

.reserva .ano {
    padding-block: 0.4em;
}

.reserva > section > .director {
    padding-block: 1em;
}

.reserva .dp {
    padding-block: 0.4em;
}

.reserva .calificacionpelix {
    padding-block: 1em;
}

.reserboton {
    margin-bottom: 2em;
    width: 12em;
    padding-block: 0.6em;
    margin-block: 1em;
}

.reservinfo {
    margin-bottom: 2em;
    margin-top: 1em;
    
}

.reservinfo ul li {
    margin-bottom: 1em;
    font-size: 1em;
}

.reservinfo a{
    display: flex;
}

.peli a img{
    width: 10em;
    border-radius: 5px;
}

.checkreser{
    display: flex;
    align-items: center;
    gap: 0.8em;
    margin: auto;
    margin-bottom: 1.2em;
    padding-bottom: 1.5em;
}

.checkreser p{
    color: var(--color-textos-2);
    font-size: 1em;
}
.checkreser input{
    -webkit-transform: scale(1.5);
    padding: 10px;
}
.botonres{
    margin: auto;
    border-bottom: solid 0.1px var(--color-textos-1); 
    padding-bottom: 4em;
}


/* --------PAGINA CONFIRMACION DE FOMULARIO----------------------------------------------------------------- */
.confir{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.4em;
    margin-top: 6em;
    margin-bottom: 6em;
}
.confir p{
    text-align: center;
    margin-bottom: 1em;
}


/*--------------------- PAGINA CALENDARIO---------------------------------------------------------------- */
.calendario{
    padding-top: 2em;
    display: flex;
    flex-direction: column;
    margin: auto;
    align-items: center;
}

.calendario h1{
    margin-bottom: 1em;
}

*:before, *:after {
    box-sizing: inherit;
  }
  
  .calendar-container {

    
  }
  .calendar {
    border-bottom: 1px solid rgba(0, 0, 0, .5);
    border-right: 1px solid rgba(0, 0, 0, .5);
    width: 100%;
    background-color: var(--color-fondos-2);
  }
  .day {
    border-top: 1px solid rgba(0, 0, 0, .5);
    border-left: 1px solid rgba(0, 0, 0, .5);
  
    padding: 15px;
  
    text-align: center;
  }
  .day.adj-month {
    background-color: rgba(0, 0, 0, .1);
    opacity: .5;
  }
  
  .calendar-item {
    display: block;
    height: 5px;
  
  }
  
  .calendar-control {
    background-color: var(--color-fondos-2);
    cursor: pointer;
    display: inline-block;
    padding: 4px 12px;
    color: var(--color-textos-2);
  }
  
  .calendar-control[data-calendar-control="prev"] {
    float: left;
  }
  .calendar-control[data-calendar-control="next"] {
    float: right;
  }
  
  #cajacalendar{
    background-color: var(--color-fondos-botones);
    height: 20px;
    width: 20px;
    border-radius: 2px;
}

.caleninfo{
    display: flex;
    align-items: center;
    gap: 0.5em;
    text-align: center;
    align-self: center;
    width: 90%;
}
.info-calendario{
    margin: 40px;
    text-align: center;
    display: block;
    width: 100%;
}
.info-calendario-container{
    width: 20%;
    margin: auto;
    display: flex;
    gap: 0.5em;
    align-items: center;
}





  /* FOOTER */
footer {
    margin-block: 2em;
}

footer .contenedora {

    width: 90%;
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

footer li {
    font-family: "Catamaran-Regular";
    font-size: 0.9em;
    margin-block: 0.2em;
}

footer h4 {
    font-family: "Catamaran-Bold";
    font-size: 1.3em;
}

.logofooter {
    width: 100%;
    margin-block: 2em;
}



footer img {
    width: 8em;
}







/* CAMBIOS A PARTIR DE LOS 640px ----------------------------------------------------*/
@media (min-width: 40em) {
    main > section {
        width: 70%;
        margin-inline: auto;
    }

    header .contenedora {
        width: 70%;
        margin-inline: auto;
    }

    header .contenedora > div:last-of-type > nav {
        width:40%;
    }

    /** INICIAR SESION **/
    .iniciasesion {
        padding-bottom: 5em;
    } 

    /** INICIO **/
    .inicio > div {
        width: 70%;
        margin-inline: auto;
    }
    

    /** PELICULA X **/
    .peli {
        position: absolute;
        top: 27.5em;
    }

    .masinfo .trailer {
        width: 8em;
    }

    .atras {
        font-size: 1.2em
    }

    .pelix h1 {
        font-size: 1.2em;
    }

    .pelix {
        width: 70%;
        margin-inline: auto;
    }


    /** PERFIL **/
    .perfilinfo div {
        justify-content: space-between;
    }

    .usuarioinfo {
        gap: 4em;
    }

    .mascont {
        padding-block: 1.5em;
    }


    
    /* FORMULARIO ARTISTA -------------*/
    .controls{
        font-size: 1em;
    }
    .preguntaformulario {
        font-size: 1em;
    }
    .formulario_a p {
            font-size: 0.9em;
        }
    .formulario_a{
        gap: 1em;
        }
    


     /* PERFIL ARTISTA ------------------------------*/
    .miperfil {
        
    }
    .upscont p{
        font-size: 1em;
    }
    .upscont div a {
        font-size: 0.9em;
    }
    .iconsperfil {
        gap: 2em;
    }

     /* PERFIL USUARIO----------------------------------*/
     .peliculasporver img, .peliculasvistas img {
        min-width: 10em;
     }
     .perfilinfo > div {
        gap: 2em;
     }


    /* CONFIRMACION ARTISTA-------------------------- */
          .confir p{
            width: 350px;
     }

     /* RESERVA-------------------------------------- */

        #reservanch{
            max-width: 60%;
            margin: auto;
        }


     /* FOOTER */

    footer .contenedora {
        width: 70%;
        margin-inline: auto;
    }

    footer .contenedora {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .logofooter {
        width: auto;
        margin-block: 0;
    }
        
    .infofooter {
        gap: 7em;
    }
}

/* CAMBIOS A PARTIR DE LOS 800px */
@media (min-width: 50em) {

    .masinfo {
        position: relative;
        top: 8.5em;
    }

    .valoracion {
        margin-top: 10em;
    }
    
    .artistax {
        flex-direction: column;
    }

    .posterartista {
        min-width: 12em;
    }

    .artistatal {
        display: flex;
        gap: 2em;
    }
}

/* CAMBIOS A PARTIR DE LOS 960px */
@media (min-width: 60em) {
    /** HEADER **/
    header .contenedora > div:nth-of-type(2) > button {
        
    }

    .inicio {
        padding-top: 2em;
    }

    .inicio div {
        padding-block: 6.7em;
        padding-inline: 2em;
    }

    .dia {
        flex-grow: 0;
        width: 10em;
    }

    .hora {
        flex-grow: 1;
        padding-inline: 0;
    }

    .lugar {
        width: 35%;
        border-top: 0;
    }

    .fecha {
        justify-content: space-between;
    }

    .pelidelasemana > section {
        width: 15em;
    }


    /* INICIO */
    .inicio {
        background: url(../imagenes/imgfondoinicio2.jpg) top left;
        background-size: cover;
        padding-top: .5em;
        text-align: center;
    }

    /** INICIO **/
    .inicio > div {
        padding-block: 1em;
    }

    /** PELICULA X **/
    .iniciopeli {
        width: 70%;
        margin-inline: auto;
    }

    .peli {
        top: 28em;
    }

    .masinfo {
        top: 10.5em;
    }

    .valoracion {
        margin-top: 10em;
    }


    /** VALORACION **/
    .valoracion {
        margin-top: 13em;
        display: flex;
        justify-content: center;
    }

    .valoracion .interact {
        display: flex;
        flex-direction: column;
        justify-content: left space-between;
        gap: 2em;
        border-right: solid 0.01px var(--color-textos-1);
    } 

    .vista {
        border-right: 0;
    }
    
    .vista p {
        width: 5em;
    }

    .agregaralista p {
        min-width: 5em;
        text-align: left;
    }
    
    .calificacion {
        padding-left: 3em;
        margin-top: 0;
    }


    /* RESEÑAS */
    .fecharesena {
        display: flex;
        color: var(--color-textos-2);
    }

    .envivo > article {
        display: flex;
        flex-wrap: wrap;
        gap: 1em;
        justify-content: space-between;
    }

    .fecha {
        width: 100%;
    }

    .envivo > article > .sinopsis {
        width: 35%;
        margin-inline: 0.8em;
    }

    .envivo > article > .botones {
        gap: 5.5em;
        margin-top: 0;
    }

    .pelidelasemana .pelicula {
        width: 12em;
    }

    .calificacionpelix {
        margin-bottom: 2em;
    }
    

}

/* CAMBIOS A PARTIR DE LOS 1200px */
@media (min-width: 75em) {

    .peli {
        top: 32em;
    }

    .masinfo {
        position: relative;
        top: 8.5em;
    }

    .valoracion {
        margin-top: 10em;
    }

}

/* CAMBIOS A PARTIR DE LOS 1400px */
@media (min-width: 87.5em) {

    .peli {
        top: 36em;
    }

    .masinfo {
        position: relative;
        top: 8.5em;
    }

    .valoracion {
        margin-top: 10em;
    }

}