/* ============================================================
   CreDrive — Tema 4: "bento"

   Bento grid: superfícies de vidro sobre uma malha de linhas de 1px, painéis
   escuros com brilho de marca, raios generosos (18px botão / 34px card) e
   microanimações em CSS.

   Estrutura de composição deliberadamente distinta dos outros três:
   - `institutional` -> grid simétrico, cards, denso
   - `clean`         -> centralizado, flat, arejado
   - `editorial`     -> assimétrico, serifado, filetes
   - `bento`         -> malha estrutural, vidro, painéis escuros, movimento

   CORES: exclusivamente as da marca (design/tokens.css). O layout veio de uma
   referência que usa azul; aqui o papel de acento é do Verde Neon e do índigo
   do design system. Nenhuma cor externa entra.

   Regra WCAG que continua valendo: texto sobre verde é SEMPRE preto, e o verde
   neon nunca é cor de texto sobre fundo claro.
   ============================================================ */

.theme-bento {
  /* ---------- Tipografia: uma família só, pesos como hierarquia ---------- */
  --cd-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --cd-font-display: var(--cd-font-sans);

  --cd-fs-display: clamp(40px, 6.4vw, 80px);  --cd-lh-display: 1.02;
  --cd-fs-h1: clamp(32px, 4.4vw, 56px);       --cd-lh-h1: 1.05;
  --cd-fs-h2: clamp(26px, 3.2vw, 40px);       --cd-lh-h2: 1.1;
  --cd-fs-h3: 20px;                            --cd-lh-h3: 1.35;
  --cd-fs-lead: clamp(17px, 1.5vw, 20px);      --cd-lh-lead: 1.65;
  --cd-fs-body: 16px;                          --cd-lh-body: 1.75;
  --cd-fs-small: 14px;                         --cd-lh-small: 1.6;

  /* ---------- Grid e ritmo ---------- */
  --cd-container: 1280px;
  --cd-section-py: 96px;
  --cd-section-py-tight: 64px;
  --cd-nav-height: 76px;

  /* ---------- Geometria: curvas generosas sobre malha rígida ---------- */
  --cd-radius-button: 18px;
  --cd-radius-card: 34px;
  --cd-radius-panel: 22px;
  --cd-radius-input: 14px;

  /* ---------- Superfícies ---------- */
  --bento-line: rgba(227, 231, 236, .8);
  --bento-glass: rgba(255, 255, 255, .85);
  --bento-dark: linear-gradient(135deg, #1B2028 0%, #0A0C0E 56%, #14181D 100%);
  --bento-shadow-soft: 0 16px 44px rgba(17, 20, 24, .07);
  --bento-shadow-lift: 0 24px 60px rgba(17, 20, 24, .12);
  --bento-shadow-dark: 0 30px 60px rgba(10, 12, 14, .34);

  --cd-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --cd-duration: 240ms;
}

/* ---------- Tipografia aplicada ---------- */
.theme-bento .cd-display {
  font-size: var(--cd-fs-display);
  line-height: var(--cd-lh-display);
  font-weight: 600;
  letter-spacing: -0.045em;
  color: var(--cd-text-primary);
  text-wrap: balance;
}
.theme-bento h1, .theme-bento h2, .theme-bento h3 {
  font-family: var(--cd-font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--cd-text-primary);
}
.theme-bento h1 { font-size: var(--cd-fs-h1); line-height: var(--cd-lh-h1); }
.theme-bento h2 { font-size: var(--cd-fs-h2); line-height: var(--cd-lh-h2); }
.theme-bento h3 { font-size: var(--cd-fs-h3); line-height: var(--cd-lh-h3); letter-spacing: -0.02em; }
.theme-bento .cd-lead {
  font-size: var(--cd-fs-lead);
  line-height: var(--cd-lh-lead);
  color: var(--cd-text-secondary);
  max-width: 56ch;
}

/* Rótulo técnico: caixa alta com entreletra generosa. */
.theme-bento .cd-eyebrow,
.theme-bento .cd-section-index {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-space-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-brand-primary-strong);
}

/* ---------- Container com as guias verticais da malha ---------- */
.theme-bento .cd-container {
  position: relative;
  max-width: var(--cd-container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 64px);
}
/* As guias são o esqueleto visível do tema — 1px, discretas, sempre no mesmo
   lugar, o que dá a leitura de "planta técnica". */
.theme-bento .cd-section { position: relative; padding-block: var(--cd-section-py); }
.theme-bento .cd-section::before,
.theme-bento .cd-section::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--bento-line);
  pointer-events: none;
}
.theme-bento .cd-section::before { left: clamp(20px, 4vw, 64px); }
.theme-bento .cd-section::after { right: clamp(20px, 4vw, 64px); }
.theme-bento .cd-section--tight { padding-block: var(--cd-section-py-tight); }
.theme-bento .cd-section--contrast { background: var(--cd-bg-subtle); }

@media (max-width: 700px) {
  .theme-bento .cd-section::before,
  .theme-bento .cd-section::after { display: none; }
}

/* ---------- Navbar ---------- */
.theme-bento .cd-site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--bento-line);
}
.theme-bento .cd-site-nav a { font-size: 15px; font-weight: 500; }

/* ---------- Hero ---------- */
.theme-bento .cd-hero {
  position: relative;
  /* overflow VISÍVEL: `hidden`/`clip` aqui quebra o `position: sticky` do carro.
     O halo é reposicionado para dentro; o vazamento horizontal já é clipado pelo
     overflow-x do body. */
  overflow: visible;
  padding-block: clamp(56px, 8vw, 112px);
}
/* Halo da marca atrás do título: dá profundidade sem pesar. */
.theme-bento .cd-hero::before {
  content: "";
  position: absolute;
  top: 40px;
  right: -2%;
  width: 540px;
  height: 540px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 249, 78, .16) 0%, transparent 68%);
  filter: blur(48px);
  pointer-events: none;
}
.theme-bento .cd-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.theme-bento .cd-hero__grid--solo { grid-template-columns: 1fr; }
.theme-bento .cd-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--cd-space-4);
  flex-wrap: wrap;
  margin-top: var(--cd-space-8);
}

/* ---------- Botões ---------- */
.theme-bento .cd-btn {
  border-radius: var(--cd-radius-button);
  padding: 14px 26px;
  font-weight: 600;
  transition: transform var(--cd-duration) var(--cd-ease),
              box-shadow var(--cd-duration) var(--cd-ease),
              background var(--cd-duration) var(--cd-ease);
}
.theme-bento .cd-btn:hover { translate: 0 -2px; }
.theme-bento .cd-btn-primary { box-shadow: 0 18px 38px rgba(17, 20, 24, .22); }
.theme-bento .cd-btn-primary:hover { box-shadow: 0 22px 46px rgba(17, 20, 24, .3); }

/* CTA de marca: verde com TEXTO PRETO (regra do manual, 15.90:1). */
.theme-bento .cd-btn-brand {
  background: var(--cd-brand-primary);
  color: var(--cd-text-on-accent);
  border: 0;
  box-shadow: 0 18px 38px rgba(147, 249, 78, .3);
}
.theme-bento .cd-btn-brand:hover { box-shadow: 0 22px 46px rgba(147, 249, 78, .42); }

/* ---------- Cards de vidro (o bloco básico do tema) ---------- */
.theme-bento .cd-card,
.theme-bento .cd-card-product,
.theme-bento .cd-highlight,
.theme-bento .cd-testimonial {
  background: var(--bento-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--bento-line);
  border-radius: var(--cd-radius-card);
  box-shadow: var(--bento-shadow-soft);
  padding: clamp(22px, 2.4vw, 32px);
  transition: transform var(--cd-duration) var(--cd-ease),
              box-shadow var(--cd-duration) var(--cd-ease),
              border-color var(--cd-duration) var(--cd-ease);
}
.theme-bento .cd-card-product:hover,
.theme-bento .cd-highlight:hover {
  translate: 0 -6px;
  box-shadow: var(--bento-shadow-lift);
  border-color: var(--cd-brand-primary-strong);
}

/* Grade bento: colunas que se acomodam ao número de itens. */
.theme-bento .cd-card-grid,
.theme-bento .cd-highlight-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--cd-space-4);
}

/* Ícone do card: quadro arredondado, não ícone solto. */
.theme-bento .cd-card-product__icon,
.theme-bento .cd-highlight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--cd-radius-panel);
  background: var(--cd-status-approved-bg);
  color: var(--cd-status-approved);
  font-size: 26px;
  margin-bottom: var(--cd-space-4);
}

/* ---------- Painel escuro (o contraponto do vidro) ---------- */
.theme-bento .cd-panel-dark,
.theme-bento [data-bg="ink"] {
  background: var(--bento-dark);
  color: #FFFFFF;
  border-radius: var(--cd-radius-card);
  box-shadow: var(--bento-shadow-dark);
  /* Fio de luz no topo: simula superfície retroiluminada. */
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.theme-bento .cd-panel-dark h2,
.theme-bento .cd-panel-dark h3,
.theme-bento [data-bg="ink"] h2,
.theme-bento [data-bg="ink"] h3 { color: #FFFFFF; }
.theme-bento .cd-panel-dark p,
.theme-bento [data-bg="ink"] p { color: #C7CDD6; }

/* ---------- Passos (como funciona) ---------- */
.theme-bento .cd-steps__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--cd-space-4);
  list-style: none;
  margin: var(--cd-space-8) 0 0;
  padding: 0;
}
.theme-bento .cd-step {
  position: relative;
  background: var(--bento-glass);
  border: 1px solid var(--bento-line);
  border-radius: var(--cd-radius-card);
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow: var(--bento-shadow-soft);
}
.theme-bento .cd-step__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding-inline: 12px;
  border-radius: var(--cd-radius-pill);
  background: var(--cd-brand-primary);
  color: var(--cd-text-on-accent);   /* preto sobre verde */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--cd-space-4);
}

/* ---------- Parceiros: bolhas com hover (as logos dos bancos) ---------- */
.theme-bento .cd-logos--bento { padding-block: var(--cd-section-py-tight); }
.theme-bento .cd-logos__title {
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cd-text-secondary);
}
.theme-bento .cd-partners {
  list-style: none;
  margin: var(--cd-space-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(8px, 1vw, 16px);
}
.theme-bento .cd-partner__bubble {
  /* Bolha MAIOR e padding proporcional: a caixa útil dentro de um círculo é
     ~70% do diâmetro, e logos horizontais (Daycoval, Inter, Santander) eram
     cortadas nas pontas com o padding anterior. */
  /* Diâmetro calculado para as 9 caberem numa linha (9 x 106 + 8 gaps = 1034px
     no container útil de 1152px). */
  --bolha: clamp(84px, 7.4vw, 112px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bolha);
  height: var(--bolha);
  /* Os PNGs já carregam margem transparente própria (12%), então aqui a folga
     é só a do círculo. Os arquivos vieram de thumbnails com o desenho colado
     nas quatro bordas — dentro de uma bolha redonda isso lia como corte. */
  padding: calc(var(--bolha) * .11);
  border-radius: 50%;
  background: var(--bento-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bento-line);
  transition: transform var(--cd-duration) var(--cd-ease),
              box-shadow var(--cd-duration) var(--cd-ease),
              border-color var(--cd-duration) var(--cd-ease);
}
.theme-bento .cd-partner__bubble img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .62;
  transition: filter var(--cd-duration) var(--cd-ease), opacity var(--cd-duration) var(--cd-ease);
}
.theme-bento .cd-partner__bubble:hover {
  translate: 0 -6px;
  scale: 1.06;
  box-shadow: var(--bento-shadow-lift);
  border-color: var(--cd-brand-primary);
}
.theme-bento .cd-partner__bubble:hover img { filter: grayscale(0); opacity: 1; }
.theme-bento .cd-partner__name {
  font-size: clamp(12px, 1.1vw, 15px);
  font-weight: 700;
  text-align: center;
  color: var(--cd-text-secondary);
}

/* ---------- Mídia: espaço para as fotos do time ---------- */
.theme-bento .cd-media-img,
.theme-bento .cd-gallery img {
  border-radius: var(--cd-radius-panel);
  box-shadow: var(--bento-shadow-soft);
}
.theme-bento .cd-hero__media img {
  border-radius: var(--cd-radius-card);
  box-shadow: var(--bento-shadow-lift);
}
.theme-bento .cd-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--cd-space-4);
}

/* ---------- FAQ ---------- */
.theme-bento .cd-faq__item {
  background: var(--bento-glass);
  border: 1px solid var(--bento-line);
  border-radius: var(--cd-radius-panel);
  padding: var(--cd-space-4) var(--cd-space-6);
  margin-bottom: var(--cd-space-3);
}
.theme-bento .cd-faq__chevron { transition: transform var(--cd-duration) var(--cd-ease); }
.theme-bento .cd-faq__item[open] .cd-faq__chevron { transform: rotate(180deg); }

/* ---------- Movimento ----------
   Só microanimações em CSS: nada de biblioteca para animar entrada de texto. */
@keyframes cd-bento-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes cd-bento-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .78; transform: scale(1.04); }
}
@keyframes cd-bento-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.theme-bento .cd-float { animation: cd-bento-float 4s ease-in-out infinite; }
.theme-bento .cd-pulse { animation: cd-bento-pulse 3s ease-in-out infinite; }

/* Entrada por scroll: o site.js marca <html> com .js-reveal e cada bloco com
   .is-revealed ao entrar na viewport. Sem JS nada é escondido. */
.js-reveal .theme-bento [data-cd-reveal],
.theme-bento.js-reveal [data-cd-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms var(--cd-ease), transform 700ms var(--cd-ease);
}
.js-reveal .theme-bento [data-cd-reveal].is-revealed,
.theme-bento [data-cd-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-bento .cd-float,
  .theme-bento .cd-pulse { animation: none; }
  .theme-bento [data-cd-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  .theme-bento .cd-btn:hover,
  .theme-bento .cd-partner__bubble:hover,
  .theme-bento .cd-card-product:hover { translate: none; scale: none; }
}

/* ---------- Responsivo ---------- */
@media (max-width: 1023px) {
  .theme-bento .cd-hero__grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .theme-bento { --cd-section-py: 64px; --cd-radius-card: 24px; }
  .theme-bento .cd-card-grid,
  .theme-bento .cd-highlight-list,
  .theme-bento .cd-steps__list { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- retratos (time) */
/* Legenda SOBRE a foto, revelada no hover: numa parede de retratos isso mantém
   a grade uniforme, enquanto legenda embaixo cria alturas irregulares. */
.theme-bento .cd-portrait {
  position: relative;
  margin: 0;
  border-radius: var(--cd-radius-panel);
  overflow: hidden;
  box-shadow: var(--bento-shadow-soft);
  transition: transform var(--cd-duration) var(--cd-ease),
              box-shadow var(--cd-duration) var(--cd-ease);
}
.theme-bento .cd-portrait img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  transition: transform 480ms var(--cd-ease);
}
.theme-bento .cd-portrait:hover { translate: 0 -6px; box-shadow: var(--bento-shadow-lift); }
.theme-bento .cd-portrait:hover img { transform: scale(1.04); }

.theme-bento .cd-portrait__caption {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--cd-space-6) var(--cd-space-4) var(--cd-space-4);
  color: #FFFFFF;
  /* Véu escuro só na base: o nome precisa de contraste sobre qualquer foto. */
  background: linear-gradient(to top, rgba(10, 12, 14, .88) 0%, rgba(10, 12, 14, .5) 55%, transparent 100%);
  font-size: 14px;
}
.theme-bento .cd-portrait__caption strong { font-size: 16px; font-weight: 600; }
.theme-bento .cd-portrait__caption span { color: #C7CDD6; }



@media (prefers-reduced-motion: reduce) {
  .theme-bento .cd-portrait:hover { transform: none; }
  .theme-bento .cd-portrait:hover img { transform: none; }
}

/* Retrato sem foto: mostra o lugar dela para o administrador saber que a
   seção existe e onde a imagem entra. */
.theme-bento .cd-portrait--vazio {
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #262E37 0%, transparent 60%),
    linear-gradient(160deg, #1B222A 0%, var(--cd-ink) 78%);
  border: none;
}
.theme-bento .cd-portrait__vazio {
  display: grid; place-items: center;
  width: 92px; height: 92px; border-radius: 50%;
  background: rgba(147, 249, 78, .12); border: 1px solid rgba(147, 249, 78, .22);
  color: var(--cd-brand-primary);
}
.theme-bento .cd-portrait__vazio .material-symbols-outlined { font-size: 48px; }
.theme-bento .cd-portrait--vazio .cd-portrait__caption {
  background: linear-gradient(to top, rgba(10, 12, 14, .82) 0%, transparent 100%);
}

/* ============================================================
   MOVIMENTO DE SCROLL

   Duas técnicas, ambas sem biblioteca:

   1. Reveal escalonado — os filhos de uma grade entram em cascata, não todos
      de uma vez. O atraso vem de :nth-child, sem variável inline.
   2. Parallax por scroll-driven animation (`animation-timeline: scroll()`),
      nativo do CSS. Onde não houver suporte, o elemento simplesmente fica
      parado: nada quebra, nada some.
   ============================================================ */

/* ---------------------------------------------------------------- cascata */
/* `translate` (propriedade individual) em vez de `transform`: assim a cascata
   de entrada não briga com a rotação decorativa dos depoimentos, que usa
   `rotate`. Com `transform` a última regra vencia e zerava a outra. */
.js-reveal .theme-bento .cd-card-grid > *,
.js-reveal .theme-bento .cd-highlight-list > *,
.js-reveal .theme-bento .cd-steps__list > *,
.js-reveal .theme-bento .cd-gallery > *,
.js-reveal .theme-bento .cd-partner {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 620ms var(--cd-ease), translate 620ms var(--cd-ease),
              rotate 240ms var(--cd-ease), scale 240ms var(--cd-ease);
}
.js-reveal .theme-bento [data-cd-reveal].is-revealed .cd-card-grid > *,
.js-reveal .theme-bento [data-cd-reveal].is-revealed .cd-highlight-list > *,
.js-reveal .theme-bento [data-cd-reveal].is-revealed .cd-steps__list > *,
.js-reveal .theme-bento [data-cd-reveal].is-revealed .cd-gallery > *,
.js-reveal .theme-bento [data-cd-reveal].is-revealed .cd-partner {
  opacity: 1;
  translate: none;
}
.theme-bento .cd-card-grid > *:nth-child(1),
.theme-bento .cd-highlight-list > *:nth-child(1),
.theme-bento .cd-steps__list > *:nth-child(1),
.theme-bento .cd-gallery > *:nth-child(1) { transition-delay: 0ms; }
.theme-bento .cd-card-grid > *:nth-child(2),
.theme-bento .cd-highlight-list > *:nth-child(2),
.theme-bento .cd-steps__list > *:nth-child(2),
.theme-bento .cd-gallery > *:nth-child(2) { transition-delay: 90ms; }
.theme-bento .cd-card-grid > *:nth-child(3),
.theme-bento .cd-highlight-list > *:nth-child(3),
.theme-bento .cd-steps__list > *:nth-child(3),
.theme-bento .cd-gallery > *:nth-child(3) { transition-delay: 180ms; }
.theme-bento .cd-card-grid > *:nth-child(n+4),
.theme-bento .cd-gallery > *:nth-child(n+4) { transition-delay: 270ms; }
.theme-bento .cd-partner:nth-child(odd) { transition-delay: 60ms; }
.theme-bento .cd-partner:nth-child(even) { transition-delay: 120ms; }

/* ---------------------------------------------------------------- parallax */
@supports (animation-timeline: scroll()) {
  @keyframes cd-bento-parallax-slow {
    from { transform: translateY(-4%); }
    to   { transform: translateY(6%); }
  }
  @keyframes cd-bento-parallax-halo {
    from { transform: translate(0, -8%) scale(1); }
    to   { transform: translate(-4%, 10%) scale(1.12); }
  }
  /* O halo do hero se move mais devagar que a página — a profundidade vem daí. */
  .theme-bento .cd-hero::before {
    animation: cd-bento-parallax-halo linear both;
    animation-timeline: scroll();
    animation-range: 0 90vh;
  }
  /* Painel do fecho: leve deslocamento contrário ao scroll. */
  .theme-bento .cd-cta__panel {
    animation: cd-bento-parallax-slow linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-reveal .theme-bento .cd-card-grid > *,
  .js-reveal .theme-bento .cd-highlight-list > *,
  .js-reveal .theme-bento .cd-steps__list > *,
  .js-reveal .theme-bento .cd-gallery > *,
  .js-reveal .theme-bento .cd-partner {
    opacity: 1; transform: none; transition: none;
  }
  .theme-bento .cd-hero::before,
  .theme-bento .cd-cta__panel { animation: none; }
}

/* ============================================================
   Console do hero — mockup de painel em HTML/CSS

   Faz o papel da ilustração de produto: mostra o que a plataforma entrega sem
   depender de captura de tela (que envelhece) nem de asset externo.
   Decorativo: aria-hidden no markup, nenhum dado essencial só aqui.
   ============================================================ */
.theme-bento .cd-hero__side { position: relative; }

.theme-bento .cd-console {
  position: relative;
  background: var(--bento-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--bento-line);
  border-radius: var(--cd-radius-card);
  box-shadow: var(--bento-shadow-lift);
  padding: var(--cd-space-6);
}

.theme-bento .cd-console__head {
  display: flex;
  align-items: center;
  gap: var(--cd-space-3);
  padding-bottom: var(--cd-space-4);
  border-bottom: 1px solid var(--bento-line);
}
.theme-bento .cd-console__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--cd-status-approved-bg);
  color: var(--cd-status-approved);
  font-size: 22px;
}
.theme-bento .cd-console__titles { display: flex; flex-direction: column; flex: 1; line-height: 1.3; }
.theme-bento .cd-console__titles strong { font-size: 15px; }
.theme-bento .cd-console__titles small { font-size: 13px; color: var(--cd-text-secondary); }
.theme-bento .cd-console__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--cd-radius-pill);
  background: var(--cd-status-approved-bg);
  color: var(--cd-status-approved);
  font-size: 12px;
  font-weight: 600;
}
.theme-bento .cd-console__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cd-status-approved);
  animation: cd-bento-pulse 2s ease-in-out infinite;
}

.theme-bento .cd-console__body {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: var(--cd-space-5, 20px);
  padding-top: var(--cd-space-4);
  /* PRATELEIRA para os dois cartões flutuantes. Eles são absolutos e ancorados
     ao rodapé do console, então avançam para dentro dele: sem esta reserva
     cobriam três itens do menu e duas métricas (medido). Se a altura de algum
     flutuante mudar, esta reserva tem que acompanhar. */
  padding-bottom: 118px;
}
.theme-bento .cd-console__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.theme-bento .cd-console__menu li {
  display: flex;
  align-items: center;
  gap: var(--cd-space-2);
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: var(--cd-text-secondary);
}
.theme-bento .cd-console__menu li .material-symbols-outlined { font-size: 18px; }
.theme-bento .cd-console__menu li.is-active {
  background: var(--cd-status-approved-bg);
  color: var(--cd-status-approved);
  font-weight: 600;
}

.theme-bento .cd-console__metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cd-space-2);
}
.theme-bento .cd-console__metric {
  border: 1px solid var(--bento-line);
  border-radius: 16px;
  padding: var(--cd-space-3);
  background: rgba(255, 255, 255, .7);
}
.theme-bento .cd-console__label { display: block; font-size: 11px; color: var(--cd-text-secondary); line-height: 1.3; }
.theme-bento .cd-console__value {
  display: block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -.03em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.theme-bento .cd-console__delta { font-size: 11px; color: var(--cd-text-secondary); }

/* Cartão flutuante escuro, sobreposto ao console. */
.theme-bento .cd-console__float {
  position: absolute;
  right: -18px;
  bottom: -28px;
  width: min(248px, 62%);
  padding: var(--cd-space-4) var(--cd-space-5, 20px);
  border-radius: var(--cd-radius-panel);
  background: var(--bento-dark);
  border-top: 1px solid rgba(255, 255, 255, .14);
  box-shadow: var(--bento-shadow-dark);
  color: #FFFFFF;
}
.theme-bento .cd-console__float-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cd-brand-primary);
}
.theme-bento .cd-console__float-top .material-symbols-outlined { font-size: 18px; }
.theme-bento .cd-console__float-value {
  display: block;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.03em;
  margin: 6px 0 4px;
  font-variant-numeric: tabular-nums;
}
.theme-bento .cd-console__float-note { font-size: 12px; color: #C7CDD6; line-height: 1.45; }

/* Mini gráfico flutuante do outro lado.
   Pendurado ABAIXO do corpo do console, não sobre ele: em `bottom: 42px` a
   caixa cobria três itens do menu (Documentos, Análise e Liberação) — medido,
   não estimado. Mexer nesta ancoragem pede remedir a sobreposição. */
.theme-bento .cd-console__chart {
  position: absolute;
  left: -22px;
  bottom: -34px;
  width: 186px;
  padding: var(--cd-space-3) var(--cd-space-4);
  border-radius: 18px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--bento-line);
  box-shadow: var(--bento-shadow-soft);
}
.theme-bento .cd-console__chart-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cd-text-secondary);
}
.theme-bento .cd-console__chart-title .material-symbols-outlined { font-size: 16px; color: var(--cd-status-approved); }
.theme-bento .cd-console__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 46px;
  margin-top: var(--cd-space-2);
}
.theme-bento .cd-console__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 2px 2px;
  background: var(--cd-bg-subtle);
  animation: cd-bento-bar 2.6s ease-in-out infinite;
}
.theme-bento .cd-console__bars i:nth-child(4) { background: var(--cd-brand-primary); }
.theme-bento .cd-console__bars i:nth-child(2) { animation-delay: .2s; }
.theme-bento .cd-console__bars i:nth-child(3) { animation-delay: .4s; }
.theme-bento .cd-console__bars i:nth-child(4) { animation-delay: .6s; }
.theme-bento .cd-console__bars i:nth-child(5) { animation-delay: .8s; }
.theme-bento .cd-console__bars i:nth-child(6) { animation-delay: 1s; }
@keyframes cd-bento-bar {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(.72); }
}
.theme-bento .cd-console__bars i { transform-origin: bottom; }

/* Ponto da sobrelinha. */
.theme-bento .cd-eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cd-brand-primary);
  box-shadow: 0 0 0 4px rgba(147, 249, 78, .25);
}

@media (max-width: 1023px) {
  .theme-bento .cd-console__float { right: 0; bottom: -20px; }
  .theme-bento .cd-console__chart { display: none; }
}
@media (max-width: 560px) {
  .theme-bento .cd-console__body { grid-template-columns: 1fr; }
  .theme-bento .cd-console__float { position: static; width: auto; margin-top: var(--cd-space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-bento .cd-console__bars i,
  .theme-bento .cd-console__pulse { animation: none; }
}

/* ============================================================
   Marquee de parceiros

   A fita rola sem parar; a máscara nas laterais dissolve as pontas para o
   movimento não "bater" na borda da tela.
   ============================================================ */
.theme-bento .cd-marquee {
  overflow: hidden;
  padding-block: var(--cd-space-6);
  /* Sem a máscara, as bolhas surgem e somem com corte reto na borda. */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.theme-bento .cd-marquee__track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  gap: clamp(12px, 1.4vw, 24px);
  animation: cd-bento-marquee 42s linear infinite;
}
/* Pausa no hover: quem quer ler o nome de um banco consegue parar a fita. */
.theme-bento .cd-marquee:hover .cd-marquee__track { animation-play-state: paused; }
.theme-bento .cd-marquee .cd-partner { flex: none; }

/* Movimento reduzido: a fita vira grade estática e a segunda cópia some
   (ela só existe para o laço; visível seria conteúdo duplicado). */
@media (prefers-reduced-motion: reduce) {
  .theme-bento .cd-marquee { mask-image: none; -webkit-mask-image: none; overflow: visible; }
  .theme-bento .cd-marquee__track {
    animation: none;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    max-width: var(--cd-container);
    margin-inline: auto;
  }
  .theme-bento .cd-marquee__track .cd-partner[aria-hidden="true"] { display: none; }
}

/* ============================================================
   Depoimentos: cartões girados, como papéis sobre a mesa
   ============================================================ */
.theme-bento .cd-testimonials--bento .cd-card-grid { align-items: start; }

.theme-bento .cd-testimonial {
  position: relative;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cd-space-4);
}
/* Ângulos alternados e pequenos: passam a ideia de pilha sem parecer erro. */
.theme-bento .cd-testimonial:nth-child(4n+1) { rotate: -1.6deg; }
.theme-bento .cd-testimonial:nth-child(4n+2) { rotate: 1deg; }
.theme-bento .cd-testimonial:nth-child(4n+3) { rotate: -0.6deg; }
.theme-bento .cd-testimonial:nth-child(4n+4) { rotate: 1.8deg; }
/* No hover o cartão desentorta, sobe e ganha a borda de marca. */
.theme-bento .cd-testimonial:hover {
  rotate: 0deg;
  translate: 0 -8px;
  scale: 1.02;
  z-index: 2;
  border-color: var(--cd-brand-primary-strong);
  box-shadow: var(--bento-shadow-lift);
}

.theme-bento .cd-testimonial__mark {
  font-size: 34px;
  line-height: 1;
  color: var(--cd-brand-primary-strong);
  opacity: .5;
}
.theme-bento .cd-testimonial__quote {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
  color: var(--cd-text-primary);
}
.theme-bento .cd-testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--cd-space-3);
  margin-top: auto;
  padding-top: var(--cd-space-4);
  border-top: 1px solid var(--bento-line);
}
.theme-bento .cd-testimonial__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  box-shadow: none;
}
.theme-bento .cd-testimonial__id { display: flex; flex-direction: column; line-height: 1.35; }
.theme-bento .cd-testimonial__id strong { font-size: 15px; }
.theme-bento .cd-testimonial__id span { font-size: 13px; color: var(--cd-text-secondary); }



/* ============================================================
   Ilustrações de interface nos cards (mockups em CSS)

   Cada card mostra um momento do produto. São desenhos, não capturas: escalam
   em qualquer largura, não envelhecem e não dependem de asset externo.
   ============================================================ */
.theme-bento .cd-mockup {
  position: relative;
  /* Alto o bastante para o gráfico e a legenda caberem sem cortar — com 200px
     a legenda ficava decepada (24px de estouro, medido). Todas as variações
     usam a mesma altura para os cards alinharem. */
  height: 244px;
  border-radius: var(--cd-radius-panel);
  border: 1px solid var(--bento-line);
  background:
    linear-gradient(rgba(227, 231, 236, .5) 1px, transparent 1px) 0 0 / 100% 22px,
    linear-gradient(90deg, rgba(227, 231, 236, .5) 1px, transparent 1px) 0 0 / 22px 100%,
    #FBFCFD;
  overflow: hidden;
  padding: var(--cd-space-4);
  margin-bottom: var(--cd-space-5, 20px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.theme-bento .cd-mockup__chip {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: var(--cd-radius-pill);
  background: var(--cd-status-approved-bg);
  color: var(--cd-status-approved);
  font-size: 11px;
  font-weight: 600;
}
.theme-bento .cd-mockup__chip--alt { align-self: flex-end; }

/* ---- 1. fluxo ---- */
.theme-bento .cd-mockup__row { display: flex; align-items: center; gap: 10px; }
.theme-bento .cd-mockup__dot {
  width: 22px; height: 22px; flex: none;
  border-radius: 8px;
  background: var(--cd-bg-subtle);
}
.theme-bento .cd-mockup__dot.is-on { background: var(--cd-brand-primary); }
.theme-bento .cd-mockup__bar {
  height: 9px;
  width: var(--w);
  border-radius: var(--cd-radius-pill);
  background: var(--cd-bg-subtle);
}
.theme-bento .cd-mockup__check {
  font-size: 16px;
  color: var(--cd-status-approved);
  margin-left: auto;
}
/* Varredura que percorre o card: dá a sensação de processo rodando. */
.theme-bento .cd-mockup__scan {
  position: absolute;
  inset: 0 auto 0 -30%;
  width: 30%;
  background: linear-gradient(90deg, transparent, rgba(147, 249, 78, .22), transparent);
  animation: cd-mockup-scan 3.2s ease-in-out infinite;
}
@keyframes cd-mockup-scan {
  0%   { transform: translateX(0); }
  100% { transform: translateX(440%); }
}


/* ---- 2. parcela fixa ---- */
/* Barras da MESMA altura: é o argumento do financiamento — a prestação não
   muda. Altura variável aqui seria mentira gráfica.

   A nota de dinheiro percorre as teclas e cada uma acende ao ser alcançada,
   ficando acesa até o ciclo reiniciar: a leitura é "parcela paga".

   SINCRONIA: a nota anda de 5% a 95% entre 4% e 84% do ciclo. A tecla `i` tem
   centro em 5% + i·10%, então a nota chega nela em 4% + i·8,89% do ciclo — em
   5s, 0,2s + i·0,444s. Por isso os atrasos abaixo são de 0,44s e a tecla acende
   aos 4% da sua própria volta. Mexer na duração exige refazer essa conta. */
.theme-bento .cd-bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  height: 100%;
}
.theme-bento .cd-bars i {
  flex: 1;
  height: 62%;
  border-radius: 6px 6px 3px 3px;
  background: var(--cd-bg-subtle);
  border: 1px solid var(--cd-border-muted);
  animation: cd-bars-paga 5s linear infinite;
}
/* Cada offset aparece UMA vez: eu havia declarado 4% duas vezes e a segunda
   regra apagava o clarão da nota chegando — as teclas nunca acendiam. */
@keyframes cd-bars-paga {
  0%   { background: var(--cd-bg-subtle); border-color: var(--cd-border-muted); translate: 0 0; }
  4%   { background: var(--cd-brand-primary); border-color: var(--cd-brand-primary-strong);
         translate: 0 -7px; }
  14%  { background: var(--cd-status-approved-bg); border-color: rgba(60, 122, 18, .32);
         translate: 0 0; }
  88%  { background: var(--cd-status-approved-bg); border-color: rgba(60, 122, 18, .32); }
  96%  { background: var(--cd-bg-subtle); border-color: var(--cd-border-muted); }
  100% { background: var(--cd-bg-subtle); border-color: var(--cd-border-muted); }
}
.theme-bento .cd-bars i:nth-child(1)  { animation-delay: 0s; }
.theme-bento .cd-bars i:nth-child(2)  { animation-delay: .44s; }
.theme-bento .cd-bars i:nth-child(3)  { animation-delay: .88s; }
.theme-bento .cd-bars i:nth-child(4)  { animation-delay: 1.32s; }
.theme-bento .cd-bars i:nth-child(5)  { animation-delay: 1.76s; }
.theme-bento .cd-bars i:nth-child(6)  { animation-delay: 2.20s; }
.theme-bento .cd-bars i:nth-child(7)  { animation-delay: 2.64s; }
.theme-bento .cd-bars i:nth-child(8)  { animation-delay: 3.08s; }
.theme-bento .cd-bars i:nth-child(9)  { animation-delay: 3.52s; }
.theme-bento .cd-bars i:nth-child(10) { animation-delay: 3.96s; }

/* ---- a nota que percorre as teclas ---- */
/* DENTRO das teclas, não acima: pousada em cima da fileira ela parecia um
   cursor sobrevoando; correndo por dentro, lê como o dinheiro entrando em cada
   parcela. As barras têm 62% de altura, então o centro delas é 31%. */
.theme-bento .cd-bars__nota {
  position: absolute;
  bottom: calc(31% - 15px);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid var(--cd-border-muted);
  box-shadow: 0 4px 10px -4px rgba(20, 24, 29, .45);
  font-size: 17px;
  color: var(--cd-brand-primary-strong);
  /* Acima das barras na pilha, senão a tecla acesa a encobre. */
  z-index: 2;
  animation: cd-bars-nota 5s linear infinite;
}
@keyframes cd-bars-nota {
  0%   { left: 5%;  opacity: 0; }
  4%   { left: 9%;  opacity: 1; }
  84%  { left: 95%; opacity: 1; }
  90%  { left: 95%; opacity: 0; }
  100% { left: 5%;  opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  /* Paradas, as teclas ficam todas quitadas e a nota descansa no fim da fila:
     a leitura de "parcelas pagas" continua de pé. */
  .theme-bento .cd-bars i {
    animation: none;
    translate: none;
    background: var(--cd-status-approved-bg);
    border-color: rgba(60, 122, 18, .32);
  }
  .theme-bento .cd-bars__nota { animation: none; left: 95%; opacity: 1; }
}

/* Moldura comum da arte: fixa a altura nos dois cards para os selos, a arte e
   as legendas baterem na mesma linha lado a lado. */
.theme-bento .cd-mockup__art {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 108px;
}

/* ---- 3. gráfico ---- */
.theme-bento .cd-mockup__chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 92px;
  margin-top: auto;
}
.theme-bento .cd-mockup__chart i {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 3px 3px;
  background: var(--cd-bg-subtle);
  transform-origin: bottom;
  animation: cd-bento-bar 2.8s ease-in-out infinite;
}
.theme-bento .cd-mockup__chart i:nth-child(4) { background: var(--cd-brand-primary); }
.theme-bento .cd-mockup__chart i:nth-child(2) { animation-delay: .2s; }
.theme-bento .cd-mockup__chart i:nth-child(3) { animation-delay: .4s; }
.theme-bento .cd-mockup__chart i:nth-child(4) { animation-delay: .6s; }
.theme-bento .cd-mockup__chart i:nth-child(5) { animation-delay: .8s; }

/* ---- 4. integração ---- */
.theme-bento .cd-mockup--integra { align-items: center; justify-content: center; }
.theme-bento .cd-mockup__hub {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px; height: 50px;
  border-radius: 16px;
  background: var(--cd-brand-primary);
  color: var(--cd-text-on-accent);   /* preto sobre verde */
  font-size: 26px;
  animation: cd-bento-float 4s ease-in-out infinite;
}
.theme-bento .cd-mockup__nodes {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 10px;
}
.theme-bento .cd-mockup__nodes i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid var(--bento-line);
  color: var(--cd-text-secondary);
  font-size: 19px;
}


/* ---- link do card ---- */
.theme-bento .cd-card-product { display: flex; flex-direction: column; }
.theme-bento .cd-card-product h3 { margin-bottom: var(--cd-space-2); }
.theme-bento .cd-card-product p { color: var(--cd-text-secondary); }
.theme-bento .cd-card-product__go {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-space-2);
  margin-top: auto;
  padding-top: var(--cd-space-4);
  font-weight: 600;
  color: var(--cd-text-primary);
  text-decoration: none;
}
.theme-bento .cd-card-product__go .material-symbols-outlined {
  font-size: 18px;
  transition: translate var(--cd-duration) var(--cd-ease);
}
.theme-bento .cd-card-product:hover .cd-card-product__go { color: var(--cd-brand-primary-strong); }
.theme-bento .cd-card-product:hover .cd-card-product__go .material-symbols-outlined { translate: 4px 0; }

/* Cabeçalho de seção em duas colunas (título à esquerda, apoio à direita). */
.theme-bento .cd-section__head--split {
  display: grid;
  /* Espelha a grade dos cards (1fr 1fr, vão de 16px): com 1.35fr/1fr e vão de
     32px a coluna direita começava 92px à direita do segundo card e o texto de
     apoio ficava solto no ar. Se a grade dos cards mudar, esta muda junto. */
  grid-template-columns: 1fr 1fr;
  gap: var(--cd-space-4);
  align-items: end;
  margin-bottom: var(--cd-space-8);
}
@media (max-width: 900px) {
  .theme-bento .cd-section__head--split { grid-template-columns: 1fr; gap: var(--cd-space-4); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-bento .cd-mockup__scan,
  .theme-bento .cd-mockup__chart i,
  .theme-bento .cd-mockup__hub { animation: none; }
}

/* ============================================================
   Planos (bloco de destaques com um card "mais popular")

   Reaproveita `.cd-highlight`: o item do MEIO recebe o tratamento escuro.
   Marcar por posição evita depender de um campo novo no CMS.
   ============================================================ */
.theme-bento .cd-pricing .cd-highlight-list {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}
.theme-bento .cd-pricing .cd-highlight:nth-child(2) {
  background: var(--bento-dark);
  border-color: rgba(255, 255, 255, .12);
  box-shadow: var(--bento-shadow-dark);
  color: #FFFFFF;
  position: relative;
}
.theme-bento .cd-pricing .cd-highlight:nth-child(2) .cd-highlight__title { color: #FFFFFF; }
.theme-bento .cd-pricing .cd-highlight:nth-child(2) .cd-highlight__text { color: #C7CDD6; }
.theme-bento .cd-pricing .cd-highlight:nth-child(2)::before {
  content: "Mais escolhido";
  position: absolute;
  top: var(--cd-space-4);
  right: var(--cd-space-4);
  padding: 5px 12px;
  border-radius: var(--cd-radius-pill);
  background: var(--cd-brand-primary);
  color: var(--cd-text-on-accent);   /* preto sobre verde */
  font-size: 11px;
  font-weight: 700;
}
.theme-bento .cd-pricing .cd-highlight:nth-child(2) .cd-highlight__icon {
  background: rgba(147, 249, 78, .16);
  color: var(--cd-brand-primary);
}





/* ============================================================
   Fecho — painel do CTA

   CLARO, não preto. A regra 4 do CLAUDE.md é explícita: "nem o site nem o CRM
   usam fundo preto". As versões escuras deste painel contrariavam a
   constituição do projeto além de ficarem pesadas no fim de uma página clara.

   A cor entra como LUZ, não como bloco: duas manchas difusas de marca e acento
   sobre superfície branca. Nada com contorno, então nada atravessa uma letra —
   foi o defeito das versões com malha riscada e anéis tracejados.
   ============================================================ */
.theme-bento .cd-cta--bento { padding-block: var(--cd-section-py); }
.theme-bento .cd-cta__panel {
  position: relative;
  /* `overflow: clip`, não `hidden` nem `clip-path`:
     - `hidden` cria um CONTÊINER DE ROLAGEM, e `animation-timeline: view()`
       resolve contra o scroller mais próximo — a paralaxe do carro media contra
       este painel, que não rola, e congelava em 50% (medido).
     - `clip-path` recorta o desenho mas NÃO tira o elemento da área rolável: a
       escala da paralaxe vazava e criava 119px de scroll horizontal (medido).
     `clip` recorta de verdade e não vira scroller. */
  overflow: clip;
  padding: clamp(48px, 7vw, 96px) clamp(24px, 5vw, 64px);
  text-align: center;
  border-radius: 28px;
  border: 1px solid var(--cd-border-muted);
  background: #FFFFFF;
  box-shadow: 0 24px 60px -34px rgba(20, 24, 29, .28);
}
/* Aurora: manchas de luz respirando nas quinas. Difusa de propósito —
   é ambiente, não desenho. */
.theme-bento .cd-cta__aurora {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(40% 44% at 18% 6%, rgba(147, 249, 78, .30), transparent 70%),
    radial-gradient(44% 48% at 84% 94%, rgba(109, 104, 211, .20), transparent 70%);
  filter: blur(26px);
  animation: cd-bento-aurora 16s ease-in-out infinite alternate;
}
@keyframes cd-bento-aurora {
  from { opacity: .7; translate: -2% 0; }
  to   { opacity: 1;  translate: 2% -2%; }
}

.theme-bento .cd-cta__content {
  position: relative;
  z-index: 1;
  /* Largura de leitura: sem isto o painel vira uma faixa larguíssima com um
     bloquinho de texto perdido no centro. */
  max-width: 620px;
  margin-inline: auto;
}


.theme-bento .cd-cta__title {
  color: var(--cd-text-primary);
  margin-bottom: var(--cd-space-3);
  letter-spacing: -.02em;
}
.theme-bento .cd-cta__subtitle { color: var(--cd-text-secondary); margin-inline: auto; max-width: 46ch; }

/* ---- botão e halo ---- */
.theme-bento .cd-cta__actions {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cd-space-5);
  flex-wrap: wrap;
  margin-top: clamp(32px, 4vw, 48px);
}
.theme-bento .cd-cta__cta,
.theme-bento .cd-cta__secondary { position: relative; z-index: 1; }
.theme-bento .cd-cta__cta { padding-inline: clamp(24px, 3vw, 34px); }
/* Halo: poça de luz difusa sob o botão. Sem contorno e bem borrado, então
   nunca "corta" nada, mesmo se a caixa alcançar o texto. */
.theme-bento .cd-cta__halo {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 260px;
  height: 120px;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(147, 249, 78, .45), transparent 100%);
  filter: blur(24px);
  animation: cd-bento-halo 3.6s ease-in-out infinite alternate;
}
@keyframes cd-bento-halo {
  from { opacity: .55; scale: .9; }
  to   { opacity: .95; scale: 1.08; }
}
.theme-bento .cd-cta__secondary {
  color: var(--cd-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--cd-border-muted);
  padding-bottom: 2px;
}
.theme-bento .cd-cta__secondary:hover { border-bottom-color: var(--cd-text-primary); }



/* ============================================================
   Gráfico de fluxo com a troca correndo por cima

   O traçado é o pulso do fluxo; sobre ele, o carro vai num sentido e o
   dinheiro no outro — o veículo entra como garantia e o crédito volta. Os dois
   seguem o MESMO `d` do traçado via <animateMotion>, então nunca descolam da
   linha, em qualquer largura de card.
   ============================================================ */
.theme-bento .cd-pulse-chart {
  /* Trava na largura nativa do viewBox (300). O `offset-path` dos ícones usa
     coordenadas em px do viewBox; se o SVG escalasse (width:100%) num card largo
     — como no mobile —, o caminho NÃO escalava junto e os ícones descolavam da
     linha. Fixando em 300px, 1 unidade SVG = 1px = 1 unidade do offset-path em
     qualquer tela. O card centraliza via flex (cd-mockup__art). */
  width: 300px;
  max-width: 100%;
  /* Escala uniforme: esticar o eixo X deformaria os ícones junto com a linha,
     por isso NÃO há preserveAspectRatio="none" aqui. */
  aspect-ratio: 300 / 96;
  overflow: visible;
}
.theme-bento .cd-pulse-chart__base,
.theme-bento .cd-pulse-chart__line {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.theme-bento .cd-pulse-chart__base { stroke: var(--cd-border-muted); }
.theme-bento .cd-pulse-chart__line {
  stroke: url(#cd-pulse-fade);
  /* 640 cobre com folga o comprimento do caminho; o traço "cresce" da esquerda
     para a direita e recomeça. */
  stroke-dasharray: 640;
  stroke-dashoffset: 640;
  animation: cd-pulse-draw 5.2s linear infinite;
}
@keyframes cd-pulse-draw {
  0%   { stroke-dashoffset: 640; }
  72%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ---- os dois viajantes ---- */
.theme-bento .cd-pulse-chart__disc {
  fill: #FFFFFF;
  stroke: var(--cd-border-muted);
  stroke-width: 1;
}
.theme-bento .cd-pulse-chart__glifo {
  /* Mesma biblioteca de ícones do resto do site; aqui via ligadura, que é o
     modo suportado da fonte dentro de <text>. */
  font-family: "Material Symbols Outlined";
  font-size: 15px;
  text-anchor: middle;
  dominant-baseline: central;
  fill: var(--cd-text-primary);
}
.theme-bento .cd-pulse-chart__glifo--cash {
  fill: var(--cd-brand-primary-strong);
  font-size: 18px;
}

/* ---- travessia por caminho de movimento (CSS, não SMIL) ---- */
/* O `path()` abaixo é o MESMO `d` do traçado no template — se um mudar, o
   outro tem que mudar junto, senão os ícones descolam da linha.

   Por que não <animateMotion>: SMIL ignora `prefers-reduced-motion`. Com ele os
   ícones seguiam correndo mesmo com movimento reduzido ligado (medido). Com
   `offset-path` a media query desliga tudo de uma vez. */
.theme-bento .cd-pulse-chart__car,
.theme-bento .cd-pulse-chart__cash {
  offset-path: path("M0 62 H70 l14 -26 l16 44 l14 -32 l18 22 h32 l16 -40 l18 52 l14 -22 H300");
  /* Sem isto os ícones giram junto com a inclinação do traçado. */
  offset-rotate: 0deg;
  animation: cd-pulse-travessia 5.2s linear infinite;
}
.theme-bento .cd-pulse-chart__cash {
  animation-direction: reverse;
  animation-delay: -2.6s;
}
@keyframes cd-pulse-travessia {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

/* Poeirinha atrás do carro: três bolinhas que incham e somem em sequência. */
.theme-bento .cd-pulse-chart__dust {
  fill: var(--cd-text-muted, #9AA3AE);
  opacity: 0;
  animation: cd-pulse-poeira 1s ease-out infinite;
}
.theme-bento .cd-pulse-chart__dust:nth-child(2) { animation-delay: .18s; }
.theme-bento .cd-pulse-chart__dust:nth-child(3) { animation-delay: .36s; }
@keyframes cd-pulse-poeira {
  0%   { opacity: .55; scale: .5; }
  100% { opacity: 0;   scale: 1.6; }
}

.theme-bento .cd-swap__legend {
  display: flex;
  justify-content: space-between;
  gap: var(--cd-space-3);
  font-size: 11px;
  color: var(--cd-text-secondary);
}
.theme-bento .cd-swap__legend > span { display: inline-flex; align-items: center; gap: 5px; }
.theme-bento .cd-swap__legend .material-symbols-outlined {
  font-size: 13px;
  color: var(--cd-brand-primary-strong);
}

@media (prefers-reduced-motion: reduce) {
  .theme-bento .cd-pulse-chart__line { animation: none; stroke-dashoffset: 0; }
  /* `display: none` esconde, mas não para a animação — o motor continua
     rodando atrás. Desligar explicitamente é o que cumpre a preferência. */
  .theme-bento .cd-pulse-chart__dust { display: none; animation: none; }
  /* Sem movimento os dois param em pontos distintos do traçado — a leitura da
     troca continua de pé, e a legenda abaixo diz o resto. */
  .theme-bento .cd-pulse-chart__car { animation: none; offset-distance: 22%; }
  .theme-bento .cd-pulse-chart__cash { animation: none; offset-distance: 72%; }
}



/* ============================================================
   Entrada escalonada do fecho, guiada pelo scroll

   `animation-timeline: view()` amarra o progresso da animação à posição da
   seção na viewport: o conteúdo se monta enquanto a pessoa rola, e desmonta se
   ela rolar de volta. Sem JS e sem biblioteca.

   Onde não houver suporte, o @supports simplesmente não aplica e o conteúdo
   aparece pronto — degradação silenciosa, nada some.
   ============================================================ */
@supports (animation-timeline: view()) {
  @keyframes cd-bento-cta-in {
    from { opacity: 0; translate: 0 26px; }
    to   { opacity: 1; translate: 0 0; }
  }
  .theme-bento .cd-cta__title,
  .theme-bento .cd-cta__subtitle,
  .theme-bento .cd-cta__actions,
  .theme-bento .cd-cta__actions {
    animation: cd-bento-cta-in linear both;
    animation-timeline: view();
  }
  /* O escalonamento vem do RANGE, não de delay: cada elemento completa sua
     entrada num trecho diferente do scroll, então a sequência acontece mesmo
     quando a pessoa rola devagar. */
  .theme-bento .cd-cta__title    { animation-range: entry 10% cover 26%; }
  .theme-bento .cd-cta__subtitle { animation-range: entry 18% cover 32%; }
  .theme-bento .cd-cta__actions  { animation-range: entry 26% cover 38%; }
}

@media (prefers-reduced-motion: reduce) {
  .theme-bento .cd-cta__halo,
  .theme-bento .cd-cta__aurora { animation: none; }
  .theme-bento .cd-cta__title,
  .theme-bento .cd-cta__subtitle,
  .theme-bento .cd-cta__actions,
  .theme-bento .cd-cta__actions {
    animation: none;
    opacity: 1;
    translate: none;
  }
}

/* ============================================================
   Movimento reduzido — última palavra

   Este bloco fica no FIM do arquivo de propósito: regras de rotação e hover
   são declaradas ao longo do tema, e uma exceção declarada antes delas perde
   na cascata. Foi o que aconteceu com a rotação dos depoimentos.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .theme-bento .cd-testimonial,
  .theme-bento .cd-testimonial:nth-child(4n+1),
  .theme-bento .cd-testimonial:nth-child(4n+2),
  .theme-bento .cd-testimonial:nth-child(4n+3),
  .theme-bento .cd-testimonial:nth-child(4n+4),
  .theme-bento .cd-testimonial:hover {
    rotate: none;
    translate: none;
    scale: none;
  }
}

/* ---------------------------------------------------------------- logotipo */
/* O bento tem navbar mais alta que os outros temas (76px), então a marca pode
   e deve ocupar mais. Com 52px ela ficava perdida na barra. */
.theme-bento { --cd-logo-height: 64px; --cd-logo-height-footer: 52px; }
.theme-bento .cd-site-header .cd-container,
.theme-bento .cd-site-header > .cd-row { padding-block: var(--cd-space-3); }

/* ============================================================ carro na 1ª seção
   O carro (vídeo girando na plataforma) fica numa MOLDURA estilizada à direita do
   hero, com glow verde do palco, overlays em vidro e um CTA flutuante. O loop é
   em crossfade (dois vídeos), então a virada início→fim não picota. Fica pinado
   (`position: sticky`, sem dependência externa) enquanto a página desce. */
/* O carro acompanha as SEÇÕES via pin em JS (site.js). A coluna direita segura o
   espaço (placeholder); a moldura vira `fixed` enquanto acompanha e solta antes
   do rodapé. Sem JS/reduced-motion/mobile, fica em fluxo normal aqui. */
.theme-bento .cd-hero__grid { align-items: start; }
.theme-bento .cd-hero--bento .cd-hero__side { align-self: start; position: relative; }

.cd-carframe { position: relative; width: 100%; max-width: 420px; margin-left: auto; margin-right: -20px; padding-bottom: 30px; cursor: grab; }
.cd-carframe.is-dragging { cursor: grabbing; }
.cd-carframe__glow {
  position: absolute; left: -8%; right: -8%; bottom: -2%; height: 60%;
  background: radial-gradient(60% 60% at 50% 72%, rgba(147,249,78,.30), transparent 72%);
  filter: blur(34px); z-index: -1; pointer-events: none;
}
.cd-carframe__screen {
  position: relative; aspect-ratio: 16 / 10; border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, #EEF0F3 0%, #E1E4EA 100%);
  box-shadow: 0 44px 90px -46px rgba(20,24,29,.55), inset 0 0 0 1px rgba(255,255,255,.6);
}
.cd-carframe__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease; }
.cd-carframe__video.is-front { opacity: 1; }
.cd-carframe__badge, .cd-carframe__tag {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px; background: rgba(15,18,22,.52); color: #FFFFFF;
  font-size: 12.5px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.cd-carframe__badge { top: 14px; left: 14px; }
.cd-carframe__tag { bottom: 14px; left: 14px; font-size: 12px; }
.cd-carframe__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cd-brand-primary); animation: cdCarPulse 1.9s ease-out infinite; }
.cd-carframe__cta {
  /* alinhado ao rodapé da moldura (mesma altura do "Simule em 2 minutos"), fora
     da plataforma, e saindo um pouco mais para fora à direita. */
  position: absolute; right: -30px; bottom: 66px; z-index: 3; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 24px; border-radius: 15px;
  background: var(--cd-brand-primary); color: #000000; font-weight: 700; font-size: 15px; text-decoration: none;
  box-shadow: 0 18px 34px -14px rgba(147,249,78,.7); transition: transform .12s ease, filter .12s ease;
}
.cd-carframe__cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.cd-carframe__cta .material-symbols-outlined { font-size: 20px; }
@keyframes cdCarPulse { 0% { box-shadow: 0 0 0 0 rgba(147,249,78,.5); } 70% { box-shadow: 0 0 0 9px rgba(147,249,78,0); } 100% { box-shadow: 0 0 0 0 rgba(147,249,78,0); } }

@media (max-width: 860px) {
  .theme-bento .cd-hero--bento .cd-hero__side { position: static; }
  .cd-carframe { max-width: none; margin: 26px 0 0; }
}

/* ============================================================ refino de seções
   Equipe, FAQ e CTA final: cartões mais bonitos, hover no verde da marca e
   microanimações. Verde como TEXTO usa o tom acessível (brand-primary-strong);
   o neon fica só em anel/borda/brilho. */

/* ---- Equipe (retratos): anel verde + nome verde no hover ---- */
.theme-bento .cd-portrait { transition: transform var(--cd-duration) var(--cd-ease), box-shadow var(--cd-duration) var(--cd-ease); }
.theme-bento .cd-portrait::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 0 var(--cd-brand-primary); transition: box-shadow .2s var(--cd-ease);
}
.theme-bento .cd-portrait:hover::after { box-shadow: inset 0 0 0 2px var(--cd-brand-primary); }
.theme-bento .cd-portrait:hover { box-shadow: 0 20px 44px -22px rgba(147, 249, 78, .35), var(--bento-shadow-lift); }
.theme-bento .cd-portrait__caption strong { transition: color .18s ease; }
.theme-bento .cd-portrait:hover .cd-portrait__caption strong { color: var(--cd-brand-primary); }

/* ---- FAQ: cards escuros com tile de ícone verde (estilo dos cards da marca) ---- */
.theme-bento .cd-faq__item {
  background: linear-gradient(160deg, #20272F 0%, var(--cd-ink) 82%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 14px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.theme-bento .cd-faq__question {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px;
  font-weight: 700; font-size: 16px; color: #FFFFFF;
}
.theme-bento .cd-faq__question::-webkit-details-marker { display: none; }
.theme-bento .cd-faq__question::before {
  content: "quiz";
  font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; line-height: 1;
  font-feature-settings: "liga"; -webkit-font-feature-settings: "liga";
  font-size: 22px; flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 11px; background: rgba(147, 249, 78, .14); border: 1px solid rgba(147, 249, 78, .24);
  color: var(--cd-brand-primary);
}
.theme-bento .cd-faq__question > span:first-of-type { flex: 1 1 auto; }
.theme-bento .cd-faq__chevron { color: rgba(255, 255, 255, .5); flex: 0 0 auto; }
.theme-bento .cd-faq__item:hover { border-color: rgba(147, 249, 78, .42); box-shadow: 0 14px 34px -22px rgba(147, 249, 78, .3); }
.theme-bento .cd-faq__item[open] { border-color: rgba(147, 249, 78, .5); }
.theme-bento .cd-faq__item[open] .cd-faq__chevron { color: var(--cd-brand-primary); }
.theme-bento .cd-faq__answer { padding-top: 14px; padding-left: 56px; color: rgba(255, 255, 255, .72); line-height: 1.6; }
.theme-bento .cd-faq__item[open] .cd-faq__answer { animation: cd-faq-open .34s var(--cd-ease); }
@keyframes cd-faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---- CTA final: reformulado como painel INK com brilho verde ---- */
.theme-bento .cd-cta__panel {
  background: linear-gradient(158deg, #20272F 0%, var(--cd-ink) 62%);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 40px 90px -46px rgba(20, 24, 29, .6);
}
.theme-bento .cd-cta__panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--cd-brand-primary);
}
.theme-bento .cd-cta__aurora {
  background:
    radial-gradient(42% 46% at 16% 4%, rgba(147, 249, 78, .34), transparent 70%),
    radial-gradient(46% 50% at 86% 96%, rgba(147, 249, 78, .16), transparent 70%);
}
.theme-bento .cd-cta__title { color: #FFFFFF; font-size: clamp(28px, 3.6vw, 46px); font-weight: 800; }
.theme-bento .cd-cta__subtitle { color: rgba(255, 255, 255, .68); }
.theme-bento .cd-cta__cta {
  border-radius: 14px; font-weight: 700; box-shadow: 0 18px 34px -14px rgba(147, 249, 78, .6);
  transition: transform .12s ease, filter .12s ease;
}
.theme-bento .cd-cta__cta:hover { transform: translateY(-1px); filter: brightness(1.05); }
.theme-bento .cd-cta__secondary { color: rgba(255, 255, 255, .8); border-bottom-color: rgba(255, 255, 255, .3); }
.theme-bento .cd-cta__secondary:hover { color: #FFFFFF; border-bottom-color: var(--cd-brand-primary); }

/* ---- gráficos de aprovação no CTA (medidor + barras), CSS/SVG puro ---- */
.theme-bento .cd-cta-stats {
  display: flex; justify-content: center; align-items: flex-end; gap: clamp(28px, 6vw, 72px);
  flex-wrap: wrap; margin: clamp(28px, 4vw, 44px) auto 0;
}
.theme-bento .cd-cta-stat { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.theme-bento .cd-cta-stat__label { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }

.theme-bento .cd-cta-gauge { position: relative; width: 132px; height: 132px; }
.theme-bento .cd-cta-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.theme-bento .cd-cta-gauge circle { fill: none; stroke-width: 11; }
.theme-bento .cd-cta-gauge__track { stroke: rgba(255, 255, 255, .12); }
.theme-bento .cd-cta-gauge__arc { stroke: var(--cd-brand-primary); stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 26; }
.theme-bento .cd-cta-gauge__num { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 800; color: #FFFFFF; }

.theme-bento .cd-cta-bars { display: flex; align-items: flex-end; gap: 9px; height: 132px; }
.theme-bento .cd-cta-bars i { width: 16px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, var(--cd-brand-primary), #5FAE32); height: var(--h); transform: scaleY(1); transform-origin: bottom; }

.theme-bento .cd-cta--bento.is-revealed .cd-cta-gauge__arc { animation: cd-gauge-fill 1.4s .2s var(--cd-ease) both; }
@keyframes cd-gauge-fill { from { stroke-dashoffset: 327; } to { stroke-dashoffset: 26; } }
.theme-bento .cd-cta--bento.is-revealed .cd-cta-bars i { animation: cd-bar-rise .8s var(--cd-ease) both; }
.theme-bento .cd-cta--bento.is-revealed .cd-cta-bars i:nth-child(1) { animation-delay: .15s; }
.theme-bento .cd-cta--bento.is-revealed .cd-cta-bars i:nth-child(2) { animation-delay: .25s; }
.theme-bento .cd-cta--bento.is-revealed .cd-cta-bars i:nth-child(3) { animation-delay: .35s; }
.theme-bento .cd-cta--bento.is-revealed .cd-cta-bars i:nth-child(4) { animation-delay: .45s; }
.theme-bento .cd-cta--bento.is-revealed .cd-cta-bars i:nth-child(5) { animation-delay: .55s; }
.theme-bento .cd-cta--bento.is-revealed .cd-cta-bars i:nth-child(6) { animation-delay: .65s; }
@keyframes cd-bar-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 560px) { .theme-bento .cd-cta-gauge, .theme-bento .cd-cta-bars { transform: scale(.9); } }