/* ================================================================
   FICHA PÚBLICA DEL MENTOR — misma familia que Mentores y Miembros
   (portada marino con la R, credencial, columna "Sobre" y cursos)
   Usa brand-cover.css (píldoras, pestañas) y catalog.css (tarjetas, cabeceras).
   ================================================================ */

/* ── Portada con la credencial ──
   Marino en los dos temas, misma receta que .bcov (brand-cover.css): es la
   cabecera de marca, no una superficie del tema. Colores literales a propósito:
   los tokens --pm-* del panel del creador no existen en esta página. */
.mpf-cover {
    position: relative; overflow: hidden; color: #fff;
    padding: 48px 0 40px;
    background:
        radial-gradient(70% 90% at 85% 0%, rgba(72,0,255,0.55), transparent 60%),
        radial-gradient(50% 60% at 0% 100%, rgba(224,99,213,0.16), transparent 60%),
        radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(160deg, #1F2148 0%, #14132E 60%, #0F0E24 100%);
}
.mpf-mark { position: absolute; right: 4%; top: -40px; height: 520px; opacity: 0.08; pointer-events: none; }
.mpf-mark svg { height: 100%; width: auto; color: #fff; }
.mpf-cover-in { position: relative; max-width: 1180px; margin: 0 auto; padding: 0 32px; }
/* Sangra hasta los bordes dentro del layout con sesión y devuelve el relleno: el contenido queda a 292 px como en el resto */
.main-authenticated .mpf-cover { margin: -24px -24px 0; padding-left: 24px; padding-right: 24px; }
.mpf-id { display: flex; align-items: center; gap: 34px; }
.mpf-ava {
    position: relative; flex-shrink: 0; width: 136px; height: 136px; border-radius: 50%;
    display: grid; place-items: center; overflow: visible; isolation: isolate;
    background: linear-gradient(135deg, #4800FF, #7C3AED);
    font: 850 54px/1 var(--font-display); color: #fff;
    box-shadow: 0 0 0 4px #14132E, 0 0 0 8px var(--color-lime), 0 30px 60px -24px rgba(0,0,0,0.7);
}
/* La imagen se ancla a la caja: con display:grid en el padre, height:100% no
   resolvía y la foto salía a su proporción natural (88×124), pisando el kicker. */
.mpf-ava img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.mpf-ver {
    position: absolute; right: -4px; bottom: 6px; width: 32px; height: 32px; border-radius: 50%; z-index: 1;
    background: var(--color-lime); color: #14132E; display: grid; place-items: center;
    box-shadow: 0 0 0 4px #14132E;
}
.mpf-who { min-width: 0; }
.mpf-name { margin: 0; font: 850 clamp(36px, 5vw, 58px)/0.94 var(--font-display); font-stretch: 86%; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; }
.mpf-name { overflow-wrap: anywhere; }
.mpf-name em {
    font-style: normal; display: inline; margin-top: 0.08em;
    background: var(--color-lime); color: var(--color-navy);
    padding: 0.02em 0.16em 0.06em; border-radius: 6px;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
    box-shadow: 0 12px 40px -12px color-mix(in srgb, var(--color-lime) 55%, transparent);
}
/* Apellidos o nombres de marca largos (12+ letras seguidas): un punto menos de cuerpo */
.mpf-name.is-long { font-size: clamp(28px, 3.8vw, 44px); }
.mpf-headline { margin: 14px 0 0; max-width: 60ch; font: 500 16px/1.45 var(--font-display); color: rgba(255,255,255,0.88); }
.mpf-tagline { margin: 10px 0 0; padding-left: 12px; border-left: 2px solid var(--color-lime); max-width: 56ch; font: 400 14px/1.45 var(--font-display); font-style: italic; color: rgba(255,255,255,0.72); }
.mpf-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.mpf-links a { display: inline-flex; align-items: center; gap: 7px; font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.78); text-decoration: none; transition: color 0.15s; }
.mpf-links a svg { width: 14px; height: 14px; }
.mpf-links a:hover { color: var(--color-lime-logo); }
.mpf-totals { margin-top: 30px; }

/* ── Cuerpo: columna "Sobre" + cursos ── */
.mpf-body { max-width: 1180px; margin: 0 auto; padding: 36px 32px 72px; display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 36px; align-items: start; }
.mpf-body--solo { grid-template-columns: minmax(0, 1fr); }
.mpf-body--solo .mpf-side { display: none; }
.main-authenticated:has(.mpf-body) { overflow-x: clip !important; }
.mpf-side { position: sticky; top: calc(var(--topbar-height, 64px) + 20px); }
.mpf-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 20px; padding: 24px; box-shadow: var(--shadow-card-rest); }
html[data-theme="light"] .mpf-card, html.light .mpf-card { background: #fff; border-color: #E6E6E2; box-shadow: 0 1px 2px rgba(20,21,26,0.04), 0 10px 26px -18px rgba(20,21,26,0.18); }
@media (prefers-color-scheme: light) { html[data-theme="auto"] .mpf-card { background: #fff; border-color: #E6E6E2; } }
.mpf-card-title { margin: 0 0 12px; font: 800 20px/1.1 var(--font-display); font-stretch: 90%; letter-spacing: -0.015em; text-transform: uppercase; color: var(--text-primary); }
.mpf-bio { margin: 0; font: 400 14.5px/1.6 var(--font-display); color: var(--text-secondary); white-space: pre-line; }
.mpf-video { margin-top: 16px; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; }
.mpf-video iframe { width: 100%; height: 100%; border: 0; display: block; }
.mpf-sub { margin: 22px 0 10px; font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-tertiary); }
.mpf-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.mpf-list li { display: flex; align-items: flex-start; gap: 10px; font: 500 13.5px/1.45 var(--font-display); color: var(--text-primary); }
.mpf-list li i { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px; background: var(--color-lime); color: #14132E; display: grid; place-items: center; }
.mpf-list--star li i { border-radius: 5px; background: var(--color-navy); color: var(--kicker-color); }
html[data-theme="dark"] .mpf-list--star li i, html.dark .mpf-list--star li i { background: rgba(255,255,255,0.1); }
.mpf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.mpf-tags span { font: 600 10px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 9px; border-radius: 8px; border: 1px solid var(--border-default); color: var(--text-secondary); }
.mpf-comm {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 15px 18px; border-radius: 14px;
    background: var(--color-navy); color: #fff; text-decoration: none;
    font: 700 13.5px/1.25 var(--font-display); transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset;
}
.mpf-comm > span { min-width: 0; }
.mpf-comm small { display: block; margin-top: 5px; font: 600 9.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-lime-logo); }
.mpf-comm svg { flex-shrink: 0; color: var(--color-lime-logo); }
.mpf-comm:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -18px rgba(20,19,46,0.6); }

.mpf-main { min-width: 0; }
.mpf-tabs { display: inline-flex; margin: 18px 0 20px; }
.mpf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.mpf-grid .course-card, .mpf-grid .fade-in { opacity: 1; transform: none; }
.mpf-grid .course-mentor-row { display: none; }
.mpf-note { margin: 0 0 14px; font: 600 10.5px/1.4 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.mpf-note b { color: var(--text-primary); }
.mpf-locked .course-card { opacity: 0.62; filter: saturate(0.7); }
.mpf-empty { margin: 16px 0 0; padding: 28px 0; border-top: 1px dashed var(--border-default); font: 600 11px/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }

@media (max-width: 960px) {
    .mpf-body { grid-template-columns: 1fr; gap: 28px; }
    .mpf-side { position: static; order: 2; }
    .mpf-main { order: 1; }
}
@media (max-width: 767px) {
    .mpf-cover { padding: 26px 0 24px; }
    /* Sin desplazamiento propio: arranca justo bajo la barra superior, como el resto */
    .main-authenticated .mpf-cover { margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
    .mpf-cover-in { padding: 0 14px; }
    .mpf-mark { height: 330px; top: -22px; right: -6%; }
    .mpf-id { flex-direction: column; align-items: flex-start; gap: 18px; }
    .mpf-ava { width: 88px; height: 88px; font-size: 34px; box-shadow: 0 0 0 3px #14132E, 0 0 0 5px var(--color-lime); }
    .mpf-who .k--block { margin-bottom: 10px; }
    .mpf-actions .btn-lime { width: 100%; }
    .mpf-ver { width: 22px; height: 22px; right: -2px; bottom: 2px; box-shadow: 0 0 0 3px #14132E; }
    .mpf-name { font-size: clamp(28px, 8.4vw, 36px); }
    .mpf-name.is-long { font-size: clamp(24px, 7vw, 30px); }
    .mpf-headline { font-size: 15px; }
    /* Envuelven como en el resto de cabeceras: en tira deslizable la última cifra
       aparecía cortada contra el borde sin ninguna pista de que se desliza. */
    .mpf-totals { margin: 18px 0 0; flex-wrap: wrap; gap: 8px; }
    .mpf-totals span { height: 34px; }
    .mpf-body { padding: 24px 14px 56px; }
    .mpf-card { padding: 20px; }
    .mpf-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
}
@media (max-width: 420px) { .mpf-grid { grid-template-columns: 1fr; } }
.mpf-actions { margin-top: 18px; }