/* =========================================================================
   WBF Sistemas — Controle Financeiro
   Direção de design: "livro-caixa" — a estética do próprio produto.
   Papel pautado, tinta preta/vermelha de escrituração, carimbo de borracha.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap');

:root{
  /* Cor — nomeada a partir do vocabulário da escrituração contábil */
  --tinta:        #16242E;   /* tinta preta do livro-caixa */
  --tinta-suave:  #3C4C56;
  --papel:        #EEEAE0;   /* papel pautado, levemente acinzentado */
  --papel-alto:   #F7F5EE;   /* papel claro para cartões */
  --pauta:        #C9C2A9;   /* linha de pauta / régua do papel */
  --carimbo:      #24506B;   /* azul-carimbo — ações, links */
  --carimbo-esc:  #163244;
  --debito:       #93362A;   /* tinta vermelha — débito / atenção */
  --credito:      #2E6B4E;   /* tinta verde — crédito / positivo */
  --ouro:         #9C7A2E;   /* selo dourado — destaque discreto */

  --raio: 3px;
  --sombra: 0 1px 0 rgba(22,36,46,.06), 0 8px 24px -12px rgba(22,36,46,.28);

  --serif: "Source Serif 4", Georgia, serif;
  --sans: "IBM Plex Sans", -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3,h4{ font-family: var(--serif); font-weight:600; margin:0 0 .5rem; line-height:1.15; }
p{ line-height:1.6; margin:0 0 1rem; color: var(--tinta-suave); }
.tabular{ font-family: var(--mono); font-variant-numeric: tabular-nums; }
.container{ max-width:1120px; margin:0 auto; padding:0 24px; }
.skip-link{ position:absolute; left:-999px; top:0; background:var(--carimbo); color:#fff; padding:10px 16px; z-index:999; }
.skip-link:focus{ left:12px; top:12px; }

/* Textura de papel pautado usada em seções alternadas */
.pautado{
  background-image: repeating-linear-gradient(
    to bottom,
    transparent, transparent 27px,
    var(--pauta) 27px, var(--pauta) 28px
  );
  background-color: var(--papel-alto);
}

/* ---------- Eyebrow / rótulos de fólio ---------- */
.eyebrow{
  font-family: var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color: var(--carimbo);
  display:flex; align-items:center; gap:10px;
  margin-bottom:.9rem;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px; background: var(--carimbo);
}

/* ---------- Botões estilo carimbo ---------- */
.btn{
  font-family: var(--mono);
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px;
  border-radius: var(--raio);
  border:1.5px solid var(--tinta);
  cursor:pointer;
  background:transparent;
  transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-primario{
  background: var(--carimbo);
  border-color: var(--carimbo);
  color:#fff;
}
.btn-primario:hover{
  transform: rotate(-1deg) scale(1.02);
  box-shadow: var(--sombra);
  background: var(--carimbo-esc);
}
.btn-secundario{
  color: var(--tinta);
  border-color: var(--tinta);
}
.btn-secundario:hover{
  transform: rotate(-1deg);
  background: var(--tinta);
  color:#fff;
}
.btn-whats{
  color: var(--credito);
  border-color: var(--credito);
}
.btn-whats:hover{ background: var(--credito); color:#fff; }

/* ---------- Cabeçalho ---------- */
.site-header{
  position: sticky; top:0; z-index:50;
  background: rgba(238,234,224,.92);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--pauta);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
}
.marca{ display:flex; flex-direction:column; text-decoration:none; }
.marca-nome{ font-family:var(--serif); font-weight:700; font-size:1.18rem; letter-spacing:.01em; }
.marca-sub{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--carimbo); }
.nav-principal{ display:flex; gap:28px; align-items:center; }
.nav-principal a{
  font-family: var(--mono); font-size:.78rem; letter-spacing:.04em;
  text-decoration:none; color:var(--tinta-suave);
  padding:6px 0; border-bottom:1px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.nav-principal a:hover{ color:var(--carimbo); border-color:var(--carimbo); }
.nav-toggle{
  display:none; background:none; border:1.5px solid var(--tinta); border-radius:var(--raio);
  width:42px; height:38px; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.nav-toggle span{ width:20px; height:2px; background:var(--tinta); display:block; }

/* ---------- Hero ---------- */
.hero{
  padding:64px 0 56px;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.05fr .95fr; gap:56px; align-items:center;
}
.selo{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  border:1px dashed var(--ouro); color:var(--ouro);
  padding:6px 12px; border-radius:999px; margin-bottom:18px;
  transform: rotate(-1deg);
}
.hero h1{
  font-size: clamp(2.1rem, 3.6vw, 3.05rem);
  max-width:14ch;
}
.hero h1 em{ font-style:normal; color:var(--carimbo); border-bottom:3px solid var(--ouro); }
.hero .lead{ font-size:1.08rem; max-width:46ch; }
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin:26px 0 30px; }
.hero-meta{
  display:flex; gap:22px; flex-wrap:wrap;
  font-family:var(--mono); font-size:.76rem; color:var(--tinta-suave);
}
.hero-meta strong{ color:var(--tinta); }

/* ---------- Mini livro-caixa (elemento assinatura) ---------- */
.ledger-card{
  background: var(--papel-alto);
  border:1px solid var(--pauta);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow:hidden;
  transform: rotate(.6deg);
}
.ledger-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; border-bottom:1px solid var(--pauta);
  background: var(--tinta); color:#F1EEE4;
}
.ledger-head span{ font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.ledger-dots{ display:flex; gap:6px; }
.ledger-dots i{ width:8px; height:8px; border-radius:50%; background:#F1EEE4; opacity:.35; display:block; }
.ledger-cols{
  display:grid; grid-template-columns: 78px 1fr 88px 88px;
  font-family: var(--mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--tinta-suave); padding:10px 18px 6px; border-bottom:1px solid var(--pauta);
}
.ledger-body{ min-height:236px; }
.ledger-row{
  display:grid; grid-template-columns: 78px 1fr 88px 88px;
  font-family: var(--mono); font-size:.78rem;
  padding:9px 18px; border-bottom:1px solid var(--pauta);
  opacity:0; transform:translateY(6px);
  animation: linha-entra .5s ease forwards;
}
@keyframes linha-entra{ to{ opacity:1; transform:translateY(0);} }
.ledger-row .desc{ color:var(--tinta); }
.ledger-row .deb{ color:var(--debito); text-align:right; }
.ledger-row .cred{ color:var(--credito); text-align:right; }
.ledger-foot{
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 18px; background:var(--papel);
  font-family:var(--mono);
}
.ledger-foot .saldo-label{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--tinta-suave); }
.ledger-foot .saldo-valor{ font-size:1.15rem; font-weight:600; color:var(--credito); }

@media (prefers-reduced-motion: reduce){
  .ledger-row{ animation:none; opacity:1; transform:none; }
}

/* ---------- Seções gerais ---------- */
section{ padding:76px 0; }
.section-head{ max-width:640px; margin-bottom:44px; }
.section-head h2{ font-size:clamp(1.5rem,2.4vw,2.05rem); }

/* ---------- Grid de recursos ---------- */
.grid-recursos{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.cartao{
  background:var(--papel-alto); border:1px solid var(--pauta); border-radius:var(--raio);
  padding:26px 24px; box-shadow: var(--sombra);
}
.cartao .num{ font-family:var(--mono); color:var(--ouro); font-size:.78rem; letter-spacing:.08em; }
.cartao h3{ font-size:1.05rem; margin-top:6px; }
.cartao p{ margin-bottom:0; font-size:.94rem; }

/* ---------- Por que controlar ---------- */
.grid-motivos{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.motivo{ border-left:3px solid var(--debito); padding-left:18px; }
.motivo h3{ font-size:1.02rem; }
.motivo p{ font-size:.93rem; }

/* ---------- Passo a passo ---------- */
.passos{ counter-reset: passo; display:grid; gap:0; }
.passo{
  display:grid; grid-template-columns:64px 1fr; gap:20px;
  padding:20px 0; border-bottom:1px dashed var(--pauta);
}
.passo:last-child{ border-bottom:none; }
.passo .num{
  font-family:var(--mono); font-size:1.6rem; color: var(--pauta);
  -webkit-text-stroke: 1px var(--tinta-suave);
  color: transparent;
}
.passo h4{ font-size:1.02rem; margin-bottom:.25rem; }
.passo p{ margin:0; font-size:.93rem; }

/* ---------- Telas em destaque ---------- */
.telas{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.tela-card{
  background:var(--papel-alto); border:1px solid var(--pauta); border-radius:var(--raio);
  overflow:hidden; box-shadow:var(--sombra);
}
.tela-card figure{ margin:0; border-bottom:1px solid var(--pauta); overflow:hidden; background:#0000; }
.tela-card img{ width:100%; height:auto; display:block; transition:transform .35s ease; }
.tela-card:hover img{ transform:scale(1.035); }
.tela-card figcaption{ padding:16px 18px; font-size:.9rem; color:var(--tinta-suave); }
.tela-card figcaption strong{ display:block; color:var(--tinta); font-family:var(--serif); font-size:1rem; margin-bottom:2px; }
.telas-cta{ text-align:center; margin-top:34px; }

/* ---------- Diferenciais ---------- */
.diferenciais{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.dif-card{
  padding:26px 24px; border-radius:var(--raio);
  background: var(--tinta); color:#EDEAE0;
}
.dif-card h3{ color:#fff; font-size:1.02rem; }
.dif-card p{ color:#C9C2AC; font-size:.93rem; margin-bottom:0; }

/* ---------- Álbum ---------- */
.album-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:14px;
}
.album-item{
  cursor:pointer; border:1px solid var(--pauta); border-radius:var(--raio);
  overflow:hidden; background:var(--papel-alto); box-shadow: 0 1px 0 rgba(22,36,46,.05);
  position:relative;
}
.album-item img{ width:100%; height:130px; object-fit:cover; object-position:top; transition:transform .3s ease, filter .3s ease; }
.album-item:hover img{ transform:scale(1.06); }
.album-item .legenda{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(to top, rgba(22,36,46,.88), transparent);
  color:#F1EEE4; font-family:var(--mono); font-size:.65rem; letter-spacing:.03em;
  padding:16px 10px 8px;
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; background:rgba(15,24,30,.94);
  display:none; align-items:center; justify-content:center; z-index:200; padding:40px;
}
.lightbox.aberto{ display:flex; }
.lightbox-conteudo{ max-width:min(1000px,92vw); max-height:86vh; text-align:center; }
.lightbox-conteudo img{ max-height:74vh; width:auto; margin:0 auto; border:1px solid #33454F; }
.lightbox-legenda{ color:#EDEAE0; font-family:var(--mono); font-size:.82rem; margin-top:14px; letter-spacing:.03em; }
.lightbox-fechar, .lightbox-nav{
  position:absolute; background:none; border:1px solid rgba(237,234,224,.4); color:#EDEAE0;
  border-radius:50%; width:42px; height:42px; cursor:pointer; font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.lightbox-fechar{ top:26px; right:26px; }
.lightbox-prev{ left:20px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:20px; top:50%; transform:translateY(-50%); }
.lightbox-fechar:hover, .lightbox-nav:hover{ background:rgba(237,234,224,.12); }

/* ---------- Requisitos ---------- */
.requisitos{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.req-card{ background:var(--papel-alto); border:1px solid var(--pauta); border-radius:var(--raio); padding:26px; box-shadow:var(--sombra); }
.req-card h3{ font-size:1.02rem; }

/* ---------- Benefícios resumo ---------- */
.beneficios{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.beneficio{ display:flex; gap:12px; align-items:flex-start; }
.beneficio .marca-tick{
  font-family:var(--mono); color:var(--credito); border:1px solid var(--credito);
  border-radius:50%; width:24px; height:24px; flex:none; display:flex; align-items:center; justify-content:center; font-size:.8rem;
}
.beneficio h4{ font-size:.95rem; margin:0 0 3px; }
.beneficio p{ font-size:.87rem; margin:0; }

/* ---------- Contato ---------- */
.contato-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap:48px; }
.contato-info .btn{ margin-right:10px; margin-bottom:10px; }
.contato-info ul{ list-style:none; padding:0; margin:22px 0 0; font-family:var(--mono); font-size:.85rem; }
.contato-info li{ padding:6px 0; border-bottom:1px dashed var(--pauta); }
.formulario{
  background:var(--papel-alto); border:1px solid var(--pauta); border-radius:var(--raio);
  padding:28px; box-shadow:var(--sombra);
}
.campo{ margin-bottom:16px; }
.campo label{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-suave); margin-bottom:6px; }
.campo input, .campo textarea{
  width:100%; padding:11px 12px; border:1px solid var(--pauta); border-radius:var(--raio);
  font-family:var(--sans); font-size:.94rem; background:#fff; color:var(--tinta);
}
.campo input:focus, .campo textarea:focus{ outline:2px solid var(--carimbo); outline-offset:1px; }
.campo-honeypot{ position:absolute; left:-9999px; }
.form-linhas{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-msg{ font-family:var(--mono); font-size:.85rem; margin-top:12px; display:none; }
.form-msg.ok{ display:block; color:var(--credito); }
.form-msg.erro{ display:block; color:var(--debito); }
.form-obs{ font-size:.82rem; color:var(--tinta-suave); margin-top:14px; }

/* ---------- Rodapé ---------- */
.rodape{
  background:var(--tinta); color:#C9C2AC; padding:48px 0 24px; margin-top:20px;
}
.rodape-topo{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; margin-bottom:28px; }
.rodape .marca-nome{ color:#F1EEE4; }
.rodape-nav{ display:flex; gap:20px; flex-wrap:wrap; font-family:var(--mono); font-size:.78rem; }
.rodape-nav a{ text-decoration:none; color:#C9C2AC; }
.rodape-nav a:hover{ color:#fff; }
.rodape-baixo{
  border-top:1px solid #2A3E49; padding-top:18px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
  font-family:var(--mono); font-size:.72rem; color:#8FA0A8;
}
.rodape-baixo a{ color:#C9C2AC; text-decoration:underline; }

/* ---------- Responsivo ---------- */
@media (max-width: 960px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid-recursos, .grid-motivos, .telas, .diferenciais, .requisitos, .beneficios{ grid-template-columns:repeat(2,1fr); }
  .contato-grid{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .nav-principal{
    position:fixed; top:69px; left:0; right:0; background:var(--papel-alto);
    flex-direction:column; align-items:flex-start; padding:18px 24px;
    border-bottom:1px solid var(--pauta); display:none; gap:14px;
  }
  .nav-principal.aberto{ display:flex; }
  .nav-toggle{ display:flex; }
  .grid-recursos, .grid-motivos, .telas, .diferenciais, .requisitos, .beneficios{ grid-template-columns:1fr; }
  .form-linhas{ grid-template-columns:1fr; }
  section{ padding:56px 0; }
  .hero{ padding:44px 0 40px; }
}