body {
    font-family: 'Poppins', sans-serif;
}

button {
    touch-action: manipulation;
}

#carrito {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

#carrito div {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-top: 15px;
}

#carrito img {
    max-width: 50px;
    margin-right: 10px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 12px;
}

#carrito p {
    margin: 0;
    font-size: 12px;
    font-weight: bold;
}

#carrito .precio {
    color: #FA6338;
    margin-left: auto;
    white-space: nowrap;
}

#carrito button {
    font-size: 12px;
    margin-left: 5px;
}

#total-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    border: 1px solid #a6a6a6;
}

#comprar-btn {
    width: 150px;
    height: 45px;
    padding: 8px 20px ;
    margin-right: 10vw;
    margin-top: 3px;
    color: white;
    background-color: #222222;
    border: none;
    font-weight: 700;
    font-size: 12px;
}





#comentarios {
position: fixed;
bottom: 100px; 
left: 50%; 
transform: translateX(-50%); 
width: 95%; 
box-sizing: border-box;
padding: 10px;
font-size: 12px;
border: none;
outline: none;
resize: none;
border-radius: 14px; 
z-index: 1000;
background-color: #ecebeb;
height: 50px;
}




.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: white;
    color: black;
    display: flex;
    align-items: center;
    padding: 0px;
 
    border-bottom: 1px solid black; /* Borde negro de 1 cm */
    z-index: 1000;
}

.back-btn {
    background: none;
    border: none;
    color: black;
    font-size: 20px;
    cursor: pointer;
    margin-right: 35px;
}

.back-btn:hover {
    opacity: 0.7;
}


@keyframes ruleta {
0% { transform: rotateX(0deg); }
50% { transform: rotateX(1800deg); }
100% { transform: rotateX(3600deg); }
}

.digito {
display: inline-block;
font-size: 24px;
font-weight: bold;
animation: none; /* Asegurarse de que la animación no se aplique de inmediato */
}

.digito-decimal {
font-size: 16px; /* Hacer los dígitos decimales más pequeños */
}

.digito.animate {
animation: ruleta 0.5s ease-in-out; /* Duración de la animación más rápida */
}