/* Banner montado no editor do painel — usado no site e na prévia do painel.
   Os tamanhos usam a largura do próprio banner (cqw), então a prévia fica igual ao site.
   --u = 1% da largura, mas só até 1440px: em telas muito largas (ultra wide) o conteúdo para de crescer
   e fica igual ao de 1440px, já que a altura do banner também tem limite. */
.cb {
  position: relative; overflow: hidden; isolation: isolate; container-type: inline-size;
  display: flex; align-items: center; width: 100%; height: 100%;
  --u: min(1cqw, 14.4px);
  min-height: var(--banner-h, clamp(270px, 24vw, 370px));
  background: var(--cb-bg, #1e2a44); font-family: var(--cb-font, Inter, system-ui, sans-serif);
  font-size: 16px; line-height: 1.5; /* base própria: igual no site e no editor, sem herdar da página */
}
.cb, .cb *, .cb *::before, .cb *::after { box-sizing: border-box; } /* não depende do CSS da página */
.cb__bg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -3;
  object-fit: cover; object-position: var(--cb-x, 50%) var(--cb-y, 50%);
  transform: scale(var(--cb-zoom, 1)); transform-origin: var(--cb-x, 50%) var(--cb-y, 50%);
  user-select: none; -webkit-user-drag: none;
}
.cb__shade { position: absolute; inset: 0; z-index: -2; background: var(--cb-bg, #1e2a44); opacity: var(--cb-ov, .55); }
.cb__glow { display: none; position: absolute; z-index: -1; width: 80cqw; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--cb-glow, #1ac6fb), transparent); opacity: .32; pointer-events: none; }
.cb--glow .cb__glow { display: block; }
.cb--left.cb--glow .cb__glow { left: 72%; }
.cb--right.cb--glow .cb__glow { left: 28%; }

/* Conteúdo dentro da largura do site (não encosta nas bordas) */
.cb__wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: calc(1.9 * var(--u)) calc(6 * var(--u)); display: flex; align-self: stretch; align-items: stretch; }
/* Posição livre do texto: espaçadores dividem o espaço que sobra (--cb-tx e --cb-ty vão de 0 a 1).
   O texto só anda dentro da área livre, então nunca sai do banner nem cobre a imagem ao lado. */
.cb__sp { flex: var(--cb-tx, .5) 1 0; min-width: 0; min-height: 0; }
.cb__wrap > .cb__sp ~ .cb__sp { flex-grow: calc(1 - var(--cb-tx, .5)); }
.cb__sp--end { display: none; } /* só usado no celular */
.cb__pos > .cb__sp { flex-grow: var(--cb-ty, .5); }
.cb__pos > .cb__sp ~ .cb__sp { flex-grow: calc(1 - var(--cb-ty, .5)); }
.cb__pos { display: flex; flex-direction: column; flex: 0 1 auto; min-width: 0; max-width: 640px; }
.cb--center .cb__pos { max-width: 820px; }
.cb__in { display: flex; flex-direction: column; gap: calc(.45 * var(--u)); min-width: 0; }
.cb--center .cb__in { align-items: center; text-align: center; }
.cb--left .cb__in { align-items: flex-start; text-align: left; }
.cb--right .cb__in { align-items: flex-end; text-align: right; }

.cb__logo {
  /* A caixa da logo ocupa a largura da coluna de texto; a imagem se move dentro dela (nunca sai do banner) */
  display: block; order: -3; align-self: stretch; width: 100%; max-width: 100%;
  height: min(calc(clamp(52px, 4.4cqw, 68px) * var(--cb-ls, 1)), 160px);
  object-fit: contain; object-position: clamp(0%, calc(var(--cb-lbase, 50%) + var(--cb-lx, 0) * 2.5%), 100%) 50%;
  margin: clamp(calc(-1.6 * var(--u)), calc(var(--cb-ly, 0) * var(--u)), calc(4 * var(--u))) 0 calc(.2 * var(--u));
  user-select: none; -webkit-user-drag: none;
}
.cb--left { --cb-lbase: 0%; }
.cb--right { --cb-lbase: 100%; }

.cb__eyebrow { order: -2; margin: 0 0 -.2cqw; color: var(--cb-eyebrow, #fff); font-family: Inter, system-ui, sans-serif; font-weight: 600; font-size: clamp(.78rem, .95cqw, .95rem); letter-spacing: .14em; text-transform: uppercase; opacity: .92; }
.cb__title { margin: 0; max-width: min(22ch, 100%); color: var(--cb-title, #fff); font-family: inherit; font-weight: var(--cb-tw, 700); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; overflow-wrap: anywhere; }
.cb--t-data .cb__title { max-width: min(30ch, 100%); }
/* Palavras muito longas quebram em vez de sair do banner */
.cb__eyebrow, .cb__hl, .cb__text, .cb__btn { overflow-wrap: anywhere; max-width: 100%; }
.cb__hl { margin: 0; color: var(--cb-hl, #fde68a); font-weight: 700; line-height: 1.2; }
.cb__text { margin: 0; color: var(--cb-text, #e5e7eb); line-height: 1.35; max-width: 60ch; text-wrap: pretty; }
.cb__btn {
  display: inline-flex; align-items: center; justify-content: center; margin-top: calc(.5 * var(--u));
  background: var(--cb-btn, #1a5fc4); color: var(--cb-btn-text, #fff); text-decoration: none; font-weight: 600;
  border-radius: 6px; padding: .65em 1.2em; font-family: Inter, system-ui, sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 0 0 transparent;
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}
.cb__btn:hover {
  filter: brightness(1.2) saturate(1.08); transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25), 0 10px 26px -8px var(--cb-btn, #1a5fc4), 0 0 0 4px rgba(255, 255, 255, .14);
}
.cb__btn:active { transform: translateY(0); filter: brightness(1.05); }
.cb__btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .cb__btn, .cb__btn:hover { transform: none; } }

/* Modelos de botão: mudam só o formato. Cores: "Botão" e "Letra do botão" do bloco Cor;
   nos modelos sem fundo (contorno, suave, só texto) o texto usa a cor do título, que sempre contrasta com o fundo. */
.cb--b-pilula .cb__btn, .cb--b-contorno_pilula .cb__btn { border-radius: 999px; padding-inline: 1.45em; }
.cb--b-reto .cb__btn { border-radius: 0; }
.cb--b-contorno .cb__btn, .cb--b-contorno_pilula .cb__btn { background: transparent; color: var(--cb-title, #fff); box-shadow: inset 0 0 0 2px var(--cb-btn, #1a5fc4); }
.cb--b-contorno .cb__btn:hover, .cb--b-contorno_pilula .cb__btn:hover { background: var(--cb-btn, #1a5fc4); color: var(--cb-btn-text, #fff); filter: none; }
.cb--b-suave .cb__btn { background: color-mix(in srgb, var(--cb-btn, #1a5fc4) 22%, transparent); color: var(--cb-title, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cb-btn, #1a5fc4) 55%, transparent); }
.cb--b-suave .cb__btn:hover { background: color-mix(in srgb, var(--cb-btn, #1a5fc4) 38%, transparent); filter: none; }
.cb--b-sombra .cb__btn { box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25); }
.cb--b-seta .cb__btn::after { content: "→"; margin-left: .55em; transition: transform .18s ease; }
.cb--b-seta .cb__btn:hover::after { transform: translateX(4px); }
.cb--b-link .cb__btn { background: none; box-shadow: none; padding: .3em 0; border-radius: 0; color: var(--cb-title, #fff);
  text-decoration: underline; text-decoration-color: var(--cb-btn, #1a5fc4); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.cb--b-link .cb__btn::after { content: "›"; margin-left: .4em; font-size: 1.2em; line-height: 1; }
.cb--b-link .cb__btn:hover { filter: none; transform: none; box-shadow: none; text-decoration-thickness: 3px; }
/* Tamanhos do botão */
.cb--bs-s { --cb-bsz: .86; }
.cb--bs-l { --cb-bsz: 1.18; }
.cb--bs-xl { --cb-bsz: 1.38; }

/* Estilos de texto */
.cb--t-data .cb__hl { order: -1; font-size: clamp(1.5rem, 2.5cqw, 2.4rem) !important; font-weight: 800; letter-spacing: -.01em; line-height: 1.05; }
.cb--t-data .cb__title { font-size: clamp(1.2rem, 1.9cqw, 1.8rem) !important; }
.cb--t-impacto .cb__title { text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; }
.cb--t-impacto .cb__hl { text-transform: uppercase; letter-spacing: .08em; }
.cb--t-elegante .cb__title { letter-spacing: .02em; }
.cb--t-elegante .cb__hl { font-weight: 500; font-style: italic; }
/* Minimalista: título grande e firme, linhas curtas, tudo o mais discreto */
.cb--t-minimal .cb__in { gap: calc(.35 * var(--u)); }
.cb--t-minimal .cb__eyebrow { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: clamp(.95rem, 1.2cqw, 1.15rem); opacity: 1; margin: 0; }
.cb--t-minimal .cb__title { letter-spacing: -.03em; line-height: 1.02; max-width: min(18ch, 100%); }
.cb--t-minimal .cb__hl { font-weight: 400; letter-spacing: -.005em; }
.cb--t-minimal .cb__text { opacity: .85; }
.cb--t-minimal .cb__btn { margin-top: calc(.9 * var(--u)); }
.cb--left { --cb-self: flex-start; }
.cb--right { --cb-self: flex-end; }

/* Imagem ao lado do texto (ex.: tela de um app) */
/* Área da imagem: do lado do texto até a borda do banner (inclusive a margem lateral do site),
   e cresce quando a imagem é aumentada (até 62%). A imagem anda livremente dentro dela. */
.cb__side {
  --ext: calc(6 * var(--u) + max(0px, (100cqw - 1180px) / 2)); /* margem lateral até a borda do banner */
  flex: 0 0 calc(clamp(42%, calc(42% * var(--cb-ss, 1)), 62%) + var(--ext)); align-self: stretch; position: relative;
  margin: 0 calc(-1 * var(--ext)) 0 calc(4 * var(--u));
}
.cb--right .cb__side { order: -1; margin: 0 calc(4 * var(--u)) 0 calc(-1 * var(--ext)); }
/* "Inverter lados": imagem do lado oposto ao que o alinhamento daria */
.cb--side-flip .cb__side { order: -1; margin: 0 calc(4 * var(--u)) 0 calc(-1 * var(--ext)); }
.cb--right.cb--side-flip .cb__side { order: 0; margin: 0 calc(-1 * var(--ext)) 0 calc(4 * var(--u)); }
/* Fora do fluxo (não muda a altura do banner) e sempre dentro da sua área: nunca cobre o texto nem sai do banner.
   --cb-sr = proporção da imagem (largura/altura); --sw = largura da imagem, limitada à largura da área.
   Horizontal: a imagem anda pelo espaço que sobra na área (margem = sobra × posição de 0 a 1). */
.cb__side img {
  --sw: min(100%, calc(19 * var(--u) * var(--cb-ss, 1) * var(--cb-sr, 1.5)));
  position: absolute; left: 0; bottom: min(calc(var(--cb-sy, 0) * var(--u)), calc(100% - min(100%, calc(19 * var(--u) * var(--cb-ss, 1)))));
  display: block; width: var(--sw); height: auto; aspect-ratio: var(--cb-sr, 1.5); max-height: 100%;
  margin-left: calc((100% - var(--sw)) * (var(--cb-sx, 0) + 40) / 80);
  object-fit: contain; object-position: 50% 100%;
  user-select: none; -webkit-user-drag: none;
}
/* Com imagem ao lado: ela encosta na base do banner; o texto continua centralizado na altura */
.cb--has-side .cb__wrap { padding-bottom: 0; }
.cb--has-side .cb__pos { padding-bottom: calc(1.9 * var(--u)); }

[hidden].cb__logo, [hidden].cb__eyebrow, [hidden].cb__title, [hidden].cb__hl, [hidden].cb__text, [hidden].cb__btn, [hidden].cb__side { display: none; }

/* Tamanhos de texto (proporcionais à largura do banner, com mínimo legível no celular) */
.cb--s .cb__title { font-size: clamp(1.35rem, 2.1cqw, 2rem); }
.cb--m .cb__title { font-size: clamp(1.5rem, 2.5cqw, 2.4rem); }
.cb--l .cb__title { font-size: clamp(1.7rem, 3.1cqw, 3rem); }
.cb--s .cb__hl { font-size: clamp(1.05rem, 1.3cqw, 1.25rem); }
.cb--m .cb__hl { font-size: clamp(1.1rem, 1.5cqw, 1.45rem); }
.cb--l .cb__hl { font-size: clamp(1.2rem, 1.8cqw, 1.7rem); }
.cb--s .cb__text { font-size: clamp(.95rem, 1.05cqw, 1.05rem); }
.cb--m .cb__text { font-size: clamp(1rem, 1.15cqw, 1.15rem); }
.cb--l .cb__text { font-size: clamp(1.05rem, 1.35cqw, 1.3rem); }
.cb__btn { font-size: calc(clamp(.92rem, 1.05cqw, 1rem) * var(--cb-bsz, 1)); }

/* Celular: tudo centralizado; imagem lateral desce para baixo do texto */
@container (max-width: 700px) {
  .cb .cb__wrap { flex-direction: column; justify-content: flex-start; padding: 28px 50px 34px; gap: 0; --msy-eff: 1; }
  /* No celular o texto fica sempre centralizado (posição livre vale do tablet para cima) */
  .cb .cb__sp { display: none; }
  .cb .cb__pos { max-width: none; padding-bottom: 0; flex: none; }
  .cb .cb__in { align-items: center; text-align: center; max-width: none; margin: 0; gap: 6px; border: 0; padding-left: 0; }
  .cb { --cb-self: center; }
  .cb--glow .cb__glow { left: 50%; top: 80%; width: 140cqw; }
  /* Imagem ao lado: desce para baixo do texto. Ajustes próprios do celular:
     --cb-mss tamanho, --cb-msx horizontal, --cb-msy altura (0 = logo abaixo do texto, 1 = encostada embaixo) */
  .cb__side, .cb--right .cb__side { order: 0; flex: none; width: 100%; margin: 16px 0 0; display: flex; justify-content: flex-start; }
  .cb--has-side .cb__wrap { padding-bottom: 0; --msy-eff: var(--cb-msy, 1); }
  .cb--side-flip .cb__side, .cb--right.cb--side-flip .cb__side { order: 0; margin: 16px 0 0; } /* "inverter lados" vale só no computador */
  /* Espaço livre na altura: --cb-mty vai para cima do texto; o resto fica entre o texto e a imagem (--cb-msy) e embaixo dela */
  .cb .cb__wrap > .cb__sp--a { display: block; flex: var(--cb-mty, .5) 1 0; }
  .cb .cb__wrap > .cb__sp--b { display: block; flex: calc((1 - var(--cb-mty, .5)) * var(--msy-eff)) 1 0; }
  .cb--has-side .cb__wrap > .cb__sp--end { display: block; flex: calc((1 - var(--cb-mty, .5)) * (1 - var(--cb-msy, 1))) 1 0; }
  /* Imagem em cima do texto: a ordem inverte e a imagem passa a ser o primeiro bloco
     (--cb-msy = espaço acima da imagem; --cb-mty = parte do resto entre a imagem e o texto) */
  .cb--m-imgfirst.cb--has-side .cb__wrap > .cb__sp--a { order: 0; flex: var(--cb-msy, 0) 1 0; }
  .cb--m-imgfirst.cb--has-side .cb__side { order: 1; margin: 0 0 16px; }
  .cb--m-imgfirst.cb--has-side .cb__wrap > .cb__sp--b { order: 2; flex: calc((1 - var(--cb-msy, 0)) * var(--cb-mty, 1)) 1 0; }
  .cb--m-imgfirst.cb--has-side .cb__pos { order: 3; }
  .cb--m-imgfirst.cb--has-side .cb__wrap > .cb__sp--end { order: 4; flex: calc((1 - var(--cb-msy, 0)) * (1 - var(--cb-mty, 1))) 1 0; }
  .cb__side img {
    --msw: min(100%, calc(min(200px, 52cqw) * var(--cb-mss, 1) * var(--cb-sr, 1.5)));
    position: static; width: var(--msw); max-height: 85cqw;
    margin: 0 0 0 calc((100% - var(--msw)) * (var(--cb-msx, 0) + 40) / 80);
  }
  .cb__logo { object-position: 50% 50%; height: min(calc(52px * var(--cb-mls, 1)), 150px); margin: 0 0 4px; }
}