/* ==========================================================================
   itick — o split ao vivo, na faixa "Dinheiro em tempo real" da home.
   Caixa do evento (o cartão de sempre, do theme.css) → Promoter → recebedores
   e a taxa da itick, direto na faixa (sem quadro em volta). Os recebedores são
   bolhas coloridas num LEQUE em volta do promoter, flutuando fora de compasso.
   Os fios são um SVG desenhado pelo split.js a partir da posição real de cada
   bolha; as gotas de luz correm por eles a cada venda.
   ========================================================================== */

/* Tudo NUMA LINHA: título | caixa | promoter | recebedores. A animação tem o
   mesmo tamanho de antes; o que saiu foi o bloco de texto de cima (agora no
   modal do "i"), e a faixa ficou mais baixa. */
.itk-split {
  position: relative;
  display: grid;
  /* O título fica EM CIMA do cartão do caixa (mesma coluna), e o promoter e
     os recebedores ocupam as duas linhas, centralizados. */
  grid-template-columns: minmax(360px, 470px) 1fr auto 1fr 350px;
  grid-template-areas:
    "titulo . promoter . recs"
    "caixa  . promoter . recs";
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 28px;
  row-gap: 26px;
}
.itk-split-titulo { grid-area: titulo; align-self: end; position: relative; z-index: 2; width: max-content; }
/* Só o título sobe: fica no meio do vão entre o início da faixa e o caixa.
   transform não mexe em mais nada do layout (caixa, fios, promoter). */
@media (min-width: 992px) { .itk-split-titulo { transform: translateY(-20px); } }
/* À esquerda, em duas linhas: "DINHEIRO EM TEMPO REAL" e "Vendeu, você vê".
   Na frente, o "NA HORA." gigante, com a altura das duas — e ele PODE passar
   da largura do cartão, avançando sobre o vão antes do promoter (o título
   fica na linha de cima; o promoter, centralizado, não chega nessa altura). */
.itk-split-titulo h2 { display: flex; align-items: center; gap: 18px; margin: 0; white-space: nowrap; }
.itk-split-titulo .esq { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.itk-split-titulo .itk-rt-eyebrow { margin: 0; line-height: 1.2; }
.itk-split-titulo .l2 { font-size: clamp(1.6rem, 2.2vw, 2.05rem); line-height: 1.1; color: #fff; }
.itk-split-titulo .itk-rt-hl { position: relative; display: inline-block; margin: 0; font-size: clamp(4rem, 5.6vw, 5.3rem); line-height: .8; }
/* O "i" no lugar de um ®: pequeno, alto, colado no ponto final. */
.itk-rt-info {
  position: absolute;
  top: -2px; right: -26px;
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--itk-verde);
  cursor: pointer;
  text-shadow: none;
  transition: transform .2s ease, color .2s ease;
}
.itk-rt-info svg { width: 20px; height: 20px; }
.itk-rt-info:hover { transform: scale(1.15); color: #fff; }
.itk-rt-info::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  border: 2px solid rgba(52, 211, 153, .5);
  animation: split-chama 2.4s ease-out infinite;
}
@keyframes split-chama { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* O modal do texto (base .itk-modal do theme.css): faixa roxa com o título
   e o mini-fluxo do split; embaixo, três cartões e as ações. */
.itk-split-modal { max-width: 560px; overflow: hidden; }
.sm-topo {
  position: relative;
  padding: 30px 30px 26px;
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(52, 211, 153, .28), transparent 60%),
    linear-gradient(135deg, var(--itk-lilas-800), var(--itk-lilas-950));
  color: rgba(255, 255, 255, .82);
}
.sm-topo .itk-modal-x { position: absolute; top: 16px; right: 16px; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); color: #fff; }
.sm-topo .itk-modal-x:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.sm-selo { display: inline-flex; align-items: center; gap: 8px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--itk-verde); }
.sm-selo i { width: 8px; height: 8px; border-radius: 999px; background: var(--itk-verde); animation: itk-saldo-ping 1.8s ease-out infinite; }
.sm-topo h3 { margin: 10px 0 12px; color: #fff; font-size: 1.6rem; line-height: 1.15; }
.sm-topo h3 span { display: block; color: var(--itk-verde); font-size: 2.4rem; text-transform: uppercase; letter-spacing: -.02em; }
.sm-topo p { margin: 0; font-size: .95rem; line-height: 1.6; }
.sm-topo p strong { color: #fff; }
.sm-fluxo { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 20px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, .08); }
.sm-no { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .74rem; font-weight: 800; color: #fff; text-align: center; }
.sm-no .ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 999px; background: var(--itk-grad); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.sm-divide .ic { background: var(--itk-grad-accent); color: #06342a; }
.sm-no svg { width: 20px; height: 20px; }
.sm-fluxo .seta { width: 20px; height: 20px; color: var(--itk-verde); flex-shrink: 0; animation: split-seta 1.6s ease-in-out infinite; }
@keyframes split-seta { 50% { transform: translateX(4px); } }

.sm-corpo { padding: 22px 24px 24px; display: grid; gap: 12px; }
.sm-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--itk-line); border-radius: 14px; font-size: .9rem; line-height: 1.5; color: var(--itk-body); }
.sm-item b { display: block; margin-bottom: 2px; color: var(--itk-ink); font-size: .96rem; }
.sm-item .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--itk-lilas-50); color: var(--itk-lilas-700); flex-shrink: 0; }
.sm-item:last-of-type .ic { background: rgba(52, 211, 153, .16); color: #0d9488; }
.sm-item .ic svg { width: 20px; height: 20px; }
.sm-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.sm-acoes .itk-btn { flex: 1; }
.sm-acoes .seta { width: 16px; height: 16px; }
@media (max-width: 575.98px) {
  .sm-topo { padding: 26px 20px 22px; }
  .sm-topo h3 span { font-size: 2rem; }
}
.itk-split-fios {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.itk-split-fios path.fio {
  fill: none;
  stroke: rgba(255, 255, 255, .2);
  stroke-width: 2;
  stroke-dasharray: 5 7;
  animation: split-anda 1.2s linear infinite;
}
.itk-split-fios path.fio.itick { stroke: rgba(52, 211, 153, .35); }
@keyframes split-anda { to { stroke-dashoffset: -24; } }
.itk-split-fios circle.gota { fill: #fff; filter: drop-shadow(0 0 6px #5eead4) drop-shadow(0 0 12px rgba(52, 211, 153, .8)); }
.itk-split-fios circle.gota.itick { fill: #a7f3d0; }

.itk-split-caixa,
.itk-split-promoter,
.itk-split-recs { position: relative; z-index: 1; }
/* O cartão do caixa acompanha a largura do título em cima dele. */
.itk-split-caixa { grid-area: caixa; align-self: start; }
.itk-split-caixa .itk-saldo-card { padding: 30px 32px; }
.itk-split-caixa .itk-saldo-valor { font-size: 3rem; }
.itk-split-caixa .itk-saldo-card { max-width: none; }

/* ----- O promoter, com a órbita girando -------------------------------- */
.itk-split-promoter {
  grid-area: promoter;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  color: #fff;
}
.itk-split-promoter .av {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 104px; height: 104px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--itk-grad);
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .07), 0 0 40px rgba(139, 92, 246, .6), 0 18px 40px rgba(0, 0, 0, .35);
  transition: transform .25s ease;
}
.itk-split-promoter .av svg { width: 44px; height: 44px; color: #fff; }
.itk-split-promoter .orbita {
  position: absolute;
  top: -22px; left: 50%;
  width: 148px; height: 148px;
  margin-left: -74px;
  border-radius: 999px;
  border: 2px dashed rgba(94, 234, 212, .45);
  animation: split-gira 14s linear infinite;
}
.itk-split-promoter .orbita::after {
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 999px;
  background: var(--itk-verde);
  box-shadow: 0 0 10px var(--itk-verde);
}
@keyframes split-gira { to { transform: rotate(360deg); } }
.itk-split-promoter .anel {
  position: absolute;
  top: 0; left: 50%;
  width: 104px; height: 104px;
  margin-left: -52px;
  border-radius: 999px;
  border: 2px solid var(--itk-verde);
  opacity: 0;
}
.itk-split-promoter.recebe .av { transform: scale(1.1); }
.itk-split-promoter.recebe .anel { animation: split-anel .7s ease-out; }
@keyframes split-anel { from { transform: scale(1); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.itk-split-promoter b { font-size: 1.1rem; font-weight: 800; }
.itk-split-promoter small { font-size: .82rem; color: var(--itk-verde); font-weight: 700; }

/* ----- Os recebedores: bolhas num leque -------------------------------- */
/* Desenhadas em ")": as do meio mais longe do promoter, as das pontas mais
   perto — o fio de cada uma sai do promoter como raio. */
.itk-split-recs { grid-area: recs; position: relative; height: 500px; }
.itk-split-rec {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  line-height: 1.2;
  animation: split-boia 5s ease-in-out infinite;
}
.itk-split-rec:nth-child(1) { top: 0;     left: 0;    animation-delay: 0s;    --cor: linear-gradient(135deg, #a78bfa, #7c3aed); --brilho: rgba(167, 139, 250, .55); }
.itk-split-rec:nth-child(2) { top: 128px; left: 104px; animation-delay: -1.3s; --cor: linear-gradient(135deg, #f9a8d4, #ec4899); --brilho: rgba(244, 114, 182, .5); }
.itk-split-rec:nth-child(3) { top: 258px; left: 104px; animation-delay: -2.6s; --cor: linear-gradient(135deg, #fcd34d, #f59e0b); --brilho: rgba(251, 191, 36, .45); }
.itk-split-rec:nth-child(4) { top: 388px; left: 0;    animation-delay: -3.9s; --cor: var(--itk-grad-accent); --brilho: rgba(45, 212, 191, .55); }
@keyframes split-boia {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.itk-split-rec .bolha {
  position: relative;
  display: grid;
  place-items: center;
  width: 76px; height: 76px;
  border-radius: 999px;
  background: var(--cor);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .06), 0 0 28px var(--brilho), 0 12px 26px rgba(0, 0, 0, .3);
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.itk-split-rec .ic { display: grid; place-items: center; color: #fff; }
.itk-split-rec.itick .ic { color: #06342a; }
.itk-split-rec .ic svg { width: 30px; height: 30px; }
/* Na bolha da itick vai o logo (arte branca, sem mexer nela). */
.itk-split-rec .ic img { width: 54px; height: auto; display: block; filter: drop-shadow(0 1px 2px rgba(6, 52, 42, .35)); }
/* O percentual numa pastilha presa à bolha. */
.itk-split-rec .pct {
  position: absolute;
  right: -8px; bottom: -4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #fff;
  color: var(--itk-lilas-800);
  font-size: .74rem;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
}
.itk-split-rec.itick .pct { color: #0d9488; }

.itk-split-rec .tx b { display: block; font-size: 1.02rem; font-weight: 800; }
.itk-split-rec .tx small { display: block; font-size: .76rem; color: rgba(255, 255, 255, .6); }
.itk-split-rec .tx em {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  font-style: normal;
  font-size: .86rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Quando a parte chega: a bolha pula e o "+ R$" sobe dela. */
.itk-split-rec.recebe .bolha { transform: scale(1.15); }
.itk-split-rec .mais {
  position: absolute;
  left: 50%; top: -12px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #fff;
  color: #0f9d6b;
  font-size: .74rem;
  font-weight: 900;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
  pointer-events: none;
}
.itk-split-rec .mais.sobe { animation: split-mais 1.2s ease-out; }
@keyframes split-mais {
  0%   { opacity: 0; transform: translate(-50%, 10px) scale(.8); }
  20%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -18px); }
}

.itk-split-nota { margin: 26px auto 0; max-width: 820px; text-wrap: balance; line-height: 1.6; text-align: center; font-size: .82rem; color: rgba(255, 255, 255, .55); }

/* ----- Telas menores ---------------------------------------------------- */
@media (max-width: 1399.98px) {
  .itk-split { grid-template-columns: minmax(340px, 400px) 1fr auto 1fr 320px; column-gap: 18px; }
  .itk-split-titulo .l2 { font-size: 1.55rem; }
  .itk-split-titulo .itk-rt-hl { font-size: 4.2rem; }
  .itk-split-rec .tx small { display: none; }
}
@media (max-width: 1199.98px) {
  /* Aqui não cabem os quatro: o título sobe pra uma linha própria e caixa,
     promoter e recebedores seguem juntos embaixo. */
  .itk-split {
    grid-template-columns: minmax(250px, 290px) 1fr auto 1fr 300px;
    grid-template-areas: "titulo . promoter . recs" "caixa . promoter . recs";
    row-gap: 24px;
    column-gap: 14px;
  }
  .itk-split-titulo { padding-right: 0; }
  .itk-split-titulo .l2 { font-size: 1.4rem; }
  .itk-split-titulo .itk-rt-hl { font-size: 3.6rem; }
  .itk-split-rec:nth-child(2), .itk-split-rec:nth-child(3) { left: 60px; }
  .itk-split-rec .tx small { display: none; }
}
/* Celular e tablet: caixa, promoter e, embaixo, as bolhas em 2×2. */
@media (max-width: 991.98px) {
  .itk-split {
    grid-template-columns: 1fr;
    grid-template-areas: "titulo" "caixa" "promoter" "recs";
    row-gap: 72px;
    max-width: 460px;
    margin-inline: auto;
  }
  .itk-split-recs { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 12px; }
  .itk-split-rec { position: relative; top: auto !important; left: auto !important; flex-direction: column; text-align: center; gap: 10px; }
  .itk-split-rec .tx small { display: block; }
  .itk-split-titulo { text-align: center; margin-bottom: -24px; }
  /* Celular: não cabe lado a lado — empilha, centralizado. */
  .itk-split-titulo { width: auto; }
  .itk-split-titulo h2 { flex-direction: column; gap: 8px; white-space: normal; }
  .itk-split-titulo .esq { align-items: center; }
  .itk-split-titulo .l2 { font-size: 1.5rem; }
  .itk-split-titulo .itk-rt-hl { font-size: 3.4rem; }
  .itk-split-caixa .itk-saldo-card { padding: 24px 22px; }
  .itk-split-caixa .itk-saldo-valor { font-size: 2.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .itk-split-fios path.fio, .itk-split-rec, .itk-split-promoter .orbita, .itk-rt-info::after { animation: none; }
}

/* Mais respiro em cima da faixa: a bolha do "Você" ficava a ~59px do início
   dela; aqui o dobro. Só o topo — embaixo e o resto ficam como estão. */
@media (min-width: 992px) {
  .itk-realtime { padding-top: 123px; }
}