/* ═══════════════════════════════════════════════════════
   BIBLIOTECA DYNBEL AI — ajustes propios de la página
   El diseño base vive en academia.css (misma familia visual);
   aquí solo lo que Biblioteca necesita y AcademIA no tiene.
   Sin colores propios: todo sale de las variables del sitio.
   ═══════════════════════════════════════════════════════ */

/* ── Chips de las 5 actividades en la cabecera del demo ── */
.bib-demo__chips {
    list-style: none;
    margin: var(--space-5) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2) var(--space-3);
}

.bib-demo__chips li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
}

.bib-demo__chips li svg {
    color: var(--color-primary);
}

/* ── El aval: mismo diseño de pasos pero a escala contenida —
   el protagonista es el certificado ── */
.bib-cert .aca-process__num {
    font-size: clamp(3.2rem, 2.4rem + 2.4vw, 4.4rem);
}

/* el número alineado ARRIBA, a la altura del título y su línea */
.bib-cert .aca-process__statement {
    align-items: start;
}

.bib-cert .aca-process__num-wrap {
    line-height: 1;
    margin-top: -0.08em;
}

.bib-cert .aca-process__title {
    font-size: var(--text-xl);
}

.bib-cert .aca-process__text {
    font-size: var(--text-sm);
    white-space: nowrap;
}

.bib-cert .aca-process__statement {
    gap: var(--space-5);
}

/* el certificado: perspectiva para el tilt y brillo en loop */
.bib-cert__doc {
    perspective: 1000px;
}

.bib-cert .aca-cert {
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.bib-cert .aca-cert__glare {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.07) 49%, transparent 60%);
    background-size: 260% 260%;
    background-repeat: no-repeat;
    animation: bibCertGlare 5.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes bibCertGlare {
    0% { background-position: 135% 135%; }
    60% { background-position: -35% -35%; }
    100% { background-position: -35% -35%; }
}

/* pulso discreto del escudo de verificación */
.bib-cert .aca-cert__stat svg {
    animation: bibCertShield 3.6s ease-in-out infinite;
}

@keyframes bibCertShield {
    0%, 100% { transform: scale(1); opacity: 1; }
    8% { transform: scale(1.16); opacity: 0.85; }
    16% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .bib-cert .aca-cert__glare,
    .bib-cert .aca-cert__stat svg {
        animation: none;
    }
}

/* ── Certificado: layout de dos columnas (pasos + documento) ── */
.bib-cert__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-12);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
}

.bib-cert__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* La nota vive bajo el certificado, como su pie */
.bib-cert__note {
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-tertiary);
    margin: var(--space-4) auto 0;
    max-width: 52ch;
    text-align: center;
}

.bib-cert__doc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media (min-width: 1024px) {
    .bib-cert__layout {
        grid-template-columns: 5fr 6fr;
    }
}

/* El 58 protagonista dentro de su chip */
.bib-engine__count {
    font-size: 1.35em;
    font-weight: 900;
    letter-spacing: -0.02em;
}

/* ── Profundidad tipográfica: Dynbel AI ⊃ Universidad ⊃ Biblioteca
   contada con escala y luz — CERO tarjetas, CERO bordes ── */
.bib-depth {
    margin-top: var(--space-8);
    text-align: center;
}

/* la ruta de miga: dónde vives */
.bib-depth__path {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 var(--space-6);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.bib-depth__path i {
    font-style: normal;
    color: color-mix(in srgb, var(--color-primary) 60%, transparent);
}

.bib-depth__path b {
    color: var(--color-primary);
}

/* la pila de profundidad */
.bib-depth__stack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: clamp(240px, 34vw, 380px);
}

/* fondo: el ERP inmenso, solo contorno, respirando lejos */
.bib-depth__erp {
    position: absolute;
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%);
    font-size: clamp(4.2rem, 13vw, 10.5rem);
    font-weight: 900;
    letter-spacing: 0.02em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1.5px color-mix(in srgb, var(--color-primary) 22%, transparent);
    pointer-events: none;
}

/* medio: Universidad en gradiente vivo */
.bib-depth__univ {
    position: relative;
    font-size: clamp(2.6rem, 8vw, 6.2rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.05;
    background: linear-gradient(100deg,
        var(--color-primary) 0%, var(--color-accent) 30%,
        #fff 50%, var(--color-accent) 70%, var(--color-primary) 100%);
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 30px color-mix(in srgb, var(--color-primary) 40%, transparent));
    animation: bibWordFlow 8s linear infinite;
}

@keyframes bibWordFlow {
    from { background-position: 0% 50%; }
    to { background-position: -240% 50%; }
}

/* frente: la Biblioteca, blanca y encendida, con su sello */
.bib-depth__core {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: var(--space-4);
    font-size: clamp(1.2rem, 2.6vw, 1.7rem);
    font-weight: 900;
    letter-spacing: -0.01em;
    color: #fff;
    text-shadow: 0 0 24px color-mix(in srgb, var(--color-primary) 60%, transparent);
    animation: bibCoreGlow 4.6s ease-in-out infinite;
}

.bib-depth__core b {
    background: var(--gradient-text, linear-gradient(90deg, var(--color-primary), var(--color-accent)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: brightness(1.5);
}

@keyframes bibCoreGlow {
    0%, 100% { text-shadow: 0 0 18px color-mix(in srgb, var(--color-primary) 45%, transparent); }
    50% { text-shadow: 0 0 38px color-mix(in srgb, var(--color-primary) 75%, transparent); }
}

.bib-depth__mark {
    height: 26px;
    width: auto;
    opacity: 0.95;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary) 50%, transparent));
}

.bib-arch__note {
    margin: var(--space-5) auto 0;
    max-width: 52ch;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.bib-arch__chips {
    margin-top: var(--space-5);
}

/* El 58 protagonista dentro de su chip */
.bib-engine__count {
    font-size: 1.35em;
    font-weight: 900;
    letter-spacing: -0.02em;
}

@media (prefers-reduced-motion: reduce) {
    .bib-depth__univ,
    .bib-depth__core {
        animation: none;
    }
}

/* ── Catálogo: aquí hay 9 tarjetas (academia tiene 6), así que la
   expandida necesita mucho más peso para que el texto respire ── */
@media (min-width: 1024px) {
    .aca-slats .aca-slat:hover,
    .aca-slats .aca-slat:focus-visible {
        flex: 9 1 0;
    }
}

/* ═══════════════════════════════════════════════════════
   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);
}

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

/* 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;
}

/* El libro real: caja aca-shelf__b3d grande, centrada.
   La pose (rotationX/Y) la maneja GSAP; sin transición CSS. */
.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%);
}

/* ── 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;
}

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

/* 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;
}

.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;
}

/* 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;
}

/* 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;
}

/* 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, #1a0033 0%, #3a0a5c 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);
}

/* Frases grandes rotando bajo la báscula */
.bib-academia__rot {
    position: relative;
    height: 3.2em;
    margin: var(--space-10) auto 0;
    max-width: 900px;
    text-align: center;
}

.bib-academia .aca-product__cta {
    margin-top: var(--space-6);
}

.bib-academia__rotline {
    position: absolute;
    inset: 0;
    display: block;
    text-align: center;
    align-content: center;
    margin: 0;
    font-size: clamp(1.25rem, 2.6vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
    pointer-events: none;
}

.bib-academia__rotline.is-active {
    opacity: 1;
    transform: translateY(0);
}

.bib-academia__rotline b {
    font-weight: 800;
    background: var(--gradient-text, linear-gradient(90deg, var(--color-primary), var(--color-accent)));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── LA BÁSCULA: balanza clásica en SVG con gradiente de marca.
   El conjunto (brazo, cuerdas, cuencos y palabras) se inclina
   como un solo instrumento; columna y base quedan firmes. ── */
.bib-balance {
    position: relative;
    max-width: 1120px;
    margin: var(--space-2) auto 0;
}

.bib-balance__svg {
    display: block;
    width: 100%;
    height: auto;
    /* un 12% mas alta que su proporcion natural (438/940) */
    aspect-ratio: 940 / 490;
}

.bib-balance__tilt {
    transform: rotate(var(--tilt, 0deg));
    transform-origin: 470px 120px;
    transform-box: view-box;
    will-change: transform;
}

.bib-balance__strings path {
    fill: none;
    stroke: color-mix(in srgb, var(--color-primary) 45%, transparent);
    stroke-width: 1.6;
}

.bib-balance__bowl {
    fill: url(#balBowl);
    stroke: url(#balGrad);
    stroke-width: 2.5;
}

.bib-balance__bowl--us {
    filter: drop-shadow(0 0 16px color-mix(in srgb, var(--color-primary) 55%, transparent));
}

.bib-balance__svglabel {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2em;
    fill: var(--text-tertiary);
}

.bib-balance__svglabel--us {
    fill: var(--color-primary);
}

.bib-balance__hubdot {
    fill: var(--color-primary);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary) 70%, transparent));
}

.bib-balance__colrect {
    fill: url(#balGrad);
    opacity: 0.9;
}

.bib-balance__baserect {
    fill: url(#balGrad);
}

/* pilas de palabras dentro de los cuencos */
.bib-balance__stack {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    width: 100%;
    height: 100%;
}

.bib-balance__word {
    font-size: 1.18rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    line-height: 1.18;
    color: var(--text-secondary);
}

/* lo transferido queda en gris fantasma, no desaparece */
.bib-balance__word--you.is-ghost {
    opacity: 0.24;
}

/* en blanco: las palabras se despegan del instrumento magenta */
.bib-balance__word--us {
    color: #fff;
    text-shadow: 0 0 14px color-mix(in srgb, var(--color-primary) 55%, transparent);
}

/* poza de luz bajo el plato de AcademIA */
.bib-balance__pool {
    position: absolute;
    right: 4%;
    bottom: 2%;
    width: 34%;
    height: 70px;
    background: radial-gradient(ellipse 50% 100% at 50% 0%,
        color-mix(in srgb, var(--color-primary) 40%, transparent) 0%,
        transparent 70%);
    filter: blur(10px);
    opacity: var(--pool, 0);
    pointer-events: none;
}

@media (max-width: 640px) {
    /* en pantalla chica la balanza gana todo el ancho posible,
       se estira un poco mas y las letras suben de cuerpo para
       seguir siendo legibles al escalar el lienzo */
    .bib-balance {
        margin-left: calc(var(--space-4) * -1);
        margin-right: calc(var(--space-4) * -1);
    }

    .bib-balance__svg {
        aspect-ratio: 940 / 560;
    }

    .bib-balance__word {
        font-size: 1.4rem;
    }

    .bib-balance__stack {
        gap: 3px;
    }

    .bib-balance__svglabel {
        font-size: 24px;
    }
}

/* 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, #1a0033 0%, #3a0a5c 34%, var(--ink, var(--color-primary)) 100%);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
    margin: 2px 0 4px;
}

/* 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);
}

/* 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);
}

/* ── 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, #1a0033 0%, #3a0a5c 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;
}

@keyframes bibGlare {
    0% { background-position: 130% 130%; }
    55% { background-position: -30% -30%; }
    100% { background-position: -30% -30%; }
}

/* 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);
}

/* ── 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;
}

.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; }

/* ── 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: clamp(1.15rem, 2.3vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: var(--text-primary);
}

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

.bib-gen__count {
    margin: var(--space-2) auto 0;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.bib-gen__again {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.bib-gen__again:hover {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 10%, 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-cover__glare {
        animation: none;
    }

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


/* ── Ajustes mobile: la miga de pan de Universidad no se parte
   ni se pega al borde, y el libro del demo se reduce en bloque
   (zoom escala layout incluido) para no montarse sobre el texto ── */
@media (max-width: 640px) {
    .bib-depth__path {
        flex-wrap: wrap;
        row-gap: 5px;
        gap: 8px;
        padding: 0 var(--space-3);
        font-size: 12px;
        letter-spacing: 0.1em;
        margin-bottom: var(--space-4);
    }

    .bib-depth__path span,
    .bib-depth__path b {
        white-space: nowrap;
    }

    /* sin aire muerto: la pila mide lo que mide su contenido */
    .bib-depth {
        margin-top: var(--space-4);
    }

    .bib-depth__stack {
        min-height: 0;
    }
}