.app-ribbon{max-width:1232px;margin:24px auto 0;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;background:var(--card)}
.app-ribbon header{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--soft)}
.ribbon-dots{flex:none;white-space:nowrap;color:var(--green);font-size:9px;letter-spacing:2px}.app-ribbon button{flex:none;margin-left:auto;border:1px solid var(--line-2);background:transparent;color:var(--text);border-radius:6px;padding:5px 10px;font-size:12px}
.ribbon-viewport{--fade:72px;overflow:hidden;padding:14px 0;cursor:pointer;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent)}
.ribbon-row{overflow:hidden;margin:5px 0}.ribbon-track{display:flex;width:max-content;animation:app-ribbon-travel 65s linear infinite;animation-play-state:paused;will-change:transform;backface-visibility:hidden}.ribbon-track--reverse{animation-direction:reverse;animation-duration:72s}.app-ribbon.is-visible:not(.is-paused) .ribbon-track{animation-play-state:running}
.ribbon-track ul{display:flex;flex:none;gap:10px;margin:0;padding:0 10px 0 0;list-style:none}.ribbon-track li{flex:none;box-sizing:border-box;width:112px;height:80px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:28px auto;place-items:center;align-content:center;gap:8px;padding:0 6px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg);font-size:10px;line-height:1.2;color:var(--soft)}
.ribbon-track li>span{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ribbon-logo{flex:none;display:block;color:var(--marca)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .ribbon-logo{color:var(--marca-clara)}}
:root[data-theme="light"] .ribbon-logo{color:var(--marca-clara)}
.app-ribbon>p{margin:0;padding:10px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--soft)}
@keyframes app-ribbon-travel{to{transform:translateX(-50%)}}
@media(max-width:700px){.app-ribbon{margin:20px 18px 0}.app-ribbon header{font-size:10px;gap:7px}.ribbon-viewport{--fade:36px}.ribbon-track ul{gap:8px;padding-right:8px}.ribbon-track li{width:100px;height:74px;gap:7px}.ribbon-logo{transform:scale(.9)}}
@media(prefers-reduced-motion:reduce){.ribbon-track{animation:none!important}.ribbon-row{overflow-x:auto}.ribbon-track ul[aria-hidden]{display:none}.ribbon-viewport{cursor:default}}