/* ============================================================================
   imob.css — teia SEO de imobiliárias (pilar /imobiliarias + clusters + geo)
   Reusa tokens e classes de home.css (rule, sec, big, kicker, amberblk, hbtn,
   abtn, track/step, reveal). Aqui só o que estas páginas precisam a mais:
   breadcrumb, hero simples, grade de cards, passos do mecanismo, blocos da teia
   (links internos), oferta de fundador e FAQ.
   ========================================================================= */

/* ---------- links em texto corrido ----------
   O reset global é a{color:inherit;text-decoration:none}, então links dentro de
   parágrafo (kicker, hero-sub, teia-sub) sumiriam. Aqui eles se destacam. */
.kicker a,.hero-sub a,.teia-sub a{
  color:var(--acc);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  transition:opacity .18s var(--ease);
}
.kicker a:hover,.hero-sub a:hover,.teia-sub a:hover{opacity:.72}

/* ---------- breadcrumb (Início › Imobiliárias › página) ---------- */
.crumb{
  border-bottom:1px solid var(--line);
  background:var(--base);
}
.crumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  list-style:none;
  margin:0;
  padding:14px 0;
  font-family:var(--mn);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--mut);
}
.crumb li{display:flex;align-items:center;gap:8px}
.crumb li+li::before{content:'›';color:var(--stroke)}
.crumb a{color:var(--mut);text-decoration:none;transition:color .18s var(--ease)}
.crumb a:hover{color:var(--acc)}
.crumb [aria-current]{color:var(--ink)}

/* ---------- hero (canvas da constelação vem do home.js, forma via data-forma) ----------
   O eyebrow já nomeia a página/cidade, então a etiqueta do canto superior
   esquerdo (.m-tl) é redundante — e, com headline alto, o conteúdo centralizado
   sobe e encosta nela. Removo a .m-tl aqui; os cantos direito e inferior ficam. */
.hero .m-tl{display:none}
/* Headline das páginas internas é frase longa (3-4 linhas), não o bordão
   curto da home. Com o tamanho da home (10.5vw) o hero passava da primeira
   dobra em notebook 1366x768. O tamanho agora também respeita a altura da
   tela (vh), pra eyebrow + H1 + sub + CTA caberem na primeira tela. */
.hero h1{font-size:clamp(34px,min(6.2vw,8.6vh),104px);line-height:.95}
.hero-eyebrow{
  display:inline-block;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--acc);
  margin-bottom:18px;
}
.hero-sub{
  margin-top:18px;
  font-size:clamp(15px,1.8vw,19px);
  line-height:1.5;
  color:var(--mut);
  max-width:640px;
}

/* ---------- grade de cards (a dor) ---------- */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:clamp(28px,3.4vw,44px);
}
@media(min-width:640px){.card-grid{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.card-grid.trio{grid-template-columns:repeat(3,1fr)}}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  padding:clamp(20px,2.4vw,28px);
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:border-color .18s var(--ease),background .18s var(--ease);
}
.card:hover{background:var(--surface2);border-color:var(--stroke)}
.card-ico{display:inline-flex;color:var(--acc);margin-bottom:4px}
.card-ico svg{display:block;width:26px;height:26px}
.card:hover .card-ico{color:var(--ink)}
.card h3{
  font-family:var(--dsp);
  font-weight:600;
  font-size:clamp(17px,1.8vw,20px);
  line-height:1.2;
  letter-spacing:-.01em;
  text-transform:uppercase;
}
.card p{font-size:14px;line-height:1.55;color:var(--mut)}

/* ---------- mecanismo: passos numerados ---------- */
.mech{
  display:grid;
  grid-template-columns:1fr;
  gap:2px;
  margin-top:clamp(28px,3.4vw,44px);
  border:1px solid var(--line);
  background:var(--line);
}
@media(min-width:760px){.mech{grid-template-columns:1fr 1fr}}
.mstep{
  background:var(--surface);
  padding:clamp(22px,2.6vw,30px);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mstep-no{
  font-family:var(--mn);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--acc);
}
.mstep h3{
  font-family:var(--dsp);
  font-weight:600;
  font-size:clamp(16px,1.7vw,19px);
  line-height:1.25;
  letter-spacing:-.01em;
}
.mstep p{font-size:14.5px;line-height:1.55;color:var(--mut)}

/* ---------- blocos da teia (links internos) ---------- */
.teia{
  border:1px solid var(--line);
  background:var(--surface);
  padding:clamp(22px,2.8vw,34px);
  margin-top:clamp(28px,3.4vw,44px);
}
.teia h2{font-family:var(--dsp);font-weight:600;font-size:clamp(20px,2.4vw,26px);line-height:1.2;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.teia .teia-sub{color:var(--mut);font-size:15px;line-height:1.5;margin:6px 0 20px;max-width:620px}
/* item "em breve": mesmo card, sem link, apagado e sem hover */
.teia-item.soon{opacity:.72;cursor:default}
.teia-item.soon:hover{border-color:var(--line);transform:none}
.teia-item.soon .ti-name{color:var(--mut)}
.ti-soon{color:var(--stroke);font-size:11px;font-family:var(--mn);text-transform:uppercase;letter-spacing:.08em}
.teia-list{display:grid;grid-template-columns:1fr;gap:14px;list-style:none;margin:0;padding:0}
@media(min-width:820px){.teia-list.trio{grid-template-columns:repeat(3,1fr)}}
.teia-item{
  display:block;
  border:1px solid var(--line);
  background:var(--base);
  padding:18px 20px;
  text-decoration:none;
  transition:border-color .18s var(--ease),transform .18s var(--ease);
}
.teia-item:hover{border-color:var(--acc);transform:translateY(-2px)}
.teia-item .ti-name{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--dsp);font-weight:600;font-size:16px;color:var(--ink);
  letter-spacing:-.01em;
}
.teia-item .ti-name .arr{color:var(--acc)}
.teia-item p{margin-top:8px;font-size:13.5px;line-height:1.5;color:var(--mut)}
.teia-micro{margin-top:18px;font-size:13.5px;line-height:1.55;color:var(--mut)}
/* linha de cidades (pilar) e voltar-ao-sistema (cluster/geo) */
.teia-cities{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:4px}
.teia-cities a{
  font-family:var(--mn);font-size:14px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--stroke);padding-bottom:2px;
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.teia-cities a:hover{color:var(--acc);border-color:var(--acc)}

/* ---------- oferta de fundador (geo) ---------- */
.founder{
  border-left:3px solid var(--acc);
  background:var(--surface);
  padding:clamp(20px,2.4vw,28px) clamp(22px,2.6vw,30px);
  margin-top:clamp(24px,3vw,38px);
}
.founder .fd-eyebrow{
  font-family:var(--mn);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);display:block;margin-bottom:10px;
}
.founder p{font-size:15.5px;line-height:1.6;color:var(--ink)}

/* ---------- FAQ ---------- */
.faq{margin-top:clamp(28px,3.4vw,44px);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:20px 0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--dsp);font-weight:600;font-size:clamp(16px,1.7vw,18px);
  letter-spacing:-.01em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--acc);font-size:22px;line-height:1;flex:none}
.faq details[open] summary::after{content:'–'}
.faq details p{padding:0 0 22px;font-size:15px;line-height:1.6;color:var(--mut);max-width:70ch}

/* ---------- linha de marca (Mozart Consultoria em TI) ---------- */
.brand-line{
  font-family:var(--mn);font-size:12px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--mut);margin:0 0 12px;
}

@media(prefers-reduced-motion:reduce){
  .card,.teia-item{transition:none}
}