img{width: 100%;}
.banner-principal{
    background-image: url(/c/dia-del-nino/img/desk-nino-2023/banner-dia-del-nino-desk/BANNER_DESK_DIA_DEL_NINO_2023%20copia.svg);
    background-size: 100%;
    background-repeat: no-repeat !important;
    margin-top: 0%;
    font-size: 6rem;
    text-align: center;
    color: #fff;
    line-height: 1.3;
    padding: 1% 15% 0%;
}

.banner-principal h1{
    font-size: 10rem;
	text-transform: uppercase;
    margin-top: -1%;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: bold;

}

.banner-principal h2{
    font-size: 3rem;
    padding: 0% 19% 19%;
    margin-top: -4%;
    font-family: 'Roboto',sans-serif;
    font-weight: normal;
}

.carosel-root.categorias{
    margin-top: -10%;
    width: 100%;
    
}
.carosel-nav-right-categorias {
    right: 3px;
}
.carosel-categorias {
    width: 95%;
    margin: auto;
}
.carosel-item-content{
    width: 95%;
    position: relative;
    padding-bottom: 6px;
    margin: auto;
}

.carosel-item-content p{
    font-size: 15px;
    letter-spacing: 1px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    padding-left: 6%;
    color: #fff;
}
.carosel-item-producto{
    color: black;
    text-decoration: none;
}
.carousel-link{
    display: inline-block;
    background-color: #fff;
    width: fit-content;
    color: blue;
    font-size: 1rem;
    font-family: 'Roboto',sans-serif;
    padding: 9px 10px;
    border-radius: 2px;
    position: relative;
    margin-top: 2%;
    padding-left:7%;
    
}

.carosel-item-content img {
    width: 80%;
    height: 100%;
    object-fit: cover; width: 100%;
    height: auto;
    

}

.item-1 .carosel-item-content{
    background: rgb(239,70,98);
    background: linear-gradient(0deg, rgba(239,70,98,1) 71%, rgba(255,255,255,0) 71%);
    padding-bottom: 20px;
    border-radius: 10px;
    
}

.item-2 .carosel-item-content{
    background: rgb(239,151,49);
    background: linear-gradient(0deg, rgba(239,151,49,1) 71%, rgba(255,255,255,0) 71%);
    padding-bottom: 20px;
    border-radius: 10px;
    
}

.item-3 .carosel-item-content{
    background: rgb(235,204,32);
    background: linear-gradient(0deg, rgba(235,204,32,1) 71%, rgba(255,255,255,0) 71%);
    padding-bottom: 20px;
    border-radius: 10px;
    
}
.item-4 .carosel-item-content{
    background: rgb(181,203,39);
    background: linear-gradient(0deg, rgba(181,203,39,1) 71%, rgba(255,255,255,0) 71%);
    padding-bottom: 20px;
    border-radius: 10px;
    
}

.item-5 .carosel-item-content{
    background: rgb(50,215,224);
    background: linear-gradient(0deg, rgba(50,215,224,1) 71%, rgba(255,255,255,0) 71%);
    padding-bottom: 20px;
    border-radius: 10px;
}
.item-6 .carosel-item-content{
    background: rgb(33,164,213);
    background: linear-gradient(0deg, rgba(33,164,213,1) 71%, rgba(255,255,255,0) 71%);  
    padding-bottom: 20px;
    border-radius: 10px;
}
.item-7 .carosel-item-content{
    background: rgb(192,119,219);
    background: linear-gradient(0deg, rgba(192,119,219,1) 71%, rgba(255,255,255,0) 71%); 
    padding-bottom: 20px;
    border-radius: 10px;
}

.item-8 .carosel-item-content{
    background: rgb(239,70,98);
    background: linear-gradient(0deg, rgba(239,70,98,1) 71%, rgba(255,255,255,0) 71%);          
    padding-bottom: 20px;
    border-radius: 10px;
}
.item-9 .carosel-item-content{
    background: rgb(239,151,49);
    background: linear-gradient(0deg, rgba(239,151,49,1) 71%, rgba(255,255,255,0) 71%); 
    padding-bottom: 20px;
    border-radius: 10px;
}
.item-10 .carosel-item-content{
    background: rgb(235,204,32);
    background: linear-gradient(0deg, rgba(235,204,32,1) 71%, rgba(255,255,255,0) 71%);
    padding-bottom: 20px;
    border-radius: 10px;
    
}

.titulo-tendencia{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: bolder;
    margin-top: 10px;
}

.carosel-item-producto {
    width: 95%;
    margin: auto;
}
.carosel-item-producto img {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 50%;
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
}
.carosel .carosel-item {
    line-height: 1.2;
}
.carosel-item-texto .hasta{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    padding: auto;
}

.carosel-item-texto .descuento{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 40px;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    color: #EF4662;
}

.carosel-item-texto .categoria{
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    
    
}

.carosel-item-texto{
    border: #EF4662;
    width: 70%;
    margin: auto;
}

.carosel-nav-right-marcas {
    right: 3px;
}
.carosel-nav-left-marcas {
    left: 3px;
}
.carosel-marcas {
    width: 95%;
    margin: auto;
}
.contenedor-general-marcas{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
}
.contenedor-marcas{
    display: flex;
    flex-wrap: wrap;
    width: 48%;
    margin: auto;
    padding: 50px 0.5%;
}
.titulo-marcas{
    width: 95%;
    text-align: center;
    margin: 10px auto;
    color: #fff;
    font-size: 2rem;
    font-family: 'Roboto',sans-serif;
    font-weight: bold;
}
.card-marca{
    width: 15%;
    -webkit-box-shadow: 5px 5px 0px 0px rgb(172 93 8);
    -moz-box-shadow: 5px 5px 0px 0px rgba(172,93,8,1);
    box-shadow: 5px 5px 0px 0px rgb(172 93 8);
    margin: 5px auto;
    background: #fff;
}
.juguetes .card-marca{
    -webkit-box-shadow: 5px 5px 0px 0px rgba(172,47,58,1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(172,47,58,1);
    box-shadow: 5px 5px 0px 0px rgba(172,47,58,1);
}

@media (max-width: 1500px) {
    .banner-principal h1 {
        font-size: 8rem;
        margin-top: 0.5%;
    }
    .banner-principal h2 {
        font-size: 1.8rem;
    }
    .carosel-root.categorias {
        margin-top: -12%;
        width: 100%;
   }   
   .carosel-item-producto {
    color: black;
    text-decoration: none;
}
    
}


@media (max-width: 1340px) {
    .banner-principal h1 {
    font-size: 7rem;
    margin-top: 0.1%;
    }
    banner-principal h2 {
        font-size: 2rem;
        margin-top: -4%;
    }
    .carosel-root.categorias {
        margin-top: -13%;
        width: 100%;
   }  
   .carosel-item-content p {
    font-size: 13px;
   }
   .carosel-item-producto {
    color: black;
    text-decoration: none;
}
    
}


@media (max-width: 1240px) {
    .banner-principal h1 {
        font-size: 7rem;
        margin-top: -1.2%
    }
    .banner-principal h2 {
        font-size: 25px;
        margin-top: -4.8%;
    }
    .carosel-root.categorias {
         margin-top: -14%;
         width: 100%;
    }   
    .carousel-link {
        font-size: 13px;
    }
    .carosel-item-producto {
        color: black;
        text-decoration: none;
    }
    .carosel-item-content p {
    font-size: 11px;
    }
    .carosel-item-texto .hasta {
        margin-top: 8px;
    }
    .carosel-item-texto .categoria {
       font-size: 18px;
       margin-top: -10%;
    }
    .contenedor-marcas {
        width: 45%;
        margin: auto;
        padding: 23px 2%;
    }
        
    
   
}




@media (max-width: 1024px) {
    .banner-principal h1 {
        font-size: 90px;
        margin-top: -2%;
    }
    .banner-principal h2 {
        font-size: 20px;
        margin-top: -5%;
    }
    .carosel-root.categorias {
        margin-top: -15%;
        width: 100%;
        
    }
    .carosel-item-producto {
        color: black;
        text-decoration: none;
    }
    
    .titulo-marcas {
       font-size: 20px;
    }
    .contenedor-marcas {
        width: 45%;
        margin: auto;
        padding: 23px 2%;
    }
        
}

@media (max-width: 780px) { /*Empieza la parte mobile*/
    .banner-principal {
        background-image: url(/c/dia-del-nino/img/mob-nino-2023/banner-dia-del-nino-mobile/BANNER_MOBILE_DIA_DEL_NINO_2023%20copia.svg);
        font-size: 7rem;
       
    }
    .banner-principal h1 {
        font-size: 90px;
        margin-top: -0.5%;
    }
    .banner-principal h2 {
        font-size: 22%;
        margin-top: -5%;
    }
    .carosel-root.categorias {
        margin-top: -15%;
        width: 100%;
    }
    .carosel-item-producto {
        color: black;
        text-decoration: none;
    }
          
    .contenedor-marcas {
        width: 100%;
    }
    .card-marca {
        width: 15%;
    }
}


@media (max-width: 600px) {

    .banner-principal h1 {
        font-size: 70px;
        margin-top: 3px;
    }
    .banner-principal h2 {
        font-size: 18px;
        margin-top: -20px;
    }
    .carosel-root.categorias {
        margin-top: -16%;
        width: 100%;

    }
    .carosel-item-content {
        width: 100%;
        
    } 
    
    .carosel-item-producto {
        color: black;
        text-decoration: none;
    }
        
    .carosel-nav {
        display: none !important;
    }
    .titulo-tendencia {
        font-size: 22px;
    }
    .carosel-item-texto .descuento {
       font-size: 30px;
       margin-top: -8%;
    }
    .carosel-item-texto .hasta {
       font-size: 12px;
    }
    .carosel-item-texto .categoria {
        font-size: 13px;
        margin-top: -11%;
    }
    .carosel-root{
        position: relative;
        margin: auto;
        width: 95%;
    }

    .carosel-categorias {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 1% auto 3%;
        width: 100%;
    }
    .carosel-categorias .carosel-item {
        width: 30%;
        margin: 0 1% 0px auto;
        flex: 0 0 auto;
        
    }
    .carosel .carosel-item {
        width: 30%;
    }
    
    .carosel-item-texto .categoria {
        font-size: 15px;
        margin-top: -11%;
    }
    .contenedor-marcas {
        width: 100%;
        padding: 18px 6%;
    }
    
    .card-marca {
        width: 28%;
    }
    .titulo-marcas {
       font-size: 1.6rem;
    }
}


@media (max-width: 400px) {
    .banner-principal h1 {
        font-size: 50px;
        margin-top: 2%;
    }
    .banner-principal h2 {
        font-size: 13px;
        margin-top: -15px;
    }
    .carosel-root.categorias {
        margin-top: -16%;
        width: 100%;
    }
    .carosel-categorias {
        width: 100%;
      }
    .carousel-link {
        font-size: 15px;
    }
    .carosel-item-producto {
        color: black;
        text-decoration: none;
    }
        
    .titulo-tendencia {
        font-size: 12px;
        margin-top: 11px;
    }
    .carosel .carosel-item {
        width: 27%;
    }

    .carosel-item-texto .hasta {
        font-size: 10px;
        padding: auto;
        margin-top: -2px;
    }
    
    .carosel-item-texto .descuento {
        font-size: 24px;
        margin-top: -3px;
    }
       
    .carosel-item-texto .categoria{
        font-size: 10px;
        margin-top: -5px;
    }
    .carosel-root {
        position: relative;
        margin: 10px 0;

    }
    .carosel-categorias .carosel-item {
        width: 44%;
        margin: 0 1% 0px auto;
        flex: 0 0 auto;
    }
    .titulo-marcas {
    font-size: 1.2rem;
    }

 }


    @media (max-width: 330px) {
    .banner-principal h1 {
            font-size: 40px;
            margin-top: 3px;
    }
    .banner-principal h2 {
        font-size: 10px;
        margin-top: -5%;
    }
    .carosel-categorias {
        width: 100%;
    }
    .carosel-root.categorias {
        margin-top: -15%;
        width: 100%;
        
    }
    .carosel-item-producto {
        color: black;
        text-decoration: none;
    }
        
    .carosel-categorias .carosel-item {
        width: 45%;
        margin: 0 2% 0px auto;
        flex: 0 0 auto;
    }

    .titulo-tendencia {
        font-size: 15px;
        margin-top: 11px;
    }
    .carosel-item-texto .categoria {
        font-size: 12px;
        margin-top: -5px;
    }
    .carosel .carosel-item {
        width: 28%;
    }
    
    .contenedor-marcas {
        width: 100%;
        margin: auto;
        padding-bottom: 15PX;
    }
    .card-marca{
        width: 42%;
    }
    .contenedor-general-marcas{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: auto;
    }
    
    .titulo-marcas{
        font-size: 20px;
       
    }
 }

@media (max-width: 290px) {
    .banner-principal h1 {
        font-size: 45px;
        margin-top: 3px;
    }
    .banner-principal h2 {
        font-size: 13PX;
        margin-top: -7%;
    }
    .carosel-categorias {
        width: 100%;
    }
    .carosel-root.categorias {
        margin-top: -17%;
        width: 100%;
        
    }
    .carosel-item-content p {
        font-size: 11px;
    }
   
    .carousel-link {
        font-size: 11px;
    }
    .carosel-item-producto {
        color: black;
        text-decoration: none;
    }
        
}