/* =========================================================
   CORATTO PET · HISTORIA
   Libro físico en escritorio / cuento vertical en móvil
   ========================================================= */

.history-page {
    --history-ink: #342219;
    --history-ink-soft: #664f40;
    --history-muted: #7d695a;
    --history-gold: #b88742;
    --history-gold-soft: #d8b36f;
    --history-blue: #7598a5;

    --history-stage-width: min(1480px, calc(100vw - 88px));
    --history-stage-height: clamp(500px, 61vh, 680px);

    --history-paper: #fff9ed;
    --history-paper-warm: #f8ead2;
   --history-paper-edge: #d7bd94;

    --history-heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-8-4.9-10.5-10A5.7 5.7 0 0 1 12 6.1 5.7 5.7 0 0 1 22.5 11C20 16.1 12 21 12 21Z'/%3E%3C/svg%3E");

    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: var(--history-ink);

    background:
        radial-gradient(circle at 12% 10%, rgb(255 249 236 / 34%), transparent 23rem),
        radial-gradient(circle at 89% 18%, rgb(117 152 165 / 12%), transparent 25rem),
        radial-gradient(circle at 45% 74%, rgb(184 135 66 / 8%), transparent 30rem),
        linear-gradient(180deg, #eddec9 0%, #e8d3b7 48%, #dfc5a5 100%);
}

.history-page::before,
.history-page::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Patitas sueltas */
.history-page::before {
    background: #ad7835;
    opacity: 0.09;

    -webkit-mask-image:
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask);
    mask-image:
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask),
        var(--paw-mask);

    -webkit-mask-size:
        7.8rem 7.8rem,
        3.2rem 3.2rem,
        4.6rem 4.6rem,
        5.8rem 5.8rem,
        3.6rem 3.6rem,
        6rem 6rem,
        2.8rem 2.8rem,
        4.3rem 4.3rem,
        5rem 5rem;
    mask-size:
        7.8rem 7.8rem,
        3.2rem 3.2rem,
        4.6rem 4.6rem,
        5.8rem 5.8rem,
        3.6rem 3.6rem,
        6rem 6rem,
        2.8rem 2.8rem,
        4.3rem 4.3rem,
        5rem 5rem;

    -webkit-mask-position:
        4% 8%,
        23% 24%,
        78% 12%,
        92% 38%,
        13% 51%,
        82% 63%,
        36% 76%,
        7% 88%,
        66% 94%;
    mask-position:
        4% 8%,
        23% 24%,
        78% 12%,
        92% 38%,
        13% 51%,
        82% 63%,
        36% 76%,
        7% 88%,
        66% 94%;
}

/* Corazones discretos */
.history-page::after {
    background: #d29a54;
     opacity: 0.085;

    -webkit-mask-image:
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask);
    mask-image:
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask);

    -webkit-mask-size:
        2.5rem 2.5rem,
        4.2rem 4.2rem,
        2rem 2rem,
        3.2rem 3.2rem,
        2.4rem 2.4rem,
        4rem 4rem,
        2.2rem 2.2rem;
    mask-size:
        2.5rem 2.5rem,
        4.2rem 4.2rem,
        2rem 2rem,
        3.2rem 3.2rem,
        2.4rem 2.4rem,
        4rem 4rem,
        2.2rem 2.2rem;

    -webkit-mask-position:
        17% 17%,
        69% 28%,
        43% 39%,
        94% 54%,
        24% 67%,
        73% 82%,
        38% 93%;
    mask-position:
        17% 17%,
        69% 28%,
        43% 39%,
        94% 54%,
        24% 67%,
        73% 82%,
        38% 93%;
}

.history-page__shell {
    position: relative;
    z-index: 1;

    width: min(1600px, calc(100% - 56px));
    margin-inline: auto;

    padding: clamp(2.5rem, 4.2vw, 4.7rem) 0 clamp(4rem, 6vw, 6rem);
}

/* =========================================================
   HERO
   ========================================================= */

.history-page__header {
    position: relative;
    width: 100%;
    margin: 0 auto clamp(1.9rem, 2.6vw, 2.8rem);
    padding-bottom: 0.45rem;
    text-align: center;
}

.history-page__header .public-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;

    margin: 0 0 0.72rem;

    color: #87551f;

    font-family: var(--sans);
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.history-page__header .public-eyebrow::before,
.history-page__header .public-eyebrow::after {
    content: "";
    width: clamp(2.8rem, 6vw, 6.5rem);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(184 135 66 / 56%));
}

.history-page__header .public-eyebrow::after {
    background: linear-gradient(90deg, rgb(184 135 66 / 56%), transparent);
}

.history-page__header h1 {
    width: 100%;
    max-width: none;
    margin: 0;

    color: var(--history-ink);

    font-family: var(--serif);
    font-size: clamp(3.2rem, 5.2vw, 6.15rem);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.046em;

    text-wrap: balance;
}

.history-page__header > p {
    width: min(100%, 760px);
    margin: 0.9rem auto 0;

    color: var(--history-muted);

    font-family: var(--sans);
    font-size: clamp(0.9rem, 0.95vw, 1.02rem);
    line-height: 1.55;
}
/* =========================================================
   MÚSICA DE LA HISTORIA
   ========================================================= */

.history-music-toggle {
    position: absolute;
    top: clamp(2.7rem, 4.2vw, 4.7rem);
    right: 0;
    z-index: 8;

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

    width: clamp(6.3rem, 7.4vw, 8.25rem);
    aspect-ratio: 1;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: transparent;
    box-shadow: none;

    cursor: pointer;

    transform-origin: center;

    animation: historyMusicIntro 1.8s cubic-bezier(.2, .78, .25, 1) 0.28s both;

    transition:
        transform 220ms cubic-bezier(.2, .75, .25, 1),
        filter 220ms ease;
}

.history-music-toggle::before {
    content: "";

    position: absolute;
    inset: 16%;
    z-index: -1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgb(255 241 209 / 90%) 0%,
            rgb(232 197 135 / 38%) 42%,
            rgb(184 135 66 / 0%) 76%
        );

    opacity: 0.82;
    filter: blur(7px);

    animation: historyMusicHalo 2.8s ease-in-out infinite;
}

.history-music-toggle::after {
    content: "";

    position: absolute;
    inset: 11%;
    z-index: -2;

    border: 2px dashed rgb(184 135 66 / 34%);
    border-radius: 50%;

    opacity: 0.75;

    animation: historyMusicOrbit 12s linear infinite;
}

.history-music-toggle__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;

    filter:
        drop-shadow(0 0.7rem 0.85rem rgb(91 57 25 / 16%))
        saturate(1.02);

    animation: historyMusicIdle 3.1s ease-in-out infinite;

    transition:
        transform 220ms cubic-bezier(.2, .75, .25, 1),
        filter 220ms ease;
}

.history-music-toggle:hover {
    transform: translateY(-4px) scale(1.08);
}

.history-music-toggle:hover::before {
    opacity: 1;
    filter: blur(9px);
}

.history-music-toggle:hover .history-music-toggle__image {
    filter:
        drop-shadow(0 1rem 1.1rem rgb(91 57 25 / 23%))
        saturate(1.08);
}

.history-music-toggle:focus-visible {
    outline: 3px solid rgb(184 135 66 / 30%);
    outline-offset: 5px;
}

/* Música activa */
.history-music-toggle[aria-pressed="true"]::before {
    animation: historyMusicHaloActive 1.9s ease-in-out infinite;
}

.history-music-toggle[aria-pressed="true"] .history-music-toggle__image {
    animation: historyMusicPlaying 2.2s ease-in-out infinite;

    filter:
        drop-shadow(0 0.95rem 1.2rem rgb(126 81 29 / 24%))
        saturate(1.08);
}

.history-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

.history-music-toggle__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;

    filter: drop-shadow(0 0.55rem 0.65rem rgb(91 57 25 / 12%));

    transition:
        transform 220ms cubic-bezier(.2, .75, .25, 1),
        filter 220ms ease;
}

/* Invitación sutil a interactuar */
.history-music-toggle:hover {
    transform: translateY(-3px) scale(1.055);
}

.history-music-toggle:hover .history-music-toggle__image {
    filter:
        drop-shadow(0 0.8rem 0.9rem rgb(91 57 25 / 18%))
        saturate(1.05);
}

.history-music-toggle:focus-visible {
    outline: 3px solid rgb(184 135 66 / 30%);
    outline-offset: 5px;
}

/* Música activa */
.history-music-toggle[aria-pressed="true"] .history-music-toggle__image {
    animation: historyMusicPlaying 2.4s ease-in-out infinite;

    filter:
        drop-shadow(0 0.75rem 0.95rem rgb(126 81 29 / 20%))
        saturate(1.06);
}

.history-sr-only {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}

/* =========================================================
   LIBRO FÍSICO
   ========================================================= */

.history-desktop {
    display: block;
}

.history-mobile {
    display: none;
}

.history-book-stage {
    position: relative;

    width: var(--history-stage-width);
    margin-inline: auto;

    padding: 0.72rem 0.72rem 2.35rem;

    perspective: 2400px;
    perspective-origin: 50% 46%;
}

/* Cubierta */
.history-book-stage::before {
    content: "";

    position: absolute;
    inset: 1rem -0.85rem 1.35rem;
    z-index: -4;

    border: 1px solid rgb(53 32 17 / 25%);
    border-radius: 1.9rem 1.9rem 1.35rem 1.35rem;

    background:
        radial-gradient(circle at 17% 8%, rgb(255 255 255 / 8%), transparent 14rem),
        linear-gradient(145deg, #7d593b 0%, #5d3f29 49%, #40291b 100%);

    box-shadow:
        0 2rem 4.2rem rgb(61 37 20 / 25%),
        inset 0 1px 0 rgb(255 255 255 / 10%);
}

/* Canto de hojas */
.history-book-stage::after {
    content: "";

    position: absolute;
    left: 1.85rem;
    right: 1.85rem;
    bottom: 1.47rem;
    z-index: -2;

    height: 0.94rem;

    border-radius: 0 0 1rem 1rem;

    background:
        repeating-linear-gradient(
            180deg,
            #cdb184 0 1px,
            #f7e7ca 1px 3px
        );

    box-shadow: 0 0.55rem 0.9rem rgb(65 39 19 / 14%);
}

.history-book {
    position: relative;

    width: 100%;
    height: var(--history-stage-height);

    outline: none;

    transform-style: preserve-3d;
}

.history-book:focus-visible {
    border-radius: 1.5rem;
    outline: 3px solid rgb(184 135 66 / 28%);
    outline-offset: 1.15rem;
}

/* Página izquierda inicial */
.history-book__base-left {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;

    width: 50%;
    height: 100%;
}

/* Lomo */
.history-book__gutter {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    z-index: 1;

    width: 2.35rem;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgb(69 42 22 / 5%) 0%,
            rgb(255 255 255 / 22%) 35%,
            rgb(255 255 255 / 38%) 50%,
            rgb(255 255 255 / 18%) 65%,
            rgb(69 42 22 / 5%) 100%
        );

    opacity: 0.72;
    filter: none;

    transform: translateX(-50%);

    transition:
        width 180ms ease,
        opacity 180ms ease,
        filter 180ms ease;
}

.history-book-stage.is-turning-next .history-book__gutter,
.history-book-stage.is-turning-previous .history-book__gutter {
    width: 2.9rem;
    opacity: 0.82;
    filter: none;
}

/* =========================================================
   PILA DE HOJAS
   ========================================================= */

.history-sheet {
    position: absolute;
    top: 0;
    left: 50%;

    width: 50%;
    height: 100%;

    z-index: var(--sheet-initial-z);

    transform: rotateY(0deg);
    transform-origin: left center;
    transform-style: preserve-3d;
}

.history-sheet.is-turning {
    will-change: transform;
}

.history-sheet.is-flipped {
    z-index: var(--sheet-flipped-z);
    transform: rotateY(-180deg);
}

.history-sheet__face {
    position: absolute;
    inset: 0;

    overflow: hidden;

    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 18% 14%, rgb(255 243 214 / 72%), transparent 28%),
        radial-gradient(circle at 82% 76%, rgb(244 214 164 / 30%), transparent 30%),
        linear-gradient(
            180deg,
            #fffaf1 0%,
            #fdf5e6 52%,
            #f8edd9 100%
        );
    box-shadow:
        inset 0 0 0 1px rgb(177 139 90 / 12%),
        inset 0 0 2.1rem rgb(132 96 51 / 4%);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.history-sheet__face--front {
    transform: rotateY(0deg);
}

.history-sheet__face--back {
    transform: rotateY(-180deg);
}
.history-sheet.is-turning .history-sheet__face {
    transition: box-shadow 160ms ease;
}

.history-sheet.is-turning .history-sheet__face--front {
    box-shadow: -1.4rem 0 2.1rem rgb(55 32 16 / 16%);
}

.history-sheet.is-turning .history-sheet__face--back {
    box-shadow: 1.4rem 0 2.1rem rgb(55 32 16 / 14%);
}

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

.history-paper {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 1px solid rgb(100 67 36 / 18%);

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

    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 80%),
        0 0.15rem 0.35rem rgb(77 48 25 / 4%);
}

.history-paper::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 0;

    opacity: 0.15;
    pointer-events: none;

    background:
        radial-gradient(circle at 19% 22%, rgb(104 70 38 / 5%) 0 1px, transparent 1.4px),
        radial-gradient(circle at 82% 69%, rgb(104 70 38 / 4%) 0 1px, transparent 1.4px);

    background-size:
        23px 23px,
        31px 31px;
}
.history-paper::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background: #bc8846;
    opacity: 0.08;

    -webkit-mask-image:
        var(--paw-mask),
        var(--paw-mask),
        var(--history-heart-mask),
        var(--paw-mask),
        var(--history-heart-mask);
    mask-image:
        var(--paw-mask),
        var(--paw-mask),
        var(--history-heart-mask),
        var(--paw-mask),
        var(--history-heart-mask);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size:
        2.4rem 2.4rem,
        3.4rem 3.4rem,
        1.8rem 1.8rem,
        2rem 2rem,
        2.2rem 2.2rem;
    mask-size:
        2.4rem 2.4rem,
        3.4rem 3.4rem,
        1.8rem 1.8rem,
        2rem 2rem,
        2.2rem 2.2rem;

    -webkit-mask-position:
        9% 13%,
        86% 82%,
        78% 17%,
        17% 88%,
        42% 74%;
    mask-position:
        9% 13%,
        86% 82%,
        78% 17%,
        17% 88%,
        42% 74%;
}
.history-paper--left {
    border-right: 0;
    border-radius: 1.55rem 0.12rem 0.16rem 1.55rem;

    background:
        radial-gradient(
            circle at 18% 16%,
            rgb(245 211 151 / 14%),
            transparent 15rem
        ),
        linear-gradient(
            90deg,
            #f6e8ce 0%,
            #fffaf0 5%,
            #fffaf0 92%,
            #ead2aa 100%
        );

    box-shadow:
        inset -0.75rem 0 1.3rem -1rem rgb(68 41 21 / 20%),
        inset 0 1px 0 rgb(255 255 255 / 82%);
}

.history-paper--right {
    border-left: 0;
    border-radius: 0.12rem 1.55rem 1.55rem 0.16rem;

    background:
        radial-gradient(
            circle at 82% 18%,
            rgb(117 152 165 / 8%),
            transparent 15rem
        ),
        linear-gradient(
            90deg,
            #ead2aa 0%,
            #fffaf0 8%,
            #fffaf0 95%,
            #f6e8ce 100%
        );

    box-shadow:
        inset 0.75rem 0 1.3rem -1rem rgb(68 41 21 / 20%),
        inset 0 1px 0 rgb(255 255 255 / 82%);
}

.history-paper--closing {
    display: grid;
    place-items: center;
}

.history-closing-paw {
    width: 4rem;
    height: 4rem;
    background: rgb(184 135 66 / 14%);
    -webkit-mask: var(--paw-mask) center / contain no-repeat;
    mask: var(--paw-mask) center / contain no-repeat;
}

/* =========================================================
   TEXTO DE CUENTO
   ========================================================= */

.history-story {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    width: 100%;
    height: 100%;

    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: rgb(155 112 62 / 26%) transparent;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: auto;
}

.history-story::-webkit-scrollbar {
    width: 5px;
}

.history-story::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgb(155 112 62 / 23%);
}

.history-chapter__heading {
    flex: 0 0 auto;

    width: 100%;

    padding:
        clamp(2.15rem, 2.8vw, 3.45rem)
        clamp(2.45rem, 3.4vw, 4.25rem)
        0.82rem;
}

.history-chapter__content {
    flex: 1 1 auto;

    padding:
        0
        clamp(2.45rem, 3.4vw, 4.25rem)
        clamp(2.25rem, 3vw, 3.45rem);
}

.history-chapter__number {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;

    margin: 0 0 0.66rem;

    color: #956024;

    font-family: var(--sans);
    font-size: 0.67rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.history-chapter__number::before {
    content: "";

    width: 1.05rem;
    height: 1.05rem;

    background: currentColor;

    -webkit-mask: var(--paw-mask) center / contain no-repeat;
    mask: var(--paw-mask) center / contain no-repeat;

    opacity: 0.72;

    transform: rotate(-12deg);
}

.history-chapter__heading h2 {
    width: 100%;
    max-width: none;
    margin: 0;

    color: #3b271c;

    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.35rem, 3.05vw, 3.8rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.025em;

    text-wrap: balance;
}

.history-chapter__content blockquote,
.history-mobile__content blockquote {
    position: relative;

    margin: 0 0 1rem;
    padding: 0 0 0 1.25rem;

    border: 0;

    color: #5d402d;
    background: transparent;

    font-family: var(--serif);
    font-size: clamp(1.18rem, 1.35vw, 1.52rem);
    font-style: italic;
    font-weight: 600;
    line-height: 1.3;
}

.history-chapter__content blockquote::before,
.history-mobile__content blockquote::before {
    content: "“";

    position: absolute;
    left: -0.12rem;
    top: -0.28rem;

    color: rgb(184 135 66 / 43%);

    font-family: Georgia, serif;
    font-size: 2.85rem;
    font-style: normal;
    line-height: 1;
}

.history-chapter__content > p,
.history-mobile__content > p {
    margin: 0;

    color: var(--history-ink-soft);

    font-family: var(--sans);
    font-size: clamp(0.88rem, 0.9vw, 1rem);
    line-height: 1.7;
}

/* =========================================================
   RECUERDOS
   ========================================================= */

.history-memory-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.58rem;

    min-height: 2.5rem;

    margin-top: 1.15rem;
    padding: 0.62rem 0.95rem;

    border: 1px solid rgb(157 99 33 / 25%);
    border-radius: 999px;

    color: #704718;
    background: rgb(255 249 236 / 68%);

    font-family: var(--sans);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;

    box-shadow: inset 0 1px 0 rgb(255 255 255 / 74%);

    cursor: pointer;

    transition:
        color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}

.history-memory-toggle::before {
    content: "";

    width: 0.9rem;
    height: 0.9rem;

    background: currentColor;

    -webkit-mask: var(--paw-mask) center / contain no-repeat;
    mask: var(--paw-mask) center / contain no-repeat;

    opacity: 0.7;
}

.history-memory-toggle:hover,
.history-memory-toggle:focus-visible,
.history-memory-toggle[aria-expanded="true"] {
    color: #fffaf0;
    background: #67411f;
    transform: translateY(-1px);
}

.history-memory-toggle:focus-visible {
    outline: 3px solid rgb(184 135 66 / 28%);
    outline-offset: 3px;
}

.history-memory {
    margin-top: 0.85rem;
    padding: 0.95rem 1rem 0.95rem 1.15rem;

    border-left: 3px solid rgb(184 135 66 / 52%);
    border-radius: 0 0.9rem 0.9rem 0;

    background: rgb(239 217 181 / 42%);
}

.history-memory:not([hidden]) {
    animation: historyMemoryIn 240ms ease both;
}

.history-memory p {
    margin: 0;

    color: #5f4939;

    font-family: var(--sans);
    font-size: 0.86rem;
    line-height: 1.65;
}

/* =========================================================
   ILUSTRACIONES
   ========================================================= */

.history-paper--media {
    display: grid;
    place-items: stretch;
}

.history-chapter__media {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 100%;
    height: 100%;

    padding: clamp(1.6rem, 2.8vw, 3.15rem);

    overflow: hidden;
}

.history-chapter__media::before,
.history-mobile__media::before {
    content: "";

    position: absolute;
    inset: 10% 7%;
    z-index: -1;

    border-radius: 48% 52% 54% 46% / 44% 48% 52% 56%;

    background:
        radial-gradient(
            ellipse at 45% 48%,
            rgb(214 174 105 / 16%),
            rgb(121 153 163 / 6%) 48%,
            transparent 74%
        );

    filter: blur(6px);

    transform: rotate(-4deg);
}
.history-chapter__media::after,
.history-mobile__media::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;

    background: #d49d56;
    opacity: 0.18;

    -webkit-mask-image:
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask);
    mask-image:
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask),
        var(--history-heart-mask);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size:
        2rem 2rem,
        2.8rem 2.8rem,
        1.7rem 1.7rem,
        2.4rem 2.4rem;
    mask-size:
        2rem 2rem,
        2.8rem 2.8rem,
        1.7rem 1.7rem,
        2.4rem 2.4rem;

    -webkit-mask-position:
        9% 20%,
        88% 24%,
        14% 78%,
        84% 74%;
    mask-position:
        9% 20%,
        88% 24%,
        14% 78%,
        84% 74%;
}
.history-illustration {
    position: relative;
    width: min(100%, 100%);
    margin: 0;
    filter: drop-shadow(0 0.72rem 0.85rem rgb(77 51 28 / 8%));
    transition:
        transform 260ms ease,
        filter 260ms ease;
}

.history-illustration img {
    display: block;

    width: 100%;
    max-height: calc(var(--history-stage-height) - 72px);

    object-fit: contain;

    border-radius: 0.8rem;

    mix-blend-mode: multiply;

    -webkit-mask-image:
        radial-gradient(
            ellipse 95% 95% at 50% 50%,
            #000 0%,
            #000 80%,
            rgb(0 0 0 / 90%) 89%,
            transparent 100%
        );
    mask-image:
        radial-gradient(
            ellipse 95% 95% at 50% 50%,
            #000 0%,
            #000 80%,
            rgb(0 0 0 / 90%) 89%,
            transparent 100%
        );
}

.history-chapter__media--duo {
    display: block;
}

.history-chapter__media--duo .history-illustration {
    position: absolute;
    width: min(54%, 22rem);

    filter: drop-shadow(0 0.35rem 0.45rem rgb(77 51 28 / 5%));
}

.history-chapter__media--duo .history-illustration:first-child {
    left: 4%;
    top: 5%;
    transform: rotate(-3deg);
}

.history-chapter__media--duo .history-illustration:nth-child(2) {
    right: 3%;
    bottom: 5%;
    z-index: 2;
    transform: rotate(3deg);
}

/* Composiciones por capítulo */
[data-desktop-chapter="0"] .history-chapter__media--duo .history-illustration:first-child {
    left: 4%;
    top: 7%;
    width: 56%;
}

[data-desktop-chapter="0"] .history-chapter__media--duo .history-illustration:nth-child(2) {
    right: 3%;
    bottom: 7%;
    width: 55%;
}

[data-desktop-chapter="1"] .history-illustration {
    width: min(100%, 28rem);
}

[data-desktop-chapter="2"] .history-illustration {
    width: min(100%, 31rem);
}

[data-desktop-chapter="3"] .history-chapter__media--duo .history-illustration:first-child {
    left: 2%;
    top: 4%;
    width: 57%;
}

[data-desktop-chapter="3"] .history-chapter__media--duo .history-illustration:nth-child(2) {
    right: 1%;
    bottom: 4%;
    width: 43%;
}

[data-desktop-chapter="4"] .history-illustration {
    width: min(88%, 27rem);
    filter: saturate(0.82) drop-shadow(0 1rem 0.95rem rgb(77 51 28 / 10%));
}

[data-desktop-chapter="5"] .history-chapter__media--duo .history-illustration:first-child {
    left: 5%;
    top: 6%;
    width: 44%;
}

[data-desktop-chapter="5"] .history-chapter__media--duo .history-illustration:nth-child(2) {
    right: 4%;
    bottom: 3%;
    width: 47%;
}

[data-desktop-chapter="6"] .history-illustration {
    width: min(100%, 31rem);
}

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

.history-navigation {
    position: absolute;
    left: 50%;
    bottom: -2.5rem;
    z-index: 300;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;

    width: max-content;
    max-width: calc(100% - 2rem);

    transform: translateX(-50%);
}

.history-navigation button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;

    min-width: 8.3rem;
    min-height: 2.8rem;

    padding: 0.65rem 1.05rem;

    border: 1px solid rgb(67 41 22 / 26%);
    border-radius: 999px;

    color: #fff9ed;
    background: linear-gradient(135deg, #66442b, #382419);

    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 800;

    box-shadow:
        0 0.75rem 1.35rem rgb(63 38 19 / 19%),
        inset 0 1px 0 rgb(255 255 255 / 9%);

    cursor: pointer;

    transition:
        transform 180ms ease,
        box-shadow 180ms ease,
        opacity 180ms ease;
}

.history-navigation button:first-child::before {
    content: "←";
}

.history-navigation button:last-child::after {
    content: "→";
}

.history-navigation button:hover:not(:disabled),
.history-navigation button:focus-visible:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 0.95rem 1.6rem rgb(63 38 19 / 23%),
        inset 0 1px 0 rgb(255 255 255 / 10%);
}

.history-navigation button:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}

.history-navigation [data-history-progress] {
    display: grid;
    place-items: center;

    min-width: 4rem;
    min-height: 4rem;

    border: 1px solid rgb(184 135 66 / 40%);
    border-radius: 50% 50% 50% 37%;

    color: #65401a;

    background:
        radial-gradient(circle at 35% 28%, rgb(255 255 255 / 56%), transparent 38%),
        linear-gradient(145deg, #f2d49c, #d6ae6d);

    font-family: var(--serif);
    font-size: 1.02rem;
    font-weight: 700;

    box-shadow:
        0 0.7rem 1.4rem rgb(91 57 25 / 12%),
        inset 0 1px 0 rgb(255 255 255 / 50%);

    transform: rotate(-3deg);
}

/* =========================================================
   MÓVIL · CUENTO VERTICAL
   ========================================================= */

.history-mobile__hint {
    margin: 0 0 1.1rem;

    color: #91612a;

    font-family: var(--sans);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.history-mobile__chapter {
    position: relative;

    margin: 0 0 2rem;
    padding: 1.45rem 1.05rem 1.35rem;

    border: 1px solid rgb(101 68 37 / 13%);
    border-radius: 1.4rem 1.4rem 1.4rem 0.6rem;

    background:
        radial-gradient(circle at 100% 0%, rgb(216 179 111 / 13%), transparent 10rem),
        linear-gradient(155deg, #fff9ed 0%, #f7e8cf 100%);

    box-shadow:
        0 1rem 2.5rem rgb(72 45 24 / 9%),
        inset 0 1px 0 rgb(255 255 255 / 68%);

    opacity: 0;
    transform: translateY(1.1rem);

    transition:
        opacity 520ms ease,
        transform 520ms cubic-bezier(.2, .72, .2, 1);
}

.history-mobile__chapter.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.history-mobile__chapter::after {
    content: "";

    position: absolute;
    left: 50%;
    bottom: -1.45rem;

    width: 1.35rem;
    height: 1.35rem;

    background: #b88742;

    -webkit-mask: var(--paw-mask) center / contain no-repeat;
    mask: var(--paw-mask) center / contain no-repeat;

    opacity: 0.17;

    transform: translateX(-50%) rotate(10deg);
}

.history-mobile__chapter:last-child::after {
    display: none;
}

.history-mobile__heading {
    position: relative;
    z-index: 2;
}

.history-mobile__heading h2 {
    width: 100%;
    margin: 0;

    color: var(--history-ink);

    font-family: var(--serif);
    font-size: clamp(2.45rem, 10vw, 3.45rem);
    font-weight: 600;
    line-height: 0.94;
    letter-spacing: -0.042em;

    text-wrap: balance;
}

.history-mobile__media {
    position: relative;

    display: grid;
    place-items: center;

    min-height: 18rem;

    margin: 0.55rem -0.3rem 0.65rem;
    padding: 0.6rem;

    overflow: hidden;
}

.history-mobile__media .history-illustration {
    width: min(100%, 25rem);
}

.history-mobile__media .history-illustration img {
    max-height: 390px;
}

.history-mobile__media--duo {
    display: block;
    min-height: 25rem;
}

.history-mobile__media--duo .history-illustration {
    position: absolute;
    width: 58%;
}

.history-mobile__media--duo .history-illustration:first-child {
    left: 1%;
    top: 3%;
    transform: rotate(-3deg);
}

.history-mobile__media--duo .history-illustration:nth-child(2) {
    right: 1%;
    bottom: 3%;
    z-index: 2;
    transform: rotate(3deg);
}

.history-mobile__content {
    position: relative;
    z-index: 2;
}

.history-mobile__content blockquote {
    margin-top: 0.2rem;
    font-size: clamp(1.22rem, 5.5vw, 1.55rem);
}

.history-mobile__content > p {
    font-size: 0.94rem;
    line-height: 1.68;
}

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

@keyframes historyMemoryIn {
    from {
        opacity: 0;
        transform: translateY(-0.3rem);
    }

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

@keyframes historyMusicIntro {
    0% {
        opacity: 0;
        transform: translateY(-10px) scale(0.86) rotate(-8deg);
    }

    38% {
        opacity: 1;
        transform: translateY(0) scale(1.08) rotate(4deg);
    }

    62% {
        transform: translateY(-2px) scale(0.98) rotate(-2deg);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}

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

    50% {
        transform: translateY(-2px) scale(1.02);
    }
}

@keyframes historyMusicHalo {
    0%, 100% {
        transform: scale(0.96);
        opacity: 0.72;
    }

    50% {
        transform: scale(1.06);
        opacity: 0.96;
    }
}

@keyframes historyMusicHaloActive {
    0%, 100% {
        transform: scale(0.98);
        opacity: 0.82;
    }

    50% {
        transform: scale(1.12);
        opacity: 1;
    }
}

@keyframes historyMusicOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes historyMusicPlaying {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }

    25% {
        transform: translateY(-3px) rotate(-2deg) scale(1.03);
    }

    55% {
        transform: translateY(1px) rotate(1.6deg) scale(1.015);
    }

    78% {
        transform: translateY(-1px) rotate(-0.8deg) scale(1.025);
    }
}
/* =========================================================
   MÚSICA · ESCRITORIO GRANDE
   ========================================================= */

@media (min-width: 1200px) {
    .history-music-toggle {
        top: 9.2rem;
        right: -4.5rem;
    }
}
/* =========================================================
   NOTEBOOKS BAJOS
   ========================================================= */

@media (min-width: 900px) and (max-height: 820px) {
    .history-page {
        --history-stage-height: clamp(470px, 59vh, 540px);
    }

    .history-page__shell {
        padding-top: 1.9rem;
    }

    .history-page__header {
        margin-bottom: 1.2rem;
    }

    .history-page__header .public-eyebrow {
        margin-bottom: 0.5rem;
    }

    .history-page__header h1 {
        font-size: clamp(3rem, 4.5vw, 4.8rem);
    }

    .history-page__header > p {
        margin-top: 0.6rem;
        line-height: 1.45;
    }

    .history-chapter__heading {
        padding-top: 1.75rem;
    }

    .history-chapter__heading h2 {
        font-size: clamp(2.2rem, 3vw, 3.45rem);
    }

    .history-chapter__content blockquote {
        font-size: clamp(1.08rem, 1.25vw, 1.35rem);
    }
}

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

@media (max-width: 899px) {
    .history-page {
        overflow: clip;
    }

    .history-page__shell {
        width: min(100% - 20px, 720px);
        padding: 2.35rem 0 4rem;
    }

    .history-page__header {
        margin-bottom: 1.7rem;
        text-align: left;
    }

    .history-page__header .public-eyebrow {
        justify-content: flex-start;
    }

    .history-page__header .public-eyebrow::before {
        display: none;
    }

    .history-page__header h1 {
        font-size: clamp(2.8rem, 12vw, 4.35rem);
        line-height: 0.9;
    }

    .history-page__header > p {
        margin-left: 0;
        font-size: 0.96rem;
        line-height: 1.58;
    }

    .history-music-toggle {
        position: relative;
        top: auto;
        right: auto;

        width: 5.9rem;

        margin: -0.6rem 0 1rem auto;
    }

    .history-desktop {
        display: none;
    }

    .history-mobile {
        display: block;
    }
}

@media (max-width: 420px) {
    .history-page__shell {
        width: min(100% - 16px, 720px);
        padding-top: 2rem;
    }

    .history-page__header h1 {
        font-size: clamp(2.65rem, 12.5vw, 3.55rem);
    }

    .history-mobile__chapter {
        padding-inline: 0.9rem;
    }

    .history-mobile__heading h2 {
        font-size: clamp(2.25rem, 10.5vw, 3rem);
    }

    .history-mobile__media {
        min-height: 15.5rem;
    }

    .history-mobile__media--duo {
        min-height: 22rem;
    }

    .history-memory-toggle {
        width: 100%;
    }
}

/* =========================================================
   MOVIMIENTO REDUCIDO
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .history-page *,
    .history-page *::before,
    .history-page *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .history-sheet {
        transform-style: flat;
    }

    .history-mobile__chapter {
        opacity: 1;
        transform: none;
    }
}