/* ========================================================================== FINANZACADEMY - HOJA DE ESTILOS ESTILO MIMO.ORG (NEOBRUTALISMO JUGUETÓN) ========================================================================== */ /* VARIABLES DE DISEÑO (Tonalidades de Azul Marino Oscuro) */ :root { --bg-primary: #0b0f19; /* Azul marino muy oscuro (Fondo general) */ --bg-card: #121a2e; /* Azul marino medio (Tarjetas y paneles) */ --text-primary: #f8fafc; /* Blanco azulado brillante (Textos principales) */ --text-muted: #94a3b8; /* Gris azulado suave (Textos muteados) — también cubre el casi-duplicado #9ca3af */ --color-white: #ffffff; /* Colores de marca (índigo/morado) */ --color-purple: #6366f1; /* Acento principal de marca (índigo/morado) */ --color-purple-hover: #4f46e5; /* Hover/variante oscura del acento índigo */ --color-brand-light: #818cf8; /* Acento claro índigo para etiquetas */ --color-brand-soft: #a5b4fc; /* Acento suave índigo */ --color-indigo-deep: #1e1b4b; /* Índigo profundo para banners y degradados */ --color-green: #10b981; --color-red: #ef4444; --color-yellow: #f59e0b; --color-gold: #d97706; --color-gold-bright: #fbbf24; /* Dorado brillante, recompensas/XP */ --color-gold-champagne: #c5a880; /* Dorado champán, detalles premium/VIP */ --color-premium-card: rgba(245, 158, 11, 0.05); /* Escala de grises (antes había ~10 grises oscuros distintos usados sin criterio) */ --gray-900: #111827; --gray-850: #0f172a; --gray-800: #1f2937; --gray-700: #374151; --gray-600: #4b5563; --gray-500: #6b7280; --gray-300: #d1d5db; --gray-200: #e5e7eb; --gray-100: #f9fafb; /* Neobrutalismo Adaptado */ --border-color: #1e293b; /* Azul marino claro para bordes neobrutalistas */ --border-width: 3px; --border-radius-sm: 8px; --border-radius-md: 12px; --border-radius-ml: 16px; --border-radius-lg: 20px; --border-radius-xl: 24px; --border-radius-pill: 30px; --neo-shadow: 4px 4px 0px var(--border-color); --neo-shadow-sm: 2px 2px 0px var(--border-color); --neo-shadow-hover: 1px 1px 0px var(--border-color); /* Sombras (elevación) reutilizables */ --shadow-card: 0 4px 20px rgba(0,0,0,0.15); --shadow-modal: 0 25px 50px -12px rgba(0,0,0,0.5); /* Tipografía */ --font-main: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Altura de layout */ --sidebar-width: 260px; --header-height: 70px; } /* Modo Premium - Sandbox */ body.premium-active { --color-purple: var(--color-gold); --color-purple-hover: #b45309; } :root { /* Valores oscuros por defecto de las superficies del dashboard que antes estaban en hex fijo. IMPORTANTE: este bloque debe ir ANTES de [data-theme="light"] — ambos selectores apuntan al mismo elemento () y tienen la misma especificidad, así que si este fuera el último en el archivo, anularía siempre al modo claro. */ --dash-surface: #0c111d; --dash-surface-hover: #161b33; --dash-premium-bg: #1a162b; --dash-popover-bg: #111827; --dash-popover-border: #1f2937; } /* ========================================================================== MODO CLARO Redefine las variables base para que toda regla que ya usa var(--bg-primary), var(--text-primary), var(--gray-XXX), var(--border-color), etc. cambie de aspecto automáticamente. Se activa poniendo data-theme="light" en (ver toggleDarkMode() en app.js). Solo afecta a la app (dashboard, modales, lecciones); la landing pública mantiene su diseño propio. ========================================================================== */ /* La landing pública (antes de iniciar sesión) mantiene siempre su diseño oscuro original, sin importar el tema elegido dentro de la app. Como [data-theme="light"] se aplica en , sin este bloque sus variables se colaban también en la landing. Esta regla tiene más especificidad ([atributo] + #id) y por tanto gana, devolviendo aquí los valores oscuros de siempre. */ [data-theme="light"] #landing-page-view { --bg-primary: #0b0f19; --bg-card: #121a2e; --text-primary: #f8fafc; --text-muted: #94a3b8; --color-white: #ffffff; --color-indigo-deep: #1e1b4b; --gray-900: #111827; --gray-850: #0f172a; --gray-800: #1f2937; --gray-700: #374151; --gray-600: #4b5563; --gray-500: #6b7280; --gray-300: #d1d5db; --gray-200: #e5e7eb; --gray-100: #f9fafb; --border-color: #1e293b; --neo-shadow: 4px 4px 0px var(--border-color); --neo-shadow-sm: 2px 2px 0px var(--border-color); --neo-shadow-hover: 1px 1px 0px var(--border-color); --shadow-card: 0 4px 20px rgba(0,0,0,0.15); --shadow-modal: 0 25px 50px -12px rgba(0,0,0,0.5); --dash-surface: #0c111d; --dash-surface-hover: #161b33; --dash-premium-bg: #1a162b; --dash-popover-bg: #111827; --dash-popover-border: #1f2937; } [data-theme="light"] { --bg-primary: #f4f6fb; --bg-card: #ffffff; --text-primary: #0f172a; --text-muted: #5b6474; --color-white: #ffffff; --color-indigo-deep: #edf2ff; /* Escala de grises invertida para superficies claras */ --gray-900: #ffffff; --gray-850: #f8fafc; --gray-800: #e7ebf2; --gray-700: #d3d9e3; --gray-600: #94a0b3; --gray-500: #6b7280; --gray-300: #cbd2dd; --gray-200: #333d4f; --gray-100: #1c2433; --border-color: #dde3ec; --neo-shadow: 4px 4px 0px var(--border-color); --neo-shadow-sm: 2px 2px 0px var(--border-color); --neo-shadow-hover: 1px 1px 0px var(--border-color); --shadow-card: 0 4px 20px rgba(15, 23, 42, 0.08); --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.25); /* Superficies del dashboard que estaban en hex fijo (no en variable) y por eso no cambiaban solas al redefinir los grises de arriba. En claro se usan blancas (como --bg-card) para que las tarjetas destaquen sobre --bg-primary, ya que los bordes translúcidos blancos del oscuro no se verían sobre un fondo claro (se corrigen aparte más abajo). */ --dash-surface: #ffffff; --dash-surface-hover: #eef1f8; --dash-premium-bg: #edf2ff; --dash-popover-bg: #ffffff; --dash-popover-border: #e2e6ee; } /* RESET E INSTALACIÓN GENERAL */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-main); } body { background-color: var(--bg-primary); color: var(--text-primary); overflow-x: hidden; min-height: 100vh; } /* Barra de scroll personalizada: sin pista sólida que choque con fondos de color */ html { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.25) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.25); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(255, 255, 255, 0.4); } /* CONTENEDOR PRINCIPAL */ .app-container { display: flex; min-height: 100vh; } /* ========================================================================== BARRA LATERAL (SIDEBAR) - ESTILO MIMO ========================================================================== */ .sidebar { width: var(--sidebar-width); background-color: var(--bg-card); border-right: var(--border-width) solid var(--border-color); padding: 24px; display: flex; flex-direction: column; position: fixed; height: 100vh; left: 0; top: 0; z-index: 100; } .logo-container { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 32px; width: 100%; text-align: center; } .logo-mark { flex-shrink: 0; display: block; filter: drop-shadow(0 2px 6px rgba(154, 52, 18, 0.4)); } .landing-logo { display: flex; align-items: center; gap: 10px; } .logo-icon { font-size: 2rem; } .logo-text { font-family: 'Outfit', sans-serif; font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--text-primary) !important; display: inline-flex; align-items: center; gap: 0; margin: 0; } .logo-text span { font-weight: 300; color: var(--color-purple); background: linear-gradient(90deg, var(--color-brand-soft) 0%, var(--color-purple) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .logo-dot { color: var(--color-purple) !important; -webkit-text-fill-color: var(--color-purple) !important; font-weight: 800; } .nav-menu { display: flex; flex-direction: column; gap: 16px; flex-grow: 1; } /* BOTONES DE NAVEGACIÓN (Estilo Mimo 3D) */ .nav-item { display: flex; align-items: center; gap: 18px; background: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); padding: 17px 20px; color: var(--text-primary); font-weight: 700; font-size: 1.05rem; cursor: pointer; text-align: left; box-shadow: var(--neo-shadow-sm); transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, box-shadow 0.2s ease; } .nav-item:hover { background-color: var(--border-color); transform: scale(1.05); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); z-index: 5; } .nav-item:active, .nav-item.active { transform: translate(2px, 2px); box-shadow: 0px 0px 0px var(--border-color); } .nav-item.active { background-color: rgba(59, 130, 246, 0.15); color: var(--color-purple); border-color: var(--color-purple); } .nav-icon { font-size: 1.4rem; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-icon svg { width: 100%; height: 100%; display: block; } /* Navegación Pro */ .nav-item.pro-nav { border-color: var(--color-yellow); background-color: rgba(245, 158, 11, 0.05); } .nav-item.pro-nav.active { background-color: rgba(245, 158, 11, 0.15); color: var(--color-gold); } /* Sidebar Footer / Info de usuario */ .sidebar-footer { border-top: 2px solid var(--gray-200); padding-top: 16px; } .user-quick-info { display: flex; align-items: center; gap: 12px; } .avatar { font-size: 2.2rem; background: #eef2f6; border: 2px solid var(--border-color); border-radius: 50%; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .info .username { font-weight: 700; font-size: 0.95rem; } .badge { font-size: 0.75rem; font-weight: 800; padding: 2px 8px; border-radius: var(--border-radius-lg); border: 1.5px solid var(--border-color); display: inline-block; margin-top: 4px; } .free-badge { background-color: rgba(99, 102, 241, 0.2) !important; color: #a5b4fc !important; border: 1px solid rgba(99, 102, 241, 0.4) !important; font-weight: 800 !important; padding: 3px 10px !important; } .premium-plan-badge { background-color: var(--color-yellow) !important; color: var(--color-gold) !important; border: 1px solid var(--color-yellow) !important; font-weight: 800 !important; padding: 3px 10px !important; } .plan-active-btn, .mimo-btn:disabled { opacity: 0.7; cursor: default !important; } /* ========================================================================== ICONO DE RACHA POR NIVELES: animaciones puramente CSS (sin vídeo ni fotogramas), por lo que el bucle es matemáticamente perfecto — el 0% y el 100% del keyframe son idénticos, así que no hay ningún corte visible. ========================================================================== */ .streak-flame-anim { display: inline-block; transform-origin: 50% 92%; animation: streakFlameFlicker 2.2s ease-in-out infinite; } .streak-flame-anim-strong { animation-duration: 1.8s; } @keyframes streakFlameFlicker { 0%, 100% { transform: scale(1) rotate(0deg); } 35% { transform: scale(1.05) rotate(-1.5deg); } 65% { transform: scale(0.97) rotate(1.5deg); } } .streak-flame-anim-legendary { filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.5)); } .streak-flame-anim-legendary svg { animation: streakFlameGlowPulse 2.2s ease-in-out infinite; } @keyframes streakFlameGlowPulse { 0%, 100% { filter: drop-shadow(0 0 2px currentColor); } 50% { filter: drop-shadow(0 0 7px currentColor); } } /* ========================================================================== CONTENIDO PRINCIPAL Y CABECERA (GAME HEADER) ========================================================================== */ .main-content { margin-left: var(--sidebar-width); flex-grow: 1; min-height: 100vh; padding: 24px 40px; display: flex; flex-direction: column; } .tab-content { flex: 1 0 auto; } /* Pie de página del dashboard: fila de enlaces al final del contenido, debajo de cualquier pestaña (Aprender, Ranking, etc.). El margin-top: auto lo empuja siempre al fondo del viewport (gracias al flex de .main-content), así que queda igual de separado del contenido tenga la pestaña mucho o poco contenido. Sigue el tema claro/oscuro igual que el resto de la app. */ .app-footer-links-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 20px; margin-top: auto; padding-top: 16px; padding-bottom: 4px; border-top: 1px solid var(--border-color); } .app-footer-links-nav a { color: var(--text-muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; transition: color 0.15s ease; } .app-footer-links-nav a:hover { color: var(--color-purple); } .game-header { height: var(--header-height); background-color: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--neo-shadow); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; margin-bottom: 32px; } /* Badges de Estadísticas */ .stat-badge { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.1rem; border: 2px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 6px 12px; box-shadow: var(--neo-shadow-sm); } .streak-badge { background-color: rgba(245, 158, 11, 0.1); color: var(--color-yellow); } .lives-badge { background-color: rgba(239, 68, 68, 0.1); color: var(--color-red); } .header-stats-left { display: flex; align-items: center; gap: 16px; } .hearts-row { display: flex; align-items: center; gap: 4px; font-size: 1.2rem; cursor: pointer; } /* Contenedor de XP con barra de progreso */ .xp-container { display: flex; align-items: center; gap: 12px; flex-grow: 0.4; font-weight: 800; font-size: 0.95rem; } .xp-bar-bg { flex-grow: 1; height: 16px; background-color: var(--border-color); border: 2px solid var(--border-color); border-radius: var(--border-radius-lg); overflow: hidden; position: relative; } .xp-bar-fill { height: 100%; background-color: var(--color-green); border-right: 2px solid var(--border-color); transition: width 0.4s ease; } /* Toggle del Sandbox */ .sandbox-toggle { display: flex; align-items: center; gap: 10px; background: var(--gray-100); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); padding: 6px 12px; } .toggle-label { font-size: 0.85rem; font-weight: 700; } /* Switch de checkbox */ .switch { position: relative; display: inline-block; width: 44px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .3s; border: 2px solid var(--border-color); } .slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border: 1.5px solid var(--border-color); } input:checked + .slider { background-color: var(--color-green); } input:checked + .slider:before { transform: translateX(20px); } .slider.round { border-radius: var(--border-radius-pill); } .slider.round:before { border-radius: 50%; } /* ========================================================================== PESTAÑAS DE CONTENIDO ========================================================================== */ .tab-pane { display: none; animation: fadeIn 0.3s ease; } .tab-pane.active { display: block; } @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== APRENDER: CAMINO DE LECCIONES (LEARNING PATH) ========================================================================== */ .path-intro { max-width: 600px; margin: 0 auto 40px auto; text-align: center; } .path-intro h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 2.2rem; font-weight: 800; margin-bottom: 8px; } .path-intro p { color: var(--text-muted); font-size: 1.1rem; } /* Cabecera de "¿Qué quieres aprender?": más ancha y con texto algo más grande que el resto de intros de sección. */ .path-intro-hero { max-width: 760px; } .path-intro-hero h2 { font-size: 2.5rem; } .path-intro-hero p { font-size: 1.2rem; } /* Estructura del Camino */ .learning-path { max-width: 400px; margin: 0 auto; position: relative; padding: 40px 0; display: flex; flex-direction: column; align-items: center; gap: 60px; } .path-svg-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .path-line-svg { width: 100%; height: 100%; display: block; } /* Nodos */ .path-node { position: relative; width: 90px; height: 90px; z-index: 10; } .node-wrapper { position: relative; width: 100%; height: 100%; } .node-btn { width: 100%; height: 100%; border-radius: 50%; border: var(--border-width) solid var(--border-color); background-color: var(--bg-card); font-size: 2.2rem; cursor: pointer; box-shadow: 0px 6px 0px var(--border-color); display: flex; align-items: center; justify-content: center; position: relative; transition: all 0.1s ease; } .node-btn:active:not([disabled]) { transform: translateY(6px); box-shadow: 0px 0px 0px var(--border-color); } .node-status-badge { position: absolute; bottom: -6px; right: -6px; background-color: var(--bg-card); border: 2px solid var(--border-color); width: 28px; height: 28px; border-radius: 50%; font-size: 0.85rem; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 1px 2px 0px var(--border-color); } /* Alineaciones alternadas para crear el camino sinuoso */ .path-node[data-side="left"] { align-self: flex-start; margin-left: 20px; } .path-node[data-side="right"] { align-self: flex-end; margin-right: 20px; } .path-node[data-side="center"] { align-self: center; } /* Estados de los nodos */ .path-node.completed .node-btn { background-color: var(--color-green); } .path-node.completed .node-status-badge { background-color: var(--color-green); color: white; } .path-node.current .node-btn { background-color: var(--color-purple); animation: pulseGlow 1.5s infinite alternate; } .path-node.current .node-status-badge { background-color: var(--color-purple); color: white; } .path-node.locked .node-btn { background-color: var(--gray-200); color: var(--text-muted); cursor: not-allowed; } .path-node.locked .node-status-badge { background-color: var(--gray-200); color: var(--text-muted); } /* Premium Locked */ .path-node.premium-locked .node-btn { border-color: var(--color-yellow); box-shadow: 0px 6px 0px var(--color-gold); cursor: pointer; /* Permite hacer clic para upsell */ } .path-node.premium-locked .node-status-badge { background-color: var(--color-yellow); border-color: var(--color-gold); color: var(--color-gold); } /* Tooltips de lección (Hover) */ .node-tooltip { position: absolute; top: 50%; transform: translateY(-50%); background: var(--bg-card); border: var(--border-width) solid var(--border-color); padding: 16px; border-radius: var(--border-radius-md); width: 220px; box-shadow: var(--neo-shadow); opacity: 0; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease; z-index: 20; } .path-node[data-side="left"] .node-tooltip, .path-node[data-side="center"] .node-tooltip { left: 110px; } .path-node[data-side="right"] .node-tooltip { right: 110px; } .path-node:hover .node-tooltip { opacity: 1; transform: translateY(-50%) scale(1.03); } .node-tooltip h4 { font-weight: 800; margin-bottom: 4px; } .node-tooltip p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 8px; line-height: 1.3; } .node-badge { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; padding: 2px 6px; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); } .node-badge.free { background-color: #e0f2fe; color: #0369a1; } .node-badge.premium { background-color: #fef3c7; color: var(--color-gold); border-color: var(--color-gold); } /* Separador de camino */ .path-divider { width: 100%; text-align: center; border-bottom: 3px dashed var(--gray-300); line-height: 0.1em; margin: 20px 0; } .path-divider span { background: var(--bg-primary); padding: 0 16px; font-weight: 800; color: var(--text-muted); font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; } /* Animación del nodo actual */ @keyframes pulseGlow { from { box-shadow: 0px 6px 0px var(--border-color), 0 0 0px rgba(154, 52, 18, 0.4); } to { box-shadow: 0px 6px 0px var(--border-color), 0 0 15px rgba(154, 52, 18, 0.8); transform: translateY(-2px); } } /* ========================================================================== CALCULADORA DE INTERÉS COMPUESTO (DISEÑO PREMIUM MIMO CARD) ========================================================================== */ .section-header { margin-bottom: 32px; } .section-header h2 { font-size: 2.2rem; font-weight: 800; } .section-header p { color: var(--text-muted); font-size: 1.1rem; } .calculator-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: start; } /* Card de Controles */ .calc-inputs-card { background: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--neo-shadow); padding: 32px; } .slider-group { margin-bottom: 24px; } .slider-group:last-child { margin-bottom: 0; } .slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .slider-header label { font-weight: 800; font-size: 1.1rem; } .slider-value { font-weight: 800; color: var(--color-purple); background: #eef2f6; border: 2px solid var(--border-color); padding: 4px 10px; border-radius: var(--border-radius-sm); } /* Deslizador Personalizado (Mimo Slider) */ .mimo-slider { -webkit-appearance: none; width: 100%; height: 12px; border-radius: var(--border-radius-lg); background: var(--gray-200); outline: none; border: 2px solid var(--border-color); } .mimo-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-purple); border: 3px solid var(--border-color); cursor: pointer; box-shadow: 0 2px 0px var(--border-color); transition: transform 0.1s; } .mimo-slider::-webkit-slider-thumb:active { transform: scale(1.2); } .slider-limits { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--text-muted); font-weight: 600; margin-top: 4px; } /* Card de Resultados */ .calc-results-card { background: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--neo-shadow); padding: 32px; display: flex; flex-direction: column; gap: 28px; } .quick-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .quick-stat { border: 2px solid var(--border-color); padding: 12px; border-radius: var(--border-radius-md); background: var(--gray-100); box-shadow: var(--neo-shadow-sm); } .stat-lbl { font-size: 0.8rem; color: var(--text-muted); font-weight: 700; text-transform: uppercase; } .stat-val { font-size: 1.3rem; font-weight: 800; margin-top: 4px; } .highlight-green { color: var(--color-green); } .highlight-yellow { color: var(--color-gold); } /* Gráfico Exponencial de barras */ .chart-container { height: 200px; display: flex; align-items: flex-end; gap: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--border-color); position: relative; } .chart-y-axis { position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); font-weight: 700; padding-left: 4px; } .chart-bars-wrapper { display: flex; align-items: flex-end; justify-content: space-between; flex-grow: 1; height: 100%; margin-left: 45px; } .chart-bar { width: calc(100% / 10 - 6px); background-color: #cbd5e1; border: 2px solid var(--border-color); border-bottom: none; border-radius: 4px 4px 0 0; transition: height 0.3s ease, background-color 0.3s; position: relative; cursor: pointer; } .chart-bar-fill { width: 100%; background-color: var(--color-green); position: absolute; bottom: 0; border-radius: 2px 2px 0 0; transition: height 0.3s ease; } .chart-bar:hover { background-color: var(--text-muted); } .chart-x-axis { display: flex; justify-content: space-between; margin-left: 45px; font-size: 0.8rem; font-weight: 700; color: var(--text-muted); } /* ========================================================================== SECCIÓN DE TARJETAS DE PRECIOS PREMIUM (PRO) ========================================================================== */ .premium-hero { text-align: center; max-width: 600px; margin: 0 auto 40px auto; } .crown-badge { background: #fffbeb; border: 2px solid var(--color-gold); color: var(--color-gold); padding: 6px 12px; border-radius: var(--border-radius-lg); font-weight: 800; font-size: 0.85rem; display: inline-block; margin-bottom: 12px; } .premium-hero h2 { font-size: 2.2rem; font-weight: 800; } .premium-hero p { color: var(--text-muted); font-size: 1.1rem; } .pricing-cards { display: flex; justify-content: center; gap: 32px; max-width: 900px; margin: 0 auto; } .price-card { background: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--neo-shadow); padding: 40px; flex: 1; position: relative; display: flex; flex-direction: column; } .price-card.premium-card { border-color: var(--color-yellow); box-shadow: 4px 4px 0px var(--color-gold); background-color: var(--color-premium-card); } .popular-ribbon { position: absolute; top: 16px; right: 16px; background-color: var(--color-gold); color: white; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; padding: 4px 10px; border-radius: var(--border-radius-lg); border: 1.5px solid var(--border-color); } .card-header h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; } .card-desc { font-size: 0.9rem; color: var(--text-muted); } .price-amount { margin: 24px 0; display: flex; align-items: baseline; } .price-amount .currency { font-size: 1.8rem; font-weight: 800; } .price-amount .number { font-size: 3.5rem; font-weight: 800; line-height: 1; } .price-amount .period { color: var(--text-muted); font-weight: 700; margin-left: 4px; } .features-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; flex-grow: 1; } .features-list li { display: flex; gap: 10px; font-weight: 600; font-size: 0.95rem; } .features-list li span { color: var(--color-green); font-weight: 800; } .features-list li.disabled { color: var(--text-muted); } .features-list li.disabled span { color: var(--color-red); } /* ========================================================================== ESTILOS DE BOTONES MIMO 3D (MIMO-BTN) ========================================================================== */ .mimo-btn { width: 100%; padding: 14px 24px; font-size: 1.1rem; font-weight: 800; border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); cursor: pointer; text-align: center; transition: all 0.1s; user-select: none; } .primary-btn { background-color: var(--color-purple); color: white; box-shadow: 0px 4px 0px var(--border-color); } .primary-btn:hover { background-color: var(--color-purple-hover); } .primary-btn:active { transform: translateY(4px); box-shadow: 0px 0px 0px var(--border-color); } .secondary-btn { background-color: white; color: var(--gray-800); box-shadow: 0px 4px 0px var(--border-color); } .secondary-btn:hover { background-color: var(--gray-100); } .secondary-btn:active { transform: translateY(4px); box-shadow: 0px 0px 0px var(--border-color); } .premium-card .primary-btn { background-color: var(--color-yellow); color: var(--border-color); box-shadow: 0px 4px 0px var(--color-gold); } .premium-card .primary-btn:hover { background-color: var(--color-gold-bright); } .premium-card .primary-btn:active { transform: translateY(4px); box-shadow: 0px 0px 0px var(--color-gold); } /* ========================================================================== PERFIL Y LOGROS ========================================================================== */ .profile-header-card { background: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--neo-shadow); padding: 32px; display: flex; align-items: center; gap: 24px; margin-bottom: 32px; } .profile-avatar { font-size: 3.5rem; background: #eef2f6; border: 3px solid var(--border-color); border-radius: 50%; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; } .profile-meta h2 { font-size: 1.8rem; font-weight: 800; } .profile-meta .profile-email { color: var(--text-muted); } .user-tier-badge { background: var(--gray-200); border: 2px solid var(--border-color); padding: 2px 10px; font-weight: 800; border-radius: var(--border-radius-lg); font-size: 0.8rem; margin-top: 8px; display: inline-block; } .profile-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 40px; } .stat-card { background: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); box-shadow: var(--neo-shadow-sm); padding: 20px; display: flex; align-items: center; gap: 16px; } .stat-card .stat-icon { font-size: 2rem; } .stat-card h3 { font-size: 1.6rem; font-weight: 800; } .stat-card p { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; } .profile-achievements { background: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--neo-shadow); padding: 32px; } .profile-achievements h3 { font-size: 1.4rem; font-weight: 800; margin-bottom: 20px; } .achievements-list { display: flex; flex-direction: column; gap: 16px; } .achievement-item { display: flex; align-items: center; gap: 16px; padding: 12px; border: 2px solid var(--border-color); border-radius: var(--border-radius-md); } .achievement-icon { font-size: 1.8rem; background: #f3f4f6; border: 2px solid var(--border-color); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .achievement-text h4 { font-weight: 800; } .achievement-text p { font-size: 0.85rem; color: var(--text-muted); } .achievement-item.locked { opacity: 0.55; background: var(--gray-100); } .achievement-item.locked .achievement-icon { background: var(--gray-200); } /* ========================================================================== VENTANAS MODALES (LECCIÓN INTERACTIVA Y UPSELL) ========================================================================== */ .lesson-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.45); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 20px; } .premium-upsell-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--bg-primary); z-index: 1000; display: none; align-items: center; justify-content: center; padding: 0; } .lesson-modal-container { background-color: var(--bg-primary); width: 100%; max-width: 720px; height: 90vh; border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.15); display: flex; flex-direction: column; overflow: hidden; animation: zoomIn 0.25s ease; } .upsell-modal-container { background-color: var(--bg-card); width: 100%; max-width: 500px; border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); box-shadow: var(--neo-shadow); padding: 32px; text-align: center; animation: zoomIn 0.25s ease; } @keyframes zoomIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Encabezado de Lección */ .lesson-modal-header { height: 60px; background-color: var(--bg-card); border-bottom: var(--border-width) solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; } .close-lesson-btn { background: none; border: none; font-size: 1.5rem; font-weight: 800; cursor: pointer; color: var(--text-muted); } .close-lesson-btn:hover { color: var(--text-primary); } .lesson-progress-container { flex-grow: 0.8; height: 16px; background-color: var(--gray-200); border: 2px solid var(--border-color); border-radius: var(--border-radius-lg); overflow: hidden; } .lesson-progress-bar { height: 100%; background-color: var(--color-green); transition: width 0.3s ease; } .lesson-modal-lives { font-weight: 800; font-size: 1.1rem; } /* Cuerpo de Lección */ .lesson-modal-body { flex-grow: 1; padding: 32px 24px 60px 24px; margin-top: 0px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background-color: var(--dash-surface); } .exercise-card { width: 100%; max-width: 600px; margin: 0 auto; } .exercise-theory { background-color: var(--bg-card); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); padding: 30px 24px; margin-bottom: 28px; box-shadow: var(--neo-shadow-sm); } .theory-text { font-size: 1.05rem; line-height: 1.6; } .theory-text p { margin-bottom: 16px; } .theory-text p:last-child { margin-bottom: 0; } .exercise-question h3 { font-size: 1.3rem; font-weight: 800; margin-bottom: 24px; line-height: 1.4; } .exercise-options { display: flex; flex-direction: column; gap: 16px; } .option-btn { background: var(--bg-card); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); padding: 16px 20px; font-size: 1.05rem; font-weight: 700; text-align: left; cursor: pointer; box-shadow: var(--neo-shadow-sm); display: flex; align-items: center; gap: 16px; transition: all 0.1s; width: 100%; } .option-btn:hover { background-color: var(--gray-100); color: var(--bg-primary); } .option-letter { border: 2px solid var(--border-color); border-radius: var(--border-radius-sm); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-weight: 800; background: #eef2f6; font-size: 0.85rem; } .option-btn.selected { border-color: var(--color-purple); background-color: #eff6ff; box-shadow: 2px 2px 0 var(--color-purple); } .option-btn.selected .option-letter { border-color: var(--color-purple); background-color: var(--color-purple); color: white; } /* Pie de Modal y Feedbacks */ .lesson-modal-footer { background-color: var(--bg-card); border-top: var(--border-width) solid var(--border-color); padding: 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; transition: background-color 0.2s; } .check-answer-btn { max-width: 200px; } /* Estados de feedback (Verificación) */ .lesson-modal-footer.correct-answer { background-color: #d1fae5; border-top-color: var(--color-green); } .lesson-modal-footer.correct-answer .feedback-title { color: #065f46; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; } .lesson-modal-footer.incorrect-answer { background-color: #fee2e2; border-top-color: var(--color-red); } .lesson-modal-footer.incorrect-answer .feedback-title { color: #991b1b; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; gap: 8px; } .feedback-desc { font-size: 0.9rem; margin-top: 4px; color: var(--text-primary); } /* ========================================================================== UPSELL MODAL SPECIFICS ========================================================================== */ .crown-icon { font-size: 3.5rem; display: block; margin-bottom: 12px; } .upsell-modal-container h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 8px; } .upsell-modal-container p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.4; margin-bottom: 24px; } .upsell-bullets { text-align: left; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; background: var(--gray-100); border: 2px solid var(--border-color); padding: 16px; border-radius: var(--border-radius-md); } .upsell-bullets .bullet { font-weight: 700; font-size: 0.9rem; } .upsell-actions { display: flex; flex-direction: column; gap: 12px; } /* ========================================================================== MEDIA QUERIES - DISEÑO RESPONSIVO MÓVIL ========================================================================== */ @media (max-width: 768px) { :root { --header-height: 60px; } .app-container { flex-direction: column-reverse; /* Pone la barra lateral abajo */ } /* Sidebar se convierte en barra inferior (Tab Bar) */ .sidebar { width: 100vw; height: 65px; position: fixed; bottom: 0; top: auto; left: 0; right: 0; border-right: none; border-top: var(--border-width) solid var(--border-color); padding: 6px 12px; flex-direction: row; justify-content: space-around; align-items: center; z-index: 1000; } .logo-container, .sidebar-footer { display: none; /* Esconde logo y usuario en móvil */ } .nav-menu { flex-direction: row; width: 100%; justify-content: space-between; gap: 8px; } .nav-item { flex: 1; padding: 8px; justify-content: center; gap: 0; flex-direction: column; font-size: 0.7rem; box-shadow: none; border: none; } .nav-item:hover, .nav-item:active, .nav-item.active { box-shadow: none; transform: none; } .nav-item.active { border-bottom: 3px solid var(--color-purple); border-radius: 0; background: none; } .nav-icon { font-size: 1.3rem; } .nav-label { font-size: 0.65rem; margin-top: 2px; } /* Main Content */ .main-content { margin-left: 0; padding: 16px 16px 80px 16px; /* Deja espacio para el Tab bar */ } .game-header { padding: 0 12px; gap: 8px; } .xp-container { flex-grow: 1; } .stat-badge { font-size: 0.9rem; padding: 4px 8px; } .sandbox-toggle { display: none; /* Esconder en móvil para ahorrar espacio */ } /* Grid de Calculadora */ .calculator-grid { grid-template-columns: 1fr; gap: 20px; } .quick-stats { grid-template-columns: 1fr; } .pricing-cards { flex-direction: column; gap: 24px; } .profile-stats-grid { grid-template-columns: 1fr; gap: 16px; } } /* ========================================================================== ESTILOS DE LA LANDING PAGE (ESTILO MIMO.ORG) ========================================================================== */ #landing-page-view { font-family: var(--font-main); color: white; background-color: var(--bg-primary); /* Fondo oscuro principal */ min-height: 100vh; } /* Scroll suave al navegar por los anclajes del menú (#tracks, #faq, #about...) */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* CABECERA DE LA LANDING */ .landing-header { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 80px; background-color: var(--bg-primary); border-bottom: 2px solid var(--border-color); position: sticky; top: 0; z-index: 500; transition: box-shadow 0.25s ease; } .landing-header.is-scrolled { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .landing-nav { display: flex; gap: 32px; } .landing-nav-link { color: var(--text-muted); text-decoration: none; font-weight: 700; font-size: 0.95rem; transition: color 0.2s; } .landing-nav-link:hover { color: white; } /* BOTÓN HAMBURGUESA (solo visible en móvil) */ .landing-nav-toggle { display: none; background: none; border: 1.5px solid var(--border-color); border-radius: var(--border-radius-md); color: var(--text-primary); width: 40px; height: 40px; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .landing-nav-toggle svg { transition: transform 0.2s ease; } .landing-nav-toggle.active svg { transform: rotate(90deg); } /* PANEL DE NAVEGACIÓN MÓVIL DESPLEGABLE */ .landing-mobile-nav { display: none; flex-direction: column; gap: 4px; background-color: var(--bg-primary); border-bottom: 2px solid var(--border-color); padding: 0 20px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease, padding 0.25s ease; } .landing-mobile-nav.open { max-height: 480px; padding: 16px 20px 24px 20px; } .landing-mobile-nav .landing-nav-link { padding: 12px 4px; border-bottom: 1px solid var(--border-color); } .landing-mobile-nav-auth { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .landing-mobile-nav-auth .landing-login-btn { border: 1.5px solid var(--border-color); border-radius: var(--border-radius-md); padding: 10px; } .landing-auth-buttons { display: flex; align-items: center; gap: 20px; } .landing-login-btn { background: none; color: white; font-weight: 800; font-size: 0.95rem; cursor: pointer; transition: all 0.1s; padding: 10px 20px; white-space: nowrap; border: var(--border-width) solid var(--gray-500); border-radius: var(--border-radius-md); box-shadow: 0px 3px 0px var(--gray-500); } .landing-login-btn:hover { background-color: rgba(255, 255, 255, 0.06); } .landing-login-btn:active { transform: translateY(3px); box-shadow: 0px 0px 0px var(--gray-500); } .landing-signup-btn { padding: 10px 20px !important; font-size: 0.95rem !important; box-shadow: 0px 3px 0px var(--border-color) !important; } /* ========================================================================== SECCIÓN HERO (BIENVENIDA + REGISTRO) ========================================================================== */ .landing-hero { display: flex; flex-direction: column; padding: 80px; gap: 48px; position: relative; z-index: 0; } .hero-content-row { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; text-align: left; gap: 40px; width: 100%; } /* --- Pantallas completas de login/registro: formulario + mascota a la derecha --- */ .auth-screen-layout { display: flex; align-items: center; justify-content: center; gap: 72px; width: 100%; max-width: 1060px; } .auth-mascot-visual { flex-shrink: 0; display: flex; justify-content: center; } .auth-mascot-visual img { height: 260px; width: auto; display: block; filter: drop-shadow(0 10px 0px rgba(0, 0, 0, 0.35)); animation: mascotFloat 4.5s ease-in-out infinite; } .auth-mascot-visual-static { position: relative; } .auth-mascot-visual-static img { animation: none; height: 480px; } .auth-mascot-bubble { position: absolute; top: -12px; left: 54%; transform: translate(-40%, -100%) rotate(-2deg); background: #ffffff; color: var(--gray-900); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.1rem; line-height: 1.28; text-align: center; padding: 18px 22px; border: 3px solid var(--gray-900); border-radius: 26px 26px 26px 8px; width: 250px; box-shadow: 6px 6px 0 var(--color-brand-light); animation: authBubblePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both; z-index: 2; } .auth-mascot-bubble::before { content: ''; position: absolute; bottom: -19px; left: 32px; width: 0; height: 0; border-style: solid; border-width: 20px 8px 0 4px; border-color: var(--gray-900) transparent transparent transparent; } .auth-mascot-bubble::after { content: ''; position: absolute; bottom: -13px; left: 34px; width: 0; height: 0; border-style: solid; border-width: 15px 6px 0 3px; border-color: #ffffff transparent transparent transparent; } @keyframes authBubblePop { 0% { opacity: 0; transform: translate(-40%, -100%) rotate(-2deg) scale(0.5); } 100% { opacity: 1; transform: translate(-40%, -100%) rotate(-2deg) scale(1); } } @media (prefers-reduced-motion: reduce) { .auth-mascot-bubble { animation: none; } } @media (max-width: 1100px) { .auth-mascot-bubble { width: 210px; font-size: 1rem; padding: 14px 18px; } } /* Pantalla de inicio de sesión: notablemente más grande que el resto de pantallas de auth */ .auth-screen-layout-login { max-width: 1080px; gap: 110px; } .auth-screen-layout-login .auth-mascot-visual img { height: 460px; animation: none; } .auth-login-google-btn { padding: 18px 24px !important; font-size: 1.15rem !important; } .auth-login-google-icon { width: 26px; height: 26px; } @media (max-width: 900px) { .auth-mascot-visual { display: none; } } @media (prefers-reduced-motion: reduce) { .auth-mascot-visual img { animation: none; } } /* Mascota como pieza visual central del hero, al estilo Duolingo */ .hero-mascot-visual { position: relative; display: flex; justify-content: center; margin-bottom: 4px; } /* Mancha de color de marca detrás de la mascota, para darle profundidad */ .hero-mascot-visual::before { content: ''; position: absolute; top: 50%; left: 50%; width: 280px; height: 280px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(129, 140, 248, 0.32) 0%, rgba(129, 140, 248, 0) 70%); border-radius: 50%; z-index: -1; pointer-events: none; } .hero-mascot-visual img { height: 200px; width: auto; display: block; filter: drop-shadow(0 10px 0px rgba(0, 0, 0, 0.35)); animation: mascotFloat 4.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .hero-mascot-visual img { animation: none; } } /* --- Indicador de scroll al final del hero --- */ .hero-scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: -34px auto 0; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; text-decoration: none; } .hero-scroll-cue svg { width: 18px; height: 18px; } .hero-scroll-cue:hover { color: var(--color-brand-light); } @keyframes heroScrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .hero-scroll-cue { animation: none; } } /* Elementos decorativos flotantes de fondo (monedas y chispas), puramente visuales */ .hero-decor { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .hero-decor-item { position: absolute; opacity: 0.16; color: var(--color-brand-light); animation: heroDecorFloat 7s ease-in-out infinite; } .hero-decor-item svg { display: block; } /* Todos los elementos decorativos se mantienen en la franja superior vacía, por encima de las tarjetas de meta, para que no se asomen entre ellas. */ .hero-decor-coin1 { top: 6%; left: 4%; width: 46px; animation-duration: 8s; } .hero-decor-coin2 { top: 14%; left: 32%; width: 30px; animation-duration: 6.5s; animation-delay: 0.6s; color: var(--color-gold); } .hero-decor-spark1 { top: 24%; left: 54%; width: 22px; animation-duration: 5.5s; animation-delay: 1.1s; } .hero-decor-chart { top: 8%; left: 74%; width: 60px; animation-duration: 9s; animation-delay: 0.3s; } .hero-decor-coin3 { top: 28%; left: 94%; width: 34px; animation-duration: 7.5s; animation-delay: 0.9s; color: var(--color-gold); } @keyframes heroDecorFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-16px) rotate(6deg); } } @media (max-width: 900px) { .hero-decor { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-decor-item { animation: none; } } .hero-left { max-width: 560px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; position: relative; } .hero-title { font-size: 3rem; font-weight: 800; line-height: 1.15; margin-bottom: 14px; letter-spacing: -0.02em; } /* Posición absoluta y fija: así no se mueve aunque el título ocupe 2 o 3 líneas */ .hero-pointer-mascot { position: absolute; top: 230px; left: 0; pointer-events: none; } .hero-pointer-mascot img { height: 280px; width: auto; display: block; filter: drop-shadow(0 10px 0px rgba(0, 0, 0, 0.35)); transform: rotate(0deg); } @media (max-width: 900px) { .hero-pointer-mascot { display: none; } } @media (prefers-reduced-motion: reduce) { .hero-pointer-mascot { animation: none !important; } } .hero-rotating-word { display: inline-block; color: var(--color-brand-light); white-space: nowrap; border-bottom: 6px solid rgba(129, 140, 248, 0.3); padding-bottom: 2px; transition: opacity 0.3s ease, transform 0.3s ease; } .hero-rotating-word.is-swapping { opacity: 0; transform: translateY(10px); } @media (prefers-reduced-motion: reduce) { .hero-rotating-word { transition: none; } } .hero-subtitle { font-size: 1.15rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0; } /* Selector de Metas */ .goal-selection-container { margin-bottom: 40px; } .goal-title-heading { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-purple); margin-bottom: 16px; font-weight: 800; } .goal-options-stack { display: flex; flex-direction: column; gap: 16px; } .goal-option-card { background-color: var(--border-color); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); padding: 16px 20px; display: flex; align-items: center; gap: 20px; cursor: pointer; text-align: left; color: white; box-shadow: 0px 4px 0px var(--border-color); transition: all 0.2s ease; width: 100%; position: relative; } .goal-option-card:hover { transform: translateY(-2px); border-color: var(--color-purple); } .goal-option-card.active { border-color: var(--color-purple); background-color: rgba(99, 102, 241, 0.15); animation: goalCardPulseGlow 2.6s ease-in-out infinite; } @keyframes goalCardPulseGlow { 0%, 100% { box-shadow: 0px 4px 0px var(--border-color), 0 0 0px rgba(99, 102, 241, 0); } 50% { box-shadow: 0px 4px 0px var(--border-color), 0 0 22px rgba(99, 102, 241, 0.45); } } @media (prefers-reduced-motion: reduce) { .goal-option-card.active { animation: none; box-shadow: 0px 4px 0px var(--border-color), 0 0 14px rgba(99, 102, 241, 0.3); } } .goal-card-icon { font-size: 2rem; display: inline-flex; color: var(--color-purple); flex-shrink: 0; } .goal-card-icon svg { width: 30px; height: 30px; } .goal-card-content h4 { font-size: 1.1rem; font-weight: 800; margin-bottom: 4px; } .goal-card-content p { font-size: 0.85rem; color: var(--text-muted); } .hero-stars-footer { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; } .stars-text { margin-left: 8px; } /* HERO: BOTONES DE REGISTRO, a la derecha del titular y más abajo */ .hero-right { display: flex; justify-content: flex-end; flex-shrink: 0; width: auto; position: relative; margin-top: 340px; } @keyframes mascotFloat { 0%, 100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-8px); } } /* Aviso pulsante junto al botón de Google */ .google-signup-btn { position: relative; } .google-btn-point-fx { position: absolute; top: 50%; right: 14px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--color-purple, #6366F1); pointer-events: none; animation: capiPointPing 2.6s ease-in-out infinite; } @keyframes capiPointPing { 0%, 15% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.55); opacity: 0; } 18% { opacity: 1; } 30% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); opacity: 0; } 100% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); opacity: 0; } } .signup-floating-card { width: 100%; max-width: 460px; position: relative; z-index: 1; } /* Capi detrás de los botones: las manos quedan justo sobre "Empieza ahora" */ .hero-right-mascot { position: absolute; top: -385px; left: 50%; transform: translateX(-50%); z-index: 0; pointer-events: none; } .hero-right-mascot img { height: 520px; width: auto; display: block; filter: drop-shadow(0 10px 0px rgba(0, 0, 0, 0.35)); } @media (max-width: 1024px) { .hero-right-mascot { display: none; } } .hero-cta-buttons { display: flex; flex-direction: column; gap: 16px; } .hero-cta-buttons .mimo-btn { font-size: 1.3rem; padding: 20px 32px; } /* Botón "Empieza ahora" del hero: respiración para llamar la atención */ #btn-hero-empieza { background-color: var(--color-purple); box-shadow: 0px 4px 0px var(--border-color), 0 0 0 6px rgba(99, 102, 241, 0.22); animation: heroCtaBtnPulse 1.8s ease-in-out infinite; } #btn-hero-empieza:hover { background-color: var(--color-purple-hover); animation-play-state: paused; } @keyframes heroCtaBtnPulse { 0%, 100% { transform: scale(1); box-shadow: 0px 4px 0px var(--border-color), 0 0 0 6px rgba(99, 102, 241, 0.22); } 50% { transform: scale(1.06); box-shadow: 0px 4px 0px var(--border-color), 0 0 0 12px rgba(99, 102, 241, 0.05); } } @media (prefers-reduced-motion: reduce) { #btn-hero-empieza { animation: none !important; } } .google-signup-btn { background-color: white !important; color: var(--gray-800) !important; display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0px 4px 0px var(--border-color) !important; font-size: 1rem !important; } .google-signup-btn:active { box-shadow: 0px 0px 0px var(--border-color) !important; } .google-icon-img { width: 20px; height: 20px; } .signup-divider { display: flex; align-items: center; text-align: center; color: var(--gray-600); margin: 20px 0; } .signup-divider::before, .signup-divider::after { content: ''; flex: 1; border-bottom: 2px solid var(--gray-800); } .signup-divider span { padding: 0 10px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; } .form-group-mimo { margin-bottom: 16px; } .form-group-mimo input { width: 100%; padding: 14px 16px; border-radius: var(--border-radius-md); border: 2px solid var(--border-color); background-color: var(--gray-800); color: white; font-size: 1rem; font-weight: 600; outline: none; } .form-group-mimo input::placeholder { color: var(--gray-500); } .form-group-mimo input:focus { border-color: var(--color-purple); } .password-input-wrapper { position: relative; display: flex; align-items: center; } .password-toggle-btn { position: absolute; right: 16px; background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--gray-500); outline: none; } .start-learning-btn { margin-top: 8px; background-color: var(--color-purple) !important; color: white !important; } .signup-terms { font-size: 0.75rem; color: var(--gray-500); text-align: center; margin-top: 16px; line-height: 1.4; } .signup-terms a { color: var(--text-muted); text-decoration: underline; } /* ========================================================================== SECCIÓN DE TRAYECTORIAS (TRACKS - FONDO CLARO) ========================================================================== */ .landing-tracks { background-color: #0e1626; color: var(--text-primary); padding: 100px 80px; } .tracks-intro { text-align: center; max-width: 700px; margin: 0 auto 60px auto; } .section-badge { color: var(--color-purple); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.1em; display: block; margin-bottom: 12px; } .tracks-intro h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 16px; } .tracks-intro p { color: var(--text-muted); font-size: 1.15rem; } /* Bloques alternos texto/ilustración (estilo "qué aprenderás") */ .tracks-features { display: flex; flex-direction: column; gap: 150px; max-width: 1200px; margin: 0 auto 70px auto; } .track-feature-row { display: flex; align-items: center; justify-content: space-between; gap: 64px; } .track-feature-row-reverse { flex-direction: row-reverse; } .track-feature-text { flex: 1; min-width: 0; max-width: 460px; display: flex; flex-direction: column; align-items: flex-start; } .track-feature-heading { font-size: 2.5rem; font-weight: 800; line-height: 1.15; margin-bottom: 14px; letter-spacing: -0.01em; } .track-feature-heading-purple { color: var(--color-brand-light); } .track-feature-text p { font-size: 1.02rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 20px; } .track-feature-text p strong { color: var(--text-primary); } .track-level-badge { align-self: flex-start; font-size: 0.75rem; font-weight: 800; color: var(--text-muted); background: var(--bg-primary); padding: 4px 10px; border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); } /* Panel ilustrado de cada bloque */ .track-feature-visual { position: relative; flex-shrink: 0; width: 420px; max-width: 100%; height: auto; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; } .track-feature-row:hover .track-feature-visual { transform: translateY(-4px); } .track-feature-visual-mascot { width: 100%; height: auto; display: block; border-radius: 0 0 32px 32px; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); } .track-feature-row:hover .track-feature-visual-mascot { transform: scale(1.05) translateY(-4px); } .tracks-closing-line { text-align: center; font-family: 'Outfit', sans-serif; font-size: 3rem; font-weight: 800; line-height: 1.15; text-transform: uppercase; letter-spacing: 0.01em; background: linear-gradient(90deg, #ffffff 0%, var(--color-brand-light) 50%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--text-primary); text-shadow: 0 0 40px rgba(129, 140, 248, 0.35); max-width: 1200px; margin: 150px auto 0 auto; } @media (max-width: 1100px) { .tracks-closing-line { font-size: 2.4rem; } } /* --- Entrada exagerada de abajo hacia arriba para el cierre de "Qué aprenderás" --- */ .tracks-closing-line.reveal-on-scroll, .tracks-closing-mascot.reveal-on-scroll { transform: translateY(220px); transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .tracks-closing-line.reveal-on-scroll.is-visible, .tracks-closing-mascot.reveal-on-scroll.is-visible { transform: translateY(0); } .tracks-closing-mascot { display: flex; justify-content: center; margin-top: 24px; } .tracks-closing-mascot img { height: 640px; width: auto; } @media (max-width: 900px) { .tracks-closing-mascot img { height: 400px; } } @media (max-width: 900px) { .track-feature-row, .track-feature-row-reverse { flex-direction: column-reverse; gap: 32px; text-align: center; } .track-feature-text { align-items: center; max-width: 100%; } .track-feature-visual { width: 100%; max-width: 360px; height: auto; } } /* Fila de Tecnologías (Pills) */ /* ========================================================================== SECCIÓN VENTAJAS (POR QUÉ FINANZACADEMY) ========================================================================== */ .landing-perks { background-color: var(--bg-primary); padding: 100px 80px; border-top: 1px solid var(--gray-800); border-bottom: 1px solid var(--gray-800); } .perks-intro { text-align: center; max-width: 700px; margin: 0 auto 56px auto; } .perks-intro h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 16px; } .perks-intro p { color: var(--text-muted); font-size: 1.15rem; } .perks-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; } .perk-card { background: var(--bg-card); border: var(--border-width) solid var(--border-color); border-top-width: 4px; border-radius: var(--border-radius-lg); box-shadow: var(--neo-shadow); padding: 28px; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; } /* --- Bento: dos tarjetas destacadas rompen la retícula uniforme --- */ .perk-card-featured { grid-column: span 2; } .perk-card-featured .perk-preview { height: 140px; } .perk-card-featured h3 { font-size: 1.4rem; } .perk-card-wide { grid-column: span 3; flex-direction: row; align-items: center; gap: 28px; } .perk-card-wide .perk-preview { flex-shrink: 0; width: 140px; height: 100px; margin-bottom: 0; } .perk-card-wide-text h3 { margin-bottom: 6px; } .perk-card-wide-text p { margin: 0; } /* --- Acento de color por tarjeta --- */ .perk-card-purple { border-top-color: var(--color-purple); } .perk-card-gold { border-top-color: var(--color-gold-bright); } .perk-card-green { border-top-color: var(--color-green); } .perk-card:hover { transform: translateY(-4px); box-shadow: 6px 6px 0px var(--border-color); } /* Mini-previews de la sección de ventajas: representan de forma esquemática una parte real de lo que se ve dentro de la app (no son iconos genéricos). */ .perk-preview { position: relative; height: 118px; border-radius: var(--border-radius-md); background: var(--bg-primary); border: 1.5px solid var(--border-color); margin-bottom: 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 14px; } /* --- Pista de niveles --- */ .mini-level-track { position: relative; display: flex; align-items: center; gap: 10px; } .mini-level-track::before { content: ''; position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; background: var(--gray-700); transform: translateY(-50%); z-index: 0; } .mini-level-node { position: relative; z-index: 1; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; background: var(--gray-800); border: 2px solid var(--gray-700); color: var(--text-muted); } .mini-level-node.is-done { background: var(--color-purple); border-color: var(--color-purple); color: white; } .mini-level-node.is-current { border-color: var(--color-gold); color: var(--color-gold); box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.25); animation: miniNodePulse 2.2s ease-in-out infinite; } @keyframes miniNodePulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.25); } 50% { box-shadow: 0 0 0 7px rgba(197, 168, 128, 0.06); } } .perk-preview-levels::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 40px; background: linear-gradient(90deg, transparent, var(--bg-primary)); pointer-events: none; } /* --- Insignia --- */ .mini-badge { position: relative; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8d5a8, var(--color-gold-champagne)); border: 2px solid rgba(255, 255, 255, 0.4); display: flex; align-items: center; justify-content: center; color: #3a2f1d; box-shadow: 0 6px 14px rgba(197, 168, 128, 0.35); overflow: hidden; } .mini-badge svg { position: relative; z-index: 1; width: 30px; height: 30px; } .mini-badge::after { content: ''; position: absolute; top: -60%; left: -70%; width: 45%; height: 220%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.65), transparent); transform: rotate(20deg); animation: miniBadgeShine 3.4s ease-in-out infinite; } @keyframes miniBadgeShine { 0% { left: -70%; } 35%, 100% { left: 140%; } } /* --- Tabla comparativa --- */ .mini-compare-table { display: flex; gap: 10px; width: 100%; max-width: 190px; } .mini-compare-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--bg-card); border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 10px 6px; } .mini-compare-head { font-size: 0.62rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .mini-compare-mark { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 900; opacity: 0; transform: scale(0.3); transition: opacity 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .perk-card.is-visible .mini-compare-mark { opacity: 1; transform: scale(1); } .perk-card.is-visible .mini-compare-mark:nth-child(2) { transition-delay: 0.15s; } .perk-card.is-visible .mini-compare-mark:nth-child(3) { transition-delay: 0.32s; } .mini-compare-mark.is-yes { background: rgba(34, 197, 94, 0.18); color: var(--color-green); } .mini-compare-mark.is-no { background: rgba(239, 68, 68, 0.15); color: var(--color-red); } /* --- Racha diaria --- */ .mini-streak-row { display: flex; gap: 6px; } .mini-streak-cell { width: 16px; height: 16px; border-radius: 4px; background: var(--gray-800); border: 1px solid var(--gray-700); } .mini-streak-cell.is-lit { background: linear-gradient(135deg, var(--color-gold-bright), var(--color-red)); border-color: transparent; opacity: 0; transform: scale(0.5); transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } .perk-card.is-visible .mini-streak-cell.is-lit { opacity: 1; transform: scale(1); } .perk-card.is-visible .mini-streak-cell.is-lit:nth-child(1) { transition-delay: 0.15s; } .perk-card.is-visible .mini-streak-cell.is-lit:nth-child(2) { transition-delay: 0.28s; } .perk-card.is-visible .mini-streak-cell.is-lit:nth-child(3) { transition-delay: 0.41s; } .perk-card.is-visible .mini-streak-cell.is-lit:nth-child(4) { transition-delay: 0.54s; } .perk-card.is-visible .mini-streak-cell.is-lit:nth-child(5) { transition-delay: 0.67s; } .mini-streak-flame { margin-left: 12px; width: 26px; height: 26px; flex-shrink: 0; color: var(--color-gold-bright); } .mini-streak-flame svg { width: 100%; height: 100%; transform-origin: 50% 90%; animation: miniFlameFlicker 2.4s ease-in-out infinite; } @keyframes miniFlameFlicker { 0%, 100% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.06) rotate(-3deg); } 50% { transform: scale(0.96) rotate(2deg); } 75% { transform: scale(1.03) rotate(-1deg); } } /* --- Contenedor genérico centrado (reutilizado por varias mini-previews) --- */ .mini-start-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; } .mini-start-label { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } /* --- Ruta ordenada, no vídeos sueltos --- */ .mini-route-stack { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: 200px; } .mini-route-step { display: flex; align-items: center; gap: 10px; position: relative; padding: 4px 0; opacity: 0; transform: translateX(-14px); transition: opacity 0.45s ease, transform 0.45s ease; } .perk-card.is-visible .mini-route-step { opacity: 1; transform: translateX(0); } .perk-card.is-visible .mini-route-step:nth-child(1) { transition-delay: 0.1s; } .perk-card.is-visible .mini-route-step:nth-child(2) { transition-delay: 0.28s; } .perk-card.is-visible .mini-route-step:nth-child(3) { transition-delay: 0.46s; } .mini-route-step:not(:last-child)::after { content: ''; position: absolute; left: 10px; top: 26px; width: 2px; height: 14px; background: var(--gray-700); } .mini-route-num { position: relative; z-index: 1; width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--color-purple); color: white; font-size: 0.66rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } .mini-route-label { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* --- Contenido imparcial (sin comisiones ocultas) --- */ .mini-neutral-badge { width: 62px; height: 62px; border-radius: 50%; background: rgba(99, 102, 241, 0.12); border: 2px solid rgba(99, 102, 241, 0.3); display: flex; align-items: center; justify-content: center; color: var(--color-brand-light); } .mini-neutral-badge svg { width: 28px; height: 28px; transform-origin: 50% 20%; animation: miniBalanceSway 3.6s ease-in-out infinite; } @keyframes miniBalanceSway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-7deg); } } .perk-card:hover .mini-level-node.is-current, .perk-card:hover .mini-badge, .perk-card:hover .mini-neutral-badge { transform: scale(1.08); transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); } .perk-card h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 8px; } .perk-card p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin: 0; } @media (prefers-reduced-motion: reduce) { .mini-level-node.is-current, .mini-badge::after, .mini-streak-flame svg, .mini-neutral-badge svg { animation: none !important; } .mini-streak-cell.is-lit, .mini-compare-mark, .mini-route-step { opacity: 1 !important; transform: none !important; transition: none !important; } } /* --- Entrada de las tarjetas: cada una llega desde su lado --- */ .perk-card.reveal-on-scroll { transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); } .perk-card-enter-top.reveal-on-scroll { transform: translateY(-200px); } .perk-card-enter-bottom.reveal-on-scroll { transform: translateY(200px); } .perk-card-enter-left.reveal-on-scroll { transform: translateX(-200px); } .perk-card-enter-right.reveal-on-scroll { transform: translateX(200px); } .perk-card-enter-top.reveal-on-scroll.is-visible, .perk-card-enter-bottom.reveal-on-scroll.is-visible, .perk-card-enter-left.reveal-on-scroll.is-visible, .perk-card-enter-right.reveal-on-scroll.is-visible { transform: translate(0, 0); } @media (max-width: 900px) { .perks-grid { grid-template-columns: repeat(2, 1fr); } .perk-card-featured, .perk-card-wide { grid-column: span 2; } } @media (max-width: 600px) { .perks-grid { grid-template-columns: 1fr; } .perk-card-featured, .perk-card-wide { grid-column: span 1; } .perk-card-wide { flex-direction: column; text-align: center; } .perk-card-wide .perk-preview { width: 100%; } } /* ========================================================================== SECCIÓN INTELIGENCIA ARTIFICIAL (AI-POWERED - OSCURA) ========================================================================== */ .landing-ai { background-color: #020617; /* Más oscuro */ padding: 100px 80px; } .ai-intro { text-align: center; max-width: 700px; margin: 0 auto 60px auto; } .section-badge-ai { color: var(--color-brand-light); font-size: 0.85rem; font-weight: 800; letter-spacing: 0.1em; display: block; margin-bottom: 12px; } .ai-intro h2 { font-size: 2.5rem; font-weight: 800; margin-bottom: 24px; } .ai-stat-callout { display: inline-flex; align-items: center; gap: 20px; background-color: var(--color-indigo-deep); border: 2px solid var(--color-purple); padding: 12px 24px; border-radius: var(--border-radius-pill); text-align: left; } .stat-number { font-size: 2.5rem; font-weight: 800; color: var(--color-brand-light); } .stat-text { font-size: 0.95rem; font-weight: 700; color: #cbd5e1; max-width: 400px; } .ai-showcase { display: grid; grid-template-columns: 0.85fr 1fr; gap: 60px; align-items: center; max-width: 1200px; margin: 0 auto; } .ai-benefits-list { display: flex; flex-direction: column; gap: 28px; } .ai-benefit-item { display: flex; align-items: flex-start; gap: 18px; } .ai-benefit-icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--border-radius-md); background-color: var(--color-indigo-deep); border: 1.5px solid var(--color-purple); color: var(--color-brand-light); display: flex; align-items: center; justify-content: center; } .ai-benefit-icon svg { width: 24px; height: 24px; } .ai-benefit-item h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 4px; color: var(--color-white); } .ai-benefit-item p { color: #94a3b8; font-size: 0.92rem; line-height: 1.5; margin: 0; } .ai-showcase-cta { align-self: flex-start; margin-top: 8px; } /* --- VISTA PREVIA DE LA APP (mockup de móvil) --- */ .ai-phone-showcase { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 0; } .phone-decor { position: absolute; inset: -20px; z-index: -1; pointer-events: none; } .phone-decor-item { position: absolute; width: 40px; height: 40px; color: var(--color-brand-light); opacity: 0.35; } .phone-decor-item svg { width: 100%; height: 100%; } .phone-decor-1 { top: 6%; left: -4%; animation: heroDecorFloat 7s ease-in-out infinite; } .phone-decor-2 { bottom: 8%; right: -6%; width: 30px; height: 30px; color: var(--color-yellow); animation: heroDecorFloat 6s ease-in-out infinite reverse; } .phone-mockup { width: 400px; height: 800px; background-color: #0b0f19; border: 5px solid var(--border-color); border-radius: 46px; box-shadow: var(--neo-shadow), 0 30px 60px rgba(0, 0, 0, 0.45); padding: 18px 14px; position: relative; } .phone-notch { width: 120px; height: 26px; background-color: var(--border-color); border-radius: var(--border-radius-pill); margin: 0 auto 14px auto; } .phone-screen { position: relative; width: 100%; height: calc(100% - 30px); background-color: var(--dash-surface, #0f172a); border-radius: 22px; overflow: hidden; } .phone-slide { position: absolute; inset: 0; padding: 30px 24px; display: flex; flex-direction: column; opacity: 0; animation: phoneSlideCycle 9s infinite; } .phone-slide-1 { animation-delay: 0s; } .phone-slide-2 { animation-delay: 3s; align-items: center; justify-content: center; text-align: center; } .phone-slide-3 { animation-delay: 6s; align-items: center; justify-content: center; text-align: center; } @keyframes phoneSlideCycle { 0% { opacity: 0; transform: translateY(6px); } 5% { opacity: 1; transform: translateY(0); } 28% { opacity: 1; transform: translateY(0); } 34% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 0; } } .phone-topbar { margin-bottom: 26px; } .phone-progress-track { height: 10px; background-color: rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-pill); overflow: hidden; } .phone-progress-fill { height: 100%; background-color: var(--color-green); border-radius: var(--border-radius-pill); } .phone-question { color: var(--color-white); font-size: 1.08rem; font-weight: 700; line-height: 1.4; margin-bottom: 26px; } .phone-options { display: flex; flex-direction: column; gap: 13px; } .phone-option { display: flex; align-items: center; gap: 13px; background-color: rgba(255, 255, 255, 0.04); border: 1.5px solid rgba(255, 255, 255, 0.15); border-radius: var(--border-radius-md); padding: 13px 16px; color: #cbd5e1; font-size: 0.92rem; font-weight: 600; text-align: left; cursor: default; } .phone-option-letter { flex-shrink: 0; width: 25px; height: 25px; border-radius: var(--border-radius-sm); background-color: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 255, 255, 0.2); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 800; color: #cbd5e1; } .phone-option.is-correct { background-color: rgba(34, 197, 94, 0.15); border-color: var(--color-green); color: var(--color-white); } .phone-option.is-correct .phone-option-letter { background-color: var(--color-green); border-color: var(--color-green); color: var(--color-white); } .phone-feedback-icon { width: 70px; height: 70px; border-radius: 50%; background-color: rgba(34, 197, 94, 0.15); border: 2px solid var(--color-green); color: var(--color-green); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } .phone-feedback-icon svg { width: 36px; height: 36px; } .phone-feedback-title { color: var(--color-white); font-size: 1.5rem; font-weight: 800; margin-bottom: 10px; } .phone-feedback-text { color: #94a3b8; font-size: 1rem; line-height: 1.5; margin-bottom: 20px; } .phone-xp-chip { background-color: var(--color-yellow); color: var(--border-color); font-size: 0.9rem; font-weight: 800; padding: 6px 16px; border-radius: var(--border-radius-pill); border: 1.5px solid var(--border-color); } .phone-slide-label { color: var(--color-brand-light); font-size: 0.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 14px; } .phone-big-number { color: var(--color-white); font-size: 3.2rem; font-weight: 900; margin-bottom: 8px; } .phone-slide-sub { color: #94a3b8; font-size: 0.98rem; margin-bottom: 26px; } .phone-mini-bar-row { display: flex; align-items: flex-end; gap: 11px; height: 80px; } .phone-mini-bar { width: 19px; background-color: var(--color-purple); border-radius: 4px 4px 0 0; } .phone-dots { display: flex; gap: 8px; margin-top: 18px; } .phone-dot { width: 8px; height: 8px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); animation: phoneDotCycle 9s infinite; } .phone-dot-1 { animation-delay: 0s; } .phone-dot-2 { animation-delay: 3s; } .phone-dot-3 { animation-delay: 6s; } @keyframes phoneDotCycle { 0%, 34% { background-color: var(--color-brand-light); width: 20px; border-radius: var(--border-radius-pill); } 34.01%, 100% { background-color: rgba(255, 255, 255, 0.2); width: 8px; border-radius: 50%; } } @media (prefers-reduced-motion: reduce) { .phone-slide, .phone-dot, .phone-decor-item { animation: none !important; } .phone-slide-1 { opacity: 1; } .phone-dot-1 { background-color: var(--color-brand-light); width: 20px; border-radius: var(--border-radius-pill); } } .feedback-actions { display: flex; gap: 10px; } .feedback-btn { padding: 6px 12px; font-size: 0.75rem; font-weight: 800; border: 1.5px solid var(--border-color); border-radius: var(--border-radius-sm); cursor: pointer; } .feedback-btn.action-btn { background-color: var(--color-green); color: white; box-shadow: 1px 2px 0px var(--border-color); } .feedback-btn.outline-btn { background-color: white; color: var(--gray-800); box-shadow: 1px 2px 0px var(--border-color); } .font-sm { font-size: 0.75rem !important; } /* FOOTER */ .landing-footer-bar { background-color: #020617; border-top: 2px solid var(--border-color); padding: 40px 80px 32px 80px; text-align: center; } .landing-footer-bar p { color: var(--gray-500); font-size: 0.85rem; font-weight: 600; } /* Barra de enlaces estilo Duolingo: varias filas de enlaces en mayúsculas, centradas y espaciadas, encima de la línea de copyright. */ .footer-links-nav { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 28px; } .footer-links-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 32px; } .footer-links-row a { color: var(--gray-300); font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; transition: color 0.15s ease; white-space: nowrap; } .footer-links-row a:hover { color: var(--color-brand-light); } @media (max-width: 640px) { .footer-links-row { gap: 10px 20px; } .footer-links-row a { font-size: 0.76rem; } } /* ========================================================================== LANDING MEDIA QUERIES RESPONSIVAS ========================================================================== */ @media (max-width: 1024px) { .landing-hero { padding: 40px; gap: 32px; } .hero-content-row { flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; } .hero-left { align-items: center; text-align: center; max-width: 640px; } .hero-right { justify-content: center; width: 100%; margin-top: 0; } .hero-mascot-visual img { height: 160px; } .hero-title { font-size: 2.5rem; } .google-btn-point-fx { display: none; } .landing-header { padding: 0 40px; } .landing-tracks { padding: 60px 40px; } .landing-ai { padding: 60px 40px; } .ai-showcase { grid-template-columns: 1fr; gap: 40px; text-align: center; } .ai-benefit-item { text-align: left; } .ai-showcase-cta { align-self: center; } .ai-phone-showcase { order: -1; } .calculator-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .landing-nav { display: none; /* Ocultar links de escritorio en móvil */ } .landing-auth-buttons { display: none; /* Se sustituyen por los botones del menú móvil */ } .landing-nav-toggle { display: flex; /* Mostrar botón hamburguesa */ } .landing-mobile-nav { display: flex; /* Habilitar el panel (se despliega con .open) */ } .landing-header { padding: 0 20px; } .landing-hero { padding: 40px 20px; } .hero-title { font-size: 2.2rem; } .hero-mascot-visual img { height: 130px; } .landing-tracks { padding: 60px 20px; } .tracks-intro h2 { font-size: 2rem; } .tracks-closing-line { font-size: 2rem; } .landing-ai { padding: 60px 20px; } .phone-mockup { width: 300px; height: 600px; } .ai-intro h2 { font-size: 2rem; } .landing-footer-bar { padding: 24px 20px; } } /* BANNERS DE MÓDULOS EN EL CAMINO */ .path-module-header { background-color: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); padding: 20px 24px; margin: 40px auto 24px auto; max-width: 420px; text-align: center; box-shadow: var(--neo-shadow-sm); position: relative; z-index: 10; } .path-module-header h3 { font-size: 1.15rem; font-weight: 800; color: var(--text-primary); margin-bottom: 6px; } .path-module-header p { font-size: 0.85rem; color: var(--text-muted); } /* CONTADORES INTERACTIVOS */ #lives-container { cursor: pointer; transition: transform 0.1s; } #lives-container:hover { transform: scale(1.05); } /* MODAL DE LA TIENDA UNIFICADA */ .store-modal-container { background-color: var(--bg-primary); width: 100vw; height: 100vh; max-width: none; max-height: none; border: none; border-radius: 0; box-shadow: none; padding: 60px 24px; position: relative; display: flex; flex-direction: column; gap: 24px; animation: zoomIn 0.25s ease; color: var(--text-primary); overflow-y: auto; } .close-store-btn { position: absolute; top: 30px; right: 40px; background: none; border: none; font-size: 2rem; font-weight: 800; cursor: pointer; color: var(--text-muted); z-index: 100; } .close-store-btn:hover { color: var(--text-primary); } .store-header { text-align: center; margin-bottom: 10px; } .store-crown-icon { font-size: 3rem; display: block; margin-bottom: 8px; filter: drop-shadow(2px 2px 0 var(--border-color)); } .store-header h2 { font-size: 1.8rem; font-weight: 800; margin-bottom: 6px; } .store-header p { font-size: 0.95rem; color: var(--text-muted); } /* Tarjetas de alertas de estado */ .store-alert-card { border: 2px solid var(--border-color); border-radius: var(--border-radius-md); padding: 16px; display: flex; gap: 16px; align-items: center; text-align: left; } #store-alert-lives { background-color: #fef2f2; border-color: #fca5a5; color: #991b1b; } #store-alert-limit { background-color: #fffbeb; border-color: #fcd34d; color: #92400e; } .alert-icon { font-size: 2rem; } .alert-text h4 { font-weight: 800; margin-bottom: 4px; } .alert-text p { font-size: 0.85rem; line-height: 1.4; opacity: 0.9; } .store-section { border-top: 2px dashed var(--gray-200); padding-top: 20px; margin-top: 8px; text-align: left; } .store-section h3 { font-size: 1.1rem; font-weight: 800; margin-bottom: 16px; color: var(--text-primary); } /* Grilla de packs de vidas */ .lives-packs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .pack-card { background: var(--bg-card); border: 2px solid var(--border-color); border-radius: var(--border-radius-md); padding: 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; box-shadow: var(--neo-shadow-sm); transition: transform 0.1s; } .pack-card.popular { border-color: var(--color-purple); box-shadow: 0 4px 0 var(--color-purple); transform: scale(1.03); } .pack-badge { position: absolute; top: -10px; background-color: var(--color-purple); color: white; font-size: 0.65rem; font-weight: 800; padding: 2px 8px; border-radius: var(--border-radius-lg); border: 1.5px solid var(--border-color); text-transform: uppercase; } .pack-qty { font-weight: 800; font-size: 1.05rem; } .pack-price { font-size: 1.15rem; font-weight: 800; color: var(--color-green); } .pack-card button { width: 100%; padding: 8px 12px !important; font-size: 0.85rem !important; } /* Grilla de opciones premium */ .premium-options-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .premium-option-card-store { background-color: var(--gray-900); border: 2px solid var(--gray-800); border-radius: var(--border-radius-lg); padding: 40px 32px; position: relative; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .premium-option-card-store:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0,0,0,0.4); border-color: var(--gray-700); } .premium-option-card-store.lifetime { border: 2px solid var(--color-yellow); box-shadow: 0 10px 30px rgba(245, 158, 11, 0.15); transform: scale(1.03); z-index: 2; } .premium-option-card-store.lifetime:hover { transform: translateY(-5px) scale(1.03); box-shadow: 0 15px 35px rgba(245, 158, 11, 0.25); } .lifetime-badge { position: absolute; top: -14px; right: 28px; background-color: var(--color-yellow); color: var(--bg-primary); font-size: 0.8rem; font-weight: 800; padding: 6px 16px; border-radius: var(--border-radius-lg); text-transform: uppercase; letter-spacing: 0.05em; box-shadow: 0 4px 10px rgba(245,158,11,0.3); border: none; } .premium-option-card-store h4 { font-size: 1.8rem; font-weight: 800; margin: 0 0 8px 0; color: var(--text-primary); } .option-desc { color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; margin: 0 0 24px 0; min-height: 48px; } .option-price { font-size: 2.6rem; font-weight: 800; color: var(--text-primary); margin-bottom: 32px; } .option-price span { font-size: 1rem; color: var(--text-muted); font-weight: 400; } .premium-option-card-store button { width: 100%; padding: 16px !important; border-radius: var(--border-radius-md) !important; font-weight: 700 !important; font-size: 1rem !important; cursor: pointer; background-color: var(--color-purple); color: var(--color-white); border: 1px solid var(--color-purple); transition: background-color 0.2s, transform 0.1s; } .premium-option-card-store button:hover { background-color: var(--color-purple-hover); border-color: var(--color-purple-hover); } .premium-option-card-store.lifetime button { background-color: var(--color-yellow) !important; color: var(--bg-primary) !important; border: 1px solid var(--color-yellow) !important; box-shadow: none !important; } .premium-option-card-store.lifetime button:hover { background-color: var(--color-gold) !important; border-color: var(--color-gold) !important; } @media (max-width: 580px) { .lives-packs-grid { grid-template-columns: 1fr; } .premium-options-grid { grid-template-columns: 1fr; } .pack-card.popular { transform: scale(1); } } /* ========================================================================== DASHBOARD PREMIUM ELEGANTE Y OSCURO (REDISEÑO SOBRIO) ========================================================================== */ #app-dashboard-view { --bg-primary: #090d16; --bg-card: var(--gray-900); --text-primary: var(--gray-100); --text-muted: var(--text-muted); --border-color: var(--gray-800); --border-width: 1px; --neo-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); --neo-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); background-color: var(--bg-primary); color: var(--text-primary); } [data-theme="light"] #app-dashboard-view { --bg-primary: #f4f6fb; --neo-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); --neo-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); } /* Modificaciones de estructura en Dashboard Oscuro */ #app-dashboard-view .sidebar { background-color: var(--dash-surface); border-right: 1px solid var(--gray-800); } #app-dashboard-view .sidebar-footer { border-top: 1px solid var(--gray-800); } #app-dashboard-view .main-header { background-color: var(--dash-surface); border-bottom: 1px solid var(--gray-800); } #app-dashboard-view .nav-item { border: 1px solid transparent; box-shadow: none !important; color: var(--text-muted); margin-bottom: 8px; transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease !important; } [data-theme="light"] #app-dashboard-view .nav-item:hover { background-color: rgba(15, 23, 42, 0.06) !important; } #app-dashboard-view .nav-item:hover { background-color: rgba(255, 255, 255, 0.1) !important; color: var(--text-primary) !important; transform: scale(1.06) !important; z-index: 10; } #app-dashboard-view .nav-item.active { background-color: var(--color-purple) !important; color: white !important; border-color: var(--color-purple) !important; } #app-dashboard-view .nav-item.pro-nav { background-color: var(--color-gold) !important; border-color: var(--color-gold) !important; color: white !important; } #app-dashboard-view .nav-item.pro-nav.active { background-color: var(--color-gold) !important; } /* Botón "Premium" del menú lateral: mismo estilo plano que el resto de la navegación, solo con un tinte dorado para diferenciarlo sin desentonar. */ #app-dashboard-view .nav-item.nav-item-premium, #app-dashboard-view .nav-item.nav-item-premium.active { background-color: var(--color-gold) !important; border-color: var(--border-color) !important; color: var(--border-color) !important; box-shadow: var(--neo-shadow-sm) !important; } #app-dashboard-view .nav-item.nav-item-premium:hover { background-color: var(--color-gold) !important; color: var(--border-color) !important; } /* Indicadores de cabecera ejecutivos (rediseño más vistoso, con degradados propios por tipo) */ #app-dashboard-view .game-header { background: linear-gradient(135deg, var(--gray-900) 0%, #171325 100%); border: 1px solid var(--gray-800); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } [data-theme="light"] #app-dashboard-view .game-header { background: linear-gradient(135deg, #ffffff 0%, #edf2ff 100%); } /* Estas dos tarjetas usan gradientes con colores fijos oscuros (#172554, #311042) mezclados con variables que sí cambian con el tema, lo que en modo claro generaba un degradado mitad claro / mitad oscuro con texto casi invisible. Se sobreescribe el fondo SOLO en modo claro; el modo oscuro queda intacto. */ [data-theme="light"] #profile-hero-card { background: linear-gradient(135deg, #edf2ff 0%, #ffffff 55%, #e0e7ff 100%) !important; border-color: rgba(99, 102, 241, 0.25) !important; } /* Panel "Centro de ayuda" y modal "Resumen semanal" (Wrapped): tenían fondos con hex fijos oscuros, así que se quedaban en negro aunque el resto de la app ya estuviera en modo claro. Se sobreescriben solo en modo claro. */ [data-theme="light"] .support-panel { background: linear-gradient(160deg, #ffffff 0%, #edf2ff 100%) !important; border-color: var(--gray-800) !important; } [data-theme="light"] .support-panel-header { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.06)) !important; } [data-theme="light"] .support-panel-title, [data-theme="light"] .support-home-hero h4, [data-theme="light"] .support-shortcut-title, [data-theme="light"] .support-faq-item summary, [data-theme="light"] .support-report-textarea { color: var(--text-primary) !important; } [data-theme="light"] .support-shortcut-card, [data-theme="light"] .support-message-item, [data-theme="light"] .support-faq-item { background: rgba(15, 23, 42, 0.035) !important; } [data-theme="light"] .support-message-empty { background: rgba(15, 23, 42, 0.02) !important; } [data-theme="light"] .support-panel-tabbar { background: rgba(15, 23, 42, 0.02) !important; } [data-theme="light"] .support-panel-close:hover, [data-theme="light"] .wrapped-modal-close:hover { color: var(--text-primary) !important; } [data-theme="light"] .wrapped-modal-card { background: linear-gradient(165deg, #edf2ff 0%, #ffffff 50%, #e0e7ff 100%) !important; border-color: var(--gray-700) !important; } [data-theme="light"] .wrapped-modal-title, [data-theme="light"] .wrapped-stat-value, [data-theme="light"] .wrapped-month-box strong { color: var(--text-primary) !important; } [data-theme="light"] .wrapped-stat-box, [data-theme="light"] .wrapped-month-box { background: rgba(15, 23, 42, 0.045) !important; } [data-theme="light"] .active-course-banner { background: linear-gradient(135deg, #1e1b4b 0%, #0f172a 100%) !important; border: 1px solid #312e81 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; padding: 24px !important; border-radius: var(--border-radius-ml) !important; } .active-course-banner h2 { color: #ffffff !important; font-weight: 800 !important; text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important; } .active-course-banner p { color: #cbd5e1 !important; } .active-course-banner span { color: #a5b4fc !important; } #app-dashboard-view .stat-badge, #app-dashboard-view .xp-container { background: linear-gradient(145deg, var(--gray-900), var(--gray-850)); border: 1px solid var(--gray-800); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); padding: 8px 16px 8px 12px; font-size: 0.9rem; font-weight: 600; border-radius: var(--border-radius-pill); color: var(--gray-100); display: flex; align-items: center; gap: 9px; height: 44px; transition: all 0.2s ease; } #app-dashboard-view .stat-badge .stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 1rem; } #app-dashboard-view .streak-badge { border-color: rgba(245, 158, 11, 0.35); } #app-dashboard-view .streak-badge .stat-icon { background: rgba(245, 158, 11, 0.15); filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5)); } #app-dashboard-view .streak-badge #streak-count { color: var(--color-yellow); font-weight: 800; } #app-dashboard-view .lives-badge { border-color: rgba(239, 68, 68, 0.3); } #app-dashboard-view .stat-badge:hover { background: linear-gradient(145deg, var(--gray-800), var(--gray-900)); border-color: var(--gray-700); cursor: pointer; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); } #app-dashboard-view .xp-container .stat-icon { background: rgba(99, 102, 241, 0.15); filter: drop-shadow(0 0 4px rgba(99, 102, 241, 0.5)); } #app-dashboard-view .xp-bar-bg { background-color: var(--gray-800); border: 1px solid var(--gray-700); height: 9px; border-radius: var(--border-radius-md); width: 180px; overflow: hidden; position: relative; } #app-dashboard-view .xp-bar-fill { background: linear-gradient(90deg, var(--color-purple), var(--color-brand-light)); height: 100%; border-radius: var(--border-radius-md); box-shadow: 0 0 10px rgba(99, 102, 241, 0.6); position: relative; overflow: hidden; } #app-dashboard-view .xp-bar-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); animation: xpShimmer 2.4s ease-in-out infinite; } @keyframes xpShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* Tabla comparativa "Compara en 10 segundos": columna Premium destacada */ .compare-table-wrap { position: relative; } .compare-table-wrap::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-purple), #ffd166, var(--color-purple)); background-size: 200% 100%; animation: comparePremiumShine 4s linear infinite; } @keyframes comparePremiumShine { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } .compare-table-row { transition: background-color 0.2s ease; } .compare-table-row:hover { background-color: rgba(99, 102, 241, 0.07) !important; } .compare-premium-cell { background: linear-gradient(135deg, rgba(255, 209, 102, 0.16), rgba(255, 209, 102, 0.05)) !important; border-left: 2px solid rgba(255, 209, 102, 0.45) !important; box-shadow: inset 0 0 18px rgba(255, 209, 102, 0.06); } .compare-premium-check { text-shadow: 0 0 10px rgba(16, 185, 129, 0.65); font-weight: 800; } .compare-premium-pill { display: inline-block; background: rgba(255, 209, 102, 0.16); border: 1px solid rgba(255, 209, 102, 0.4); padding: 4px 12px; border-radius: var(--border-radius-lg); } .compare-best-value-badge { display: inline-flex; align-items: center; background: linear-gradient(135deg, #ffd166, #f5a623); color: #3a2600; font-size: 0.62rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(245, 166, 35, 0.45); margin-bottom: 6px; } #app-dashboard-view .hearts-row { display: flex; align-items: center; gap: 4px; font-size: 1.3rem; cursor: pointer; transition: transform 0.2s ease; } #app-dashboard-view .hearts-row:hover { transform: translateY(-1px); } #app-dashboard-view .stat-label { color: var(--text-muted); font-weight: 500; } #app-dashboard-view .stat-val { color: var(--gray-100); font-weight: 700; } /* Quitar estilo neobrutalista de botones */ #app-dashboard-view .mimo-btn { box-shadow: none !important; border-width: 1px !important; transform: none !important; border-color: var(--border-color) !important; font-weight: 600; transition: all 0.2s ease; } #app-dashboard-view .mimo-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2) !important; } #app-dashboard-view .mimo-btn:active { transform: translateY(1px); } #app-dashboard-view .primary-btn { background-color: var(--color-purple); color: white; border-color: var(--color-purple) !important; } #app-dashboard-view .primary-btn:hover { background-color: var(--color-purple-hover); } #app-dashboard-view .secondary-btn { background-color: var(--gray-800); color: var(--gray-100); border-color: var(--gray-700) !important; } #app-dashboard-view .secondary-btn:hover { background-color: var(--gray-700); } /* Modales de la Tienda de Vidas y planes */ #app-dashboard-view .store-modal-container { background-color: var(--dash-surface); border: 1px solid var(--gray-800); box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7); border-radius: var(--border-radius-lg); } #app-dashboard-view .pack-card { background-color: var(--gray-900); border: 1px solid var(--gray-800); box-shadow: none; transition: all 0.2s; } #app-dashboard-view .pack-card:hover { border-color: var(--color-purple); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(99, 102, 241, 0.1); } #app-dashboard-view .premium-option-card-store { background-color: var(--gray-900); border: 1px solid var(--gray-800); box-shadow: none; transition: all 0.2s; } #app-dashboard-view .premium-option-card-store:hover { border-color: var(--color-gold); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(217, 119, 6, 0.1); } #app-dashboard-view .premium-option-card-store.lifetime { border-color: var(--color-yellow); background-color: rgba(245, 158, 11, 0.02); } #app-dashboard-view .lifetime-badge { border: 1px solid var(--color-yellow); box-shadow: none; } #app-dashboard-view .store-alert { background-color: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.2); color: var(--color-brand-soft); } #app-dashboard-view .store-alert-red { background-color: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.2); color: #fca5a5; } /* CURRICULUM ELEGANTE Y OSCURO */ .curriculum-container { max-width: 840px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 32px; } /* ========================================================================== CABECERA DE MÓDULO (etiqueta + título + barra de progreso real del módulo) ========================================================================== */ .module-section-header { margin: 36px 0 22px 0; } .module-section-header .module-eyebrow { display: block; font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .module-section-header h3 { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); margin: 0 0 12px 0; font-family: 'Outfit', sans-serif; } /* Contenedor que agrupa la cabecera de cada módulo con sus lecciones, para que el nivel se lea como una secuencia de bloques claros y no como una lista continua sin cortes. Fondo neutro, sin color de marca. */ .module-group { background-color: rgba(255, 255, 255, 0.02); border: 1px solid var(--gray-800); border-radius: var(--border-radius-xl); padding: 26px 26px 6px 26px; margin-bottom: 28px; } .module-group .module-section-header { margin-top: 0; } .module-group .lesson-list-rows { margin-bottom: 0; } /* Resumen de progreso del nivel: se destaca como una franja propia por encima de los módulos, en vez de flotar suelta sobre el fondo. */ .level-progress-row { background-color: rgba(255, 255, 255, 0.03); border: 1px solid var(--gray-800); border-radius: var(--border-radius-lg); padding: 14px 20px; } .module-progress-row { display: flex; align-items: center; gap: 14px; } .module-progress-label { font-size: 0.85rem; font-weight: 700; white-space: nowrap; } .module-progress-track { flex: 1; max-width: 320px; height: 10px; background-color: var(--gray-800); border-radius: var(--border-radius-pill); overflow: hidden; } .module-progress-fill { height: 100%; background-color: var(--color-green); border-radius: var(--border-radius-pill); transition: width 0.4s ease; } /* ========================================================================== LISTA DE LECCIONES (tarjetas + indicador de progreso numerado) Cada tarjeta usa el color del nivel (--node-color) para el icono temático y el estado (actual/completada/bloqueada), con la estética neobrutalista propia de la web: bordes marcados y sombra dura que "se aplasta" al clicar. A la izquierda, un indicador numerado conectado por una línea muestra el avance paso a paso dentro del módulo. ========================================================================== */ .lesson-list-rows { display: grid; grid-template-columns: 40px 1fr; column-gap: 18px; row-gap: 28px; margin-bottom: 36px; } .lesson-stepper-cell { grid-column: 1; display: flex; flex-direction: column; align-items: center; } .lesson-stepper-dot { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 800; color: var(--gray-500); background-color: var(--gray-900); border: 2.5px solid var(--gray-700); flex-shrink: 0; } .lesson-stepper-dot.completed { color: var(--color-green); border-color: var(--color-green); background-color: rgba(16, 185, 129, 0.1); } .lesson-stepper-dot.completed svg path { stroke: var(--color-green); } .lesson-stepper-dot.current { color: var(--color-white); border-color: var(--node-color, var(--color-purple)); background-color: var(--node-color, var(--color-purple)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--node-color, var(--color-purple)) 25%, transparent); } .lesson-stepper-line { flex: 1; width: 3px; min-height: 20px; background-color: var(--gray-700); margin-top: 6px; } .lesson-stepper-line.completed { background-color: var(--color-green); } .lesson-stepper-cell.is-last .lesson-stepper-line { visibility: hidden; } .lesson-list-row { background-color: var(--gray-900); border: 2.5px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 20px 24px; min-height: 34px; display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; box-shadow: 4px 4px 0px var(--border-color); transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } .lesson-list-row:not(.locked-row):hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0px var(--border-color); } .lesson-list-row:not(.locked-row):active { transform: translate(1px, 1px); box-shadow: 2px 2px 0px var(--border-color); } .lesson-list-row.current-row { border-color: var(--node-color, var(--color-purple)); box-shadow: 4px 4px 0px var(--node-color, var(--color-purple)); } .lesson-list-row.current-row:not(.locked-row):hover { box-shadow: 7px 7px 0px var(--node-color, var(--color-purple)); } .lesson-list-row.completed-row { background-color: rgba(16, 185, 129, 0.05); } .lesson-list-row.locked-row { opacity: 0.55; cursor: not-allowed; border-style: dashed; box-shadow: none; } .lesson-row-left { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; } .lesson-row-icon { background-color: var(--node-color, var(--gray-800)); width: 56px; height: 56px; border-radius: var(--border-radius-lg); display: flex; align-items: center; justify-content: center; border: 2.5px solid var(--border-color); flex-shrink: 0; } .lesson-row-icon svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)); } .lesson-list-row.locked-row .lesson-row-icon { background-color: var(--gray-800) !important; } .lesson-list-row.locked-row .lesson-row-icon svg { filter: grayscale(1) opacity(0.6); } .lesson-row-info { flex: 1; min-width: 0; } .lesson-status-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .lesson-status-tag svg { width: 11px; height: 11px; } .lesson-status-tag.completed { color: var(--color-green); } .lesson-status-tag.current { color: var(--node-color, var(--color-purple)); } .lesson-status-tag.locked { color: var(--gray-500); } .lesson-status-tag.locked svg path, .lesson-status-tag.locked svg rect { fill: var(--gray-500); } .lesson-row-info h4 { font-size: 0.98rem; font-weight: 700; color: var(--gray-100); margin-bottom: 2px; word-wrap: break-word; overflow-wrap: break-word; } .lesson-row-info p { font-size: 0.8rem; color: var(--text-muted); } .lesson-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 128px; padding: 9px 16px; border-radius: var(--border-radius-pill); font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; border: 2px solid transparent; flex-shrink: 0; white-space: nowrap; } .lesson-action-btn svg { width: 13px; height: 13px; } .lesson-action-btn.completed { background-color: rgba(16, 185, 129, 0.12); color: #34d399; border-color: rgba(16, 185, 129, 0.3); } .lesson-action-btn.completed svg path { stroke: #34d399; } .lesson-action-btn.current { background-color: var(--node-color, var(--color-purple)); color: var(--color-white); border-color: var(--border-color); box-shadow: 2px 2px 0px var(--border-color); animation: lessonPillPulse 1.8s ease-in-out infinite; } .lesson-action-btn.locked { background-color: rgba(255, 255, 255, 0.02); color: var(--gray-600); border-color: var(--gray-800); } .lesson-action-btn.locked svg path, .lesson-action-btn.locked svg rect { fill: var(--gray-600); } @keyframes lessonPillPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* Modaciones de la Calculadora de Interés */ #app-dashboard-view .calculator-grid { grid-template-columns: 1.2fr 1fr; gap: 30px; } #app-dashboard-view .calc-inputs { background-color: var(--gray-900); border: 1px solid var(--gray-800); box-shadow: none; } #app-dashboard-view .calc-results { background-color: var(--dash-surface); border: 1px solid var(--gray-800); box-shadow: none; } #app-dashboard-view .result-card { background-color: var(--gray-900); border: 1px solid var(--gray-800); box-shadow: none; } #app-dashboard-view .chart-container { background-color: var(--gray-900); border: 1px solid var(--gray-800); box-shadow: none; } #app-dashboard-view .chart-bar { background-color: rgba(99, 102, 241, 0.2); } #app-dashboard-view .chart-bar-fill { background-color: var(--color-green); } /* Logros en perfil */ #app-dashboard-view .achievement-card { background-color: var(--gray-900); border: 1px solid var(--gray-800); box-shadow: none; } #app-dashboard-view .achievement-card.locked { background-color: var(--dash-surface); opacity: 0.5; } /* Modal de lección interactivo oscuro (Pantalla Completa) */ .lesson-modal-overlay { padding: 0; background-color: var(--dash-surface); } .lesson-modal-container { background-color: var(--dash-surface); border: none; box-shadow: none; width: 100%; max-width: none; height: 100vh; border-radius: 0; position: relative; /* Para el posicionamiento absoluto del panel lateral */ } .lesson-modal-header { background-color: var(--gray-900); border-bottom: 1px solid var(--gray-800); color: var(--gray-200); } .close-lesson-btn { color: var(--text-muted); } .close-lesson-btn:hover { color: var(--text-primary); } .lesson-modal-lives { color: var(--gray-200); } .lesson-modal-body { flex-grow: 1; padding: 32px 24px 60px 24px; margin-top: 0px; overflow-y: auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; background-color: var(--dash-surface); } .exercise-theory { background-color: var(--gray-900); border: 1px solid var(--gray-800); color: var(--gray-200); } .exercise-question h3 { color: var(--gray-100); } .option-btn { background-color: var(--gray-900); border: 1px solid var(--gray-800); color: var(--gray-100); box-shadow: none; } .option-btn:hover { background-color: var(--gray-800); border-color: var(--gray-700); } .option-btn.selected { background-color: rgba(99, 102, 241, 0.1); border-color: var(--color-purple); box-shadow: 0 0 10px rgba(99, 102, 241, 0.25); } .option-btn.selected .option-letter { background-color: var(--color-purple); border-color: var(--color-purple); color: white; } .option-letter { background-color: var(--gray-800); border: 1px solid var(--gray-700); color: var(--gray-100); } .lesson-modal-footer { background-color: var(--gray-900); border-top: 1px solid var(--gray-800); } .lesson-modal-footer .feedback-title { font-size: 1.25rem; } /* Animación sutil de entrada para la pregunta y opciones */ @keyframes slideUpSubtle { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .slide-up-subtle { animation: slideUpSubtle 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards; } /* Panel lateral de lección (Flotante a la esquina superior izquierda) */ .lesson-desktop-grid { display: block; width: 100%; margin: 0 auto; } .lesson-main-content { width: 100%; max-width: 860px; margin: 0 auto; } .lesson-sidebar-panel { display: flex; flex-direction: column; gap: 16px; position: absolute; top: 100px; left: 40px; width: 280px; z-index: 10; } .lesson-right-panel { display: flex; flex-direction: column; gap: 16px; position: absolute; top: 100px; right: 40px; width: 280px; z-index: 10; } /* Hueco reservado para el anuncio de Adsterra en el panel derecho de la lección. En cuanto se pegue el script real dentro de #ad-slot-lesson-sidebar, este aviso se puede quitar (o dejarlo como estado de "cargando" mientras el anuncio termina de renderizar). */ .ad-slot-placeholder { display: flex !important; flex-direction: column; gap: 10px; } .ad-slot-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); font-weight: 700; } .ad-slot-empty-box { min-height: 380px; border: 1.5px dashed var(--gray-700); border-radius: var(--border-radius-md); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-size: 0.8rem; color: var(--text-muted); background: rgba(255, 255, 255, 0.02); } /* Ilustraciones SVG de las escenas interactivas (lecciones tipo historia) */ .scene-illustration { border-radius: var(--border-radius-ml); overflow: hidden; margin: 4px 0 22px 0; box-shadow: var(--shadow-card); border: 1px solid rgba(139, 92, 246, 0.25); line-height: 0; } .scene-illustration svg { display: block; width: 100%; height: auto; } @media (max-width: 1400px) { .lesson-sidebar-panel, .lesson-right-panel { display: none !important; } } /* Adaptación para pantallas de portátiles o resoluciones más bajas para evitar solapamientos */ @media (max-width: 1560px) { .lesson-sidebar-panel { display: flex; flex-direction: column; gap: 16px; position: absolute; top: 100px; left: 40px; width: 280px; z-index: 10; } .lesson-right-panel { display: flex; flex-direction: column; gap: 16px; position: absolute; top: 100px; right: 40px; width: 280px; z-index: 10; } @media (max-width: 1400px) { .lesson-sidebar-panel, .lesson-right-panel { display: none !important; } } .lesson-main-content { max-width: 680px; } } .sidebar-widget-card { background-color: var(--gray-900); border: 1px solid var(--gray-800); border-radius: var(--border-radius-md); padding: 16px; /* Más compacto */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); } /* Partículas de confeti optimizadas con GPU */ @keyframes confettiFall { 0% { transform: translateY(-5vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(360deg); opacity: 0; } } .confetti-particle { position: fixed; top: -40px; /* Asegura que empiece arriba en el viewport */ pointer-events: none; z-index: 2000; animation: confettiFall 2.2s linear forwards; } /* ========================================================================== PESTAÑA DE RECURSOS VIP - ESTILOS COMPLEMENTARIOS ========================================================================== */ .recursos-container { display: grid; grid-template-columns: 1.2fr 1fr; gap: 30px; margin-top: 20px; } .vip-section-card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 26px; position: relative; overflow: hidden; box-shadow: var(--neo-shadow-sm); } .recurso-blur-overlay { display: none; } .vip-section-card.locked-recurso .recurso-blur-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(9, 13, 22, 0.82); backdrop-filter: blur(8px); z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; } .overlay-content { max-width: 330px; display: flex; flex-direction: column; align-items: center; } .overlay-content span { font-size: 2.5rem; margin-bottom: 12px; display: block; } .overlay-content h4 { font-size: 1.2rem; font-weight: 800; color: var(--gray-100); margin-bottom: 8px; } .overlay-content p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 20px; line-height: 1.5; } .overlay-content button { font-size: 0.85rem !important; padding: 10px 20px !important; } /* Simulador VIP */ .simulador-vip-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .simulador-vip-header h3 { font-size: 1.25rem; font-weight: 800; color: var(--gray-100); } .vip-pill { background-color: var(--color-yellow); color: #000; font-size: 0.7rem; font-weight: 800; padding: 3px 10px; border-radius: var(--border-radius-md); text-transform: uppercase; } .simulador-form { display: flex; flex-direction: column; gap: 16px; } .form-group-vip { display: flex; flex-direction: column; gap: 6px; } .form-group-vip label { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); } .form-group-vip select, .form-group-vip input { background-color: var(--dash-surface); border: 1px solid var(--gray-800); border-radius: var(--border-radius-sm); padding: 12px; color: var(--gray-100); font-size: 0.9rem; outline: none; transition: border-color 0.2s; } .form-group-vip select:focus, .form-group-vip input:focus { border-color: var(--color-purple); } .sim-results { margin-top: 24px; background-color: var(--dash-surface); border: 1px solid var(--gray-800); border-radius: var(--border-radius-sm); padding: 18px; } .sim-result-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 0.9rem; color: var(--text-muted); } .sim-result-row span:last-child { color: var(--gray-100); font-weight: 600; } .sim-result-row:last-child { margin-bottom: 0; border-top: 1px solid var(--gray-800); padding-top: 10px; font-weight: 700; } .sim-result-row:last-child span:last-child { color: var(--color-purple); font-size: 1.1rem; } /* Lista de Plantillas */ .templates-list { display: flex; flex-direction: column; gap: 16px; } .template-item { background-color: var(--dash-surface); border: 1px solid var(--gray-800); border-radius: var(--border-radius-md); padding: 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .template-info h4 { font-size: 0.95rem; font-weight: 700; color: var(--gray-100); margin-bottom: 4px; } .template-info p { font-size: 0.8rem; color: var(--text-muted); } .template-item button { padding: 8px 14px !important; font-size: 0.8rem !important; } /* Certificado */ .certificate-preview-box { border: 2px dashed var(--gray-800); border-radius: var(--border-radius-md); padding: 24px; text-align: center; background-color: rgba(255, 255, 255, 0.01); } .certificate-border { border: 1px solid var(--color-gold); padding: 20px; border-radius: var(--border-radius-sm); background-color: var(--dash-surface); } .certificate-border h4 { font-family: 'Outfit', sans-serif; color: var(--color-gold); font-size: 1.1rem; margin-bottom: 12px; letter-spacing: 0.05em; } .certificate-border p { font-size: 0.8rem; color: var(--text-muted); } .certificate-name { font-size: 1.35rem; font-weight: 800; color: var(--gray-100); margin: 14px 0; letter-spacing: 0.02em; } @media (max-width: 800px) { .recursos-container { grid-template-columns: 1fr; } } /* Correcciones de visibilidad y color en tarjetas de precios del panel */ #app-dashboard-view .price-card { background-color: var(--gray-900); border-color: var(--gray-800); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important; color: var(--gray-100); border-width: 1px; } #app-dashboard-view .price-card.premium-card { background-color: var(--dash-premium-bg); /* Deep purple background en oscuro, lavanda claro en modo claro */ border-color: var(--color-purple); box-shadow: 0 8px 30px rgba(99, 102, 241, 0.2) !important; } #app-dashboard-view .price-card.premium-card:last-child { background-color: var(--gray-850); /* Slate 900 background */ border-color: var(--color-yellow) !important; /* Gold border */ box-shadow: 0 8px 30px rgba(245, 158, 11, 0.15) !important; } #app-dashboard-view .card-desc { color: var(--text-muted) !important; } #app-dashboard-view .price-amount .period { color: var(--text-muted) !important; } #app-dashboard-view .features-list li { color: var(--gray-100) !important; } #app-dashboard-view .features-list li.disabled { color: var(--gray-600) !important; } #app-dashboard-view .features-list li span { color: var(--color-green) !important; /* Green checkmarks */ } #app-dashboard-view .features-list li.disabled span { color: var(--color-red) !important; /* Red crosses */ } #app-dashboard-view .popular-ribbon { background-color: var(--color-yellow); border-color: var(--color-yellow); color: #000; font-weight: 800; box-shadow: none; } #app-dashboard-view .price-card.premium-card .primary-btn { background-color: var(--color-purple) !important; color: white !important; box-shadow: none !important; border-color: var(--color-purple) !important; } #app-dashboard-view .price-card.premium-card .primary-btn:hover { background-color: var(--color-purple-hover) !important; } #app-dashboard-view .price-card.premium-card:last-child .primary-btn { background-color: var(--color-yellow) !important; color: #000 !important; border-color: var(--color-yellow) !important; font-weight: 800; } #app-dashboard-view .price-card.premium-card:last-child .primary-btn:hover { background-color: var(--color-gold) !important; } /* ========================================================================== ANULACIONES RESPONSIVAS PARA EL PANEL DE CONTROL OSCURO ========================================================================== */ @media (max-width: 768px) { #app-dashboard-view .sidebar { border-top: 1px solid var(--gray-800) !important; border-bottom: none !important; border-left: none !important; border-right: none !important; background-color: var(--dash-surface); } #app-dashboard-view .nav-item.active { border-bottom: none !important; border-radius: var(--border-radius-sm) !important; background-color: var(--color-purple) !important; } #app-dashboard-view .calculator-grid { grid-template-columns: 1fr; gap: 20px; } #app-dashboard-view .curriculum-container { padding: 14px; gap: 20px; } #app-dashboard-view .module-section-header h3 { font-size: 1.15rem; } #app-dashboard-view .lesson-list-row { padding: 10px 14px; border-radius: var(--border-radius-sm); } #app-dashboard-view .module-group { padding: 16px 16px 4px 16px; } #app-dashboard-view .lesson-row-icon { width: 36px; height: 36px; font-size: 1.1rem; border-radius: var(--border-radius-sm); } #app-dashboard-view .lesson-row-info h4 { font-size: 0.82rem; } #app-dashboard-view .lesson-row-info p { font-size: 0.75rem; } #app-dashboard-view .lesson-action-btn { min-width: 0; padding: 4px 8px; font-size: 0.65rem; } } @media (max-width: 480px) { #app-dashboard-view .stat-badge, #app-dashboard-view .xp-container { padding: 6px 10px; font-size: 0.8rem; gap: 4px; height: 36px; } #app-dashboard-view .xp-bar-bg { width: 110px; } } /* SWITCH DE FACTURACIÓN (MENSUAL / ANUAL) ESTILO MIMO.ORG */ .pricing-toggle-wrapper { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; margin-top: 10px; } .toggle-savings-badge { color: var(--color-gold-bright); font-weight: 700; font-size: 0.85rem; margin-bottom: 14px; background-color: rgba(245, 158, 11, 0.1); border: 1.5px solid rgba(245, 158, 11, 0.25); padding: 6px 14px; border-radius: var(--border-radius-lg); display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); animation: pricingTogglePulse 2s infinite alternate; } @keyframes pricingTogglePulse { 0% { transform: scale(1); } 100% { transform: scale(1.02); } } .pricing-toggle-pill { display: inline-flex; background-color: var(--gray-900); border: 2.5px solid var(--color-purple); /* Borde violeta/indigo estilo Mimo */ padding: 3px; border-radius: var(--border-radius-pill); position: relative; width: 290px; height: 52px; box-sizing: border-box; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.2); } .toggle-slider { position: absolute; top: 3px; left: 3px; width: 140px; height: 40px; background-color: var(--color-purple); /* Selector violeta/indigo estilo Mimo */ border-radius: var(--border-radius-pill); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 1; box-shadow: 0 3px 8px rgba(99, 102, 241, 0.4); } .pricing-toggle-pill.yearly-active .toggle-slider { left: 141px; } .toggle-label { flex: 1; text-align: center; line-height: 40px; font-weight: 700; font-size: 0.95rem; color: var(--text-muted); position: relative; z-index: 2; user-select: none; transition: color 0.3s ease; font-family: 'Outfit', sans-serif; } .toggle-label.active { color: var(--color-white); } /* REJILLA DE CURSOS / TEMAS ESTILO MIMO.ORG */ .courses-grid { margin-top: 32px; } .course-card { background-color: var(--gray-900); border: 1px solid var(--gray-800); border-radius: var(--border-radius-ml); overflow: hidden; display: flex; flex-direction: column; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .course-card.active:hover { transform: translateY(-6px); border-color: var(--color-purple); box-shadow: 0 12px 24px rgba(99, 102, 241, 0.15); } .course-card.locked { opacity: 0.65; } .course-card.locked:hover { transform: translateY(-2px); border-color: var(--gray-700); } .course-card-image { position: relative; overflow: hidden; } .course-card-image::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(17,24,39,0.9) 100%); z-index: 1; } .course-card-content { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } /* ========================================================================== TARJETAS DE CONTENIDO: mismo lenguaje visual que el resto de la app (Outfit, superficie oscura sobria, sombra sólida "Mimo 3D" y el color propio de cada área/nivel mediante var(--card-accent), fijado por tarjeta en línea a partir del color real de su icono) ========================================================================== */ .course-card { --card-accent: var(--color-purple); background-color: var(--dash-surface) !important; border: 1.5px solid rgba(255, 255, 255, 0.06) !important; border-radius: var(--border-radius-xl) !important; box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.3) !important; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s ease, box-shadow 0.25s ease !important; padding: 0 !important; } .course-card.active:hover { transform: translateY(-4px) !important; border-color: var(--card-accent) !important; box-shadow: 0px 9px 0px var(--card-accent) !important; } .course-card-image { height: auto !important; min-height: 80px !important; background: transparent !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 24px 24px 16px 24px !important; position: relative !important; overflow: hidden !important; } .course-card-image::after { display: none !important; /* Quitar gradiente de fade original */ } /* Insignia a color propia del nivel (el SVG ya trae su propio fondo, sombra y forma) */ .course-card-image > span:not([style*="absolute"]), .course-card-image > svg { width: 48px !important; height: 48px !important; background: transparent !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; font-size: 1.7rem !important; flex-shrink: 0 !important; margin: 0 !important; position: relative !important; z-index: 1 !important; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important; } .course-card.active:hover .course-card-image > svg { transform: scale(1.12) rotate(-4deg) !important; } /* Centrar SVGs dentro del contenedor */ .course-card-image svg { margin: 0 !important; overflow: visible !important; } /* Badge de "ACTIVO" en la esquina superior derecha */ .course-card-image > span[style*="absolute"] { display: none !important; /* Ocultado a petición: no estaba en el diseño original */ position: static !important; /* Sacar de absoluto para alinearlo flex */ background-color: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; color: var(--color-green) !important; font-size: 0.65rem !important; font-weight: 800 !important; padding: 4px 12px !important; border-radius: var(--border-radius-lg) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; align-items: center !important; gap: 6px !important; } .course-card-image > span[style*="absolute"]::before { content: "" !important; display: inline-block !important; width: 6px !important; height: 6px !important; background-color: var(--color-green) !important; border-radius: 50% !important; box-shadow: 0 0 8px var(--color-green) !important; } .course-card-content { padding: 24px !important; flex-grow: 1 !important; display: flex !important; flex-direction: column !important; justify-content: space-between !important; } /* Subtítulo de Módulo/Categoría */ .course-card-content span[style*="font-size: 0.7rem"], .course-card-content span[style*="color: var(--color-brand-light)"] { color: var(--card-accent) !important; font-size: 0.65rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; margin-bottom: 12px !important; display: block !important; } /* Título de la tarjeta */ .course-card-content h3 { font-family: 'Outfit', sans-serif !important; font-size: 1.2rem !important; font-weight: 800 !important; color: var(--text-primary) !important; margin: 0 0 12px 0 !important; line-height: 1.3 !important; } /* Descripción de la tarjeta */ .course-card-content p { color: var(--text-muted) !important; font-size: 0.85rem !important; line-height: 1.6 !important; margin: 0 0 24px 0 !important; } /* Sección de progreso */ .course-card-footer { margin-top: auto !important; } .course-card-footer > div:first-child { display: flex !important; justify-content: space-between !important; font-family: 'Outfit', sans-serif !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; font-size: 0.68rem !important; color: var(--text-muted) !important; font-weight: 700 !important; margin-bottom: 10px !important; } .course-card-footer > div:first-child span { color: var(--text-muted) !important; } /* Barra de progreso: color propio de la tarjeta, no el verde genérico */ .course-card-footer div[style*="height: 6px"] { height: 6px !important; background-color: var(--border-color) !important; border-radius: var(--border-radius-md) !important; overflow: hidden !important; margin-bottom: 24px !important; border: none !important; } .course-card-footer div[style*="height: 6px"] > div { height: 100% !important; background: var(--card-accent) !important; border-radius: var(--border-radius-md) !important; } /* Botón: tintado con el color propio de la tarjeta, siempre legible sobre fondo oscuro */ .course-card-footer button.mimo-btn.primary-btn { width: 100% !important; background-color: var(--dash-surface) !important; background-color: color-mix(in srgb, var(--card-accent) 20%, var(--dash-surface)) !important; border: 1.5px solid var(--card-accent) !important; color: var(--card-accent) !important; font-family: 'Outfit', sans-serif !important; font-weight: 800 !important; font-size: 0.9rem !important; padding: 13px 20px !important; border-radius: var(--border-radius-md) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; transition: all 0.2s ease !important; cursor: pointer !important; box-shadow: none !important; } .course-card-footer button.mimo-btn.primary-btn::after { content: "→" !important; font-size: 1.1rem !important; font-weight: 700 !important; transition: transform 0.2s ease !important; } .course-card-footer button.mimo-btn.primary-btn:hover { background-color: var(--card-accent) !important; color: var(--dash-surface) !important; transform: translateY(-2px) !important; } .course-card-footer button.mimo-btn.primary-btn:hover::after { transform: translateX(4px) !important; } /* Tarjetas bloqueadas / próximamente */ .course-card.locked { opacity: 0.45 !important; cursor: not-allowed !important; } .course-card.locked:hover { transform: none !important; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: 0px 5px 0px rgba(0, 0, 0, 0.3) !important; } .course-card.locked .course-card-footer button.mimo-btn.primary-btn { background-color: var(--border-color) !important; background-image: none !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: var(--gray-500) !important; cursor: not-allowed !important; box-shadow: none !important; } .course-card.locked .course-card-footer button.mimo-btn.primary-btn::after { display: none !important; } /* Tarjetas completadas: remate visual con el color propio del área/nivel */ .course-card.course-card-completed { border-color: var(--card-accent) !important; } .course-card.course-card-completed .course-card-content h3::after { content: "" !important; display: inline-flex !important; width: 8px !important; height: 8px !important; margin-left: 8px !important; margin-bottom: 2px !important; border-radius: 50% !important; background: var(--card-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent) 25%, transparent) !important; } @media (prefers-reduced-motion: reduce) { .course-card, .course-card-image > svg { transition: none !important; } } /* ========================================================================== DISEÑO PREMIUM PARA LOS LOGROS DEL PERFIL ========================================================================== */ .profile-achievements { background-color: var(--dash-surface) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: var(--border-radius-xl) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3) !important; } .achievement-item { display: flex !important; align-items: center !important; gap: 16px !important; padding: 16px !important; border-radius: var(--border-radius-ml) !important; transition: all 0.3s ease !important; } .achievement-icon { font-size: 1.8rem !important; width: 48px !important; height: 48px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: radial-gradient(circle, var(--dash-surface-hover) 0%, var(--dash-surface) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; flex-shrink: 0 !important; } .achievement-item.completed { background-color: rgba(16, 185, 129, 0.04) !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; } .achievement-item.locked { background-color: rgba(31, 41, 55, 0.2) !important; border: 1px dashed rgba(255, 255, 255, 0.1) !important; opacity: 0.65 !important; } .achievement-item.locked .achievement-icon { background: var(--gray-900) !important; border: 1px dashed rgba(255, 255, 255, 0.1) !important; filter: grayscale(100%) !important; opacity: 0.4 !important; } /* ========================================================================== REJILLA DE INSIGNIAS DE CURSO DEL PERFIL (ESTILO FOTO - ULTRA ELEGANTE) ========================================================================== */ .insignias-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 16px !important; margin-top: 20px !important; } .insignia-card { background-color: rgba(12, 16, 29, 0.7) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border: 1px solid rgba(255, 255, 255, 0.03) !important; border-radius: var(--border-radius-lg) !important; padding: 16px 20px !important; display: flex !important; align-items: center !important; gap: 16px !important; min-height: 106px !important; /* Altura flexible, mitad de largo que una tarjeta de curso */ height: auto !important; box-sizing: border-box !important; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; position: relative !important; overflow: hidden !important; } .insignia-card.unlocked { border: 1px solid rgba(197, 168, 128, 0.3) !important; background: linear-gradient(135deg, rgba(197, 168, 128, 0.06) 0%, rgba(12, 16, 29, 0.98) 100%) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 15px rgba(197, 168, 128, 0.05) !important; } .insignia-card.unlocked:hover { transform: translateY(-4px) !important; border-color: var(--color-gold-champagne) !important; box-shadow: 0 15px 30px rgba(197, 168, 128, 0.22) !important; } /* Efecto brillo reflectante en hover */ .insignia-card.unlocked::before { content: "" !important; position: absolute !important; top: 0 !important; left: -100% !important; width: 50% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent) !important; transform: skewX(-25deg) !important; transition: 0.75s !important; z-index: 1 !important; } .insignia-card.unlocked:hover::before { left: 150% !important; } .insignia-card.locked { opacity: 0.45 !important; background-color: rgba(17, 24, 39, 0.3) !important; border: 1px dashed rgba(255, 255, 255, 0.08) !important; } .insignia-badge-container { width: 52px !important; height: 52px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1.8rem !important; flex-shrink: 0 !important; position: relative !important; z-index: 2 !important; } .insignia-card.unlocked .insignia-badge-container { background: radial-gradient(circle, #29221b 0%, #0d1222 100%) !important; border: 1.5px solid var(--color-gold-champagne) !important; box-shadow: 0 0 15px rgba(197, 168, 128, 0.25) !important; } .insignia-card.locked .insignia-badge-container { background: rgba(31, 41, 55, 0.3) !important; border: 1px dashed rgba(255, 255, 255, 0.08) !important; filter: grayscale(100%) !important; opacity: 0.35 !important; } .insignia-info { display: flex !important; flex-direction: column !important; justify-content: center !important; min-width: 0 !important; z-index: 2 !important; } /* Permitir saltos de línea y visualización de nombres enteros */ .insignia-info h4 { margin: 0 0 6px 0 !important; font-size: 0.88rem !important; font-weight: 700 !important; line-height: 1.3 !important; overflow: visible !important; text-overflow: clip !important; white-space: normal !important; /* Permite saltos de línea naturales */ } .insignia-card.unlocked .insignia-info h4 { color: var(--color-white) !important; font-family: 'Outfit', sans-serif !important; text-shadow: 0 1px 2px rgba(0,0,0,0.5) !important; } .insignia-card.locked .insignia-info h4 { color: var(--gray-600) !important; } .insignia-info p { margin: 0 !important; font-size: 0.68rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; } .insignia-card.unlocked .insignia-info p { color: var(--color-green) !important; /* Verde */ } .insignia-card.locked .insignia-info p { color: var(--gray-700) !important; /* Gris oscuro */ } /* ========================================================================== ESTILOS DE MENÚ LATERAL COLAPSIBLE (SIDEBAR) ========================================================================== */ /* Botón flotante para colapsar/expandir */ .toggle-sidebar-btn { background-color: rgba(31, 41, 55, 0.7) !important; backdrop-filter: blur(4px) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: var(--color-gold-champagne) !important; width: 26px !important; height: 26px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; transition: all 0.3s ease !important; outline: none !important; position: absolute !important; right: -13px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 1000 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important; } .toggle-sidebar-btn:hover { background-color: var(--color-gold-champagne) !important; color: var(--bg-primary) !important; transform: translateY(-50%) scale(1.15) !important; } /* Transiciones suaves en la barra lateral */ .sidebar { transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } .main-content { transition: margin-left 0.4s cubic-bezier(0.16, 1, 0.3, 1), width 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; } /* Comportamiento colapsado en desktop */ @media (min-width: 769px) { .sidebar.collapsed { width: 80px !important; padding: 24px 12px !important; } .sidebar.collapsed .logo-text { display: none !important; } /* El icono del logo (.logo-mark) ya sirve de marca cuando está colapsado */ .sidebar.collapsed .logo-container::after { display: none !important; content: none !important; } .sidebar.collapsed .logo-container { justify-content: center !important; margin-bottom: 30px !important; } .sidebar.collapsed .nav-label { display: none !important; } .sidebar.collapsed .nav-item { justify-content: center !important; padding: 10px 0 !important; width: 46px !important; height: 46px !important; margin: 6px auto !important; border-radius: 50% !important; } .sidebar.collapsed .nav-icon { margin: 0 !important; font-size: 1.15rem !important; width: 30px !important; height: 30px !important; } .sidebar.collapsed .sidebar-footer .info { display: none !important; } .sidebar.collapsed .sidebar-footer .avatar { margin: 0 auto !important; font-size: 1.8rem !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* En colapsado, el botón de ajustes se apila encima del avatar en vez de quedarse a la derecha (donde se salía del ancho de la barra lateral). */ .sidebar.collapsed .user-quick-info { flex-direction: column-reverse !important; justify-content: center !important; align-items: center !important; gap: 10px !important; width: 100% !important; } .sidebar.collapsed .user-quick-info > div:first-child { width: 100% !important; justify-content: center !important; } .sidebar.collapsed #btn-sidebar-settings { margin: 0 auto !important; } .sidebar.collapsed .toggle-sidebar-btn { right: -13px !important; } .sidebar.collapsed .toggle-sidebar-btn .arrow-icon { transform: rotate(180deg) !important; display: inline-block !important; } /* El contenido principal se expande cuando el menú está colapsado */ .sidebar.collapsed ~ .main-content { margin-left: 80px !important; width: calc(100% - 80px) !important; } } /* ========================================================================== TÍTULO MÁS GRANDE Y ELEGANTE PARA LA TIENDA ========================================================================== */ #store-title { font-size: 3.2rem !important; font-family: 'Outfit', sans-serif !important; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; margin-bottom: 12px !important; font-weight: 900 !important; letter-spacing: -0.02em !important; } [data-theme="light"] #store-title { background: linear-gradient(135deg, #1e1b4b 0%, #6366f1 100%) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; } @media (max-width: 768px) { #store-title { font-size: 2.2rem !important; } /* El botón de colapsar no es necesario en móviles */ .toggle-sidebar-btn { display: none !important; } } /* ========================================================================== SECCIÓN DE LIGA DE INVERSORES (RANKING / PODIUM) ========================================================================== */ #tab-ranking .section-header { text-align: center; } .ranking-podium-container { display: flex !important; align-items: flex-end !important; justify-content: center !important; gap: 32px !important; margin: 48px 0 !important; font-family: 'Outfit', sans-serif !important; } .podium-pedestal { display: flex !important; flex-direction: column !important; align-items: center !important; width: 120px !important; position: relative !important; transition: all 0.3s ease !important; } .podium-pedestal.current-user { transform: translateY(-5px) !important; } .podium-avatar-wrapper { position: relative !important; margin-bottom: 12px !important; z-index: 2 !important; } .podium-avatar { font-size: 2.8rem !important; width: 72px !important; height: 72px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: var(--dash-surface-hover) !important; border: 2px solid var(--gray-700) !important; box-shadow: 0 8px 20px rgba(0,0,0,0.3) !important; } .podium-pedestal.rank-1 .podium-avatar { border-color: var(--color-gold-champagne) !important; box-shadow: 0 0 20px rgba(197, 168, 128, 0.4) !important; width: 80px !important; height: 80px !important; font-size: 3.2rem !important; } .podium-medal { position: absolute !important; top: -12px !important; right: -12px !important; font-size: 1.4rem !important; z-index: 3 !important; background-color: var(--bg-primary) !important; border-radius: 50% !important; width: 28px !important; height: 28px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid var(--gray-800) !important; } .podium-name { color: var(--gray-100) !important; font-weight: 700 !important; font-size: 0.88rem !important; margin-bottom: 4px !important; text-align: center !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; width: 100% !important; } .podium-pedestal.current-user .podium-name { color: var(--color-gold-champagne) !important; } .podium-xp { color: var(--text-muted) !important; font-weight: 600 !important; font-size: 0.8rem !important; margin-bottom: 12px !important; } .pedestal-block { width: 100% !important; border-radius: 16px 16px 8px 8px !important; border: 1px solid rgba(255,255,255,0.05) !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; } .pedestal-rank-num { font-size: 2.5rem !important; font-weight: 900 !important; color: rgba(255,255,255,0.15) !important; } .rank-1 .pedestal-block { height: 140px !important; background: linear-gradient(180deg, rgba(197, 168, 128, 0.15) 0%, rgba(12, 16, 29, 0.9) 100%) !important; border-color: rgba(197, 168, 128, 0.3) !important; } .rank-1 .pedestal-rank-num { color: rgba(197, 168, 128, 0.4) !important; font-size: 3rem !important; } .rank-2 .pedestal-block { height: 100px !important; background: linear-gradient(180deg, rgba(156, 163, 175, 0.1) 0%, rgba(12, 16, 29, 0.9) 100%) !important; border-color: rgba(156, 163, 175, 0.2) !important; } .rank-3 .pedestal-block { height: 75px !important; background: linear-gradient(180deg, rgba(180, 83, 9, 0.08) 0%, rgba(12, 16, 29, 0.9) 100%) !important; border-color: rgba(180, 83, 9, 0.2) !important; } /* Fila de Clasificación */ .ranking-list-card { background-color: var(--dash-surface) !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; border-radius: var(--border-radius-xl) !important; padding: 24px !important; box-shadow: 0 15px 35px rgba(0,0,0,0.3) !important; font-family: 'Outfit', sans-serif !important; } .ranking-list-header { display: flex !important; align-items: center !important; color: var(--gray-600) !important; font-size: 0.75rem !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; padding-bottom: 12px !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; margin-bottom: 8px !important; } .ranking-row { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 14px 16px !important; border-radius: var(--border-radius-ml) !important; border: 1px solid transparent !important; transition: all 0.25s ease !important; margin-bottom: 6px !important; } .rank-left { display: flex !important; align-items: center !important; gap: 16px !important; min-width: 0 !important; } .rank-right { display: flex !important; align-items: center !important; gap: 18px !important; flex-shrink: 0 !important; } .ranking-row:hover { background-color: rgba(255,255,255,0.02) !important; } .ranking-row.current-user-row { background: linear-gradient(90deg, rgba(197, 168, 128, 0.06) 0%, rgba(12, 16, 29, 0.95) 100%) !important; border-color: rgba(197, 168, 128, 0.25) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important; } .rank-number-badge { width: 32px !important; height: 32px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.9rem !important; font-weight: 800 !important; flex-shrink: 0 !important; } .rank-number-badge.rank-default { background-color: rgba(255,255,255,0.03) !important; color: var(--gray-500) !important; } .rank-avatar { font-size: 1.8rem !important; margin-right: 16px !important; } .rank-user-info { display: flex !important; align-items: center !important; gap: 12px !important; } .rank-user-text { min-width: 0 !important; } .rank-name-line { display: flex !important; align-items: center !important; gap: 8px !important; font-weight: 800 !important; font-size: 0.98rem !important; } .rank-meta-line { display: flex !important; align-items: center !important; gap: 6px !important; color: var(--text-muted) !important; font-size: 0.78rem !important; margin-top: 2px !important; } .rank-username { color: var(--text-primary) !important; font-weight: 700 !important; font-size: 0.95rem !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .current-user-row .rank-username { color: var(--color-gold-champagne) !important; } .rank-you-badge { background: var(--color-purple) !important; color: var(--color-white) !important; font-size: 0.68rem !important; font-weight: 800 !important; padding: 2px 8px !important; border-radius: var(--border-radius-md) !important; text-transform: uppercase !important; letter-spacing: 0.03em !important; flex-shrink: 0 !important; } .rank-plan-badge { font-size: 0.65rem !important; font-weight: 800 !important; padding: 2px 8px !important; border-radius: var(--border-radius-lg) !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; flex-shrink: 0 !important; } .rank-plan-badge.pro { background-color: rgba(197, 168, 128, 0.08) !important; color: var(--color-gold-champagne) !important; border: 1px solid rgba(197, 168, 128, 0.2) !important; } .rank-plan-badge.free { background-color: rgba(255,255,255,0.03) !important; color: var(--gray-500) !important; } .rank-xp-val { color: var(--gray-100) !important; font-weight: 800 !important; font-size: 1rem !important; min-width: 74px !important; text-align: right !important; } [data-theme="light"] .rank-xp-val { color: var(--text-primary) !important; } /* Bordes de color por rango en el podio (plata y bronce, el oro ya existía) */ .podium-pedestal.rank-2 .podium-avatar { border-color: var(--text-muted) !important; box-shadow: 0 0 16px rgba(156, 163, 175, 0.35) !important; } .podium-pedestal.rank-3 .podium-avatar { border-color: #b45309 !important; box-shadow: 0 0 16px rgba(180, 83, 9, 0.35) !important; } /* Insignia de rango con color por top-3 en la lista */ .rank-number-badge.top-1 { background-color: rgba(245, 158, 11, 0.15) !important; color: var(--color-yellow) !important; } .rank-number-badge.top-2 { background-color: rgba(156, 163, 175, 0.15) !important; color: var(--gray-300) !important; } [data-theme="light"] .rank-number-badge.top-2 { color: #64748b !important; } .rank-number-badge.top-3 { background-color: rgba(180, 83, 9, 0.15) !important; color: var(--color-gold) !important; } /* Borde de color a la izquierda de las filas top-3, conectando con el podio */ .ranking-row.top-1 { border-left: 3px solid var(--color-yellow) !important; } .ranking-row.top-2 { border-left: 3px solid var(--text-muted) !important; } .ranking-row.top-3 { border-left: 3px solid #b45309 !important; } /* Flechas de tendencia semanal */ .trend-arrow { font-size: 0.78rem; font-weight: 800; display: inline-flex; align-items: center; gap: 2px; min-width: 34px; justify-content: center; } .trend-arrow.up { color: var(--color-green); } .trend-arrow.down { color: var(--color-red); } .trend-arrow.same { color: var(--gray-500); } /* Insignia de liga actual + cuenta atrás */ .league-banner { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--gray-900); border: 1px solid var(--gray-800); border-radius: var(--border-radius-ml); padding: 14px 20px; margin-bottom: 20px; font-family: 'Outfit', sans-serif; } .league-banner-icon { font-size: 1.6rem; } .league-banner-name { font-weight: 800; font-size: 1rem; } .league-banner-countdown { color: var(--text-muted); font-size: 0.82rem; margin-left: 8px; } /* Mensaje motivador bajo el podio */ .ranking-gap-message { text-align: center; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; margin: -8px 0 20px 0; } /* Filtro Global (Liga) / Amigos */ .ranking-filter-toggle { display: flex; justify-content: center; gap: 8px; margin-bottom: 16px; } .ranking-filter-btn { background: var(--gray-900); border: 1px solid var(--gray-800); color: var(--text-muted); padding: 9px 18px; border-radius: var(--border-radius-lg); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all 0.2s ease; font-family: 'Outfit', sans-serif; } .ranking-filter-btn.active { background: var(--color-purple); color: var(--color-white); border-color: var(--color-purple); } /* Pantalla de bloqueo del ranking (antes de completar el Módulo 1) */ .ranking-locked-card { background: var(--dash-surface); border: 1px solid rgba(197, 168, 128, 0.18); border-radius: var(--border-radius-xl); padding: 44px 32px 36px; text-align: center; max-width: 480px; margin: 48px auto; box-shadow: 0 15px 35px rgba(0,0,0,0.3); font-family: 'Outfit', sans-serif; } [data-theme="light"] .ranking-locked-card { box-shadow: 0 10px 25px rgba(15,23,42,0.08); } .ranking-locked-icon { width: 60px; height: 60px; margin: 0 auto 20px; filter: drop-shadow(0 0 10px rgba(197, 168, 128, 0.35)); } .ranking-locked-icon svg { width: 100%; height: 100%; } .ranking-locked-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; } .ranking-locked-text { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin: 0 0 24px; } .ranking-locked-text strong { color: var(--color-gold-champagne); } .ranking-locked-steps { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 22px; } .ranking-locked-step { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 800; background: var(--gray-800); color: var(--gray-500); border: 1px solid var(--gray-700); flex-shrink: 0; } [data-theme="light"] .ranking-locked-step { background: var(--gray-200); border-color: var(--gray-300); } .ranking-locked-step.done { background: linear-gradient(135deg, #b45309, #fbbf24); color: #1e1b4b; border-color: transparent; } .ranking-locked-step-line { width: 18px; height: 2px; background: var(--gray-700); flex-shrink: 0; } [data-theme="light"] .ranking-locked-step-line { background: var(--gray-300); } .ranking-locked-progress { margin-bottom: 26px; } .ranking-locked-progress-header { display: flex; justify-content: space-between; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-500); margin-bottom: 8px; } .ranking-locked-progress-track { height: 10px; border-radius: var(--border-radius-pill); background: var(--gray-800); overflow: hidden; } [data-theme="light"] .ranking-locked-progress-track { background: var(--gray-200); } .ranking-locked-progress-fill { height: 100%; border-radius: var(--border-radius-pill); background: linear-gradient(90deg, #b45309, #fbbf24); transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .ranking-locked-cta { width: auto; display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; font-size: 0.95rem; } /* Aviso de resumen semanal */ .weekly-recap-banner { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(90deg, rgba(99, 102, 241, 0.12), rgba(154, 52, 18, 0.05)); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: var(--border-radius-ml); padding: 14px 18px; margin-bottom: 20px; color: var(--text-primary); font-size: 0.88rem; font-weight: 600; } .weekly-recap-close { background: transparent; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; flex-shrink: 0; } /* ========================================================================== SECCIÓN DE NOTICIAS FINANCIERAS (BLOOMBERG FEED ACCORDION) ========================================================================== */ .news-feed-container { display: flex !important; flex-direction: column !important; gap: 20px !important; font-family: 'Outfit', sans-serif !important; } .news-card { background-color: var(--dash-surface) !important; border: 1px solid rgba(255, 255, 255, 0.04) !important; border-radius: var(--border-radius-xl) !important; padding: 24px !important; box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; } .news-card:hover { border-color: rgba(197, 168, 128, 0.2) !important; box-shadow: 0 15px 30px rgba(0,0,0,0.3), 0 0 15px rgba(197, 168, 128, 0.04) !important; } .news-card-header { display: flex !important; align-items: center !important; gap: 12px !important; margin-bottom: 12px !important; flex-wrap: wrap !important; } .news-category { font-size: 0.65rem !important; font-weight: 800 !important; padding: 4px 10px !important; border-radius: var(--border-radius-lg) !important; letter-spacing: 0.05em !important; } .tag-macro { background-color: rgba(59, 130, 246, 0.08) !important; border: 1px solid rgba(59, 130, 246, 0.25) !important; color: #60a5fa !important; } .tag-crypto { background-color: rgba(245, 158, 11, 0.08) !important; border: 1px solid rgba(245, 158, 11, 0.25) !important; color: var(--color-gold-bright) !important; } .tag-tech { background-color: rgba(139, 92, 246, 0.08) !important; border: 1px solid rgba(139, 92, 246, 0.25) !important; color: #a78bfa !important; } .tag-markets { background-color: rgba(239, 68, 68, 0.08) !important; border: 1px solid rgba(239, 68, 68, 0.25) !important; color: #f87171 !important; } .tag-personal { background-color: rgba(16, 185, 129, 0.08) !important; border: 1px solid rgba(16, 185, 129, 0.25) !important; color: #34d399 !important; } .news-source { color: var(--color-gold-champagne) !important; font-weight: 700 !important; font-size: 0.75rem !important; } .news-dot { color: var(--gray-700) !important; } .news-time, .news-read-time { color: var(--gray-500) !important; font-size: 0.75rem !important; font-weight: 600 !important; } .news-title { color: var(--text-primary) !important; font-family: 'Playfair Display', Georgia, serif !important; font-size: 1.35rem !important; font-weight: 700 !important; line-height: 1.4 !important; margin: 0 0 10px 0 !important; } .news-summary { color: var(--text-muted) !important; font-size: 0.95rem !important; line-height: 1.5 !important; margin: 0 !important; } @media (max-width: 768px) { .ranking-podium-container { gap: 16px !important; margin: 32px 0 !important; } .podium-pedestal { width: 90px !important; } .podium-avatar { width: 56px !important; height: 56px !important; font-size: 2.2rem !important; } .podium-pedestal.rank-1 .podium-avatar { width: 64px !important; height: 64px !important; font-size: 2.5rem !important; } .news-title { font-size: 1.15rem !important; } } /* ========================================================================== DISEÑO DUOLINGO PARA DEFINICIONES ========================================================================== */ .definitions-container { max-width: 640px !important; margin: 0 auto !important; font-family: 'Outfit', sans-serif !important; padding-bottom: 40px !important; } .definitions-hero { text-align: center !important; margin-bottom: 40px !important; margin-top: 10px !important; } .definitions-hero h3 { font-size: 2.2rem !important; font-weight: 800 !important; color: var(--text-primary) !important; margin-bottom: 8px !important; font-family: 'Outfit', sans-serif !important; } .definitions-hero p { color: var(--text-muted) !important; font-size: 1.1rem !important; margin-bottom: 24px !important; } .definitions-practice-btn { background-color: var(--color-purple) !important; border: none !important; color: white !important; font-weight: 800 !important; font-size: 1.05rem !important; padding: 16px 36px !important; border-radius: var(--border-radius-ml) !important; cursor: pointer !important; box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4) !important; transition: all 0.2s ease !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; font-family: 'Outfit', sans-serif !important; } .definitions-practice-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(59, 130, 246, 0.6) !important; } .definitions-divider { display: flex !important; align-items: center !important; text-align: center !important; color: #475569 !important; font-weight: 800 !important; font-size: 0.9rem !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; margin: 48px 0 24px 0 !important; } .definitions-divider::before, .definitions-divider::after { content: '' !important; flex: 1 !important; border-bottom: 2px solid var(--gray-800) !important; } .definitions-divider:not(:empty)::before { margin-right: 18px !important; } .definitions-divider:not(:empty)::after { margin-left: 18px !important; } .definitions-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; } .definition-card { background-color: var(--gray-850) !important; border: 2px solid var(--gray-800) !important; border-radius: var(--border-radius-lg) !important; padding: 22px 16px !important; text-align: center !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; min-height: 130px !important; box-sizing: border-box !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important; } .definition-card:hover { border-color: var(--color-purple) !important; background-color: var(--dash-surface-hover) !important; transform: translateY(-4px) !important; box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2) !important; } .definition-card-emoji { font-size: 2.3rem !important; margin-bottom: 6px !important; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.25)) !important; } .definition-card-term { font-size: 1.05rem !important; font-weight: 800 !important; color: var(--text-primary) !important; margin-bottom: 4px !important; } .definition-card-sub { font-size: 0.75rem !important; color: var(--text-muted) !important; font-weight: 600 !important; } .definition-card-progress { width: 60px !important; height: 5px !important; background-color: var(--border-color) !important; border-radius: var(--border-radius-md) !important; margin-top: 12px !important; overflow: hidden !important; } .definition-card-progress-fill { height: 100% !important; background-color: var(--color-purple) !important; width: 0% !important; border-radius: var(--border-radius-md) !important; transition: width 0.3s ease !important; } .definition-card.revealed .definition-card-progress-fill { width: 100% !important; background-color: var(--color-green) !important; box-shadow: 0 0 6px rgba(16, 185, 129, 0.5) !important; } @media (max-width: 600px) { .definitions-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ========================================================================== SECCIÓN AGREGAR AMIGOS (ESTILO DUOLINGO) ========================================================================== */ .profile-friends-card { background-color: var(--gray-850) !important; border: 2px solid var(--gray-800) !important; border-radius: var(--border-radius-xl) !important; padding: 28px 24px !important; margin-top: 24px !important; max-width: 100% !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25) !important; font-family: 'Outfit', sans-serif !important; } .friends-card-title { font-size: 1.3rem !important; font-weight: 800 !important; color: var(--text-primary) !important; margin: 0 0 18px 0 !important; letter-spacing: -0.01em !important; font-family: 'Outfit', sans-serif !important; } .friends-options-list { display: flex !important; flex-direction: column !important; gap: 12px !important; } .friend-option-item { display: flex !important; align-items: center !important; justify-content: space-between !important; background-color: var(--gray-900) !important; border: 1.5px solid var(--gray-800) !important; border-radius: var(--border-radius-ml) !important; padding: 16px 20px !important; cursor: pointer !important; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; } .friend-option-item:hover { border-color: var(--color-purple) !important; background-color: var(--dash-surface-hover) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 16px rgba(59, 130, 246, 0.15) !important; } .friend-option-left { display: flex !important; align-items: center !important; gap: 16px !important; } .friend-option-icon-bg { width: 44px !important; height: 44px !important; border-radius: var(--border-radius-md) !important; background: rgba(59, 130, 246, 0.1) !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(59, 130, 246, 0.2) !important; } .friend-option-icon { font-size: 1.5rem !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important; } .friend-option-label { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--text-primary) !important; } .friend-option-arrow { color: #64748b !important; font-size: 1.1rem !important; font-weight: 800 !important; transition: color 0.2s, transform 0.2s !important; } .friend-option-item:hover .friend-option-arrow { color: var(--color-purple) !important; transform: translateX(4px) !important; } /* ========================================================================== SISTEMA DE AURAS GALÁCTICAS EN BLANCO Y NEGRO (PROGRESIÓN VISUAL PERFECTA) ========================================================================== */ .avatar-aura-wrapper { position: relative; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; } .avatar-aura-core { position: relative; z-index: 2; width: 88%; height: 88%; border-radius: 50%; background: var(--bg-primary); display: flex; align-items: center; justify-content: center; overflow: hidden; box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.8); } .avatar-aura-ring { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: 1; transition: all 0.5s ease; } /* NIVEL 1: Marco Minimalista Plata */ .aura-tier-1 .avatar-aura-ring { border: 2px solid rgba(255, 255, 255, 0.25); box-shadow: 0 0 10px rgba(255, 255, 255, 0.15); } /* NIVEL 10: Aura Estelar Pulsante (Luz blanca suave en respiración) */ .aura-tier-10 .avatar-aura-ring { border: 2px solid rgba(255, 255, 255, 0.6); box-shadow: 0 0 16px rgba(255, 255, 255, 0.4); } .aura-tier-10::before { content: ''; position: absolute; top: -5px; left: -5px; right: -5px; bottom: -5px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 75%); animation: auraBreathing 3.8s ease-in-out infinite alternate; z-index: 0; } /* NIVEL 25: Destellos Galácticos (Barrido de haz de luz blanca móvil) */ .aura-tier-25 .avatar-aura-ring { border: 2.5px solid var(--color-white); box-shadow: 0 0 22px rgba(255, 255, 255, 0.65); } .aura-tier-25::after { content: ''; position: absolute; top: -3px; left: -3px; right: -3px; bottom: -3px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0%, rgba(255, 255, 255, 0.95) 20%, transparent 40%, transparent 70%, rgba(255, 255, 255, 0.95) 90%, transparent 100%); animation: auraGleamSweep 5.5s linear infinite; z-index: 1; } /* NIVEL 50: Espiral Galáctica (Doble anillo en giro estelar blanco y negro) */ .aura-tier-50 .avatar-aura-ring { background: conic-gradient(from 0deg, var(--color-white) 0%, #64748b 25%, #020617 50%, #e2e8f0 75%, var(--color-white) 100%); padding: 3px; animation: auraCelestialSpin 7.5s linear infinite; box-shadow: 0 0 28px rgba(255, 255, 255, 0.7), 0 0 45px rgba(148, 163, 184, 0.3); } .aura-tier-50::before { content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.45) 0%, rgba(148, 163, 184, 0.2) 50%, transparent 78%); animation: auraBreathing 3.5s ease-in-out infinite alternate; z-index: 0; } /* NIVEL 75: Nebulosa de Estrellas (Giro galáctico + Puntos de luz estelar) */ .aura-tier-75 .avatar-aura-ring { background: conic-gradient(from 0deg, var(--color-white) 0%, #cbd5e1 20%, var(--gray-850) 40%, var(--color-white) 60%, #475569 80%, var(--color-white) 100%); padding: 3.5px; animation: auraCelestialSpin 6s linear infinite; box-shadow: 0 0 32px rgba(255, 255, 255, 0.8), 0 0 55px rgba(203, 213, 225, 0.35); } .aura-tier-75::before { content: ''; position: absolute; top: -10px; left: -10px; right: -10px; bottom: -10px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(203, 213, 225, 0.25) 60%, transparent 82%); animation: auraBreathing 3s ease-in-out infinite alternate; z-index: 0; } /* NIVEL 100+: Galaxia Suprema Legendaria (Doble espiral, nebulosa y corona) */ .aura-tier-100 .avatar-aura-ring { background: conic-gradient(from 0deg, var(--color-white) 0%, var(--text-muted) 20%, #020617 40%, var(--color-white) 60%, #cbd5e1 80%, var(--color-white) 100%); padding: 4.5px; animation: auraCelestialSpin 4.5s linear infinite; box-shadow: 0 0 40px rgba(255, 255, 255, 0.9), 0 0 75px rgba(255, 255, 255, 0.5); } .aura-tier-100::before { content: ''; position: absolute; top: -14px; left: -14px; right: -14px; bottom: -14px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(148, 163, 184, 0.3) 55%, transparent 85%); animation: auraBreathing 2.2s ease-in-out infinite alternate; z-index: 0; } /* PUNTOS DE LUZ ESTELAR EN CSS PURO (SIN EMOJIS) */ .aura-galaxy-star { position: absolute; width: 4px; height: 4px; background: var(--color-white); border-radius: 50%; box-shadow: 0 0 8px var(--color-white), 0 0 14px rgba(255, 255, 255, 0.9); z-index: 3; pointer-events: none; } .aura-galaxy-star.s1 { top: 4%; right: 8%; animation: auraStarGleam 2.8s ease-in-out infinite alternate; } .aura-galaxy-star.s2 { bottom: 6%; left: 6%; animation: auraStarGleam 3.5s ease-in-out 0.7s infinite alternate; } .aura-galaxy-star.s3 { top: 48%; right: -7px; animation: auraStarGleam 3.1s ease-in-out 1.4s infinite alternate; } /* CORONA MONOCROMÁTICA VECTORIAL (SIN EMOJIS) */ .aura-galaxy-crown { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 22px; height: 12px; z-index: 4; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); animation: auraCrownFloat 3.2s ease-in-out infinite alternate; } .aura-galaxy-crown svg { width: 100%; height: 100%; fill: var(--color-white); } /* KEYFRAMES ANIMACIONES GALÁCTICAS */ @keyframes auraGleamSweep { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes auraBreathing { 0% { opacity: 0.35; transform: scale(0.95); } 100% { opacity: 0.95; transform: scale(1.06); } } @keyframes auraCelestialSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes auraStarGleam { 0% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0.3; transform: scale(0.7); } } @keyframes auraCrownFloat { 0% { transform: translateX(-50%) translateY(0); } 100% { transform: translateX(-50%) translateY(-4px); } } /* ========================================================================== ESTILOS DE MISIONES Y SIMULADOR DE DECISIONES FINANCIERAS (GAMIFICACIÓN) ========================================================================== */ /* Pestaña de Misiones */ .quests-header { margin-bottom: 24px; } .quests-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; } @media (min-width: 768px) { .quests-grid { grid-template-columns: 1fr 1fr; } } .quest-card { background: var(--border-color); border: 1px solid #334155; border-radius: var(--border-radius-ml); padding: 20px; display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; } .quest-card:hover { border-color: var(--color-purple); transform: translateY(-2px); } .quest-info { flex-grow: 1; margin-right: 16px; } .quest-info h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 6px 0; } .quest-info p { font-size: 0.85rem; color: var(--text-muted); margin: 0 0 12px 0; } .quest-progress-container { display: flex; align-items: center; gap: 10px; } .quest-progress-bar-bg { flex-grow: 1; height: 8px; background: var(--gray-850); border-radius: var(--border-radius-sm); overflow: hidden; } .quest-progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-purple), #38bdf8); border-radius: var(--border-radius-sm); transition: width 0.4s ease; } .quest-progress-text { font-size: 0.75rem; font-weight: 800; color: #38bdf8; white-space: nowrap; } .quest-reward-badge { background: rgba(245, 158, 11, 0.15); border: 1px solid rgba(245, 158, 11, 0.3); color: var(--color-gold-bright); font-size: 0.75rem; font-weight: 800; padding: 4px 8px; border-radius: var(--border-radius-sm); display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; } .quest-action { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .quest-claim-btn { background: linear-gradient(135deg, var(--color-green), #059669); color: white; font-weight: 800; padding: 8px 16px; border-radius: var(--border-radius-md); border: none; cursor: pointer; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); transition: all 0.2s ease; animation: buttonGlow 1.5s infinite alternate; } .quest-claim-btn:hover { transform: scale(1.05); } @keyframes buttonGlow { 0% { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); } 100% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.6); } } /* Simulador de Decisiones */ .sim-layout { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width: 992px) { .sim-layout { grid-template-columns: 2fr 1fr; } } .sim-main { background: var(--border-color); border: 1px solid #334155; border-radius: var(--border-radius-xl); padding: 24px; } .sim-sidebar { background: var(--border-color); border: 1px solid #334155; border-radius: var(--border-radius-xl); padding: 24px; display: flex; flex-direction: column; gap: 20px; } .sim-stats-container { display: flex; flex-direction: column; gap: 16px; } .sim-stat-card { background: var(--gray-850); border: 1px solid #334155; border-radius: var(--border-radius-ml); padding: 16px; } .sim-stat-label { font-size: 0.8rem; font-weight: 800; color: var(--text-muted); text-transform: uppercase; margin-bottom: 8px; display: flex; justify-content: space-between; } .sim-stat-value { color: var(--text-primary); font-weight: 800; } .sim-stat-bar-bg { height: 12px; background: var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; } .sim-stat-bar-fill { height: 100%; border-radius: var(--border-radius-sm); transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .sim-stat-bar-fill.budget { background: linear-gradient(90deg, var(--color-green), #34d399); } .sim-stat-bar-fill.assets { background: linear-gradient(90deg, var(--color-purple), var(--color-brand-light)); } .sim-stat-bar-fill.happiness { background: linear-gradient(90deg, #ec4899, #f472b6); } .sim-story-card { text-align: center; animation: fadeIn 0.4s ease; } .sim-story-emoji { font-size: 4rem; margin-bottom: 16px; } .sim-story-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); margin-bottom: 12px; } .sim-story-text { font-size: 1rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 24px; } .sim-options-stack { display: flex; flex-direction: column; gap: 12px; } .sim-option-btn { background: var(--gray-850); border: 2px solid #334155; border-radius: var(--border-radius-ml); padding: 16px 20px; text-align: left; color: var(--color-white); font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: all 0.25s ease; } .sim-option-btn:hover { border-color: var(--color-purple); background: rgba(99, 102, 241, 0.1); transform: translateY(-2px); } .sim-feedback-card { background: var(--gray-850); border: 1px solid var(--color-green); border-radius: var(--border-radius-ml); padding: 20px; margin-top: 20px; animation: slideUp 0.3s ease; } .sim-feedback-card.failed { border-color: var(--color-red); } .sim-feedback-card h4 { font-size: 1.1rem; font-weight: 800; margin: 0 0 8px 0; } .sim-feedback-changes { display: flex; gap: 12px; font-size: 0.85rem; font-weight: 800; margin-top: 10px; } .sim-change-badge { padding: 3px 8px; border-radius: var(--border-radius-sm); } .sim-change-badge.positive { background: rgba(16, 185, 129, 0.15); color: var(--color-green); } .sim-change-badge.negative { background: rgba(239, 68, 68, 0.15); color: var(--color-red); } .world-locked-banner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(4px); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--color-white); font-weight: 800; z-index: 10; } .world-locked-icon { font-size: 2.5rem; margin-bottom: 8px; } /* ========================================================================== TESTIMONIOS (landing) ========================================================================== */ .landing-testimonials { padding: 60px 0 80px 0; max-width: 100%; margin: 0 auto; } .landing-testimonials .section-heading { text-align: center; margin-bottom: 32px; font-family: 'Outfit', sans-serif; font-size: 2.2rem; color: var(--text-primary); padding: 0 60px; } /* Cinta de tarjetas de testimonios en movimiento lateral continuo */ .testimonial-marquee-wrap { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent); } .testimonial-marquee-track { display: flex; align-items: stretch; gap: 24px; width: max-content; padding: 6px 24px; animation: testimonial-scroll 70s linear infinite; } .testimonial-marquee-wrap:hover .testimonial-marquee-track { animation-play-state: paused; } @keyframes testimonial-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .testimonial-card { background: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-lg); padding: 26px; width: 320px; flex-shrink: 0; } .testimonial-stars { font-size: 0.9rem; margin-bottom: 12px; } .testimonial-quote { color: var(--text-primary); font-size: 0.95rem; line-height: 1.55; margin: 0 0 18px 0; } .testimonial-author { display: flex; align-items: center; gap: 10px; } .testimonial-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--color-purple), var(--color-purple-hover)); display: flex; align-items: center; justify-content: center; font-weight: 800; color: white; font-size: 0.9rem; flex-shrink: 0; } .testimonial-name { font-weight: 700; color: var(--text-primary); font-size: 0.9rem; } .testimonial-role { color: var(--text-muted); font-size: 0.78rem; } .testimonials-note { text-align: center; color: var(--text-muted); font-size: 0.78rem; margin-top: 24px; opacity: 0.7; padding: 0 60px; } @media (max-width: 768px) { .testimonial-card { width: 260px; } } @media (max-width: 768px) { .testimonial-marquee-item { font-size: 0.85rem; } } /* ========================================================================== AVISO FLOTANTE (racha protegida/perdida, resumen semanal, etc.) ========================================================================== */ .app-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: #111827; border: 1px solid #1f2937; border-radius: var(--border-radius-ml); padding: 14px 20px; display: flex; align-items: center; gap: 10px; color: var(--color-white); font-weight: 700; font-size: 0.9rem; box-shadow: 0 10px 30px rgba(0,0,0,0.4); z-index: 10000; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; max-width: 90vw; } .app-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .app-toast-icon { font-size: 1.3rem; flex-shrink: 0; } /* ========================================================================== SECCIÓN: SOBRE NOSOTROS ========================================================================== */ /* SECCIÓN: FRANJA DE CONFIANZA (datos reales, sin cifras inventadas) */ /* --- Tira de números grandes (vive en el hero) --- */ .stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: left; padding-top: 28px; border-top: 1px solid var(--gray-800); width: 100%; } .stat-strip-item { display: flex; flex-direction: column; gap: 6px; } .stat-strip-number { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 2.4rem; background: linear-gradient(135deg, var(--color-brand-light), var(--color-purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .stat-strip-label { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; } /* SECCIÓN: VISTA PREVIA DE PRECIOS */ .landing-pricing-preview { max-width: 1100px; margin: 0 auto; padding: 80px 24px; } .pricing-preview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; max-width: 700px; margin: 0 auto; } .pricing-preview-card { background: var(--bg-card); border: 1px solid var(--gray-800); border-radius: var(--border-radius-xl); padding: 32px 28px; position: relative; } .pricing-preview-card h3 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--text-primary); margin: 0 0 12px 0; } .pricing-preview-featured { border: 2px solid var(--color-purple); box-shadow: 0 12px 30px rgba(99, 102, 241, 0.2); } .pricing-preview-ribbon { position: absolute; top: -12px; right: 24px; background: var(--color-purple); color: white; font-size: 0.72rem; font-weight: 800; padding: 4px 12px; border-radius: var(--border-radius-md); text-transform: uppercase; } .pricing-preview-amount { font-family: 'Outfit', sans-serif; font-weight: 900; font-size: 2.2rem; color: var(--text-primary); margin-bottom: 20px; } .pricing-preview-amount .currency { font-size: 1.2rem; font-weight: 700; vertical-align: top; margin-right: 2px; } .pricing-preview-amount .period { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); margin-left: 4px; } .pricing-preview-list { list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 10px; } .pricing-preview-list li { color: var(--text-muted); font-size: 0.9rem; display: flex; align-items: center; gap: 8px; } .pricing-preview-list li span { color: var(--color-green); font-weight: 800; } .pricing-preview-btn { width: 100%; } .pricing-preview-footnote { text-align: center; color: var(--text-muted); font-size: 0.82rem; margin: 28px auto 0 auto; max-width: 500px; } @media (max-width: 768px) { .stats-strip { grid-template-columns: repeat(2, 1fr); } } .landing-about { max-width: 1100px; margin: 0 auto; padding: 100px 24px; border-top: 1px solid var(--gray-800); } .about-header { display: flex; align-items: center; gap: 48px; text-align: left; margin-bottom: 60px; } .about-mascot { display: block; width: 170px; height: auto; flex-shrink: 0; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35)); } .about-header-text { flex: 1; min-width: 0; } .landing-about .section-heading { font-family: 'Outfit', sans-serif; font-size: 2.4rem; font-weight: 800; color: var(--text-primary); margin: 0 0 16px 0; } .about-intro { color: var(--text-muted); font-size: 1.05rem; line-height: 1.7; max-width: 620px; margin: 0; } .about-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; } @media (max-width: 860px) { .about-pillars-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .about-pillars-grid { grid-template-columns: 1fr; } } .about-pillar-card { background: var(--bg-card); border: 1px solid var(--gray-800); border-top-width: 4px; border-radius: var(--border-radius-xl); padding: 28px 24px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .about-pillar-card-purple { border-top-color: var(--color-purple); } .about-pillar-card-gold { border-top-color: var(--color-gold-bright); } .about-pillar-card-green { border-top-color: var(--color-green); } .about-pillar-card-red { border-top-color: var(--color-red); } .about-pillar-card-champagne { border-top-color: var(--color-gold-champagne); } .about-pillar-card-blue { border-top-color: var(--color-brand-light); } .about-pillar-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); } .about-pillar-icon { font-size: 2.1rem; display: block; margin-bottom: 14px; color: var(--color-purple); } .about-pillar-card-gold .about-pillar-icon { color: var(--color-gold-bright); } .about-pillar-card-green .about-pillar-icon { color: var(--color-green); } .about-pillar-card-red .about-pillar-icon { color: var(--color-red); } .about-pillar-card-champagne .about-pillar-icon { color: var(--color-gold-champagne); } .about-pillar-card-blue .about-pillar-icon { color: var(--color-brand-light); } .about-pillar-icon svg { width: 30px; height: 30px; } .about-pillar-card h3 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--text-primary); margin: 0 0 10px 0; } .about-pillar-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.6; margin: 0; } .about-disclaimer { font-size: 0.82rem; color: var(--gray-500); line-height: 1.6; max-width: 640px; margin: 0 auto; } .about-disclaimer a { color: var(--color-purple); text-decoration: underline; } @media (max-width: 720px) { .about-header { flex-direction: column; text-align: center; gap: 20px; } .about-header-text { text-align: center; } .about-intro { margin: 0 auto; } } @media (max-width: 640px) { .landing-about { padding: 60px 20px; } } /* ========================================================================== SECCIÓN: CTA FINAL (blob morado con Capi) ========================================================================== */ .landing-final-cta { position: relative; text-align: center; padding: 70px 24px 0 24px; } .landing-final-cta::before { content: ''; position: absolute; top: 0; left: -4px; right: -4px; height: 320px; background: linear-gradient(to bottom, rgba(67, 56, 202, 0) 0%, #4338ca 60%, #4338ca 100%); pointer-events: none; } .final-cta-heading { position: relative; z-index: 1; font-family: 'Outfit', sans-serif; font-size: 4.2rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--text-primary); white-space: nowrap; margin: 0 0 76px 0; } .final-cta-heading-accent { color: var(--color-brand-light); } .final-cta-btn { position: relative; z-index: 1; font-size: 1.5rem; padding: 24px 64px; box-shadow: 0px 6px 0px var(--border-color), 0 0 0 8px rgba(99, 102, 241, 0.22); animation: finalCtaBtnPulse 1.8s ease-in-out infinite; } @keyframes finalCtaBtnPulse { 0%, 100% { transform: scale(1); box-shadow: 0px 6px 0px var(--border-color), 0 0 0 8px rgba(99, 102, 241, 0.22); } 50% { transform: scale(1.08); box-shadow: 0px 6px 0px var(--border-color), 0 0 0 14px rgba(99, 102, 241, 0.06); } } .final-cta-btn:hover { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .final-cta-btn { animation: none !important; } } .final-cta-blob { position: relative; margin-top: 56px; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } .final-cta-blob-fill { position: relative; background-color: #4338ca; padding: 10px 24px 60px 24px; min-height: 610px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .final-cta-mascot { display: block; position: relative; z-index: 1; width: 540px; height: auto; } .final-cta-mascot-visual { display: flex; justify-content: center; } .money-rain { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .money-rain-item { position: absolute; top: -10%; animation-name: moneyRainFall, moneyRainSpin; animation-timing-function: linear, linear; animation-iteration-count: infinite, infinite; } .money-rain-item svg { display: block; } @keyframes moneyRainFall { 0% { top: -10%; opacity: 0; } 10% { opacity: 0.9; } 76% { opacity: 0.9; } 93% { opacity: 0; } 100% { top: 108%; opacity: 0; } } @keyframes moneyRainSpin { from { transform: rotate(-14deg); } to { transform: rotate(374deg); } } @media (prefers-reduced-motion: reduce) { .money-rain-item { animation: none !important; opacity: 0; } } @media (max-width: 640px) { .final-cta-heading { font-size: 2rem; white-space: normal; } .final-cta-btn { font-size: 1.2rem; padding: 18px 40px; } .final-cta-blob-fill { min-height: 460px; } .final-cta-mascot { width: 335px; } } /* PIE DE PÁGINA PRINCIPAL DE LA LANDING */ .landing-main-footer { position: relative; border-top: none; background-color: var(--bg-primary); padding: 56px 80px 32px 80px; overflow: hidden; } .landing-main-footer::before { content: ''; position: absolute; top: 0; left: -4px; right: -4px; height: 100%; background: linear-gradient(to bottom, #4338ca 0%, #4338ca 40%, rgba(67, 56, 202, 0) 100%); pointer-events: none; } .landing-main-footer-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; border-bottom: 1px solid var(--gray-800); } .landing-main-footer-brand .landing-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .landing-main-footer-tagline { color: var(--text-muted); font-size: 0.85rem; line-height: 1.6; max-width: 260px; margin: 0; } .footer-social-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 4px; } .footer-social-link { width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.16); color: white; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .footer-social-link svg { width: 17px; height: 17px; } .footer-social-link:hover, .footer-social-link:focus-visible { background-color: rgba(255, 255, 255, 0.28); color: white; transform: translateY(-2px); } .landing-main-footer-col { display: flex; flex-direction: column; gap: 10px; } .landing-main-footer-col h4 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); margin: 0 0 4px 0; } .landing-main-footer-col a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; font-size: 0.88rem; transition: color 0.2s; } .landing-main-footer-col a:hover { color: var(--color-brand-light); } .landing-main-footer-bottom { max-width: 1200px; margin: 0 auto; padding-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; } .landing-main-footer-bottom span { color: var(--gray-500); font-size: 0.78rem; } .landing-main-footer-disclaimer { max-width: 520px; text-align: right; } @media (max-width: 900px) { .landing-main-footer { padding: 48px 24px 28px 24px; } .landing-main-footer-inner { grid-template-columns: 1fr 1fr; } .landing-main-footer-bottom { flex-direction: column; } .landing-main-footer-disclaimer { text-align: left; max-width: 100%; } } .faq-item { background: var(--bg-card); border: var(--border-width) solid var(--border-color); border-radius: var(--border-radius-md); margin-bottom: 12px; overflow: hidden; } .faq-item summary { padding: 18px 22px; cursor: pointer; font-weight: 700; color: var(--text-primary); font-family: 'Outfit', sans-serif; font-size: 1rem; list-style: none; display: flex; justify-content: space-between; align-items: center; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--color-purple); margin-left: 12px; flex-shrink: 0; } .faq-item[open] summary::after { content: "−"; } .faq-item p { padding: 0 22px 20px 22px; margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; } @media (max-width: 768px) { .landing-testimonials .section-heading, .testimonials-note { padding-left: 20px; padding-right: 20px; } } /* ========================================================================== MODAL DE CONFIRMACIÓN AL ABANDONAR UNA LECCIÓN ========================================================================== */ .exit-confirm-overlay { position: fixed; inset: 0; background: rgba(9, 13, 22, 0.75); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 3000; animation: exitConfirmFadeIn 0.18s ease; } @keyframes exitConfirmFadeIn { from { opacity: 0; } to { opacity: 1; } } .exit-confirm-card { background: linear-gradient(160deg, #111827 0%, #14101f 100%); border: 1px solid var(--gray-700); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-modal); padding: 36px 32px 28px 32px; width: 100%; max-width: 380px; text-align: center; position: relative; animation: exitConfirmPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes exitConfirmPop { from { transform: scale(0.9) translateY(10px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } } .exit-confirm-icon { font-size: 2.4rem; margin-bottom: 8px; filter: drop-shadow(0 4px 10px rgba(239, 68, 68, 0.35)); } .exit-confirm-title { font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--color-white); margin: 0 0 12px 0; } .exit-confirm-text { font-size: 0.95rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 26px 0; } .exit-confirm-stay-btn { width: 100%; padding: 15px; border-radius: var(--border-radius-pill); border: none; background-color: var(--color-white); color: var(--bg-primary); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.98rem; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 6px 18px rgba(255, 255, 255, 0.08); } .exit-confirm-stay-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255, 255, 255, 0.14); } .exit-confirm-leave-btn { width: 100%; margin-top: 14px; padding: 8px; background: none; border: none; color: var(--color-red); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.88rem; letter-spacing: 0.03em; text-transform: uppercase; cursor: pointer; transition: opacity 0.15s ease; } .exit-confirm-leave-btn:hover { opacity: 0.75; } /* ========================================================================== MODAL DE RACHA (STREAKS) ========================================================================== */ .streak-modal-overlay { position: fixed; inset: 0; background: rgba(9, 13, 22, 0.75); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 3000; padding: 20px; animation: exitConfirmFadeIn 0.18s ease; } .streak-modal-card { background: linear-gradient(160deg, #111827 0%, #14101f 100%); border: 1px solid var(--gray-700); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-modal); padding: 36px 36px 32px 36px; width: 100%; max-width: 470px; animation: exitConfirmPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .streak-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .streak-modal-header h3 { font-family: 'Outfit', sans-serif; font-size: 1.55rem; font-weight: 800; color: var(--color-white); margin: 0; } .streak-modal-header-actions { display: flex; align-items: center; gap: 10px; } .streak-modal-help-btn, .streak-modal-close-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gray-700); background: var(--gray-800); color: var(--text-muted); font-size: 0.95rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .streak-modal-help-btn:hover, .streak-modal-close-btn:hover { color: var(--color-white); border-color: var(--gray-600); } .streak-modal-flame-ring { position: relative; width: 190px; height: 190px; margin: 14px auto 10px auto; display: flex; align-items: center; justify-content: center; } .streak-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .streak-ring-bg { fill: none; stroke: var(--gray-800); stroke-width: 8; } .streak-ring-fill { fill: none; stroke: var(--color-yellow); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 0.6s ease; filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.5)); } .streak-modal-flame-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .streak-modal-flame-emoji { font-size: 2.9rem; filter: drop-shadow(0 4px 10px rgba(245, 158, 11, 0.4)); } .streak-modal-flame-inner span:last-child { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 900; color: var(--color-white); } .streak-modal-daylabel { text-align: center; color: var(--text-muted); font-size: 1rem; font-weight: 600; margin: 0 0 26px 0; } .streak-week-row { display: flex; justify-content: space-between; margin-bottom: 28px; padding: 0 4px; } .streak-day-pill { display: flex; flex-direction: column; align-items: center; gap: 8px; } .streak-day-label { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; } .streak-day-circle { width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--gray-700); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; color: var(--gray-600); background: var(--gray-900); } .streak-day-circle.is-done { background: rgba(245, 158, 11, 0.15); border-color: var(--color-yellow); color: var(--color-yellow); } .streak-day-circle.is-today { border-color: var(--color-purple); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2); } .streak-day-circle.is-today.is-done { border-color: var(--color-yellow); box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.25); } .streak-day-circle.is-missed { color: var(--gray-700); } .streak-stats-grid { display: flex; align-items: center; justify-content: space-between; background: var(--gray-900); border: 1px solid var(--gray-800); border-radius: var(--border-radius-lg); padding: 20px 10px; margin-bottom: 22px; } .streak-stats-box { flex: 1; text-align: center; } .streak-stats-value { font-family: 'Outfit', sans-serif; font-size: 1.45rem; font-weight: 800; color: var(--color-white); margin: 0 0 4px 0; } .streak-stats-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; margin: 0; } .streak-stats-divider { width: 1px; height: 40px; background: var(--gray-800); } .streak-alliance-box { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.25); border-radius: var(--border-radius-lg); padding: 20px; } .streak-alliance-title { font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 800; color: var(--color-white); margin: 0 0 6px 0; } .streak-alliance-desc { font-size: 0.86rem; color: var(--text-muted); line-height: 1.45; margin: 0; } .streak-alliance-btn { flex-shrink: 0; background: var(--color-purple); color: white; border: none; padding: 12px 22px; border-radius: var(--border-radius-pill); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.92rem; cursor: pointer; transition: all 0.15s ease; } .streak-alliance-btn:hover { background: var(--color-purple-hover); transform: translateY(-1px); } /* ========================================================================== BANNER SUPERIOR DE OFERTA ANUAL (con countdown) ========================================================================== */ .promo-annual-banner { border-radius: 18px; margin-bottom: 20px; background: linear-gradient(115deg, #312e81 0%, var(--color-purple) 50%, #6366f1 100%); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 14px 30px -10px rgba(124, 45, 18, 0.65), inset 0 1px 0 rgba(255,255,255,0.16); cursor: pointer; overflow: hidden; position: relative; animation: promoBannerSlideIn 0.35s ease; } .promo-annual-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.14) 48%, transparent 66%); background-size: 220% 100%; animation: promoBannerShine 6s ease-in-out infinite; pointer-events: none; } @keyframes promoBannerShine { 0% { background-position: 140% 0; } 60%, 100% { background-position: -60% 0; } } @keyframes promoBannerSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .promo-banner-inner { display: flex; align-items: center; gap: 28px; padding: 14px 26px; flex-wrap: wrap; position: relative; z-index: 1; } .promo-banner-text { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; } .promo-banner-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: #FFE79A; } .promo-banner-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.1rem; color: var(--color-white); line-height: 1.25; white-space: nowrap; } .promo-banner-cta { background: var(--color-white); color: #312e81; border: none; padding: 10px 22px; border-radius: 12px; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.88rem; cursor: pointer; white-space: nowrap; flex-shrink: 0; box-shadow: 0 3px 0 #2b2470; transition: transform 0.12s ease, box-shadow 0.12s ease; } .promo-banner-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #2b2470; } .promo-banner-cta:active { transform: translateY(3px); box-shadow: 0 0 0 #2b2470; } .promo-banner-timer { display: flex; align-items: baseline; gap: 14px; white-space: nowrap; flex-shrink: 0; margin-left: auto; } .promo-timer-seg { display: flex; flex-direction: column; align-items: center; min-width: 40px; } .promo-timer-num { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.7rem; color: var(--color-white); line-height: 1; font-variant-numeric: tabular-nums; } .promo-timer-lbl { font-size: 0.64rem; font-weight: 600; color: rgba(255, 255, 255, 0.65); text-transform: uppercase; letter-spacing: 0.02em; margin-top: 3px; } .promo-timer-colon { color: rgba(255, 255, 255, 0.4); font-weight: 700; font-size: 1.5rem; align-self: flex-start; } .promo-banner-close { background: rgba(255, 255, 255, 0.14); border: none; color: var(--color-white); width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex-shrink: 0; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; position: relative; z-index: 1; } .promo-banner-close:hover { background: rgba(255, 255, 255, 0.28); } @media (max-width: 900px) { .promo-banner-inner { padding: 14px 18px; } .promo-banner-timer { margin-left: 0; order: 4; flex-basis: 100%; justify-content: center; } } /* ========================================================================== TARJETA EMERGENTE DE OFERTA ANUAL ========================================================================== */ .promo-card-overlay { position: fixed; inset: 0; background: rgba(9, 13, 22, 0.78); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 3100; padding: 20px; animation: exitConfirmFadeIn 0.18s ease; } .promo-card { position: relative; width: 100%; max-width: 400px; background: linear-gradient(165deg, #1e1b4b 0%, #111827 55%, #14101f 100%); border: 1px solid var(--gray-700); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-modal); padding: 34px 30px 28px 30px; text-align: center; animation: exitConfirmPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .promo-card-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gray-700); background: var(--gray-800); color: var(--text-muted); cursor: pointer; font-size: 0.85rem; transition: all 0.15s ease; } .promo-card-close:hover { color: var(--color-white); background: var(--gray-700); } .promo-card-badge { display: inline-block; background: linear-gradient(135deg, #f59e0b, #ec4899); color: var(--color-white); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; padding: 6px 14px; border-radius: var(--border-radius-pill); margin-bottom: 16px; } .promo-card-icon { font-size: 2.6rem; margin-bottom: 10px; filter: drop-shadow(0 4px 14px rgba(245, 158, 11, 0.4)); } .promo-card-icon-mascot { display: flex; justify-content: center; } .promo-card-icon-mascot img { width: auto; height: 220px; filter: drop-shadow(0 4px 14px rgba(245, 158, 11, 0.4)); } .promo-card-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--color-white); margin: 0 0 8px 0; } .promo-card-subtitle { font-size: 0.98rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 22px 0; } .promo-card-highlight { color: #fbbf24; font-weight: 800; } .promo-card-features { list-style: none; padding: 0; margin: 0 0 22px 0; text-align: left; display: flex; flex-direction: column; gap: 10px; } .promo-card-features li { font-size: 0.86rem; color: var(--text-secondary, #cbd5e1); display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; } .promo-card-check { color: var(--color-green); font-weight: 800; flex-shrink: 0; } .promo-card-price-row { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--gray-700); border-radius: var(--border-radius-md); padding: 14px; margin-bottom: 14px; } .promo-card-price-amount { font-family: 'Outfit', sans-serif; font-size: 1.7rem; font-weight: 800; color: var(--color-white); } .promo-card-price-period { font-size: 0.9rem; color: var(--text-muted); margin-left: 4px; } .promo-card-price-note { font-size: 0.78rem; color: var(--color-green); font-weight: 700; margin-top: 4px; } .promo-card-timer { font-family: monospace; font-size: 0.8rem; color: var(--color-brand-light); margin-bottom: 20px; } .promo-card-cta { width: 100%; padding: 15px; border-radius: var(--border-radius-pill); border: none; background: linear-gradient(135deg, var(--color-purple), var(--color-purple-hover)); color: var(--color-white); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.98rem; cursor: pointer; box-shadow: 0 8px 20px -4px rgba(99, 102, 241, 0.55); transition: transform 0.15s ease, box-shadow 0.15s ease; } .promo-card-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -4px rgba(99, 102, 241, 0.65); } .promo-card-dismiss { width: 100%; margin-top: 12px; padding: 8px; background: none; border: none; color: var(--text-muted); font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.85rem; cursor: pointer; transition: opacity 0.15s ease; } .promo-card-dismiss:hover { opacity: 0.75; } /* ========================================================================== ICONO FLOTANTE DE SOPORTE + MINI CENTRO DE AYUDA ========================================================================== */ .support-fab { position: fixed; bottom: 26px; right: 26px; width: 46px; height: 46px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--color-purple), #312e81); box-shadow: 0 10px 24px -6px rgba(99, 102, 241, 0.6); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2500; transition: transform 0.18s ease, box-shadow 0.18s ease; } .support-fab:hover { transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 30px -6px rgba(99, 102, 241, 0.7); } .support-panel { position: fixed; bottom: 100px; right: 26px; width: 100%; max-width: 430px; height: min(760px, 82vh); background: linear-gradient(160deg, #111827 0%, #14101f 100%); border: 1px solid var(--gray-700); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-modal); z-index: 2500; display: flex; flex-direction: column; overflow: hidden; animation: exitConfirmPop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); } .support-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 24px 24px 18px 24px; background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.12)); border-bottom: 1px solid var(--gray-800); flex-shrink: 0; } .support-panel-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.3rem; color: var(--color-white); margin: 0 0 4px 0; } .support-panel-subtitle { font-size: 0.88rem; color: var(--text-muted); margin: 0; } .support-panel-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--gray-700); background: var(--gray-800); color: var(--text-muted); cursor: pointer; font-size: 0.9rem; flex-shrink: 0; transition: all 0.15s ease; } .support-panel-close:hover { color: var(--color-white); background: var(--gray-700); } .support-panel-body { padding: 22px 24px 24px 24px; overflow-y: auto; flex: 1 1 auto; } .support-panel-section-label { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-brand-light); margin-bottom: 14px; } .support-panel-hint { font-size: 0.88rem; color: var(--text-muted); margin: 0 0 12px 0; line-height: 1.45; } .support-panel-divider { height: 1px; background: var(--gray-800); margin: 24px 0; } /* --- Vista Inicio --- */ .support-home-hero { text-align: center; padding: 10px 6px 26px 6px; } .support-home-emoji { font-size: 2.6rem; display: block; margin-bottom: 10px; } .support-home-hero h4 { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.3rem; color: #F8FAFC !important; margin: 0 0 8px 0; } .support-home-hero p { font-size: 0.92rem; color: #CBD5E1 !important; line-height: 1.55; margin: 0; font-weight: 500; } .support-home-shortcuts { display: flex; flex-direction: column; gap: 12px; } .support-shortcut-card { display: flex; align-items: center; gap: 14px; width: 100%; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: var(--border-radius-lg); padding: 16px; cursor: pointer; text-align: left; transition: all 0.18s ease; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } .support-shortcut-card:hover { border-color: rgba(253, 186, 116, 0.6) !important; background: rgba(99, 102, 241, 0.16) !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(99, 102, 241, 0.25); } .support-shortcut-icon { font-size: 1.5rem; flex-shrink: 0; } .support-shortcut-text { flex: 1 1 auto; min-width: 0; } .support-shortcut-title { font-family: 'Outfit', sans-serif; font-weight: 800 !important; font-size: 0.98rem !important; color: #F8FAFC !important; margin: 0 0 4px 0; } .support-shortcut-desc { font-size: 0.85rem !important; color: #CBD5E1 !important; font-weight: 500 !important; margin: 0; } .support-shortcut-arrow { font-size: 1.4rem; color: #A5B4FC !important; font-weight: 800; flex-shrink: 0; } /* --- Vista Mensajes --- */ .support-messages-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; } .support-message-empty { text-align: center; padding: 24px 12px; color: #CBD5E1 !important; font-size: 0.88rem; background: rgba(255, 255, 255, 0.04) !important; border: 1px dashed rgba(255, 255, 255, 0.15) !important; border-radius: var(--border-radius-lg); } .support-message-item { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: var(--border-radius-lg); padding: 14px 16px; } .support-message-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .support-message-item-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-brand-light); } .support-message-item-date { font-size: 0.72rem; color: #94A3B8 !important; } .support-message-item-text { font-size: 0.87rem; color: #F1F5F9 !important; line-height: 1.5; margin: 0 0 8px 0; } .support-message-item-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.76rem; font-weight: 700; color: var(--color-green); } /* --- FAQ (vista Ayuda) --- */ .support-faq-list { display: flex; flex-direction: column; gap: 10px; } .support-faq-item { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: var(--border-radius-md); padding: 14px 16px; } .support-faq-item summary { font-size: 0.95rem; font-weight: 700; color: #F8FAFC !important; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .support-faq-item summary::-webkit-details-marker { display: none; } .support-faq-item summary::after { content: "+"; color: #A5B4FC !important; font-weight: 800; font-size: 1.15rem; flex-shrink: 0; } .support-faq-item[open] summary::after { content: "–"; } .support-faq-item p { font-size: 0.87rem; color: #CBD5E1 !important; line-height: 1.55; margin: 12px 0 2px 0; } .support-faq-item p a { color: #818CF8 !important; } .support-report-textarea { width: 100%; min-height: 90px; max-height: 160px; resize: vertical; background: rgba(15, 23, 42, 0.8) !important; border: 1px solid rgba(255, 255, 255, 0.18) !important; border-radius: var(--border-radius-md); color: #F8FAFC !important; font-family: 'Outfit', sans-serif; font-size: 0.88rem; padding: 12px 14px; line-height: 1.5; box-sizing: border-box; } .support-report-textarea:focus { outline: none; border-color: var(--color-purple) !important; } .support-report-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; } .support-report-counter { font-size: 0.76rem; color: #94A3B8 !important; } .support-report-submit { background: var(--color-purple); color: var(--color-white); border: none; padding: 11px 20px; border-radius: var(--border-radius-pill); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.86rem; cursor: pointer; transition: all 0.15s ease; } .support-report-submit:hover { background: var(--color-purple-hover); transform: translateY(-1px); } /* --- Barra de pestañas inferior (Inicio / Mensajes / Ayuda) --- */ .support-panel-tabbar { display: flex; align-items: stretch; border-top: 1px solid rgba(255, 255, 255, 0.12) !important; background: rgba(15, 23, 42, 0.95) !important; flex-shrink: 0; } .support-tab-btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 6px 14px 6px; background: none; border: none; color: #94A3B8 !important; cursor: pointer; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.76rem; transition: color 0.15s ease; } .support-tab-btn:hover { color: #F8FAFC !important; } .support-tab-btn.active { color: #A5B4FC !important; } @media (max-width: 480px) { .support-panel { right: 12px; left: 12px; max-width: none; height: min(680px, 78vh); bottom: 88px; } .support-fab { right: 16px; bottom: 16px; } } /* ========================================================================== ESTADÍSTICAS DE ESTUDIO (gráfico de barras + resumen "Wrapped") ========================================================================== */ .study-wrapped-btn { background: linear-gradient(135deg, var(--color-purple), #7c3aed); color: var(--color-white); border: none; padding: 9px 16px; border-radius: var(--border-radius-pill); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.82rem; cursor: pointer; transition: all 0.15s ease; white-space: nowrap; } .study-wrapped-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(99, 102, 241, 0.5); } .study-yesterday-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; } .study-yesterday-card { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--gray-800); border-radius: var(--border-radius-lg); padding: 14px 16px; } .study-yesterday-icon { font-size: 1.6rem; flex-shrink: 0; } .study-yesterday-value { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--color-white); margin: 0; } .study-yesterday-label { font-size: 0.75rem; color: var(--text-muted); margin: 2px 0 0 0; } .study-chart-toggle { display: inline-flex; background: var(--gray-800); border-radius: var(--border-radius-pill); padding: 3px; margin-bottom: 18px; gap: 2px; } .study-range-btn { background: none; border: none; color: var(--text-muted); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.78rem; padding: 6px 16px; border-radius: var(--border-radius-pill); cursor: pointer; transition: all 0.15s ease; } .study-range-btn.active { background: var(--color-purple); color: var(--color-white); } .study-bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding: 0 4px; margin-bottom: 18px; border-bottom: 1px solid var(--gray-800); } .study-bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; min-width: 4px; } .study-bar-track { width: 100%; max-width: 22px; height: 100%; display: flex; align-items: flex-end; } .study-bar-fill { width: 100%; background: linear-gradient(180deg, var(--color-brand-light), var(--color-purple)); border-radius: 4px 4px 0 0; transition: height 0.4s ease; } .study-bar-fill.is-today { background: linear-gradient(180deg, #fbbf24, var(--color-yellow)); } .study-bar-label { font-size: 0.66rem; color: var(--text-muted); font-weight: 600; } .study-totals-row { display: flex; gap: 24px; flex-wrap: wrap; } .study-totals-row > div { display: flex; flex-direction: column; gap: 2px; } .study-totals-row strong { font-family: 'Outfit', sans-serif; font-size: 1.05rem; color: var(--color-white); } .study-totals-label { font-size: 0.74rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; } /* --- Modal "Wrapped" --- */ .wrapped-modal-overlay { position: fixed; inset: 0; background: rgba(9, 13, 22, 0.8); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 3100; padding: 20px; animation: exitConfirmFadeIn 0.18s ease; } .wrapped-modal-card { position: relative; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; background: linear-gradient(165deg, #1e1b4b 0%, #111827 45%, #14101f 100%); border: 1px solid var(--gray-700); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-modal); padding: 44px 40px 40px 40px; text-align: center; animation: exitConfirmPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .wrapped-modal-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gray-700); background: var(--gray-800); color: var(--text-muted); cursor: pointer; font-size: 0.85rem; transition: all 0.15s ease; } .wrapped-modal-close:hover { color: var(--color-white); background: var(--gray-700); } .wrapped-modal-badge { display: inline-block; background: linear-gradient(135deg, var(--color-purple), var(--color-purple-hover)); color: var(--color-white); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.04em; padding: 7px 16px; border-radius: var(--border-radius-pill); margin-bottom: 18px; } .wrapped-modal-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--color-white); margin: 0 0 24px 0; line-height: 1.3; } .wrapped-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 24px; } .wrapped-stat-box { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--gray-700); border-radius: var(--border-radius-md); padding: 18px 10px; } .wrapped-stat-value { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.6rem; color: var(--color-white); margin: 0 0 4px 0; } .wrapped-stat-label { font-size: 0.78rem; color: var(--text-muted); margin: 0; line-height: 1.3; } .wrapped-mini-chart { display: flex; align-items: flex-end; gap: 10px; height: 110px; margin-bottom: 16px; } .wrapped-bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; } .wrapped-bar-track { width: 100%; max-width: 18px; height: 100%; display: flex; align-items: flex-end; } .wrapped-bar-fill { width: 100%; background: linear-gradient(180deg, var(--color-brand-light), var(--color-purple)); border-radius: 4px 4px 0 0; } .wrapped-bar-label { font-size: 0.68rem; color: var(--text-muted); font-weight: 600; } .wrapped-trend-text { font-size: 0.92rem; color: var(--gray-200); line-height: 1.45; margin: 0 0 20px 0; } .wrapped-month-box { display: flex; align-items: center; justify-content: space-between; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--gray-800); border-radius: var(--border-radius-md); padding: 14px 18px; font-size: 0.88rem; color: var(--text-muted); margin-bottom: 20px; } .wrapped-month-box strong { color: var(--color-white); font-family: 'Outfit', sans-serif; } .wrapped-motivation-text { font-size: 0.92rem; color: var(--gray-200); line-height: 1.55; margin: 0 0 24px 0; } .wrapped-cta-btn { width: 100%; padding: 17px; border-radius: var(--border-radius-pill); border: none; background: linear-gradient(135deg, var(--color-purple), var(--color-purple-hover)); color: var(--color-white); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.02rem; cursor: pointer; box-shadow: 0 8px 20px -4px rgba(99, 102, 241, 0.55); transition: transform 0.15s ease, box-shadow 0.15s ease; } .wrapped-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -4px rgba(99, 102, 241, 0.65); } /* ========================================================================== MODAL DE BIENVENIDA TRAS INACTIVIDAD (COMEBACK) ========================================================================== */ .comeback-modal-overlay { position: fixed; inset: 0; background: rgba(9, 13, 22, 0.8); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 3100; padding: 20px; animation: exitConfirmFadeIn 0.18s ease; } .comeback-modal-card { position: relative; width: 100%; max-width: 400px; max-height: 90vh; overflow-y: auto; background: linear-gradient(165deg, #2d1b4e 0%, #111827 45%, #1a0f2e 100%); border: 2px solid #ec4899; border-radius: var(--border-radius-xl); box-shadow: var(--shadow-modal); padding: 32px 28px 28px 28px; text-align: center; animation: exitConfirmPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), comebackCardGlow 2.2s ease-in-out infinite 0.3s; } .comeback-modal-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gray-700); background: var(--gray-800); color: var(--text-muted); cursor: pointer; font-size: 0.85rem; transition: all 0.15s ease; } .comeback-modal-close:hover { color: var(--color-white); background: var(--gray-700); } .comeback-modal-emoji { font-size: 3.4rem; margin-bottom: 8px; display: inline-block; animation: comebackEmojiBounce 1.1s ease-in-out infinite; } .comeback-modal-badge { display: inline-block; background: linear-gradient(135deg, #ec4899, #f59e0b); color: var(--color-white); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; padding: 7px 16px; border-radius: var(--border-radius-pill); margin-bottom: 14px; box-shadow: 0 4px 14px -2px rgba(236, 72, 153, 0.5); } .comeback-modal-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.5rem; color: var(--color-white); margin: 0 0 8px 0; line-height: 1.25; } .comeback-modal-subtitle { font-size: 0.86rem; color: var(--text-muted); margin: 0 0 20px 0; line-height: 1.4; } .comeback-modal-subtitle strong { color: var(--color-white); } .comeback-stats-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 18px; } .comeback-stat-box { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--gray-700); border-radius: var(--border-radius-md); padding: 12px 6px; } .comeback-stat-value { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.15rem; color: var(--color-white); margin: 0 0 2px 0; } .comeback-stat-label { font-size: 0.66rem; color: var(--text-muted); margin: 0; line-height: 1.3; } .comeback-reassure-text { font-size: 0.85rem; color: var(--gray-200); line-height: 1.5; margin: 0 0 10px 0; } .comeback-motivation-text { font-size: 0.86rem; color: var(--color-brand-light); font-weight: 700; line-height: 1.5; margin: 0 0 20px 0; } .comeback-cta-btn { width: 100%; padding: 15px; border-radius: var(--border-radius-pill); border: none; background: linear-gradient(135deg, #ec4899, #f59e0b); color: var(--color-white); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 0.98rem; cursor: pointer; box-shadow: 0 8px 22px -4px rgba(236, 72, 153, 0.6); transition: transform 0.15s ease, box-shadow 0.15s ease; margin-bottom: 4px; } .comeback-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -4px rgba(236, 72, 153, 0.7); } @keyframes comebackCardGlow { 0%, 100% { box-shadow: var(--shadow-modal), 0 0 0 rgba(236, 72, 153, 0); } 50% { box-shadow: var(--shadow-modal), 0 0 32px rgba(236, 72, 153, 0.45); } } @keyframes comebackEmojiBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ========================================================================== ICONO DE REPORTAR ERROR EN LA LECCIÓN (solo visible dentro de una lección) ========================================================================== */ .lesson-modal-header-right { display: flex; align-items: center; gap: 12px; } .lesson-report-flag-btn { width: 32px; height: 32px; border-radius: var(--border-radius-md); border: 1px solid var(--gray-700); background: var(--gray-800); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; flex-shrink: 0; } .lesson-report-flag-btn:hover { color: var(--color-yellow); border-color: rgba(245, 158, 11, 0.5); background: rgba(245, 158, 11, 0.08); } .lesson-report-overlay { position: fixed; inset: 0; background: rgba(9, 13, 22, 0.8); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 4200; padding: 20px; animation: exitConfirmFadeIn 0.18s ease; } .lesson-report-card { position: relative; width: 100%; max-width: 400px; background: linear-gradient(165deg, #111827 0%, #14101f 100%); border: 1px solid var(--gray-700); border-radius: var(--border-radius-xl); box-shadow: var(--shadow-modal); padding: 32px 28px 26px 28px; text-align: center; animation: exitConfirmPop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .lesson-report-close { position: absolute; top: 16px; right: 16px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gray-700); background: var(--gray-800); color: var(--text-muted); cursor: pointer; font-size: 0.85rem; transition: all 0.15s ease; } .lesson-report-close:hover { color: var(--color-white); background: var(--gray-700); } .lesson-report-icon { font-size: 2.2rem; margin-bottom: 8px; } .lesson-report-title { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--color-white); margin: 0 0 8px 0; } .lesson-report-subtitle { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 18px 0; } .lesson-report-textarea { width: 100%; min-height: 110px; max-height: 200px; resize: vertical; background: var(--gray-800); border: 1px solid var(--gray-700); border-radius: var(--border-radius-md); color: var(--color-white); font-family: 'Outfit', sans-serif; font-size: 0.85rem; padding: 12px 14px; line-height: 1.5; box-sizing: border-box; text-align: left; } .lesson-report-textarea:focus { outline: none; border-color: var(--color-purple); } .lesson-report-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; } .lesson-report-counter { font-size: 0.72rem; color: var(--text-muted); } .lesson-report-counter.is-limit { color: var(--color-red); font-weight: 700; } .lesson-report-submit { background: var(--color-purple); color: var(--color-white); border: none; padding: 10px 18px; border-radius: var(--border-radius-pill); font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all 0.15s ease; } .lesson-report-submit:hover { background: var(--color-purple-hover); transform: translateY(-1px); } /* Insignia del nivel dentro del banner de "curso activo" (más grande que en la tarjeta) */ .course-banner-icon svg { width: 58px; height: 58px; } .settings-menu-item { transition: background-color 0.2s ease, transform 0.15s ease !important; } .settings-menu-item:hover { background-color: rgba(255, 255, 255, 0.08) !important; transform: translateX(2px); } #btn-sidebar-settings:hover { transform: scale(1.1) rotate(15deg); background-color: rgba(255, 255, 255, 0.15) !important; } /* Menú Desplegable de Ajustes Estilo Sleek */ .settings-popover-menu { position: absolute; bottom: 74px; left: 8px; width: 240px; background: var(--dash-popover-bg); border: 1px solid var(--dash-popover-border); border-radius: 18px; padding: 8px 6px; box-shadow: 0 20px 45px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.05); z-index: 999; backdrop-filter: blur(12px); } [data-theme="light"] .settings-popover-menu { box-shadow: 0 20px 45px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(15, 23, 42, 0.04); } .popover-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 12px; color: var(--text-primary); font-weight: 700; font-size: 0.88rem; cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; font-family: 'Outfit', sans-serif; } .popover-item:hover:not(.no-hover-effect) { background-color: rgba(255, 255, 255, 0.07); color: var(--text-primary); } [data-theme="light"] .popover-item:hover:not(.no-hover-effect) { background-color: rgba(15, 23, 42, 0.06); } .popover-item-left { display: flex; align-items: center; gap: 12px; } .popover-icon { opacity: 0.9; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; } .popover-icon svg { width: 18px; height: 18px; } .popover-divider { height: 1px; background: rgba(255, 255, 255, 0.08); margin: 6px 10px; } .popover-item.logout-item { color: #f87171; } .popover-item.logout-item:hover { background-color: rgba(239, 68, 68, 0.12); color: #ef4444; } /* UI Toggle Switch */ .ui-toggle-switch { position: relative; display: inline-block; width: 38px; height: 20px; } .ui-toggle-switch input { opacity: 0; width: 0; height: 0; } .ui-toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--gray-700, #374151); transition: .3s; border-radius: 20px; } .ui-toggle-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; transition: .3s; border-radius: 50%; } .ui-toggle-switch input:checked + .ui-toggle-slider { background-color: #10b981; } .ui-toggle-switch input:checked + .ui-toggle-slider:before { transform: translateX(18px); } /* ========================================================================== ANIMACIÓN DE ENTRADA CASCADA DE ARRIBA ABAJO PARA ÁREAS DE APRENDIZAJE ========================================================================== */ @keyframes cardSlideDownCascade { 0% { opacity: 0; transform: translateY(-55px) scale(0.95); } 65% { opacity: 0.95; transform: translateY(5px) scale(1.008); } 100% { opacity: 1; transform: translateY(0) scale(1); } } /* Animación base para todas las tarjetas de la rejilla */ .courses-grid > .course-card { opacity: 0; animation: cardSlideDownCascade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; will-change: transform, opacity; } /* Retardo escalonado de arriba a abajo desde Finanzas (1ª) hasta Sucesiones y Donaciones (16ª) */ #learn-categories-view .courses-grid > .course-card:nth-child(1) { animation-delay: 0.04s; } #learn-categories-view .courses-grid > .course-card:nth-child(2) { animation-delay: 0.10s; } #learn-categories-view .courses-grid > .course-card:nth-child(3) { animation-delay: 0.16s; } #learn-categories-view .courses-grid > .course-card:nth-child(4) { animation-delay: 0.22s; } #learn-categories-view .courses-grid > .course-card:nth-child(5) { animation-delay: 0.28s; } #learn-categories-view .courses-grid > .course-card:nth-child(6) { animation-delay: 0.34s; } #learn-categories-view .courses-grid > .course-card:nth-child(7) { animation-delay: 0.40s; } #learn-categories-view .courses-grid > .course-card:nth-child(8) { animation-delay: 0.46s; } #learn-categories-view .courses-grid > .course-card:nth-child(9) { animation-delay: 0.52s; } #learn-categories-view .courses-grid > .course-card:nth-child(10) { animation-delay: 0.58s; } #learn-categories-view .courses-grid > .course-card:nth-child(11) { animation-delay: 0.64s; } #learn-categories-view .courses-grid > .course-card:nth-child(12) { animation-delay: 0.70s; } #learn-categories-view .courses-grid > .course-card:nth-child(13) { animation-delay: 0.76s; } #learn-categories-view .courses-grid > .course-card:nth-child(14) { animation-delay: 0.82s; } #learn-categories-view .courses-grid > .course-card:nth-child(15) { animation-delay: 0.88s; } #learn-categories-view .courses-grid > .course-card:nth-child(16) { animation-delay: 0.94s; } /* Escalonamiento secundario para rejillas internas */ .courses-grid:not(#learn-categories-view .courses-grid) > .course-card:nth-child(1) { animation-delay: 0.04s; } .courses-grid:not(#learn-categories-view .courses-grid) > .course-card:nth-child(2) { animation-delay: 0.08s; } .courses-grid:not(#learn-categories-view .courses-grid) > .course-card:nth-child(3) { animation-delay: 0.12s; } .courses-grid:not(#learn-categories-view .courses-grid) > .course-card:nth-child(4) { animation-delay: 0.16s; } .courses-grid:not(#learn-categories-view .courses-grid) > .course-card:nth-child(5) { animation-delay: 0.20s; } .courses-grid:not(#learn-categories-view .courses-grid) > .course-card:nth-child(6) { animation-delay: 0.24s; } .courses-grid:not(#learn-categories-view .courses-grid) > .course-card:nth-child(7) { animation-delay: 0.28s; } .courses-grid:not(#learn-categories-view .courses-grid) > .course-card:nth-child(8) { animation-delay: 0.32s; } /* ========================================================================== ANIMACIONES DE ENTRADA Y DESTACADO PARA SECCIÓN HACERSE PRO (PREMIUM) ========================================================================== */ /* Header Hero */ @keyframes premiumHeroSlideDown { 0% { opacity: 0; transform: translateY(-40px); } 100% { opacity: 1; transform: translateY(0); } } /* Insignia amarilla de descuento arriba (✨ Ahorra 50%...) */ @keyframes yellowBadgeBounce { 0% { opacity: 0; transform: translateY(-25px) scale(0.85); } 60% { opacity: 1; transform: translateY(2px) scale(1.12); /* Se agranda un poco */ } 85% { transform: translateY(-1px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); /* Vuelve a posición normal */ } } /* Tarjetas normales (Gratis y Mensual) */ @keyframes priceCardSlideUp { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } /* LA OFERTA AMARILLA (Tarjeta De por Vida / Mejor Oferta) */ @keyframes yellowOfferPopScale { 0% { opacity: 0; transform: translateY(55px) scale(0.9); } 55% { opacity: 1; transform: translateY(-10px) scale(1.09); /* Se agranda un poco */ } 78% { transform: translateY(2px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); /* Vuelve a su posición normal */ } } /* Vibración sutil periódica cada cierto tiempo (cada 7.5 segundos) */ @keyframes yellowOfferPeriodicVibrate { 0%, 82%, 100% { transform: translateY(0) scale(1) rotate(0deg); box-shadow: 0 8px 30px rgba(245, 158, 11, 0.15); } 85% { transform: translateY(-4px) scale(1.035) rotate(-1.2deg); box-shadow: 0 12px 35px rgba(245, 158, 11, 0.38); } 88% { transform: translateY(-2px) scale(1.035) rotate(1.2deg); box-shadow: 0 12px 35px rgba(245, 158, 11, 0.38); } 91% { transform: translateY(-1px) scale(1.02) rotate(-0.6deg); box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3); } 94% { transform: translateY(0) scale(1.01) rotate(0.6deg); box-shadow: 0 8px 30px rgba(245, 158, 11, 0.22); } } /* Insignia 'Mejor Oferta' dorada */ @keyframes popularRibbonPop { 0% { opacity: 0; transform: scale(0.5) rotate(-3deg); } 65% { opacity: 1; transform: scale(1.2) rotate(2deg); /* Se agranda un poco */ } 100% { opacity: 1; transform: scale(1) rotate(0deg); /* Vuelve a normal */ } } /* Tabla comparativa al final */ @keyframes comparisonTableFadeUp { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } } /* Reglas aplicadas cuando el tab-premium está activo */ #tab-premium.active .premium-hero { animation: premiumHeroSlideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } #tab-premium.active .pricing-toggle-wrapper { animation: premiumHeroSlideDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.1s; } #tab-premium.active .toggle-savings-badge { animation: yellowBadgeBounce 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; animation-delay: 0.2s; } #tab-premium.active .pricing-cards .price-card:nth-child(1) { animation: priceCardSlideUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.15s; } #tab-premium.active .pricing-cards .price-card:nth-child(2) { animation: priceCardSlideUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.25s; } /* La tarjeta de Oferta Amarilla (De por Vida): entrada + vibración periódica cada 7.5s */ #tab-premium.active .pricing-cards .price-card:nth-child(3), #tab-premium.active .pricing-cards .price-card.premium-card:last-child { animation: yellowOfferPopScale 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.35s forwards, yellowOfferPeriodicVibrate 7.5s ease-in-out 1.25s infinite; will-change: transform, opacity; } #tab-premium.active .pricing-cards .price-card:nth-child(3) .popular-ribbon, #tab-premium.active .pricing-cards .price-card.premium-card:last-child .popular-ribbon { animation: popularRibbonPop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards; } /* Tabla comparativa inferior */ #tab-premium.active > div:last-child { animation: comparisonTableFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: 0.45s; } /* ========================================================================== POLISH: TRANSICIONES Y ANIMACIONES ADICIONALES (toque final de vida) ========================================================================== */ /* --- Revelado suave al hacer scroll (secciones de la landing page) --- */ .reveal-on-scroll { opacity: 0; transform: translateY(26px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } /* --- Bloques "Qué aprenderás": el texto y la mascota entran desde su lado --- */ .track-feature-row .track-feature-text.reveal-on-scroll, .track-feature-row .track-feature-visual.reveal-on-scroll { transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .track-feature-row .track-feature-text.reveal-on-scroll { transform: translateX(-180px); } .track-feature-row .track-feature-visual.reveal-on-scroll { transform: translateX(180px); } .track-feature-row-reverse .track-feature-text.reveal-on-scroll { transform: translateX(180px); } .track-feature-row-reverse .track-feature-visual.reveal-on-scroll { transform: translateX(-180px); } .track-feature-row .track-feature-text.reveal-on-scroll.is-visible, .track-feature-row .track-feature-visual.reveal-on-scroll.is-visible { transform: translateX(0); } /* --- Entrada del hero al cargar la página --- */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .landing-hero .hero-mascot-visual { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; } .landing-hero .hero-title { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; } .landing-hero .hero-pointer-mascot { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both; } .landing-hero .hero-subtitle { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both; } .landing-hero .hero-right { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; } .landing-hero .stats-strip { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; } .landing-hero .hero-scroll-cue { animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both, heroScrollBounce 2.2s ease-in-out infinite 1.2s; } /* --- Micro-interacción del icono al pasar el ratón por una tarjeta de curso/área --- */ .course-card svg { transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); } .course-card:hover svg { transform: scale(1.08) rotate(-4deg); } /* --- Barrido de brillo al pasar el ratón por una barra de progreso --- */ @keyframes progressShimmerSweep { from { transform: translateX(-120%); } to { transform: translateX(320%); } } .course-card:hover [id^="course-progress-bar"], .course-card:hover [id^="category-"][id$="-progress-bar"] { position: relative; overflow: hidden; } .course-card:hover [id^="course-progress-bar"]::after, .course-card:hover [id^="category-"][id$="-progress-bar"]::after { content: ''; position: absolute; top: 0; left: 0; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent); animation: progressShimmerSweep 1.3s ease-in-out; } /* --- Entrada escalonada de tarjetas al abrir una rejilla de cursos/niveles --- */ @keyframes cardGridFadeIn { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .courses-grid .course-card { animation: cardGridFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; } .courses-grid .course-card:nth-child(1) { animation-delay: 0.02s; } .courses-grid .course-card:nth-child(2) { animation-delay: 0.07s; } .courses-grid .course-card:nth-child(3) { animation-delay: 0.12s; } .courses-grid .course-card:nth-child(4) { animation-delay: 0.17s; } .courses-grid .course-card:nth-child(5) { animation-delay: 0.22s; } .courses-grid .course-card:nth-child(6) { animation-delay: 0.27s; } .courses-grid .course-card:nth-child(n+7) { animation-delay: 0.3s; } /* --- FAQ: pequeña transición al desplegar una respuesta --- */ .faq-item p { animation: fadeIn 0.35s ease; } /* --- Respeto a la preferencia de movimiento reducido del usuario --- */ @media (prefers-reduced-motion: reduce) { .reveal-on-scroll, .landing-hero .hero-mascot-visual, .landing-hero .hero-title, .landing-hero .hero-pointer-mascot, .landing-hero .hero-subtitle, .landing-hero .hero-right, .landing-hero .stats-strip, .landing-hero .hero-scroll-cue, .courses-grid .course-card, .tracks-features .track-feature-row, .faq-item p { animation: none !important; opacity: 1 !important; transform: none !important; transition: none !important; } .course-card:hover [id^="course-progress-bar"]::after, .course-card:hover [id^="category-"][id$="-progress-bar"]::after { animation: none !important; } } /* ========================================================================== NUEVO PANEL DE SOPORTE VERDE ESTILO INTERCOM / FREECASH ========================================================================== */ .support-panel { position: fixed; bottom: 95px; right: 24px; width: 100%; max-width: 410px; height: min(720px, 84vh); background: #0d131f; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7); z-index: 2500; display: flex; flex-direction: column; overflow: hidden; font-family: 'Outfit', sans-serif; } /* Header Verde Intercom */ .support-green-header { background: linear-gradient(145deg, #00e676 0%, #00c853 100%); padding: 24px 24px 28px 24px; color: #003b19; position: relative; } .support-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .support-avatar-stack { display: flex; align-items: center; } .support-avatar-stack .s-avatar { width: 38px; height: 38px; border-radius: 50%; background: #ffffff; border: 2px solid #00e676; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-left: -10px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .support-avatar-stack .s-avatar:first-child { margin-left: 0; } .support-header-close { background: rgba(0, 0, 0, 0.1); border: none; color: #003b19; width: 32px; height: 32px; border-radius: 50%; font-size: 1rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } .support-header-close:hover { background: rgba(0, 0, 0, 0.2); } .support-greeting-title { font-size: 1.6rem; font-weight: 800; color: #003817; margin: 0 0 4px 0; line-height: 1.25; } .support-greeting-subtitle { font-size: 1.35rem; font-weight: 800; color: #002810; margin: 0; line-height: 1.25; } /* Tarjetas Blancas Destacadas */ .support-action-cards { display: flex; flex-direction: column; gap: 12px; margin-top: -16px; margin-bottom: 20px; position: relative; z-index: 2; } .support-white-card { background: #ffffff; border-radius: 16px; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: #111827; font-weight: 700; font-size: 0.95rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2); transition: transform 0.2s ease, box-shadow 0.2s ease; } .support-white-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); } .support-ext-icon { color: #00c853; font-weight: 900; font-size: 1.1rem; } /* Búsqueda y FAQ Container */ .support-search-container { background: #ffffff; border-radius: 20px; padding: 16px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); } .support-search-input-wrapper { position: relative; margin-bottom: 12px; } .support-search-input { width: 100%; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 38px 12px 16px; font-size: 0.92rem; font-weight: 700; color: #1f2937; outline: none; font-family: 'Outfit', sans-serif; } .support-search-icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #00c853; font-size: 1.1rem; pointer-events: none; } .support-faq-rows { display: flex; flex-direction: column; } .support-faq-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px; border-bottom: 1px solid #f3f4f6; color: #374151; font-size: 0.88rem; font-weight: 600; cursor: pointer; transition: background 0.15s ease; } .support-faq-row:last-child { border-bottom: none; } .support-faq-row:hover { background: #f9fafb; color: #111827; } .support-chevron { color: #00c853; font-size: 1.3rem; font-weight: 800; } /* Tabbar Inferior */ .support-panel-tabbar { display: flex; align-items: center; background: #ffffff; border-top: 1px solid #e5e7eb; padding: 8px 12px; } .support-tab-btn { flex: 1; background: transparent; border: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px; color: #6b7280; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: color 0.2s ease; } .support-tab-btn.active { color: #00c853 !important; } /* ========================================================================== MODAL DE PRECIOS CON DESCUENTO ESPECIAL (15% DTO) ========================================================================== */ .promo-discount-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(11, 15, 25, 0.85); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; z-index: 4000; animation: exitConfirmFadeIn 0.2s ease; } .promo-discount-container { background: var(--bg-card); border: 3px solid var(--border-color); border-radius: var(--border-radius-xl); width: 90%; max-width: 520px; padding: 40px 32px 32px 32px; box-shadow: 10px 10px 0px var(--border-color); position: relative; text-align: center; font-family: inherit; } .promo-discount-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font-size: 0.9rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .promo-discount-close:hover { transform: scale(1.1); background: var(--color-purple); color: white; } .promo-discount-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1.5px solid rgba(16, 185, 129, 0.3); padding: 6px 16px; border-radius: 99px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 20px; } .promo-discount-title { font-size: 1.8rem; font-weight: 900; color: var(--text-primary); margin: 0 0 8px 0; letter-spacing: -0.02em; } .promo-discount-subtitle { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 28px 0; } .promo-discount-card-box { background: var(--bg-primary); border: 2.5px solid var(--border-color); border-radius: var(--border-radius-lg); padding: 28px; position: relative; margin-bottom: 20px; text-align: left; box-shadow: inset 0 2px 8px rgba(0,0,0,0.2); } .promo-discount-offer-tag { position: absolute; top: -12px; right: 20px; background: linear-gradient(135deg, var(--color-purple), var(--color-purple-hover)); color: white; font-size: 0.7rem; font-weight: 800; padding: 4px 12px; border-radius: 8px; border: 2px solid var(--border-color); box-shadow: 2px 2px 0 var(--border-color); } .promo-discount-header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1.5px solid var(--border-color); } .promo-discount-header .plan-badge { font-size: 0.85rem; font-weight: 800; color: var(--color-brand-light); text-transform: uppercase; letter-spacing: 0.04em; } .promo-discount-header .price-row { display: flex; align-items: baseline; gap: 8px; } .promo-discount-header .price-old { font-size: 1.35rem; color: var(--text-muted); text-decoration: line-through; font-weight: 500; } .promo-discount-header .price-new { font-size: 2.4rem; font-weight: 900; color: #34d399; } .promo-discount-header .price-period { font-size: 0.95rem; color: var(--text-muted); font-weight: 700; } .promo-discount-benefits { list-style: none; padding: 0; margin: 0 0 24px 0; display: flex; flex-direction: column; gap: 10px; } .promo-discount-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; font-weight: 600; color: var(--text-primary); line-height: 1.4; } .promo-discount-benefits li span { color: #34d399; font-weight: 800; } .promo-discount-cta-btn { width: 100%; background: linear-gradient(135deg, var(--color-purple), var(--color-purple-hover)); color: white; border: 2px solid var(--border-color); padding: 14px; border-radius: var(--border-radius-md); font-size: 1rem; font-weight: 900; cursor: pointer; box-shadow: 3px 3px 0 var(--border-color); transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; } .promo-discount-cta-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--border-color); filter: brightness(1.08); } .promo-discount-cta-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--border-color); } .promo-discount-footer-text { font-size: 0.78rem; color: var(--text-muted); margin: 0; }