/* ============================================================
   SoftPay Fiscal — Seções
   Shell compartilhado (header/footer/faq/cta) no vocabulário FroX,
   para home e blog usarem o mesmo CSS. Seções próprias da home
   com a identidade SoftPay (azul/navy/Poppins, cards macios).
   ============================================================ */

/* ============ HEADER ======================================= */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); height: var(--header-h);
}
.header__brand { display: flex; align-items: center; gap: 10px; flex: none; }
.header__brand img, .header__brand .logo { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.header__brand .wm { display: flex; flex-direction: column; line-height: 1; }
.header__brand .wm b { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--ink); letter-spacing: -.01em; }
.header__brand .wm b i { font-style: normal; color: var(--brand); }
.header__brand .wm small { font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); margin-top: 3px; }

.header__nav { display: flex; gap: var(--s-8); margin-left: auto; margin-right: var(--s-8); }
.header__nav a { font-family: var(--font-display); font-size: 14.5px; font-weight: 500; color: var(--ink-2); transition: color var(--d-fast); }
.header__nav a:hover { color: var(--brand); }
.header__actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.header__login { font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--ink); }
.header__login:hover { color: var(--brand); }

.header__burger { display: none; padding: 8px; margin: -8px; }
.header__burger svg { width: 26px; height: 26px; }

@media (max-width: 940px) {
  .header__nav {
    position: absolute; left: 0; right: 0; top: var(--header-h);
    flex-direction: column; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: var(--s-2) var(--gutter) var(--s-4);
    margin: 0; box-shadow: var(--sh-md);
    display: none;
  }
  .header__nav.is-open { display: flex; }
  .header__nav a { padding: 14px 0; border-bottom: 1px solid var(--line-2); }
  .header__login { display: none; }
  .header__burger { display: block; }
}

/* ============ HERO ========================================= */
.hero { position: relative; padding-top: calc(var(--s-16) + 8px); padding-bottom: var(--s-16); overflow: clip; }
.hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  right: -6%; top: -12%; width: 780px; height: 720px; max-width: 90vw;
  background: radial-gradient(closest-side, rgba(var(--brand-rgb), .16), rgba(var(--brand-rgb), 0) 70%);
  filter: blur(6px);
}
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
.hero__copy { max-width: 560px; }
.hero h1 { margin: var(--s-5) 0 var(--s-5); font-size: var(--t-5xl); }
.hero .lead { max-width: 480px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.hero__note { margin-top: var(--s-5); font-size: var(--t-sm); color: var(--ink-3); }
.hero__note b { color: var(--ink); font-weight: 700; }
.hero__note a { color: var(--brand-700); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6); margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--line); }
.hero__trust span { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); display: inline-flex; align-items: center; gap: var(--s-2); }
.hero__trust span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; }
.hero__media { position: relative; }
.hero__media img { width: 100%; border-radius: var(--r-xl); box-shadow: var(--sh-xl); }

/* ============ DOCSTRIP ===================================== */
.docstrip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-subtle); }
.docstrip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--s-10); padding-block: var(--s-6); }
.docstrip__lbl { font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4); font-weight: 700; }
.docstrip__items { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); }
.docstrip__items span { font-size: var(--t-base); color: var(--ink); font-weight: 500; }
.docstrip__items b { font-weight: 800; }
.docstrip__items i { color: var(--ink-4); font-style: normal; font-weight: 400; font-size: var(--t-sm); }

/* ============ SPLIT (imagem + texto) ======================= */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--rev .split__txt { order: 2; }
.split__img img { width: 100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); }
.split__txt h2 { margin: var(--s-4) 0 var(--s-4); }
.split__txt .lead { max-width: 44ch; }
.metrics { display: flex; flex-wrap: wrap; gap: var(--s-10); margin-top: var(--s-8); }
.metrics .m .n { font-size: clamp(2.25rem, 4vw, 2.75rem); font-weight: 800; color: var(--ink); letter-spacing: -.03em; line-height: 1; }
.metrics .m .n span { color: var(--brand); }
.metrics .m .l { font-size: var(--t-sm); color: var(--ink-4); margin-top: var(--s-2); }

/* ============ DOCUMENTOS (grid de cards) =================== */
.docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.doc {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); display: flex; flex-direction: column; gap: 2px;
  transition: border-color var(--d-base), box-shadow var(--d-base), transform var(--d-base);
}
.doc:hover { border-color: var(--brand-100); box-shadow: var(--sh-md); transform: translateY(-4px); }
.doc__m { font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--brand-700); font-weight: 700; }
.doc h3 { font-size: clamp(1.75rem, 3vw, 2rem); font-weight: 800; color: var(--ink); letter-spacing: -.02em; margin: var(--s-2) 0 var(--s-2); }
.doc p { font-size: var(--t-sm); color: var(--ink-3); flex: 1; margin-bottom: var(--s-4); line-height: var(--lh-normal); }
.doc a { font-size: var(--t-sm); font-weight: 600; color: var(--brand-700); display: inline-flex; align-items: center; gap: 5px; }
.doc a:hover { color: var(--brand); }

/* ============ TRUST (por que confiar) ====================== */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.tcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6) var(--s-6) var(--s-8); }
.tcard__lbl { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--brand-700); }
.tcard h3 { font-size: var(--t-lg); font-weight: 700; color: var(--ink); margin: var(--s-3) 0 var(--s-2); letter-spacing: -.01em; }
.tcard p { font-size: var(--t-sm); color: var(--ink-3); line-height: var(--lh-normal); }

/* ============ STEPS (white-label) ========================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); }
.step { position: relative; }
.step__n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill); background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand-700); font-weight: 800; font-size: var(--t-sm); }
.step h3 { font-size: var(--t-lg); font-weight: 700; margin: var(--s-4) 0 var(--s-2); }
.step p { font-size: var(--t-sm); color: var(--ink-3); }
.step code { font-family: var(--font-mono); font-size: 0.82em; background: var(--bg-sunken); border: 1px solid var(--line); padding: 1px 7px; border-radius: var(--r-xs); color: var(--ink); }

/* ============ PREÇOS ======================================= */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); align-items: stretch; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: var(--s-8) var(--s-6); display: flex; flex-direction: column; }
.plan--top { border: 2px solid var(--brand); box-shadow: var(--sh-lg); position: relative; }
.plan--top::before { content: "Mais usado"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--brand); color: #fff; font-size: var(--t-xs); font-weight: 700; padding: 4px 14px; border-radius: var(--r-pill); letter-spacing: .02em; }
.plan__tag { font-size: var(--t-xs); font-weight: 700; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--ink-4); }
.plan--top .plan__tag { color: var(--brand-700); }
.plan h3 { font-size: var(--t-xl); font-weight: 700; margin: var(--s-1) 0 var(--s-5); }
.plan__pv { display: flex; align-items: baseline; gap: 6px; }
.plan__pv .big { font-size: clamp(2.5rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1; }
.plan__pv .per { font-size: var(--t-sm); color: var(--ink-4); font-weight: 500; }
.plan__sub { font-size: var(--t-sm); color: var(--ink-4); margin: var(--s-3) 0 var(--s-6); min-height: 20px; }
.plan ul { display: flex; flex-direction: column; gap: var(--s-3); margin-bottom: var(--s-6); flex: 1; }
.plan li { font-size: var(--t-sm); color: var(--ink-2); display: flex; gap: var(--s-2); align-items: flex-start; }
.plan li::before { content: ""; width: 18px; height: 18px; flex: none; margin-top: 1px; background: var(--brand); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/contain no-repeat; }
.plan .btn { width: 100%; }
.pricing__foot { text-align: center; margin-top: var(--s-10); font-size: var(--t-base); color: var(--ink-3); }
.pricing__foot a { color: var(--brand-700); font-weight: 600; }

/* ============ GUIAS / BLOG teaser ========================== */
.guides { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-6); transition: border-color var(--d-base), box-shadow var(--d-base), transform var(--d-base); }
.post-card:hover { border-color: var(--brand-100); box-shadow: var(--sh-md); transform: translateY(-4px); }
.post-card .eyebrow { margin-bottom: var(--s-3); }
.post-card h3 { font-size: var(--t-lg); font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin-bottom: var(--s-2); }
.post-card p { font-size: var(--t-sm); color: var(--ink-3); flex: 1; }
.post-card small { margin-top: var(--s-4); font-size: var(--t-xs); font-weight: 600; color: var(--brand-700); }

/* ============ FAQ ========================================== */
.faq { max-width: 760px; margin-inline: auto; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item summary { cursor: pointer; list-style: none; padding: var(--s-5) var(--s-1); display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font-family: var(--font-display); font-size: var(--t-lg); font-weight: 600; color: var(--ink); }
.faq__ico { position: relative; width: 20px; height: 20px; flex: none; }
.faq__ico::before, .faq__ico::after { content: ""; position: absolute; background: var(--brand); border-radius: 2px; transition: transform var(--d-base) var(--e-out); }
.faq__ico::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.faq__ico::after { left: 9px; top: 2px; width: 2px; height: 16px; }
.faq__item[open] .faq__ico::after { transform: scaleY(0); }
.faq__body { padding: 0 var(--s-1) var(--s-5); }
.faq__body p { font-size: var(--t-base); color: var(--ink-2); line-height: var(--lh-relaxed); max-width: 68ch; }

/* ============ CTA final ==================================== */
.cta { position: relative; background: var(--dark); color: var(--dark-ink-2); overflow: clip; }
.cta__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 50% -10%, rgba(var(--brand-rgb), .35), transparent 70%); }
.cta .container { position: relative; z-index: 1; }
.cta h2 { color: #fff; margin-bottom: var(--s-4); }
.cta .lead { color: var(--dark-ink-2); margin-inline: auto; max-width: 52ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-8); }

/* ============ FOOTER ======================================= */
.footer { background: var(--dark-deep); color: rgba(255,255,255,.6); padding: var(--s-16) 0 var(--s-8); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-10); padding-bottom: var(--s-10); border-bottom: 1px solid var(--dark-line); }
.footer__brand .header__brand { margin-bottom: var(--s-4); }
.footer__brand .wm b { color: #fff; }
.footer__brand .wm small { color: rgba(255,255,255,.5); }
.footer__brand p { font-size: var(--t-sm); color: rgba(255,255,255,.55); max-width: 30ch; }
.footer__col h5 { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: var(--tr-label); color: #fff; margin-bottom: var(--s-4); font-weight: 700; }
.footer__col a { display: block; font-size: var(--t-sm); color: rgba(255,255,255,.62); margin-bottom: var(--s-3); transition: color var(--d-fast); }
.footer__col a:hover { color: #fff; }
/* Linha simples (usada no blog) */
.footer__mais { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); padding-bottom: var(--s-8); border-bottom: 1px solid var(--dark-line); }
.footer__mais a { font-size: var(--t-sm); color: rgba(255,255,255,.62); }
.footer__mais a:hover { color: #fff; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-6); font-size: var(--t-xs); color: rgba(255,255,255,.45); }
.footer__by { color: rgba(255,255,255,.45); }
.footer__by:hover { color: rgba(255,255,255,.7); }

/* ============ RESPONSIVO =================================== */
@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-10); }
  .hero__media { order: -1; }
  .split { grid-template-columns: 1fr; gap: var(--s-8); }
  .split--rev .split__txt { order: 0; }
  .docs { grid-template-columns: 1fr 1fr; }
  .trust { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .plan--top { order: -1; }
  .guides { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}
@media (max-width: 560px) {
  .docs, .trust, .footer__grid { grid-template-columns: 1fr; }
  .metrics { gap: var(--s-8); }
  .hero__media { margin-inline: calc(var(--gutter) * -0.5); }
}