/* ═══════════════════════════════════════════════════════════════════
   Zago & Mesquita — página pública do escritório
   Camadas acima de tokens.css (a identidade mora lá).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Barra superior ── */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-110%);
  transition: transform var(--calmo) var(--curva);
}
.topo.visivel { transform: none; }
.topo-marca { font-family: var(--display); letter-spacing: .12em; text-transform: uppercase; font-size: .95rem; color: var(--green-700); }
.topo-links { display: flex; gap: 1.4rem; align-items: center; }
.topo-links a {
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.topo-links a:hover { color: var(--terra-700); }
.topo-cta { background: var(--terra-600); color: var(--white) !important; padding: .5rem .9rem; border-radius: 999px; }
.topo-cta:hover { background: var(--terra-700); color: var(--white) !important; }
@media (max-width: 720px) { .topo-links a:not(.topo-cta) { display: none; } }

/* ── Capa ── */
.capa {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--s6) var(--s4);
}
.capa-no { width: clamp(120px, 15vw, 170px); margin-bottom: var(--s4); }
.capa-no svg { width: 100%; height: auto; display: block; }
.capa-nome {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--green-700);
}
.capa-nome .amp { color: var(--terra-500); }
.capa-advogados {
  font-family: var(--display); font-size: clamp(.7rem, 1.4vw, .85rem);
  letter-spacing: .55em; text-indent: .55em; text-transform: uppercase;
  color: var(--terra-500); margin-top: .3rem;
}
.capa-frase {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 5vw, 3.4rem); line-height: 1.2;
  color: var(--green-700); margin-top: var(--s5); text-wrap: balance;
}
.capa-frase em { font-style: normal; color: var(--terra-500); }
.capa-sub { max-width: 60ch; color: var(--ink); margin-top: var(--s4); font-size: 1.05rem; }
.capa-acoes { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; margin-top: var(--s5); }

.btn-cheio {
  display: inline-block; background: var(--terra-600); color: var(--white);
  font-weight: 700; font-size: .95rem; letter-spacing: .02em; text-decoration: none;
  padding: .85rem 1.6rem; border-radius: 999px;
  transition: background var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.btn-cheio:hover { background: var(--terra-700); transform: translateY(-2px); }
.btn-vazio {
  display: inline-block; color: var(--green-700); border: 1px solid var(--green-700);
  font-weight: 600; font-size: .95rem; text-decoration: none;
  padding: .85rem 1.6rem; border-radius: 999px;
  transition: background var(--rapido) var(--curva);
}
.btn-vazio:hover { background: color-mix(in srgb, var(--green-700) 8%, transparent); }

/* nó da capa se ata (mesma assinatura do livro) */
.knot-base { stroke-dasharray: 1 0; }
.knot-windows { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .knot-base { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .knot-windows { opacity: 0; }
  .js .capa-no.ata .knot-base { animation: atar 2.4s var(--curva) forwards; }
  .js .capa-no.ata .knot-windows { transition: opacity .8s ease 2.2s; opacity: 1; }
  @keyframes atar { to { stroke-dashoffset: 0; } }
}

/* ── Seções ── */
.sec { padding: var(--s7) clamp(1rem, 5vw, 3rem); }
.sec > * { max-width: var(--larg); margin-left: auto; margin-right: auto; }
.alca {
  font-size: .8rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--terra-700); margin-bottom: var(--s3);
}
.sec h2 {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.7rem, 3.8vw, 2.4rem); letter-spacing: .05em; text-transform: uppercase;
  color: var(--green-700); margin-bottom: var(--s5); text-wrap: balance;
}
.lead { font-size: 1.1rem; max-width: 60ch; }
.lead + .lead { margin-top: var(--s3); }

.sec-clara { background: var(--paper-2); }
.sec-escura { background: var(--green-950); color: var(--paper); }
.sec-escura .alca { color: var(--terra-200); }
.sec-final { background: var(--green-700); color: var(--paper); }
.sec-final .alca { color: var(--terra-200); }
.sec-final h2 { color: var(--paper); }

/* ── O escritório ── */
.quem { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--s6); align-items: center; }
@media (max-width: 860px) { .quem { grid-template-columns: 1fr; } }
.quem h2 { margin-bottom: var(--s4); }
.socios { list-style: none; margin-top: var(--s4); display: grid; gap: .4rem; }
.socios li { color: var(--green-500); font-size: .95rem; }
.socios strong { color: var(--green-700); }
.quem-foto img { border-radius: 4px; aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

.citacao {
  margin-top: var(--s6); border-left: 3px solid var(--terra-500);
  padding: var(--s3) 0 var(--s3) var(--s5);
}
.citacao p {
  font-family: var(--display); font-size: clamp(1.15rem, 2.6vw, 1.5rem);
  line-height: 1.5; color: var(--green-700); max-width: 34em;
}

/* ── Faixa escura ── */
.faixa { text-align: center; }
.faixa-texto {
  font-family: var(--display); font-size: clamp(1.2rem, 3vw, 1.7rem);
  line-height: 1.5; max-width: 34em; margin: 0 auto; color: var(--paper);
}
.faixa-texto strong { color: var(--terra-200); font-weight: 400; }

/* ── Entregas ── */
.entregas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s4); }
.entrega {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  padding: var(--s5);
}
.entrega .num { font-family: var(--display); font-size: 1.9rem; color: var(--terra-500); display: block; margin-bottom: var(--s2); }
.entrega p { font-size: .98rem; }
.entrega-terra { background: var(--terra-600); border-color: var(--terra-600); color: var(--white); }
.entrega-terra .num { color: var(--white); opacity: .85; }
.entrega-verde { background: var(--green-700); border-color: var(--green-700); color: var(--paper); }
.entrega-verde .num { color: var(--terra-200); }

/* ── Perfis ── */
.perfis { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s4); }
.perfil {
  background: var(--card); border-top: 3px solid var(--green-700);
  border-radius: 4px; padding: var(--s4);
  box-shadow: 0 10px 24px -20px rgba(20, 28, 22, .5);
}
.perfil strong { color: var(--terra-700); }

/* ── Metodologia ── */
.passos { list-style: none; counter-reset: passo; display: grid; gap: var(--s4); max-width: 680px; }
.passos li { counter-increment: passo; position: relative; padding-left: 3.4rem; }
.passos li::before {
  content: "0" counter(passo);
  position: absolute; left: 0; top: -.1rem;
  font-family: var(--display); font-size: 1.6rem; color: var(--terra-500);
}
.passos strong { color: var(--green-700); }

.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s4); margin-top: var(--s6); }
.cartela { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: var(--s5); }
.lista { list-style: none; display: grid; gap: var(--s2); }
.lista li { padding-left: 1.3rem; position: relative; }
.lista li::before { content: "—"; position: absolute; left: 0; color: var(--terra-500); }
.lista strong { color: var(--green-700); }
.mini { font-size: .85rem; color: var(--green-500); margin-top: var(--s3); }

/* ── Próximo passo ── */
.sec-final { text-align: center; }
.final-texto { max-width: 52ch; margin: 0 auto var(--s5); font-size: 1.1rem; color: var(--green-200); }
.final-socios { margin-top: var(--s5); font-size: .85rem; letter-spacing: .06em; color: var(--green-200); }

/* ── Rodapé ── */
.rodape { background: var(--green-950); color: var(--green-200); text-align: center; padding: var(--s6) var(--s4); }
.rodape { --knot-ink: var(--paper); --knot-paper: transparent; }
.rodape-no { width: 56px; height: 56px; margin: 0 auto var(--s3); display: block; }
.rodape-marca { font-family: var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--paper); }
.rodape-micelize { font-size: .85rem; margin-top: var(--s2); }
.rodape-micelize strong { color: var(--terra-200); font-weight: 600; }
.rodape-micelize a { color: var(--green-200); }
.uso { aspect-ratio: 1; height: auto; display: block; }

/* ── Revelação ao rolar ── */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--calmo) var(--curva), transform var(--calmo) var(--curva); }
  .js .reveal.em { opacity: 1; transform: none; }
}