/* CSS Document */

        .card-red {
            background-color: white;
            border: 1px solid #FFFFFF;
            color: #660000;
			font-size:14px;
        }
        
		 .card-red:hover {
             border: 1px solid; #B3E8EC;
        }
		
		.card-red .card-title {
            color: #b30000;
        }
        .btn-red {
            background-color: #cc0000;
            color: white;
        }
        .btn-red:hover {
            background-color: #a30000;
        }
        .perfume-card {
            display: flex;
            flex-direction: row;
            align-items: rigth;
            height: 100%;
        }
        .perfume-image {
            width: 50%;
            max-width: 200px;
            /*object-fit: contain;*/
           /* margin: 1rem;*/
        }
        .perfume-info {
            flex: 1ch;
            padding: 1rem;
			
        }

        .link-ayuda:hover {
           color: #dc3545 !important; /* Bootstrap 'danger' red */
        }

        @media (max-width: 767.98px) {
            .perfume-card {
                flex-direction: column;
                text-align: center;
            }
            .perfume-image {
                width: 100%;
                margin: 0 auto 1rem;
            }
            .perfume-info {
                padding: 0 1rem 1rem;
            }
        }
  
		/* Posicionar modal en la parte superior */
		.modal-top {
		  margin-top: 1rem; /* distancia desde el borde superior */
		}
		
		/* Asegurar que el fondo oscuro cubra todo */
		.modal-backdrop.show {
		  opacity: 0.7;
		}
		
		/* Suavizar la entrada */
		.modal.fade .modal-dialog {
		  transform: translateY(-100px);
		  transition: transform 0.3s ease-out;
		}
		
		.modal.show .modal-dialog {
		  transform: translateY(0);
		}
		
		
		.modal-dialog-top {
		  margin-top: 20px;
		}
		.miniatura {
		  cursor: pointer;
		  transition: transform 0.2s ease;
		}
		.miniatura:hover {
		  transform: scale(1.1);
		  border-color: #dc3545 !important;
		}
		
/* ?? Carrusel elegante */
#carruselPerfume {
  max-width: 600px;
  margin: 0 auto;
}

#carruselPerfume img {
  object-fit: contain;
  max-height: 400px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: invert(1);
}

.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(220, 53, 69, 0.8); /* rojo al pasar */
}

.modal-body {
  max-height: 80vh;
  overflow-y: auto;
}

/* ?? Ajustes responsive */
@media (max-width: 768px) {
  #carruselPerfume img {
    max-height: 250px;
  }
}