/* ==========================================================================
   BANNER COMPRIDO — v132 (18/09/2026): VOLTOU AO QUE ERA

   Pedido: *"banner volte como era antes de trocar o botão"*. O botão novo
   (movimento do .ds-fluxo) chegou junto com o banner MEIO A MEIO, na mesma
   rodada — então voltar "ao antes do botão" é voltar ao banner v127: a ARTE
   INTEIRA, comprida, com o texto e o botão que estão pintados nela, e o texto
   em HTML valendo só no celular.

   O que sai junto com isso (e não é para reintroduzir sem ele pedir):
   - a divisão 50/50 no desktop e o esfumado da emenda;
   - o `.ds-fluxo` no botão do banner (o círculo que cresce no hover);
   - o recorte `-arte.webp`: aqui quem aparece é o arquivo INTEIRO.
   Quem quiser ver como era o meio a meio: v5-banner.css.bak-v132-antes-de-voltar.
   ========================================================================== */
.lucrei-banner {
  position: relative; display: block; width: 100%; overflow: hidden;
  border-radius: 24px; background: var(--ds-atlantico); isolation: isolate;
  transition: box-shadow .25s ease, transform .25s ease;
}
.lucrei-banner .lb-arte { display: block; width: 100%; height: auto; transition: transform .6s ease; }
/* a arte clara termina quase na cor da pagina: sem o fio de contorno ela some */
.lucrei-banner.lb-claro { background: var(--ds-branco); box-shadow: inset 0 0 0 1px var(--ds-neutro-2); }
.lucrei-banner:hover { box-shadow: 0 22px 46px -30px rgba(var(--ds-atlantico-rgb),.6); }
.lucrei-banner:hover .lb-arte { transform: scale(1.018); }
.lucrei-banner:focus-visible { outline: 3px solid var(--ds-verde); outline-offset: 3px; }

/* o brilho que atravessa a arte de tempos em tempos */
.lucrei-banner .lb-brilho {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(var(--ds-branco-rgb),.20) 48%, transparent 57%);
  transform: translateX(-130%); animation: lb-passa 7.5s ease-in-out infinite;
}
@keyframes lb-passa { 0%, 70% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* o ponto ao vivo, em cima do ponto pintado na arte */
.lucrei-banner .lb-vivo {
  position: absolute; z-index: 3; left: var(--lb-x); top: var(--lb-y);
  width: var(--lb-d, .62%); aspect-ratio: 1; transform: translate(-50%,-50%);
  border-radius: 50%; color: var(--lb-cor, #21EBC3); background: currentColor;
  animation: lb-pisca 1.9s ease-in-out infinite; pointer-events: none;
}
.lucrei-banner .lb-vivo::after {
  content: ""; position: absolute; inset: -55%; border-radius: 50%;
  border: 1.5px solid currentColor; animation: lb-onda 1.9s ease-out infinite;
}
@keyframes lb-pisca { 0%, 100% { opacity: 1; } 55% { opacity: .55; } }
@keyframes lb-onda { 0% { transform: scale(.55); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }

/* a etiqueta "produto pago" quando o dashboard ainda nao esta liberado */
.lucrei-banner .lb-cadeado {
  position: absolute; z-index: 4; right: 16px; top: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(var(--ds-atlantico-rgb),.86); color: var(--ds-branco);
  font: 800 11.5px/1 Inter, sans-serif; letter-spacing: .02em;
}

/* --------------------------------------------------------------- CELULAR */
.lucrei-banner .lb-mob { display: none; }
@media (max-width: 760px) {
  /* no celular a arte vira FUNDO (recorte da ilustracao) e quem manda na
     altura e o texto em HTML — assim nada fica cortado em 390px. */
  .lucrei-banner { border-radius: 20px; }
  .lucrei-banner .lb-arte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--lb-foco, 78% 50%); }
  .lucrei-banner .lb-vivo, .lucrei-banner .lb-brilho { display: none; }
  .lucrei-banner .lb-mob {
    position: relative; z-index: 4; min-height: 196px; display: flex; flex-direction: column;
    justify-content: center; gap: 9px; padding: 20px 16px;
  }
  .lucrei-banner .lb-mob b { font-size: 21px; line-height: 1.12; letter-spacing: -.03em; max-width: 15ch; }
  .lucrei-banner .lb-mob small { font-size: 12.5px; line-height: 1.4; max-width: 30ch; }
  .lucrei-banner .lb-selo {
    display: inline-flex; align-items: center; gap: 7px; width: fit-content;
    padding: 6px 11px; border-radius: 999px; font: 800 10.5px/1 Inter, sans-serif;
    letter-spacing: .09em; text-transform: uppercase;
  }
  .lucrei-banner .lb-selo i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: lb-pisca 1.9s ease-in-out infinite; }
  .lucrei-banner .lb-btn {
    margin-top: 4px; width: fit-content; display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border-radius: 999px; font: 800 13px/1.2 Inter, sans-serif;
  }
  /* arte escura (escritorio): vidro escuro e texto branco */
  .lucrei-banner.lb-escuro .lb-mob { background: linear-gradient(90deg, rgba(var(--ds-atlantico-rgb),.97) 52%, rgba(var(--ds-atlantico-rgb),.68)); color: var(--ds-branco); }
  .lucrei-banner.lb-escuro .lb-mob small { color: var(--ds-linha-2); }
  .lucrei-banner.lb-escuro .lb-selo { background: rgba(var(--ds-menta-rgb),.16); color: var(--ds-menta); }
  .lucrei-banner.lb-escuro .lb-btn { background: var(--ds-menta); color: var(--ds-atlantico); }
  /* arte clara (dashboard e biblioteca): vidro claro e texto Atlantico */
  .lucrei-banner.lb-claro .lb-mob { background: linear-gradient(90deg, rgba(var(--ds-nevoa-rgb),.985) 56%, rgba(var(--ds-nevoa-rgb),.84)); color: var(--ds-atlantico); }
  .lucrei-banner.lb-claro .lb-mob small { color: var(--ds-texto-2); }
  .lucrei-banner.lb-claro .lb-selo { background: rgba(var(--ds-menta-rgb),.22); color: var(--ds-verde-fundo); }
  .lucrei-banner.lb-claro .lb-btn { background: var(--ds-verde); color: var(--ds-branco); }
}

@media (prefers-reduced-motion: reduce) {
  .lucrei-banner .lb-brilho { animation: none; opacity: 0; }
  .lucrei-banner .lb-vivo, .lucrei-banner .lb-vivo::after, .lucrei-banner .lb-selo i { animation: none; }
  .lucrei-banner:hover .lb-arte { transform: none; }
}