/* ==========================================================================
   Paulista Documentação — servico.css
   Subpáginas de serviço (/usucapiao/, /inventario/...), páginas de chegada
   dos anúncios de pessoa física. Carregam o style.css inteiro (tokens, temas,
   seções, FAQ, contato) e aqui ficam só as peças próprias delas.
   Sem preloader e sem título digitado: quem chega de um anúncio precisa ler
   o título na hora, por isso o h1 usa .lp-title (o main.js não anima) e o
   hero não tem id="hero".
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. Hero compacto: trilha, título igual à busca, card "É para você se"     */
/* -------------------------------------------------------------------------- */
.lp-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(2.6rem, 6vw, 4.4rem));
  padding-bottom: clamp(3rem, 6vw, 4.8rem);
}
.lp-grid {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.lp-copy { min-width: 0; }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem;
  margin-bottom: 1.4rem;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-lo);
}
.crumbs a { color: var(--text-mid); transition: color .2s var(--ease-out); }
.crumbs a:hover { color: var(--gold); }
.crumbs [aria-current] { color: var(--gold-deep); }

.lp-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.08; letter-spacing: -.025em;
  margin: 1.2rem 0 1.4rem; max-width: 22ch;
  text-wrap: balance;
}

/* Card "É para você se": mesmo desenho do .hero-card do home (cantoneiras,
   carimbo), mas com classe própria porque o main.js anima os itens do
   .hero-card com atraso de ~1s, e aqui a lista precisa estar lá na chegada. */
.lp-card {
  position: relative;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--bg-elevated);
  /* Base alta: o carimbo girado ocupa ~3,4rem acima da borda de baixo e não
     pode encostar no texto do último item (bug já vivido no hero do home). */
  padding: 2rem 1.9rem 3.6rem;
  box-shadow: var(--shadow-float);
}
.lp-card ul { display: grid; gap: 1.05rem; }
.lp-card li { display: flex; gap: .7rem; align-items: flex-start; color: var(--text-read); font-size: .98rem; }
.lp-card li svg { flex-shrink: 0; margin-top: .2rem; color: var(--gold); }
.lp-card::before, .lp-card::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 0 solid var(--gold); pointer-events: none; z-index: 3;
}
.lp-card::before { top: 11px; left: 11px; border-top-width: 2px; border-left-width: 2px; }
.lp-card::after { bottom: 11px; right: 11px; border-bottom-width: 2px; border-right-width: 2px; }

/* -------------------------------------------------------------------------- */
/* 2. Quanto custa                                                            */
/* -------------------------------------------------------------------------- */
/* Colunas fixas para os 4 itens de custo (4 / 2 / 1): com auto-fit, o tablet
   ficava com 3 numa linha e 1 sozinho embaixo. */
.cost-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.cost-box {
  display: grid; grid-template-columns: 1fr auto; gap: 1.2rem 2.4rem; align-items: center;
  margin-top: 1.4rem; padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--border); border-left: 3px solid var(--gold);
  border-radius: var(--r-card); background: var(--bg-surface);
}
.cost-box-label {
  font-family: var(--font-mono); font-weight: 600; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep);
  margin-bottom: .6rem;
}
.cost-box p:not(.cost-box-label) { color: var(--text-read); max-width: 62ch; }

/* -------------------------------------------------------------------------- */
/* 3. Como funciona: fatos do serviço em linha (prazo, onde, base legal)      */
/* -------------------------------------------------------------------------- */
.lp-facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem 2rem;
  margin-top: clamp(1.8rem, 4vw, 2.6rem); padding-top: 1.6rem;
  border-top: 1px solid var(--border-sub);
}
.lp-facts dt {
  font-family: var(--font-mono); font-weight: 600; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold-deep);
}
.lp-facts dd { margin-top: .45rem; font-size: .95rem; color: var(--text-hi); }

.lp-note {
  margin-top: 1.6rem; max-width: 72ch; padding-left: 1rem;
  border-left: 2px solid var(--border);
  font-size: .93rem; color: var(--text-mid);
}

/* -------------------------------------------------------------------------- */
/* 4. Documentos: checklist no bloco "matrícula" do style.css                 */
/* -------------------------------------------------------------------------- */
.doc-list { display: grid; gap: .8rem; }
.doc-list li {
  position: relative; padding-left: 1.1rem;
  font-size: .96rem; line-height: 1.5; color: var(--text-read);
}
.doc-list li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 5px; height: 5px; background: var(--gold);
}
/* Quem providencia o item (a gente pede, a gente levanta...) */
.doc-by {
  display: inline-block; margin-left: .35rem;
  font-family: var(--font-mono); font-size: .6rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gold-deep);
  white-space: nowrap;
}
.about-copy .btn-ghost { margin-top: 1.8rem; }

/* -------------------------------------------------------------------------- */
/* 5. Quem conduz: números-âncora cabem na coluna estreita da loja           */
/* -------------------------------------------------------------------------- */
.loja-copy .about-stat dt { font-size: clamp(1.6rem, 3vw, 2.2rem); }

/* Serviço da página marcado na lista do rodapé */
.footer-col a[aria-current] { color: var(--gold); }

/* Link para outro serviço dentro de uma resposta do FAQ (o style.css zera
   cor e sublinhado de todo <a>, então aqui ele precisa se mostrar link). */
.faq-answer a {
  color: var(--gold); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.faq-answer a:hover { color: var(--gold-hover); }

/* -------------------------------------------------------------------------- */
/* 6. RASCUNHO: resposta pendente do cliente. Nenhuma página vai ao ar com    */
/*    este bloco (conferência em PAGINAS-DE-SERVICO.md).                      */
/* -------------------------------------------------------------------------- */
.pendente {
  display: block; margin-top: 1rem; padding: .7rem .9rem;
  border: 1px dashed var(--gold); border-radius: var(--r-card);
  background: var(--gold-glow-s); color: var(--gold-deep);
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600; font-style: normal;
  letter-spacing: .05em; line-height: 1.5; text-transform: uppercase;
}
.pendente::before { content: "A confirmar · "; }

/* -------------------------------------------------------------------------- */
/* 7. Responsividade                                                          */
/* -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .lp-grid { grid-template-columns: 1fr; }
  .cost-grid { grid-template-columns: repeat(2, 1fr); }
  /* Menu: 4 links + "Falar no WhatsApp" não cabem entre 861 e 960 px (os
     rótulos quebravam). Nessa faixa vale o menu do celular, junto com o
     layout, que também vira 1 coluna em 960. O nav.css troca só em 860. */
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 861px) and (max-width: 960px) {
  .nav-overlay { display: flex; }
}
@media (max-width: 720px) {
  .cost-box { grid-template-columns: 1fr; }
  .cost-box .btn-cta { width: 100%; }
  .lp-facts { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .cost-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .lp-hero { padding-top: calc(var(--nav-h) + 1.8rem); padding-bottom: 2.6rem; }
  .lp-title { font-size: clamp(1.75rem, 7.6vw, 2.2rem); max-width: none; margin-bottom: 1.1rem; }
  .crumbs { margin-bottom: 1rem; }
  .lp-copy .eyebrow { font-size: .66rem; }
  .lp-card { padding: 1.5rem 1.3rem 3.3rem; }
  .lp-card li { font-size: .93rem; }
  /* Botões de WhatsApp dentro de caixas: menos respiro lateral para o rótulo
     caber numa linha só (no home a faixa de contato fica como está). */
  .cost-box { padding: 1.4rem 1.2rem; }
  .cta-band { padding-inline: 1.25rem; }
  .cost-box .btn-cta, .cta-band .btn-cta { padding-inline: 1rem; }
  .about-copy .btn-ghost { width: 100%; }
}
/* Celulares de 360 a 400 px (boa parte dos Android): rótulo do botão com o
   nome do serviço precisa de um pouco menos de corpo para caber numa linha.
   Abaixo disso (320 px), se quebrar, as duas linhas ficam centradas. */
@media (max-width: 400px) {
  .btn-cta, .btn-ghost {
    padding-inline: 1rem; gap: .5rem; font-size: .94rem; letter-spacing: 0;
    text-align: center; text-wrap: balance;
  }
}
/* 320 px (iPhone SE antigo): topo mais enxuto para o botão do WhatsApp
   continuar na primeira tela. */
@media (max-width: 360px) {
  .lp-hero { padding-top: calc(var(--nav-h) + 1.1rem); }
  .crumbs { margin-bottom: .7rem; }
  .lp-title { font-size: 1.6rem; margin: .9rem 0 1rem; }
  .hero-sub { font-size: .95rem; }
}