/* ==========================================================================
   Aperturas realistas (real_*). Materiales con textura, luz y sombra:
   papel de algodón, lacre, terciopelo, roble, seda, cuero, cristal y foto.
   Las texturas son ruido SVG (feTurbulence) y la luz son degradados encima.
   Variables de siempre: --k (ritmo), --op-a / --op-b (colores), --op-wall
   (mesa o pared), --op-light (luz) y --px / --py (punto del toque).
   ========================================================================== */
@property --rl-r { syntax: '<length>'; inherits: true; initial-value: 0px; }

.intro-real {
    --rl-paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .2 .55 0 0 0 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
    --rl-fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.045 .075' numOctaves='4' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .33 0 0 0 0 .24 .3 0 0 0 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
    --rl-grain-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0035 0.11' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.02 1.8 0 0 0 -0.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --rl-grain-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='900'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.1 0.0032' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0 0.02 1.9 0 0 0 -0.64'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --rl-relief: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.42' numOctaves='3' seed='5' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='2.4' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E");
    --rl-table: var(--op-wall, #3d2717);
    --rl-light: var(--op-light, #fff1d6);
    --rl-gold: linear-gradient(135deg, #fff3c4 0%, #d9b45a 28%, #8a6420 52%, #f1d488 74%, #9b7428 100%);
    --rl-fade: 1.9s;
    display: grid; place-items: center; color: #2a2219;
    background:
        radial-gradient(ellipse 80% 60% at 42% 34%, color-mix(in srgb, var(--rl-light) 30%, transparent), transparent 70%),
        radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(0, 0, 0, .55) 100%),
        var(--rl-grain-h),
        linear-gradient(180deg, color-mix(in srgb, var(--rl-table) 88%, #fff), var(--rl-table));
    background-size: cover, cover, 900px 300px, cover;
    perspective: 1600px;
    transition: opacity calc(.75s * var(--k)) ease calc(var(--rl-fade) * var(--k)), visibility 0s linear calc((var(--rl-fade) + .8s) * var(--k));
}
.intro-real.open { opacity: 0; visibility: hidden; }
.intro-real[data-tap] > .intro-hint { position: absolute; z-index: 30; left: 0; right: 0; bottom: max(28px, 7vh); text-align: center; color: color-mix(in srgb, var(--rl-light) 85%, #fff); text-shadow: 0 1px 6px rgba(0, 0, 0, .55); }
.intro-real[data-tap].open > .intro-hint { opacity: 0; animation: none; transition: opacity .25s; }
.intro-real .op-card { color: #2a2219; }
.intro-real .op-card .op-title { color: color-mix(in srgb, var(--op-b, var(--accent)) 82%, #000); }
.intro-real .op-card .intro-for { color: #6b5c4c; }
.intro-real .op-card .intro-for strong { color: #2a2219; }

/* ---------- 1. Sobre de algodón con lacre ----------
   Solo geometría y materiales. El movimiento (entrada, anticipación, lacre, solapa,
   tarjeta, cámara y sombras) es una línea de tiempo en intro-motion.js.
   Profundidad: fondo z0 · tarjeta z1 · bolsillo z2 · solapa z3 · lacre z4. */
.real-lacre { --rl-paper: var(--op-a, #f2ebdf); --rl-wax: var(--op-b, #8e1b22); }
.rl-camera { position: relative; width: min(84vw, 460px); aspect-ratio: 1.45; transform-style: preserve-3d; }
.rl-contact { position: absolute; left: 2%; right: 2%; top: 14%; bottom: -9%; border-radius: 50%; background: radial-gradient(ellipse at 50% 55%, rgba(0, 0, 0, .62), rgba(0, 0, 0, .28) 45%, transparent 72%); filter: blur(14px); transform: translateZ(-30px); }
.rl-float, .rl-env { position: absolute; inset: 0; transform-style: preserve-3d; }
.rl-env { transform: rotateX(10deg); }
.rl-env-back, .rl-env-pocket, .rl-flap-out, .rl-letter-face { background-color: var(--rl-paper); background-image: var(--rl-fibers), var(--rl-paper-noise); background-blend-mode: multiply; }
.rl-env-back { position: absolute; inset: 0; border-radius: 3px; filter: brightness(.8); box-shadow: inset 0 0 40px rgba(0, 0, 0, .28); }
.rl-env-liner { position: absolute; inset: 3% 3% 0; clip-path: polygon(0 0, 100% 0, 50% 58%); -webkit-clip-path: polygon(0 0, 100% 0, 50% 58%);
    background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%), radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .45) 0 1.4px, transparent 2px) 0 0 / 10px 10px, color-mix(in srgb, var(--rl-wax) 28%, #ece0cc); }
.rl-letter { position: absolute; inset: 6% 6% 8%; transform: translateZ(1px); border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.rl-letter-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: inherit; background-color: color-mix(in srgb, var(--rl-paper) 55%, #fffdf8); }
.rl-letter-face::after { content: ''; position: absolute; inset: 5%; border: 1px solid color-mix(in srgb, var(--op-b, var(--accent)) 35%, transparent); pointer-events: none; }
.rl-letter-shade { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(40, 25, 10, .28), rgba(40, 25, 10, .5)); pointer-events: none; }
.rl-letter .op-card { padding: .6rem; }
.rl-letter .op-title { font-size: clamp(1.3rem, 6cqi, 2.1rem); }
.rl-env-pocket { position: absolute; inset: 0; transform: translateZ(2px); border-radius: 3px; clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 -8px 18px rgba(0, 0, 0, .1); }
.rl-env-pocket::before, .rl-env-pocket::after { content: ''; position: absolute; inset: 0; }
.rl-env-pocket::before { background: linear-gradient(115deg, rgba(0, 0, 0, .1), transparent 45%), linear-gradient(245deg, rgba(0, 0, 0, .12), transparent 45%); }
.rl-env-pocket::after { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(0, 0, 0, .06)); clip-path: polygon(0 100%, 50% 44%, 100% 100%); -webkit-clip-path: polygon(0 100%, 50% 44%, 100% 100%); filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, .15)); }
.rl-pocket-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 40%); opacity: 0; }
.rl-env-flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; transform-origin: 50% 0; transform-style: preserve-3d; transform: translateZ(3px); }
.rl-flap-out, .rl-flap-in { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; clip-path: polygon(0 0, 100% 0, 50% 100%); -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); }
.rl-flap-out { background-image: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(0, 0, 0, .1)), var(--rl-fibers), var(--rl-paper-noise); }
.rl-flap-out::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, .12)); }
.rl-flap-light { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 248, 230, .55), rgba(0, 0, 0, .35)); opacity: 0; }
.rl-flap-in { transform: rotateX(180deg); background: linear-gradient(0deg, rgba(0, 0, 0, .3), transparent 60%), radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .45) 0 1.4px, transparent 2px) 0 0 / 10px 10px, color-mix(in srgb, var(--rl-wax) 28%, #ece0cc); }
.rl-wax { position: absolute; left: 50%; top: 60%; width: clamp(64px, 19%, 92px); aspect-ratio: 1; margin: calc(clamp(64px, 19%, 92px) / -2) 0 0 calc(clamp(64px, 19%, 92px) / -2); display: grid; place-items: center; transform: translateZ(4px); transform-style: preserve-3d; }
.rl-wax i { position: absolute; inset: 0; border-radius: 47% 53% 50% 50% / 52% 47% 53% 48%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .45)) drop-shadow(0 8px 10px rgba(0, 0, 0, .3));
    background:
        radial-gradient(circle at 50% 50%, transparent 56%, rgba(0, 0, 0, .28) 60%, rgba(255, 255, 255, .16) 63%, transparent 66%),
        radial-gradient(ellipse 40% 30% at 32% 26%, rgba(255, 255, 255, .55), transparent 70%),
        radial-gradient(circle at 60% 66%, color-mix(in srgb, var(--rl-wax) 70%, #000), var(--rl-wax) 45%, color-mix(in srgb, var(--rl-wax) 72%, #fff) 100%); }
.rl-wax-l { clip-path: polygon(0 0, 53% 0, 47% 21%, 56% 40%, 45% 62%, 54% 81%, 48% 100%, 0 100%); -webkit-clip-path: polygon(0 0, 53% 0, 47% 21%, 56% 40%, 45% 62%, 54% 81%, 48% 100%, 0 100%); }
.rl-wax-r { clip-path: polygon(53% 0, 100% 0, 100% 100%, 48% 100%, 54% 81%, 45% 62%, 56% 40%, 47% 21%); -webkit-clip-path: polygon(53% 0, 100% 0, 100% 100%, 48% 100%, 54% 81%, 45% 62%, 56% 40%, 47% 21%); }
.rl-wax span { position: relative; font: var(--names-style) 700 clamp(1rem, 4.6cqi, 1.5rem)/1 var(--font-names); color: color-mix(in srgb, var(--rl-wax) 78%, #000); text-shadow: 0 1px 0 rgba(255, 255, 255, .35), 0 -1px 0 rgba(0, 0, 0, .35); }
.rl-crumb { position: absolute; left: 50%; top: 50%; width: 7px; height: 5px; border-radius: 40% 60% 50% 45%; background: color-mix(in srgb, var(--rl-wax) 85%, #000); opacity: 0; }
/* Sin JS (o navegador sin Web Animations): la versión simple de antes con transiciones */
.real-lacre:not([data-scene]) .rl-letter-shade { opacity: 0; }
.real-lacre:not([data-scene]).open .rl-wax { opacity: 0; transition: opacity .4s; }
.real-lacre:not([data-scene]).open .rl-env-flap { transform: translateZ(.5px) rotateX(178deg); transition: transform calc(.8s * var(--k)) ease calc(.3s * var(--k)); }
.real-lacre:not([data-scene]).open .rl-letter { transform: translate3d(0, -64%, 6px); transition: transform calc(.9s * var(--k)) ease calc(.8s * var(--k)); }

/* ---------- 2. Telón de terciopelo ---------- */
.real-terciopelo { --rl-velvet: var(--op-a, #7d0f1f); --rl-fade: 1.75s; background: radial-gradient(ellipse at 50% 30%, #2a211b, #0b0807 75%); }
.rl-stage { position: absolute; inset: 0; }
.rl-spot { position: absolute; inset: 0; background: radial-gradient(ellipse 46% 70% at 50% 0%, color-mix(in srgb, var(--rl-light) 55%, transparent), transparent 70%); opacity: .55; transition: opacity calc(1s * var(--k)) ease calc(.4s * var(--k)); }
.rl-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: linear-gradient(180deg, rgba(0, 0, 0, .7), transparent 40%), var(--rl-grain-h), linear-gradient(#3b2414, #1c110a); background-size: cover, 700px 220px, cover; }
.rl-stage-card { z-index: 8; transition: opacity .4s; }
.rl-stage-card .op-card { color: #f5ead6; }
.rl-stage-card .op-title { color: transparent !important; background: var(--rl-gold); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.rl-stage-card .op-kicker, .rl-stage-card .intro-for, .rl-stage-card .intro-for strong { color: #f0e2c4 !important; }
.rl-velvet { position: absolute; z-index: 5; top: 0; bottom: 0; width: 51%;
    background:
        radial-gradient(ellipse 60% 40% at 50% 18%, rgba(255, 190, 200, .14), transparent 70%),
        linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 22%, transparent 76%, rgba(0, 0, 0, .55)),
        repeating-linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .22) 13%, transparent 27%, rgba(255, 255, 255, .05) 34%, transparent 41%),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .58) 0, rgba(0, 0, 0, .3) 2.5%, rgba(0, 0, 0, .06) 5.5%, rgba(255, 225, 225, .16) 8%, rgba(0, 0, 0, .04) 10.5%, rgba(0, 0, 0, .3) 13.5%, rgba(0, 0, 0, .58) 16%),
        var(--rl-paper-noise),
        var(--rl-velvet);
    background-blend-mode: normal, normal, normal, normal, overlay, normal;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, .5);
}
.rl-velvet-l { left: 0; transform-origin: 0 0; }
.rl-velvet-r { right: 0; transform-origin: 100% 0; }
.rl-fringe { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: repeating-linear-gradient(90deg, #f1d488 0 2px, #8a6420 2px 3px, transparent 3px 5px), var(--rl-gold); -webkit-mask: linear-gradient(180deg, #000 30%, transparent); mask: linear-gradient(180deg, #000 30%, transparent); }
.rl-valance { position: absolute; z-index: 7; top: 0; left: 0; right: 0; height: 13vh;
    background: linear-gradient(180deg, rgba(0, 0, 0, .4), transparent 60%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .45) 0, rgba(255, 255, 255, .1) 3%, rgba(0, 0, 0, .45) 6%), var(--rl-velvet);
    -webkit-mask: radial-gradient(circle at 50% 0, #000 70%, transparent 71%) 0 100% / 12vh 4vh repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 3vh) no-repeat;
    mask: radial-gradient(circle at 50% 0, #000 70%, transparent 71%) 0 100% / 12vh 4vh repeat-x, linear-gradient(#000, #000) 0 0 / 100% calc(100% - 3vh) no-repeat;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6));
}
.real-terciopelo:not([data-scene]).open .rl-velvet-l { animation: rlDrapeL calc(1.5s * var(--k)) cubic-bezier(.55, .05, .25, 1) forwards; }
.real-terciopelo:not([data-scene]).open .rl-velvet-r { animation: rlDrapeR calc(1.5s * var(--k)) cubic-bezier(.55, .05, .25, 1) forwards; }
.real-terciopelo.open .rl-spot { opacity: 1; }
.real-terciopelo.open .rl-stage-card { opacity: 0; transition-duration: calc(.4s * var(--k)); }
@keyframes rlDrapeL {
    0% { transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    18% { transform: scaleX(.97) skewY(.6deg); }
    100% { transform: scaleX(.2); clip-path: polygon(0 0, 100% 0, 46% 64%, 0 100%); }
}
@keyframes rlDrapeR {
    0% { transform: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
    18% { transform: scaleX(.97) skewY(-.6deg); }
    100% { transform: scaleX(.2); clip-path: polygon(0 0, 100% 0, 100% 100%, 54% 64%); }
}

/* Telón como malla de franjas (intro-motion.js las crea): cada franja es un pliegue con su luz,
   arranca con su propio retraso y su borde inferior se queda atrás al recogerse. */
.rl-velvet.is-mesh { background: none; box-shadow: none; overflow: visible; }
.rl-velvet.is-mesh > .rl-fringe { display: none; }
.rl-strip { position: absolute; top: 0; bottom: 0; transform-origin: 50% 0; will-change: transform;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, .58) 0%, rgba(0, 0, 0, .2) 20%, rgba(255, 222, 222, .15) 44%, rgba(0, 0, 0, .06) 62%, rgba(0, 0, 0, .52) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .45), transparent 20%, transparent 78%, rgba(0, 0, 0, .55)),
        linear-gradient(rgba(0, 0, 0, var(--v, 0)), rgba(0, 0, 0, var(--v, 0))),
        var(--rl-paper-noise),
        var(--rl-velvet);
    background-blend-mode: normal, normal, normal, overlay, normal;
}
.rl-strip > i { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .55)); opacity: 0; }
.rl-strip::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background: repeating-linear-gradient(90deg, #f1d488 0 2px, #8a6420 2px 3px, transparent 3px 5px), var(--rl-gold); -webkit-mask: linear-gradient(180deg, #000 30%, transparent); mask: linear-gradient(180deg, #000 30%, transparent); }
.rl-motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.rl-motes i { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; border-radius: 50%; background: color-mix(in srgb, var(--rl-light) 80%, #fff); box-shadow: 0 0 6px color-mix(in srgb, var(--rl-light) 70%, transparent); opacity: 0; animation: rlMote var(--t) ease-in-out var(--d) infinite; }
@keyframes rlMote { 0%, 100% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .7; } 70% { opacity: .45; } 99% { transform: translate(var(--dx), -60px); } }
/* La escena decide cuándo y cómo desaparece la apertura */
.intro-real[data-scene].open { opacity: 1; visibility: visible; transition: none; }
/* ---------- 3. Puertas de roble macizo ---------- */
.real-roble { --rl-oak: var(--op-a, #5d3b22); --rl-fade: 1.95s;
    background:
        radial-gradient(ellipse at 50% 60%, transparent 40%, rgba(0, 0, 0, .6)),
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 44px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 2px, transparent 2px 90px),
        var(--rl-paper-noise),
        color-mix(in srgb, var(--op-wall, #8b8274) 100%, #000);
    background-blend-mode: normal, normal, normal, multiply, normal;
}
.rl-doorway { position: relative; width: min(78vw, 400px); aspect-ratio: .56; max-height: 82vh; display: flex; perspective: 1200px; border-radius: 50% 50% 4px 4px / 22% 22% 4px 4px; padding: 10px; background: linear-gradient(90deg, #2b1a0e, #4a2f1a 12%, #2b1a0e 50%, #4a2f1a 88%, #2b1a0e); box-shadow: 0 0 0 6px #6b6458, 0 0 0 9px rgba(0, 0, 0, .4), 0 30px 60px rgba(0, 0, 0, .6); }
.rl-flood { position: absolute; inset: 10px; border-radius: inherit; background: radial-gradient(ellipse at 50% 55%, #fff, var(--rl-light) 35%, color-mix(in srgb, var(--rl-light) 60%, #a06a2a) 100%); opacity: .9; }
.rl-leaf { position: relative; z-index: 1; flex: 1; display: grid; grid-template-rows: 1fr 1.25fr; gap: 9%; padding: 16% 13% 13%; box-sizing: border-box;
    background: linear-gradient(90deg, rgba(0, 0, 0, .35), transparent 14%, transparent 86%, rgba(0, 0, 0, .3)), linear-gradient(180deg, rgba(255, 230, 190, .1), rgba(0, 0, 0, .25)), var(--rl-grain-v), var(--rl-oak);
    background-size: cover, cover, 300px 900px, cover;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 2px 0 0 rgba(255, 220, 170, .12);
    transform-style: preserve-3d; backface-visibility: hidden;
    transition: none;
}
.rl-leaf-l { transform-origin: 0 50%; border-radius: 100% 0 0 0 / 18% 0 0 0; }
.rl-leaf-r { transform-origin: 100% 50%; border-radius: 0 100% 0 0 / 0 18% 0 0; }
.rl-panel { display: block; border-radius: 3px; background: linear-gradient(135deg, rgba(255, 230, 190, .1), rgba(0, 0, 0, .18)), var(--rl-grain-v), var(--rl-oak); background-size: cover, 300px 900px, cover; box-shadow: 0 0 0 5px rgba(0, 0, 0, .14), inset 3px 3px 3px rgba(255, 225, 180, .18), inset -4px -4px 8px rgba(0, 0, 0, .5), -2px -2px 2px rgba(255, 225, 180, .1), 3px 3px 5px rgba(0, 0, 0, .45); }
.rl-leaf-l .rl-panel:first-child { border-top-left-radius: 70% 30%; }
.rl-leaf-r .rl-panel:first-child { border-top-right-radius: 70% 30%; }
.rl-carve { position: absolute; left: 0; right: 0; top: 40%; text-align: center; font: var(--names-style) var(--names-weight) clamp(1.1rem, 6cqi, 2rem)/1 var(--font-names); z-index: 2; color: rgba(24, 12, 4, .78); text-shadow: 0 1px 0 rgba(255, 225, 180, .3), 0 -1px 0 rgba(0, 0, 0, .55); overflow-wrap: anywhere; padding: 0 8%; }
.rl-ring { position: absolute; top: 52%; width: 15%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from 210deg, #fff3c4, #b8913a, #5c4210, #e9cc7c, #9b7428, #fff3c4); -webkit-mask: radial-gradient(circle, transparent 52%, #000 56%); mask: radial-gradient(circle, transparent 52%, #000 56%); filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, .6)); }
.rl-leaf-l .rl-ring { right: 8%; }
.rl-leaf-r .rl-ring { left: 8%; }
.rl-gap { position: absolute; z-index: 2; left: 50%; top: 12%; bottom: 10px; width: 3px; translate: -50% 0; background: var(--rl-light); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--rl-light) 70%, transparent), 0 0 40px 10px color-mix(in srgb, var(--rl-light) 30%, transparent); opacity: .85; animation: rlLeak 2.6s ease-in-out infinite; }
@keyframes rlLeak { 50% { opacity: .55; } }
.real-roble:not([data-scene]).open .rl-leaf-l { transform: rotateY(-84deg); transition: transform 1.35s ease .15s; }
.real-roble:not([data-scene]).open .rl-leaf-r { transform: rotateY(84deg); transition: transform 1.35s ease .15s; }
.real-roble:not([data-scene]).open .rl-gap { opacity: 0; animation: none; transition: opacity calc(.3s * var(--k)); }
.real-roble:not([data-scene]).open .rl-doorway { transform: scale(1.9); }
/* Escena de puertas (intro-motion.js): cámara, canto de cada hoja, su sombra y la luz en el suelo */
.rl-dolly { position: relative; display: grid; place-items: center; transform-origin: 50% 60%; }
.rl-leaf-edge { position: absolute; top: 0; bottom: 0; width: 18px; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .2) 40%, rgba(0, 0, 0, .5)), var(--rl-grain-v), color-mix(in srgb, var(--rl-oak) 80%, #000); background-size: cover, 300px 900px, cover; }
.rl-leaf-l .rl-leaf-edge { left: 100%; transform-origin: 0 50%; transform: rotateY(90deg); }
.rl-leaf-r .rl-leaf-edge { right: 100%; transform-origin: 100% 50%; transform: rotateY(-90deg); }
.rl-leaf-shade { position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: linear-gradient(90deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35)); opacity: 0; pointer-events: none; }
.rl-leaf-r .rl-leaf-shade { background: linear-gradient(270deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35)); }
.rl-beam { position: absolute; z-index: 0; top: calc(100% - 14px); left: 50%; width: 220%; height: 34vh; translate: -50% 0; clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%); -webkit-clip-path: polygon(36% 0, 64% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, color-mix(in srgb, var(--rl-light) 70%, transparent), transparent 85%); opacity: 0; filter: blur(4px); pointer-events: none; }
.rl-motes-door { z-index: 0; inset: 10px; border-radius: inherit; overflow: hidden; }
.real-roble[data-scene] .rl-flood { opacity: .25; }
.real-roble[data-scene] .rl-gap { animation: none; }

/* ---------- 4. Seda que se desliza ---------- */
.real-seda { --rl-silk: var(--op-a, #e8d3bf); --rl-fade: 1.5s; background: transparent; perspective: 900px; }
.rl-silk { position: absolute; inset: -4%; display: grid; place-items: center; transform-origin: 50% 0;
    background:
        linear-gradient(104deg, rgba(0, 0, 0, .26) 0%, rgba(255, 255, 255, .42) 11%, rgba(0, 0, 0, .14) 21%, rgba(255, 255, 255, .26) 33%, rgba(0, 0, 0, .3) 46%, rgba(255, 255, 255, .5) 57%, rgba(0, 0, 0, .18) 69%, rgba(255, 255, 255, .32) 81%, rgba(0, 0, 0, .26) 100%),
        var(--rl-silk);
    background-size: 240% 100%, cover;
    animation: rlSilk 11s ease-in-out infinite alternate;
}
.rl-silk-sheen { position: absolute; inset: 0; background: linear-gradient(68deg, transparent 20%, rgba(255, 255, 255, .28) 38%, transparent 52%, rgba(0, 0, 0, .12) 66%, transparent 80%); background-size: 260% 100%; animation: rlSilk 7s ease-in-out infinite alternate-reverse; mix-blend-mode: soft-light; }
@keyframes rlSilk { from { background-position: 0% 0, 0 0; } to { background-position: 100% 0, 0 0; } }
.rl-embroider { z-index: 1; }
.rl-mono { font: var(--names-style) 700 clamp(3rem, 18cqi, 6rem)/1 var(--font-names); color: transparent; background: var(--rl-gold); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)) drop-shadow(0 4px 6px rgba(0, 0, 0, .18)); }
.rl-embroider .op-title { color: transparent !important; background: var(--rl-gold); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .3)); }
.real-seda.open .rl-silk { animation: rlSilkOff calc(1.45s * var(--k)) cubic-bezier(.55, 0, .65, .35) forwards; }
@keyframes rlSilkOff {
    0% { transform: none; }
    22% { transform: translateY(4%) rotateX(-6deg) skewX(1.5deg); }
    55% { transform: translateY(42%) rotateX(-22deg) skewX(-2deg); }
    100% { transform: translateY(115%) rotateX(-38deg) skewX(2deg); }
}

/* ---------- 5. Carta que se quema ---------- */
.real-fuego { --rl-old: var(--op-a, #eedfc0); --rl-fade: 2.2s; background: transparent; }
.rl-burn { position: absolute; inset: 0; display: grid; place-items: center;
    background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(110, 66, 24, .45) 100%), var(--rl-fibers), var(--rl-paper-noise), var(--rl-old);
    background-blend-mode: normal, multiply, multiply, normal;
    --c1: calc(var(--px, 50%) + 0px) calc(var(--py, 50%) + 0px);
    --c2: calc(var(--px, 50%) + 3vmin) calc(var(--py, 50%) - 2vmin);
    --c3: calc(var(--px, 50%) - 3vmin) calc(var(--py, 50%) + 2vmin);
    --c4: calc(var(--px, 50%) + 2vmin) calc(var(--py, 50%) + 3vmin);
    --c5: calc(var(--px, 50%) - 2vmin) calc(var(--py, 50%) - 3vmin);
    -webkit-mask-image: radial-gradient(circle at var(--c1), transparent var(--rl-r), #000 calc(var(--rl-r) + 1px)), radial-gradient(circle at var(--c2), transparent calc(var(--rl-r) * .9), #000 calc(var(--rl-r) * .9 + 1px)), radial-gradient(circle at var(--c3), transparent calc(var(--rl-r) * .93), #000 calc(var(--rl-r) * .93 + 1px)), radial-gradient(circle at var(--c4), transparent calc(var(--rl-r) * .86), #000 calc(var(--rl-r) * .86 + 1px)), radial-gradient(circle at var(--c5), transparent calc(var(--rl-r) * .88), #000 calc(var(--rl-r) * .88 + 1px));
    mask-image: radial-gradient(circle at var(--c1), transparent var(--rl-r), #000 calc(var(--rl-r) + 1px)), radial-gradient(circle at var(--c2), transparent calc(var(--rl-r) * .9), #000 calc(var(--rl-r) * .9 + 1px)), radial-gradient(circle at var(--c3), transparent calc(var(--rl-r) * .93), #000 calc(var(--rl-r) * .93 + 1px)), radial-gradient(circle at var(--c4), transparent calc(var(--rl-r) * .86), #000 calc(var(--rl-r) * .86 + 1px)), radial-gradient(circle at var(--c5), transparent calc(var(--rl-r) * .88), #000 calc(var(--rl-r) * .88 + 1px));
    -webkit-mask-composite: source-in; mask-composite: intersect;
    transition: --rl-r calc(2.3s * var(--k)) cubic-bezier(.55, .08, .75, .5);
}
.rl-burn .op-card .op-title { color: #3a2614 !important; }
.rl-ember { position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background:
        radial-gradient(circle at var(--c1), transparent var(--rl-r), #fff2b0 calc(var(--rl-r) + 1px), #ff9a2e calc(var(--rl-r) + 4px), #a3330c calc(var(--rl-r) + 9px), rgba(35, 18, 8, .9) calc(var(--rl-r) + 16px), rgba(70, 40, 15, .35) calc(var(--rl-r) + 34px), transparent calc(var(--rl-r) + 60px)),
        radial-gradient(circle at var(--c2), transparent calc(var(--rl-r) * .9), #ffd27a calc(var(--rl-r) * .9 + 1px), #c2410c calc(var(--rl-r) * .9 + 7px), rgba(35, 18, 8, .85) calc(var(--rl-r) * .9 + 15px), transparent calc(var(--rl-r) * .9 + 40px)),
        radial-gradient(circle at var(--c4), transparent calc(var(--rl-r) * .86), #ffb347 calc(var(--rl-r) * .86 + 1px), #9a3412 calc(var(--rl-r) * .86 + 7px), rgba(35, 18, 8, .85) calc(var(--rl-r) * .86 + 14px), transparent calc(var(--rl-r) * .86 + 38px));
    transition: opacity .15s;
}
.real-fuego.open .rl-burn { --rl-r: 160vmax; }
.real-fuego.open .rl-ember { opacity: 1; animation: rlFlicker .18s steps(2, end) infinite; }
@keyframes rlFlicker { 50% { filter: brightness(1.25) saturate(1.2); } }
.rl-smoke, .rl-ash { position: absolute; inset: 0; pointer-events: none; }
.rl-smoke i { position: absolute; left: calc(var(--px, 50%) - var(--s) / 2); top: calc(var(--py, 50%) - var(--s) / 2); width: var(--s); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(70, 64, 58, .5), transparent 70%); filter: blur(10px); opacity: 0; }
.real-fuego.open .rl-smoke i { animation: rlSmoke calc(2.4s * var(--k)) ease-out calc(var(--d) * var(--k)) forwards; }
@keyframes rlSmoke { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 25% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--dx), -55vh) scale(3.2); } }
.rl-ash i { position: absolute; left: var(--px, 50%); top: var(--py, 50%); width: var(--s); height: calc(var(--s) * .7); background: #1d1510; border-radius: 30% 60% 40% 50%; box-shadow: 0 0 3px rgba(255, 140, 40, .6); opacity: 0; }
.real-fuego.open .rl-ash i { animation: rlAsh calc(2.2s * var(--k)) ease-out calc(var(--d) * var(--k)) forwards; }
@keyframes rlAsh { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); } }

/* ---------- 6. Cristal empañado ---------- */
.real-vaho { --rl-fade: 1.6s; background: transparent; }
.rl-fog { position: absolute; inset: 0; display: grid; place-items: center;
    background: linear-gradient(180deg, rgba(236, 241, 246, .62), rgba(214, 223, 232, .7)), var(--rl-paper-noise);
    background-blend-mode: normal, soft-light;
    -webkit-backdrop-filter: blur(18px) saturate(.75) brightness(1.06); backdrop-filter: blur(18px) saturate(.75) brightness(1.06);
    -webkit-mask-image: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent calc(var(--rl-r) - 14vmin), #000 var(--rl-r));
    mask-image: radial-gradient(circle at var(--px, 50%) var(--py, 50%), transparent calc(var(--rl-r) - 14vmin), #000 var(--rl-r));
    transition: --rl-r calc(1.5s * var(--k)) cubic-bezier(.45, 0, .2, 1) calc(.1s * var(--k));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .rl-fog { background-color: rgba(222, 230, 238, .96); } }
.rl-finger .op-card { color: #2c3a48; text-shadow: 0 0 1px rgba(255, 255, 255, .9), 0 0 14px rgba(255, 255, 255, .9), 0 1px 1px rgba(255, 255, 255, .8); }
.rl-finger .op-title { color: color-mix(in srgb, var(--op-b, var(--accent)) 65%, #1d2833) !important; }
.rl-finger .op-kicker, .rl-finger .intro-for, .rl-finger .intro-for strong { color: #2c3a48 !important; }
.rl-drops { position: absolute; inset: 0; }
.rl-drops i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: calc(var(--s) * 1.15); border-radius: 50% 50% 48% 48% / 46% 46% 54% 54%;
    background: radial-gradient(ellipse 34% 26% at 36% 30%, rgba(255, 255, 255, .95), transparent 70%), radial-gradient(circle at 55% 65%, rgba(255, 255, 255, .25), rgba(120, 140, 160, .25) 60%, rgba(30, 40, 50, .3) 100%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .18), inset 0 -1px 2px rgba(255, 255, 255, .5);
}
.rl-drops i.is-run { animation: rlRun 9s cubic-bezier(.6, 0, .9, .5) var(--d) infinite; }
.rl-drops i.is-run::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 100%; height: 0; background: linear-gradient(transparent, rgba(255, 255, 255, .35)); border-radius: 2px; animation: rlTrail 9s cubic-bezier(.6, 0, .9, .5) var(--d) infinite; }
@keyframes rlRun { 0%, 55% { transform: none; } 100% { transform: translateY(38vh); } }
@keyframes rlTrail { 0%, 55% { height: 0; } 100% { height: 38vh; } }
.real-vaho.open .rl-fog { --rl-r: 150vmax; }
.real-vaho.open .rl-finger { opacity: 0; transition: opacity calc(.5s * var(--k)); }
.real-vaho[data-tap] > .intro-hint, .real-seda[data-tap] > .intro-hint, .real-fuego[data-tap] > .intro-hint, .real-rasgado[data-tap] > .intro-hint { color: #3a3128; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }

/* ---------- 7. Joyero de terciopelo ---------- */
.real-joyero { --rl-box: var(--op-a, #123d2f); --rl-satin: var(--op-b, #f3e9da); }
.rl-jcam { position: relative; width: min(64vw, 300px); aspect-ratio: 1; transform-style: preserve-3d; }
.rl-jewel { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(18deg); }
.rl-jcontact { position: absolute; left: 4%; right: 4%; bottom: -8%; height: 26%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 45%, transparent 72%); filter: blur(10px); transform: translateZ(-20px); }
.rl-jbloom { position: absolute; left: -30%; right: -30%; top: -25%; height: 95%; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--rl-light) 80%, transparent), transparent 62%); opacity: 0; pointer-events: none; transform: translateZ(-10px); }
.rl-jlight { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 40%, color-mix(in srgb, var(--rl-light) 75%, #fff), transparent 70%); mix-blend-mode: screen; opacity: 0; }
.rl-jlid-shade { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .25)); opacity: 0; }
.rl-jbase, .rl-jlid-out { background: radial-gradient(ellipse 70% 50% at 50% 22%, rgba(255, 255, 255, .2), transparent 70%), var(--rl-paper-noise), var(--rl-box); background-blend-mode: normal, overlay, normal; }
.rl-jbase { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; border-radius: 10px 10px 22px 22px / 10px 10px 30px 30px; box-shadow: inset 0 10px 14px rgba(255, 255, 255, .12), inset 0 -22px 30px rgba(0, 0, 0, .6), 0 2px 0 rgba(0, 0, 0, .4); display: grid; place-items: center; }
.rl-jbase::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--rl-gold); }
.rl-jbase span { font: var(--names-style) 700 clamp(1.2rem, 6cqi, 1.9rem)/1 var(--font-names); color: transparent; background: var(--rl-gold); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.rl-jinside { position: absolute; left: 4%; right: 4%; bottom: 46%; height: 42%; border-radius: 16px 16px 4px 4px; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(ellipse 60% 40% at 50% 70%, rgba(255, 255, 255, .7), transparent 70%), repeating-linear-gradient(100deg, rgba(0, 0, 0, .05) 0 6px, rgba(255, 255, 255, .25) 6px 12px), var(--rl-satin);
    box-shadow: inset 0 12px 24px rgba(0, 0, 0, .45), inset 0 -6px 10px rgba(0, 0, 0, .2); }
.rl-jinside::before { content: ''; position: absolute; left: 50%; top: 52%; width: 34%; height: 16%; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .45), transparent 70%); }
.rl-jring { position: relative; width: 40%; aspect-ratio: 1; margin-top: 18%; border-radius: 50%; transform: rotateX(62deg); background: conic-gradient(from 200deg, #fff8d6, #d4ad4f, #6e4f12, #f6de8f, #a8812c, #fff8d6); -webkit-mask: radial-gradient(circle, transparent 58%, #000 61%, #000 70%, transparent 72%); mask: radial-gradient(circle, transparent 58%, #000 61%, #000 70%, transparent 72%); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4)); }
.rl-jstone { position: absolute; left: 50%; top: 31%; width: 12%; aspect-ratio: 1; translate: -50% 0; rotate: 45deg; background: conic-gradient(from 0deg, #fff, #cfe8ff, #fff, #a9c8e8, #fff, #e8f4ff, #fff); box-shadow: 0 0 10px rgba(255, 255, 255, .9), 0 0 24px color-mix(in srgb, var(--rl-light) 80%, transparent); }
.rl-jglint { position: absolute; left: 50%; top: 27%; width: 30%; aspect-ratio: 1; translate: -50% -20%; background: conic-gradient(from 0deg, transparent 0 40deg, #fff 45deg, transparent 50deg 130deg, #fff 135deg, transparent 140deg 220deg, #fff 225deg, transparent 230deg 310deg, #fff 315deg, transparent 320deg); -webkit-mask: radial-gradient(circle, #000 10%, transparent 60%); mask: radial-gradient(circle, #000 10%, transparent 60%); opacity: 0; }
.rl-jlid { position: absolute; z-index: 3; left: 0; right: 0; bottom: 47%; height: 46%; transform-origin: 50% 0; transform-style: preserve-3d; transform: translateZ(2px); }
.rl-jlid > i { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px 22px 8px 8px / 30px 30px 8px 8px; }
.rl-jlid-out { box-shadow: inset 0 14px 18px rgba(255, 255, 255, .16), inset 0 -14px 20px rgba(0, 0, 0, .55); }
.rl-jlid-out::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--rl-gold); }
.rl-jlid-in { transform: rotateX(180deg); background: radial-gradient(ellipse at 50% 60%, rgba(255, 255, 255, .6), transparent 70%), repeating-linear-gradient(80deg, rgba(0, 0, 0, .05) 0 6px, rgba(255, 255, 255, .3) 6px 12px), var(--rl-satin); box-shadow: inset 0 0 18px rgba(0, 0, 0, .35); }
.real-joyero:not([data-scene]).open .rl-jlid { transform: translateZ(2px) translateY(-4%) rotateX(-106deg); transition: transform 1s ease .15s; }
.real-joyero:not([data-scene]).open .rl-jglint { animation: rlGlint calc(.9s * var(--k)) ease-out calc(.8s * var(--k)) both; }
.real-joyero:not([data-scene]).open .rl-jewel { transform: rotateX(6deg) translateY(30%) scale(2.6); transition: transform 1s ease 1.1s; }
@keyframes rlGlint { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 40% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4) rotate(70deg); } }
.rl-under { position: absolute; z-index: 2; left: 0; right: 0; top: max(7vh, 40px); display: grid; justify-items: center; transition: opacity calc(.4s * var(--k)); }
.rl-under .op-card, .rl-under .intro-for { color: #f5ead8; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.rl-under .op-title { color: transparent !important; background: var(--rl-gold); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55)); }
.rl-under .op-kicker, .rl-under .intro-for, .rl-under .intro-for strong { color: #f5ead8 !important; }
.intro-real.open .rl-under { opacity: 0; }

/* ---------- 8. Libro de cuero ---------- */
.real-cuero { --rl-leather: var(--op-a, #5b2a18); --rl-page: #f6efe1; }
.rl-book { position: relative; width: min(66vw, 320px); aspect-ratio: .72; transform-style: preserve-3d; transform: rotateX(14deg) rotateZ(-2deg); transition: transform calc(1s * var(--k)) cubic-bezier(.5, 0, .3, 1) calc(1.2s * var(--k)); }
.rl-book::before { content: ''; position: absolute; inset: 6% -4% -5% 4%; background: rgba(0, 0, 0, .6); filter: blur(22px); transform: translateZ(-2px); }
.rl-pages { position: absolute; inset: 1.5% 1.5% 1.5% 2%; display: grid; place-items: center; border-radius: 2px 6px 6px 2px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 8%), var(--rl-fibers), var(--rl-page);
    box-shadow: 3px 0 0 #e9e0cd, 5px 1px 0 #dcd2bd, 7px 2px 0 #e9e0cd, 9px 3px 0 #cfc4ad, 10px 4px 8px rgba(0, 0, 0, .35); }
.rl-pages .op-card { padding: 1.2rem; }
.rl-pages .op-title { font-size: clamp(1.4rem, 7cqi, 2.2rem); }
.rl-cover { position: absolute; inset: 0; z-index: 2; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform calc(1.25s * var(--k)) cubic-bezier(.55, .02, .3, 1) calc(.1s * var(--k)); }
.rl-cover > div { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3px 10px 10px 3px; }
.rl-cover-out { display: grid; place-items: center; align-content: center; gap: .6rem;
    background: linear-gradient(90deg, rgba(0, 0, 0, .55) 0, rgba(255, 255, 255, .1) 3%, rgba(0, 0, 0, .35) 6%, transparent 9%), radial-gradient(ellipse 80% 60% at 40% 30%, rgba(255, 255, 255, .12), transparent 70%), var(--rl-relief), var(--rl-leather);
    background-size: cover, cover, 240px 240px, cover; background-blend-mode: normal, normal, multiply, normal;
    box-shadow: inset 0 0 0 10px rgba(0, 0, 0, .1), inset 0 0 24px rgba(0, 0, 0, .55), 0 2px 3px rgba(0, 0, 0, .4); }
.rl-cover-out::before { content: ''; position: absolute; inset: 7%; border: 1.5px dashed rgba(255, 228, 180, .35); border-radius: 4px; }
.rl-cover-out::after { content: ''; position: absolute; inset: 11%; border: 2px solid transparent; border-radius: 2px; background: var(--rl-gold) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); opacity: .85; }
.rl-foil { position: relative; z-index: 1; font: var(--names-style) 700 clamp(2.6rem, 15cqi, 4.4rem)/1 var(--font-names); color: transparent; background: var(--rl-gold); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .5)) drop-shadow(0 1px 0 rgba(255, 230, 170, .25)); }
.rl-foil-sub { position: relative; z-index: 1; max-width: 70%; text-align: center; font: 600 .62rem/1.3 var(--font-body); letter-spacing: .32em; text-transform: uppercase; color: #e7c97c; opacity: .9; }
.rl-cover-in { transform: rotateY(180deg); background: linear-gradient(90deg, transparent 88%, rgba(0, 0, 0, .25)), var(--rl-fibers), var(--rl-paper-noise), color-mix(in srgb, var(--rl-leather) 22%, #efe4cd); background-blend-mode: normal, multiply, multiply, normal; box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--rl-leather) 85%, #000), inset 0 0 26px rgba(0, 0, 0, .35); }
.real-cuero.open .rl-cover { transform: rotateY(-168deg); }
.real-cuero.open .rl-book { transform: rotateX(0deg) rotateZ(0deg) translateX(8%) scale(2.1); }

/* ---------- 9. Foto instantánea que se revela ---------- */
.real-polaroid { --rl-fade: 2.25s; }
.rl-polaroid { position: relative; width: min(70vw, 320px); padding: 6% 6% 0; box-sizing: border-box; rotate: -4deg; border-radius: 2px;
    background: var(--rl-paper-noise), linear-gradient(170deg, #fbfaf6, #ecebe5);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 18px 34px -10px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .7);
    transition: transform calc(1s * var(--k)) cubic-bezier(.5, 0, .3, 1) calc(1.35s * var(--k)), rotate calc(1s * var(--k)) ease calc(1.35s * var(--k)); }
.rl-photo { position: relative; aspect-ratio: 1; overflow: hidden; display: grid; place-items: center;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 50%, #fff), color-mix(in srgb, var(--accent) 70%, #000)); background-size: cover; background-position: center;
    filter: sepia(.65) saturate(.55) brightness(.45) contrast(.8) hue-rotate(-10deg);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25), inset 0 0 26px rgba(0, 0, 0, .35);
    transition: filter calc(1.3s * var(--k)) ease-in calc(.35s * var(--k)); }
.rl-photo-mono { font: var(--names-style) 700 clamp(3rem, 16cqi, 5rem)/1 var(--font-names); color: rgba(255, 255, 255, .92); text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
.rl-chem { position: absolute; inset: 0; background: linear-gradient(160deg, #3c3a2a, #24261e 55%, #4a3b2a); opacity: .93; transition: opacity calc(1.3s * var(--k)) ease-in calc(.35s * var(--k)); }
.rl-chem::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 45%, transparent 60%); }
.rl-caption { margin: 0; padding: 9% 4% 11%; text-align: center; font: var(--names-style) 500 clamp(1.15rem, 5.4cqi, 1.7rem)/1.15 var(--font-names); color: #23324f; rotate: -1.5deg; }
.real-polaroid .rl-under-pol { top: auto; bottom: max(12vh, 80px); }
.real-polaroid.open .rl-polaroid { animation: rlShake calc(.6s * var(--k)) ease-in-out; transform: translateY(-4%) scale(2.4); rotate: 0deg; }
.real-polaroid.open .rl-photo { filter: none; }
.real-polaroid.open .rl-chem { opacity: 0; }
@keyframes rlShake { 0%, 100% { translate: 0 0; } 15% { translate: -14px 4px; } 30% { translate: 13px -3px; } 45% { translate: -11px 3px; } 60% { translate: 9px -2px; } 75% { translate: -5px 1px; } }

/* ---------- 10. Papel de algodón que se rasga ---------- */
.real-rasgado { --rl-sheetc: var(--op-a, #f5f0e6); --rl-fade: 1.45s; background: transparent; }
.rl-half { position: absolute; inset: 0; }
.rl-sheet { position: absolute; inset: 0; display: grid; place-items: center;
    background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 100, 70, .22)), var(--rl-fibers), var(--rl-paper-noise), var(--rl-sheetc);
    background-blend-mode: normal, multiply, multiply, normal; }
.rl-sheet .intro-center { width: 100%; }
.rl-fiber { position: absolute; inset: 0; opacity: 0; background: var(--rl-paper-noise), color-mix(in srgb, var(--rl-sheetc) 40%, #fff); filter: blur(.7px) drop-shadow(0 0 1px rgba(0, 0, 0, .12)); transition: opacity .1s; }
.rl-half-l { transform-origin: 0 100%; }
.rl-half-r { transform-origin: 100% 100%; }
.real-rasgado.open .rl-fiber { opacity: 1; }
.real-rasgado.open .rl-half-l { animation: rlRipL calc(1.35s * var(--k)) cubic-bezier(.55, 0, .25, 1) forwards; }
.real-rasgado.open .rl-half-r { animation: rlRipR calc(1.35s * var(--k)) cubic-bezier(.55, 0, .25, 1) forwards; }
.real-rasgado.open .rl-half { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
@keyframes rlRipL { 0% { transform: none; } 14% { transform: translateX(-.6%) rotate(-.4deg); } 100% { transform: translate(-64%, 6%) rotate(-9deg); } }
@keyframes rlRipR { 0% { transform: none; } 14% { transform: translateX(.6%) rotate(.4deg); } 100% { transform: translate(64%, 8%) rotate(10deg); } }

@media (prefers-reduced-motion: reduce) { .respect-rm .rl-silk, .respect-rm .rl-silk-sheen, .respect-rm .rl-drops i.is-run, .respect-rm .rl-drops i.is-run::after, .respect-rm .rl-gap { animation: none; } }