/* ============================================================================
   sites.css — estilos exclusivos da landing /sites-que-convertem
   Reusa tokens e classes de home.css (rule, sec, amberblk, hbtn, abtn, ment-list,
   track/step/deliver do processo). Aqui só o que a landing precisa a mais:
   eyebrow do hero, subtítulo do hero e a grade de cards de problema/entregáveis.
   ========================================================================= */

/* ---------- hero da landing (sem constelação/canvas — mais simples que o da home) ---------- */
.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:620px;
}

/* ---------- grade de cards (problema / o que vem no site) ---------- */
.card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin-top:clamp(28px,3.4vw,44px);
}
@media(min-width:620px){
  .card-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:900px){
  .card-grid.feat{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-no{
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--acc);
}
/* cabeçalho do card de problema (01): ícone Lucide à esquerda, número à direita */
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
}
.card-ico{display:inline-flex;color:var(--acc)}
.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);
}

/* ---------- 02 · "escolha a peça" — tablist (reusa .symptom/.diagpanel/.dp-* de home.css) ----------
   As classes de item são globais em home.css; só o grid de duas colunas era
   escopado por id lá, então replico aqui pro meu id.
   Aqui os 6 painéis são estáticos no HTML: a coluna 2 (.pecas-panels) empilha
   todos, mostra o ativo e esconde o resto com [hidden]. O JS só troca qual. */
#o-que-inclui .diag{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.1fr);
  gap:clamp(14px,2vw,26px);
  margin-top:clamp(28px,3.4vw,44px);
  align-items:start;
}
#o-que-inclui .pecas-panels{position:sticky;top:80px}
/* .diagpanel de home.css é sticky por conta própria; aqui quem gruda é o
   container, então cada painel volta a ser estático dentro dele. */
#o-que-inclui .diagpanel{position:static;top:auto}
/* .diagpanel tem display:flex, que vence o [hidden] padrão do browser —
   por isso o hidden precisa ser explícito aqui. */
#o-que-inclui .diagpanel[hidden]{display:none}
@media(max-width:880px){
  #o-que-inclui .diag{grid-template-columns:1fr}
  #o-que-inclui .pecas-panels{position:static}
  #o-que-inclui .diagpanel{min-height:0;scroll-margin-top:72px}
  #o-que-inclui .sy-arrow{display:none}
}

/* box "o que muda na campanha" — âmbar dentro do painel (une escuro + âmbar
   no próprio componente, no lugar da antiga seção âmbar separada) */
.dp-result.dp-result-amber{background:var(--acc);border-color:var(--acc)}
.dp-result.dp-result-amber .rl{color:var(--accink)}
.dp-result.dp-result-amber p{color:var(--accink);opacity:.9}

/* ---------- responsivo: telas pequenas ---------- */
@media(max-width:480px){
  .hero-eyebrow{font-size:10px;letter-spacing:.14em}
  .card{padding:18px}
}

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

/* ---------- rodapé: mapa do site + cidades atendidas ---------- */
.footsitemap{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:0 clamp(18px,4vw,48px) 24px;
  font-size:11px;
  color:var(--im);
  letter-spacing:.02em;
}
.footsitemap-brand{color:var(--im)}
.footsitemap nav{display:flex;flex-wrap:wrap;gap:6px 16px}
.footsitemap nav a,.footsitemap-cities a{color:var(--im);transition:color .18s}
.footsitemap nav a:hover,.footsitemap-cities a:hover{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.footsitemap-cities{margin:0}

/* Mesmo tamanho de H1 das páginas internas (imob.css): headline longa, e o
   tamanho da home empurrava sub e CTA pra baixo da primeira dobra. */
.hero h1{font-size:clamp(34px,min(6.2vw,8.6vh),104px);line-height:.95}