/* --------------------------------------------------------------------------
   Site comercial da Tratto (outubro/2026)

   Direção: a calor e o laranja de um SaaS leve, mas com o vocabulário do
   mundo da Tratto em vez do creme com serifa que virou cara de site feito por
   IA. Títulos largos e pesados como placa de imobiliária; situações das
   certidões como carimbo de cartório; azul-marinho e laranja do próprio app.
   Uma cor forte só (o laranja). Tema claro de propósito.
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  --papel: #ffffff;
  --nevoa: #f3f4f8;          /* superfície recuada, com um fio de azul do marinho */
  --linha: #e3e5ee;
  --tinta: #0d1233;          /* texto: o marinho do app, quase preto */
  --tinta-2: #4a4f6a;
  --tinta-3: #7d8199;
  --marinho: #050a34;        /* a barra lateral do app */
  --marinho-2: #121a52;
  --laranja: #ff6d00;        /* a marca */
  --laranja-tinta: #c24f00;  /* laranja para texto sobre branco */
  --laranja-claro: #fff0e3;

  /* As situações, nas cores do app. Não contam como destaque: são estado. */
  --ok: #0b7050;      --ok-fundo: #e4f2ed;
  --alerta: #9a6212;  --alerta-fundo: #fbf0de;
  --grave: #b3261e;   --grave-fundo: #fbe9e7;
  --info: #0a3c87;    --info-fundo: #e4eefc;

  --placa: "Archivo", "Arial Black", system-ui, sans-serif;
  --texto: "DM Sans", "Helvetica Neue", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --mao: "Caveat", "Comic Sans MS", cursive;

  --raio: 14px;
  --sombra: 0 1px 2px rgba(13, 18, 51, 0.06), 0 12px 32px -12px rgba(13, 18, 51, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--laranja); outline-offset: 3px; border-radius: 4px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.faixa {
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.miolo { max-width: 1180px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

h1, h2 {
  font-family: var(--placa);
  font-stretch: 118%;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.02;
  text-wrap: balance;
  margin: 0;
}
h1 { font-size: clamp(38px, 4.4vw, 60px); }
h2 { font-size: clamp(30px, 4vw, 48px); }
h3 { font-size: 20px; line-height: 1.25; font-weight: 700; margin: 0; }
p { margin: 0; }

/* O rótulo das seções, em mono, como num terminal. Na home e no Produto vem
   numerado: "01 / O problema". */
.sobre {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--laranja-tinta);
}
.sobre-n { color: var(--tinta-3); }
.sobre-n::after { content: " / "; white-space: pre; color: var(--tinta-3); opacity: 0.6; }
.marinho .sobre-n, .fecho .sobre-n { color: rgba(255, 255, 255, 0.5); }
.marinho .sobre-n::after, .fecho .sobre-n::after { color: rgba(255, 255, 255, 0.5); }
.lead { font-size: clamp(18px, 1.6vw, 20px); color: var(--tinta-2); max-width: 54ch; }
.mao { font-family: var(--mao); font-weight: 600; color: var(--laranja-tinta); line-height: 1.1; }
.num { font-variant-numeric: tabular-nums; }

/* Marca-texto à mão por baixo de uma palavra do título. */
/* O grifo é uma faixa de marca-texto atrás da metade de baixo da palavra, que
   passa da esquerda para a direita quando a página abre. */
.grifo { position: relative; z-index: 0; white-space: nowrap; }
.grifo::after { content: ""; position: absolute; z-index: -1; left: -0.05em; right: -0.05em; bottom: 0.16em; height: 0.34em; border-radius: 0.08em; background: rgba(255, 109, 0, 0.32); transform-origin: left center; animation: grifar 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.35s both; }
@keyframes grifar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .grifo::after { animation: none; } }

/* --------------------------------------------------------------------------
   Botões
   -------------------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 24px;
  border-radius: 12px;
  font: 700 16px/1 var(--texto);
  text-decoration: none;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.botao:hover { transform: translateY(-1px); }
.botao-forte { background: var(--laranja); color: #ffffff; box-shadow: 0 6px 16px -6px rgba(255, 109, 0, 0.6); }
.botao-forte:hover { background: #f06400; }
.botao-leve { color: var(--tinta); border: 1.5px solid var(--linha); background: var(--papel); }
.botao-leve:hover { border-color: var(--tinta-3); }
@media (prefers-reduced-motion: reduce) { .botao, .botao:hover { transition: none; transform: none; } }

/* --------------------------------------------------------------------------
   Cabeçalho
   -------------------------------------------------------------------------- */

.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--papel); }
.topo .miolo { display: flex; align-items: center; gap: 28px; height: 72px; }
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 21px/1 var(--placa); font-stretch: 110%; letter-spacing: -0.02em; }
.marca svg { width: 28px; height: auto; flex: none; }
.menu { display: flex; gap: 26px; margin-left: auto; font-size: 15px; font-weight: 500; }
.menu a { text-decoration: none; color: var(--tinta-2); }
.menu a:hover { color: var(--tinta); }
.menu a[aria-current="page"] { color: var(--tinta); font-weight: 700; }
.topo .acoes { display: flex; gap: 10px; align-items: center; }
.topo .botao { height: 42px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
@media (max-width: 960px) { .menu { display: none; } .topo .acoes { margin-left: auto; } }
@media (max-width: 520px) { .topo .botao-leve { display: none; } }

/* --------------------------------------------------------------------------
   Primeira dobra
   -------------------------------------------------------------------------- */

.abertura { padding-block: 56px 96px; }
.abertura .miolo { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.abertura .texto { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.abertura .botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.abertura .prova { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--tinta-3); }
.abertura .prova b { color: var(--tinta); font: 700 14px var(--mono); }
@media (max-width: 960px) {
  .abertura { padding-block: 32px 72px; }
  .abertura .miolo { grid-template-columns: 1fr; gap: 48px; }
}

/* O palco da tela do produto, com o aviso do negócio pausado por cima. */
.palco { position: relative; min-width: 0; padding: 40px 0 44px; }
.palco::before {
  content: "";
  position: absolute;
  inset: 44px -40px 0 18%;
  background: var(--nevoa);
  border-radius: 28px;
  z-index: -1;
}
@media (max-width: 960px) { .palco::before { inset: 0 -20px 0 -20px; border-radius: 22px; } }

/* --------------------------------------------------------------------------
   Telas do produto (desenhadas em HTML, com dados fictícios)
   -------------------------------------------------------------------------- */

.tela {
  background: var(--papel);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
  min-width: 0;
}
.tela-topo { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.tela-topo .ref { font: 500 12px var(--mono); color: var(--tinta-3); }
.tela-topo .end { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tela-topo .pill { margin-left: auto; }
.tela-sub { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 18px; border-bottom: 1px solid var(--linha); background: #fafbfd; }
.chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--linha); background: var(--papel); color: var(--tinta-2); white-space: nowrap; }
.chip.ativo { background: var(--marinho); border-color: var(--marinho); color: #ffffff; }

.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { color: var(--ok); background: var(--ok-fundo); }
.pill.alerta { color: var(--alerta); background: var(--alerta-fundo); }
.pill.grave { color: var(--grave); background: var(--grave-fundo); }
.pill.info { color: var(--info); background: var(--info-fundo); }
.pill.neutro { color: var(--tinta-2); background: var(--nevoa); }

.linhas { list-style: none; margin: 0; padding: 0; }
.linhas li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--linha); }
.linhas li:last-child { border-bottom: 0; }
.linhas .nome { font-weight: 600; color: var(--tinta); }
.linhas .de { grid-column: 1; font-size: 12px; color: var(--tinta-3); }
.linhas .pill { grid-row: 1 / span 2; grid-column: 2; }
.linhas li.foco { background: #fff8f6; }

/* --------------------------------------------------------------------------
   Carimbo de cartório
   -------------------------------------------------------------------------- */

.carimbo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 16px 7px;
  border: 3px solid currentColor;
  border-radius: 8px;
  font-family: var(--placa);
  font-stretch: 75%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
  filter: url(#tinta);
  mix-blend-mode: multiply;
  user-select: none;
}
.carimbo b { font-size: 26px; font-weight: 800; }
.carimbo small { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }
.carimbo.grave { color: #c42a1f; }
.carimbo.ok { color: #0d7a57; }
.carimbo.laranja { color: var(--laranja-tinta); }

/* A lista do hero ao vivo: a certidão chega, é lida, vira Impedimento e o
   negócio pausa sozinho (site.js repete em loop). Sem JavaScript, fica o fim. */
.linhas li { transition: background-color 0.4s ease; }
.linhas li.chegando { background: #f6f8fd; }
.pill { transition: color 0.3s ease, background-color 0.3s ease; }
.pill.lendo { color: var(--info); background: var(--info-fundo); }
.pill.lendo::before { width: 9px; height: 9px; background: none; border: 1.5px solid currentColor; border-right-color: transparent; animation: girar 0.8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.aviso-vivo { position: absolute; left: -28px; bottom: 0; display: flex; align-items: center; gap: 12px; max-width: 340px; padding: 12px 16px 12px 12px; border-radius: 16px; background: var(--marinho); color: #ffffff; font-size: 13.5px; line-height: 1.35; box-shadow: 0 24px 48px -20px rgba(5, 10, 52, 0.6); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.aviso-vivo b { display: block; }
.aviso-vivo span span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.65); }
.aviso-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--grave); }
.aviso-ic svg { width: 18px; height: 18px; fill: #ffffff; }
.aviso-vivo.escondido { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: reduce) { .aviso-vivo, .aviso-vivo.escondido { transform: none; } .pill.lendo::before { animation: none; } }
@media (max-width: 960px) { .aviso-vivo { left: 12px; right: 12px; max-width: none; } }

/* --------------------------------------------------------------------------
   Seções
   -------------------------------------------------------------------------- */

.secao { padding-block: 96px; }
.secao .cabeca { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-bottom: 48px; }
@media (max-width: 720px) { .secao { padding-block: 72px; } }

/* Os balões de conversa do bloco do problema. */
.balao { align-self: flex-start; max-width: 88%; background: var(--papel); border: 1px solid var(--linha); border-radius: 16px 16px 16px 4px; padding: 10px 14px; font-size: 14px; box-shadow: 0 2px 6px rgba(13, 18, 51, 0.06); }
.balao .quem { display: block; font-size: 11px; font-weight: 700; color: var(--tinta-3); margin-bottom: 2px; }
.balao.verde { background: #dcf8c6; border-color: #c9eeb1; align-self: flex-end; border-radius: 16px 16px 4px 16px; }
.anexo { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; background: var(--papel); border: 1px dashed var(--tinta-3); border-radius: 10px; padding: 8px 12px; font: 500 12.5px var(--mono); color: var(--tinta-2); transform: rotate(-1.5deg); }
.anexo .ext { font-weight: 700; color: var(--grave); }

/* --------------------------------------------------------------------------
   Como funciona (faixa marinho)
   -------------------------------------------------------------------------- */

.marinho { background: var(--marinho); color: #ffffff; }
.marinho .sobre { color: #ffb27a; }
.marinho .lead { color: rgba(255, 255, 255, 0.72); }
/* Os cinco passos ocupam uma tela só: a lista à esquerda escolhe, a tela à
   direita mostra. Antes eram cinco cartões empilhados, longos demais. */
.etapas { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .etapas { grid-template-columns: 1fr; gap: 24px; } }
.etapas-lista { display: flex; flex-direction: column; min-width: 0; }
/* Cada passo tem um fio à esquerda; o escolhido acende o fio e o texto em laranja. */
.etapa {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  width: 100%;
  padding: 18px 18px 18px 22px;
  border: 0;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.etapa:hover { color: #ffffff; }
.etapa .n { font: 800 26px/1 var(--placa); font-stretch: 125%; color: rgba(255, 255, 255, 0.25); padding-top: 1px; transition: color 0.15s ease; }
.etapa b { display: block; font-size: 18px; font-weight: 700; line-height: 1.3; transition: color 0.15s ease; }
.etapa .resumo { display: none; margin-top: 6px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.etapa[aria-selected="true"] { border-left-color: var(--laranja); color: #ffffff; }
.etapa[aria-selected="true"] b, .etapa[aria-selected="true"] .n { color: var(--laranja); }
.etapa[aria-selected="true"] .resumo { display: block; }
.etapas-telas { position: relative; min-width: 0; min-height: 460px; display: flex; align-items: center; justify-content: center; }
/* Um brilho atrás da tela, para ela não flutuar no marinho chapado. */
.etapas-telas::before { content: ""; position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 109, 0, 0.22), rgba(58, 84, 255, 0.12) 60%, transparent); filter: blur(30px); pointer-events: none; }
.etapa-tela { position: relative; }
@media (max-width: 900px) { .etapas-telas { min-height: 0; } }
.etapa-tela { display: none; width: 100%; color: var(--tinta); }
.etapa-tela.ativa { display: block; animation: surgir 0.25s ease; }
@keyframes surgir { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .etapa-tela.ativa { animation: none; } .etapa { transition: none; } }

/* Miniaturas dentro dos passos. */
/* A janela do app, com a barra de endereço, e o celular do portal da parte. */
.janela { border-radius: 16px; overflow: hidden; background: var(--papel); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06); font-size: 13px; line-height: 1.45; }
.janela-barra { display: flex; align-items: center; gap: 14px; padding: 10px 14px; background: #eef0f5; border-bottom: 1px solid var(--linha); }
.pontos { display: flex; gap: 6px; }
.pontos i { width: 10px; height: 10px; border-radius: 50%; background: #d3d7e2; }
.janela-end { flex: 1; max-width: 320px; margin-inline: auto; padding: 4px 12px; border-radius: 8px; background: var(--papel); font: 500 11px var(--mono); color: var(--tinta-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.janela-corpo { min-height: 340px; display: flex; flex-direction: column; }
.j-cab { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--linha); }
.j-cab .ref { font: 500 12px var(--mono); color: var(--tinta-3); }
.j-cab b { font-size: 15px; }
.j-cab .pill { margin-left: auto; }
.j-chips { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.lista-pronta { display: flex; align-items: center; gap: 12px; margin: auto 18px 18px; padding: 12px 14px; border-radius: 12px; background: var(--ok-fundo); color: var(--ok); }
.lista-pronta b { display: block; color: var(--tinta); }
.lista-pronta span span { display: block; font-size: 12px; color: var(--tinta-2); }
.lp-ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: #ffffff; font-weight: 800; }
.kit { margin: auto 18px 18px; padding: 14px; border-radius: 12px; border: 1px dashed var(--laranja); background: #fff8f2; display: flex; flex-direction: column; gap: 10px; }
.kit-tit { font-size: 12px; font-weight: 700; color: var(--laranja-tinta); }
.kit-dados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.kit-dados span { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; background: var(--papel); border: 1px solid var(--linha); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kit-dados small { font-size: 10.5px; font-weight: 600; color: var(--tinta-3); }
.kit-link { font-size: 12.5px; font-weight: 700; color: var(--laranja-tinta); }
.celular { width: 280px; padding: 10px; border-radius: 44px; background: #11152e; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.celular-tela { display: flex; flex-direction: column; gap: 10px; padding: 26px 16px 18px; border-radius: 36px; background: var(--papel); font-size: 13px; line-height: 1.45; }
.cel-topo { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.cel-marca { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #1f6f4a; color: #ffffff; font: 800 10px var(--placa); }
.cel-ola { font: 800 22px var(--placa); font-stretch: 110%; margin-top: 6px; }
.cel-sub { color: var(--tinta-2); }
.cel-barra { height: 6px; border-radius: 99px; background: var(--nevoa); overflow: hidden; }
.cel-barra span { display: block; width: 75%; height: 100%; background: var(--laranja); }
.celular .upload { padding: 0; }
.celular .arquivo { padding: 8px 10px; }
/* No celular não cabe o "Recebido": fica só o visto verde. */
.celular .arquivo .pill { width: 20px; height: 20px; padding: 0; justify-content: center; font-size: 0; }
.celular .arquivo .pill::before { content: "✓"; width: auto; height: auto; border-radius: 0; background: none; font-size: 12px; font-weight: 800; }
.cel-botao { margin-top: 4px; padding: 12px; border-radius: 12px; background: var(--laranja); color: #ffffff; font-weight: 700; text-align: center; }
.pdf { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 10px; background: #fafbfd; border: 1px solid var(--linha); }
.pdf-barra { height: 7px; border-radius: 4px; background: var(--nevoa); }
.pdf-barra.c { width: 70%; }
.pdf-barra.b { width: 45%; }
.lida { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--info-fundo); color: var(--info); }
.lida b { color: var(--tinta); }
.lida-ic { font-size: 14px; }
.parecer-avatar { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--marinho); color: #ffffff; font: 800 11px var(--placa); }
.relatorio-tela { align-items: center; justify-content: center; gap: 4px; padding-bottom: 18px; background: #f6f7fa; }
.envio { display: flex; align-items: center; gap: 12px; width: calc(100% - 36px); padding: 10px 10px 10px 14px; border-radius: 12px; background: var(--papel); border: 1px solid var(--linha); }
.envio span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.envio small { font-size: 10.5px; color: var(--tinta-3); }
.envio-botao { flex: none; padding: 8px 12px; border-radius: 9px; background: var(--laranja); color: #ffffff; font-weight: 700; font-size: 12.5px; }
@media (max-width: 560px) { .kit-dados { grid-template-columns: 1fr 1fr; } .j-chips { display: none; } .celular { width: 260px; } }
.mini-form { padding: 16px 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo span { font-size: 11px; font-weight: 600; color: var(--tinta-3); }
.campo div { border: 1px solid var(--linha); border-radius: 8px; padding: 7px 10px; background: #fafbfd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.campo.largo { grid-column: 1 / -1; }
.upload { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.arquivo { display: flex; align-items: center; gap: 10px; border: 1px solid var(--linha); border-radius: 10px; padding: 9px 12px; }
.arquivo .ic { width: 26px; height: 30px; border-radius: 4px; background: var(--laranja-claro); color: var(--laranja-tinta); font: 700 9px var(--mono); display: grid; place-items: center; flex: none; }
.arquivo .nm { font-weight: 600; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arquivo .pill { margin-left: auto; }
.arquivo.vazio { border-style: dashed; color: var(--tinta-3); justify-content: center; }
.leitura { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.trecho { font: 12px/1.5 var(--mono); background: #fafbfd; border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; color: var(--tinta-2); }
.trecho mark { background: #ffe1c4; color: var(--tinta); padding: 0 2px; border-radius: 2px; }
.parecer { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--linha); }
.parecer small { display: block; margin-top: 4px; font-size: 12px; color: var(--tinta-3); }

/* O relatório em PDF: uma folha com o carimbo de parcial. */
.folha { position: relative; margin: 22px auto 14px; width: min(300px, 86%); aspect-ratio: 1 / 1.3; background: var(--papel); border: 1px solid var(--linha); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 24px -14px rgba(13, 18, 51, 0.4); }
.folha .faixa-laranja { height: 3px; background: var(--laranja); border-radius: 2px; }
.folha .tit { font: 800 13px var(--placa); font-stretch: 110%; }
.folha .barra { height: 7px; border-radius: 4px; background: var(--nevoa); }
.folha .barra.c { width: 70%; }
.folha .barra.b { width: 45%; }
.folha .caixa { border-left: 3px solid var(--grave); background: var(--grave-fundo); border-radius: 4px; padding: 7px 9px; font-size: 10.5px; color: var(--grave); font-weight: 600; }
.folha .carimbo { position: absolute; right: 12px; top: 92px; transform: rotate(8deg); padding: 5px 10px; }
.folha .carimbo b { font-size: 15px; }
.folha .assina { margin-top: auto; border-top: 1.5px solid var(--tinta); width: 60%; padding-top: 4px; font-size: 9.5px; color: var(--tinta-3); }

/* --------------------------------------------------------------------------
   O problema: o texto ao lado da mesa, com a conversa por cima da foto
   -------------------------------------------------------------------------- */

.problema-grade { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 96px); align-items: center; }
@media (max-width: 900px) { .problema-grade { grid-template-columns: 1fr; } }
.problema-texto { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.dores { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--linha); }
.dores li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--linha); font-size: 16.5px; color: var(--tinta-2); }
.dores li::before { content: "×"; flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--grave-fundo); color: var(--grave); font-size: 14px; font-weight: 700; transform: translateY(3px); }
.arquivo-nome { font: 500 0.88em var(--mono); color: var(--tinta); background: var(--nevoa); padding: 1px 6px; border-radius: 6px; }
.problema-visual { position: relative; min-width: 0; padding: 0 0 48px 64px; }
.problema-visual .foto { aspect-ratio: 4 / 5; border-radius: 26px; }
.problema-visual .foto img { object-position: 50% 50%; }
.conversa { position: absolute; left: 0; bottom: 0; width: min(360px, 80%); border-radius: 20px; overflow: hidden; background: #efe9e1; box-shadow: 0 30px 60px -28px rgba(13, 18, 51, 0.55); font-size: 14px; }
.conversa-topo { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #f7f7f7; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.conversa-topo b { display: block; font-size: 14px; }
.conversa-topo span span { display: block; font-size: 12px; color: var(--tinta-3); }
.conversa-avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--marinho); color: #ffffff; font: 800 11px var(--placa); }
.conversa-corpo { display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.conversa .balao { margin: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06); border: 0; }
.conversa .anexo { transform: none; background: #ffffff; border-style: solid; border-color: rgba(0, 0, 0, 0.06); }
@media (max-width: 560px) { .problema-visual { padding: 0; } .conversa { position: relative; width: auto; margin: -64px 12px 0; } }

/* --------------------------------------------------------------------------
   O custo de hoje: os riscos e a conta
   -------------------------------------------------------------------------- */

.riscos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .riscos { grid-template-columns: 1fr; } }
.risco { display: flex; flex-direction: column; gap: 12px; padding: 28px; border-radius: 22px; background: var(--nevoa); min-width: 0; }
.risco-n { font: 500 13px var(--mono); color: var(--laranja-tinta); }
.risco h3 { font: 800 clamp(22px, 2vw, 26px)/1.1 var(--placa); font-stretch: 112%; letter-spacing: -0.01em; }
.risco p { color: var(--tinta-2); font-size: 16px; }

.conta { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); margin-top: 72px; padding: clamp(28px, 4vw, 48px); border-radius: 28px; border: 1px solid var(--linha); background: var(--papel); box-shadow: 0 30px 60px -40px rgba(13, 18, 51, 0.35); }
@media (max-width: 900px) { .conta { grid-template-columns: 1fr; } }
.conta-texto { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.conta-texto h3 { font: 800 clamp(24px, 2.4vw, 30px)/1.1 var(--placa); font-stretch: 112%; letter-spacing: -0.01em; }
.conta-texto > p { color: var(--tinta-2); max-width: 52ch; }
.conta-entradas { display: flex; flex-direction: column; gap: 22px; margin-top: 16px; }
.controle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; align-items: baseline; }
.controle-nome { font-size: 15px; font-weight: 600; color: var(--tinta-2); }
.controle output { font: 700 16px var(--mono); }
.controle input { grid-column: 1 / -1; width: 100%; height: 24px; margin: 0; cursor: pointer; background: transparent; -webkit-appearance: none; appearance: none; }
/* O trilho pinta até o valor (--p, posto pelo site.js); o pino é branco com aro laranja. */
.controle input::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--laranja) var(--p, 0%), #e3e6ef var(--p, 0%)); }
.controle input::-moz-range-track { height: 6px; border-radius: 99px; background: #e3e6ef; }
.controle input::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--laranja); }
.controle input::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #ffffff; border: 3px solid var(--laranja); box-shadow: 0 2px 6px rgba(13, 18, 51, 0.2); }
.controle input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #ffffff; border: 3px solid var(--laranja); box-shadow: 0 2px 6px rgba(13, 18, 51, 0.2); }
.controle input:focus-visible { outline: none; }
.controle input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 109, 0, 0.25); }
.conta-resultado { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 22px; background: var(--marinho); color: #ffffff; min-width: 0; }
.resultado { display: flex; flex-direction: column; gap: 2px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.resultado-rotulo { font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.resultado-num { font: 700 clamp(28px, 3vw, 38px)/1.15 var(--mono); letter-spacing: -0.03em; }
.resultado-pe { font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.resultado-risco .resultado-num { color: var(--laranja); }
.conta-resultado .botao { margin-top: auto; justify-content: center; }

/* --------------------------------------------------------------------------
   Lado a lado
   -------------------------------------------------------------------------- */

/* Um cartão branco com três colunas. A da Tratto é marinho e passa um pouco
   das bordas do cartão, em cima e embaixo, como o plano em destaque. */
.comparacao { display: flex; flex-direction: column; margin-block: 16px; padding: 0 12px; border: 1px solid var(--linha); border-radius: 28px; background: var(--papel); box-shadow: 0 30px 60px -44px rgba(13, 18, 51, 0.4); }
.comparacao-linha { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 1fr); }
.comparacao-linha > * { min-width: 0; padding: 22px 24px; font-size: 15.5px; line-height: 1.5; }
.comparacao-linha > b { display: flex; flex-direction: column; gap: 4px; padding-left: 16px; font-size: 16px; font-weight: 700; color: var(--tinta); }
.comparacao-linha + .comparacao-linha > b, .comparacao-linha + .comparacao-linha > .col-hoje { border-top: 1px solid var(--linha); }
.tarefa-n { font: 500 12px var(--mono); color: var(--laranja-tinta); }
.comparacao .col-tratto { position: relative; display: flex; gap: 12px; background: var(--marinho); color: rgba(255, 255, 255, 0.9); }
.comparacao-linha + .comparacao-linha > .col-tratto::after { content: ""; position: absolute; top: 0; left: 24px; right: 24px; height: 1px; background: rgba(255, 255, 255, 0.1); }
.comparacao .col-tratto::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%23ff6d00'/%3E%3Cpath d='M5.2 9.4l2.4 2.3 5.2-5.2' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.comparacao .col-hoje { display: flex; gap: 12px; color: var(--tinta-3); }
.comparacao .col-hoje::before { content: ""; flex: none; width: 12px; height: 2px; margin: 11px 3px 0; border-radius: 2px; background: #c9cdd8; }
.comparacao-cabeca > * { display: flex; align-items: flex-end; padding-block: 26px 18px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.comparacao-cabeca .col-tratto { margin-top: -16px; padding-top: 34px; border-radius: 22px 22px 0 0; align-items: center; color: #ffffff; font: 800 20px var(--placa); font-stretch: 110%; letter-spacing: 0; text-transform: none; background: radial-gradient(120% 140% at 50% 0%, #1b2a8a 0%, var(--marinho) 60%); }
.comparacao-cabeca .col-tratto::before, .comparacao-cabeca .col-hoje::before { display: none; }
.comparacao-cabeca .col-tratto svg { width: 22px; height: 24px; }
.comparacao-linha:last-child .col-tratto { margin-bottom: -16px; padding-bottom: 38px; border-radius: 0 0 22px 22px; }
@media (max-width: 760px) {
  .comparacao { padding: 0; border: 0; background: transparent; box-shadow: none; }
  .comparacao-cabeca { display: none; }
  .comparacao-linha { grid-template-columns: 1fr; margin-bottom: 16px; border: 1px solid var(--linha); border-radius: 20px; overflow: hidden; background: var(--papel); }
  .comparacao-linha > * { border-top: 0 !important; }
  .comparacao-linha > b { padding: 18px 20px 8px; }
  .comparacao-linha .col-tratto::after { display: none; }
  .comparacao-linha:last-child .col-tratto { margin-bottom: 0; padding-bottom: 22px; border-radius: 0; }
}

/* --------------------------------------------------------------------------
   O relatório como argumento de venda
   -------------------------------------------------------------------------- */

.relatorio-venda { background: var(--nevoa); }
.relatorio-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: center; }
@media (max-width: 900px) { .relatorio-grade { grid-template-columns: 1fr; } .relatorio-texto { order: -1; } }
.relatorio-texto { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.relatorio-doc { position: relative; min-width: 0; padding: 0 24px 40px 0; }
.doc { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: 10px; background: var(--papel); border-top: 5px solid var(--laranja); box-shadow: 0 40px 70px -40px rgba(13, 18, 51, 0.5), 0 2px 6px rgba(13, 18, 51, 0.06); transform: rotate(-1.5deg); }
.doc-topo { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--linha); }
.doc-logo { padding: 8px 14px; border: 1.5px dashed var(--tinta-3); border-radius: 8px; font: 800 13px var(--placa); font-stretch: 110%; color: var(--tinta-3); text-transform: uppercase; letter-spacing: 0.04em; }
.doc-dados { font: 500 11px var(--mono); color: var(--tinta-3); }
.doc-tit { font: 800 22px/1.15 var(--placa); font-stretch: 110%; margin-top: 6px; }
.doc-sub { font-size: 13px; color: var(--tinta-3); }
.doc-placar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 6px; }
.doc-placar div { display: flex; flex-direction: column; padding: 12px; border-radius: 10px; background: var(--nevoa); }
.doc-placar b { font: 700 22px var(--mono); letter-spacing: -0.02em; }
.doc-placar span { font-size: 11.5px; color: var(--tinta-3); }
.doc-placar .grave { background: #fdecec; }
.doc-placar .grave b { color: #b42318; }
.doc-linha { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); font-size: 13.5px; }
.doc-assina { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; width: 60%; }
.doc-assina .mao { font-size: 30px; line-height: 1; color: var(--marinho); }
.doc-assina span:last-child { padding-top: 6px; border-top: 1.5px solid var(--tinta); font-size: 11.5px; color: var(--tinta-3); }
.vidro-claro { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 14px 18px 14px 14px; border-radius: 16px; background: var(--papel); border: 1px solid var(--linha); box-shadow: 0 20px 40px -24px rgba(13, 18, 51, 0.45); font-size: 14px; }
.vidro-claro .ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #e3f6ec; color: #13774a; font-weight: 800; }
.vidro-claro b { display: block; }
.vidro-claro span span { display: block; font-size: 12.5px; color: var(--tinta-3); }

/* --------------------------------------------------------------------------
   Cada papel
   -------------------------------------------------------------------------- */

.papeis { display: flex; flex-direction: column; gap: clamp(64px, 9vw, 112px); }
.papel { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.papel:nth-child(even) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.papel:nth-child(even) .papel-texto { order: 2; }
@media (max-width: 860px) { .papel, .papel:nth-child(even) { grid-template-columns: 1fr; gap: 28px; } .papel:nth-child(even) .papel-texto { order: 0; } }
.papel-texto { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.papel-tag { width: fit-content; padding: 5px 12px; border-radius: 999px; background: var(--laranja-claro); color: var(--laranja-tinta); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; }
.papel h3 { font-family: var(--placa); font-stretch: 112%; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; line-height: 1.08; letter-spacing: -0.01em; }
.papel p { color: var(--tinta-2); font-size: 17px; max-width: 46ch; }
/* A tela do papel fica por cima do canto da foto, do lado de dentro da página. */
.papel-visual { position: relative; min-width: 0; padding-bottom: 56px; }
.papel-visual .foto { border-radius: 22px; aspect-ratio: 16 / 10; }
.papel-visual .tela { position: absolute; z-index: 2; bottom: 0; right: -24px; width: min(380px, 78%); box-shadow: 0 24px 48px -20px rgba(13, 18, 51, 0.45); }
.papel:nth-child(even) .papel-visual .tela { right: auto; left: -24px; }
@media (max-width: 1100px) { .papel-visual .tela { right: 16px; } .papel:nth-child(even) .papel-visual .tela { left: 16px; } }
@media (max-width: 560px) { .papel-visual { padding-bottom: 0; } .papel-visual .tela, .papel:nth-child(even) .papel-visual .tela { position: relative; inset: auto; width: auto; margin: -40px 12px 0; } }
.contador { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--linha); border-bottom: 1px solid var(--linha); }
.contador div { background: var(--papel); padding: 12px 16px; display: flex; flex-direction: column; }
.contador b { font: 700 22px var(--mono); letter-spacing: -0.02em; }
.contador span { font-size: 11.5px; color: var(--tinta-3); }

/* --------------------------------------------------------------------------
   Detalhes
   -------------------------------------------------------------------------- */

.detalhes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: 22px; overflow: hidden; }
@media (max-width: 960px) { .detalhes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .detalhes { grid-template-columns: 1fr; } }
.detalhe { background: var(--papel); padding: 28px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.detalhe .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--laranja-claro); color: var(--laranja-tinta); display: grid; place-items: center; }
.detalhe .ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.detalhe p { color: var(--tinta-2); font-size: 15.5px; }

/* --------------------------------------------------------------------------
   Chamada final
   -------------------------------------------------------------------------- */

.chamada { padding-block: 40px 104px; }
.fecho {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
  padding: clamp(32px, 6vw, 80px);
  border-radius: 32px;
  color: #ffffff;
  background:
    radial-gradient(60% 80% at 92% 100%, rgba(255, 109, 0, 0.42), rgba(255, 109, 0, 0) 70%),
    radial-gradient(50% 70% at 70% 0%, rgba(58, 84, 255, 0.35), rgba(58, 84, 255, 0) 70%),
    var(--marinho);
}
/* Uma grade fina, que some nas bordas: o fundo de tela de sistema. */
.fecho::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(70% 90% at 75% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 90% at 75% 50%, #000 0%, transparent 75%);
}
@media (max-width: 900px) { .fecho { grid-template-columns: 1fr; gap: 40px; } }
.fecho-texto { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.fecho .sobre { color: #ffb27a; }
.fecho-titulo { font: 800 clamp(32px, 4vw, 54px)/1.04 var(--placa); font-stretch: 112%; letter-spacing: -0.015em; text-wrap: balance; }
.fecho-titulo em { font-style: normal; color: var(--laranja); }
.fecho-sub { font-size: 18px; color: rgba(255, 255, 255, 0.72); max-width: 40ch; }
.fecho-sub a { color: #ffffff; }
.fecho .botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.botao-vidro { color: #ffffff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); }
.botao-vidro:hover { background: rgba(255, 255, 255, 0.14); }

.fecho-cartoes { position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.vidro { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6); font-size: 14px; }
.vidro b { display: block; font-weight: 700; }
.vidro span span { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.vidro-negocio { flex-direction: column; align-items: stretch; gap: 8px; width: 82%; }
.vidro-negocio b { font: 800 26px/1.1 var(--placa); font-stretch: 110%; }
.vidro-ref { font: 500 12px var(--mono); color: rgba(255, 255, 255, 0.6); }
.vidro-barra { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.vidro-barra span { display: block; width: 93%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb27a, var(--laranja)); }
.vidro-pe { font-size: 12.5px; color: rgba(255, 255, 255, 0.6); }
.vidro-leitura { align-self: flex-end; width: 86%; }
.vidro-leitura > span:nth-child(2) { flex: 1; min-width: 0; }
.vidro-ponto { width: 10px; height: 10px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 5px rgba(61, 220, 151, 0.18); flex: none; }
.vidro-envio { width: 74%; margin-left: 8%; }
.vidro-ic { width: 34px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--laranja); color: #ffffff; font: 700 10px var(--mono); }
@media (max-width: 560px) { .vidro-negocio, .vidro-leitura, .vidro-envio { width: 100%; margin: 0; } .vidro-envio { display: none; } }

/* --------------------------------------------------------------------------
   Contato: o texto ao lado do formulário
   -------------------------------------------------------------------------- */

.contato-pagina { padding-top: 64px; }
.contato-grade { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
@media (max-width: 900px) { .contato-grade { grid-template-columns: 1fr; } }
.contato-texto { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.proximos { list-style: none; counter-reset: passo; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--linha); }
.proximos li { counter-increment: passo; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 12px; padding: 16px 0; border-bottom: 1px solid var(--linha); color: var(--tinta-2); font-size: 16px; }
.proximos li::before { content: "0" counter(passo); grid-row: span 2; font: 500 13px var(--mono); color: var(--laranja-tinta); padding-top: 3px; }
.proximos b { color: var(--tinta); }
.contato-alternativa { font-size: 15px; color: var(--tinta-3); }
.contato-alternativa a { color: var(--laranja-tinta); }
.contato-cartao { padding: clamp(24px, 3.5vw, 40px); border-radius: 28px; border: 1px solid var(--linha); background: var(--papel); box-shadow: 0 30px 60px -44px rgba(13, 18, 51, 0.4); scroll-margin-top: 96px; }
.formulario { display: flex; flex-direction: column; gap: 18px; }
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .campos { grid-template-columns: 1fr; } }
.campo-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo-f.largo { grid-column: 1 / -1; }
.campo-f > span { font-size: 13.5px; font-weight: 600; color: var(--tinta-2); }
.campo-f small { font-weight: 500; color: var(--tinta-3); }
.campo-f input, .campo-f select, .campo-f textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--linha); border-radius: 12px; background: #fbfcfe; font: 16px var(--texto); color: var(--tinta); transition: border-color 0.15s ease, background-color 0.15s ease; }
.campo-f textarea { resize: vertical; min-height: 88px; }
.campo-f select { appearance: none; -webkit-appearance: none; background: #fbfcfe url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237d8199' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 12px no-repeat; padding-right: 36px; }
.campo-f input:focus, .campo-f select:focus, .campo-f textarea:focus { outline: none; border-color: var(--laranja); background-color: #ffffff; box-shadow: 0 0 0 4px rgba(255, 109, 0, 0.12); }
.campo-f input[aria-invalid="true"], .campo-f select[aria-invalid="true"] { border-color: var(--grave); }
.isca { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.formulario .botao { justify-content: center; width: 100%; border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.formulario .botao[disabled] { opacity: 0.7; cursor: progress; }
.formulario-erro { padding: 10px 14px; border-radius: 10px; background: var(--grave-fundo); color: var(--grave); font-size: 14.5px; font-weight: 600; }
.formulario-nota { font-size: 13px; color: var(--tinta-3); text-align: center; }
.formulario-ok { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 0; }
.formulario-ok[hidden], .formulario[hidden], .formulario-erro[hidden] { display: none; }
.formulario-ok h2 { font-size: clamp(26px, 3vw, 34px); }
.formulario-ok p { color: var(--tinta-2); }
.ok-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--ok-fundo); color: var(--ok); font-size: 22px; font-weight: 800; }

/* --------------------------------------------------------------------------
   Perguntas
   -------------------------------------------------------------------------- */

.perguntas { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: start; }
.perguntas h2 { font-size: clamp(30px, 3.2vw, 40px); }
@media (max-width: 860px) { .perguntas { grid-template-columns: 1fr; gap: 32px; } }
.lista-perguntas { display: flex; flex-direction: column; border-top: 1px solid var(--linha); }
details { border-bottom: 1px solid var(--linha); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 700; font-size: 18px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 800 24px/1 var(--placa); color: var(--laranja-tinta); transition: transform 0.2s ease; }
details[open] summary::after { transform: rotate(45deg); }
details p { padding-bottom: 20px; color: var(--tinta-2); max-width: 62ch; }

/* --------------------------------------------------------------------------
   Rodapé
   -------------------------------------------------------------------------- */

.rodape { background: var(--marinho); color: rgba(255, 255, 255, 0.72); padding-block: 64px 28px; font-size: 14px; }
.rodape .miolo { display: flex; flex-wrap: wrap; gap: 40px 64px; justify-content: space-between; }
.rodape .marca { color: #ffffff; }
.rodape-marca { display: flex; flex-direction: column; gap: 14px; max-width: 280px; }
.rodape-colunas { display: flex; flex-wrap: wrap; gap: 32px 56px; }
.rodape-colunas div { display: flex; flex-direction: column; gap: 10px; }
.rodape-colunas a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.rodape-colunas a:hover { color: #ffffff; text-decoration: underline; }
.rodape-titulo { color: #ffffff; font-weight: 700; }
.rodape-fim { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.rodape-fim a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.rodape-fim a:hover { color: #ffffff; text-decoration: underline; }
.rodape-legal { display: flex; gap: 20px; }

/* --------------------------------------------------------------------------
   Fotos. Sem o arquivo, o espaço reservado mantém o layout de pé.
   -------------------------------------------------------------------------- */

.foto { margin: 0; overflow: hidden; border-radius: 20px; background: var(--nevoa); min-width: 0; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.foto-largo { aspect-ratio: 21 / 8; }
.foto-paisagem { aspect-ratio: 4 / 3; }
.foto-retrato { aspect-ratio: 4 / 3; }
.foto-retrato img { object-position: 50% 15%; }
@media (max-width: 720px) { .foto-largo { aspect-ratio: 4 / 3; } }
.foto-vazia { display: grid; place-items: center; padding: 20px; border: 1.5px dashed var(--tinta-3); text-align: center; font-size: 13px; color: var(--tinta-3); background: repeating-linear-gradient(135deg, var(--nevoa) 0 12px, #eceef4 12px 24px); }
.faixa-foto { padding-block: 0 24px; }
.faixa-foto .miolo { display: flex; flex-direction: column; gap: 14px; }
/* A faixa da frase: a foto fica presa na tela enquanto a página rola, e as
   palavras acendem uma a uma, saindo do desfoque. --p (0 a 1) vem do site.js;
   sem ele, a frase aparece inteira. Com movimento reduzido, só o zoom da foto sai. */
.frase-foto { position: relative; margin: 24px 12px; border-radius: 36px; background: var(--marinho); overflow: clip; }
.frase-fixo { position: relative; display: flex; align-items: flex-end; min-height: min(86vh, 760px); padding: clamp(32px, 6vw, 80px); border-radius: inherit; overflow: hidden; }
.frase-fundo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(calc(1.12 - 0.12 * var(--p, 1))); transition: transform 0.25s linear; }
.frase-fixo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 10, 52, 0.85) 0%, rgba(5, 10, 52, 0.5) 45%, rgba(5, 10, 52, 0) 75%), linear-gradient(0deg, rgba(5, 10, 52, 0.55), rgba(5, 10, 52, 0) 55%); }
.frase { position: relative; z-index: 1; max-width: 18ch; text-align: left; font: 400 clamp(34px, 5vw, 76px)/1.06 var(--placa); font-stretch: 100%; letter-spacing: -0.035em; color: #ffffff; text-wrap: balance; }
.frase-ini, .frase-fim { display: block; }
.frase-fim { margin-top: 0.18em; color: var(--laranja); font-weight: 500; }
.palavra { display: inline-block; }
.frase-foto.viva { height: 190vh; overflow: visible; }
.frase-foto.viva .frase-fixo { position: sticky; top: 84px; height: calc(100vh - 108px); min-height: 0; }
.frase-foto.viva .palavra {
  --luz: clamp(0, calc(var(--p, 0) * (var(--n) + 2) - var(--i)), 1);
  opacity: calc(0.16 + 0.84 * var(--luz));
  filter: blur(calc((1 - var(--luz)) * 6px));
  transition: opacity 0.25s linear, filter 0.25s linear;
}
@media (prefers-reduced-motion: reduce) { .frase-fundo { transform: none; transition: none; } }
@media (max-width: 720px) { .frase-foto { border-radius: 24px; margin: 16px 8px; } .frase-fundo { object-position: 70% 50%; } .frase-fixo::after { background: linear-gradient(0deg, rgba(5, 10, 52, 0.9) 0%, rgba(5, 10, 52, 0.5) 55%, rgba(5, 10, 52, 0.1) 85%); } }
.cabeca-com-foto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; margin-bottom: 48px; }
.cabeca-com-foto .cabeca { margin-bottom: 0; }
@media (max-width: 860px) { .cabeca-com-foto { grid-template-columns: 1fr; gap: 24px; } }

/* --------------------------------------------------------------------------
   Chamada do guia na página inicial
   -------------------------------------------------------------------------- */

.guia-chamada { background: var(--nevoa); }
.guia-cartao { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.guia-cartao .cabeca { margin-bottom: 0; }
.guia-cartao .botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
@media (max-width: 860px) { .guia-cartao { grid-template-columns: 1fr; } }
.mapa-br { position: relative; min-width: 0; width: 100%; max-width: 480px; justify-self: center; }
.mapa-br svg { display: block; width: 100%; height: auto; overflow: visible; }
.estado path { fill: #dde1ec; stroke: var(--nevoa); stroke-width: 1.5; stroke-linejoin: round; transition: fill 0.15s ease; }
.estado:hover path { fill: var(--laranja); }
.estado:focus { outline: none; }
.estado:focus-visible path { fill: var(--marinho); }
.siglas text { font: 800 13px var(--placa); font-stretch: 110%; fill: var(--tinta-2); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
/* A etiqueta sobe um pouco acima do ponteiro, com a seta apontando para o estado. */
.mapa-dica { position: absolute; z-index: 2; left: 0; top: 0; transform: translate(-50%, calc(-100% - 14px)); padding: 8px 12px; border-radius: 10px; background: var(--marinho); color: #ffffff; font-size: 13px; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.12s ease; box-shadow: 0 12px 24px -12px rgba(5, 10, 52, 0.6); }
.mapa-dica.visivel { opacity: 1; }
.mapa-dica b { display: block; font-weight: 700; }
.mapa-dica span { color: #ffb27a; font-weight: 600; }
.mapa-dica::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--marinho); transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
/* No celular os estados pequenos não dão para tocar: a lista das siglas resolve. */
.mapa-lista { display: none; }
@media (max-width: 600px) {
  .mapa-dica { display: none; }
  .mapa-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
  .mapa-lista a { padding: 6px 10px; border-radius: 10px; background: var(--papel); border: 1px solid var(--linha); font: 800 13px var(--placa); text-decoration: none; }
  .mapa-lista .num { font: 500 12px var(--texto); color: var(--tinta-3); }
}
.guia-nota { font-size: 14px; color: var(--tinta-3); max-width: 52ch; margin-top: -4px; }

/* --------------------------------------------------------------------------
   Páginas internas
   -------------------------------------------------------------------------- */

.pagina-topo { padding-block: 64px 56px; }
.pagina-topo .miolo { display: flex; flex-direction: column; gap: 20px; }
.pagina-topo h1 { max-width: 20ch; }
.pagina-topo .botoes { display: flex; flex-wrap: wrap; gap: 12px; }
.pagina-topo .lead a { color: var(--laranja-tinta); }

.capitulo { padding-block: 72px; }
.capitulo-nevoa { background: var(--nevoa); }
.capitulo-grade { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.capitulo-grade.invertido > :first-child { order: 2; }
@media (max-width: 900px) { .capitulo-grade { grid-template-columns: 1fr; gap: 32px; } .capitulo-grade.invertido > :first-child { order: 0; } }
.capitulo-texto { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.capitulo-texto h2 { font-size: clamp(28px, 3.2vw, 40px); }
.lista-recursos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.lista-recursos li { position: relative; padding-left: 22px; color: var(--tinta-2); }
.lista-recursos li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 8px; border-radius: 2px; background: var(--laranja); transform: rotate(45deg); }
.lista-recursos b { color: var(--tinta); }
.capitulo-foto .foto { aspect-ratio: 4 / 3; }

.principios { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
@media (max-width: 860px) { .principios { grid-template-columns: 1fr; } }
.principios > div { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 3px solid var(--marinho); }
.principios h3 { font-family: var(--placa); font-stretch: 110%; font-size: 22px; font-weight: 800; }
.principios p { color: var(--tinta-2); }

/* --------------------------------------------------------------------------
   Guia de certidões
   -------------------------------------------------------------------------- */

/* A barra de estados fica presa logo abaixo do topo enquanto a lista rola. */
.guia-seletor { position: sticky; top: calc(72px + env(safe-area-inset-top, 0px)); z-index: 15; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px); border-block: 1px solid var(--linha); }
.guia-seletor .miolo { display: flex; align-items: center; gap: 14px; height: 60px; }
.guia-seletor-rotulo { flex: none; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.guia-seletor-trilho { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; padding-block: 4px; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.guia-seletor-trilho::-webkit-scrollbar { display: none; }
.guia-seletor-trilho a { flex: none; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--linha); background: var(--papel); font: 800 13px/1 var(--placa); font-stretch: 110%; text-decoration: none; color: var(--tinta-2); transition: border-color 0.15s ease, background-color 0.15s ease; }
.guia-seletor-trilho a:hover { border-color: var(--laranja); color: var(--tinta); }
.guia-seletor-trilho a[aria-current="page"] { background: var(--marinho); border-color: var(--marinho); color: #ffffff; }
.guia-seletor-trilho a:last-child { margin-right: 32px; }
@media (max-width: 600px) { .guia-seletor-rotulo { display: none; } .guia-seletor .miolo { height: 54px; } }
.trilha { display: flex; gap: 8px; font-size: 14px; color: var(--tinta-3); }
.trilha a { color: var(--tinta-2); }
.guia-aviso { font-size: 14px; color: var(--tinta-3); }
.guia-corpo { padding-block: 0 96px; }
.guia-seletor + .guia-corpo { padding-top: 40px; }
.guia-colunas { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; }
@media (max-width: 960px) { .guia-colunas { grid-template-columns: 1fr; } }
.guia-lista { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.guia-bloco-topo { display: flex; align-items: baseline; gap: 12px; padding-bottom: 10px; border-bottom: 3px solid var(--marinho); }
.guia-bloco-topo h2 { font-size: clamp(24px, 2.6vw, 30px); }
.guia-bloco-topo .num { font: 800 18px var(--placa); color: var(--laranja-tinta); }
.guia-bloco-desc { margin-top: 10px; color: var(--tinta-2); }
.certidoes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.certidao { display: flex; flex-direction: column; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--linha); min-width: 0; }
.certidao-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.certidao h3 { font-size: 17px; line-height: 1.35; }
.certidao .orgao { font-size: 13px; font-weight: 600; color: var(--laranja-tinta); }
.certidao p { color: var(--tinta-2); font-size: 15px; max-width: 72ch; }
.no-padrao { flex: none; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--laranja-claro); color: var(--laranja-tinta); white-space: nowrap; }
.certidao-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 4px; font-size: 13px; color: var(--tinta-3); }
.certidao-meta b { color: var(--tinta); font-weight: 600; }
.certidao-meta .oficial { color: var(--laranja-tinta); font-weight: 600; }
.outras { margin-top: 8px; }
.outras summary { font-size: 16px; padding: 16px 0; }
.guia-tratto { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 20px; background: var(--marinho); color: rgba(255, 255, 255, 0.8); }
.guia-tratto b { color: #ffffff; }
@media (max-width: 960px) { .guia-tratto { position: static; } }
.guia-nacionais { display: flex; align-items: center; gap: 18px; padding: 20px 24px; margin-bottom: 20px; border-radius: 18px; background: var(--marinho); color: #ffffff; text-decoration: none; }
.guia-nacionais .uf, .guia-estados .uf { font: 800 30px/1 var(--placa); font-stretch: 118%; }
.guia-nacionais .uf { color: var(--laranja); }
.guia-nacionais span span { display: block; color: rgba(255, 255, 255, 0.7); font-size: 14px; }
.guia-estados { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.guia-estados a { display: flex; flex-direction: column; gap: 4px; padding: 18px; border: 1px solid var(--linha); border-radius: 16px; text-decoration: none; transition: border-color 0.15s ease, transform 0.15s ease; }
.guia-estados a:hover { border-color: var(--laranja); transform: translateY(-1px); }
.guia-estados .nome { font-weight: 600; }
.guia-estados .qtd { font-size: 13px; color: var(--tinta-3); }

/* --------------------------------------------------------------------------
   Privacidade e Termos: texto longo, com o sumário fixo ao lado no desktop.
   -------------------------------------------------------------------------- */
.legal-data { margin-top: 16px; font-size: 14px; color: var(--tinta-3); }
.legal-corpo { padding-block: 24px 96px; }
.legal { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.legal-sumario { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.legal-sumario ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--tinta-3); }
.legal-sumario a { color: var(--tinta-2); text-decoration: none; }
.legal-sumario a:hover { color: var(--laranja-tinta); text-decoration: underline; }
.legal-texto { max-width: 72ch; font-size: 16px; line-height: 1.65; color: var(--tinta-2); }
.legal-texto h2 { margin: 48px 0 12px; font-size: 22px; line-height: 1.25; color: var(--tinta); scroll-margin-top: 96px; }
.legal-texto h2:first-child { margin-top: 0; }
.legal-texto h3 { margin: 28px 0 8px; font-size: 17px; color: var(--tinta); }
.legal-texto p, .legal-texto ul { margin: 0 0 14px; }
.legal-texto ul { padding-left: 22px; }
.legal-texto li { margin-bottom: 6px; }
.legal-texto b { color: var(--tinta); }
.legal-texto a { color: var(--laranja-tinta); }
.legal-tabela { margin: 8px 0 20px; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; font-size: 14.5px; line-height: 1.5; }
.legal-linha { display: grid; grid-template-columns: 1fr 1.6fr 1.6fr; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--linha); }
.legal-linha:first-child { border-top: 0; }
.legal-cabeca { background: var(--nevoa); font-weight: 700; color: var(--tinta); }
.legal-linha [role="cell"]:first-child { font-weight: 600; color: var(--tinta); }
/* Dado que falta preencher antes de publicar. */
.pendente { background: var(--alerta-fundo); color: var(--alerta); padding: 0 4px; border-radius: 4px; font-weight: 600; }
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: 32px; }
  .legal-sumario { position: static; }
}
@media (max-width: 640px) {
  .legal-cabeca { display: none; }
  .legal-linha { grid-template-columns: 1fr; gap: 4px; }
}

/* --------------------------------------------------------------------------
   Preço do m² em São Paulo: o mapa dos distritos e a ficha ao lado.
   As faixas vão do claro ao marinho, um tom só; o laranja fica para o
   distrito escolhido. O tipo de imóvel (data-tipo no mapa) decide qual faixa
   pinta cada distrito.
   -------------------------------------------------------------------------- */
.sp-corpo { padding-block: 0 72px; }
.sp-tipo { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 24px; border-radius: 12px; background: var(--nevoa); }
.sp-tipo button { padding: 8px 16px; border: 0; border-radius: 9px; background: transparent; font: 600 15px var(--texto); color: var(--tinta-2); cursor: pointer; }
.sp-tipo button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 2px rgba(13, 18, 51, 0.12); }
.sp-grade { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
@media (max-width: 900px) { .sp-grade { grid-template-columns: 1fr; gap: 24px; } }
.sp-mapa { position: relative; min-width: 0; max-width: 560px; width: 100%; justify-self: center; }
.sp-mapa svg { display: block; width: 100%; height: auto; }
.sp-sem-fundo { fill: #f7f8fb; } .sp-sem-risco { stroke: #e3e5ee; stroke-width: 2; }
.distrito { cursor: pointer; }
.distrito:focus { outline: none; }
.distrito path { fill: var(--sp-0); stroke: var(--papel); stroke-width: 1; stroke-linejoin: round; transition: fill 0.12s ease; }
.sp-mapa { --sp-0: url(#sp-sem); --sp-1: #dde1f2; --sp-2: #bfc5e5; --sp-3: #929bd0; --sp-4: #6370b8; --sp-5: #36439b; --sp-6: #121a52; }
.sp-mapa[data-tipo="apartamento"] [data-f-apartamento="1"] path, .sp-mapa[data-tipo="casa"] [data-f-casa="1"] path { fill: var(--sp-1); }
.sp-mapa[data-tipo="apartamento"] [data-f-apartamento="2"] path, .sp-mapa[data-tipo="casa"] [data-f-casa="2"] path { fill: var(--sp-2); }
.sp-mapa[data-tipo="apartamento"] [data-f-apartamento="3"] path, .sp-mapa[data-tipo="casa"] [data-f-casa="3"] path { fill: var(--sp-3); }
.sp-mapa[data-tipo="apartamento"] [data-f-apartamento="4"] path, .sp-mapa[data-tipo="casa"] [data-f-casa="4"] path { fill: var(--sp-4); }
.sp-mapa[data-tipo="apartamento"] [data-f-apartamento="5"] path, .sp-mapa[data-tipo="casa"] [data-f-casa="5"] path { fill: var(--sp-5); }
.sp-mapa[data-tipo="apartamento"] [data-f-apartamento="6"] path, .sp-mapa[data-tipo="casa"] [data-f-casa="6"] path { fill: var(--sp-6); }
.sp-mapa .distrito:hover path, .sp-mapa .distrito:focus-visible path, .sp-mapa .distrito.escolhido path { fill: var(--laranja); }
.sp-legenda { margin-top: 16px; font-size: 13px; color: var(--tinta-2); }
.sp-legenda > span { display: block; margin-bottom: 8px; font: 500 12px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-3); }
.sp-legenda ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sp-legenda li { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.sp-legenda i { width: 14px; height: 14px; border-radius: 4px; background: var(--sp-0); }
.sp-legenda .cor-1 { background: var(--sp-1); } .sp-legenda .cor-2 { background: var(--sp-2); } .sp-legenda .cor-3 { background: var(--sp-3); }
.sp-legenda .cor-4 { background: var(--sp-4); } .sp-legenda .cor-5 { background: var(--sp-5); } .sp-legenda .cor-6 { background: var(--sp-6); }
.sp-legenda .cor-0 { background: repeating-linear-gradient(135deg, #e3e5ee 0 2px, #f7f8fb 2px 5px); }
.sp-ficha { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid var(--linha); border-radius: 20px; background: var(--papel); box-shadow: var(--sombra); }
.sp-ficha { max-height: calc(100vh - 120px); overflow-y: auto; }
@media (max-width: 900px) { .sp-ficha { position: static; max-height: none; } }
.sp-ficha-zona { font: 500 12px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--laranja-tinta); }
.sp-ficha h2 { font-size: 28px; }
.sp-ficha-tipo { font-size: 14px; color: var(--tinta-3); }
.sp-ficha-preco { font-size: 18px; color: var(--tinta-2); }
.sp-ficha-preco b { font: 800 40px/1.1 var(--placa); font-stretch: 112%; color: var(--tinta); }
.sp-ficha dl { margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.sp-ficha dl div:first-child, .sp-ficha dl div:nth-child(2) { grid-column: 1 / -1; }
.sp-ficha dt { font-size: 12.5px; color: var(--tinta-3); }
.sp-ficha dd { margin: 0; font-weight: 600; }
.sp-ficha-leilao { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 14px; color: var(--tinta-2); }
.sp-ficha-dica { font-size: 13px; color: var(--tinta-3); }
.sp-tratto { position: static; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 48px; }
.sp-tratto > div:first-child { max-width: 60ch; }
.sp-tratto .botoes { display: flex; flex-wrap: wrap; gap: 10px; }
.sp-tabelas { padding-block: 0 72px; }
.sp-tabelas h2, .sp-metodo h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 24px; }
.sp-tabela h3 { margin-bottom: 12px; }
.sp-tabela + .sp-tabela { margin-top: 40px; }
.sp-rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); }
.sp-tabela table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.sp-tabela th, .sp-tabela td { padding: 10px 14px; text-align: left; border-top: 1px solid var(--linha); white-space: nowrap; }
.sp-tabela thead th { border-top: 0; background: var(--nevoa); font-size: 12.5px; font-weight: 700; color: var(--tinta-2); }
.sp-tabela tbody th { font-weight: 600; }
.sp-tabela td { color: var(--tinta-2); }
.sp-tabela td.num { text-align: right; }
.sp-tabela-nota { margin-top: 10px; font-size: 13px; color: var(--tinta-3); }
.sp-metodo { padding-block: 0 96px; }
.sp-metodo .lista-recursos { max-width: 80ch; }

/* O mapa com zoom (mapa-sp.js). Sem WebGL ou sem JavaScript, fica o SVG. */
.sp-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 24px; }
.sp-controles .sp-tipo { margin-bottom: 0; }
.sp-busca { position: relative; flex: 1 1 320px; max-width: 520px; }
.sp-busca input { width: 100%; height: 46px; padding: 0 16px; border: 1.5px solid var(--linha); border-radius: 12px; background: var(--papel); font: 400 16px var(--texto); color: var(--tinta); }
.sp-busca input:focus { outline: none; border-color: var(--laranja); }
.sp-busca ul { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); list-style: none; margin: 0; padding: 6px; border: 1px solid var(--linha); border-radius: 14px; background: var(--papel); box-shadow: var(--sombra); }
.sp-busca button { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; text-align: left; font: inherit; cursor: pointer; }
.sp-busca button:hover, .sp-busca button:focus-visible { background: var(--nevoa); }
.sp-busca button b { font-size: 15px; font-weight: 600; color: var(--tinta); }
.sp-busca button span { font-size: 13px; color: var(--tinta-3); }
.sp-busca-nada { padding: 10px; font-size: 14px; color: var(--tinta-3); }
.sp-mapa.com-zoom { max-width: none; }
.sp-mapa.com-zoom > svg { display: none; }
.sp-mapa-gl { width: 100%; height: min(78vh, 720px); min-height: 420px; border-radius: 18px; overflow: hidden; border: 1px solid var(--linha); }
@media (max-width: 900px) { .sp-mapa-gl { height: 70vh; } }
.sp-ficha-base { font-size: 13.5px; color: var(--tinta-3); }
.sp-voltar { align-self: flex-start; padding: 0; border: 0; background: none; font: 600 14px var(--texto); color: var(--laranja-tinta); cursor: pointer; }
.sp-ficha-predio { display: flex; flex-direction: column; gap: 8px; }
.sp-ficha-predio h2 { font-size: 24px; }
.sp-ficha-predio .sp-ficha-preco b { font-size: 34px; }
.sp-ficha-predio[hidden], .sp-ficha-distrito[hidden] { display: none; }
.sp-ficha-distrito { display: flex; flex-direction: column; gap: 10px; }
.sp-vendas-titulo { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 16px; }
.sp-vendas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
/* No desktop, a ficha do prédio tem a altura da tela e só a lista de vendas
   rola; o nome, o preço e o botão ficam parados. No celular, a ficha cresce
   com a página e não rola nada por dentro. */
@media (min-width: 901px) {
  .sp-ficha.com-predio { overflow: hidden; }
  .sp-ficha.com-predio .sp-ficha-predio { flex: 1 1 auto; min-height: 0; }
  .sp-ficha.com-predio .sp-vendas { flex: 1 1 auto; min-height: 120px; overflow-y: auto; scrollbar-width: thin; padding-right: 6px; }
  .sp-ficha.com-predio .sp-ficha-predio > :not(.sp-vendas) { flex: none; }
}
.sp-vendas li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.sp-vendas li[hidden] { display: none; }
.sp-venda-topo { display: flex; justify-content: space-between; gap: 12px; }
.sp-venda-mes { font: 500 13px var(--mono); color: var(--tinta-2); }
.sp-venda-info { font-size: 13.5px; color: var(--tinta-3); }
.sp-selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sp-selo { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--info-fundo); color: var(--info); }
.sp-selo-leilao { background: var(--alerta-fundo); color: var(--alerta); }
.sp-mais { align-self: flex-start; padding: 6px 0; border: 0; background: none; font: 600 14px var(--texto); color: var(--laranja-tinta); cursor: pointer; }
.sp-ficha-nota { font-size: 12.5px; color: var(--tinta-3); }
.sp-ficha .botao { align-self: stretch; text-align: center; }