/* ============================================================
   Teraply — Central de Ajuda
   Folha compartilhada por todos os artigos. Altere aqui e
   o visual muda em todas as páginas.
   ============================================================ */

:root{
  --blue:#1A3A6B;
  --blue-mid:#256D9E;
  --blue-light:#EEF6FC;
  --green:#287F51;
  --green-mid:#4AAF78;
  --green-light:#EAF8EF;
  --graphite:#1A2740;
  --gray:#5F6B73;
  --gray-light:#F4F7F5;
  --amber:#E09A25;
  --amber-light:#FBF3E4;
  --border:#E3E9EE;
  --white:#FFFFFF;
  --radius:14px;
  --shadow:0 2px 12px rgba(26,39,64,.06);
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--graphite);
  background:var(--white);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--blue-mid);text-decoration:none}
a:hover{text-decoration:underline}

/* ── Cabeçalho ─────────────────────────────────────── */
.ah{
  background:var(--white);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:50;
}
.ah-in{
  max-width:1080px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.ah-logo{
  font-family:'Sora',sans-serif;font-weight:800;font-size:1.3rem;
  color:var(--blue-mid);letter-spacing:-.5px;
}
.ah-logo span{color:var(--gray);font-weight:400;font-size:.85rem;margin-left:8px}
.ah-nav{display:flex;gap:18px;align-items:center;font-size:.9rem}
.ah-btn{
  background:var(--green);color:var(--white);padding:9px 18px;
  border-radius:10px;font-weight:700;font-size:.88rem;
}
.ah-btn:hover{background:#206641;text-decoration:none}
@media(max-width:640px){
  .ah-nav a:not(.ah-btn){display:none}
  .ah-logo span{display:none}
}

/* ── Faixa de topo ─────────────────────────────────── */
.hero{
  background:linear-gradient(160deg,var(--blue-light) 0%,var(--white) 100%);
  padding:52px 20px 44px;text-align:center;
  border-bottom:1px solid var(--border);
}
.hero h1{
  font-family:'Sora',sans-serif;font-size:2.1rem;font-weight:800;
  color:var(--graphite);margin-bottom:10px;letter-spacing:-.6px;
}
.hero p{color:var(--gray);font-size:1.02rem;max-width:560px;margin:0 auto}
@media(max-width:640px){.hero h1{font-size:1.6rem}.hero{padding:38px 18px 32px}}

/* ── Busca ─────────────────────────────────────────── */
.busca{max-width:520px;margin:26px auto 0;position:relative}
.busca input{
  width:100%;padding:14px 16px 14px 46px;font-size:1rem;
  font-family:inherit;color:var(--graphite);
  border:2px solid var(--border);border-radius:12px;background:var(--white);
  transition:border-color .15s;
}
.busca input:focus{outline:none;border-color:var(--blue-mid)}
.busca svg{
  position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;fill:none;stroke:var(--gray);stroke-width:2;
}

/* ── Conteúdo ──────────────────────────────────────── */
.wrap{max-width:1080px;margin:0 auto;padding:44px 20px 72px}
.wrap-artigo{max-width:760px}

/* ── Categorias (índice) ───────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:26px}
.cat{
  background:var(--white);border:1px solid var(--border);
  border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);
}
.cat h2{
  font-family:'Sora',sans-serif;font-size:1.05rem;font-weight:700;
  color:var(--blue-mid);margin-bottom:4px;display:flex;align-items:center;gap:9px;
}
.cat h2 svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.cat-sub{font-size:.84rem;color:var(--gray);margin-bottom:14px}
.cat ul{list-style:none}
.cat li{border-top:1px solid var(--border)}
.cat li a{
  display:block;padding:11px 0;font-size:.94rem;color:var(--graphite);
  transition:color .15s;
}
.cat li a:hover{color:var(--blue-mid);text-decoration:none}
.cat li a::after{content:' →';color:var(--gray);opacity:0;transition:opacity .15s}
.cat li a:hover::after{opacity:1}

.vazio{
  display:none;text-align:center;padding:40px 20px;color:var(--gray);
  background:var(--gray-light);border-radius:var(--radius);
}

/* ── Artigo ────────────────────────────────────────── */
.trilha{font-size:.84rem;color:var(--gray);margin-bottom:18px}
.trilha a{color:var(--gray)}
.trilha a:hover{color:var(--blue-mid)}

.artigo h1{
  font-family:'Sora',sans-serif;font-size:1.85rem;font-weight:800;
  color:var(--graphite);line-height:1.25;margin-bottom:12px;letter-spacing:-.5px;
}
.chamada{font-size:1.06rem;color:var(--gray);margin-bottom:30px;line-height:1.6}
.artigo h2{
  font-family:'Sora',sans-serif;font-size:1.25rem;font-weight:700;
  color:var(--blue-mid);margin:34px 0 12px;
}
.artigo h3{
  font-family:'Sora',sans-serif;font-size:1.03rem;font-weight:700;
  color:var(--graphite);margin:24px 0 8px;
}
.artigo p{margin-bottom:14px}
.artigo ul,.artigo ol{margin:0 0 16px 22px}
.artigo li{margin-bottom:7px}
.artigo strong{color:var(--graphite);font-weight:700}
@media(max-width:640px){.artigo h1{font-size:1.45rem}}

/* ── Passos numerados ──────────────────────────────── */
.passos{list-style:none;margin:20px 0 24px;counter-reset:p}
.passos li{
  counter-increment:p;position:relative;padding:0 0 20px 46px;
  border-left:2px solid var(--border);margin-left:14px;
}
.passos li:last-child{border-left-color:transparent;padding-bottom:0}
.passos li::before{
  content:counter(p);position:absolute;left:-15px;top:-2px;
  width:28px;height:28px;border-radius:50%;
  background:var(--blue-mid);color:var(--white);
  font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
}
.passos strong{display:block;margin-bottom:2px}

/* ── Caixas de destaque ────────────────────────────── */
.box{border-radius:12px;padding:16px 18px;margin:22px 0;font-size:.95rem}
.box p:last-child{margin-bottom:0}
.box-titulo{font-weight:700;margin-bottom:5px;display:flex;align-items:center;gap:7px}
.box-titulo svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dica{background:var(--green-light);border:1px solid #C9E7D6}
.dica .box-titulo{color:var(--green)}
.atencao{background:var(--amber-light);border:1px solid #F0DBAF}
.atencao .box-titulo{color:#9A6B10}
.nota{background:var(--blue-light);border:1px solid #CBE2F2}
.nota .box-titulo{color:var(--blue-mid)}

/* ── Imagem / captura de tela ──────────────────────── */
.tela{margin:22px 0}
.tela img{
  width:100%;border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--shadow);display:block;
}
.tela figcaption{font-size:.83rem;color:var(--gray);margin-top:8px;text-align:center}
.tela-vazia{
  border:2px dashed var(--border);border-radius:12px;
  padding:38px 20px;text-align:center;color:var(--gray);
  background:var(--gray-light);font-size:.88rem;
}

/* ── Fim do artigo ─────────────────────────────────── */
.proximo{
  margin-top:40px;padding-top:26px;border-top:1px solid var(--border);
}
.proximo-rot{font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--gray);font-weight:700;margin-bottom:10px}
.proximo a{
  display:block;padding:15px 18px;background:var(--gray-light);
  border-radius:12px;font-weight:700;color:var(--graphite);
  transition:background .15s;
}
.proximo a:hover{background:var(--blue-light);text-decoration:none}
.proximo a span{display:block;font-weight:400;font-size:.88rem;color:var(--gray);margin-top:2px}

.ajudou{
  margin-top:34px;padding:20px;background:var(--gray-light);
  border-radius:12px;text-align:center;font-size:.92rem;color:var(--gray);
}
.ajudou a{font-weight:700}

/* ── Rodapé ────────────────────────────────────────── */
.af{
  background:var(--graphite);color:rgba(255,255,255,.62);
  padding:34px 20px;margin-top:60px;font-size:.88rem;
}
.af-in{max-width:1080px;margin:0 auto;display:flex;
  justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center}
.af a{color:rgba(255,255,255,.85)}

/* Screenshot de celular (vertical): limita largura para não estourar no desktop */
.tela-mobile{display:flex;flex-direction:column;align-items:center}
.tela-mobile img{max-width:300px;width:100%;height:auto}