:root{
    --fuenteTitulos: 'Jersey 15', sans-serif;
    /* --fuenteParrafos: 'Roboto', sans-serif; */
    --fuenteParrafos: 'Kanit', sans-serif;
    --primario: #784D3C;
    --blanco: #ffffff;
    --azul:#243673;
    --naranja:#ec5f0a;
    --negro: #000000;
    --gris: #e1e1e1;
}

html{
    box-sizing: border-box;
    font-size: 62.5%; /* 1 rem = 10 px */
}

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

body{
    font-family: var(--fuenteParrafos);
    font-size: 1.6rem;
    /*font-size: 2rem;*/
    /*line-height: 2;*/
    line-height: 1.7;
}

/** GLOBALES **/

.contenedor{
    max-width: 120rem;
    width: 90%;
    margin: 0 auto;
}

a{
    text-decoration: none;
}

h1, h2, h3, h4{
    font-family: var(--fuenteTitulos);
    line-height: 1.2;
}

h1{
    font-size: 4.8rem;
}

h2{
    font-size: 4rem;
}

h3{
    font-size: 3.2rem;
}

h4{
    font-size: 3.2rem;
}

img{
    max-width: 100%;
}

/** UTILIDADES **/

.no-margin{
    margin: 0;
}

.no-padding{
    padding: 0;
}

.centrar-texto{
    text-align: center;
}

.justificar-texto{
    text-align: justify;
}

/** HEADER **/

.header{
    /* background-image: url(../img/fondo2.JPG); */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* height: 65rem; */
}

@media (max-width: 767px){
    .header{
        height: 45rem;
    }
}

.header__texto{
    color: var(--blanco);
    font-size: 1.8rem;
    font-weight: bold;
    padding-top: 18rem;
    text-transform: uppercase;
}

.header__texto--bold{
    color: yellow;
}

.header__texto h1{
    font-size: 5.5rem;
}

@media (min-width: 768px){
    .header__texto{
        padding-top: 35rem;
    }
    .header__texto h1{
        font-size: 8.5rem;
    }
}

/** --------------------------------------------------------------------------------------- **/


/** NAVBAR **/

.barra__sombreado{
    background-color: rgba(0, 0, 0, 0.5); /* Negro con una transparencia del 50% */
    transition: background-color 0.3s ease; /* Efecto de transición suave en el cambio de color */
    /* position: fixed; Mantiene el navbar siempre visible  */
    z-index: 10; /* Se mantiene por encima del slider */
    /* position: relative; DEFINE UN PUNTO DE REFERENCIA */
}

.barra__sombreado:hover{
    background-color: rgb(255, 255, 255); /* Blanco sólido al pasar el mouse (sin transparencia) */
}

.barra__sombreado:hover .navegacion__enlace{
    color: var(--azul);
    font-weight: bold;
    font-size: 1.8rem;
}

@media (min-width: 768px){
    .barraS{
        /* border: 1px solid red; */
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}

.socialNavbar{
    margin-top: 1rem;
}

@media (min-width: 768px){
    .socialNavbar{
        display: flex;
        gap: 0.5rem;
    }
}

.socialNavbar_logo{
    /* max-width: 2%; */
    transition: background-color 0.3s ease; /* Efecto de transición suave en el cambio */
}

.barraP{
    /* padding-top: 2rem; */
    text-transform: uppercase;
}

@media (min-width: 768px){
    .barraP{
        /* border-top: 1px solid red; */
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* padding-top: 1rem; */
    }
}

@media (min-width: 768px){
    .navegacion{
        display: flex;
        gap: 4rem;
        margin-top: initial;
    }
}

.navegacion__enlace{
    color: var(--blanco);
    font-weight: bold;
    font-size: 1.8rem;
    transition: background-color 0.3s ease; /* Efecto de transición suave en el cambio de color */
}

.navegacion__enlace.contacto{
    background-color: var(--naranja);
    padding: 0 0.5rem 0 0.5rem;
}

@media (max-width:767px){
    .navegacion__enlace{
        display: block;
    }
}

.icon {
    display: none;
    font-size: 1.5em;
    color: var(--blanco);
    cursor: pointer;
}

@media (max-width: 1024px) {
    .navegacion {
        display: none;
        /* flex-direction: column; flex-direction no tiene ningún efecto en este elemento ya que no es un contenedor flex.*/
        /* flex-direction: row; */
        width: 100%;
        text-align: center;
    }

    .icon {
        display: block;
    }

    .icon:hover {
        color:blue;
    }
}

/*DUDAAAAAAAAAAAAAAAAAAAAAAAA,ANTES LOGIN*/
@media (min-width: 768px){
    .logo{
        /* display: grid;
        grid-template-columns: 2fr 2fr 2fr;
        padding: 1rem 0 1rem 0; */
    }
}

@media (min-width: 1024px){
    .logo{
        /* margin-top: 1rem; */
        /* display: grid;
        grid-template-columns: 2fr 2fr 2fr;
        padding: 1rem 0 1rem 0; */
    }
}
    .logo_img{
        max-width: 35%;
        transition: background-color 0.3s ease; /* Efecto de transición suave en el cambio */
}

/** --------------------------------------------------------------------------------------- **/

/** CARRUSEL **/
.carousel-container {
    width: 100%;
    height: 100vh; /* Para que el slider ocupe toda la pantalla*/
    top: 0;
    overflow: hidden;
    position: fixed; /* Se fija como fondo de la pagina */
    z-index: -1; /* Se coloca detras del navbar */
    /* border: 2px solid red; Solo para verificar si el contenedor es visible */
}
.carousel-slide {
    display: flex;
    transition: transform 0.5s ease-in-out;
}
.carousel-slide img {
    width: 100%;
    height: 100vh; /* Mantiene el tamaño uniforme */
    object-fit: cover;
}
button {
    position: absolute; /* Se posiciona dentro de .carousel-container */
    top: 60%; /* Aqui button estara 60% desde arriba */
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    z-index: 5; /* Asegura que los botones esten visibles*/
}
#prev { left: 10px; }
#next { right: 10px; }

/** --------------------------------------------------------------------------------------- **/


/** BG SECTIONS **/

.bg__section{
    background-image: url(../img/2.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    position: relative;
    z-index: 1;
    margin-top: 100vh;
}

.bg__section--2{
    background-image: url(../img/4.jpg);
}

.bg__section--4{
    background-image: url(../img/6.jpg);
}

.bg__section--5{
    background-image: url(../img/8.jfif);
}

.section__title{
    color: #F6D600;;
    padding: 5rem;

    background-color: rgba(0, 0, 0, 0); /* Negro con una transparencia del 50% */
    transition: background-color 0.3s ease; /* Efecto de transición suave en el cambio de color */
}

.section__title:hover{
    background-color: rgba(0, 0, 0, 0.7); /* Negro con una transparencia del 70% */
}

.section__title--5{
    background-color: rgba(0, 0, 0, 0.7); /* Negro con una transparencia del 70% */
}

.section__title--login{
    padding: 15rem 5rem 15rem 5rem;
    /* background-color: var(--blanco); */

}

.section__title h1{
    font-size: 5.5rem;
    line-height: 1;
}

.section__title--2 h1{
    line-height: 1;
}

.section__p{
    background-color: #F6D600;
    padding: 1.5rem;
    border-bottom: 1px solid var(--negro);
}

.section__p--bbn{
    border-bottom: none;
}

.section__p--2{
    background-color: var(--negro);
}

.section__p--4{
    background-color: #1a1818;
    border-bottom: none;
}

.section__p p{
    color: var(--negro);
    font-size: 1.5rem;
    text-align: justify;
}

.section__p--2 p{
    color: var(--blanco);
    font-weight: bold;
}

.section__p--2 p,ol{
    color: var(--blanco);
}

.section__p--3 p{
    text-align: center;
}

.section3__p--3 span{
    font-style: oblique;
}

@media (min-width:769px){
    .section{
        display: grid;
        grid-template-columns: 2fr 2fr;

    }
    .section__title h1{
        font-size: 8rem;
        line-height: 2;
    }
    .section__title--2 h1{
        line-height: 2;
    }
    .section__p{
        padding: 7rem;
        border-bottom: none;
    }
    .section__p p{
        font-size: 2.5rem;
    }
}

/** --------------------------------------------------------------------------------------- **/

@media (min-width:769px){
    .section__tb{
        margin-top: -2rem;
    }
}

.textBoxVideoGames{
    border: 3px solid #F6D600;
    border-radius: 5px;
    font-weight: 600;
    font-size: 14px;
    height: 4rem;
    width: 100%;
    text-align: center;
}

@media (min-width:1024px){
    .textBoxVideoGames{
        width: 100rem;
    }
}

/** --------------------------------------------------------------------------------------- **/

/** VIDEOGAMES CARDS **/

@media (min-width: 768px){
    .cards{
        display: grid;
        grid-template-columns: 2fr 2fr 2fr;
        column-gap: 2rem;
        padding: 1.5rem 1.5rem; /*Arriba Derecha Abajo Izquierda*/
    }
}

@media (min-width: 1024px){
    .cards{
        display: grid;
        grid-template-columns: 2fr 2fr 2fr 2fr 2fr;
        column-gap: 4rem;
        padding: 5rem 5rem 5rem 5rem; /*Arriba Derecha Abajo Izquierda*/
    }
}

.card{
    background-color: var(--blanco);
    border-radius: 0.5rem;
    padding: 3.5rem;
    margin-top: 3rem;
    transition: background-color 0.3s ease; /* Efecto de transición suave en el cambio de color */
}

.card img{
    height: 20rem;
    width: 100%;
}

.card p{
    color: var(--negro);
    font-size: 1.5rem;
}

.card__precio{
    line-height: 0.1;
}

.card:hover{
    background-color: #F6D600;
}

.section__s{
    padding-top: 3rem;
    text-align: center;
}

@media (min-width: 768px){
    .section__s{
        padding-top: 4rem;
        text-align: left;
    }
}

@media (min-width: 1024px){
    .section__s{
        padding-top: 8rem;
        text-align: left;
    }
}

.section__s select{
    font-family: var(--fuenteParrafos);
    border: 3px solid #F6D600;
    border-radius: 5px;
    font-weight: 600;
    padding: 1rem; /* Arriba Derecha Abajo Izquierda*/

}


/** --------------------------------------------------------------------------------------- **/

/** COLOR DE FONDO FUNCTIONS **/

.bg-color{
    background-color: yellow;
    /* padding: 0rem 0rem 2rem 0rem; Arriba Derecha Abajo Izquierda */
}

.bg-color p{
    color: var(--blanco);
    font-weight: bold;
    font-size: 1.9rem;
    margin-top: 0rem;
}

.sectionFunctions{
    background-image: url(../img/4.jpg);
    background-size: cover;
    background-repeat: no-repeat;

    border: 4px solid var(--negro);
    border-radius: 3rem;
    padding: 1rem 2rem;
    margin-bottom: 2rem;
}

.sectionFunctions h2{
    color: var(--blanco);
}

/** --------------------------------------------------------------------------------------- **/

/** REGISTER.PHP **/

/* .register{
}

.register__input{
    margin-bottom: 3rem;
    border-radius: 1rem;
    padding: 1rem;
}

.register__button{
    border-radius: 1rem;
    padding: 1rem;
} */