/* ============================================================
   MODULE DEMO — zona interactiva dentro de la ficha del módulo
   Se carga solo en los módulos que tienen demo (extraCss).
   Mobile-first. Todos los tokens vienen de variables.css.
   ============================================================ */

.mdemo {
    position: relative;
    overflow: hidden;
}

.mdemo__head {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto var(--space-10);
}

.mdemo__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--glass-btn-bg);
    border: 1px solid var(--glass-btn-border);
    border-radius: var(--radius-full);
    color: var(--glass-btn-color);
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.mdemo__eyebrow svg {
    width: 0.875rem;
    height: 0.875rem;
}

/* ── Acto 1: la frase del generador ─────────────────────── */
.mdemo__phrase {
    max-width: 52rem;
    margin: 0 auto var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-2xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--leading-relaxed);
    text-align: center;
}

.mdemo-pick {
    position: relative;
    display: inline-block;
    padding: 0 0.125rem;
    border: 0;
    border-bottom: 2px dotted currentColor;
    background: none;
    color: var(--brand-primary);
    font: inherit;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-smooth);
}

.mdemo-pick:hover,
.mdemo-pick:focus-visible,
.mdemo-pick.is-open {
    color: var(--gradient-active-to);
}

.mdemo-pick__menu {
    position: absolute;
    top: calc(100% + 0.625rem);
    left: 50%;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 11.5rem;
    padding: var(--space-1);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(-0.375rem);
    transition: opacity var(--duration-fast) var(--ease-smooth),
                transform var(--duration-fast) var(--ease-smooth);
}

.mdemo-pick.is-open .mdemo-pick__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.mdemo-pick__opt {
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    text-align: left;
    cursor: pointer;
}

.mdemo-pick__opt:hover {
    background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.mdemo-pick__opt.is-sel {
    color: var(--brand-primary);
}

.mdemo__course {
    margin-bottom: var(--space-8);
    min-height: 1.5rem;
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-style: italic;
    text-align: center;
}

.mdemo__actions {
    text-align: center;
}

/* ── Acto 2: el libro ───────────────────────────────────── */
.mdemo__stage {
    display: none;
    margin-top: var(--space-12);
}

.mdemo__stage.is-on {
    display: block;
}

.mdemo__steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

.mdemo-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-muted);
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
}

.mdemo-step.is-active {
    border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
    background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
    color: var(--brand-primary);
}

.mdemo-step.is-done {
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
    color: var(--color-success);
}

.mdemo__bookwrap {
    display: flex;
    justify-content: center;
    padding: var(--space-2) 0 var(--space-6);
    perspective: 1800px;
}

.mdemo-book {
    position: relative;
    width: min(20rem, 82vw);
    aspect-ratio: 3 / 4;
    transform: rotateX(6deg) rotateY(-16deg);
    transform-style: preserve-3d;
    transition: transform var(--duration-slow) var(--ease-smooth);
}

.mdemo-book.is-open {
    transform: rotateX(3deg) rotateY(0deg);
}

.mdemo-book__cover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-6) var(--space-5);
    background: linear-gradient(155deg,
        var(--gradient-active-from) 0%,
        var(--gradient-active-mid) 45%,
        var(--gradient-active-to) 100%);
    border-radius: 6px 12px 12px 6px;
    box-shadow: var(--shadow-xl);
    transform: rotateY(var(--mdemo-open, 0deg));
    transform-origin: left center;
    backface-visibility: hidden;
    transition: transform var(--duration-slow) var(--ease-smooth);
    cursor: pointer;
}

.mdemo-book__spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0.875rem;
    background: linear-gradient(90deg,
        color-mix(in srgb, #000 45%, transparent),
        transparent);
    border-radius: 6px 0 0 6px;
}

.mdemo-book__kicker {
    color: var(--text-on-primary);
    font-size: var(--text-2xs);
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.75;
}

.mdemo-book__title {
    color: var(--text-on-primary);
    font-size: var(--text-xl);
    font-weight: var(--fw-black);
    line-height: var(--leading-tight);
}

.mdemo-book__meta {
    color: var(--text-on-primary);
    font-size: var(--text-2xs);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-relaxed);
    opacity: 0.8;
}

.mdemo-book__page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 6px 10px 10px 6px;
    overflow-y: auto;
}

.mdemo-book__pageno {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-2);
    color: var(--text-muted);
    font-size: var(--text-2xs);
}

.mdemo-book__over {
    color: var(--brand-primary);
    font-size: var(--text-2xs);
    font-weight: var(--fw-extrabold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.mdemo-book__h {
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: var(--fw-extrabold);
    line-height: var(--leading-snug);
}

.mdemo-book__p {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* ── Actividades jugables ───────────────────────────────── */
.mdemo-act__q {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-snug);
}

.mdemo-act__opts {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mdemo-act__opt {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    background: var(--bg-inset);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-smooth),
                background var(--duration-fast) var(--ease-smooth);
}

.mdemo-act__opt:hover:not([disabled]) {
    border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
    background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
}

.mdemo-act__opt[disabled] {
    cursor: default;
}

.mdemo-act__opt.is-ok {
    border-color: color-mix(in srgb, var(--color-success) 55%, transparent);
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
}

.mdemo-act__opt.is-ko {
    border-color: color-mix(in srgb, var(--color-error) 50%, transparent);
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
}

.mdemo-act__mark {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.0625rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    opacity: 0.45;
}

.mdemo-act__opt.is-ok .mdemo-act__mark,
.mdemo-act__opt.is-ko .mdemo-act__mark {
    opacity: 1;
}

.mdemo-act__fb {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-normal);
}

.mdemo-act__fb--ok {
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
    color: var(--color-success);
}

.mdemo-act__fb--ko {
    background: color-mix(in srgb, var(--color-warning) 10%, transparent);
    color: var(--color-warning);
}

.mdemo-act__order {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.mdemo-act__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--bg-inset);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: grab;
    user-select: none;
}

.mdemo-act__row.is-drag {
    opacity: 0.4;
}

.mdemo-act__row.is-over {
    border-color: var(--brand-primary);
}

.mdemo-act__num {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    background: color-mix(in srgb, var(--brand-primary) 16%, transparent);
    border-radius: var(--radius-sm);
    color: var(--brand-primary);
    font-size: var(--text-2xs);
    font-weight: var(--fw-extrabold);
}

.mdemo-act__grip {
    margin-left: auto;
    color: var(--text-muted);
}

.mdemo-act__fill {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 2.1;
}

.mdemo-act__gap {
    display: inline-block;
    min-width: 7rem;
    margin: 0 0.1875rem;
    padding: 0.125rem var(--space-2);
    border: 1px dashed color-mix(in srgb, var(--brand-primary) 50%, transparent);
    border-radius: var(--radius-sm);
    color: var(--brand-primary);
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    text-align: center;
}

.mdemo-act__gap.is-filled {
    border-style: solid;
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

.mdemo-act__bank {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.mdemo-act__word {
    padding: var(--space-2) var(--space-3);
    background: var(--bg-inset);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: var(--text-xs);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}

.mdemo-act__word:hover:not([disabled]) {
    border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
}

.mdemo-act__word[disabled] {
    opacity: 0.32;
    cursor: default;
}

/* ── Certificado ────────────────────────────────────────── */
.mdemo-cert {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
}

.mdemo-cert__seal {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    background: linear-gradient(155deg,
        var(--gradient-active-from),
        var(--gradient-active-to));
    border-radius: 50%;
    color: var(--text-on-primary);
}

.mdemo-cert__seal svg {
    width: 1.5rem;
    height: 1.5rem;
}

.mdemo-cert__qr {
    width: 5.75rem;
    height: 5.75rem;
    padding: 0.4375rem;
    background: #ffffff;
    border-radius: var(--radius-md);
}

.mdemo-cert__note {
    color: var(--text-muted);
    font-size: var(--text-2xs);
    line-height: var(--leading-relaxed);
}

/* ── Controles ──────────────────────────────────────────── */
.mdemo__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.mdemo__hint {
    margin-top: var(--space-4);
    min-height: 1.25rem;
    color: var(--text-muted);
    font-size: var(--text-xs);
    text-align: center;
}

@media (min-width: 1024px) {
    .mdemo__phrase {
        font-size: var(--text-3xl);
    }

    .mdemo-book {
        width: 23.75rem;
    }

    .mdemo-book__page {
        padding: var(--space-8) var(--space-6);
    }
}


/* ═══════════════════════════════════════════════════════════
   ESTANTERÍA — portada de PRL (academia), con la tinta de Dynbel.
   Se mantiene la geometría original: grosores, alturas, ángulos y
   la coreografía de apertura. Lo único que cambia es el color.
   ═══════════════════════════════════════════════════════════ */

.mdemo-shelf {
    position: relative;
    overflow: hidden;
}

.mdemo-shelf__scene {
    position: relative;
    max-width: 900px;
    margin: var(--space-12) auto 0;
    padding: 24px var(--space-6) 0;
}

.mdemo-shelf__books {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    perspective: 1200px;
    perspective-origin: 55% 28%;
}

/* ── La caja-libro ── */
.mdemo-shelf__b3d {
    display: block;
    --bw: 136px;
    --ink: var(--color-primary);
    /* tinta real del ejemplar: idéntica en ambos temas */
    --book: color-mix(in srgb, var(--ink) calc(var(--t) * 4), #101a33);
    position: relative;
    flex: 0 0 var(--bt);
    width: var(--bt);
    height: var(--bh);
    transform-style: preserve-3d;
    transform: rotateX(5deg) rotateY(var(--ry, 0deg));
    transform-origin: center bottom;
    transition: transform 0.45s var(--ease-spring);
}

.mdemo-shelf__books > .mdemo-shelf__b3d:hover {
    transform: rotateX(5deg) rotateY(var(--ry, 0deg)) translateY(-10px);
}

.mdemo-shelf__face {
    position: absolute;
    backface-visibility: hidden;
}

/* Lomo (cara frontal de la caja) */
.mdemo-shelf__face--spine {
    inset: 0;
    transform: translateZ(calc(var(--bw) / 2));
    border-radius: 2px;
    background:
        /* canto de la tapa atrapando la luz */
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0, rgba(255, 255, 255, 0.05) 3px, transparent 14%),
        /* curvatura cilíndrica del lomo */
        linear-gradient(90deg,
            color-mix(in srgb, #000 32%, var(--book)) 0%,
            var(--book) 32%,
            color-mix(in srgb, #fff 10%, var(--book)) 72%,
            color-mix(in srgb, #000 22%, var(--book)) 100%);
    box-shadow:
        inset -2px 0 4px rgba(0, 0, 0, 0.4),
        inset 2px 0 2px rgba(255, 255, 255, 0.1),
        inset 0 -6px 10px -5px rgba(0, 0, 0, 0.4);
}

/* Tapa superior: el bloque de páginas visto desde arriba */
.mdemo-shelf__face--top {
    top: 0;
    left: 0;
    width: 100%;
    height: var(--bw);
    transform-origin: top center;
    transform: translateZ(calc(var(--bw) / -2)) rotateX(90deg);
    background:
        /* estrías de las páginas apiladas */
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px),
        /* sombra hacia la bisagra del lomo */
        linear-gradient(180deg, #ece5d4 0%, #f6f1e4 55%, #d8d0bc 100%);
    border-radius: 1px;
}

/* Canto delantero de páginas (cara trasera de la caja) */
.mdemo-shelf__face--edge {
    inset: 0;
    transform: rotateY(180deg) translateZ(calc(var(--bw) / 2));
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 2.5px),
        linear-gradient(180deg, #f2ecdd 0%, #e6dfcd 100%);
    border-radius: 1px;
}

/* Portada (cara derecha de la caja). La cadena de transforms la
   deja EXACTAMENTE donde estaba, pero con la bisagra (transform-
   origin) en el borde del lomo: --open la abre como tapa real. */
.mdemo-shelf__face--cover {
    top: 0;
    left: 50%;
    width: var(--bw);
    height: 100%;
    transform-origin: left center;
    transform:
        translateZ(calc(var(--bw) / 2))
        rotateY(90deg)
        translateZ(calc(var(--bt) / 2))
        rotateY(var(--open, 0deg));
}

/* Hojas interiores del libro de magIA: cuelgan de la misma bisagra,
   apiladas hacia dentro (--pi), y pasan una a una con --popen */
.mdemo-shelf__page {
    position: absolute;
    top: 1%;
    left: 50%;
    width: calc(var(--bw) - 10px);
    height: 98%;
    transform-origin: left center;
    transform:
        translateZ(calc(var(--bw) / 2))
        rotateY(90deg)
        translateZ(calc(var(--bt) / 2 - var(--pi, 1) * 1.6px))
        rotateY(var(--popen, 0deg));
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0, transparent 8%, transparent 92%, rgba(0, 0, 0, 0.06) 100%),
        linear-gradient(90deg, #e9e1cd 0%, #faf6ea 12%, #f3edde 88%, #e2dac5 100%);
    border-radius: 1px 3px 3px 1px;
    box-shadow: inset 3px 0 5px -3px rgba(0, 0, 0, 0.25);
}

/* Sellos editoriales en el lomo, como los libros reales: el
   logomark de PRL arriba y el de Dynbel abajo, en blanco */
.mdemo-shelf__spine-prl {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 48%;
    max-width: 15px;
    height: auto;
    opacity: 0.92;
    filter: drop-shadow(0.5px 1px 1px rgba(0, 0, 0, 0.35));
}

.mdemo-shelf__spine-dynbel {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 68%;
    max-width: 22px;
    height: auto;
    opacity: 0.85;
    filter: drop-shadow(0.5px 1px 1px rgba(0, 0, 0, 0.3));
}

/* Título en el lomo */
.mdemo-shelf__name {
    position: absolute;
    inset: 15% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    overflow: hidden;
}

/* ── Portada editorial de cada ejemplar ── */
.mdemo-shelf__face--cover-plain {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 8% 12% 9% 10%;
    overflow: hidden;
    border-radius: 2px 5px 5px 2px;
    background:
        radial-gradient(ellipse 120% 50% at 70% -6%, rgba(255, 255, 255, 0.10) 0%, transparent 55%),
        linear-gradient(135deg, color-mix(in srgb, #fff 6%, var(--book)) 0%, var(--book) 55%, color-mix(in srgb, #000 14%, var(--book)) 100%);
    box-shadow:
        inset 12px 0 0 -10px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
}

/* Sombra que el libro de adelante proyecta sobre esta portada:
   la franja derecha (la que queda medio escondida) se oscurece */
.mdemo-shelf__b3d--turned:not(:last-of-type) .mdemo-shelf__face--cover-plain::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to right, transparent 52%, rgba(0, 0, 0, 0.20) 76%, rgba(0, 0, 0, 0.48) 100%);
    pointer-events: none;
}

/* El título va impreso sobre la tapa: misma tipografía y MISMO
   tamaño en toda la colección, una sola línea — los nombres largos
   los corta el libro del frente, como en una estantería real. La
   sombra en em da el look de tinta estampada, no de overlay. */
.mdemo-shelf__plain-name {
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0.06em 0.08em 0 rgba(0, 0, 0, 0.28);
}

.mdemo-shelf__plain-rule {
    width: 26%;
    height: 2px;
    margin: 7px 0 5px;
    background: rgba(255, 255, 255, 0.55);
}

.mdemo-shelf__plain-sub {
    font-size: 0.48rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    text-shadow: 0.06em 0.08em 0 rgba(0, 0, 0, 0.22);
}

/* Cascada solapada: cada libro tapa parte de la portada del anterior */
.mdemo-shelf__b3d--turned {
    margin-left: clamp(16px, 2.2vw, 26px);
}

.mdemo-shelf__b3d--turned:first-of-type {
    margin-left: 0;
}

/* ── El libro de magIA: de frente, de pie ── */
.mdemo-shelf__pulled {
    position: relative;
    display: block;
    flex: 0 0 46px;
    margin-left: clamp(38px, 5vw, 60px);
    /* justo el aire que ocupa la portada girada: así la fila
       queda centrada de verdad sobre la repisa */
    margin-right: clamp(24px, 3vw, 40px);
    perspective: 1100px;
    text-decoration: none;
    z-index: 2;
}

/* Sombra de contacto del dúo sobre la repisa */
.mdemo-shelf__pulled::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 230px;
    height: 18px;
    margin-left: -115px;
    background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(0, 0, 0, 0.5), transparent 70%);
    filter: blur(2px);
}

.mdemo-shelf__b3d--hero .mdemo-shelf__face--spine {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0, rgba(255, 255, 255, 0.06) 3px, transparent 14%),
        linear-gradient(90deg,
            color-mix(in srgb, var(--color-primary) 50%, #0d1730) 0%,
            color-mix(in srgb, var(--color-primary) 76%, #132247) 45%,
            color-mix(in srgb, var(--color-primary) 62%, #070f22) 100%);
    box-shadow:
        inset -2px 0 4px rgba(0, 0, 0, 0.35),
        inset 2px 0 2px rgba(255, 255, 255, 0.14),
        0 0 22px color-mix(in srgb, var(--color-primary) 40%, transparent);
}

/* En el lomo del libro principal (más grueso) los sellos van
   un poco más grandes y con espacio propio */
.mdemo-shelf__b3d--hero .mdemo-shelf__spine-prl {
    top: 10px;
    max-width: 19px;
}

.mdemo-shelf__b3d--hero .mdemo-shelf__spine-dynbel {
    bottom: 10px;
    max-width: 28px;
}

.mdemo-shelf__hero-spinename {
    position: absolute;
    inset: 14% 0;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
}

/* Portada del libro de magIA: editorial, con detalle real */
.mdemo-shelf__b3d--hero .mdemo-shelf__face--cover {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 9% 11% 8%;
    overflow: hidden;
    /* al abrirse la tapa se ve su interior (el mismo material) */
    backface-visibility: visible;
    border-radius: 2px 6px 6px 2px;
    background:
        /* trama de tela (dos direcciones) */
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.016) 0 1px, transparent 1px 3px),
        /* luz de estudio entrando por arriba a la derecha */
        radial-gradient(ellipse 130% 55% at 78% -8%, rgba(255, 255, 255, 0.14) 0%, transparent 55%),
        linear-gradient(135deg, #1D4ED8 0%, #14328F 55%, #0B1E5C 100%);
    border: none;
    box-shadow:
        /* ranura de la bisagra junto al lomo */
        inset 14px 0 0 -11px rgba(0, 0, 0, 0.32),
        inset 16px 0 0 -14px rgba(255, 255, 255, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        inset -1px 0 0 rgba(0, 0, 0, 0.25),
        inset 0 -3px 7px rgba(0, 0, 0, 0.35);
}

/* Barrido de brillo que sigue el cursor (variables desde academia.js) */
.mdemo-shelf__b3d--hero .mdemo-shelf__face--cover::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.14) 48%, transparent 62%);
    background-size: 220% 220%;
    background-position: var(--gx, 120%) var(--gy, 120%);
    opacity: var(--gs, 0);
    transition: opacity 0.4s var(--ease-out);
    pointer-events: none;
}

/* El logomark de PRL como marca de agua de marketing: grande,
   traslúcido, sangrando por la esquina inferior derecha de la
   portada, detrás del texto */
.mdemo-shelf__cover-watermark {
    position: absolute;
    right: -13%;
    bottom: -5%;
    width: 66%;
    height: auto;
    opacity: 0.09;
    z-index: -1;
    pointer-events: none;
}

.mdemo-shelf__cover-dynbel {
    height: 14px;
    width: auto;
    opacity: 0.95;
    filter: drop-shadow(1px 1.5px 0 rgba(0, 0, 0, 0.22));
}

.mdemo-shelf__cover-badge {
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: 10%;
}

.mdemo-shelf__cover-title {
    font-size: clamp(1.28rem, 1.9vw, 1.48rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.035em;
    white-space: nowrap;
    color: #fff;
    /* impresión desplazada, como en la referencia */
    text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.22);
}

.mdemo-shelf__cover-sub2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.18);
}

.mdemo-shelf__cover-rule {
    width: 30%;
    height: 2px;
    background: rgba(255, 255, 255, 0.6);
    margin-top: auto;
}

.mdemo-shelf__cover-sub {
    margin-top: 7px;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* ── La repisa: visible y con cuerpo en ambos temas ── */
.mdemo-shelf__plank {
    position: relative;
    z-index: 2;
    display: block;
    height: 22px;
    margin-top: -2px;
    border-radius: 2px 2px 5px 5px;
    background: linear-gradient(180deg,
        #5a5666 0%,
        #494654 30%,
        #393744 68%,
        #2a2934 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.6);
    box-shadow:
        inset 0 8px 10px -8px rgba(0, 0, 0, 0.5),
        0 16px 30px -10px rgba(0, 0, 0, 0.6);
}

/* Fundido de salida hacia /biblioteca: del MISMO color de fondo
   del tema (oscuro en oscuro, claro en claro) — no se percibe
   como telón, solo como si la página se disolviera suavemente */
.mdemo-shelf__transition {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--bg-primary);
    opacity: 0;
    pointer-events: none;
}

/* Sombra del conjunto sobre el suelo */
.mdemo-shelf__floor {
    display: block;
    width: 70%;
    height: 22px;
    margin: 12px auto 0;
    background: radial-gradient(ellipse 46% 100% at 50% 0%, rgba(0, 0, 0, 0.4), transparent 68%);
}

/* ── Responsive: se van quedando solo los ejemplares clave ──
   Tablet: salen los 'desktop' (quedan SST, SIG, RUC, AMBIENTAL, PGR).
   Móvil: salen también los 'tab' (quedan SST, RUC, PGR + magIA). */
@media (max-width: 1023px) {
    .mdemo-shelf__b3d--desktop {
        display: none;
    }

    .mdemo-shelf__pulled {
        margin-left: clamp(32px, 5vw, 52px);
    }
}

@media (max-width: 640px) {
    .mdemo-shelf__b3d--tab {
        display: none;
    }

    .mdemo-shelf__scene {
        padding: 12px var(--space-3) 0;
    }

    .mdemo-shelf__books {
        transform: scale(0.84);
        transform-origin: center bottom;
    }

    .mdemo-shelf__b3d--turned {
        margin-left: clamp(12px, 3.5vw, 20px);
    }

    .mdemo-shelf__b3d--turned:first-of-type {
        margin-left: 0;
    }

    .mdemo-shelf__pulled {
        margin-left: 30px;
        margin-right: 28px;
    }
}

/* ── Tema claro: mismo libro, repisa de madera clara ── */
[data-theme="light"] .mdemo-shelf__plank {
    background: linear-gradient(180deg,
        #f8f4eb 0%,
        #eae2d2 30%,
        #d8cdb7 68%,
        #cabda2 100%);
    border-top: 1px solid #fff;
    border-bottom: 1px solid rgba(120, 100, 70, 0.4);
    box-shadow:
        inset 0 7px 9px -8px rgba(90, 74, 50, 0.45),
        0 10px 20px -8px rgba(90, 74, 50, 0.4);
}

[data-theme="light"] .mdemo-shelf__floor {
    height: 18px;
    background: radial-gradient(ellipse 42% 100% at 50% 0%, rgba(90, 74, 50, 0.22), transparent 65%);
}

[data-theme="light"] .mdemo-shelf__pulled::after {
    background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(90, 74, 50, 0.35), transparent 70%);
}

/* ── Reduced motion: sin transiciones, escena quieta ── */
@media (prefers-reduced-motion: reduce) {
    .mdemo-shelf__b3d,
    .mdemo-shelf__b3d--hero .mdemo-shelf__face--cover::before {
        transition: none;
    }
}

/* El generador aparece cuando el libro de la estantería se abre */
.mdemo__gentitle {
    color: var(--text-primary);
    font-size: var(--text-2xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-2);
}

.mdemo__gensub {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

.mdemo__hint--shelf {
    margin-top: 0;
    margin-bottom: var(--space-8);
}

/* El botón del libro no es un botón: es el libro */
.mdemo-shelf__pulled {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    color: inherit;
}

/* Encabezado de la sección */
.mdemo__head .badge {
    margin-bottom: var(--space-5);
}

.mdemo__heading {
    color: var(--text-primary);
    font-size: var(--text-4xl);
    font-weight: var(--fw-extrabold);
    line-height: var(--leading-tight);
    letter-spacing: -0.02em;
    margin-bottom: var(--space-5);
}

.mdemo__sub {
    color: var(--text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}


/* ═══════════════════════════════════════════════════════════
   EL GENERADOR — portado de PRL (biblioteca), con la tinta de
   Dynbel. Misma frase editorial, mismo libro que se escribe solo.
   Los nombres de clase se conservan del original.
   ═══════════════════════════════════════════════════════════ */

@keyframes bibPickFlip {
    0% { transform: translateY(0.5em); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes bibWrite {
    from { background-position: 120% 120%; }
    to { background-position: -30% -30%; }
}



/* ═══════════════════════════════════════════════════════
   EL TALLER DE magIA (demo en vivo)
   La frase editorial gigante configura y se disuelve al
   generar: un burst de magia da paso a un libro 3D REAL
   (geometría de la estantería de /academia) con portada
   brillante en movimiento y marca de agua, que se arma
   hoja a hoja y se puede hojear: índice, módulos con temas
   reales, imágenes del banco propio, actividad, examen,
   certificado y colofón. La repisa crece con cada curso.
   ═══════════════════════════════════════════════════════ */
.bib-gen {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 960px;
    margin: 0 auto;
}


.bib-gen__config {
    display: flex;
    flex-direction: column;
    align-items: center;
}


.bib-gen__config[hidden] {
    display: none;
}


/* ── La frase gigante ── */
.bib-gen__sentence {
    margin: var(--space-6) 0 0;
    text-align: center;
    font-size: clamp(1.5rem, 3.6vw, 2.6rem);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    max-width: 21ch;
}


.bib-gen__word {
    color: var(--text-primary);
}


/* Las palabras encendidas: se tocan y rotan su opción */
.bib-gen__pick {
    display: inline-block;
    padding: 0 0.08em;
    border: none;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    background-image: var(--gradient-text, linear-gradient(90deg, var(--color-primary), var(--color-accent)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-primary);
    border-bottom: 3px dotted color-mix(in srgb, var(--color-primary) 55%, transparent);
    transition: transform 0.18s var(--ease-spring), border-color 0.18s var(--ease-out);
}


.bib-gen__pick:hover {
    border-bottom-style: solid;
    transform: translateY(-2px);
}


.bib-gen__pick.is-flip {
    animation: bibPickFlip 0.32s var(--ease-spring);
}


/* El curso sugerido para la categoría elegida */
.bib-gen__coursehint {
    margin: var(--space-3) 0 0;
    font-size: var(--text-base);
    font-weight: 600;
    font-style: italic;
    color: var(--text-tertiary);
}


.bib-gen__gorow {
    margin-top: var(--space-6);
}


.bib-gen__go:disabled {
    opacity: 0.6;
    cursor: wait;
}


/* ── El escenario ── */
.bib-gen__out--stage {
    position: relative;
    width: 100%;
    text-align: center;
}


/* magIA narrando la fase en curso: texto GRANDE bajo el libro,
   estilo caption de video — cada fase entra con su propio fade */
.bib-gen__status {
    margin: var(--space-4) 0 0;
    font-size: clamp(1.1rem, 2.2vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    min-height: 1.6em;
}


/* El taller 3D: aquí se arma y se hojea el libro.
   La altura es la justa del libro + su sombra: sin aire muerto. */
.bib-gen__scene {
    position: relative;
    height: 520px;
    margin-top: var(--space-2);
    perspective: 1600px;
    perspective-origin: 50% 30%;
}


.bib-gen__scene[hidden] {
    display: none;
}


/* El burst de magia que abre la generación */
.bib-gen__burst {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 220px;
    height: 220px;
    margin: -110px 0 0 -110px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--color-primary) 55%, transparent) 0%,
        color-mix(in srgb, var(--color-primary) 22%, transparent) 40%,
        transparent 70%);
    filter: blur(6px);
    pointer-events: none;
}


.bib-gen__ring {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 200px;
    height: 200px;
    margin: -100px 0 0 -100px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-primary) 65%, transparent);
    pointer-events: none;
}


/* ── Las hojas: bisagra en el lomo, cara y dorso ── */
.bib-leaf {
    position: absolute;
    top: 4px;
    left: 50%;
    width: calc(var(--bw) - 12px);
    height: calc(100% - 8px);
    transform-origin: left center;
    transform-style: preserve-3d;
    /* capa propia por hoja: evita la costura de tiles del
       compositor de Chrome en capas 3D grandes */
    will-change: transform;
    /* 6px entre hojas: con menos separación el navegador no
       ordena bien las pilas al voltear y la guarda tapa al resto */
    /* bisagra 1px adentro del lomo: cubierta por la tapa pero SIN
       ranura visible en el medio del pliego */
    transform:
        translateZ(calc(var(--bw) / 2 - 1px))
        rotateY(90deg)
        translateZ(calc(var(--bt) / 2 - var(--pi, 1) * var(--zstep, 6px) + var(--dz, 0px)))
        rotateY(var(--lo, 0deg));
}


.bib-leaf--board {
    pointer-events: none;
}


.bib-leaf__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 10px;
    padding: 9% 10% 8%;
    overflow: hidden;
    border-radius: 1px 5px 5px 1px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0, transparent 7%, transparent 93%, rgba(0, 0, 0, 0.05) 100%),
        linear-gradient(90deg, #e7e7ea 0%, #fbfbfc 12%, #f4f4f6 88%, #e3e3e7 100%);
    box-shadow: inset 4px 0 6px -4px rgba(0, 0, 0, 0.22);
}


.bib-leaf__face--back {
    transform: rotateY(180deg);
    border-radius: 5px 1px 1px 5px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0, transparent 7%, transparent 93%, rgba(0, 0, 0, 0.05) 100%),
        linear-gradient(270deg, #e7e7ea 0%, #fbfbfc 12%, #f4f4f6 88%, #e3e3e7 100%);
    box-shadow: inset -4px 0 6px -4px rgba(0, 0, 0, 0.22);
}


/* Destello de escritura de magIA antes de cerrar cada hoja */
.bib-leaf__face.is-writing::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(206, 50, 255, 0.16) 48%, transparent 66%);
    background-size: 240% 240%;
    background-repeat: no-repeat;
    animation: bibWrite 0.5s ease-out;
    pointer-events: none;
}


/* Contenido editorial de las páginas */
.bib-page__over {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color-primary);
}


.bib-page__title {
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #232128;
}


.bib-page__line {
    display: block;
    height: 3.5px;
    border-radius: 2px;
    background: color-mix(in srgb, #4c4a54 13%, transparent);
}


.bib-page__img {
    width: 100%;
    height: 116px;
    object-fit: cover;
    border-radius: 4px;
    margin-top: 3px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
}


/* Foto protagonista de la teoría, encuadre Apple */
.bib-page__img--hero {
    height: 168px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}


.bib-page__img--tall {
    height: 212px;
}


.bib-page__caption {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #7b7983;
}


/* ── Índice de libro profesional (referencia aprobada) ──
   Nombre vertical en el margen, capítulos con rótulo magenta,
   tema + guía punteada + página, y la firma abajo a la derecha */
.bib-leaf__face--toc {
    /* margenes verticales FIJOS: el indice jamas toca los bordes */
    padding: 30px 9% 30px 0;
}


/* Viñetas de los módulos */
.bib-page__li {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}


.bib-page__lidot {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.75;
}


/* Ordenar elementos: filas arrastrables con número y agarre */
.bib-page__orderrow {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(32, 30, 38, 0.14);
    border-radius: 8px;
    background: transparent;
}


.bib-page__orderrow.is-active {
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
    transform: translateX(4px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}


.bib-page__ordernum {
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--color-primary);
}


.bib-page__grip {
    margin-left: auto;
    width: 10px;
    height: 8px;
    flex: 0 0 10px;
    background:
        linear-gradient(rgba(32, 30, 38, 0.4) 2px, transparent 2px) 0 0 / 100% 3px repeat-y;
}


/* Completar espacios: renglones con huecos por llenar */
.bib-page__fillrow {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
}


.bib-page__gap {
    width: 44px;
    height: 12px;
    flex: 0 0 44px;
    border-bottom: 1.5px dashed rgba(32, 30, 38, 0.45);
}


.bib-page__gap.is-filled {
    border-bottom-style: solid;
    border-bottom-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-radius: 3px 3px 0 0;
}


/* Actividad: sopa de letras con letras reales */
.bib-page__soup {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 5px;
    width: 88%;
    margin: 6px auto 0;
    padding: 12px;
    border: 1px solid rgba(32, 30, 38, 0.1);
    border-radius: 10px;
}


.bib-page__cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: rgba(32, 30, 38, 0.7);
    background: transparent;
    border-radius: 4px;
}


.bib-page__cell.is-hit {
    background: color-mix(in srgb, var(--color-primary) 14%, transparent);
    color: var(--color-primary);
    font-weight: 900;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--color-primary) 55%, transparent);
}


/* Examen */
.bib-page__q {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}


.bib-page__qtitle {
    font-size: 0.66rem;
    font-weight: 800;
    color: #232128;
}


.bib-page__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid rgba(32, 30, 38, 0.14);
    border-radius: 8px;
}


.bib-page__opt.is-good {
    border-color: color-mix(in srgb, var(--color-primary) 45%, transparent);
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}


.bib-page__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    border: 1px solid rgba(32, 30, 38, 0.45);
}


.bib-page__opt.is-good .bib-page__dot {
    border-color: var(--color-primary);
    background: var(--color-primary);
}


/* Certificado y colofón: páginas ceremoniales */
.bib-leaf__face--cert,
.bib-leaf__face--colophon {
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 7px;
}


.bib-leaf__face--cert::before,
.bib-leaf__face--colophon::before {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1.5px solid rgba(32, 30, 38, 0.5);
    border-radius: 4px;
    pointer-events: none;
}


.bib-page__cert-title {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #7b7983;
}


.bib-page__cert-name {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.15;
    color: #232128;
    max-width: 88%;
}


.bib-page__cert-rule {
    width: 30%;
    height: 1.5px;
    background: rgba(32, 30, 38, 0.55);
}


.bib-page__cert-sub {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #7b7983;
    max-width: 80%;
}


/* Sello de certificado fino: anillo doble con cintas, no una bola */
.bib-page__seal {
    position: relative;
    width: 34px;
    height: 34px;
    margin-top: 8px;
}


.bib-page__seal-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    box-shadow: inset 0 0 0 3px rgba(32, 30, 38, 0.06), inset 0 0 0 5px color-mix(in srgb, var(--color-primary) 35%, transparent);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}


.bib-page__seal-ribbon {
    position: absolute;
    top: 26px;
    left: 50%;
    width: 7px;
    height: 16px;
    background: color-mix(in srgb, var(--color-primary) 75%, #232128);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
}


.bib-page__seal-ribbon--a { transform: translateX(-9px) rotate(14deg); }

.bib-page__seal-ribbon--b { transform: translateX(2px) rotate(-14deg); }


/* ── Separador del examen: la hoja de color de la casa ── */
.bib-leaf__face--examdivider {
    justify-content: center;
    gap: 14px;
    background:
        radial-gradient(ellipse 130% 55% at 78% -8%, rgba(255, 255, 255, 0.12) 0%, transparent 55%),
        linear-gradient(155deg, #061633 0%, #0b2a63 40%, var(--ink, var(--color-primary)) 130%);
    box-shadow: inset 4px 0 6px -4px rgba(0, 0, 0, 0.4);
}


.bib-page__over--onink {
    color: rgba(255, 255, 255, 0.75);
}


.bib-page__title--onink {
    color: #fff;
    font-size: 1.5rem;
    text-shadow: 0.05em 0.07em 0 rgba(0, 0, 0, 0.25);
}


.bib-page__divrule {
    width: 26%;
    height: 2.5px;
    background: rgba(255, 255, 255, 0.6);
}


.bib-page__divmeta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}


.bib-page__divchip {
    padding: 5px 12px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
}


.bib-page__divstart {
    margin-top: 6px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.6);
    padding-bottom: 4px;
}


.bib-page__divwm {
    position: absolute;
    right: -8%;
    bottom: -4%;
    width: 55%;
    height: auto;
    opacity: 0.12;
    pointer-events: none;
}


.bib-page__foot--onink {
    color: rgba(255, 255, 255, 0.65);
}


/* Renglones de la pagina de notas */
.bib-page__noteline {
    display: block;
    width: 100%;
    height: 26px;
    border-bottom: 1.5px solid rgba(32, 30, 38, 0.14);
}


/* Cita editorial: bloque con pleca magenta */
.bib-page__quote {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 12px 14px;
    border-left: 3px solid var(--color-primary);
    background: rgba(32, 30, 38, 0.03);
    border-radius: 0 6px 6px 0;
}


/* Texto a dos columnas */
.bib-page__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
}


.bib-page__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}


/* Número de página al pie: ancla el diseño y elimina el vacío */
.bib-page__foot {
    margin-top: auto;
    align-self: center;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: rgba(32, 30, 38, 0.75);
    padding-top: 6px;
}


/* Ficha del curso en el índice: chips finos con la config real */
.bib-page__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}


.bib-page__chip {
    padding: 3px 9px;
    border: 1px solid rgba(32, 30, 38, 0.4);
    border-radius: 999px;
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #5d5b66;
}


/* Invitación al examen: píldora editorial (mock del botón real) */
.bib-page__startpill {
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #fff;
    background: linear-gradient(155deg, #061633 0%, #0b2a63 34%, var(--ink, var(--color-primary)) 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    margin: 2px 0 4px;
}


/* Logo en papel: el SVG blanco pasa a tinta sepia */
.bib-page__logo {
    height: 26px;
    width: auto;
    margin-top: 5px;
    filter: brightness(0) opacity(0.5);
}


/* ── Invitación y navegación del lector ── */
.bib-gen__hint {
    margin: var(--space-2) 0 0;
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-secondary);
}


.bib-gen__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}


.bib-gen__nav[hidden] {
    display: none;
}


.bib-gen__navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}


.bib-gen__navbtn:hover {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}


/* ── La repisa que crece (sin divider: solo los ejemplares) ── */
.bib-gen__shelfzone {
    margin-top: var(--space-2);
    text-align: center;
}


.bib-gen__shelfrow {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
    padding-top: 8px;
}


.bib-gen__shelfrow:empty {
    display: none;
}


/* ── El resultado, grande como los captions de los videos ── */
.bib-gen__caption {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-4) auto 0;
    max-width: 60ch;
}


.bib-gen__caption-big {
    font-size: var(--text-base);
    font-weight: var(--fw-semibold);
    line-height: var(--leading-snug);
    color: var(--text-secondary);
}


.bib-gen__caption-meta {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}


.bib-gen__count {
    margin: var(--space-1) auto 0;
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
}


.bib-gen__again {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-full);
    border: 1px solid var(--glass-btn-border);
    background: var(--glass-btn-bg);
    backdrop-filter: blur(var(--glass-blur-soft));
    -webkit-backdrop-filter: blur(var(--glass-blur-soft));
    box-shadow: var(--glass-shadow-light);
    color: var(--glass-btn-color);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: background var(--duration-normal) var(--ease-smooth),
                border-color var(--duration-normal) var(--ease-smooth);
}


.bib-gen__again:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 38%, transparent);
    background: color-mix(in srgb, var(--brand-primary) 16%, transparent);
}
@media (max-width: 640px) {

    /* En móvil se escala la escena completa (GSAP posee el
       transform del libro, no se puede escalar el libro directo).
       La altura interna se mantiene en 520px para que el libro de
       430px + 42px de piso QUEPA (con 400px se salía por arriba y
       pisaba el texto); el margen negativo devuelve el espacio
       que el escalado deja vacío por debajo (520 − 520×0.6). */
    .bib-gen__scene {
        height: 520px;
        /* 0.52 para que el libro ABIERTO (dos paginas ≈ 660px)
           quepa completo y centrado hasta en pantallas de 360px */
        transform: scale(0.52);
        transform-origin: 50% 0;
        margin-bottom: -250px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .bib-gen__pick,
    .bib-gen__pick.is-flip {
        animation: none;
        transition: none;
    }


    .bib-leaf__face.is-writing::after {
        animation: none;
        opacity: 0;
    }
}



/* La caja del libro generado (portado de PRL) */
.bib-forge__book {
    position: absolute;
    left: 50%;
    bottom: 42px;
    margin-left: calc(var(--bt) / -2);
    transition: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* tinta VIVA para el lomo y los cantos, a juego con el
       gradiente de botón de la portada */
    --book: color-mix(in srgb, var(--ink) 62%, #2a1050);
    /* TODA la pose vive en variables (GSAP las anima igual que
       --open/--lo): el transform directo de GSAP no rota bien
       esta caja 3D, las variables sí */
    transform-origin: 50% 100%;
    transform:
        translate(var(--fx, 0px), var(--fy, 0px))
        scale(var(--fs, 1))
        rotateX(var(--frx, 6deg))
        rotateY(var(--fry, -62deg));
}

.bib-forge__book:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 14px;
}

.bib-forge__shadow {
    position: absolute;
    left: 50%;
    bottom: 22px;
    width: 490px;
    height: 34px;
    margin-left: -245px;
    background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(0, 0, 0, 0.5), transparent 70%);
    filter: blur(4px);
    pointer-events: none;
}

[data-theme="light"] .bib-forge__shadow {
    background: radial-gradient(ellipse 50% 100% at 50% 50%, rgba(90, 74, 50, 0.38), transparent 70%);
}


/* La estantería se retira cuando el libro termina de abrirse */
.mdemo-shelf__scene.is-gone {
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity var(--duration-slow) var(--ease-smooth),
                transform var(--duration-slow) var(--ease-smooth);
}

/* ═══════════════════════════════════════════════════════════
   La portada y el índice del libro generado (portado de PRL)
   ═══════════════════════════════════════════════════════════ */



.bib-toc__vtitle {
    position: absolute;
    left: 4%;
    top: 8%;
    bottom: 8%;
    display: flex;
    justify-content: flex-end;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 1.5rem;
    font-weight: 900;
    /* aire para las descendentes (g, j, y): sin line-height 1 ni
       overflow hidden que las decapitaban */
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #232128;
    white-space: nowrap;
}


.bib-toc__body {
    margin-left: 27%;
    width: 64%;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    /* el reparto lo hace el propio alto de la pagina: con 3 o con
       8 modulos las filas se distribuyen parejo, siempre adentro */
    justify-content: space-evenly;
    gap: 0;
    text-align: left;
}


/* Con 6-8 modulos la tipografia se compacta ademas del reparto */
.bib-toc__body.is-dense {
    gap: 0;
}


.bib-toc__body.is-dense .bib-toc__chapter {
    font-size: 0.68rem;
}


.bib-toc__body.is-dense .bib-toc__sublabel {
    font-size: 0.6rem;
}


.bib-toc__body.is-dense .bib-toc__item {
    gap: 2px;
}


.bib-toc__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.bib-toc__chapter {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-primary);
}


.bib-toc__sub {
    display: flex;
    align-items: baseline;
    gap: 8px;
}


.bib-toc__sublabel {
    font-size: 0.7rem;
    font-weight: 500;
    color: #55535c;
    white-space: nowrap;
}


.bib-toc__leader {
    flex: 1;
    min-width: 16px;
    border-bottom: 1.5px dotted rgba(32, 30, 38, 0.28);
    transform: translateY(-3px);
}


.bib-toc__page {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--color-primary);
}


.bib-toc__author {
    position: absolute;
    right: 9%;
    bottom: 6%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}


.bib-toc__author-rule {
    width: 58px;
    height: 2px;
    background: #232128;
}


.bib-toc__author-name {
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7b7983;
}


/* La guarda interior de la tapa: papel limpio, sello centrado
   (doble clase: debe ganarle al flex-start de --back) */
.bib-cover__face--back.bib-cover__face--guard {
    align-items: center;
    justify-content: center;
}


.bib-cover__guardmark {
    height: 54px;
    width: auto;
    opacity: 0.35;
    margin: 0;
}


/* La guarda: papel limpio, solo el sello y el nombre */
.bib-cover__guardmark {
    height: 64px;
    width: auto;
    opacity: 0.3;
    margin: 0;
}


.bib-cover__guardname {
    margin-top: 12px;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(32, 30, 38, 0.7);
}


/* ── La tapa del libro generado ── */
.bib-cover {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--bw);
    height: 100%;
    transform-origin: left center;
    transform-style: preserve-3d;
    will-change: transform;
    /* --chinge: al abrir el libro, la bisagra de la tapa se muda al
       MISMO eje de las hojas (7px adentro) — las dos páginas del
       pliego comparten bisagra y el canal cierra perfecto */
    transform:
        translateZ(calc(var(--bw) / 2 - var(--cinset, 0px)))
        rotateY(90deg)
        translateZ(calc(var(--bt) / 2 - var(--chinge, 0px)))
        rotateY(var(--open, 0deg));
}


.bib-cover__face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7px;
    padding: 10%;
    overflow: hidden;
    border-radius: 2px 6px 6px 2px;
    /* el escenario centra el texto; la portada es editorial:
       todo alineado a la izquierda, como el libro insignia */
    text-align: left;
}


/* Portada: el MISMO gradiente de los botones principales de la
   casa (oscuro → violeta profundo → matiz vivo de la categoría),
   con marca de agua y brillo en movimiento */
.bib-cover__face--front {
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 3px),
        radial-gradient(ellipse 120% 50% at 70% -6%, rgba(255, 255, 255, 0.12) 0%, transparent 55%),
        linear-gradient(155deg, #061633 0%, #0b2a63 34%, var(--ink) 100%);
    box-shadow:
        inset 12px 0 0 -10px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -3px 6px rgba(0, 0, 0, 0.3);
}


/* La marca de agua de PRL: completa, anclada abajo a la derecha */
.bib-cover__wm {
    position: absolute;
    right: 6%;
    bottom: 5%;
    width: 50%;
    height: auto;
    opacity: 0.09;
    pointer-events: none;
}


/* Brillo de marketing en movimiento perpetuo */
.bib-cover__glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.16) 48%, transparent 62%);
    background-size: 240% 240%;
    /* sin repeat: el tile del gradiente repetido dibujaba
       rectángulos fantasma sobre la portada */
    background-repeat: no-repeat;
    animation: bibGlare 4.6s ease-in-out infinite;
    pointer-events: none;
}


/* Guarda interior de la tapa: el índice, en papel */
.bib-cover__face--back {
    transform: rotateY(180deg);
    border-radius: 6px 2px 2px 6px;
    justify-content: flex-start;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0, transparent 7%, transparent 93%, rgba(0, 0, 0, 0.05) 100%),
        linear-gradient(270deg, #e7e7ea 0%, #fbfbfc 12%, #f4f4f6 88%, #e3e3e7 100%);
    box-shadow: inset -4px 0 6px -4px rgba(0, 0, 0, 0.22);
}


/* La firma de magIA en la cabecera de la portada, como en el
   libro insignia de /academia */
.bib-cover__magia {
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: 12px;
}


.bib-cover__cat {
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}


.bib-cover__name {
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0.06em 0.08em 0 rgba(0, 0, 0, 0.28);
}


/* Dynbel AI bajo el nombre del curso: texto y logo en línea,
   como en el libro insignia */
.bib-cover__dyn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 1px 1.5px 0 rgba(0, 0, 0, 0.18);
}


.bib-cover__dynlogo {
    height: 13px;
    width: auto;
    opacity: 0.95;
    filter: drop-shadow(1px 1.5px 0 rgba(0, 0, 0, 0.22));
}


.bib-cover__rule {
    width: 26%;
    height: 2px;
    background: rgba(255, 255, 255, 0.55);
    /* empuja la línea y la meta al pie: arriba categoría y título,
       abajo el cierre — la retícula del libro insignia */
    margin-top: auto;
    margin-bottom: 2px;
}


.bib-cover__sub {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}
@media (prefers-reduced-motion: reduce) {


    .bib-cover__glare {
        animation: none;
    }
}


/* Los ejemplares pequeños que se van acumulando en el estante */



.bib-mini {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 42px;
    height: 118px;
    padding: 9px 0;
    border-radius: 3px 5px 5px 3px;
    box-shadow: 0 8px 14px -6px rgba(0, 0, 0, 0.5);
    transition: transform 0.25s var(--ease-spring);
    /* misma tinta viva del libro grande, para que al volar a la
       repisa no cambie de color */
    --minibook: color-mix(in srgb, var(--bink, var(--color-primary)) 62%, #2a1050);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.04) 3px, transparent 16%),
        linear-gradient(90deg,
            color-mix(in srgb, #000 30%, var(--minibook)) 0%,
            var(--minibook) 34%,
            color-mix(in srgb, #fff 10%, var(--minibook)) 72%,
            color-mix(in srgb, #000 20%, var(--minibook)) 100%);
    box-shadow: inset -1px 0 2px rgba(0, 0, 0, 0.35), inset 1px 0 1px rgba(255, 255, 255, 0.1);
}


.bib-mini:hover {
    transform: translateY(-5px);
}


.bib-mini__name {
    flex: 1;
    display: flex;
    align-items: center;
    /* en escritura vertical el eje principal se invierte: centrar
       en ambos ejes deja el nombre clavado al medio del lomo */
    justify-content: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    overflow: hidden;
    max-height: 74px;
}


/* Sellos del lomo en miniatura: PRL arriba, Dynbel al pie */
.bib-mini__logo {
    width: auto;
    opacity: 0.9;
    filter: drop-shadow(0.5px 1px 1px rgba(0, 0, 0, 0.35));
}


.bib-mini__logo--prl { height: 11px; }

.bib-mini__logo--dyn { height: 8px; }



/* ═══════════════════════════════════════════════════════════
   UNIVERSIDAD — "Toma el curso"
   Portado literal del diseño (Claude Design, Toma el curso v3).
   Los valores son los del diseño, no aproximaciones.
   La sección va siempre oscura: lleva .section--dark, que es lo
   que app.js observa para voltear los iconos de la navegación.
   ═══════════════════════════════════════════════════════════ */

.mu {
    --mu-bg:        #060610;
    --mu-surface:   #0b0b14;
    --mu-line:      #15151f;
    --mu-line-2:    #1a1a28;
    --mu-line-3:    #1e1e30;
    --mu-line-4:    #2e2e4c;
    --mu-ink:       #fafafa;
    --mu-ink-2:     #c9c9d4;
    --mu-ink-3:     #a1a1aa;
    --mu-ink-4:     #8b8b9c;
    --mu-ink-5:     #71717a;
    --mu-ink-6:     #52525b;
    --mu-blue:      #1E7BFF;
    --mu-cyan:      #22D3EE;
    --mu-grad:      linear-gradient(135deg, #1E7BFF, #22D3EE);
    --mu-green:     #22c55e;
    --mu-green-soft:#5ee08a;
    --mu-mono:      'JetBrains Mono', ui-monospace, Menlo, monospace;

    background: var(--mu-bg);
    color: var(--mu-ink);
}

/* ── La ventana del producto ── */
.mu__app { max-width: 70rem; margin: 0 auto; }

/* ── Barra superior ── */
.mu-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 20px 0;
}

.mu-bar__left,
.mu-bar__right { display: flex; align-items: center; gap: 14px; }
.mu-bar__right { gap: 24px; }

.mu-bar__logo { display: block; width: 5.25rem; height: auto; }

.mu-bar__mark { display: flex; align-items: baseline; gap: 6px; }
.mu-bar__mark b { font-size: 13px; font-weight: 800; letter-spacing: 0.22em; }
.mu-bar__mark i { font-size: 13px; font-weight: 800; font-style: normal; letter-spacing: 0.1em; color: var(--mu-cyan); }

.mu-bar__sep { width: 1px; height: 16px; background: var(--mu-line-3); margin: 0 4px; }
.mu-bar__where { font-size: 13px; font-weight: 600; color: var(--mu-ink-3); }
/* En telefono la barra se queda con la marca, el sitio y el avatar */
.mu-bar__link { display: none; font-size: 13px; font-weight: 500; color: var(--mu-ink-6); }
.mu-bar__me { display: flex; align-items: center; gap: 10px; }
.mu-bar__name { display: none; font-size: 13px; font-weight: 500; color: var(--mu-ink-3); }

.mu-bar__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--mu-line);
    border: 1px solid var(--mu-line-3);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    color: var(--mu-ink-3);
}

/* Barra corta, la de las pantallas internas */
.mu-bar--sub { padding: 18px 0; }

.mu-bar--cert { flex-direction: column; align-items: stretch; gap: 16px; }
.mu-bar--cert .mu-foot__acts .mu-btn { flex: 1 1 0; padding-inline: 12px; }
/* Volver: circulo de vidrio con el chevron */
.mu-back {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    align-self: flex-start;
    gap: 14px;
    padding: 0;
    background: none;
    border: 0;
    font-family: inherit;
    cursor: pointer;
}

.mu-back__circle {
    --glass-reflex-light: 0.5;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.375rem;
    height: 2.375rem;
    background-color: var(--glass-bg);
    border: 1px solid color-mix(in srgb, var(--glass-light) 10%, transparent);
    border-radius: 999px;
    box-shadow: var(--glass-shadow-light);
    color: var(--mu-ink-2);
    transition: background-color var(--duration-fast) var(--ease-smooth),
                border-color var(--duration-fast) var(--ease-smooth),
                color var(--duration-fast) var(--ease-smooth);
    backdrop-filter: var(--glass-backdrop-soft);
    -webkit-backdrop-filter: var(--glass-backdrop-soft);
}

.mu-back__circle::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 35%);
    pointer-events: none;
}

.mu-back:hover .mu-back__circle {
    --glass-reflex-light: 0.7;
    background-color: var(--glass-bg-hover);
    border-color: color-mix(in srgb, var(--glass-light) 18%, transparent);
    color: var(--mu-ink);
}

.mu-back__txt { font-size: 13px; font-weight: 600; color: var(--mu-ink-3); }

.mu-back--toc .mu-back__circle { width: 2rem; height: 2rem; }

.mu-back--toc .mu-back__txt {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mu-ink-4);
}
.mu-bar__note { font-size: 12px; font-weight: 600; color: var(--mu-ink-6); }

/* ── Cuerpo ── */
.mu__body { padding: 32px 0; }

.mu-head {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin-bottom: 28px;
}

.mu-head__text { display: flex; flex-direction: column; gap: 14px; max-width: 580px; }

.mu-head__over {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--mu-blue);
}

.mu-head__h {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.08;
    text-wrap: pretty;
}

.mu-head__h em { font-style: normal; color: #6e6e85; }

.mu-head__p {
    margin: 0;
    max-width: 500px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--mu-ink-3);
    text-wrap: pretty;
}

.mu-head__plan { display: flex; flex-direction: column; gap: 10px; padding-bottom: 6px; }

.mu-head__planlbl {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mu-ink-6);
}

.mu-head__planval { display: flex; align-items: baseline; gap: 7px; }
.mu-head__planval b { font-size: 32px; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.mu-head__planval span { font-size: 15px; font-weight: 600; color: var(--mu-ink-6); }

.mu-head__bar { width: 100%; height: 2px; background: var(--mu-line-2); overflow: hidden; }
.mu-head__bar i { display: block; height: 100%; background-image: linear-gradient(90deg, #1E7BFF, #22D3EE); }

/* ── Las tres tarjetas de curso ── */
/* El catalogo se desliza en telefono y se abre en tres al llegar a escritorio */
.mu-swiper { position: relative; }

.mu-swiper__scroll {
    display: flex;
    gap: 24px;
    scroll-snap-type: x mandatory;
    /* El aire que .glass-bleed-scroll-x agrega no cuenta como desplazamiento */
    scroll-padding-inline: var(--glass-bleed);
    scrollbar-width: none;
}

.mu-swiper__scroll::-webkit-scrollbar { display: none; }
.mu-swiper .mu-card { flex: 0 0 78%; scroll-snap-align: start; }

.mu-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--mu-surface);
    border: 1px solid var(--mu-line-2);
    border-radius: 20px;
    overflow: hidden;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-normal) var(--ease-smooth);
}

.mu-card:hover,
.mu-card:focus-visible { border-color: var(--mu-line-4); }

.mu-card__shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.mu-card__shot img { width: 100%; height: 100%; object-fit: cover; }

.mu-card__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,6,16,0.85) 0%, rgba(6,6,16,0) 60%);
}

.mu-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    background: rgba(250,250,250,0.10);
    border: 1px solid rgba(250,250,250,0.18);
    border-radius: 999px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mu-card__done {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: rgba(250,250,250,0.10);
}

.mu-card__done i { display: block; height: 100%; background-image: linear-gradient(90deg, #1E7BFF, #22D3EE); }

.mu-card__body { display: flex; flex-direction: column; flex: 1; gap: 12px; padding: 24px 24px 22px; }

.mu-card__kind { display: flex; align-items: center; gap: 9px; }

.mu-card__kind b {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mu-ink-4);
}

.mu-card__kind span { font-size: 11px; font-weight: 600; color: var(--mu-ink-5); }

.mu-card__name {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.25;
    text-wrap: pretty;
}

.mu-card__desc {
    flex: 1;
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--mu-ink-5);
    text-wrap: pretty;
}

.mu-card__cta {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-top: 2px;
    font-size: 13px;
    font-weight: 800;
    color: var(--mu-ink-3);
}

.mu-card__cta--on { color: var(--mu-blue); }

/* ── Lección: temario + panel ── */
.mu-lesson { display: grid; grid-template-columns: 1fr; gap: 36px; }

.mu-toc { display: flex; flex-direction: column; }

.mu-toc__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 4px 0 20px;
}

.mu-toc__course { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; text-wrap: pretty; }
.mu-toc__prog { display: flex; flex-direction: column; gap: 8px; }
.mu-toc__bar { height: 2px; background: var(--mu-line-2); overflow: hidden; }
.mu-toc__bar i { display: block; height: 100%; background-image: linear-gradient(90deg, #1E7BFF, #22D3EE); }
.mu-toc__count { font-size: 11px; font-weight: 600; color: var(--mu-ink-6); font-variant-numeric: tabular-nums; }

.mu-toc__list { display: flex; flex-direction: column; gap: 22px; padding: 4px 0 8px; }

.mu-toc__sum {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mu-ink-4);
    cursor: pointer;
    list-style: none;
}

.mu-toc__sum::-webkit-details-marker { display: none; }
.mu-toc__sum svg { transition: transform var(--duration-fast) var(--ease-smooth); }
.mu-toc__fold[open] .mu-toc__sum svg { transform: rotate(180deg); }
.mu-toc__group { display: flex; flex-direction: column; gap: 4px; }

.mu-toc__mod {
    padding: 0 0 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mu-ink-5);
}

.mu-toc__item {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: start;
    width: 100%;
    padding: 11px 14px;
    margin: 0 -14px;
    background: none;
    border: 0;
    border-radius: 10px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-smooth);
}

.mu-toc__item:hover { background-color: rgba(250,250,250,0.03); }

.mu-toc__item.is-on {
    --glass-reflex-light: 0.5;
    background-color: color-mix(in srgb, var(--mu-blue) 12%, var(--glass-bg));
    box-shadow: var(--glass-shadow-light);
    backdrop-filter: var(--glass-backdrop-soft);
    -webkit-backdrop-filter: var(--glass-backdrop-soft);
}

.mu-toc__item svg { margin-top: 1px; }
.mu-toc__txt { display: flex; flex-direction: column; gap: 3px; }
.mu-toc__name { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--mu-ink-3); }
.mu-toc__item.is-on .mu-toc__name { font-weight: 800; color: var(--mu-ink); }
.mu-toc__meta { font-size: 11px; font-weight: 600; color: var(--mu-ink-5); }
.mu-toc__item.is-on .mu-toc__meta { color: var(--mu-ink-4); }

.mu-pane { display: flex; flex-direction: column; min-height: 0; }

.mu-pane__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 0;
}

.mu-pane__inner { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 40rem; }

.mu-pane__shot { position: relative; aspect-ratio: 26 / 10; border-radius: 16px; overflow: hidden; }
.mu-pane__shot img { width: 100%; height: 100%; object-fit: cover; }

.mu-pane__meta { display: flex; align-items: center; gap: 12px; }

.mu-pane__over {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--mu-blue);
}

.mu-pane__kind { font-size: 12px; font-weight: 600; color: var(--mu-ink-5); }

.mu-pane__h {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.12;
    text-wrap: pretty;
}

.mu-pane__p {
    margin: 0;
    font-size: 17px;
    line-height: 1.7;
    color: var(--mu-ink-2);
    text-wrap: pretty;
}

.mu-points { display: flex; flex-direction: column; gap: 14px; }
.mu-point { display: grid; grid-template-columns: 24px 1fr; gap: 16px; }

.mu-point__n {
    padding-top: 2px;
    font-family: var(--mu-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--mu-blue);
}

.mu-point__txt { display: flex; flex-direction: column; gap: 5px; }
.mu-point__h { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }
.mu-point__p { font-size: 14px; line-height: 1.6; color: var(--mu-ink-4); text-wrap: pretty; }

/* ── Pie de acciones ── */
.mu-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 24px 0 8px;
}

.mu-foot__note { font-size: 12px; font-weight: 500; text-align: center; color: var(--mu-ink-5); }
.mu-foot__acts { display: flex; gap: var(--space-4); }

/* En telefono los dos botones se reparten el ancho */
.mu-foot__acts .mu-btn { flex: 1 1 0; padding-inline: 12px; }

.mu-btn {
    --glass-reflex-light: 0.5;
    position: relative;
    padding: 11px 22px;
    white-space: nowrap;
    background-color: var(--glass-bg);
    border: 1px solid color-mix(in srgb, var(--glass-light) 10%, transparent);
    border-radius: 999px;
    box-shadow: var(--glass-shadow-light);
    color: var(--mu-ink-2);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-smooth),
                background-color var(--duration-fast) var(--ease-smooth),
                border-color var(--duration-fast) var(--ease-smooth),
                transform var(--duration-fast) var(--ease-smooth);
    backdrop-filter: var(--glass-backdrop-soft);
    -webkit-backdrop-filter: var(--glass-backdrop-soft);
}

/* El reflejo especular de arriba a la izquierda */
.mu-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 35%);
    pointer-events: none;
}

.mu-btn:hover:not([disabled]) {
    --glass-reflex-light: 0.7;
    transform: translateY(-1px);
    background-color: var(--glass-bg-hover);
    border-color: color-mix(in srgb, var(--glass-light) 18%, transparent);
    color: var(--mu-ink);
}

.mu-btn:active:not([disabled]) { transform: scale(0.98); }
.mu-btn[disabled] { opacity: 0.4; cursor: default; }

.mu-btn--go {
    --glass-reflex-light: 0;
    --glass-reflex-dark: 1.2;
    background-color: transparent;
    background-image: var(--gradient-fill);
    border-color: rgba(255,255,255,0.1);
    box-shadow: var(--glass-shadow-light), 0 2px 8px rgba(30,123,255,0.15);
    color: var(--text-on-primary);
    font-weight: 800;
}

.mu-btn--go::after { display: none; }

/* Al acertar, el botón de seguir se llena antes de pasar solo */
.mu-btn.is-cuenta { overflow: hidden; isolation: isolate; }

.mu-btn.is-cuenta::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: rgba(255, 255, 255, 0.22);
    transform-origin: left center;
    animation: ziCuenta 2s linear forwards;
}

.mu-btn--icon { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }

.mu-btn--go:hover:not([disabled]) {
    --glass-reflex-dark: 1.6;
    background-color: transparent;
    border-color: rgba(255,255,255,0.1);
    box-shadow: var(--glass-shadow-light), 0 4px 16px rgba(30,123,255,0.25);
    color: var(--text-on-primary);
    filter: brightness(1.15);
}

/* ── Cuestionario ── */
.mu-quiz__dots { display: flex; align-items: center; gap: 16px; }
.mu-quiz__n { font-size: 12px; font-weight: 600; color: var(--mu-ink-5); font-variant-numeric: tabular-nums; }
.mu-quiz__pips { display: grid; grid-auto-flow: column; grid-auto-columns: 34px; gap: 6px; }
.mu-quiz__pip { height: 3px; background-color: var(--mu-line-2); border-radius: 999px; }
.mu-quiz__pip.is-on { background-color: transparent; background-image: linear-gradient(90deg, #1E7BFF, #22D3EE); }

.mu-quiz {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 32px 0;
}

.mu-quiz__inner { display: flex; flex-direction: column; gap: 28px; width: 100%; max-width: 43.75rem; }
.mu-quiz__head { display: flex; flex-direction: column; gap: 12px; }
.mu-quiz__kind { display: flex; align-items: center; gap: 12px; }

.mu-quiz__type {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--mu-blue);
}

.mu-quiz__hint { font-size: 12px; font-weight: 600; color: var(--mu-ink-5); }

.mu-quiz__q {
    margin: 0;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.028em;
    line-height: 1.26;
    text-wrap: pretty;
}

.mu-quiz__opts { display: flex; flex-direction: column; gap: 10px; }

.mu-opt {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: 16px;
    align-items: center;
    width: 100%;
    padding: 17px 20px;
    background: var(--mu-surface);
    border: 1px solid var(--mu-line-2);
    border-radius: 14px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-smooth);
}

.mu-opt:hover:not([disabled]) { border-color: var(--mu-line-4); }
.mu-opt[disabled] { cursor: default; }

.mu-opt__mark {
    width: 20px;
    height: 20px;
    border: 1.5px solid #3a3a52;
    border-radius: 999px;
}

.mu-opt__mark--box { border-radius: 6px; }

/* Selección múltiple: lo ya marcado, antes de confirmar */
.mu-opt.is-sel { border-color: var(--mu-line-4); }
.mu-opt.is-sel .mu-opt__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mu-blue);
    border-color: var(--mu-blue);
}
.mu-opt.is-sel .mu-opt__txt { color: var(--mu-ink); }

.mu-opt__txt { font-size: 17px; line-height: 1.45; color: var(--mu-ink-2); }
.mu-opt__tag { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }

.mu-opt.is-ok { background: rgba(34,197,94,0.07); border-color: rgba(34,197,94,0.45); }
.mu-opt.is-ok .mu-opt__mark { display: flex; align-items: center; justify-content: center; background: var(--mu-green); border-color: var(--mu-green); }
.mu-opt.is-ok .mu-opt__txt { font-weight: 600; color: var(--mu-green-soft); }
.mu-opt.is-ok .mu-opt__tag { color: var(--mu-green); }

.mu-opt.is-ko { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.42); }
.mu-opt.is-ko .mu-opt__mark { display: flex; align-items: center; justify-content: center; background: #ef4444; border-color: #ef4444; }
.mu-opt.is-ko .mu-opt__txt { font-weight: 600; color: #ff9b9b; }
.mu-opt.is-ko .mu-opt__tag { color: #ef4444; }

.mu-fb { display: flex; padding: 4px 0 0; }
.mu-fb__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }

.mu-fb__lbl { font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; }
.mu-fb--ok .mu-fb__lbl { color: var(--mu-green); }
.mu-fb--ko .mu-fb__lbl { color: #ef4444; }

.mu-fb__p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--mu-ink-2); text-wrap: pretty; }

.mu-fb__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding-top: 2px;
    font-size: 13px;
    font-weight: 800;
    color: var(--mu-ink-4);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-smooth);
}

.mu-fb__link:hover { color: var(--mu-cyan); }

/* ── Resultado ── */
.mu-score {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
    flex: 1;
    padding: 36px 0;
}

.mu-score__ring { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.mu-score__dial { position: relative; width: 260px; height: 260px; }

.mu-score__num {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.mu-score__num b {
    font-size: 82px;
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    background-image: linear-gradient(135deg, #1E7BFF, #22D3EE);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.mu-score__num span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mu-ink-4);
}

.mu-score__verdict { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }

.mu-score__lbl {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--mu-blue);
}

.mu-score__lbl--ko { color: #f59e0b; }

.mu-score__say { margin: 0; max-width: 300px; font-size: 19px; font-weight: 600; line-height: 1.45; text-wrap: pretty; }

.mu-score__detail { display: flex; flex-direction: column; gap: 26px; }
.mu-score__block { display: flex; flex-direction: column; gap: 14px; }

.mu-score__over {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mu-ink-4);
}

.mu-score__row {
    display: grid;
    grid-template-columns: 18px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--mu-line);
}

.mu-score__rowtxt { font-size: 15px; line-height: 1.4; color: var(--mu-ink-2); }
.mu-score__rowtag { font-size: 12px; font-weight: 600; color: var(--mu-ink-5); }

.mu-score__facts { display: flex; flex-wrap: wrap; gap: 44px; }
.mu-score__fact { display: flex; flex-direction: column; gap: 5px; }

.mu-score__factlbl {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mu-ink-5);
}

.mu-score__factval { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mu-score__acts { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.mu-score__note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mu-ink-5); text-wrap: pretty; }
.mu-score__btns { display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ── Certificado ── */
.mu-cert__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 24px 0;
}

.mu-cert {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 57.5rem;
    background: #fbfaff;
    border-radius: 10px;
    box-shadow: 0 50px 90px -26px rgba(0,0,0,0.7);
    overflow: hidden;
}

.mu-cert__seal { position: absolute; z-index: 3; right: 16px; top: 16px; }
.mu-cert__seal svg { display: block; width: 5.75rem; height: auto; }

.mu-cert__main {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
    padding: 36px 28px;
    color: #0a1628;
    background-image: radial-gradient(120% 90% at 0% 0%, rgba(30,123,255,0.07) 0%, rgba(30,123,255,0) 60%);
}

.mu-cert__date { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: rgba(10,22,40,0.60); }
.mu-cert__top { display: flex; flex-direction: column; gap: 26px; padding-right: 6rem; }
.mu-cert__inner { display: flex; flex-direction: column; gap: 20px; }

.mu-cert__h {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.022em;
    line-height: 1.1;
    color: #0a1628;
}

.mu-cert__grants { display: flex; flex-direction: column; gap: 6px; }
.mu-cert__grants span { font-size: 15px; font-weight: 500; color: rgba(10,22,40,0.72); }
.mu-cert__who { font-size: 32px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; color: #0a1628; }

.mu-cert__what { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 1.6; color: rgba(10,22,40,0.72); }
.mu-cert__what b { font-weight: 800; color: #0a1628; }

.mu-cert__scope {
    margin: 0;
    max-width: 25rem;
    font-size: 13.5px;
    line-height: 1.65;
    color: rgba(10,22,40,0.55);
    text-wrap: pretty;
}

.mu-cert__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px; }
.mu-cert__signs { display: flex; flex-wrap: wrap; gap: 44px; }
.mu-cert__sign { display: flex; flex-direction: column; gap: 4px; }

.mu-cert__hand {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 29px;
    font-weight: 400;
    font-style: italic;
    line-height: 1.15;
    white-space: nowrap;
    color: #0a1628;
}

.mu-cert__signline { height: 1px; margin-top: 6px; background: rgba(10,22,40,0.22); }
.mu-cert__signname { padding-top: 8px; font-size: 14px; font-weight: 800; letter-spacing: -0.01em; color: #0a1628; }
.mu-cert__signrole { font-size: 12px; font-weight: 500; color: rgba(10,22,40,0.55); }

.mu-cert__qr { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.mu-cert__qrcard {
    display: flex;
    padding: 12px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 14px 30px -12px rgba(0,0,0,0.6);
}

.mu-cert__code { font-family: var(--mu-mono); font-size: 11px; letter-spacing: 0.12em; color: rgba(255,255,255,0.62); }

.mu-cert__side {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    min-height: 8rem;
    padding: 32px 28px 30px;
    background-image: linear-gradient(165deg, #0d2559 0%, #071539 45%, #030a1e 100%);
}

.mu-cert__sidetop { position: relative; z-index: 2; display: flex; justify-content: center; width: 100%; }
.mu-cert__sidefoot { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 14px; }

.mu-cert__glow { position: absolute; top: -70px; right: -70px; width: 280px; height: 280px; border-radius: 999px; background-image: radial-gradient(circle, rgba(30,123,255,0.30) 0%, rgba(30,123,255,0) 70%); }
.mu-cert__sidemark { display: block; width: 9.5rem; max-width: 60%; }

@media (min-width: 640px) {
    .mu-head__h { font-size: 40px; }
    .mu-swiper .mu-card { flex: 0 0 46%; }
    .mu-quiz, .mu-cert__wrap { padding: 40px 0; }

}

@media (min-width: 1024px) {
    .mu-toc__sum { display: none; }
    .mu-bar--cert { flex-direction: row; align-items: center; gap: 24px; }
    .mu-bar--cert .mu-foot__acts .mu-btn { flex: 0 0 auto; padding-inline: 22px; }
    .mu-cert__seal svg { width: 11rem; }
    .mu-cert__top { padding-right: 0; }
    .mu-foot { flex-direction: row; align-items: center; gap: 24px; }
    .mu-foot__note { text-align: left; }
    .mu-foot__acts { justify-content: flex-end; }
    .mu-foot__acts .mu-btn { flex: 0 0 auto; padding-inline: 22px; }
    .mu__body { padding: 52px 0 40px; }
    .mu-head { gap: 56px; margin-bottom: 36px; }
    .mu-head__bar { width: 12.5rem; }
    .mu-bar__link, .mu-bar__name { display: block; }
    .mu-swiper .mu-card { flex: 1 1 0; }
    .mu-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
    .mu-head__plan { align-items: flex-end; }
    .mu-lesson { grid-template-columns: 17.5rem minmax(0, 1fr); gap: 64px; }
    .mu-score { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 72px; padding: 52px 0; }
    .mu-cert { grid-template-columns: minmax(0,1fr) 312px; }
    .mu-cert__main { padding: 48px 44px 44px 52px; }
    .mu-cert__side { clip-path: polygon(44px 0%, 100% 0%, 100% 100%, 0% 100%); }
    .mu-cert__seal { right: 208px; top: 50%; transform: translateY(-46%); }
    .mu-cert__side { padding: 44px 34px 40px 68px; }
    .mu-cert__sidemark { width: 10.5rem; }
    .mu-cert__h { font-size: 31px; }
    .mu-cert__who { font-size: 40px; }
}