.tarje {
  margin: 0 auto;
  padding: 20px;
  text-align: center; /* Centramos el contenido del título */
}

.title-tarje {
  background-color: #777; /* Color de fondo */
  color: white; /* Color del texto */
  text-align: center; /* Centra el texto */
  padding: 50px 0; /* Espaciado vertical */
  margin: -20px 0 40px; /* Negamos el padding superior y añadimos margen inferior */
  width: calc(100% + 40px); /* Ancho total más el padding */
  position: relative; /* Asegura que el fondo ocupe toda la pantalla */
  left: -20px; /* Ajuste para compensar el padding de la sección */
}
.title-basic {
  color: rgb(0, 0, 0); /* Color del texto */
  text-align: center; /* Centra el texto */
  font-size: 20px;
  font-weight: 600;
}

h1 {
    font-size: 1rem;
    font-weight: normal;
    margin-bottom: 20px;
    text-align: center; /* Centramos el título */
}

.productos-grid {
    display: ruby;
    gap: 20px;
    justify-items: center; /* Centramos las tarjetas */
}

/* Para pantallas grandes (desktop) */
@media (min-width: 1024px) {
    .productos-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajuste adaptable */
    }
}

/* Para tabletas */
@media (min-width: 768px) and (max-width: 1023px) {
    .productos-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columnas en tabletas */
        justify-content: center; /* Mantener centrado en tabletas */
    }
}

/* Para móviles */
@media (max-width: 767px) {
    .productos-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
        justify-content: center; /* Tarjetas centradas en móviles */
    }
    .productos-grid {
    display: grid;
    gap: 20px;
    justify-items: center; /* Centramos las tarjetas */
}
}

/* Estilo de la tarjeta */
.tarjetaAmor {
  position: relative; /* Necesario para posicionar el botón encima de la imagen */
  text-align: left;
  width: 100%; /* Ancho completo dentro del grid */
  margin-bottom: 20px;
  max-width: 300px; /* Limita el tamaño de la tarjeta */
  overflow: hidden; /* Para evitar que el botón salga del contenedor al animarse */
  cursor: pointer;
  text-decoration: none;
}

.tarjetaAmor img {
  display: block; /* Asegura que la imagen se comporte como bloque dentro de la tarjeta */
  width: 100%;
  height: auto; /* Ajusta la altura para mantener proporciones */
}

/* Botón Plus encima de la imagen */
.plusButton {
--plus_sideLength: 1.8rem; /* Tamaño más pequeño */
--plus_topRightTriangleSideLength: 0.5rem;
position: absolute; /* Para que esté encima de la imagen */
 /*bottom: -50px; /* Inicialmente oculto (fuera de la vista) */
right: 10px;
display: flex;
border-radius: 20px;
justify-content: center;
align-items: center;
border: 1px solid white;
width: var(--plus_sideLength);
height: var(--plus_sideLength);
background-color: rgba(29, 29, 31, 0.7);
z-index: 2;
transition: all 0.4s ease-out; /* Transición suave */
opacity: 0; /* Inicialmente invisible */
transform: translateY(20px); /* Desplazado hacia abajo para animación */
}

.plusButton::before {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 0;
border-width: 0 var(--plus_topRightTriangleSideLength) var(--plus_topRightTriangleSideLength) 0 0;
border-style: solid;
border-color: transparent white transparent transparent;
transition-timing-function: ease-in-out;
transition-duration: 0.2s;
}

.plusButton:hover {
cursor: pointer;
}

.plusButton:hover::before {
--plus_topRightTriangleSideLength: calc(var(--plus_sideLength) * 2);
}

.plusButton>.plusIcon {
fill: white;
width: calc(var(--plus_sideLength) * 0.7);
height: calc(var(--plus_sideLength) * 0.7);
z-index: 1;
transition-timing-function: ease-in-out;
transition-duration: 0.2s;
}

.plusButton:hover>.plusIcon {
fill: rgb(255, 255, 255);
transform: rotate(180deg);
}

/* Efecto hover en la tarjeta */
.tarjetaAmor:hover .plusButton {
opacity: 1; /* Aparece al hacer hover sobre la tarjeta */
bottom: 115px; /* Sube hasta la posición final */
transform: translateY(0); /* Restablece el desplazamiento */
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) { /* Ajusta el ancho según sea necesario */
  .plusButton {
    opacity: 1; /* Mantiene el botón visible */
    transform: none; /* Sin desplazamiento inicial */
    bottom: 110px; /* Ajusta la posición vertical como desees */
  }

}


.tarjetaAmor img {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
}

.tarjetaAmor h3.varga {
    font-size: 1rem; /* Tamaño de fuente más pequeño */
    font-weight: normal; /* No negrilla */
    color: #666; /* Color personalizado */
    margin-bottom: 10px;
    overflow: hidden; /* Oculta el desbordamiento */
    white-space: nowrap; /* Evita que el texto se envuelva */
    text-overflow: ellipsis; /* Agrega puntos suspensivos */
}

.tarjetaAmor p {
    font-size: 1rem;
    margin-bottom: 8px;
    overflow: hidden; 
    text-overflow: ellipsis; 
}
/* Media query para pantallas menores o iguales a 666px */
/* Para móviles - Ajustes importantes */
@media (max-width: 666px) {
  .productos-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
      justify-content: center; /* Tarjetas centradas en móviles */
  }

  /* Tarjetas mantienen el tamaño uniforme en móviles */
  .tarjetaAmor {
      width: 100%; /* Ancho completo dentro del grid */
      max-width: 300px; /* Mantiene el tamaño máximo de la tarjeta */
      text-align: left; /* No centramos el texto dentro de las tarjetas */
      overflow: hidden; /* Evitar que el contenido exceda la tarjeta */
      word-wrap: break-word; /* Rompe el texto para evitar desbordes */
  }

  .tarjetaAmor h3.varga, .tarjetaAmor p {
      overflow: hidden; /* Oculta el desbordamiento del texto */
      white-space: nowrap; /* Evita que el texto se envuelva */
      text-overflow: ellipsis; /* Agrega puntos suspensivos si el texto es largo */
      max-width: 100%; /* Se asegura que no exceda el ancho de la tarjeta */
  }

  /* Ajustamos el comportamiento del texto */
  .tarjetaAmor p {
      font-size: 0.9rem; /* Texto un poco más pequeño para móviles */
      max-height: 40px; /* Limitar la altura del párrafo */
      white-space: nowrap; /* Mantiene el texto en una línea */
  }
}


.tarjetaAmor .color {
    font-weight: bold;
    color: #333;
}

.precio-actual {
    font-size: 1rem;
    color: rgb(78, 8, 72);
    margin-right: 10px;
    font-weight: 700; /* Negrilla para precio-actual */
}

.precio-anterior {
    font-size: 1rem;
    color: red;
    text-decoration: line-through;
}
        
/* Estilo del botón */
.madre-ver-mas {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px; /* Ajusta el margen según sea necesario */
  }
  
  /* Estilo del botón */
  .ver-mas {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 45px;
    height: 45px;
    border: none;
    border-radius: 0px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition-duration: .3s;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
    background-color: rgba(29, 29, 31, 0.7);
  }
  
  .ver-mas-enlace {
    text-decoration: none; 
  }
  
  .more-sign {
    width: 100%;
    font-size: 2em;
    color: white;
    transition-duration: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .tx-more {
    position: absolute;
    right: 0%;
    width: 0%;
    opacity: 0;
    color: white;
    font-size: 1.2em;
    font-weight: 500;
    transition-duration: .3s;
  }
  
  .ver-mas:hover {
    width: 125px;
    border-radius: 0px;
    transition-duration: .3s;
  }
  
  .ver-mas:hover .more-sign {
    width: 30%;
    transition-duration: .3s;
    padding-left: 20px;
  }
  
  .ver-mas:hover .tx-more {
    opacity: 1;
    width: 70%;
    transition-duration: .3s;
    padding-right: 20px;
  }
  
  .ver-mas:active {
    transform: translate(2px, 2px);
  }
  .color-options {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

/* Margen superior para separar los labels de las opciones */
.color-label {
    display: block; /* Para asegurar que el margen se aplique correctamente */
    margin-bottom: 8px; /* Espacio entre el label y las opciones */
}

/* Estilo general para la opción de color */
.color-option {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #ddd; /* Borde de 2px con color gris claro por defecto */
    cursor: pointer;
    transition: border 0.3s, box-shadow 0.3s; /* Transición suave para el borde y la sombra */
}

/* Estilo cuando la opción de color está seleccionada */
.color-option.selected {
    border: 2px solid white; /* Borde blanco de 2px para la opción seleccionada */
    box-shadow: 0 0 0 1px black; /* Sombra negra de 1px alrededor del borde blanco */
}

/* Animación de entrada (deslizamiento desde abajo) */
@keyframes slideUp {
  0% {
      opacity: 0;
      transform: translateY(50px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

/* Fade-in simple */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

/* Escalado suave */
@keyframes scaleUp {
  0% {
      opacity: 0;
      transform: scale(0.95);
  }
  100% {
      opacity: 1;
      transform: scale(1);
  }
}

/* Aplicar animaciones a los elementos al cargar */
.tarje, .title-tarje, .tarjetaAmor {
  animation: fadeIn 1s ease-out forwards;
  opacity: 0; /* Aseguramos que esté invisible antes de la animación */
}

.title-tarje {
  animation: slideUp 1s ease-out forwards; /* Aparece desde abajo */
}

.tarjetaAmor {
  animation: scaleUp 0.8s ease-out forwards; /* Efecto de escalado */
}