/* =============================================================
   FÁBRICA DE MILHAS — Design System v4 (Components)
   Componentes .fm-* — adaptados do v3 + adições do brandbook v1.0
   ============================================================= */

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

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

/* Regra divisora "engrenagem" — traços verticais. Marca da casa. */
.fm-rule {
  height: 12px;
  background-image:
    repeating-linear-gradient(to right,
      var(--paper-3) 0, var(--paper-3) 2px,
      transparent 2px, transparent 10px);
  border: none;
}
/* v5: dashes em paper-3 (vs ink) — divisor menos pesado, combina com a paleta mais clara da página. */
.fm-rule--thin {
  height: 8px;
  background-image:
    repeating-linear-gradient(to right,
      var(--ink-3) 0, var(--ink-3) 1px,
      transparent 1px, transparent 8px);
}
.fm-rule--azure {
  height: 12px;
  background-image:
    repeating-linear-gradient(to right,
      var(--azure-deep) 0, var(--azure-deep) 2px,
      transparent 2px, transparent 10px);
}
.fm-hr {
  border: none;
  border-top: 1px solid var(--paper-3);
  margin: var(--s-8) 0;
}

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

.fm-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;
}
.fm-btn:active { transform: translateY(1px); }
.fm-btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }

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

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

/* Secundário sólido — azul deep flat (sem gradient), pra ações de menor peso */
.fm-btn--azure {
  background: var(--azure-deep);
  color: var(--white);
}
.fm-btn--azure:hover { background: var(--azure-deep-70); }

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

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

/* Text — link-botão inline */
.fm-btn--text {
  background: none;
  color: var(--azure-deep);
  padding: 4px 0;
  border-radius: 0;
  border-bottom: 1px solid currentColor;
}
.fm-btn--text:hover { color: var(--azure-light); }

/* Tamanhos */
.fm-btn--sm { padding: 8px 20px; font-size: var(--fs-14); }
.fm-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.
   ------------------------------------------------------------- */

.fm-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;
}
.fm-chip--azure       { background: var(--azure-deep);    color: var(--white); }
.fm-chip--azure-light { background: var(--azure-light);   color: var(--white); }
.fm-chip--azure-tint  { background: var(--azure-light-10); color: var(--azure-deep); }
.fm-chip--yellow      { background: var(--yellow);        color: var(--ink); }
.fm-chip--orange      { background: var(--orange);        color: var(--white); }
.fm-chip--ink         { background: var(--ink);           color: var(--white); }
.fm-chip--ok          { background: var(--ok-tint);       color: var(--ok); }

/* Metric chip — delta up/down */
.fm-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-variant-numeric: tabular-nums;
}
.fm-metric-chip--up   { background: var(--ok-tint);  color: var(--ok); }
.fm-metric-chip--down { background: var(--err-tint); color: var(--err); }

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

.fm-status {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-13);
  color: var(--ink-3);
}
.fm-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.fm-status--ok   { color: var(--ok); }
.fm-status--warn { color: var(--warn); }
.fm-status--err  { color: var(--err); }
.fm-status--azure{ color: var(--azure-deep); }

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

.fm-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);
}
.fm-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.fm-card__media {
  aspect-ratio: 4/3;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fm-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fm-card__body { padding: var(--s-6); flex: 1 1 auto; }
.fm-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);
}
.fm-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);
}
.fm-card__text {
  color: var(--ink-2);
  font-size: var(--fs-16);
  font-weight: var(--w-light);
  line-height: var(--lh-body);
}
.fm-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). */
.fm-card--featured {
  background: var(--grad-emphasis);
  border-color: transparent;
  color: var(--white);
  box-shadow: 0 12px 28px -8px rgba(0, 77, 117, 0.40);
}
.fm-card--featured .fm-card__eyebrow { color: var(--azure-light); }
.fm-card--featured .fm-card__title   { color: var(--white); }
.fm-card--featured .fm-card__text    { color: var(--white-a80); }
.fm-card--featured .fm-card__foot    {
  border-top-color: var(--white-a60);
  color: var(--white-a80);
}
.fm-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) */
.fm-card--gradient {
  background: var(--grad-section-guia);
  color: var(--white);
  border: none;
}
.fm-card--gradient .fm-card__eyebrow { color: var(--azure-light-40); }
.fm-card--gradient .fm-card__title,
.fm-card--gradient .fm-card__text { color: var(--white); }

/* -------------------------------------------------------------
   FORM FIELDS — underline-style
   ------------------------------------------------------------- */

.fm-field { display: flex; flex-direction: column; gap: 6px; }
.fm-field__label {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--w-bold);
  color: var(--ink-2);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.fm-field__input,
.fm-field__select,
.fm-field__textarea {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--w-light);
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--paper-3);
  padding: 10px 0;
  outline: none;
  transition: border-color var(--dur-1) var(--ease-out);
}
.fm-field__input::placeholder { color: var(--ink-4); }
.fm-field__input:focus,
.fm-field__select:focus,
.fm-field__textarea:focus { border-bottom-color: var(--azure-deep); }
.fm-field__textarea { min-height: 96px; resize: vertical; }
.fm-field__hint  { font-size: var(--fs-12); color: var(--ink-3); }
.fm-field__err   { font-size: var(--fs-12); color: var(--err); }

/* Filled — pra usar sobre fundos escuros/gradiente */
.fm-field--filled .fm-field__input,
.fm-field--filled .fm-field__select,
.fm-field--filled .fm-field__textarea {
  background: var(--white-a60);
  color: var(--white);
  border: 1px solid var(--white-a60);
  border-radius: var(--r-2);
  padding: 12px 16px;
}
.fm-field--filled .fm-field__input::placeholder { color: var(--white-a80); }
.fm-field--filled .fm-field__input:focus { border-color: var(--white); background: var(--white-a80); }
.fm-field--filled .fm-field__label { color: var(--white); }

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

.fm-header {
  background: var(--grad-header);
  color: var(--white);
  padding: var(--s-4) 0;
}
.fm-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.fm-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);
}
.fm-header__nav {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
.fm-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);
}
.fm-nav-link:hover,
.fm-nav-link[aria-current="page"] {
  border-bottom-color: var(--white);
}

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

/* -------------------------------------------------------------
   HEADER — MENU MOBILE (hambúrguer + dropdown)
   No desktop o .fm-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 (.fm-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.
   ------------------------------------------------------------- */
.fm-header__menu { display: contents; }

.fm-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;
}
.fm-header--solid .fm-header__toggle,
.fm-header.is-menu-open .fm-header__toggle { color: var(--ink); }

.fm-header__toggle-bars,
.fm-header__toggle-bars::before,
.fm-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);
}
.fm-header__toggle-bars { margin-top: -1px; }
.fm-header__toggle-bars::before { content: ""; transform: translateY(-7px); }
.fm-header__toggle-bars::after  { content: ""; transform: translateY(7px); }

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

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

.fm-hero {
  padding: var(--s-20) 0 var(--s-16);
}
.fm-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);
}
.fm-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);
}
.fm-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);
}
.fm-hero__cta { display: flex; gap: var(--s-3); align-items: center; }

/* Banner — com gradient overlay sobre imagem (brandbook) */
.fm-banner {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  background: var(--azure-deep);
  background-size: cover;
  background-position: center;
  color: var(--white);
  overflow: hidden;
  border-radius: var(--r-4);
}
.fm-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-banner-overlay);
  pointer-events: none;
}
.fm-banner__inner {
  position: relative;
  z-index: 1;
  padding: var(--s-8);
  max-width: 56ch;
}
.fm-banner__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4.5vw, var(--fs-60));
  font-weight: var(--w-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-h1);
  color: var(--white);
  margin: 0 0 var(--s-3);
}

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

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

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

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

.fm-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);
}
.fm-note__title {
  display: block;
  font-weight: var(--w-bold);
  color: var(--ink);
  margin-bottom: var(--s-1);
}
.fm-note--azure  { border-left-color: var(--azure-deep);  background: var(--azure-light-10); }
.fm-note--azure .fm-note__title { color: var(--azure-deep); }
.fm-note--yellow { border-left-color: var(--orange);      background: var(--yellow-10); }
.fm-note--yellow .fm-note__title { color: var(--orange); }
.fm-note--ok     { border-left-color: var(--ok);          background: var(--ok-tint); }
.fm-note--ok     .fm-note__title { color: var(--ok); }
.fm-note--warn   { border-left-color: var(--warn);        background: var(--warn-tint); }
.fm-note--err    { border-left-color: var(--err);         background: var(--err-tint); }

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

.fm-faq { border-top: var(--bd); }
.fm-faq details {
  border-bottom: var(--bd);
  padding: var(--s-4) 0;
}
.fm-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;
}
.fm-faq summary::-webkit-details-marker { display: none; }
.fm-faq summary::after {
  content: "+";
  font-size: var(--fs-24);
  color: var(--azure-deep);
  transition: transform var(--dur-2) var(--ease-out);
}
.fm-faq details[open] summary::after { transform: rotate(45deg); }
.fm-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);
}

/* -------------------------------------------------------------
   TABLE
   ------------------------------------------------------------- */

.fm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-15);
}
.fm-table th,
.fm-table td {
  padding: var(--s-4) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--paper-3);
  vertical-align: top;
}
.fm-table th {
  font-weight: var(--w-bold);
  color: var(--ink);
  font-size: var(--fs-13);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  border-bottom: 2px solid var(--ink);
}
.fm-table tbody tr:hover { background: var(--azure-light-10); }
.fm-table--striped tbody tr:nth-child(odd) { background: var(--paper-2); }

/* -------------------------------------------------------------
   FEATURE / STAT / STEPS / TESTIMONIAL / AUTHOR
   ------------------------------------------------------------- */

.fm-feature { display: flex; flex-direction: column; gap: var(--s-2); }
.fm-feature__icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--azure-deep);
  background: var(--azure-light-10);
  border-radius: var(--r-2);
  margin-bottom: var(--s-2);
}
.fm-feature__title {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--w-bold);
  color: var(--ink);
  margin: 0;
}
.fm-feature__text {
  font-size: var(--fs-16);
  font-weight: var(--w-light);
  color: var(--ink-2);
  line-height: var(--lh-body);
}

.fm-stat { display: flex; flex-direction: column; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--ink); }
.fm-stat__value {
  font-family: var(--font-display);
  font-size: var(--fs-60);
  font-weight: var(--w-bold);
  line-height: 1;
  color: var(--azure-deep);
  letter-spacing: var(--ls-h1);
}
.fm-stat__label {
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--ink-3);
}

.fm-steps { counter-reset: step; display: grid; gap: var(--s-8); }
.fm-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--s-5);
  align-items: start;
}
.fm-step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--fs-40);
  font-weight: var(--w-bold);
  color: var(--azure-light);
  line-height: 1;
  letter-spacing: var(--ls-h2);
}
.fm-step__title {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: var(--w-bold);
  color: var(--ink);
  margin: 0 0 var(--s-2);
  line-height: var(--lh-tight);
}
.fm-step__text { color: var(--ink-2); font-size: var(--fs-16); font-weight: var(--w-light); line-height: var(--lh-body); }

.fm-testimonial {
  padding: var(--s-8) 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.fm-testimonial__quote {
  font-family: var(--font-sans);
  font-size: var(--fs-30);
  font-weight: var(--w-light);
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-5);
}
.fm-testimonial__author {
  font-size: var(--fs-13);
  font-weight: var(--w-bold);
  color: var(--ink);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.fm-author {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.fm-author__avatar {
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  object-fit: cover;
}
.fm-author__name { font-weight: var(--w-bold); color: var(--ink); font-size: var(--fs-14); }
.fm-author__meta { font-size: var(--fs-12); color: var(--ink-3); font-weight: var(--w-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; }

/* -------------------------------------------------------------
   CTA STRIP
   ------------------------------------------------------------- */

.fm-cta {
  background: var(--grad-cta);
  color: var(--white);
  padding: var(--s-12) var(--s-8);
  border-radius: var(--r-6);
  display: grid;
  gap: var(--s-5);
  text-align: center;
}
.fm-cta__title {
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 4vw, var(--fs-40));
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-h2);
  color: var(--white);
  margin: 0;
}
.fm-cta__text {
  font-size: var(--fs-18);
  font-weight: var(--w-light);
  color: var(--white-a80);
  max-width: 56ch;
  margin: 0 auto;
}
.fm-cta__actions { display: flex; gap: var(--s-3); justify-content: center; flex-wrap: wrap; }

.fm-cta--paper {
  background: var(--paper-2);
  color: var(--ink);
}
.fm-cta--paper .fm-cta__title { color: var(--ink); }
.fm-cta--paper .fm-cta__text  { color: var(--ink-2); }

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

.fm-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. */
.fm-footer a { color: var(--white); }
.fm-footer a:hover { color: var(--azure-light); }
.fm-footer__grid {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: var(--s-8);
}
.fm-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);
}
.fm-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. */
  .fm-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--s-6) var(--s-5);
  }
  .fm-footer__brand-block { grid-column: 1 / -1; }
  .fm-footer__bottom {
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    text-align: center;
  }
  .fm-hero { padding: var(--s-12) 0 var(--s-10); }
  .fm-section { padding: var(--s-12) 0; }
  .fm-step { grid-template-columns: 48px 1fr; gap: var(--s-3); }
}
@media (max-width: 480px) {
  /* Mantém 2 colunas no celular (era 1fr → rodapé longo demais); só aperta. */
  .fm-footer { padding: var(--s-10) 0 var(--s-6); }
  .fm-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5) var(--s-4); }
  .fm-footer__heading { margin-bottom: var(--s-2); }
  .fm-btn { padding: 12px 24px; font-size: var(--fs-16); }
  .fm-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) {
  .fm-header__toggle { display: block; }

  /* Painel ancorado no .fm-header (sticky → containing block), NÃO no __inner:
     o __inner vive dentro do .fm-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 .fm-header full-bleed, left/right:0 =
     bordas da viewport e top:100% = exatamente a base do header. */
  .fm-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);
  }
  .fm-header.is-menu-open .fm-header__menu {
    visibility: visible; opacity: 1; transform: translateY(0);
  }

  /* links viram linhas full-width com divisória */
  .fm-header__nav {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0; padding: var(--s-2) var(--s-5) 0;
  }
  .fm-header__nav .fm-nav-link {
    color: var(--ink);
    font-size: var(--fs-16);
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--paper-3);
  }
  .fm-header__nav .fm-nav-link:hover { color: var(--azure-deep); }
  .fm-header__nav .fm-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 */
  .fm-header__actions { display: block; padding: var(--s-5); }
  .fm-header__actions .fm-btn { display: block; width: 100%; text-align: center; }
}


/* =============================================================
   v5 — COMPONENTES PROMOVIDOS DAS PÁGINAS DE PRODUÇÃO
   ============================================================= */

/* -------------------------------------------------------------
   FM-SECTION--EMPHASIS — variante da fm-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.
   ------------------------------------------------------------- */
.fm-section--emphasis {
  background: var(--grad-emphasis);
  color: var(--white);
}
.fm-section--emphasis .u-h1,
.fm-section--emphasis .u-h2,
.fm-section--emphasis .u-h3,
.fm-section--emphasis .u-banner-title,
.fm-section--emphasis .u-section-title,
.fm-section--emphasis .u-info-title { color: var(--white); }
.fm-section--emphasis .u-eyebrow { color: var(--white); opacity: 0.85; }
.fm-section--emphasis .u-body,
.fm-section--emphasis .u-lead { color: var(--white); opacity: 0.88; }

/* -------------------------------------------------------------
   FM-HERO--GRADIENT — variante do .fm-hero com bg gradient
   Usa --grad-section-guia (royal blue) por padrão. Adicione
   --emphasis pra usar --grad-emphasis.
   ------------------------------------------------------------- */
.fm-hero--gradient {
  background: var(--grad-section-guia);
  color: var(--white);
  position: relative;
  overflow: hidden;
}
.fm-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;
}
.fm-hero--gradient > .fm-container { position: relative; z-index: 1; }
.fm-hero--gradient .fm-hero__title { color: var(--white); }
.fm-hero--gradient .fm-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 .fm-hero--gradient). */
.fm-hero--gradient .video-caption { color: var(--white-a80); }
.fm-hero--gradient .fm-hero__eyebrow { color: var(--azure-light-40); }

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

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

/* -------------------------------------------------------------
   FM-VIDEO-PLACEHOLDER — frame 16:9 com play button
   Promovido das páginas Orlando v1 + modelo-b v2. Usado em hero
   split, cards de aula, qualquer lugar que precise de thumbnail
   de vídeo antes do player real ser carregado.
   ------------------------------------------------------------- */
.fm-video-placeholder {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-6);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45);
  isolation: isolate;
}
.fm-video-placeholder__frame {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.06) 0,
      rgba(255,255,255,0.06) 2px,
      transparent 2px,
      transparent 14px),
    var(--azure-deep);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fm-video-placeholder__play {
  width: 88px;
  height: 88px;
  border-radius: var(--r-pill);
  background: var(--white);
  color: var(--azure-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px -8px rgba(0,0,0,0.4);
  cursor: pointer;
  border: none;
  transition: transform var(--dur-2) var(--ease-out);
}
.fm-video-placeholder__play:hover { transform: scale(1.05); }
.fm-video-placeholder__play svg { width: 28px; height: 28px; margin-left: 4px; }
.fm-video-placeholder__tag {
  position: absolute;
  left: var(--s-4);
  bottom: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  color: var(--white);
  background: rgba(0,0,0,0.55);
  padding: 4px 10px;
  border-radius: var(--r-2);
  backdrop-filter: blur(4px);
}

/* -------------------------------------------------------------
   FM-TOC-CARD — table of contents flutuante (inspirado modelo-mastercard)
   Card overlap com hero ou seção anterior (margin-top negativo).
   Lista ordenada com counter prefix. Usado em pillar pages e guias longos.
   ------------------------------------------------------------- */
.fm-toc-card {
  background: var(--white);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-6);
  padding: var(--s-8) var(--s-10);
  margin: calc(var(--s-10) * -1) auto var(--s-12);
  position: relative;
  z-index: 3;
  max-width: 880px;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.12);
}
@media (max-width: 720px) {
  .fm-toc-card { margin-top: calc(var(--s-6) * -1); padding: var(--s-5); }
}
.fm-toc-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  font-weight: var(--w-bold);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--s-5);
}
.fm-toc-card ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fm-toc-card li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--paper-3);
}
.fm-toc-card li:last-child { border-bottom: 0; }
.fm-toc-card a {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  align-items: baseline;
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--w-bold);
  line-height: 1.4;
  color: var(--ink);
  transition: color var(--dur-1) var(--ease-out);
}
.fm-toc-card a:hover { color: var(--azure-deep); }
.fm-toc-card a span {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--w-bold);
  color: var(--azure-deep);
}

/* ===== Folded from 03-guia-bancos.css (addendum layer removed; #502) ===== */

/* =============================================================
   FÁBRICA DE MILHAS — Addendum v5.1
   "Páginas de Guia de Banco"
   -------------------------------------------------------------
   Camada de padrões extraída da página Caixa. Carregue DEPOIS de
   01-tokens.css e 02-components.css:

     <link rel="stylesheet" href="design-system/01-tokens.css">
     <link rel="stylesheet" href="design-system/02-components.css">
     <link rel="stylesheet" href="design-system/03-guia-bancos.css">

   Cobre 4 frentes:
     A. Regras semânticas de cor (overrides intencionais do DS)
     B. Hierarquia tipográfica + ritmo de leitura
     C. Hero unificado (header + hero como uma peça) e auxílios de leitura
     D. Biblioteca de blocos (alterne o formato entre seções)
   ============================================================= */


/* =============================================================
   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) */
.fm-chip--ok        { background: var(--azure-light-10); color: var(--azure-deep); }
.fm-note--ok        { border-left-color: var(--azure-deep); background: var(--azure-light-10); }
.fm-note--ok .fm-note__title { color: var(--azure-deep); }
.fm-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. */
.fm-note--yellow                 { border-left-color: var(--yellow); background: var(--yellow-10); }
.fm-note--yellow .fm-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; }
.ref-santander{ --ref: #EC0000; }
.ref-tudoazul { --ref: #0070C0; }
.ref-latam    { --ref: #CC0000; }
.ref-dotz     { --ref: var(--orange); }


/* =============================================================
   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(.fm-btn) {
  color: var(--azure-deep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.article a:not(.fm-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; } }


/* =============================================================
   C. HERO UNIFICADO + AUXÍLIOS DE LEITURA
   ============================================================= */

/* 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 (.fm-header--solid, alternado por
   JS). Cores de logo/links vêm de 02-components.css + estilos da página. */
.fm-header,
.fm-header--solid    { position: sticky; top: 0; z-index: 200; }
.fm-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. */
.fm-header--solid,
.fm-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 (.fm-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; }
.fm-header--solid .brand-mark--white,
.fm-header--solid .brand-logo--white,
.fm-header.is-menu-open .brand-mark--white,
.fm-header.is-menu-open .brand-logo--white { display: none; }
.fm-header--solid .brand-mark--blue,
.fm-header--solid .brand-logo--blue,
.fm-header.is-menu-open .brand-mark--blue,
.fm-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;
}
/* JS deve ajustar #hero-bg height = header.offsetHeight + hero.offsetHeight */

/* Hero transparente: deixa a camada #hero-bg (foto de fundo) aparecer atrás do
   header + hero. Sem isto, o fundo opaco de .fm-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. */
.fm-hero--gradient { background: transparent; isolation: isolate; }
.fm-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); }
.fm-hero--gradient .byline { border-top-color: var(--white-a60); }
.fm-hero--gradient .byline__name { color: #fff; }
.fm-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); }


/* =============================================================
   D. BIBLIOTECA DE BLOCOS
   -------------------------------------------------------------
   Regra de ouro: ALTERNE o formato entre seções consecutivas.
   Cada bloco comunica um tipo de informação:
     timeline   → passos / fluxo sequencial
     card-table → comparar atributos lado a lado
     bar-chart  → magnitude com linha de referência
     transfer   → origem → destino (conversão)
     rankladder → ordenar por valor, com 1 destaque
     verdict    → decisão sim/não (2 colunas + selo)
     fm-faq     → perguntas frequentes (nativo do DS)
     bank-link  → cluster de links relacionados
     cta-banner → conversão (imagem + texto à esquerda + botão amarelo)
   ============================================================= */

/* 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 > .fm-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.
   ============================================================= */
.fm-btn          { border-radius: var(--r-pill); }
.fm-btn--text    { border-radius: 0; }                 /* link-botão: sem pill */
.fm-btn--yellow,
.fm-btn--login   { background: var(--yellow); color: var(--ink); }
.fm-btn--yellow:hover,
.fm-btn--login:hover { background: var(--yellow-70); }
.cta-banner .fm-btn--yellow { box-shadow: 0 6px 18px -6px rgba(252,177,0,.55); }


/* =============================================================
   F. CHROME — autor (E-E-A-T), cluster de relacionados, footer
   -------------------------------------------------------------
   Peças que vivem no layout (04-layout.html), não nas seções da
   página. O cluster de relacionados (#internal-links) é populado
   pelo Step 3.3; aqui só recebe estilo.
   ============================================================= */

/* 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 .fm-footer__grid/__heading/__bottom
   vive em 02-components; aqui só o brand-block e o reset das listas). */
.fm-footer__brand-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-4); }
.fm-footer__brand-block img { align-self: flex-start; width: auto; max-width: 100%; }
.fm-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; }
.fm-footer__col ul      { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.fm-footer__col li a    { font-size: var(--fs-14); color: var(--white-a80); }
.fm-footer__col li a:hover { color: var(--white); }
.fm-footer__brand-links { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.fm-footer__brand-links a { font-size: var(--fs-14); color: var(--white-a80); }
.fm-footer__brand-links a:hover { color: var(--white); }
.fm-footer__social { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; gap: var(--s-3); }
.fm-footer__social a { display: inline-flex; color: var(--white); opacity: .85; transition: opacity var(--dur-2) var(--ease-out); }
.fm-footer__social a:hover { opacity: 1; }
.fm-footer__social svg { width: 22px; height: 22px; fill: currentColor; }