/* styles.css */
#body {
  background-color: rgb(141, 150, 170);
  /*background-image: url(../a1.jpg);
  background-repeat: no-repeat;
  background-size: 250%;*/
}

.carrito1 {
    text-align: center;
}
.card-body{
    max-width: 100%;
}
#total{
    font-size: 2em;
}
.carrito-btn button {
    margin-left: 20%;
    width: 60%; 
    margin-top: 10px; 
    margin-bottom: 10px;
}
#carrito-vacio {
    display: none; /* Ocultar el mensaje por defecto */
    text-align: center;
    font-size: 1.2em;
    color: gray;
    margin-top: 60%;
}
.logo
{
margin-top: 6%;
width: 320px;
height: 240px;
}

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .poetsen-one-regular {
    font-family: "Poetsen One", sans-serif;
    font-weight: 400;
    font-style: normal;
  }
  .producto-nombre {
    max-height: 3em; /* Ajusta esta altura según sea necesario */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .fixed-cart {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000; /* Ajusta el índice z para que esté por encima del resto del contenido si es necesario */
}

#myHeader{
  font-family: 'Courier New', Courier, monospace;
    padding: 15px 0; /* Ajusta el padding superior e inferior */
    background-color:  #e962b1;; /* Fondo blanco para la barra */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para un efecto visual */
}
@media (max-width: 768px) {
    body {
        padding-top: 5rem; /* Aumenta el padding-top en dispositivos pequeños si es necesario */
    }
    .logo{
      margin-top: 8%;
      width: 311px;
      height: 239px;
    }
    .nav-masthead {
        flex-direction: row; /* Cambiar a fila en lugar de columna */
        flex-wrap: wrap; /* Permitir que los elementos se envuelvan */
        justify-content: center; /* Centrar los enlaces */
    }
    #myHeader{
        padding: 3px 0; /* Ajusta el padding superior e inferior */
    }
    .nav-link {
        margin: 2px; /* Margen entre los enlaces */
        flex: 1 1 auto; /* Permitir que los enlaces se ajusten en una fila */
        text-align: center; /* Centrar el texto */
    }
}
#cuerpo-carta{
  background-color: #f390ca;
}
.cartas h3{
    color: #9870FE;
}
#titulo{
    margin-top: 8%;
}
.cartas .btn {
    background-color: #9870FE;
    border-color: #9870FE;
    margin-bottom: 10px; /* Ajusta este valor según la separación deseada */
  }
  .cartas .btn:hover {
    background-color: #6343b4;
    border-color: #7053b9;
    margin-bottom: 10px; /* Ajusta este valor según la separación deseada */
  }
.producto-nombre {
    max-height: 3em; /* Ajusta esta altura según sea necesario */
    max-width: 9em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
.flip-card {
    perspective: 1000px;
    width: 100%;
    height: 650px; /* Ajusta este valor según el tamaño deseado */
  }
  
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s ease; /* Agrega una función de temporización para que la animación sea más suave */
    transform-style: preserve-3d;
  }
  .flipped {
    transform: rotateY(180deg);
  }
  
  .flip-card-front,
  .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease; /* Ajusta la duración de la transición y agrega una función de temporización */
  }
  
  .flip-card-back {
    transform: rotateY(180deg);
    opacity: 0; /* Inicialmente oculta la parte trasera */
    visibility: hidden; /* Inicialmente oculta la parte trasera */
  }
  
  .flipped .flip-card-front {
    opacity: 0; /* Oculta la parte frontal cuando está girado */
    visibility: hidden; /* Oculta la parte frontal cuando está girado */
    display: none;
  }
  .flipped .flip-card-back {
    height: 81%;
    width: 100%;
    opacity: 1; /* Muestra la parte trasera cuando está girado */
    visibility: visible; /* Muestra la parte trasera cuando está girado */
    display: flex;
  }
  .form-check{
    display: flex;
    flex-direction: column;
  }
  .carrito-imagen{
    width: 60%;
    height: 15%;
  }