/* ============================================================
   3TN Osasco — Páginas de serviço (template único)
   Estende css/tokens.css + css/styles.css. Carregado só em /servicos/.
   ============================================================ */

/* ---- Cabeçalho da página (papel) ---- */
.svc-hero { position: relative; overflow: hidden; background: var(--surface-page); border-bottom: 1px solid var(--border-subtle); }
.svc-hero__wm { position: absolute; top: -70px; right: -80px; width: 340px; height: 340px; color: var(--color-primary); opacity: 0.05; }
.svc-hero__inner { position: relative; z-index: 1; padding: clamp(1.75rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.25rem); }

.svc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 1.1rem; }
.svc-breadcrumb a { color: var(--text-secondary); }
.svc-breadcrumb a:hover { color: var(--color-primary); text-decoration: none; }
.svc-breadcrumb__sep { color: var(--border-strong); }
.svc-breadcrumb [aria-current="page"] { color: var(--text-body); }

.svc-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.85rem); line-height: 1.1; margin-top: 0.35rem; max-width: 22ch; }
.svc-hero__lead { margin-top: 0.9rem; font-size: var(--fs-lead); color: var(--text-secondary); line-height: 1.55; max-width: var(--measure); }
.svc-hero .rule-engraving { margin-top: 1.5rem; max-width: 200px; }

/* ---- Corpo: duas colunas ---- */
.svc-layout { gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
.svc-content { min-width: 0; }

/* ---- Prosa do serviço ---- */
.svc-prose { color: var(--text-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); }
.svc-prose > :first-child { margin-top: 0; }
.svc-prose p { margin: 0 0 1rem; max-width: var(--measure); }
.svc-prose a { color: var(--text-link); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.svc-prose strong { font-weight: var(--fw-bold); color: var(--text-strong); }

/* H2 de seção — Spectral com filete-acento (assinatura) */
.svc-prose h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  margin: 2.75rem 0 1.1rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle); position: relative;
}
.svc-prose h2::before { content: ""; position: absolute; top: -1px; left: 0; width: 2.25rem; height: 2px; background: var(--color-seal); }
.svc-prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.svc-prose > h2:first-child::before { display: none; }

/* H3 — rótulo de categoria de documentos */
.svc-prose h3 { font-family: var(--font-body); font-size: 1.0625rem; font-weight: var(--fw-bold); color: var(--text-strong); margin: 1.9rem 0 0.85rem; }

/* Listas de documentos — checklist com quadradinho azul-selo */
.svc-prose ul { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.svc-prose ul li { position: relative; padding-left: 1.9rem; max-width: var(--measure); line-height: 1.5; }
.svc-prose ul li::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 1rem; height: 1rem; border: 1.5px solid var(--color-seal); border-radius: 3px; background: var(--surface-tint); }

/* Observações gerais — numerada com contador em pílula */
.svc-prose ol { list-style: none; margin: 0 0 1.25rem; padding: 0; counter-reset: obs; display: flex; flex-direction: column; gap: 0.65rem; }
.svc-prose ol li { counter-increment: obs; position: relative; padding-left: 2.4rem; max-width: var(--measure); line-height: 1.5; }
.svc-prose ol li::before { content: counter(obs); position: absolute; left: 0; top: 0.05em; width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-weight: 700; font-size: 0.8125rem; color: var(--color-primary); background: var(--blue-50); border-radius: var(--radius-pill); }

/* Callout "Observações" (blockquote) */
.svc-note { margin: 0 0 1.5rem; padding: 1.1rem 1.25rem; background: var(--blue-50); border-left: 3px solid var(--color-seal); border-radius: var(--radius-md); }
.svc-note__label { font-family: var(--font-body); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--color-primary); margin: 0 0 0.6rem; }
.svc-note ul { margin: 0; gap: 0.45rem; }
.svc-note ul li { padding-left: 1.4rem; font-size: 1rem; color: var(--text-body); }
.svc-note ul li::before { width: 0.5rem; height: 0.5rem; border: 0; border-radius: 50%; background: var(--color-seal); top: 0.5em; }
.svc-note p { margin: 0 0 0.5rem; font-size: 1rem; }
.svc-note p:last-child { margin-bottom: 0; }

/* ---- Card lateral (sticky) ---- */
.svc-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 1rem; }
.svc-cta-card { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); padding: 1.5rem; }
.svc-cta-card h2 { font-family: var(--font-display); font-size: 1.25rem; margin: 0 0 0.4rem; }
.svc-cta-card > p { color: var(--text-secondary); font-size: 0.9375rem; margin: 0 0 1.1rem; line-height: 1.5; }
.svc-cta-card__actions { display: flex; flex-direction: column; gap: 0.6rem; }
.svc-cta-card__actions .btn { width: 100%; }
.svc-cta-card .rule-engraving { margin: 1.35rem 0; }
.svc-cta-meta { display: flex; flex-direction: column; gap: 0.7rem; }
.svc-cta-meta__row { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.875rem; color: var(--text-secondary); line-height: 1.45; }
.svc-cta-meta__row [data-lucide] { color: var(--color-seal); margin-top: 1px; }

/* ---- Faixa CTA navy ---- */
.svc-band { position: relative; overflow: hidden; background: var(--surface-navy); color: #fff; text-align: center; }
.svc-band__wm { position: absolute; bottom: -100px; left: -70px; width: 300px; height: 300px; color: #fff; opacity: 0.06; }
.svc-band__inner { position: relative; z-index: 1; padding: clamp(2.5rem, 5vw, 4rem) 0; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.svc-band h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); max-width: 24ch; }
.svc-band p { color: var(--text-on-navy-muted); max-width: 48ch; font-size: var(--fs-lead); }
.svc-band__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 0.5rem; }

/* ---- Hub (índice de serviços) ---- */
.svc-hub-group { margin-top: clamp(2.25rem, 4vw, 3rem); }
.svc-hub-group:first-of-type { margin-top: 0; }
.svc-hub-group__title { font-family: var(--font-body); text-transform: uppercase; letter-spacing: var(--ls-caps); font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); margin: 0 0 1.2rem; display: flex; align-items: center; gap: 0.85rem; }
.svc-hub-group__title::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.svc-hub-grid { gap: 1rem; }
.svc-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.4rem 1.45rem; background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); text-decoration: none; transition: border-color var(--dur-normal) var(--ease-standard), box-shadow var(--dur-normal) var(--ease-standard), transform var(--dur-normal) var(--ease-standard); }
.svc-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; }
.svc-card__title { font-family: var(--font-display); font-size: 1.1875rem; font-weight: 700; color: var(--text-strong); line-height: 1.2; }
.svc-card__desc { color: var(--text-secondary); font-size: 0.9375rem; line-height: 1.5; flex: 1; }
.svc-card__cta { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; color: var(--color-primary); margin-top: 0.4rem; }

/* ---- Responsivo ---- */
@media (max-width: 900px) {
  .svc-aside { position: static; }
}