/* -------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------- */

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* -------------------------------------------------------------
   BUTTONS
   v4: Primary muda — gradiente azul + radius 15px + padding 12×36
   v4 adiciona: Login amarelo
   ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: var(--w-med);
  font-size: var(--fs-18);
  line-height: 1;
  padding: 12px 36px;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }

/* Primary CTA — gradiente azul, brandbook */
.btn--primary {
  background: var(--grad-cta);
  color: var(--white);
  box-shadow: var(--sh-cta);
}
.btn--primary:hover {
  background: linear-gradient(90deg, var(--azure-light-70), var(--azure-deep-70));
}
.btn--primary:active {
  background: linear-gradient(90deg, var(--azure-deep), var(--azure-deep));
}

/* Login — amarelo dedicado, brandbook */
.btn--login {
  background: var(--yellow-login);
  color: var(--ink);
  font-weight: var(--w-bold);
  border-radius: var(--r-btn-login);
}
.btn--login:hover {
  background: var(--yellow);
}

/* Ghost — contorno azul deep */
.btn--ghost {
  background: transparent;
  color: var(--azure-deep);
  border: 1px solid var(--azure-deep);
}
.btn--ghost:hover {
  background: var(--azure-deep);
  color: var(--white);
}

/* Light — pra usar em cima de fundos escuros/gradiente */
.btn--light {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
}
.btn--light:hover {
  background: var(--white-a60);
  color: var(--azure-deep);
}

/* Tamanhos */
.btn--sm { padding: 8px 20px; font-size: var(--fs-14); }
.btn--lg { padding: 16px 44px; font-size: var(--fs-20); }

/* -------------------------------------------------------------
   CHIPS / TAGS
   Brandbook mostra pílulas: Destinos (azul), Promoção (amarelo),
   Guia básico (azul claro). Mapeamos em variantes.
   ------------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--fs-13);
  line-height: 1;
  background: var(--paper-2);
  color: var(--ink-2);
  border: 1px solid transparent;
}
.chip--azure       { background: var(--azure-deep);    color: var(--white); }
.chip--azure-tint  { background: var(--azure-light-10); color: var(--azure-deep); }
.chip--yellow      { background: var(--yellow);        color: var(--ink); }
.chip--ok          { background: var(--ok-tint);       color: var(--ok); }

/* -------------------------------------------------------------
   STATUS — dot + label
   ------------------------------------------------------------- */

.status--ok   { color: var(--ok); }

/* -------------------------------------------------------------
   CARDS
   ------------------------------------------------------------- */

.card {
  background: var(--white);
  border: var(--bd);
  border-radius: var(--r-4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur-2) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.card__body { padding: var(--s-6); flex: 1 1 auto; }
.card__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--azure-deep);
  margin-bottom: var(--s-3);
}
.card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--w-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  margin: 0 0 var(--s-2);
}
.card__text {
  color: var(--ink-2);
  font-size: var(--fs-16);
  font-weight: var(--w-light);
  line-height: var(--lh-body);
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: var(--s-4) var(--s-6) 0;
  padding-top: var(--s-4);
  padding-bottom: var(--s-6);
  border-top: var(--bd);
  font-size: var(--fs-12);
  color: var(--ink-3);
}

/* Featured — fundo gradient ÊNFASE (v5 promove de azure-deep solid).
   Use pra card de destaque máximo (1 por grid). */
.card--featured {
  background: var(--grad-emphasis);
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 12px 28px -8px rgba(0, 77, 117, 0.40);
}
.card--featured .card__eyebrow { color: var(--azure-light); }
.card--featured .card__title   { color: var(--white); }
.card--featured .card__text    { color: var(--white-a80); }
.card--featured .card__foot    {
  border-top-color: var(--white-a60);
  color: var(--white-a80);
}
.card--featured:hover {
  box-shadow: 0 12px 32px -8px rgba(0,76,230,0.40);
}

/* Card com mídia em gradiente (substitui hero-card editorial do v3) */
.card--gradient .card__eyebrow { color: var(--azure-light-40); }
.card--gradient .card__title,
.card--gradient .card__text { color: var(--white); }

/* -------------------------------------------------------------
   HEADER / NAV — gradient (peça-chave do brandbook)
   ------------------------------------------------------------- */

.header {
  background: var(--grad-header);
  color: var(--white);
  padding: var(--s-4) 0;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--white);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-tight);
}
.header__nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.nav-link {
  color: var(--white);
  font-size: var(--fs-15);
  font-weight: var(--w-med);
  padding: 8px 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out);
}
.nav-link:hover,
.nav-link[aria-current="page"] {
  border-bottom-color: var(--white);
}

/* Variante "scrolled" — quando o header passa a ter fundo sólido */
.header--solid {
  background: var(--white);
  color: var(--ink);
  border-bottom: var(--bd);
  box-shadow: var(--sh-1);
}
.header--solid .header__brand,
.header--solid .nav-link { color: var(--ink); }
.header--solid .nav-link:hover,
.header--solid .nav-link[aria-current="page"] { border-bottom-color: var(--azure-deep); }

/* -------------------------------------------------------------
   HEADER — MENU MOBILE (hambúrguer + dropdown)
   No desktop o .header__menu é display:contents (some da árvore
   de layout) — nav + actions ficam como filhos diretos do __inner,
   exatamente como antes. No mobile (≤768px) ele vira um painel
   absoluto que desce sob o header. O hambúrguer (.header__toggle)
   só aparece no mobile e ao abrir força o header em estado sólido
   (fundo branco, marca azul) — ver bloco .is-menu-open em 03-guia-bancos.
   ------------------------------------------------------------- */
.header__menu { display: contents; }

.header__toggle {
  display: none;            /* visível só no mobile (media query abaixo) */
  position: relative;
  width: 44px; height: 44px;
  margin: calc(var(--s-2) * -1) calc(var(--s-2) * -1) calc(var(--s-2) * -1) 0;
  padding: 0; border: 0; background: transparent; cursor: pointer;
  color: var(--white);      /* currentColor controla a cor das barras */
  flex: none;
  -webkit-tap-highlight-color: transparent;
}
.header--solid .header__toggle,
.header.is-menu-open .header__toggle { color: var(--ink); }

.header__toggle-bars,
.header__toggle-bars::before,
.header__toggle-bars::after {
  position: absolute; left: 50%; top: 50%;
  width: 22px; height: 2px; margin-left: -11px;
  background: currentColor; border-radius: 2px;
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.header__toggle-bars { margin-top: -1px; }
.header__toggle-bars::before { content: ""; transform: translateY(-7px); }
.header__toggle-bars::after  { content: ""; transform: translateY(7px); }

/* hambúrguer → X quando aberto */
.header.is-menu-open .header__toggle-bars { background: transparent; }
.header.is-menu-open .header__toggle-bars::before { transform: translateY(0) rotate(45deg); }
.header.is-menu-open .header__toggle-bars::after  { transform: translateY(0) rotate(-45deg); }

/* -------------------------------------------------------------
   HERO / BANNER
   ------------------------------------------------------------- */

.hero {
  padding: var(--s-20) 0 var(--s-16);
}
.hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--azure-deep);
  margin-bottom: var(--s-4);
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, var(--fs-60));
  font-weight: var(--w-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h1);
  color: var(--ink);
  margin: 0 0 var(--s-4);
}
.hero__lead {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--w-light);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 60ch;
  margin: 0 0 var(--s-6);
}

/* -------------------------------------------------------------
   SECTION — incluindo a "Seção Guia" do brandbook (gradient)
   ------------------------------------------------------------- */

.section {
  padding: var(--s-16) 0;
}
.section--ink .u-h1,
.section--ink .u-h2,
.section--ink .u-h3 { color: var(--white); }

/* Seção Guia — fundo gradient, alta visibilidade. Brandbook. */
.section--guia .u-h1,
.section--guia .u-h2,
.section--guia .u-h3,
.section--guia .u-banner-title,
.section--guia .u-section-title,
.section--guia .u-info-title { color: var(--white); }
.section--guia .u-eyebrow { color: var(--azure-light-40); }
.section--guia .u-body,
.section--guia .u-lead { color: var(--white-a80); }

/* -------------------------------------------------------------
   NOTES / CALLOUTS
   ------------------------------------------------------------- */

.note {
  padding: var(--s-4) var(--s-5);
  border-left: 3px solid var(--ink);
  background: var(--paper-2);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  font-size: var(--fs-15);
  color: var(--ink-2);
}
.note__title {
  display: block;
  font-weight: var(--w-bold);
  color: var(--ink);
  margin-bottom: var(--s-1);
}
.note--azure  { border-left-color: var(--azure-deep);  background: var(--azure-light-10); }
.note--azure .note__title { color: var(--azure-deep); }
.note--yellow { border-left-color: var(--orange);      background: var(--yellow-10); }
.note--yellow .note__title { color: var(--orange); }
.note--ok     { border-left-color: var(--ok);          background: var(--ok-tint); }
.note--ok     .note__title { color: var(--ok); }
.note--err    { border-left-color: var(--err);         background: var(--err-tint); }

/* -------------------------------------------------------------
   FAQ — disclosure
   ------------------------------------------------------------- */

.faq { border-top: var(--bd); }
.faq details {
  border-bottom: var(--bd);
  padding: var(--s-4) 0;
}
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  font-weight: var(--w-bold);
  color: var(--ink);
  padding: var(--s-2) 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: var(--fs-24);
  color: var(--azure-deep);
  transition: transform var(--dur-2) var(--ease-out);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer {
  padding: var(--s-3) 0 0;
  color: var(--ink-2);
  font-size: var(--fs-16);
  font-weight: var(--w-light);
  line-height: var(--lh-body);
}

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */

.footer {
  background: var(--grad-header);
  color: var(--white-a80);
  padding: var(--s-16) 0 var(--s-8);
}
/* v4 footer bg era --ink. v5 herda gradient do header pra continuidade visual. */
.footer a { color: var(--white); }
.footer a:hover { color: var(--azure-light); }
.footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--s-8);
}
.footer__heading {
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--s-3);
}
.footer__bottom {
  margin-top: var(--s-10);
  padding-top: var(--s-5);
  border-top: 1px solid var(--white-a60);
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-12);
  color: var(--white-a80);
}

/* -------------------------------------------------------------
   RESPONSIVE TWEAKS — só o essencial
   ------------------------------------------------------------- */

@media (max-width: 768px) {
  /* Footer mobile: marca full-width no topo, colunas de links em grid 2-col
     compacto logo abaixo. Evita o stack 1-col que deixava o rodapé enorme. */
  .footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-6) var(--s-5);
  }
  .footer__brand-block { grid-column: 1 / -1; }
  .footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    text-align: center;
  }
  .hero { padding: var(--s-12) 0 var(--s-10); }
  .section { padding: var(--s-12) 0; }
}
@media (max-width: 480px) {
  /* Mantém 2 colunas no celular (era 1fr → rodapé longo demais); só aperta. */
  .footer { padding: var(--s-10) 0 var(--s-6); }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5) var(--s-4); }
  .footer__heading { margin-bottom: var(--s-2); }
  .btn { padding: 12px 24px; font-size: var(--fs-16); }
  .btn--lg { padding: 14px 32px; font-size: var(--fs-18); }
}

/* MENU MOBILE — ≤768px: troca a nav inline pelo dropdown do hambúrguer.
   O __inner vira o âncora do painel absoluto; nav + actions empilham. */
@media (max-width: 768px) {
  .header__toggle { display: block; }

  /* Painel ancorado no .header (sticky → containing block), NÃO no __inner:
     o __inner vive dentro do .container (com padding lateral), então ancorar
     nele deixava o painel inset (faixas nas laterais) e o top dentro do padding
     do header (sobreposição). Ancorando no .header full-bleed, left/right:0 =
     bordas da viewport e top:100% = exatamente a base do header. */
  .header__menu {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white);
    border-top: var(--bd);
    box-shadow: var(--sh-2);
    max-height: calc(100vh - 100%);
    overflow-y: auto;
    visibility: hidden; opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--dur-1) var(--ease-out),
                transform var(--dur-1) var(--ease-out),
                visibility var(--dur-1) var(--ease-out);
  }
  .header.is-menu-open .header__menu {
    visibility: visible; opacity: 1; transform: translateY(0);
  }

  /* links viram linhas full-width com divisória */
  .header__nav {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--s-2) var(--s-5) 0;
  }
  .header__nav .nav-link {
    color: var(--ink);
    font-size: var(--fs-16);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--paper-3);
  }
  .header__nav .nav-link:hover { color: var(--azure-deep); }
  .header__nav .nav-link[aria-current="page"] {
    color: var(--azure-deep);
    font-weight: var(--w-bold);
    border-bottom: 2px solid var(--azure-deep);
  }

  /* CTA full-width no rodapé do painel */
  .header__actions { display: block; padding: var(--s-5); }
  .header__actions .btn { display: block; width: 100%; text-align: center; }
}

/* -------------------------------------------------------------
   FM-SECTION--EMPHASIS — variante da section--guia
   Usa --grad-emphasis (azul-petróleo vertical), mais pesado.
   Para sections de DADOS críticos: "5 erros que perdem milhas",
   stats grid, mega-tabelas, etc. Máximo 2 por página.
   ------------------------------------------------------------- */
.section--emphasis .u-h1,
.section--emphasis .u-h2,
.section--emphasis .u-h3,
.section--emphasis .u-banner-title,
.section--emphasis .u-section-title,
.section--emphasis .u-info-title { color: var(--white); }
.section--emphasis .u-eyebrow { color: var(--white); opacity: 0.85; }
.section--emphasis .u-body,
.section--emphasis .u-lead { color: var(--white); opacity: 0.88; }

/* -------------------------------------------------------------
   FM-HERO--GRADIENT — variante do .hero com bg gradient
   Usa --grad-section-guia (royal blue) por padrão. Adicione
   --emphasis pra usar --grad-emphasis.
   ------------------------------------------------------------- */
.hero--gradient {
  background: var(--grad-section-guia);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.hero--gradient::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -10%;
  width: 720px;
  height: 720px;
  background: radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 60%);
  border-radius: var(--r-pill);
  pointer-events: none;
  z-index: 0;
}
.hero--gradient > .container { position: relative; z-index: 1; }
.hero--gradient .hero__title { color: var(--white); }
.hero--gradient .hero__lead { color: var(--white); opacity: 0.85; }
/* A legenda do vídeo do hero usa .video-caption (cor --ink-3, pensada p/ fundo
   branco). Sobre o hero em gradiente ela fica ilegível — clareia como os demais
   elementos mudos do hero (breadcrumb, byline). NÃO afeta a .video-caption do
   corpo (fora de .hero--gradient). */
.hero--gradient .video-caption { color: var(--white-a80); }
.hero--gradient .hero__eyebrow { color: var(--azure-light-40); }

/* Variante split 50/50 com vídeo na direita (ou outro media) */
.hero--split > .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-12);
  align-items: center;
}
@media (max-width: 900px) {
  .hero--split > .container { grid-template-columns: 1fr; gap: var(--s-8); }
}
.hero--split .hero__cta .btn { width: max-content; max-width: 100%; }

/* Botão branco sólido sobre gradient (substitui btn--primary que sumiria) */
.hero--gradient .btn--primary {
  background: var(--white);
  color: var(--azure-deep);
  box-shadow: none;
}
.hero--gradient .btn--primary:hover { background: var(--azure-light-10); }
.hero--gradient .btn--ghost {
  color: var(--white);
  border-color: var(--white);
}
.hero--gradient .btn--ghost:hover { background: var(--white-a60); color: var(--azure-deep); }

/* =============================================================
   A. REGRAS SEMÂNTICAS DE COR  (decisões de marca)
   -------------------------------------------------------------
   Na identidade FM, "positivo" é AZUL e "negativo/ausência" é
   NEUTRO. Verde e vermelho ficam fora do vocabulário da página.
   O amarelo é sempre o amarelo da marca (#FCB100 / --yellow).
   ============================================================= */

:root {
  /* O gradiente de ênfase passa a usar o PAR AZUL da marca
     (azure-light → azure-deep), no lugar do azul-petróleo do DS.
     Recolore de uma vez: cabeçalho de tabela, painel de dados,
     card de CTA, números do timeline, barra de veredito, footer. */
  --grad-emphasis: linear-gradient(150deg, var(--azure-light) 0%, var(--azure-deep) 72%);
  /* Cabeçalho de tabela: gradiente quase vertical (182deg) pintado UMA vez
     na linha inteira — não por célula — para ser contínuo na largura toda. */
  --grad-table-head: linear-gradient(182deg, var(--azure-light) 0%, var(--azure-deep) 72%);
}

/* positivo / "sim" → azul da marca (NÃO verde) */
.chip--ok        { background: var(--azure-light-10); color: var(--azure-deep); }
.note--ok        { border-left-color: var(--azure-deep); background: var(--azure-light-10); }
.note--ok .note__title { color: var(--azure-deep); }
.status--ok      { color: var(--azure-deep); }

/* negativo / ausência → neutro (NÃO vermelho) */
.chip-no            { background: var(--paper-3); color: var(--ink-3); }

/* nota "amarela": barra + rótulo em SELO amarelo (texto escuro = legível).
   Amarelo puro como texto sobre fundo claro é ilegível — sempre use o selo. */
.note--yellow                 { border-left-color: var(--yellow); background: var(--yellow-10); }
.note--yellow .note__title {
  display: inline-block;
  background: var(--yellow); color: var(--ink);
  padding: 3px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-12); font-weight: var(--w-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  margin-bottom: var(--s-3);
}

/* Cores de TERCEIROS (bancos/programas): use a cor real da marca
   APENAS como acento de referência — nunca como cor da página. */
.ref-nubank   { --ref: #820AD1; }
.ref-itau     { --ref: #EC7000; }
.ref-bradesco { --ref: #CC092F; }

/* =============================================================
   B. HIERARQUIA + RITMO DE LEITURA
   -------------------------------------------------------------
   Cascata previsível H1 > H2 > H3 e uma MEDIDA de leitura real.
   Texto corre em ~68ch; blocos de dados rompem em largura cheia
   com a classe .bleed.
   ============================================================= */

.article            { font-family: var(--font-sans); }
.article > *        { max-width: 68ch; }       /* medida de leitura */
.article > .bleed   { max-width: none; }       /* dados em largura cheia */

.article h2 {
  font-size: var(--fs-40); font-weight: var(--w-bold);
  line-height: var(--lh-tight); letter-spacing: var(--ls-h2);
  color: var(--ink); margin: var(--s-16) 0 var(--s-5);
}
.article > section:first-child h2 { margin-top: 0; }

.article h3 {
  font-size: var(--fs-24); font-weight: var(--w-bold);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  color: var(--ink); margin: var(--s-10) 0 var(--s-4);
  padding-left: var(--s-4); border-left: 3px solid var(--azure-light);
}
/* Cor da prosa por HERANÇA (não em .article p), para painéis escuros nested
   (.calc/.ink-callout/.verdict, que setam color no container) herdarem texto
   claro. .article p com color explícito vencia os rótulos dos painéis por
   especificidade e escurecia texto sobre --grad-emphasis. */
.article { color: var(--ink-2); }
.article p {
  font-size: var(--fs-18); font-weight: var(--w-light);
  line-height: var(--lh-body); margin: 0 0 var(--s-5);
}
.article p strong { font-weight: var(--w-bold); }  /* sem color: herda do <p> */
.article a:not(.btn) {
  color: var(--azure-deep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.article a:not(.btn):hover { color: var(--azure-light); }

/* eyebrow de seção + ritmo entre seções */
.article section            { scroll-margin-top: 120px; }
.article section + section   { margin-top: var(--s-16); }
.sec-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--fs-12); font-weight: var(--w-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--azure-deep); margin: 0 0 var(--s-3);
}
.sec-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--azure-light);
}
.lead {
  font-size: var(--fs-20); font-weight: var(--w-light);
  line-height: var(--lh-body); color: var(--ink-2); margin: 0 0 var(--s-8);
}
.section-rule { border: none; border-top: 1px solid var(--paper-3); margin: var(--s-16) 0 0; max-width: none; }

/* utilitários de grid usados pelos blocos */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Barra de progresso de leitura (3px, gradiente da marca) */
.reading-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: var(--grad-header); z-index: 300; transition: width .12s linear;
}

/* Header transparente sobre o #hero-bg no topo (logo + links brancos); ao rolar
   vira branco sólido com logo azul + texto ink (.header--solid, alternado por
   JS). Cores de logo/links vêm de 02-components.css + estilos da página. */
.header,
.header--solid    { position: sticky; top: 0; z-index: 200; }
.header           { background: transparent; box-shadow: none; }
/* .is-menu-open: com o dropdown aberto o header é sempre sólido (mesmo
   sobre o #hero-bg), pra marca azul e barras escuras contrastarem no branco. */
.header--solid,
.header.is-menu-open { background: var(--white); box-shadow: var(--sh-1); }

/* Logo/selo da marca: branco sobre o #hero-bg no topo; azul quando o header
   vira sólido (.header--solid, alternado por JS) ou com o menu aberto. */
.brand-mark { height: 40px; width: auto; flex: none; display: block; }
.brand-logo { height: 30px; width: auto; display: block; }
.brand-mark--blue,
.brand-logo--blue { display: none; }
.header--solid .brand-mark--white,
.header--solid .brand-logo--white,
.header.is-menu-open .brand-mark--white,
.header.is-menu-open .brand-logo--white { display: none; }
.header--solid .brand-mark--blue,
.header--solid .brand-logo--blue,
.header.is-menu-open .brand-mark--blue,
.header.is-menu-open .brand-logo--blue { display: block; }

#hero-bg {
  position: absolute; top: 0; left: 0; width: 100%;
  z-index: -1; pointer-events: none;
  /* defina a imagem por página; o scrim escurece a esquerda p/ texto branco */
  background:
    linear-gradient(100deg, rgba(7,18,46,.66) 0%, rgba(7,18,46,.30) 40%, rgba(7,18,46,0) 64%),
    var(--hero-img, none);
  background-size: cover, cover; background-position: center, center; background-repeat: no-repeat;
}
/* Hero transparente: deixa a camada #hero-bg (foto de fundo) aparecer atrás do
   header + hero. Sem isto, o fundo opaco de .hero--gradient (02-components)
   cobre a imagem e o hero fica azul chapado. ::before content:none desliga o
   glow decorativo do DS que também tampava a foto. */
.hero--gradient { background: transparent; isolation: isolate; }
.hero--gradient::before { content: none; }

/* Byline de autor (sinal E-E-A-T) */
.byline { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-8);
          padding-top: var(--s-5); border-top: 1px solid var(--paper-3); }
.byline__avatar { width: 46px; height: 46px; flex: none; border-radius: var(--r-pill); overflow: hidden;
                  background: var(--grad-emphasis); color: #fff; display: flex; align-items: center; justify-content: center;
                  font-weight: var(--w-bold); }
.byline__avatar img { width: 100%; height: 100%; object-fit: cover; }
.byline__name { font-weight: var(--w-bold); color: var(--ink); font-size: var(--fs-15); }
.byline__meta { font-size: var(--fs-13); color: var(--ink-3); }
.hero--gradient .byline { border-top-color: var(--white-a60); }
.hero--gradient .byline__name { color: #fff; }
.hero--gradient .byline__meta { color: var(--white-a80); }

/* Sidebar widgets (TOC + base do card). Vivem AQUI (CSS linkado, carrega antes
   da page-scoped CSS) e não no <style> do layout — assim variantes da página
   como .side-cta (fundo gradiente) sobrescrevem .side-widget sem ser clobbradas
   pelo layout, que carrega depois do yield :head. */
.side-widget   { background: var(--white); border: var(--bd); border-radius: var(--r-6); padding: var(--s-6); }
.side-widget__title { font-size: var(--fs-12); font-weight: var(--w-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--s-4); }
.side-toc      { display: flex; flex-direction: column; }
.side-toc a    { display: grid; grid-template-columns: 26px 1fr; gap: var(--s-3); align-items: baseline; padding: var(--s-3); font-size: var(--fs-14); font-weight: var(--w-med); color: var(--ink-2); border-left: 2px solid transparent; text-decoration: none; }
.side-toc a .num { font-family: var(--font-mono); font-size: var(--fs-12); font-weight: var(--w-bold); color: var(--ink-4); }
.side-toc a:hover { background: var(--paper-2); color: var(--ink); }
.side-toc a.is-active { border-left-color: var(--azure-deep); background: var(--azure-light-10); color: var(--azure-deep); font-weight: var(--w-bold); }
.side-toc a.is-active .num { color: var(--azure-deep); }

/* D1 — TIMELINE VERTICAL (passos / fluxo) ------------------- */
.flow-vert  { display: flex; flex-direction: column; }
.flow-step  { display: grid; grid-template-columns: 48px 1fr; gap: var(--s-5); }
.flow-step__rail { display: flex; flex-direction: column; align-items: center; }
.flow-step__num  { width: 48px; height: 48px; flex: none; border-radius: var(--r-pill);
                   background: var(--grad-emphasis); color: #fff; font-family: var(--font-mono);
                   font-weight: var(--w-bold); font-size: var(--fs-16);
                   display: flex; align-items: center; justify-content: center; }
.flow-step__line { flex: 1; width: 2px; background: var(--paper-3); margin: var(--s-2) 0; }
.flow-step:last-child .flow-step__line { display: none; }
.flow-step__body { padding-bottom: var(--s-8); display: flex; flex-direction: column; gap: var(--s-3); }
.flow-step:last-child .flow-step__body { padding-bottom: 0; }
.flow-step h4 { font-size: var(--fs-20); font-weight: var(--w-bold); color: var(--ink); margin: 0; }
.flow-step p  { font-size: var(--fs-16); font-weight: var(--w-light); line-height: var(--lh-body);
                color: var(--ink-2); margin: 0; max-width: none; }

/* D2 — TABELA COMPARATIVA ---------------------------------- */
.card-table-wrap { overflow-x: auto; border: var(--bd); border-radius: var(--r-6); }
.card-table { width: 100%; border-collapse: collapse; font-size: var(--fs-15); min-width: 480px; }
/* gradiente contínuo na linha inteira (não por célula) */
.card-table thead tr { background: var(--grad-table-head); }
/* headers PODEM quebrar — "white-space: nowrap" forçava colunas largas com
   títulos compridos (ex.: "Pontos/ano (nacional)") e estourava a tabela. */
.card-table thead th { text-align: left; padding: var(--s-4) var(--s-5); color: #fff; background: transparent;
                       font-size: var(--fs-12); font-weight: var(--w-bold); text-transform: uppercase;
                       letter-spacing: var(--ls-wide); }
.card-table thead th:last-child, .card-table tbody td:last-child { text-align: right; }
.card-table tbody td { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--paper-3); color: var(--ink-2); vertical-align: middle; }
/* telas estreitas: tabela mais compacta antes de recorrer ao scroll do wrap */
@media (max-width: 640px) {
  .card-table { font-size: var(--fs-13); min-width: 0; }
  .card-table thead th, .card-table tbody td { padding: var(--s-3) var(--s-3); }
}
.tier-cell  { display: flex; align-items: center; gap: var(--s-3); }
.tier-swatch{ width: 44px; height: 29px; border-radius: var(--r-2); flex: none; box-shadow: var(--sh-1);
              position: relative; overflow: hidden; background: var(--grad-emphasis); }
.tier-swatch::after { content: ""; position: absolute; top: 6px; left: 6px; width: 9px; height: 7px;
              border-radius: 1px; background: linear-gradient(135deg, #D9B65A, #F6E27A); }
.tier-name  { font-weight: var(--w-bold); color: var(--ink); line-height: 1.2; }
.tier-sub   { font-size: var(--fs-12); color: var(--ink-3); }
.pts-val    { font-family: var(--font-mono); font-weight: var(--w-bold); color: var(--ink); }
.pts-val--off { color: var(--ink-4); }

/* D3 — GRÁFICO DE BARRAS (magnitude + linha de referência) -- */
.bar-chart { display: flex; flex-direction: column; gap: var(--s-4); }
.bar-chart__row { display: grid; grid-template-columns: 160px 1fr 84px; gap: var(--s-4); align-items: center; }
.bar-chart__label { font-size: var(--fs-15); font-weight: var(--w-med); color: #fff; white-space: nowrap; }
.bar-chart__track { height: 30px; background: rgba(255,255,255,.14); border-radius: var(--r-pill); position: relative; overflow: hidden; }
.bar-chart__fill  { height: 100%; border-radius: var(--r-pill); transition: width .7s var(--ease-out); }
.bar-chart__fill--solid  { background: var(--azure-light); }
.bar-chart__fill--medium { background: var(--azure-light-70); }
.bar-chart__fill--low    { background: var(--azure-light-40); }
.bar-chart__value { font-family: var(--font-mono); font-size: var(--fs-15); font-weight: var(--w-bold); color: #fff; text-align: right; white-space: nowrap; }
.bar-chart__ref-line { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--yellow); z-index: 2; }
/* Mobile: as colunas fixas (160px label / 84px value) + white-space:nowrap
   cortavam labels e values longos no viewport estreito. Encolhe as colunas e
   deixa o texto quebrar em vez de estourar/cortar. */
@media (max-width: 640px) {
  .bar-chart__row { grid-template-columns: 104px 1fr 72px; gap: var(--s-3); }
  /* especificidade (0,2,0): algumas páginas redefinem .bar-chart__value inline
     (carrega DEPOIS do CSS compartilhado) com white-space:nowrap, cortando
     valores longos ("~4% em compra"). O seletor descendente vence essas regras. */
  .bar-chart .bar-chart__label,
  .bar-chart .bar-chart__value { white-space: normal; word-break: break-word; font-size: var(--fs-13); }
}
/* Stat-callout / stat-panel: os números grandes (mono, fs-30/fs-40) têm
   white-space:nowrap definido inline em cada página. Valores compridos
   ("R$ 13 · R$ 16 · R$ 25") estouravam o viewport mobile. Guard compartilhado
   com especificidade (0,2,0) > a regra inline (0,1,0), só no mobile. */
@media (max-width: 640px) {
  .stat-callout .stat-callout__num,
  .stat-callout .stat-callout__value,
  .stat-panel .stat-panel__value { white-space: normal; word-break: break-word; }
}
/* envolva em .data-panel para o chrome de dados (fundo --grad-emphasis) */
.data-panel { background: var(--grad-emphasis); border-radius: var(--r-6); padding: var(--s-10); color: #fff; }
.data-panel__title { font-size: var(--fs-20); font-weight: var(--w-bold); color: #fff; margin: 0 0 var(--s-6); }

/* D4 — FLUXO DE TRANSFERÊNCIA (origem → destino) ------------ */
.transfer-flow { display: grid; grid-template-columns: 1fr auto 1.2fr; gap: var(--s-6); align-items: center; }
.transfer-flow__source { background: var(--azure-light-10); border: var(--bd-azure); border-radius: var(--r-6);
                         padding: var(--s-8) var(--s-6); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.transfer-flow__source-icon { width: 60px; height: 60px; border-radius: var(--r-pill); background: var(--grad-emphasis);
                         display: flex; align-items: center; justify-content: center; font-size: var(--fs-16); font-weight: var(--w-bold); color: #fff; }
.transfer-flow__arrow   { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); color: var(--ink-4); }
.program-card { background: var(--white); border: var(--bd); border-radius: var(--r-4); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.program-card__logo { width: 44px; height: 44px; flex: none; border-radius: var(--r-2); display: flex; align-items: center; justify-content: center;
                      font-size: 10px; font-weight: var(--w-bold); color: #fff; text-align: center; line-height: 1.15; background: var(--ref, var(--azure-deep)); }
@media (max-width: 960px) { .transfer-flow { grid-template-columns: 1fr; } .transfer-flow__arrow { transform: rotate(90deg); } }

/* D5 — RANKING / LADDER (ordenar por valor, 1 destaque) ----- */
.rankladder { display: flex; flex-direction: column; gap: var(--s-3); }
.rankrow { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--s-5); align-items: center;
           background: var(--white); border: var(--bd); border-radius: var(--r-4); padding: var(--s-5) var(--s-6); }
.rankrow--best { border-color: var(--azure-deep); background: var(--azure-light-10); }  /* destaque = azul */
.rank-medal { width: 40px; height: 40px; flex: none; border-radius: var(--r-pill);
              display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-weight: var(--w-bold); font-size: var(--fs-16); }
.rank-medal--1 { background: var(--azure-deep); color: #fff; }
.rank-medal--2 { background: var(--yellow); color: var(--ink); }
.rank-medal--3 { background: var(--paper-3); color: var(--ink-3); }
.rankrow__tag    { margin-bottom: var(--s-2); }
.rankrow__name   { font-weight: var(--w-bold); font-size: var(--fs-18); color: var(--ink); line-height: 1.2; }
.rankrow__desc   { font-size: var(--fs-14); color: var(--ink-2); font-weight: var(--w-light); line-height: var(--lh-body); margin-top: 3px; }
.rankrow__note   { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-3); margin-top: var(--s-2); }
.rankrow__verdict{ justify-self: end; white-space: nowrap; }
@media (max-width: 640px) { .rankrow { grid-template-columns: 40px 1fr; } .rankrow__verdict { grid-column: 2; justify-self: start; margin-top: var(--s-3); } }

/* D6 — VEREDITO + CHECKLISTS (decisão sim/não) -------------- */
.verdict { background: var(--grad-emphasis); border-radius: var(--r-6); padding: var(--s-10); color: #fff; }
.verdict .verdict__eyebrow   { font-size: var(--fs-12); font-weight: var(--w-bold); letter-spacing: var(--ls-wide);
                               text-transform: uppercase; color: var(--white-a80); margin-bottom: var(--s-4); }
.verdict .verdict__statement { font-size: var(--fs-24); font-weight: var(--w-light); line-height: 1.4; letter-spacing: var(--ls-tight); margin: 0; color: #fff; }
.verdict .verdict__statement strong { font-weight: var(--w-bold); color: var(--yellow); }
.judge { background: var(--white); border: var(--bd); border-radius: var(--r-6); padding: var(--s-6); }
.judge__icon { width: 40px; height: 40px; border-radius: var(--r-pill); display: flex; align-items: center; justify-content: center; margin-bottom: var(--s-4); }
.judge--yes .judge__icon { background: var(--azure-light-10); color: var(--azure-deep); }  /* sim = azul */
.judge--no  .judge__icon { background: var(--paper-2);        color: var(--ink-3); }        /* não = neutro */
.judge__item { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); font-size: var(--fs-15); color: var(--ink-2); margin-bottom: var(--s-3); }
.judge--yes .judge__item svg { color: var(--azure-deep); }
.judge--no  .judge__item svg { color: var(--ink-4); }

/* D7 — CLUSTER DE LINKS (relacionados, com cor de marca) ---- */
.bank-link-card { background: var(--white); border: var(--bd); border-top: 3px solid var(--ref, var(--azure-light));
                  border-radius: var(--r-4); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2);
                  text-decoration: none; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.bank-link-card:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.bank-link-card__eyebrow { font-size: var(--fs-12); font-weight: var(--w-bold); letter-spacing: var(--ls-wide);
                           text-transform: uppercase; color: var(--ref, var(--azure-deep)); }
.bank-link-card__name { font-size: var(--fs-20); font-weight: var(--w-bold); color: var(--ink); line-height: var(--lh-tight); }
.bank-link-card__desc { font-size: var(--fs-15); color: var(--ink-3); font-weight: var(--w-light); flex: 1; line-height: var(--lh-body); }
.bank-link-card__go   { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3);
                        font-size: var(--fs-14); font-weight: var(--w-bold); color: var(--ref, var(--azure-deep)); }

/* D8 — FAIXA DE CTA (imagem + texto à esquerda + botão amarelo) */
.cta-banner { position: relative; overflow: hidden; background: var(--azure-deep); min-height: 460px; display: flex; align-items: center; }
.cta-banner::before { content: ""; position: absolute; inset: 0; z-index: 0;
                      background: var(--cta-img, none) right 34% / cover no-repeat; }
.cta-banner::after  { content: ""; position: absolute; inset: 0; z-index: 1;
                      background: linear-gradient(90deg, rgba(0,76,230,.94) 0%, rgba(0,76,230,.80) 34%, rgba(0,76,230,.30) 58%, rgba(0,76,230,0) 78%); }
.cta-banner > .container { position: relative; z-index: 2; width: 100%; }
.cta-banner__inner  { max-width: 540px; }
.cta-banner .u-eyebrow { color: var(--white-a80); }
.cta-banner .u-section-title { color: #fff; }
.cta-banner .u-lead { color: rgba(255,255,255,.92); }
.cta-banner__actions { display: flex; gap: var(--s-4); align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) {
  .cta-banner::after { background: linear-gradient(90deg, rgba(0,76,230,.95) 0%, rgba(0,76,230,.86) 55%, rgba(0,76,230,.6) 100%); }
  .cta-banner__inner { max-width: 100%; }
}

/* =============================================================
   E. BOTÕES — padronização
   -------------------------------------------------------------
   Todos os botões usam cantos PILL (curva igual em qualquer
   tamanho). O CTA de curso é SEMPRE amarelo da marca.
   ============================================================= */
.btn          { border-radius: var(--r-pill); }
.btn--yellow,
.btn--login   { background: var(--yellow); color: var(--ink); }
.btn--yellow:hover,
.btn--login:hover { background: var(--yellow-70); }
.cta-banner .btn--yellow { box-shadow: 0 6px 18px -6px rgba(252,177,0,.55); }

/* F1 — Bloco de autor antes do footer (sinal E-E-A-T, fixo por tenant) */
.author-bio            { background: var(--paper-2); border-top: 1px solid var(--paper-3); padding: var(--s-16) 0; }
.author-bio__inner     { display: grid; grid-template-columns: 120px 1fr; gap: var(--s-8); align-items: start; max-width: 880px; }
.author-bio__photo     { width: 120px; height: 120px; border-radius: var(--r-pill); object-fit: cover; background: var(--paper-3); }
.author-bio__eyebrow   { font-size: var(--fs-12); font-weight: var(--w-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--azure-deep); margin: 0 0 var(--s-2); }
.author-bio__name      { font-size: var(--fs-24); font-weight: var(--w-bold); color: var(--ink); line-height: var(--lh-tight); margin: 0; }
.author-bio__role      { font-size: var(--fs-14); font-weight: var(--w-bold); color: var(--ink-3); margin: var(--s-1) 0 var(--s-4); }
.author-bio__text      { font-size: var(--fs-16); font-weight: var(--w-light); color: var(--ink-2); line-height: var(--lh-body); margin: 0 0 var(--s-3); }
.author-bio__disclosure{ font-size: var(--fs-14); color: var(--ink-3); line-height: var(--lh-body); margin: 0; }
.author-bio__disclosure a { color: var(--azure-deep); font-weight: var(--w-bold); }
@media (max-width: 640px) {
  .author-bio__inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .author-bio__photo { width: 88px; height: 88px; }
}

/* F2 — Cluster "Veja também" (Step 3.3 preenche #internal-links).
   Esconde a seção inteira quando não há links (só sobra o <template>). */
.related-guides        { padding: var(--s-12) 0; }
.related-guides:not(:has(#internal-links a)) { display: none; }
#internal-links        { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s-5); margin-top: var(--s-6); }
/* Card por link. O 3.3 entrega só <a href><h1 da origem></a> em texto puro:
   o título é o próprio texto do anchor; "Ver guia →" via ::after. Sem eyebrow,
   descrição ou cor por banco (não há dado por-link no 3.3). */
#internal-links a      { display: flex; flex-direction: column; gap: var(--s-2); background: var(--white); border: var(--bd);
                         border-top: 3px solid var(--azure-light); border-radius: var(--r-4); padding: var(--s-6);
                         text-decoration: none; color: var(--ink); font-size: var(--fs-20); font-weight: var(--w-bold); line-height: var(--lh-tight);
                         transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
#internal-links a::after { content: "Ver guia →"; margin-top: auto; padding-top: var(--s-3);
                         font-size: var(--fs-14); font-weight: var(--w-bold); color: var(--azure-deep); }
#internal-links a:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }

/* F3 — Footer com grid de links (a base .footer__grid/__heading/__bottom
   vive em 02-components; aqui só o brand-block e o reset das listas). */
.footer__brand-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.footer__brand-block img { align-self: flex-start; width: auto; max-width: 100%; }
.footer__tag         { font-size: var(--fs-14); font-weight: var(--w-light); color: var(--white-a80); line-height: var(--lh-body); max-width: 38ch; margin: 0; }
.footer__col ul      { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.footer__col li a    { font-size: var(--fs-14); color: var(--white-a80); }
.footer__col li a:hover { color: var(--white); }
.footer__brand-links { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.footer__brand-links a { font-size: var(--fs-14); color: var(--white-a80); }
.footer__brand-links a:hover { color: var(--white); }
.footer__social { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; gap: var(--s-3); }
.footer__social a { display: inline-flex; color: var(--white); opacity: .85; transition: opacity var(--dur-2) var(--ease-out); }
.footer__social a:hover { opacity: 1; }
.footer__social svg { width: 22px; height: 22px; fill: currentColor; }

/* ===== Folded from template-pagina.html page-scoped blocks (reference-page deslop) =====
   Reusable bank-page block library (charts, card skeletons, breadcrumb,
   step/stat/resgate cards, ptchart/dotplot, partner + sidebar widgets).
   Brand-color modifiers (--nubank, .cc--caixa, …) stay page-scoped. ===== */
    .header__brand svg {
      flex: none;
    }

    /* -------------------------------------------------------------
   BREADCRUMB — mono, restrained (Lei de Ohm style)
   ------------------------------------------------------------- */
    .breadcrumb {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-2);
      align-items: center;
      font-family: var(--font-mono);
      font-size: var(--fs-13);
      color: var(--ink-3);
      margin: 0 0 var(--s-6);
      list-style: none;
      padding: 0;
    }

    .breadcrumb a {
      color: var(--ink-3);
      transition: color var(--dur-1) var(--ease-out);
    }

    .breadcrumb a:hover {
      color: var(--azure-deep);
    }

    .breadcrumb__sep {
      color: var(--ink-4);
      user-select: none;
    }

    .breadcrumb__current {
      color: var(--ink);
      font-weight: var(--w-bold);
    }

    /* on dark/gradient hero */
    .hero--gradient .breadcrumb,
    .hero--gradient .breadcrumb a {
      color: var(--white-a80);
    }

    .hero--gradient .breadcrumb a:hover {
      color: var(--white);
    }

    .hero--gradient .breadcrumb__sep {
      color: var(--white-a60);
    }

    .hero--gradient .breadcrumb__current {
      color: var(--white);
    }

    /* meta chips row under hero lead */
    .meta-chips {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-2);
      margin: var(--s-6) 0 0;
    }

    /* yellow-accent chip — brand warmth, legible (DS só tem amarelo sólido) */
    .chip--yellow-tint {
      background: var(--yellow-10);
      color: var(--warn);
      border: 1px solid var(--yellow-40);
    }

    .hero--gradient .byline__avatar {
      background: var(--white);
      color: var(--azure-deep);
    }

    .article>* {
      max-width: 68ch;
    }

    /* full-bleed data blocks opt out of the measure */
    .article>.bleed {
      max-width: none;
    }

    .article>h2:first-child,
    .article>section:first-child h2 {
      margin-top: 0;
    }

    .article a:not(.btn):not(.cluster-card):not(.bank-link-card) {
      color: var(--azure-deep);
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    .article section+section {
      margin-top: var(--s-16);
    }

    .article .sec-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: var(--s-2);
      font-size: var(--fs-12);
      font-weight: var(--w-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--azure-deep);
      margin: 0 0 var(--s-3);
    }

    .article .sec-eyebrow::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: var(--r-pill);
      background: var(--azure-light);
    }

    .article .lead {
      font-size: var(--fs-20);
      font-weight: var(--w-light);
      line-height: var(--lh-body);
      color: var(--ink-2);
      margin: 0 0 var(--s-8);
    }

    .step-card {
      background: var(--white);
      border: var(--bd);
      border-radius: var(--r-4);
      padding: var(--s-6);
      display: flex;
      flex-direction: column;
      gap: var(--s-3);
    }

    .step-card__num {
      font-family: var(--font-mono);
      font-size: var(--fs-13);
      font-weight: var(--w-bold);
      color: var(--azure-deep);
      letter-spacing: var(--ls-wide);
    }

    .step-card h4 {
      font-family: var(--font-sans);
      font-size: var(--fs-20);
      font-weight: var(--w-bold);
      color: var(--ink);
      margin: 0;
    }

    .step-card p {
      font-size: var(--fs-15);
      color: var(--ink-2);
      font-weight: var(--w-light);
      line-height: var(--lh-body);
      margin: 0;
      max-width: none;
    }

    /* -------------------------------------------------------------
   CARD-INFO — "Quais cartões acumulam"
   ------------------------------------------------------------- */

    .bar-chart__scale,
    .bar-chart__row {
      display: grid;
      grid-template-columns: 160px 1fr 84px;
      gap: var(--s-4);
      align-items: center;
    }

    .bar-chart__scale {
      font-size: var(--fs-12);
      color: var(--white-a80);
      font-family: var(--font-mono);
      padding-bottom: var(--s-3);
      border-bottom: 1px solid var(--white-a60);
      margin-bottom: var(--s-2);
      text-transform: uppercase;
      letter-spacing: var(--ls-wide);
    }

    .bar-chart__legend {
      display: flex;
      flex-wrap: wrap;
      gap: var(--s-4);
      margin-top: var(--s-5);
      padding-top: var(--s-4);
      border-top: 1px solid var(--white-a60);
    }

    .bar-chart__legend-item {
      display: flex;
      align-items: center;
      gap: var(--s-2);
      font-size: var(--fs-13);
      color: var(--white-a80);
    }

    .legend-dot {
      width: 12px;
      height: 12px;
      border-radius: var(--r-pill);
      flex: none;
    }

    .legend-dot--ref {
      background: var(--yellow);
    }

    .transfer-flow__programs {
      display: flex;
      flex-direction: column;
      gap: var(--s-4);
    }

    .program-card__header {
      display: flex;
      align-items: center;
      gap: var(--s-3);
    }

    .program-card__name {
      font-family: var(--font-sans);
      font-size: var(--fs-16);
      font-weight: var(--w-bold);
      color: var(--ink);
    }

    .program-card__stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--s-3);
    }

    .stat-pill {
      background: var(--paper-2);
      border-radius: var(--r-2);
      padding: var(--s-2) var(--s-3);
    }

    .stat-pill__label {
      font-size: var(--fs-12);
      color: var(--ink-3);
      font-weight: var(--w-bold);
      text-transform: uppercase;
      letter-spacing: var(--ls-wide);
    }

    .stat-pill__value {
      font-family: var(--font-mono);
      font-size: var(--fs-15);
      color: var(--ink);
      margin-top: 2px;
    }

    /* =============================================================
   COMPARE CHART — bancos
   ============================================================= */
    .compare-chart {
      display: flex;
      flex-direction: column;
      gap: var(--s-4);
    }

    .compare-chart__head,
    .compare-chart__row {
      display: grid;
      grid-template-columns: 170px 1fr 84px;
      gap: var(--s-4);
      align-items: center;
    }

    .compare-chart__head {
      font-size: var(--fs-12);
      font-weight: var(--w-bold);
      color: var(--ink-3);
      text-transform: uppercase;
      letter-spacing: var(--ls-wide);
      padding-bottom: var(--s-2);
      border-bottom: 1px solid var(--paper-3);
    }

    .compare-chart__label {
      font-size: var(--fs-15);
      font-weight: var(--w-med);
      color: var(--ink-2);
      white-space: nowrap;
    }

    .compare-chart__label.is-highlight {
      color: var(--azure-deep);
      font-weight: var(--w-bold);
    }

    .compare-chart__track {
      height: 26px;
      background: var(--paper-2);
      border-radius: var(--r-pill);
      position: relative;
      overflow: hidden;
    }

    .compare-chart__fill {
      height: 100%;
      border-radius: var(--r-pill);
      transition: width 0.7s var(--ease-out);
    }

    .compare-chart__fill--other {
      background: var(--ink-4);
    }

    .compare-chart__value {
      font-family: var(--font-mono);
      font-size: var(--fs-14);
      font-weight: var(--w-bold);
      color: var(--ink-2);
      text-align: right;
    }

    .compare-chart__value.is-highlight {
      color: var(--azure-deep);
    }

    .side-cta {
      background: var(--grad-emphasis);
      color: var(--white);
      border: none;
    }

    .side-cta .side-widget__title {
      color: var(--white-a80);
    }

    .side-cta__head {
      font-family: var(--font-display);
      font-size: var(--fs-20);
      font-weight: var(--w-bold);
      line-height: var(--lh-tight);
      letter-spacing: var(--ls-tight);
      color: var(--white);
      margin: 0 0 var(--s-3);
    }

    .side-cta p {
      font-size: var(--fs-14);
      color: var(--white-a80);
      font-weight: var(--w-light);
      line-height: var(--lh-body);
      margin: 0 0 var(--s-5);
    }

    .side-cta .btn {
      width: 100%;
    }

    .side-author {
      display: flex;
      gap: var(--s-3);
      align-items: flex-start;
    }

    .side-author__avatar {
      width: 44px;
      height: 44px;
      flex: none;
      border-radius: var(--r-pill);
      background: var(--grad-emphasis);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: var(--w-bold);
      font-size: var(--fs-14);
      overflow: hidden;
    }

    .side-author__avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .side-author__name {
      font-size: var(--fs-14);
      font-weight: var(--w-bold);
      color: var(--ink);
      margin-bottom: 2px;
    }

    .side-author__bio {
      font-size: var(--fs-13);
      color: var(--ink-3);
      font-weight: var(--w-light);
      line-height: var(--lh-body);
    }

    /* hero no azul da marca — ajuste de chips sobre o gradiente */
    .hero--gradient .chip {
      background: var(--white-a60);
      color: var(--white);
      border-color: transparent;
    }

    .hero--gradient .chip--yellow-tint {
      background: var(--yellow);
      color: var(--ink);
      border-color: transparent;
    }

    .cta-banner>.container {
      position: relative;
      z-index: 2;
      width: 100%;
    }

    .cta-banner .btn--login {
      box-shadow: 0 6px 18px -6px rgba(252, 177, 0, 0.55);
    }

    .footer__brand {
      display: inline-flex;
      align-items: center;
      gap: var(--s-3);
      margin-bottom: var(--s-4);
    }

    .footer-mark {
      height: 42px;
      width: auto;
      flex: none;
      display: block;
    }

    .footer-logo {
      height: 28px;
      width: auto;
      display: block;
    }

    /* parceiros — mini-cards (substituem as pílulas chapadas) */
    .partner-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--s-4);
      margin-bottom: var(--s-6);
    }

    .partner-mini {
      display: flex;
      flex-direction: column;
      gap: var(--s-4);
      background: var(--white);
      border: var(--bd);
      border-radius: var(--r-4);
      padding: var(--s-5);
    }

    .partner-mini__head {
      display: flex;
      align-items: center;
      gap: var(--s-3);
    }

    .partner-mini__name {
      font-family: var(--font-sans);
      font-weight: var(--w-bold);
      font-size: var(--fs-16);
      color: var(--ink);
      line-height: 1.2;
    }

    .partner-mini__role {
      font-size: var(--fs-13);
      color: var(--ink-3);
      margin-top: 2px;
    }

    /* seção 3 — gráfico de pontos com eixo 0–3 + linha de mercado (clareza) */
    .ptchart {
      display: flex;
      flex-direction: column;
      gap: var(--s-2);
    }

    .ptchart__head,
    .ptchart__row,
    .ptchart__axis {
      display: grid;
      grid-template-columns: 132px 1fr 52px;
      gap: var(--s-5);
      align-items: center;
    }

    .ptchart__head {
      margin-bottom: var(--s-3);
    }

    .ptchart__markcell {
      position: relative;
      height: 16px;
    }

    .ptchart__mark {
      position: absolute;
      left: 66.66%;
      transform: translateX(-50%);
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
      font-size: var(--fs-12);
      font-weight: var(--w-bold);
      letter-spacing: var(--ls-wide);
      text-transform: uppercase;
      color: var(--yellow);
    }

    .ptchart__rlabel {
      font-size: var(--fs-15);
      font-weight: var(--w-med);
      color: var(--white);
      white-space: nowrap;
    }

    .ptchart__plot {
      position: relative;
      height: 30px;
    }

    .ptchart__track {
      position: absolute;
      inset: 0;
      background: rgba(255, 255, 255, 0.10);
      border-radius: var(--r-pill);
    }

    .ptchart__g1 {
      position: absolute;
      top: -6px;
      bottom: -6px;
      left: 33.33%;
      width: 1px;
      background: rgba(255, 255, 255, 0.16);
    }

    .ptchart__mkt {
      position: absolute;
      top: -10px;
      bottom: -10px;
      left: 66.66%;
      width: 0;
      border-left: 2px dashed var(--yellow);
      z-index: 3;
    }

    .ptchart__bar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      border-radius: var(--r-pill);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
      transition: width 0.7s var(--ease-out);
    }

    .ptchart__bar--hi {
      background: #ffffff;
    }

    .ptchart__bar--mid {
      background: rgba(255, 255, 255, 0.80);
    }

    .ptchart__bar--lo {
      background: rgba(255, 255, 255, 0.58);
    }

    .ptchart__val {
      font-family: var(--font-mono);
      font-weight: var(--w-bold);
      font-size: var(--fs-16);
      color: var(--white);
      text-align: right;
      white-space: nowrap;
    }

    .ptchart__axis {
      margin-top: var(--s-3);
      padding-top: var(--s-3);
      border-top: 1px solid rgba(255, 255, 255, 0.16);
    }

    .ptchart__ticks {
      display: flex;
      justify-content: space-between;
      font-family: var(--font-mono);
      font-size: var(--fs-12);
      color: rgba(255, 255, 255, 0.55);
    }

    .ptchart__ticks .is-mkt {
      color: var(--yellow);
      font-weight: var(--w-bold);
    }

    .ptchart__unit {
      font-family: var(--font-mono);
      font-size: var(--fs-12);
      color: rgba(255, 255, 255, 0.55);
      text-align: right;
    }

    /* seção 3 — DOT PLOT (linha numérica 0–3 pts) */

    .dp-ticks .is-mkt {
      color: var(--yellow);
      font-weight: var(--w-bold);
    }

    .judge__head {
      display: flex;
      align-items: center;
      gap: var(--s-3);
      margin-bottom: var(--s-5);
    }

    .judge__icon svg {
      width: 20px;
      height: 20px;
    }

    .judge__title {
      font-family: var(--font-sans);
      font-size: var(--fs-18);
      font-weight: var(--w-bold);
      color: var(--ink);
    }

    .judge__list {
      display: flex;
      flex-direction: column;
      gap: var(--s-4);
    }

    .judge__item svg {
      width: 18px;
      height: 18px;
      margin-top: 4px;
      flex: none;
    }

    .judge__item strong {
      color: var(--ink);
      font-weight: var(--w-bold);
    }

    .brand-logo--blue {
      display: none;
    }

    .header--solid .brand-logo--white {
      display: none;
    }

    .header--solid .brand-logo--blue {
      display: block;
    }

    .brand-mark--blue {
      display: none;
    }

    .header--solid .brand-mark--white {
      display: none;
    }

    .header--solid .brand-mark--blue {
      display: block;
    }
@media (max-width: 640px) {

      .data-panel {
        padding: var(--s-6);
      }

      .grid-3,
      .grid-2 {
        grid-template-columns: 1fr;
      }

      .bar-chart__scale,
      .bar-chart__row {
        grid-template-columns: 96px 1fr 56px;
        gap: var(--s-2);
      }

      .bar-chart__label {
        font-size: var(--fs-13);
        white-space: normal;
      }

      .compare-chart__head,
      .compare-chart__row {
        grid-template-columns: 100px 1fr 56px;
        gap: var(--s-2);
      }

      .article h2 {
        font-size: var(--fs-30);
      }
      .partner-grid {
        grid-template-columns: 1fr;
      }

      .ptchart__head,
      .ptchart__row,
      .ptchart__axis {
        grid-template-columns: 88px 1fr 44px;
        gap: var(--s-3);
      }

      .ptchart__rlabel {
        font-size: var(--fs-13);
        white-space: normal;
      }

      .ptchart__mark {
        font-size: 10px;
      }

}

@media (max-width: 960px) {

      .grid-3 {
        grid-template-columns: 1fr 1fr;
      }
}

/* image hero composition */
.hero-layout { display: grid; grid-template-columns: 1fr 400px; gap: var(--s-16); align-items: center; }
.hero-visual { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; }
.hero-plane  { width: 108%; max-width: none; height: auto; display: block; margin-left: auto; filter: drop-shadow(0 14px 26px rgba(0,0,0,0.2)); }

/* image hero: section is transparent so #hero-bg (the page image) shows through; kills the DS glow */
.hero--image { background: transparent; isolation: isolate; }
.hero--image::before { content: none; }
.hero--image > .container { position: relative; z-index: 1; }

/* 2-col article + sticky sidebar */
.layout-2col { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: var(--s-16); align-items: start; padding: var(--s-16) 0 var(--s-20); }
.side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--s-5); }
/* card-tier swatches */
.tier-swatch--infinite { background: var(--grad-emphasis); }
.tier-swatch--platinum { background: linear-gradient(135deg, var(--azure-deep), var(--azure-light)); }
.tier-swatch--gold     { background: linear-gradient(135deg, #B07C2B, #E3B65A); }
.tier-swatch--basic    { background: linear-gradient(135deg, #6C7C93, #A0AEC0); }

/* compare-chart fill — self highlighted (--other lives above) */
.compare-chart__fill--caixa { background: var(--grad-emphasis); }

@media (max-width: 1024px) {
  .layout-2col { grid-template-columns: 1fr; gap: var(--s-10); }
  .side { position: static; flex-direction: row; flex-wrap: wrap; }
  .side-widget { flex: 1; min-width: 240px; }
  .side-widget--toc { display: none; }
}
@media (max-width: 960px) {
  .hero-layout { grid-template-columns: 1fr; gap: var(--s-10); }
  .hero-visual { display: none; }
}