/* HOPE Screen · motor de pantalla (lienzo 1920×1080) · by 21studio */
.hs-stage{position:relative;aspect-ratio:16/9;width:100%;max-width:100%;overflow:hidden;background:#000;contain:layout paint}
.hs-stage.hs-transparent{background:transparent}
.hs-si{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden}
.hs-bg,.hs-tl{position:absolute;inset:0}
.hs-bg canvas,.hs-bg img,.hs-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hs-bg.hs-bgin{animation:hs-fade .8s ease both}
.hs-bg.hs-bgout{animation:hs-fadeout .8s ease both}
.hs-tex,.hs-vig,.hs-dots,.hs-lines,.hs-glass{position:absolute;inset:0;pointer-events:none}
.hs-glass{backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);background:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0,rgba(255,255,255,0) 3%,rgba(0,0,0,.16) 5.6%,rgba(255,255,255,.05) 6.25%)}
/* el grano tiembla como película y las texturas grandes se desplazan despacio */
.hs-jit{animation:hs-jit .45s steps(5) infinite}
.hs-drift{animation:hs-drift 60s linear infinite}
@keyframes hs-jit{0%{background-position:0 0}20%{background-position:-37px 21px}40%{background-position:53px -14px}60%{background-position:-12px -48px}80%{background-position:29px 40px}}
@keyframes hs-drift{to{background-position:384px 192px}}
.hs-vig{background:radial-gradient(ellipse at 50% 45%,transparent 42%,rgba(0,0,0,.66) 100%)}
.hs-dots{background:radial-gradient(circle,rgba(0,0,0,.55) 1.6px,transparent 2px) 0 0/9px 9px;mix-blend-mode:multiply}
.hs-lines{background:repeating-linear-gradient(0deg,rgba(0,0,0,.38) 0 2px,transparent 2px 6px)}
.hs-kb{animation:hs-kb 40s ease-in-out infinite alternate}
@keyframes hs-kb{to{transform:scale(1.12) translate(-2%,-1.5%)}}
.hs-blk{position:absolute;inset:0;background:#000;opacity:0;transition:opacity .7s ease;pointer-events:none;z-index:5}
.hs-blk.on{opacity:1}
.hs-transparent .hs-blk{background:transparent}

.hs-tb{position:absolute;display:flex;flex-direction:column;overflow:hidden;gap:22px;z-index:2}
.hs-tx{white-space:pre-line;overflow-wrap:break-word;color:var(--tc)}
.hs-ref{font:500 30px/1.2 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.hs-sub{font:500 34px/1.3 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.hs-tag{align-self:flex-start;padding:10px 22px 8px;border-radius:14px;opacity:1;letter-spacing:.06em;font-weight:700;transform:rotate(-2deg)}
.hs-head{display:flex;justify-content:space-between;gap:30px;font:600 34px/1.2 'Inter Tight','Montserrat',sans-serif;opacity:.92;align-self:stretch}
.hs-head span:first-child{font-weight:700}
.hs-mark{display:inline-grid;place-items:center;width:.62em;height:.62em;margin-left:.12em;border:.07em solid currentColor;border-radius:50%;font-size:.42em;line-height:1;vertical-align:.7em;font-weight:800;letter-spacing:0;text-transform:lowercase}
.hs-sticker{position:absolute;padding:.05em .28em;font:900 70px/1 'Archivo Black','Arial Black',sans-serif;border-radius:.12em;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.hs-squares{position:absolute;display:flex}
.hs-squares i{display:block}
.hs-band{position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(0deg,rgba(0,0,0,.78),rgba(0,0,0,.45) 55%,transparent);z-index:1}

/* efectos de texto */
.fx-sombra .hs-tx{text-shadow:0 6px 40px rgba(0,0,0,.6)}
.fx-neon .hs-tx{text-shadow:0 0 3px var(--fxc),0 0 12px var(--fxc),0 0 34px var(--fxc),0 0 80px var(--fxc)}
.fx-chroma .hs-tx{text-shadow:-6px 0 rgba(255,40,90,.85),6px 0 rgba(0,220,255,.85)}
.fx-outline .hs-tx,.fx-outline .hs-tx span{color:transparent;-webkit-text-stroke:3px var(--tc)}
.fx-holo .hs-tx,.fx-holo .hs-tx span{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-holo .hs-tx,.fx-grain .hs-tx{-webkit-mask-image:var(--grain);mask-image:var(--grain);-webkit-mask-size:220px;mask-size:220px}
.fx-holo .hs-tx{filter:drop-shadow(0 0 30px color-mix(in srgb,var(--fxc) 35%,transparent))}
/* mixto: cada letra con su propio estilo (al estilo «Creator Studio») */
.fx-mixto .hs-tx span{display:inline-block}
.fx-mixto .m1{color:var(--fxc)}
.fx-mixto .m2{color:#c08bff}
.fx-mixto .m3{color:transparent;-webkit-text-stroke:.03em #fff;outline:.035em dashed #ff3b5c;outline-offset:-.02em}
.fx-mixto .m4{color:#111;background:#ffcf2e;border-radius:50%;padding:0 .06em;line-height:.9}
.fx-mixto .m5{color:#3bff6e;background:linear-gradient(90deg,transparent 46%,#fff 46% 50%,transparent 50%) 0 0/.25em 100%,linear-gradient(0deg,transparent 46%,#fff 46% 50%,transparent 50%) 0 0/100% .25em;outline:.03em solid #fff}
.fx-mixto .m6{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;color:#b9b2ff}
.fx-mixto .m7{background:var(--holo);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx-mixto .m0{color:#fff}

/* entradas */
.a-fade .hs-tx,.a-fade .hs-ref,.a-fade .hs-sub{animation:hs-fade .9s ease both}
.a-rise .hs-tx,.a-rise .hs-ref,.a-rise .hs-sub{animation:hs-rise .9s cubic-bezier(.2,.7,.2,1) both}
.a-rise .hs-tx{animation-delay:.08s}.a-rise .hs-sub,.a-words .hs-sub,.a-letters .hs-sub{animation:hs-rise .9s .3s both}
.a-blur .hs-tx,.a-blur .hs-ref,.a-blur .hs-sub{animation:hs-blur 1.1s cubic-bezier(.2,.7,.2,1) both}
.a-scale .hs-tx{animation:hs-scale 1.3s cubic-bezier(.16,.84,.2,1) both}
.a-scale .hs-ref,.a-scale .hs-sub{animation:hs-fade 1s .4s both}
.a-words .w{display:inline-block;animation:hs-word 1s cubic-bezier(.2,.7,.2,1) both}
.a-letters .l{display:inline-block;animation:hs-letter .7s cubic-bezier(.2,.7,.2,1) both}
@keyframes hs-fade{from{opacity:0}}
@keyframes hs-fadeout{to{opacity:0}}
@keyframes hs-rise{from{opacity:0;transform:translateY(40px)}}
@keyframes hs-blur{from{opacity:0;filter:blur(24px);transform:scale(1.04)}}
@keyframes hs-scale{from{opacity:0;transform:scale(.86);letter-spacing:.2em}}
@keyframes hs-word{from{opacity:0;transform:translateY(60%) rotate(4deg);filter:blur(10px)}}
@keyframes hs-letter{from{opacity:0;transform:translateY(-40%) scale(1.4);filter:blur(6px)}}

/* transiciones entre diapositivas */
.hs-in-fade{animation:hs-fade .6s ease both}.hs-out-fade{animation:hs-fadeout .6s ease both}
.hs-in-slow{animation:hs-fade 1.4s ease both}.hs-out-slow{animation:hs-fadeout 1.4s ease both}
.hs-in-up{animation:hs-rise .7s cubic-bezier(.2,.7,.2,1) both}.hs-out-up{animation:hs-up-out .5s ease both}
.hs-in-blur{animation:hs-blur .8s ease both}.hs-out-blur{animation:hs-blur-out .6s ease both}
.hs-in-zoom{animation:hs-zoom .8s cubic-bezier(.2,.7,.2,1) both}.hs-out-zoom{animation:hs-fadeout .5s ease both}
@keyframes hs-up-out{to{opacity:0;transform:translateY(-40px)}}
@keyframes hs-blur-out{to{opacity:0;filter:blur(20px)}}
@keyframes hs-zoom{from{opacity:0;transform:scale(1.08)}}

/* decoraciones */
.hs-deco{position:absolute;inset:0;pointer-events:none;z-index:1}
.hs-ring{position:absolute}
.hs-ring svg{display:block;overflow:visible}
.hs-spin{animation:hs-spin var(--sp) linear infinite}
@keyframes hs-spin{to{transform:rotate(360deg)}}
.hs-corner{position:absolute;font:600 34px/1 'Archivo','Arial Black',sans-serif;letter-spacing:.04em;text-transform:uppercase}
.hs-tick{position:absolute;left:0;right:0;bottom:0;height:86px;display:flex;align-items:center;overflow:hidden;border-top:2px solid rgba(255,255,255,.35)}
.hs-tick span{white-space:nowrap;font:500 30px 'JetBrains Mono',monospace;letter-spacing:.3em;color:rgba(255,255,255,.85);animation:hs-marq 40s linear infinite;padding-left:40px}
@keyframes hs-marq{to{transform:translateX(-50%)}}
.hs-dc{position:absolute;display:block}
.hs-stroke{position:absolute;object-fit:contain}

.hs-still *{animation:none!important;transition:none!important}

/* caja detrás del texto */
.hs-plate{display:flex;flex-direction:column;gap:22px;align-items:inherit;justify-content:center;max-width:100%;max-height:100%;padding:var(--pp);background:var(--pc);border-radius:var(--pr);border:var(--pbw) solid var(--pbc);box-sizing:border-box}
.hs-hl{background:var(--pc);padding:.04em .3em;border-radius:var(--pr);-webkit-box-decoration-break:clone;box-decoration-break:clone;box-shadow:0 0 0 var(--pbw) var(--pbc)}
/* funciones: margen seguro, mayúsculas, logo en la esquina, barra de aviso */
.hs-si>.hs-tl{scale:var(--sf,1)}
.hs-up .hs-tx,.hs-up .hs-sub,.hs-up .hs-ref{text-transform:uppercase}
.hs-ov{position:absolute;inset:0;z-index:6;pointer-events:none}
.hs-cl{position:absolute;line-height:1}.hs-cl.tl{left:var(--mx);top:var(--my)}.hs-cl.tr{right:var(--mx);top:var(--my)}.hs-cl.bl{left:var(--mx);bottom:var(--my)}.hs-cl.br{right:var(--mx);bottom:var(--my)}
.hs-cl b{display:block;font:italic 400 1em/1 'Instrument Serif',Georgia,serif;color:#f3efe6;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.hs-cl img{display:block;width:auto;max-width:520px;object-fit:contain}
.hs-al{position:absolute;left:0;right:0;bottom:var(--sy);height:128px;display:flex;align-items:center;padding:0 var(--mx);background:rgba(8,8,9,.9);border-top:4px solid #3bff6e;animation:hs-alin .5s cubic-bezier(.2,.8,.2,1)}
.hs-al>div{flex:1;overflow:hidden;white-space:nowrap;text-align:center;font:600 52px/1 'Inter Tight',system-ui,sans-serif;color:#fff;letter-spacing:-.01em}
.hs-al.run>div{text-align:left}.hs-al.run span{display:inline-block;padding-left:100%;animation:hs-mq 22s linear infinite}
.hs-still .hs-al,.hs-still .hs-al.run span{animation:none;padding-left:0}
@keyframes hs-alin{from{transform:translateY(100%)}}
@keyframes hs-mq{to{transform:translateX(-100%)}}
.hs-blk.on~.hs-ov .hs-cl{opacity:0!important;transition:opacity .7s}
.hs-lt{position:absolute;left:var(--mx);bottom:calc(var(--sy) + 64px);display:flex;flex-direction:column;gap:12px;max-width:calc(100% - 2 * var(--mx));padding:26px 44px 28px 34px;background:rgba(8,8,9,.9);border-left:8px solid #3bff6e;border-radius:2px;box-sizing:border-box;animation:hs-ltin .7s cubic-bezier(.2,.8,.2,1) both}
.hs-lt b{font:700 62px/1.05 'Inter Tight',system-ui,sans-serif;color:#fff;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-lt span{font:500 26px/1.1 'JetBrains Mono',ui-monospace,monospace;color:#3bff6e;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-lt.up{bottom:calc(var(--sy) + 168px)}
/* con el tercio: la letra se encoge hacia arriba para que el nombre no la tape */
.hs-lton>.hs-tl{scale:calc(var(--sf,1)*.85);transform-origin:50% 6%;transition:scale .5s cubic-bezier(.2,.8,.2,1)}.hs-lton.hs-alon>.hs-tl{scale:calc(var(--sf,1)*.75)}
/* en la transmisión con letra en tercio, el nombre ocupa la franja esos segundos y la letra regresa al quitarlo */
.hs-transparent>.hs-lton>.hs-tl{scale:var(--sf,1);opacity:0;transition:opacity .35s}.hs-still .hs-lt{animation:none}
@keyframes hs-ltin{from{clip-path:inset(0 100% 0 0);transform:translateX(-24px)}to{clip-path:inset(0 0 0 0)}}
/* con aviso: la letra se encoge hacia arriba para no quedar debajo de la barra, y el logo de abajo sube */
.hs-alon>.hs-tl{scale:calc(var(--sf,1)*.85);transform-origin:50% 6%;transition:scale .5s cubic-bezier(.2,.8,.2,1)}
.hs-alon .hs-cl.bl,.hs-alon .hs-cl.br{bottom:calc(var(--my) + 128px)}
.hs-tr{display:block;margin-top:.5em;font-weight:500;letter-spacing:0;line-height:1.15}

/* ofrenda: QR y datos del banco a la derecha */
.hs-give{position:absolute;right:7%;top:50%;width:40%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:44px;animation:hs-gin .8s .15s cubic-bezier(.2,.8,.2,1) both}
.hs-qr{display:flex;align-items:center;gap:32px}.hs-qr svg{display:block;width:290px;height:290px;flex:none;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.hs-qr span{font:600 34px/1.25 'Inter Tight',system-ui,sans-serif;max-width:300px}
.hs-gls{display:grid;gap:24px}.hs-gl small{display:block;margin-bottom:8px;font:500 22px/1 'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.hs-gl b{display:block;font:700 48px/1.1 'Inter Tight',system-ui,sans-serif;letter-spacing:.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hs-give.dk{padding:44px 48px;background:rgba(6,6,7,.55);border-radius:6px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hs-still .hs-give{animation:none}
@keyframes hs-gin{from{opacity:0;transform:translateY(calc(-50% + 30px))}}