*, *::before, *::after { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0px;
}

html, body {
  min-height: 100%;
  position: relative;
  overscroll-behavior: none;
}

body {
    --padding: 30px;
    overflow-x: clip;
    padding-inline: var(--padding);
    font-family: "Lora", Georgia, serif;
    font-weight: 500;
    font-style: italic;
    background-color: #1a221c;
    color: #f1e8d2;
}

body:before {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    content: " ";
    box-shadow: 0px 0px 140px 70px #0b100c inset;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    pointer-events: none;
    transform: translateZ(0);
}

body:after {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: -1;
    transform: translateZ(0);
    content: " ";
    background-image:
        radial-gradient(ellipse 60% 75% at 50% 45%, rgba(14, 20, 16, 0.62), rgba(14, 20, 16, 0.3) 70%, rgba(14, 20, 16, 0.15)),
        linear-gradient(180deg, rgba(14, 20, 16, 0.35), rgba(14, 20, 16, 0.1) 40%, rgba(14, 20, 16, 0.45)),
        url("content/fondo.jpeg");
    background-position: center, center, 30% center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}

#introOverlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(14, 20, 16, 0.45), rgba(14, 20, 16, 0.75)),
        #1a221c url("content/fondo.jpeg") 30% center / cover no-repeat;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

#introOverlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#heartBtn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.2s ease;
}

#heartBtn:active {
    transform: scale(0.92);
}

.heart-svg {
    width: 90px;
    height: 90px;
    fill: #e39a45;
    filter: drop-shadow(0 0 18px rgba(240, 170, 80, 0.55));
    transition: fill 0.3s ease;
}

#heartBtn:hover .heart-svg {
    fill: #f2b260;
}

.intro-hint {
    margin-top: 18px;
    font-size: 15px;
    color: #f1e8d2;
    opacity: 0.85;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.04em;
    font-family: "Playwrite US Trad", cursive;
}

#heartBtn.idle .heart-svg {
    animation: heartPulse 1.6s ease-in-out infinite;
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

#heartBtn.clicked .heart-svg {
    animation: heartBurst 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes heartBurst {
    0% { transform: scale(1); opacity: 1; }
    40% { transform: scale(1.45); opacity: 1; }
    100% { transform: scale(0.2) translateY(-80px); opacity: 0; }
}

#textBox {
    position: relative;
    z-index: 10;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 680px;
    margin-inline: auto;
    padding: 0;
    padding-right: 110px;
    overflow: visible;
    font-size: 22px;
    line-height: 1.75;
    text-rendering: optimizeLegibility;
    text-shadow: 0 1px 2px rgba(6, 10, 7, 0.6), 0 0 10px rgba(6, 10, 7, 0.5);
}

#textBox h1,
#textBox h2 {
    font-family: "Playwrite US Trad", cursive;
    font-style: normal;
    font-weight: 400;
}

#textBox h1 {
    margin: 0;
    padding: 56px 0 28px;
    font-size: 32px;
}

#textBox h2 {
    margin: 0;
    padding: 8px 0 120px 70px;
    font-size: 25px;
}

#textBoxMargin {
    display: block;
    width: 250px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

#perspectiveBody {
    display: block;
    position: sticky;
    top: 0;
    right: 0;
    width: 250px;
    height: 100vh;
    height: 100svh;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    overflow: visible;
}

.butterflyWrapper {
    display: block;
    width: 40px;
    height: 40px;
    overflow: visible;
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    transform-style: preserve-3d;
}

.bf {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(var(--bf-escala, 1));
    transform-origin: 0 0;
    transform-style: preserve-3d;
}

.bf svg {
    position: absolute;
    overflow: visible;
}

.bf .ala {
    left: 0;
    top: -42px;
    width: 66px;
    height: 114px;
    transform-origin: 0 50%;
    will-change: transform;
    backface-visibility: visible;
}

.bf .cuerpo {
    left: -14px;
    top: -26px;
    width: 28px;
    height: 70px;
    fill: #1b1611;
}

.bf .ribs {
    fill: #1b1611;
}

#bf1 .wing {
    fill: url(#wingGrad);
}

#bf2 .wing {
    fill: url(#wingGrad2);
}

#ambiente {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 2.5s ease;
    transform: translateZ(0);
}

#ambiente.on {
    opacity: 1;
}

#noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh;
    z-index: 0;
    transform: translateZ(0);
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

@media (max-width: 700px) {
    body {
        --padding: 16px;
    }

    body:before {
        box-shadow: 0px 0px 80px 26px #0b100c inset;
    }

    #textBox {
        max-width: 100%;
        padding-right: 64px;
        font-size: 20px;
        line-height: 1.7;
    }

    #textBox h1 {
        font-size: 27px;
        padding-top: 40px;
        padding-bottom: 20px;
    }

    #textBox h2 {
        font-size: 21px;
        padding-left: 40px;
        padding-bottom: 100px;
    }

    #textBoxMargin {
        width: 120px;
    }

    #perspectiveBody {
        width: 120px;
    }

    .butterflyWrapper {
        --bf-escala: 0.8;
        width: 32px;
        height: 32px;
    }

    .heart-svg {
        width: 72px;
        height: 72px;
    }

    .intro-hint {
        font-size: 14px;
    }
}

@media (max-width: 420px) {
    body {
        --padding: 12px;
    }

    #textBox {
        padding-right: 44px;
        font-size: 19px;
    }

    #textBox h1 {
        font-size: 24px;
        padding-top: 32px;
    }

    #textBox h2 {
        font-size: 19px;
        padding-left: 20px;
        padding-bottom: 96px;
    }

    #textBoxMargin {
        width: 90px;
    }

    #perspectiveBody {
        width: 90px;
    }

    .butterflyWrapper {
        --bf-escala: 0.7;
        width: 28px;
        height: 28px;
    }
}

body.intro-active {
    overflow: hidden;
    height: 100vh;
    height: 100svh;
}

.estrofa {
    margin: 0 0 1.6em;
}

.verso {
    display: block;
    will-change: opacity;
}

.vi {
    display: inline-block;
}

.js .vi {
    opacity: 0;
    transform: translateY(12px);
}

.js .escrito .letra {
    display: inline-block;
    white-space: pre;
    opacity: 0;
}

.clave {
    font-style: inherit;
    position: relative;
    background-image: linear-gradient(90deg, #e39a45, #f6c77a);
    background-repeat: no-repeat;
    background-position: 0 92%;
    background-size: 0% 2px;
    transition: color 0.8s ease, background-size 1.1s cubic-bezier(0.65, 0, 0.35, 1), text-shadow 0.8s ease;
}

.clave.on {
    color: #f2b260;
    background-size: 100% 2px;
    text-shadow: 0 1px 2px rgba(6, 10, 7, 0.6), 0 0 16px rgba(240, 160, 60, 0.6);
}

#cinta {
    position: fixed;
    top: 0;
    left: 3px;
    width: 4px;
    height: 100vh;
    height: 100svh;
    z-index: 20;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.8s ease;
}

#cinta span {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #f6c77a, #c97a2c);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 100%);
    transform: translateY(-100%);
    will-change: transform;
}

body.leyendo #cinta {
    opacity: 1;
}

#sinMusicaBtn {
    position: absolute;
    bottom: calc(28px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    border: 1px solid rgba(241, 232, 210, 0.45);
    border-radius: 999px;
    background: rgba(14, 20, 16, 0.25);
    color: #f1e8d2;
    font: italic 500 14px "Lora", Georgia, serif;
    opacity: 0.75;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

#sinMusicaBtn:hover,
#sinMusicaBtn:active {
    opacity: 1;
    background: rgba(241, 232, 210, 0.12);
}

#releerBtn {
    position: fixed;
    left: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 30;
    transform: translate(-50%, 16px);
    padding: 12px 24px;
    border: none;
    border-radius: 999px;
    background: #f1e8d2;
    color: #1f2b22;
    font: italic 500 16px "Lora", Georgia, serif;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 24px rgba(240, 170, 80, 0.25);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.7s ease;
    -webkit-tap-highlight-color: transparent;
}

body.final #releerBtn {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

#tarjeta {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(8, 12, 9, 0.55);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#tarjeta.abierta {
    opacity: 1;
    visibility: visible;
}

.tarjeta-caja {
    position: relative;
    width: 100%;
    max-width: 340px;
    padding: 40px 28px 30px;
    border: 1px solid rgba(242, 178, 96, 0.35);
    border-radius: 22px;
    background: linear-gradient(160deg, rgba(38, 52, 40, 0.96), rgba(20, 28, 22, 0.97));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(240, 170, 80, 0.15);
    color: #f1e8d2;
    text-align: center;
    transform: translateY(24px) scale(0.96);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

#tarjeta.abierta .tarjeta-caja {
    transform: none;
}

#tarjetaCerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
}

#tarjetaCerrar:hover,
#tarjetaCerrar:focus-visible {
    background: rgba(241, 232, 210, 0.12);
}

#tarjetaCerrar svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #f1e8d2;
    stroke-width: 2;
    stroke-linecap: round;
}

.tarjeta-ig {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    fill: none;
    stroke: #f2b260;
    stroke-width: 1.6;
    filter: drop-shadow(0 0 12px rgba(240, 170, 80, 0.45));
}

.tarjeta-ig .punto {
    fill: #f2b260;
    stroke: none;
}

.tarjeta-sub {
    font-size: 15px;
    opacity: 0.75;
}

#tarjetaTitulo {
    margin: 4px 0 10px;
    font: 400 26px "Playwrite US Trad", "Lora", cursive;
    color: #f6c77a;
}

.tarjeta-texto {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.9;
}

#tarjetaLink {
    display: inline-block;
    margin-top: 22px;
    padding: 12px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f6c77a, #e39a45);
    color: #1f2b22;
    font: italic 500 16px "Lora", Georgia, serif;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(227, 154, 69, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#tarjetaLink:hover,
#tarjetaLink:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(227, 154, 69, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .js .vi { transform: none; }
}