/* Inicio CSS Global */
:root {
    --color-primary: #141420;
    --color-secondary: #1e1e30;
    --color-accent: #c850fa;
    --color-terciary: #59597d;
    --color-quaternary: #555151;
    --color-text: #f0f0ff;
    --font-titulo: "Rajdhani", sans-serif;
    --font-cuerpo: "Inter", sans-serif;
    --space-xs: 4px;
    --space-s: 8px;
    --space-m: 16px;
    --space-l: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
}
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-cuerpo);
    background-color: var(--color-primary);
    color: var(--color-text);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* Tipografía */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-titulo);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-secondary);
    position: sticky;
    top: 0;
}

/* Inicio seccion Contacto */

.main-contacto {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
/*Título y formulario */
.titulo {
    color: var(--color-accent);
    margin-top: var(--space-l);
    margin-left: var(--space-l);
}
.formulario {
    background-color: var(--color-secondary);
    padding: var(--space-l);
    border-radius: 8px;
    max-width: 400px;
    width: 100%;
    margin-top: var(--space-l);
    margin-left: var(--space-l);
}
.formulario label {
    display: block;
    margin-bottom: var(--space-m);
}
/* Inputs y textarea */
.formulario input[type="text"],
.formulario input[type="email"],
.formulario textarea {
    width: 100%;
    padding: var(--space-s) var(--space-m);
    box-sizing: border-box;
    background-color: var(--color-text);
    color: #141420;
    cursor: text;
    border-radius: 4px;
    border: none;
}
/* Botones */
.formulario input[type="submit"],
.formulario input[type="reset"] {
    background-color: var(--color-accent);
    color: var(--color-text);
    border-radius: 4px;
    border: none;
    padding: var(--space-s) var(--space-m);
    cursor: pointer;
}
/* Acciones */
.acciones {
    display: flex;
    gap: var(--space-m);
    margin-top: var(--space-m);
}
.accion {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin-bottom: var(--space-s);
}

/* Fin seccion Contacto */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-titulo);
}

p {
    font-family: var(--font-cuerpo);
}

form {
    font-family: var(--font-cuerpo);
}

/* Inicio seccion Pedidos*/

.titulo_pedidos {
    text-align: center;
    margin-top: var(--space-l);
    font-family: var(--font-titulo);
}

.form_pedidos {
    text-align: center;
}

.form_pedidos label {
    display: block;
    margin-bottom: var(--space-xs);
}

.button_pedidos {
    color: var(--color-text);
    padding: var(--space-s) var(--space-s);
    cursor: pointer;
    margin-top: var(--space-s);
    background-color: var(--color-button);
    display: inline-block;
    border: 2px solid black;
    border-radius: 4px;
    border-color: black;
    font-size: 14px;
    font-family: var(--font-cuerpo);
    margin-top: var(--space-s);
}

header nav a {
    color: var(--color-text);
    text-decoration: none;
    padding: var(--space-s);
    justify-content: center;
}

header nav a:hover {
    color: var(--color-accent);
}

footer {
    text-align: center;
    padding: var(--space-m);
    background-color: var(--color-secondary);
}
/* Fin CSS Global */

/* Seccion FAQ */
.logo {
    width: 250px;
}

.faq_titulo {
    text-align: center;
    font-size: 40px;
}

.faq_titulo span {
    color: var(--color-accent);
}

.faq_subtitulo {
    text-align: center;
    margin-bottom: var(--space-l);
}

.faq_container {
    text-align: center;
}

.faq_container details {
    background-color: var(--color-accent);
    margin: var(--space-m) auto;
    padding: var(--space-s);
    width: 60%;
    border-radius: 8px;
    text-align: left;
}

.faq_container details summary {
    text-align: left;
    cursor: pointer;
}

/* Fin Seccion FAQ */

/*******INDEX********************/
/* Inicio de Seccion de Ofertas */
.bannerIdx {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: var(--space-l) 0; /* 24PX */
}

.tituloIdx {
    margin-left: 6em;
    align-self: flex-start;
    color: var(--color-text);
}

.recuadroIdx {
    grid-template-columns: 20fr 10fr;
    grid-template-rows: min-content;
    display: inline-grid;
    width: 80%;
    background-color: var(--color-terciary);
    border-radius: 1em;
    align-content: center;
}

.videoOfertaIdx video {
    width: 100%;

    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    vertical-align: middle;
}

/*por si el navegador no soporta video*/
#videoNoSoportado img {
    width: 100%;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
    vertical-align: middle;
}
.detalleOfertaIdx {
    margin-left: 1em;
    margin-right: 1em;
}
.detalleOfertaIdx p {
    font-size: large;
    text-align: justify;
}

.detalleOfertaIdx h3 {
    font-size: medium;
    align-items: center;
}

.tituloResaltado {
    font-weight: bold;
}

.detalleOfertaIdx {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-m); /* 16PX */
}
.contenedorBotonPrecio {
    grid-template-columns: 20fr 10fr;
    grid-template-rows: min-content;
    display: inline-grid;
    margin-bottom: var(--space-m); /* 16PX */
    background-color: #00000040;
    padding: var(--space-s) var(--space-s); /* 8PX */
    border-radius: var(--space-xs); /* 4PX */
    width: 90%;
}

.contenedorPrecios {
    display: flex;
    align-items: center;
    background-color: #00000040;
    padding: var(--space-xs) var(--space-s); /* 4PX Y 8PX */
    border-radius: var(--space-xs); /* 4PX */
    width: fit-content;
}

.precioOriginal {
    margin-left: 1em;
    text-decoration: line-through;
    color: black;
    font-size: 0.85em;
    margin-right: var(--space-s); /* 8PX */
}

.precioOferta {
    color: white;
    font-weight: bold;
    font-size: 1.2em;
}

#botonCompraOferta {
    border-style: hidden;
    font-weight: bold;
    cursor: pointer;
    width: 150px;
    height: 40px;
    background-color: cornflowerblue;
    border-color: black;
    border-radius: var(--space-s); /* 4PX */
}

#botonCompraOferta:hover {
    color: cornflowerblue;
    background-color: white;
}

/* Fin Inicio de Seccion de Ofertas */
/* Inicio Top 5 mas vendidos */
#masVendidosIdx {
    display: flex;
    padding: var(--space-s); /* 8PX */
    flex-wrap: wrap;
    gap: 1.5em;
    margin: 0% auto;
    background-color: var(--color-terciary);
    box-shadow: inset 1px 1px 2em 1em var(--color-secondary);
    border-radius: var(--space-s); /* 8PX */
    width: 58%;
    justify-content: center;
}

.JuegoMasVendidoIdx {
    width: 12em;
    height: 18em;
    background-color: var(--color-secondary);
    border-radius: var(--space-s); /* 8PX */
    text-align: justify;
    box-shadow: 1px 1px 2px 1px black;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.JuegoMasVendidoIdx a{
        text-decoration: none;
        color: inherit;       
    }

.JuegoMasVendidoIdx:hover {
    cursor: pointer;
    background-color: var(--color-terciary);
    color: white;
    box-shadow: 1px 1px 2px 1px var(--color-secondary);
}

.caratulaIdx img {
    width: 12em;
    border-top-left-radius: var(--space-s); /* 8px */
    border-top-right-radius: var(--space-s); /* 8px */
}

.topDescripcionIdx {
    font-size: x-small;
    margin: 2px;
}

.estrellasIdx {
    margin-top: auto;
    margin-left: var(--space-xs); /* 4px */
    margin-bottom: var(--space-xs); /* 4px */
    text-align: left;
}

#misionActividad p {
    padding-inline: 5%;
}

#misionActividad details {
    padding-inline: 5%;
}
/* Inicio Top 7 mas vendidos */

/* DISEÑO RESPONSIVO (Móviles y Tablets)*/
@media (max-width: 768px) {
    .tituloIdx {
        margin-left: 5%;
    }

    .recuadroIdx {
        grid-template-columns: 1fr;
        width: 95%;
    }

    .videoOfertaIdx video {
        border-bottom-left-radius: 0;
        border-top-right-radius: 1em;
    }

    .contenedorBotonPrecio {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--space-m); /* 16px */
    }

    .detalleOfertaIdx {
        padding: var(--space-m); /* 16 px */
        margin: 0;
    }

    .JuegoMasVendidoIdx {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: auto;
        padding: var(--space-xs) 0; /* 4px */
    }
    
    .caratulaIdx {
        width: 12em;
        margin-top: 1px;
        margin-right: 1px;
        margin-bottom: 0;
    }

    .caratulaIdx img {
        border-radius: var(--space-s); /* 8 px */
        width: 100%;
    }

    .topDescripcionIdx {
        width: 20em;
        text-align: center;
    }

    .estrellasIdx {
        margin-top: 1px;
        margin-right: 1px;
        margin-bottom: auto;
        text-align: left;
    }
}

/***** FIN CSS INDEX ******/
/* css equipo */
/* equipo */
.equipo {
    display: flex;
    justify-content: center;
    gap: var(--space-l);
    padding: var(--space-m);
}

/* Cards */
.miembro_equipo {
    background-color: var(--color-quaternary);
    border: none;
    border-radius: 10px;
    width: 20%;
    padding: var(--space-m);
    box-shadow: 0 4px 8px #000000;
    text-align: center;
}

/* Imágenes equipo */
.miembro_equipo img {
    width: 250px;
    height: auto;
    object-fit: cover;
    border-radius: 10px;
}

/* Botón Conocer más */
summary {
    margin-top: 10px;
    background-color: var(--color-accent);
    color: var(--color-text);
    padding: var(--space-s);
    cursor: pointer;
    border-radius: 5px;
    list-style: none;
    text-align: center;
}

/* fin css equipo */