/* ============================================================
   Paginas de assunto (/<assunto>-ribeirao-preto/).
   Complementa styles.css; carrega so nessas paginas.
   Gerado junto com as paginas por ferramentas/paginas_kali.py.
   ============================================================ */

.pg-hero{ padding-block:clamp(48px,7vw,96px) clamp(56px,8vw,104px); border-bottom:1px solid var(--border); }
.pg-hero h1{ font-size:var(--fs-900, clamp(2.4rem,6vw,4.2rem)); max-width:18ch; margin:0 0 var(--s-5); line-height:1.05; }
.pg-hero__lead{ color:var(--fg-2); font-size:var(--fs-500); max-width:58ch; margin:0 0 var(--s-7); }
.pg-hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s-3); }

.crumbs{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin:0 0 var(--s-6); font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:var(--tr-mono); text-transform:uppercase; color:var(--fg-3); }
.crumbs a{ color:var(--accent); }
.crumbs a:hover{ color:var(--fg); }

.pg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); }
.pg-grid > div{ background:var(--bg); padding:var(--s-6); }
.pg-grid h3{ font-size:var(--fs-600, 22px); margin:0 0 var(--s-3); }
.pg-grid p{ margin:0; color:var(--fg-2); }
.pg-grid .k{ display:block; font-family:var(--font-mono); font-size:var(--fs-100); letter-spacing:var(--tr-mono); color:var(--accent); margin-bottom:var(--s-4); text-transform:uppercase; }

.pg-text{ display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,6vw,96px); align-items:start; }
.pg-text + .pg-text{ margin-top:var(--s-10); padding-top:var(--s-8); border-top:1px solid var(--border); }
.pg-text h2{ font-size:var(--fs-700, 30px); max-width:16ch; }
.pg-text p{ color:var(--fg-2); max-width:62ch; }

.pg-list{ list-style:none; padding:0; margin:var(--s-4) 0 0; display:grid; gap:var(--s-3); }
.pg-list li{ display:flex; gap:var(--s-3); color:var(--fg); }
.pg-list li::before{ content:""; flex:none; width:8px; height:8px; margin-top:.6em; border-radius:50%; background:var(--accent); }

.pg-faq details{ border-bottom:1px solid var(--border); }
.pg-faq details:first-child{ border-top:1px solid var(--border); }
.pg-faq summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:var(--s-4); padding:var(--s-5) 0; font-size:var(--fs-500); color:var(--fg); }
.pg-faq summary::-webkit-details-marker{ display:none; }
.pg-faq summary::after{ content:"+"; flex:none; font-family:var(--font-mono); color:var(--accent); font-size:22px; line-height:1; }
.pg-faq details[open] summary::after{ content:"–"; }
.pg-faq details p{ margin:0 0 var(--s-5); color:var(--fg-2); max-width:70ch; }

.pg-rel{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s-3); }
.pg-rel a{ display:block; padding:var(--s-5); border:1px solid var(--border); border-radius:var(--r-md, 12px); background:var(--surface); transition:border-color .25s, transform .25s; }
.pg-rel a:hover{ border-color:var(--accent); transform:translateY(-2px); }
.pg-rel b{ display:block; font-weight:500; color:var(--fg); margin-bottom:var(--s-1); }
.pg-rel span{ color:var(--fg-3); font-size:var(--fs-300); }

.ft__assuntos{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); padding-block:var(--s-5); border-top:1px solid var(--border); }
.ft__assuntos a{ color:var(--fg-2); font-size:var(--fs-300); }
.ft__assuntos a:hover{ color:var(--fg); }

@media (max-width:900px){
  .pg-text{ grid-template-columns:1fr; gap:var(--s-5); }
}
@media (max-width:560px){
  .pg-hero__cta .btn{ width:100%; }
}