/* Custom Reset & Tailwind Extensions */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;800&family=Plus+Jakarta+Sans:wght@400;500;700&display=swap'); /* Smooth Scrolling */ html { scroll-behavior: smooth; } /* ---- Color de acento ---- Vivían dos juegos, uno por rubro, y el elegía cuál aplicar. Al quedar un solo producto ya no hay nada que elegir: van en :root a secas. OJO: este violeta NO es el latón de web_admin (--primary #ECAF1A). El comentario anterior afirmaba que sí. Queda tal cual estaba para no cambiar el aspecto del sitio publicado sin decidirlo. */ :root { /* Latón: la misma escala que web_admin/src/index.css (--accent-N). Antes vivía acá un violeta #783fda con un comentario que afirmaba ser la escala oficial del producto. No lo era, y el sitio público terminó con una identidad y la app con otra. REGLA DE LOS DOS VALORES: el latón rellena, no escribe. Sobre blanco da 1.96:1. Por eso hay un token para el relleno y otro para la tinta que va encima, y uno más claro para escribir sobre fondo oscuro. */ --accent: #ECAF1A; /* ↑ accent-400, el color de marca — SOLO para rellenar */ --on-accent: #0D0802; /* ↑ la tinta que va ENCIMA de un relleno de --accent (11.0:1) */ --accent-light: #FFE4B3; /* ↑ accent-200 — para ESCRIBIR sobre el fondo oscuro (15.6:1) */ --accent-dark: #C68D00; /* ↑ accent-500 — el relleno en hover; --on-accent encima da 7.6:1 */ --accent2: #FACD78; /* ↑ accent-300 — segundo punto de los degradados */ --accent-glow: rgba(236, 175, 26, 0.45); } /* Scroll reveal (replaces the AOS CDN dependency — see index.html script) */ [data-aos] { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } [data-aos="fade-left"] { transform: translateX(24px); } [data-aos="fade-down"] { transform: translateY(-24px); } [data-aos="fade-right"] { transform: translateX(-24px); } [data-aos].aos-animate { opacity: 1; transform: translate(0, 0); } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #0f172a; } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #475569; } /* Glassmorphism Utilities */ .glass { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05); } .glass-hover:hover { background: rgba(30, 41, 59, 0.8); border-color: var(--accent-glow); transform: translateY(-5px); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); transition: all 0.3s ease; } /* Text Gradients */ .gradient-text { background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent) 50%, var(--accent2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Animations that Tailwind doesn't standardly cover */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } } .animate-float { animation: float 6s ease-in-out infinite; } @keyframes pulse-slow { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.3; transform: scale(1.1); } } .animate-pulse-slow { animation: pulse-slow 8s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes gradient-x { 0%, 100% { background-size: 200% 200%; background-position: left center; } 50% { background-size: 200% 200%; background-position: right center; } } .animate-gradient { animation: gradient-x 15s ease infinite; background-size: 200% 200%; } /* Loader for Tracker */ .loader { width: 48px; height: 48px; border: 5px solid #1e293b; border-bottom-color: var(--accent); border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loader-container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; color: #94a3b8; gap: 1rem; } /* Logo Heartbeat Pulse */ @keyframes logo-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.3)); } 15% { transform: scale(1.12); filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.6)); } 30% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.3)); } 45% { transform: scale(1.08); filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.5)); } 60% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.3)); } } .animate-logo-pulse { animation: logo-pulse 2.5s ease-in-out infinite; } /* Slow Ping Ring */ @keyframes ping-slow { 0% { transform: scale(1); opacity: 0.4; } 75%, 100% { transform: scale(1.6); opacity: 0; } } .animate-ping-slow { animation: ping-slow 3s cubic-bezier(0, 0, 0.2, 1) infinite; }