.background-toolbar{max-width:1600px;margin:0 auto;display:flex;padding:0 var(--gutter);gap:20px;align-items:stretch}.background-toolbar button{font:inherit;color:inherit;cursor:pointer;background:white}.sequence-button{position:relative;display:grid;grid-template-columns:28px 1fr;column-gap:10px;text-align:left;align-content:center;border:1px solid #c8d8df;padding:15px 21px;min-width:199px}.sequence-button[aria-pressed=true]{background:#222;border-color:#222;color:#fff}.sequence-button strong{font-size:13px;font-weight:500}.sequence-button small{grid-column:2;font-size:10px;margin-top:4px;opacity:.7}.sequence-icon{grid-row:span 2;font-size:29px;line-height:1.2;align-self:center}.background-options{display:grid;grid-template-columns:repeat(4,1fr);flex:1;border:1px solid #d7e2e7}.background-options button{position:relative;border:0;border-right:1px solid #d7e2e7;padding:16px 16px;display:flex;align-items:center;gap:12px;font-size:12px;transition:background .2s}.background-options button:last-child{border-right:0}.background-options button[data-current=true]{background:#edf6f9}.background-options button[aria-pressed=true]{box-shadow:inset 0 -3px #349cc4}.background-options button:hover{background:#edf6f9}.sample{width:27px;height:32px;display:block;flex-shrink:0;transform:rotate(-7deg)}.sample-0{background:repeating-linear-gradient(0deg,#349cc4 0 2px,#222 2px 4px)}.sample-1{background:radial-gradient(#222 1px,#fff 1px);background-size:4px 4px;border:1px solid #222}.sample-2{background:repeating-linear-gradient(90deg,#222 0 1px,transparent 1px 3px),#c4e3ee;clip-path:polygon(0 18%,50% 0,100% 18%,100% 100%,0 100%)}.sample-3{background:radial-gradient(#349cc4 1.6px,transparent 2px);background-size:7px 7px}.cycle-track{height:2px;position:absolute;left:0;right:0;bottom:0;background:#d9ebf2;overflow:hidden}.cycle-track i{display:block;height:100%;background:#349cc4;transform-origin:left;animation:cycle 6.5s linear forwards}@keyframes cycle{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.backgrounds-stage .bg-scene{position:absolute;inset:0;z-index:1;opacity:0;visibility:hidden;transform:translateY(7px);transition:opacity .6s,transform .6s cubic-bezier(.16,1,.3,1),visibility .6s;pointer-events:none}.backgrounds-stage .bg-scene[data-active=true]{opacity:1;visibility:visible;transform:translateY(0)}.bg-scene>div,.bg-scene>svg,.bg-scene>span{position:absolute}.bg-scene svg{display:block;width:100%;height:100%}.bg-scene *{animation-play-state:paused!important}.backgrounds-stage[data-running=true] .bg-scene[data-active=true] *{animation-play-state:running!important}.backgrounds-stage .floating-a{animation:float-a 9s ease-in-out infinite}.backgrounds-stage .floating-b{animation:float-b 11s ease-in-out infinite}.backgrounds-stage .floating-c{animation:float-c 13s ease-in-out infinite}
@keyframes float-a{0%,100%{translate:0 0}50%{translate:4px -13px}}@keyframes float-b{0%,100%{translate:0 0}50%{translate:-6px 12px}}@keyframes float-c{0%,100%{translate:0 0}50%{translate:8px -7px}}
/* Código / azul y negro, con interferencia breve y localizada. */
.tech-binary{left:3%;top:8%;width:36%;height:61%;background:#222;overflow:hidden;transform:rotate(-12deg);color:#99d5ea;padding:7% 4%}.tech-binary>div{font-family:ui-monospace,monospace;font-size:clamp(10px,1.16vw,18px);line-height:1.53;white-space:nowrap;letter-spacing:.035em;animation:binary-flow 9s linear infinite}.tech-binary span{display:block}.tech-binary span:nth-child(3n){color:#349cc4}.tech-binary span:nth-child(5n){color:#fff;transform:translateX(5px)}@keyframes binary-flow{to{transform:translateY(-92px)}}.code-disc{right:3%;top:6%;width:31%;aspect-ratio:1;border-radius:50%;background:#c4e3ee;color:#222;overflow:hidden;transform:rotate(13deg)}.code-disc>span{position:absolute;left:17%;top:8%;font-size:clamp(38px,6.5vw,96px);font-family:ui-monospace,monospace;line-height:.94;letter-spacing:-.06em;font-weight:700}.scan-line{position:absolute;top:28%;height:8%;width:100%;background:repeating-linear-gradient(90deg,#222 0 9%,transparent 9% 15%);animation:glitch-strip 6.5s steps(1) infinite}.tech-glitch{left:0;right:0;top:38%;height:28%;color:#349cc4}.tech-glitch i{position:absolute;height:7px;background:currentColor;width:22%;animation:glitch-strip 6.5s steps(1) infinite}.tech-glitch i:nth-child(1){left:0;top:3%}.tech-glitch i:nth-child(2){right:2%;top:7%;width:15%;background:#222;animation-delay:.1s}.tech-glitch i:nth-child(3){right:0;top:35%;width:12%;animation-delay:.15s}.tech-glitch i:nth-child(4){left:5%;top:51%;width:13%;animation-delay:.2s}@keyframes glitch-strip{0%,64%,74%,100%{opacity:0;transform:translateX(0)}65%,70%{opacity:1;transform:translateX(-7px)}68%,72%{opacity:.7;transform:translateX(7px)}}.signal-strip{right:0;bottom:13%;width:33%;height:16%;background:#349cc4;transform:rotate(7deg);overflow:hidden;border-radius:0 70px 70px 0}.signal-strip>span{font:700 clamp(17px,2.3vw,32px)/1 ui-monospace,monospace;white-space:nowrap;position:absolute;top:32%;left:8%;color:#222}.pixel-fragment{left:3%;bottom:4%;width:33%;aspect-ratio:1;color:#222;transform:rotate(-25deg)}
/* Semitonos / fotografía BEOS y gráficos de puntos. */
.portrait-print{left:3%;top:5%;width:36%;height:64%;transform:rotate(-12deg);background:#eef3f4;overflow:hidden}.portrait-print img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;filter:grayscale(1) contrast(1.75)}.portrait-print>div{position:absolute;inset:0;background:radial-gradient(#000 .65px,transparent .85px);background-size:3px 3px;mix-blend-mode:multiply;opacity:.7}.dot-print{right:3%;top:4%;width:32%;height:45%;transform:rotate(11deg);background:#fff;overflow:hidden}.checker-disc{left:5%;bottom:3%;width:31%;aspect-ratio:1;border-radius:50%;background:conic-gradient(#222 25%,white 0 50%,#222 0 75%,white 0);background-size:18px 18px;transform:rotate(15deg)}.print-ribbon{right:0;bottom:16%;width:40%;height:15%;background:#c4e3ee;transform:rotate(-5deg);clip-path:polygon(0 7%,100% 0,96% 18%,100% 30%,95% 46%,100% 65%,96% 80%,100% 93%,0 100%)}.print-pixel{right:0;top:6%;width:42%;height:43%;color:#349cc4;opacity:0;animation:pixel-appear 6.5s steps(1) infinite}@keyframes pixel-appear{0%,35%,58%,100%{opacity:0}36%,48%{opacity:1}43%,52%{opacity:.35;translate:5px 0}}
/* Comercio / etiqueta, packaging y código de barras, sin recibo. */
.product-tag{left:2%;top:6%;width:33%;height:70%;background:#c4e3ee;transform:rotate(-13deg);clip-path:polygon(0 9%,50% 0,100% 9%,100% 100%,0 100%);padding:15% 5% 3%;color:#222}.tag-hole{position:absolute;width:12px;height:12px;border-radius:50%;background:#fff;top:8%;left:calc(50% - 6px)}.tag-name{position:absolute;left:16%;top:20%;font-size:clamp(26px,4.1vw,62px);line-height:1;font-weight:700;letter-spacing:-.05em}.tag-name small{display:block;max-width:75%;margin-top:15px;font-size:9px;letter-spacing:.07em;line-height:1.5;font-weight:400}.product-tag>svg{position:absolute;left:16%;width:68%;height:20%;bottom:13%}.tag-bottom{position:absolute;left:16%;bottom:7%;font-size:8px;letter-spacing:.04em;max-width:70%;line-height:1.4}.shopping-bag{right:3%;top:10%;width:31%;height:38%;background:#349cc4;transform:rotate(12deg);color:#222}.shopping-bag>svg{width:60%;height:70%;position:absolute;left:20%;top:15%}.bag-handle{position:absolute;width:47%;height:32%;border:3px solid #222;border-bottom:0;border-radius:60px 60px 0 0;top:-17%;left:26%}.barcode-disc{right:0;bottom:9%;width:27%;aspect-ratio:1;border-radius:50%;background:#222;color:white;overflow:hidden;transform:rotate(15deg)}.barcode-disc>svg{position:absolute;left:-10%;top:14%;width:140%;height:76%;transform:rotate(-15deg)}.packaging-strip{left:1%;bottom:5%;width:39%;height:18%;background:repeating-linear-gradient(90deg,#349cc4 0 1px,#e7f4f9 1px 7px);transform:rotate(-10deg)}.commerce-spark{right:0;top:1%;width:12%;aspect-ratio:1;background:#c4e3ee;clip-path:polygon(50% 0,60% 38%,100% 50%,60% 62%,50% 100%,40% 62%,0 50%,40% 38%);font-size:0;animation:spark-turn 13s linear infinite}@keyframes spark-turn{to{rotate:180deg}}
/* Partículas / textura y ráfagas localizadas. */
.particle-surface{left:2%;top:8%;width:34%;height:50%;transform:rotate(-11deg);overflow:hidden;background:#fff}.particle-surface>svg{transform:scale(1.3)}.particle-orbit{right:4%;top:6%;width:32%;aspect-ratio:1;border-radius:50%;background:#c4e3ee;overflow:hidden}.particle-orbit span{position:absolute;inset:12%;border:1px solid #349cc4;border-radius:50%;transform:scaleX(.45) rotate(35deg)}.particle-orbit span:nth-child(2){transform:scaleX(.65) rotate(-35deg);inset:17%}.particle-orbit span:nth-child(3){transform:scaleY(.6) rotate(55deg);inset:7%}.particle-ribbon{right:0;bottom:14%;width:40%;height:15%;border-radius:70px;background:#349cc4;transform:rotate(8deg)}.big-spark{position:absolute;left:4%;bottom:8%;width:24%!important;height:24%!important;color:#222;animation:spark-turn 16s linear infinite}.particle-grid{right:0;top:39%;width:23%;height:50%;background:radial-gradient(#222 1px,transparent 1.5px);background-size:9px 9px;transform:rotate(12deg);mask-image:linear-gradient(#000,transparent)}.back-particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}.back-particles i{position:absolute;display:block;width:5px;height:5px;background:#349cc4;opacity:0}.back-particles .particle-dot{border-radius:50%}.back-particles .particle-square{width:7px;height:7px;background:#222}.back-particles .particle-cross{width:15px;height:15px;background:#349cc4;clip-path:polygon(42% 0,58% 0,58% 42%,100% 42%,100% 58%,58% 58%,58% 100%,42% 100%,42% 58%,0 58%,0 42%,42% 42%)}.accent-particles{opacity:.65}
@media(max-width:1050px){.background-toolbar{gap:12px}.sequence-button{min-width:162px;padding:12px 14px}.background-options button{gap:8px;padding:13px 9px;font-size:11px}.sample{width:20px;height:28px}.tag-name small{font-size:7px}.tag-bottom{font-size:6px}}
@media(max-width:720px){.background-toolbar{display:block;padding:0 16px}.sequence-button{min-width:0;width:100%;grid-template-columns:24px auto 1fr;align-items:center;gap:9px;padding:11px 14px}.sequence-icon{grid-row:auto;line-height:1;font-size:24px}.sequence-button small{grid-column:auto;text-align:right;margin:0}.sequence-button strong{font-size:12px}.background-options{margin-top:9px}.background-options button{display:flex;flex-direction:column;gap:8px;padding:12px 3px;font-size:10px}.sample{width:20px;height:25px}.tech-binary>div{font-size:10px;line-height:1.45}.code-disc>span{font-size:50px}.signal-strip>span{font-size:17px}.tag-name{font-size:31px}.tag-name small{font-size:6px;margin-top:9px}.tag-bottom{font-size:5px}.tag-hole{width:8px;height:8px;left:calc(50% - 4px)}.bag-handle{border-width:2px}.back-particles i{width:3px;height:3px}.back-particles .particle-square{width:4px;height:4px}.back-particles .particle-cross{width:9px;height:9px}.checker-disc{background-size:12px 12px}.backgrounds-stage{margin-top:6px}.back-particles{overflow:hidden;inset:-3%}}
@media(max-width:360px){.background-options button{font-size:9px}.code-disc>span{font-size:40px}.tag-name{font-size:26px}.tech-binary>div{font-size:8px}}
@media(prefers-reduced-motion:reduce){.bg-scene *{animation:none!important}.bg-scene{transition:opacity .15s!important}.cycle-track i{animation:none!important}}