con title. Añadimos cursor pointer para UX. Solo en el contenedor: no sobreescribir colores de fondo ya definidos. */ .hub-heatmap-cell { transition: filter 120ms ease, opacity 120ms ease; cursor: default; } .hub-heatmap-cell:not([data-future]):hover { filter: brightness(1.25); opacity: 0.9; } /* ── 10. QUINIELA (Worldcup) — animaciones, retokenizado a Expediente (2026-07-18) ── Identidad = accent (bronce de Worldcup). Premio/tickets (familia dorada legacy) = warn. Selección/confirmación = success. Nada de hex de cancha ni de oro suelto: todo var(--token) o color-mix() sobre un token. Eliminado en este pase (huérfano, cero uso real): .confirm-bar-active/ .confirm-btn-active + @keyframes cta-pulse (la barra sticky de v2 ya no existe, el flujo actual abre el modal directo al tocar una bandera), .phase-row-active (tabla vieja, reemplazada por el timeline en v3), .confetti-piece + @keyframes confetti-fall (sin disparador JS en el template — el confeti nunca llegó a conectarse), .pitch-stripes (clase suelta sin consumidores; el degradado del hero ya trae su propia textura), y el bloque de custom properties --pitch-*/--gold-*. */ /* === 10a. HERO — textura sutil de campo (neutra, sobre --ink) === */ .quiniela-hero-texture { background-image: repeating-linear-gradient( 0deg, transparent, transparent 40px, color-mix(in srgb, var(--ink) 4%, transparent) 40px, color-mix(in srgb, var(--ink) 4%, transparent) 80px ); } /* === 10b. PARTICULAS FLOTANTES EN HERO (color vía clase Tailwind en el span) === */ @keyframes float-particle { 0% { transform: translateY(0) translateX(0) scale(1); opacity: 0.4; } 33% { transform: translateY(-18px) translateX(6px) scale(1.1); opacity: 0.7; } 66% { transform: translateY(-10px) translateX(-4px) scale(0.9); opacity: 0.5; } 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.4; } } .quiniela-particle { position: absolute; border-radius: 50%; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .quiniela-particle { animation: float-particle 4s ease-in-out infinite; } .quiniela-particle-1 { animation-duration: 4.2s; animation-delay: 0s; } .quiniela-particle-2 { animation-duration: 5.8s; animation-delay: 1.1s; } .quiniela-particle-3 { animation-duration: 6.1s; animation-delay: 0.7s; } .quiniela-particle-4 { animation-duration: 3.9s; animation-delay: 2s; } .quiniela-particle-5 { animation-duration: 5s; animation-delay: 0.4s; } } /* === 10c. TEAM CARD STAGGER (fade-in + slide-up) === */ @keyframes team-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .team-card-initial { opacity: 0; transform: translateY(8px); } .team-card-in { animation: team-fade-in 280ms ease-out forwards; animation-delay: calc(var(--qi-index, 0) * 18ms); } /* === 10d. TEAM CARD — hover lift (neutral shadow, no colored glow) === */ .team-option { transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease, background-color 150ms ease; position: relative; overflow: hidden; } @media (prefers-reduced-motion: no-preference) { .team-option:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.10); } } /* Sheen diagonal al hover — highlight neutro (blanco), no es glassmorphism (no hay blur ni superposición translúcida de panel, es un sweep de luz). */ .team-option::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 110deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70% ); transform: translateX(-100%); transition: transform 0ms; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .team-option:hover::after { transform: translateX(100%); transition: transform 350ms ease; } } /* === 10e. RIPPLE (al seleccionar) — success, no accent: es un estado de confirmación, no de identidad (DESIGN_SYSTEM.md §2.3). === */ @keyframes ripple-expand { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0.5; } 100% { transform: translate(-50%, -50%) scale(3.5); opacity: 0; } } .team-ripple { position: absolute; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--success) 45%, transparent) 0%, transparent 70%); pointer-events: none; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); } @media (prefers-reduced-motion: no-preference) { .team-ripple.ripple-active { animation: ripple-expand 500ms ease-out forwards; } } /* === 10f. CHECK BADGE (success) === */ .team-check-badge { position: absolute; top: 6px; right: 6px; width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: var(--surface); font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.15); opacity: 0; transform: scale(0.5); transition: opacity 150ms ease, transform 150ms ease; } .team-check-badge.badge-visible { opacity: 1; transform: scale(1); } /* Nombre de equipo: hasta 2 líneas, centrado, sin cortar con "…" */ .team-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.2em; /* reserva 2 líneas para alinear las tarjetas */ } /* Tarjeta seleccionada: resaltado (borde + fondo + sombra) — success, estado de confirmación, no identidad de marca. */ .team-option.team-selected { border-color: var(--success); border-width: 2px; background-color: var(--success-tint); box-shadow: 0 6px 16px rgba(0,0,0,0.12); transform: translateY(-2px); } .team-option.team-selected .team-card-top-bar { background-color: var(--success); } /* === 10g. MODAL OVERLAY + PANEL ANIMATIONS (color-agnostic) === */ @keyframes modal-overlay-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-overlay-out { from { opacity: 1; } to { opacity: 0; } } @keyframes modal-panel-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes modal-panel-out { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(8px) scale(0.97); } } .modal-overlay-enter { animation: modal-overlay-in 200ms ease-out forwards; } .modal-overlay-exit { animation: modal-overlay-out 150ms ease-in forwards; } .modal-panel-enter { animation: modal-panel-in 220ms cubic-bezier(0.16,1,0.3,1) forwards; } .modal-panel-exit { animation: modal-panel-out 150ms ease-in forwards; } /* === 10h. CARD CELEBRATORIA (estado prediction locked) — entrada, sin color === */ @keyframes trophy-entrance { 0% { opacity: 0; transform: scale(0.7) rotate(-8deg); } 60% { transform: scale(1.08) rotate(3deg); } 80% { transform: scale(0.97) rotate(-1deg); } 100% { opacity: 1; transform: scale(1) rotate(0deg); } } @media (prefers-reduced-motion: no-preference) { .trophy-flag-anim { animation: trophy-entrance 500ms cubic-bezier(0.16,1,0.3,1) forwards; } } /* === 10i. TICKET BADGE — dorado (warn) + bronce (accent), shimmer === "El premio/rifa es dorado" (brief): tickets se quedan en la familia warn con un toque de accent-deep (bronce Worldcup) para que se sienta propio de la herramienta, no un ámbar genérico. Texto siempre oscuro, derivado del propio warn vía color-mix (no depende de --ink, que se invierte entre temas — así el ticket stub es legible sobre el shimmer en ambos). */ @keyframes badge-shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .ticket-badge-shimmer { background: linear-gradient( 90deg, var(--warn) 0%, var(--accent-deep) 30%, color-mix(in srgb, var(--warn) 55%, white) 50%, var(--accent-deep) 70%, var(--warn) 100% ); background-size: 200% auto; color: color-mix(in srgb, var(--warn) 25%, black); font-weight: 900; letter-spacing: 0.05em; } @media (prefers-reduced-motion: no-preference) { .ticket-badge-shimmer { animation: badge-shimmer 3s linear infinite; } } /* === 10j. VICTORY STATE (warn — familia dorada, "medalla") === */ @keyframes victory-pulse-border { 0%, 100% { border-color: color-mix(in srgb, var(--warn) 50%, transparent); box-shadow: 0 0 0 0 transparent; } 50% { border-color: var(--warn); box-shadow: 0 0 16px color-mix(in srgb, var(--warn) 35%, transparent); } } @media (prefers-reduced-motion: no-preference) { .victory-card { animation: victory-pulse-border 2.5s ease-in-out infinite; } } /* === 10k. PRIZE POOL HERO — shimmer bronce→dorado === */ @keyframes prize-shimmer { 0% { background-position: -300% center; } 100% { background-position: 300% center; } } .prize-pool-amount { background: linear-gradient( 90deg, var(--accent-deep) 0%, var(--warn) 25%, var(--accent) 50%, var(--warn) 75%, var(--accent-deep) 100% ); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @media (prefers-reduced-motion: no-preference) { .prize-pool-amount { animation: prize-shimmer 4s linear infinite; } } /* === 10l. PARTICIPATE STEPS — tarjetas de reglas === */ .participate-step { background: var(--surface); border: 1px solid var(--rule); border-radius: .5rem; transition: border-color 150ms ease, box-shadow 150ms ease; } .participate-step:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: 0 4px 16px rgba(0,0,0,0.08); } /* === 10m. PHASE TIMELINE === */ /* Línea conectora horizontal (desktop) */ .phase-timeline-track { position: relative; } .phase-timeline-track::before { content: ''; position: absolute; top: 22px; /* centra con el nodo */ left: 0; right: 0; height: 2px; background: linear-gradient( 90deg, var(--rule) 0%, color-mix(in srgb, var(--warn) 45%, transparent) 50%, var(--rule) 100% ); z-index: 0; pointer-events: none; } /* En mobile no mostramos la línea horizontal */ @media (max-width: 767px) { .phase-timeline-track::before { display: none; } } .phase-timeline-node { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } /* Nodo activo: la fase EN CURSO usa warn (DESIGN_SYSTEM §2.1: "estado en curso, avisos"); fases pasadas usan success (Tailwind directo en el template); fases futuras quedan muted (Tailwind directo también). */ @keyframes node-pulse { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--warn) 30%, transparent); } } .phase-timeline-node.node-active .node-dot { background: var(--warn); border-color: var(--warn); } @media (prefers-reduced-motion: no-preference) { .phase-timeline-node.node-active .node-dot { animation: node-pulse 2s ease-in-out infinite; } } /* Mobile: línea vertical conectora */ .phase-timeline-mobile-line { width: 2px; height: 28px; background: linear-gradient(to bottom, color-mix(in srgb, var(--warn) 45%, transparent), var(--rule)); margin: 2px auto; } /* ── 10n. REDUCED MOTION OVERRIDE GLOBAL QUINIELA ── */ @media (prefers-reduced-motion: reduce) { .team-card-initial { opacity: 1 !important; transform: none !important; } .team-card-in { animation: none !important; opacity: 1 !important; transform: none !important; } .team-option:hover { transform: none !important; } .team-option::after { display: none !important; } .team-ripple.ripple-active { animation: none !important; display: none !important; } .team-check-badge { transition: none !important; } .modal-overlay-enter { animation: modal-overlay-in 100ms ease-out forwards !important; } .modal-overlay-exit { animation: modal-overlay-out 100ms ease-in forwards !important; } .modal-panel-enter { animation: none !important; opacity: 1 !important; transform: none !important; } .modal-panel-exit { animation: none !important; opacity: 0 !important; } .trophy-flag-anim { animation: none !important; opacity: 1 !important; transform: none !important; } .ticket-badge-shimmer { animation: none !important; } .victory-card { animation: none !important; } .quiniela-particle { animation: none !important; } }