/* ==========================================================================
   Aperturas (familias nuevas). Se carga solo cuando la invitación tiene apertura.
   Variables comunes: --k (velocidad), --op-a / --op-b (colores elegidos),
   --op-wall (pared o fondo) y --op-light (luz).
   ========================================================================== */
.intro[data-tap] { --k: 1; overflow: hidden; cursor: pointer; }
.intro[data-tap] .intro-center { pointer-events: none; }
.intro[data-tap] .intro-center :is(button, a) { pointer-events: auto; }
.intro[data-tap] .intro-hint { color: inherit; }
.op-title { font: var(--names-style) var(--names-weight) clamp(2rem, 9cqi, 3.2rem)/1.05 var(--font-names); text-transform: var(--names-case); letter-spacing: var(--names-tracking); margin: 0; }
.op-kicker { font: 600 .68rem/1 var(--font-body); letter-spacing: .3em; text-transform: uppercase; opacity: .75; }
@media (prefers-reduced-motion: reduce) { .intro[data-tap] { --k: .35 !important; } }

/* ==========================================================================
   Puertas
   ========================================================================== */
.intro-doors {
    --door: var(--op-a, var(--door-def, var(--curtain)));
    --door-trim: var(--op-b, var(--trim-def, color-mix(in srgb, var(--door) 72%, #000)));
    --door-wall: var(--op-wall, var(--wall-def, color-mix(in srgb, var(--door) 25%, #1b1714)));
    --door-light: var(--op-light, var(--light-def, #ffd9a0));
    --fr: 1; --glow: 1; --grain: .55; --sheen: .08; --arch: 0%;
    --m-hi: #fff1b8; --m: #d4a845; --m-lo: #7a5513;
    --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='960'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.09 0.0035' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.07 0 0 0 0 0.03 1.9 0 0 0 -0.66'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    --fr-w: clamp(9px, 1.6vmin, 18px);
    --fr-t: calc(var(--fr) * clamp(46px, 10vh, 110px));
    --t: calc(1.6s * var(--k));
    background: transparent; color: #fff;
}
.door-scene { position: absolute; z-index: 1; left: 50%; bottom: 0; top: var(--fr-t); translate: -50% 0; width: calc(var(--fr) * min(calc(100% - clamp(36px, 12vw, 220px)), calc((100vh - var(--fr-t)) * .8)) + (1 - var(--fr)) * 100%); }
.door-way { position: absolute; inset: 0; perspective: 1500px; border-radius: var(--arch-r, 0); }
.door-behind { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 60% 55% at 50% 58%, color-mix(in srgb, var(--door-light) calc(var(--glow) * 70%), transparent), transparent 75%), rgba(10, 8, 6, .35); backdrop-filter: blur(9px) brightness(.75); transition: opacity calc(.8s * var(--k)) ease calc(.9s * var(--k)); }
.door-seam { position: absolute; z-index: 3; left: 50%; top: 4%; bottom: 0; width: 2px; translate: -50% 0; background: var(--door-light); box-shadow: 0 0 10px 2px var(--door-light), 0 0 40px 8px color-mix(in srgb, var(--door-light) 45%, transparent); opacity: calc(var(--glow) * .9); animation: seam 2.6s ease-in-out infinite; transition: opacity .3s, width var(--t); }
@keyframes seam { 50% { opacity: calc(var(--glow) * .55); } }

.intro-doors .door { position: absolute; z-index: 2; top: 0; bottom: 0; width: 50.15%; overflow: hidden; transition: transform var(--t) cubic-bezier(.62, .02, .22, 1) calc(.12s * var(--k)); will-change: transform; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45); }
.intro-doors .door-l { left: 0; transform-origin: left center; border-top-left-radius: 100% var(--arch); }
.intro-doors .door-r { right: 0; transform-origin: right center; border-top-right-radius: 100% var(--arch); }
.door-body { position: absolute; inset: 0; background-color: var(--door); background-image: var(--body-img, none); }
.door-body::before, .door-body::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.door-body::before { background-image: var(--grain-img); background-size: 320px 960px; mix-blend-mode: multiply; opacity: var(--grain); }
.door-body::after { z-index: 3; background: linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 14%, transparent 86%, rgba(0, 0, 0, .22)), linear-gradient(104deg, transparent 30%, rgba(255, 255, 255, var(--sheen)) 46%, transparent 60%), linear-gradient(180deg, rgba(255, 255, 255, calc(var(--sheen) * .8)), transparent 22%, transparent 70%, rgba(0, 0, 0, .25)); }
.door-r .door-body::after { transform: scaleX(-1); }
.door-shade { position: absolute; inset: 0; z-index: 4; background: #000; opacity: 0; transition: opacity var(--t) ease calc(.12s * var(--k)); pointer-events: none; }
.door-glass { display: none; position: absolute; z-index: 1; pointer-events: none; }

/* Paneles en relieve */
.dp { position: absolute; left: 15%; right: 15%; border-radius: 2px; box-shadow: inset 3px 3px 2px rgba(255, 255, 255, .1), inset -3px -3px 3px rgba(0, 0, 0, .38), 0 0 0 clamp(4px, .9vmin, 8px) color-mix(in srgb, var(--door) 86%, #000), 0 0 0 calc(clamp(4px, .9vmin, 8px) + 1px) rgba(0, 0, 0, .45), 0 0 0 calc(clamp(4px, .9vmin, 8px) + 2px) rgba(255, 255, 255, .08); background: linear-gradient(160deg, rgba(255, 255, 255, .05), transparent 40%, rgba(0, 0, 0, .1)); }
.dp-1 { top: 6%; height: 17%; } .dp-2 { top: 29%; height: 37%; } .dp-3 { top: 72%; height: 21%; }
.door-deco, .door-knock, .door-vines { display: none; }

/* Manija (palanca con roseta) */
.door-handle { position: absolute; z-index: 2; top: var(--h-y, 52%); width: clamp(9px, 1.5vmin, 13px); height: clamp(48px, 8vmin, 72px); translate: 0 -50%; border-radius: 8px; background: linear-gradient(90deg, var(--m-lo), var(--m-hi) 40%, var(--m) 60%, var(--m-lo)); box-shadow: 0 4px 8px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(0, 0, 0, .25); }
.door-handle::after { content: ''; position: absolute; top: 30%; width: clamp(26px, 4.6vmin, 42px); height: clamp(6px, 1vmin, 9px); border-radius: 6px; background: linear-gradient(180deg, var(--m-hi), var(--m) 50%, var(--m-lo)); box-shadow: 0 5px 6px rgba(0, 0, 0, .45); }
.door-l .door-handle { right: var(--h-x, 7%); } .door-l .door-handle::after { right: 0; }
.door-r .door-handle { left: var(--h-x, 7%); } .door-r .door-handle::after { left: 0; }

/* Aldaba (argolla) */
.door-knock { position: absolute; z-index: 2; top: var(--k-y, 46%); width: clamp(34px, 6.5vmin, 60px); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; border: clamp(4px, .8vmin, 7px) solid var(--m); box-shadow: 0 6px 8px rgba(0, 0, 0, .5), inset 0 2px 1px var(--m-hi), 0 -1px 0 var(--m-hi); }
.door-knock::before { content: ''; position: absolute; left: 50%; top: -38%; width: 34%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--m-hi), var(--m) 50%, var(--m-lo)); box-shadow: 0 3px 4px rgba(0, 0, 0, .5); }
.door-l .door-knock { right: 12%; } .door-r .door-knock { left: 12%; }

/* Texto en las puertas */
.door-text { position: absolute; z-index: 2; left: 50%; top: 47%; translate: -50% -50%; max-height: 52%; max-width: 76%; overflow: hidden; font: var(--names-style) var(--names-weight) clamp(1.6rem, 7cqi, 3.6rem)/1 var(--font-names); text-transform: var(--names-case); letter-spacing: .06em; white-space: nowrap; text-overflow: ellipsis; color: color-mix(in srgb, var(--door) 55%, #000); text-shadow: 0 1px 0 rgba(255, 255, 255, .22), 0 -1px 0 rgba(0, 0, 0, .55); }
[data-tdir="vertical"] .door-text { writing-mode: vertical-rl; }
[data-tdir="vertical"] .door-l .door-text { transform: rotate(180deg); }
[data-tdir="horizontal"] .door-text { white-space: normal; text-align: center; font-size: clamp(1.3rem, 5.5cqi, 2.6rem); }
[data-tstyle="dorado"] .door-text { color: transparent; background: linear-gradient(180deg, var(--m-hi), var(--m) 55%, var(--m-lo)); -webkit-background-clip: text; background-clip: text; text-shadow: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
[data-tstyle="pintado"] .door-text { color: var(--door-trim); text-shadow: none; }
[data-tstyle="oculto"] .door-text { display: none; }

/* Marco y pared */
.door-frame { position: absolute; z-index: 3; inset: calc(var(--fr-w) * -1) calc(var(--fr-w) * -1) 0; border: var(--fr-w) solid var(--door-trim); border-bottom: 0; border-radius: var(--arch-r, 0); box-shadow: 0 0 0 200vmax var(--door-wall), inset 0 0 30px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .3); opacity: var(--fr); pointer-events: none; transition: opacity calc(.7s * var(--k)) ease calc(1s * var(--k)); }
.door-frame::before { content: ''; position: absolute; inset: calc(var(--fr-w) * -1); border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .14), transparent 30%); pointer-events: none; }
.door-frame::after { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 55%, transparent 50%, rgba(0, 0, 0, .45)); pointer-events: none; }
.door-sign { display: none; }
.intro-doors .intro-center { position: absolute; z-index: 5; inset: 0; display: grid; place-content: end center; padding-bottom: max(96px, 17vh); justify-items: center; color: #fff; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); }
.intro-doors .intro-for { background: rgba(0, 0, 0, .35); padding: .5rem 1rem; border-radius: 10px; backdrop-filter: blur(4px); }
.intro-doors .intro-ring { border-color: #fff; }
.intro-doors .intro-hint { position: absolute; bottom: max(28px, 6vh); left: 50%; translate: -50% 0; white-space: nowrap; background: rgba(0, 0, 0, .4); padding: .7rem 1.1rem; border-radius: 99px; backdrop-filter: blur(4px); }
.intro-doors[data-center="boton"] .intro-seal, .intro-doors[data-center="ninguno"] :is(.intro-seal, .intro-btn), .intro-doors:not([data-center="boton"]) .intro-btn { display: none; }
.intro-doors .intro-seal { box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--on-accent) 32%, transparent), 0 14px 26px rgba(0, 0, 0, .5); }

/* Al abrir */
.intro-doors.open .intro-center { opacity: 0; }
.intro-doors.open .door-seam { opacity: 0; }
.intro-doors.open .door-shade { opacity: .55; }
.intro-doors.open .door-behind { opacity: 0; }
.intro-doors.open .door-frame { opacity: 0; }
.intro-doors.open { opacity: 0; transition: opacity calc(.55s * var(--k)) ease calc(1.3s * var(--k)); }
/* Movimientos */
.intro-doors.open .door-l { transform: rotateY(var(--sw-l, 96deg)); }
.intro-doors.open .door-r { transform: rotateY(var(--sw-r, -96deg)); }
.intro-doors:is([data-move="afuera"], [data-door="carruaje"]:not([data-move]), [data-door="balcon"]:not([data-move])) { --sw-l: -112deg; --sw-r: 112deg; }
.intro-doors:is([data-move="corrediza"], [data-door="ascensor"]:not([data-move]), [data-door="neon"]:not([data-move]), [data-door="shoji"]:not([data-move])) .door-way { overflow: hidden; }
.intro-doors.open:is([data-move="corrediza"], [data-door="ascensor"]:not([data-move]), [data-door="neon"]:not([data-move]), [data-door="shoji"]:not([data-move])) .door-l { transform: translateX(-101%); }
.intro-doors.open:is([data-move="corrediza"], [data-door="ascensor"]:not([data-move]), [data-door="neon"]:not([data-move]), [data-door="shoji"]:not([data-move])) .door-r { transform: translateX(101%); }
.intro-doors.open:is([data-move="lateral"], [data-door="granero"]:not([data-move]), [data-door="vidrio"]:not([data-move]), [data-door="piedra"]:not([data-move])) .door { transform: translateX(-201%); }
.intro-doors.open[data-move="arriba"] .door { transform: translateY(-102%); }
.intro-doors.open[data-move="abajo"] .door { transform: translateY(102%); }
.intro-doors.open:is([data-move="corrediza"], [data-move="lateral"], [data-move="arriba"], [data-move="abajo"]) .door-shade { opacity: .1; }

/* Opciones: herrajes, acabado, veta, marco y luz (después de los estilos para poder cambiarlos) */
/* ---------- Estilos ---------- */
[data-door="clasica"] { --door-def: #6b4226; --trim-def: #4a2c18; --wall-def: #efe6d8; --m-hi: #f6d3a6; --m: #a8703a; --m-lo: #4a2c12; }

[data-door="iglesia"] { --door-def: #5a3a22; --trim-def: #b6a892; --wall-def: #cdbfa8; --light-def: #ffe0a8; --arch: 26%; --arch-r: 50% 50% 0 0 / 22% 22% 0 0; --sheen: 0; --m-hi: #7a7a7a; --m: #2d2d2d; --m-lo: #050505; }
[data-door="iglesia"] .dp, [data-door="iglesia"] .door-handle { display: none; }
[data-door="iglesia"] .door-body { --body-img: repeating-linear-gradient(90deg, transparent 0 calc(25% - 3px), rgba(0, 0, 0, .5) calc(25% - 3px) calc(25% - 1px), rgba(255, 255, 255, .06) calc(25% - 1px) 25%); }
[data-door="iglesia"] .door-deco { display: block; position: absolute; inset: 0; background: radial-gradient(circle, var(--m-hi) 0 1.5px, var(--m) 2.5px, var(--m-lo) 4px, transparent 5px) 0 0 / 26px 100% repeat-x, linear-gradient(180deg, #3b3b3b, #121212); background-position: 6px 50%, 0 0; -webkit-mask: linear-gradient(transparent 26%, #000 26% 31%, transparent 31% 74%, #000 74% 79%, transparent 79%); mask: linear-gradient(transparent 26%, #000 26% 31%, transparent 31% 74%, #000 74% 79%, transparent 79%); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .6)); }
[data-door="iglesia"] .door-knock { display: block; }
[data-door="iglesia"] .door-text { top: 54%; }

[data-door="palacio"] { --door-def: #f4efe6; --trim-def: #d9c9a8; --wall-def: #2a2420; --light-def: #fff2d6; --grain: 0; --sheen: .2; --arch: 10%; --arch-r: 50% 50% 0 0 / 8% 8% 0 0; }
[data-door="palacio"] .dp { box-shadow: inset 0 0 0 2px var(--m), inset 0 0 0 4px color-mix(in srgb, var(--door) 90%, #000), inset 0 0 0 5px var(--m-lo), inset 4px 4px 6px rgba(0, 0, 0, .18), 0 0 0 8px color-mix(in srgb, var(--door) 94%, #000), 0 0 0 10px var(--m), 0 0 0 11px var(--m-lo), 0 4px 10px 10px rgba(0, 0, 0, .12); }
[data-door="palacio"] .door-deco { display: block; position: absolute; z-index: 1; left: 50%; top: 47%; width: 34%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 3px solid var(--m); box-shadow: 0 0 0 5px color-mix(in srgb, var(--door) 92%, #000), 0 0 0 7px var(--m-lo), inset 0 0 0 6px color-mix(in srgb, var(--m) 30%, transparent); }
[data-door="palacio"] .door-handle { height: clamp(90px, 16vmin, 150px); width: clamp(14px, 2.2vmin, 20px); border-radius: 10px 10px 4px 4px; }
[data-door="palacio"] .door-handle::after { width: clamp(18px, 3vmin, 26px); height: clamp(18px, 3vmin, 26px); border-radius: 50%; top: 40%; background: radial-gradient(circle at 35% 30%, var(--m-hi), var(--m) 55%, var(--m-lo)); }
[data-door="palacio"] .door-l .door-handle::after { right: -20%; } [data-door="palacio"] .door-r .door-handle::after { left: -20%; }

[data-door="moderna"] { --door-def: #151515; --trim-def: #151515; --wall-def: #e9e5df; --light-def: #fff; --grain: 0; --sheen: .22; }
[data-door="moderna"] .dp { display: none; }
[data-door="moderna"] .door-deco { display: block; position: absolute; top: 0; bottom: 0; width: 2px; background: rgba(0, 0, 0, .45); box-shadow: 1px 0 0 rgba(255, 255, 255, .08); }
[data-door="moderna"] .door-l .door-deco { left: 18%; } [data-door="moderna"] .door-r .door-deco { right: 18%; }
[data-door="moderna"] .door-handle { height: 46%; width: clamp(8px, 1.3vmin, 12px); border-radius: 6px; }
[data-door="moderna"] .door-handle::after { display: none; }

[data-door="francesa"] { --door-def: #f6f3ee; --trim-def: #e9e3d8; --wall-def: #d9cbb8; --light-def: #fff4dd; --grain: 0; --sheen: .1; --m-hi: #ffffff; --m: #c9cdd2; --m-lo: #6b7178; }
[data-door="francesa"] .dp-1, [data-door="francesa"] .dp-2 { display: none; }
[data-door="francesa"] .door-body { -webkit-mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) 50% 13% / 70% 60% no-repeat; -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0), linear-gradient(#000 0 0) 50% 13% / 70% 60% no-repeat; mask-composite: exclude; }
[data-door="francesa"] .door-glass { display: block; left: 15%; top: 8%; width: 70%; height: 60%; background: linear-gradient(90deg, transparent calc(50% - 3px), var(--door) calc(50% - 3px) calc(50% + 3px), transparent 0), linear-gradient(180deg, transparent calc(33.3% - 3px), var(--door) calc(33.3% - 3px) calc(33.3% + 3px), transparent 0, transparent calc(66.6% - 3px), var(--door) calc(66.6% - 3px) calc(66.6% + 3px), transparent 0), linear-gradient(125deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .05) 35%, rgba(255, 255, 255, .18) 55%, rgba(255, 255, 255, .02) 70%), color-mix(in srgb, var(--door-light) 18%, transparent); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .18), inset 0 0 20px rgba(255, 255, 255, .2); backdrop-filter: blur(3px); }
[data-door="francesa"] .door-text { top: 82%; font-size: clamp(1rem, 4cqi, 1.8rem); writing-mode: horizontal-tb !important; transform: none !important; }

[data-door="reja"] { --door-def: #1d1d1d; --fr: 0; --grain: 0; --sheen: 0; --light-def: #fff0c2; }
[data-door="reja"] .door-body { background-color: transparent; background-image: radial-gradient(circle at 50% 50%, var(--m-hi) 0 2px, var(--m) 3px 5px, transparent 6px), linear-gradient(var(--door) 0 0), linear-gradient(var(--door) 0 0), linear-gradient(var(--door) 0 0), repeating-linear-gradient(90deg, transparent 0 22px, var(--door) 22px 29px), linear-gradient(var(--door) 0 0), linear-gradient(var(--door) 0 0); background-size: 29px 26px, 100% 14px, 100% 10px, 100% 14px, 100% 100%, 14px 100%, 14px 100%; background-position: 0 50%, 0 6%, 0 50%, 0 96%, 0 0, 0 0, 100% 0; background-repeat: repeat-x, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .55)); }
[data-door="reja"] .door-body::after, [data-door="reja"] .dp { display: none; }
[data-door="reja"] .door { box-shadow: none; }
[data-door="reja"] .door-deco { display: block; position: absolute; top: 18%; left: 50%; width: 46%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; border: 7px solid var(--door); box-shadow: inset 0 0 0 7px transparent, inset 0 0 0 11px var(--m); }
[data-door="reja"] .door-handle { --h-y: 56%; }
[data-door="reja"] .door-behind { background: radial-gradient(ellipse 70% 60% at 50% 60%, color-mix(in srgb, var(--door-light) calc(var(--glow) * 55%), transparent), transparent 80%), rgba(10, 8, 6, .2); }

[data-door="castillo"] { --door-def: #4b3221; --trim-def: #6f675d; --wall-def: #57524b; --light-def: #ffb85c; --arch: 30%; --arch-r: 50% 50% 0 0 / 26% 26% 0 0; --sheen: 0; --grain: .7; --m-hi: #7a7a7a; --m: #2b2b2b; --m-lo: #050505; --fr-w: clamp(16px, 3vmin, 34px); }
[data-door="castillo"] .dp, [data-door="castillo"] .door-handle { display: none; }
[data-door="castillo"] .door-body { --body-img: repeating-linear-gradient(90deg, transparent 0 calc(20% - 3px), rgba(0, 0, 0, .55) calc(20% - 3px) 20%); }
[data-door="castillo"] .door-deco { display: block; position: absolute; inset: 0; background: radial-gradient(circle, var(--m-hi) 0 1.5px, var(--m) 3px, transparent 4.5px) 0 0 / 56px 56px, repeating-linear-gradient(45deg, transparent 0 36px, #1a1a1a 36px 41px, transparent 41px 40px), repeating-linear-gradient(-45deg, transparent 0 36px, #1a1a1a 36px 41px, transparent 41px 40px); background-size: 39.6px 39.6px, auto, auto; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .7)); opacity: .95; }
[data-door="castillo"] .door-knock { display: block; --k-y: 58%; }
[data-door="castillo"] .door-frame { border-color: var(--door-trim); background: none; box-shadow: 0 0 0 200vmax var(--door-wall), inset 0 0 40px rgba(0, 0, 0, .8); }
[data-door="castillo"] .door-frame::before { background: repeating-linear-gradient(0deg, transparent 0 38px, rgba(0, 0, 0, .35) 38px 41px), linear-gradient(180deg, rgba(255, 255, 255, .1), transparent); }

[data-door="carruaje"] { --door-def: #1d2b4a; --trim-def: #c9a24f; --wall-def: #0f1320; --light-def: #ffe9b8; --grain: 0; --sheen: .24; --fr: 0; }
[data-door="carruaje"] .dp-1, [data-door="carruaje"] .dp-2 { display: none; }
[data-door="carruaje"] .dp-3 { box-shadow: inset 0 0 0 2px var(--m), 0 0 0 6px color-mix(in srgb, var(--door) 85%, #000), 0 0 0 8px var(--m); }
[data-door="carruaje"] .door-body { -webkit-mask: radial-gradient(ellipse 34% 16% at 50% 24%, transparent 98%, #000 100%); mask: radial-gradient(ellipse 34% 16% at 50% 24%, transparent 98%, #000 100%); }
[data-door="carruaje"] .door-glass { display: block; left: 16%; top: 8%; width: 68%; height: 32%; border-radius: 50%; border: 4px solid var(--m); box-shadow: 0 0 0 3px var(--m-lo), inset 0 0 30px rgba(255, 233, 184, .5); background: linear-gradient(125deg, rgba(255, 255, 255, .35), transparent 45%), color-mix(in srgb, var(--door-light) 40%, transparent); backdrop-filter: blur(4px); }
[data-door="carruaje"] .door-deco { display: block; position: absolute; z-index: 1; left: 50%; top: 56%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 40% 35%, var(--m-hi), var(--m) 55%, var(--m-lo)); box-shadow: 0 4px 10px rgba(0, 0, 0, .5); clip-path: polygon(50% 0, 100% 18%, 92% 70%, 50% 100%, 8% 70%, 0 18%); }
[data-door="carruaje"] .door-text { top: 56%; z-index: 2; font-size: clamp(1rem, 4cqi, 1.8rem); color: var(--door); text-shadow: 0 1px 0 rgba(255, 255, 255, .4); writing-mode: horizontal-tb !important; transform: none !important; }

[data-door="hacienda"] { --door-def: #6a4428; --trim-def: #f1e6d3; --wall-def: #e9dcc5; --light-def: #ffd38a; --grain: .75; --sheen: 0; --m-hi: #d8b08a; --m: #6b4a2c; --m-lo: #2a1a0c; --fr-w: clamp(14px, 2.6vmin, 28px); }
[data-door="hacienda"] .dp { left: 12%; right: 12%; }
[data-door="hacienda"] .dp-1 { top: 5%; height: 26%; } [data-door="hacienda"] .dp-2 { top: 37%; height: 26%; } [data-door="hacienda"] .dp-3 { top: 69%; height: 26%; }
[data-door="hacienda"] .door-deco { display: block; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--m-hi) 0 2px, var(--m) 3.5px, var(--m-lo) 5px, transparent 6px) 0 0 / 50% 16.66%; opacity: .95; }
[data-door="hacienda"] .door-handle { display: none; }
[data-door="hacienda"] .door-knock { display: block; --k-y: 50%; width: clamp(44px, 9vmin, 80px); }
[data-door="hacienda"] .door-text { display: none; }
[data-door="hacienda"] .door-frame { box-shadow: 0 0 0 200vmax var(--door-wall), inset 0 0 30px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .25); }

[data-door="granero"] { --door-def: #7a4b2a; --trim-def: #3a2a1e; --wall-def: #e8dccb; --light-def: #ffd9a0; --grain: .7; --sheen: 0; --m-hi: #6a6a6a; --m: #262626; --m-lo: #000; }
[data-door="granero"] .dp, [data-door="granero"] .door-handle { display: none; }
[data-door="granero"] .door-body { --body-img: repeating-linear-gradient(90deg, transparent 0 calc(16.6% - 3px), rgba(0, 0, 0, .5) calc(16.6% - 3px) 16.6%); }
[data-door="granero"] .door-deco { display: block; position: absolute; inset: 4% 7%; border: clamp(12px, 2.6vmin, 22px) solid color-mix(in srgb, var(--door) 80%, #000); background: linear-gradient(to top right, transparent calc(50% - 13px), color-mix(in srgb, var(--door) 80%, #000) calc(50% - 13px) calc(50% + 13px), transparent 0); box-shadow: 0 3px 4px rgba(0, 0, 0, .4), inset 0 3px 4px rgba(0, 0, 0, .35); }
[data-door="granero"] .door-r .door-deco { background: linear-gradient(to top left, transparent calc(50% - 13px), color-mix(in srgb, var(--door) 80%, #000) calc(50% - 13px) calc(50% + 13px), transparent 0); }
[data-door="granero"] .door-knock { display: block; border-radius: 4px; width: clamp(14px, 2.5vmin, 22px); aspect-ratio: .3; --k-y: 50%; border-width: 4px; }
[data-door="granero"] .door-knock::before { display: none; }
[data-door="granero"] .door-frame::before { inset: auto -40vw auto; top: calc(var(--fr-w) * -2.4); height: 10px; border-radius: 4px; background: linear-gradient(180deg, #6a6a6a, #1a1a1a); box-shadow: 0 3px 4px rgba(0, 0, 0, .4); }
[data-door="granero"] .door-text { color: #f6eee2; text-shadow: 0 2px 2px rgba(0, 0, 0, .4); }

[data-door="piedra"] { --door-def: #8a8478; --trim-def: #6c665c; --wall-def: #3f4a36; --light-def: #fff2c8; --arch: 28%; --arch-r: 50% 50% 0 0 / 24% 24% 0 0; --sheen: 0; --grain: .9; --grain-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035' numOctaves='5' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.08 1.6 0 0 0 -0.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"); }
[data-door="piedra"] .door-body::before { background-size: 300px 300px; }
[data-door="piedra"] .dp, [data-door="piedra"] .door-handle { display: none; }
[data-door="piedra"] .door-body { --body-img: linear-gradient(0deg, transparent 0 calc(25% - 3px), rgba(0, 0, 0, .35) calc(25% - 3px) 25%) 0 0 / 100% 25%, linear-gradient(90deg, transparent 0 calc(50% - 2px), rgba(0, 0, 0, .3) calc(50% - 2px) 50%, transparent 0) 0 0 / 60% 50%; }
[data-door="piedra"] .door-vines { display: block; position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; fill: #4f7a3a; stroke: #3c5e2b; stroke-width: 2.4; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
[data-door="piedra"] .door-vines path { fill: none; }
[data-door="piedra"] .door-vines ellipse { stroke: none; }
[data-door="piedra"] .door-text { color: color-mix(in srgb, var(--door) 50%, #000); }
[data-door="piedra"] .door-frame { border-color: var(--door-trim); }

[data-door="balcon"] { --door-def: #6f8f7a; --trim-def: #f3efe6; --wall-def: #f1e3cc; --light-def: #fff1c4; --grain: .2; --sheen: .05; }
[data-door="balcon"] .dp, [data-door="balcon"] .door-text { display: none; }
[data-door="balcon"] .door-body { --body-img: repeating-linear-gradient(180deg, rgba(255, 255, 255, .16) 0 2px, transparent 2px 8px, rgba(0, 0, 0, .32) 8px 13px, transparent 13px 15px); background-size: 100% 15px; box-shadow: inset 0 0 0 clamp(10px, 2vmin, 18px) var(--door), inset 0 0 0 calc(clamp(10px, 2vmin, 18px) + 2px) rgba(0, 0, 0, .3); }
[data-door="balcon"] .door-deco { display: block; position: absolute; left: 0; right: 0; top: 49%; height: clamp(10px, 2vmin, 18px); background: var(--door); box-shadow: 0 2px 2px rgba(0, 0, 0, .3), 0 -2px 2px rgba(0, 0, 0, .2); }

[data-door="shoji"] { --door-def: #3a2a1d; --trim-def: #f5efe3; --wall-def: #2b241f; --light-def: #ffe6b3; --grain: 0; --sheen: 0; }
[data-door="shoji"] .door-body { background-color: color-mix(in srgb, var(--door-light) 22%, var(--door-trim)); --body-img: linear-gradient(90deg, var(--door) 0 3px, transparent 3px) 0 0 / 25% 100%, linear-gradient(180deg, var(--door) 0 3px, transparent 3px) 0 0 / 100% 16.66%, radial-gradient(ellipse at 50% 55%, rgba(255, 220, 160, .35), transparent 70%); box-shadow: inset 0 0 0 clamp(8px, 1.6vmin, 14px) var(--door); }
[data-door="shoji"] .dp, [data-door="shoji"] .door-handle, [data-door="shoji"] .door-text { display: none; }
[data-door="shoji"] .door-knock { display: block; border-radius: 50%; width: clamp(18px, 3vmin, 26px); background: radial-gradient(circle, #111 30%, #3a3a3a 70%); border: 2px solid #555; --k-y: 50%; }
[data-door="shoji"] .door-knock::before { display: none; }
[data-door="shoji"] .door-l .door-knock { right: 6%; } [data-door="shoji"] .door-r .door-knock { left: 6%; }

[data-door="ascensor"] { --door-def: #b9bcc0; --trim-def: #2c2a27; --wall-def: #1d1a17; --light-def: #fff2d6; --grain: 0; --sheen: .25; --m-hi: #ffffff; --m: #c9cdd2; --m-lo: #6b7178; }
[data-door="ascensor"] .dp, [data-door="ascensor"] .door-handle, [data-door="ascensor"] .door-text { display: none; }
[data-door="ascensor"] .door-body { --body-img: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, rgba(0, 0, 0, .06) 1px 2px, transparent 2px 3px), linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(255, 255, 255, .25) 45%, rgba(0, 0, 0, .1)); }
[data-door="ascensor"] .door-sign { display: flex; position: absolute; left: 50%; top: calc(var(--fr-t) * -.55 - var(--fr-w)); translate: -50% -50%; gap: .5rem; align-items: center; padding: .35rem .8rem; border-radius: 6px; background: #0b0b0b; color: #ffb547; font: 700 1.1rem/1 ui-monospace, monospace; box-shadow: inset 0 0 0 2px var(--m), 0 0 14px rgba(255, 181, 71, .35); text-shadow: 0 0 6px #ffb547; }
[data-door="ascensor"] .door-sign i { font-style: normal; font-size: .8rem; animation: blink 1s steps(2) infinite; }
.lift-num { display: block; height: 1.1rem; overflow: hidden; }
.lift-num b { display: block; height: 1.1rem; animation: lift calc(2.4s * var(--k)) steps(4) forwards; }
@keyframes lift { to { transform: translateY(-400%); } }
[data-door="ascensor"] .door-seam { width: 1px; }

[data-door="neon"] { --door-def: #121018; --trim-def: #ff3fa4; --wall-def: #07060b; --light-def: #ff3fa4; --grain: 0; --sheen: .18; }
[data-door="neon"] .dp, [data-door="neon"] .door-handle { display: none; }
[data-door="neon"] .door-body { box-shadow: inset 0 0 0 clamp(10px, 2vmin, 16px) #0a090e, inset 0 0 0 calc(clamp(10px, 2vmin, 16px) + 3px) var(--door-trim), inset 0 0 26px calc(clamp(10px, 2vmin, 16px) + 2px) color-mix(in srgb, var(--door-trim) 45%, transparent); animation: neon 3.4s infinite; }
[data-door="neon"] .door-frame { border-color: #0a090e; box-shadow: 0 0 0 200vmax var(--door-wall), 0 0 0 3px var(--door-trim), 0 0 30px 4px var(--door-trim), inset 0 0 30px var(--door-trim); }
[data-door="neon"] .door-text { color: #fff; text-shadow: 0 0 6px var(--door-trim), 0 0 18px var(--door-trim), 0 0 32px var(--door-trim); }
[data-door="neon"][data-tstyle="dorado"] .door-text { filter: drop-shadow(0 0 8px var(--door-trim)); }
@keyframes neon { 0%, 18%, 22%, 62%, 64%, 100% { filter: none; } 20%, 63% { filter: brightness(.55); } }

[data-door="vidrio"] { --door-def: #dfe7ea; --trim-def: #9aa3a8; --wall-def: #e7e3dd; --light-def: #ffffff; --grain: 0; --sheen: .3; --m-hi: #ffffff; --m: #c9cdd2; --m-lo: #6b7178; }
[data-door="vidrio"] .door-body { background-color: color-mix(in srgb, var(--door) 28%, transparent); backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--door-trim) 80%, transparent), inset 0 0 40px rgba(255, 255, 255, .25); }
[data-door="vidrio"] .dp, [data-door="vidrio"] .door-body::before { display: none; }
[data-door="vidrio"] .door-handle { height: 54%; width: clamp(8px, 1.3vmin, 12px); }
[data-door="vidrio"] .door-handle::after { display: none; }
[data-door="vidrio"] .door-text { color: rgba(255, 255, 255, .85); text-shadow: 0 1px 6px rgba(0, 0, 0, .35); }
[data-door="vidrio"] .door { box-shadow: none; }

/* Elecciones del usuario (van después para ganar a los valores del estilo) */
.intro-doors[data-metal="oro"] { --m-hi: #fff1b8; --m: #d4a845; --m-lo: #7a5513; }
.intro-doors[data-metal="plata"] { --m-hi: #ffffff; --m: #c9cdd2; --m-lo: #6b7178; }
.intro-doors[data-metal="bronce"] { --m-hi: #f6d3a6; --m: #a8703a; --m-lo: #4a2c12; }
.intro-doors[data-metal="cobre"] { --m-hi: #ffd2b0; --m: #c46b3c; --m-lo: #5c2611; }
.intro-doors[data-metal="negro"] { --m-hi: #7a7a7a; --m: #2b2b2b; --m-lo: #050505; }
.intro-doors[data-finish="mate"] { --sheen: 0; }
.intro-doors[data-finish="satinado"] { --sheen: .1; }
.intro-doors[data-finish="brillante"] { --sheen: .26; }
.intro-doors[data-grain="1"] { --grain: .6; }
.intro-doors[data-grain="0"] { --grain: 0; }
.intro-doors[data-frame="1"] { --fr: 1; }
.intro-doors[data-frame="0"] { --fr: 0; }
.intro-doors[data-glow="1"] { --glow: 1; }
.intro-doors[data-glow="0"] { --glow: 0; }

/* ==========================================================================
   Sobres y papelería
   ========================================================================== */
.intro-env, .intro-gift, .intro-fant, .intro-fx, .intro-arq { display: grid; place-items: center; color: var(--ink); }
.intro-env {
    --paper: var(--op-a, #f1e8da); --seal: var(--op-b, var(--accent));
    --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0.9 0 0 0 -0.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
    --fd: 0s; /* espera antes de la solapa */
    background: radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--op-wall, var(--bg)) 85%, #fff), color-mix(in srgb, var(--op-wall, var(--bg)) 88%, #000));
    transition: opacity calc(.6s * var(--k)) ease calc((1.35s + var(--fd)) * var(--k));
}
.intro-env.open { opacity: 0; }
.intro-env > .intro-hint { position: absolute; bottom: max(30px, 8vh); left: 0; right: 0; text-align: center; }
.env { position: relative; width: min(86vw, 440px); aspect-ratio: 1.42; perspective: 1400px; transition: transform calc(.8s * var(--k)) ease calc((1.1s + var(--fd)) * var(--k)); }
.env::before { content: ''; position: absolute; inset: 6% 2% -6%; border-radius: 50%; background: rgba(0, 0, 0, .28); filter: blur(22px); z-index: -1; }
.env-back, .env-front, .env-flap::before, .env-liner, .xf { background-color: var(--paper); background-image: var(--paper-noise); background-blend-mode: multiply; }
.env-back { position: absolute; inset: 0; border-radius: 6px; filter: brightness(.86); }
.env-letter { position: absolute; z-index: 2; left: 5%; right: 5%; top: 5%; bottom: 5%; border-radius: 4px; background: #fffdf9; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); display: grid; place-items: center; transition: transform calc(.8s * var(--k)) cubic-bezier(.3, .9, .3, 1) calc((.65s + var(--fd)) * var(--k)); }
.op-card { display: grid; justify-items: center; gap: .35rem; text-align: center; padding: 1rem; color: var(--ink); }
.op-card .op-title { font-size: clamp(1.7rem, 7.5cqi, 2.6rem); color: var(--accent); }
.op-card .intro-for { color: var(--muted); font-size: .8rem; }
.op-card .intro-for strong { font-size: 1.25rem; color: var(--ink); }
.env-front { position: absolute; z-index: 3; inset: 0; border-radius: 6px; clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); box-shadow: inset 0 -2px 6px rgba(0, 0, 0, .08); }
.env-front::before, .env-front::after { content: ''; position: absolute; inset: 0; }
.env-front::before { background: linear-gradient(to top right, rgba(0, 0, 0, .06), transparent 60%); clip-path: polygon(0 0, 50% 54%, 0 100%); }
.env-front::after { background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .05)); clip-path: polygon(0 100%, 50% 46%, 100% 100%); filter: drop-shadow(0 -1px 0 rgba(0, 0, 0, .1)); }
.env-flap { position: absolute; z-index: 4; left: 0; right: 0; top: 0; height: 58%; transform-origin: 50% 0; transform-style: preserve-3d; transition: transform calc(.75s * var(--k)) cubic-bezier(.5, .05, .3, 1) calc(var(--fd) * var(--k)), z-index 0s calc((.35s + var(--fd)) * var(--k)); }
.env-flap::before, .env-liner { content: ''; position: absolute; inset: 0; clip-path: polygon(0 0, 100% 0, 50% 100%); backface-visibility: hidden; }
.env-flap::before { background-image: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(0, 0, 0, .1)), var(--paper-noise); border-radius: 6px 6px 0 0; }
.env-liner { transform: rotateX(180deg); clip-path: polygon(0 100%, 100% 100%, 50% 0); background-image: radial-gradient(circle, color-mix(in srgb, var(--seal) 45%, transparent) 0 2px, transparent 3px), linear-gradient(0deg, rgba(0, 0, 0, .12), transparent); background-size: 14px 14px, 100% 100%; }
.intro-env.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.intro-env.open .env-letter { transform: translateY(-58%); }
.intro-env.open .env { transform: translateY(18%) scale(1.04); }
.env-wax { position: absolute; z-index: 6; left: 50%; top: 58%; width: 18%; aspect-ratio: 1; translate: -50% -50%; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; color: color-mix(in srgb, var(--seal) 40%, #fff); font: var(--names-style) 700 clamp(.9rem, 4cqi, 1.3rem)/1 var(--font-names); }
.env-wax i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--seal) 60%, #fff), var(--seal) 55%, color-mix(in srgb, var(--seal) 60%, #000)); box-shadow: 0 5px 10px rgba(0, 0, 0, .35), inset 0 0 0 4px color-mix(in srgb, var(--seal) 75%, #000); transition: transform calc(.55s * var(--k)) cubic-bezier(.5, 0, .7, .4), opacity calc(.5s * var(--k)); }
.wax-l { clip-path: polygon(0 0, 52% 0, 44% 22%, 56% 40%, 46% 62%, 55% 80%, 48% 100%, 0 100%); }
.wax-r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 48% 100%, 55% 80%, 46% 62%, 56% 40%, 44% 22%); }
.env-wax span { position: relative; text-shadow: 0 -1px 0 rgba(0, 0, 0, .35); transition: opacity .2s; }
.intro-env.open .env-wax span { opacity: 0; }
.intro-env.open .wax-l { transform: translate(-60%, 80%) rotate(-40deg); opacity: 0; }
.intro-env.open .wax-r { transform: translate(60%, 80%) rotate(40deg); opacity: 0; }
.env-lacre { --fd: .45s; }

.env-cordel { --paper: var(--op-a, #e9e2d3); --fd: .65s; }
.env-cordel :is(.env-back, .env-front, .env-flap::before) { background-image: repeating-linear-gradient(0deg, rgba(90, 70, 40, .07) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, rgba(90, 70, 40, .07) 0 1px, transparent 1px 3px), var(--paper-noise); }
.env-button { position: absolute; z-index: 5; left: 50%; top: 58%; width: 9%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c9a77a, #8a6239 70%); box-shadow: 0 3px 5px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(0, 0, 0, .12); transition: opacity .3s calc(.5s * var(--k)); }
.env-cord { position: absolute; z-index: 6; left: -12%; right: -12%; top: calc(58% - 2px); height: 4px; border-radius: 4px; background: repeating-linear-gradient(60deg, #b0423a 0 4px, #e7c6a6 4px 6px); box-shadow: 0 3px 3px rgba(0, 0, 0, .3); transform-origin: 0 50%; transition: transform calc(.7s * var(--k)) cubic-bezier(.6, 0, .4, 1), opacity calc(.4s * var(--k)) ease calc(.3s * var(--k)); }
.intro-env.open .env-cord { transform: translateX(110%) rotate(6deg); opacity: 0; }
.intro-env.open .env-button { opacity: 0; }

.env-tirador .env-flap { transform: rotateX(180deg); z-index: 1; }
.env-tirador .env-letter { transform: translateX(calc(var(--drag, 0) * 70%)); transition-delay: 0s; }
.env-tab { position: absolute; right: -16%; top: 34%; padding: .55rem .9rem .55rem 1.1rem; border-radius: 0 999px 999px 0; background: var(--seal); color: var(--on-accent); font: 700 .8rem/1 var(--font-body); letter-spacing: .06em; box-shadow: 0 4px 10px rgba(0, 0, 0, .25); cursor: grab; animation: tug 1.8s ease-in-out infinite; }
@keyframes tug { 50% { transform: translateX(6px); } }
.intro-env.env-tirador.open .env-letter { transform: translateX(125%) rotate(4deg); transition-duration: calc(.7s * var(--k)); }
.env-tirador { --fd: -.4s; }

.env-acuarela { --paper: var(--op-a, #fbf6f0); }
.wc { position: absolute; z-index: 5; border-radius: 50%; filter: blur(6px); opacity: .85; pointer-events: none; mix-blend-mode: multiply; }
.wc-1 { left: -6%; bottom: -8%; width: 36%; aspect-ratio: 1; background: radial-gradient(circle at 40% 40%, #f2a7b8, #f6c9d2 45%, transparent 70%), radial-gradient(circle at 75% 30%, #b9d8a7, transparent 50%); }
.wc-2 { right: -5%; top: -9%; width: 30%; aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, #f7c6a3, #f9dcc6 40%, transparent 70%), radial-gradient(circle at 25% 70%, #a9c9a0, transparent 45%); }
.wc-3 { right: 8%; bottom: -4%; width: 18%; aspect-ratio: 1; background: radial-gradient(circle, #d7b7e8, transparent 68%); }
.petals { position: absolute; inset: 0; z-index: 7; pointer-events: none; }
.petals i { position: absolute; left: var(--x); top: 50%; width: 14px; height: 20px; border-radius: 70% 0 70% 0; background: linear-gradient(135deg, #f7b6c6, #e98aa3); opacity: 0; scale: var(--s); }
.intro-env.open .petals i { animation: petal calc(1.8s * var(--k)) ease-out var(--d) forwards; }
@keyframes petal { 10% { opacity: 1; } to { opacity: 0; transform: translate(calc(var(--r) * .4px), -60vh) rotate(var(--r)); } }

.env-minimal { --paper: var(--op-a, #f4f1ec); }
.env-minimal .env-liner { background-image: none; background-color: color-mix(in srgb, var(--paper) 90%, #000); }
.intro-env.env-minimal.open :is(.env-back, .env-front, .env-flap) { opacity: 0; transition: opacity calc(.7s * var(--k)) ease; }
.intro-env.env-minimal.open .env-letter { transform: scale(1.5); transition: transform calc(1.1s * var(--k)) cubic-bezier(.2, .8, .2, 1); }
.intro-env.env-minimal.open .env { transform: none; }
.intro-env.env-minimal.open { transition-delay: calc(.85s * var(--k)); }
.env-minimal .env::before { opacity: .4; }

.env-kraft { --paper: var(--op-a, #b98b5e); --fd: .5s; --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.16 0 0 0 0 0.08 1.4 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); }
.env-cross { perspective: 1400px; }
.env-cross .env-letter { inset: 3%; }
.xf { position: absolute; inset: 0; z-index: 3; transition: transform calc(.7s * var(--k)) cubic-bezier(.5, .05, .3, 1); box-shadow: inset 0 0 18px rgba(0, 0, 0, .18); }
.xf-l { clip-path: polygon(0 0, 52% 50%, 0 100%); transform-origin: 0 50%; filter: brightness(.95); transition-delay: calc(.6s * var(--k)); }
.xf-r { clip-path: polygon(100% 0, 48% 50%, 100% 100%); transform-origin: 100% 50%; filter: brightness(.93); transition-delay: calc(.7s * var(--k)); }
.xf-b { clip-path: polygon(0 100%, 50% 46%, 100% 100%); transform-origin: 50% 100%; filter: brightness(1.04); transition-delay: calc(.8s * var(--k)); }
.xf-t { clip-path: polygon(0 0, 100% 0, 50% 54%); transform-origin: 50% 0; z-index: 4; transition-delay: calc(.9s * var(--k)); }
.intro-env.open .xf-l { transform: rotateY(-172deg); } .intro-env.open .xf-r { transform: rotateY(172deg); }
.intro-env.open .xf-b { transform: rotateX(172deg); } .intro-env.open .xf-t { transform: rotateX(-172deg); }
.env-sticker { position: absolute; z-index: 6; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; translate: -50% -50%; border: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 35% 30%, #fff, #f3eadb 60%, #e2d3bb); color: #6b4a2c; font: var(--names-style) 700 clamp(.9rem, 4cqi, 1.3rem)/1 var(--font-names); box-shadow: 0 3px 6px rgba(0, 0, 0, .3), inset 0 0 0 4px #fff, inset 0 0 0 6px color-mix(in srgb, var(--seal) 70%, #fff); transform-origin: 85% 15%; transition: transform calc(.6s * var(--k)) cubic-bezier(.5, 0, .5, 1), opacity calc(.3s * var(--k)) ease calc(.35s * var(--k)); }
.intro-env.open .env-sticker { transform: rotate(-28deg) rotateY(55deg) translate(40%, -90%); opacity: 0; }
.intro-env.env-kraft.open .env-letter { transform: scale(1.08); transition-delay: calc(1.2s * var(--k)); }
.intro-env.env-kraft.open .env { transform: none; }

.env-broche { --fd: .75s; }
.env-clasp { position: absolute; z-index: 6; left: 50%; top: 58%; width: 13%; aspect-ratio: 1; translate: -50% -50%; border: 0; padding: 0; border-radius: 50%; cursor: pointer; background: radial-gradient(circle at 35% 30%, #fff4cf, #c9a24f 55%, #6e5420); box-shadow: 0 4px 8px rgba(0, 0, 0, .35), inset 0 0 0 2px rgba(0, 0, 0, .15); }
.clasp-bar { position: absolute; left: 50%; top: 50%; width: 260%; height: 18%; translate: -50% -50%; border-radius: 6px; background: linear-gradient(180deg, #fff4cf, #c9a24f 50%, #6e5420); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); transition: transform calc(.6s * var(--k)) cubic-bezier(.5, 0, .3, 1.3); }
.clasp-pin { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b8913f); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.intro-env.open .clasp-bar { transform: rotate(90deg); }
.intro-env.open .env-clasp { opacity: 0; transition: opacity .3s calc(.7s * var(--k)); }

.env-carta { --paper: var(--op-a, #f7e4e2); --seal: var(--op-b, #b3243a); --fd: .4s; }
.env-carta .env-wax { font-size: clamp(1.1rem, 5cqi, 1.6rem); }
.env-cast { position: absolute; z-index: 5; left: 6%; right: 6%; top: 10%; height: 70%; border-radius: 50%; background: rgba(60, 10, 20, .55); filter: blur(24px); opacity: 0; pointer-events: none; }
.intro-env.env-carta.open .env-flap { transform: rotateX(-180deg) translateZ(1px); }
.intro-env.env-carta.open .env-cast { animation: cast calc(.8s * var(--k)) ease calc(.4s * var(--k)); }
@keyframes cast { 45% { opacity: .9; transform: translateY(-10%) scale(1.1); } }
.intro-env.env-carta.open .env-letter { transform: translateY(-58%) rotate(-2deg); box-shadow: 0 30px 40px -10px rgba(60, 10, 20, .45); }

/* Pergamino enrollado */
.intro-env.env-rollo { --paper: var(--op-a, #efe0c0); }
.roll { position: relative; width: min(80vw, 380px); height: min(72vh, 560px); }
.roll-sheet { position: absolute; inset: 12px 0 0; display: grid; place-items: center; border-radius: 4px; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(120, 80, 30, .3)), var(--paper-noise), var(--paper); background-blend-mode: normal, multiply, normal; box-shadow: 0 20px 40px -15px rgba(0, 0, 0, .45); clip-path: inset(0 0 calc(100% - 4px) 0); transition: clip-path calc(1.1s * var(--k)) cubic-bezier(.3, 1.15, .5, 1) calc(.35s * var(--k)); }
.roll-bar { position: absolute; z-index: 2; left: -5%; right: -5%; top: 0; height: 30px; border-radius: 15px; background: linear-gradient(180deg, color-mix(in srgb, var(--paper) 60%, #fff), var(--paper) 40%, color-mix(in srgb, var(--paper) 55%, #000)); box-shadow: 0 8px 12px rgba(0, 0, 0, .35); transition: top calc(1.1s * var(--k)) cubic-bezier(.3, 1.15, .5, 1) calc(.35s * var(--k)); }
.roll-bar i { position: absolute; inset: 0 -14px; border-radius: 15px; background: linear-gradient(90deg, #5a3a1c 0 14px, transparent 14px calc(100% - 14px), #5a3a1c 0); }
.roll-ribbon { position: absolute; z-index: 3; left: 50%; top: -8px; width: 26px; height: 46px; translate: -50% 0; background: var(--op-b, #8f2a2a); box-shadow: 0 3px 4px rgba(0, 0, 0, .3); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); transition: transform calc(.5s * var(--k)) ease-in, opacity calc(.4s * var(--k)); }
.intro-env.open .roll-sheet { clip-path: inset(0 0 0 0); }
.intro-env.open .roll-bar { top: calc(100% - 6px); }
.intro-env.open .roll-ribbon { transform: translateY(80px) rotate(30deg); opacity: 0; }
.env-rollo .op-card { transition: opacity .6s calc(.8s * var(--k)); opacity: 0; }
.intro-env.open .op-card { opacity: 1; }
.env-rollo.open { transition-delay: calc(1.6s * var(--k)); }

/* ==========================================================================
   Lazos, cintas y cajas
   ========================================================================== */
.intro-gift {
    --wrap: var(--op-a, #f3e6dc); --rib: var(--op-b, #b3243a);
    --pattern: radial-gradient(circle, color-mix(in srgb, var(--rib) 35%, transparent) 0 3px, transparent 4px) 0 0 / 26px 26px, radial-gradient(circle, color-mix(in srgb, var(--rib) 20%, transparent) 0 2px, transparent 3px) 13px 13px / 26px 26px;
    background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--op-wall, var(--bg)) 85%, #fff), color-mix(in srgb, var(--op-wall, var(--bg)) 85%, #000));
    transition: opacity calc(.5s * var(--k)) ease calc(var(--fade, 1.6s) * var(--k));
}
.intro-gift.open { opacity: 0; }
.intro-gift > .intro-hint { position: absolute; z-index: 9; bottom: max(30px, 8vh); left: 0; right: 0; text-align: center; color: var(--ink); }
.gift-bow { width: 100%; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .3)); }
.gift-bow :is(.bl, .br, .tl, .tr) { fill: var(--rib); }
.gift-bow :is(.bl, .br) { fill: color-mix(in srgb, var(--rib) 88%, #fff); }
.gift-bow .kn { fill: color-mix(in srgb, var(--rib) 80%, #000); }

/* Envoltorio a pantalla completa con cintas cruzadas */
.wrap-half { position: absolute; top: 0; bottom: 0; width: 50.2%; background: var(--pattern), linear-gradient(90deg, rgba(0, 0, 0, .06), transparent 30%, rgba(255, 255, 255, .12) 60%, rgba(0, 0, 0, .08)), var(--wrap); transition: transform calc(.8s * var(--k)) cubic-bezier(.65, 0, .3, 1) calc(var(--wd, .9s) * var(--k)); }
.wrap-l { left: 0; box-shadow: inset -12px 0 18px -10px rgba(0, 0, 0, .25); } .wrap-r { right: 0; }
.intro-gift.open .wrap-l { transform: translateX(-102%); } .intro-gift.open .wrap-r { transform: translateX(102%); }
.ribbon { position: absolute; z-index: 2; display: flex; }
.ribbon i { flex: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--rib) 70%, #fff), var(--rib) 25%, color-mix(in srgb, var(--rib) 75%, #000) 50%, var(--rib) 75%, color-mix(in srgb, var(--rib) 70%, #fff)); box-shadow: 0 4px 8px rgba(0, 0, 0, .3); transition: transform calc(.8s * var(--k)) cubic-bezier(.55, 0, .7, .4) calc(var(--rd, .55s) * var(--k)), opacity calc(.5s * var(--k)) ease calc((var(--rd, .55s) + .3s) * var(--k)); }
.ribbon-h { left: 0; right: 0; top: 50%; height: clamp(34px, 6vmin, 56px); translate: 0 -50%; }
.ribbon-v { top: 0; bottom: 0; left: 50%; width: clamp(34px, 6vmin, 56px); translate: -50% 0; flex-direction: column; }
.ribbon-v i { background: linear-gradient(90deg, color-mix(in srgb, var(--rib) 70%, #fff), var(--rib) 25%, color-mix(in srgb, var(--rib) 75%, #000) 50%, var(--rib) 75%, color-mix(in srgb, var(--rib) 70%, #fff)); }
.gift-label { position: absolute; z-index: 3; top: 15%; left: 50%; translate: -50% 0; width: min(78vw, 340px); padding: 1rem 1.2rem; text-align: center; border-radius: 10px; background: rgba(255, 255, 255, .88); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .35); transition: opacity calc(.4s * var(--k)); }
.gift-label .op-title { font-size: clamp(1.6rem, 7cqi, 2.4rem); color: var(--accent); }
.intro-gift.open .gift-label { opacity: 0; }

/* Tijera */
.gift-tijera { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ctext y='24' font-size='24'%3E%E2%9C%82%EF%B8%8F%3C/text%3E%3C/svg%3E") 6 16, pointer; }
.scissors { position: absolute; z-index: 4; left: 6%; top: 50%; width: clamp(120px, 30vmin, 190px); translate: 0 -50%; transition: transform calc(.6s * var(--k)) cubic-bezier(.4, 0, .2, 1); filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.scissors .blade path { fill: url(#steel); stroke: #6f767d; stroke-width: 1; }
.scissors .blade circle { fill: none; stroke: var(--op-b, #2b2b2b); stroke-width: 7; }
.scissors .pivot { fill: #555; }
.scissors .b1 { transform-origin: 54px 30px; animation: snip-open 1.6s ease-in-out infinite; }
.scissors .b2 { transform-origin: 54px 30px; animation: snip-open2 1.6s ease-in-out infinite; }
@keyframes snip-open { 50% { transform: rotate(-9deg); } } @keyframes snip-open2 { 50% { transform: rotate(9deg); } }
.intro-gift.open .scissors { transform: translateX(calc(42vw - 50%)); }
.intro-gift.open .scissors .b1 { animation: snip calc(.25s * var(--k)) ease-in-out calc(.5s * var(--k)) 2; }
.intro-gift.open .scissors .b2 { animation: snip2 calc(.25s * var(--k)) ease-in-out calc(.5s * var(--k)) 2; }
@keyframes snip { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(0); } } @keyframes snip2 { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(0); } }
.gift-tijera .scissors { transition: transform calc(.5s * var(--k)) ease, opacity .3s calc(1s * var(--k)); }
.intro-gift.gift-tijera.open .scissors { opacity: 0; }
.intro-gift.open .ribbon-h i:first-child { transform: translate(-6%, 55vh) rotate(-24deg); opacity: 0; }
.intro-gift.open .ribbon-h i:last-child { transform: translate(6%, 55vh) rotate(24deg); opacity: 0; }
.intro-gift.open .ribbon-v i:first-child { transform: translateY(-60vh); opacity: 0; }
.intro-gift.open .ribbon-v i:last-child { transform: translateY(60vh); opacity: 0; }
.gift-tijera { --rd: .95s; --wd: 1.2s; --fade: 1.8s; }

/* Botón magnético */
.mag-btn { position: absolute; z-index: 4; left: 50%; top: 50%; width: clamp(78px, 18vmin, 110px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; border: 0; cursor: pointer; color: #fff; font: var(--names-style) 700 1.2rem/1 var(--font-names); background: radial-gradient(circle at 35% 30%, #fff, color-mix(in srgb, var(--rib) 60%, #fff) 30%, var(--rib) 70%); box-shadow: 0 0 0 6px rgba(255, 255, 255, .5), 0 0 30px 8px color-mix(in srgb, var(--rib) 60%, transparent), 0 10px 20px rgba(0, 0, 0, .35); animation: magpulse 1.8s ease-in-out infinite; transition: transform calc(.25s * var(--k)), opacity calc(.3s * var(--k)) ease calc(.3s * var(--k)); }
@keyframes magpulse { 50% { box-shadow: 0 0 0 10px rgba(255, 255, 255, .25), 0 0 50px 16px color-mix(in srgb, var(--rib) 60%, transparent), 0 10px 20px rgba(0, 0, 0, .35); } }
.intro-gift.open .mag-btn { transform: scale(.82); opacity: 0; }
.gift-magnetico { --rd: .25s; --wd: .75s; --fade: 1.3s; }
.gift-magnetico.open .ribbon i { transition-timing-function: cubic-bezier(.7, 0, .3, 1); opacity: 1; }
.intro-gift.gift-magnetico.open .ribbon-h i:first-child { transform: scaleX(0); transform-origin: 0 50%; }
.intro-gift.gift-magnetico.open .ribbon-h i:last-child { transform: scaleX(0); transform-origin: 100% 50%; }
.intro-gift.gift-magnetico.open .ribbon-v i:first-child { transform: scaleY(0); transform-origin: 50% 0; }
.intro-gift.gift-magnetico.open .ribbon-v i:last-child { transform: scaleY(0); transform-origin: 50% 100%; }

/* Cinta láser */
.gift-laser { --wrap: var(--op-a, #0b0b16); --rib: var(--op-b, #3df5ff); --rd: .1s; --wd: .7s; --fade: 1s; }
.gift-laser .wrap-half { background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--rib) 12%, transparent), transparent 60%), var(--wrap); }
.gift-laser .ribbon-h { height: 6px; } .gift-laser .ribbon-v { width: 6px; }
.gift-laser .ribbon i { background: #fff; box-shadow: 0 0 6px 2px var(--rib), 0 0 22px 6px var(--rib), 0 0 60px 10px color-mix(in srgb, var(--rib) 50%, transparent); animation: laser 2.2s ease-in-out infinite; }
@keyframes laser { 50% { opacity: .75; } 52% { opacity: .35; } 54% { opacity: .9; } }
.laser-core { position: absolute; z-index: 4; left: 50%; top: 50%; translate: -50% -50%; padding: .9rem 1.1rem; border-radius: 50%; color: #fff; font: var(--names-style) 700 1.3rem/1 var(--font-names); text-shadow: 0 0 8px var(--rib), 0 0 20px var(--rib); background: radial-gradient(circle, color-mix(in srgb, var(--rib) 35%, transparent), transparent 70%); transition: opacity .3s, transform .4s; }
.gift-laser .gift-label { background: rgba(10, 10, 22, .6); color: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--rib) 60%, transparent), 0 0 30px color-mix(in srgb, var(--rib) 25%, transparent); }
.gift-laser .gift-label .op-title { color: #fff; text-shadow: 0 0 10px var(--rib); }
.gift-laser > .intro-hint { color: #fff; }
.intro-gift.gift-laser.open .ribbon i { animation: none; transform: scale(1, 6); opacity: 0; filter: blur(6px); transition: transform calc(.5s * var(--k)), opacity calc(.5s * var(--k)), filter calc(.5s * var(--k)); }
.intro-gift.gift-laser.open .laser-core { opacity: 0; transform: scale(2.4); }
.intro-gift.gift-laser.open .wrap-half { transform: none; opacity: 0; transition: opacity calc(.6s * var(--k)) ease calc(.4s * var(--k)); }

/* Caja sorpresa */
.box3d { position: relative; width: min(58vw, 250px); aspect-ratio: 1; margin-top: 12vh; }
.box-body { position: absolute; left: 0; right: 0; bottom: 0; height: 72%; border-radius: 4px; background: linear-gradient(90deg, rgba(0, 0, 0, .14), transparent 30%, rgba(255, 255, 255, .15) 60%, rgba(0, 0, 0, .18)), var(--pattern), var(--wrap); box-shadow: 0 30px 40px -18px rgba(0, 0, 0, .5); }
.box-band { position: absolute; top: 0; bottom: 0; left: 50%; width: 16%; translate: -50% 0; background: linear-gradient(90deg, color-mix(in srgb, var(--rib) 75%, #000), var(--rib) 30%, color-mix(in srgb, var(--rib) 70%, #fff) 50%, var(--rib) 70%, color-mix(in srgb, var(--rib) 75%, #000)); }
.box-lid { position: absolute; z-index: 3; left: -6%; right: -6%; top: 16%; height: 20%; border-radius: 4px; background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(0, 0, 0, .15)), var(--pattern), var(--wrap); box-shadow: 0 8px 10px -4px rgba(0, 0, 0, .35); transition: transform calc(.8s * var(--k)) cubic-bezier(.3, .6, .3, 1), opacity calc(.4s * var(--k)) ease calc(.5s * var(--k)); }
.box-lid .gift-bow { position: absolute; left: 50%; bottom: 62%; width: 70%; translate: -50% 0; }
.box-rise { position: absolute; z-index: 2; left: 8%; right: 8%; top: 34%; height: 60%; display: grid; place-items: center; border-radius: 6px; background: #fffdf9; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform calc(1s * var(--k)) cubic-bezier(.2, .9, .3, 1.15) calc(.45s * var(--k)); }
.box-rise .op-card { padding: .4rem; transform: scale(.75); }
.sparks { position: absolute; left: 50%; top: 30%; pointer-events: none; }
.sparks i { position: absolute; width: 4px; height: 18px; border-radius: 4px; background: linear-gradient(#fff, #ffd76a); box-shadow: 0 0 8px #ffd76a; opacity: 0; rotate: var(--a); }
.intro-gift.open .sparks i { animation: spark calc(.9s * var(--k)) ease-out calc(.35s * var(--k)) forwards; }
@keyframes spark { 15% { opacity: 1; } to { opacity: 0; transform: translateY(calc(var(--d) * -2.2)) scaleY(.4); } }
.intro-gift.open .box-lid { transform: translate(18%, -170%) rotate(24deg); opacity: 0; }
.intro-gift.open .box-rise { transform: translateY(-62%) scale(1.45); }
.gift-sorpresa { --fade: 1.85s; }

/* Caja que se abre como libro */
.gbook { position: relative; width: min(74vw, 320px); aspect-ratio: .78; perspective: 1600px; }
.gbook-in { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 6px; background: linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 12%), #fffdf9; box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--wrap) 85%, #000), 0 30px 40px -18px rgba(0, 0, 0, .5); }
.gbook-cover { position: absolute; inset: 0; z-index: 2; transform-origin: 0 50%; transform-style: preserve-3d; transition: transform calc(1.2s * var(--k)) cubic-bezier(.55, .05, .25, 1) calc(.1s * var(--k)); }
.gbook-cover::before { content: ''; position: absolute; inset: 0; border-radius: 4px 8px 8px 4px; background: linear-gradient(90deg, rgba(0, 0, 0, .25), transparent 8%, rgba(255, 255, 255, .15) 60%, rgba(0, 0, 0, .1)), var(--pattern), var(--wrap); backface-visibility: hidden; box-shadow: inset -3px 0 0 rgba(0, 0, 0, .1); }
.gbook-cover .box-band { backface-visibility: hidden; }
.gbook-cover .gift-bow { position: absolute; left: 50%; top: 34%; width: 66%; translate: -50% 0; backface-visibility: hidden; }
.gbook-face { position: absolute; inset: 0; border-radius: 8px 4px 4px 8px; transform: rotateY(180deg); backface-visibility: hidden; background: linear-gradient(-90deg, rgba(0, 0, 0, .25), transparent 15%), color-mix(in srgb, var(--wrap) 75%, #000); }
.intro-gift.open .gbook-cover { transform: rotateY(-165deg); }
.intro-gift.open .gbook { transform: scale(1.12); transition: transform calc(.7s * var(--k)) ease calc(1s * var(--k)); }
.gift-libro { --fade: 1.55s; }

/* Yute rústico */
.gift-yute { --wrap: var(--op-a, #c39a6b); --rib: var(--op-b, #a8865a); --fade: 1.45s; }
.kraft-wrap { position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.16 0 0 0 0 0.08 1.4 0 0 0 -0.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(60, 35, 10, .3)), var(--wrap); transition: transform calc(.8s * var(--k)) cubic-bezier(.6, 0, .4, 1) calc(.75s * var(--k)); }
.jute { position: absolute; z-index: 2; background: repeating-linear-gradient(55deg, color-mix(in srgb, var(--rib) 70%, #000) 0 3px, var(--rib) 3px 7px, color-mix(in srgb, var(--rib) 70%, #fff) 7px 9px); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); transition: transform calc(.9s * var(--k)) cubic-bezier(.55, 0, .8, .4) calc(.25s * var(--k)); }
.jute-h { left: 0; right: 0; top: calc(56% - 6px); height: 12px; } .jute-v { top: 0; bottom: 0; left: calc(50% - 6px); width: 12px; }
.jute-bow { position: absolute; z-index: 3; left: 50%; top: 56%; width: clamp(150px, 42vmin, 240px); translate: -50% -50%; overflow: visible; filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .35)); transition: transform calc(.9s * var(--k)) cubic-bezier(.55, 0, .8, .4); }
.jute-bow :is(path, circle) { fill: none; stroke: var(--rib); stroke-width: 11; stroke-linecap: round; stroke-dasharray: 3 2; }
.jute-bow .kn { fill: color-mix(in srgb, var(--rib) 80%, #000); stroke-dasharray: none; }
.jute-bow :is(.bl, .br) { transition: transform calc(.4s * var(--k)) ease; transform-box: fill-box; transform-origin: center; }
.intro-gift.open .jute-bow .bl { transform: scale(.4) translateX(40%); } .intro-gift.open .jute-bow .br { transform: scale(.4) translateX(-40%); }
.intro-gift.open .jute-bow { transform: translateY(70vh) rotate(30deg); }
.intro-gift.open .jute-h { transform: translateY(60vh) rotate(-6deg); } .intro-gift.open .jute-v { transform: translateY(100vh); }
.intro-gift.open .kraft-wrap { transform: translateY(-100%); }
.gift-yute .gift-label { top: 22%; background: #fbf5ea; }

/* Caja de cartón con etiqueta */
.gift-etiqueta { --wrap: var(--op-a, #c8a175); --rib: var(--op-b, #8b5a2b); --fade: 1.85s; }
.cbox { position: relative; width: min(78vw, 340px); aspect-ratio: 1; perspective: 1400px; }
.cbox-in { position: absolute; inset: 0; display: grid; place-items: center; background: #fffdf9; box-shadow: inset 0 0 0 12px color-mix(in srgb, var(--wrap) 80%, #000), inset 0 0 30px 12px rgba(0, 0, 0, .25), 0 30px 40px -18px rgba(0, 0, 0, .5); }
.cbox-in .op-card { transform: scale(.85); }
.cf { position: absolute; background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .1)), repeating-linear-gradient(90deg, rgba(0, 0, 0, .03) 0 2px, transparent 2px 6px), var(--wrap); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: transform calc(.8s * var(--k)) cubic-bezier(.5, .05, .3, 1); }
.cf-l, .cf-r { top: 0; bottom: 0; width: 50%; filter: brightness(.92); } .cf-l { left: 0; transform-origin: 0 50%; } .cf-r { right: 0; transform-origin: 100% 50%; }
.cf-t, .cf-b { left: 0; right: 0; height: 50%; z-index: 2; } .cf-t { top: 0; transform-origin: 50% 0; box-shadow: inset 0 -6px 8px -6px rgba(0, 0, 0, .3); } .cf-b { bottom: 0; transform-origin: 50% 100%; }
.ctape { position: absolute; z-index: 3; left: -2%; right: -2%; top: calc(50% - 16px); height: 32px; background: linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(0, 0, 0, .05)), color-mix(in srgb, var(--wrap) 60%, #e8d4b0); opacity: .9; transition: transform calc(.4s * var(--k)) ease calc(.35s * var(--k)), opacity .3s calc(.5s * var(--k)); transform-origin: 0 50%; }
.ctag { position: absolute; z-index: 5; right: 8%; top: -6%; width: 74px; height: 108px; border: 0; padding: 0; cursor: pointer; background: none; transform-origin: 50% 0; animation: swing 2.4s ease-in-out infinite; transition: transform calc(.6s * var(--k)) ease-in, opacity calc(.4s * var(--k)) ease calc(.2s * var(--k)); }
.ctag-string { position: absolute; left: 50%; top: 0; width: 2px; height: 34px; background: #6b4a2c; }
.ctag span { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; display: grid; place-items: center; border-radius: 4px; background: radial-gradient(circle at 50% 14%, #fff 0 5px, transparent 6px), linear-gradient(180deg, #e6cfa9, #cfae7d); clip-path: polygon(20% 0, 80% 0, 100% 18%, 100% 100%, 0 100%, 0 18%); color: #5a3a1c; font: var(--names-style) 700 1rem/1 var(--font-names); box-shadow: 0 6px 10px rgba(0, 0, 0, .3); }
@keyframes swing { 50% { transform: rotate(8deg); } }
.intro-gift.open .ctag { animation: none; transform: rotate(-40deg) translateY(40px) rotateY(80deg); opacity: 0; }
.intro-gift.open .ctape { transform: scaleX(0); opacity: 0; }
.intro-gift.open .cf-t { transform: rotateX(-160deg); transition-delay: calc(.6s * var(--k)); }
.intro-gift.open .cf-b { transform: rotateX(160deg); transition-delay: calc(.7s * var(--k)); }
.intro-gift.open .cf-l { transform: rotateY(-160deg); transition-delay: calc(.9s * var(--k)); }
.intro-gift.open .cf-r { transform: rotateY(160deg); transition-delay: calc(1s * var(--k)); }
.intro-gift.open .cbox { transform: scale(1.08); transition: transform .6s calc(1.3s * var(--k)); }

/* Papel que se rompe */
.gift-papel { --fade: 1.15s; }
.tearp { position: absolute; inset: 0; z-index: 2; background: var(--pattern), linear-gradient(135deg, rgba(255, 255, 255, .15), rgba(0, 0, 0, .1)), var(--wrap); transition: transform calc(.9s * var(--k)) cubic-bezier(.4, 0, .2, 1), opacity calc(.6s * var(--k)) ease calc(.4s * var(--k)); }
.tearp-a { clip-path: polygon(0 0, 100% 0, 100% 100%, 91.5% 96.0%, 89.7% 85.3%, 79.0% 83.5%, 76.6% 73.4%, 71.0% 66.5%, 64.1% 60.9%, 54.9% 57.6%, 47.8% 52.2%, 46.0% 41.5%, 35.3% 39.7%, 33.5% 29.1%, 26.6% 23.4%, 16.6% 20.9%, 11.1% 13.9%, 4.8% 7.7%); transform: translate(calc(var(--drag, 0) * 8%), calc(var(--drag, 0) * -8%)); }
.tearp-b { clip-path: polygon(0 0, 4.8% 7.7%, 11.1% 13.9%, 16.6% 20.9%, 26.6% 23.4%, 33.5% 29.1%, 35.3% 39.7%, 46.0% 41.5%, 47.8% 52.2%, 54.9% 57.6%, 64.1% 60.9%, 71.0% 66.5%, 76.6% 73.4%, 79.0% 83.5%, 89.7% 85.3%, 91.5% 96.0%, 100% 100%, 0 100%); transform: translate(calc(var(--drag, 0) * -8%), calc(var(--drag, 0) * 8%)); }
.intro-gift.open .tearp-a { transform: translate(55%, -55%) rotate(10deg); opacity: 0; }
.intro-gift.open .tearp-b { transform: translate(-55%, 55%) rotate(-10deg); opacity: 0; }
.gift-papel .gift-label { top: 50%; translate: -50% -50%; }

/* Caja hexagonal en pétalos */
.gift-hexagono { --fade: 1.5s; }
.hexbox { position: relative; width: min(74vw, 330px); aspect-ratio: 1; perspective: 1200px; }
.hex-in { position: absolute; inset: 0; display: grid; place-items: center; clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); background: radial-gradient(circle, #fffdf9 50%, #efe6d8); }
.hex-in .op-card { transform: scale(.8); }
.hex-p { position: absolute; inset: 0; transform: rotate(calc(var(--i) * 60deg)); transform-style: preserve-3d; }
.hex-p b { position: absolute; inset: 0; clip-path: polygon(50% 50%, 6.7% 25%, 50% 0); transform-origin: 28.35% 12.5%; background: linear-gradient(calc(var(--i) * -60deg + 200deg), rgba(255, 255, 255, .2), rgba(0, 0, 0, .14)), var(--pattern), var(--wrap); transition: transform calc(1s * var(--k)) cubic-bezier(.5, .05, .25, 1) calc((.15s + var(--i) * .04s) * var(--k)); }
.intro-gift.open .hex-p b { transform: rotate3d(.866, -.5, 0, 170deg); }
.hex-knot { position: absolute; z-index: 2; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%; color: #fff; font: var(--names-style) 700 1.1rem/1 var(--font-names); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--rib) 60%, #fff), var(--rib) 60%, color-mix(in srgb, var(--rib) 70%, #000)); box-shadow: 0 6px 12px rgba(0, 0, 0, .35); transition: transform calc(.4s * var(--k)) ease, opacity .3s; }
.intro-gift.open .hex-knot { transform: scale(0); opacity: 0; }
.intro-gift.open .hexbox { transform: scale(1.12); transition: transform .6s calc(.9s * var(--k)); }

/* ==========================================================================
   Cuentos y fantasía
   ========================================================================== */
.intro-fant { --night: var(--op-wall, #15121c); --gold: var(--op-b, #d4a845); background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--night) 70%, #3a2f4a), var(--night) 75%); color: #fff; transition: opacity calc(.6s * var(--k)) ease calc(var(--fade, 1.6s) * var(--k)); }
.intro-fant.open { opacity: 0; }
.intro-fant .intro-for, .intro-fant .intro-for strong { color: #fff; }
.intro-fant > .intro-hint { position: absolute; z-index: 9; bottom: max(30px, 8vh); left: 0; right: 0; text-align: center; color: #fff; }
.intro-fant .op-title { color: var(--gold); text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.fant-label { position: absolute; z-index: 4; top: 12%; left: 0; right: 0; text-align: center; transition: opacity .4s; }
.intro-fant.open .fant-label { opacity: 0; }
.glints { position: absolute; left: 50%; top: 40%; pointer-events: none; z-index: 5; }
.glints i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff6cf; box-shadow: 0 0 8px 2px var(--gold); opacity: 0; }
.intro-fant.open .glints i { animation: glint calc(1.5s * var(--k)) ease-out calc((.5s + var(--d)) * var(--k)) forwards; }
@keyframes glint { 20% { opacity: 1; } to { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); } }

/* Libro de hechizos */
.fant-hechizos { --leather: var(--op-a, #4a1f1f); --fade: 2s; }
.spell { position: relative; width: min(62vw, 290px); aspect-ratio: .74; perspective: 2000px; transition: transform calc(.9s * var(--k)) cubic-bezier(.5, .05, .3, 1); }
.spell-in, .spell-page { position: absolute; inset: 2% 0 2% 2%; border-radius: 2px 6px 6px 2px; background: radial-gradient(ellipse at 40% 50%, #f7ecd2, #e6d2a8 85%); box-shadow: 3px 0 0 #d9b75c, 5px 0 0 #b8913f, 7px 1px 0 #d9b75c, 0 20px 30px -10px rgba(0, 0, 0, .6); }
.spell-in { display: grid; place-items: center; color: #3a2614; }
.spell-in .op-card { transform: scale(.8); } .spell-in .op-title { color: #7a1f1f; text-shadow: none; }
.spell-page { transform-origin: 0 50%; box-shadow: inset 8px 0 14px -8px rgba(0, 0, 0, .35); transition: transform calc(.7s * var(--k)) cubic-bezier(.5, .05, .3, 1) calc((.75s + var(--p) * .22s) * var(--k)); background-image: repeating-linear-gradient(180deg, transparent 0 14px, rgba(90, 60, 30, .15) 14px 15px), radial-gradient(ellipse at 40% 50%, #f7ecd2, #e6d2a8 85%); background-clip: content-box; padding: 14% 12%; }
.spell-cover { position: absolute; inset: 0; z-index: 3; transform-origin: 0 50%; border-radius: 4px 10px 10px 4px; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--leather) 80%, #fff), var(--leather) 60%, color-mix(in srgb, var(--leather) 60%, #000)), var(--leather); box-shadow: inset 0 0 0 8px color-mix(in srgb, var(--leather) 70%, #000), inset 0 0 0 10px var(--gold), inset 0 0 0 14px color-mix(in srgb, var(--leather) 80%, #000), inset 0 0 0 15px color-mix(in srgb, var(--gold) 70%, transparent), inset 12px 0 18px rgba(0, 0, 0, .45), 0 30px 40px -12px rgba(0, 0, 0, .7); display: grid; place-items: center; transition: transform calc(.95s * var(--k)) cubic-bezier(.55, .05, .3, 1); }
.spell-cover::before { content: ''; position: absolute; inset: 22px; border-radius: 6px; background: radial-gradient(circle at 0 0, var(--gold) 0 14px, transparent 15px), radial-gradient(circle at 100% 0, var(--gold) 0 14px, transparent 15px), radial-gradient(circle at 0 100%, var(--gold) 0 14px, transparent 15px), radial-gradient(circle at 100% 100%, var(--gold) 0 14px, transparent 15px); opacity: .9; }
.spell-emblem { position: relative; width: 44%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; color: var(--gold); font: var(--names-style) 700 clamp(1.2rem, 6cqi, 1.8rem)/1 var(--font-names); border: 3px solid var(--gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--leather) 80%, #000), 0 0 0 8px color-mix(in srgb, var(--gold) 60%, transparent), 0 0 24px color-mix(in srgb, var(--gold) 35%, transparent); text-shadow: 0 0 10px color-mix(in srgb, var(--gold) 60%, transparent); animation: rune 3s ease-in-out infinite; }
@keyframes rune { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--leather) 80%, #000), 0 0 0 8px color-mix(in srgb, var(--gold) 60%, transparent), 0 0 40px color-mix(in srgb, var(--gold) 65%, transparent); } }
.intro-fant.open .spell { transform: translateX(39%) scale(.78); }
.intro-fant.open .spell-cover { transform: rotateY(-172deg); }
.intro-fant.open .spell-page { transform: rotateY(calc(-168deg + var(--p) * 2deg)); }
.intro-fant.fant-hechizos.open .spell { animation: spellzoom calc(.7s * var(--k)) ease-in calc(1.9s * var(--k)) forwards; }
@keyframes spellzoom { to { scale: 1.5; } }

/* Telón de teatro */
.fant-teatro { --velvet: var(--op-a, #9b1023); --fade: 1.55s; background: radial-gradient(ellipse at 50% 30%, #2a1a12, #0b0705); }
.stage-light { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 50% at 50% 55%, color-mix(in srgb, var(--op-light, #ffe7b0) 55%, transparent), transparent 70%); }
.drape { position: absolute; z-index: 2; top: 0; bottom: 0; width: 51%; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 25%, transparent 75%, rgba(0, 0, 0, .45)), repeating-linear-gradient(90deg, color-mix(in srgb, var(--velvet) 45%, #000) 0, var(--velvet) 3.5%, color-mix(in srgb, var(--velvet) 70%, #fff) 5.5%, var(--velvet) 7.5%, color-mix(in srgb, var(--velvet) 45%, #000) 11%); box-shadow: inset 0 0 60px rgba(0, 0, 0, .5); transition: transform calc(1.3s * var(--k)) cubic-bezier(.55, .05, .25, 1) calc(.1s * var(--k)), clip-path calc(1.3s * var(--k)) cubic-bezier(.55, .05, .25, 1) calc(.1s * var(--k)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.drape-l { left: 0; transform-origin: 0 0; } .drape-r { right: 0; transform-origin: 100% 0; }
.drape::after { content: ''; position: absolute; inset: 0; background: inherit; opacity: .4; animation: velvet 4s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes velvet { 50% { transform: translateX(1.5%); } }
.valance { position: absolute; z-index: 3; left: -2%; right: -2%; top: 0; height: 13vh; background: radial-gradient(ellipse 50% 80% at 50% 0, transparent 60%, rgba(0, 0, 0, .4) 61%, transparent 70%) 0 100% / 16.66% 60% repeat-x, repeating-linear-gradient(90deg, color-mix(in srgb, var(--velvet) 50%, #000) 0, var(--velvet) 4%, color-mix(in srgb, var(--velvet) 75%, #fff) 6%, var(--velvet) 8%, color-mix(in srgb, var(--velvet) 50%, #000) 12%); -webkit-mask: radial-gradient(ellipse 52% 60% at 50% 40%, #000 98%, transparent 100%) 0 0 / 16.66% 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% 55% no-repeat; mask: radial-gradient(ellipse 52% 60% at 50% 40%, #000 98%, transparent 100%) 0 0 / 16.66% 100% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% 55% no-repeat; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .5)); }
.valance::after { content: ''; position: absolute; left: 0; right: 0; bottom: 6%; height: 10px; background: repeating-linear-gradient(90deg, var(--gold) 0 2px, transparent 2px 5px); opacity: .9; }
.fant-teatro .intro-center { position: relative; z-index: 4; }
.intro-fant.open .drape-l { transform: scaleX(.16) skewY(4deg); clip-path: polygon(0 0, 100% 0, 60% 100%, 0 100%); }
.intro-fant.open .drape-r { transform: scaleX(.16) skewY(-4deg); clip-path: polygon(0 0, 100% 0, 100% 100%, 40% 100%); }
.intro-fant.fant-teatro.open .intro-center { opacity: 0; }
.intro-fant.open .stage-light { opacity: 0; transition: opacity .8s calc(.9s * var(--k)); }

/* Baúl del tesoro */
.fant-baul { --wood: var(--op-a, #6b3f1f); --fade: 1.7s; }
.chest { position: relative; width: min(70vw, 300px); height: 240px; margin-top: 14vh; perspective: 900px; }
.chest-body { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; border-radius: 6px; background: linear-gradient(90deg, transparent 10%, #3a3a3a 10% 14%, transparent 14% 86%, #3a3a3a 86% 90%, transparent 90%), repeating-linear-gradient(180deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 30px), linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 30%, rgba(255, 255, 255, .1) 60%, rgba(0, 0, 0, .3)), var(--wood); box-shadow: inset 0 0 0 5px #2f2f2f, inset 0 0 0 7px var(--gold), 0 30px 30px -15px rgba(0, 0, 0, .7); }
.chest-lock { position: absolute; left: 50%; top: -4px; width: 34px; height: 44px; translate: -50% 0; border-radius: 4px 4px 14px 14px; background: linear-gradient(180deg, #fff1b8, var(--gold) 50%, #7a5513); box-shadow: 0 4px 6px rgba(0, 0, 0, .5); }
.chest-lock::after { content: ''; position: absolute; left: 50%; top: 52%; width: 7px; height: 12px; translate: -50% 0; border-radius: 4px 4px 1px 1px; background: #2a1a0a; }
.chest-lid { position: absolute; z-index: 2; left: 0; right: 0; bottom: 118px; height: 76px; border-radius: 50% 50% 4px 4px / 100% 100% 4px 4px; transform-origin: 50% 100%; background: linear-gradient(90deg, transparent 10%, #3a3a3a 10% 14%, transparent 14% 86%, #3a3a3a 86% 90%, transparent 90%), linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(0, 0, 0, .3)), var(--wood); box-shadow: inset 0 0 0 5px #2f2f2f, inset 0 0 0 7px var(--gold); transition: transform calc(.9s * var(--k)) cubic-bezier(.4, 0, .2, 1.2) calc(.15s * var(--k)); }
.chest-beam { position: absolute; left: 50%; bottom: 110px; width: 90%; height: 70vh; translate: -50% 0; background: linear-gradient(0deg, color-mix(in srgb, var(--gold) 90%, #fff), color-mix(in srgb, var(--gold) 30%, transparent) 50%, transparent); clip-path: polygon(30% 100%, 70% 100%, 100% 0, 0 0); filter: blur(6px); opacity: 0; transform: scaleY(.2); transform-origin: 50% 100%; transition: opacity calc(.6s * var(--k)) ease calc(.45s * var(--k)), transform calc(.8s * var(--k)) ease calc(.45s * var(--k)); }
.intro-fant.open .chest-lid { transform: rotateX(-118deg); }
.intro-fant.open .chest-beam { opacity: .9; transform: none; }

/* Espejo mágico */
.fant-espejo { --fade: 1.5s; }
.fx-defs { position: absolute; }
.mirror { position: relative; width: min(66vw, 300px); aspect-ratio: .72; }
.mirror-in, .mirror-glass { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
.mirror-in { background: radial-gradient(ellipse, #fffdf9, #efe6d8); }
.mirror-in .op-card { transform: scale(.85); color: var(--ink); } .mirror-in .op-title { text-shadow: none; color: var(--accent); }
.mirror-glass { background: linear-gradient(160deg, #e9eef3 0%, #aab4bf 30%, #f5f8fb 48%, #8f9aa6 70%, #d6dde4 100%); filter: url(#mirrorWave); transition: opacity calc(1s * var(--k)) ease calc(.15s * var(--k)); }
.mirror-shine { position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .7) 50%, transparent 60%); animation: shine 3.6s ease-in-out infinite; }
@keyframes shine { 0% { transform: translateX(-60%); } 60%, 100% { transform: translateX(60%); } }
.mirror-frame { position: absolute; inset: -16px; border-radius: 50%; border: 14px solid var(--gold); box-shadow: inset 0 0 0 3px #7a5513, 0 0 0 3px #7a5513, inset 0 6px 10px rgba(0, 0, 0, .4), 0 20px 40px rgba(0, 0, 0, .6), 0 0 0 9px color-mix(in srgb, var(--gold) 50%, transparent); background: radial-gradient(circle at 50% 0, var(--gold) 0 18px, transparent 19px) 50% -26px / 60px 60px no-repeat; pointer-events: none; }
.intro-fant.open .mirror-glass { opacity: 0; }
.intro-fant.fant-espejo.open .mirror { transform: scale(1.15); transition: transform calc(.8s * var(--k)) ease calc(.7s * var(--k)); }

/* Constelaciones */
.fant-estrellas { --fade: 1.9s; background: transparent; }
.sky { position: absolute; top: 0; bottom: 0; width: 50.2%; background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--night) 70%, #2a3a6a), var(--night) 80%); background-size: 200% 100%; transition: transform calc(1s * var(--k)) cubic-bezier(.65, 0, .3, 1) calc(1.15s * var(--k)); }
.sky-l { left: 0; background-position: 0 0; } .sky-r { right: 0; background-position: 100% 0; }
.stars { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity calc(.6s * var(--k)) ease calc(1.3s * var(--k)); }
.stars i, .stars b { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); translate: -50% -50%; border-radius: 50%; background: #fff; }
.stars i { box-shadow: 0 0 6px 2px rgba(200, 220, 255, .8); transition: left calc(1.1s * var(--k)) cubic-bezier(.5, 0, .2, 1) var(--d), top calc(1.1s * var(--k)) cubic-bezier(.5, 0, .2, 1) var(--d); }
.stars b { opacity: .5; animation: twinkle 3s ease-in-out var(--d) infinite; }
@keyframes twinkle { 50% { opacity: .1; } }
.fant-estrellas .intro-center { position: relative; z-index: 3; transition: opacity .5s; }
.intro-fant.open .stars i { left: var(--tx); top: var(--ty); }
.intro-fant.open .stars { opacity: 0; }
.intro-fant.open .sky-l { transform: translateX(-102%); } .intro-fant.open .sky-r { transform: translateX(102%); }
.intro-fant.fant-estrellas.open .intro-center { opacity: 0; }

/* Puente levadizo */
.fant-puente { --wood: var(--op-a, #7a4b2a); --fade: 1.6s; background: transparent; perspective: 900px; }
.castle-wall { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .35) 0 3px, transparent 3px 46px), repeating-linear-gradient(90deg, rgba(0, 0, 0, .3) 0 3px, transparent 3px 92px), radial-gradient(ellipse at 50% 40%, #8a8478, #4f4a42); background-size: 100% 100%, 92px 98px, 100% 100%; background-position: 0 0, 0 0, 0 0; -webkit-mask: radial-gradient(ellipse min(37vw, 175px) min(30vh, 220px) at 50% calc(100% - min(30vh, 220px) - 8vh), transparent 99%, #000 100%), linear-gradient(#000 0 0) top / 100% calc(100% - min(30vh, 220px) - 8vh) no-repeat; mask: linear-gradient(#000, #000); transition: opacity calc(.6s * var(--k)) ease calc(1s * var(--k)), transform calc(1s * var(--k)) ease calc(.9s * var(--k)); }
.bridge-gate { position: relative; width: min(74vw, 350px); height: min(62vh, 470px); margin-top: 8vh; perspective: 1100px; transition: transform calc(1s * var(--k)) ease calc(.95s * var(--k)); }
.bridge-dark { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50% 50% 0 0 / 30% 30% 0 0; background: radial-gradient(ellipse at 50% 60%, #fffdf9, #e9dcc5); box-shadow: inset 0 0 40px rgba(0, 0, 0, .55), 0 0 0 14px #5a554c, 0 0 0 18px #3a362f; }
.bridge-dark .op-title { color: var(--accent); text-shadow: none; } .bridge-dark .op-card { color: var(--ink); }
.bridge { position: absolute; inset: 0; z-index: 2; border-radius: 50% 50% 0 0 / 30% 30% 0 0; transform-origin: 50% 100%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .55) 0 3px, transparent 3px 14%), linear-gradient(180deg, transparent 18%, #2b2b2b 18% 21%, transparent 21% 79%, #2b2b2b 79% 82%, transparent 82%), linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(255, 255, 255, .08), rgba(0, 0, 0, .25)), var(--wood); box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--wood) 60%, #000), 0 10px 30px rgba(0, 0, 0, .5); transition: transform calc(1.1s * var(--k)) cubic-bezier(.6, 0, .35, 1.1) calc(.15s * var(--k)); }
.chain { position: absolute; top: 12%; width: 8px; height: 60%; background: repeating-linear-gradient(180deg, #8a8a8a 0 6px, #3a3a3a 6px 8px, transparent 8px 10px); border-radius: 4px; transform-origin: 50% 0; transition: opacity .4s calc(.4s * var(--k)); }
.chain-l { left: 8%; rotate: 18deg; } .chain-r { right: 8%; rotate: -18deg; }
.intro-fant.open .bridge { transform: rotateX(-86deg); }
.intro-fant.open .chain { opacity: 0; }
.intro-fant.fant-puente.open .bridge-gate { transform: scale(1.7) translateY(6%); }
.intro-fant.fant-puente.open .castle-wall { transform: scale(1.5); opacity: 0; }

/* Cofre de cristal */
.fant-cofre { --fade: 1.5s; --edge: var(--op-b, #d4a845); }
.glassbox { position: relative; width: min(72vw, 320px); height: min(56vh, 380px); perspective: 1000px; margin-top: 6vh; }
.gb-back, .gb-front { position: absolute; left: 0; right: 0; bottom: 0; top: 14%; border-radius: 6px; }
.gb-back { background: linear-gradient(180deg, rgba(200, 225, 255, .18), rgba(200, 225, 255, .06)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--edge) 60%, transparent); }
.gb-card { position: absolute; z-index: 1; left: 10%; right: 10%; top: 24%; bottom: 10%; display: grid; place-items: center; border-radius: 6px; background: #fffdf9; box-shadow: 0 16px 30px rgba(0, 0, 0, .45); animation: bob 3s ease-in-out infinite; transition: transform calc(1s * var(--k)) cubic-bezier(.2, .8, .3, 1.1) calc(.6s * var(--k)); }
.gb-card .op-card { transform: scale(.8); color: var(--ink); } .gb-card .op-title { color: var(--accent); text-shadow: none; }
@keyframes bob { 50% { translate: 0 -8px; } }
.gb-front { z-index: 2; background: linear-gradient(125deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .04) 35%, rgba(255, 255, 255, .16) 55%, rgba(255, 255, 255, .03) 70%); box-shadow: inset 0 0 0 4px var(--edge), inset 0 0 0 6px rgba(0, 0, 0, .25), 0 30px 40px -20px rgba(0, 0, 0, .7); backdrop-filter: blur(1px); pointer-events: none; }
.gb-lid { position: absolute; z-index: 3; left: -3%; right: -3%; top: 6%; height: 10%; border-radius: 6px; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .4), rgba(200, 225, 255, .12)); box-shadow: inset 0 0 0 4px var(--edge), 0 6px 10px rgba(0, 0, 0, .3); transition: transform calc(.9s * var(--k)) cubic-bezier(.4, 0, .2, 1.2) calc(.1s * var(--k)); }
.intro-fant.open .gb-lid { transform: translateY(-60%) rotateX(72deg); }
.intro-fant.open .gb-card { animation: none; transform: translateY(-40%) scale(1.35); }

/* ==========================================================================
   Arquitectura con mecanismo
   ========================================================================== */
.intro-arq { background: transparent; color: #fff; transition: opacity calc(.6s * var(--k)) ease calc(var(--fade, 1.6s) * var(--k)); }
.intro-arq.open { opacity: 0; }
.intro-arq > .intro-hint { position: absolute; z-index: 9; bottom: max(30px, 8vh); left: 0; right: 0; text-align: center; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.arq-label { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; width: min(80vw, 360px); padding: 1.1rem; text-align: center; border-radius: 12px; background: rgba(255, 255, 255, .9); color: var(--ink); box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .45); transition: opacity .4s; }
.arq-label .op-title { color: var(--accent); }
.intro-arq.open .arq-label { opacity: 0; }

/* Persianas venecianas */
.arq-persianas { --slat: var(--op-a, #f1ece4); --fade: 1.6s; }
.blinds { position: absolute; inset: 0; display: flex; flex-direction: column; perspective: 900px; transition: transform calc(1s * var(--k)) cubic-bezier(.6, 0, .3, 1) calc(.75s * var(--k)); transform-origin: 50% 0; }
.blinds i { flex: 1; margin: -1px 0; background: linear-gradient(180deg, color-mix(in srgb, var(--slat) 70%, #fff) 0, var(--slat) 35%, color-mix(in srgb, var(--slat) 80%, #000) 100%); box-shadow: 0 3px 4px rgba(0, 0, 0, .22); transition: transform calc(.6s * var(--k)) cubic-bezier(.4, 0, .2, 1) calc(var(--i) * .02s * var(--k)); }
.blinds-cord { position: absolute; right: 12%; top: 0; height: 70%; width: 3px; background: color-mix(in srgb, var(--slat) 60%, #000); box-shadow: 10px 0 0 color-mix(in srgb, var(--slat) 60%, #000); }
.blinds-cord::after { content: ''; position: absolute; bottom: -18px; left: 50%; width: 10px; height: 20px; translate: -20% 0; border-radius: 5px; background: color-mix(in srgb, var(--slat) 70%, #000); }
.intro-arq.open .blinds i { transform: rotateX(78deg); }
.intro-arq.open .blinds { transform: scaleY(0); }

/* Cortina metálica de cine */
.arq-cine { --steel: var(--op-a, #9aa0a6); --bulb: var(--op-light, #ffd36b); --fade: 1.5s; background: transparent; }
.marquee { position: absolute; z-index: 4; left: 50%; top: max(18px, 4vh); translate: -50% 0; width: min(88vw, 520px); padding: 1.2rem 1rem 1rem; text-align: center; border-radius: 10px; color: #fff; background: radial-gradient(circle, var(--bulb) 0 3px, color-mix(in srgb, var(--bulb) 30%, transparent) 4px, transparent 6px) 0 0 / 22px 22px, linear-gradient(180deg, #2a0f12, #12070a); box-shadow: inset 0 0 0 12px #1a0a0c, inset 0 0 0 14px var(--bulb), 0 0 30px color-mix(in srgb, var(--bulb) 40%, transparent); animation: bulbs 1.2s steps(2) infinite; }
.marquee::before { content: ''; position: absolute; inset: 22px; border-radius: 4px; background: #fdf8ec; box-shadow: inset 0 0 20px rgba(0, 0, 0, .2); z-index: -1; }
.marquee .op-kicker { color: #b3243a; opacity: 1; } .marquee .op-title { color: #1a0a0c; font-size: clamp(1.6rem, 7cqi, 2.6rem); } .marquee .intro-for, .marquee .intro-for strong { color: #3a2a2a; } .marquee .intro-for { font-size: .7rem; margin: 0; } .marquee .intro-for strong { font-size: 1.05rem; display: inline; }
.marquee { padding: 1.6rem 1.6rem 1.5rem; display: grid; gap: .25rem; }
@keyframes bulbs { 50% { background-position: 11px 0, 0 0; } }
.shutter-roll { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(180deg, #4a4f55, #23272b); box-shadow: 0 6px 10px rgba(0, 0, 0, .5); }
.metal-shutter { position: absolute; z-index: 2; left: 0; right: 0; top: 20px; bottom: 0; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--steel) 70%, #fff) 0 3px, var(--steel) 3px 16px, color-mix(in srgb, var(--steel) 55%, #000) 16px 21px, color-mix(in srgb, var(--steel) 80%, #000) 21px 24px), linear-gradient(90deg, rgba(0, 0, 0, .3), transparent 20%, rgba(255, 255, 255, .1) 50%, transparent 80%, rgba(0, 0, 0, .3)); background-blend-mode: normal, multiply; box-shadow: inset 0 -10px 0 #3a3f45; transition: transform calc(1.2s * var(--k)) cubic-bezier(.55, 0, .25, 1) calc(.15s * var(--k)); animation: none; }
.shutter-handle { position: absolute; left: 50%; bottom: 18px; width: 90px; height: 14px; translate: -50% 0; border-radius: 7px; background: linear-gradient(180deg, #d9dde2, #5d646b); box-shadow: 0 3px 4px rgba(0, 0, 0, .45); }
.intro-arq.open .metal-shutter { transform: translateY(-100%); animation: rattle calc(.12s * var(--k)) linear 3; }
@keyframes rattle { 50% { translate: 1px 0; } }
.intro-arq.open .marquee { transition: opacity .5s calc(1.1s * var(--k)); opacity: 0; }

/* Bóveda */
.arq-boveda { --steel: var(--op-a, #8d949b); --fade: 2.3s; background: transparent; }
.vault-wall { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .15) 0 2px, transparent 2px 120px), repeating-linear-gradient(0deg, rgba(0, 0, 0, .15) 0 2px, transparent 2px 120px), radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--steel) 70%, #fff), color-mix(in srgb, var(--steel) 60%, #000)); transition: opacity calc(.6s * var(--k)) ease calc(1.9s * var(--k)); }
.vault { position: relative; width: min(82vw, 380px); aspect-ratio: 1; perspective: 1400px; }
.vault-in { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fffdf9 40%, #e9dcc5); box-shadow: 0 0 0 14px #3c4146, 0 0 0 18px #23272b, inset 0 0 40px rgba(0, 0, 0, .45); color: var(--ink); }
.vault-in .op-title { color: var(--accent); } .vault-in .intro-for, .vault-in .intro-for strong { color: var(--ink); }
.vault-door { position: absolute; inset: 0; z-index: 2; border-radius: 50%; transform-origin: 0 50%; transition: transform calc(1.1s * var(--k)) cubic-bezier(.6, 0, .3, 1) calc(1.35s * var(--k)); transform-style: preserve-3d; }
.bolt { position: absolute; left: 50%; top: 50%; width: 15%; height: 6%; margin: -3% 0 0; transform-origin: 0 50%; rotate: var(--a); translate: 0 0; }
.bolt::before { content: ''; position: absolute; inset: 0; left: 280%; border-radius: 4px; background: linear-gradient(180deg, #f2f4f6, #7d858c); box-shadow: 0 2px 3px rgba(0, 0, 0, .5); transition: transform calc(.45s * var(--k)) ease-in calc(.95s * var(--k)); }
.vault-face { position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center; background: repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .06) 0 2px, rgba(0, 0, 0, .05) 2px 5px), radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--steel) 60%, #fff), var(--steel) 50%, color-mix(in srgb, var(--steel) 55%, #000)); box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--steel) 70%, #000), inset 0 0 0 14px color-mix(in srgb, var(--steel) 80%, #fff), inset 0 0 0 26px color-mix(in srgb, var(--steel) 85%, #000), 0 18px 40px rgba(0, 0, 0, .55); }
.vault-wheel { position: relative; width: 52%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; border: 10px solid #c9cdd2; box-shadow: 0 6px 10px rgba(0, 0, 0, .5), inset 0 0 0 2px #6b7178, 0 0 0 2px #6b7178; transition: transform calc(1s * var(--k)) cubic-bezier(.5, 0, .3, 1); }
.vault-wheel i { position: absolute; left: 50%; top: 50%; width: 62%; height: 9px; margin: -4.5px 0 0; transform-origin: 0 50%; rotate: var(--a); border-radius: 5px; background: linear-gradient(180deg, #f2f4f6, #7d858c); box-shadow: 0 2px 3px rgba(0, 0, 0, .4); }
.vault-wheel span { position: relative; width: 44%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1b8, #d4a845 55%, #7a5513); color: #3a2a10; font: var(--names-style) 700 clamp(.9rem, 4cqi, 1.2rem)/1 var(--font-names); box-shadow: 0 3px 6px rgba(0, 0, 0, .45); }
.vault-hinge { position: absolute; z-index: 3; left: -3%; top: 34%; width: 6%; height: 32%; border-radius: 6px; background: linear-gradient(90deg, #4a4f55, #c9cdd2, #4a4f55); box-shadow: 0 3px 6px rgba(0, 0, 0, .5); }
.intro-arq.open .vault-wheel { transform: rotate(300deg); }
.intro-arq.open .bolt::before { transform: translateX(-120%); }
.intro-arq.open .vault-door { transform: rotateY(-115deg); }
.intro-arq.arq-boveda.open .vault { transform: scale(1.4); transition: transform calc(.8s * var(--k)) ease calc(1.9s * var(--k)); }

/* ==========================================================================
   Efectos digitales
   ========================================================================== */
@property --hole { syntax: '<length>'; inherits: true; initial-value: 0px; }
.intro-fx { --fxbg: var(--op-wall, #1d1a24); --glow: var(--op-light, #8be9ff); background: transparent; color: #fff; transition: opacity calc(.6s * var(--k)) ease calc(var(--fade, 1.3s) * var(--k)); }
.intro-fx.open { opacity: 0; }
.intro-fx > .intro-hint { position: absolute; z-index: 9; bottom: max(30px, 8vh); left: 0; right: 0; text-align: center; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.intro-fx .intro-center { position: relative; z-index: 3; transition: opacity calc(.5s * var(--k)); }
.intro-fx .op-card { color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.intro-fx .op-card .op-title { color: #fff; font-size: clamp(2.2rem, 10cqi, 3.6rem); }
.intro-fx .op-card .intro-for, .intro-fx .op-card .intro-for strong { color: #fff; }
.intro-fx.open .intro-center { opacity: 0; }

/* Humo y polvo de hadas */
.fx-humo { --fxbg: var(--op-wall, #3a3446); --fade: 1.2s; background: color-mix(in srgb, var(--fxbg) 55%, transparent); backdrop-filter: blur(8px); transition: opacity calc(.6s * var(--k)) ease calc(1.2s * var(--k)), backdrop-filter calc(1s * var(--k)) ease calc(.3s * var(--k)); }
.smoke, .dust, .ripples { position: absolute; inset: 0; pointer-events: none; }
.smoke i { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--op-a, #e9e4f0) 85%, transparent), color-mix(in srgb, var(--op-a, #e9e4f0) 25%, transparent) 45%, transparent 70%); filter: blur(14px); opacity: .85; animation: drift 9s ease-in-out infinite alternate; transition: transform calc(1.3s * var(--k)) cubic-bezier(.3, 0, .2, 1) var(--d), opacity calc(1.1s * var(--k)) ease var(--d); }
.smoke i:nth-child(odd) { animation-duration: 12s; animation-direction: alternate-reverse; }
@keyframes drift { to { margin-left: 4vw; margin-top: -3vh; } }
.dust b { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: #fff7d1; box-shadow: 0 0 8px 2px #ffd76a; animation: twinkle 2.4s ease-in-out var(--d) infinite; }
.intro-fx.open .smoke i { transform: translate(var(--dx), var(--dy)) scale(1.6); opacity: 0; }
.intro-fx.open .dust b { animation: dustfly calc(1s * var(--k)) ease-out forwards; }
@keyframes dustfly { 30% { opacity: 1; transform: scale(1.8); } to { opacity: 0; transform: translateY(-30vh) scale(.5); } }
.intro-fx.fx-humo.open { backdrop-filter: blur(0); background: transparent; }

/* Enfoque de cámara */
.fx-enfoque { --fade: 1.1s; backdrop-filter: blur(22px) saturate(.7) brightness(.85); transition: opacity calc(.6s * var(--k)) ease calc(1.15s * var(--k)), backdrop-filter calc(1.1s * var(--k)) cubic-bezier(.3, 0, .2, 1) calc(.15s * var(--k)); }
.intro-fx.fx-enfoque.open { backdrop-filter: blur(0) saturate(1) brightness(1); }
.lens { position: absolute; inset: max(18px, 4vmin); pointer-events: none; background: linear-gradient(90deg, transparent calc(33.3% - .5px), rgba(255, 255, 255, .25) calc(33.3% - .5px) calc(33.3% + .5px), transparent 0, transparent calc(66.6% - .5px), rgba(255, 255, 255, .25) calc(66.6% - .5px) calc(66.6% + .5px), transparent 0), linear-gradient(180deg, transparent calc(33.3% - .5px), rgba(255, 255, 255, .25) calc(33.3% - .5px) calc(33.3% + .5px), transparent 0, transparent calc(66.6% - .5px), rgba(255, 255, 255, .25) calc(66.6% - .5px) calc(66.6% + .5px), transparent 0); transition: opacity calc(.5s * var(--k)) ease calc(.9s * var(--k)); }
.af-c { position: absolute; width: 34px; height: 34px; border: 3px solid #fff; }
.af-c.tl { left: 0; top: 0; border-right: 0; border-bottom: 0; } .af-c.tr { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.af-c.bl { left: 0; bottom: 0; border-right: 0; border-top: 0; } .af-c.br { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.af-box { position: absolute; left: 50%; top: 50%; width: 40%; aspect-ratio: 1.2; translate: -50% -50%; border: 2px solid rgba(255, 255, 255, .9); border-radius: 4px; transition: width calc(.5s * var(--k)) cubic-bezier(.3, 1.5, .5, 1), border-color .2s calc(.5s * var(--k)); animation: hunt 1.4s ease-in-out infinite; }
@keyframes hunt { 50% { width: 44%; } }
.af-info { position: absolute; left: 44px; bottom: 6px; font: 600 .7rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.af-rec { position: absolute; right: 44px; top: 10px; font: 700 .7rem/1 ui-monospace, monospace; color: #ff4d4d; animation: blink 1s steps(2) infinite; }
.intro-fx.open .af-box { width: 26%; border-color: #5dff8f; animation: none; }
.intro-fx.fx-enfoque.open .lens { opacity: 0; }

/* Revelado fotográfico */
.fx-revelado { --fade: 2s; backdrop-filter: grayscale(1) sepia(.25) brightness(1.9) contrast(.45); }
.intro-fx.fx-revelado.open { animation: develop calc(2s * var(--k)) ease-in-out forwards; }
@keyframes develop { 45% { backdrop-filter: grayscale(1) sepia(.35) brightness(1) contrast(1.15); } 100% { backdrop-filter: grayscale(0) sepia(0) brightness(1) contrast(1); } }
.develop { position: absolute; inset: 0; overflow: hidden; background: color-mix(in srgb, #fff 20%, transparent); }
.wash { position: absolute; left: -10%; right: -10%; top: -40%; height: 40%; background: linear-gradient(180deg, transparent, rgba(255, 220, 160, .35), transparent); filter: blur(10px); animation: wash 3s ease-in-out infinite; }
@keyframes wash { to { top: 110%; } }
.photo-border { position: absolute; inset: 0; border: max(14px, 3.5vmin) solid #f9f6ef; border-bottom-width: max(56px, 12vmin); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); transition: opacity calc(.6s * var(--k)) ease calc(1.6s * var(--k)); }
.fx-revelado .op-card { color: #3a3330; text-shadow: none; } .fx-revelado .op-card .op-title, .fx-revelado .op-card .intro-for, .fx-revelado .op-card .intro-for strong { color: #3a3330; }
.fx-revelado > .intro-hint { color: #3a3330; text-shadow: none; }
.intro-fx.open .photo-border { opacity: 0; }

/* Rompecabezas */
.fx-puzzle { --fade: 1.85s; background: var(--fxbg); transition: opacity calc(.6s * var(--k)) ease calc(1.85s * var(--k)), background 0s calc(1.2s * var(--k)); }
.puzzle { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(6, 1fr); --img: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--accent) 70%, #fff) 0 9%, transparent 9.5%), radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--accent-2, var(--accent)) 80%, #fff) 0 14%, transparent 14.5%), radial-gradient(circle at 70% 18%, rgba(255, 255, 255, .5) 0 5%, transparent 5.5%), radial-gradient(circle at 20% 82%, rgba(255, 255, 255, .35) 0 8%, transparent 8.5%), linear-gradient(160deg, var(--op-a, color-mix(in srgb, var(--accent) 45%, #fff)), var(--op-b, color-mix(in srgb, var(--accent) 80%, #000))); }
.puzzle i { background-image: var(--img); background-size: 400% 600%; background-position: calc(var(--c) * 100% / 3) calc(var(--r) * 100% / 5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), inset 2px 2px 3px rgba(255, 255, 255, .25), inset -2px -2px 4px rgba(0, 0, 0, .25), 0 6px 14px rgba(0, 0, 0, .35); border-radius: 6px; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(.85); animation: float 4s ease-in-out infinite alternate; transition: transform calc(.9s * var(--k)) cubic-bezier(.3, 1.2, .4, 1) var(--d), border-radius .3s calc(1.1s * var(--k)), box-shadow .3s calc(1.1s * var(--k)); }
@keyframes float { to { translate: 0 -10px; } }
.intro-fx.open .puzzle i { transform: none; animation: none; border-radius: 0; box-shadow: none; }
.puzzle-label { opacity: 0; }
.intro-fx.fx-puzzle .intro-center.puzzle-label { transition: opacity calc(.5s * var(--k)) ease calc(1.1s * var(--k)); }
.intro-fx.fx-puzzle.open .puzzle-label { opacity: 1; }

/* Partículas que se unen */
.fx-particulas { --fade: 1.6s; background: radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--fxbg) 70%, #3a3a6a), var(--fxbg)); }
.motes i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 2px var(--glow); opacity: .75; animation: twinkle 2.2s ease-in-out var(--d) infinite; transition: left calc(1.1s * var(--k)) cubic-bezier(.6, 0, .2, 1) var(--d), top calc(1.1s * var(--k)) cubic-bezier(.6, 0, .2, 1) var(--d), transform calc(.6s * var(--k)) ease calc(1.3s * var(--k)), opacity calc(.6s * var(--k)) ease calc(1.3s * var(--k)); }
.intro-fx.open .motes i { left: var(--tx); top: var(--ty); animation: none; opacity: 1; }
.intro-fx.fx-particulas.open .motes { animation: ringout calc(.6s * var(--k)) ease-in calc(1.35s * var(--k)) forwards; }
@keyframes ringout { to { transform: scale(2.6); opacity: 0; } }
.motes { position: absolute; inset: 0; transform-origin: 50% 46%; }
.mote-mono { display: block; font: var(--names-style) var(--names-weight) clamp(2.4rem, 12cqi, 4rem)/1 var(--font-names); text-shadow: 0 0 18px var(--glow); }
.mote-label { opacity: .9; }
.intro-fx.fx-particulas .intro-center.mote-label { transition: opacity .4s calc(1.2s * var(--k)); }

/* Tarjeta holográfica */
.fx-holograma { --fade: .9s; --glow: var(--op-light, #5ff4ff); background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--glow) 12%, var(--fxbg)), #05060a 70%); }
.holo-floor { position: absolute; left: -50%; right: -50%; bottom: 0; height: 40%; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--glow) 25%, transparent) 0 1px, transparent 1px 60px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--glow) 25%, transparent) 0 1px, transparent 1px 60px); transform: perspective(400px) rotateX(62deg); transform-origin: 50% 100%; -webkit-mask: linear-gradient(transparent, #000); mask: linear-gradient(transparent, #000); }
.holo-base { position: absolute; left: 50%; bottom: 13%; width: min(46vw, 220px); height: 34px; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse, #fff 0 8%, var(--glow) 25%, color-mix(in srgb, var(--glow) 30%, #111) 60%); box-shadow: 0 0 30px 6px color-mix(in srgb, var(--glow) 60%, transparent), inset 0 -6px 10px rgba(0, 0, 0, .5); }
.holo-cone { position: absolute; left: 50%; bottom: 15%; width: min(90vw, 440px); height: 56%; translate: -50% 0; background: linear-gradient(0deg, color-mix(in srgb, var(--glow) 55%, transparent), transparent 85%); clip-path: polygon(40% 100%, 60% 100%, 100% 0, 0 0); filter: blur(4px); opacity: .6; animation: cone 2.4s ease-in-out infinite; }
@keyframes cone { 50% { opacity: .4; } }
.holo-card { position: absolute; left: 50%; bottom: 36%; width: min(78vw, 360px); translate: -50% 0; padding: 1.4rem 1rem; border-radius: 12px; text-align: center; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--glow) 18%, transparent) 0 2px, transparent 2px 5px), color-mix(in srgb, var(--glow) 10%, transparent); border: 1px solid color-mix(in srgb, var(--glow) 70%, transparent); box-shadow: 0 0 30px color-mix(in srgb, var(--glow) 40%, transparent), inset 0 0 30px color-mix(in srgb, var(--glow) 25%, transparent); animation: draw 1.6s cubic-bezier(.4, 0, .2, 1) both, holo 3s ease-in-out 1.6s infinite; }
.holo-card .op-card { color: #e9fdff; } .holo-card .op-card .op-title { color: #e9fdff; text-shadow: 0 0 10px var(--glow), 0 0 26px var(--glow); }
@keyframes draw { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes holo { 0%, 100% { transform: translateY(0); opacity: 1; } 48% { opacity: 1; } 50% { opacity: .7; transform: translateY(-6px) skewX(1deg); } 52% { opacity: 1; } }
.intro-fx.open .holo-card { animation: glitch calc(.8s * var(--k)) steps(8) forwards; }
@keyframes glitch { 0% { transform: none; } 20% { transform: translateX(-8px) skewX(8deg); filter: hue-rotate(90deg); } 40% { transform: translateX(6px); } 60% { transform: scaleY(.4) translateX(-4px); opacity: .6; } 100% { transform: scaleY(0) translateY(-80px); opacity: 0; } }
.intro-fx.open :is(.holo-cone, .holo-base) { opacity: 0; transition: opacity .5s calc(.4s * var(--k)); animation: none; }

/* Origami en acordeón */
.fx-origami { --fade: 2s; --paper: var(--op-a, #fdf9f2); background: radial-gradient(ellipse at 50% 45%, color-mix(in srgb, var(--fxbg) 60%, #fff), var(--fxbg)); --pw: min(21vw, 110px); }
.ori { position: relative; width: calc(var(--pw) * 4); height: calc(var(--pw) * 2.1); perspective: 1600px; transform: translateX(37.5%); transition: transform calc(1.6s * var(--k)) cubic-bezier(.5, 0, .3, 1); }
.ori > .ori-p { position: absolute; left: 0; top: 0; }
.ori-p { width: var(--pw); height: calc(var(--pw) * 2.1); transform-style: preserve-3d; transform-origin: 0 50%; background: linear-gradient(90deg, rgba(0, 0, 0, .08), transparent 30%, rgba(255, 255, 255, .5) 70%, rgba(0, 0, 0, .05)), var(--paper); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .35); }
.ori-p .ori-p { position: absolute; left: 100%; top: 0; transform: rotateY(178deg); transition: transform calc(.55s * var(--k)) cubic-bezier(.5, 0, .3, 1); }
.ori-p .ori-p .ori-p { transform: rotateY(-178deg); }
.ori-p .ori-p .ori-p .ori-p { transform: rotateY(178deg); }
.ori-p .ori-p .ori-p > .ori-p { background: linear-gradient(-90deg, rgba(0, 0, 0, .08), transparent 30%, rgba(255, 255, 255, .5) 70%), var(--paper); }
.intro-fx.open .ori-p .ori-p { transform: rotateY(0); transition-delay: calc(.1s * var(--k)); }
.intro-fx.open .ori-p .ori-p .ori-p { transition-delay: calc(.55s * var(--k)); }
.intro-fx.open .ori-p .ori-p .ori-p .ori-p { transition-delay: calc(1s * var(--k)); }
.intro-fx.open .ori { transform: translateX(0); }
.ori-label { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity calc(.5s * var(--k)) ease calc(1.5s * var(--k)); pointer-events: none; }
.ori-label .op-card, .ori-label .op-card .op-title, .ori-label .intro-for, .ori-label .intro-for strong { color: var(--ink); text-shadow: none; }
.ori-label .op-card .op-title { color: var(--accent); }
.intro-fx.open .ori-label { opacity: 1; }
.fx-origami > .intro-hint { color: var(--ink); text-shadow: none; }

/* Gota de agua */
.fx-gota { --px: 50%; --py: 50%; --fade: 1.3s; --water: var(--op-a, #2c6e8f); }
.water { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .25), transparent 40%), repeating-radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .06) 0 6px, transparent 6px 22px), linear-gradient(180deg, color-mix(in srgb, var(--water) 75%, #fff), var(--water) 50%, color-mix(in srgb, var(--water) 70%, #000)); -webkit-mask: radial-gradient(circle at var(--px) var(--py), transparent var(--hole), #000 calc(var(--hole) + 2px)); mask: radial-gradient(circle at var(--px) var(--py), transparent var(--hole), #000 calc(var(--hole) + 2px)); transition: --hole calc(1.3s * var(--k)) cubic-bezier(.5, 0, .3, 1) calc(.2s * var(--k)); animation: caustic 6s ease-in-out infinite alternate; }
@keyframes caustic { to { background-position: 10% 5%, 30px 20px, 0 0; } }
.ripples i { position: absolute; left: var(--px); top: var(--py); width: 10px; height: 10px; translate: -50% -50%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); opacity: 0; }
.intro-fx.open .ripples i { animation: ripple calc(1.2s * var(--k)) ease-out forwards; }
.intro-fx.open .ripples i:nth-child(2) { animation-delay: calc(.18s * var(--k)); } .intro-fx.open .ripples i:nth-child(3) { animation-delay: calc(.36s * var(--k)); }
@keyframes ripple { 10% { opacity: .9; } to { width: 160vmax; height: 160vmax; opacity: 0; border-width: 1px; } }
.intro-fx.fx-gota.open { --hole: 150vmax; }

/* Burbuja de jabón */
.fx-burbuja { --fade: .75s; background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--fxbg) 50%, #a9c7e8), var(--fxbg)); }
.bubble { position: relative; width: min(74vw, 330px); aspect-ratio: 1; animation: wobble 3.2s ease-in-out infinite; }
@keyframes wobble { 25% { transform: scale(1.03, .97); } 50% { transform: translateY(-8px); } 75% { transform: scale(.97, 1.03); } }
.bubble-in { position: absolute; inset: 14%; display: grid; place-items: center; transition: transform calc(.6s * var(--k)) cubic-bezier(.2, 1.4, .4, 1) calc(.1s * var(--k)); }
.bubble-in .op-card .op-title { font-size: clamp(1.8rem, 8cqi, 2.6rem); }
.bubble-skin { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .9) 0 4%, rgba(255, 255, 255, .25) 9%, transparent 16%), radial-gradient(circle at 70% 78%, rgba(255, 255, 255, .35) 0 5%, transparent 12%), conic-gradient(from 30deg, rgba(255, 120, 200, .35), rgba(120, 200, 255, .35), rgba(160, 255, 170, .3), rgba(255, 230, 120, .35), rgba(255, 120, 200, .35)); -webkit-mask: radial-gradient(circle, transparent 58%, #000 72%); mask: radial-gradient(circle, transparent 58%, #000 72%); box-shadow: inset 0 0 30px rgba(255, 255, 255, .5), 0 0 40px rgba(255, 255, 255, .15); animation: irid 6s linear infinite; }
.bubble::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .7) 0 3%, transparent 10%), radial-gradient(circle, rgba(255, 255, 255, .06) 55%, rgba(255, 255, 255, .25) 70%, rgba(255, 255, 255, .55) 72%); transition: opacity .15s calc(.12s * var(--k)); }
@keyframes irid { to { filter: hue-rotate(360deg); } }
.drops { position: absolute; left: 50%; top: 50%; }
.drops i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, rgba(180, 220, 255, .6)); opacity: 0; rotate: var(--a); }
.intro-fx.open .bubble { animation: pop calc(.18s * var(--k)) ease-out forwards; }
@keyframes pop { to { transform: scale(1.1); } }
.intro-fx.open :is(.bubble-skin, .bubble::before) { opacity: 0; transition: opacity .1s calc(.15s * var(--k)); }
.intro-fx.open .bubble::before { opacity: 0; }
.intro-fx.open .drops i { animation: drop calc(.6s * var(--k)) ease-out calc(.15s * var(--k)) forwards; }
@keyframes drop { 10% { opacity: 1; } to { opacity: 0; transform: translateY(calc(var(--d) * -1)) scale(.5); } }
.intro-fx.open .bubble-in { transform: scale(1.25); }
.intro[data-drag] { touch-action: none; }