/* =====================================================================
   Sorria Passos — páginas internas (tratamentos, blog, institucionais)
   Complementa styles.css + home.css. Reaproveita nav/menu/footer/sticky,
   .section, .wrap, .eyebrow, .ac, .faq, .final, .jsteps, .sec-light.
   ===================================================================== */

/* ---------- Hero compacto de página interna ---------- */
.phero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:58svh; display:flex; flex-direction:column; justify-content:flex-end;
  padding:120px 20px 40px;
}
.phero .bg{position:absolute; inset:0; z-index:-2; background:#0A0A0A center/cover no-repeat}
.phero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, transparent 32%, rgba(10,10,10,.4) 56%, rgba(10,10,10,.97) 100%);
}
.phero .wrap{padding-inline:0; width:100%}
.phero .crumb{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.66); margin:0 0 14px}
.phero .crumb a{color:rgba(255,255,255,.66); text-decoration:none}
.phero .crumb a:hover{color:var(--brand-2)}
.phero h1{
  font-family:var(--font-dp); text-transform:uppercase; color:#fff; font-weight:400;
  font-size:clamp(2.4rem,9vw,4.6rem); line-height:.96; letter-spacing:.01em; margin:0 0 16px; max-width:16ch;
}
.phero h1 em{font-family:var(--font-ac); font-style:italic; text-transform:none; color:var(--brand-2); font-size:1.02em}
.phero .psub{color:rgba(255,255,255,.85); font-size:1.04rem; line-height:1.55; margin:0 0 24px; max-width:48ch}
.phero .ed-cta{display:flex; flex-wrap:wrap; gap:12px}
@media (min-width:860px){ .phero{min-height:54svh; padding:0 clamp(40px,7vw,96px) 0; justify-content:center} .phero{min-height:56svh} }

/* Hero textual (institucionais / blog index) — sem imagem */
.phero--plain{min-height:auto; padding:132px 20px 10px; background:var(--bg)}
.phero--plain::after{display:none}
.phero--plain .bg{display:none}
.phero--plain h1{color:var(--ink)}
.phero--plain .crumb{color:var(--muted)}
.phero--plain .crumb a{color:var(--muted)}
.phero--plain .psub{color:var(--body)}
@media (min-width:860px){ .phero--plain{padding-top:150px; justify-content:flex-end} }

/* ---------- Prosa (texto corrido legível) ---------- */
.prose{max-width:70ch; margin-inline:auto}
.prose > *:first-child{margin-top:0}
.prose p{font-size:1.06rem; line-height:1.68; margin:0 0 18px; color:var(--body)}
.prose h2{font-family:var(--font); text-transform:none; letter-spacing:-.015em; font-weight:800; font-size:clamp(1.5rem,4vw,2rem); line-height:1.2; color:var(--ink); margin:40px 0 14px}
.prose h3{font-size:1.18rem; margin:28px 0 8px; color:var(--ink)}
.prose ul,.prose ol{margin:0 0 18px; padding-left:22px}
.prose li{font-size:1.04rem; line-height:1.6; margin:0 0 8px; color:var(--body)}
.prose strong{color:var(--head)}
.prose a{color:var(--brand-2); text-decoration:underline; text-underline-offset:3px}
.sec-light .prose p,.sec-light .prose li{color:#4b463d}
.sec-light .prose strong,.sec-light .prose h2,.sec-light .prose h3{color:var(--ink-dark)}

/* Bloco de intro (lead) */
.lead{font-size:clamp(1.15rem,2.6vw,1.4rem); line-height:1.5; color:var(--head); max-width:60ch; margin:0 auto 8px; font-family:var(--font-ac); font-style:italic}
.sec-light .lead{color:var(--ink-dark)}

/* ---------- Nota clínica / aviso ético ---------- */
.clin-note{
  max-width:70ch; margin:26px auto 0; padding:16px 20px; border-left:3px solid var(--brand);
  background:var(--card); border-radius:0 12px 12px 0; font-size:.92rem; color:var(--muted); line-height:1.55;
}
.sec-light .clin-note{background:#fff; color:#6a6256; box-shadow:0 8px 24px rgba(20,18,16,.05)}

/* ---------- Cards relacionados (outros tratamentos / posts) ---------- */
.rel-grid{display:grid; gap:12px; grid-template-columns:1fr; margin-top:var(--s-4)}
@media (min-width:640px){ .rel-grid{grid-template-columns:1fr 1fr} }
@media (min-width:980px){ .rel-grid{grid-template-columns:repeat(3,1fr)} }
.rel{
  display:flex; flex-direction:column; gap:7px; text-decoration:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 20px; transition:border-color .16s, transform .16s;
}
.rel:hover{border-color:var(--line-2); transform:translateY(-2px)}
.rel .k{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-2); font-weight:700}
.rel h3{margin:0; font-size:1.12rem; color:var(--ink)}
.rel p{margin:0; font-size:.93rem; color:var(--body); line-height:1.5}
.rel .mais{margin-top:auto; padding-top:8px; font-size:.8rem; font-weight:700; color:var(--brand-2); letter-spacing:.03em; text-transform:uppercase}
.sec-light .rel{background:#fff; border-color:#e7e0d4}
.sec-light .rel h3{color:var(--ink-dark)}
.sec-light .rel p{color:#5a554b}

/* ---------- Meta do artigo (blog) ---------- */
.post-meta{display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; color:var(--muted); font-size:.84rem; margin:0 0 6px}
.post-meta .tag{display:inline-flex; align-items:center; gap:7px; color:var(--brand-2); font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:.72rem}

/* Lista de posts (blog index) */
.post-list{display:grid; gap:14px; grid-template-columns:1fr; max-width:860px; margin-inline:auto}
.post-link{
  display:grid; gap:6px; text-decoration:none; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-md); padding:24px 24px; transition:border-color .16s, transform .16s;
}
.post-link:hover{border-color:var(--line-2); transform:translateY(-2px)}
.post-link .k{font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brand-2); font-weight:700}
.post-link h2{font-family:var(--font); text-transform:none; letter-spacing:-.015em; font-weight:800; font-size:1.3rem; line-height:1.25; color:var(--ink); margin:2px 0 0}
.post-link p{margin:4px 0 0; font-size:.96rem; color:var(--body); line-height:1.5}
.post-link .mais{margin-top:6px; font-size:.8rem; font-weight:700; color:var(--brand-2); letter-spacing:.03em; text-transform:uppercase}

/* ---------- Voltar / âncora ---------- */
.back-link{display:inline-flex; align-items:center; gap:8px; color:var(--brand-2); font-weight:700; font-size:.88rem; text-decoration:none; margin-top:var(--s-3)}
.back-link:hover{filter:brightness(1.1)}

/* Divisor fino */
.rule-sep{border:0; border-top:1px solid var(--line); max-width:70ch; margin:34px auto}
.sec-light .rule-sep{border-top-color:#e7e0d4}

/* Linha-destaque (tagline) dentro da prosa */
.prose .tagline{font-family:var(--font-ac); font-style:italic; color:var(--brand-2); font-size:clamp(1.25rem,3vw,1.6rem); line-height:1.35; margin:24px 0; font-weight:400}
.sec-light .prose .tagline{color:var(--brand)}

/* FAQ dentro de seção clara */
.sec-light details{background:#fff; border-color:#e7e0d4}
.sec-light summary{color:var(--ink-dark)}
.sec-light summary::after{background:rgba(20,18,16,.06); color:var(--brand)}
.sec-light details p{color:#4b463d}
.faq.wide{max-width:860px}