/* ==========================================================================
   BeLight Energy — service_details.css
   ========================================================================== */
@layer pages {
  .kpi-stack { display: grid; gap: var(--s-3); }
  .kpi-stack li { display: flex; gap: var(--s-4); align-items: center; --pad: var(--s-5); }
  .kpi-stack .bi { flex: none; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--r-md); background: var(--accent-soft); text-align: center; line-height: 2.75rem; font-size: 1.2rem; }
  .kpi-stack strong { display: block; font-family: var(--font-display); }
  .kpi-stack span { font-size: var(--fs-sm); color: var(--muted); }

  /* Layout com índice lateral fixo */
  .detail { display: grid; gap: var(--s-7); padding-block: var(--s-6) var(--section); }
  @media (min-width: 64em) { .detail { grid-template-columns: 15rem 1fr; gap: var(--s-8); } }
  .toc { display: none; }
  @media (min-width: 64em) { .toc { display: block; position: sticky; inset-block-start: calc(var(--header-h) + var(--s-5)); align-self: start; } }
  .toc__title { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin-block-end: var(--s-3); }
  .toc__list { border-inline-start: 1px solid var(--line); }
  .toc__list a { display: block; padding: var(--s-2) var(--s-4); margin-inline-start: -1px; border-inline-start: 2px solid transparent; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; transition: color var(--t) var(--ease), border-color var(--t) var(--ease), background-color var(--t) var(--ease); }
  .toc__list a:hover { color: var(--text); }
  .toc__list a[aria-current="true"] { color: var(--text); font-weight: 600; border-inline-start-color: var(--accent); background: linear-gradient(90deg, var(--accent-soft), transparent); }
  .toc__ad { margin-block-start: var(--s-6); }

  .detail__main { min-inline-size: 0; }
  .block { position: relative; padding-block: var(--s-7); border-block-end: 1px solid var(--line); }
  .block:first-child { padding-block-start: 0; }
  .block__n { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--accent); margin-block-end: var(--s-2); }
  .block h2 { font-size: var(--fs-2xl); margin-block-end: var(--s-4); }
  .block > p { color: var(--muted); font-size: var(--fs-lg); max-inline-size: 65ch; margin-block-end: var(--s-5); }
  .mini { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .mini .card { --pad: var(--s-5); }
  .mini .bi { font-size: 1.4rem; color: var(--text); display: block; margin-block-end: var(--s-3); }
  .mini h3 { font-size: var(--fs-md); }
  .mini p { font-size: var(--fs-sm); }

  /* Simulador indexado vs. fixo */
  .idx { display: grid; gap: var(--s-6); border-radius: var(--r-xl); }
  @media (min-width: 48em) { .idx { grid-template-columns: 1fr 1fr; } }
  .idx__form { display: grid; gap: var(--s-4); align-content: start; }
  .input-unit { position: relative; }
  .input-unit .input { padding-inline-end: 4.5rem; font-variant-numeric: tabular-nums; }
  .input-unit span { position: absolute; inset-block: 0; inset-inline-end: var(--s-4); margin-block: auto; block-size: 1.5em; font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
  .idx__out { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface-2); display: grid; gap: var(--s-4); align-content: start; }
  .idx__bars { display: grid; gap: var(--s-3); }
  .idx__bar { --w: 50%; position: relative; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-4); border-radius: var(--r-md); background: var(--surface); overflow: clip; isolation: isolate; border: 1px solid var(--line); }
  .idx__bar-fill { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w); z-index: -1; background: color-mix(in oklab, var(--text) 9%, transparent); transition: inline-size var(--t-slow) var(--ease-out), background-color var(--t) var(--ease); }
  .idx__bar.is-best .idx__bar-fill { background: color-mix(in oklab, var(--success) 22%, transparent); }
  .idx__bar-label { font-weight: 600; font-size: var(--fs-sm); }
  .idx__bar strong { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
  .idx__verdict { font-weight: 500; min-block-size: 3em; }
  .idx__be { font-size: var(--fs-sm); color: var(--muted); padding-block-start: var(--s-3); border-block-start: 1px solid var(--line); }
  .idx__be strong { color: var(--text); }

  /* Relatório esquemático */
  .report { display: grid; gap: var(--s-4); }
  .report__row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); }
  .report__row strong { color: var(--success); }
  .report__track { block-size: .5rem; border-radius: var(--r-full); background: color-mix(in oklab, var(--text) 10%, transparent); overflow: clip; }
  .report__track span { display: block; block-size: 100%; inline-size: 88%; background: var(--accent); border-radius: inherit; }
  .report__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
  .report__cols div { padding: var(--s-3); border-radius: var(--r-md); background: var(--surface); }
  .report__cols small { display: block; color: var(--muted); font-size: var(--fs-xs); }
  .report__cols strong { font-family: var(--font-display); font-size: var(--fs-xl); }

  /* Timeline de processo */
  .timeline { display: grid; gap: 0; counter-reset: tl; }
  .timeline li { counter-increment: tl; position: relative; padding: 0 0 var(--s-5) var(--s-8); }
  .timeline li::before { content: counter(tl, decimal-leading-zero); position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 2.5rem; block-size: 2.5rem; border-radius: 50%; text-align: center; line-height: 2.5rem; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); background: var(--surface); border: 1px solid var(--line); }
  .timeline li:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: 1.25rem; inset-block: 2.5rem 0; inline-size: 1px; background: var(--line); }
  .timeline li:last-child::before { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .timeline strong { display: block; font-family: var(--font-display); padding-block-start: .45rem; }
  .timeline span { color: var(--muted); font-size: var(--fs-sm); }

  .proposal { margin-block-start: var(--s-7); border-block-end: 1px solid var(--line); border-radius: var(--r-xl); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
  .proposal > p { color: var(--muted); margin-block-end: var(--s-5); }
}