/* =========================================================
   🌸 LIBRO — FONDO ANIME ROMÁNTICO
   ========================================================= */

#main-content.book-mode {

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 255, 255, .75) 0 2px,
            transparent 3px
        ),
        radial-gradient(
            circle at 80% 30%,
            rgba(255, 215, 230, .55) 0 2px,
            transparent 3px
        ),
        linear-gradient(
            135deg,
            #ffc6e0 0%,
            #d9b7ff 35%,
            #9ebcff 65%,
            #ffc3d9 100%
        );

    background-size:
        180px 180px,
        240px 240px,
        400% 400%;

    animation:
        animeSkyShift 18s ease infinite;

    isolation:
        isolate;
}


/* =========================================================
   ☁️ LUCES Y NUBES
   ========================================================= */

#main-content.book-mode::before {

    content: "";

    position: fixed;

    inset: -20%;

    pointer-events: none;

    z-index: 0;

    background:
        radial-gradient(
            ellipse at 20% 30%,
            rgba(255,255,255,.55),
            transparent 18%
        ),
        radial-gradient(
            ellipse at 75% 20%,
            rgba(255,255,255,.4),
            transparent 22%
        ),
        radial-gradient(
            ellipse at 50% 80%,
            rgba(255,150,210,.35),
            transparent 25%
        );

    filter:
        blur(25px);

    animation:
        animeGlowMove 16s ease-in-out infinite alternate;

}


/* =========================================================
   🌸 PÉTALOS ANIME
   ========================================================= */

#main-content.book-mode::after {

    content: "";

    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 1;

    opacity: .8;

    background-image:
        radial-gradient(
            ellipse at center,
            #ff6fa8 0%,
            #ffb6d0 55%,
            transparent 60%
        ),
        radial-gradient(
            ellipse at center,
            #ffffff 0%,
            rgba(255,255,255,.4) 30%,
            transparent 55%
        ),
        radial-gradient(
            ellipse at center,
            #f5a2c8 0%,
            transparent 60%
        );

    background-size:
        32px 18px,
        5px 5px,
        22px 12px;

    background-position:
        0 0,
        50px 30px,
        120px 80px;

    animation:
        animePetalsFall 12s linear infinite;

}


/* =========================================================
   ✨ ANIMACIONES
   ========================================================= */

@keyframes animeSkyShift {

    0% {

        background-position:
            0 0,
            0 0,
            0% 50%;

    }

    50% {

        background-position:
            90px 50px,
            -120px 80px,
            100% 50%;

    }

    100% {

        background-position:
            180px 180px,
            -240px 160px,
            0% 50%;

    }

}


@keyframes animeGlowMove {

    from {

        transform:
            translate3d(
                -2%,
                -2%,
                0
            )
            scale(1);

    }

    to {

        transform:
            translate3d(
                4%,
                3%,
                0
            )
            scale(1.08);

    }

}


@keyframes animePetalsFall {

    from {

        background-position:
            0 -150px,
            50px -80px,
            120px -200px;

    }

    to {

        background-position:
            350px 1100px,
            -180px 950px,
            420px 1200px;

    }

}


/* =========================================================
   📖 PÁGINAS SOBRE EL FONDO
   ========================================================= */

#main-content.book-mode
> .book-page {

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.78),
            rgba(255,244,250,.68)
        );

    backdrop-filter:
        blur(8px);

    box-shadow:
        inset 0 0 80px
        rgba(255,255,255,.3);

}


/* =========================================================
   ✨ ARREGLO 3 — CONTENIDO MÁS LIMPIO
   ========================================================= */

#main-content.book-mode
.book-page
.section-content {
    position: relative;
    z-index: 2;
}

/* =========================================================
   🌸 ARREGLO 4 — DECORACIÓN DE PÉTALOS
   ========================================================= */

#main-content.book-mode
> .book-page::before {
    content: "🌸";

    position: absolute;

    top: 8%;
    left: 7%;

    font-size: 22px;

    opacity: .35;

    pointer-events: none;

    animation:
        petalFloat 6s ease-in-out infinite;
}

@keyframes petalFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-8deg);
    }

    50% {
        transform:
            translateY(-14px)
            rotate(8deg);
    }

}

/* =========================================================
   📚 ARREGLO 5 — NAVEGACIÓN MÁS INTEGRADA
   ========================================================= */

.book-navigation {
    background:
        rgba(255,255,255,.78);

    border:
        1px solid
        rgba(255,255,255,.9);

    box-shadow:
        0 10px 30px
        rgba(80,20,55,.18);

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);
}

.book-nav-button {
    background:
        rgba(157,36,53,.10);
}

.book-page-indicator {
    color:
        #7f2539;
}

/* =========================================================
   🎵 BOTÓN DE MÚSICA
   ========================================================= */

.music-button {
    background:
        linear-gradient(
            135deg,
            #ff75a6,
            #9b5de5
        );

    border:
        2px solid
        rgba(255,255,255,.8);

    box-shadow:
        0 10px 30px
        rgba(120,30,90,.30);
}


/* =========================================================
   📖 CAPÍTULOS — ESTILO MANGA ANIME
   ========================================================= */

#main-content.book-mode .manga-chapter-label {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin:
        0
        auto
        18px;

    padding:
        8px
        18px;

    position: relative;

    background:
        linear-gradient(
            135deg,
            #171717,
            #302128
        );

    color:
        #fff8ef;

    border:
        2px solid
        rgba(255,255,255,.9);

    outline:
        2px solid
        #9d2435;

    box-shadow:
        5px 5px 0
        rgba(0,0,0,.22);

    font-family:
        Georgia,
        serif;

    font-size:
        12px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

    transform:
        skewX(-6deg);

    z-index: 2;
}


/* NÚMERO DECORATIVO DEL CAPÍTULO */

#main-content.book-mode
.manga-chapter-label::before {

    content: "✦";

    display: inline-block;

    color:
        #e8b4bd;

    font-size:
        14px;

    transform:
        skewX(6deg);
}


/* =========================================================
   SUBTÍTULO DEL CAPÍTULO
   ========================================================= */

#main-content.book-mode .section-label {

    width:
        fit-content;

    max-width:
        100%;

    margin:
        0 auto 18px;

    padding:
        7px 18px;

    position:
        relative;

    color:
        #7d2637;

    background:
        rgba(255,255,255,.56);

    border-top:
        1px solid
        rgba(125,38,55,.35);

    border-bottom:
        1px solid
        rgba(125,38,55,.35);

    font-family:
        Georgia,
        serif;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        3px;

    text-align:
        center;

    text-transform:
        uppercase;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.07);
}


/* DETALLES A LOS LADOS */

#main-content.book-mode
.section-label::before,

#main-content.book-mode
.section-label::after {

    content:
        "✦";

    position:
        absolute;

    top:
        50%;

    color:
        #b13d52;

    font-size:
        12px;

    transform:
        translateY(-50%);
}


#main-content.book-mode
.section-label::before {

    left:
        -22px;
}


#main-content.book-mode
.section-label::after {

    right:
        -22px;
}


/* =========================================================
   TÍTULOS DEL CONTENIDO
   ========================================================= */

#main-content.book-mode .section-content h1,

#main-content.book-mode .section-content h2 {

    position:
        relative;

    margin:
        0 auto
        28px;

    color:
        #26181d;

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

    font-weight:
        900;

    letter-spacing:
        -1px;

    line-height:
        1.08;

    text-align:
        center;

    text-shadow:
        3px 3px 0
        rgba(255,255,255,.55);
}


#main-content.book-mode .section-content h2 {

    font-size:
        clamp(
            30px,
            5vw,
            52px
        );
}


/* PEQUEÑA LÍNEA DE SEPARACIÓN */

#main-content.book-mode
.section-content h2::after {

    content:
        "";

    display:
        block;

    width:
        76px;

    height:
        3px;

    margin:
        18px auto 0;

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

}


/* =========================================================
   📱 MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    #main-content.book-mode
    .manga-chapter-label {

        margin-bottom:
            14px;

        padding:
            7px
            14px;

        font-size:
            10px;

        letter-spacing:
            2px;
    }


    #main-content.book-mode
    .section-label {

        margin-bottom:
            14px;

        padding:
            6px
            12px;

        font-size:
            9px;

        letter-spacing:
            2px;
    }


    #main-content.book-mode
    .section-label::before {

        left:
            -16px;
    }


    #main-content.book-mode
    .section-label::after {

        right:
            -16px;
    }


    #main-content.book-mode
    .section-content h2 {

        font-size:
            clamp(
                27px,
                8vw,
                40px
            );

        margin-bottom:
            22px;
    }

}


/* =========================================================
   🧹 LIMPIEZA — ENCABEZADOS DE CAPÍTULO
   ========================================================= */

#main-content.book-mode .section-label {

    border-top: none !important;
    border-bottom: none !important;

    box-shadow: none !important;

    background: transparent !important;

    padding:
        6px 28px !important;

    position: relative;

}


/* Eliminar adornos heredados */

#main-content.book-mode
.section-label::before,

#main-content.book-mode
.section-label::after {

    content: none !important;
}


/* Nuevo detalle lateral */

#main-content.book-mode
.section-label {

    display: flex;

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

    gap: 14px;
}


/* Pequeños diamantes */

#main-content.book-mode
.section-label {

    --chapter-red: #9d2435;
}


#main-content.book-mode
.section-label {

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


/* =========================================================
   🌸 ENCABEZADO ANIME — V2
   ========================================================= */

#main-content.book-mode .manga-chapter-label {

    background:
        transparent !important;

    color:
        #8f3044 !important;

    border:
        none !important;

    outline:
        none !important;

    box-shadow:
        none !important;

    padding:
        5px 14px !important;

    margin:
        0 auto 12px !important;

    transform:
        none !important;

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

    font-size:
        11px !important;

    font-weight:
        700 !important;

    letter-spacing:
        4px !important;
}


/* Eliminar el símbolo anterior */

#main-content.book-mode
.manga-chapter-label::before {

    content:
        none !important;
}


/* =========================================================
   ✦ LÍNEAS LATERALES
   ========================================================= */

#main-content.book-mode
.manga-chapter-label::after {

    content:
        "◆";

    display:
        inline-block;

    margin-left:
        8px;

    color:
        #b34a61;

    font-size:
        7px;
}


/* =========================================================
   ❤️ TÍTULOS
   ========================================================= */

#main-content.book-mode
.section-content h1,

#main-content.book-mode
.section-content h2 {

    color:
        #7f2639 !important;

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

    font-weight:
        900 !important;

    letter-spacing:
        -1px;

    text-shadow:
        2px 2px 0
        rgba(255,255,255,.7) !important;

}


/* Línea decorativa debajo del título */

#main-content.book-mode
.section-content h1::after,

#main-content.book-mode
.section-content h2::after {

    content:
        "♥";

    display:
        block;

    width:
        auto;

    height:
        auto;

    margin:
        12px auto 0;

    background:
        none !important;

    color:
        #b34a61;

    font-size:
        13px;

    opacity:
        .7;
}


/* =========================================================
   🌸 CAPÍTULO 01 — NUESTRA HISTORIA
   ========================================================= */

/* Fondo atmosférico */

#main-content.book-mode
> .book-page:nth-child(2) {

    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(255,166,190,.28),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 75%,
            rgba(186,155,255,.20),
            transparent 30%
        ),
        transparent !important;
}


/* Pétalos decorativos */

#main-content.book-mode
> .book-page:nth-child(2)::before {

    content:
        "🌸  ✿  🌸";

    position:
        absolute;

    top:
        12%;

    right:
        7%;

    color:
        #a83d55;

    font-size:
        22px;

    letter-spacing:
        10px;

    opacity:
        .32;

    pointer-events:
        none;

    transform:
        rotate(12deg);

    animation:
        chapterPetals 7s ease-in-out infinite;
}


/* Segundo detalle */

#main-content.book-mode
> .book-page:nth-child(2)::after {

    content:
        "✦";

    position:
        absolute;

    left:
        8%;

    bottom:
        18%;

    color:
        #a83d55;

    font-size:
        18px;

    opacity:
        .35;

    pointer-events:
        none;

    animation:
        chapterSparkle 4s ease-in-out infinite;
}


/* Movimiento muy sutil */

@keyframes chapterPetals {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(12deg);
    }

    50% {
        transform:
            translateY(12px)
            rotate(18deg);
    }

}


@keyframes chapterSparkle {

    0%,
    100% {
        opacity:
            .2;

        transform:
            scale(.85)
            rotate(0deg);
    }

    50% {
        opacity:
            .6;

        transform:
            scale(1.15)
            rotate(25deg);
    }

}


/* =========================================================
   ❤️ DETALLE CENTRAL DEL CAPÍTULO 01
   ========================================================= */

#main-content.book-mode
> .book-page:nth-child(2)
.section-content {

    position:
        relative;
}


/* Pequeña firma visual */

#main-content.book-mode
> .book-page:nth-child(2)
.section-content::before {

    content:
        "JEAN  ♥  LARIMAR";

    display:
        block;

    margin:
        0 auto 22px;

    color:
        #9d4053;

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

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        4px;

    text-align:
        center;

    opacity:
        .65;
}


/* =========================================================
   📱 MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    #main-content.book-mode
    > .book-page:nth-child(2)::before {

        top:
            9%;

        right:
            4%;

        font-size:
            17px;

        letter-spacing:
            5px;
    }


    #main-content.book-mode
    > .book-page:nth-child(2)::after {

        left:
            5%;

        bottom:
            15%;
    }


    #main-content.book-mode
    > .book-page:nth-child(2)
    .section-content::before {

        margin-bottom:
            16px;

        font-size:
            8px;

        letter-spacing:
            3px;
    }

}


/* =========================================================
   💌 CAPÍTULO 02 — CARTA ANIME V2
   ========================================================= */

#main-content.book-mode
> .book-page:nth-child(3) {

    position:
        absolute;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255,220,202,.38),
            transparent 30%
        ),
        radial-gradient(
            circle at 12% 18%,
            rgba(255,145,181,.25),
            transparent 25%
        ),
        radial-gradient(
            circle at 88% 78%,
            rgba(213,169,255,.20),
            transparent 28%
        ),
        transparent !important;
}


/* =========================================================
   🌅 AURA ROMÁNTICA
   ========================================================= */

#main-content.book-mode
> .book-page:nth-child(3)
.section-content {

    position:
        relative;

    z-index:
        3;

}


#main-content.book-mode
> .book-page:nth-child(3)
.section-content::after {

    content:
        "";

    position:
        absolute;

    width:
        360px;

    height:
        360px;

    left:
        50%;

    top:
        42%;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,184,194,.22),
            rgba(255,184,194,.08) 35%,
            transparent 70%
        );

    filter:
        blur(8px);

    z-index:
        -1;

    pointer-events:
        none;

    animation:
        letterAura 7s ease-in-out infinite;
}


@keyframes letterAura {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.92);

        opacity:
            .65;
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.08);

        opacity:
            1;
    }

}


/* =========================================================
   💌 ELEMENTOS FLOTANTES
   ========================================================= */

#main-content.book-mode
> .book-page:nth-child(3)::before {

    content:
        "♡       ✦          ♥             ✧        ♡";

    position:
        absolute;

    inset:
        0;

    color:
        #a83d55;

    font-family:
        Georgia,
        serif;

    font-size:
        17px;

    letter-spacing:
        7px;

    line-height:
        5;

    opacity:
        .24;

    pointer-events:
        none;

    z-index:
        1;

    animation:
        letterParticles 12s linear infinite;
}


#main-content.book-mode
> .book-page:nth-child(3)::after {

    content:
        "✦   ♡             ✧          ♥";

    position:
        absolute;

    right:
        4%;

    bottom:
        10%;

    color:
        #b34a61;

    font-size:
        15px;

    letter-spacing:
        12px;

    opacity:
        .30;

    pointer-events:
        none;

    z-index:
        2;

    animation:
        letterSparkles 5s ease-in-out infinite;
}


@keyframes letterParticles {

    0% {
        transform:
            translateY(20px)
            translateX(0);

        opacity:
            .10;
    }

    25% {
        transform:
            translateY(-15px)
            translateX(10px);

        opacity:
            .28;
    }

    50% {
        transform:
            translateY(-30px)
            translateX(-8px);

        opacity:
            .18;
    }

    75% {
        transform:
            translateY(-10px)
            translateX(12px);

        opacity:
            .28;
    }

    100% {
        transform:
            translateY(20px)
            translateX(0);

        opacity:
            .10;
    }

}


@keyframes letterSparkles {

    0%,
    100% {
        transform:
            translateY(0)
            scale(.85);

        opacity:
            .20;
    }

    50% {
        transform:
            translateY(-12px)
            scale(1.15);

        opacity:
            .65;
    }

}


/* =========================================================
   💌 IDENTIDAD DE LA CARTA
   ========================================================= */

#main-content.book-mode
> .book-page:nth-child(3)
.section-content::before {

    content:
        "UNA CARTA PARA TI";

    display:
        block;

    margin:
        0 auto 22px;

    color:
        #a04b57;

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

    font-size:
        10px;

    font-style:
        italic;

    letter-spacing:
        4px;

    text-align:
        center;

    opacity:
        .72;

    position:
        relative;

    z-index:
        4;
}


/* =========================================================
   ✨ BRILLO DEL TEXTO
   ========================================================= */

#main-content.book-mode
> .book-page:nth-child(3)
.section-content h1,

#main-content.book-mode
> .book-page:nth-child(3)
.section-content h2 {

    text-shadow:
        0 0 18px rgba(255,185,195,.18),
        2px 2px 0 rgba(255,255,255,.7) !important;

}


/* =========================================================
   📱 MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    #main-content.book-mode
    > .book-page:nth-child(3)
    .section-content::after {

        width:
            280px;

        height:
            280px;
    }


    #main-content.book-mode
    > .book-page:nth-child(3)::before {

        font-size:
            13px;

        letter-spacing:
            4px;

        line-height:
            6;
    }


    #main-content.book-mode
    > .book-page:nth-child(3)::after {

        font-size:
            12px;

        letter-spacing:
            7px;
    }

}

/* =========================================================
   💌 SOBRES Y CORAZONES
   ========================================================= */

#main-content.book-mode
> .book-page:nth-child(3)::before {

    content:
        "♡   💌   ✦";

    position:
        absolute;

    top:
        13%;

    right:
        7%;

    color:
        #a83d55;

    font-size:
        21px;

    letter-spacing:
        9px;

    opacity:
        .30;

    pointer-events:
        none;

    transform:
        rotate(-8deg);

    animation:
        letterFloat 6s ease-in-out infinite;
}


#main-content.book-mode
> .book-page:nth-child(3)::after {

    content:
        "♥";

    position:
        absolute;

    left:
        8%;

    bottom:
        20%;

    color:
        #b34a61;

    font-size:
        18px;

    opacity:
        .28;

    pointer-events:
        none;

    animation:
        letterHeart 4.5s ease-in-out infinite;
}


/* =========================================================
   ✨ MOVIMIENTO
   ========================================================= */

@keyframes letterFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-8deg);
    }

    50% {
        transform:
            translateY(10px)
            rotate(-3deg);
    }

}


@keyframes letterHeart {

    0%,
    100% {
        opacity:
            .18;

        transform:
            scale(.85)
            rotate(-5deg);
    }

    50% {
        opacity:
            .5;

        transform:
            scale(1.12)
            rotate(5deg);
    }

}


/* =========================================================
   💌 FIRMA DEL CAPÍTULO
   ========================================================= */

#main-content.book-mode
> .book-page:nth-child(3)
.section-content {

    position:
        relative;
}


#main-content.book-mode
> .book-page:nth-child(3)
.section-content::before {

    content:
        "UNA CARTA PARA TI";

    display:
        block;

    margin:
        0 auto 22px;

    color:
        #a04b57;

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

    font-size:
        10px;

    font-style:
        italic;

    letter-spacing:
        3px;

    text-align:
        center;

    opacity:
        .65;
}


/* =========================================================
   📱 MÓVIL
   ========================================================= */

@media (max-width: 700px) {

    #main-content.book-mode
    > .book-page:nth-child(3)::before {

        top:
            9%;

        right:
            4%;

        font-size:
            17px;

        letter-spacing:
            5px;
    }


    #main-content.book-mode
    > .book-page:nth-child(3)::after {

        left:
            5%;

        bottom:
            15%;
    }


    #main-content.book-mode
    > .book-page:nth-child(3)
    .section-content::before {

        margin-bottom:
            16px;

        font-size:
            8px;

        letter-spacing:
            2px;
    }

}



/* =========================================================
   🌌 PALETA ANIME — CIELO ROMÁNTICO
   ========================================================= */

#main-content.book-mode {

    background:
        radial-gradient(
            circle at 18% 20%,
            rgba(255, 220, 170, .20),
            transparent 24%
        ),
        radial-gradient(
            circle at 82% 28%,
            rgba(137, 120, 255, .28),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 85%,
            rgba(255, 125, 145, .16),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #1d2342 0%,
            #343166 38%,
            #714064 68%,
            #b96862 100%
        );

    background-size:
        160% 160%;

    animation:
        animeSkyShiftSoft
        20s ease-in-out infinite;

}


/* =========================================================
   ✨ ANIMACIÓN DEL CIELO
   ========================================================= */

@keyframes animeSkyShiftSoft {

    0% {
        background-position:
            0% 30%;
    }

    50% {
        background-position:
            100% 70%;
    }

    100% {
        background-position:
            0% 30%;
    }

}


/* =========================================================
   🌸 REDUCIR INTENSIDAD DE DECORACIÓN
   ========================================================= */

#main-content.book-mode::before {

    opacity:
        .45;

}


#main-content.book-mode::after {

    opacity:
        .28;

}


/* =========================================================
   第 01 話 — NUESTRA HISTORIA
   ATMÓSFERA: ATARDECER ANIME ROMÁNTICO
   ========================================================= */

#main-content.book-mode
> .book-page:nth-child(2) {

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255, 244, 208, .30),
            transparent 22%
        ),
        radial-gradient(
            circle at 82% 82%,
            rgba(255, 151, 180, .18),
            transparent 30%
        ),
        linear-gradient(
            155deg,
            rgba(255, 247, 231, .90) 0%,
            rgba(255, 223, 221, .88) 48%,
            rgba(232, 218, 255, .86) 100%
        ) !important;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

    box-shadow:
        inset 0 0 90px
        rgba(255,255,255,.30);

}


/* ☀️ SOL / LUZ DEL ATARDECER */

#main-content.book-mode
> .book-page:nth-child(2)::before {

    content: "";

    position: absolute;

    width:
        min(42vw, 260px);

    aspect-ratio:
        1;

    top:
        -8%;

    right:
        -8%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 240, 184, .85) 0%,
            rgba(255, 198, 137, .30) 38%,
            transparent 70%
        );

    filter:
        blur(2px);

    opacity:
        .80;

    pointer-events:
        none;

    animation:
        chapterOneSun
        7s ease-in-out infinite alternate;

}


/* ✨ DESTELLOS */

#main-content.book-mode
> .book-page:nth-child(2)::after {

    content:
        "✦  ·  ✧     ·     ✦";

    position:
        absolute;

    left:
        8%;

    bottom:
        13%;

    color:
        #b96b72;

    font-size:
        clamp(13px, 2.5vw, 20px);

    letter-spacing:
        10px;

    opacity:
        .42;

    pointer-events:
        none;

    animation:
        chapterOneSparkles
        5s ease-in-out infinite alternate;

}


@keyframes chapterOneSun {

    from {

        transform:
            translate3d(0, 0, 0)
            scale(1);

    }

    to {

        transform:
            translate3d(-18px, 12px, 0)
            scale(1.08);

    }

}


@keyframes chapterOneSparkles {

    from {

        opacity:
            .22;

        transform:
            translateY(0);

    }

    to {

        opacity:
            .62;

        transform:
            translateY(-10px);

    }

}


/* 📜 LA TIMELINE DEBE DESTACAR */

#main-content.book-mode
> .book-page:nth-child(2)
.timeline {

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   第 02 話 — UNA CARTA PARA TI
   ATMÓSFERA: NOCHE ÍNTIMA Y ROMÁNTICA
   ========================================================= */

#main-content.book-mode
> .book-page:nth-child(3) {

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 187, 205, .22),
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 78%,
            rgba(151, 120, 202, .18),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(57, 32, 48, .96),
            rgba(83, 43, 66, .94) 50%,
            rgba(50, 39, 71, .96)
        ) !important;

    color:
        #fff5f7;

    backdrop-filter:
        none;

    -webkit-backdrop-filter:
        none;

    box-shadow:
        inset 0 0 120px
        rgba(0,0,0,.22);

}


/* 🌙 LUZ SUAVE */

#main-content.book-mode
> .book-page:nth-child(3)::before {

    content: "";

    position:
        absolute;

    width:
        min(55vw, 330px);

    aspect-ratio:
        1;

    top:
        -15%;

    left:
        -12%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 223, 232, .28),
            rgba(255, 174, 203, .10) 42%,
            transparent 70%
        );

    filter:
        blur(8px);

    pointer-events:
        none;

    animation:
        chapterTwoGlow
        8s ease-in-out infinite alternate;

}


/* ✨ PEQUEÑOS DESTELLOS */

#main-content.book-mode
> .book-page:nth-child(3)::after {

    content:
        "✦    ·    ♡    ·    ✧";

    position:
        absolute;

    right:
        7%;

    bottom:
        12%;

    color:
        #ffd8e2;

    font-size:
        clamp(13px, 2.4vw, 19px);

    letter-spacing:
        8px;

    opacity:
        .45;

    pointer-events:
        none;

    animation:
        chapterTwoSparkles
        5s ease-in-out infinite alternate;

}


/* 💌 CONTENIDO SOBRE LA DECORACIÓN */

#main-content.book-mode
> .book-page:nth-child(3)
.section-content {

    position:
        relative;

    z-index:
        2;

}


/* ✍️ TEXTOS DE LA CARTA */

#main-content.book-mode
> .book-page:nth-child(3)
.manga-chapter-label {

    color:
        #ffe1e8;

    border-color:
        rgba(255,255,255,.38);

    background:
        rgba(255,255,255,.08);

}


#main-content.book-mode
> .book-page:nth-child(3)
.section-label {

    color:
        #ffd5df;

    background:
        rgba(255,255,255,.08);

    border-color:
        rgba(255,215,225,.28);

}


#main-content.book-mode
> .book-page:nth-child(3)
.section-content h2 {

    color:
        #fff5f7;

    text-shadow:
        0 4px 18px
        rgba(0,0,0,.28);

}


#main-content.book-mode
> .book-page:nth-child(3)
.section-content h2::after {

    background:
        linear-gradient(
            90deg,
            transparent,
            #f0a4b7,
            transparent
        );

}


/* 💌 BOTÓN PRINCIPAL */

#main-content.book-mode
> .book-page:nth-child(3)
.primary-button {

    background:
        linear-gradient(
            135deg,
            #a83d55,
            #762e55
        );

    color:
        #fff8fa;

    border:
        1px solid
        rgba(255,255,255,.32);

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.22),
        0 0 24px
        rgba(223,100,145,.18);

}


@keyframes chapterTwoGlow {

    from {

        transform:
            translate(0, 0)
            scale(1);

        opacity:
            .65;

    }

    to {

        transform:
            translate(24px, 18px)
            scale(1.12);

        opacity:
            1;

    }

}


@keyframes chapterTwoSparkles {

    from {

        opacity:
            .20;

        transform:
            translateY(0);

    }

    to {

        opacity:
            .62;

        transform:
            translateY(-12px);

    }

}


/* =========================================================
   第 02 話 — CORRECCIÓN
   CARTA ROMÁNTICA, CLARA Y LEGIBLE
   ========================================================= */

#main-content.book-mode
> .book-page:nth-child(3) {

    background:
        radial-gradient(
            circle at 12% 12%,
            rgba(255, 213, 225, .30),
            transparent 24%
        ),
        radial-gradient(
            circle at 88% 85%,
            rgba(255, 225, 194, .28),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #fffaf6 0%,
            #fff2f5 50%,
            #f8f3ff 100%
        ) !important;

    color:
        #3b252c;

}


/* Desactivamos la decoración oscura anterior */

#main-content.book-mode
> .book-page:nth-child(3)::before {

    width:
        min(50vw, 280px);

    top:
        -10%;

    left:
        -8%;

    background:
        radial-gradient(
            circle,
            rgba(255, 190, 205, .18),
            transparent 70%
        );

    opacity:
        .70;

}


#main-content.book-mode
> .book-page:nth-child(3)::after {

    color:
        #b76b7b;

    opacity:
        .28;

}


/* Textos del capítulo */

#main-content.book-mode
> .book-page:nth-child(3)
.manga-chapter-label {

    color:
        #7d2637;

    background:
        rgba(255,255,255,.60);

    border-color:
        rgba(125,38,55,.35);

}


#main-content.book-mode
> .book-page:nth-child(3)
.section-label {

    color:
        #9d2435;

    background:
        rgba(255,255,255,.45);

}


#main-content.book-mode
> .book-page:nth-child(3)
.section-content h2 {

    color:
        #321d24;

    text-shadow:
        none;

}


/* =========================================================
   💌 INTERIOR DE LA CARTA
   ========================================================= */

#letter-modal {

    background:
        rgba(34, 22, 28, .42);

    backdrop-filter:
        blur(8px);

}


#letter-modal .letter-content,
#letter-modal .letter-card {

    background:
        linear-gradient(
            145deg,
            #fffdf9,
            #fff4f0
        );

    color:
        #422b31;

    border:
        1px solid
        rgba(157, 36, 53, .20);

    border-radius:
        22px;

    box-shadow:
        0 25px 70px
        rgba(35,15,24,.28);

}


/* Cabecera de la carta */

#letter-modal h1,
#letter-modal h2,
#letter-modal .letter-title {

    color:
        #8f263d;

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

}


/* El texto de la carta */

#letter-text {

    color:
        #422b31;

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

    font-size:
        clamp(17px, 2.2vw, 21px);

    line-height:
        1.85;

    text-align:
        left;

    letter-spacing:
        .1px;

    text-shadow:
        none;

}


/* Primera letra decorativa */

#letter-text::first-letter {

    color:
        #a83d55;

    font-size:
        2.6em;

    font-weight:
        bold;

    line-height:
        .8;

}


/* =========================================================
   💌 SEPARADOR ENTRE PÁRRAFOS
   ========================================================= */

#letter-text p {

    margin:
        0 0 1.35em;

}


/* =========================================================
   🌹 CIERRE DECORATIVO
   ========================================================= */

#letter-modal .letter-card::after {

    content:
        "♡  ·  ♥  ·  ♡";

    display:
        block;

    margin:
        32px auto 4px;

    color:
        #b04a61;

    font-size:
        14px;

    letter-spacing:
        8px;

    text-align:
        center;

    opacity:
        .65;

}


/* =========================================================
   💌 CAPÍTULO 02 — DISEÑO DE LA CARTA ABIERTA
   ========================================================= */

#main-content.book-mode #letter-modal {

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

}


#main-content.book-mode #letter-modal .modal-overlay {

    background:
        rgba(18, 12, 22, .82);

    backdrop-filter:
        blur(14px);

}


/* =========================
   PAPEL
   ========================= */

#main-content.book-mode #letter-modal .letter-card {

    position:
        relative;

    width:
        min(92vw, 680px);

    max-height:
        min(86dvh, 820px);

    overflow-y:
        auto;

    padding:
        clamp(48px, 7vw, 76px)
        clamp(24px, 6vw, 64px)
        clamp(36px, 6vw, 60px);

    border:
        3px solid
        #b56a7b;

    border-radius:
        6px;

    background:

        linear-gradient(
            rgba(255,255,255,.76),
            rgba(255,255,255,.76)
        ),

        radial-gradient(
            circle at 20% 15%,
            rgba(210,130,150,.08) 0 1px,
            transparent 1.5px
        ),

        #fffaf3;

    background-size:
        auto,
        7px 7px,
        auto;

    color:
        #30262a;

    box-shadow:

        0 0 0 8px
        rgba(255,250,243,.96),

        0 0 0 11px
        rgba(181,106,123,.38),

        0 30px 90px
        rgba(0,0,0,.48);

    animation:
        letterOpenAnime
        .45s
        cubic-bezier(.2,.8,.2,1);

}


/* =========================
   ADORNOS
   ========================= */

#main-content.book-mode
#letter-modal
.letter-card::before {

    content:
        "♡  ✦  ♡";

    position:
        absolute;

    top:
        18px;

    left:
        50%;

    transform:
        translateX(-50%);

    color:
        #b34f68;

    font-size:
        20px;

    letter-spacing:
        10px;

    opacity:
        .8;

}


#main-content.book-mode
#letter-modal
.letter-card::after {

    content:
        "✦";

    position:
        absolute;

    right:
        28px;

    bottom:
        22px;

    color:
        #c95d78;

    font-size:
        34px;

    opacity:
        .5;

}


/* =========================
   BOTÓN CERRAR
   ========================= */

#main-content.book-mode
#letter-modal
.close-button {

    position:
        absolute;

    top:
        14px;

    right:
        16px;

    width:
        38px;

    height:
        38px;

    border:
        2px solid
        rgba(143,58,79,.45);

    border-radius:
        50%;

    background:
        #fff8f5;

    color:
        #963d55;

    font-size:
        25px;

    line-height:
        1;

    box-shadow:
        3px 3px 0
        rgba(179,79,104,.22);

    cursor:
        pointer;

}


/* =========================
   TÍTULO
   ========================= */

#main-content.book-mode
#letter-modal
#letter-title {

    position:
        relative;

    margin:
        0 auto 36px;

    padding-bottom:
        20px;

    color:
        #7d2f45;

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

    font-size:
        clamp(28px, 6vw, 46px);

    font-weight:
        900;

    line-height:
        1.15;

    text-align:
        center;

    text-shadow:
        2px 2px 0
        rgba(255,255,255,.8);

}


#main-content.book-mode
#letter-modal
#letter-title::after {

    content:
        "✦  ♡  ✦";

    position:
        absolute;

    left:
        50%;

    bottom:
        -4px;

    transform:
        translateX(-50%);

    width:
        100%;

    color:
        #c45c76;

    font-size:
        13px;

    letter-spacing:
        5px;

    opacity:
        .75;

}


/* =========================
   TEXTO DE LA CARTA
   ========================= */

#main-content.book-mode
#letter-modal
#letter-text {

    position:
        relative;

    color:
        #382d31;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(16px, 2.2vw, 19px);

    font-weight:
        500;

    line-height:
        2;

    letter-spacing:
        .15px;

    text-align:
        left;

    text-shadow:
        0 1px 0
        rgba(255,255,255,.8);

}


/* PRIMERA LETRA */

#main-content.book-mode
#letter-modal
#letter-text::first-letter {

    float:
        left;

    margin:
        6px 10px 0 0;

    color:
        #a8445d;

    font-family:
        Georgia,
        serif;

    font-size:
        3.6em;

    font-weight:
        900;

    line-height:
        .75;

}


/* SEPARACIÓN VISUAL */

#main-content.book-mode
#letter-modal
#letter-text::after {

    content:
        "Con todo mi amor  ♡";

    display:
        block;

    margin-top:
        34px;

    color:
        #9d3d56;

    font-family:
        Georgia,
        serif;

    font-size:
        18px;

    font-style:
        italic;

    font-weight:
        700;

    text-align:
        right;

}


/* =========================
   SCROLL
   ========================= */

#main-content.book-mode
#letter-modal
.letter-card::-webkit-scrollbar {

    width:
        7px;

}


#main-content.book-mode
#letter-modal
.letter-card::-webkit-scrollbar-thumb {

    background:
        rgba(179,79,104,.45);

    border-radius:
        10px;

}


/* =========================
   ANIMACIÓN
   ========================= */

@keyframes letterOpenAnime {

    from {

        opacity:
            0;

        transform:
            translateY(24px)
            scale(.96);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0)
            scale(1);

    }

}


/* =========================
   MÓVIL
   ========================= */

@media (max-width: 700px) {

    #main-content.book-mode
    #letter-modal {

        padding:
            14px;

    }


    #main-content.book-mode
    #letter-modal
    .letter-card {

        width:
            100%;

        max-height:
            88dvh;

        padding:
            52px 24px 42px;

    }


    #main-content.book-mode
    #letter-modal
    #letter-text {

        font-size:
            16px;

        line-height:
            1.9;

    }

}


/* =========================================================
   💌 CAPÍTULO 02 — CARTA V2
   ✦ CARTA DE AMOR ESTILO MANGA / ANIME
   ========================================================= */


/* ---------------------------------------------------------
   🌸 MARCO INTERIOR
   --------------------------------------------------------- */

#main-content.book-mode
#letter-modal
.letter-card {

    overflow:
        hidden;

}


/* Línea ornamental interior */

#main-content.book-mode
#letter-modal
.letter-card {

    border:
        2px solid
        rgba(156,65,88,.65);

    outline:
        1px solid
        rgba(156,65,88,.22);

    outline-offset:
        -9px;

}


/* ---------------------------------------------------------
   ✦ DECORACIÓN DE ESQUINAS
   --------------------------------------------------------- */

#main-content.book-mode
#letter-modal
.letter-card::before {

    content:
        "✦";

    position:
        absolute;

    top:
        22px;

    left:
        25px;

    width:
        28px;

    height:
        28px;

    color:
        #b44d69;

    font-family:
        Georgia,
        serif;

    font-size:
        24px;

    opacity:
        .7;

    transform:
        rotate(-15deg);

}


#main-content.book-mode
#letter-modal
.letter-card::after {

    content:
        "♡";

    position:
        absolute;

    right:
        25px;

    bottom:
        20px;

    color:
        #b44d69;

    font-family:
        Georgia,
        serif;

    font-size:
        32px;

    opacity:
        .45;

    animation:
        letterHeartFloat
        4s
        ease-in-out
        infinite;

}


/* ---------------------------------------------------------
   💗 TÍTULO
   --------------------------------------------------------- */

#main-content.book-mode
#letter-modal
#letter-title {

    margin-bottom:
        42px;

    letter-spacing:
        -.5px;

}


#main-content.book-mode
#letter-modal
#letter-title::before {

    content:
        "♡";

    display:
        block;

    margin-bottom:
        8px;

    color:
        #c45a75;

    font-family:
        Georgia,
        serif;

    font-size:
        20px;

    animation:
        letterSpark
        3s
        ease-in-out
        infinite;

}


/* ---------------------------------------------------------
   ✍️ TEXTO — ESTILO CARTA
   --------------------------------------------------------- */

#main-content.book-mode
#letter-modal
#letter-text {

    padding:
        4px
        10px;

    color:
        #33282c;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(16px, 2.15vw, 19px);

    line-height:
        2.05;

    letter-spacing:
        .1px;

}


/* Primera letra más elegante */

#main-content.book-mode
#letter-modal
#letter-text::first-letter {

    margin:
        7px 12px 0 0;

    color:
        #a43f5b;

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

    font-size:
        4em;

    font-weight:
        900;

    line-height:
        .72;

}


/* ---------------------------------------------------------
   💕 LÍNEA DE SEPARACIÓN
   --------------------------------------------------------- */

#main-content.book-mode
#letter-modal
#letter-text {

    background:
        linear-gradient(
            transparent 96%,
            rgba(176,80,103,.08) 96%
        );

    background-size:
        100% 2.05em;

}


/* ---------------------------------------------------------
   🌸 FIRMA
   --------------------------------------------------------- */

#main-content.book-mode
#letter-modal
#letter-text::after {

    content:
        "Con todo mi amor  ♡";

    display:
        block;

    margin:
        42px 5px 0;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(164,63,91,.25);

    color:
        #963c56;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size:
        18px;

    font-style:
        italic;

    font-weight:
        700;

    text-align:
        right;

}


/* ---------------------------------------------------------
   🌸 PEQUEÑOS DESTELLOS
   --------------------------------------------------------- */

@keyframes letterSpark {

    0%,
    100% {

        opacity:
            .45;

        transform:
            scale(.9)
            rotate(-8deg);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.15)
            rotate(8deg);

    }

}


@keyframes letterHeartFloat {

    0%,
    100% {

        transform:
            translateY(0)
            rotate(-5deg);

        opacity:
            .35;

    }

    50% {

        transform:
            translateY(-7px)
            rotate(5deg);

        opacity:
            .7;

    }

}


/* ---------------------------------------------------------
   📱 MÓVIL
   --------------------------------------------------------- */

@media (max-width: 700px) {

    #main-content.book-mode
    #letter-modal
    .letter-card {

        outline-offset:
            -7px;

        padding:
            54px 27px 44px;

    }


    #main-content.book-mode
    #letter-modal
    #letter-text {

        padding:
            4px 5px;

        font-size:
            16px;

        line-height:
            1.95;

    }


    #main-content.book-mode
    #letter-modal
    #letter-text::first-letter {

        font-size:
            3.4em;

    }

}


/* =========================================================
   💌 CARTA — SELECTORES CORREGIDOS
   El modal está fuera de #main-content
   ========================================================= */

#letter-modal .letter-card {

    border:
        2px solid
        rgba(156, 65, 88, .65) !important;

    outline:
        1px solid
        rgba(156, 65, 88, .22);

    outline-offset:
        -9px;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(220, 120, 150, .08),
            transparent 25%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(180, 120, 180, .06),
            transparent 25%
        ),
        #fffaf3 !important;

    box-shadow:
        0 0 0 8px rgba(255,250,243,.96),
        0 0 0 11px rgba(181,106,123,.38),
        0 30px 90px rgba(0,0,0,.48) !important;

}


#letter-modal .letter-card::before {

    content:
        "✦  ♡  ✦";

    position:
        absolute;

    top:
        20px;

    left:
        50%;

    transform:
        translateX(-50%);

    color:
        #b44d69;

    font-size:
        18px;

    letter-spacing:
        8px;

    opacity:
        .75;

}


#letter-modal #letter-title {

    color:
        #7d2f45 !important;

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

    font-size:
        clamp(28px, 6vw, 46px);

    font-weight:
        900;

    text-align:
        center;

}


#letter-modal #letter-text {

    color:
        #33282c !important;

    font-family:
        "Segoe Print",
        "Comic Sans MS",
        cursive;

    font-size:
        clamp(16px, 2.15vw, 19px);

    line-height:
        2.05;

    text-align:
        left;

}


#letter-modal #letter-text::first-letter {

    float:
        left;

    margin:
        7px 12px 0 0;

    color:
        #a43f5b;

    font-family:
        Georgia,
        serif;

    font-size:
        4em;

    font-weight:
        900;

    line-height:
        .72;

}


#letter-modal .close-button {

    border:
        2px solid
        rgba(143,58,79,.45);

    background:
        #fff8f5;

    color:
        #963d55;

}


/* =========================================================
   💌 CARTA — TIPOGRAFÍA MÁS GRANDE
   ========================================================= */

#letter-modal #letter-text {

    font-size:
        clamp(18px, 2.4vw, 21px) !important;

    line-height:
        2.05;

}


#letter-modal #letter-title {

    font-size:
        clamp(31px, 6vw, 49px) !important;

}


@media (max-width: 700px) {

    #letter-modal #letter-text {

        font-size:
            18px !important;

        line-height:
            1.95;

    }


    #letter-modal #letter-title {

        font-size:
            32px !important;

    }

}