/* Sobre, tarjeta y estados interactivos */
.escena {
            position: relative;
            width: min(720px, 92vw);
            height: 600px;
            margin: 0 auto;
            perspective: 1400px;
        }

.sobre {
            position: absolute;
            left: 50%;
            bottom: 45px;
            width: 100%;
            height: 270px;
            cursor: pointer;

            transform: translateX(-50%);
            filter: drop-shadow(0 25px 25px rgba(99, 59, 62, 0.22));
        }

.fondo-sobre {
            position: absolute;
            inset: 0;
            z-index: 1;
            border: 1px solid rgba(179, 119, 124, 0.58);
            border-radius: 7px;

            background:
                linear-gradient(
                    150deg,
                    rgba(255, 255, 255, 0.58),
                    transparent 38%
                ),
                linear-gradient(
                    155deg,
                    #f8dfe0,
                    #e9bdc1
                );
        }

.tarjeta {
            position: absolute;
            left: 50%;
            bottom: 15px;
            z-index: 2;

            width: 82%;
            height: 390px;
            padding: 25px 34px 22px;

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

            border: 1px solid var(--dorado);
            border-radius: 14px;

            color: var(--vino);

            background:
                radial-gradient(
                    circle at top left,
                    rgba(238, 212, 171, 0.22),
                    transparent 30%
                ),
                linear-gradient(
                    145deg,
                    #fffefa,
                    #fff7ee
                );

            box-shadow:
                0 15px 36px rgba(103, 58, 61, 0.2),
                inset 0 0 0 7px rgba(255, 255, 255, 0.73);

            opacity: 0;
            visibility: hidden;

            transform:
                translateX(-50%)
                translateY(66%);

            transition:
                transform 1.15s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.4s ease,
                visibility 0s linear 0.4s;

            cursor: pointer;
        }

.tarjeta::before,
        .tarjeta::after {
            content: "✦";
            position: absolute;
            color: var(--dorado);
            font-size: 16px;
        }

.tarjeta::before {
            top: 14px;
            left: 17px;
        }

.tarjeta::after {
            right: 17px;
            bottom: 14px;
        }

.tarjeta-corona {
            flex-shrink: 0;
            margin: 0;
            color: var(--dorado);
            font-size: 30px;
            line-height: 1;
        }

.tarjeta-titulo {
            flex-shrink: 0;
            margin-top: 8px;
            font-family: "Cormorant Garamond", serif;
            font-size: 19px;
            line-height: 1.1;
            letter-spacing: 0.17em;
            text-transform: uppercase;
        }

.numero {
            flex-shrink: 0;
            margin: 14px 0 0;
            color: var(--rosa-oscuro);
            font-family: "Cormorant Garamond", serif;
            font-size: 82px;
            font-weight: 500;
            line-height: 0.7;
        }

.anios {
            flex-shrink: 0;
            margin-top: 13px;
            font-family: "Cormorant Garamond", serif;
            font-size: 17px;
            line-height: 1;
            letter-spacing: 0.22em;
            text-transform: uppercase;
        }

.firma {
            flex-shrink: 0;
            margin-top: 13px;
            color: var(--rosa-oscuro);
            font-family: "Great Vibes", cursive;
            font-size: 46px;
            line-height: 0.9;
        }

.frente {
            position: absolute;
            inset: 0;
            z-index: 8;
            overflow: hidden;
            border-radius: 7px;
            pointer-events: none;
        }

.frente::before {
            content: "";
            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    145deg,
                    transparent 49.6%,
                    rgba(211, 166, 79, 0.55) 50%,
                    transparent 50.5%
                ),
                linear-gradient(
                    215deg,
                    transparent 49.6%,
                    rgba(211, 166, 79, 0.55) 50%,
                    transparent 50.5%
                ),
                linear-gradient(
                    160deg,
                    #f5d6d8,
                    #e8b9bd
                );

            clip-path:
                polygon(
                    0 0,
                    50% 65%,
                    100% 0,
                    100% 100%,
                    0 100%
                );
        }

.frente::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 78%;

            background:
                linear-gradient(
                    165deg,
                    rgba(255, 255, 255, 0.24),
                    transparent
                );

            clip-path:
                polygon(
                    0 0,
                    50% 72%,
                    100% 0,
                    100% 100%,
                    0 100%
                );
        }

.solapa {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 12;

            width: 100%;
            height: 64%;

            transform-origin: top center;
            transform-style: preserve-3d;

            transition:
                transform 0.9s cubic-bezier(0.22, 0.75, 0.25, 1),
                z-index 0s linear 0.45s;
        }

.solapa::before {
            content: "";
            position: absolute;
            inset: 0;

            border-top: 1px solid rgba(211, 166, 79, 0.8);

            background:
                linear-gradient(
                    145deg,
                    rgba(255, 255, 255, 0.72),
                    transparent 38%
                ),
                linear-gradient(
                    160deg,
                    #fae4e5,
                    #eabfc2
                );

            clip-path:
                polygon(
                    0 0,
                    100% 0,
                    50% 100%
                );
        }

.sello {
            position: absolute;
            top: 48%;
            left: 50%;
            z-index: 20;

            width: clamp(78px, 11vw, 102px);
            aspect-ratio: 1;

            display: grid;
            place-items: center;

            border: 6px double rgba(255, 229, 175, 0.92);
            border-radius: 50%;

            color: #70422c;

            background:
                radial-gradient(
                    circle at 35% 28%,
                    #ffe8b8,
                    #d59c4c 58%,
                    #9d6331 100%
                );

            box-shadow:
                0 8px 18px rgba(92, 54, 37, 0.32),
                inset 0 0 12px rgba(255, 241, 204, 0.7);

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

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

.sello span {
            font-family: "Great Vibes", cursive;
            font-size: clamp(42px, 6vw, 60px);
            transform: translateY(4px);
        }

.instruccion {
            position: absolute;
            left: 50%;
            bottom: 28px;
            z-index: 25;

            width: 100%;

            font-family: "Cormorant Garamond", serif;
            font-size: clamp(18px, 2.5vw, 24px);
            font-style: italic;

            transform: translateX(-50%);
            pointer-events: none;

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

.corazon {
            display: inline-block;
            margin-left: 5px;
            animation: latido 1.3s ease-in-out infinite;
        }

.escena.quitando-sello .sello {
            opacity: 0;

            transform:
                translate(-50%, -50%)
                scale(0.15)
                rotate(-25deg);
        }

.escena.quitando-sello .instruccion {
            opacity: 0;

            transform:
                translateX(-50%)
                translateY(10px);
        }

.escena.abriendo .solapa {
            z-index: 0;
            transform: rotateX(180deg);
        }

.escena.tarjeta-visible .tarjeta {
            z-index: 30;
            opacity: 1;
            visibility: visible;

            transform:
                translateX(-50%)
                translateY(-76%);

            transition:
                transform 1.15s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.4s ease,
                visibility 0s;
        }

.escena::after {
            content: "Toca la tarjeta para continuar";
            position: absolute;
            left: 50%;
            bottom: 0;
            z-index: 50;

            width: max-content;
            max-width: 90%;

            color: var(--vino);
            font-family: "Cormorant Garamond", serif;
            font-size: 18px;
            font-style: italic;

            opacity: 0;
            visibility: hidden;

            transform:
                translateX(-50%)
                translateY(10px);
        }

.escena.tarjeta-visible::after {
            visibility: visible;
            animation: mostrarIndicacion 0.5s ease 1.1s forwards;
        }

.sobre {
            filter:
                drop-shadow(0 28px 28px rgba(99,59,62,.24))
                drop-shadow(0 0 24px rgba(255,255,255,.45));
            transition: transform .35s ease, filter .35s ease;
        }

.sobre:hover {
            transform: translateX(-50%) translateY(-4px);
            filter:
                drop-shadow(0 32px 30px rgba(99,59,62,.27))
                drop-shadow(0 0 30px rgba(255,255,255,.58));
        }

.sello {
            animation: brilloSello 3s ease-in-out infinite;
        }

.sobre {
            animation: respirarSobre 4.8s ease-in-out infinite;
        }

.escena.quitando-sello .sobre,
        .escena.abriendo .sobre,
        .escena.tarjeta-visible .sobre {
            animation: none;
        }

.escena.tarjeta-visible .fondo-sobre,
.escena.tarjeta-visible .frente {
            opacity: .72;
            filter: saturate(.82) brightness(1.035);
            transition: opacity .7s ease, filter .7s ease;
        }

.fondo-sobre,
        .frente::before,
        .solapa::before {
            background-blend-mode: screen, normal;
        }

.fondo-sobre::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            opacity: .38;
            background-image:
                repeating-linear-gradient(22deg, rgba(255,255,255,.18) 0 1px, transparent 1px 5px),
                radial-gradient(circle at 72% 20%, rgba(255,255,255,.55), transparent 28%);
            mix-blend-mode: soft-light;
        }

.tarjeta {
            border: 1px solid rgba(211,166,79,.88);
            box-shadow:
                0 18px 42px rgba(103,58,61,.22),
                0 0 0 5px rgba(255,255,255,.50),
                inset 0 0 0 1px rgba(211,166,79,.30),
                inset 0 0 0 8px rgba(255,255,255,.72);
        }

.tarjeta::before,
        .tarjeta::after {
            text-shadow: 0 0 10px rgba(211,166,79,.35);
        }

.tarjeta-ornamento {
            position: absolute;
            width: 54px;
            height: 54px;
            opacity: .48;
            pointer-events: none;
        }

.tarjeta-ornamento.sup-izq { top: 12px; left: 12px; border-top: 1px solid var(--dorado); border-left: 1px solid var(--dorado); border-radius: 10px 0 0 0; }

.tarjeta-ornamento.inf-der { right: 12px; bottom: 12px; border-right: 1px solid var(--dorado); border-bottom: 1px solid var(--dorado); border-radius: 0 0 10px 0; }

.sello::after {
            content: "";
            position: absolute;
            inset: -10px;
            border-radius: 50%;
            border: 1px solid rgba(211,166,79,.24);
            animation: pulsoSello 2.6s ease-out infinite;
        }

.escena.quitando-sello .sello::after { animation: none; opacity: 0; }

/* Acabados premium de papel y metal */
.fondo-sobre,
.frente::before,
.solapa::before {
    background-blend-mode: screen, normal;
}

/* Acabado editorial: proporciones compactas sin alterar los estados JS */
.escena {
    width: min(650px, 88vw);
    height: clamp(355px, 51vh, 465px);
}

.sobre {
    bottom: 26px;
    height: clamp(225px, 30vh, 255px);
}

.fondo-sobre {
    border-color: rgba(176,116,122,.52);
    background:
        linear-gradient(145deg, rgba(255,255,255,.70), transparent 34%),
        linear-gradient(155deg, #fae7e6 0%, #efcbd0 48%, #e5b3ba 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.88),
        inset 0 -18px 30px rgba(149,85,96,.06);
}

.frente::before {
    background:
        linear-gradient(145deg, transparent 49.55%, rgba(201,153,75,.45) 49.9%, transparent 50.5%),
        linear-gradient(215deg, transparent 49.55%, rgba(201,153,75,.45) 49.9%, transparent 50.5%),
        linear-gradient(160deg, #f8dfe1, #e8b9c0);
}

.solapa::before {
    border-top-color: rgba(201,153,75,.72);
    background:
        linear-gradient(145deg, rgba(255,255,255,.78), transparent 37%),
        linear-gradient(160deg, #fbe9e8, #ebc1c6);
}

.tarjeta {
    width: 80%;
    height: 370px;
    padding: 22px 32px 20px;
    background:
        linear-gradient(rgba(255,253,247,.90), rgba(255,248,239,.92)),
        url("../assets/fondos/textura-papel.svg");
    background-size: auto, 360px 360px;
}

.tarjeta-titulo { margin-top: 5px; }
.numero { margin-top: 10px; }
.texto-tarjeta { margin-top: 14px; }
.firma { margin-top: 10px; }

.sello {
    border-width: 5px;
    background:
        radial-gradient(circle at 34% 25%, #fff2c6 0 8%, #e4b75e 28%, #c58a3e 64%, #8f572b 100%);
    box-shadow:
        0 9px 18px rgba(92,54,37,.30),
        0 0 0 3px rgba(255,240,196,.22),
        inset 0 0 15px rgba(255,245,210,.78);
}

.sobre:focus-visible,
.tarjeta:focus-visible {
    outline: 2px solid rgba(157,108,48,.78);
    outline-offset: 8px;
}

/* Puente cinematografico hacia la bienvenida */
.portada .contenido,
.portada .decoracion-premium,
.portada .marco {
    transition: opacity .7s ease, filter .7s ease;
}

.portada.transicionando .tarjeta {
    z-index: 100;
    opacity: 0;
    transform: translateX(-50%) translateY(-52%) scale(1.18);
    filter: brightness(1.06);
    transition: transform .85s cubic-bezier(.2,.78,.2,1), opacity .7s ease .18s, filter .7s ease;
}

.portada.transicionando .sobre > :not(.tarjeta),
.portada.transicionando .escena::after {
    opacity: 0;
    transition: opacity .45s ease;
}

.portada.transicionando .decoracion-premium,
.portada.transicionando .marco {
    opacity: .16;
    filter: blur(4px);
}
.fondo-sobre::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: url("../assets/fondos/textura-papel.svg");
    background-size: 420px 420px;
    opacity: .12;
    mix-blend-mode: multiply;
    pointer-events: none;
}
.tarjeta {
    overflow: hidden;
}
.tarjeta::selection { background: rgba(211,166,79,.22); }
.tarjeta-corona-svg {
    width: 58px;
    height: auto;
    flex-shrink: 0;
    object-fit: contain;
}
.sello::after {
    content: "";
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px dashed rgba(255,238,192,.78);
}