*{
    box-sizing: border-box;
}


.color1 {color: #20dad8;}
.color2 {color: #49dedd;}
.color3 {color: #4b1c89;}
.color4 {color: #c24f95;}
.color5 {color: #f6a4b0;}

:root{
    /* --color-fondo: #0c1d33; */
    --color-fondo: #4b1c89;
    --color-header:#4b1c89;
    --color-letra-header:black;
    --color-fondo-gris: #132531;
    --acentos:#20dad8;
}
html{
    scroll-behavior: smooth;
}
button{
    background-color: #0a1624cc;
    font-size: large;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    border: #0088FF;
    box-shadow: 3px 2px 10px #0088FF;
    color: white;
    
    background-color: #006fcf;
    box-shadow: 6px 6px 2px #000000;
    transition: transform .3s;
}
h1{font-size: 3.5em;}
h2{font-size: 2.7em;}
h3{font-size: 2em;}
ul{list-style: none;}
li{font-size: 1em;}
button:hover{
    background-color: #046ac4;
    transform: scale(1.1);
}
.container{
    
    max-width: 1400px;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
}

header{
    position: fixed;
    z-index: 10;
    width: 100%;
    background-color: var(--color-header);
    /* background-image: linear-gradient(
        rgba(255, 97, 6, 0.884),rgba(255, 119, 7, 0.479)
    ); */
    border-radius: 0px 0px 71px 71px;
    -moz-border-radius: 0px 0px 71px 71px;
    -webkit-border-radius: 0px 0px 71px 71px;
    border-bottom: 3px solid rgb(0, 217, 255);
    
}
header .logo{
    margin-left: 20px;
    padding: 10px 10px;
    color: rgb(255, 255, 255);
    font-weight: bold;
    font-size: 1.7em;
    align-items: center;
    padding-bottom: 5px;
    text-shadow: 2px 1px 2px #5e0183;
}

#mslogo{
  margin-bottom: -4%;
  
}
header .container{
    display:flex;
    flex-direction: column;
    align-items: center;   
}
header nav{
    display: flex;
    flex-direction: row;
    text-align: center;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 10px;
    
    
}



header a{
    padding: 5px 12px;
    text-decoration: none;
    font-weight: bold;
    color: rgb(255, 255, 255);
    transition: .1s;
}
header .logo {
    margin-top: 0;
   margin-bottom: 0;
}



/* Todo el diseño de  la cabecera */

#hero{
    height: 85vh;
    background-image :linear-gradient(
        0deg, #02030e00,#1a1d3800
    ), url("/media/space.jpg");
   /*  background-image :linear-gradient(
        0deg, #02030ea6,#02030ed5
    ), url("media/fondo.jpg"); */
    background-repeat: no-repeat;
    background-size: cover;
    background-position:center center;
    background-attachment: fixed;
}
#particles-js{
   /* margin-left: -50px; */
    width: auto; 
    height: 100%;  
    position: fixed;
    
    

}

.info-precios{
   
    display: grid;
    grid-template-rows: 2fr 1fr;
    padding-top: 110px;
    justify-content: center;
    
}
.precios{
    display: grid;
    grid-template-rows: repeat(2,1fr);
    gap: 10px;
}
.precios-a{
    display: grid;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    gap: 15px;
    grid-template-columns: repeat(2,1fr);
    background-color: #0c1d33b4;
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.479),rgba(0, 0, 0, 0.884)
    );

    border-radius: 20px;
}
.personaje img{
    display: none;
    width: 100px;
}
.caja{
    width: 150px;
    margin-bottom: -10px;
}

.antes{
    font-size: 1em;
    font-weight: bolder;
    color:darkred;
    text-decoration: line-through;
}
.ahora{
    font-size: 1em;
    font-weight: bolder;
    color:white;
    
}

.color-acento{
    color: var(--acentos);
    text-shadow: 1px 1px 0px rgb(255, 255, 255);
   
    
}

/* Temporada actual */
#temporada .container{
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    text-align: center;
    align-items: center;
    padding: 40px 12px;
    color: white;
    background-color: var(--color-fondo);
    /* background-image :radial-gradient(
         #ffffff00 50%,#000000cb
    ); */
   /*  background-image :linear-gradient(
        #00000077 5%,#ffffff00
    ); */
    background-size: cover;
    
}
.elementor-shape-fill{
    fill: var(--color-fondo);
    transform: translate(0px,-4px);
}

#temporada .parrafo-temporada{
    display: none;
}
#temporada .img-container-up{
    background-image: linear-gradient(
    0deg, #00000000,#00000000)
    ,url("/media/Navidad.jpg");
    background-size: contain;
    background-position: center center;
    width: 350px;
    height: 200px;
    border-radius: 10px;
    border:3px solid white;

}

/* Proximas temporadas */
#proximas-temporadas{
    background-color: var(--color-fondo);
    color: rgb(255, 255, 255);
    text-align: center;
    margin-bottom: 0;
    padding-top: 0;
    
    background-image :linear-gradient(
        0deg, #30081edc,#330c1985
    ), url("/media/fondo.jpg");
    background-size: cover;
    background-attachment: fixed;
}
#proximas-temporadas h1{
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 1.6em;
text-shadow: 5px 5px 0px black;
}
#proximas-temporadas .resaltar{
    color: var(--acentos);
    background-color: rgb(255, 255, 255);
    border-radius: 15px;
    border: 3px solid;
    text-shadow: 0px 0px 0px white;
}
#proximas-temporadas h2{
    text-shadow: 6px 6px 2px #000000;
    margin-top: 0;  
}

#proximas-temporadas .container{
    padding: 20px 60px;
 
}

#proximas-temporadas .carta-temporada{
  
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    opacity: 0.94;
    
}

#proximas-temporadas p{
    display: block;
}
#proximas-temporadas button{
    margin-bottom: 20px;
}
#proximas-temporadas .carta-temporada{
    background-position: center center;
    background-color:var(--color-fondo);
    background-image :radial-gradient(
         #ffffff00 60%,#000000cb
    );
    
    background-size: cover;
    border-radius: 20px;
}
#proximas-temporadas .carta-temporada h3{
    color: #0088FF;
    margin-bottom: 5px;
    margin-top: 15px; 
}

.carta:first-child{
    background-image: linear-gradient(
        0deg, #00000000,#00000000
    ),url("/media/amor.jpg");
    
}
/* Un ejmplo de categorias principales que quiza use pero si el carrusel funciona pos ya no */
#categorias{
    padding-top: 20px;
    background-color: #132531;
    background-image :radial-gradient(
         #ffffff00 60%,#000000cb
    );
    background-size: cover;
}

/*
Este es el color gris que tenia antes
#132531
**/

#categorias .categoria{
    display: flex;
    height: 200px;
    flex-direction: row;
    justify-content: center;
    
}
#categorias h2{
    color: #0088FF;
    text-align: center; 
}
#categorias .cate{
    
   padding: 0px;
   margin: 0px;
    border-radius: 20px;
    margin: 10px;
    height: 150px;
}
#categorias .cate:hover button{
    transform: scale(1.1);
    border: 3px solid white;    
}
#categorias .cate button{
    background-position: center center;
    background-size: cover;
    padding-left: 20px;
    min-width: 300px;
    min-height: 150px;  
    border-radius: 20px;
    box-shadow: 6px 6px 10px #000000;
    transition: transform .5s;
}

.cate:first-child button {
    background-image: linear-gradient(
        0deg, #00000000,#b6b6b600
    ),url("/media/navidad.jpg");
}
.cate:nth-child(2) button {
    background-image: linear-gradient(
        0deg, #00000000,#b6b6b600
    ),url("media/amor.jpg");
}
.cate:nth-child(3) button {
    background-image: linear-gradient(
        0deg, #00000000,#b6b6b600
    ),url("media/halloween.jpg");
}
/* Carrusel tipo netflix para las categorias */

#categories{
    
    background-color: var(--color-header);
    background-image :radial-gradient(
         #8c44c7cb 50%,#7d07ddcb
    ),url(/media/wave.webp);
    /* background-image :radial-gradient(
         #ffffff00 50%,#000000cb
    ); */
    padding: 5px;
    padding-top: 50px;
    padding-bottom: 20px;
    z-index: 0;
}

#categories h3{
    color: white;
    margin-bottom: 0px;
    margin-top: 10px;
    font-size: 1.4em;
}
::-webkit-scrollbar {
    display: none;
}
.carrusel-container{
    display: flex;
    width: 100%;
}
.carrusel-container .flechas{
   display: none;
    background-color: var(--color-header);
    margin-top: 5px;
    margin-bottom: 5px;
    width: 30px;
    text-align: center;
    padding: 0px;
    position: relative;
    opacity: 0.5;
    
}
.carrusel-container .flechas img{
    width: 25px;
    
}
.carrusel-imagenes{
    margin-left: auto;
    margin-right: auto;

    padding-top: 10px;
    padding-bottom: 5px;
    width: 100%;
    display: flex;
    flex-direction: row;
    
    scrollbar-color: black;
    scrollbar-width: none;
    scroll-behavior: smooth;
    overflow-x: scroll;
    
   
    position: relative;
}
.carrusel-imagenes .imagen-categoria{
    min-width: 55%;
    max-width: 50%;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 5px;
}

/* Contenedor de cada categoria y sus elementos */
.carrusel-imagenes .categoria-container{
    background-color: var(--color-fondo);
    min-width: 55%;
    max-width: 50%;
    margin-left: 2px;
    margin-right: 2px;
    border-radius: 5px;
    display: grid;
    grid-template-rows:70% 30%;
}
/* Parte superior */

.categoria-container .superior-container{
    padding: 10px;
    height: 100%;
    display: grid;
    visibility: hidden;
    grid-template-rows: 3fr 2fr;
}
.superior-container .unidad-medida-label{
    position: absolute;
    transform: translate(10px,-2px);
    color: #006fcf;
    font-size: 0.78em;
    font-weight: bold;
}
.categoria-container .superior .cuantificadores{
    display: grid;
    grid-template-columns: 1fr 3fr;
    z-index: 1;
}
.cuantificadores .modificadores{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background-color: #006fcf;
    border-radius: 5px;
    
}
.botones-unidades{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    padding-top: 5px;
    gap: 2px;
    z-index: 2;
}

/* Parte inferior */
.categoria-container .inferior{
    display: grid;
    grid-template-columns: 1fr 5fr;
    background-color: #060714b6;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    z-index: 2;
}
.categoria-container button ,.categoria-container input{
    width: 100%;
    height: 100%;
    margin: 0px;
    text-align: center;
    box-shadow: none;
    color: white;
    padding: 1px;
    padding-left: 0px;
    font-size: 0.9em;
}
.categoria-container input{
    color: #006fcf;
    font-size: 1.5em;
    text-align: center;
    font-weight: bold;
}
.categoria-container p{
   
    font-size: 0.9em;
    text-align: center;
    font-weight: bold;
   
    border-bottom-right-radius: 5px;
    color: white;
    margin: 0px;
    padding-top: 7.8px;
    padding-bottom: 7.8px;
}

.categoria-container img{
    width: 70%;
}
.categoria-container .imagen-categorizacion{
    position: absolute;
    width: 55%;
    border-radius: 5px;
    z-index: 0;
}
/* Todas las categorias cargadas del firebase */

#categorias-todas  {
    padding-top: 20px;
    background-color: var(--color-fondo);
    background-image :radial-gradient(
         #ffffff00 60%,#000000cb
    );
    background-size: cover;  
    padding-bottom: 20px; 
    
}

#cateki{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
}

#categorias-todas .catek{
    width: 99%;
    height: 100px;
    margin-bottom: 5px;
} 
#categorias-todas .titulo{
    width:82%;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color:#0a1624cc;
    color:white;
    font-size:0.80em;
    font-weight:bolder;
    transform:translate(35px,-77px);
    border-radius:10px;
    text-align:center; 
}
#categorias-todas .boton-carrito{
    background-color:#0c1b27;
    width:20%;
    height:35%;
    border-radius:5px;
    transform:translate(0%,-110%)
}
#categorias-todas .img-carrito{
    width:60%;
    height:60%;
    border-radius:5px;
    vertical-align:bottom
}

#categorias-todas h2{
    text-align: center;
    color:#0088FF;
    text-shadow: 6px 6px 10px #000000;
}

#categorias-todas button{
    background-position: center center;
    background-color: #000000;
    background-size: auto;
    padding-left: 20px;
     
    width: fit-content;
    height: fit-content;
    border-radius: 20px;
    box-shadow: 6px 6px 10px #000000;
    transition: transform .5s;
    margin: 0px;
    padding: 0px;
}


#categorias-todas a{
    color: white;
}
#categorias-todas .image{
    border-radius:10px;
    width:100%;height:100px;
    background-position:center center;
    background-size: cover;
    padding-left: 20px;
    box-shadow:6px 6px 10px #000000;
    transition:transform 0.2s;
    margin:0px;
    padding:0px;
}



#quantificador{
    display:none;
    grid-template-rows:repeat(2,1fr);
    transform:translate(20%,-182px);
    width: 50%;
}
#quantificador .unidades{
    display:grid;
    grid-template-columns: repeat(4,0.18fr);
    justify-content: center;
    margin-top: 5px;
}
#quantificador .unidad{
    background-color: #006fcf;
    border-radius: 10px;
    width: 35px;
    height: 20px;
    font-size: small;
}
#quantificador .masomenos{
    background-color: #006fcf;
    height: 100%;
    border-radius: 18px;
}
#quantificador .agregar{
    background-color: #006fcf;
    border-radius: 10px;
    width: 55px;
    height: 20px;
    font-size: small;
    
}
#quant{
    display: grid;
    grid-template-columns: repeat(4,0.31fr);
    margin-left: 0%;
    padding-left: 0%;
    margin: 0%;
    padding: 0%;
    justify-content: center;
    height: 30px;
}
#quant .carrito-quant{
    height: 30px;
}

#quant button{
    vertical-align: bottom;
    background-color: #132531;
    width: 100%;
    height: 50px;
    font-size: 16pt;
    margin: 0px;
    padding: 0px;
   
}
#quant input{
    vertical-align: bottom;
    color: #006fcf;
    font-size: larger;
    font-weight: bolder;
    text-align: center;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#quant img{
    vertical-align: bottom;
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#quant p{
    color:#006fcf;
    transform:translate(32%,-37px);
    font-weight:bold;
    font-size: 0.85em;
}

#categorias-todas .imgCategoria img:hover{
    transform: scale(1.05);
    border: 3px solid rgb(255, 255, 255);
}

/* aqui comienza el footer */
footer{
    height: auto;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    background-color: #dd0724cb;
    background-image: linear-gradient(
        rgba(55, 1, 68, 0.884),rgba(183, 0, 255, 0.479)
    );
    color: #ffff;
    justify-content: center;
    display: grid;
    grid-template-rows: repeat(4,0.2fr);
    justify-items: center;
}
footer .logo-footer{
    width: 20%;
}
footer p{
    font-size: small;
    margin-top: 4px;
    margin-bottom: 4px;
}
#redes{
    justify-items: center;
    font-size: 1.2em;
    padding-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2,0.5fr);
}
#redes li{
    font-size: small;
    padding: 5px;
}

#redes span{
color: rgb(255, 255, 255);
vertical-align: top;
font-size: medium;
}

/* La parte responsive si la pantalla llega a mas de 720 pixeles de ancho */
@media (min-width: 720px){
  
    header{
        position: fixed;
        width: 100%;
        z-index: 10;    
    }
  
    header .container{
        height: 70px;
        flex-direction: row;
        justify-content: space-between;     
    }

    header .logo{
        flex-direction: row;
        padding-bottom: 25px;
    }

    header nav{
        flex-direction: row;
        padding-bottom: 0;
        padding-right: 30px;
    }

    #hero {
        height: 500px;
        padding-left: 50px;
    }

    .info-precios{
        grid-template-columns: 1fr 0.5fr;
        padding-top: 150px;
        
    }
    .personaje img{
        display: block;
        width: 320px;
    }
    .precios{
        grid-template-columns: 1fr 1fr;
    }

    #temporada .container{

        display: flex;
        flex-direction: row;
        
    }

    #temporada .texto{
        width: 50%;
        max-width: 600px;
        text-align: initial;
        padding: 0px, 30px;
        display:flex;
        flex-direction: column;
        justify-content: center;
    }
     
    #temporada .texto p{
        display: block;
        font-size: 1.3em;
        font-weight: bold;
    }
    #temporada .img-container-up{
        background-image: linear-gradient(
        0deg, #00000000,#00000000)
        ,url("/media/Navidad.jpg");
        background-size: cover;
        background-position: center center;
        height: 300px;
        width: 50%;
        margin-right: 10px;
        border-radius: 10px;

    }
#proximas-temporadas h1{
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 3em;
}
    #proximas-temporadas .seasons{
        display: flex;
        justify-content: center;
    }


    #proximas-temporadas img{
        box-shadow: 20px 15px 8px #000000; ;
    }
    #proximas-temporadas h3{
        margin-top: 0;
    }
    #proximas-temporadas .carta-temporada{
        padding: 15px;
        margin:20px;
        height: 100%;
        box-shadow: 20px 15px 20px #000000; ;
    }
    /* La parte que es tipo carrusel de netflix */
  
    .carrusel-imagenes{
        width: 95%;
    }

    .carrusel-container .flechas{
        display: block;
    }

    .carrusel-imagenes .imagen-categoria{
        width: 20%;
    }
    .carrusel-imagenes .imagen-categorizacion{
        width: 20%;
    }
    .carrusel-imagenes .categoria-container{
    min-width: 20%;
    max-width: 20%;
    }
    .superior-container .unidad-medida-label{
        font-size: 0.96em;
        transform: translate(12px,-2px);
        }

    .categoria-container p{
        font-size: 1em;
        padding-top: 11px;
        padding-bottom: 11px;
        margin-bottom: 0px;
    }

    /* Aqui empiezan todas las categorias que se listan desde el firebase */
    #categorias-todas  {
        padding-top: 20px;
        background-color: var(--color-fondo);
        background-image :radial-gradient(
             #ffffff00 60%,#000000cb
        );
        background-size: cover;  
        overflow: hidden; 
    }
    
    #cateki{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    }
    #cateki .catek{
        height: 160px;
    }
    #categorias-todas h2{
        text-align: center;
        color:#0088FF;
        text-shadow: 6px 6px 10px #000000;
    }
    #categorias-todas .titulo{
        width:250px;
        color:white;font-size:1.2em;
        font-weight:bolder;
        transform:translate(50px,-106px);
        border-radius:10px;
        text-align:center; 
    }
    #categorias-todas .boton-carrito{
        background-color:#0c1b27;
        width:50px;height:50px;
        border-radius:10px;
        transform:translate(0%,-110%)
    }
    #categorias-todas .img-carrito{
        width:40px;
        height:35px;
        border-radius:5px;
        vertical-align:bottom
    }
    
    #categorias-todas button{
        background-position: center center;
        background-color: #000000;
        background-size: auto;
        padding-left: 20px;
         
        width: fit-content;
        height: fit-content;
        border-radius: 20px;
        box-shadow: 6px 6px 10px #000000;
        transition: transform .5s;
        margin: 0px;
        padding: 0px;
    }
    
    
    #categorias-todas a{
        color: white;
    }
    #categorias-todas .image{
        border-radius:20px;
        width:300px;height:150px;
        background-position:center center;
        background-size: cover;
        padding-left: 20px;
        box-shadow:6px 6px 10px #000000;
        transition:transform 0.2s;
        margin:0px;
        padding:0px;
    }
    
    #categoria-elemento{
        height: 150px;
    }
    #quantificador{
        display:none;
        grid-template-rows:repeat(2,1fr);
        transform:translate(20%,-250px);
        width: 250px;
    }
    #quantificador .unidades{
        display:grid;
        grid-template-columns: repeat(4,0.18fr);
        justify-content: center;
        margin-top: 5px;
    }
    #quantificador .unidad{
        background-color: #006fcf;
        border-radius: 10px;
        width: 45px;
        height: 25px;
        font-size: medium
        ;
    }
    #quantificador .masomenos{
        background-color: #006fcf;
        height: 47px;
        border-radius: 18px;
    }
    #quantificador .agregar{
        background-color: #006fcf;
        border-radius: 10px;
        width: 78px;
        height: 25px;
        font-size: medium;
    }
    #quant{
        display: grid;
        grid-template-columns: repeat(4,0.21fr);
        height: 50px;
        margin: 0%;
        padding: 0%;
        justify-content: center;
    }
    #quant p{
        color:#006fcf;
        transform:translate(35%,-53px);
        font-weight:bold;
        font-size: medium;
    }
    #quant button{
        vertical-align: bottom;
        background-color: #132531;
        width: 50px;
        height: 50px;
        font-size: 20pt;
        margin: 0px;
        padding: 0px;
       
    }
    #quant input{
        vertical-align: bottom;
        color: #006fcf;
        font-size: larger;
        font-weight: bolder;
        text-align: center;
        width: 50px;
        height: 46px;
        margin: 0px;
        padding: 0px;
    }
    #quant img{
        vertical-align: bottom;
        width: 50px;
        height: 50px;
        margin: 0px;
        padding: 0px;
    }
    
    #categorias-todas .imgCategoria img:hover{
        transform: scale(1.05);
        border: 3px solid rgb(255, 255, 255);
    }


/*  */

    footer{
        height: auto;
    }
    footer .logo-footer{
        width: 10%;
    }
    footer p{
        font-size: large;
        font-weight: bold;
    }
    #redes{
        padding: 0px;
        display: flex;
        flex-direction: row;
    }
    #redes li{
        padding: 10px;
        align-items: center;
        font-size: larger;
    }
    #redes img{
        vertical-align: top;
    }
    #redes span{
        font-size: 1em;
    }

}


body{
   
    font-family: sans-serif;
    margin: auto;
   
}