/* ═══════════════════════════════════════════════════════════════ ACADEMIA MMB — Capa de "persona" por línea de curso (Fase 3 visual) ─────────────────────────────────────────────────────────────── Una MISMA marca, distinta CARA por línea. Esta hoja NO redefine la estructura de ningún componente: solo ajusta, dentro del scope de cada persona, unas pocas "perillas" (tipografía, densidad, radios, intensidad de efectos) sobre los tokens y componentes que ya existen en mmb-tokens.css / mmb-components.css / mmb-curso-landing.css. Uso: añadir data-mmb-persona="profesional|oposiciones|mayores|ninos" en . Sin ese atributo, esta hoja NO aplica NADA (todo va scopeado bajo :root[data-mmb-persona="…"]) → cero riesgo de fuga a la portada o a páginas no migradas. Perillas (variables) que cada persona ajusta: --p-fx 0..1 intensidad de efectos (glow / tilt / brillos) --p-radius-* radios locales (redondez de la persona) La escala tipográfica se controla con font-size en :root del scope (el rem escala toda la página de forma coherente). ═══════════════════════════════════════════════════════════════ */ :root[data-mmb-persona]{ --p-fx: 1; /* efectos a tope por defecto */ } /* ════════════════════════════════════════════════════════════════ PERSONA · PROFESIONAL (Office / Word / Excel / Competencias / Mecanografía) — orientada a empleo y productividad. Es prácticamente el estado actual: solo formaliza el tono. Sirve de línea base y valida el mecanismo sin cambios visibles bruscos. ════════════════════════════════════════════════════════════════ */ :root[data-mmb-persona="profesional"]{ --p-fx: 1; } /* Etiqueta de tono "productividad / empleo" (eyebrow del hero). */ :root[data-mmb-persona="profesional"] .mmb-persona-eyebrow{ color: var(--mmb-office-cyan); } /* ════════════════════════════════════════════════════════════════ PERSONA · OPOSICIONES — orden, seriedad, resultados. Menos brillos, ritmo tipográfico sobrio, esquinas más rectas. ════════════════════════════════════════════════════════════════ */ :root[data-mmb-persona="oposiciones"]{ --p-fx: .5; /* Radios más rectos = sensación de rigor / documento oficial. */ --mmb-radius-sm: 8px; --mmb-radius-md: 12px; --mmb-radius-lg: 16px; } /* Titulares con más peso y menos "tech", cuerpo con interlínea de lectura. */ :root[data-mmb-persona="oposiciones"] body{ line-height: 1.65; } :root[data-mmb-persona="oposiciones"] .mmb-display{ letter-spacing: -0.01em; } /* Efectos atenuados: el barrido de brillo y el borde giratorio se calman. */ :root[data-mmb-persona="oposiciones"] .mmb-shine-sweep::after{ display: none; } :root[data-mmb-persona="oposiciones"] .mmb-border-glow:hover::before{ opacity: var(--p-fx); } /* Chip de "dato serio" reutilizable (nº de temas, plazas, simulacros). */ :root[data-mmb-persona="oposiciones"] .mmb-persona-eyebrow{ color: var(--mmb-gold); } /* ════════════════════════════════════════════════════════════════ PERSONA · MAYORES — tipografía grande, más aire, MENOS efectos, tono cálido y tranquilizador, objetivos de toque amplios. ════════════════════════════════════════════════════════════════ */ :root[data-mmb-persona="mayores"]{ font-size: 112.5%; /* base ~18px: todo el rem crece de golpe */ --p-fx: .3; /* efectos muy suaves */ --mmb-radius-sm: 16px; --mmb-radius-md: 22px; --mmb-radius-lg: 30px; --mmb-glass-blur: 12px; /* menos desenfoque = más nitidez */ /* Texto secundario más claro = mejor contraste, sin perder jerarquía. */ --mmb-ink-dim: #C4D0E0; } :root[data-mmb-persona="mayores"] body{ line-height: 1.75; /* lectura holgada */ } /* Botones grandes y con área de toque cómoda (≥ 52px). */ :root[data-mmb-persona="mayores"] .mmb-btn{ padding: 16px 34px; font-size: 1.05rem; min-height: 54px; } /* Reveal muy contenido (poco desplazamiento, sin blur) — menos "movimiento". */ :root[data-mmb-persona="mayores"] [data-mmb-reveal]{ transform: translateY(12px); filter: none; } /* Tilt 3D desactivado: nada de tarjetas que "se inclinan". */ :root[data-mmb-persona="mayores"] [data-mmb-tilt]{ transform: none !important; } /* Borde giratorio y barridos calmados. */ :root[data-mmb-persona="mayores"] .mmb-border-glow:hover::before{ opacity: var(--p-fx); animation-play-state: paused; } :root[data-mmb-persona="mayores"] .mmb-shine-sweep::after{ display: none; } :root[data-mmb-persona="mayores"] .mmb-persona-eyebrow{ color: var(--mmb-gold); } /* "Así funciona tu curso": en Mayores mantenemos el timeline LINEAL también en pantallas grandes. El modo circular de mmb-metodologia.css usa una geometría fija en px (aro 660px, radio 280px, tarjetas 186px) pensada para el tamaño de texto normal; con la tipografía ampliada de Mayores el texto desborda y las tarjetas se solapan. La fila lineal refluye bien y es más clara para el público mayor (menos efectos, coherente con esta persona). */ @media (min-width: 1180px){ :root[data-mmb-persona="mayores"] .mmb-flow{ display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); width: auto; height: auto; margin: 0 auto; } :root[data-mmb-persona="mayores"] .mmb-flow::before, :root[data-mmb-persona="mayores"] .mmb-flow::after{ display: none; } :root[data-mmb-persona="mayores"] .mmb-flow-step, :root[data-mmb-persona="mayores"] .mmb-flow-step[data-mmb-reveal].is-visible{ position: relative; top: auto; left: auto; width: auto; margin: 0; transform: none; } :root[data-mmb-persona="mayores"] .mmb-flow-step:hover, :root[data-mmb-persona="mayores"] .mmb-flow-step[data-mmb-reveal].is-visible:hover{ transform: translateY(-7px); } } /* ════════════════════════════════════════════════════════════════ PERSONA · NIÑOS — alegre, redondeada, colorida, con motivos. Pensada para captar a peques y tranquilizar a madres/padres. ════════════════════════════════════════════════════════════════ */ :root[data-mmb-persona="ninos"]{ --p-fx: .85; --mmb-radius-sm: 20px; /* todo MUY redondeado */ --mmb-radius-md: 28px; --mmb-radius-lg: 38px; /* Acentos vivos de apoyo para los motivos (además del --acc de la página). */ --p-joy-1: 255,138,76; /* coral */ --p-joy-2: 255,209,102; /* amarillo */ --p-joy-3: 79,193,255; /* cielo */ --p-joy-4: 122,224,140; /* verde menta */ } /* Botones bien redondeados y con presencia. */ :root[data-mmb-persona="ninos"] .mmb-btn{ border-radius: 999px; font-weight: 700; } /* ── Motivos alegres (SVG/emoji inline, sin descargas extra) ────── Clases OPT-IN que las páginas de niños aplican donde quieran. */ .mmb-joy-blob{ position: absolute; border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%; filter: blur(2px); opacity: .5; pointer-events: none; z-index: 0; animation: mmb-joy-float 9s var(--mmb-ease-soft, ease-in-out) infinite alternate; } .mmb-joy-blob.j1{ background: rgba(var(--p-joy-1,255,138,76),.45); } .mmb-joy-blob.j2{ background: rgba(var(--p-joy-2,255,209,102),.40); } .mmb-joy-blob.j3{ background: rgba(var(--p-joy-3,79,193,255),.42); } .mmb-joy-blob.j4{ background: rgba(var(--p-joy-4,122,224,140),.42); } @keyframes mmb-joy-float{ from{ transform: translateY(0) rotate(0deg); } to{ transform: translateY(-14px) rotate(8deg); } } /* Emoji-badge redondo para pasos / features infantiles. */ .mmb-joy-badge{ display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.6rem; line-height: 1; background: rgba(var(--acc,167,139,250),.16); border: 2px solid rgba(var(--acc,167,139,250),.42); } /* Tarjeta "Para madres y padres": confianza, tono cálido y claro. */ .mmb-parents-card{ border-radius: var(--mmb-radius-lg); border: 1px solid var(--mmb-glass-border); background: var(--mmb-glass-bg); backdrop-filter: blur(var(--mmb-glass-blur)); -webkit-backdrop-filter: blur(var(--mmb-glass-blur)); } /* ════════════════════════════════════════════════════════════════ Común a todas las personas: elemento "eyebrow" de tono (mono). Reutiliza el estilo mono del sitio; solo el color lo pone la persona. ════════════════════════════════════════════════════════════════ */ .mmb-persona-eyebrow{ font-family: 'JetBrains Mono', monospace; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; font-weight: 600; } /* ════════════════════════════════════════════════════════════════ Accesibilidad / movimiento reducido: los motivos y animaciones de persona se detienen igual que el resto del sistema. ════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce){ .mmb-joy-blob{ animation: none; } }