/* ═══════════════════════════════════════════════════════════════════════════
   site.css — o site público da Lince Leilões (linceimoveis.com.br)

   Identidade: a mesma que o cliente já conhece nos PDFs e no portal
   (portal_templates.py): grafite #14181F / #1E242E, ouro #C9A227 (só como
   preenchimento; para TEXTO sobre fundo claro o ouro é #8A6A05, porque
   #C9A227 sobre branco não tem contraste de leitura), fundo #F3F1EC, cartão
   #FCFCFB, texto #191713. Títulos em Georgia, texto em fonte do sistema — as
   mesmas do PDF, e sem fonte externa: zero dependência, zero espera.

   Movimento (decisão do Mário, 07/09/2026): transições LEVES. Movimento é
   ênfase, não espetáculo — e quem pede menos movimento no sistema
   (prefers-reduced-motion) não recebe nenhum.

   Celular primeiro: tudo é coluna única até 760px; a partir daí vira grade.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --grafite:#14181F; --grafite2:#1E242E; --grafite3:#2A313D;
  --ouro:#C9A227; --ouroTxt:#8A6A05; --ouroTxt2:#6E5404; --ouroSoft:#F7EFD4;
  --bg:#F3F1EC; --card:#FCFCFB; --line:#E1E0D9; --elev:#EFEDE7;
  --txt:#191713; --muted:#52514E; --muted2:#8A8880;
  --pos:#1B7A3E; --posbg:#E7F3EB; --neg:#A93226; --negbg:#FBEAE7;
  --warn:#8A6100; --warnbg:#FAF1DB; --info:#255F87; --infobg:#E8F1F7;
  --serif:Georgia,"Times New Roman",serif;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;

  /* ── sistema de design (passada 2, 07/09/2026) ──────────────────────────
     Escala de espaçamento em base 4 (como o Tailwind, sem o Tailwind — o
     site não carrega script de fora, e a CSP do Caddy não deixaria).
     Use os tokens; número solto no CSS é dívida. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px;
  --e10:40px; --e12:48px; --e16:64px; --e20:80px; --e24:96px;
  /* tipografia: escala 1.2 a partir de 16px; títulos em Georgia, corpo na
     fonte do sistema (as mesmas do PDF). */
  --f-xs:12.5px; --f-sm:14px; --f-base:16px; --f-md:17px; --f-lg:20px;
  --f-xl:24px; --f-2xl:clamp(26px,3.4vw,32px); --f-3xl:clamp(30px,5vw,46px);
  --lh-corpo:1.6; --lh-titulo:1.2;
  /* raios, sombras, tempos */
  --raio-sm:8px; --raio:14px; --raio-pill:999px;
  --sombra-sm:0 4px 12px rgba(20,24,31,.06);
  --sombra:0 10px 30px rgba(20,24,31,.08);
  --sombra-ouro:0 6px 16px rgba(201,162,39,.25);
  --t:.22s ease;
  --largura:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font:var(--f-base)/var(--lh-corpo) var(--sans);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--ouroTxt);text-decoration:none;transition:color var(--t)}
a:hover{color:var(--ouroTxt2);text-decoration:underline}
/* Auditoria de 07/09 (comparação com XP/Suno): Georgia em h1/h2 lia como material institucional/jurídico,
   não como o tom de "análise que filtra oportunidade" do resto do texto. Aprovado pelo Mário 07/09: h1/h2
   passam pra sem-serifa em peso pesado; h3 e .marca (ver .marca abaixo) continuam em Georgia como
   assinatura de marca. */
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:.2px;line-height:var(--lh-titulo)}
h1,h2{font-family:var(--sans);font-weight:800;letter-spacing:-.2px}
h1{font-size:var(--f-3xl);margin:0 0 var(--e4)}
h2{font-size:var(--f-2xl);margin:0 0 var(--e3)}
h3{font-size:var(--f-lg);margin:0 0 var(--e2)}
p{margin:0 0 var(--e4)}
.miolo{max-width:var(--largura);margin:0 auto;padding:0 var(--e5)}
.muted{color:var(--muted)}
.pequeno{font-size:var(--f-sm)}
.olho{font-size:var(--f-xs);letter-spacing:1.4px;text-transform:uppercase;color:var(--ouroTxt);font-weight:700;margin:0 0 var(--e3)}
.escuro .olho{color:var(--ouro)}
.pular{position:absolute;left:-9999px;top:auto}
.pular:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99;border-radius:8px}

/* ── cabeçalho ──────────────────────────────────────────────────────────── */
.topo{background:var(--grafite);color:#F2EEE4;position:sticky;top:0;z-index:50;
  box-shadow:inset 0 -1px 0 rgba(201,162,39,.45)}
.topo .miolo{display:flex;align-items:center;gap:18px;min-height:66px}
.marca{display:flex;align-items:center;gap:10px;color:#F2EEE4;font-family:var(--serif);font-size:19px;
  letter-spacing:.6px;white-space:nowrap}
.marca:hover{text-decoration:none;color:#fff}
.marca img{height:40px;width:40px;border-radius:8px;object-fit:cover}
.marca b{color:var(--ouro);font-weight:400}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{color:#CFC9BB;font-size:14.5px;font-weight:600;padding:10px 11px;border-radius:8px;
  position:relative;transition:color var(--t),background-color var(--t)}
.nav a:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.05)}
.nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:5px;height:2px;background:var(--ouro);
  transform:scaleX(0);transform-origin:left;transition:transform var(--t)}
.nav a:hover::after,.nav a.on::after{transform:scaleX(1)}
.nav a.on{color:var(--ouro)}
.nav .botao{margin-left:8px}
.nav .botao::after{display:none}
.menu-btn{display:none;margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.25);
  color:#F2EEE4;border-radius:8px;padding:8px 10px;font:inherit;font-size:14px;cursor:pointer}
@media (max-width:900px){
  .menu-btn{display:inline-flex;align-items:center;gap:8px}
  .nav{display:none;position:absolute;left:0;right:0;top:66px;background:var(--grafite2);
    flex-direction:column;align-items:stretch;padding:8px 12px 14px;gap:0;
    border-bottom:1px solid rgba(201,162,39,.35)}
  .nav.aberto{display:flex;animation:desce .2s ease both}
  .nav a{padding:12px 10px;border-radius:8px}
  .nav a::after{display:none}
  .nav .botao{margin:8px 0 0;text-align:center}
}
@keyframes desce{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ── botões ─────────────────────────────────────────────────────────────── */
.botao{display:inline-block;background:var(--ouro);color:#241F14!important;font-weight:700;border:0;
  border-radius:10px;padding:12px 20px;font:inherit;font-size:15px;cursor:pointer;
  transition:background-color var(--t),transform var(--t),box-shadow var(--t)}
.botao:hover{background:#B8931F;text-decoration:none;transform:translateY(-1px);box-shadow:var(--sombra-ouro)}
.botao.claro{background:transparent;color:#F2EEE4!important;border:1px solid rgba(255,255,255,.35)}
.botao.claro:hover{background:rgba(255,255,255,.08);box-shadow:none}
/* achado da auditoria de 07/09: fundo do discreto (--elev) quase igual ao fundo da seção (--bg),
   o botão ficava sem contorno visível — "Veja o método, etapa por etapa" parecia texto solto, não link. */
.botao.discreto{background:var(--elev);color:var(--txt)!important;border:1px solid var(--line)}
.botao.discreto:hover{background:#E6E3DA;box-shadow:none}

/* ── seções ─────────────────────────────────────────────────────────────── */
.secao{padding:var(--e16) 0}
.secao.compacta{padding:var(--e10) 0}
.secao.escuro{background:var(--grafite);color:#E9E5DA}
.secao.escuro h1,.secao.escuro h2,.secao.escuro h3{color:#fff}
.secao.escuro .muted{color:#B9B3A6}
.secao.escuro a:not(.botao){color:var(--ouro)}
.secao.elev{background:var(--elev)}
.cabeca{max-width:720px;margin:0 0 var(--e8)}
.cabeca p{color:var(--muted);font-size:var(--f-md)}
.escuro .cabeca p{color:#B9B3A6}

/* hero */
.hero{background:linear-gradient(160deg,var(--grafite) 0%,var(--grafite2) 60%,#232A36 100%);color:#E9E5DA;
  padding:var(--e20) 0 var(--e16);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:auto -20% -40% auto;width:60vw;height:60vw;max-width:720px;max-height:720px;
  border-radius:50%;background:radial-gradient(closest-side,rgba(201,162,39,.16),rgba(201,162,39,0));pointer-events:none}
.hero .miolo{position:relative}
.hero h1{color:#fff;max-width:760px}
.hero p.lead{font-size:clamp(17px,2.2vw,20px);color:#CFC9BB;max-width:640px;margin:0 0 var(--e6)}
.hero .acoes{display:flex;gap:var(--e3);flex-wrap:wrap}
.hero .nota{margin-top:var(--e6);font-size:var(--f-sm);color:#8F8A7E}
.hero .dupla img{border-radius:var(--raio);box-shadow:var(--sombra)}

/* grades e cartões */
.grade{display:grid;gap:var(--e4);grid-template-columns:1fr}
@media (min-width:760px){.grade.c2{grid-template-columns:1fr 1fr}.grade.c3{grid-template-columns:repeat(3,1fr)}.grade.c4{grid-template-columns:repeat(4,1fr)}}
@media (min-width:760px) and (max-width:1000px){.grade.c4{grid-template-columns:repeat(2,1fr)}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--raio);padding:var(--e6);
  transition:transform var(--t),box-shadow var(--t),border-color var(--t)}
.card:hover{transform:translateY(-2px);box-shadow:var(--sombra);border-color:#D6D3C8}
.card .icone{width:42px;height:42px;border-radius:var(--raio-sm);background:var(--ouroSoft);color:var(--ouroTxt);
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:var(--f-lg);margin:0 0 var(--e4)}
.card p:last-child{margin-bottom:0}
.escuro .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);color:#E9E5DA}
.escuro .card:hover{border-color:rgba(201,162,39,.5);box-shadow:none}

/* etapas (como funciona) */
.etapas{counter-reset:etapa;display:grid;gap:0;position:relative}
.etapa{display:grid;grid-template-columns:52px 1fr;gap:var(--e4);padding:var(--e6) 0;border-top:1px solid var(--line)}
.etapa:first-child{border-top:0}
.etapa .num{counter-increment:etapa;width:44px;height:44px;border-radius:50%;background:var(--grafite);color:var(--ouro);
  font-family:var(--serif);font-size:19px;display:flex;align-items:center;justify-content:center}
.etapa .num::before{content:counter(etapa)}
.etapa h3{margin-top:8px}
.etapa .entrega{margin-top:var(--e2);padding:var(--e3) var(--e4);border-left:3px solid var(--ouro);background:var(--ouroSoft);
  border-radius:var(--raio-sm);font-size:var(--f-sm)}

/* card-exemplo do Radar (ilustrativo) */
.exemplo{background:var(--card);border:1px solid var(--line);border-radius:var(--raio);overflow:hidden;max-width:460px;
  box-shadow:var(--sombra)}
.exemplo .foto{height:150px;background:linear-gradient(135deg,#DDD9CE,#C9C4B5);display:flex;align-items:center;justify-content:center;
  color:#6B685F;font-size:13px;overflow:hidden}
.exemplo .foto img{width:100%;height:100%;object-fit:cover}
.exemplo .corpo{padding:16px}
.exemplo h3{font-size:18px}
/* Bug achado em 20/09: o .exemplo é sempre um card CLARO (mockup do Radar), mas dentro do
   index.html ele vive numa <section class="secao escuro"> — e a regra ".secao.escuro h3{color:#fff}"
   (acima) pintava o título branco sobre o fundo quase-branco do próprio card, ilegível. Em
   radar.html a mesma marcação funciona porque a seção lá não é escura. Especificidade maior
   (3 classes) para vencer a regra do tema escuro sem mexer nela. */
.secao.escuro .exemplo h3{color:var(--txt)}
.selo{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px;white-space:nowrap;
  font-family:var(--sans)}
.selo.ouro{background:var(--ouro);color:#241F14}.selo.info{background:var(--infobg);color:var(--info)}
.selo.warn{background:var(--warnbg);color:var(--warn)}.selo.calmo{background:var(--elev);color:var(--muted)}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 0}
.kpi{background:var(--elev);border-radius:10px;padding:9px 10px}
.kpi .r{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.kpi .v{font-size:16px;font-weight:700;margin-top:2px}
.kpi .v.pos{color:var(--pos)}
.trava{margin:12px 0 0;border:1px dashed var(--line);border-radius:10px;padding:9px 12px;font-size:13px;color:var(--muted);background:#FAF9F6}
.ilustrativo{font-size:12px;color:var(--muted2);text-align:center;margin:8px 0 0}

/* dupla texto + figura */
.dupla{display:grid;gap:var(--e8);align-items:center;grid-template-columns:1fr}
@media (min-width:860px){.dupla{grid-template-columns:1.1fr .9fr}}

/* lista com marcador ouro */
.lista{list-style:none;padding:0;margin:0 0 14px}
.lista li{position:relative;padding:6px 0 6px 26px}
.lista li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:10px;border-radius:50%;background:var(--ouro)}

/* cidades */
.cidades .card{display:flex;gap:14px;align-items:flex-start}
.cidades .uf{flex:0 0 auto;font-family:var(--serif);font-size:13px;letter-spacing:1px;color:var(--ouroTxt);
  background:var(--ouroSoft);border-radius:8px;padding:6px 8px;margin-top:2px}

/* pessoas (quem somos) */
.pessoa{text-align:left}
.pessoa .avatar{width:64px;height:64px;border-radius:50%;background:var(--grafite);color:var(--ouro);font-family:var(--serif);
  font-size:24px;display:flex;align-items:center;justify-content:center;margin:0 0 12px;overflow:hidden}
.pessoa .avatar img{width:100%;height:100%;object-fit:cover}
.pessoa .papel{font-size:13.5px;color:var(--muted);margin:0 0 8px}

/* mídia: vídeos, fotos, depoimentos (alimentados por site/dados/*.json) */
.videos{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:760px){.videos{grid-template-columns:1fr 1fr}}
.video{position:relative;padding-top:56.25%;border-radius:var(--raio);overflow:hidden;background:#000;border:1px solid var(--line)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fotos{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.fotos{grid-template-columns:repeat(4,1fr)}}
.fotos figure{margin:0;border-radius:12px;overflow:hidden;background:var(--elev);border:1px solid var(--line)}
.fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.fotos figure:hover img{transform:scale(1.03)}
.fotos figcaption{font-size:12.5px;color:var(--muted);padding:6px 8px}
.depoimento{position:relative;padding-top:30px}
.depoimento::before{content:"\201C";position:absolute;left:18px;top:8px;font-family:var(--serif);font-size:54px;line-height:1;color:var(--ouro);opacity:.7}
.depoimento blockquote{margin:0 0 12px;font-family:var(--serif);font-size:17px;line-height:1.5}
.depoimento cite{font-style:normal;font-size:13.5px;color:var(--muted)}
.vazio{border:1px dashed var(--line);border-radius:var(--raio);padding:22px;color:var(--muted);text-align:center;background:var(--card)}

/* matérias */
.materia{display:block;color:inherit}
.materia:hover{text-decoration:none;color:inherit}
.materia .data{font-size:12.5px;color:var(--muted2);margin:0 0 6px}
.materia .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* formulário de contato */
.form{display:grid;gap:var(--e4);grid-template-columns:1fr}
@media (min-width:640px){.form{grid-template-columns:1fr 1fr}.form .largo{grid-column:1/-1}}
label.campo{display:block}
label.campo span{display:block;font-size:13.5px;color:var(--muted);font-weight:600;margin:0 0 5px}
input,select,textarea{width:100%;background:#fff;color:var(--txt);border:1px solid var(--line);border-radius:10px;
  padding:12px 12px;font:inherit;font-size:16px;transition:border-color var(--t),box-shadow var(--t)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ouro);box-shadow:0 0 0 3px var(--ouroSoft)}
textarea{min-height:130px;resize:vertical}
.form .acoes{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.form .nota{grid-column:1/-1;font-size:13px;color:var(--muted2)}

/* avisos legais */
.avisos ol{padding-left:22px}
.avisos li{margin:0 0 10px}
.banda{background:var(--ouroSoft);border-left:4px solid var(--ouro);border-radius:var(--raio-sm);padding:var(--e4) var(--e5);font-family:var(--serif);font-size:var(--f-md)}

/* chamada final */
.cta{background:var(--grafite);color:#E9E5DA;border-radius:var(--raio);padding:var(--e8) var(--e8);display:flex;gap:var(--e5);align-items:center;
  justify-content:space-between;flex-wrap:wrap}
.cta h2{color:#fff;margin:0 0 6px}
.cta p{margin:0;color:#B9B3A6}

/* rodapé */
.rodape{background:var(--grafite);color:#8F8A7E;font-size:var(--f-sm);line-height:1.7;padding:var(--e8) 0 var(--e6);margin-top:var(--e10)}
.rodape .miolo{display:grid;gap:var(--e5);grid-template-columns:1fr}
@media (min-width:760px){.rodape .miolo{grid-template-columns:1.4fr 1fr 1fr}}
.rodape .marca{font-size:17px}
.rodape a{color:#CFC9BB}
.rodape a:hover{color:var(--ouro)}
.rodape .titulo{color:#CFC9BB;font-weight:700;margin:0 0 6px;font-size:13px;letter-spacing:.8px;text-transform:uppercase}
.rodape ul{list-style:none;padding:0;margin:0}
.rodape .fim{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.08);padding-top:14px;font-size:12.5px;color:#6E6A60}

/* ── passadas 3 e 4 (polimento e UX, 07/09/2026) ─────────────────────────── */
/* espaçamento de bloco solto (botão depois de grade, banda depois de lista) */
.esp{margin-top:var(--e6)}
.esp-g{margin-top:var(--e10)}
/* largura de leitura: corpo de matéria e páginas só-texto */
.miolo.estreito{max-width:760px}
/* confirmação do formulário (site.js mostra depois do envio) */
.enviado{grid-column:1/-1;margin:0;background:var(--posbg);color:var(--pos);border-left:4px solid var(--pos);
  border-radius:var(--raio-sm);padding:var(--e3) var(--e4);font-size:var(--f-sm)}
/* erro do envio do formulário (20/09/2026, /leads real em vez de mailto:) */
.erro-envio{grid-column:1/-1;margin:0;background:var(--negbg);color:var(--neg);border-left:4px solid var(--neg);
  border-radius:var(--raio-sm);padding:var(--e3) var(--e4);font-size:var(--f-sm)}
/* honeypot do formulário de contato: fora da tela, mas ainda "visível" pra
   quem lê o HTML cru (robô) — display:none é o primeiro truque que um
   coletor de formulário já pula de propósito. */
.isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* seções alimentadas por JSON só aparecem quando o site.js confirma que há
   conteúdo (.tem) — sem isto o título "Vídeos" piscava e sumia no carregamento */
[data-secao]:not(.tem){display:none}
/* teclado: foco visível, sem depender do anel padrão de cada navegador */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid rgba(201,162,39,.55);outline-offset:2px}
.botao:active{transform:translateY(0);box-shadow:none}
/* link do texto corrido sublinhado de leve, para não depender só da cor */
main p a:not(.botao){text-decoration:underline;text-decoration-color:rgba(138,106,5,.35);text-underline-offset:3px}
main p a:not(.botao):hover{text-decoration-color:currentColor}

/* ── aparecer ao rolar (site.js acrescenta .visivel) ─────────────────────── */
.revela{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.revela.visivel{opacity:1;transform:none}
.revela.atraso1{transition-delay:.08s}.revela.atraso2{transition-delay:.16s}.revela.atraso3{transition-delay:.24s}
/* sem JS, tudo aparece — o site nunca depende de script para ser lido */
.no-js .revela{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .revela{opacity:1;transform:none}
  .card:hover,.botao:hover,.fotos figure:hover img{transform:none}
}