/* /sobre — institucional, curta. Hero com a base da marca + foto + seções no padrão r2 (src/styles/brand.css).
   Motions (page.js): o que estava espalhado se organiza; cartão anotado com os três princípios; dois lados, mesma base.
   Estados ocultos só com .sx.is-armed. */

/* ---------- Hero ---------- */
.sb-hero{padding-block:clamp(48px,6vw,104px) clamp(64px,6vw,112px)}
.sb-hero .eyebrow{display:block;margin-bottom:24px}
.sb-h1{font-size:clamp(2.3rem,1.2rem + 3.3vw,4.5rem);line-height:1.04}
.sb-hero-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:clamp(28px,3vw,44px)}
.sb-hero-copy .lead{grid-column:2;max-width:46ch}
.sb-base{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:clamp(56px,6vw,96px) 0 0;border-top:1px solid var(--ink)}
.sb-base div{padding:18px 20px 0 0;display:flex;flex-direction:column;gap:8px}
.sb-base div + div{padding-left:20px;border-left:1px solid var(--line-2)}
.sb-base dt{font-size:var(--fs-label);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.sb-base dd{margin:0;font-size:1.02rem;line-height:1.4;letter-spacing:-.01em}
@media (max-width:1024px){
  .sb-base{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}
  .sb-base div:nth-child(4){padding-left:0;border-left:0}
}
@media (max-width:900px){.sb-hero-copy{grid-template-columns:minmax(0,1fr)}.sb-hero-copy .lead{grid-column:1}}
@media (max-width:560px){
  .sb-base{grid-template-columns:minmax(0,1fr);row-gap:0;border-top:0}
  .sb-base div,.sb-base div + div{padding:14px 0;border-left:0;border-top:1px solid var(--line-2);display:grid;grid-template-columns:118px minmax(0,1fr);gap:12px;align-items:baseline}
  .sb-base div:first-child{border-top-color:var(--ink)}
}


/* ---------- Pessoas ---------- */
.sb-people{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:40px clamp(40px,6vw,96px);align-items:center}
.photo.sb-photo{aspect-ratio:5/4}
.sb-photo figcaption{max-width:70%}
.sb-people-copy .body{max-width:44ch}
@media (max-width:900px){.sb-people{grid-template-columns:minmax(0,1fr)}.sb-people-copy{order:-1}.photo.sb-photo{aspect-ratio:16/10}}
@media (max-width:560px){.photo.sb-photo{aspect-ratio:4/5}.sb-photo figcaption{max-width:none}}

/* ---------- Fechamento ---------- */
.sb-end{display:flex;flex-direction:column;gap:36px;align-items:flex-start}
.sb-end-t{font-size:clamp(1.9rem,1.1rem + 2.6vw,3.5rem);line-height:1.1;letter-spacing:-.032em;max-width:24ch}

/* ---------- 1 · espalhado → organizado ---------- */
.sbo-cap{position:relative;height:22px;margin-bottom:16px !important;font-size:14px;color:var(--sx-ink2)}
.sbo-cap span{position:absolute;left:0;top:0;transition:opacity .35s var(--sx-ease),transform .35s var(--sx-ease)}
.sbo-cap .b{opacity:0;transform:translateY(6px);color:var(--ink);font-weight:500}
.sbo.is-done .sbo-cap .a{opacity:0;transform:translateY(-6px)}
.sbo.is-done .sbo-cap .b{opacity:1;transform:none}
.sbo-list{display:flex;flex-direction:column;gap:8px}
.sbo-list li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--sx-line);border-radius:14px;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.8);box-shadow:0 12px 26px -16px rgba(10,20,60,.35);transition:transform .6s var(--sx-ease),box-shadow .4s}
.sbo-list li.in{transform:none;box-shadow:none}

/* ---------- 2 · cartão anotado ---------- */
.sbp-card{background:#fff;border:1px solid var(--sx-line);border-radius:18px;padding:18px;box-shadow:0 20px 40px -32px rgba(10,20,60,.35)}
.sbp-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.sbp-top .mv-tt b{font-size:15px}
.sbp-urg,.sbp-ctx,.sbp-own{transition:opacity .4s var(--sx-ease),transform .4s var(--sx-ease)}
.sbp-ctx{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:14px;border-top:1px solid var(--sx-line)}
.sbp-own{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--sx-line);font-size:13px;color:var(--sx-ink3)}
.sbp-own b{color:var(--ink);font-weight:500}
.sbp-own .sx-badge{margin-left:auto}
.sbp-own .sx-av{width:30px;height:30px;font-size:12px}
.sbp-notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px !important}
.sbp-notes li{display:flex;flex-direction:column;gap:3px;padding:12px 14px;border-radius:14px;background:var(--paper);border:1px solid transparent;transition:opacity .3s,border-color .3s,box-shadow .3s}
.sbp-notes b{font-family:var(--f-brand);font-weight:500;font-size:14px}
.sbp-notes span{font-size:12.5px;color:var(--sx-ink3);line-height:1.4}
.sx.is-armed .sbp-notes li:not(.on):not(.ok){opacity:.5}
.sbp-notes li.on{border-color:rgba(0,122,255,.45);box-shadow:0 0 0 3px rgba(0,122,255,.12);background:#fff}
.sbp-notes li.on b{color:var(--sx-blue-t)}

/* ---------- 3 · dois lados, mesma base ---------- */
.sbl{display:grid;grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);align-items:center}
.sbl-side{background:#fff;border-radius:18px;padding:16px}
.sbl-k{font-size:12.5px;font-weight:500;color:var(--sx-blue-t)}
.sbl-t{font-family:var(--f-brand);font-weight:500;font-size:16px;margin-bottom:12px !important}
.sbl-side ul{display:flex;flex-direction:column;gap:8px}
.sbl-side li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--paper);font-size:13.5px;font-weight:500;min-width:0}
.sbl-side li .sx-ic{background:#fff}
.sbl-axis{position:relative;height:80px;margin:0 8px}
.sbl-axis i{position:absolute;left:0;right:0;top:50%;border-top:2px dashed rgba(255,255,255,.3)}
.sx:not(.dark *) .sbl-axis i{border-top-color:var(--sx-line2)}
.sbl-axis b{position:absolute;left:0;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--sx-blue);opacity:0}
.sbl-axis b.go{animation:sblX .9s var(--sx-ease) forwards}
@keyframes sblX{0%{opacity:0;transform:translateX(0)}15%,85%{opacity:1}100%{opacity:0;transform:translateX(var(--d,60px))}}
.sbl-axis span{position:absolute;left:50%;top:calc(50% + 10px);transform:translateX(-50%);font-size:12px;color:var(--paper-2);white-space:nowrap}
.sx:not(.dark *) .sbl-axis span{color:var(--sx-ink3)}

@media (max-width:720px){
  .sb-hero{padding-block:40px 56px}
  .sb-hero .eyebrow{margin-bottom:18px}
  .sb-hero-copy{margin-top:22px}
  .sb-base{margin-top:40px}
  .sb-base div,.sb-base div + div{grid-template-columns:112px minmax(0,1fr)}
  .photo.sb-photo{aspect-ratio:1/1}
  .sb-people{row-gap:28px}
  .sb-end{gap:28px}
  .sbp-card{padding:16px}
  .sbp-top{grid-template-columns:auto minmax(0,1fr)}
  .sbp-urg{grid-column:2}
  .sbp-own .sx-badge{margin-left:0}
  .sbp-notes{grid-template-columns:minmax(0,1fr);gap:6px}
  .sbl{grid-template-columns:minmax(0,1fr)}
  .sbl-axis{height:64px;margin:6px 0}
  .sbl-axis i{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed rgba(255,255,255,.3)}
  .sbl-axis b{left:50%;top:0;margin:0 0 0 -5px}
  .sbl-axis b.go{animation-name:sblY}
  .sbl-axis span{left:calc(50% + 14px);top:50%;transform:translateY(-50%)}
}
@keyframes sblY{0%{opacity:0;transform:translateY(0)}15%,85%{opacity:1}100%{opacity:0;transform:translateY(54px)}}
/* celular: peças espalhadas começam dentro da tela */
@media (max-width:720px){.sbo-list li:not(.in){transform:translate(calc(var(--x) * .3),var(--y)) rotate(calc(var(--r) * .6)) scale(.92)}}
@media (max-width:720px){#inicio :is(.x-pill,.eyebrow):not(.sx *){margin-bottom:16px !important}}