/* ============================================================
   FERRAMENTAS: hub e calculadoras (SI Digital)
   Depende dos tokens de /assets/style.css (navy, offwhite, lime,
   orange, --font) e convive com blog-post.css (hero, content).
   ============================================================ */

/* ---------- seção base (tema claro) ---------- */
.ferr-section{background:var(--offwhite);color:var(--navy);padding:88px 48px}
.ferr-section + .post-content-section{padding-top:0}
@media(max-width:768px){.ferr-section{padding:56px 20px}}

/* ---------- calculadora: grid 2 colunas ---------- */
.ferr-calc{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
@media(max-width:900px){.ferr-calc{grid-template-columns:1fr}}

/* ---------- card de inputs ---------- */
.ferr-card{background:var(--white);border-radius:24px;padding:40px;box-shadow:0 8px 40px rgba(0,22,57,.06)}
@media(max-width:480px){.ferr-card{padding:28px 22px}}
.ferr-card-title{font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;opacity:.55;margin-bottom:26px}

.ferr-row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:480px){.ferr-row2{grid-template-columns:1fr}}
.ferr-row2 .ferr-field{margin-bottom:14px}
.ferr-hint-presets{margin:-4px 0 24px}
.ferr-aviso{margin:-12px 0 24px;padding:13px 16px;border-radius:12px;background:rgba(255,69,0,.08);border:1px solid rgba(255,69,0,.25);font-size:13px;line-height:1.6;color:var(--navy)}
.ferr-input select{flex:1;border:0;outline:0;background:transparent;font-family:var(--font);font-size:15px;font-weight:600;color:var(--navy);padding:14px 0;width:100%;min-width:0;cursor:pointer}
.ferr-input select option{color:var(--navy);background:var(--white)}

.ferr-field{margin-bottom:22px}
.ferr-field:last-child{margin-bottom:0}
.ferr-field label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px;color:var(--navy)}
.ferr-input{display:flex;align-items:center;gap:10px;border:1.5px solid rgba(0,22,57,.16);border-radius:12px;padding:0 16px;background:var(--white);transition:border-color .25s}
.ferr-input:focus-within{border-color:var(--orange)}
.ferr-prefix,.ferr-suffix{font-size:14px;font-weight:600;opacity:.45;white-space:nowrap}
.ferr-input input{flex:1;border:0;outline:0;background:transparent;font-family:var(--font);font-size:19px;font-weight:600;color:var(--navy);padding:13px 0;width:100%;min-width:0}
.ferr-hint{font-size:12px;opacity:.55;margin-top:6px;line-height:1.55}

/* ---------- painel de resultados ---------- */
.ferr-results{background:var(--navy);color:var(--offwhite);border-radius:24px;padding:40px;position:sticky;top:96px}
@media(max-width:900px){.ferr-results{position:static}}
@media(max-width:480px){.ferr-results{padding:28px 22px}}
.ferr-results-eyebrow{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.11em;color:var(--lime);margin-bottom:18px}
.ferr-roas-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.ferr-roas-big{font-size:54px;font-weight:700;line-height:1;color:var(--lime);letter-spacing:-.03em}
.ferr-roas-cap{font-size:12px;opacity:.55;margin-bottom:22px}

.ferr-verdict{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:8px 14px;border-radius:999px;white-space:nowrap}
.ferr-verdict-neutral{background:rgba(240,235,232,.14);color:var(--offwhite)}
.ferr-verdict-bad{background:var(--orange);color:var(--white)}
.ferr-verdict-warn{background:var(--orange-soft);color:var(--white)}
.ferr-verdict-good{background:var(--lime);color:var(--navy)}
.ferr-verdict-great{background:var(--lime);color:var(--navy)}

.ferr-metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
@media(max-width:480px){.ferr-metrics{grid-template-columns:1fr}}
.ferr-metric{border:1px solid rgba(240,235,232,.14);border-radius:14px;padding:15px 16px}
.ferr-metric-label{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;opacity:.55;margin-bottom:6px}
.ferr-metric-value{font-size:19px;font-weight:700;letter-spacing:-.01em}

.ferr-roi-line{font-size:14px;line-height:1.65;border-top:1px solid rgba(240,235,232,.14);padding-top:16px}
.ferr-escopo{margin-top:14px;padding:13px 15px;border-radius:12px;background:rgba(193,255,114,.10);border:1px solid rgba(193,255,114,.30);font-size:12.5px;line-height:1.6;color:var(--offwhite)}
.ferr-escopo strong{color:var(--lime)}
.ferr-disclaimer{font-size:11.5px;opacity:.5;line-height:1.6;margin-top:12px}
.ferr-results .btn-primary{margin-top:22px;width:100%;justify-content:center;text-align:center}
.ferr-results-sub{font-size:12px;opacity:.6;text-align:center;margin-top:10px}

/* ---------- segmented control (modo, plataforma) ---------- */
.ferr-seg{display:flex;gap:6px;margin-bottom:18px}
.ferr-seg-label{display:block;font-size:13.5px;font-weight:600;margin-bottom:8px;color:var(--navy)}
.ferr-seg-btn{flex:1;min-width:0;text-align:center;font-family:var(--font);font-size:12.5px;font-weight:600;padding:10px 8px;border-radius:10px;border:1.5px solid rgba(0,22,57,.16);background:var(--white);color:var(--navy);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ferr-seg-btn:hover{border-color:var(--orange)}
.ferr-seg-btn.is-active{background:var(--navy);color:var(--white);border-color:var(--navy)}

/* abas de métrica dentro do painel escuro de resultados */
.ferr-results .ferr-seg{gap:6px;margin-bottom:18px;flex-wrap:wrap}
.ferr-results .ferr-seg-btn{flex:0 0 auto;border:0;border-radius:999px;padding:7px 16px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(240,235,232,.12);color:var(--offwhite)}
.ferr-results .ferr-seg-btn:hover{background:rgba(240,235,232,.2)}
.ferr-results .ferr-seg-btn.is-active{background:var(--lime);color:var(--navy)}

/* linha do dado do nicho (o CPL que a SI entrega) */
.ferr-dado{font-size:12.5px;line-height:1.6;background:rgba(240,235,232,.07);border:1px solid rgba(240,235,232,.16);border-radius:12px;padding:12px 14px;margin:16px 0}
.ferr-dado strong{color:var(--lime);font-weight:700}
@media(max-width:480px){.ferr-roas-big{font-size:42px}}

/* ---------- hub: grid de ferramentas ---------- */
.ferr-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.ferr-grid{grid-template-columns:1fr;max-width:560px}}

.ferr-tool-card{display:flex;flex-direction:column;align-items:flex-start;background:var(--white);border-radius:24px;padding:36px 32px;box-shadow:0 8px 40px rgba(0,22,57,.05);color:var(--navy);transition:transform .35s var(--cubic-default),box-shadow .35s}
a.ferr-tool-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,22,57,.12)}

.ferr-tool-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:var(--lime);color:var(--navy);margin-bottom:18px}
.ferr-tool-tag-soon{background:rgba(0,22,57,.08)}
.ferr-tool-title{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px;line-height:1.3}
.ferr-tool-desc{font-size:14.5px;line-height:1.65;opacity:.72;margin-bottom:18px}
.ferr-tool-link{font-size:13.5px;font-weight:600;color:var(--orange);margin-top:auto}
.ferr-soon{opacity:.55}

.ferr-hub-note{max-width:680px;margin:72px auto 0;text-align:center}
.ferr-hub-note h2{font-size:24px;font-weight:600;letter-spacing:-.02em;margin-bottom:14px}
.ferr-hub-note p{font-size:16px;line-height:1.75;opacity:.8}