/* ============================================================
   GRIMORIO DE AURELION
   BASE VISUAL INSPIRADA EN EL PROTOTIPO
   Adaptada a nuestro renderer y paginación real
   ============================================================ */

:root {
    --grimorio-bg: #050505;

    --cover: #1e130c;
    --cover-edge: #3a2515;

    --paper: #d1b894;
    --paper-light: #ead8b5;
    --paper-dark: #b99769;

    --ink: #2c2014;

    --book-gold: #c29957;
    --book-gold-dark: #8c6a33;
}


/* ============================================================
   ESCENA GENERAL
   ============================================================ */

html,
body {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;
}


body {
    display: flex;

    align-items: center;
    justify-content: center;

    background:
        radial-gradient(
            ellipse at center,
            #1f1a17 0%,
            #080706 55%,
            #000 100%
        ) !important;

    font-family:
        'Cormorant Garamond',
        'EB Garamond',
        serif;
}


/* ============================================================
   WRAPPER
   ============================================================ */

.book-wrapper {
    position: relative;

    width: min(96vw, 1500px);
    height: min(88vh, 780px);

    margin: 0 auto;
    padding: 0;

    background: transparent;

    border: none;

    box-shadow: none;

    overflow: visible;
}


#character-container {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    background: transparent;

    border: none;

    box-shadow: none;

    overflow: visible;
}


/* ============================================================
   ESTRUCTURA DEL GRIMORIO
   ============================================================ */

.grimorio-character {
    position: relative;

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-rows:
        minmax(0, 1fr)
        58px;

    gap: 0;
}


/* ============================================================
   OCULTAR CABECERA DEL PERSONAJE
   PERO CONSERVAR I / III
   ============================================================ */

.grimorio-character .character-header {
    position: absolute;

    top: 43px;
    right: 67px;

    z-index: 500;

    display: flex;

    width: auto;
    min-height: 0;

    margin: 0;
    padding: 0;

    border: none;

    background: transparent;

    box-shadow: none;

    pointer-events: none;
}


.grimorio-character .crest-icon,
.grimorio-character .character-title {
    display: none !important;
}


.grimorio-page-counter {
    min-width: 0;

    margin: 0;
    padding: 0;

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(0.72rem, 0.9vw, 1rem);

    font-weight: 400;

    letter-spacing: 0.17em;

    color:
        rgba(44, 32, 20, 0.67);

    background: transparent;

    border: none;

    box-shadow: none;

    text-shadow: none;
}


/* ============================================================
   CUBIERTA FÍSICA
   ============================================================ */

.grimorio-stage {
    position: relative;

    width: 100%;
    height: 100%;

    min-height: 0;

    padding: 1.3% 1.7% 1.6%;

    box-sizing: border-box;

    perspective: 2400px;

    overflow: visible;

    border-radius: 10px;

    background:
        radial-gradient(
            ellipse at center,
            rgba(88, 56, 28, 0.20),
            transparent 56%
        ),
        linear-gradient(
            145deg,
            #24170d,
            var(--cover) 45%,
            #0e0906
        );

    border:
        2px solid
        var(--cover-edge);

    box-shadow:
        0 0 0 2px
        rgba(58, 37, 21, 0.8),

        0 32px 55px
        rgba(0, 0, 0, 0.78),

        inset 0 0 18px
        rgba(0, 0, 0, 0.95);
}


/* ============================================================
   LOMO CENTRAL
   Gemini usa una sombra ancha.
   ============================================================ */

.grimorio-stage::after {
    content: "";

    position: absolute;

    z-index: 300;

    top: 1.5%;
    bottom: 2%;

    left: 50%;

    width: clamp(60px, 5.5vw, 90px);

    transform:
        translateX(-50%);

    pointer-events: none;

    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(0, 0, 0, 0.20) 20%,

            rgba(0, 0, 0, 0.48) 40%,

            rgba(0, 0, 0, 0.68) 50%,

            rgba(0, 0, 0, 0.48) 60%,

            rgba(0, 0, 0, 0.20) 80%,

            transparent 100%
        );

    filter:
        blur(0.3px);
}


/* ============================================================
   SPREADS
   ============================================================ */

.grimorio-spread {
    position: absolute;

    inset:
        1.3%
        1.7%
        1.6%;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform-style:
        preserve-3d;
}


.grimorio-spread.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.grimorio-spread.turn-out-forward,
.grimorio-spread.turn-out-backward,
.grimorio-spread.turn-in-forward,
.grimorio-spread.turn-in-backward {
    opacity: 1;

    visibility: visible;
}


/* ============================================================
   HOJAS
   ============================================================ */

.grimorio-page {
    position: relative;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    color:
        var(--ink);

    background-color:
        var(--paper);

    /*
       Ruido SVG inspirado en el prototipo.
       Da mucha más sensación de papel real.
    */

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),

        radial-gradient(
            ellipse at center,
            rgba(239, 222, 190, 0.70) 0%,
            rgba(209, 184, 148, 0.94) 72%,
            rgba(175, 143, 99, 0.90) 100%
        );

    transform-style:
        preserve-3d;

    backface-visibility:
        hidden;
}


/* ============================================================
   HOJA IZQUIERDA
   ============================================================ */

.page-left {
    border-radius:
        7px 1px 2px 12px;

    border:
        1px solid
        rgba(72, 47, 24, 0.22);

    border-right:
        1px solid
        rgba(0,0,0,0.18);

    box-shadow:

        inset -48px 0 58px -22px
        rgba(0,0,0,0.52),

        inset 7px 0 16px
        rgba(255,245,218,0.20),

        -5px 7px 0
        rgba(169,136,92,0.58),

        -8px 12px 20px
        rgba(0,0,0,0.44);
}


/* ============================================================
   HOJA DERECHA
   ============================================================ */

.page-right {
    border-radius:
        1px 7px 12px 2px;

    border:
        1px solid
        rgba(72, 47, 24, 0.22);

    border-left:
        1px solid
        rgba(255,255,255,0.12);

    box-shadow:

        inset 48px 0 58px -22px
        rgba(0,0,0,0.52),

        inset -7px 0 16px
        rgba(255,245,218,0.20),

        5px 7px 0
        rgba(169,136,92,0.58),

        8px 12px 20px
        rgba(0,0,0,0.44);
}


/* ============================================================
   CONTENIDO DE LAS PÁGINAS
   ============================================================ */

.page-content {
    position: relative;

    z-index: 10;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    padding:
        clamp(35px, 3vw, 58px)
        clamp(40px, 3.5vw, 65px);

    overflow: hidden;
}


/* ============================================================
   MARCO INTERIOR DEL MANUSCRITO
   ============================================================ */

.page-content::after {
    content: "";

    position: absolute;

    z-index: 80;

    inset:
        clamp(18px, 1.7vw, 27px);

    border:
        1px solid
        rgba(44, 32, 20, 0.16);

    pointer-events: none;
}


/* ============================================================
   ESQUINA SUPERIOR DEL MARCO
   ============================================================ */

.page-content::before {
    content: "";

    position: absolute;

    z-index: 81;

    top:
        clamp(16px, 1.55vw, 25px);

    left:
        clamp(16px, 1.55vw, 25px);

    width: 15px;
    height: 15px;

    border:
        2px solid
        rgba(44,32,20,0.32);

    border-right: none;
    border-bottom: none;

    pointer-events: none;
}


.page-right .page-content::before {
    left: auto;

    right:
        clamp(16px, 1.55vw, 25px);

    border-left: none;
    border-right:
        2px solid
        rgba(44,32,20,0.32);
}


/* ============================================================
   POR AHORA EL LIBRO SIGUE VACÍO

   ESTA ES LA ÚNICA REGLA QUE QUITAREMOS
   CUANDO LLEGUE EL SVG DE LEONHART.
   ============================================================ */

.grimorio-spread
.page-content > * {
    display: none !important;
}


/* ============================================================
   CONTROLES
   ============================================================ */

.grimorio-controls {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 25px;

    min-height: 58px;

    position: relative;

    z-index: 500;
}


/* ============================================================
   BOTONES
   ============================================================ */

.grimorio-arrow {
    display: flex;

    justify-content: center;
    align-items: center;

    width: 46px;
    height: 46px;

    padding: 0;

    border-radius: 50%;

    border:
        2px solid
        var(--book-gold-dark);

    background:
        radial-gradient(
            circle at 35% 30%,
            #302116,
            #120b07 65%
        );

    color:
        var(--book-gold);

    font-family:
        Georgia,
        serif;

    font-size:
        1.9rem;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 10px
        rgba(0,0,0,0.60),

        inset 0 0 8px
        rgba(0,0,0,0.65);

    transition:
        transform 0.25s ease,
        color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.grimorio-arrow:hover:not(:disabled) {
    background:
        var(--book-gold-dark);

    color:
        #120b07;

    transform:
        scale(1.06);

    box-shadow:
        0 0 15px
        rgba(194,153,87,0.50);
}


.grimorio-arrow:disabled {
    opacity: 0.25;

    cursor: default;
}


/* ============================================================
   PUNTOS
   ============================================================ */

.grimorio-dots {
    display: flex;

    align-items: center;

    gap: 12px;
}


.grimorio-dot {
    width: 10px;
    height: 10px;

    padding: 0;

    border-radius: 50%;

    border:
        2px solid
        var(--book-gold-dark);

    background:
        transparent;

    cursor: pointer;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.grimorio-dot.active {
    background:
        var(--book-gold);

    border-color:
        var(--book-gold);

    transform:
        scale(1.18);

    box-shadow:
        0 0 8px
        rgba(194,153,87,0.60);
}


/* ============================================================
   ANIMACIÓN - ADELANTE
   ============================================================ */

.turn-out-forward {
    z-index: 50;
}


.turn-out-forward .page-right {
    transform-origin:
        left center;

    animation:
        pageForwardOut
        270ms
        ease-in
        forwards;
}


@keyframes pageForwardOut {

    from {
        transform:
            rotateY(0deg);

        filter:
            brightness(1);
    }

    to {
        transform:
            rotateY(-88deg);

        filter:
            brightness(0.55);
    }

}


.turn-in-forward {
    z-index: 51;
}


.turn-in-forward .page-right {
    transform-origin:
        left center;

    animation:
        pageForwardIn
        500ms
        cubic-bezier(.22,.61,.36,1)
        forwards;
}


@keyframes pageForwardIn {

    from {
        transform:
            rotateY(88deg);

        filter:
            brightness(0.55);
    }

    to {
        transform:
            rotateY(0deg);

        filter:
            brightness(1);
    }

}


/* ============================================================
   ANIMACIÓN - ATRÁS
   ============================================================ */

.turn-out-backward {
    z-index: 50;
}


.turn-out-backward .page-left {
    transform-origin:
        right center;

    animation:
        pageBackwardOut
        270ms
        ease-in
        forwards;
}


@keyframes pageBackwardOut {

    from {
        transform:
            rotateY(0deg);

        filter:
            brightness(1);
    }

    to {
        transform:
            rotateY(88deg);

        filter:
            brightness(0.55);
    }

}


.turn-in-backward {
    z-index: 51;
}


.turn-in-backward .page-left {
    transform-origin:
        right center;

    animation:
        pageBackwardIn
        500ms
        cubic-bezier(.22,.61,.36,1)
        forwards;
}


@keyframes pageBackwardIn {

    from {
        transform:
            rotateY(-88deg);

        filter:
            brightness(0.55);
    }

    to {
        transform:
            rotateY(0deg);

        filter:
            brightness(1);
    }

}


/* ============================================================
   MACBOOK / PANTALLAS BAJAS
   ============================================================ */

@media (max-height: 780px) {

    .book-wrapper {
        width: 96vw;

        height: 87vh;
    }


    .grimorio-character {
        grid-template-rows:
            minmax(0, 1fr)
            48px;
    }


    .grimorio-controls {
        min-height: 48px;
    }


    .grimorio-arrow {
        width: 40px;
        height: 40px;

        font-size: 1.6rem;
    }


    .grimorio-character
    .character-header {
        top: 34px;
        right: 54px;
    }

}


/* ============================================================
   MOTION
   ============================================================ */

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

    .turn-out-forward .page-right,
    .turn-in-forward .page-right,
    .turn-out-backward .page-left,
    .turn-in-backward .page-left {
        animation-duration:
            1ms !important;
    }

}


/* ============================================================
   AJUSTE DE PROPORCIÓN DEL LIBRO
   Más angosto + más alto
   ============================================================ */

.book-wrapper {
    width: min(74vw, 1150px) !important;
    height: min(92vh, 850px) !important;

    margin: 2vh auto 0 !important;
}


/* El área del libro gana altura */

.grimorio-character {
    grid-template-rows:
        minmax(0, 1fr)
        55px !important;
}


/* Un poco más de presencia vertical */

.grimorio-stage {
    min-height: 0 !important;
}


/* Ajuste del contador a la nueva proporción */

.grimorio-character .character-header {
    top: 42px !important;
    right: 58px !important;
}


/* ============================================================
   MACBOOK / PANTALLAS BAJAS
   ============================================================ */

@media (max-height: 800px) {

    .book-wrapper {
        width: min(72vw, 1080px) !important;
        height: 93vh !important;

        margin-top: 1.5vh !important;
    }

    .grimorio-character {
        grid-template-rows:
            minmax(0, 1fr)
            48px !important;
    }

}


/* ============================================================
   PANTALLAS MÁS ESTRECHAS
   ============================================================ */

@media (max-width: 1100px) {

    .book-wrapper {
        width: 92vw !important;
        height: 84vh !important;
    }

}



/* ============================================================
   LA VÍSPERA
   Página narrativa derecha
   ============================================================ */


/*
   Nuestro CSS actual oculta el contenido para mantener
   el libro vacío.

   Solo autorizamos mostrar las páginas marcadas como story-page.
*/

.grimorio-spread
.page-content.story-page > * {
    display: block !important;
}


/* ------------------------------------------------------------
   Página narrativa
   ------------------------------------------------------------ */

.page-content.story-page {
    display: flex;

    flex-direction: column;

    padding:
        32px
        54px
        36px
        62px;

    font-family:
        'Cormorant Garamond',
        'EB Garamond',
        Georgia,
        serif;

    color:
        #2c2014;
}


/* ------------------------------------------------------------
   Número de página
   ------------------------------------------------------------ */

.story-meta {
    position: relative;

    z-index: 10;

    text-align: right;

    margin:
        0
        4px
        8px
        0;

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(0.75rem, 0.9vw, 0.95rem);

    letter-spacing:
        0.18em;

    color:
        rgba(44,32,20,0.67);
}


/* ------------------------------------------------------------
   Línea superior
   ------------------------------------------------------------ */

.story-rule {
    width: 100%;
    height: 1px;

    background:
        rgba(70,47,26,0.17);
}


.story-rule-top {
    margin-bottom:
        clamp(14px, 2vh, 22px);
}


/* ------------------------------------------------------------
   Cabecera
   ------------------------------------------------------------ */

.story-header {
    text-align: center;

    margin-bottom:
        clamp(20px, 2.5vh, 30px);
}


.story-title {
    margin: 0;

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(2rem, 2.8vw, 3.25rem);

    line-height: 1;

    font-weight: 400;

    letter-spacing:
        0.035em;

    color:
        #21170e;
}


.story-ornament {
    margin-top:
        18px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(1rem, 1.3vw, 1.35rem);

    letter-spacing:
        0.16em;

    color:
        rgba(75,50,27,0.52);
}


/* ------------------------------------------------------------
   Texto
   ------------------------------------------------------------ */

.story-body {
    position: relative;

    z-index: 10;

    flex: 1;

    font-size:
        clamp(0.92rem, 1.04vw, 1.12rem);

    line-height:
        1.48;

    text-align:
        justify;

    text-wrap:
        pretty;
}


.story-body p {
    margin:
        0
        0
        clamp(13px, 1.6vh, 19px);
}


/* ------------------------------------------------------------
   LETRA CAPITULAR
   ------------------------------------------------------------ */

.story-dropcap {
    float: left;

    display: flex;

    align-items: center;
    justify-content: center;

    width:
        clamp(58px, 4.7vw, 72px);

    height:
        clamp(64px, 5.2vw, 78px);

    margin:
        4px
        15px
        3px
        0;

    padding:
        3px;

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(3rem, 4vw, 4.2rem);

    line-height: 1;

    font-weight: 500;

    color:
        #24190f;

    border:
        3px double
        rgba(44,32,20,0.82);

    background:

        repeating-linear-gradient(
            45deg,

            transparent,
            transparent 2px,

            rgba(44,32,20,0.045) 2px,
            rgba(44,32,20,0.045) 4px
        );

    box-shadow:
        inset 0 0 12px
        rgba(44,32,20,0.09);
}


/* ------------------------------------------------------------
   Ornamento intermedio
   ------------------------------------------------------------ */

.story-small-ornament {
    width: 120px;

    margin:
        -3px
        auto
        13px;

    text-align:
        center;

    color:
        rgba(67,45,24,0.38);

    font-size:
        0.72rem;

    position: relative;
}


.story-small-ornament::before,
.story-small-ornament::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 42px;
    height: 1px;

    background:
        rgba(67,45,24,0.22);
}


.story-small-ornament::before {
    left: 0;
}


.story-small-ornament::after {
    right: 0;
}


/* ------------------------------------------------------------
   Final de la narración
   ------------------------------------------------------------ */

.story-ending span {
    display: block;

    font-weight: 500;
}


/* ------------------------------------------------------------
   Pie
   ------------------------------------------------------------ */

.story-footer {
    position: relative;

    z-index: 10;

    margin-top:
        auto;

    padding-top:
        7px;

    text-align:
        center;
}


.story-footer-rule {
    width: 72%;

    height: 1px;

    margin:
        0
        auto
        13px;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(65,43,23,0.40) 20%,

            rgba(65,43,23,0.40) 80%,

            transparent
        );
}


/* ------------------------------------------------------------
   Cita final
   ------------------------------------------------------------ */

.story-quote {
    margin: 0;

    padding: 0;

    border: none;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-style: italic;

    font-weight: 600;

    font-size:
        clamp(1.05rem, 1.3vw, 1.4rem);

    line-height:
        1.18;

    color:
        rgba(48,32,18,0.88);
}


.story-footer-ornament {
    margin-top:
        9px;

    font-size:
        1rem;

    color:
        rgba(67,45,24,0.42);
}


/* ============================================================
   AJUSTE PARA PANTALLAS CON POCA ALTURA
   ============================================================ */

@media (max-height: 800px) {

    .page-content.story-page {
        padding:
            25px
            46px
            28px
            54px;
    }


    .story-header {
        margin-bottom:
            16px;
    }


    .story-title {
        font-size:
            clamp(1.75rem, 2.5vw, 2.65rem);
    }


    .story-ornament {
        margin-top:
            11px;
    }


    .story-body {
        font-size:
            clamp(0.78rem, 0.92vw, 0.96rem);

        line-height:
            1.39;
    }


    .story-body p {
        margin-bottom:
            11px;
    }


    .story-dropcap {
        width:
            54px;

        height:
            59px;

        font-size:
            3rem;
    }


    .story-footer-rule {
        margin-bottom:
            9px;
    }


    .story-quote {
        font-size:
            clamp(0.95rem, 1.15vw, 1.15rem);
    }

}



/* ============================================================
   LA VÍSPERA
   Página narrativa derecha
   ============================================================ */


/*
   Nuestro CSS actual oculta el contenido para mantener
   el libro vacío.

   Solo autorizamos mostrar las páginas marcadas como story-page.
*/

.grimorio-spread
.page-content.story-page > * {
    display: block !important;
}


/* ------------------------------------------------------------
   Página narrativa
   ------------------------------------------------------------ */

.page-content.story-page {
    display: flex;

    flex-direction: column;

    padding:
        32px
        54px
        36px
        62px;

    font-family:
        'Cormorant Garamond',
        'EB Garamond',
        Georgia,
        serif;

    color:
        #2c2014;
}


/* ------------------------------------------------------------
   Número de página
   ------------------------------------------------------------ */

.story-meta {
    position: relative;

    z-index: 10;

    text-align: right;

    margin:
        0
        4px
        8px
        0;

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(0.75rem, 0.9vw, 0.95rem);

    letter-spacing:
        0.18em;

    color:
        rgba(44,32,20,0.67);
}


/* ------------------------------------------------------------
   Línea superior
   ------------------------------------------------------------ */

.story-rule {
    width: 100%;
    height: 1px;

    background:
        rgba(70,47,26,0.17);
}


.story-rule-top {
    margin-bottom:
        clamp(14px, 2vh, 22px);
}


/* ------------------------------------------------------------
   Cabecera
   ------------------------------------------------------------ */

.story-header {
    text-align: center;

    margin-bottom:
        clamp(20px, 2.5vh, 30px);
}


.story-title {
    margin: 0;

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(2rem, 2.8vw, 3.25rem);

    line-height: 1;

    font-weight: 400;

    letter-spacing:
        0.035em;

    color:
        #21170e;
}


.story-ornament {
    margin-top:
        18px;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(1rem, 1.3vw, 1.35rem);

    letter-spacing:
        0.16em;

    color:
        rgba(75,50,27,0.52);
}


/* ------------------------------------------------------------
   Texto
   ------------------------------------------------------------ */

.story-body {
    position: relative;

    z-index: 10;

    flex: 1;

    font-size:
        clamp(0.92rem, 1.04vw, 1.12rem);

    line-height:
        1.48;

    text-align:
        justify;

    text-wrap:
        pretty;
}


.story-body p {
    margin:
        0
        0
        clamp(13px, 1.6vh, 19px);
}


/* ------------------------------------------------------------
   LETRA CAPITULAR
   ------------------------------------------------------------ */

.story-dropcap {
    float: left;

    display: flex;

    align-items: center;
    justify-content: center;

    width:
        clamp(58px, 4.7vw, 72px);

    height:
        clamp(64px, 5.2vw, 78px);

    margin:
        4px
        15px
        3px
        0;

    padding:
        3px;

    font-family:
        'Cinzel',
        serif;

    font-size:
        clamp(3rem, 4vw, 4.2rem);

    line-height: 1;

    font-weight: 500;

    color:
        #24190f;

    border:
        3px double
        rgba(44,32,20,0.82);

    background:

        repeating-linear-gradient(
            45deg,

            transparent,
            transparent 2px,

            rgba(44,32,20,0.045) 2px,
            rgba(44,32,20,0.045) 4px
        );

    box-shadow:
        inset 0 0 12px
        rgba(44,32,20,0.09);
}


/* ------------------------------------------------------------
   Ornamento intermedio
   ------------------------------------------------------------ */

.story-small-ornament {
    width: 120px;

    margin:
        -3px
        auto
        13px;

    text-align:
        center;

    color:
        rgba(67,45,24,0.38);

    font-size:
        0.72rem;

    position: relative;
}


.story-small-ornament::before,
.story-small-ornament::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 42px;
    height: 1px;

    background:
        rgba(67,45,24,0.22);
}


.story-small-ornament::before {
    left: 0;
}


.story-small-ornament::after {
    right: 0;
}


/* ------------------------------------------------------------
   Final de la narración
   ------------------------------------------------------------ */

.story-ending span {
    display: block;

    font-weight: 500;
}


/* ------------------------------------------------------------
   Pie
   ------------------------------------------------------------ */

.story-footer {
    position: relative;

    z-index: 10;

    margin-top:
        auto;

    padding-top:
        7px;

    text-align:
        center;
}


.story-footer-rule {
    width: 72%;

    height: 1px;

    margin:
        0
        auto
        13px;

    background:
        linear-gradient(
            90deg,

            transparent,

            rgba(65,43,23,0.40) 20%,

            rgba(65,43,23,0.40) 80%,

            transparent
        );
}


/* ------------------------------------------------------------
   Cita final
   ------------------------------------------------------------ */

.story-quote {
    margin: 0;

    padding: 0;

    border: none;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-style: italic;

    font-weight: 600;

    font-size:
        clamp(1.05rem, 1.3vw, 1.4rem);

    line-height:
        1.18;

    color:
        rgba(48,32,18,0.88);
}


.story-footer-ornament {
    margin-top:
        9px;

    font-size:
        1rem;

    color:
        rgba(67,45,24,0.42);
}


/* ============================================================
   AJUSTE PARA PANTALLAS CON POCA ALTURA
   ============================================================ */

@media (max-height: 800px) {

    .page-content.story-page {
        padding:
            25px
            46px
            28px
            54px;
    }


    .story-header {
        margin-bottom:
            16px;
    }


    .story-title {
        font-size:
            clamp(1.75rem, 2.5vw, 2.65rem);
    }


    .story-ornament {
        margin-top:
            11px;
    }


    .story-body {
        font-size:
            clamp(0.78rem, 0.92vw, 0.96rem);

        line-height:
            1.39;
    }


    .story-body p {
        margin-bottom:
            11px;
    }


    .story-dropcap {
        width:
            54px;

        height:
            59px;

        font-size:
            3rem;
    }


    .story-footer-rule {
        margin-bottom:
            9px;
    }


    .story-quote {
        font-size:
            clamp(0.95rem, 1.15vw, 1.15rem);
    }

}



/* ============================================================
   FIX LA VÍSPERA
   - eliminar contador duplicado
   - hacer que todo el relato entre en la hoja
   ============================================================ */


/* El contador verdadero es el que ya genera el grimorio */
.story-meta {
    display: none !important;
}


/* Reacomodar toda la página narrativa */
.page-content.story-page {
    padding:
        48px
        42px
        30px
        48px !important;

    overflow: hidden !important;
}


/* Título más proporcionado */
.story-header {
    margin:
        0
        0
        13px
        0 !important;
}


.story-title {
    font-size:
        clamp(1.75rem, 2.15vw, 2.5rem) !important;

    line-height:
        1 !important;

    margin:
        0 !important;
}


/* Ornamento mucho más compacto */
.story-ornament {
    margin-top:
        10px !important;

    font-size:
        0.9rem !important;

    line-height:
        1 !important;
}


/* La línea superior ya no hace falta */
.story-rule-top {
    display: none !important;
}


/* ============================================================
   CUERPO NARRATIVO
   ============================================================ */

.story-body {
    flex:
        1 1 auto !important;

    min-height:
        0 !important;

    font-size:
        clamp(0.76rem, 0.88vw, 0.90rem) !important;

    line-height:
        1.32 !important;

    text-align:
        justify !important;
}


.story-body p {
    margin:
        0
        0
        9px
        0 !important;
}


/* ============================================================
   LETRA CAPITULAR
   ============================================================ */

.story-dropcap {
    width:
        48px !important;

    height:
        54px !important;

    margin:
        2px
        12px
        2px
        0 !important;

    padding:
        2px !important;

    font-size:
        2.65rem !important;
}


/* ============================================================
   ORNAMENTO INTERMEDIO
   ============================================================ */

.story-small-ornament {
    margin:
        0
        auto
        7px !important;

    height:
        10px !important;

    line-height:
        10px !important;
}


/* ============================================================
   FINAL
   ============================================================ */

.story-ending {
    margin-bottom:
        4px !important;
}


.story-ending span {
    display:
        inline !important;

    font-weight:
        500 !important;
}


.story-ending span::after {
    content:
        " ";
}


/* ============================================================
   CITA FINAL
   ============================================================ */

.story-footer {
    flex:
        0 0 auto !important;

    margin-top:
        2px !important;

    padding-top:
        2px !important;
}


.story-footer-rule {
    width:
        65% !important;

    margin:
        2px
        auto
        7px !important;
}


.story-quote {
    font-size:
        clamp(0.90rem, 1.02vw, 1.05rem) !important;

    line-height:
        1.12 !important;
}


.story-footer-ornament {
    margin-top:
        4px !important;

    font-size:
        0.75rem !important;
}


/* ============================================================
   ESPECÍFICO PARA TU PANTALLA / MACBOOK
   ============================================================ */

@media (max-height: 850px) {

    .page-content.story-page {
        padding:
            42px
            38px
            24px
            44px !important;
    }


    .story-title {
        font-size:
            2rem !important;
    }


    .story-header {
        margin-bottom:
            10px !important;
    }


    .story-body {
        font-size:
            0.78rem !important;

        line-height:
            1.27 !important;
    }


    .story-body p {
        margin-bottom:
            7px !important;
    }


    .story-dropcap {
        width:
            45px !important;

        height:
            50px !important;

        font-size:
            2.45rem !important;
    }


    .story-quote {
        font-size:
            0.88rem !important;
    }

}


/* ============================================================
   FIX CONTADOR DUPLICADO
   ============================================================ */

.page-content.story-page > .story-meta {
    display: none !important;
}


/* ============================================================
   FIX DEFINITIVO - LÍNEA SUPERIOR DE LA VÍSPERA
   ============================================================ */

.page-content.story-page > .story-rule-top {
    display: none !important;
}



/* ============================================================
   HOJAS DE APÉNDICE
   Pergamino oscuro rojizo
   ============================================================ */

/*
   El spread del apéndice debe tener:
   class="grimorio-spread appendix-spread appendix-red"
*/


.appendix-spread.appendix-red .grimorio-page {

    color: #ead8bd !important;

    background-color: #4b211d !important;

    background-image:

        /* textura orgánica del papel */
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='appendixNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23appendixNoise)' opacity='.085'/%3E%3C/svg%3E"),

        /* desgaste central */
        radial-gradient(
            ellipse at center,
            rgba(132, 71, 57, 0.58) 0%,
            rgba(90, 42, 35, 0.76) 56%,
            rgba(56, 24, 22, 0.94) 100%
        ),

        /* profundidad rojiza */
        linear-gradient(
            145deg,
            #6c342d 0%,
            #542720 48%,
            #351716 100%
        ) !important;
}


/* ============================================================
   CURVATURA DEL LOMO
   ============================================================ */

.appendix-spread.appendix-red .page-left {

    box-shadow:

        inset -48px 0 58px -20px
        rgba(12, 4, 3, 0.68),

        inset 12px 0 24px
        rgba(192, 115, 83, 0.09),

        inset 0 0 45px
        rgba(27, 8, 7, 0.22) !important;
}


.appendix-spread.appendix-red .page-right {

    box-shadow:

        inset 48px 0 58px -20px
        rgba(12, 4, 3, 0.68),

        inset -12px 0 24px
        rgba(192, 115, 83, 0.09),

        inset 0 0 45px
        rgba(27, 8, 7, 0.22) !important;
}


/* ============================================================
   MARCO INTERIOR
   ============================================================ */

.appendix-spread.appendix-red
.page-content::after {

    border-color:
        rgba(213, 166, 119, 0.22) !important;
}


/* ============================================================
   ESQUINAS
   ============================================================ */

.appendix-spread.appendix-red
.page-content::before {

    border-color:
        rgba(213, 166, 119, 0.34) !important;
}


/* ============================================================
   TEXTO GENERAL
   ============================================================ */

.appendix-spread.appendix-red
.page-content {

    color:
        #e5cfad !important;
}


/* títulos */

.appendix-spread.appendix-red h1,
.appendix-spread.appendix-red h2,
.appendix-spread.appendix-red h3 {

    color:
        #f0d5ad !important;

    text-shadow:
        0 1px 0
        rgba(0,0,0,0.45);
}


/* texto secundario */

.appendix-spread.appendix-red p,
.appendix-spread.appendix-red span,
.appendix-spread.appendix-red small {

    color:
        inherit;
}


/* ============================================================
   NUMERACIÓN APÉNDICE A / B
   ============================================================ */

.appendix-spread.appendix-red
.appendix-number,

.appendix-spread.appendix-red
.tech-folio {

    color:
        rgba(239, 205, 164, 0.72) !important;
}


/* ============================================================
   ORNAMENTOS
   ============================================================ */

.appendix-spread.appendix-red
.appendix-ornament,

.appendix-spread.appendix-red
.tech-ornament {

    color:
        rgba(219, 170, 116, 0.62) !important;
}


/* ============================================================
   APÉNDICES A / B
   TERCER SPREAD — PERGAMINO ROJIZO OSCURO
   ============================================================ */

/* Fondo completo del spread */
.grimorio-stage > .grimorio-spread[data-spread="4"] {
    background-color: #51251f !important;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='redNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23redNoise)' opacity='.09'/%3E%3C/svg%3E"),

        radial-gradient(
            ellipse at center,
            #784438 0%,
            #5a2b25 55%,
            #361713 100%
        ) !important;
}


/* ============================================================
   HOJA IZQUIERDA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
> .page-left {

    background:
        radial-gradient(
            ellipse at 42% 45%,
            #7d493c 0%,
            #602f28 58%,
            #3c1a17 100%
        ) !important;

    box-shadow:
        inset -45px 0 55px -20px rgba(8, 2, 2, .75),
        inset 10px 0 25px rgba(195, 112, 82, .08),
        inset 0 0 45px rgba(20, 4, 3, .25)
        !important;
}


/* ============================================================
   HOJA DERECHA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
> .page-right {

    background:
        radial-gradient(
            ellipse at 58% 45%,
            #7d493c 0%,
            #602f28 58%,
            #3c1a17 100%
        ) !important;

    box-shadow:
        inset 45px 0 55px -20px rgba(8, 2, 2, .75),
        inset -10px 0 25px rgba(195, 112, 82, .08),
        inset 0 0 45px rgba(20, 4, 3, .25)
        !important;
}


/* ============================================================
   MARCO INTERIOR
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content::after {

    border-color:
        rgba(230, 174, 124, .25) !important;
}


/* ============================================================
   TEXTO DEL APÉNDICE
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content {

    color:
        #ead5b5 !important;
}


.grimorio-stage
> .grimorio-spread[data-spread="4"]
h1,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
h2,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
h3 {

    color:
        #f2d8b0 !important;
}


/* Numeración A / B */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
.tech-folio,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-number {

    color:
        #ddb98a !important;
}


/* ============================================================
   CONTADOR ESPECIAL PARA APÉNDICES
   Historia  -> I / III
   Apéndice -> A / Z
   ============================================================ */

/* Cuando el tercer spread está activo */
body:has(
    .grimorio-stage > .grimorio-spread[data-spread="4"].active
)
.grimorio-page-counter {

    opacity: 1 !important;

    /* ocultamos III / III */
    font-size: 0 !important;
}


/* Mostramos A / Z */
body:has(
    .grimorio-stage > .grimorio-spread[data-spread="4"].active
)
.grimorio-page-counter::after {

    content: "A / Z";

    font-family:
        'Cinzel',
        serif;

    font-size:
        0.95rem;

    font-weight:
        400;

    letter-spacing:
        0.18em;

    color:
        rgba(229, 194, 151, 0.78);

    text-shadow:
        0 1px 2px
        rgba(0,0,0,0.55);
}



/* ============================================================
   APÉNDICE A — DOCUMENTO TÉCNICO A DOBLE PÁGINA
   ============================================================ */

.grimorio-spread[data-spread="4"] {
    position: absolute;
}


/*
   Documento que atraviesa las dos hojas.
*/

.appendix-a-document {

    position: absolute;

    inset:
        22px
        30px
        25px;

    z-index: 60;

    display: flex !important;

    flex-direction: column;

    overflow: hidden;

    color: #ead5b5;

    pointer-events: auto;
}


/* ============================================================
   CABECERA
   ============================================================ */

.appendix-a-header {

    position: relative;

    flex: 0 0 auto;

    height: 55px;

    text-align: center;

    border-bottom:
        1px solid
        rgba(225,184,133,.20);
}


.appendix-a-header h2 {

    margin: 0;

    font-family:
        'Cinzel',
        serif;

    font-size:
        1.45rem;

    font-weight:
        500;

    letter-spacing:
        .12em;

    color:
        #efd6ae !important;
}


.appendix-a-project {

    display: block;

    margin-top: 2px;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .65rem;

    letter-spacing:
        .30em;

    color:
        rgba(236,202,158,.64);
}


.appendix-a-label {

    position: absolute;

    top: 3px;
    left: 6px;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .66rem;

    letter-spacing:
        .16em;

    color:
        rgba(236,202,158,.70);
}


/* ============================================================
   ÁREA DEL DIAGRAMA
   ============================================================ */

.appendix-a-viewport {

    position: relative;

    flex: 1;

    min-height: 0;

    margin-top: 10px;

    overflow: hidden;
}


.appendix-a-diagram {

    position: absolute;

    top: 0;
    left: 0;

    transform-origin:
        top left;
}


/* ============================================================
   APÉNDICE A — OVERRIDE AZUL MÁGICO ARCANO
   Sobrescribe el tono rojizo / azul anterior
   ============================================================ */

.grimorio-stage > .grimorio-spread[data-spread="4"] {
    background-color: #365a7c !important;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='arcaneNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23arcaneNoise)' opacity='.07'/%3E%3C/svg%3E"),
        radial-gradient(
            ellipse at center,
            #7fc2ff 0%,
            #5d93c7 28%,
            #3d678f 58%,
            #223b59 100%
        ) !important;
}


/* ============================================================
   HOJA IZQUIERDA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
> .page-left {

    background:
        radial-gradient(
            ellipse at 42% 45%,
            #9ed8ff 0%,
            #74add8 24%,
            #4d79a3 55%,
            #2d4868 100%
        ) !important;

    box-shadow:
        inset -48px 0 58px -20px rgba(8, 18, 32, .62),
        inset 10px 0 24px rgba(195, 231, 255, .12),
        inset 0 0 42px rgba(10, 27, 49, .24),
        0 0 14px rgba(111, 181, 255, .08)
        !important;
}


/* ============================================================
   HOJA DERECHA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
> .page-right {

    background:
        radial-gradient(
            ellipse at 58% 45%,
            #9ed8ff 0%,
            #74add8 24%,
            #4d79a3 55%,
            #2d4868 100%
        ) !important;

    box-shadow:
        inset 48px 0 58px -20px rgba(8, 18, 32, .62),
        inset -10px 0 24px rgba(195, 231, 255, .12),
        inset 0 0 42px rgba(10, 27, 49, .24),
        0 0 14px rgba(111, 181, 255, .08)
        !important;
}


/* ============================================================
   MARCO INTERIOR
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content::after {

    border-color:
        rgba(217, 238, 255, .22) !important;
}


/* Esquinas decorativas */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content::before {

    border-color:
        rgba(202, 230, 255, .32) !important;
}


/* ============================================================
   TEXTO GENERAL
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content {

    color:
        #eef7ff !important;
}


.grimorio-stage
> .grimorio-spread[data-spread="4"]
h1,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
h2,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
h3 {

    color:
        #f7fbff !important;

    text-shadow:
        0 0 8px rgba(170, 220, 255, .10),
        0 1px 2px rgba(0, 0, 0, .30);
}


/* Etiquetas del encabezado del apéndice */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-label,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-project,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.tech-folio,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-number {

    color:
        rgba(225, 242, 255, .84) !important;

    text-shadow:
        0 0 6px rgba(140, 200, 255, .18);
}


/* Título principal */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header h2 {

    color:
        #f2f9ff !important;

    text-shadow:
        0 0 10px rgba(140, 200, 255, .18),
        0 1px 2px rgba(0,0,0,.28);
}


/* Subtítulo LEONHART */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-project {

    opacity: .92;
    letter-spacing: .32em;
}


/* Contador A / Z */
body:has(
    .grimorio-stage > .grimorio-spread[data-spread="4"].active
)
.grimorio-page-counter::after {

    color:
        rgba(233, 246, 255, .90) !important;

    text-shadow:
        0 0 8px rgba(145, 205, 255, .16);
}


/* ============================================================
   APÉNDICE A — OVERRIDE PERGAMINO VINO ELEGANTE
   Reemplaza el azul arcano
   ============================================================ */

.grimorio-stage > .grimorio-spread[data-spread="4"] {
    background-color: #5a3028 !important;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='wineNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23wineNoise)' opacity='.07'/%3E%3C/svg%3E"),
        radial-gradient(
            ellipse at center,
            #9c6356 0%,
            #7a463b 35%,
            #5a3028 65%,
            #341917 100%
        ) !important;
}


/* hoja izquierda */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
> .page-left {

    background:
        radial-gradient(
            ellipse at 42% 45%,
            #b07a6d 0%,
            #8a5649 32%,
            #60352d 62%,
            #341917 100%
        ) !important;

    box-shadow:
        inset -48px 0 58px -20px rgba(14, 6, 6, .62),
        inset 10px 0 24px rgba(255, 222, 208, .08),
        inset 0 0 42px rgba(28, 10, 10, .24)
        !important;
}


/* hoja derecha */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
> .page-right {

    background:
        radial-gradient(
            ellipse at 58% 45%,
            #b07a6d 0%,
            #8a5649 32%,
            #60352d 62%,
            #341917 100%
        ) !important;

    box-shadow:
        inset 48px 0 58px -20px rgba(14, 6, 6, .62),
        inset -10px 0 24px rgba(255, 222, 208, .08),
        inset 0 0 42px rgba(28, 10, 10, .24)
        !important;
}


/* marco interior */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content::after {

    border-color:
        rgba(233, 198, 158, .18) !important;
}


/* esquinas */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content::before {

    border-color:
        rgba(233, 198, 158, .28) !important;
}


/* texto */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content {

    color:
        #f1dfc5 !important;
}

.grimorio-stage
> .grimorio-spread[data-spread="4"]
h1,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
h2,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
h3 {

    color:
        #f6e6cb !important;

    text-shadow:
        0 1px 2px rgba(0,0,0,.25);
}


/* encabezado */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-label,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-project,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.tech-folio,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-number {

    color:
        rgba(246, 224, 195, .82) !important;
}

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header h2 {

    color:
        #f7e7cf !important;
}

/* contador A / Z */
body:has(
    .grimorio-stage > .grimorio-spread[data-spread="4"].active
)
.grimorio-page-counter::after {

    color:
        rgba(246, 224, 195, .88) !important;
}


/* ============================================================
   APÉNDICE A — PERGAMINO TÉCNICO SOBRIO
   Gris azulado envejecido
   ============================================================ */

.grimorio-stage > .grimorio-spread[data-spread="4"] {

    background-color: #596873 !important;

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='technicalPaperNoise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.76' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23technicalPaperNoise)' opacity='.065'/%3E%3C/svg%3E"),

        radial-gradient(
            ellipse at center,
            #a8afb0 0%,
            #858f91 42%,
            #657176 70%,
            #465157 100%
        ) !important;
}


/* ============================================================
   HOJA IZQUIERDA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
> .page-left {

    background:

        radial-gradient(
            ellipse at 42% 45%,
            #b7bdbc 0%,
            #949d9c 34%,
            #717b7e 65%,
            #4a5559 100%
        ) !important;

    box-shadow:

        inset -48px 0 58px -20px
        rgba(15,20,22,.62),

        inset 10px 0 24px
        rgba(240,235,218,.06),

        inset 0 0 44px
        rgba(25,30,31,.22)

        !important;
}


/* ============================================================
   HOJA DERECHA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
> .page-right {

    background:

        radial-gradient(
            ellipse at 58% 45%,
            #b7bdbc 0%,
            #949d9c 34%,
            #717b7e 65%,
            #4a5559 100%
        ) !important;

    box-shadow:

        inset 48px 0 58px -20px
        rgba(15,20,22,.62),

        inset -10px 0 24px
        rgba(240,235,218,.06),

        inset 0 0 44px
        rgba(25,30,31,.22)

        !important;
}


/* ============================================================
   MARCO INTERIOR
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content::after {

    border-color:
        rgba(222, 213, 190, .18) !important;
}


/* Esquinas */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content::before {

    border-color:
        rgba(222, 213, 190, .25) !important;
}


/* ============================================================
   TEXTO GENERAL
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content {

    color:
        #eee6d7 !important;
}


/* ============================================================
   TÍTULOS
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
h1,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
h2,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
h3 {

    color:
        #f2ead9 !important;

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.30);
}


/* ============================================================
   APÉNDICE A / LEONHART
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-label,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-project,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.tech-folio,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-number {

    color:
        rgba(238, 226, 204, .78) !important;

    text-shadow:
        0 1px 1px
        rgba(0,0,0,.24);
}


/* Título principal */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header h2 {

    color:
        #f4ead7 !important;
}


/* Línea debajo del encabezado */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header {

    border-bottom-color:
        rgba(229, 218, 196, .16) !important;
}


/* ============================================================
   CONTADOR A / Z
   ============================================================ */

body:has(
    .grimorio-stage > .grimorio-spread[data-spread="4"].active
)
.grimorio-page-counter::after {

    color:
        rgba(238, 226, 204, .82) !important;

    text-shadow:
        0 1px 2px
        rgba(0,0,0,.30);
}


/* ============================================================
   APÉNDICE A
   PERGAMINO CLARO + TINTA CARMESÍ
   ============================================================ */

.grimorio-stage > .grimorio-spread[data-spread="4"] {

    background-color: #d7c19a !important;

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='appendixInkPaper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23appendixInkPaper)' opacity='.055'/%3E%3C/svg%3E"),

        radial-gradient(
            ellipse at center,
            #eee0bf 0%,
            #ddc69e 58%,
            #bc9a6e 100%
        ) !important;
}


/* ============================================================
   HOJA IZQUIERDA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
> .page-left {

    background:

        radial-gradient(
            ellipse at 42% 44%,
            #f0e2c2 0%,
            #dec69d 58%,
            #b99367 100%
        ) !important;

    box-shadow:

        inset -48px 0 58px -20px
        rgba(55, 35, 20, .48),

        inset 10px 0 23px
        rgba(255, 247, 221, .25),

        inset 0 0 34px
        rgba(100, 63, 31, .09)

        !important;
}


/* ============================================================
   HOJA DERECHA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
> .page-right {

    background:

        radial-gradient(
            ellipse at 58% 44%,
            #f0e2c2 0%,
            #dec69d 58%,
            #b99367 100%
        ) !important;

    box-shadow:

        inset 48px 0 58px -20px
        rgba(55, 35, 20, .48),

        inset -10px 0 23px
        rgba(255, 247, 221, .25),

        inset 0 0 34px
        rgba(100, 63, 31, .09)

        !important;
}


/* Marco interior */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content::after {

    border-color:
        rgba(91, 54, 31, .22) !important;
}


/* Esquinas */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.page-content::before {

    border-color:
        rgba(91, 54, 31, .31) !important;
}


/* ============================================================
   CABECERA DEL APÉNDICE EN TINTA ROJA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header h2 {

    color:
        #741f1d !important;

    text-shadow:
        none !important;
}


.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-label,

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-project {

    color:
        rgba(104, 27, 26, .72) !important;

    text-shadow:
        none !important;
}


/* A / Z */

body:has(
    .grimorio-stage > .grimorio-spread[data-spread="4"].active
)
.grimorio-page-counter::after {

    color:
        rgba(106, 29, 27, .78) !important;

    text-shadow:
        none !important;
}


/* ============================================================
   APÉNDICE A — TÍTULO TIPO "LA VÍSPERA"
   D capitular + texto hacia la izquierda
   ============================================================ */

.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-document {
    position: relative;
}

/* Quitamos el header centrado tradicional */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-header {
    position: absolute;
    top: 72px;
    left: 72px;
    width: 430px;
    z-index: 20;
    display: block;
    text-align: left;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* APÉNDICE A arriba pequeño */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-label {
    display: block;
    margin: 0 0 12px 0;
    font-family: "Cinzel", serif;
    font-size: 0.82rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(60, 43, 26, 0.70) !important;
}

/* Título principal a la izquierda */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-header h2 {
    margin: 0;
    max-width: 390px;
    font-family: "Cormorant Garamond", serif !important;
    font-size: 2.35rem !important;
    line-height: 1.08;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0.01em !important;
    color: #24190f !important;
    text-align: left !important;
}

/* D capitular estilo La Víspera */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-header h2::first-letter {
    float: left;
    font-family: "Cinzel", serif;
    font-size: 4.9rem;
    line-height: 0.88;
    margin: 0.08em 0.45rem 0 0;
    padding: 0.22rem 0.55rem 0.18rem 0.55rem;
    border: 1.5px solid rgba(44, 32, 20, 0.65);
    box-shadow: inset 0 0 0 1px rgba(44, 32, 20, 0.25);
    background:
        repeating-linear-gradient(
            45deg,
            rgba(44,32,20,0.035) 0,
            rgba(44,32,20,0.035) 2px,
            transparent 2px,
            transparent 5px
        );
    color: #24190f !important;
}

/* Subtítulo LEONHART debajo */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-project {
    display: block;
    margin-top: 10px;
    margin-left: 108px;
    font-family: "Cinzel", serif;
    font-size: 0.82rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(75, 50, 27, 0.58) !important;
}

/* Bajamos un poco el diagrama para que no choque con el título */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-viewport {
    padding-top: 120px;
}

/* Hacemos el diagrama un poco más compacto */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-diagram {
    transform: scale(0.92);
    transform-origin: top center;
}

/* Si quieres que A/Z siga limpio */
body:has(.grimorio-stage > .grimorio-spread[data-spread="4"].active)
.grimorio-page-counter::after {
    color: rgba(44,32,20,.72) !important;
    text-shadow: none !important;
}


/* ============================================================
   AJUSTE RÁPIDO — SUBIR EL TÍTULO DEL APÉNDICE A
   ============================================================ */

.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-header {
    top: 28px !important;
    left: 78px !important;
    width: 460px !important;
    z-index: 30 !important;
}

/* APÉNDICE A */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-label {
    margin: 0 0 10px 0 !important;
}

/* Título principal */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-header h2 {
    margin: 0 !important;
    max-width: 420px !important;
    font-size: 2.45rem !important;
    line-height: 1.02 !important;
}

/* D capitular */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-header h2::first-letter {
    font-size: 5.1rem !important;
    margin: 0.02em 0.38rem 0 0 !important;
    padding: 0.16rem 0.50rem 0.12rem 0.50rem !important;
}

/* LEONHART debajo del título */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-project {
    margin-top: 6px !important;
    margin-left: 96px !important;
}

/* Ajuste para que el diagrama no choque con el título */
.grimorio-stage > .grimorio-spread[data-spread="4"] .appendix-a-viewport {
    padding-top: 118px !important;
}


/* ============================================================
   FIX APÉNDICE A
   Recuperar el documento DENTRO de las dos hojas
   ============================================================ */

/*
   ESTE ERA EL PROBLEMA:
   appendix-a-document debe ser ABSOLUTO,
   no relativo.
*/

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-document {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    overflow: hidden !important;

    z-index: 60 !important;

    pointer-events: none;
}


/* ============================================================
   TÍTULO
   ARRIBA A LA IZQUIERDA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header {

    position: absolute !important;

    top: 32px !important;
    left: 72px !important;

    width: 430px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 100 !important;

    text-align: left !important;

    background: transparent !important;

    border: none !important;

    pointer-events: none;
}


/* APÉNDICE A */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-label {

    display: block !important;

    margin:
        0
        0
        10px
        0 !important;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .72rem !important;

    letter-spacing:
        .16em;

    color:
        rgba(44,32,20,.62) !important;
}


/* ============================================================
   "D"iagrama de flujo
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header h2 {

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    width:
        390px !important;

    max-width:
        390px !important;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif !important;

    font-size:
        2.25rem !important;

    font-weight:
        500 !important;

    line-height:
        1.05 !important;

    letter-spacing:
        .01em !important;

    text-transform:
        none !important;

    text-align:
        left !important;

    color:
        #24190f !important;

    text-shadow:
        none !important;
}


/* D CAPITULAR */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header h2::first-letter {

    float: left !important;

    font-family:
        'Cinzel',
        serif !important;

    font-size:
        4.7rem !important;

    line-height:
        .82 !important;

    margin:
        4px
        10px
        0
        0 !important;

    padding:
        5px
        10px
        6px !important;

    color:
        #24190f !important;

    border:
        3px double
        rgba(44,32,20,.72) !important;

    background:

        repeating-linear-gradient(
            45deg,

            transparent,
            transparent 2px,

            rgba(44,32,20,.035) 2px,
            rgba(44,32,20,.035) 4px
        ) !important;

    box-shadow:

        inset 0 0 8px
        rgba(44,32,20,.06)

        !important;
}


/* LEONHART debajo */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-project {

    display:
        block !important;

    margin:
        8px
        0
        0
        88px !important;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .64rem !important;

    letter-spacing:
        .25em;

    color:
        rgba(75,50,27,.50) !important;
}


/* ============================================================
   ÁREA DEL DIAGRAMA
   AHORA TAMBIÉN QUEDA DENTRO DE LA HOJA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-viewport {

    position:
        absolute !important;

    top:
        125px !important;

    left:
        45px !important;

    right:
        45px !important;

    bottom:
        28px !important;

    width:
        auto !important;

    height:
        auto !important;

    padding:
        0 !important;

    margin:
        0 !important;

    overflow:
        hidden !important;

    pointer-events:
        auto;
}


/*
   IMPORTANTE:
   quitamos el transform que habíamos puesto
   al contenedor. El JS ya escala el diagrama.
*/

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-diagram {

    position:
        absolute !important;

    inset:
        0 !important;

    transform:
        none !important;

    overflow:
        hidden !important;
}


/* ============================================================
   FIX FINAL ENCABEZADO APÉNDICE A
   Proporciones tipo "LA VÍSPERA"
   ============================================================ */

/* Contenedor completo dentro de las hojas */
.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-document {

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    z-index: 60 !important;
}


/* ============================================================
   CABECERA
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header {

    position: absolute !important;

    top: 25px !important;
    left: 55px !important;

    width: 360px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: left !important;

    background: transparent !important;
    border: none !important;

    z-index: 100 !important;
}


/* APÉNDICE A */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-label {

    display: block !important;

    margin: 0 0 7px 0 !important;

    font-family: 'Cinzel', serif;

    font-size: .62rem !important;

    line-height: 1 !important;

    letter-spacing: .17em !important;

    color: rgba(44,32,20,.60) !important;
}


/* ============================================================
   "D"iagrama de flujo
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header h2 {

    display: block !important;

    width: 340px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif !important;

    font-size: 1.65rem !important;

    font-weight: 500 !important;

    line-height: 1.05 !important;

    letter-spacing: .01em !important;

    text-transform: none !important;

    color: #24190f !important;

    text-shadow: none !important;
}


/* D capitular */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header h2::first-letter {

    float: left !important;

    width: auto !important;
    height: auto !important;

    margin:
        1px
        8px
        0
        0 !important;

    padding:
        4px
        8px
        5px !important;

    font-family: 'Cinzel', serif !important;

    font-size: 3.15rem !important;

    line-height: .85 !important;

    color: #24190f !important;

    border:
        3px double
        rgba(44,32,20,.68) !important;

    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(44,32,20,.035) 2px,
            rgba(44,32,20,.035) 4px
        ) !important;

    box-shadow:
        inset 0 0 7px
        rgba(44,32,20,.06) !important;
}


/* LEONHART */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-project {

    display: block !important;

    margin:
        5px
        0
        0
        67px !important;

    font-family: 'Cinzel', serif;

    font-size: .50rem !important;

    line-height: 1 !important;

    letter-spacing: .24em !important;

    color: rgba(75,50,27,.48) !important;
}


/* ============================================================
   ❧ ❦ ☙
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-ornament {

    display: block !important;

    margin:
        7px
        0
        0
        66px !important;

    font-family:
        Georgia,
        serif;

    font-size: .72rem !important;

    line-height: 1 !important;

    letter-spacing: .12em !important;

    color:
        rgba(75,50,27,.45) !important;

    text-align: left !important;
}


/* ============================================================
   DIAGRAMA
   Empieza debajo del encabezado pero conserva su escalado JS
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-viewport {

    position: absolute !important;

    top: 95px !important;
    left: 38px !important;
    right: 38px !important;
    bottom: 26px !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}


.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-diagram {

    position: absolute !important;

    inset: 0 !important;

    overflow: hidden !important;

    /* El tamaño lo controla appendix-flow.js */
    transform: none !important;
}


/* ============================================================
   APÉNDICE A — MOVER ETIQUETA FUERA DEL TÍTULO
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-label {

    position: absolute !important;

    top: -18px !important;
    left: -18px !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: 'Cinzel', serif !important;

    font-size: .56rem !important;

    letter-spacing: .18em !important;

    line-height: 1 !important;

    color:
        rgba(44,32,20,.58) !important;

    text-transform:
        uppercase !important;

    white-space:
        nowrap !important;

    z-index: 120 !important;
}


/* ============================================================
   REACOMODAR EL TÍTULO
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header {

    top: 42px !important;
    left: 60px !important;

    width: 360px !important;
}


/* ============================================================
   D CAPITULAR
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-header h2::first-letter {

    margin-top:
        0 !important;
}


/* ============================================================
   LEONHART
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-project {

    margin-top:
        6px !important;

    margin-left:
        67px !important;
}


/* ============================================================
   ORNAMENTOS
   ============================================================ */

.grimorio-stage
> .grimorio-spread[data-spread="4"]
.appendix-a-ornament {

    margin-top:
        7px !important;

    margin-left:
        67px !important;
}


/* ============================================================
   FIX VISIBILIDAD — PÁGINA I
   ============================================================ */

.grimorio-spread
.page-content.leonhart-intro-left
> .intro-portrait,

.grimorio-spread
.page-content.leonhart-intro-right
> .intro-story {

    display: flex !important;
}


.page-content.leonhart-intro-left {

    display: block !important;
}


.page-content.leonhart-intro-right {

    display: flex !important;
}


/* ============================================================
   PÁGINA I — INTRODUCCIÓN LEONHART
   DISEÑO EDITORIAL
   ============================================================ */

.leonhart-intro-spread
.page-content.leonhart-game-intro-left,

.leonhart-intro-spread
.page-content.leonhart-game-intro-right {

    display: block !important;

    position: relative !important;

    height: 100% !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    column-count: unset !important;
    columns: unset !important;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    color: #2b2015;
}


/* ============================================================
   IZQUIERDA
   ============================================================ */

.leonhart-game-intro-left {

    padding:
        36px
        56px
        30px
        48px !important;
}


.game-opening {

    position: relative;

    width: 100%;
    height: 100%;

    display: flex !important;

    flex-direction: column;

    align-items: center;

    text-align: center;
}


.game-opening-kicker {

    width: 100%;

    text-align: left;

    font-family:
        'Cinzel',
        serif;

    font-size: .58rem;

    letter-spacing: .18em;

    color:
        rgba(55,38,22,.56);
}


.game-opening-smallornament {

    margin-top: 15px;

    font-size: .72rem;

    letter-spacing: .18em;

    color:
        rgba(73,49,26,.42);
}


/* TÍTULO */

.game-opening-title {

    margin-top: 14px;
}


.game-opening-title h1 {

    margin: 0 !important;

    font-family:
        'Cinzel',
        serif;

    font-size:
        2.65rem !important;

    line-height: 1;

    font-weight: 400;

    letter-spacing: .085em;

    color: #21170e;
}


.game-opening-title p {

    margin:
        7px
        0
        0;

    font-size: 1rem;

    font-style: italic;

    letter-spacing: .035em;

    color:
        rgba(46,31,17,.72);
}


/* ============================================================
   SELLO
   ============================================================ */

.leonhart-seal {

    width: 96px;
    height: 96px;

    margin:
        24px
        auto
        18px;

    border:
        1px solid
        rgba(48,32,17,.42);

    border-radius: 50%;

    padding: 6px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow:

        inset 0 0 0 3px
        rgba(48,32,17,.06),

        inset 0 0 12px
        rgba(48,32,17,.09);
}


.leonhart-seal-inner {

    width: 100%;
    height: 100%;

    border:
        3px double
        rgba(48,32,17,.56);

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-family:
        'Cinzel',
        serif;

    font-size: 3rem;

    color:
        rgba(37,25,14,.88);

    background:

        repeating-linear-gradient(
            45deg,

            transparent,
            transparent 3px,

            rgba(51,34,18,.025) 3px,
            rgba(51,34,18,.025) 5px
        );
}


/* LEAD */

.game-opening-lead {

    width: 78%;

    margin:
        0
        auto
        19px;

    font-size: .92rem;

    line-height: 1.35;

    font-style: italic;

    color:
        rgba(46,31,17,.77);
}


/* ============================================================
   TRES PILARES
   ============================================================ */

.game-pillars {

    width: 78%;

    margin: 0 auto;
}


.game-pillar {

    padding:
        9px
        0;

    border-top:
        1px solid
        rgba(63,43,24,.19);

    text-align: left;
}


.game-pillar:last-child {

    border-bottom:
        1px solid
        rgba(63,43,24,.19);
}


.game-pillar h3 {

    margin:
        0
        0
        3px;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .65rem;

    font-weight:
        600;

    letter-spacing:
        .15em;

    color:
        rgba(42,28,15,.88);
}


.game-pillar p {

    margin: 0;

    font-size: .72rem;

    line-height: 1.28;

    text-align: justify;

    color:
        rgba(50,34,19,.70);
}


.game-opening-footer {

    margin-top: auto;

    width: 75%;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    font-family:
        'Cinzel',
        serif;

    font-size:
        .47rem;

    letter-spacing:
        .18em;

    color:
        rgba(63,43,24,.43);
}


.game-opening-footer span {

    width: 43px;

    height: 1px;

    background:
        rgba(63,43,24,.22);
}


/* ============================================================
   DERECHA
   ============================================================ */

.leonhart-game-intro-right {

    padding:
        38px
        55px
        30px
        58px !important;
}


.game-description {

    width: 100%;
    height: 100%;

    display: flex !important;

    flex-direction: column;

    position: relative;

    column-count: unset !important;
    columns: unset !important;
}


/* HEADER */

.game-description-header {

    flex: 0 0 auto;

    text-align: center;

    margin-bottom: 19px;
}


.game-description-pretitle {

    margin-bottom: 8px;

    font-family:
        'Cinzel',
        serif;

    font-size: .52rem;

    letter-spacing: .21em;

    color:
        rgba(63,43,24,.48);
}


.game-description-header h2 {

    margin: 0 !important;

    padding: 0 !important;

    font-family:
        'Cinzel',
        serif;

    font-size:
        2rem !important;

    line-height: 1;

    font-weight: 400;

    letter-spacing: .09em;

    text-align: center !important;

    color: #21170e;
}


.game-description-ornament {

    margin-top: 11px;

    font-size: .72rem;

    letter-spacing: .18em;

    color:
        rgba(73,49,26,.43);
}


/* ============================================================
   TEXTO — UNA SOLA COLUMNA
   ============================================================ */

.game-description-body {

    display: block !important;

    width: 100% !important;

    max-width: none !important;

    flex: 1 1 auto;

    min-height: 0;

    column-count: 1 !important;
    column-width: auto !important;
    columns: 1 !important;

    font-size: .79rem !important;

    line-height: 1.34 !important;

    text-align: justify;

    color: #302216;
}


.game-description-body p {

    display: block !important;

    width: 100% !important;

    max-width: none !important;

    float: none;

    margin:
        0
        0
        12px !important;

    padding: 0 !important;
}


/* L CAPITULAR */

.game-description-dropcap {

    float: left;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 47px;
    height: 51px;

    margin:
        3px
        11px
        1px
        0;

    font-family:
        'Cinzel',
        serif;

    font-size:
        2.55rem;

    line-height: 1;

    color: #24190f;

    border:
        3px double
        rgba(44,32,20,.72);

    background:

        repeating-linear-gradient(
            45deg,

            transparent,
            transparent 2px,

            rgba(44,32,20,.035) 2px,
            rgba(44,32,20,.035) 4px
        );
}


/* DIVISOR */

.game-description-divider {

    width: 125px;

    margin:
        4px
        auto
        12px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 8px;

    font-size: .52rem;

    color:
        rgba(70,47,25,.40);
}


.game-description-divider span {

    width: 44px;

    height: 1px;

    background:
        rgba(70,47,25,.23);
}


/* ============================================================
   CITA INFERIOR
   ============================================================ */

.game-description-footer {

    flex: 0 0 auto;

    margin-top: auto;

    text-align: center;

    color:
        rgba(49,33,18,.78);
}


.game-description-footer > div {

    width: 68%;

    height: 1px;

    margin:
        7px
        auto
        9px;

    background:

        linear-gradient(
            90deg,

            transparent,

            rgba(62,42,23,.34),

            transparent
        );
}


.game-description-footer blockquote {

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    font-family:
        'Cormorant Garamond',
        Georgia,
        serif;

    font-size: .86rem;

    line-height: 1.25;

    font-style: italic;

    color:
        rgba(48,32,18,.82);
}


.game-description-footer span {

    display: block;

    margin-top: 6px;

    font-size: .66rem;

    color:
        rgba(70,47,25,.38);
}


/* ============================================================
   EVITAR REGLAS VIEJAS DEL RENDERER
   ============================================================ */

.leonhart-intro-spread
.leonhart-game-intro-left > *,

.leonhart-intro-spread
.leonhart-game-intro-right > * {

    visibility: visible !important;
    opacity: 1 !important;
}


.leonhart-intro-spread
.leonhart-game-intro-right * {

    max-height: none;
}



/* ============================================================
   PÁGINA I — FIX AISLADO
   ============================================================ */

.leonhart-page-one-spread
.page-content.leonhart-page-one-left,

.leonhart-page-one-spread
.page-content.leonhart-page-one-right {

    display: block !important;

    position: relative !important;

    box-sizing: border-box !important;

    width: 100% !important;
    height: 100% !important;

    overflow: hidden !important;

    columns: auto !important;
    column-count: 1 !important;
    column-width: auto !important;

    visibility: visible !important;
    opacity: 1 !important;

    color: #2c2014 !important;
}


/* Todo nuestro contenido DEBE mostrarse */

#leonhart-page-one-left,
#leonhart-page-one-right,
#leonhart-page-one-left *,
#leonhart-page-one-right * {

    visibility: visible !important;
    opacity: 1 !important;
}


/* ============================================================
   IZQUIERDA
   ============================================================ */

.leonhart-page-one-left {

    padding: 36px 52px 30px 46px !important;
}


.page-one-opening {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    width: 100% !important;
    height: 100% !important;

    text-align: center;
}


.page-one-kicker {

    align-self: flex-start;

    font-family: 'Cinzel', serif;

    font-size: .58rem;

    letter-spacing: .20em;

    color: rgba(55,38,22,.55);
}


.page-one-ornament {

    margin-top: 13px;

    font-family: Georgia, serif;

    font-size: .74rem;

    letter-spacing: .14em;

    color: rgba(68,45,23,.45);
}


.page-one-logo {

    margin: 14px 0 0 !important;

    font-family: 'Cinzel', serif !important;

    font-size: 2.55rem !important;

    font-weight: 400 !important;

    line-height: 1 !important;

    letter-spacing: .09em !important;

    color: #21170e !important;
}


.page-one-subtitle {

    margin-top: 7px;

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: .95rem;

    font-style: italic;

    color: rgba(44,32,20,.72);
}


/* SELLO */

.page-one-emblem {

    width: 100px;
    height: 100px;

    margin: 22px auto 17px;

    border: 1px solid rgba(44,32,20,.38);

    border-radius: 50%;

    padding: 6px;

    box-sizing: border-box;
}


.page-one-emblem-ring {

    width: 100%;
    height: 100%;

    display: flex !important;

    align-items: center;
    justify-content: center;

    box-sizing: border-box;

    border: 3px double rgba(44,32,20,.64);

    border-radius: 50%;

    font-family: 'Cinzel', serif;

    font-size: 3rem;

    color: #281c11;
}


.page-one-intro-line {

    width: 80%;

    margin: 0 auto 14px;

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: .84rem;

    line-height: 1.3;

    font-style: italic;
}


/* PILARES */

.page-one-pillars {

    width: 80%;

    text-align: left;
}


.page-one-pillars article {

    display: block !important;

    padding: 8px 0;

    border-top: 1px solid rgba(55,38,22,.20);
}


.page-one-pillars article:last-child {

    border-bottom: 1px solid rgba(55,38,22,.20);
}


.page-one-pillars h3 {

    margin: 0 0 3px !important;

    font-family: 'Cinzel', serif;

    font-size: .60rem;

    letter-spacing: .15em;

    color: #302116;
}


.page-one-pillars p {

    margin: 0 !important;

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: .67rem;

    line-height: 1.25;

    text-align: justify;
}


.page-one-left-footer {

    margin-top: auto;

    display: flex !important;

    align-items: center;

    gap: 8px;

    font-family: 'Cinzel', serif;

    font-size: .46rem;

    letter-spacing: .16em;

    color: rgba(55,38,22,.44);
}


.page-one-left-footer span {

    width: 40px;

    height: 1px;

    background: rgba(55,38,22,.22);
}


/* ============================================================
   DERECHA
   ============================================================ */

.leonhart-page-one-right {

    padding: 40px 53px 30px 57px !important;
}


.page-one-about {

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;
    height: 100% !important;
}


.page-one-about > header {

    display: block !important;

    text-align: center;

    margin-bottom: 18px;
}


.page-one-about-kicker {

    font-family: 'Cinzel', serif;

    font-size: .50rem;

    letter-spacing: .20em;

    color: rgba(55,38,22,.48);
}


.page-one-about h2 {

    margin: 8px 0 0 !important;

    font-family: 'Cinzel', serif !important;

    font-size: 2rem !important;

    font-weight: 400 !important;

    line-height: 1 !important;

    letter-spacing: .09em !important;

    text-align: center !important;

    color: #21170e !important;
}


/* TEXTO */

.page-one-text {

    display: block !important;

    width: 100% !important;

    column-count: 1 !important;
    columns: auto !important;

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: .77rem;

    line-height: 1.34;

    text-align: justify;
}


.page-one-text p {

    display: block !important;

    width: 100% !important;

    margin: 0 0 11px !important;

    padding: 0 !important;

    float: none;
}


/* L CAPITULAR */

.page-one-dropcap {

    float: left !important;

    display: flex !important;

    align-items: center;
    justify-content: center;

    width: 46px;
    height: 50px;

    margin: 3px 11px 1px 0;

    box-sizing: border-box;

    border: 3px double rgba(44,32,20,.70);

    font-family: 'Cinzel', serif;

    font-size: 2.45rem;

    line-height: 1;

    color: #25190f;
}


/* DIVISOR */

.page-one-divider {

    display: flex !important;

    width: 120px;

    margin: 3px auto 11px;

    align-items: center;

    justify-content: center;

    gap: 8px;

    font-size: .50rem;

    color: rgba(55,38,22,.42);
}


.page-one-divider span {

    width: 42px;

    height: 1px;

    background: rgba(55,38,22,.22);
}


/* CITA */

.page-one-quote {

    display: block !important;

    margin-top: auto;

    text-align: center;
}


.page-one-quote > div {

    width: 65%;

    height: 1px;

    margin: 5px auto 9px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(55,38,22,.34),
            transparent
        );
}


.page-one-quote blockquote {

    display: block !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    font-family: 'Cormorant Garamond', Georgia, serif;

    font-size: .84rem;

    line-height: 1.25;

    font-style: italic;

    color: rgba(45,31,18,.80);
}


.page-one-quote > span {

    display: block !important;

    margin-top: 6px;

    font-size: .66rem;

    color: rgba(55,38,22,.40);
}


/* ============================================================
   FIX DEFINITIVO PÁGINA I
   El renderer antiguo oculta los hijos de .page-content
   ============================================================ */

/* HOJAS */
.grimorio-spread.leonhart-page-one-spread
.page-content.leonhart-page-one-left,

.grimorio-spread.leonhart-page-one-spread
.page-content.leonhart-page-one-right {

    display: block !important;

    position: relative !important;

    visibility: visible !important;

    opacity: 1 !important;

    width: 100% !important;
    height: 100% !important;

    box-sizing: border-box !important;

    overflow: hidden !important;

    z-index: 10 !important;
}


/* ============================================================
   ESTE ES EL FIX IMPORTANTE
   Fuerza a mostrarse al hijo directo que el renderer oculta
   ============================================================ */

.grimorio-spread.leonhart-page-one-spread
.page-content.leonhart-page-one-left
> .page-one-opening {

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 50 !important;
}


.grimorio-spread.leonhart-page-one-spread
.page-content.leonhart-page-one-right
> .page-one-about {

    display: flex !important;

    visibility: visible !important;

    opacity: 1 !important;

    position: relative !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 50 !important;
}


/* Asegurar visibilidad del contenido interno */

.leonhart-page-one-spread
.page-one-opening *,

.leonhart-page-one-spread
.page-one-about * {

    visibility: visible !important;

    opacity: 1 !important;
}


/* Evitar transformaciones heredadas */

.leonhart-page-one-spread
.page-one-opening,

.leonhart-page-one-spread
.page-one-about {

    transform: none !important;

    clip-path: none !important;

    filter: none !important;
}


/* Texto por encima de cualquier textura */

.leonhart-page-one-spread
.page-one-opening,

.leonhart-page-one-spread
.page-one-about {

    color: #2c2014 !important;
}


/* ============================================================
   PÁGINA I — AJUSTE FINO DE LEGIBILIDAD
   ============================================================ */

/* Texto principal de la derecha */
.leonhart-page-one-spread .page-one-text {
    font-size: .84rem !important;
    line-height: 1.38 !important;
}

/* Un poco más de separación entre párrafos */
.leonhart-page-one-spread .page-one-text p {
    margin-bottom: 13px !important;
}

/* L capitular ligeramente más protagonista */
.leonhart-page-one-spread .page-one-dropcap {
    width: 49px !important;
    height: 53px !important;
    font-size: 2.6rem !important;
}

/* Ornamentos un poco más visibles */
.leonhart-page-one-spread .page-one-ornament {
    color: rgba(68,45,23,.58) !important;
    font-size: .78rem !important;
}

/* Texto de los tres pilares */
.leonhart-page-one-spread .page-one-pillars p {
    font-size: .71rem !important;
    line-height: 1.30 !important;
}

/* Descripción central izquierda */
.leonhart-page-one-spread .page-one-intro-line {
    font-size: .89rem !important;
    line-height: 1.34 !important;
}

/* Cita final */
.leonhart-page-one-spread .page-one-quote blockquote {
    font-size: .89rem !important;
}


/* ============================================================
   PÁGINA I — SELLO REAL DE LA ORDEN DEL LEÓN
   ============================================================ */

.leonhart-page-one-spread .page-one-emblem {
    width: 120px !important;
    height: 120px !important;

    margin: 18px auto 14px !important;

    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: transparent !important;
}

.leonhart-page-one-spread .page-one-lion-seal {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    opacity: .72;

    filter:
        sepia(.55)
        saturate(.45)
        contrast(1.12)
        brightness(.78);

    mix-blend-mode: multiply;

    background: transparent !important;
}


/* ============================================================
   PÁGINA I — SELLO DE LEONHART
   ============================================================ */

.leonhart-page-one-spread .page-one-emblem {
    width: 125px !important;
    height: 125px !important;

    margin: 18px auto 14px !important;

    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    box-shadow: none !important;
    background: transparent !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.leonhart-page-one-spread .page-one-lion-seal {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;

    background: transparent !important;

    opacity: .82;

    filter:
        sepia(.30)
        contrast(1.08)
        brightness(.82);

    mix-blend-mode: multiply;
}


/* ============================================================
   PÁGINA I — SELLO REAL DE LA ORDEN DEL LEÓN
   ============================================================ */

.leonhart-page-one-spread .page-one-emblem {

    width: 125px !important;
    height: 125px !important;

    margin: 18px auto 14px !important;
    padding: 0 !important;

    border: none !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* Apagar por completo la antigua L */
.leonhart-page-one-spread .page-one-emblem-ring {
    display: none !important;
}


/* SELLO PNG */
.leonhart-page-one-spread .page-one-lion-seal {

    display: block !important;

    width: 125px !important;
    height: 125px !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    opacity: .82;

    mix-blend-mode: multiply;

    filter:
        sepia(.25)
        contrast(1.08)
        brightness(.88);
}



/* ============================================================
   APÉNDICE A — ELIMINAR SOMBRA CENTRAL DEL LOMO
   Solo afecta al spread 4 / Ingeniería
   ============================================================ */

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread >
.grimorio-page.page-left {

    box-shadow:
        none !important;
}


.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread >
.grimorio-page.page-right {

    box-shadow:
        none !important;
}


/* Eliminar gradientes/pseudo-elementos del borde interior */

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread >
.grimorio-page.page-left::after,

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread >
.grimorio-page.page-right::before {

    content:
        none !important;

    display:
        none !important;

    opacity:
        0 !important;

    background:
        none !important;

    box-shadow:
        none !important;

    filter:
        none !important;
}



/* ============================================================
   GRIMORIO — LIBRO FÍSICO UNIFICADO
   Apéndice A usa el mismo pergamino de Introducción
   ============================================================ */


/* ------------------------------------------------------------
   PAPEL BASE
   ------------------------------------------------------------ */

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread >
.grimorio-page {

    color:
        var(--ink) !important;

    background-color:
        var(--paper) !important;

    background-image:

        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),

        radial-gradient(
            ellipse at center,
            rgba(239, 222, 190, 0.70) 0%,
            rgba(209, 184, 148, 0.94) 72%,
            rgba(175, 143, 99, 0.90) 100%
        ) !important;
}


/* ------------------------------------------------------------
   HOJA IZQUIERDA
   Exactamente la geometría de Introducción
   ------------------------------------------------------------ */

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread >
.grimorio-page.page-left {

    border-radius:
        7px 1px 2px 12px !important;

    border:
        1px solid
        rgba(72, 47, 24, 0.22) !important;

    border-right:
        1px solid
        rgba(0, 0, 0, 0.18) !important;

    box-shadow:

        inset -48px 0 58px -22px
        rgba(0, 0, 0, 0.52),

        inset 7px 0 16px
        rgba(255, 245, 218, 0.20),

        -5px 7px 0
        rgba(169, 136, 92, 0.58),

        -8px 12px 20px
        rgba(0, 0, 0, 0.44)

        !important;
}


/* ------------------------------------------------------------
   HOJA DERECHA
   Exactamente la geometría de Introducción
   ------------------------------------------------------------ */

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread >
.grimorio-page.page-right {

    border-radius:
        1px 7px 12px 2px !important;

    border:
        1px solid
        rgba(72, 47, 24, 0.22) !important;

    border-left:
        1px solid
        rgba(255, 255, 255, 0.12) !important;

    box-shadow:

        inset 48px 0 58px -22px
        rgba(0, 0, 0, 0.52),

        inset -7px 0 16px
        rgba(255, 245, 218, 0.20),

        5px 7px 0
        rgba(169, 136, 92, 0.58),

        8px 12px 20px
        rgba(0, 0, 0, 0.44)

        !important;
}


/* ------------------------------------------------------------
   NO CAMBIAMOS EL DOCUMENTO DE INGENIERÍA
   Diagrama, título y contenido siguen siendo los del Apéndice
   ------------------------------------------------------------ */

.grimorio-stage >
.grimorio-spread[data-spread="4"].appendix-spread
.appendix-a-document {

    color:
        var(--ink) !important;
}



/* ============================================================
   II / V — HOJA 03
   LA VÍSPERA — CAPA EDITORIAL SOBRE VIDEO
   ============================================================ */

.vispera-video-frame {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}


/* ------------------------------------------------------------
   VIGNETTE CINEMATOGRÁFICA
   ------------------------------------------------------------ */

.vispera-video-vignette {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(10, 7, 4, 0.52) 0%,
            rgba(10, 7, 4, 0.18) 19%,
            rgba(10, 7, 4, 0.02) 42%,
            rgba(10, 7, 4, 0.03) 66%,
            rgba(10, 7, 4, 0.48) 100%
        ),
        linear-gradient(
            to right,
            rgba(10, 7, 4, 0.22) 0%,
            transparent 28%,
            transparent 78%,
            rgba(10, 7, 4, 0.15) 100%
        );
}


/* ------------------------------------------------------------
   CAPA EDITORIAL
   ------------------------------------------------------------ */

.vispera-editorial-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    box-sizing: border-box;

    padding:
        clamp(28px, 5vh, 50px)
        clamp(28px, 4vw, 52px)
        clamp(26px, 4vh, 44px);

    pointer-events: none;

    color: #f3e6c7;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, .95),
        0 2px 8px rgba(0, 0, 0, .72);
}


/* ------------------------------------------------------------
   CABECERA
   ------------------------------------------------------------ */

.vispera-editorial-header {
    max-width: 78%;
}


.vispera-editorial-kicker {
    margin-bottom: .65rem;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.62rem, .8vw, .78rem);
    font-weight: 500;

    letter-spacing: .27em;
    text-transform: uppercase;

    color: rgba(245, 228, 193, .90);
}


.vispera-editorial-title {
    margin: 0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 3vw, 3.1rem);
    font-weight: 400;

    line-height: 1;

    letter-spacing: .10em;

    color: #f4e4bf;
}


.vispera-editorial-ornament {
    margin-top: .75rem;

    font-family: Georgia, "Times New Roman", serif;
    font-size: .82rem;

    letter-spacing: .14em;

    color: rgba(235, 205, 145, .82);
}


.vispera-editorial-subtitle {
    max-width: 370px;

    margin:
        1rem
        0
        0;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.78rem, 1vw, .94rem);
    font-style: italic;

    line-height: 1.55;

    color: rgba(249, 236, 208, .94);
}


/* ------------------------------------------------------------
   CARTELA INFERIOR
   ------------------------------------------------------------ */

.vispera-editorial-caption {
    align-self: flex-start;

    max-width: 72%;

    padding: .55rem .9rem;

    border:
        1px solid
        rgba(230, 205, 155, .30);

    border-radius: 2px;

    background:
        rgba(25, 16, 9, .38);

    box-shadow:
        inset 0 0 18px rgba(0, 0, 0, .16);

    backdrop-filter: blur(2px);

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.65rem, .8vw, .78rem);
    font-style: italic;

    line-height: 1.45;

    letter-spacing: .025em;

    color: rgba(247, 230, 198, .94);
}


/* ------------------------------------------------------------
   EL VIDEO NUNCA DEBE CAPTURAR INTERACCIONES DEL LIBRO
   ------------------------------------------------------------ */

#vispera-video {
    pointer-events: none;
}