/* Faturaí Med — sistema de movimento
   reveal ao rolar, scroll-telling, contadores, parallax e traçado de SVG.
   Carregar depois de shared.css. */

:root{
  --fm-acc: var(--accent, #5468C4);
  --fm-acc2: var(--brand, #2C3D8F);
  --fm-ease: cubic-bezier(.16,.84,.32,1);
  --fm-gutter: 22px;   /* respiro lateral da página, para a faixa fixa sangrar até a borda */
  --fm-top: 0px;       /* altura de cabeçalho fixo, quando houver */
  --fm-figbg: #fff;    /* fundo da faixa fixa no celular */
}
html{scroll-behavior:smooth}

/* ---------- barra de progresso da leitura ---------- */
.fm-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:10000;pointer-events:none;background:transparent}
.fm-progress i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--fm-acc),var(--fm-acc2));will-change:transform}

/* ---------- reveal ---------- */
[data-rv]{opacity:0;
  transition:opacity .78s var(--fm-ease), transform .9s var(--fm-ease), filter .7s ease;
  transition-delay:var(--rv-d,0ms);will-change:opacity,transform}
[data-rv="up"]{transform:translate3d(0,26px,0)}
[data-rv="up-lg"]{transform:translate3d(0,58px,0)}
[data-rv="left"]{transform:translate3d(-34px,0,0)}
[data-rv="right"]{transform:translate3d(34px,0,0)}
[data-rv="scale"]{transform:scale(.955)}
[data-rv="blur"]{transform:translate3d(0,22px,0);filter:blur(12px)}
[data-rv].is-in{opacity:1;transform:none;filter:none}

/* ---------- headline palavra por palavra ---------- */
.fm-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.fm-w > i{display:inline-block;font-style:inherit;transform:translateY(110%);opacity:0;
  transition:transform 1s var(--fm-ease), opacity .6s ease;transition-delay:var(--rv-d,0ms)}
.fm-w.is-in > i{transform:none;opacity:1}

/* ---------- régua que cresce sob os títulos ---------- */
.fm-rule{display:block;height:2px;width:0;background:var(--fm-acc);border-radius:2px;margin:0 0 22px;
  transition:width 1.1s var(--fm-ease);transition-delay:.12s}
.fm-rule.is-in{width:64px}

/* ---------- hover das fichas ---------- */
.perda,.t,.f,.item,.passo,.mini,.fm-card{transition:transform .35s var(--fm-ease), box-shadow .35s ease, border-color .25s ease}
.perda:hover,.t:hover,.f:hover,.fm-card:hover{transform:translateY(-3px)}

/* ---------- cabeçalho fixo que encolhe ---------- */
header.top{transition:height .3s var(--fm-ease), box-shadow .3s ease, background-color .3s ease}
header.top.is-stuck{box-shadow:0 6px 24px -18px rgba(23,28,46,.65)}

/* ---------- scroll-telling ---------- */
.scrolly{position:relative;margin:8px 0 0}
.scrolly-fig{position:sticky;top:6vh;z-index:5;margin-bottom:18px}
.scrolly-steps{position:relative;z-index:1}
.scrolly-step{min-height:64vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.32;transform:translateY(10px);transition:opacity .5s ease, transform .5s var(--fm-ease)}
.scrolly-step.is-active{opacity:1;transform:none}
.scrolly-step .sn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  font-size:12.5px;font-weight:700;background:var(--fm-acc);color:#fff;margin-bottom:12px}
.scrolly-step h3{margin:0 0 8px;font-size:clamp(19px,2.6vw,23px);letter-spacing:-.018em;line-height:1.25}
.scrolly-step p{margin:0;font-size:16px;line-height:1.62;max-width:46ch}
@media(max-width:899px){
  /* a figura vira uma faixa fixa no topo e o texto passa POR BAIXO dela.
     sem isso, os dois se sobrepõem e a leitura embaralha. */
  .scrolly-fig{
    top:var(--fm-top,0px);
    margin:0 calc(var(--fm-gutter) * -1) 4px;
    padding:12px var(--fm-gutter) 14px;
    background:var(--fm-figbg,#fff);
    box-shadow:0 16px 18px -18px rgba(23,28,46,.5);
  }
  .scrolly-step{min-height:auto;padding:26px 0 30px}
  .scrolly-step:first-child{padding-top:10px}
  .scrolly-step:last-child{padding-bottom:8px}
  .scrolly-step p{font-size:15.5px}
}
@media(min-width:900px){
  .scrolly{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
  .scrolly-fig{top:14vh;margin-bottom:0}
  .scrolly-step{min-height:78vh}
}
[data-when]{transition:opacity .5s ease, transform .6s var(--fm-ease), background-color .4s ease, border-color .4s ease}
[data-when]:not(.on){opacity:.18}
[data-when].on{opacity:1}

/* ---------- utilitários de layout novos ---------- */
.fm-grid{display:grid;gap:14px}
@media(min-width:780px){.fm-grid.c2{grid-template-columns:repeat(2,1fr)}.fm-grid.c3{grid-template-columns:repeat(3,1fr)}}
.fm-card{border:1px solid var(--line);border-radius:14px;padding:22px;background:#fff}
.fm-card h3{margin:0 0 8px;font-size:17px;letter-spacing:-.014em}
.fm-card p{margin:0;font-size:14.9px;line-height:1.62;color:var(--ink-soft)}
.fm-card .no{display:inline-flex;width:22px;height:22px;border-radius:6px;align-items:center;justify-content:center;
  background:#FBEDEB;color:var(--danger);font-weight:700;font-size:14px;margin-bottom:11px}
.fm-card .yes{display:inline-flex;width:22px;height:22px;border-radius:6px;align-items:center;justify-content:center;
  background:#E6F2ED;color:var(--ok);font-weight:700;font-size:14px;margin-bottom:11px}

.fm-time{display:grid;gap:0;border-left:2px solid var(--line);margin:26px 0 0;padding-left:0}
.fm-time > div{position:relative;padding:0 0 26px 26px}
.fm-time > div::before{content:"";position:absolute;left:-6px;top:5px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2px solid var(--fm-acc)}
.fm-time h4{margin:0 0 5px;font-size:15.5px;letter-spacing:-.01em}
.fm-time p{margin:0;font-size:14.8px;line-height:1.6;color:var(--ink-soft);max-width:56ch}
.fm-time .d{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.04em;display:block;margin-bottom:3px}

.fm-quote{border-left:2px solid var(--fm-acc);padding:6px 0 6px 22px;margin:34px 0;
  font-size:clamp(19px,2.8vw,23px);line-height:1.45;letter-spacing:-.014em}
.fm-note{font-size:14px;color:var(--muted);line-height:1.6;margin-top:16px}

.fm-gloss{display:grid;gap:0;margin-top:6px}
.fm-gloss > div{display:grid;grid-template-columns:1fr;gap:3px;padding:16px 0;border-bottom:1px solid var(--line)}
.fm-gloss > div:last-child{border-bottom:0}
.fm-gloss dt{font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.fm-gloss dd{margin:0;font-size:15px;line-height:1.6;color:var(--ink-soft);max-width:62ch}
@media(min-width:760px){.fm-gloss > div{grid-template-columns:190px 1fr;gap:26px;align-items:start}}

.fm-stat{display:grid;gap:14px;margin-top:24px}
@media(min-width:700px){.fm-stat{grid-template-columns:repeat(3,1fr)}}
.fm-stat > div{border-top:2px solid var(--fm-acc);padding-top:14px}
.fm-stat b{display:block;font-size:clamp(26px,4vw,34px);letter-spacing:-.03em;line-height:1}
.fm-stat span{display:block;font-size:14px;color:var(--ink-soft);line-height:1.55;margin-top:7px}

/* dica de rolagem no herói */
.fm-hint{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:26px;
  animation:fmbob 2.4s ease-in-out infinite}
@keyframes fmbob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- acessibilidade ---------- */
@media(prefers-reduced-motion:reduce){
  [data-rv],[data-rv].is-in{opacity:1 !important;transform:none !important;filter:none !important}
  .fm-w > i{transform:none !important;opacity:1 !important}
  .fm-rule{width:64px !important}
  .scrolly-step{opacity:1 !important;transform:none !important}
  [data-when]:not(.on){opacity:1 !important}
  .fm-progress,.fm-hint{display:none}
  .scrolly-fig{position:static}
}