/* =========================================================
   Página de case · fbgrowth.com.br/cases/<slug>
   Depende de tokens.css. Compartilhado pelas três páginas de case,
   porque a próxima nasce copiando a última e divergir em CSS solto é
   o que fez a régua de gancho existir em quatro versões.
   ========================================================= */

body{margin:0;background:var(--navy-900);color:var(--mist);
  font-family:var(--font-body);font-weight:400;line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--doc-max);margin:0 auto;padding:0 var(--doc-pad) 5.5rem}
a{color:inherit}

/* ---------- trilha ---------- */
.cs-trilha{font-family:var(--font-data);font-size:.75rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mist-dim);padding:1.2rem 0 0}
.cs-trilha a{color:var(--mist-dim);text-decoration:none}
.cs-trilha a:hover{color:var(--gold)}
.cs-trilha span{margin:0 .5em;opacity:.6}

/* ---------- abertura ---------- */
.cs-hero{padding:1.6rem 0 2.6rem;border-bottom:1px solid var(--navy-line)}
.cs-kick{font-family:var(--font-data);font-size:.75rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.cs-hero h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.06;letter-spacing:-.03em;
  color:var(--white);margin:0}
.cs-hero h1 .g{color:var(--gold)}
.cs-lead{margin:1.2rem 0 0;font-size:1.1rem;line-height:1.55;color:var(--mist)}
.cs-ficha{margin:1.8rem 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem 1.4rem;
  border-top:1px solid var(--navy-line);padding-top:1.4rem}
.cs-ficha dt{font-family:var(--font-data);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist-dim)}
.cs-ficha dd{margin:.35rem 0 0;font-size:.98rem;color:var(--white);line-height:1.35}

/* ---------- os números-herói ---------- */
.cs-nums{margin:2.2rem 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--navy-line);border:1px solid var(--navy-line);border-radius:14px;
  overflow:hidden}
.cs-nums li{background:var(--navy-800);padding:1.4rem 1.3rem}
.cs-n{display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.9rem,4.4vw,2.4rem);line-height:1;letter-spacing:-.03em;color:var(--white)}
.cs-nums li.up .cs-n{color:var(--green)}
.cs-nums li.down .cs-n{color:var(--green)}
.cs-l{display:block;margin-top:.6rem;font-size:.9rem;line-height:1.35;color:var(--mist)}
.cs-l em{display:block;font-style:normal;font-family:var(--font-data);font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mist-dim);margin-top:.35rem}
.cs-selo{margin:.9rem 0 0;font-family:var(--font-data);font-size:.72rem;letter-spacing:.05em;
  color:var(--mist-dim)}

/* ---------- seções ---------- */
.cs-sec{padding:2.8rem 0;border-bottom:1px solid var(--navy-line)}
.cs-sec:last-of-type{border-bottom:0}
.cs-sec__n{font-family:var(--font-data);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mist-dim);margin:0 0 .7rem}
.cs-sec h2{font-size:clamp(1.5rem,3.4vw,1.95rem);line-height:1.14;letter-spacing:-.025em;
  color:var(--white);margin:0}
.cs-sec h3{font-size:1.1rem;color:var(--white);margin:0 0 .5rem;letter-spacing:-.01em}
.cs-sec p{margin:1rem 0 0;font-size:1.02rem;line-height:1.62}
.cs-sec p b,.cs-sec li b{color:var(--white);font-weight:600}

/* ---------- lista de sintomas ---------- */
.cs-lista{margin:1.5rem 0 0;padding:0;list-style:none;display:grid;gap:.9rem}
.cs-lista li{position:relative;padding-left:1.5rem;font-size:1.02rem;line-height:1.55}
.cs-lista li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;
  border-radius:2px;background:var(--gold)}

/* ---------- os atos ---------- */
.cs-atos{margin:1.7rem 0 0;display:grid;gap:1rem}
.cs-ato{padding:1.5rem 1.6rem;border:1px solid var(--navy-line);border-radius:14px;
  background:var(--navy-850)}
.cs-ato__k{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.9rem;flex-wrap:wrap}
.cs-ato__n{font-family:var(--font-data);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}
.cs-ato__q{font-family:var(--font-data);font-size:.7rem;color:var(--mist-dim)}
.cs-ato h3{margin:0 0 .8rem}
.cs-ato p{margin:.7rem 0 0;font-size:.98rem}
.cs-ato .cs-lista{margin-top:1rem}
.cs-ato .cs-lista li{font-size:.98rem}
.cs-fecho{margin:1rem 0 0;padding-top:1rem;border-top:1px solid var(--navy-line);
  font-size:.95rem;color:var(--mist)}
.cs-fecho b{color:var(--white)}

/* ---------- tabela de variação ---------- */
.cs-tw{margin:1.7rem 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cs-tab{width:100%;min-width:420px;border-collapse:collapse;font-size:.98rem}
table.cs-tab th{font-family:var(--font-data);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist-dim);text-align:left;font-weight:400;
  padding:0 .9rem .8rem 0;border-bottom:1px solid var(--navy-line)}
table.cs-tab th:last-child,table.cs-tab td:last-child{text-align:right;padding-right:0}
table.cs-tab td{padding:.85rem .9rem .85rem 0;border-bottom:1px solid var(--navy-line);
  color:var(--mist)}
table.cs-tab td:first-child{color:var(--white)}
table.cs-tab td.v{font-family:var(--font-display);font-weight:900;font-size:1.15rem;
  color:var(--green);letter-spacing:-.02em;white-space:nowrap}
table.cs-tab td.est{font-family:var(--font-data);font-size:.85rem;color:var(--mist-dim);
  white-space:nowrap}
table.cs-tab tr:last-child td{border-bottom:0}

/* ---------- caixa de destaque ---------- */
.cs-cx{margin:1.7rem 0 0;padding:1.4rem 1.5rem;border-radius:14px;
  border:1px solid var(--gold-veil);background:rgba(242,201,121,.07)}
.cs-cx__rot{display:block;font-family:var(--font-data);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.6rem}
.cs-cx p{margin:0;font-size:1.08rem;line-height:1.5;color:var(--white)}

/* ---------- nota metodológica ---------- */
.cs-nota{margin-top:2.4rem;padding:1.4rem 1.5rem;border:1px solid var(--navy-line);
  border-radius:14px;background:rgba(248,248,248,.02)}
.cs-nota summary{font-family:var(--font-data);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mist-dim);cursor:pointer}
.cs-nota summary:hover{color:var(--gold)}
.cs-nota p{margin:1rem 0 0;font-size:.9rem;line-height:1.6;color:var(--mist-dim)}

/* ---------- índice de cases ---------- */
.cs-cards{margin:2rem 0 0;display:grid;gap:1.1rem}
.cs-card{display:block;padding:1.7rem 1.8rem;border:1px solid var(--navy-line);
  border-radius:16px;background:var(--navy-850);text-decoration:none;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.cs-card:hover{border-color:var(--gold-veil);transform:translateY(-2px)}
.cs-card__k{font-family:var(--font-data);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:.8rem}
.cs-card h2{font-size:clamp(1.3rem,3vw,1.6rem);line-height:1.16;letter-spacing:-.025em;
  color:var(--white);margin:0 0 .7rem}
.cs-card p{margin:0;font-size:.98rem;line-height:1.55;color:var(--mist)}
.cs-card__nums{margin:1.2rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;
  gap:.5rem .6rem}
.cs-card__nums li{font-family:var(--font-data);font-size:.78rem;color:var(--white);
  padding:.35rem .7rem;border:1px solid var(--navy-line);border-radius:99px;
  background:rgba(120,242,121,.06)}
.cs-card__mais{display:inline-flex;align-items:center;gap:.4em;margin-top:1.2rem;
  font-size:.92rem;color:var(--gold)}

@media (max-width:600px){
  .cs-ficha{grid-template-columns:1fr 1fr}
}

/* A topbar e o rodapé vêm do blocks.css, onde .shell mede 1200px: numa página de
   leitura de 820 isso deixava o logo 155px à esquerda do texto. Aqui eles seguem
   a medida do documento, com o mesmo respiro lateral do .wrap. */
.topbar.shell,.foot__inner.shell,.aplicar .shell{max-width:var(--doc-max);
  padding-inline:var(--doc-pad)}
/* .shell dentro de .wrap somava o respiro lateral duas vezes, e o formulário
   ficava 29px à direita do texto. Dentro do wrap o shell não recua nada. */
.wrap .shell{max-width:none;padding-inline:0}

/* =========================================================
   Seção do método · o Protocolo e o funil das cinco frentes
   O HTML vem de partials/metodo.html, estampado nas duas páginas de case
   por tools/seo.py. O desenho é o mesmo do deck de cases, redesenhado para
   página responsiva: no deck o slide tem 1280 fixos e aqui a medida é 800
   caindo para 360.
   ========================================================= */

/* ---------- os três degraus e o volante ---------- */
.mt-pr{margin:1.7rem 0 0}
.mt-dg__g{display:grid;gap:.7rem}
.mt-dg{display:grid;grid-template-columns:1.9rem 1fr;gap:.7rem;
  padding:1rem 1.1rem;border:1px solid var(--navy-line);border-radius:12px;
  background:var(--navy-850)}
.mt-dg__n{font-family:var(--font-data);font-size:.78rem;letter-spacing:.08em;
  color:var(--gold);padding-top:.2rem}
.mt-dg h3{margin:0 0 .35rem;font-size:1.02rem;line-height:1.15}
.mt-dg p{margin:0;font-size:.88rem;line-height:1.45;color:var(--mist)}
/* a seta é o que costura os três passos que terminam no quarto que não termina */
.mt-pr__e{margin:.9rem 0;text-align:center;font-size:1.1rem;line-height:1;color:var(--green)}

/* o volante: o anel é SVG e os cinco rótulos são HTML. No desktop eles ficam em
   volta, em duas colunas alinhadas; abaixo de 620 eles saem de volta do anel e
   viram lista de duas colunas, porque rótulo em torno de um círculo num celular
   de 390 sai com 9px de altura. O número é o que amarra rótulo e nó. */
.mt-vl{position:relative;display:flex;justify-content:center;margin:0 auto;
  padding:2.6rem 0 1.4rem}
.mt-vl__anel{position:relative;width:300px;max-width:100%;aspect-ratio:1}
.mt-vl__svg{width:100%;height:100%;display:block}
.mt-vl__tr{fill:none;stroke:rgba(248,248,248,.1);stroke-width:1;stroke-dasharray:3 5}
.mt-vl__pt{fill:var(--green);stroke:none}
.mt-vl__arc{fill:none;stroke:var(--green);stroke-width:1.6;stroke-linecap:round;opacity:.72}
.mt-vl__no circle{fill:var(--navy-900);stroke:var(--green);stroke-width:1.6}
.mt-vl__no text{font-family:var(--font-data);font-size:12px;fill:var(--green)}
.mt-vl__k{font-family:var(--font-data);font-size:13px;letter-spacing:.14em;fill:var(--gold)}
.mt-vl__t{font-family:var(--font-display);font-weight:900;font-size:26px;
  letter-spacing:-.02em;fill:var(--white)}
.mt-vl__s{font-family:var(--font-data);font-size:10.5px;letter-spacing:.1em;fill:var(--mist-dim)}
.mt-vl__rot{display:flex;align-items:baseline;gap:.45em;font-family:var(--font-display);
  font-weight:600;font-size:.94rem;line-height:1.25;color:var(--white)}
.mt-vl__rot b{font-family:var(--font-data);font-weight:400;font-size:.72rem;color:var(--green)}

@media (min-width:620px){
  /* o anel mede 300px fixos aqui, então o rótulo pode ser ancorado em calc a
     partir do centro: é a única coordenada do desenho, e ela não depende de fonte */
  .mt-vl{padding:2.8rem 0 2.4rem}
  .mt-vl__rot{position:absolute;width:9.5rem}
  .mt-vl__rot.is-1{left:50%;top:0;transform:translateX(-50%);width:auto;justify-content:center}
  .mt-vl__rot.is-2{left:calc(50% + 158px);top:calc(2.8rem + 96px)}
  .mt-vl__rot.is-3{left:calc(50% + 158px);top:calc(2.8rem + 228px)}
  .mt-vl__rot.is-4{right:calc(50% + 158px);top:calc(2.8rem + 228px);
    flex-direction:row-reverse;text-align:right}
  .mt-vl__rot.is-5{right:calc(50% + 158px);top:calc(2.8rem + 96px);
    flex-direction:row-reverse;text-align:right}
}
@media (max-width:619px){
  .mt-vl{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1rem;padding:1.8rem 0 .6rem}
  .mt-vl__anel{grid-column:1 / -1;margin:0 auto .9rem;width:min(300px,86%)}
}

.mt-sub{margin:3.2rem 0 0;font-size:1.12rem;line-height:1.25;color:var(--white)}

/* ---------- o funil das cinco frentes ---------- */
.mt-fn{margin:1.4rem 0 0;display:grid;gap:.45rem}
.mt-fn__ln{display:grid;grid-template-columns:46% 1fr;align-items:stretch;min-height:3.4rem}
/* o trapézio vem do clip-path que está no style de cada faixa, calculado por
   interpolação: mexer numa etapa não desalinha as outras */
.mt-fn__fx{display:flex;align-items:center;justify-content:center;padding:.4rem .6rem;
  text-align:center;background:linear-gradient(90deg,rgba(242,201,121,.2),rgba(242,201,121,.1))}
.mt-fn__ln.is-fim .mt-fn__fx{background:linear-gradient(90deg,rgba(120,242,121,.22),
  rgba(120,242,121,.11))}
.mt-fn__fx span{font-family:var(--font-display);font-weight:600;font-size:.92rem;
  line-height:1.15;color:var(--white)}
/* o tracejado de chamada nasce do rótulo, então não depende de coordenada */
.mt-fn__rt{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding-left:3.4rem}
.mt-fn__rt::before{content:"";position:absolute;left:.9rem;top:50%;width:1.9rem;height:1px;
  background:repeating-linear-gradient(90deg,rgba(248,248,248,.3) 0 2px,transparent 2px 6px)}
.mt-fn__rt::after{content:"";position:absolute;left:.45rem;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--gold)}
.mt-fn__ln.is-fim .mt-fn__rt::after{background:var(--green)}
.mt-fn__rt b{font-family:var(--font-display);font-weight:900;font-size:1.02rem;line-height:1.15;
  letter-spacing:-.02em;color:var(--white)}
.mt-fn__ln.is-fim .mt-fn__rt b{color:var(--green)}
.mt-fn__rt i{margin-top:.15rem;font-style:normal;font-size:.86rem;line-height:1.3;
  color:var(--mist)}

@media (min-width:680px){
  .mt-dg__g{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:460px){
  .mt-fn__ln{grid-template-columns:40% 1fr}
  .mt-fn__fx span{font-size:.78rem}
  .mt-fn__rt{padding-left:1.8rem}
  .mt-fn__rt::before{width:.8rem;left:.6rem}
  .mt-fn__rt::after{left:.15rem}
}