* {
    margin:0;
    padding:0;
}
body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

main, section {
    flex: 1;
    height: 100vh;
    position:relative;
    overflow:hidden;
}

#bannerNuevo {
    display: flex;
    justify-content: center;
    align-items: center;  
    margin-top: 5%; 
    background-color: #fff;
    height: 65vh;
}

#bannerNuevo img{
   border-radius: 16px;
   width:95vw;
   margin:2rem;
}

h2 {
    display:flex;
    justify-content: center;
    align-items: center;
    top:40%;
    font-size: 12rem;
    line-height: 15rem;
}

#roterNuevos {
    height:200vh;
}

article#nuevos{
    display:flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    z-index:-1;
    width:100vw;
    height:200vh;
    overflow:hidden;
}

#cardsNuevos, #cardsNuevos2, #cardsNuevos3 {
    padding: 3rem;
    overflow:hidden;
}

#cardsNuevos h4, #cardsNuevos2 h4, #cardsNuevos3 h4 {
    font-size: 2.2rem;  
}

#cardsNuevos h5, #cardsNuevos2 h5, #cardsNuevos3 h5 {
    color:#DD3792;
    font-size: 1.5rem;
}

#cardsNuevos div img, #cardsNuevos2 div img, #cardsNuevos3 div img {
    width:20vw;
    padding: 2rem;
}

.producto{
    background: rgba(255, 27, 177, 0.1);
    border-radius: 16px;
    margin-top:2rem;
    padding:1rem;
    
}

@keyframes scrollUp {
    0% {
      transform: translateY(0vh);
    }
    100% {
      transform: translateY(-100vh);
    }
}
  
@keyframes scrollDown {
    0% {
      transform: translateY(0vh);
    }
    100% {
      transform: translateY(100vh);
    }
}
  
#cardsNuevos, #cardsNuevos3 {
    animation: scrollUp 10s linear infinite;
}
  
#cardsNuevos2 {
    animation: scrollDown 10s linear infinite;
}

/*#cardsNuevos:hover, #cardsNuevos2:hover, #cardsNuevos3:hover {
    animation-play-state: paused;
}*/

footer{
    position:relative;
}

@media (max-width:768px) {
    html, body{
        overflow-x:hidden;
    }
    #bannerNuevo{
        height: 25vh;
    }
    h2{
        font-size:3rem;
        line-height: 4rem;
    }
    #cardsNuevos3  {
        display:none; 
    }
    #cardsNuevos h4, #cardsNuevos2 h4, #cardsNuevos3 h4 {
        font-size: 1.8rem;  
    }
    
    #cardsNuevos h5, #cardsNuevos2 h5, #cardsNuevos3 h5 {
        font-size: 1rem;
    }
    footer{
        margin-top: 400%; 
    }
}