/* =========================================================
   DONDE REGRESAN LOS ZORROS
   Maqueta visual v0.3
   Primera versión con ilustraciones reales
   ========================================================= */


/* =========================================================
   1. CONFIGURACIÓN GENERAL
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: #40372e;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(150, 169, 137, 0.35),
            transparent 32%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(97, 76, 57, 0.28),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #26352d 0%,
            #18251f 45%,
            #101713 100%
        );

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

    padding: 28px 20px;

    overflow-x: hidden;
}


/* =========================================================
   2. CONTENEDOR GENERAL
   ========================================================= */

.book-app {
    width: min(100%, 1100px);

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 22px;
}


/* =========================================================
   3. LIBRO
   ========================================================= */

.book {
    perspective: 1800px;
    perspective-origin: 50% 50%;

    width: min(100%, 760px);

    height: min(82vh, 900px);
    min-height: 650px;

    position: relative;

    border-radius: 7px 15px 15px 7px;

    background: #d8c7a8;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.50),
        0 8px 20px rgba(0, 0, 0, 0.30),
        inset 0 0 0 1px rgba(255, 255, 255, 0.18);

    overflow: hidden;

    isolation: isolate;

    counter-reset: page-number;
}


/* Lomo visual */

.book::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 24px;

    z-index: 50;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(65, 43, 27, 0.42),
            rgba(65, 43, 27, 0.13) 45%,
            transparent 100%
        );
}


/* Borde de hojas */

.book::after {
    content: "";

    position: absolute;

    top: 9px;
    right: 3px;
    bottom: 9px;

    width: 8px;

    z-index: 50;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            #e5d7b9 0,
            #e5d7b9 2px,
            #c7b693 3px,
            #e9ddc2 4px
        );

    opacity: 0.7;

    border-radius: 0 7px 7px 0;
}


/* =========================================================
   4. PÁGINAS
   ========================================================= */

.page {
    position: absolute;

    inset: 0;

    display: none;

    overflow-y: auto;

    padding-bottom: 30px;

    background:
        radial-gradient(
            circle at 20% 10%,
            rgba(255, 255, 255, 0.40),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 85%,
            rgba(181, 149, 103, 0.08),
            transparent 30%
        ),
        linear-gradient(
            105deg,
            #fbf5e7 0%,
            #f5ecd7 55%,
            #eee0c4 100%
        );

    box-shadow:
        inset 24px 0 32px rgba(88, 62, 40, 0.08),
        inset -8px 0 18px rgba(88, 62, 40, 0.04);

    counter-increment: page-number;
}


/* Textura muy suave de papel */

.page::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: 0.18;

    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(94, 72, 46, 0.03) 4px
        );

    mix-blend-mode: multiply;
}


/* La numeración impresa dentro de cada hoja fue eliminada. */


.page.active {
    display: block;
}


@keyframes pageEnter {

    from {
        opacity: 0;
        transform: translateX(16px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }

}


/* =========================================================
   5. INTERIOR DE PÁGINA
   ========================================================= */

.page-inner {
    min-height: 100%;

    position: relative;
    z-index: 2;

    padding:
        clamp(52px, 7vw, 82px)
        clamp(44px, 8vw, 88px)
        75px;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
}


.page-inner.centered {
    justify-content: center;
    align-items: center;

    text-align: center;
}


/* =========================================================
   6. TEXTO GENERAL
   ========================================================= */

p {
    max-width: 100%;

    margin:
        0
        0
        1.15rem;

    font-size:
        clamp(1rem, 1.55vw, 1.16rem);

    line-height: 1.78;

    text-align: justify;

    color: #44392f;
}


.page-inner > p:first-of-type:not(.chapter-label):not(.small-decoration) {
    margin-top: 4px;
}


.index-entry {
    margin-bottom: 0.5rem;

    line-height: 1.45;
    text-align: left;
}


.index-link {
    display: block;

    padding: 0.38rem 0.65rem;

    border-left: 2px solid transparent;
    border-radius: 4px;

    color: #44392f;
    text-decoration: none;

    transition:
        transform 0.16s ease,
        color 0.16s ease,
        background-color 0.16s ease,
        border-color 0.16s ease;
}


.index-link:hover,
.index-link:focus-visible {
    transform: translateX(4px);

    border-left-color: #a68c68;

    color: #6f4931;
    background-color: rgba(166, 140, 104, 0.1);
}


.index-link:focus-visible {
    outline: 2px solid rgba(111, 73, 49, 0.42);
    outline-offset: 2px;
}


h1,
h2 {
    font-weight: normal;
}


/* =========================================================
   7. TÍTULOS
   ========================================================= */

.chapter-label {
    margin-bottom: 12px;

    text-align: left;

    text-transform: uppercase;

    letter-spacing: 0.22em;

    font-size: 0.76rem;

    color: #927b5c;
}


.chapter-title {
    margin:
        0
        0
        32px;

    max-width: 630px;

    font-size:
        clamp(2rem, 4.8vw, 3rem);

    line-height: 1.08;

    color: #573d2b;
}


.big-chapter-title {
    max-width: 620px;

    margin:
        10px
        0
        28px;

    font-size:
        clamp(2.7rem, 6vw, 4.5rem);

    line-height: 0.98;

    color: #523725;
}


.chapter-intro {
    max-width: 520px;

    margin:
        12px
        auto
        0;

    text-align: center;

    font-style: italic;

    font-size:
        clamp(1rem, 1.7vw, 1.14rem);

    line-height: 1.7;

    color: #74624f;
}


.emphasis {
    max-width: 520px;

    margin:
        28px auto;

    text-align: center;

    font-style: italic;

    font-size:
        clamp(1.18rem, 2vw, 1.38rem);

    line-height: 1.65;

    color: #674c38;
}


/* =========================================================
   8. PORTADA
   ========================================================= */

.cover {
    color: #fff6e2;

    background:
        radial-gradient(
            circle at 50% 75%,
            rgba(198, 132, 73, 0.30),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 15%,
            rgba(128, 160, 136, 0.18),
            transparent 36%
        ),
        linear-gradient(
            160deg,
            #20372d 0%,
            #14271f 48%,
            #3b2a21 100%
        );
}


.cover::before {
    content: "";

    position: absolute;

    inset: 18px;

    pointer-events: none;

    border:
        1px solid
        rgba(244, 221, 178, 0.28);

    border-radius: 5px;

    opacity: 0.85;
}


.cover-content {
    min-height: 100%;

    position: relative;

    z-index: 2;

    padding:
        clamp(55px, 8vw, 92px);

    display: flex;
    flex-direction: column;

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

    text-align: center;
}


.cover h1 {
    margin:
        12px
        0
        22px;

    max-width: 650px;

    font-size:
        clamp(3.2rem, 8vw, 6rem);

    line-height: 0.92;

    letter-spacing: -0.035em;

    color: #fff7df;

    text-shadow:
        0 3px 15px rgba(0, 0, 0, 0.32);
}


.eyebrow {
    margin-bottom: 8px;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 0.28em;

    font-size: 0.78rem;

    color: #e7d4ac;

    opacity: 0.88;
}


.subtitle {
    max-width: 520px;

    margin-bottom: 20px;

    text-align: center;

    font-size:
        clamp(1rem, 1.8vw, 1.15rem);

    line-height: 1.65;

    color: #efe1c8;
}


.subtitle-dark {
    max-width: 520px;

    text-align: center;

    font-size:
        clamp(1rem, 1.8vw, 1.15rem);

    line-height: 1.7;

    color: #665440;
}


.book-note {
    max-width: 520px;

    text-align: center;

    font-style: italic;

    line-height: 1.75;

    color: #786651;
}


/* =========================================================
   9. PÁGINA DE TÍTULO
   ========================================================= */

.title-page h2 {
    max-width: 620px;

    margin:
        18px
        0
        28px;

    font-size:
        clamp(2.8rem, 6vw, 4.8rem);

    line-height: 0.98;

    color: #553b2a;
}


.small-decoration {
    text-align: center;

    letter-spacing: 12px;

    color: #a98d67;
}


.little-line {
    width: 100px;
    height: 1px;

    margin:
        28px
        auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            #9e835e,
            transparent
        );
}


/* =========================================================
   10. PLACEHOLDERS
   ========================================================= */

.cover-placeholder,
.illustration-placeholder {
    width: 100%;

    min-height: 220px;

    position: relative;

    margin-top: 28px;

    padding: 26px;

    border-radius:
        54% 46% 52% 48% /
        10% 12% 9% 11%;

    display: flex;
    flex-direction: column;

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

    gap: 8px;

    text-align: center;
}


.illustration-placeholder {
    color: #826b4f;

    border:
        1px dashed
        rgba(137, 109, 75, 0.50);

    background:
        radial-gradient(
            circle at 25% 25%,
            rgba(111, 142, 108, 0.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 75% 70%,
            rgba(197, 137, 74, 0.11),
            transparent 35%
        ),
        rgba(156, 126, 87, 0.045);
}


.cover-placeholder {
    max-width: 520px;

    border:
        1px dashed
        rgba(255, 238, 200, 0.36);

    background:
        radial-gradient(
            circle at center,
            rgba(255, 228, 177, 0.08),
            transparent 68%
        );
}


.illustration-placeholder.small {
    min-height: 165px;
}


.cover-placeholder span,
.illustration-placeholder span {
    font-size: 1.08rem;

    font-style: italic;
}


.cover-placeholder small,
.illustration-placeholder small {
    max-width: 440px;

    line-height: 1.5;

    opacity: 0.68;
}


/* =========================================================
   PORTADA - ILUSTRACIÓN TRANSPARENTE
   ========================================================= */

.cover-art-frame {
    width: min(100%, 520px);

    margin: 24px auto 0;
    padding: 0;

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

    background: transparent;
    border: 0;
}

.cover-art {
    display: block;

    width: 100%;
    height: auto;

    max-width: 520px;
    max-height: 270px;

    object-fit: contain;

    filter:
        drop-shadow(0 10px 26px rgba(0, 0, 0, 0.22))
        saturate(0.98)
        brightness(1.01);
}


/* =========================================================
   11. ILUSTRACIONES REALES DEL LIBRO
   ========================================================= */


/*
    Contenedor exterior.

    No tiene borde sólido ni sombra fuerte.
    Queremos que parezca una acuarela colocada
    directamente sobre el papel.
*/

.book-illustration-frame {
    width: 100%;

    position: relative;

    margin:
        12px auto
        30px;

    padding: 0;

    overflow: visible;

    background: transparent;

    isolation: isolate;
}


/*
    Pequeña mancha clara detrás de la ilustración.

    Ayuda a integrar el borde con la página.
*/

.book-illustration-frame::before {
    content: "";

    position: absolute;

    inset: -14px -18px;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 250, 235, 0.72) 0%,
            rgba(248, 238, 215, 0.30) 55%,
            transparent 78%
        );

    filter: blur(7px);
}


/*
    Imagen real.
*/

.book-illustration {
    display: block;

    width: 100%;
    height: auto;

    max-width: 100%;

    object-fit: contain;

    border: 0;

    border-radius: 16px;

    box-shadow:
        0 7px 18px rgba(74, 54, 37, 0.09);

    filter:
        saturate(0.94)
        contrast(0.98)
        brightness(1.015);

    transition:
        transform 0.35s ease,
        filter 0.35s ease;
}


/*
    El efecto hover es extremadamente sutil.
*/

.book-illustration:hover {
    transform: scale(1.004);

    filter:
        saturate(0.98)
        contrast(1)
        brightness(1.02);
}


/*
    Pie de ilustración.
*/

.book-illustration-frame figcaption {
    max-width: 500px;

    margin:
        11px auto
        0;

    padding:
        0
        16px;

    text-align: center;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.82rem;

    font-style: italic;

    line-height: 1.55;

    letter-spacing: 0.015em;

    color: #88745e;
}


/*
    En apertura de capítulo la imagen puede
    ser algo más protagonista.
*/

.chapter-opening .book-illustration-frame {
    max-width: 590px;

    margin:
        4px auto
        24px;
}


.chapter-opening .book-illustration {
    max-height: 410px;

    object-fit: contain;
}


/* =========================================================
   12. APERTURA DE CAPÍTULO
   ========================================================= */

.chapter-opening .page-inner {
    position: relative;

    padding-top:
        clamp(42px, 6vw, 68px);
}


.chapter-opening .page-inner::before {
    content: "❦";

    margin-bottom: 10px;

    font-size: 1.55rem;

    color: #a68c68;
}


.chapter-opening .chapter-label {
    text-align: center;
}


/* =========================================================
   13. CONTROLES
   ========================================================= */

.book-controls {
    width: min(100%, 760px);

    display: grid;

    grid-template-columns:
        1fr auto auto 1fr;

    align-items: center;

    gap: 16px;
}


.nav-button {
    width: fit-content;

    border:
        1px solid
        rgba(229, 208, 169, 0.22);

    background:
        rgba(238, 225, 195, 0.95);

    color: #49392d;

    font-family: inherit;

    font-size: 0.95rem;

    padding:
        11px
        20px;

    border-radius: 999px;

    cursor: pointer;

    box-shadow:
        0 5px 16px
        rgba(0, 0, 0, 0.20);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}


.nav-button:first-child {
    justify-self: start;
}


.home-button {
    justify-self: center;

    padding:
        10px
        16px;

    color: #e9ddc5;

    background:
        rgba(17, 31, 25, 0.78);

    border:
        1px solid
        rgba(232, 214, 178, 0.22);

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, 0.18);
}

.home-button:hover:not(:disabled) {
    background:
        rgba(28, 47, 38, 0.96);
}


.nav-button:last-child {
    justify-self: end;
}


.nav-button:hover:not(:disabled) {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.26);
}


.nav-button:active:not(:disabled) {
    transform: translateY(0);
}


.nav-button:disabled {
    opacity: 0.34;

    cursor: default;
}


.page-counter {
    min-width: 70px;

    padding:
        8px
        13px;

    border-radius: 999px;

    text-align: center;

    font-family:
        Arial,
        sans-serif;

    font-size: 0.82rem;

    letter-spacing: 0.06em;

    color: #efe3cb;

    background:
        rgba(7, 13, 10, 0.30);

    border:
        1px solid
        rgba(255, 255, 255, 0.08);
}


/* =========================================================
   14. SCROLLBAR DEL LIBRO
   ========================================================= */

.page::-webkit-scrollbar {
    width: 7px;
}


.page::-webkit-scrollbar-track {
    background: transparent;
}


.page::-webkit-scrollbar-thumb {
    background:
        rgba(115, 91, 64, 0.22);

    border-radius: 20px;
}


/* =========================================================
   15. RESPONSIVE — TABLETS Y TELÉFONOS
   ========================================================= */

@media (max-width: 650px) {

    body {
        padding:
            12px
            9px;
    }


    .book-app {
        gap: 14px;
    }


    .book {
        width: 100%;

        height: 80vh;
        min-height: 620px;

        border-radius:
            5px
            11px
            11px
            5px;
    }


    .book::before {
        width: 14px;
    }


    .page-inner {
        padding:
            44px
            30px
            68px;
    }


    .cover-content {
        padding:
            46px
            30px;
    }


    p {
        font-size: 1rem;

        line-height: 1.72;
    }


    .big-chapter-title {
        font-size:
            clamp(2.35rem, 10vw, 3.2rem);
    }


    .chapter-opening .book-illustration-frame {
        width: 100%;

        max-width: 100%;

        margin-bottom: 20px;
    }


    .chapter-opening .book-illustration {
        max-height: 330px;

        border-radius: 12px;
    }


    .book-illustration-frame figcaption {
        font-size: 0.78rem;

        padding:
            0
            8px;
    }


    .book-controls {
        grid-template-columns:
            1fr auto auto 1fr;

        gap: 10px;
    }


    .nav-button {
        padding:
            10px
            13px;

        font-size: 0.82rem;
    }


    .page-counter {
        font-size: 0.76rem;
    }

}


/* =========================================================
   16. TELÉFONOS PEQUEÑOS
   ========================================================= */

@media (max-width: 430px) {

    .page-inner {
        padding:
            38px
            24px
            62px;
    }


    .nav-button {
        padding:
            9px
            11px;
    }


    .home-button {
        padding:
            9px
            10px;

        font-size: 0.78rem;
    }


    .cover h1 {
        font-size: 3rem;
    }


    .chapter-opening .book-illustration {
        max-height: 290px;
    }

}


/* =========================================================
   17. PANTALLAS GRANDES
   ========================================================= */

@media (min-width: 1200px) {

    .book {
        height: min(84vh, 920px);
    }


    .chapter-opening .book-illustration {
        max-height: 430px;
    }

}

/* =========================================================
   18. DECORACIÓN EDITORIAL PASTEL
   Versión 0.7

   IMPORTANTE:
   - No altera position/inset de .page.
   - No reutiliza los pseudo-elementos principales de .page porque esos
     pseudo-elementos pertenecen a la textura y numeración.
   - Las decoraciones viven en .page-ornament, que ya está
     incluido en el HTML de cada página.
   ========================================================= */

:root {
    --decor-paper: #fbf8f2;
    --decor-sage: rgba(126, 151, 129, 0.58);
    --decor-sage-soft: rgba(152, 177, 155, 0.20);
    --decor-lavender: rgba(163, 147, 188, 0.52);
    --decor-lavender-soft: rgba(184, 169, 207, 0.18);
    --decor-blue-soft: rgba(151, 179, 193, 0.16);
    --decor-amber: rgba(194, 160, 103, 0.50);
    --decor-amber-soft: rgba(218, 190, 137, 0.17);
}

/*
   El fondo se aplica a LA PÁGINA COMPLETA.
   Conservamos position:absolute e inset:0 definidos en la
   sección 4 de este archivo, por lo que incluso una página
   con muy poco texto llena todo el libro.
*/
.page:not(.cover) {
    isolation: isolate;

    background-color: var(--decor-paper);

    background-image:
        radial-gradient(
            ellipse at 0% 0%,
            var(--decor-sage-soft) 0 10%,
            transparent 31%
        ),
        radial-gradient(
            ellipse at 100% 0%,
            var(--decor-lavender-soft) 0 9%,
            transparent 29%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            var(--decor-blue-soft) 0 10%,
            transparent 31%
        ),
        radial-gradient(
            ellipse at 0% 100%,
            var(--decor-amber-soft) 0 8%,
            transparent 27%
        ),
        linear-gradient(
            105deg,
            #fcf9f1 0%,
            #f9f4e9 56%,
            #f3ead8 100%
        );

    box-shadow:
        inset 24px 0 32px rgba(88, 62, 40, 0.075),
        inset -8px 0 18px rgba(88, 62, 40, 0.035),
        inset 0 0 74px rgba(120, 107, 128, 0.045);
}

/*
   .page-inner ya tiene min-height:100% y padding editorial.
   Solo aseguramos que sea el contexto de posición de los
   ornamentos y que estos no afecten el flujo del texto.
*/
.page-inner {
    position: relative;
    z-index: 2;
}

.page-inner > :not(.page-ornament) {
    position: relative;
    z-index: 4;
}

/* =========================================================
   RAMITAS DE ESQUINA
   ========================================================= */

.page-ornament {
    position: absolute;
    display: block;

    width: 96px;
    height: 58px;

    z-index: 3;
    pointer-events: none;
    opacity: 0.88;
}

.page-ornament-top {
    right: 22px;
    top: 18px;

    border-top:
        2px solid
        rgba(126, 151, 129, 0.52);

    border-radius: 62% 0 0 0;

    transform: rotate(9deg);
}

.page-ornament-bottom {
    left: 22px;
    bottom: 16px;

    border-top:
        2px solid
        rgba(163, 147, 188, 0.47);

    border-radius: 62% 0 0 0;

    transform: rotate(190deg);
}

.page-ornament::before,
.page-ornament::after {
    content: "";

    position: absolute;

    width: 18px;
    height: 9px;

    border-radius: 100% 0 100% 0;
    transform-origin: center;
}

.page-ornament-top::before {
    right: 17px;
    top: -4px;

    background:
        rgba(139, 165, 142, 0.52);

    transform: rotate(28deg);

    box-shadow:
        -28px 8px 0 rgba(164, 185, 158, 0.43),
        -52px 4px 0 rgba(133, 160, 139, 0.37);
}

.page-ornament-top::after {
    right: 32px;
    top: 8px;

    background:
        rgba(180, 163, 199, 0.43);

    transform: rotate(204deg);

    box-shadow:
        -29px 6px 0 rgba(173, 158, 194, 0.34);
}

.page-ornament-bottom::before {
    right: 15px;
    top: -4px;

    background:
        rgba(163, 147, 188, 0.42);

    transform: rotate(28deg);

    box-shadow:
        -28px 8px 0 rgba(151, 177, 188, 0.36),
        -53px 4px 0 rgba(181, 164, 199, 0.33);
}

.page-ornament-bottom::after {
    right: 32px;
    top: 8px;

    background:
        rgba(210, 179, 126, 0.35);

    transform: rotate(204deg);

    box-shadow:
        -29px 6px 0 rgba(168, 185, 158, 0.30);
}

/* =========================================================
   DIVISORES DE TÍTULO
   ========================================================= */

.chapter-title::after,
.big-chapter-title::after,
.title-page h2::after {
    content: "";

    display: block;

    width: 84px;
    height: 4px;

    margin:
        0.72rem
        0
        0.9rem;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            rgba(126, 151, 129, 0) 0%,
            rgba(126, 151, 129, 0.52) 20%,
            rgba(163, 147, 188, 0.48) 55%,
            rgba(194, 160, 103, 0.42) 80%,
            rgba(194, 160, 103, 0) 100%
        );
}

.chapter-opening .big-chapter-title::after,
.title-page h2::after {
    width: 125px;

    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   ÍNDICE
   ========================================================= */

.index-page .index-entry {
    position: relative;

    padding-left: 24px;
}

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

    position: absolute;

    left: 5px;
    top: 0.65em;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background:
        rgba(139, 165, 142, 0.58);

    box-shadow:
        8px 5px 0 rgba(180, 163, 199, 0.28);
}

/* =========================================================
   DEDICATORIA
   ========================================================= */

.dedication-page {
    background-image:
        linear-gradient(
            90deg,
            rgba(218, 190, 137, 0.11),
            transparent 24%
        ),
        radial-gradient(
            ellipse at 8% 16%,
            rgba(180, 163, 199, 0.18),
            transparent 28%
        ),
        radial-gradient(
            ellipse at 92% 84%,
            rgba(152, 177, 155, 0.18),
            transparent 30%
        ),
        linear-gradient(
            105deg,
            #fcf9f1 0%,
            #f9f4e9 56%,
            #f3ead8 100%
        );
}

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

    position: absolute;

    left: 28px;
    top: 86px;
    bottom: 76px;

    width: 3px;

    border-radius: 99px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(194, 160, 103, 0.42) 15%,
            rgba(163, 147, 188, 0.38) 52%,
            rgba(126, 151, 129, 0.38) 86%,
            transparent
        );
}


/* =========================================================
   NOTA PERSONAL ANTES DE EMPEZAR
   ========================================================= */

.author-note-page {
    background-image:
        radial-gradient(
            ellipse at 12% 14%,
            rgba(181, 166, 201, 0.17),
            transparent 28%
        ),
        radial-gradient(
            ellipse at 88% 82%,
            rgba(151, 177, 156, 0.17),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 18%,
            rgba(222, 187, 120, 0.11),
            transparent 20%
        ),
        linear-gradient(
            105deg,
            #fcf9f1 0%,
            #f9f4e9 58%,
            #f3ead8 100%
        );
}

.author-note-page .page-inner {
    max-width: 760px;
    margin: 0 auto;
}

.author-note-page .page-inner::before {
    content: "";
    position: absolute;
    right: 34px;
    top: 88px;
    width: 62px;
    height: 92px;
    pointer-events: none;
    opacity: 0.42;
    background:
        radial-gradient(
            ellipse at 50% 24%,
            rgba(222, 181, 105, 0.48) 0 12%,
            rgba(222, 181, 105, 0.18) 13% 32%,
            transparent 33%
        ),
        linear-gradient(
            90deg,
            transparent 47%,
            rgba(126, 101, 72, 0.35) 48% 52%,
            transparent 53%
        );
}

.author-note-page .book-note {
    margin-top: 28px;
    text-align: right;
    font-style: italic;
}

/* =========================================================
   APERTURAS, EPÍLOGO Y FINAL
   ========================================================= */

.chapter-opening:not(.cover) {
    background-image:
        radial-gradient(
            circle at 50% 17%,
            rgba(180, 163, 199, 0.17),
            transparent 28%
        ),
        radial-gradient(
            circle at 16% 82%,
            rgba(152, 177, 155, 0.17),
            transparent 26%
        ),
        radial-gradient(
            circle at 86% 76%,
            rgba(218, 190, 137, 0.14),
            transparent 25%
        ),
        linear-gradient(
            105deg,
            #fcf9f1 0%,
            #f9f4e9 56%,
            #f3ead8 100%
        );
}

#epilogue,
#final {
    background-image:
        radial-gradient(
            circle at 12% 10%,
            rgba(218, 190, 137, 0.22),
            transparent 29%
        ),
        radial-gradient(
            circle at 90% 88%,
            rgba(180, 163, 199, 0.19),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 13%,
            rgba(152, 177, 155, 0.15),
            transparent 25%
        ),
        linear-gradient(
            105deg,
            #fcf9f1 0%,
            #f9f4e9 56%,
            #f3ead8 100%
        );
}

#final .page-ornament-top::before,
#final .page-ornament-bottom::after {
    background:
        rgba(211, 177, 114, 0.52);
}

/* Ilustraciones: sombra apenas perceptible para integrarlas al papel. */
.book-illustration-frame {
    filter:
        drop-shadow(
            0 10px 18px
            rgba(92, 82, 91, 0.08)
        );
}

/* =========================================================
   AJUSTES RESPONSIVE DE LAS DECORACIONES
   ========================================================= */

@media (max-width: 700px) {

    .page-ornament {
        width: 66px;
        height: 44px;
    }

    .page-ornament-top {
        right: 10px;
        top: 10px;
    }

    .page-ornament-bottom {
        left: 10px;
        bottom: 9px;
    }

    .dedication-page .page-inner::before {
        left: 17px;
    }

}



/* =========================================================
   LÁMINA FINAL — PERSONAJES REALES
   Última página del libro, sin texto ni ornamentos.
   ========================================================= */

.final-character-reveal {
    padding: 0;
    overflow: hidden;

    background:
        radial-gradient(circle at 50% 42%, rgba(74, 95, 135, 0.20), transparent 58%),
        #07111d;

    box-shadow: none;
}

/* En esta lámina no queremos textura ni número de página. */
.final-character-reveal::before,
.final-character-reveal::after {
    display: none;
}

.final-character-reveal-inner {
    width: 100%;
    height: 100%;

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

    padding: 0;
}

.final-character-reveal-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center center;

    border: 0;
    border-radius: 0;
    box-shadow: none;
}


/* =========================================================
   22. TRANSICIÓN DE PASO DE PÁGINA — VERSIÓN LENTA
   =========================================================

   La página nueva permanece debajo mientras la actual se
   desplaza y gira. El movimiento es deliberadamente visible:
   se siente como una hoja que abandona el plano del libro,
   no como un simple cambio de diapositiva.
*/

.page {
    transform-style: preserve-3d;
    backface-visibility: hidden;
}

.page.active,
.page.turning-in,
.page.turning-out {
    display: block;
}

.page.turning-in,
.page.turning-out {
    pointer-events: none;
    will-change: transform, opacity, filter, box-shadow;
}

.page.turning-out {
    z-index: 5;
}

.page.turning-in {
    z-index: 4;
}

/* AVANZAR */
.page.turning-out-forward {
    transform-origin: 8% 50%;
    animation: bookPageOutForward 1050ms cubic-bezier(0.48, 0.04, 0.22, 1) both;
}

.page.turning-in-forward {
    transform-origin: 92% 50%;
    animation: bookPageInForward 1050ms cubic-bezier(0.18, 0.70, 0.20, 1) both;
}

/* RETROCEDER */
.page.turning-out-backward {
    transform-origin: 92% 50%;
    animation: bookPageOutBackward 1050ms cubic-bezier(0.48, 0.04, 0.22, 1) both;
}

.page.turning-in-backward {
    transform-origin: 8% 50%;
    animation: bookPageInBackward 1050ms cubic-bezier(0.18, 0.70, 0.20, 1) both;
}

@keyframes bookPageOutForward {
    0% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg) scale(1);
        filter: brightness(1);
        box-shadow:
            inset 24px 0 32px rgba(88, 62, 40, 0.08),
            inset -8px 0 18px rgba(88, 62, 40, 0.04),
            0 0 0 rgba(33, 24, 17, 0);
    }

    28% {
        opacity: 1;
        transform: translateX(-5%) rotateY(-4deg) scale(0.998);
        filter: brightness(0.995);
        box-shadow:
            inset 20px 0 28px rgba(88, 62, 40, 0.08),
            inset -26px 0 36px rgba(69, 48, 31, 0.13),
            18px 6px 30px rgba(25, 18, 13, 0.14);
    }

    66% {
        opacity: 0.88;
        transform: translateX(-25%) rotateY(-12deg) scale(0.988);
        filter: brightness(0.965);
        box-shadow:
            inset 12px 0 24px rgba(88, 62, 40, 0.06),
            inset -48px 0 58px rgba(69, 48, 31, 0.20),
            36px 10px 55px rgba(25, 18, 13, 0.24);
    }

    100% {
        opacity: 0;
        transform: translateX(-62%) rotateY(-22deg) scale(0.965);
        filter: brightness(0.90);
        box-shadow:
            inset -70px 0 80px rgba(55, 37, 23, 0.24),
            55px 14px 72px rgba(25, 18, 13, 0.28);
    }
}

@keyframes bookPageInForward {
    0% {
        opacity: 0.58;
        transform: translateX(4.5%) rotateY(2.5deg) scale(0.982);
        filter: brightness(0.90);
        box-shadow:
            inset 42px 0 54px rgba(69, 48, 31, 0.16),
            -16px 4px 30px rgba(25, 18, 13, 0.12);
    }

    35% {
        opacity: 0.72;
        transform: translateX(3.2%) rotateY(1.8deg) scale(0.986);
        filter: brightness(0.93);
    }

    72% {
        opacity: 0.96;
        transform: translateX(0.8%) rotateY(0.4deg) scale(0.997);
        filter: brightness(0.99);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg) scale(1);
        filter: brightness(1);
        box-shadow:
            inset 24px 0 32px rgba(88, 62, 40, 0.08),
            inset -8px 0 18px rgba(88, 62, 40, 0.04),
            0 0 0 rgba(33, 24, 17, 0);
    }
}

@keyframes bookPageOutBackward {
    0% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg) scale(1);
        filter: brightness(1);
    }

    28% {
        opacity: 1;
        transform: translateX(5%) rotateY(4deg) scale(0.998);
        filter: brightness(0.995);
        box-shadow: -18px 6px 30px rgba(25, 18, 13, 0.14);
    }

    66% {
        opacity: 0.88;
        transform: translateX(25%) rotateY(12deg) scale(0.988);
        filter: brightness(0.965);
        box-shadow: -36px 10px 55px rgba(25, 18, 13, 0.24);
    }

    100% {
        opacity: 0;
        transform: translateX(62%) rotateY(22deg) scale(0.965);
        filter: brightness(0.90);
        box-shadow: -55px 14px 72px rgba(25, 18, 13, 0.28);
    }
}

@keyframes bookPageInBackward {
    0% {
        opacity: 0.58;
        transform: translateX(-4.5%) rotateY(-2.5deg) scale(0.982);
        filter: brightness(0.90);
        box-shadow: 16px 4px 30px rgba(25, 18, 13, 0.12);
    }

    35% {
        opacity: 0.72;
        transform: translateX(-3.2%) rotateY(-1.8deg) scale(0.986);
        filter: brightness(0.93);
    }

    72% {
        opacity: 0.96;
        transform: translateX(-0.8%) rotateY(-0.4deg) scale(0.997);
        filter: brightness(0.99);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0deg) scale(1);
        filter: brightness(1);
        box-shadow:
            inset 24px 0 32px rgba(88, 62, 40, 0.08),
            inset -8px 0 18px rgba(88, 62, 40, 0.04),
            0 0 0 rgba(33, 24, 17, 0);
    }
}

/* En móvil sigue siendo visible, pero un poco más rápida. */
@media (max-width: 700px) {
    .book {
        perspective: 1350px;
    }

    .page.turning-out-forward,
    .page.turning-in-forward,
    .page.turning-out-backward,
    .page.turning-in-backward {
        animation-duration: 820ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page.turning-out-forward,
    .page.turning-in-forward,
    .page.turning-out-backward,
    .page.turning-in-backward {
        animation: none !important;
    }
}