/* Zuliani Advocacia Digital · base compartilhada das páginas internas */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --ink: #0A0D14; --gray: #545B6B; --soft: #8A91A0;
  --blue: #2050FF; --red: #E62117; --line: #EEF0F5;
  --glass: rgba(244,247,255,0.92);
}
body { background: #FFF; font-family: 'Inter', sans-serif; }
.wrap { max-width: 390px; margin: 0 auto; padding: 0 24px 56px; }

/* ── nav + menu ── */
.nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 0; position: relative; z-index: 60; }
.wordmark { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.wordmark em { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 21px; color: var(--ink); }
.wordmark span { font-weight: 600; font-size: 10px; letter-spacing: 0.16em; color: var(--gray); }
.menu-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.95);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(135deg, rgba(255,255,255,0.85), rgba(231,238,255,0.55));
  box-shadow: 0 8px 20px rgba(32,80,255,0.12); }
.mnav { position: fixed; inset: 0; background: #FFFFFF; z-index: 50;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
.mnav.open { opacity: 1; pointer-events: auto; }
.mnav-inner { max-width: 390px; margin: 0 auto; width: 100%; padding: 0 24px; display: flex; flex-direction: column; gap: 4px; }
.mnav a.item { display: flex; align-items: baseline; gap: 12px; padding: 13px 0; text-decoration: none;
  border-bottom: 1px solid var(--line); }
.mnav a.item i { font-family: 'JetBrains Mono', monospace; font-style: normal; font-weight: 600; font-size: 11px; color: var(--blue); }
.mnav a.item span { font-family: 'Fraunces', serif; font-weight: 340; font-size: 26px; color: var(--ink); }
.mnav a.item.active span { font-style: italic; font-weight: 420; }
.mnav .mnav-cta { margin-top: 26px; }
.mnav .mnav-foot { padding-top: 18px; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 10px; color: var(--soft); text-align: center; }

/* ── tipografia de seção ── */
.page-head { padding-top: 44px; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow i { width: 22px; height: 1.5px; background: var(--blue); }
.eyebrow span { font-weight: 600; font-size: 11px; letter-spacing: 0.16em; color: var(--gray); }
.h-display { padding-top: 16px; font-family: 'Fraunces', serif; }
.h-display .a { font-weight: 340; font-size: 38px; line-height: 40px; letter-spacing: -0.01em; color: var(--ink); display: block; }
.h-display .b { font-style: italic; font-weight: 420; font-size: 38px; line-height: 46px; letter-spacing: -0.01em; color: var(--ink); }
.h-display .dot { font-weight: 500; font-size: 38px; color: var(--blue); }
.lead { padding-top: 14px; font-size: 14.5px; line-height: 23px; color: var(--gray); }
.mono-note { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.1em; color: var(--soft); }

/* ── revelação ── */
.rev { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
.rev.on { opacity: 1; transform: translateY(0); }

/* ── cartões/linhas ── */
.row-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px;
  background: var(--glass); border: 1px solid #FFF;
  box-shadow: 0 12px 26px rgba(32,80,255,0.1), inset 0 1px 2px #FFF; }
.row-card .icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(32,80,255,0.07);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.row-card .icon.warm { background: rgba(230,33,23,0.07); }
.row-card h3 { font-weight: 600; font-size: 15px; color: var(--ink); }
.row-card p { font-weight: 400; font-size: 12.5px; line-height: 18px; color: var(--gray); }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px;
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 11px; letter-spacing: 0.08em; }
.chip.blue { background: rgba(32,80,255,0.08); color: var(--blue); }
.chip.glass { background: var(--glass); color: var(--gray); border: 1px solid #FFF; box-shadow: 0 8px 18px rgba(32,80,255,0.1); font-weight: 500; }
.dot-red { width: 8px; height: 8px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.disclaimer { display: flex; align-items: flex-start; gap: 10px; padding-top: 18px; }
.disclaimer span { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: 0.06em; line-height: 17px; color: var(--gray); }
.disclaimer .dot-red { margin-top: 4px; }

/* ── timeline (como funciona) ── */
.tl { padding-top: 30px; display: flex; flex-direction: column; }
.tl-step { display: flex; gap: 16px; }
.tl-rail { display: flex; flex-direction: column; align-items: center; width: 28px; flex-shrink: 0; }
.tl-num { width: 28px; height: 28px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 8px 18px rgba(32,80,255,0.35); display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 12px; color: #FFF; flex-shrink: 0; }
.tl-line { width: 1.5px; flex: 1; background: #DDE3F0; }
.tl-body { padding: 3px 0 26px; }
.tl-body h3 { font-weight: 600; font-size: 15.5px; color: var(--ink); }
.tl-body p { padding-top: 3px; font-size: 13px; line-height: 19px; color: var(--gray); max-width: 290px; }

/* ── FAQ acordeão ── */
.faq-list { padding-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.faq { border-radius: 18px; background: var(--glass); border: 1px solid #FFF;
  box-shadow: 0 12px 26px rgba(32,80,255,0.1), inset 0 1px 2px #FFF; overflow: hidden; }
.faq button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px; background: none; border: none; cursor: pointer; text-align: left;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; line-height: 21px; color: var(--ink); }
.faq svg { flex-shrink: 0; transition: transform 0.3s ease; }
.faq .ans { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.faq .ans-in { padding: 0 18px 18px; font-size: 13.5px; line-height: 21px; color: var(--gray);
  display: flex; flex-direction: column; gap: 12px; }
.faq.open .ans { max-height: 400px; }
.faq.open svg { transform: rotate(180deg); }
.faq.open button { color: var(--ink); }
.oab-chip { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace;
  font-weight: 600; font-size: 10px; letter-spacing: 0.1em; color: var(--blue); }

/* ── checklist ── */
.check-card { margin-top: 28px; padding: 20px; border-radius: 22px; background: var(--glass);
  border: 1px solid #FFF; box-shadow: 0 16px 36px rgba(32,80,255,0.12), inset 0 1px 2px #FFF;
  display: flex; flex-direction: column; gap: 13px; }
.check-card .title { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 11px; letter-spacing: 0.14em; color: var(--soft); }
.check-item { display: flex; align-items: center; gap: 11px; }
.check-item i { width: 20px; height: 20px; border-radius: 7px; background: rgba(32,80,255,0.1);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.check-item span { font-weight: 500; font-size: 13.5px; color: var(--ink); }

/* ── CTA + footer ── */
.cta { display: flex; align-items: center; justify-content: center; gap: 12px; height: 58px; border-radius: 999px;
  background: linear-gradient(180deg, #181D29 0%, #0A0D14 100%);
  box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.28), 0 16px 36px rgba(10,13,20,0.28);
  color: #FFF; font-weight: 600; font-size: 15px; text-decoration: none; }
.cta-block { padding-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.micro { font-size: 12px; line-height: 18px; color: var(--soft); text-align: center; }
.footer { padding-top: 72px; display: flex; flex-direction: column; gap: 14px; }
.footer hr { border: none; height: 1px; background: var(--line); }
.footer .row { display: flex; align-items: center; justify-content: space-between; }
.footer .mono { font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 10px; color: var(--soft); }

/* sobre */
.foto-card { margin-top: 26px; position: relative; }
.foto-card img { width: 100%; border-radius: 26px; display: block; box-shadow: 0 24px 52px rgba(10,13,20,0.22); }
.foto-card .seal { position: absolute; right: 16px; bottom: -14px; filter: drop-shadow(0 12px 24px rgba(32,80,255,0.4)); }
.chips-row { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .rev { opacity: 1; transform: none; }
}

/* ════ desktop ════ */
@media (min-width: 1024px) {
  .wrap { max-width: 1080px; padding: 0 48px 72px; }
  .nav { padding-top: 28px; }
  .mnav-inner { max-width: 520px; }
  .page-head { padding-top: 64px; }
  .h-display .a { font-size: 54px; line-height: 56px; }
  .h-display .b, .h-display .dot { font-size: 54px; line-height: 64px; }
  .lead { font-size: 16px; line-height: 26px; max-width: 560px; }

  /* leitura centrada (como funciona, perguntas) */
  body.narrow .wrap { max-width: 720px; }

  /* duas colunas (sobre, contato) */
  .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; padding-top: 8px; }
  .duo .check-card { margin-top: 0; }
  .duo .cta-block { padding-top: 28px; }

  /* grade de áreas */
  .grid-areas { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px !important; padding-top: 36px !important; }

  .cta { max-width: 420px; margin: 0 auto; width: 100%; }
  .cta-block .micro { max-width: 420px; margin: 0 auto; }
  .footer { padding-top: 96px; }

  .foto-card img { max-height: 560px; object-fit: cover; }
}

/* nav inline (desktop) + links do footer */
.nav-links { display: none; }
.foot-links { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.foot-links a { font-size: 13px; font-weight: 500; color: var(--gray); text-decoration: none; }
.foot-links a:hover { color: var(--ink); }
@media (min-width: 1024px) {
  .nav-links { display: flex; align-items: center; gap: 26px; }
  .nav-links a { font-size: 13.5px; font-weight: 500; color: var(--gray); text-decoration: none; }
  .nav-links a:hover { color: var(--ink); }
  .nav .menu-btn { display: none; }
}