/* Banner do editor novo (estilo Canva): duas pranchetas com posições livres.
   Computador: 1440 × 346 · Celular: 390 × 430 (usada até 1100px de largura, para as letras não ficarem pequenas em tablets).
   Cada prancheta aumenta e diminui por inteiro: 1 "px da prancheta" = --k. */
.cbx, .cbx *, .cbx *::before, .cbx *::after { box-sizing: border-box; }
.cbx {
  position: relative; overflow: hidden; isolation: isolate; container-type: inline-size; width: 100%;
  background: var(--cbx-bg, #1e2a44); font-family: Inter, system-ui, sans-serif; font-size: 16px; line-height: 1.5;
}
/* Fundo: ocupa a largura toda (no ultra wide a arte fica no centro, no tamanho de 1440) */
.cbx__bgimg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; object-fit: cover;
  object-position: var(--cbx-x, 50%) var(--cbx-y, 50%); transform: scale(var(--cbx-zoom, 1)); transform-origin: var(--cbx-x, 50%) var(--cbx-y, 50%);
  user-select: none; -webkit-user-drag: none; }
.cbx__shade { position: absolute; inset: 0; z-index: -2; background: var(--cbx-bg, #1e2a44); opacity: var(--cbx-ov, .55); }
.cbx__glow { position: absolute; z-index: -1; width: 80%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--cbx-glow, #1ac6fb), transparent); opacity: .32; pointer-events: none; }

.cbx__art { position: relative; margin: 0 auto; container-type: inline-size; }
.cbx__art--d { width: min(100%, 1440px); aspect-ratio: 1440 / 346; }
.cbx__art--m { display: none; width: min(100%, 480px); aspect-ratio: 390 / 430; }
.cbx__art--d > * { --k: calc(100cqw / 1440); }
.cbx__art--m > * { --k: calc(100cqw / 390); }
@container (max-width: 1100px) {
  .cbx__art--d { display: none; }
  .cbx__art--m { display: block; }
}

/* Elementos: posição e tamanho em "px da prancheta" (variáveis --x, --y, --w, --h, --fs) */
.cbx-el { position: absolute; left: calc(var(--x) * var(--k)); top: calc(var(--y) * var(--k)); margin: 0; }
.cbx-t { width: calc(var(--w) * var(--k)); font-size: calc(var(--fs) * var(--k)); overflow-wrap: anywhere; white-space: normal; }
.cbx-i { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); object-fit: contain; display: block; user-select: none; -webkit-user-drag: none; }
/* Botão: largura e arredondamento livres (--w e --br em px da prancheta) */
.cbx-b { display: block; text-decoration: none; width: calc(var(--w) * var(--k)); }
.cbx-b .cb__btn { display: flex; width: 100%; margin: 0; font-size: calc(var(--fs) * var(--k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-radius: calc(var(--br, 6) * var(--k)); }
/* Marca-texto: cor atrás de cada linha do texto */
.cbx-tx[style*="--hl"] { background: var(--hl); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .12em; }

/* Imagem de fundo ("Preencher o fundo"): cobre o banner todo, atrás de tudo; arrastar enquadra, zoom aproxima */
.cbx-fill { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3; object-fit: cover; display: block;
  object-position: var(--fx, 50%) var(--fy, 50%); transform: scale(var(--fz, 1)); transform-origin: var(--fx, 50%) var(--fy, 50%); user-select: none; -webkit-user-drag: none; }

/* Formas e degradês: tamanho livre (--w × --h) e cantos (--sr) */
.cbx-s { width: calc(var(--w) * var(--k)); height: calc(var(--h) * var(--k)); border-radius: calc(var(--sr, 0) * var(--k)); }
.cbx-s[style*="--sbw"] { border: max(1px, calc(var(--sbw) * var(--k))) solid var(--sbc); }
/* Camadas de fundo que cobrem o banner todo: no site ocupam a faixa inteira (texturas na escala da arte) */
.cbx-full { position: absolute; inset: 0; z-index: -1; pointer-events: none; --k: calc(min(100cqw, 1440px) / 1440); }
@container (max-width: 1100px) { .cbx-full { --k: calc(min(100cqw, 480px) / 390); } }

/* Botões com estilo próprio (modelos de Elementos) */
.cbx-b--m .cb__btn { background: var(--bb); color: var(--bf); border: calc(var(--bbw, 0) * 1px) solid var(--bbc, transparent); box-shadow: var(--bsh, none);
  text-transform: var(--btt, none); letter-spacing: var(--bls, 0); font-weight: var(--bfw, 600); gap: .5em; }
.cbx-b--m .cb__btn:hover { box-shadow: var(--bsh, none); filter: brightness(1.12); transform: translateY(-2px); }
.cbx-b--arrow .cb__btn::after { content: "→"; transition: transform .18s ease; }
.cbx-b--arrow .cb__btn:hover::after { transform: translateX(3px); }
.cbx-b--link .cb__btn { background: none; border: 0; box-shadow: none; padding-inline: 0; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }