/* ==========================================================================
   SMART PARANÁ — páginas institucionais (políticas)
   Reutiliza os tokens e o sistema da landing (style.css); este arquivo só
   cobre o que é próprio das páginas: o cabeçalho de página e a tipografia
   do texto legal.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CABEÇALHO DE PÁGINA
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;
  isolation:isolate;
  padding:calc(var(--hdr-h) + 88px) 0 72px;
  background:var(--dark);
  background-image:
    radial-gradient(720px 320px at 84% 8%, rgba(255,128,21,.16), transparent 62%),
    radial-gradient(540px 300px at 4% 100%, rgba(255,128,21,.10), transparent 60%);
  color:var(--on-dark-2);
  overflow:hidden;
}
.page-hero__kicker{ color:var(--ember-lit); }

.page-hero__ttl{
  margin:-.1em -.04em -.14em;
  padding:.2em .04em .14em;
  font-family:var(--f-display);
  font-weight:800;
  font-size:clamp(2.3rem, 4.6vw, 3.4rem);
  line-height:1.04;
  letter-spacing:-.02em;
  text-transform:uppercase;
  background:linear-gradient(180deg,#FFA340 0%,#FF6700 92%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.page-hero__meta{
  margin-top:20px;
  font-family:var(--f-mono);
  font-size:.74rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--on-dark-2);
  opacity:.75;
}

/* --------------------------------------------------------------------------
   2. CONTEÚDO — tipografia do texto legal
   -------------------------------------------------------------------------- */
.page{ padding:72px 0 100px; background:var(--bg); }
.page__body{ max-width:820px; margin-inline:auto; }

.page__back{
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:30px;
  font-family:var(--f-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ember-hot);
  transition:color .2s var(--ease);
}
.page__back svg{ width:15px; height:15px; flex:none; transition:transform .2s var(--ease); }
.page__back:hover{ color:var(--ember-hot); }
.page__back:hover svg{ transform:translateX(-3px); }

.prose{ font-size:1rem; line-height:1.75; color:var(--ink-2); }
.prose > * + *{ margin-top:1.1em; }

.prose h2, .prose h3{ color:var(--ink); }
.prose h2{
  font-family:var(--f-display);
  font-weight:800;
  font-size:1.6rem;
  line-height:1.15;
  letter-spacing:-.01em;
  margin-top:2.2em;
  padding-top:16px;
  border-top:1px solid var(--hair);
}
.prose h3{
  font-family:var(--f-display);
  font-weight:700;
  font-size:1.14rem;
  margin-top:1.8em;
}
.prose p{ max-width:68ch; }
.prose strong, .prose b{ color:var(--ink); }
.prose a{
  color:var(--ember-hot);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--ember-line);
  text-underline-offset:3px;
}
.prose a:hover{ text-decoration-color:var(--ember-hot); }

.prose ul, .prose ol{
  padding-left:4px;
  display:grid; gap:9px;
  max-width:68ch;
}
.prose ul li{ position:relative; padding-left:24px; }
.prose ul li::before{
  content:""; position:absolute; left:4px; top:.72em;
  width:8px; height:8px; border-radius:50%;
  background:linear-gradient(180deg,#FF8C16 0%,#FF6700 100%);
}
.prose ol{ counter-reset:item; }
.prose ol li{ position:relative; padding-left:32px; counter-increment:item; }
.prose ol li::before{
  content:counter(item, decimal-leading-zero);
  position:absolute; left:0; top:.06em;
  font-family:var(--f-mono); font-size:.78rem; font-weight:600;
  color:var(--ember);
}

.prose table{
  width:100%; border-collapse:collapse;
  font-size:.92rem; line-height:1.55;
}
.prose th, .prose td{
  text-align:left; vertical-align:top;
  padding:12px 14px;
  border:1px solid var(--hair);
}
.prose th{
  background:var(--bg-alt);
  font-family:var(--f-display); font-weight:700; color:var(--ink);
}

/* --------------------------------------------------------------------------
   3. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width:767px){
  .page-hero{ padding:calc(var(--hdr-h) + 54px) 0 52px; }
  .page{ padding:48px 0 72px; }
  .prose{ font-size:.97rem; }
  .prose h2{ font-size:1.35rem; }
  .prose th, .prose td{ padding:10px; }
}