:root {
    --bg: #fff7f8;
    --bg-soft: #ffe9ee;
    --pink: #e95d7a;
    --pink-dark: #d94a69;
    --text: #442e35;
    --muted: #896b74;
    --white: #ffffff;
    --shadow: 0 15px 40px rgba(130, 45, 70, 0.12);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    overflow-x: hidden;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
}

button {
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* =========================
   FONDO DE CORAZONES
========================= */

#hearts-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}

.floating-heart {
    position: absolute;
    color: var(--pink);
    animation: floatHeart linear infinite;
    user-select: none;
}

@keyframes floatHeart {
    0% {
        transform: translateY(105vh) rotate(0deg);
        opacity: 0;
    }

    10% {
        opacity: 0.5;
    }

    90% {
        opacity: 0.2;
    }

    100% {
        transform: translateY(-15vh) rotate(360deg);
        opacity: 0;
    }
}

/* =========================
   PORTADA
========================= */

#cover-screen {
    position: fixed;
    inset: 0;
    width: 100%;
    min-height: 100dvh;

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

    padding: 20px;

    background:
        radial-gradient(circle at top, #fff7f9 0%, #ffe4eb 55%, #ffd4df 100%);

    z-index: 100;
    overflow: hidden;

    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        visibility 0.8s ease;
}

#cover-screen.opened {
    opacity: 0;
    transform: scale(1.04);
    visibility: hidden;
    pointer-events: none;
}

.cover-content {
    width: min(100%, 420px);
    padding: 48px 28px;

    text-align: center;

    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 30px;

    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);

    position: relative;
    z-index: 2;
}

.cover-icon {
    width: 78px;
    height: 78px;

    margin: 0 auto 25px;

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

    font-size: 40px;

    border-radius: 50%;
    background: var(--bg-soft);

    animation: heartbeat 1.8s infinite;
}

#cover-subtitle {
    margin-bottom: 14px;

    color: var(--muted);
    font-size: 18px;
}

#cover-title {
    margin-bottom: 35px;

    color: var(--pink-dark);
    font-size: clamp(36px, 10vw, 54px);
    line-height: 1.05;
}

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

#open-button,
.primary-button,
.yes-button {
    border: none;
    border-radius: 999px;

    background: var(--pink);
    color: var(--white);

    padding: 16px 28px;

    font-weight: bold;
    font-size: 17px;

    cursor: pointer;

    box-shadow:
        0 10px 25px rgba(233, 93, 122, 0.3);

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

#open-button:active,
.primary-button:active,
.yes-button:active {
    transform: scale(0.95);
}

@media (hover: hover) {
    #open-button:hover,
    .primary-button:hover,
    .yes-button:hover {
        transform: translateY(-3px);
        background: var(--pink-dark);
        box-shadow:
            0 14px 30px rgba(233, 93, 122, 0.4);
    }
}

/* =========================
   CONTENIDO
========================= */

.hidden {
    display: none !important;
}

#main-content {
    position: relative;
    z-index: 2;
}

#main-content.visible {
    display: block;
    animation: revealPage 0.8s ease;
}

.section {
    min-height: 80vh;

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

    padding: 80px 20px;

    position: relative;
}

.section:nth-child(even) {
    background: rgba(255, 230, 237, 0.42);
}

.section-content {
    width: min(100%, 800px);

    text-align: center;

    position: relative;
    z-index: 2;
}

.section-label {
    margin-bottom: 16px;

    color: var(--pink-dark);

    font-size: 13px;
    font-weight: bold;
    letter-spacing: 2px;
}

.section h2 {
    margin-bottom: 30px;

    color: var(--text);

    font-size: clamp(28px, 7vw, 44px);
    line-height: 1.2;
}

/* =========================
   INTRO
========================= */

.intro-section {
    min-height: 100dvh;

    background:
        radial-gradient(circle at center, #fffafa, #ffe5ec);
}

#intro-title {
    margin-bottom: 18px;

    color: var(--pink-dark);

    font-size: clamp(40px, 11vw, 64px);
}

#intro-subtitle {
    color: var(--muted);
    font-size: 20px;
}

.big-heart {
    margin-top: 40px;
    font-size: 72px;

    animation: heartbeat 1.6s infinite;
}

@keyframes heartbeat {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.14);
    }
}

/* =========================
   GALERÍA
========================= */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;
}

.gallery-card {
    overflow: hidden;

    border-radius: 22px;

    background: var(--white);

    box-shadow: var(--shadow);

    text-align: left;
}

.gallery-card img {
    width: 100%;
    height: 280px;

    display: block;

    object-fit: cover;
}

.gallery-card p {
    padding: 16px;

    color: var(--muted);
}

/* =========================
   VIDEO
========================= */

#memory-video {
    width: 100%;

    display: block;

    border-radius: 22px;

    background: #111;

    box-shadow: var(--shadow);
}

/* =========================
   LISTAS
========================= */

.love-list,
.bucket-list {
    display: grid;

    gap: 14px;

    max-width: 600px;
    margin: auto;
}

.love-item,
.bucket-item {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 18px 20px;

    border-radius: 18px;

    background: var(--white);

    box-shadow:
        0 8px 22px rgba(120, 50, 70, 0.08);

    text-align: left;
}

.love-item::before {
    content: "❤️";
    flex-shrink: 0;
}

.bucket-item {
    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}

.bucket-item::before {
    content: "🤍";
    font-size: 22px;
}

.bucket-item.completed {
    background: #fff0f4;
    text-decoration: line-through;
    opacity: 0.75;
}

.bucket-item.completed::before {
    content: "❤️";
}

.bucket-item:active {
    transform: scale(0.98);
}

/* =========================
   VALES
========================= */

.vouchers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));

    gap: 20px;
}

.voucher-card {
    padding: 28px 20px;

    border-radius: 24px;

    background: var(--white);

    box-shadow: var(--shadow);

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

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}

.voucher-card.used {
    opacity: 0.55;
    filter: grayscale(0.3);
}

.voucher-icon {
    margin-bottom: 15px;
    font-size: 50px;
}

.voucher-card h3 {
    margin-bottom: 10px;
    color: var(--pink-dark);
}

.voucher-card p {
    min-height: 54px;
    margin-bottom: 20px;

    color: var(--muted);
}

.voucher-card button {
    width: 100%;

    border: none;
    border-radius: 999px;

    padding: 12px;

    background: var(--bg-soft);
    color: var(--pink-dark);

    font-weight: bold;

    cursor: pointer;
}

.voucher-card.used button {
    cursor: default;
}

/* =========================
   RULETA
========================= */

.wheel-wrapper {
    position: relative;

    width: 260px;
    height: 260px;

    margin: 0 auto 30px;
}

.wheel {
    width: 100%;
    height: 100%;

    border-radius: 50%;

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

    font-size: 70px;

    background:
        conic-gradient(
            #f6a2b7 0deg 60deg,
            #e95d7a 60deg 120deg,
            #ffd0da 120deg 180deg,
            #d94a69 180deg 240deg,
            #f7b5c5 240deg 300deg,
            #ef8099 300deg 360deg
        );

    border: 8px solid var(--white);

    box-shadow: var(--shadow);

    transition: transform 4s cubic-bezier(0.15, 0.7, 0.1, 1);
}

.wheel-pointer {
    position: absolute;

    top: -18px;
    left: 50%;

    transform: translateX(-50%);

    color: var(--pink-dark);
    font-size: 35px;

    z-index: 5;
}

.wheel-result {
    min-height: 48px;

    margin-top: 24px;

    color: var(--pink-dark);

    font-weight: bold;
    font-size: 18px;
}

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

.final-section {
    min-height: 100dvh;
}

#final-question {
    max-width: 600px;
    margin: 0 auto 40px;
}

.final-buttons {
    min-height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    position: relative;
}

.no-button {
    border: none;
    border-radius: 999px;

    padding: 16px 28px;

    background: #ece6e8;
    color: var(--text);

    font-weight: bold;

    cursor: pointer;

    transition:
        left 0.25s ease,
        top 0.25s ease,
        transform 0.2s ease;
}

/* =========================
   CELEBRACIÓN
========================= */

.celebration-section {
    min-height: 100dvh;

    background:
        radial-gradient(circle, #fff7fa, #ffe0e8);
}

.celebration-heart {
    margin-bottom: 25px;
    font-size: 90px;

    animation: heartbeat 1.3s infinite;
}

.celebration-section p {
    margin-bottom: 25px;

    color: var(--muted);
    font-size: 19px;
    line-height: 1.7;
}

.signature {
    color: var(--pink-dark) !important;
    font-weight: bold;
}

/* =========================
   FOOTER
========================= */

footer {
    padding: 40px 20px;

    background: #fff0f4;

    text-align: center;

    color: var(--muted);
}

/* =========================
   MODAL
========================= */

.modal {
    position: fixed;
    inset: 0;

    z-index: 200;

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

    padding: 20px;
}

.modal-overlay {
    position: absolute;
    inset: 0;

    background: rgba(45, 20, 30, 0.5);

    backdrop-filter: blur(5px);
}

.letter-card {
    position: relative;
    z-index: 2;

    width: min(100%, 620px);
    max-height: 85dvh;

    overflow-y: auto;

    padding: 50px 28px 35px;

    border-radius: 26px;

    background:
        linear-gradient(135deg, #fffdf9, #fff2f5);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.25);

    animation: letterOpen 0.4s ease;
}

.letter-card h2 {
    margin-bottom: 25px;

    color: var(--pink-dark);

    text-align: center;
}

.letter-text {
    white-space: pre-line;

    color: #5b454b;

    line-height: 1.8;

    font-size: 17px;
}

.close-button {
    position: absolute;

    top: 14px;
    right: 18px;

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background: var(--bg-soft);

    color: var(--pink-dark);

    font-size: 28px;

    cursor: pointer;
}

/* =========================
   MÚSICA
========================= */

.music-button {
    position: fixed;

    right: 20px;
    bottom: 20px;

    width: 55px;
    height: 55px;

    border: none;
    border-radius: 50%;

    background: var(--pink);
    color: white;

    font-size: 22px;

    box-shadow:
        0 10px 25px rgba(233, 93, 122, 0.35);

    z-index: 50;

    cursor: pointer;
}

.music-button.playing {
    animation: musicPulse 1s infinite;
}

/* =========================
   CONFETI
========================= */

.confetti {
    position: fixed;

    width: 10px;
    height: 10px;

    top: -20px;

    z-index: 300;

    pointer-events: none;

    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    to {
        transform:
            translateY(110vh)
            rotate(720deg);

        opacity: 0;
    }
}

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

@keyframes revealPage {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

@keyframes letterOpen {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes musicPulse {
    50% {
        transform: scale(1.1);
    }
}

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

@media (max-width: 500px) {
    .section {
        padding: 70px 16px;
    }

    .cover-content {
        padding: 40px 22px;
    }

    .gallery {
        grid-template-columns: 1fr;
    }

    .gallery-card img {
        height: 320px;
    }

    .wheel-wrapper {
        width: 240px;
        height: 240px;
    }

    .final-buttons {
        flex-wrap: wrap;
    }
}


/* ==========================================
   LÍNEA DE TIEMPO
========================================== */

.timeline {
    position: relative;

    max-width: 680px;

    margin: 50px auto 0;

    padding-left: 35px;
}

.timeline::before {
    content: "";

    position: absolute;

    left: 14px;
    top: 0;
    bottom: 0;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--pink),
            transparent
        );
}

.timeline-item {
    position: relative;

    display: flex;

    margin-bottom: 35px;

    text-align: left;
}

.timeline-dot {
    position: absolute;

    left: -35px;

    width: 30px;
    height: 30px;

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

    border-radius: 50%;

    background: white;

    box-shadow:
        0 5px 15px rgba(120, 40, 65, 0.15);

    font-size: 14px;

    z-index: 2;
}

.timeline-card {
    width: 100%;

    padding: 22px;

    border-radius: 20px;

    background: white;

    box-shadow: var(--shadow);
}

.timeline-date {
    display: block;

    margin-bottom: 8px;

    color: var(--pink-dark);

    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
}

.timeline-card h3 {
    margin-bottom: 10px;

    color: var(--text);

    font-size: 20px;
}

.timeline-card p {
    color: var(--muted);

    line-height: 1.7;
}


/* ==========================================
   REGALO SECRETO
========================================== */

.secret-section {
    background:
        radial-gradient(
            circle at center,
            #fff8fa,
            #ffe6ed
        );
}

.secret-result {
    margin-top: 35px;

    animation:
        secretReveal 0.7s ease;
}

.secret-card {
    max-width: 560px;

    margin: auto;

    padding: 30px;

    border-radius: 26px;

    background: white;

    box-shadow: var(--shadow);
}

.secret-icon {
    margin-bottom: 15px;

    font-size: 65px;

    animation:
        heartbeat 1.4s infinite;
}

.secret-card h3 {
    margin-bottom: 15px;

    color: var(--pink-dark);

    font-size: 25px;
}

.secret-card p {
    margin-bottom: 25px;

    color: var(--muted);

    line-height: 1.8;
}

.secret-image-wrapper {
    overflow: hidden;

    border-radius: 20px;
}

.secret-image-wrapper img {
    display: block;

    width: 100%;
    max-height: 450px;

    object-fit: cover;
}


/* =========================================================
   🎁 CAPÍTULO 06 — EL PEQUEÑO SECRETO
   ========================================================= */

.secret-section {

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(233, 93, 122, 0.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 75%,
            rgba(246, 162, 183, 0.14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #fff5f7 50%,
            #ffecef 100%
        );

}

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

    color: var(--manga-ink);

}

#main-content.book-mode
.secret-section
.section-label,
#main-content.book-mode
.secret-section
h2 {

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

}


/* Botón */

#main-content.book-mode
.secret-section
#secret-button {

    position: relative;

    padding:
        15px 30px;

    border:
        2px solid
        var(--manga-ink);

    border-radius:
        999px;

    background:
        #fffdf8;

    color:
        var(--manga-ink);

    box-shadow:
        4px 4px 0 rgba(0,0,0,.75);

    font-family:
        Georgia,
        serif;

    font-weight:
        bold;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

}

#main-content.book-mode
.secret-section
#secret-button:not(:disabled):hover {

    transform:
        translateY(-3px);

    box-shadow:
        6px 7px 0 rgba(0,0,0,.75);

    background:
        #fff0f4;

}

#main-content.book-mode
.secret-section
#secret-button:not(:disabled):active {

    transform:
        translate(3px, 3px);

    box-shadow:
        2px 2px 0 rgba(0,0,0,.75);

}

.secret-button-opening {

    animation:
        secretButtonOpen .45s ease;

}

.secret-button-found {

    background:
        #fff0f4 !important;

    color:
        var(--manga-red) !important;

    cursor:
        default;

    opacity:
        .9;

}


/* Resultado */

#main-content.book-mode
.secret-section
.secret-result {

    margin-top:
        38px;

    animation:
        secretReveal .75s cubic-bezier(.2,.8,.2,1);

}


/* Tarjeta */

#main-content.book-mode
.secret-section
.secret-card {

    position:
        relative;

    max-width:
        590px;

    margin:
        auto;

    padding:
        30px 30px 34px;

    border:
        2px solid
        var(--manga-ink);

    border-radius:
        4px;

    background:
        #fffdf8;

    box-shadow:
        7px 7px 0 rgba(0,0,0,.75);

    overflow:
        hidden;

}


/* Decoración superior */

.secret-card-top {

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    gap:
        12px;

    margin-bottom:
        10px;

    color:
        var(--manga-red);

    font-size:
        12px;

    font-weight:
        bold;

    letter-spacing:
        3px;

}

.secret-icon {

    margin:
        8px 0 12px;

    font-size:
        62px;

    animation:
        secretHeartBeat 1.5s ease-in-out infinite;

}

#main-content.book-mode
.secret-section
.secret-card h3 {

    margin-bottom:
        8px;

    color:
        var(--manga-red);

    font-family:
        Georgia,
        serif;

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

}

.secret-divider {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin:
        15px auto 20px;

    max-width:
        220px;

    color:
        var(--manga-red);

}

.secret-divider::before,
.secret-divider::after {

    content:
        "";

    flex:
        1;

    height:
        1px;

    background:
        rgba(165,31,53,.3);

}

.secret-divider span {

    font-size:
        18px;

}


/* Mensaje */

#main-content.book-mode
.secret-section
.secret-message {

    margin-bottom:
        25px;

    color:
        #66585a;

    font-family:
        Georgia,
        serif;

    font-size:
        18px;

    line-height:
        1.8;

}


/* Imagen */

#main-content.book-mode
.secret-section
.secret-image-wrapper {

    position:
        relative;

    overflow:
        hidden;

    padding:
        9px;

    border:
        1px solid
        rgba(0,0,0,.18);

    background:
        #fff;

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

}

#main-content.book-mode
.secret-section
.secret-image-wrapper img {

    display:
        block;

    width:
        100%;

    max-height:
        450px;

    object-fit:
        cover;

}

.secret-image-caption {

    padding:
        10px 5px 3px;

    color:
        #76666a;

    font-family:
        Georgia,
        serif;

    font-size:
        13px;

    font-style:
        italic;

}


/* Frase final */

.secret-final-message {

    margin:
        27px 0 15px;

    color:
        var(--manga-ink);

    font-family:
        Georgia,
        serif;

    font-size:
        17px;

    line-height:
        1.7;

}

.secret-signature {

    color:
        var(--manga-red);

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size:
        25px;

}


/* Animaciones */

@keyframes secretButtonOpen {

    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(.94);
    }

    70% {
        transform: scale(1.06);
    }

    100% {
        transform: scale(1);
    }

}

@keyframes secretHeartBeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

}

@media (max-width: 700px) {

    #main-content.book-mode
    .secret-section
    .secret-card {

        padding:
            24px 18px 28px;

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

    }

    .secret-icon {

        font-size:
            54px;

    }

    #main-content.book-mode
    .secret-section
    .secret-message {

        font-size:
            17px;

    }

    .secret-final-message {

        font-size:
            16px;

    }

}


/* ==========================================
   MATRIMONIO
========================================== */

.marriage-section {
    min-height: 100dvh;

    background:
        linear-gradient(
            135deg,
            #fff7f9,
            #ffe2ea
        );
}

.marriage-content {
    max-width: 650px;

    margin: 35px auto 0;
}

.marriage-content p {
    margin-bottom: 24px;

    color: var(--muted);

    font-size: 19px;

    line-height: 1.8;

    opacity: 0;

    animation:
        marriageText 0.7s ease forwards;
}

.marriage-content p:nth-child(1) {
    animation-delay: 0.1s;
}

.marriage-content p:nth-child(2) {
    animation-delay: 0.2s;
}

.marriage-content p:nth-child(3) {
    animation-delay: 0.3s;
}

.marriage-content p:nth-child(4) {
    animation-delay: 0.4s;
}

.marriage-content p:nth-child(5) {
    animation-delay: 0.5s;
}

.marriage-content p:nth-child(6) {
    animation-delay: 0.6s;

    color: var(--pink-dark);

    font-weight: bold;
}


/* ==========================================
   ANIMACIONES NUEVAS
========================================== */

@keyframes secretReveal {

    from {
        opacity: 0;
        transform: translateY(30px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

@keyframes marriageText {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

}


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

@media (max-width: 500px) {

    .timeline {
        padding-left: 30px;
    }

    .timeline::before {
        left: 11px;
    }

    .timeline-dot {
        left: -30px;

        width: 25px;
        height: 25px;

        font-size: 12px;
    }

    .timeline-card {
        padding: 18px;
    }

    .secret-card {
        padding: 22px;
    }

    .marriage-content p {
        font-size: 17px;
    }

}

/* ==========================================
   CARTA — EFECTO DE ESCRITURA
========================================== */

.letter-text.typing::after {
    content: "|";

    display: inline-block;

    margin-left: 2px;

    color: var(--pink-dark);

    font-weight: bold;

    animation:
        typingCursor 0.7s infinite;
}

@keyframes typingCursor {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }

}

/* ==========================================
   ÁLBUM A PANTALLA COMPLETA
========================================== */

.gallery-card {
    cursor: pointer;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.gallery-card:active {
    transform: scale(0.97);
}

@media (hover: hover) {

    .gallery-card:hover {
        transform: translateY(-5px);
        box-shadow:
            0 20px 45px rgba(130, 45, 70, 0.18);
    }

}


/* Visor */

.album-modal {
    position: fixed;

    inset: 0;

    z-index: 500;

    display: flex;

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

    padding:
        max(20px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));

    animation:
        albumOpen 0.3s ease;
}

.album-background {
    position: absolute;

    inset: 0;

    background:
        rgba(15, 8, 12, 0.96);

    backdrop-filter:
        blur(12px);
}


/* Botón cerrar */

.album-close {
    position: fixed;

    top:
        max(18px, env(safe-area-inset-top));

    right:
        max(18px, env(safe-area-inset-right));

    z-index: 20;

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.12);

    color: white;

    font-size: 34px;

    line-height: 1;

    cursor: pointer;

    backdrop-filter: blur(8px);
}


/* Contador */

.album-counter {
    position: fixed;

    top:
        max(25px, env(safe-area-inset-top));

    left: 50%;

    transform:
        translateX(-50%);

    z-index: 20;

    padding: 8px 15px;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.12);

    color: white;

    font-size: 14px;

    backdrop-filter: blur(8px);
}


/* Contenedor */

.album-viewer {
    position: relative;

    z-index: 10;

    width: min(
        92vw,
        850px
    );

    max-height: 92dvh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    touch-action: pan-y;

    user-select: none;
}

.album-photo-container {
    position: relative;

    width: 100%;

    max-height: 76dvh;

    display: flex;

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

#album-image {
    display: block;

    width: auto;

    max-width: 100%;

    max-height: 76dvh;

    object-fit: contain;

    border-radius: 16px;

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.45);

    -webkit-user-drag: none;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.album-image-changing {
    opacity: 0;

    transform:
        scale(0.96);
}

.album-image-visible {
    opacity: 1;

    transform:
        scale(1);
}


/* Texto */

.album-caption {
    max-width: 650px;

    margin-top: 18px;

    padding:
        10px 20px;

    color: white;

    font-size: 16px;

    line-height: 1.5;

    text-align: center;
}


/* Navegación */

.album-nav {
    position: fixed;

    top: 50%;

    transform:
        translateY(-50%);

    z-index: 20;

    width: 55px;
    height: 55px;

    border: none;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.12);

    color: white;

    font-size: 42px;

    line-height: 45px;

    cursor: pointer;

    backdrop-filter:
        blur(8px);

    transition:
        background 0.2s ease,
        transform 0.2s ease;
}

.album-prev {
    left: max(
        18px,
        env(safe-area-inset-left)
    );
}

.album-next {
    right: max(
        18px,
        env(safe-area-inset-right)
    );
}

@media (hover: hover) {

    .album-nav:hover {
        background:
            rgba(233, 93, 122, 0.7);

        transform:
            translateY(-50%)
            scale(1.08);
    }

}


/* Corazón de doble toque */

.album-heart {
    position: absolute;

    top: 50%;
    left: 50%;

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

    color: white;

    font-size: 100px;

    opacity: 0;

    pointer-events: none;

    text-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.35);
}

.album-heart.show {
    animation:
        albumHeartPop 0.9s ease;
}


/* Animaciones */

@keyframes albumOpen {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

}

@keyframes albumHeartPop {

    0% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(0);
    }

    25% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1.25);
    }

    60% {
        opacity: 1;
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    100% {
        opacity: 0;
        transform:
            translate(-50%, -50%)
            scale(1.5);
    }

}


/* ==========================================
   ÁLBUM EN MÓVIL
========================================== */

@media (max-width: 600px) {

    .album-viewer {
        width: 100%;
        max-height: 90dvh;
    }

    .album-photo-container {
        max-height: 72dvh;
    }

    #album-image {
        max-height: 72dvh;

        border-radius: 12px;
    }

    .album-nav {
        width: 44px;
        height: 44px;

        font-size: 34px;
    }

    .album-prev {
        left: 10px;
    }

    .album-next {
        right: 10px;
    }

    .album-caption {
        font-size: 15px;

        margin-top: 12px;

        padding:
            8px 45px;
    }

    .album-heart {
        font-size: 80px;
    }

}

/* ==========================================
   GALERÍA DE VIDEOS
========================================== */

.video-gallery-section {
    background:
        linear-gradient(
            180deg,
            #fff,
            #fff5f8
        );
}

.section-subtitle {
    max-width: 600px;

    margin:
        0 auto 35px;

    color: var(--muted);

    line-height: 1.7;
}

.video-gallery {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 24px;

    max-width: 1050px;

    margin: 40px auto 0;
}

.video-memory-card {
    overflow: hidden;

    border-radius: 24px;

    background: white;

    box-shadow: var(--shadow);

    cursor: pointer;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

@media (hover: hover) {

    .video-memory-card:hover {
        transform:
            translateY(-7px);

        box-shadow:
            0 20px 45px
            rgba(120, 40, 65, 0.2);
    }

}

.video-thumbnail {
    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: #111;
}

.video-thumbnail video {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.video-play {
    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 62px;
    height: 62px;

    display: flex;

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

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.92);

    color: var(--pink-dark);

    font-size: 23px;

    padding-left: 4px;

    box-shadow:
        0 8px 25px
        rgba(0, 0, 0, 0.25);
}

.video-memory-info {
    padding: 20px;
}

.video-memory-info h3 {
    margin-bottom: 9px;

    color: var(--text);

    font-size: 19px;
}

.video-memory-info p {
    color: var(--muted);

    font-size: 14px;

    line-height: 1.6;
}


/* ==========================================
   VISOR DE VIDEO
========================================== */

.video-modal {
    position: fixed;

    inset: 0;

    z-index: 600;

    display: flex;

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

    padding:
        20px;

    animation:
        albumOpen 0.3s ease;
}

.video-modal-background {
    position: absolute;

    inset: 0;

    background:
        rgba(8, 5, 7, 0.97);

    backdrop-filter:
        blur(14px);
}

.video-modal-content {
    position: relative;

    z-index: 10;

    width: min(
        94vw,
        950px
    );

    max-height: 94dvh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}

.video-player-wrapper {
    width: 100%;

    max-height: 72dvh;

    display: flex;

    justify-content: center;
}

#fullscreen-video {
    display: block;

    width: 100%;

    max-height: 72dvh;

    border-radius: 16px;

    background: #000;

    box-shadow:
        0 25px 70px
        rgba(0, 0, 0, 0.5);
}

.video-close {
    position: fixed;

    top: 20px;
    right: 20px;

    z-index: 30;

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.12);

    color: white;

    font-size: 34px;

    cursor: pointer;
}

.fullscreen-video-title {
    margin-top: 20px;

    color: white;

    font-size: 23px;

    font-weight: bold;

    text-align: center;
}

.fullscreen-video-caption {
    max-width: 700px;

    margin-top: 8px;

    color:
        rgba(255, 255, 255, 0.75);

    line-height: 1.6;

    text-align: center;
}

.video-modal-navigation {
    display: flex;

    align-items: center;

    gap: 25px;

    margin-top: 18px;

    color: white;
}

.video-modal-button {
    padding:
        9px 17px;

    border: none;

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.12);

    color: white;

    cursor: pointer;
}


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

@media (max-width: 750px) {

    .video-gallery {
        grid-template-columns: 1fr;
    }

    .video-memory-card {
        max-width: 500px;

        width: 100%;

        margin: auto;
    }

    .video-modal-content {
        width: 100%;
    }

    #fullscreen-video {
        border-radius: 10px;
    }

    .fullscreen-video-title {
        font-size: 20px;
    }

    .fullscreen-video-caption {
        font-size: 14px;
    }

    .video-modal-navigation {
        gap: 10px;
    }

}


/* ==========================================
   MOMENTO ESPECIAL — NUESTRA BODA 💍
========================================== */

.wedding-milestone {
    position: relative;

    transform:
        scale(1.035);

    z-index: 2;

    margin-top: 25px;
    margin-bottom: 25px;
}

.wedding-milestone .timeline-dot {
    width: 62px;
    height: 62px;

    font-size: 27px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #ffe3ec
        );

    border:
        3px solid
        rgba(220, 80, 120, 0.35);

    box-shadow:
        0 0 0 8px
        rgba(220, 80, 120, 0.08),

        0 10px 30px
        rgba(150, 40, 80, 0.2);

    animation:
        weddingPulse 2.5s
        ease-in-out
        infinite;
}

.wedding-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(220, 80, 120, 0.2);

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fff4f7
        );

    box-shadow:
        0 18px 45px
        rgba(150, 40, 80, 0.16);

    padding-top: 30px;
}

.wedding-card::before {
    content: "";

    position: absolute;

    top: -80px;
    right: -80px;

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background:
        rgba(255, 180, 205, 0.18);

    pointer-events: none;
}

.wedding-sparkles {
    margin-bottom: 8px;

    font-size: 20px;

    letter-spacing: 8px;

    animation:
        weddingSparkle 2s
        ease-in-out
        infinite;
}

.wedding-card .timeline-date {
    font-weight: 700;

    color:
        var(--pink-dark);
}

.wedding-card h3 {
    font-size: 25px;

    margin-top: 8px;
}

.wedding-card p {
    font-size: 16px;

    line-height: 1.8;
}

.wedding-signature {
    margin-top: 20px;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 24px;

    color:
        var(--pink-dark);

    text-align: right;
}


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

@keyframes weddingPulse {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.08);
    }

}

@keyframes weddingSparkle {

    0%,
    100% {
        opacity: 0.55;

        transform:
            translateY(0);
    }

    50% {
        opacity: 1;

        transform:
            translateY(-3px);
    }

}


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

@media (max-width: 700px) {

    .wedding-milestone {
        transform:
            scale(1.015);

        margin-top: 15px;
        margin-bottom: 15px;
    }

    .wedding-milestone .timeline-dot {
        width: 54px;
        height: 54px;

        font-size: 23px;
    }

    .wedding-card h3 {
        font-size: 21px;
    }

    .wedding-card p {
        font-size: 15px;
    }

}


/* ==========================================
   📖 LIBRO DIGITAL — JEAN & LARIMAR
========================================== */

#main-content.book-mode {
    position: relative;

    width: 100%;
    height: 100dvh;

    overflow: hidden;

    perspective: 1400px;
}


/* ==========================================
   PÁGINAS
========================================== */

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

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    box-sizing: border-box;

    /*
     * Espacio superior para que títulos,
     * etiquetas y contenido no queden
     * pegados al borde.
     */

    padding:
        clamp(75px, 10vh, 105px)
        clamp(22px, 7vw, 80px)
        100px;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: none;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transform:
        perspective(1400px)
        rotateY(-10deg)
        translateX(55px)
        scale(.985);

    transform-origin: right center;

    transition:
        opacity .45s ease,
        transform .65s cubic-bezier(.22,.61,.36,1),
        visibility .45s ease;

    z-index: 1;
}


#main-content.book-mode > .book-page::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   PÁGINA ACTIVA
========================================== */

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

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform:
        perspective(1400px)
        rotateY(0deg)
        translateX(0)
        scale(1);

    z-index: 2;
}


/* ==========================================
   PÁGINA QUE SALE
========================================== */

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

    opacity: 0;

    visibility: visible;

    transform:
        perspective(1400px)
        rotateY(10deg)
        translateX(-55px)
        scale(.985);

    z-index: 1;
}


/* ==========================================
   SOMBRA DE LA HOJA
========================================== */

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

    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 45px;
    height: 100%;

    pointer-events: none;

    opacity: .25;

    background:
        linear-gradient(
            to left,
            rgba(70,30,45,.15),
            transparent
        );
}


/* ==========================================
   CONTENIDO
========================================== */

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

    width: min(
        100%,
        900px
    );

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

    box-sizing: border-box;
}


/* ==========================================
   NAVEGACIÓN
========================================== */

.book-navigation {

    position: fixed;

    left: 50%;
    bottom: 14px;

    transform:
        translateX(-50%);

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

    padding: 4px 6px;

    border-radius: 999px;

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

    border:
        1px solid
        rgba(180,80,120,.12);

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

    backdrop-filter:
        blur(12px);

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

    opacity: .78;
}


/* ==========================================
   BOTONES ← →
========================================== */

.book-nav-button {

    width: 28px;
    height: 28px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        rgba(220,80,120,.08);

    color:
        #b83d69;

    font-size: 15px;

    cursor: pointer;

    display: flex;

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

    transition:
        transform .2s ease,
        background .2s ease,
        opacity .2s ease;
}


.book-nav-button:hover {

    transform: scale(1.08);

    background:
        rgba(220,80,120,.16);
}


.book-nav-button:active {

    transform: scale(.90);
}


.book-nav-button:disabled {

    opacity: .25;

    cursor: default;

    transform: none;
}


/* ==========================================
   1 / 13
========================================== */

.book-page-indicator {

    min-width: 45px;

    text-align: center;

    font-size: 10px;

    font-weight: 600;

    color:
        #8f5369;

    letter-spacing: .3px;
}


/* ==========================================
   MARCA
========================================== */

/* ==========================================
   PUNTITOS
========================================== */

.book-dots {

    position: fixed;

    right: 10px;
    top: 50%;

    transform:
        translateY(-50%);

    z-index: 9998;

    display: flex;

    flex-direction: column;

    gap: 5px;

    opacity: .65;
}


.book-dot {

    width: 4px;
    height: 4px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background:
        rgba(170,80,110,.25);

    cursor: pointer;

    transition:
        transform .25s ease,
        background .25s ease;
}


.book-dot.active {

    transform:
        scale(1.6);

    background:
        rgba(190,55,100,.8);
}


/* ==========================================
   BODA
========================================== */

#main-content.book-mode
.book-page.wedding-milestone {

    transform:
        perspective(1400px)
        rotateY(-10deg)
        translateX(55px)
        scale(.985);
}


#main-content.book-mode
.book-page.wedding-milestone.book-active {

    transform:
        perspective(1400px)
        rotateY(0deg)
        translateX(0)
        scale(1);
}


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

@media (max-width: 700px) {

    #main-content.book-mode {
        height: 100dvh;
    }


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

        padding:
            82px
            18px
            85px;

        /*
         * Importante:
         * la página puede desplazarse
         * internamente si tiene mucho contenido.
         */

        overflow-y: auto;
    }


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

        width: 94%;

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


    .book-navigation {

        bottom: 9px;

        gap: 4px;

        padding:
            3px 5px;

        opacity: .72;
    }


    .book-nav-button {

        width: 27px;
        height: 27px;

        font-size: 14px;
    }


    .book-page-indicator {

        min-width: 42px;

        font-size: 9px;
    }


    .book-dots {

        right: 6px;

        gap: 4px;
    }


    .book-dot {

        width: 3px;
        height: 3px;
    }

}


/* ==========================================
   📖 CORRECCIÓN — CONTENIDO DEL LIBRO
   La página controla la altura, no la sección
========================================== */

#main-content.book-mode > .book-page {
    height: 100dvh;
    min-height: 0;
    padding-top: 90px;
    padding-bottom: 125px;
    box-sizing: border-box;
}

#main-content.book-mode > .book-page > .section {
    min-height: 0;
    height: auto;
    padding: 35px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    box-sizing: border-box;
}

#main-content.book-mode > .book-page > .section > .section-content {
    width: min(100%, 800px);
    margin: 0 auto;
}

#main-content.book-mode > .book-page > .section.intro-section {
    min-height: 0;
}

#main-content.book-mode > .book-page > .section:first-child {
    padding-top: 25px;
}

@media (max-width: 700px) {

    #main-content.book-mode > .book-page {
        padding-top: 72px;
        padding-bottom: 105px;
    }

    #main-content.book-mode > .book-page > .section {
        padding: 25px 16px;
    }

    #main-content.book-mode > .book-page > .section:first-child {
        padding-top: 18px;
    }
}


/* ==========================================
   📖 FIX DEFINITIVO — ÁREA SEGURA DEL LIBRO
========================================== */

#main-content.book-mode > .book-page {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100dvh;
    min-height: 0;

    padding: 0 !important;

    overflow: hidden;

    box-sizing: border-box;
}

/* Área real donde vive el contenido */

#main-content.book-mode > .book-page > .section {
    width: 100%;
    min-height: 100%;
    height: auto;

    margin: 0;
    padding:
        90px
        22px
        125px;

    overflow: visible;

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

    box-sizing: border-box;
}

/* El contenido puede crecer */

#main-content.book-mode > .book-page > .section > .section-content {
    width: min(100%, 800px);

    margin: 0 auto;

    padding: 0;

    box-sizing: border-box;
}

/* Evitar que las páginas especiales vuelvan a imponer 100vh */

#main-content.book-mode
.intro-section,
#main-content.book-mode
.timeline-section,
#main-content.book-mode
.marriage-section,
#main-content.book-mode
.final-section,
#main-content.book-mode
.celebration-section {
    min-height: 100%;
}

/* Móvil */

@media (max-width: 700px) {

    #main-content.book-mode > .book-page {
        padding: 0 !important;
    }

    #main-content.book-mode > .book-page > .section {
        min-height: 100%;
        padding:
            76px
            16px
            108px;
    }

    #main-content.book-mode > .book-page > .section > .section-content {
        width: 100%;
    }
}


/* ==========================================
   📖 LIBRO — CORRECCIÓN FINAL DE ALTURA
========================================== */

/*
 * La hoja ocupa la pantalla.
 * El contenido interno puede crecer y desplazarse.
 */

#main-content.book-mode > .book-page {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    display: block !important;

    box-sizing: border-box !important;

    -webkit-overflow-scrolling: touch;
}

/*
 * La sección YA NO intenta ocupar toda la pantalla.
 */

#main-content.book-mode > .book-page > .section {
    position: relative;

    width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;

    padding:
        95px
        22px
        130px !important;

    display: block !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}

/*
 * El contenido comienza realmente debajo
 * de la marca superior.
 */

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

    width: min(100%, 800px) !important;

    margin:
        0 auto !important;

    padding: 0 !important;

    box-sizing: border-box !important;
}

/*
 * La primera página necesita un poco más
 * de espacio porque contiene el corazón.
 */

#main-content.book-mode
> .book-page:first-child
> .section-content {

    padding-top: 5px !important;
}

/*
 * Evitamos que las secciones especiales
 * vuelvan a forzar una pantalla completa.
 */

#main-content.book-mode .intro-section,
#main-content.book-mode .timeline-section,
#main-content.book-mode .marriage-section,
#main-content.book-mode .final-section,
#main-content.book-mode .celebration-section {

    min-height: 0 !important;
    height: auto !important;
}

/*
 * En móvil dejamos todavía más espacio
 * para la navegación inferior.
 */

@media (max-width: 700px) {

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

        height: 100dvh !important;

        padding: 0 !important;
    }

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

        padding:
            78px
            16px
            115px !important;
    }
}


/*
 * La barra de navegación no debe tapar
 * el contenido de las páginas.
 */

.book-navigation {
    bottom: 12px !important;
}


/* ==========================================
   MODAL FINAL ❤️
========================================== */

.final-modal {
    position: fixed;
    inset: 0;

    z-index: 10000;

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

    padding: 24px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}

.final-modal.visible {
    opacity: 1;
    visibility: visible;
}

.final-modal-background {
    position: absolute;
    inset: 0;

    background:
        rgba(45, 20, 30, .48);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.final-modal-content {
    position: relative;
    z-index: 2;

    width: min(
        100%,
        560px
    );

    max-height: 88dvh;

    overflow-y: auto;

    padding:
        42px
        30px
        34px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #fffafa,
            #ffe9ef
        );

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

    border-radius: 30px;

    box-shadow:
        0 25px 80px
        rgba(70,25,45,.28);

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

    transition:
        transform .4s
        cubic-bezier(.22,.61,.36,1);
}

.final-modal.visible
.final-modal-content {
    transform:
        translateY(0)
        scale(1);
}

.final-modal-close {
    position: absolute;

    top: 12px;
    right: 16px;

    width: 38px;
    height: 38px;

    z-index: 10;

    border: none;
    border-radius: 50%;

    background:
        rgba(220,80,120,.1);

    color:
        var(--pink-dark);

    font-size: 27px;
    line-height: 1;

    cursor: pointer;
}

.final-modal-heart {
    margin-bottom: 16px;

    font-size: 58px;

    animation:
        heartbeat 1.6s
        infinite;
}

.final-modal-content h2 {
    margin-bottom: 22px;

    color:
        var(--pink-dark);

    font-size:
        clamp(28px, 7vw, 42px);

    line-height: 1.15;
}

.final-modal-message {
    max-width: 470px;

    margin:
        0 auto 16px;

    color:
        var(--muted);

    font-size: 17px;

    line-height: 1.7;
}

.final-modal-content
.signature {
    margin-top: 24px;

    color:
        var(--pink-dark);

    font-family:
        Georgia,
        serif;

    font-size: 20px;
    font-weight: bold;
}

@media (max-width: 700px) {

    .final-modal {
        padding: 16px;
    }

    .final-modal-content {
        padding:
            40px
            22px
            28px;

        border-radius: 25px;

        max-height: 90dvh;
    }

    .final-modal-heart {
        font-size: 48px;
    }

    .final-modal-message {
        font-size: 15px;
        line-height: 1.6;
    }

}


/* =========================================================
   🗡️ MANGA ROMÁNTICO — JEAN & LARIMAR
   Inspiración: manga japonés / shonen romántico
   ========================================================= */

:root {
    --manga-paper: #f7f4ed;
    --manga-paper-dark: #e8e3d8;
    --manga-ink: #171717;
    --manga-gray: #5f5b56;
    --manga-red: #9d2435;
    --manga-red-dark: #711827;
    --manga-white: #fffdf8;
}

/* =========================================================
   📖 FONDO DEL TOMO
   ========================================================= */

#main-content.book-mode {
    background:
        radial-gradient(
            ellipse at center,
            #d8d3c9 0%,
            #c4beb4 70%,
            #aaa39a 100%
        );

    color: var(--manga-ink);
}

/* =========================================================
   📄 PÁGINAS
   ========================================================= */

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

    background:
        /* textura tipo papel */
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,.018) 0px,
            rgba(0,0,0,.018) 1px,
            transparent 1px,
            transparent 4px
        ),
        linear-gradient(
            90deg,
            rgba(0,0,0,.045),
            transparent 4%,
            transparent 96%,
            rgba(0,0,0,.025)
        ),
        var(--manga-paper);

    color: var(--manga-ink);

    border-radius: 2px;

    box-shadow:
        0 8px 12px rgba(0,0,0,.10),
        0 25px 65px rgba(0,0,0,.22),
        inset 0 0 35px rgba(0,0,0,.035);
}

/* =========================================================
   🖋️ TINTA MANGA
   ========================================================= */

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

    color: var(--manga-red);

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

    font-size: 12px;

    letter-spacing: 3px;

    font-weight: 900;
}

#main-content.book-mode h1,
#main-content.book-mode h2,
#main-content.book-mode h3 {

    color: var(--manga-ink);

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

    font-weight: 900;

    letter-spacing: -.5px;
}

/* =========================================================
   🖤 EFECTO DE VIÑETA
   ========================================================= */

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

    max-width: 850px;

    padding:
        30px
        24px;

    position: relative;
}

/* Marco manga */

/* =========================================================
   🖤 MARCO MANGA — DECORACIÓN SUTIL
   ========================================================= */

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

    content: "";

    position: absolute;

    left: 8px;
    right: 8px;
    top: 8px;
    bottom: 8px;

    border:
        1px solid
        rgba(20,20,20,.18);

    pointer-events: none;

    z-index: 0;
}

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

    content: none;

}

#main-content.book-mode
.section-content > * {

    position: relative;

    z-index: 1;

}

/* =========================================================
   🗯️ TEXTO COMO NARRACIÓN DE MANGA
   ========================================================= */

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

    color: #302e2b;

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

    line-height: 1.75;
}

/* =========================================================
   ❤️ ROJO DRAMÁTICO
   ========================================================= */

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

    content: "◆ ";

    color: var(--manga-red);
}

/* =========================================================
   📸 FOTOS COMO VIÑETAS
   ========================================================= */

#main-content.book-mode
.gallery {

    display: grid;

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

    gap: 14px;

    padding: 12px;
}

#main-content.book-mode
.gallery-card {

    border:
        3px solid
        var(--manga-ink);

    border-radius: 0;

    background:
        var(--manga-white);

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

    transform:
        rotate(-.5deg);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

#main-content.book-mode
.gallery-card:nth-child(even) {

    transform:
        rotate(.7deg);
}

#main-content.book-mode
.gallery-card:hover {

    transform:
        translateY(-4px)
        rotate(0deg);

    box-shadow:
        8px 8px 0 rgba(0,0,0,.85);
}

#main-content.book-mode
.gallery-card img {

    border-radius: 0;

    filter:
        grayscale(.85)
        contrast(1.08);

    height: 250px;
}

#main-content.book-mode
.gallery-card p {

    color: var(--manga-ink);

    font-family:
        Georgia,
        serif;

    font-size: 14px;

    border-top:
        2px solid
        var(--manga-ink);
}

/* =========================================================
   🖤 LISTAS COMO PANELES
   ========================================================= */

#main-content.book-mode
.love-item,
#main-content.book-mode
.bucket-item {

    border:
        2px solid
        var(--manga-ink);

    border-radius: 0;

    background:
        rgba(255,253,248,.85);

    color: var(--manga-ink);

    box-shadow:
        4px 4px 0 rgba(0,0,0,.75);

    font-family:
        Georgia,
        serif;

    position: relative;
}

/* =========================================================
   🎟️ VALES COMO CUPONES DE MANGA
   ========================================================= */

#main-content.book-mode

/* =========================================================
   💍 BODA — CAPÍTULO ESPECIAL
   ========================================================= */

#main-content.book-mode
.wedding-milestone {

    background:
        radial-gradient(
            circle at center,
            #fffdf8,
            #eee9df
        );
}

#main-content.book-mode
.wedding-milestone h2 {

    color:
        var(--manga-red);
}

/* =========================================================
   ❤️ CORAZÓN PRINCIPAL
   ========================================================= */

#main-content.book-mode
.big-heart {

    filter:
        grayscale(.15)
        contrast(1.2);

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

/* =========================================================
   📖 MARCA SUPERIOR
   ========================================================= */

#main-content.book-mode
.book-brand {

    color:
        rgba(20,20,20,.55) !important;

    font-family:
        Georgia,
        serif;

    font-weight: bold;

    letter-spacing: 3px !important;
}

/* =========================================================
   ⬅️ NAVEGACIÓN
   ========================================================= */

#main-content.book-mode
~ .book-navigation {

    background:
        rgba(247,244,237,.94);

    border:
        2px solid
        var(--manga-ink);

    border-radius: 3px;

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

.book-nav-button {

    background:
        var(--manga-ink) !important;

    color:
        var(--manga-white) !important;

    border-radius: 0 !important;
}

.book-page-indicator {

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

    font-family:
        Georgia,
        serif;

    font-weight: bold;
}

/* =========================================================
   🖤 PUNTOS LATERALES
   ========================================================= */

.book-dot {

    background:
        rgba(0,0,0,.25) !important;

    border-radius: 0 !important;

    transform:
        rotate(45deg);
}

.book-dot.active {

    background:
        var(--manga-red) !important;

    transform:
        rotate(45deg)
        scale(1.5);
}

/* =========================================================
   🌸 INTRO — PRIMER CAPÍTULO
   ========================================================= */

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

    background:
        radial-gradient(
            circle at center,
            #fffdf8,
            #e8e3d8
        );
}

#main-content.book-mode
#intro-title {

    color:
        var(--manga-red);

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

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

/* =========================================================
   🗡️ LÍNEAS DE ACCIÓN
   ========================================================= */

#main-content.book-mode
.timeline-item {

    position: relative;
}

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

    content: "";

    position: absolute;

    width: 70px;
    height: 2px;

    background:
        var(--manga-ink);

    opacity: .25;

    transform:
        rotate(-8deg);

    right: -35px;
    top: 25%;
}

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

@media (max-width: 700px) {

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

        padding:
            24px
            16px;
    }

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

        inset: 3px;
    }

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

        inset: 8px;
    }

    #main-content.book-mode
    .gallery {

        grid-template-columns:
            1fr;

        padding: 8px;
    }

    #main-content.book-mode
    .gallery-card img {

        height: 260px;
    }

}


/* =========================================================
   📕 PORTADA — TOMO MANGA
   JEAN × LARIMAR
   ========================================================= */

#cover-screen {
    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(255,255,255,.96) 0%,
            rgba(244,239,230,.98) 45%,
            rgba(210,203,192,1) 100%
        );

    color: #171717;
}

/* Trama manga de fondo */

#cover-screen::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,.075) 1px,
            transparent 1.5px
        );

    background-size: 7px 7px;

    opacity: .28;

    pointer-events: none;
}

/* Línea diagonal dramática */

#cover-screen::after {
    content: "";

    position: absolute;

    width: 160%;
    height: 35%;

    left: -30%;
    bottom: -10%;

    background:
        repeating-linear-gradient(
            -12deg,
            transparent 0px,
            transparent 8px,
            rgba(0,0,0,.035) 9px,
            transparent 10px
        );

    transform: rotate(-3deg);

    pointer-events: none;
}

/* =========================================================
   📖 CUBIERTA
   ========================================================= */

.cover-content {

    width: min(90%, 480px);

    min-height: min(720px, 86dvh);

    padding:
        55px
        32px
        42px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    text-align: center;

    position: relative;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.045),
            transparent 5%,
            transparent 95%,
            rgba(0,0,0,.04)
        ),
        #f8f5ed;

    border:
        3px solid #171717;

    border-radius: 2px;

    box-shadow:
        9px 9px 0 rgba(0,0,0,.82),
        18px 18px 35px rgba(0,0,0,.18);

    overflow: hidden;

    z-index: 2;
}

/* Marco interior */

.cover-content::before {

    content: "";

    position: absolute;

    inset: 13px;

    border:
        1px solid
        rgba(0,0,0,.65);

    pointer-events: none;
}

/* Segundo marco */

.cover-content::after {

    content: "";

    position: absolute;

    inset: 19px;

    border:
        1px solid
        rgba(0,0,0,.16);

    pointer-events: none;
}

/* =========================================================
   🗡️ PEQUEÑO ENCABEZADO
   ========================================================= */

#cover-subtitle {

    position: relative;

    z-index: 3;

    margin: 0;

    color: #171717;

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

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 4px;

    text-transform: uppercase;
}

/* =========================================================
   ❤️ TÍTULO PRINCIPAL
   ========================================================= */

#cover-title {

    position: relative;

    z-index: 3;

    margin:
        18px 0 0;

    color:
        #171717;

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

    font-size:
        clamp(42px, 13vw, 70px);

    line-height: .95;

    font-weight: 900;

    letter-spacing:
        -2px;

    text-transform:
        uppercase;

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

/* =========================================================
   ❤️ EMBLEMA
   ========================================================= */

.cover-icon {

    position: relative;

    z-index: 3;

    width: 76px;
    height: 76px;

    margin:
        0 auto 10px;

    display: flex;

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

    background:
        #171717;

    color:
        #f8f5ed;

    border-radius: 50%;

    font-size: 34px;

    border:
        3px solid #171717;

    box-shadow:
        4px 4px 0 #9d2435;

    animation:
        mangaHeartbeat 2s infinite;
}

@keyframes mangaHeartbeat {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.07);
    }
}

/* =========================================================
   ✒️ TEXTO DE PORTADA
   ========================================================= */

.cover-content .cover-subtitle-text {

    position: relative;

    z-index: 3;

    color:
        #5f5b56;

    font-family:
        Georgia,
        serif;

    font-style:
        italic;

    font-size:
        16px;

    line-height:
        1.6;
}

/* =========================================================
   ➡️ BOTÓN DESLIZA
   ========================================================= */

#open-button {

    position: relative;

    z-index: 5;

    align-self:
        center;

    min-width:
        190px;

    padding:
        13px 24px;

    border:
        2px solid #171717;

    border-radius:
        0;

    background:
        #171717;

    color:
        #f8f5ed;

    font-family:
        Georgia,
        serif;

    font-size:
        15px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    box-shadow:
        5px 5px 0 #9d2435;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

#open-button:hover {

    transform:
        translate(-2px, -2px);

    box-shadow:
        7px 7px 0 #9d2435;
}

#open-button:active {

    transform:
        translate(3px, 3px);

    box-shadow:
        2px 2px 0 #9d2435;
}

/* =========================================================
   📑 NÚMERO DEL TOMO
   ========================================================= */

.cover-content .volume-number {

    position: absolute;

    right: 28px;
    bottom: 20px;

    z-index: 4;

    color:
        #171717;

    font-family:
        Georgia,
        serif;

    font-size:
        10px;

    font-weight:
        bold;

    letter-spacing:
        2px;
}

/* =========================================================
   ❤️ DETALLE ROJO
   ========================================================= */

.cover-content .manga-red-line {

    position: absolute;

    left: 35px;
    right: 35px;

    bottom: 70px;

    height: 3px;

    background:
        #9d2435;

    z-index: 3;
}

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

@media (max-width: 700px) {

    .cover-content {

        width: 90%;

        min-height: 82dvh;

        padding:
            45px
            24px
            38px;

        box-shadow:
            6px 6px 0 rgba(0,0,0,.82),
            12px 15px 28px rgba(0,0,0,.18);
    }

    .cover-content::before {
        inset: 10px;
    }

    .cover-content::after {
        inset: 15px;
    }

    #cover-title {

        font-size:
            clamp(40px, 14vw, 62px);
    }

    .cover-icon {

        width: 68px;
        height: 68px;

        font-size: 30px;
    }

    #open-button {

        min-width: 175px;

        padding:
            12px 20px;

        font-size: 14px;
    }
}

/* =========================================================
   🖤 PORTADA AL ABRIR
   ========================================================= */

#cover-screen.opened {

    transform:
        perspective(1200px)
        rotateY(-8deg)
        translateX(-25px)
        scale(1.04);

    transform-origin:
        left center;

    opacity: 0;
}


/* =========================================================
   🖤 MANGA — CAPÍTULO 01: NUESTRA HISTORIA
   ========================================================= */

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

    background:
        radial-gradient(
            circle at center,
            #fffdf8,
            #e9e4da
        );
}

/* Encabezado del capítulo */

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

    content:
        "第 01 話";

    position: absolute;

    top: -34px;
    left: 50%;

    transform:
        translateX(-50%);

    padding:
        5px 16px;

    background:
        #171717;

    color:
        #fffdf8;

    font-family:
        Georgia,
        serif;

    font-size:
        12px;

    font-weight:
        bold;

    letter-spacing:
        4px;

    border:
        2px solid #171717;

    z-index:
        5;
}

/* Quitamos el marco genérico de esta página */

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

    max-width:
        900px;

    padding:
        48px 30px 35px;
}

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

    display:
        none;
}

/* Título */

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

    display:
        inline-block;

    margin:
        12px auto 38px;

    padding:
        8px 18px;

    border:
        3px solid #171717;

    background:
        #fffdf8;

    box-shadow:
        5px 5px 0 #171717;

    transform:
        rotate(-1deg);

    font-size:
        clamp(26px, 6vw, 42px);

    text-transform:
        uppercase;
}

/* =========================================================
   📚 CONTENEDOR DE VIÑETAS
   ========================================================= */

#main-content.book-mode
.timeline {

    display:
        grid;

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

    gap:
        15px;

    width:
        100%;

    margin:
        0 auto;
}

/* =========================================================
   🖼️ CADA VIÑETA
   ========================================================= */

#main-content.book-mode
.timeline-item {

    position:
        relative;

    min-height:
        210px;

    margin:
        0;

    padding:
        25px;

    background:
        #fffdf8;

    border:
        3px solid #171717;

    box-shadow:
        6px 6px 0 rgba(0,0,0,.85);

    overflow:
        hidden;

    transform:
        rotate(-.4deg);

    transition:
        transform .25s ease;
}

#main-content.book-mode
.timeline-item:nth-child(even) {

    transform:
        rotate(.5deg);
}

#main-content.book-mode
.timeline-item:hover {

    transform:
        translateY(-4px)
        rotate(0deg);

    z-index:
        3;
}

/* =========================================================
   🖤 QUITAR EL DOT ANTIGUO
   ========================================================= */

#main-content.book-mode
.timeline-dot {

    position:
        absolute;

    top:
        12px;

    right:
        14px;

    width:
        30px;

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #171717;

    color:
        #fffdf8;

    border-radius:
        50%;

    font-size:
        13px;

    z-index:
        2;
}

/* =========================================================
   📅 FECHA
   ========================================================= */

#main-content.book-mode
.timeline-date {

    display:
        inline-block;

    margin-bottom:
        14px;

    padding:
        4px 9px;

    background:
        #171717;

    color:
        #fffdf8;

    font-family:
        Georgia,
        serif;

    font-size:
        11px;

    font-weight:
        bold;

    letter-spacing:
        1px;

    transform:
        rotate(-1deg);
}

/* =========================================================
   📝 TÍTULO DE LA VIÑETA
   ========================================================= */

#main-content.book-mode
.timeline-item h3 {

    margin:
        0 35px 12px 0;

    color:
        #171717;

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

    font-size:
        clamp(18px, 3vw, 25px);

    font-weight:
        900;

    line-height:
        1.15;
}

/* =========================================================
   💬 NARRACIÓN
   ========================================================= */

#main-content.book-mode
.timeline-item p {

    margin:
        0;

    color:
        #383531;

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

    font-size:
        14px;

    line-height:
        1.65;

    text-align:
        left;
}

/* =========================================================
   ⚡ LÍNEAS DE VELOCIDAD
   ========================================================= */

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

    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    right:
        -80px;

    bottom:
        -80px;

    background:
        repeating-linear-gradient(
            135deg,
            transparent 0px,
            transparent 7px,
            rgba(0,0,0,.08) 8px,
            transparent 9px
        );

    transform:
        rotate(-10deg);

    pointer-events:
        none;
}

/* =========================================================
   ❤️ VIÑETA DE LA BODA — MÁS IMPORTANTE
   ========================================================= */

#main-content.book-mode
.timeline-item:nth-child(4) {

    grid-column:
        1 / -1;

    min-height:
        245px;

    background:
        radial-gradient(
            circle at center,
            #fffdf8 0%,
            #eee8dc 100%
        );

    border-color:
        #711827;

    box-shadow:
        7px 7px 0 #711827;

    transform:
        rotate(0deg);
}

#main-content.book-mode
.timeline-item:nth-child(4)
.timeline-date {

    background:
        #9d2435;
}

#main-content.book-mode
.timeline-item:nth-child(4)
h3 {

    color:
        #9d2435;

    font-size:
        clamp(22px, 5vw, 34px);
}

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

@media (max-width: 700px) {

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

        padding:
            48px 18px 30px;
    }

    #main-content.book-mode
    .timeline {

        grid-template-columns:
            1fr;

        gap:
            14px;
    }

    #main-content.book-mode
    .timeline-item {

        min-height:
            190px;

        padding:
            22px 20px;
    }

    #main-content.book-mode
    .timeline-item:nth-child(4) {

        grid-column:
            auto;

        min-height:
            215px;
    }

}


/* ==========================================
   🔧 CORRECCIÓN — PÁGINA 2 SIN LÍNEA
========================================== */

#main-content.book-mode > .timeline-section::before,
#main-content.book-mode > .timeline-section::after,
#main-content.book-mode > .timeline-section .section-content::after {
    display: none !important;
}

/* Evitar líneas decorativas atravesando la página */
#main-content.book-mode > .timeline-section .timeline::before,
#main-content.book-mode > .timeline-section .timeline::after {
    display: none !important;
}


/* ==========================================
   📖 TIMELINE MANGA — SIN LÍNEA CENTRAL
========================================== */

#main-content.book-mode > .timeline-section .timeline::before {
    display: none !important;
}

#main-content.book-mode > .timeline-section .timeline {
    padding-left: 0 !important;
}

#main-content.book-mode > .timeline-section .timeline-item {
    margin-left: 0 !important;
}


/* ==========================================
   🔧 PÁGINA 2 — ELIMINAR LÍNEAS DECORATIVAS
========================================== */

#main-content.book-mode > .timeline-section *,
#main-content.book-mode > .timeline-section *::before,
#main-content.book-mode > .timeline-section *::after {
    --debug-line: none;
}

#main-content.book-mode > .timeline-section::before,
#main-content.book-mode > .timeline-section::after,
#main-content.book-mode > .timeline-section .section-content::before,
#main-content.book-mode > .timeline-section .section-content::after,
#main-content.book-mode > .timeline-section .timeline::before,
#main-content.book-mode > .timeline-section .timeline::after,
#main-content.book-mode > .timeline-section .timeline-item::before,
#main-content.book-mode > .timeline-section .timeline-item::after {
    content: none !important;
    display: none !important;
}

/* ==========================================
   📖 PÁGINA 2 — RESTAURAR ENCABEZADO MANGA
========================================== */

#main-content.book-mode > .timeline-section .section-content::before {
    content: "第 01 話" !important;
    display: block !important;

    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);

    padding: 5px 16px;

    background: #171717;
    color: #fffdf8;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 4px;

    border: 2px solid #171717;

    z-index: 5;
}


/* ==========================================
   🔧 PÁGINA 2 — LIMPIEZA DEFINITIVA
========================================== */

#main-content.book-mode > .timeline-section .section-content::before,
#main-content.book-mode > .timeline-section .section-content::after,
#main-content.book-mode > .timeline-section .timeline::before,
#main-content.book-mode > .timeline-section .timeline::after,
#main-content.book-mode > .timeline-section .timeline-item::before,
#main-content.book-mode > .timeline-section .timeline-item::after {
    content: none !important;
    display: none !important;
}


/* ==========================================
   📖 ENCABEZADO MANGA — PÁGINA 2
========================================== */

#main-content.book-mode .manga-chapter-label {
    position: absolute;

    top: -34px;
    left: 50%;

    transform: translateX(-50%);

    padding: 5px 16px;

    background: #171717;
    color: #fffdf8;

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

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 4px;

    border: 2px solid #171717;

    z-index: 10;

    white-space: nowrap;
}

@media (max-width: 700px) {
    #main-content.book-mode .manga-chapter-label {
        top: -30px;
        padding: 4px 12px;
        font-size: 11px;
        letter-spacing: 3px;
    }
}


/* ==========================================
   📖 CAPÍTULOS MANGA
========================================== */

#main-content.book-mode .manga-chapter-label {
    position: absolute;

    top: -34px;
    left: 50%;

    transform: translateX(-50%);

    padding: 5px 16px;

    background: #171717;
    color: #fffdf8;

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

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 4px;

    border: 2px solid #171717;

    z-index: 10;

    white-space: nowrap;

    box-shadow:
        3px 3px 0 rgba(157,36,53,.75);
}

/* Pequeña variación para que no parezcan copias */

#main-content.book-mode > .book-page:nth-child(3n)
.manga-chapter-label {
    transform:
        translateX(-50%)
        rotate(-1deg);
}

#main-content.book-mode > .book-page:nth-child(4n)
.manga-chapter-label {
    transform:
        translateX(-50%)
        rotate(1deg);
}

@media (max-width: 700px) {

    #main-content.book-mode .manga-chapter-label {
        top: -30px;

        padding:
            4px 12px;

        font-size: 11px;

        letter-spacing: 3px;
    }
}


/* =========================================================
   🗡️ VIÑETAS MANGA — HISTORIA Y FOTOS
   ========================================================= */

/* ---------- HISTORIA ---------- */

#main-content.book-mode .timeline {
    display: grid;
    gap: 22px;
    padding: 10px 4px 20px !important;
}

#main-content.book-mode .timeline-item {
    position: relative;

    background: var(--manga-white);

    border: 3px solid var(--manga-ink);
    border-radius: 0;

    padding: 22px;

    box-shadow:
        7px 7px 0 var(--manga-ink);

    transform: rotate(-0.5deg);

    overflow: visible;
}

#main-content.book-mode .timeline-item:nth-child(even) {
    transform: rotate(0.6deg);
}

#main-content.book-mode .timeline-item:nth-child(3n) {
    transform: rotate(-0.25deg);
}

/* Elimina cualquier decoración que pueda atravesar las tarjetas */

#main-content.book-mode .timeline-item::before,
#main-content.book-mode .timeline-item::after {
    content: none !important;
    display: none !important;
}

/* Fecha como etiqueta de manga */

#main-content.book-mode .timeline-date {
    display: inline-block;

    margin-bottom: 12px;
    padding: 5px 12px;

    background: var(--manga-ink);
    color: var(--manga-white);

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

    font-size: 12px;
    font-weight: 900;

    letter-spacing: 2px;

    transform: rotate(-1deg);
}

/* Títulos */

#main-content.book-mode .timeline-item h3 {
    color: var(--manga-red);

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

    font-size: 22px;
    font-weight: 900;

    margin-bottom: 10px;
}

/* Texto */

#main-content.book-mode .timeline-item p {
    color: var(--manga-ink);

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

    line-height: 1.7;
}


/* ---------- GALERÍA ---------- */

#main-content.book-mode .gallery {
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;

    padding: 14px;
}

#main-content.book-mode .gallery-card {
    position: relative;

    border:
        3px solid
        var(--manga-ink);

    border-radius: 0;

    background:
        var(--manga-white);

    box-shadow:
        6px 6px 0 var(--manga-ink);

    transform: rotate(-0.7deg);

    overflow: hidden;
}

#main-content.book-mode .gallery-card:nth-child(even) {
    transform: rotate(0.8deg);
}

#main-content.book-mode .gallery-card img {
    height: 230px;

    border-radius: 0;

    filter:
        grayscale(.65)
        contrast(1.08);

    object-fit: cover;
}

#main-content.book-mode .gallery-card p {
    margin: 0;

    padding: 12px 14px;

    border-top:
        3px solid
        var(--manga-ink);

    color: var(--manga-ink);

    background: var(--manga-white);

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

    font-size: 13px;
    line-height: 1.5;
}


/* ---------- CARTA ---------- */

#main-content.book-mode .letter-section .section-content {
    background:
        var(--manga-white);

    border:
        3px solid
        var(--manga-ink);

    padding:
        42px
        32px;

    box-shadow:
        8px 8px 0 var(--manga-ink);
}

#main-content.book-mode .letter-section .section-content::before,
#main-content.book-mode .letter-section .section-content::after {
    content: none !important;
    display: none !important;
}

#main-content.book-mode #letter-title {
    color: var(--manga-red);

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

    font-weight: 900;
}

#main-content.book-mode #letter-text {
    color: var(--manga-ink);

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

    line-height: 1.9;
}


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

@media (max-width: 700px) {

    #main-content.book-mode .timeline-item {
        padding: 18px;
        box-shadow: 5px 5px 0 var(--manga-ink);
    }

    #main-content.book-mode .gallery {
        grid-template-columns: 1fr;
        padding: 8px;
    }

    #main-content.book-mode .gallery-card img {
        height: 240px;
    }

    #main-content.book-mode .letter-section .section-content {
        padding: 32px 20px;
        box-shadow: 5px 5px 0 var(--manga-ink);
    }
}


/* =========================================================
   📖 MANGA — PÁGINA 3: LA CARTA
   ========================================================= */

#main-content.book-mode .letter-section .section-content {
    position: relative;
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(0,0,0,.035) 0 1px,
            transparent 1.5px
        ),
        var(--manga-white);

    background-size: 6px 6px;

    border: 4px solid var(--manga-ink);

    box-shadow:
        9px 9px 0 var(--manga-ink);

    padding: 52px 38px 46px;

    transform: rotate(-0.35deg);
}

/* Pequeña etiqueta de capítulo */
#main-content.book-mode .letter-section
.manga-chapter-label {
    display: inline-block;

    background: var(--manga-ink);
    color: var(--manga-white);

    padding: 5px 14px;

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

    font-weight: 900;
    letter-spacing: 2px;

    margin-bottom: 18px;

    box-shadow:
        4px 4px 0 var(--manga-red);
}

/* Título */
#main-content.book-mode .letter-section h2 {
    color: var(--manga-ink);

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

    font-weight: 900;

    font-size: clamp(28px, 5vw, 42px);

    line-height: 1.15;

    margin-bottom: 28px;
}

/* Etiqueta roja */
#main-content.book-mode .letter-section
.section-label {
    color: var(--manga-red);

    font-weight: 900;

    letter-spacing: 3px;
}

/* Botón como viñeta manga */
#main-content.book-mode .letter-section
#open-letter {
    border:
        3px solid
        var(--manga-ink);

    border-radius: 0;

    background: var(--manga-ink);

    color: var(--manga-white);

    box-shadow:
        6px 6px 0 var(--manga-red);

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

    font-weight: 900;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

#main-content.book-mode .letter-section
#open-letter:hover {
    transform:
        translate(3px, 3px);

    box-shadow:
        3px 3px 0 var(--manga-red);
}

/* Móvil */
@media (max-width: 700px) {

    #main-content.book-mode .letter-section
    .section-content {
        padding:
            42px
            22px
            38px;

        box-shadow:
            6px 6px 0 var(--manga-ink);
    }

    #main-content.book-mode .letter-section
    h2 {
        font-size: 30px;
    }
}


/* =========================================================
   🖼️ MANGA — PÁGINA 4: NUESTROS RECUERDOS
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(4) .section-content {
    position: relative;

    padding:
        42px
        30px
        48px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,.045) 0 1px,
            transparent 1.5px
        );

    background-size: 7px 7px;

    border:
        4px solid
        var(--manga-ink);

    box-shadow:
        8px 8px 0 var(--manga-ink);
}

/* Título de capítulo */

#main-content.book-mode > .book-page:nth-of-type(4)
.manga-chapter-label {
    display: inline-block;

    padding:
        5px
        15px;

    margin-bottom: 16px;

    background:
        var(--manga-ink);

    color:
        var(--manga-white);

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

    font-weight: 900;

    letter-spacing: 3px;

    box-shadow:
        4px 4px 0
        var(--manga-red);

    transform:
        rotate(-1deg);
}

/* Título */

#main-content.book-mode > .book-page:nth-of-type(4)
h2 {

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

    font-weight: 900;

    color:
        var(--manga-ink);

    line-height: 1.15;

    margin-bottom: 28px;

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

/* =========================================================
   📸 VIÑETAS
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(4)
.gallery {

    display: grid;

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

    gap: 22px;

    padding:
        14px 8px;
}

/* Cada recuerdo */

#main-content.book-mode > .book-page:nth-of-type(4)
.gallery-card {

    position: relative;

    background:
        var(--manga-white);

    border:
        4px solid
        var(--manga-ink);

    border-radius: 0;

    box-shadow:
        7px 7px 0
        var(--manga-ink);

    overflow: hidden;

    transform:
        rotate(-1deg);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

/* Viñetas pares */

#main-content.book-mode > .book-page:nth-of-type(4)
.gallery-card:nth-child(even) {

    transform:
        rotate(1.2deg);
}

/* Hover */

#main-content.book-mode > .book-page:nth-of-type(4)
.gallery-card:hover {

    transform:
        translateY(-4px)
        rotate(0deg);

    box-shadow:
        9px 9px 0
        var(--manga-red);
}

/* Fotografías */

#main-content.book-mode > .book-page:nth-of-type(4)
.gallery-card img {

    width: 100%;

    height: 250px;

    object-fit: cover;

    border-radius: 0;

    filter:
        grayscale(.9)
        contrast(1.12)
        brightness(.98);

    display: block;
}

/* Caption */

#main-content.book-mode > .book-page:nth-of-type(4)
.gallery-card p {

    margin: 0;

    padding:
        13px
        14px;

    background:
        var(--manga-white);

    border-top:
        4px solid
        var(--manga-ink);

    color:
        var(--manga-ink);

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

    font-weight: 700;

    line-height: 1.45;

    text-align: center;
}

/* =========================================================
   💥 PEQUEÑA ONOMATOPEYA DECORATIVA
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(4)
.section-content::after {

    content:
        "キラッ";

    position:
        absolute;

    right:
        18px;

    bottom:
        14px;

    color:
        var(--manga-red);

    font-family:
        Georgia,
        serif;

    font-size:
        20px;

    font-weight:
        900;

    letter-spacing:
        3px;

    transform:
        rotate(-8deg);

    pointer-events:
        none;
}

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

@media (max-width: 700px) {

    #main-content.book-mode > .book-page:nth-of-type(4)
    .section-content {

        padding:
            36px
            18px
            42px;

        box-shadow:
            6px 6px 0
            var(--manga-ink);
    }

    #main-content.book-mode > .book-page:nth-of-type(4)
    .gallery {

        grid-template-columns:
            1fr;

        gap:
            20px;
    }

    #main-content.book-mode > .book-page:nth-of-type(4)
    .gallery-card img {

        height:
            270px;
    }
}


/* =========================================================
   ❤️ MANGA — PÁGINA 5: PEQUEÑAS COSAS QUE AMO DE TI
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(5) .section-content {

    position: relative;

    padding:
        42px
        30px
        50px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,.045) 0 1px,
            transparent 1.5px
        );

    background-size:
        7px 7px;

    border:
        4px solid
        var(--manga-ink);

    box-shadow:
        8px 8px 0
        var(--manga-ink);
}

/* ---------- CAPÍTULO ---------- */

#main-content.book-mode > .book-page:nth-of-type(5)
.manga-chapter-label {

    display: inline-block;

    padding:
        5px
        15px;

    margin-bottom:
        16px;

    background:
        var(--manga-ink);

    color:
        var(--manga-white);

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

    font-weight:
        900;

    letter-spacing:
        3px;

    box-shadow:
        4px 4px 0
        var(--manga-red);

    transform:
        rotate(1deg);
}

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

#main-content.book-mode > .book-page:nth-of-type(5)
h2 {

    color:
        var(--manga-ink);

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

    font-weight:
        900;

    line-height:
        1.15;

    margin-bottom:
        30px;
}

/* =========================================================
   🖤 PANELES
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(5)
.love-list {

    display:
        grid;

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

    gap:
        18px;

    padding:
        8px;
}

/* Cada cosa que amo */

#main-content.book-mode > .book-page:nth-of-type(5)
.love-item {

    position:
        relative;

    min-height:
        95px;

    display:
        flex;

    align-items:
        center;

    padding:
        20px
        18px
        20px
        48px;

    background:
        var(--manga-white);

    border:
        3px solid
        var(--manga-ink);

    border-radius:
        0;

    box-shadow:
        5px 5px 0
        var(--manga-ink);

    color:
        var(--manga-ink);

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

    font-weight:
        700;

    line-height:
        1.45;

    transform:
        rotate(-.8deg);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

/* Paneles alternos */

#main-content.book-mode > .book-page:nth-of-type(5)
.love-item:nth-child(even) {

    transform:
        rotate(.9deg);
}

#main-content.book-mode > .book-page:nth-of-type(5)
.love-item:hover {

    transform:
        translateY(-3px)
        rotate(0deg);

    box-shadow:
        7px 7px 0
        var(--manga-red);
}

/* =========================================================
   🔢 NUMERACIÓN DE VIÑETAS
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(5)
.love-item::before {

    content:
        counter(love-panel);

    counter-increment:
        love-panel;

    position:
        absolute;

    left:
        12px;

    top:
        12px;

    width:
        27px;

    height:
        27px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        var(--manga-ink);

    color:
        var(--manga-white);

    font-family:
        Georgia,
        serif;

    font-size:
        13px;

    font-weight:
        900;

    border-radius:
        50%;
}

/* Reiniciar numeración */

#main-content.book-mode > .book-page:nth-of-type(5)
.love-list {

    counter-reset:
        love-panel;
}

/* =========================================================
   ✨ PEQUEÑO DETALLE DECORATIVO
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(5)
.section-content::after {

    content:
        "♡";

    position:
        absolute;

    right:
        20px;

    bottom:
        15px;

    color:
        var(--manga-red);

    font-size:
        34px;

    font-family:
        Georgia,
        serif;

    transform:
        rotate(-12deg);

    pointer-events:
        none;
}

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

@media (max-width: 700px) {

    #main-content.book-mode > .book-page:nth-of-type(5)
    .section-content {

        padding:
            36px
            18px
            42px;

        box-shadow:
            6px 6px 0
            var(--manga-ink);
    }

    #main-content.book-mode > .book-page:nth-of-type(5)
    .love-list {

        grid-template-columns:
            1fr;

        gap:
            16px;
    }

    #main-content.book-mode > .book-page:nth-of-type(5)
    .love-item {

        min-height:
            82px;
    }
}


/* =========================================================
   🎁 MANGA — PÁGINA 6: EL REGALO SECRETO
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(6) .section-content {

    position: relative;

    padding:
        46px
        30px
        52px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,.075) 0 1px,
            transparent 1.5px
        ),
        var(--manga-paper);

    background-size:
        6px 6px;

    border:
        4px solid
        var(--manga-ink);

    box-shadow:
        9px 9px 0
        var(--manga-ink);

    overflow: hidden;
}

/* ---------- CAPÍTULO ---------- */

#main-content.book-mode > .book-page:nth-of-type(6)
.manga-chapter-label {

    display: inline-block;

    padding:
        5px 15px;

    margin-bottom:
        18px;

    background:
        var(--manga-ink);

    color:
        var(--manga-white);

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

    font-weight:
        900;

    letter-spacing:
        3px;

    box-shadow:
        4px 4px 0
        var(--manga-red);

    transform:
        rotate(-1deg);
}

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

#main-content.book-mode > .book-page:nth-of-type(6)
h2 {

    color:
        var(--manga-ink);

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

    font-weight:
        900;

    line-height:
        1.15;

    margin-bottom:
        35px;
}

/* =========================================================
   🔍 BOTÓN — ESTILO PANEL DE MISTERIO
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(6)
#secret-button {

    position:
        relative;

    min-width:
        190px;

    padding:
        15px
        24px;

    background:
        var(--manga-ink);

    color:
        var(--manga-white);

    border:
        3px solid
        var(--manga-ink);

    border-radius:
        0;

    box-shadow:
        7px 7px 0
        var(--manga-red);

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

    font-weight:
        900;

    font-size:
        16px;

    cursor:
        pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

#main-content.book-mode > .book-page:nth-of-type(6)
#secret-button:hover {

    transform:
        translate(3px, 3px);

    box-shadow:
        4px 4px 0
        var(--manga-red);
}

/* =========================================================
   🎁 RESULTADO DEL SECRETO
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(6)
#secret-result {

    margin:
        35px auto 0;

    max-width:
        650px;

    padding:
        28px
        24px;

    background:
        var(--manga-white);

    border:
        4px solid
        var(--manga-ink);

    box-shadow:
        7px 7px 0
        var(--manga-ink);

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

    color:
        var(--manga-ink);

    line-height:
        1.7;

    position:
        relative;
}

/* Etiqueta del resultado */

#main-content.book-mode > .book-page:nth-of-type(6)
#secret-result::before {

    content:
        "SECRET";

    position:
        absolute;

    top:
        -14px;

    left:
        18px;

    padding:
        4px 12px;

    background:
        var(--manga-red);

    color:
        var(--manga-white);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        2px;

    border:
        2px solid
        var(--manga-ink);

    transform:
        rotate(-2deg);
}

/* =========================================================
   👀 EFECTO DE MISTERIO
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(6)
.section-content::after {

    content:
        "……？";

    position:
        absolute;

    right:
        18px;

    bottom:
        14px;

    color:
        var(--manga-ink);

    font-family:
        Georgia,
        serif;

    font-size:
        25px;

    font-weight:
        900;

    letter-spacing:
        3px;

    transform:
        rotate(6deg);

    pointer-events:
        none;
}

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

@media (max-width: 700px) {

    #main-content.book-mode > .book-page:nth-of-type(6)
    .section-content {

        padding:
            38px
            18px
            44px;

        box-shadow:
            6px 6px 0
            var(--manga-ink);
    }

    #main-content.book-mode > .book-page:nth-of-type(6)
    #secret-result {

        padding:
            24px
            18px;
    }
}


/* =========================================================
   💍 MANGA — PÁGINA 7: PARA TODA LA VIDA
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(7) .section-content {

    position: relative;

    padding:
        48px
        32px
        54px;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.8),
            rgba(232,227,216,.55)
        );

    border:
        4px solid
        var(--manga-ink);

    box-shadow:
        9px 9px 0
        var(--manga-ink);
}

/* ---------- CAPÍTULO ---------- */

#main-content.book-mode > .book-page:nth-of-type(7)
.manga-chapter-label {

    display: inline-block;

    padding:
        6px
        17px;

    margin-bottom:
        20px;

    background:
        var(--manga-ink);

    color:
        var(--manga-white);

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

    font-weight:
        900;

    letter-spacing:
        3px;

    box-shadow:
        4px 4px 0
        var(--manga-red);

    transform:
        rotate(.7deg);
}

/* ---------- ETIQUETA ---------- */

#main-content.book-mode > .book-page:nth-of-type(7)
.section-label {

    color:
        var(--manga-red);

    font-weight:
        900;

    letter-spacing:
        3px;
}

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

#main-content.book-mode > .book-page:nth-of-type(7)
#marriage-title {

    color:
        var(--manga-ink);

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

    font-weight:
        900;

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

    line-height:
        1.1;

    margin:
        12px 0 30px;
}

/* =========================================================
   💍 CONTENIDO DEL MATRIMONIO
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(7)
#marriage-content {

    position:
        relative;

    max-width:
        720px;

    margin:
        0 auto;

    padding:
        32px
        26px;

    background:
        var(--manga-white);

    border:
        3px solid
        var(--manga-ink);

    box-shadow:
        7px 7px 0
        var(--manga-red);

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

    color:
        var(--manga-ink);

    line-height:
        1.8;

    text-align:
        center;
}

/* Separador elegante */

#main-content.book-mode > .book-page:nth-of-type(7)
#marriage-content::before {

    content:
        "♥";

    display:
        block;

    margin-bottom:
        14px;

    color:
        var(--manga-red);

    font-size:
        26px;

    font-family:
        Georgia,
        serif;
}

/* =========================================================
   🖤 MOMENTO CENTRAL
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(7)
.marriage-milestone {

    border:
        3px solid
        var(--manga-ink);

    border-radius:
        0;

    background:
        var(--manga-white);

    box-shadow:
        5px 5px 0
        var(--manga-ink);

    color:
        var(--manga-ink);
}

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

@media (max-width: 700px) {

    #main-content.book-mode > .book-page:nth-of-type(7)
    .section-content {

        padding:
            38px
            18px
            44px;

        box-shadow:
            6px 6px 0
            var(--manga-ink);
    }

    #main-content.book-mode > .book-page:nth-of-type(7)
    #marriage-content {

        padding:
            26px
            18px;

        box-shadow:
            5px 5px 0
            var(--manga-red);
    }
}


/* =========================================================
   🌙 MANGA — PÁGINA 8: NUESTROS SUEÑOS
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(8) .section-content {

    position: relative;

    padding:
        44px
        30px
        52px;

    background:
        radial-gradient(
            circle,
            rgba(0,0,0,.04) 0 1px,
            transparent 1.5px
        ),
        linear-gradient(
            135deg,
            rgba(157,36,53,.025),
            transparent 45%,
            rgba(0,0,0,.035)
        ),
        var(--manga-paper);

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

    border:
        4px solid
        var(--manga-ink);

    box-shadow:
        9px 9px 0
        var(--manga-ink);

    overflow: hidden;
}

/* ---------- CAPÍTULO ---------- */

#main-content.book-mode > .book-page:nth-of-type(8)
.manga-chapter-label {

    display: inline-block;

    padding:
        5px
        16px;

    margin-bottom:
        18px;

    background:
        var(--manga-ink);

    color:
        var(--manga-white);

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

    font-weight:
        900;

    letter-spacing:
        3px;

    box-shadow:
        4px 4px 0
        var(--manga-red);

    transform:
        rotate(-.8deg);
}

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

#main-content.book-mode > .book-page:nth-of-type(8)
h2 {

    color:
        var(--manga-ink);

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

    font-weight:
        900;

    line-height:
        1.15;

    margin-bottom:
        30px;
}

/* =========================================================
   🌙 CAPÍTULO 08 — NUESTROS SUEÑOS
   ========================================================= */

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

    background:
        radial-gradient(
            circle at 50% 35%,
            #fffdf8 0%,
            #f3eadf 62%,
            #e5d9ca 100%
        );
}


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

#main-content.book-mode
.dreams-section #dreams-title {

    margin-bottom:
        26px;

    color:
        var(--manga-ink);

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

    font-weight:
        900;

    line-height:
        1.15;
}


/* ---------- INTRODUCCIÓN ---------- */

#main-content.book-mode
.dreams-section
.dreams-intro {

    position:
        relative;

    max-width:
        650px;

    margin:
        0 auto 32px;

    padding:
        18px
        24px
        18px
        42px;

    border-left:
        4px solid
        var(--manga-red);

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

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

    font-style:
        italic;

    line-height:
        1.6;

    text-align:
        left;
}


#main-content.book-mode
.dreams-section
.dreams-intro p {

    margin:
        0;

    color:
        rgba(20,20,20,.75);
}


#main-content.book-mode
.dreams-section
.dreams-intro-mark {

    position:
        absolute;

    left:
        12px;

    top:
        4px;

    color:
        var(--manga-red);

    font-family:
        Georgia,
        serif;

    font-size:
        38px;

    font-weight:
        900;

    line-height:
        1;
}


/* =========================================================
   ❤️ LISTA DE SUEÑOS
   ========================================================= */

#main-content.book-mode
.dreams-section
.bucket-list {

    display:
        grid;

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

    gap:
        20px;

    max-width:
        760px;

    margin:
        0 auto;

    padding:
        8px;
}


/* ---------- CADA SUEÑO ---------- */

#main-content.book-mode
.dreams-section
.bucket-item {

    position:
        relative;

    min-height:
        105px;

    display:
        flex;

    align-items:
        center;

    padding:
        22px
        20px
        22px
        58px;

    background:
        var(--manga-white);

    border:
        3px solid
        var(--manga-ink);

    border-radius:
        0;

    box-shadow:
        6px 6px 0
        var(--manga-ink);

    color:
        var(--manga-ink);

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

    font-weight:
        700;

    line-height:
        1.5;

    transform:
        rotate(.8deg);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


/* Alternar inclinación */

#main-content.book-mode
.dreams-section
.bucket-item:nth-child(even) {

    transform:
        rotate(-1deg);
}


/* Hover */

#main-content.book-mode
.dreams-section
.bucket-item:hover {

    transform:
        translateY(-4px)
        rotate(0deg);

    box-shadow:
        8px 8px 0
        var(--manga-red);
}


/* ---------- CORAZÓN ---------- */

#main-content.book-mode
.dreams-section
.bucket-item::before {

    content:
        "♡";

    position:
        absolute;

    left:
        16px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        var(--manga-red);

    font-family:
        Georgia,
        serif;

    font-size:
        30px;

    font-weight:
        900;
}


/* ---------- COMPLETADO ---------- */

#main-content.book-mode
.dreams-section
.bucket-item.completed {

    background:
        #f8e9ed;

    opacity:
        .72;

    text-decoration:
        line-through;

    transform:
        rotate(0deg);
}


#main-content.book-mode
.dreams-section
.bucket-item.completed::before {

    content:
        "♥";
}


/* =========================================================
   ✨ FRASE FINAL
   ========================================================= */

#main-content.book-mode
.dreams-section
.dreams-footer {

    max-width:
        650px;

    margin:
        34px auto 0;

    color:
        rgba(20,20,20,.68);

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

    font-style:
        italic;

    font-size:
        15px;

    line-height:
        1.7;

    text-align:
        center;
}


/* ---------- DETALLE JAPONÉS ---------- */

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

    content:
        "いつか…";

    position:
        absolute;

    right:
        18px;

    bottom:
        13px;

    color:
        var(--manga-red);

    font-family:
        Georgia,
        serif;

    font-size:
        18px;

    font-weight:
        900;

    letter-spacing:
        3px;

    transform:
        rotate(-7deg);

    pointer-events:
        none;
}


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

@media (max-width: 700px) {

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

        padding:
            36px
            18px
            44px;
    }


    #main-content.book-mode
    .dreams-section
    .dreams-intro {

        padding:
            16px
            18px
            16px
            38px;

        margin-bottom:
            26px;
    }


    #main-content.book-mode
    .dreams-section
    .bucket-list {

        grid-template-columns:
            1fr;

        gap:
            16px;

        padding:
            4px;
    }


    #main-content.book-mode
    .dreams-section
    .bucket-item {

        min-height:
            88px;

        padding:
            20px
            16px
            20px
            54px;
    }


    #main-content.book-mode
    .dreams-section
    .dreams-footer {

        margin-top:
            28px;

        padding:
            0 8px;
    }

}

/* =========================================================
   📖 MANGA — COMPOSICIÓN DE CAPÍTULOS
   ========================================================= */

#main-content.book-mode > .book-page {
    position: relative;
    overflow: hidden;
}

/* Trama de semitono muy sutil */
#main-content.book-mode > .book-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    background-image:
        radial-gradient(
            circle,
            rgba(0,0,0,.045) 0 1px,
            transparent 1.2px
        );

    background-size: 9px 9px;
    opacity: .35;
}

/* Todo el contenido queda por encima de la trama */
#main-content.book-mode > .book-page > * {
    position: relative;
    z-index: 1;
}

/* Etiqueta de capítulo */
#main-content.book-mode .manga-chapter-label {
    display: inline-block;

    margin-bottom: 18px;
    padding: 5px 14px;

    background: var(--manga-ink);
    color: var(--manga-white);

    border: 2px solid var(--manga-ink);

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

    font-size: 12px;
    font-weight: 900;
    letter-spacing: 3px;

    box-shadow:
        4px 4px 0 var(--manga-red);

    transform: rotate(-1deg);
}

/* Separador de tinta */
#main-content.book-mode .manga-chapter-label::after {
    content: "";

    display: block;

    width: 100%;
    height: 2px;

    margin-top: 5px;

    background: var(--manga-white);

    opacity: .8;
}

/* Títulos con presencia de portada de capítulo */
#main-content.book-mode > .book-page h2 {
    position: relative;

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

/* Línea decorativa debajo de títulos */
#main-content.book-mode > .book-page h2::after {
    content: "";

    display: block;

    width: 90px;
    height: 4px;

    margin-top: 12px;

    background:
        linear-gradient(
            90deg,
            var(--manga-red),
            var(--manga-ink)
        );

    transform: skewX(-25deg);
}

/* Variación visual entre capítulos */
#main-content.book-mode > .book-page:nth-child(odd)
.manga-chapter-label {
    transform: rotate(1deg);
}

#main-content.book-mode > .book-page:nth-child(3n)
.manga-chapter-label {
    box-shadow:
        -4px 4px 0 var(--manga-red);
}

/* Pequeñas líneas de acción decorativas */
#main-content.book-mode > .book-page:nth-child(4n)
.section-content::after {
    content: "";

    position: absolute;

    right: 18px;
    bottom: 18px;

    width: 75px;
    height: 18px;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            -15deg,
            transparent 0 7px,
            rgba(0,0,0,.12) 8px,
            transparent 9px
        );

    opacity: .45;
}

/* Mantener la página 2 limpia:
   nunca introducir líneas sobre la historia */
#main-content.book-mode > .timeline-section::before,
#main-content.book-mode > .timeline-section::after,
#main-content.book-mode > .timeline-section .section-content::after,
#main-content.book-mode > .timeline-section .timeline::before,
#main-content.book-mode > .timeline-section .timeline::after {
    display: none !important;
}

/* Móvil */
@media (max-width: 700px) {

    #main-content.book-mode .manga-chapter-label {
        margin-bottom: 14px;
        padding: 4px 11px;

        font-size: 10px;
        letter-spacing: 2px;
    }

    #main-content.book-mode > .book-page h2::after {
        width: 65px;
        height: 3px;
    }

}


/* =========================================================
   🗡️ MANGA ROMÁNTICO — REFINAMIENTO VISUAL
   Tipografía · papel · tinta · iconos · botones
   ========================================================= */

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

#main-content.book-mode {
    --manga-paper: #f5f1e8;
    --manga-paper-light: #fffdf7;
    --manga-ink: #151515;
    --manga-gray: #66615a;
    --manga-red: #a5263d;
    --manga-red-dark: #75182b;

    font-family:
        "Trebuchet MS",
        "Segoe UI",
        sans-serif;
}

/* ---------- PAPEL DEL TOMO ---------- */

#main-content.book-mode > .book-page {
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255,255,255,.75),
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 85%,
            rgba(0,0,0,.035),
            transparent 30%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,.018) 0,
            rgba(0,0,0,.018) 1px,
            transparent 1px,
            transparent 5px
        ),
        var(--manga-paper);

    color: var(--manga-ink);
}

/* ---------- TÍTULOS ---------- */

#main-content.book-mode h1,
#main-content.book-mode h2,
#main-content.book-mode h3 {

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

    font-weight: 900;

    letter-spacing: -1px;

    color:
        var(--manga-ink);

    text-wrap: balance;
}

/* Pequeño efecto de tinta */

#main-content.book-mode h1,
#main-content.book-mode h2 {

    text-shadow:
        .5px .5px 0 var(--manga-ink);
}

/* ---------- TEXTO ---------- */

#main-content.book-mode p,
#main-content.book-mode li {

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

    color:
        #302d29;

    line-height:
        1.75;
}

/* ---------- ETIQUETAS ---------- */

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

    font-family:
        "Trebuchet MS",
        "Segoe UI",
        sans-serif;

    font-weight:
        900;

    letter-spacing:
        2.5px;

    color:
        var(--manga-red);

    text-transform:
        uppercase;
}

/* =========================================================
   🖤 ICONOS Y EMOJIS
   ========================================================= */

#main-content.book-mode .big-heart {

    filter:
        grayscale(.15)
        contrast(1.15);

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

    transform:
        rotate(-4deg);
}

/* Iconos dentro de elementos interactivos */

#main-content.book-mode button {

    font-family:
        "Trebuchet MS",
        "Segoe UI",
        sans-serif;

    font-weight:
        900;

    letter-spacing:
        .3px;
}

/* =========================================================
   🎴 BOTONES — ESTILO MANGA
   ========================================================= */

#main-content.book-mode .primary-button,
#main-content.book-mode .yes-button,
#main-content.book-mode .no-button {

    border:
        3px solid
        var(--manga-ink);

    border-radius:
        2px;

    font-weight:
        900;

    box-shadow:
        5px 5px 0
        var(--manga-ink);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

#main-content.book-mode .primary-button:hover,
#main-content.book-mode .yes-button:hover,
#main-content.book-mode .no-button:hover {

    transform:
        translate(3px, 3px);

    box-shadow:
        2px 2px 0
        var(--manga-ink);
}

#main-content.book-mode .primary-button:active,
#main-content.book-mode .yes-button:active,
#main-content.book-mode .no-button:active {

    transform:
        translate(5px, 5px);

    box-shadow:
        none;
}

/* =========================================================
   💌 CARTA — ASPECTO DE PAPEL ESPECIAL
   ========================================================= */

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

    background:
        linear-gradient(
            135deg,
            #fffdf8,
            #f1ece1
        );

    box-shadow:
        8px 8px 0
        var(--manga-ink),
        inset 0 0 30px rgba(0,0,0,.035);
}

/* =========================================================
   🖼️ IMÁGENES — TINTA DE MANGA
   ========================================================= */

#main-content.book-mode img {

    filter:
        contrast(1.05)
        saturate(.88);
}

#main-content.book-mode .gallery-card img {

    filter:
        grayscale(.45)
        contrast(1.12)
        brightness(1.03);
}

/* =========================================================
   🎟️ VALES
   ========================================================= */


/* =========================================================
   🎡 RULETA
   ========================================================= */



/* =========================================================
   💍 MATRIMONIO
   ========================================================= */

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

    background:
        radial-gradient(
            circle at center,
            #fffdf8 0%,
            #eee8dc 70%,
            #e2dbcf 100%
        );
}

/* =========================================================
   ❤️ FINAL
   ========================================================= */

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

    background:
        radial-gradient(
            circle at center,
            #fffdf8 0%,
            #f0e9df 60%,
            #ded6ca 100%
        );
}

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

    border:
        4px solid
        var(--manga-ink);

    box-shadow:
        10px 10px 0
        var(--manga-red);
}

/* =========================================================
   ✨ SEPARADORES
   ========================================================= */

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

    content:
        "◆ ";

    color:
        var(--manga-red);
}

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

    content:
        " ◆";

    color:
        var(--manga-red);

    font-size:
        .65em;
}

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

@media (max-width: 700px) {

    #main-content.book-mode h1 {
        font-size:
            clamp(30px, 9vw, 44px);
    }

    #main-content.book-mode h2 {
        font-size:
            clamp(25px, 7vw, 36px);
    }

    #main-content.book-mode p {
        line-height:
            1.7;
    }

    #main-content.book-mode .section-label {
        font-size:
            10px;

        letter-spacing:
            2px;
    }

}


/* =========================================================
   🎴 MANGA VISUAL ENHANCEMENT — JEAN × LARIMAR
   Capa estética final — no altera la funcionalidad
   ========================================================= */

/* ---------- IDENTIDAD GENERAL ---------- */

#main-content.book-mode {
    --manga-paper: #f5f1e8;
    --manga-paper-light: #fffdf7;
    --manga-ink: #141414;
    --manga-soft-ink: #45413d;
    --manga-red: #a51f35;
    --manga-red-dark: #741526;

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

/* Papel más orgánico */

#main-content.book-mode > .book-page {
    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(255,255,255,.45) 0,
            transparent 28%
        ),
        radial-gradient(
            circle at 80% 85%,
            rgba(0,0,0,.035) 0,
            transparent 32%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,.018) 0,
            rgba(0,0,0,.018) 1px,
            transparent 1px,
            transparent 5px
        ),
        var(--manga-paper);

    box-shadow:
        0 4px 12px rgba(0,0,0,.12),
        0 20px 45px rgba(0,0,0,.20),
        inset 0 0 45px rgba(0,0,0,.035);
}

/* ---------- TÍTULOS ---------- */

#main-content.book-mode h1,
#main-content.book-mode h2,
#main-content.book-mode h3 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: var(--manga-ink);

    font-weight: 900;

    letter-spacing: -1px;

    text-shadow:
        .4px .4px 0 var(--manga-ink);
}

/* Títulos principales */

#main-content.book-mode h1 {
    font-size: clamp(38px, 8vw, 68px);
    line-height: .98;
}

/* Subtítulos */

#main-content.book-mode h2 {
    font-size: clamp(27px, 5vw, 42px);
    line-height: 1.05;
}

/* ---------- ETIQUETAS ---------- */

#main-content.book-mode .section-label {
    color: var(--manga-red);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 3px;

    text-transform: uppercase;

    position: relative;

    display: inline-block;

    padding-bottom: 7px;
}

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

    position: absolute;

    left: 0;
    bottom: 0;

    width: 70%;

    height: 2px;

    background: var(--manga-red);

    transform:
        skewX(-25deg);
}

/* ---------- CAPÍTULOS ---------- */

#main-content.book-mode .manga-chapter-label {
    display: inline-block;

    margin-bottom: 18px;

    padding: 5px 13px;

    background: var(--manga-ink);

    color: var(--manga-paper-light);

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

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 3px;

    box-shadow:
        4px 4px 0 var(--manga-red);

    transform:
        rotate(-1deg);
}

/* ---------- TEXTO ---------- */

#main-content.book-mode .section p,
#main-content.book-mode .section-subtitle {
    color: var(--manga-soft-ink);

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

    font-size: 16px;

    line-height: 1.8;
}

/* ---------- MARCOS ---------- */

#main-content.book-mode
.section-content::before {
    border:
        2px solid
        rgba(20,20,20,.72);

    box-shadow:
        3px 3px 0 rgba(165,31,53,.10);
}

#main-content.book-mode
.section-content::after {
    border:
        1px solid
        rgba(20,20,20,.16);
}

/* ---------- BOTONES ---------- */

#main-content.book-mode
.primary-button,
#main-content.book-mode
.yes-button,
#main-content.book-mode
.no-button {

    border:
        2px solid
        var(--manga-ink);

    border-radius: 0;

    background:
        var(--manga-ink);

    color:
        var(--manga-paper-light);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 900;

    letter-spacing: 1px;

    box-shadow:
        5px 5px 0 var(--manga-red);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

#main-content.book-mode
.primary-button:hover,
#main-content.book-mode
.yes-button:hover,
#main-content.book-mode
.no-button:hover {

    transform:
        translate(-2px,-2px);

    box-shadow:
        7px 7px 0 var(--manga-red);
}

#main-content.book-mode
.primary-button:active,
#main-content.book-mode
.yes-button:active,
#main-content.book-mode
.no-button:active {

    transform:
        translate(3px,3px);

    box-shadow:
        2px 2px 0 var(--manga-red);
}

/* ---------- TARJETAS ---------- */

#main-content.book-mode
.love-item,
#main-content.book-mode
.bucket-item,
#main-content.book-mode

#main-content.book-mode
.love-item::before,
#main-content.book-mode
.bucket-item::before,
#main-content.book-mode

/* ---------- GALERÍA ---------- */

#main-content.book-mode
.gallery-card {

    background:
        var(--manga-paper-light);

    border:
        3px solid
        var(--manga-ink);

    box-shadow:
        6px 6px 0 var(--manga-ink);

    border-radius: 0;
}

#main-content.book-mode
.gallery-card:nth-child(3n) {
    transform:
        rotate(-.8deg);
}

#main-content.book-mode
.gallery-card:nth-child(3n + 1) {
    transform:
        rotate(.6deg);
}

#main-content.book-mode
.gallery-card:nth-child(3n + 2) {
    transform:
        rotate(-.3deg);
}

#main-content.book-mode
.gallery-card img {
    filter:
        grayscale(.45)
        contrast(1.08)
        saturate(.75);
}

/* ---------- CORAZONES ---------- */

#main-content.book-mode
.big-heart {
    filter:
        grayscale(.15)
        contrast(1.1);

    text-shadow:
        4px 4px 0 rgba(0,0,0,.15);
}

/* ---------- RULETA ---------- */





/* ---------- LÍNEAS DE ACCIÓN ---------- */

#main-content.book-mode
.section-content {
    overflow: visible;
}

#main-content.book-mode
.section-content::marker {
    display: none;
}

/* pequeñas marcas decorativas */

#main-content.book-mode
.section-content > h2::after {
    content: " 〰";

    color:
        var(--manga-red);

    font-size: .55em;

    margin-left: 8px;

    white-space: nowrap;
}

/* ---------- PÁGINA FINAL ---------- */

#main-content.book-mode
.final-section h2 {
    color:
        var(--manga-red);

    font-size:
        clamp(30px, 6vw, 50px);

    text-transform:
        uppercase;
}

#main-content.book-mode
.final-section .section-content {
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.55),
            transparent 65%
        );
}

/* ---------- NAVEGACIÓN ---------- */

.book-navigation {
    backdrop-filter:
        blur(8px);

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

    border:
        2px solid
        var(--manga-ink) !important;

    border-radius: 0 !important;

    box-shadow:
        5px 5px 0
        var(--manga-red) !important;
}

.book-nav-button {
    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 900;
}

/* ---------- PUNTOS ---------- */

.book-dot {
    box-shadow:
        2px 2px 0 rgba(0,0,0,.35);
}

.book-dot.active {
    box-shadow:
        2px 2px 0 var(--manga-ink);
}

/* ---------- MARCA ---------- */

.book-brand {
    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-weight:
        900 !important;

    letter-spacing:
        2px;

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

    text-shadow:
        2px 2px 0 rgba(165,31,53,.18);
}

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

@media (max-width: 700px) {

    #main-content.book-mode h1 {
        font-size:
            clamp(34px, 11vw, 54px);
    }

    #main-content.book-mode h2 {
        font-size:
            clamp(25px, 8vw, 36px);
    }

    #main-content.book-mode .section p {
        font-size:
            15px;

        line-height:
            1.7;
    }

    #main-content.book-mode
    .section-content > h2::after {
        display:
            none;
    }

    #main-content.book-mode
    .gallery-card {
        box-shadow:
            4px 4px 0 var(--manga-ink);
    }

}


/* =========================================================
   ❤️ CIERRE ESPECIAL — JEAN × LARIMAR
   ========================================================= */

#main-content.book-mode .final-section {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 35%,
            #fffdf8 0%,
            #f4e9e0 48%,
            #ded2c7 100%
        );
}

#main-content.book-mode .final-section::before {
    content: "❤️";

    position: absolute;

    top: 8%;
    left: 8%;

    font-size: 32px;

    opacity: .12;

    transform: rotate(-18deg);
}

#main-content.book-mode .final-section::after {
    content: "∞";

    position: absolute;

    right: 8%;
    bottom: 10%;

    color: var(--manga-red);

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

    font-size: 90px;
    font-weight: 900;

    opacity: .08;

    transform: rotate(8deg);
}

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

    padding:
        60px
        35px
        55px;

    border:
        4px solid
        var(--manga-ink);

    background:
        rgba(255,253,248,.92);

    box-shadow:
        10px 10px 0 var(--manga-red),
        0 20px 45px rgba(0,0,0,.12);
}

#main-content.book-mode #final-title {
    margin-bottom: 18px;

    color: var(--manga-red);

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

    font-size: 13px;
    font-weight: 900;

    letter-spacing: 4px;

    text-transform: uppercase;
}

#main-content.book-mode .final-section h2 {
    position: relative;

    margin-bottom: 25px;

    color: var(--manga-ink);

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

    font-size:
        clamp(30px, 6vw, 48px);

    line-height: 1.15;

    text-transform: none;

    text-shadow:
        2px 2px 0 rgba(157,36,53,.12);
}

.final-dedication {
    max-width: 520px;

    margin:
        0 auto
        35px;

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

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

    font-size: 17px;
    font-style: italic;

    line-height: 1.8;
}

#main-content.book-mode .final-buttons {
    gap: 22px;
}

#main-content.book-mode .yes-button {
    position: relative;

    padding:
        16px
        30px;

    border:
        3px solid
        var(--manga-ink);

    border-radius: 0;

    background:
        var(--manga-red);

    color:
        var(--manga-white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 15px;
    font-weight: 900;

    box-shadow:
        5px 5px 0
        var(--manga-ink);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

#main-content.book-mode .yes-button:hover {
    transform:
        translate(2px, 2px)
        scale(1.03);

    box-shadow:
        3px 3px 0
        var(--manga-ink);
}

#main-content.book-mode .no-button {
    border:
        2px solid
        rgba(23,23,23,.35);

    border-radius: 0;

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

    color:
        var(--manga-ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-weight: 700;
}

@media (max-width: 700px) {

    #main-content.book-mode .final-section .section-content {
        padding:
            45px
            22px
            40px;
    }

    .final-dedication {
        font-size: 15px;
    }

    #main-content.book-mode .yes-button {
        padding:
            14px
            24px;
    }
}


/* =========================================================
   ❤️ TE AMO POR... — VIÑETAS DE MANGA
   ========================================================= */

#main-content.book-mode .love-list {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(230px, 1fr)
        );

    gap: 22px;

    max-width: 850px;

    margin:
        40px auto
        0;
}

#main-content.book-mode .love-list > * {
    position: relative;

    padding:
        28px
        22px
        24px;

    min-height: 130px;

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

    background:
        var(--manga-white);

    border:
        3px solid
        var(--manga-ink);

    box-shadow:
        6px 6px 0
        var(--manga-ink);

    color:
        var(--manga-ink);

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

    font-size: 16px;

    font-weight: 700;

    line-height: 1.55;

    text-align: center;

    transform:
        rotate(-0.8deg);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

#main-content.book-mode .love-list > *:nth-child(even) {
    transform:
        rotate(0.8deg);
}

#main-content.book-mode .love-list > *:nth-child(3n) {
    transform:
        rotate(-0.3deg);
}

#main-content.book-mode .love-list > *::before {
    content:
        "♥";

    position: absolute;

    top: 9px;
    left: 12px;

    color:
        var(--manga-red);

    font-family:
        Arial,
        sans-serif;

    font-size: 18px;
}

#main-content.book-mode .love-list > *::after {
    content:
        "♡";

    position: absolute;

    right: 12px;
    bottom: 7px;

    color:
        var(--manga-red);

    font-size: 22px;

    opacity: .35;
}

#main-content.book-mode .love-list > *:hover {
    transform:
        translateY(-5px)
        rotate(0deg)
        scale(1.015);

    box-shadow:
        9px 9px 0
        var(--manga-red);
}

#main-content.book-mode .love-list > *:nth-child(1) {
    animation:
        lovePanelIn .5s ease both;
}

#main-content.book-mode .love-list > *:nth-child(2) {
    animation:
        lovePanelIn .5s .06s ease both;
}

#main-content.book-mode .love-list > *:nth-child(3) {
    animation:
        lovePanelIn .5s .12s ease both;
}

#main-content.book-mode .love-list > *:nth-child(4) {
    animation:
        lovePanelIn .5s .18s ease both;
}

#main-content.book-mode .love-list > *:nth-child(5) {
    animation:
        lovePanelIn .5s .24s ease both;
}

#main-content.book-mode .love-list > *:nth-child(6) {
    animation:
        lovePanelIn .5s .30s ease both;
}

@keyframes lovePanelIn {

    from {
        opacity: 0;

        transform:
            translateY(18px)
            rotate(-2deg)
            scale(.96);
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 600px) {

    #main-content.book-mode .love-list {
        grid-template-columns:
            1fr;

        gap: 18px;

        margin-top: 30px;
    }

    #main-content.book-mode .love-list > * {
        min-height: 105px;

        padding:
            25px
            20px;

        font-size: 15px;
    }
}


/* =========================================================
   🎟️ CUPONES — EXPERIENCIA DE VALE
   ========================================================= */


/* Perforaciones laterales */



/* Icono */


/* Título */


/* Descripción */


/* Botón */


/* Estado CANJEADO */


/* Entrada escalonada */


@keyframes voucherAppear {

    from {
        opacity: 0;

        transform:
            translateY(20px)
            rotate(-3deg)
            scale(.96);
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 600px) {


}


/* =========================================================
   🎟️ CUPONES — VALES ESPECIALES JEAN × LARIMAR
   ========================================================= */


/* ---------- VALE ---------- */


/* Inclinación alternada */


/* Hover */


/* ---------- BORDE INTERIOR ---------- */


/* ---------- SELLO ---------- */


/* ---------- ICONO ---------- */


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


/* ---------- DESCRIPCIÓN ---------- */


/* ---------- BOTÓN ---------- */


/* ---------- VALE UTILIZADO ---------- */


/* ---------- DETALLE DECORATIVO ---------- */


/* ---------- PICANTE SUTIL 🔥 ---------- */


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

@media (max-width: 600px) {


}


/* =========================================================
   📖 NAVEGACIÓN MANGA — CAPÍTULOS
   Capa visual final — no modifica la lógica JS
   ========================================================= */

/* ---------- BARRA PRINCIPAL ---------- */

#main-content.book-mode ~ .book-navigation,
body:has(#main-content.book-mode) .book-navigation {

    bottom: 18px !important;

    padding:
        6px 8px !important;

    gap:
        8px !important;

    background:
        rgba(255,253,248,.94) !important;

    border:
        3px solid
        var(--manga-ink) !important;

    border-radius:
        4px !important;

    box-shadow:
        5px 5px 0
        var(--manga-red) !important;

    opacity:
        1 !important;

    backdrop-filter:
        blur(10px);

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

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


/* ---------- FLECHAS ---------- */

.book-navigation .book-nav-button {

    position: relative;

    width:
        38px !important;

    height:
        34px !important;

    border:
        2px solid
        var(--manga-ink) !important;

    border-radius:
        2px !important;

    background:
        var(--manga-white) !important;

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

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        20px !important;

    font-weight:
        900 !important;

    line-height:
        1;

    box-shadow:
        3px 3px 0
        var(--manga-ink);

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

.book-navigation .book-nav-button:hover:not(:disabled) {

    transform:
        translate(-2px,-2px) !important;

    background:
        #fff0f3 !important;

    box-shadow:
        5px 5px 0
        var(--manga-red);
}

.book-navigation .book-nav-button:active:not(:disabled) {

    transform:
        translate(2px,2px) !important;

    box-shadow:
        1px 1px 0
        var(--manga-ink);
}

.book-navigation .book-nav-button:disabled {

    opacity:
        .25 !important;

    background:
        #e8e2dc !important;

    box-shadow:
        2px 2px 0
        var(--manga-ink);
}


/* ---------- INDICADOR ---------- */

.book-navigation .book-page-indicator {

    min-width:
        58px !important;

    padding:
        0 4px;

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

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

    font-size:
        13px !important;

    font-weight:
        900 !important;

    letter-spacing:
        1px !important;

    text-align:
        center;

    white-space:
        nowrap;
}


/* ---------- SEPARADORES ---------- */

.book-navigation .book-page-indicator::before {

    content:
        "第 ";

    color:
        var(--manga-red);

    font-size:
        10px;
}

.book-navigation .book-page-indicator::after {

    content:
        " 話";

    color:
        var(--manga-red);

    font-size:
        10px;
}


/* ---------- PUNTOS LATERALES ---------- */

body:has(#main-content.book-mode) .book-dots {

    right:
        16px !important;

    gap:
        8px !important;

    padding:
        10px 7px !important;

    background:
        rgba(255,253,248,.72);

    border:
        2px solid
        rgba(45,20,30,.35);

    border-radius:
        4px;

    box-shadow:
        3px 3px 0
        rgba(45,20,30,.18);

    opacity:
        1 !important;

    backdrop-filter:
        blur(6px);

    -webkit-backdrop-filter:
        blur(6px);
}


/* ---------- CADA PUNTO ---------- */

body:has(#main-content.book-mode) .book-dot {

    position:
        relative;

    width:
        7px !important;

    height:
        7px !important;

    border:
        1px solid
        var(--manga-ink) !important;

    border-radius:
        50%;

    background:
        #d8cec4 !important;

    box-shadow:
        none !important;

    opacity:
        1;

    transition:
        transform .2s ease,
        background .2s ease,
        border-radius .2s ease;
}


/* ---------- PUNTO ACTIVO ---------- */

body:has(#main-content.book-mode) .book-dot.active {

    width:
        7px !important;

    height:
        18px !important;

    border-radius:
        2px !important;

    background:
        var(--manga-red) !important;

    border:
        2px solid
        var(--manga-ink) !important;

    transform:
        scale(1) !important;

    box-shadow:
        2px 2px 0
        var(--manga-ink) !important;
}


/* ---------- HOVER DOTS ---------- */

body:has(#main-content.book-mode) .book-dot:hover {

    transform:
        scale(1.35);

    background:
        #e89aaa !important;
}


/* ---------- INDICACIÓN VISUAL DE PÁGINA ---------- */

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

    animation:
        mangaPageEnter
        .55s
        cubic-bezier(.2,.75,.2,1);
}

@keyframes mangaPageEnter {

    from {

        opacity:
            .65;

        transform:
            translateX(28px)
            scale(.985);
    }

    to {

        opacity:
            1;

        transform:
            translateX(0)
            scale(1);
    }
}


/* ---------- PEQUEÑO EFECTO DE PAPEL ---------- */

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

    animation:
        mangaContentAppear
        .65s
        ease-out;
}

@keyframes mangaContentAppear {

    from {

        opacity:
            .75;

        transform:
            translateY(12px);
    }

    to {

        opacity:
            1;

        transform:
            translateY(0);
    }
}


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

@media (max-width: 700px) {

    body:has(#main-content.book-mode) .book-navigation {

        bottom:
            12px !important;

        padding:
            5px 6px !important;

        gap:
            6px !important;

        box-shadow:
            4px 4px 0
            var(--manga-red) !important;
    }

    .book-navigation .book-nav-button {

        width:
            36px !important;

        height:
            32px !important;

        font-size:
            18px !important;
    }

    .book-navigation .book-page-indicator {

        min-width:
            52px !important;

        font-size:
            12px !important;
    }

    body:has(#main-content.book-mode) .book-dots {

        right:
            7px !important;

        gap:
            6px !important;

        padding:
            8px 5px !important;
    }

    body:has(#main-content.book-mode) .book-dot {

        width:
            6px !important;

        height:
            6px !important;
    }

    body:has(#main-content.book-mode) .book-dot.active {

        width:
            6px !important;

        height:
            15px !important;
    }
}


/* =========================================================
   📖 TRANSICIÓN DE PÁGINAS — MANGA
   ========================================================= */

#main-content.book-mode > .book-page {
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Página que está saliendo */
#main-content.book-mode > .book-page.book-leaving {
    z-index: 1 !important;

    animation:
        mangaPageLeave
        .6s
        cubic-bezier(.65,0,.35,1)
        forwards !important;
}

/* Página activa */
#main-content.book-mode > .book-page.book-active {
    z-index: 2 !important;

    animation:
        mangaPageEnter
        .6s
        cubic-bezier(.2,.75,.2,1)
        forwards !important;
}

/* Entrada */
@keyframes mangaPageEnter {

    0% {
        opacity: 0;
        transform:
            perspective(1400px)
            translateX(70px)
            rotateY(-5deg)
            scale(.97);
        filter:
            brightness(.92);
    }

    55% {
        opacity: .9;
    }

    100% {
        opacity: 1;
        transform:
            perspective(1400px)
            translateX(0)
            rotateY(0)
            scale(1);
        filter:
            brightness(1);
    }
}

/* Salida */
@keyframes mangaPageLeave {

    0% {
        opacity: 1;
        transform:
            perspective(1400px)
            translateX(0)
            rotateY(0)
            scale(1);
        filter:
            brightness(1);
    }

    100% {
        opacity: 0;
        transform:
            perspective(1400px)
            translateX(-70px)
            rotateY(5deg)
            scale(.97);
        filter:
            brightness(.9);
    }
}


/* ---------- CONTENIDO ---------- */

#main-content.book-mode
.book-page.book-active
.section-content {

    animation:
        mangaContentReveal
        .7s
        .12s
        ease-out
        both;
}

@keyframes mangaContentReveal {

    from {
        opacity: 0;
        transform:
            translateY(18px);
    }

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


/* ---------- REDUCIR MOVIMIENTO ---------- */

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

    #main-content.book-mode > .book-page,
    #main-content.book-mode
    .book-page.book-active
    .section-content {

        animation:
            none !important;
    }
}


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

@media (max-width: 700px) {

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

        animation:
            mangaPageLeaveMobile
            .5s
            ease-out
            forwards !important;
    }

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

        animation:
            mangaPageEnterMobile
            .5s
            ease-out
            forwards !important;
    }
}

@keyframes mangaPageEnterMobile {

    from {
        opacity: 0;
        transform:
            translateX(45px)
            scale(.985);
    }

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

@keyframes mangaPageLeaveMobile {

    from {
        opacity: 1;
        transform:
            translateX(0)
            scale(1);
    }

    to {
        opacity: 0;
        transform:
            translateX(-45px)
            scale(.985);
    }
}


/* =========================================================
   📖 IDENTIDAD VISUAL POR CAPÍTULO
   JEAN × LARIMAR
   ========================================================= */

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

#main-content.book-mode > .book-page {
    position: relative;
    overflow-x: hidden;
}

#main-content.book-mode > .book-page::before {
    pointer-events: none;
    z-index: 0;
}

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


/* =========================================================
   💌 CARTA — CARTA PERSONAL
   ========================================================= */

#main-content.book-mode > .book-page:nth-child(3) {
    background:
        radial-gradient(
            circle at 50% 30%,
            #fffdf8 0%,
            #f8eee5 65%,
            #eadfd5 100%
        );
}

#main-content.book-mode > .book-page:nth-child(3)
.section-content {
    background:
        rgba(255,253,248,.94);

    border:
        3px solid
        rgba(70,55,45,.8);

    box-shadow:
        7px 7px 0 rgba(165,31,53,.45),
        0 18px 40px rgba(50,30,20,.12);
}

#main-content.book-mode > .book-page:nth-child(3)
#letter-text {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;
    line-height: 2;
}


/* =========================================================
   📸 GALERÍA — ÁLBUM DE RECUERDOS
   ========================================================= */

#main-content.book-mode > .book-page:nth-child(4) {
    background:
        linear-gradient(
            135deg,
            #f4eee5,
            #fffdf8 45%,
            #e8ddd2
        );
}

#main-content.book-mode > .book-page:nth-child(4)
.gallery-card {
    border:
        3px solid
        var(--manga-ink);

    box-shadow:
        6px 6px 0 var(--manga-red);

    transform:
        rotate(-.5deg);
}

#main-content.book-mode > .book-page:nth-child(4)
.gallery-card:nth-child(even) {
    transform:
        rotate(.6deg);
}


/* =========================================================
   🎬 VIDEOS — CINE
   ========================================================= */

#main-content.book-mode > .book-page:nth-child(5) {
    background:
        radial-gradient(
            circle at center,
            #272727 0%,
            #111 70%,
            #050505 100%
        );
}

#main-content.book-mode > .book-page:nth-child(5)
.section-label,
#main-content.book-mode > .book-page:nth-child(5)
h2 {
    color: #fff !important;
}

#main-content.book-mode > .book-page:nth-child(5)
.video-card {
    border:
        3px solid
        #fff;

    box-shadow:
        8px 8px 0 var(--manga-red);
}


/* =========================================================
   ❤️ RECUERDOS / LISTAS
   ========================================================= */

#main-content.book-mode > .book-page:nth-child(6) {
    background:
        radial-gradient(
            circle at 30% 20%,
            #fff7fa,
            #f3e1e7 70%
        );
}

#main-content.book-mode > .book-page:nth-child(6)
li {
    position: relative;
}

#main-content.book-mode > .book-page:nth-child(6)
li::before {
    content: "♥";

    margin-right: 10px;

    color:
        var(--manga-red);

    font-size: .8em;
}


/* =========================================================
   🌙 SUEÑOS
   ========================================================= */

#main-content.book-mode > .book-page:nth-child(7) {
    background:
        radial-gradient(
            circle at 50% 20%,
            #fffdf8 0%,
            #e9e1e8 55%,
            #d6ced9 100%
        );
}

#main-content.book-mode > .book-page:nth-child(7)
.section-content {
    box-shadow:
        8px 8px 0 #766477,
        0 20px 45px rgba(50,30,50,.12);
}


/* =========================================================
   🎁 REGALO SECRETO
   ========================================================= */

#main-content.book-mode > .book-page:nth-child(8) {
    background:
        radial-gradient(
            circle at center,
            #fff7df 0%,
            #ead9b8 55%,
            #cdbb98 100%
        );
}

#main-content.book-mode > .book-page:nth-child(8)
.section-content {
    border:
        4px dashed
        var(--manga-ink);

    box-shadow:
        9px 9px 0 var(--manga-red);
}


/* =========================================================
   🎟️ VALES — CUPONERA
   ========================================================= */

#main-content.book-mode > .book-page:nth-child(9) {
    background:
        repeating-linear-gradient(
            0deg,
            #fff8fa,
            #fff8fa 12px,
            #f7e3e9 13px
        );
}

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

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


/* =========================================================
   🎟️ CAPÍTULO 09 — VALES CANJEABLES
   CUPONERA ROMÁNTICA / 12 VALES
   ========================================================= */

/* ---------- SECCIÓN ---------- */

#main-content.book-mode .vouchers-section {
    position: relative;

    width: 100%;
    max-width: 100%;

    min-height: auto;
    height: auto;
    max-height: none;

    overflow: visible;

    box-sizing: border-box;

    padding:
        48px
        28px
        56px;

    background:
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #f8eee7 100%
        );

    color:
        var(--manga-ink);
}


/* ---------- CONTENIDO ---------- */

#main-content.book-mode .vouchers-section .section-content {
    width: 100%;
    max-width: 980px;

    min-height: auto;
    height: auto;
    max-height: none;

    overflow: visible;

    margin: 0 auto;
}


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

#main-content.book-mode .vouchers-section #vouchers-title {
    margin:
        0 auto 18px;

    color:
        var(--manga-red);

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

    font-size:
        clamp(26px, 4vw, 36px);

    font-weight:
        900;

    line-height:
        1.12;

    text-align:
        center;
}


/* ---------- INTRO ---------- */

#main-content.book-mode .vouchers-section .vouchers-intro {
    width: min(620px, 100%);

    margin:
        0 auto 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        12px;

    text-align:
        center;
}

#main-content.book-mode .vouchers-section .vouchers-intro p {
    margin: 0;

    color:
        #5a4a43;

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

    font-size:
        15px;

    line-height:
        1.6;

    font-style:
        italic;
}

#main-content.book-mode .vouchers-section .vouchers-intro-mark {
    flex:
        0 0 auto;

    color:
        var(--manga-red);

    font-size:
        24px;
}


/* =========================================================
   🎟️ GRID — 12 VALES
   ========================================================= */

#main-content.book-mode .vouchers-section .vouchers {
    display:
        grid;

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

    grid-auto-rows:
        auto;

    gap:
        34px;

    width:
        100%;

    max-width:
        900px;

    margin:
        0 auto;

    padding:
        12px 12px 18px;

    box-sizing:
        border-box;

    overflow:
        visible;
}


/* =========================================================
   🎫 TARJETA
   ========================================================= */

#main-content.book-mode .vouchers-section .voucher-card {
    position:
        relative;

    width:
        100%;

    min-width:
        0;

    min-height:
        380px;

    height:
        auto;

    max-height:
        none;

    box-sizing:
        border-box;

    overflow:
        visible;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    padding:
        30px
        26px
        24px;

    background:
        #fffdf8;

    border:
        3px solid
        var(--manga-ink);

    border-radius:
        4px;

    box-shadow:
        7px 7px 0
        var(--manga-red);

    color:
        var(--manga-ink);

    transform:
        rotate(-0.6deg);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        opacity .25s ease;

    z-index:
        1;
}


/* INCLINACIÓN ALTERNADA */

#main-content.book-mode
.vouchers-section
.voucher-card:nth-child(even) {
    transform:
        rotate(0.6deg);
}

#main-content.book-mode
.vouchers-section
.voucher-card:nth-child(3n) {
    transform:
        rotate(-0.35deg);
}


/* ---------- BORDE INTERIOR ---------- */

#main-content.book-mode
.vouchers-section
.voucher-card::before {

    content:
        "";

    position:
        absolute;

    inset:
        9px;

    border:
        1px dashed
        rgba(143,41,64,.45);

    pointer-events:
        none;

    z-index:
        0;
}


/* =========================================================
   🎨 CÍRCULO DEL EMOJI
   ========================================================= */

#main-content.book-mode
.vouchers-section
.voucher-card
.voucher-icon {

    position:
        relative;

    flex:
        0 0 auto;

    width:
        94px;

    height:
        94px;

    min-width:
        94px;

    min-height:
        94px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    box-sizing:
        border-box;

    margin:
        0 auto 20px;

    padding:
        0;

    background:
        #f8dfe1;

    border:
        4px solid
        var(--manga-ink);

    border-radius:
        50%;

    font-size:
        48px;

    line-height:
        1;

    filter:
        none;

    box-shadow:
        5px 5px 0
        var(--manga-red);

    z-index:
        2;

    transition:
        transform .22s ease;
}


/* IMPORTANTE:
   No usar pseudo-elemento dentro del círculo.
   Así el color queda contenido dentro del borde. */

#main-content.book-mode
.vouchers-section
.voucher-card
.voucher-icon::before {

    content:
        none !important;
}


/* ---------- HOVER ICONO ---------- */

#main-content.book-mode
.vouchers-section
.voucher-card:hover
.voucher-icon {

    transform:
        rotate(-5deg)
        scale(1.06);
}


/* =========================================================
   ✒️ TÍTULO DEL VALE
   ========================================================= */

#main-content.book-mode
.vouchers-section
.voucher-card
h3 {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    margin:
        0 0 12px;

    padding:
        0 6px;

    box-sizing:
        border-box;

    color:
        var(--manga-red);

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

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

    font-weight:
        900;

    line-height:
        1.15;

    text-align:
        center;
}


/* =========================================================
   📝 DESCRIPCIÓN
   ========================================================= */

#main-content.book-mode
.vouchers-section
.voucher-card
p {

    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        330px;

    min-height:
        0;

    flex:
        1 1 auto;

    margin:
        0 auto 22px;

    padding:
        0 5px;

    box-sizing:
        border-box;

    color:
        rgba(45,20,30,.75);

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

    font-size:
        14px;

    line-height:
        1.55;

    text-align:
        center;
}


/* =========================================================
   ❤️ BOTÓN
   ========================================================= */

#main-content.book-mode
.vouchers-section
.voucher-card
button {

    position:
        relative;

    z-index:
        5;

    flex:
        0 0 auto;

    display:
        block;

    width:
        auto;

    max-width:
        100%;

    box-sizing:
        border-box;

    margin:
        auto 0 0;

    padding:
        10px 18px;

    border:
        2px solid
        var(--manga-ink);

    border-radius:
        2px;

    background:
        var(--manga-red);

    color:
        #fff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        .6px;

    cursor:
        pointer;

    box-shadow:
        4px 4px 0
        var(--manga-ink);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

#main-content.book-mode
.vouchers-section
.voucher-card
button:hover {

    transform:
        translate(-2px,-2px);

    box-shadow:
        6px 6px 0
        var(--manga-ink);
}

#main-content.book-mode
.vouchers-section
.voucher-card
button:active {

    transform:
        translate(2px,2px);

    box-shadow:
        2px 2px 0
        var(--manga-ink);
}


/* =========================================================
   ✓ VALE CANJEADO
   ========================================================= */

#main-content.book-mode
.vouchers-section
.voucher-card.used {

    opacity:
        .58;

    filter:
        grayscale(.55);

    transform:
        rotate(0deg);

    box-shadow:
        5px 5px 0
        #777;
}

#main-content.book-mode
.vouchers-section
.voucher-card.used::after {

    content:
        "CANJEADO ✓";

    position:
        absolute;

    top:
        50%;

    left:
        50%;

    transform:
        translate(-50%, -50%)
        rotate(-8deg);

    padding:
        8px 14px;

    background:
        #555;

    color:
        #fff;

    border:
        2px solid
        var(--manga-ink);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        1px;

    z-index:
        10;

    pointer-events:
        none;
}

#main-content.book-mode
.vouchers-section
.voucher-card.used
button {

    background:
        #777;

    cursor:
        default;

    box-shadow:
        3px 3px 0
        var(--manga-ink);
}


/* =========================================================
   ✦ PIE
   ========================================================= */

#main-content.book-mode
.vouchers-section
.vouchers-footer {

    width:
        min(600px, 100%);

    margin:
        34px auto 0;

    color:
        rgba(45,35,30,.7);

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

    font-style:
        italic;

    line-height:
        1.65;

    text-align:
        center;
}


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

@media (max-width: 700px) {

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

        padding:
            40px
            14px
            48px;

        min-height:
            auto;

        height:
            auto;

        overflow:
            visible;
    }


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

        width:
            100%;

        max-width:
            100%;

        min-height:
            auto;

        height:
            auto;

        overflow:
            visible;
    }


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

        grid-template-columns:
            1fr;

        gap:
            30px;

        width:
            100%;

        max-width:
            390px;

        padding:
            10px 8px 18px;
    }


    #main-content.book-mode
    .vouchers-section
    .voucher-card {

        min-height:
            360px;

        padding:
            28px
            22px
            24px;
    }


    #main-content.book-mode
    .vouchers-section
    .voucher-card
    .voucher-icon {

        width:
            90px;

        height:
            90px;

        min-width:
            90px;

        min-height:
            90px;

        font-size:
            44px;
    }

}


/* =========================================================
   FIN CAPÍTULO 09
   ========================================================= */

/* =========================================================
   ✦ INTRODUCCIÓN
   ========================================================= */

#main-content.book-mode

    margin-bottom:
        22px;

    color:
        var(--manga-ink);

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

    font-weight:
        900;

    line-height:
        1.12;
}


#main-content.book-mode

    max-width:
        560px;

    margin:
        0 auto 34px;

    padding:
        0;

    border:
        0;

    background:
        transparent;

    color:
        rgba(45,35,30,.72);

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

    font-style:
        italic;

    line-height:
        1.65;

    text-align:
        center;

    transform:
        none;
}


#main-content.book-mode

    margin:
        0;
}


#main-content.book-mode

    display:
        inline-block;

    position:
        static;

    transform:
        none;

    margin-bottom:
        8px;

    color:
        var(--manga-red);

    font-size:
        22px;

    font-weight:
        900;
}


/* =========================================================
   ========================================================= */

#main-content.book-mode

    display:
        grid;

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

    gap:
        30px;

    max-width:
        820px;

    margin:
        0 auto;

    padding:
        10px 8px;
}


/* =========================================================
   ========================================================= */

#main-content.book-mode

    position:
        relative;

    min-height:
        390px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    padding:
        36px 34px 28px;

    overflow:
        visible;

    background:
        #fffdf9;

    border:
        4px solid
        var(--manga-ink);

    border-radius:
        2px;

    box-shadow:
        9px 9px 0
        var(--manga-red);

    color:
        var(--manga-ink);

    transform:
        none;

    transition:
        transform .22s ease,
        box-shadow .22s ease;
}


#main-content.book-mode

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

    box-shadow:
        12px 12px 0
        var(--manga-red);
}


/* =========================================================
   🏷️ SELLO SUPERIOR
   ========================================================= */

#main-content.book-mode

    content:
        "PARA\A TI";

    white-space:
        pre;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    position:
        absolute;

    top:
        -22px;

    left:
        50%;

    width:
        78px;

    height:
        78px;

    transform:
        translateX(-50%)
        rotate(-6deg);

    border:
        3px solid
        var(--manga-ink);

    border-radius:
        50%;

    background:
        var(--manga-red);

    color:
        var(--manga-white);

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

    font-size:
        11px;

    font-weight:
        900;

    line-height:
        1.05;

    letter-spacing:
        2px;

    text-align:
        center;

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

    z-index:
        5;
}


/* =========================================================
   🖼️ ILUSTRACIÓN CENTRAL
   ========================================================= */

#main-content.book-mode

    position:
        relative;

    width:
        110px;

    height:
        110px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        26px auto 22px;

    border:
        4px solid
        var(--manga-ink);

    border-radius:
        50%;

    background:
        #f5d8d2;

    font-size:
        58px;

    line-height:
        1;

    z-index:
        2;

    filter:
        none;
}


#main-content.book-mode

    content:
        "";

    position:
        absolute;

    width:
        100%;

    height:
        100%;

    top:
        9px;

    left:
        9px;

    border-radius:
        50%;

    background:
        var(--manga-red);

    z-index:
        -1;
}


/* =========================================================
   ✒️ TÍTULO
   ========================================================= */

#main-content.book-mode

    position:
        relative;

    z-index:
        2;

    margin:
        0 0 14px;

    color:
        var(--manga-red);

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

    font-size:
        clamp(23px, 3vw, 28px);

    font-weight:
        900;

    line-height:
        1.1;

    text-align:
        center;
}


/* =========================================================
   📝 DESCRIPCIÓN
   ========================================================= */

#main-content.book-mode

    position:
        relative;

    z-index:
        2;

    flex:
        1;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        center;

    min-height:
        auto;

    margin:
        0 0 24px;

    color:
        #5a4a43;

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

    font-size:
        15px;

    font-weight:
        400;

    line-height:
        1.6;

    text-align:
        center;
}


/* =========================================================
   ❤️ BOTÓN
   ========================================================= */

#main-content.book-mode

    position:
        relative;

    z-index:
        3;

    width:
        82%;

    margin:
        auto 0 0;

    padding:
        13px 18px;

    border:
        2px solid
        var(--manga-ink);

    border-radius:
        0;

    background:
        var(--manga-ink);

    color:
        #fffdf9;

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    box-shadow:
        5px 5px 0
        var(--manga-red);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


#main-content.book-mode

    transform:
        translate(-2px,-2px);

    box-shadow:
        7px 7px 0
        var(--manga-red);
}


#main-content.book-mode

    transform:
        translate(3px,3px);

    box-shadow:
        2px 2px 0
        var(--manga-red);
}


/* =========================================================
   ✓ CANJEADO
   ========================================================= */

#main-content.book-mode

    opacity:
        .65;

    filter:
        grayscale(.2);

    background:
        #eee9e3;
}


#main-content.book-mode

    content:
        "CANJEADO";

    white-space:
        normal;

    width:
        auto;

    height:
        auto;

    padding:
        9px 16px;

    border-radius:
        0;

    top:
        18px;

    transform:
        translateX(-50%)
        rotate(-7deg);

    background:
        var(--manga-ink);
}


/* =========================================================
   ❤️ PIE
   ========================================================= */

#main-content.book-mode

    max-width:
        600px;

    margin:
        42px auto 0;

    color:
        rgba(45,35,30,.7);

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

    font-style:
        italic;

    line-height:
        1.65;

    text-align:
        center;
}


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

@media (max-width: 700px) {

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

        padding:
            44px
            18px
            48px;
    }


    #main-content.book-mode

        grid-template-columns:
            1fr;

        gap:
            32px;

        width:
            75%;

        max-width:
            360px;

        padding:
            18px 0;
    }


    #main-content.book-mode

        min-height:
            410px;

        padding:
            36px
            24px
            28px;
    }


    #main-content.book-mode

        width:
            105px;

        height:
            105px;

        margin:
            28px auto 22px;
    }

}


/* =========================================================
   🎡 RULETA — FERIA MANGA
   ========================================================= */

#main-content.book-mode > .book-page:nth-child(10) {
    background:
        radial-gradient(
            circle at center,
            #fffdf8 0%,
            #f5ddd0 55%,
            #e5c3b8 100%
        );
}

#main-content.book-mode > .book-page:nth-child(10)
.section-content {
    border:
        4px solid
        var(--manga-ink);

    box-shadow:
        10px 10px 0 var(--manga-red);
}

#main-content.book-mode > .book-page:nth-child(10)
h2 {
    text-transform: uppercase;
    letter-spacing: 1px;
}


/* =========================================================
   💍 MATRIMONIO — ELEGANTE
   ========================================================= */

#main-content.book-mode > .book-page:nth-child(11) {
    background:
        radial-gradient(
            circle at center,
            #fffdf8 0%,
            #eee7dd 60%,
            #d9d0c4 100%
        );
}

#main-content.book-mode > .book-page:nth-child(11)
.section-content {
    border:
        3px solid
        #8b7764;

    box-shadow:
        8px 8px 0 #a51f35;
}

#main-content.book-mode > .book-page:nth-child(11)
h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    letter-spacing: 1px;
}


/* =========================================================
   💕 PÁGINA FINAL — ESPECIAL
   ========================================================= */

#main-content.book-mode > .book-page:last-child {
    background:
        radial-gradient(
            circle at center,
            #fffdf8 0%,
            #f5e0e6 50%,
            #dcb9c3 100%
        );
}

#main-content.book-mode > .book-page:last-child
.section-content {
    animation:
        finalChapterGlow
        3s
        ease-in-out
        infinite alternate;
}

@keyframes finalChapterGlow {

    from {
        box-shadow:
            8px 8px 0 var(--manga-red),
            0 0 0 rgba(165,31,53,0);
    }

    to {
        box-shadow:
            8px 8px 0 var(--manga-red),
            0 0 35px rgba(165,31,53,.18);
    }
}


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

@media (max-width: 700px) {

    #main-content.book-mode > .book-page:nth-child(3)
    #letter-text {
        font-size: 16px;
        line-height: 1.8;
    }

    #main-content.book-mode > .book-page:nth-child(9)
        box-shadow:
            4px 4px 0 var(--manga-red);
    }

    #main-content.book-mode > .book-page:nth-child(10)
    .section-content {
        box-shadow:
            6px 6px 0 var(--manga-red);
    }

}


/* =========================================================
   📖 REFINAMIENTO VISUAL DEL LIBRO — V2
   MANGA ROMÁNTICO EDITORIAL
   ========================================================= */


/* =========================================================
   📕 ATMÓSFERA DEL LIBRO
   ========================================================= */

#main-content.book-mode {

    background:
        radial-gradient(
            ellipse at 50% 35%,
            #fffdf8 0%,
            #f4efe5 48%,
            #ded7ca 100%
        );

    color:
        #292624;

}


/* =========================================================
   📄 PÁGINAS — PAPEL EDITORIAL
   ========================================================= */

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

    background:
        linear-gradient(
            90deg,
            rgba(80,65,45,.045),
            transparent 9%,
            transparent 91%,
            rgba(80,65,45,.035)
        ),
        radial-gradient(
            ellipse at 50% 0%,
            rgba(255,255,255,.75),
            transparent 65%
        ),
        #f7f2e8;

    border:
        1px solid
        rgba(48,42,37,.28);

    box-shadow:
        0 1px 0 rgba(255,255,255,.8) inset,
        7px 7px 0 rgba(35,30,26,.08),
        16px 20px 38px rgba(35,30,26,.13);

}


/* =========================================================
   🖋️ TEXTURA DE PAPEL
   ========================================================= */

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

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle,
            rgba(80,65,45,.045) .7px,
            transparent 1px
        );

    background-size:
        11px 11px;

    opacity:
        .22;

    pointer-events:
        none;

    z-index:
        0;

}


/* =========================================================
   📐 MARCO EDITORIAL
   ========================================================= */

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

    content:
        "";

    position:
        absolute;

    inset:
        22px;

    border:
        1px solid
        rgba(48,42,37,.16);

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

    pointer-events:
        none;

    z-index:
        0;

}


/* =========================================================
   📖 CONTENIDO
   ========================================================= */

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

    position:
        relative;

    z-index:
        2;

}


/* =========================================================
   📑 CAPÍTULO
   ========================================================= */

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

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        22px;

    padding:
        6px 13px;

    background:
        #292624;

    color:
        #f7f2e8;

    border:
        1px solid
        #292624;

    box-shadow:
        4px 4px 0
        #a52c42;

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

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

}


/* pequeño detalle editorial */

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

    content:
        "◆";

    color:
        #d47b88;

    font-size:
        7px;

}


/* =========================================================
   ❤️ ETIQUETA DE SECCIÓN
   ========================================================= */

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

    margin-bottom:
        10px;

    color:
        #a52c42;

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

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2.5px;

}


/* =========================================================
   🖋️ TÍTULOS PRINCIPALES
   ========================================================= */

#main-content.book-mode
h1,
#main-content.book-mode
h2 {

    color:
        #292624;

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

    font-weight:
        700;

    letter-spacing:
        -.5px;

    line-height:
        1.12;

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

}


/* =========================================================
   📝 TEXTO
   ========================================================= */

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

    color:
        #625b54;

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

    line-height:
        1.75;

}


/* =========================================================
   ✒️ LÍNEA DECORATIVA
   ========================================================= */

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

    content:
        "◆  ♥  ◆";

    display:
        block;

    margin:
        34px auto 0;

    color:
        #a52c42;

    font-family:
        Georgia,
        serif;

    font-size:
        9px;

    letter-spacing:
        5px;

    opacity:
        .48;

}


/* =========================================================
   📕 INTRO — MÁS DRAMÁTICA
   ========================================================= */

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

    position:
        relative;

}


/* =========================================================
   ❤️ CORAZÓN PRINCIPAL
   ========================================================= */

#main-content.book-mode
.big-heart {

    filter:
        grayscale(.15);

    text-shadow:
        3px 3px 0
        rgba(165,44,66,.18);

}


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

@media (max-width: 700px) {

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

        box-shadow:
            4px 4px 0 rgba(35,30,26,.08),
            9px 13px 26px rgba(35,30,26,.11);

    }

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

        inset:
            12px;

    }

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

        margin-bottom:
            17px;

        padding:
            5px 10px;

        font-size:
            10px;

        letter-spacing:
            2px;

    }

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

        line-height:
            1.65;

    }

}


/* =========================================================
   FIN — REFINAMIENTO VISUAL V2
   ========================================================= */


/* =========================================================
   🌙 FONDO DINÁMICO DEL LIBRO — V3
   ROMANCE / MANGA / DREAMY
   ========================================================= */

#main-content.book-mode {

    isolation: isolate;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255,190,205,.55),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(190,120,150,.35),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(255,210,220,.5),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #f8dce3,
            #ead1da 45%,
            #d8c1cf
        );

    overflow:
        hidden;

}


/* =========================================================
   🌫️ LUCES DIFUSAS
   ========================================================= */

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

    content:
        "";

    position:
        fixed;

    width:
        55vw;

    height:
        55vw;

    max-width:
        650px;

    max-height:
        650px;

    left:
        -15vw;

    top:
        8vh;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.48),
            rgba(255,170,195,.18) 35%,
            transparent 70%
        );

    filter:
        blur(30px);

    pointer-events:
        none;

    z-index:
        -2;

    animation:
        mangaLightOne 14s ease-in-out infinite alternate;

}


/* =========================================================
   🌸 SEGUNDA LUZ
   ========================================================= */

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

    content:
        "";

    position:
        fixed;

    width:
        60vw;

    height:
        60vw;

    max-width:
        700px;

    max-height:
        700px;

    right:
        -20vw;

    bottom:
        -10vh;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(165,44,66,.24),
            rgba(220,150,170,.12) 38%,
            transparent 70%
        );

    filter:
        blur(45px);

    pointer-events:
        none;

    z-index:
        -2;

    animation:
        mangaLightTwo 18s ease-in-out infinite alternate;

}


/* =========================================================
   ✨ ANIMACIONES DE LUZ
   ========================================================= */

@keyframes mangaLightOne {

    0% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                12vw,
                8vh,
                0
            )
            scale(1.12);
    }

    100% {
        transform:
            translate3d(
                5vw,
                18vh,
                0
            )
            scale(.95);
    }

}


@keyframes mangaLightTwo {

    0% {
        transform:
            translate3d(
                0,
                0,
                0
            )
            scale(1);
    }

    50% {
        transform:
            translate3d(
                -10vw,
                -12vh,
                0
            )
            scale(1.15);
    }

    100% {
        transform:
            translate3d(
                -4vw,
                -5vh,
                0
            )
            scale(.92);
    }

}


/* =========================================================
   ❤️ CORAZONES DEL FONDO
   ========================================================= */

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

    position:
        relative;

}


/* =========================================================
   ✨ PARTÍCULAS DE LUZ
   ========================================================= */

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

    background:
        radial-gradient(
            circle,
            rgba(165,44,66,.10) 1px,
            transparent 1.5px
        );

    background-size:
        42px 42px;

    opacity:
        .16;

    animation:
        mangaParticles 25s linear infinite;

}


@keyframes mangaParticles {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            42px 42px;
    }

}


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

@media (max-width: 700px) {

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

        filter:
            blur(35px);

    }

}


/* =========================================================
   ♿ REDUCIR ANIMACIÓN
   ========================================================= */

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

    #main-content.book-mode::before,
    #main-content.book-mode::after,
    #main-content.book-mode
    .book-page::before {

        animation:
            none;

    }

}


/* =========================================================
   FIN — FONDO DINÁMICO V3
   ========================================================= */


/* =========================================================
   🌸 ATMÓSFERA DINÁMICA REAL — V4
   ========================================================= */

#main-content.book-mode ~ #hearts-container,
body:has(#main-content.book-mode) #hearts-container {

    z-index: 0;

    display: block;

}


/* =========================================================
   🌙 FONDO VIVO
   ========================================================= */

body:has(#main-content.book-mode) {

    background:
        linear-gradient(
            125deg,
            #f6cbd7 0%,
            #e7b9c9 28%,
            #d6a8bb 55%,
            #c78fa7 100%
        );

}


/* =========================================================
   ✨ HALO DE LUZ
   ========================================================= */

body:has(#main-content.book-mode)::before {

    content: "";

    position: fixed;

    width: 70vw;
    height: 70vw;

    max-width: 800px;
    max-height: 800px;

    left: -20vw;
    top: -15vh;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.55) 0%,
            rgba(255,190,210,.28) 35%,
            transparent 70%
        );

    filter:
        blur(35px);

    pointer-events:
        none;

    z-index: 0;

    animation:
        romanticGlow 12s ease-in-out infinite alternate;

}


/* =========================================================
   🌹 SEGUNDO HALO
   ========================================================= */

body:has(#main-content.book-mode)::after {

    content: "";

    position: fixed;

    width: 65vw;
    height: 65vw;

    max-width: 750px;
    max-height: 750px;

    right: -20vw;
    bottom: -15vh;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(130,35,65,.35) 0%,
            rgba(180,90,120,.18) 40%,
            transparent 72%
        );

    filter:
        blur(50px);

    pointer-events:
        none;

    z-index: 0;

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

}


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

@keyframes romanticGlow {

    0% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(12vw, 8vh)
            scale(1.15);
    }

    100% {
        transform:
            translate(4vw, 18vh)
            scale(.95);
    }

}


@keyframes romanticGlowTwo {

    0% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(-10vw, -8vh)
            scale(1.18);
    }

    100% {
        transform:
            translate(-4vw, -15vh)
            scale(.92);
    }

}


/* =========================================================
   ❤️ CORAZONES — MÁS ELEGANTES
   ========================================================= */

body:has(#main-content.book-mode)
.floating-heart {

    color:
        #9d2435;

    opacity:
        .18;

    filter:
        blur(.2px)
        drop-shadow(
            0 0 8px
            rgba(255,180,200,.45)
        );

}


/* =========================================================
   ✨ PARTÍCULAS
   ========================================================= */

body:has(#main-content.book-mode)
#hearts-container::before {

    content:
        "✦   ·   ✧      ·   ✦       ·   ✧";

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        rgba(255,255,255,.55);

    font-size:
        20px;

    letter-spacing:
        45px;

    white-space:
        nowrap;

    pointer-events:
        none;

    animation:
        sparkleDrift 9s ease-in-out infinite alternate;

}


@keyframes sparkleDrift {

    from {
        transform:
            translateY(20px);
        opacity:
            .35;
    }

    to {
        transform:
            translateY(-25px);
        opacity:
            .75;
    }

}


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

@media (max-width: 700px) {

    body:has(#main-content.book-mode)::before,
    body:has(#main-content.book-mode)::after {

        width:
            110vw;

        height:
            110vw;

    }

}


/* =========================================================
   ♿ ACCESIBILIDAD
   ========================================================= */

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

    body:has(#main-content.book-mode)::before,
    body:has(#main-content.book-mode)::after,
    body:has(#main-content.book-mode)
    #hearts-container::before {

        animation:
            none;

    }

}


/* =========================================================
   FIN — ATMÓSFERA V4
   ========================================================= */


/* =========================================================
   📖 LIBRO — NUEVA TEXTURA DE PÁGINA
   ========================================================= */

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

    background:

        /* brillo cálido */
        radial-gradient(
            circle at 20% 15%,
            rgba(255,210,220,.75),
            transparent 28%
        ),

        /* brillo inferior */
        radial-gradient(
            circle at 85% 85%,
            rgba(220,150,170,.28),
            transparent 32%
        ),

        /* textura */
        radial-gradient(
            circle,
            rgba(80,45,55,.035) 1px,
            transparent 1.5px
        ),

        /* papel */
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #f9f3ed 48%,
            #f5e9e5 100%
        );

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

    box-shadow:
        inset 0 0 80px rgba(120,45,65,.06),
        inset 0 0 12px rgba(80,30,45,.08),
        0 20px 60px rgba(50,20,30,.18);

}


/* =========================================================
   ✨ BRILLO ANIMADO SOBRE LA PÁGINA
   ========================================================= */

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

    content:
        "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:
        radial-gradient(
            ellipse at 0% 0%,
            rgba(255,255,255,.65),
            transparent 35%
        );

    opacity:
        .7;

    animation:
        pageGlow 12s ease-in-out infinite alternate;

}


/* =========================================================
   🌸 MOVIMIENTO DEL BRILLO
   ========================================================= */

@keyframes pageGlow {

    0% {

        transform:
            translate(
                -8%,
                -5%
            )
            scale(1);

        opacity:
            .45;

    }

    50% {

        transform:
            translate(
                12%,
                8%
            )
            scale(1.12);

        opacity:
            .75;

    }

    100% {

        transform:
            translate(
                5%,
                15%
            )
            scale(1.05);

        opacity:
            .5;

    }

}


/* =========================================================
   📜 BORDE INTERIOR
   ========================================================= */

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

    border:
        1px solid
        rgba(80,40,50,.16);

}


/* =========================================================
   🖋️ DETALLE SUPERIOR
   ========================================================= */

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

    --page-red:
        #9d2435;

    --page-ink:
        #292326;

}


/* =========================================================
   ❤️ PEQUEÑA LÍNEA EDITORIAL
   ========================================================= */

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

    position:
        relative;

    display:
        inline-block;

    color:
        var(--page-red);

    border-color:
        rgba(157,36,53,.28);

    background:
        rgba(157,36,53,.055);

    box-shadow:
        0 2px 8px
        rgba(157,36,53,.08);

}


/* =========================================================
   ♿ RESPETO POR REDUCIR MOVIMIENTO
   ========================================================= */

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

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

        animation:
            none;

    }

}


/* =========================================================
   FIN — PÁGINA V2
   ========================================================= */


/* =========================================================
   📖 LIBRO — TIPOGRAFÍA EDITORIAL V1
   ========================================================= */


/* =========================================================
   🖋️ TEXTO GENERAL DEL LIBRO
   ========================================================= */

#main-content.book-mode {

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

    color:
        #292326;

}


/* =========================================================
   ✒️ TÍTULOS PRINCIPALES
   ========================================================= */

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

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

    font-weight:
        700;

    letter-spacing:
        -.8px;

    color:
        #211c1f;

    line-height:
        1.15;

    text-wrap:
        balance;

}


/* TÍTULOS GRANDES */

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

    font-size:
        clamp(
            34px,
            7vw,
            58px
        );

}


/* TÍTULOS DE CAPÍTULO */

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

    font-size:
        clamp(
            28px,
            5vw,
            44px
        );

    margin-bottom:
        22px;

}


/* =========================================================
   🌸 ETIQUETA DE CAPÍTULO
   ========================================================= */

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

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

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        3px;

    color:
        #9d2435;

    text-transform:
        none;

    padding:
        6px 13px;

    margin-bottom:
        18px;

    border-top:
        1px solid
        rgba(157,36,53,.35);

    border-bottom:
        1px solid
        rgba(157,36,53,.35);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(157,36,53,.055),
            transparent
        );

}


/* =========================================================
   ❤️ ETIQUETA EDITORIAL
   ========================================================= */

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

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        3px;

    color:
        #9d2435;

    text-transform:
        uppercase;

    margin-bottom:
        14px;

}


/* =========================================================
   📜 TEXTO NORMAL
   ========================================================= */

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

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

    font-size:
        17px;

    line-height:
        1.8;

    color:
        #514b4e;

}


/* =========================================================
   ✨ SUBTÍTULOS
   ========================================================= */

#main-content.book-mode
.section-subtitle,
#main-content.book-mode
#intro-subtitle {

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

    font-style:
        italic;

    font-size:
        17px;

    line-height:
        1.7;

    color:
        #806b72;

}


/* =========================================================
   🌸 DIVISOR EDITORIAL
   ========================================================= */

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

    content:
        "✦  ♥  ✦";

    display:
        block;

    margin:
        34px auto 0;

    text-align:
        center;

    font-family:
        Georgia,
        serif;

    font-size:
        12px;

    letter-spacing:
        7px;

    color:
        #9d2435;

    opacity:
        .55;

}


/* =========================================================
   📖 PRIMERA LETRA — EFECTO LIBRO
   ========================================================= */

#main-content.book-mode
.intro-section
#intro-subtitle::first-letter {

    font-size:
        2.2em;

    font-weight:
        700;

    color:
        #9d2435;

    float:
        left;

    line-height:
        .8;

    margin-right:
        5px;

}


/* =========================================================
   ❤️ ENLACES / ELEMENTOS INTERACTIVOS
   ========================================================= */

#main-content.book-mode
button {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


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

@media (max-width: 700px) {

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

        font-size:
            clamp(
                32px,
                10vw,
                48px
            );

    }

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

        font-size:
            clamp(
                26px,
                8vw,
                36px
            );

    }

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

        font-size:
            16px;

        line-height:
            1.75;

    }

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

        font-size:
            11px;

        letter-spacing:
            2px;

    }

}


/* =========================================================
   FIN — TIPOGRAFÍA V1
   ========================================================= */


/* =========================================================
   🌌 LIBRO — FONDO DINÁMICO VISIBLE
   ========================================================= */

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

    background:
        transparent;

    border:
        none;

    box-shadow:
        none;

}


/* La iluminación pertenece al fondo,
   no a la hoja */

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

    display:
        none;

}


/* Mantener solamente una sombra
   muy sutil en el borde derecho */

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

    width:
        70px;

    background:
        linear-gradient(
            to left,
            rgba(60,20,35,.12),
            transparent
        );

    opacity:
        .35;

}


/* =========================================================
   ❤️ REGALO LARIMAR — DISEÑO CENTRAL
   ========================================================= */


/* =========================================================
   🌌 FONDO DEL LIBRO
   ========================================================= */

#main-content.book-mode {

    background:

        radial-gradient(
            circle at 15% 20%,
            rgba(255,105,145,.20),
            transparent 28%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(157,36,53,.16),
            transparent 30%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(255,180,200,.18),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #fff0f4,
            #f8dfe6 45%,
            #ead1d8
        );

}


/* =========================================================
   ✨ LUZ DINÁMICA
   ========================================================= */

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

    content: "";

    position: fixed;

    inset: -40%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.45),
            transparent 25%
        );

    animation:
        bookAmbientLight 14s ease-in-out infinite alternate;

    z-index: 0;

}


@keyframes bookAmbientLight {

    0% {
        transform:
            translate(-12%, -8%)
            scale(.95);
    }

    50% {
        transform:
            translate(10%, 5%)
            scale(1.08);
    }

    100% {
        transform:
            translate(-3%, 12%)
            scale(1);
    }

}


/* =========================================================
   📖 QUITAR LA HOJA QUE CUBRÍA TODO
   ========================================================= */

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

    background:
        transparent;

    border:
        none;

    box-shadow:
        none;

}


/* =========================================================
   🃏 TARJETA CENTRAL
   ========================================================= */

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

    position:
        relative;

    width:
        min(88vw, 650px);

    min-height:
        min(72vh, 680px);

    margin:
        auto;

    padding:
        clamp(45px, 7vw, 75px)
        clamp(25px, 6vw, 65px);

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    align-items:
        center;

    text-align:
        center;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,.95),
            transparent 38%
        ),

        linear-gradient(
            145deg,
            rgba(255,253,250,.97),
            rgba(255,245,247,.94)
        );

    border:
        1px solid
        rgba(120,40,60,.18);

    border-radius:
        6px;

    box-shadow:

        0 25px 70px
        rgba(90,25,45,.18),

        0 5px 18px
        rgba(90,25,45,.10),

        inset 0 0 45px
        rgba(157,36,53,.035);

    overflow:
        hidden;

    z-index:
        3;

}


/* =========================================================
   ✨ BRILLO SOBRE LA TARJETA
   ========================================================= */

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

    content:
        "";

    position:
        absolute;

    width:
        220px;

    height:
        220px;

    top:
        -120px;

    left:
        -100px;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,.9),
            transparent 68%
        );

    pointer-events:
        none;

}


/* =========================================================
   🔴 BORDE DECORATIVO
   ========================================================= */

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

    content:
        "✦  ♥  ✦";

    position:
        absolute;

    bottom:
        25px;

    left:
        50%;

    transform:
        translateX(-50%);

    margin:
        0;

    width:
        auto;

    color:
        #9d2435;

    font-size:
        13px;

    letter-spacing:
        6px;

    opacity:
        .65;

}


/* =========================================================
   💎 CAPÍTULO
   ========================================================= */

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

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border:
        none;

    background:
        transparent;

    color:
        #9d2435;

    font-family:
        Arial,
        sans-serif;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        4px;

    padding:
        8px 25px;

    margin-bottom:
        20px;

}


/* Diamante */

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

    content:
        "◆";

    position:
        absolute;

    left:
        0;

    color:
        #9d2435;

    font-size:
        12px;

}


/* =========================================================
   ❤️ CABECERA PARA NOSOTROS
   ========================================================= */

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

    position:
        relative;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        5px;

    color:
        #9d2435;

}


/* corazones laterales */

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

    content:
        "♥";

    margin-right:
        12px;

    font-size:
        10px;

}


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

    content:
        "♥";

    margin-left:
        12px;

    font-size:
        10px;

}


/* =========================================================
   ❤️ TÍTULO JEAN × LARIMAR
   ========================================================= */

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

    color:
        #8f263c;

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

    font-weight:
        700;

    text-shadow:
        1px 1px 0
        rgba(80,20,35,.08);

}


/* =========================================================
   🌹 SUBTÍTULO
   ========================================================= */

#main-content.book-mode
#intro-subtitle {

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

    font-style:
        italic;

    color:
        #9b646e;

    font-size:
        18px;

}


/* =========================================================
   ❤️ CORAZÓN CENTRAL
   ========================================================= */

#main-content.book-mode
.big-heart {

    position:
        relative;

    margin:
        35px auto 15px;

    font-size:
        clamp(60px, 14vw, 105px);

    filter:
        drop-shadow(
            0 12px 18px
            rgba(157,36,53,.28)
        );

    animation:
        centralHeart 2.8s ease-in-out infinite;

}


/* brillo superior izquierdo */

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

    content:
        "✦";

    position:
        absolute;

    top:
        12px;

    left:
        18px;

    color:
        white;

    font-size:
        18px;

    filter:
        drop-shadow(
            0 0 5px white
        );

}


@keyframes centralHeart {

    0%,
    100% {
        transform:
            scale(1);
    }

    50% {
        transform:
            scale(1.08);
    }

}


/* =========================================================
   💎 MENÚ LATERAL
   ========================================================= */

.book-dots {

    position:
        fixed;

    right:
        16px;

    top:
        50%;

    transform:
        translateY(-50%);

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    padding:
        14px 9px;

    background:
        rgba(255,250,250,.82);

    border:
        1px solid
        rgba(20,20,20,.65);

    border-radius:
        12px;

    box-shadow:
        0 10px 30px
        rgba(50,20,30,.14);

    backdrop-filter:
        blur(10px);

    z-index:
        50;

}


/* diamantes */

.book-dot {

    width:
        9px;

    height:
        9px;

    padding:
        0;

    border:
        none;

    border-radius:
        1px;

    background:
        #b58a95;

    transform:
        rotate(45deg);

    opacity:
        .55;

    transition:
        transform .25s ease,
        background .25s ease,
        opacity .25s ease;

}


/* activo */

.book-dot.active,
.book-dot:hover {

    background:
        #9d2435;

    opacity:
        1;

    transform:
        rotate(45deg)
        scale(1.35);

}


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

.music-button {

    width:
        52px;

    height:
        52px;

    border:
        1px solid
        rgba(20,20,20,.25);

    border-radius:
        50%;

    background:
        #ec6d9a;

    color:
        #64778c;

    font-size:
        22px;

    box-shadow:
        0 10px 25px
        rgba(80,20,50,.20);

    z-index:
        60;

}


/* =========================================================
   📖 NAVEGACIÓN INFERIOR
   ========================================================= */

.book-navigation {

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

    border:
        1px solid
        rgba(30,20,25,.22);

    border-radius:
        8px;

    padding:
        5px 8px;

    box-shadow:
        0 8px 25px
        rgba(60,20,35,.15);

    backdrop-filter:
        blur(10px);

    z-index:
        60;

}


.book-page-indicator {

    font-family:
        Georgia,
        serif;

    color:
        #5c303c;

    font-size:
        11px;

    letter-spacing:
        1px;

}


/* =========================================================
   ← →
   ========================================================= */

.book-nav-button {

    background:
        transparent;

    color:
        #9d2435;

    border:
        none;

    font-size:
        18px;

}


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

@media (max-width: 700px) {

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

        width:
            86vw;

        min-height:
            68vh;

        padding:
            40px 24px 55px;

    }

    .book-dots {

        right:
            7px;

        gap:
            7px;

        padding:
            11px 7px;

    }

    .book-dot {

        width:
            7px;

        height:
            7px;

    }

}


/* =========================================================
   📸 MANGA — CAPÍTULO 03
   NUESTROS RECUERDOS
   ÁLBUM DE FOTOS ROMÁNTICO
   ========================================================= */

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

    background:
        linear-gradient(
            135deg,
            #f8f3ea 0%,
            #fffdf8 48%,
            #eee7dc 100%
        );

}


/* ---------- CONTENEDOR ---------- */

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

    display: grid;

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

    gap: 34px 28px;

    max-width: 900px;

    margin:
        45px auto
        0;

}


/* ---------- FOTOGRAFÍA ---------- */

#main-content.book-mode > .book-page:nth-child(4)
.gallery-card {

    position: relative;

    overflow: visible;

    padding:
        12px
        12px
        18px;

    background:
        #fff;

    border:
        1px solid
        rgba(45,38,34,.16);

    border-radius:
        2px;

    box-shadow:
        5px 6px 0
        rgba(45,38,34,.10),
        0 14px 28px
        rgba(45,38,34,.12);

    text-align:
        left;

    transform:
        rotate(-1.2deg);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

}


/* ---------- FOTOS ALTERNADAS ---------- */

#main-content.book-mode > .book-page:nth-child(4)
.gallery-card:nth-child(even) {

    transform:
        rotate(1.3deg);

}

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

    transform:
        rotate(-.4deg);

}


/* ---------- FOTO ---------- */

#main-content.book-mode > .book-page:nth-child(4)
.gallery-card img {

    width:
        100%;

    height:
        300px;

    display:
        block;

    object-fit:
        cover;

    border-radius:
        1px;

}


/* ---------- TEXTO DE LA FOTO ---------- */

#main-content.book-mode > .book-page:nth-child(4)
.gallery-card p {

    margin:
        14px
        4px
        0;

    padding:
        0;

    color:
        #403936;

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

    font-size:
        16px;

    line-height:
        1.45;

}


/* ---------- PEQUEÑO DETALLE DECORATIVO ---------- */

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

    content:
        "♥";

    position:
        absolute;

    top:
        -13px;

    right:
        18px;

    color:
        var(--manga-red);

    font-size:
        19px;

    transform:
        rotate(12deg);

    opacity:
        .85;

}


/* ---------- EFECTO AL TOCAR / PASAR ---------- */

@media (hover: hover) {

    #main-content.book-mode > .book-page:nth-child(4)
    .gallery-card:hover {

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

        box-shadow:
            7px 9px 0
            rgba(45,38,34,.10),
            0 22px 38px
            rgba(45,38,34,.17);

    }

}


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

@media (max-width: 700px) {

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

        grid-template-columns:
            1fr;

        gap:
            30px;

        padding:
            0 8px;

    }


    #main-content.book-mode > .book-page:nth-child(4)
    .gallery-card {

        transform:
            rotate(-.7deg);

    }


    #main-content.book-mode > .book-page:nth-child(4)
    .gallery-card:nth-child(even) {

        transform:
            rotate(.8deg);

    }


    #main-content.book-mode > .book-page:nth-child(4)
    .gallery-card img {

        height:
            320px;

    }


    #main-content.book-mode > .book-page:nth-child(4)
    .gallery-card p {

        font-size:
            17px;

    }

}


/* =========================================================
   📸 CAPÍTULO 03 — FOTOS MÁS VIVAS
   ========================================================= */

#main-content.book-mode > .book-page:nth-child(4)
.gallery-card img {

    filter:
        brightness(1.06)
        contrast(1.04)
        saturate(1.12);

}


/* Evitar que la tarjeta transmita un tono apagado */

#main-content.book-mode > .book-page:nth-child(4)
.gallery-card {

    background:
        #ffffff;

}


/* Mantener el texto limpio y oscuro */

#main-content.book-mode > .book-page:nth-child(4)
.gallery-card p {

    color:
        #302b29;

}


/* =========================================================
   📸 CAPÍTULO 03 — CINTA FOTOGRÁFICA
   ========================================================= */

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

    content: "";

    position: absolute;

    top: -8px;
    left: 50%;

    width: 68px;
    height: 22px;

    transform:
        translateX(-50%)
        rotate(-2deg);

    background:
        rgba(255, 244, 205, .72);

    border:
        1px solid
        rgba(170, 145, 95, .16);

    box-shadow:
        0 2px 5px
        rgba(60, 45, 30, .08);

    opacity: .9;

    pointer-events: none;

}


/* Variación para que cada foto parezca colocada a mano */

#main-content.book-mode > .book-page:nth-child(4)
.gallery-card:nth-child(even)::after {

    transform:
        translateX(-50%)
        rotate(2.5deg);

}


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

    transform:
        translateX(-50%)
        rotate(-1deg);

}


@media (max-width: 700px) {

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

        width:
            62px;

        height:
            20px;

    }

}


/* =========================================================
   CAPÍTULO 04 — MOMENTOS QUE QUIERO VOLVER A VIVIR
   Fondo claro / estilo álbum cinematográfico
========================================================= */

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

    background:
        radial-gradient(
            circle at 20% 15%,
            rgba(233, 93, 122, 0.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(233, 93, 122, 0.06),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #fffdf9 0%,
            #fff7f8 50%,
            #f8eee9 100%
        );

    color: var(--text);
}


/* Texto principal */

#main-content.book-mode > .book-page:nth-child(5)
.section-label,
#main-content.book-mode > .book-page:nth-child(5)
h2,
#main-content.book-mode > .book-page:nth-child(5)
.section-subtitle {

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


/* Subtítulo */

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

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


/* Contenedor de videos */

#main-content.book-mode > .book-page:nth-child(5)
.video-gallery {

    position: relative;
}


/* Tarjetas */

#main-content.book-mode > .book-page:nth-child(5)
.video-memory-card {

    background:
        #fffdfb;

    border:
        2px solid
        rgba(80, 55, 45, 0.16);

    box-shadow:
        7px 7px 0 rgba(165, 31, 53, 0.16),
        0 18px 35px rgba(60, 40, 30, 0.12);
}


/* Información de cada video */

#main-content.book-mode > .book-page:nth-child(5)
.video-memory-info h3 {

    color: var(--manga-ink);

}


#main-content.book-mode > .book-page:nth-child(5)
.video-memory-info p {

    color: #66585a;

}


/* Botón de reproducción */

#main-content.book-mode > .book-page:nth-child(5)
.video-play {

    background:
        rgba(255, 255, 255, 0.94);

    color:
        var(--manga-red);

    border:
        2px solid
        rgba(165, 31, 53, 0.18);

}


/* Cierre del capítulo */

#main-content.book-mode > .book-page:nth-child(5)
.video-chapter-closing p {

    color: #66585a;
}


#main-content.book-mode > .book-page:nth-child(5)
.video-chapter-closing
.video-closing-emphasis {

    color:
        var(--manga-red);

}


/* Móvil */

@media (max-width: 700px) {

    #main-content.book-mode > .book-page:nth-child(5)
    .video-memory-card {

        box-shadow:
            5px 5px 0 rgba(165, 31, 53, 0.16),
            0 12px 25px rgba(60, 40, 30, 0.10);
    }

}


/* =========================================================
   FIX DEFINITIVO — CAPÍTULO 04
   Fondo claro y limpio
========================================================= */

#main-content.book-mode > .book-page:nth-child(5) {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(233, 93, 122, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(233, 93, 122, 0.06),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #fffdfb 0%,
            #fff8f9 50%,
            #fff1f5 100%
        ) !important;

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


/* Evitar que la sombra general del libro oscurezca la página */

#main-content.book-mode > .book-page:nth-child(5)::after {
    background: transparent !important;
    box-shadow: none !important;
}


/* Mantener el contenido por encima del fondo */

#main-content.book-mode > .book-page:nth-child(5) .section-content {
    position: relative;
    z-index: 5;
}


/* Tarjetas limpias */

#main-content.book-mode > .book-page:nth-child(5) .video-memory-card {
    background: #ffffff !important;
    color: var(--text) !important;
}


/* Texto */

#main-content.book-mode > .book-page:nth-child(5) .video-memory-info h3 {
    color: var(--text) !important;
}

#main-content.book-mode > .book-page:nth-child(5) .video-memory-info p {
    color: var(--muted) !important;
}


/* =========================================================
   FIX DEFINITIVO — CAPÍTULO 04
   Fondo claro y limpio
========================================================= */

#main-content.book-mode > .book-page:nth-child(5) {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(233, 93, 122, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(233, 93, 122, 0.06),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #fffdfb 0%,
            #fff8f9 50%,
            #fff1f5 100%
        ) !important;

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


/* Evitar que la sombra general del libro oscurezca la página */

#main-content.book-mode > .book-page:nth-child(5)::after {
    background: transparent !important;
    box-shadow: none !important;
}


/* Mantener el contenido por encima del fondo */

#main-content.book-mode > .book-page:nth-child(5) .section-content {
    position: relative;
    z-index: 5;
}


/* Tarjetas limpias */

#main-content.book-mode > .book-page:nth-child(5) .video-memory-card {
    background: #ffffff !important;
    color: var(--text) !important;
}


/* Texto */

#main-content.book-mode > .book-page:nth-child(5) .video-memory-info h3 {
    color: var(--text) !important;
}

#main-content.book-mode > .book-page:nth-child(5) .video-memory-info p {
    color: var(--muted) !important;
}


/* =========================================================
   FIX DEFINITIVO — CAPÍTULO 04
   Fondo claro y limpio
========================================================= */

#main-content.book-mode > .book-page:nth-child(5) {
    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(233, 93, 122, 0.08),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 85%,
            rgba(233, 93, 122, 0.06),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #fffdfb 0%,
            #fff8f9 50%,
            #fff1f5 100%
        ) !important;

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


/* Evitar que la sombra general del libro oscurezca la página */

#main-content.book-mode > .book-page:nth-child(5)::after {
    background: transparent !important;
    box-shadow: none !important;
}


/* Mantener el contenido por encima del fondo */

#main-content.book-mode > .book-page:nth-child(5) .section-content {
    position: relative;
    z-index: 5;
}


/* Tarjetas limpias */

#main-content.book-mode > .book-page:nth-child(5) .video-memory-card {
    background: #ffffff !important;
    color: var(--text) !important;
}


/* Texto */

#main-content.book-mode > .book-page:nth-child(5) .video-memory-info h3 {
    color: var(--text) !important;
}

#main-content.book-mode > .book-page:nth-child(5) .video-memory-info p {
    color: var(--muted) !important;
}


/* =========================================================
   CAPÍTULO 04 — ESPACIO PARA NAVEGACIÓN INFERIOR
========================================================= */

#main-content.book-mode > .book-page:nth-child(5) .section-content {
    padding-bottom: 110px;
}


@media (max-width: 700px) {

    #main-content.book-mode > .book-page:nth-child(5) .section-content {
        padding-bottom: 125px;
    }

}


/* =========================================================
   ❤️ CAPÍTULO 05 — TE AMO POR...
   Página de manga romántico
   ========================================================= */

#main-content.book-mode > .book-page:nth-child(6) {
    background:
        radial-gradient(circle at 15% 20%, rgba(233, 93, 122, 0.10), transparent 30%),
        radial-gradient(circle at 85% 75%, rgba(233, 93, 122, 0.08), transparent 32%),
        linear-gradient(135deg, #fffdf9 0%, #fff7f8 50%, #fff0f4 100%);
    color: var(--manga-ink);
}

#main-content.book-mode > .book-page:nth-child(6) .section-label {
    color: var(--manga-red) !important;
    letter-spacing: 0.16em;
    font-weight: 800;
}

#main-content.book-mode > .book-page:nth-child(6) h2 {
    color: var(--manga-ink) !important;
    margin-bottom: 35px;
}

#main-content.book-mode > .book-page:nth-child(6) .love-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    max-width: 760px;
    margin: 0 auto;
    padding: 10px 8px 70px;
}

#main-content.book-mode > .book-page:nth-child(6) .love-item {
    min-height: 78px;
    padding: 20px 22px;
    border: 2px solid var(--manga-ink);
    border-radius: 4px;
    background: rgba(255, 253, 248, 0.96);
    color: var(--manga-ink);
    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.72);
    font-family: Georgia, serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    position: relative;
    overflow: visible;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#main-content.book-mode > .book-page:nth-child(6) .love-item::before {
    content: "♡";
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--manga-red);
    font-size: 24px;
    font-family: Georgia, serif;
}

#main-content.book-mode > .book-page:nth-child(6) .love-item::after {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 58px;
    height: 18px;
    transform: translateX(-50%) rotate(-2deg);
    background: rgba(255, 214, 222, 0.72);
    border: 1px solid rgba(165, 31, 53, 0.10);
    pointer-events: none;
}

#main-content.book-mode > .book-page:nth-child(6) .love-item:nth-child(odd) {
    transform: rotate(-0.8deg);
}

#main-content.book-mode > .book-page:nth-child(6) .love-item:nth-child(even) {
    transform: rotate(0.8deg);
}

#main-content.book-mode > .book-page:nth-child(6) .love-item:last-child {
    grid-column: 1 / -1;
    max-width: 360px;
    width: 100%;
    justify-self: center;
}

@media (hover: hover) {
    #main-content.book-mode > .book-page:nth-child(6) .love-item:hover {
        transform: translateY(-5px) rotate(0deg);
        box-shadow: 7px 9px 0 rgba(0, 0, 0, 0.72);
    }
}

@keyframes lovePanelIn {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.96) rotate(0deg);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

#main-content.book-mode > .book-page:nth-child(6) .love-item {
    animation: lovePanelIn 0.55s ease both;
}

#main-content.book-mode > .book-page:nth-child(6) .love-item:nth-child(1) {
    animation-delay: 0.08s;
}

#main-content.book-mode > .book-page:nth-child(6) .love-item:nth-child(2) {
    animation-delay: 0.16s;
}

#main-content.book-mode > .book-page:nth-child(6) .love-item:nth-child(3) {
    animation-delay: 0.24s;
}

#main-content.book-mode > .book-page:nth-child(6) .love-item:nth-child(4) {
    animation-delay: 0.32s;
}

#main-content.book-mode > .book-page:nth-child(6) .love-item:nth-child(5) {
    animation-delay: 0.40s;
}

@media (max-width: 700px) {
    #main-content.book-mode > .book-page:nth-child(6) .love-list {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 8px 8px 80px;
    }

    #main-content.book-mode > .book-page:nth-child(6) .love-item {
        min-height: 70px;
        font-size: 16px;
        padding: 18px;
    }

    #main-content.book-mode > .book-page:nth-child(6) .love-item:last-child {
        grid-column: auto;
        max-width: none;
    }
}

/* =========================================================
   🎁 CAPÍTULO 06 — BÚSQUEDA DEL SECRETO
   ========================================================= */

#main-content.book-mode
.secret-section
.secret-discovery-card {

    max-width: 590px;

}

.secret-clue {

    display: flex;

    align-items: center;

    gap: 15px;

    margin: 25px auto;

    padding: 18px 20px;

    border:
        1px dashed
        rgba(165,31,53,.35);

    background:
        #fff5f7;

    color:
        #66585a;

    font-family:
        Georgia,
        serif;

    line-height:
        1.7;

}

.secret-clue span {

    flex-shrink: 0;

    font-size:
        30px;

}

.secret-clue p {

    margin:
        0 !important;

}

.secret-clue-special {

    background:
        #fffdf8;

}

.secret-search-next {

    padding:
        13px 24px;

    border:
        2px solid
        var(--manga-ink);

    border-radius:
        999px;

    background:
        #fffdf8;

    color:
        var(--manga-ink);

    box-shadow:
        4px 4px 0 rgba(0,0,0,.7);

    font-family:
        Georgia,
        serif;

    font-weight:
        bold;

    cursor:
        pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}

.secret-search-next:hover {

    transform:
        translateY(-2px);

    box-shadow:
        6px 6px 0 rgba(0,0,0,.7);

    background:
        #fff0f4;

}

.secret-search-next:active {

    transform:
        translate(2px,2px);

    box-shadow:
        2px 2px 0 rgba(0,0,0,.7);

}

.secret-question {

    margin:
        25px 0;

    color:
        var(--manga-red);

    font-family:
        Georgia,
        serif;

    font-size:
        21px;

    font-weight:
        bold;

    line-height:
        1.6;

}

.secret-reveal-button {

    background:
        #fff0f4;

}

.secret-confession {

    margin:
        20px auto 28px;

    padding:
        22px;

    border-left:
        3px solid
        var(--manga-red);

    background:
        #fff5f7;

    color:
        var(--manga-ink);

    font-family:
        Georgia,
        serif;

    font-size:
        19px;

    line-height:
        1.8;

}

.secret-final-card {

    animation:
        secretFinalReveal .9s cubic-bezier(.2,.8,.2,1);

}

@keyframes secretFinalReveal {

    0% {

        opacity: 0;

        transform:
            scale(.88)
            translateY(25px);

    }

    60% {

        transform:
            scale(1.03)
            translateY(-4px);

    }

    100% {

        opacity: 1;

        transform:
            scale(1)
            translateY(0);

    }

}

@media (max-width: 700px) {

    .secret-clue {

        align-items:
            flex-start;

        padding:
            16px;

    }

    .secret-question {

        font-size:
            19px;

    }

    .secret-confession {

        padding:
            18px;

        font-size:
            17px;

    }

}


/* =========================================================
   💍 CAPÍTULO 07 — PARA TODA LA VIDA
   ========================================================= */

#main-content.book-mode > .book-page:nth-of-type(7)
.marriage-section {
    background:
        radial-gradient(
            circle at center,
            #fffdf8 0%,
            #f1e9dc 65%,
            #e4dacb 100%
        );
}

#main-content.book-mode > .book-page:nth-of-type(7)
#marriage-title {
    margin-bottom: 30px;

    color: var(--manga-ink);

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

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

    line-height: 1.15;

    text-align: center;
}

/* ---------- INTRO ---------- */

.marriage-intro {
    max-width: 680px;

    margin: 0 auto 35px;

    padding: 28px 24px 30px;

    background:
        var(--manga-paper);

    border:
        3px solid
        var(--manga-ink);

    box-shadow:
        7px 7px 0
        var(--manga-red);

    text-align: center;
}

.marriage-ring {
    margin-bottom: 12px;

    font-size: 54px;

    animation:
        marriageRing 2.5s ease-in-out infinite;
}

.marriage-date {
    display: inline-block;

    margin-bottom: 18px;

    padding: 5px 13px;

    background:
        var(--manga-ink);

    color:
        var(--manga-white);

    font-family:
        Arial,
        sans-serif;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 2.5px;

    box-shadow:
        4px 4px 0
        var(--manga-red);
}

.marriage-intro h3 {
    margin:
        5px 0 16px;

    color:
        var(--manga-red);

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

    font-size:
        clamp(30px, 7vw, 46px);

    line-height: 1.1;

    font-style: italic;
}

.marriage-intro-text {
    max-width: 560px;

    margin:
        0 auto;

    color:
        var(--manga-ink);

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

    font-size: 18px;

    line-height: 1.8;
}

/* ---------- HISTORIA ---------- */

.marriage-story {
    max-width: 680px;

    margin:
        0 auto;
}

.marriage-paragraph {
    position: relative;

    display: flex;

    align-items: flex-start;

    gap: 18px;

    margin-bottom: 18px;

    padding:
        20px 22px;

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

    border:
        2px solid
        var(--manga-ink);

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

    opacity: 0;

    animation:
        marriageParagraphReveal
        .65s
        ease
        forwards;
}

.marriage-paragraph:nth-child(1) {
    animation-delay: .10s;
}

.marriage-paragraph:nth-child(2) {
    animation-delay: .20s;
}

.marriage-paragraph:nth-child(3) {
    animation-delay: .30s;
}

.marriage-paragraph:nth-child(4) {
    animation-delay: .40s;
}

.marriage-paragraph:nth-child(5) {
    animation-delay: .50s;
}

.marriage-paragraph:nth-child(6) {
    animation-delay: .60s;
}

.marriage-number {
    flex:
        0 0 auto;

    display: flex;

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

    width: 34px;
    height: 34px;

    background:
        var(--manga-ink);

    color:
        var(--manga-white);

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    font-weight: 900;

    transform:
        rotate(-4deg);
}

.marriage-paragraph p {
    margin: 0;

    color:
        var(--manga-ink);

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

    font-size: 18px;

    line-height: 1.75;

    text-align: left;
}

/* ---------- MOMENTO FINAL ---------- */

.marriage-milestone {
    margin-top: 26px;

    background:
        var(--manga-white);

    border:
        3px solid
        var(--manga-red);

    box-shadow:
        6px 6px 0
        var(--manga-ink);
}

.marriage-milestone .marriage-number {
    background:
        var(--manga-red);

    transform:
        rotate(4deg);
}

.marriage-milestone p {
    color:
        var(--manga-red);

    font-weight:
        700;
}

/* ---------- VOTO ---------- */

.marriage-vow {
    max-width: 680px;

    margin:
        42px auto 10px;

    padding:
        32px 24px;

    text-align: center;
}

.marriage-vow-line {
    color:
        var(--manga-red);

    font-size: 24px;

    letter-spacing: 8px;
}

.marriage-vow p {
    margin:
        18px 0;

    color:
        var(--manga-ink);

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

    font-size:
        clamp(20px, 4vw, 27px);

    line-height: 1.6;

    font-style: italic;
}

.marriage-vow-name {
    margin-top: 20px;

    color:
        var(--manga-red);

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size: 28px;

    font-weight: 700;
}

/* ---------- ANIMACIONES ---------- */

@keyframes marriageParagraphReveal {

    from {
        opacity: 0;

        transform:
            translateY(20px)
            rotate(-.5deg);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            rotate(0);
    }

}

@keyframes marriageRing {

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

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

}

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

@media (max-width: 700px) {

    #main-content.book-mode > .book-page:nth-of-type(7)
    .marriage-intro {

        padding:
            24px 18px 26px;
    }

    .marriage-paragraph {

        gap: 12px;

        padding:
            17px 15px;
    }

    .marriage-number {

        width: 29px;
        height: 29px;

        font-size: 9px;
    }

    .marriage-paragraph p {

        font-size: 16px;

        line-height: 1.7;
    }

    .marriage-vow {

        padding:
            25px 15px;
    }

}


/* =========================================================
   ========================================================= */

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
    width: min(820px, 100%) !important;
    margin: 30px auto !important;
    padding: 20px 10px !important;
    box-sizing: border-box !important;
}


/* =========================================================
   TARJETA
   ========================================================= */

    position: relative !important;

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

    width: 100% !important;
    min-height: 430px !important;

    box-sizing: border-box !important;

    margin: 0 !important;
    padding: 96px 28px 28px !important;

    background: #fffdf8 !important;

    border: 4px solid #292624 !important;
    border-radius: 0 !important;

    box-shadow: 9px 9px 0 #8f2940 !important;

    overflow: hidden !important;

    color: #292624 !important;

    transform: rotate(-0.6deg) !important;
}


/* SEGUNDA TARJETA */

#main-content.book-mode
    transform: rotate(0.6deg) !important;
}


/* =========================================================
   BORDE INTERIOR
   ========================================================= */

#main-content.book-mode

    content: "" !important;

    position: absolute !important;

    inset: 10px !important;

    border: 2px dashed rgba(143,41,64,.55) !important;

    pointer-events: none !important;

    z-index: 1 !important;
}


/* =========================================================
   SELLO "PARA TI"
   ========================================================= */

#main-content.book-mode

    content: "PARA\A TI" !important;

    white-space: pre !important;

    position: absolute !important;

    top: 14px !important;
    left: 50% !important;

    width: 70px !important;
    height: 70px !important;

    display: flex !important;

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

    box-sizing: border-box !important;

    transform:
        translateX(-50%)
        rotate(-6deg) !important;

    background: #8f2940 !important;

    border: 3px solid #292624 !important;
    border-radius: 50% !important;

    color: #fffdf8 !important;

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

    font-size: 10px !important;
    font-weight: 900 !important;

    line-height: 1.05 !important;
    letter-spacing: 1.5px !important;

    text-align: center !important;

    box-shadow:
        3px 3px 0 rgba(41,38,36,.25) !important;

    z-index: 20 !important;
}


/* =========================================================
   ICONO
   ========================================================= */

#main-content.book-mode

    position: relative !important;

    flex: 0 0 auto !important;

    width: 100px !important;
    height: 100px !important;

    display: flex !important;

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

    margin: 28px auto 18px !important;

    box-sizing: border-box !important;

    background: #f8dfe1 !important;

    border: 4px solid #292624 !important;
    border-radius: 50% !important;

    font-size: 50px !important;
    line-height: 1 !important;

    z-index: 5 !important;
}


/* =========================================================
   CÍRCULO ROJO DETRÁS DEL ICONO
   ========================================================= */

#main-content.book-mode

    content: "" !important;

    position: absolute !important;

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

    top: 8px !important;
    left: 8px !important;

    box-sizing: border-box !important;

    background: #b8475c !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;

    transform: none !important;

    pointer-events: none !important;

    z-index: -1 !important;
}


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

#main-content.book-mode

    position: relative !important;

    flex: 0 0 auto !important;

    width: 100% !important;

    margin: 0 0 10px !important;
    padding: 0 8px !important;

    box-sizing: border-box !important;

    color: #7d2337 !important;

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

    font-size: clamp(21px, 2.5vw, 27px) !important;

    font-weight: 900 !important;

    line-height: 1.15 !important;

    text-align: center !important;

    z-index: 5 !important;
}


/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

#main-content.book-mode

    position: relative !important;

    flex: 1 1 auto !important;

    width: 100% !important;

    min-height: 48px !important;

    margin: 0 0 18px !important;
    padding: 0 8px !important;

    box-sizing: border-box !important;

    color: #554b45 !important;

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

    font-size: 15px !important;

    line-height: 1.55 !important;

    text-align: center !important;

    z-index: 5 !important;
}


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

#main-content.book-mode

    position: relative !important;

    flex: 0 0 auto !important;

    width: 86% !important;
    min-height: 48px !important;

    margin: 0 auto !important;

    padding: 12px 14px !important;

    box-sizing: border-box !important;

    background: #292624 !important;

    border: 2px solid #292624 !important;
    border-radius: 0 !important;

    color: #fffdf8 !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size: 11px !important;
    font-weight: 900 !important;

    letter-spacing: 1.8px !important;

    text-transform: uppercase !important;

    box-shadow: 5px 5px 0 #8f2940 !important;

    cursor: pointer !important;

    z-index: 6 !important;
}


/* =========================================================
   ========================================================= */

#main-content.book-mode

    opacity: .65 !important;

    background: #eee9e3 !important;

    filter: grayscale(.2) !important;
}


#main-content.book-mode

    content: "CANJEADO" !important;

    top: 24px !important;

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

    padding: 9px 15px !important;

    border-radius: 0 !important;

    background: #292624 !important;

    color: #fffdf8 !important;

    transform:
        translateX(-50%)
        rotate(-7deg) !important;
}


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

@media (max-width: 700px) {

    #main-content.book-mode

        grid-template-columns: 1fr !important;

        width: 75% !important;
        max-width: 360px !important;

        gap: 34px !important;

        margin: 26px auto !important;

        padding: 16px 0 20px !important;
    }


    #main-content.book-mode

        min-height: 410px !important;

        padding:
            94px
            22px
            25px !important;
    }


    #main-content.book-mode

        width: 94px !important;
        height: 94px !important;

        margin-bottom: 18px !important;

        font-size: 48px !important;
    }


    #main-content.book-mode

        font-size: 23px !important;
    }


    #main-content.book-mode

        font-size: 14px !important;
        line-height: 1.55 !important;
    }


    #main-content.book-mode

        width: 86% !important;
    }

}

/* =========================================================
   ========================================================= */

    content: "" !important;
    position: absolute !important;
    inset: 10px !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    left: 10px !important;

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

    border: 2px dashed rgba(143,41,64,.55) !important;
    border-radius: 0 !important;

    background: transparent !important;

    transform: none !important;
    box-shadow: none !important;

    pointer-events: none !important;
    z-index: 1 !important;
}

    content: "PARA\A TI" !important;

    position: absolute !important;

    top: 14px !important;
    left: 50% !important;

    width: 70px !important;
    height: 70px !important;

    inset: auto auto auto 50% !important;

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

    box-sizing: border-box !important;

    transform:
        translateX(-50%)
        rotate(-6deg) !important;

    background: #8f2940 !important;

    border: 3px solid #292624 !important;
    border-radius: 50% !important;

    color: #fffdf8 !important;

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

    font-size: 10px !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    letter-spacing: 1.5px !important;
    text-align: center !important;

    box-shadow:
        3px 3px 0 rgba(41,38,36,.25) !important;

    white-space: pre !important;

    z-index: 20 !important;
}

    position: relative !important;
    z-index: 10 !important;
}

    content: "" !important;

    position: absolute !important;

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

    top: 8px !important;
    left: 8px !important;

    border-radius: 50% !important;

    background: #b8475c !important;

    transform: none !important;
    box-shadow: none !important;

    z-index: -1 !important;
}


/* =========================================================
   ========================================================= */

/* ELIMINAR COMPLETAMENTE EL SELLO "PARA TI" */

#main-content.book-mode
    content: none !important;
    display: none !important;
}


/* =========================================================
   CÍRCULO DE LOS EMOJIS
   ========================================================= */

#main-content.book-mode

    position: relative !important;

    width: 100px !important;
    height: 100px !important;

    margin: 20px auto 18px !important;

    box-sizing: border-box !important;

    border: 4px solid #292624 !important;
    border-radius: 50% !important;

    background: #f8dfe1 !important;

    overflow: hidden !important;

    z-index: 5 !important;
}


/* RELLENO ROJO INTERNO */

#main-content.book-mode

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

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

    box-sizing: border-box !important;

    border: none !important;
    border-radius: 50% !important;

    background: #b8475c !important;

    transform: none !important;

    box-shadow: none !important;

    pointer-events: none !important;

    z-index: -1 !important;
}


/* =========================================================
   🎡 CAPÍTULO 10 — RULETA DEL AMOR
   ========================================================= */

#main-content.book-mode .wheel-wrapper {
    position: relative;

    width: min(330px, 82vw);
    aspect-ratio: 1 / 1;

    margin: 42px auto 36px;
}


#main-content.book-mode .wheel {

    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    counter-reset: wheel-number;

    border:
        5px solid
        var(--manga-ink);

    border-radius: 50%;

    background:
        conic-gradient(
            #e85d75 0deg 60deg,
            #f4c2c2 60deg 120deg,
            #e85d75 120deg 180deg,
            #f4c2c2 180deg 240deg,
            #e85d75 240deg 300deg,
            #f4c2c2 300deg 360deg
        );

    box-shadow:
        8px 8px 0
        var(--manga-red);

    transition:
        transform 4s cubic-bezier(.12,.72,.08,1);
}


#main-content.book-mode .wheel-option {

    position: absolute;

    inset: 0;

    display: flex;

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

    pointer-events: none;

    transform:
        rotate(
            calc(
                var(--i) * (360deg / var(--count))
            )
        );
}


#main-content.book-mode .wheel-option span {
    display: none;
}





#main-content.book-mode .wheel-center {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 82px;
    height: 82px;

    display: flex;

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

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

    z-index: 10;

    border:
        4px solid
        var(--manga-ink);

    border-radius: 50%;

    background:
        #fffdf9;

    box-shadow:
        4px 4px 0
        var(--manga-red);

    font-size: 34px;
}


#main-content.book-mode .wheel-pointer {

    position: absolute;

    top: -34px;
    left: 50%;

    transform:
        translateX(-50%);

    z-index: 30;

    color:
        var(--manga-red);

    font-size: 48px;

    line-height: 1;

    filter:
        drop-shadow(
            2px 2px 0
            var(--manga-ink)
        );
}


#main-content.book-mode .wheel-result {

    width:
        min(92%, 600px);

    min-height: 0;

    margin:
        28px auto 0;

    padding:
        16px 20px;

    box-sizing:
        border-box;

    border:
        3px solid
        var(--manga-ink);

    border-radius:
        4px;

    background:
        #fffdf9;

    color:
        var(--manga-ink);

    font-size:
        17px;

    font-weight:
        700;

    line-height:
        1.5;

    text-align:
        center;

    box-shadow:
        5px 5px 0
        var(--manga-red);
}


#main-content.book-mode .wheel-result:empty {
    display: none;
}


#main-content.book-mode #spin-wheel {

    display: block;

    margin:
        0 auto;
}


@media (max-width: 500px) {

    #main-content.book-mode .wheel-wrapper {

        width:
            min(78vw, 285px);

        margin:
            38px auto 32px;
    }


    #main-content.book-mode .wheel-center {

        width: 68px;
        height: 68px;

        font-size: 28px;
    }


    


    #main-content.book-mode .wheel-pointer {

        top: -30px;

        font-size: 42px;
    }


    #main-content.book-mode .wheel-result {

        width:
            94%;

        padding:
            15px 14px;

        font-size:
            15px;
    }

}


/* =========================================================
   FIN CAPÍTULO 10 — RULETA
   ========================================================= */