body { font-family: Arial, sans-serif; background-color: #f4f6f9; margin: 0; padding: 20px; } .categoria-bloque { margin-bottom: 40px; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .categoria-titulo { font-family: 'Bebas Neue', sans-serif; color: #ffc107; margin-top: 0; margin-bottom: 20px; font-size: 2.5rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-align: center; display: table; margin-left: auto; margin-right: auto; padding-bottom: 5px; } /* Card del producto */ .card-producto { border: 1px solid #e9ecef; border-radius: 8px; background: #fff; text-align: center; padding: 15px 10px; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; align-items: center; transition: transform 0.2s ease, box-shadow 0.2s ease; } .card-producto:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } /* Contenedor de la imagen principal del producto */ .img-container { width: 100%; height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; overflow: hidden; border-radius: 6px; } /* CORRECCIÓN AQUÍ: Apuntar específicamente a la imagen del producto principal */ .img-container img { width: 100%; height: 100%; object-fit: contain; display: block; } .card-producto .titulo-producto { font-size: 0.95rem; font-weight: bold; margin: 5px 0; color: #222; } .nombre-producto-contenedor { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; } /* Icono fijado exactamente a 48px */ .icono-producto { width: 72px !important; height: 72px !important; max-width: 72px !important; max-height: 72px !important; object-fit: contain; display: block; } .card-producto .nombre-producto { font-size: 0.85rem; color: #666; margin: 0; text-align: center; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } /* Círculo del precio superior derecho */ .precio-circulo { background-color: #e0a800; /* Cambia al color principal de tu marca si deseas */ color: black; width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 1.1rem; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); z-index: 10; font-family: 'Bebas Neue', sans-serif; } /* Control del tamaño máximo de la imagen dentro del modal */ .max-h-300 { max-height: 280px; object-fit: contain; } #modalProducto .modal-header { background-color: #e0a800; color: black; /* Ajusta el color del texto si es necesario para dar contraste */ font-family: 'Bebas Neue', sans-serif; } /* Pantalla completa que oculta el contenido */ #preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: #111111; display: flex; justify-content: center; align-items: center; z-index: 99999; transition: opacity 0.8s ease, visibility 0.8s ease; } .loader-content { text-align: center; display: flex; flex-direction: column; align-items: center; } .loader-img { max-width: 200px; height: auto; animation: latido 1.8s infinite ease-in-out; } .loader-texto { color: #e0a800; font-family: Arial, sans-serif; font-weight: bold; font-size: 1rem; margin-top: 15px; margin-bottom: 15px; letter-spacing: 2px; text-transform: uppercase; } /* Contenedor de los rectángulos de la barra de progreso */ .barra-progreso { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 10px; } /* Estilo individual de cada rectángulo */ .bloque { width: 12px; height: 28px; border-radius: 3px; background-color: #333333; animation: cambioColor 1.2s infinite ease-in-out alternate, ecualizador 1.2s infinite ease-in-out alternate; } /* Desfase de animación para cada bloque */ .b1 { animation-delay: 0.1s; } .b2 { animation-delay: 0.2s; } .b3 { animation-delay: 0.3s; } .b4 { animation-delay: 0.4s; } .b5 { animation-delay: 0.5s; } .b6 { animation-delay: 0.6s; } .b7 { animation-delay: 0.7s; } .b8 { animation-delay: 0.8s; } /* Animación del gato */ @keyframes latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } } /* Animación de cambio continuo de colores */ @keyframes cambioColor { 0% { background-color: #333333; } 33% { background-color: #e0a800; /* Amarillo dorado del tema */ } 66% { background-color: #ff5722; /* Naranja encendido */ } 100% { background-color: #00e676; /* Verde fluorescente */ } } /* Variación sutil de tamaño en secuencia estilo ecualizador */ @keyframes ecualizador { 0% { transform: scaleY(0.7); } 100% { transform: scaleY(1.2); } } /* Ocultar el preloader */ .preloader-oculto { opacity: 0; visibility: hidden; } /* Contenedor circular alrededor de la imagen */ .contenedor-circulo { width: 150px; height: 150px; border-radius: 50%; border: 4px solid #e0a800; /* Borde amarillo/dorado a juego con el tema */ display: flex; justify-content: center; align-items: center; padding: 10px; background-color: rgba(255, 255, 255, 0.03); /* Fondo con ligero brillo sutil */ box-shadow: 0 0 20px rgba(224, 168, 0, 0.3); /* Resplandor dorado alrededor del borde */ margin: 0 auto; animation: latido 1.8s infinite ease-in-out; } /* Ajuste de la imagen para que encaje limpia dentro del círculo */ .loader-img { max-width: 100%; max-height: 100%; object-fit: contain; }juego con el tema */ display: flex; justify-content: center; align-items: center; padding: 10px; background-color: rgba(255, 255, 255, 0.03); /* Fondo con ligero brillo sutil */ box-shadow: 0 0 20px rgba(224, 168, 0, 0.3); /* Resplandor dorado alrededor del borde */ margin: 0 auto; animation: latido 1.8s infinite ease-in-out; } /* Ajuste de la imagen para que encaje limpia dentro del círculo */ .loader-img { max-width: 100%; max-height: 100%; object-fit: contain; }