/* ==========================================================================
   BeLight Energy — abouts.css
   ========================================================================== */
@layer pages {
  .mv { display: flex; flex-direction: column; }
  .mv__title { font-size: var(--fs-2xl); margin-block-end: var(--s-3); }
  .mv p { font-size: var(--fs-lg); line-height: 1.6; }

  .manifesto { margin-block-start: var(--s-5); display: flex; gap: var(--s-5); align-items: center; }
  .manifesto::before { content: ""; flex: none; inline-size: 1.25rem; block-size: 1.25rem; border-radius: 50%; background: var(--ambar-2); box-shadow: 0 0 0 8px color-mix(in oklab, var(--ambar-2) 18%, transparent); }
  .manifesto p { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); line-height: 1.4; letter-spacing: -0.01em; color: var(--on-inverse) !important; }

  /* Valores — numeração ao estilo do brand book */
  .values { counter-reset: v; }
  .value { min-block-size: 13rem; }
  .value__n { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); color: var(--muted); margin-block-end: var(--s-7); }
  .value.card--inverse .value__n { color: var(--ambar-2); }
  .value h3 { font-size: var(--fs-xl); }

  /* Conceito do logótipo */
  .concept { position: relative; aspect-ratio: 1; display: block; padding: 18%; border-radius: var(--r-xl); }
  .concept__mark { inline-size: 100%; block-size: 100%; overflow: visible; }
  .concept__stem { fill: var(--text); transition: opacity var(--t) var(--ease), fill var(--t) var(--ease); }
  .concept__gap { fill: none; stroke: transparent; stroke-width: 4; transition: stroke var(--t) var(--ease); }
  .concept__dot { fill: var(--accent); transition: opacity var(--t) var(--ease), scale var(--t-slow) var(--ease-out); transform-origin: 380px 175px; transform-box: view-box; }
  .concept[data-active="1"] :is(.concept__dot) { opacity: .25; }
  .concept[data-active="2"] .concept__stem { opacity: .2; }
  .concept[data-active="2"] .concept__dot { scale: 1.06; }
  .concept[data-active="3"] .concept__gap { stroke: var(--focus); stroke-dasharray: 14 10; }
  .concept[data-active="3"] .concept__stem, .concept[data-active="3"] .concept__dot { opacity: .35; }

  .concept__pin {
    position: absolute; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--r-sm);
    text-align: center; line-height: 2.25rem; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm);
    background: var(--surface); border: 1.5px solid var(--text); box-shadow: var(--shadow-sm);
    transition: background-color var(--t) var(--ease), color var(--t) var(--ease), scale var(--t) var(--ease-out);
  }
  /* Posições calculadas sobre a geometria do símbolo original (viewBox 40 -40 645 820) */
  .concept__pin { translate: -50% -50%; }
  .concept__pin[data-pin="1"] { inset-inline-start: 34%; inset-block-start: 65%; }
  .concept__pin[data-pin="2"] { inset-inline-start: 51.3%; inset-block-start: 34.8%; }
  .concept__pin[data-pin="3"] { inset-inline-start: 40.9%; inset-block-start: 45.2%; }
  .concept[data-active="1"] [data-pin="1"], .concept[data-active="2"] [data-pin="2"], .concept[data-active="3"] [data-pin="3"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); scale: 1.12; }

  .concept__list { display: grid; gap: var(--s-2); }
  .concept__list button { inline-size: 100%; display: grid; grid-template-columns: auto 1fr; gap: var(--s-4); padding: var(--s-4); text-align: start; border-radius: var(--r-md); border: 1px solid transparent; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
  .concept__list button > span:first-child { font-family: var(--font-display); font-weight: 600; color: var(--muted); font-size: var(--fs-lg); inline-size: 1.5rem; }
  .concept__list button:hover, .concept__list button.is-active { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-sm); }
  .concept__list button.is-active > span:first-child { color: var(--accent); }
  .concept__list strong { display: block; font-family: var(--font-display); font-size: var(--fs-lg); }
  .concept__list small { display: block; margin-block-start: var(--s-1); font-size: var(--fs-md); color: var(--muted); }

  /* Fundador */
  .founder { text-align: center; }
  .founder__avatar { inline-size: 7rem; block-size: 7rem; margin: 0 auto var(--s-5); border-radius: 50%; position: relative; background: var(--inverse); color: var(--on-inverse); text-align: center; line-height: 7rem; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-2xl); img{ border-radius: 50%; }}
  .founder__avatar::after { content: ""; position: absolute; inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%; inset-block-start: .25rem; inset-inline-end: .25rem; background: var(--accent); box-shadow: 0 0 0 4px var(--surface); }
  .founder__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-xl); color: var(--text) !important; }
  .founder__role { font-size: var(--fs-sm); }
  .founder__facts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-block: var(--s-5); }
  .founder__facts div { padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-2); }
  .founder__facts dt { font-size: var(--fs-xs); color: var(--muted); }
  .founder__facts dd { font-family: var(--font-display); font-weight: 600; }
  .prose-lite p { color: var(--muted); font-size: var(--fs-lg); }
  .prose-lite strong { color: var(--text); }
  .founder__label { margin-block: var(--s-6) var(--s-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
  .orgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--s-2); }
  .orgs li { padding: var(--s-3) var(--s-4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); transition: border-color var(--t) var(--ease), translate var(--t) var(--ease-out); }
  .orgs li:hover { border-color: var(--accent); translate: 0 -2px; }
  .orgs span { display: block; font-family: var(--font-display); font-weight: 600; }
  .orgs small { color: var(--muted); }
}