/* Studio Creativo Buttons 1.0.0. Scoped styles; no framework or JavaScript. */
.scb-wrap { display: flex; width: 100%; }
.scb-wrap .scb-btn {
  --scb-bg: #11131b; --scb-text: #fff; --scb-accent: #a78bfa;
  --scb-accent-2: #38bdf8; --scb-accent-3: #fb7185; --scb-accent-4: #facc15;
  --scb-border: transparent; --scb-glow: #a78bfa66; --scb-shine: #ffffff85;
  --scb-depth: #353077; --scb-radius: 12px; --scb-border-width: 2px;
  --scb-gap: 12px; --scb-icon-size: 16px; --scb-duration: 5s; --scb-transition: 250ms;
  position: relative; isolation: isolate; display: inline-flex; align-items: center;
  justify-content: center; box-sizing: border-box; max-width: 100%; min-width: 0;
  min-height: 48px; margin: 0; padding: 14px 25px; border: var(--scb-border-width) solid var(--scb-border);
  border-radius: var(--scb-radius); background: var(--scb-bg); color: var(--scb-text);
  font-family: inherit; font-size: 16px; font-weight: 600; line-height: 1.35;
  text-align: center; text-decoration: none; vertical-align: middle;
  box-shadow: none; transform: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--scb-transition) ease, box-shadow var(--scb-transition) ease,
    color var(--scb-transition) ease, background-color var(--scb-transition) ease,
    border-color var(--scb-transition) ease;
}
.scb-wrap a.scb-btn { cursor: pointer; }
.scb-wrap .scb-btn::before, .scb-wrap .scb-btn::after { box-sizing: border-box; pointer-events: none; }
.scb-wrap .scb-btn .scb-btn__content {
  position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--scb-gap); width: 100%; min-width: 0;
}
.scb-wrap .scb-btn .scb-btn__label { min-width: 0; overflow-wrap: anywhere; }
.scb-wrap .scb-btn .scb-btn__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  font-size: var(--scb-icon-size); line-height: 1; color: inherit;
  transition: transform var(--scb-transition) ease;
}
.scb-wrap .scb-btn__icon svg { display: block; width: 1em; height: 1em; fill: currentColor; }
.scb-wrap .scb-btn__icon i { color: inherit; font-size: inherit; }
.scb-wrap .scb-btn:visited { color: var(--scb-text); }
.scb-wrap .scb-btn:is(:hover, :focus-visible) {
  color: var(--scb-hover-text, var(--scb-text)); background-color: var(--scb-hover-bg, var(--scb-bg));
  border-color: var(--scb-hover-border, var(--scb-border)); text-decoration: none;
}
.scb-wrap .scb-btn:focus-visible { outline: 3px solid var(--scb-accent); outline-offset: 5px; }

/* An animated gradient background clipped to the border with an opaque inner layer. */
.scb-wrap .scb-btn--rainbow {
  border-color: transparent;
  background: linear-gradient(var(--scb-bg), var(--scb-bg)) padding-box,
    linear-gradient(110deg, var(--scb-accent), var(--scb-accent-2), var(--scb-accent-3), var(--scb-accent-4), var(--scb-accent)) border-box;
  background-size: 100% 100%, 300% 100%;
  animation: scb-rainbow-flow var(--scb-duration) linear infinite;
}
.scb-wrap .scb-btn--rainbow:is(:hover, :focus-visible) {
  border-color: transparent;
  background-image: linear-gradient(var(--scb-hover-bg, var(--scb-bg)), var(--scb-hover-bg, var(--scb-bg))),
    linear-gradient(110deg, var(--scb-accent), var(--scb-accent-2), var(--scb-accent-3), var(--scb-accent-4), var(--scb-accent));
  box-shadow: 0 0 24px var(--scb-glow);
}
.scb-wrap .scb-btn--gradient {
  --scb-bg: #7c3aed; --scb-accent: #7c3aed; --scb-accent-2: #0891b2;
  background-image: linear-gradient(110deg, var(--scb-bg), var(--scb-accent-2), var(--scb-accent), var(--scb-bg));
  background-size: 300% 100%; animation: scb-gradient-flow var(--scb-duration) ease infinite;
}
.scb-wrap .scb-btn--gradient:is(:hover, :focus-visible) {
  background-image: linear-gradient(110deg, var(--scb-hover-bg, var(--scb-bg)), var(--scb-accent-2), var(--scb-accent), var(--scb-hover-bg, var(--scb-bg)));
}
.scb-wrap .scb-btn--neon {
  --scb-bg: #07191b; --scb-text: #67e8f9; --scb-accent: #22d3ee;
  --scb-border: var(--scb-accent); --scb-glow: #22d3ee66;
  box-shadow: 0 0 10px var(--scb-glow), inset 0 0 10px var(--scb-glow);
}
.scb-wrap .scb-btn--neon:is(:hover, :focus-visible) { box-shadow: 0 0 26px var(--scb-glow), inset 0 0 15px var(--scb-glow); }
.scb-wrap .scb-btn--shine { --scb-bg: #e9d3ad; --scb-text: #302214; --scb-accent: #a47736; overflow: hidden; }
.scb-wrap .scb-btn--shine::after {
  content: ''; position: absolute; inset: -30% -60%; z-index: 1;
  background: linear-gradient(110deg, transparent 42%, var(--scb-shine) 50%, transparent 58%);
  transform: translateX(-65%); transition: transform 650ms ease;
}
.scb-wrap .scb-btn--shine:is(:hover, :focus-visible)::after { transform: translateX(65%); }
.scb-wrap .scb-btn--slide { --scb-bg: #142b24; --scb-accent: #b9ed80; --scb-hover-text: #142b24; overflow: hidden; }
.scb-wrap .scb-btn--slide::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: var(--scb-hover-bg, var(--scb-accent));
  transform: translateX(-101%); transition: transform var(--scb-transition) ease;
}
.scb-wrap .scb-btn--slide:is(:hover, :focus-visible) { background-color: var(--scb-bg); }
.scb-wrap .scb-btn--slide:is(:hover, :focus-visible)::before { transform: translateX(0); }
.scb-wrap .scb-btn--outline {
  --scb-bg: transparent; --scb-accent: #a78bfa; --scb-border: var(--scb-accent);
  --scb-text: var(--scb-accent); --scb-hover-bg: var(--scb-accent); --scb-hover-text: #161020;
}
.scb-wrap .scb-btn--depth { --scb-bg: #a5b4fc; --scb-text: #1e1b4b; --scb-accent: #818cf8; box-shadow: 0 6px 0 var(--scb-depth); }
.scb-wrap .scb-btn--depth:active { box-shadow: 0 1px 0 var(--scb-depth); transform: translateY(5px); }
.scb-wrap .scb-btn--minimal { --scb-bg: transparent; --scb-text: #e2e8f0; --scb-accent: #e2e8f0; --scb-radius: 0px; }
.scb-wrap .scb-btn--minimal::after {
  content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--scb-accent); transform: scaleX(0.15); transform-origin: left;
  transition: transform var(--scb-transition) ease;
}
.scb-wrap .scb-btn--minimal:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.scb-wrap .scb-motion--hover { animation-play-state: paused; }
.scb-wrap .scb-motion--hover:is(:hover, :focus-visible) { animation-play-state: running; }
.scb-wrap .scb-motion--off { animation: none; }
.scb-wrap .scb-hover--lift:is(:hover, :focus-visible) { transform: translateY(-3px); }
.scb-wrap .scb-hover--grow:is(:hover, :focus-visible) { transform: scale(1.025); }
.scb-wrap .scb-hover--press:is(:hover, :focus-visible) { transform: translateY(2px); }
.scb-wrap .scb-icon-motion:is(:hover, :focus-visible) .scb-btn__icon { transform: translateX(3px); }
.scb-wrap .scb-btn--depth:active { transform: translateY(5px); }
@keyframes scb-rainbow-flow { 0%, 100% { background-position: 0 0, 0% 50%; } 50% { background-position: 0 0, 100% 50%; } }
@keyframes scb-gradient-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
/* Touch devices retain color feedback without sticky hover transforms. */
@media (hover: none) {
  .scb-wrap .scb-btn:is(:hover, :focus-visible), .scb-wrap .scb-icon-motion:is(:hover, :focus-visible) .scb-btn__icon { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .scb-wrap .scb-btn, .scb-wrap .scb-btn::before, .scb-wrap .scb-btn::after, .scb-wrap .scb-btn .scb-btn__icon {
    animation: none !important; transition: none !important; transform: none !important;
  }
  .scb-wrap .scb-btn--slide::before { transform: translateX(-101%) !important; }
  .scb-wrap .scb-btn--slide:is(:hover, :focus-visible)::before { transform: none !important; }
  .scb-wrap .scb-btn--shine::after { display: none; }
}