/* =====================================================================
   Página Funcionalidades (prefixo .fn-)
   Hero escuro · Novidades · Por etapa (mini-nav sticky + um card por
   etapa) · Em toda a jornada (card escuro) · Fechamento.
   Cabeçalho e rodapé vêm de css/home.css; variáveis e componentes de
   css/ds.css.
   Coreografias (uma por bloco):
   · Hero, no load: pill → H1 linha a linha (máscara) → parágrafo → chips
     em cascata (pop, 70 ms) e brilho teal surgindo atrás.
   · Novidades: cabeçalho e os 3 cards revelam escalonados (.rv + --i).
   · Por etapa: cada card "monta" ao entrar na tela (.is-in, pelo JS):
     sobe, a barra colorida do topo se desenha da esquerda, pill/pergunta/
     texto entram em sequência e os itens da grade em cascata (55 ms);
     o contador "N funcionalidades" conta (PX.counters). O mini-nav tem um
     indicador que desliza até a etapa visível (scroll-spy).
   · Em toda a jornada: o card escuro entra em escala e os tiles em cascata.
   · Fechamento: card revela (.rv).
   Micro: itens e tiles sobem 2 px no hover, o check preenche com a cor da
   etapa, links com seta que avança, chips do hero sobem 2 px.
   ===================================================================== */

/* ---------- Página ---------- */
.fn-main { display: block; min-width: 0; }
.fn-page .drawer__link[aria-current="page"] { color: var(--teal-d); } /* página atual no menu do celular */

/* ---------- Hero ---------- */
.fn-hero.sec { padding-top: calc(var(--header-total) + 56px); padding-bottom: clamp(56px, 6vw, 76px); text-align: center; }
.fn-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fn-hero__glow {
  position: absolute; right: -14%; bottom: -60%; width: 66%; height: 140%;
  background: radial-gradient(ellipse at center, rgba(67, 176, 152, .36) 0%, rgba(67, 176, 152, .12) 38%, rgba(67, 176, 152, 0) 68%);
  animation: fnGlowIn 1.6s var(--ease-out) both;
}
.fn-hero__glow--2 {
  right: auto; left: -18%; top: -70%; bottom: auto; width: 48%; height: 120%;
  background: radial-gradient(ellipse at center, rgba(93, 211, 180, .14) 0%, rgba(93, 211, 180, 0) 65%);
  animation-delay: .2s;
}
@keyframes fnGlowIn { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: none; } }

.fn-hero__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.fn-hero__pill { animation: pxFadeUp .8s var(--ease-out) .1s backwards; }
.fn-hero__title { margin-top: 22px; font-size: clamp(2.2rem, 1.5rem + 2vw, 3rem); line-height: 1.1; letter-spacing: -.025em; }
.fn-hero__line { display: block; overflow: visible clip; padding: .08em 0 .14em; margin: -.08em 0 -.14em; }
.fn-hero__inner { display: block; animation: fnLineUp 1s var(--ease-out) .22s backwards; }
.fn-hero__line:nth-child(2) .fn-hero__inner { animation-delay: .34s; }
@keyframes fnLineUp { from { transform: translateY(112%); opacity: 0; } to { transform: none; opacity: 1; } }
.fn-hero__lead { margin-top: 20px; max-width: 62em; font-size: 17.5px; line-height: 1.6; color: var(--on-dark-muted); animation: pxFadeUp .8s var(--ease-out) .5s backwards; }

/* chips das etapas (links para as âncoras) */
.fn-hero__chips { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: 10px; max-width: 100%; }
.fn-hero__chipitem { display: flex; align-items: center; animation: pxPop .55s var(--ease-spring) calc(.66s + var(--i, 0) * 70ms) backwards; }
.fn-hero__chipitem + .fn-hero__chipitem::before { content: "›"; margin: 0 8px; color: rgba(255, 255, 255, .4); font-size: 15px; font-weight: 700; line-height: 1; }
.fn-hero .fn-hero__chip {
  gap: 8px; padding: 9px 15px; font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
  transition: border-color var(--dur-2), background-color var(--dur-2), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.fn-hero .fn-hero__chip .dot { width: 8px; height: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 28%, transparent); }
.fn-hero .fn-hero__chip:hover { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .14); transform: translateY(-2px); }
.fn-hero .fn-hero__chip--fill { background: var(--teal); border-color: var(--teal); color: #fff; box-shadow: 0 10px 22px -8px var(--teal-glow), 0 0 0 4px rgba(67, 176, 152, .16); }
.fn-hero .fn-hero__chip--fill:hover { background: #3CA48C; border-color: #3CA48C; box-shadow: 0 12px 26px -8px var(--teal-glow), 0 0 0 6px rgba(67, 176, 152, .18); }
.fn-hero .fn-hero__chip--fill .dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .75); }
/* bolinha das 5 cores (Em toda a jornada / Todas as etapas) */
.fn-dot-all { background: conic-gradient(var(--atrair) 0 20%, var(--atender) 0 40%, var(--operar) 0 60%, var(--relacionar) 0 80%, var(--decidir) 0); }

/* ---------- Cabeçalhos dos blocos (um pouco menores que os da home: a página é densa) ---------- */
.sec-head .fn-h2 { font-size: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem); margin-top: 16px; }
.fn-news__head .lead, .fn-etapas__head .lead { max-width: 46em; } /* uma linha a 1440, como na proposta */

/* ---------- Novidades ---------- */
.fn-news.sec { padding-bottom: 0; }
.fn-news__head { margin-bottom: clamp(24px, 3vw, 32px); }
.fn-news__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.fn-new {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; min-height: 196px; padding: 24px 26px 24px;
  border-radius: 18px; color: #fff;
  box-shadow: 0 18px 40px -24px rgba(45, 54, 69, .45);
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.fn-new--teal { background: linear-gradient(135deg, #2A7D6A, #43B098); }
.fn-new--blue { background: linear-gradient(135deg, #2F6FDB, #6F97E8); }
.fn-new--purple { background: linear-gradient(135deg, #7A4FD8, #A585EC); }
.fn-new::before { /* reflexo suave no canto, que cresce no hover */
  content: ""; position: absolute; z-index: -1; right: -70px; top: -80px; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
  transition: transform .9s var(--ease-out);
}
.fn-new:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -26px rgba(45, 54, 69, .55); }
.fn-new:hover::before { transform: scale(1.3); }
.fn-new__badge {
  display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .3); backdrop-filter: blur(4px);
  font-size: 11px; font-weight: 800; letter-spacing: .08em; line-height: 1.2;
}
.fn-new__title { color: #fff; margin-top: 14px; font-size: 1.4rem; line-height: 1.2; }
.fn-new__text { margin-top: 8px; max-width: 34em; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .95); }
.fn-new__link {
  margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 700; color: #fff;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .55); text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-2);
}
.fn-new__link::after { content: ""; position: absolute; inset: 0; } /* o card inteiro é clicável */
.fn-new__link .arr { display: inline-block; transition: transform var(--dur-2) var(--ease-out); }
.fn-new:hover .fn-new__link { text-decoration-color: #fff; }
.fn-new:hover .fn-new__link .arr { transform: translateX(4px); }
.fn-new__link:focus-visible { outline-color: #fff; outline-offset: 4px; }
.fn-new:has(.fn-new__link:focus-visible) { outline: 3px solid var(--teal); outline-offset: 3px; }
.fn-new:has(.fn-new__link:focus-visible) .fn-new__link:focus-visible { outline: none; }

/* ---------- Por etapa ---------- */
.fn-etapas.sec { padding-top: clamp(56px, 6.5vw, 88px); }
.fn-etapas { --fn-top: calc(var(--topbar-h) + var(--header-h-scrolled) + 8px); --fn-nav-h: 52px; }
.fn-etapas__in { position: relative; }
.fn-etapas__head { margin-bottom: clamp(20px, 2.6vw, 28px); }
/* as âncoras param abaixo do cabeçalho fixo + mini-nav (navegação nativa por #hash, menu suspenso etc.) */
.fn-anchor { scroll-margin-top: calc(var(--fn-top) + var(--fn-nav-h) + 16px); }

/* mini-nav sticky */
.fn-nav {
  position: sticky; top: var(--fn-top); z-index: 20;
  display: flex; justify-content: center; margin: 0 0 24px; pointer-events: none;
}
.fn-nav__scroll {
  pointer-events: auto; position: relative; display: inline-flex; max-width: 100%; padding: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line); box-shadow: 0 14px 30px -18px rgba(45, 54, 69, .35);
}
.fn-nav__list { position: relative; z-index: 1; display: flex; gap: 2px; }
.fn-nav__pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 700; line-height: 1.2; white-space: nowrap; color: #4A5563;
  transition: color var(--dur-2);
}
.fn-nav__pill .dot { width: 8px; height: 8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 16%, transparent); transition: transform var(--dur-3) var(--ease-spring); }
.fn-nav__pill:hover { color: var(--navy); }
.fn-nav__pill:hover .dot { transform: scale(1.25); }
.fn-nav__pill.is-active { color: var(--ct); }
.fn-nav__pill:focus-visible { outline-offset: -2px; }
.fn-nav__ind { /* indicador que desliza até a pílula ativa (posição e cor vêm do JS) */
  position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: 999px; opacity: 0;
  background: color-mix(in srgb, var(--c, var(--teal)) 13%, #fff);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c, var(--teal)) 45%, transparent);
  transition: transform .5s var(--ease-out), width .5s var(--ease-out), height .3s var(--ease-out), background-color .4s, box-shadow .4s, opacity .25s;
  will-change: transform;
}
.fn-nav__ind.is-on { opacity: 1; }

/* cards por etapa */
.fn-stages { display: grid; gap: 22px; }
.fn-stage {
  position: relative; overflow: hidden; min-width: 0;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 34px; align-items: start;
  padding: 32px 32px 32px; border-radius: 20px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 18px 44px -32px rgba(45, 54, 69, .4);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.fn-stage::before { /* barra superior na cor da etapa, que se desenha quando o card entra */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c);
  transform-origin: left center; transition: transform .9s var(--ease-out) .15s;
}
.fn-stage:hover { box-shadow: 0 24px 50px -30px rgba(45, 54, 69, .45); }
.fn-stage__intro { min-width: 0; }
.fn-stage__pill { background: var(--soft); color: var(--ct); text-transform: uppercase; letter-spacing: .08em; font-size: 11.5px; padding: 6px 12px 6px 10px; }
.fn-stage__pill .dot { width: 8px; height: 8px; }
.fn-stage__title { margin-top: 16px; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); line-height: 1.22; letter-spacing: -.02em; max-width: 14em; }
.fn-stage__text { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--muted); max-width: 30em; }
.fn-stage__count { margin-top: 16px; font-size: 13px; font-weight: 800; color: var(--ct); display: inline-flex; align-items: center; gap: 8px; }
.fn-stage__count::before { content: ""; width: 18px; height: 3px; border-radius: 3px; background: var(--c); }

.fn-stage__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-content: start; min-width: 0; }
.fn-item {
  min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 14px; border-radius: 14px; background: #FAFBFB; border: 1px solid #EDF0F2;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2), background-color var(--dur-2);
}
.fn-item:hover { transform: translateY(-2px); background: #fff; border-color: color-mix(in srgb, var(--c) 38%, var(--line)); box-shadow: 0 12px 24px -16px rgba(45, 54, 69, .35); }
.fn-item__ico {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--soft); color: var(--c);
  transition: background-color var(--dur-2), color var(--dur-2), transform var(--dur-3) var(--ease-spring);
}
.fn-item__ico svg { width: 14px; height: 14px; stroke-width: 2.8; }
.fn-item:hover .fn-item__ico { background: var(--c); color: #fff; transform: scale(1.08); }
.fn-item__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.fn-item__title { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.3; color: var(--navy); letter-spacing: -.005em; }
.fn-item__title .badge-novo { margin-left: 6px; vertical-align: 2px; }
.fn-item__desc { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--muted); flex: 1; }
.fn-item__where {
  display: inline-block; margin-top: 9px; padding: 2px 8px; border-radius: 999px;
  background: #EEF1F4; border: 1px solid #DDE3E8; color: var(--navy);
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em; line-height: 1.5;
}

/* coreografia de entrada de cada card (o JS marca .is-in quando ele entra na tela) */
html.js .fn-stage:not(.is-in) { opacity: 0; transform: translateY(22px); }
html.js .fn-stage:not(.is-in)::before { transform: scaleX(0); }
html.js .fn-stage:not(.is-in) .fn-stage__intro > *, html.js .fn-stage:not(.is-in) .fn-item { opacity: 0; }
.fn-stage.is-in .fn-stage__intro > * { animation: pxFadeUp .6s var(--ease-out) both; }
.fn-stage.is-in .fn-stage__pill { animation-delay: 120ms; }
.fn-stage.is-in .fn-stage__title { animation-delay: 190ms; }
.fn-stage.is-in .fn-stage__text { animation-delay: 260ms; }
.fn-stage.is-in .fn-stage__count { animation-delay: 330ms; }
.fn-stage.is-in .fn-item { animation: pxFadeUp .6s var(--ease-out) calc(180ms + var(--i, 0) * 55ms) both; }

/* ---------- Em toda a jornada (card escuro) ---------- */
.fn-all {
  position: relative; isolation: isolate; overflow: hidden; margin-top: 28px;
  padding: clamp(28px, 3.4vw, 40px) clamp(22px, 3vw, 40px);
  border-radius: 24px; background: var(--grad-dark); color: #fff;
  box-shadow: 0 30px 60px -30px rgba(31, 42, 54, .6);
}
.fn-all__glow {
  position: absolute; z-index: -1; right: -12%; bottom: -70%; width: 60%; height: 150%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(67, 176, 152, .3) 0%, rgba(67, 176, 152, .1) 38%, rgba(67, 176, 152, 0) 68%);
}
.fn-all__head { max-width: 700px; }
.fn-all__title { color: #fff; margin-top: 14px; font-size: clamp(1.55rem, 1.2rem + 1.1vw, 1.95rem); line-height: 1.18; letter-spacing: -.02em; }
.fn-all__lead { margin-top: 10px; font-size: 15.5px; line-height: 1.55; color: var(--on-dark-muted); }
.fn-all__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.fn-tile {
  min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 18px 18px 16px; border-radius: 14px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2), border-color var(--dur-2);
}
.fn-tile:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .11); border-color: rgba(93, 211, 180, .5); }
.fn-tile__title { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; color: #fff; }
.fn-tile__text { margin-top: 6px; font-size: 13px; line-height: 1.45; color: var(--on-dark-muted); flex: 1; }
.fn-tile__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fn-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
  font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
.fn-tag .dot { width: 8px; height: 8px; }
/* cascata dos tiles quando o card é revelado (.rv → .in) */
html.js .fn-all:not(.in) .fn-tile { opacity: 0; }
.fn-all.in .fn-tile { animation: pxFadeUp .6s var(--ease-out) calc(220ms + var(--i, 0) * 60ms) both; }

/* ---------- Fechamento ---------- */
.fn-cta.sec { padding-top: 0; }
.fn-cta__card {
  display: flex; align-items: center; justify-content: space-between; gap: 24px 40px;
  padding: 44px 44px 40px; border: 1px solid var(--line); border-radius: 22px;
  transition: transform var(--dur-3) var(--ease-out), box-shadow var(--dur-3) var(--ease-out);
}
.fn-cta__card:hover { box-shadow: var(--sh-lg); }
.fn-cta__text { min-width: 0; }
.fn-cta__title { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2rem); }
.fn-cta__meta { margin-top: 8px; font-size: 15.5px; color: var(--muted); }
.fn-cta__actions { flex: none; display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Responsivo ---------- */
@media (max-width: 1100px) {
  .fn-stage { grid-template-columns: 250px minmax(0, 1fr); gap: 26px; padding: 28px 26px; }
  .fn-stage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fn-all__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fn-news__grid { gap: 14px; }
  .fn-new { padding: 22px 22px 22px; }
}

@media (max-width: 920px) {
  .fn-hero.sec { padding-top: calc(var(--header-total) + 44px); }
  .fn-news__grid { grid-template-columns: minmax(0, 1fr); }
  .fn-new { min-height: 0; }
  .fn-new__text { max-width: 40em; }
  /* mini-nav vira uma faixa de largura total com rolagem horizontal */
  .fn-nav { justify-content: flex-start; margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r)); }
  .fn-nav__scroll {
    width: 100%; border-radius: 0; border-left: 0; border-right: 0; padding: 8px var(--gutter-r) 8px var(--gutter);
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    background: rgba(246, 247, 249, .94);
  }
  .fn-nav__scroll::-webkit-scrollbar { display: none; }
  .fn-nav__list { flex: none; }
  .fn-stage { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 24px 24px; }
  .fn-stage__title { max-width: none; }
  .fn-stage__text { max-width: none; }
  .fn-all { margin-top: 22px; }
  .fn-cta__card { flex-direction: column; align-items: flex-start; padding: 36px 32px 32px; }
}

@media (max-width: 680px) {
  .fn-hero.sec { padding-top: calc(var(--header-total) + 32px); }
  .fn-hero__lead { font-size: 16px; }
  .fn-hero__br { display: none; }
  /* chips em rolagem horizontal, sangrando até as bordas, com máscara nas pontas (como no hero da home) */
  .fn-hero__chips {
    flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none;
    width: calc(100% + var(--gutter) + var(--gutter-r)); max-width: none;
    margin-inline: calc(-1 * var(--gutter)) calc(-1 * var(--gutter-r));
    padding: 6px var(--gutter-r) 10px var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 40px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - 40px), transparent);
  }
  .fn-hero__chips::-webkit-scrollbar { display: none; }
  .fn-hero__chipitem { flex: none; scroll-snap-align: start; scroll-margin-left: var(--gutter); }
  .fn-hero .fn-hero__chip { min-height: 42px; padding: 10px 16px; }
  .fn-news__head { margin-bottom: 20px; }
  .fn-new { padding: 20px 20px 20px; border-radius: 16px; }
  .fn-new__title { font-size: 1.25rem; }
  .fn-new__text { font-size: 14px; }
  .fn-etapas.sec { padding-top: 52px; }
  .fn-stages { gap: 16px; }
  .fn-stage { padding: 22px 18px 20px; border-radius: 18px; gap: 18px; }
  .fn-stage__title { margin-top: 14px; font-size: 1.3rem; }
  .fn-stage__text { font-size: 15px; }
  .fn-stage__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .fn-item { padding: 13px 14px; }
  .fn-all { padding: 26px 18px 22px; border-radius: 20px; }
  .fn-all__lead { font-size: 15px; }
  .fn-all__grid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 22px; }
  .fn-tile { padding: 16px 16px 14px; }
  .fn-cta__card { padding: 30px 22px 26px; border-radius: 20px; gap: 22px; }
  .fn-cta__meta { font-size: 15px; }
  .fn-cta__actions { flex-direction: column; width: 100%; }
  .fn-cta__btn { width: 100%; white-space: normal; text-align: center; line-height: 1.25; }
}

@media (max-width: 420px) {
  .fn-hero__pill { font-size: 12px; }
  .fn-hero__title { font-size: 2rem; }
  .fn-nav__pill { padding: 8px 14px; font-size: 13px; }
  .fn-stage__title { font-size: 1.22rem; }
  .fn-cta__btn { font-size: 15px; padding-inline: 16px; }
}

/* ---------- Movimento reduzido: o DS zera durações; aqui zeramos os atrasos para nada "aparecer tarde" ---------- */
@media (prefers-reduced-motion: reduce) {
  .fn-hero__pill, .fn-hero__inner, .fn-hero__line:nth-child(2) .fn-hero__inner, .fn-hero__lead, .fn-hero__chipitem, .fn-hero__glow, .fn-hero__glow--2,
  .fn-stage::before, .fn-stage.is-in .fn-stage__pill, .fn-stage.is-in .fn-stage__title, .fn-stage.is-in .fn-stage__text, .fn-stage.is-in .fn-stage__count,
  .fn-stage.is-in .fn-item, .fn-all.in .fn-tile { animation-delay: 0s; transition-delay: 0s; }
  .fn-new::before, .fn-new:hover::before { transition: none; transform: none; }
}