Carrito
/* 1. CONTENEDOR DEL CARRITO (Limpio y Profesional) */
.xoo-wsc-container {
background-color: #ffffff !important;
font-family: ‘Orbitron’, sans-serif !important;
border-left: 5px solid #00d2ff !important;
}
/* 2. ENCABEZADO: EFECTO DE RAYOS INFORMÁTICOS */
.xoo-wsc-header {
background: #fdfdfd !important;
position: relative !important;
overflow: hidden !important;
border-bottom: 2px solid #f0f0f0 !important;
}
/* Texto con efecto Doble (como el ABC de tu imagen) */
.xoo-wsc-header span {
color: #1a1a1a !important;
font-weight: 900 !important;
text-transform: uppercase !important;
letter-spacing: 2px !important;
position: relative !important;
z-index: 2 !important;
/* Efecto Letra Doble sutil */
text-shadow: 2px 2px 0px #00d2ff !important;
/* Sincronización: El texto aparece/desaparece con el rayo */
animation: fixesTextFlash 4s ease-in-out infinite !important;
}
/* La serie de rayos informáticos que recorren el nombre */
.xoo-wsc-header::after {
content: “” !important;
position: absolute !important;
top: 0;
left: -100%;
width: 150%;
height: 100%;
/* Ráfaga de líneas de luz */
background: linear-gradient(90deg,
transparent 0%,
rgba(0, 210, 255, 0.1) 10%,
#00d2ff 12%,
transparent 14%,
#ffffff 18%,
transparent 20%,
#00d2ff 25%,
transparent 30%
) !important;
z-index: 1 !important;
animation: fixesRayStorm 4s ease-in-out infinite !important;
}
/* 3. BOTONES LLAMATIVOS (Estilo FIXES) */
.xoo-wsc-ft-buttons a.button {
background: #1a1a1a !important;
color: #ffffff !important;
border-radius: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
transition: all 0.3s ease !important;
border: none !important;
}
.xoo-wsc-ft-buttons a.button:hover {
background: #00d2ff !important;
box-shadow: 0 5px 15px rgba(0, 210, 255, 0.4) !important;
}
/* 4. ANIMACIONES */
/* Los rayos cruzan el título rápidamente */
@keyframes fixesRayStorm {
0% { left: -150%; }
35% { left: 100%; }
100% { left: 100%; }
}
/* El texto se activa solo cuando el rayo pasa */
@keyframes fixesTextFlash {
0% { opacity: 0; filter: blur(3px); transform: scale(0.98); }
5% { opacity: 1; filter: blur(0px); transform: scale(1); }
30% { opacity: 1; }
40% { opacity: 0; filter: blur(3px); }
100% { opacity: 0; }
}