/* ==========================================================================
   SOBRE — abertura clara no estilo da home: título + pílula laranja e fotos reais flutuando em círculos
   <section class="vsb"> (gustavo.html). Fontes e cores vêm do assets/hero.css.
   ========================================================================== */
.vsb {
  --ink: #0B1114; --orange-1: #ff7f00; --orange-2: #e5383b; --ease: cubic-bezier(.16, 1, .3, 1);
  --font: "Hanken Grotesk", system-ui, sans-serif; --font-display: "Averia Sans Libre", "Hanken Grotesk", sans-serif;
  position: relative; overflow: clip; isolation: isolate; color: #000; font-family: var(--font);
  min-height: min(980px, 100svh); padding: 150px var(--g-pad, 24px) 48px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
main.g > section.vsb { padding: 150px var(--g-pad, 24px) 56px; border-top: 0; }
.vsb__grid {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(0, 0, 0, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .045) 1px, transparent 1px);
  background-size: 68px 68px; background-position: center top;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
}
.vsb__center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 900px; }
.vsb__title { margin: 0; font: 600 clamp(54px, 7.2vw, 112px)/.86 var(--font); letter-spacing: -.06em; color: #000; text-transform: none; }
.vsb__title > span { display: block; white-space: nowrap; }
.vsb__box { position: relative; display: inline-block; margin-top: 18px; padding-bottom: 28px; }
.vsb__pill {
  display: block; padding: 0 30px; color: #fff; text-transform: uppercase;
  font: 700 clamp(48px, 5.8vw, 90px)/1.2 var(--font-display); letter-spacing: -.06em;
  background: linear-gradient(167deg, var(--orange-1), var(--orange-2));
  border: 3px solid rgba(255, 206, 0, .59); border-radius: 18px;
  box-shadow: inset 0 0 24px #efc623, inset 0 0 24px #ef8c23, 0 4px 24px rgba(247, 119, 43, .35);
}
.vsb__badge {
  position: absolute; left: calc(100% - 92px); top: calc(100% - 50px); width: max-content;
  display: flex; align-items: center; gap: 9px; padding: 6px 18px 6px 6px; border-radius: 100px;
  background: #fafafb; box-shadow: 0 10px 30px rgba(0, 0, 0, .07); text-align: left;
  font: 600 14px/17px var(--font); letter-spacing: -.02em; transform: rotate(5deg);
  animation: vsb-sway 5s ease-in-out infinite alternate;
}
.vsb__badge img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.vsb__badge small { display: block; font-size: 13px; font-weight: 500; color: rgba(17, 17, 17, .55); }
.vsb__center > * { max-width: 100%; }
.vsb__lead { max-width: 540px; margin: 28px 0 0; font: 400 17px/1.45 var(--font); color: rgba(0, 0, 0, .7); }
.vsb__facts {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 30px 0 0; padding: 0; list-style: none;
}
.vsb__facts li { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 100px; background: rgba(255, 255, 255, .8); border: 1px solid rgba(0, 0, 0, .1); font: 500 14px/1 var(--font); }
.vsb__facts span { font: 400 11px/1 var(--g-mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: rgba(0, 0, 0, .5); }

/* fotos flutuando */
.vsb__photo {
  margin: 0; position: absolute; z-index: 1; width: var(--s); aspect-ratio: 1; left: var(--x); top: var(--y);
  transform: translate(var(--mx, 0px), var(--my, 0px));
  transition: transform .9s var(--ease);
}
.vsb__photo::before { /* círculo branco suave atrás, deslocado, como no Relab */
  content: ""; position: absolute; width: 74%; aspect-ratio: 1; border-radius: 50%; right: var(--bx, -28%); bottom: var(--by, -22%);
  background: rgba(255, 255, 255, .75); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 30px rgba(0, 0, 0, .04); z-index: -1;
}
.vsb__photo img {
  display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  border: 4px solid #fff; box-shadow: 0 16px 34px rgba(20, 20, 40, .16);
  animation: vsb-float 6s ease-in-out infinite alternate; animation-delay: var(--d, 0s);
}
.vsb .vsb__photo figcaption {
  position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%) rotate(var(--r, -3deg)); white-space: nowrap;
  padding: 5px 10px; border-radius: 100px; background: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
  font: 500 14px/1 var(--font) !important; color: #222; letter-spacing: -.01em;
}
.vsb__photo--a { --s: 128px; --x: 12%; --y: 15%; --d: -1s; --bx: -40%; --by: 40%; }
.vsb__photo--b { --s: 188px; --x: 3%;  --y: 43%; --d: -3s; }
.vsb__photo--c { --s: 132px; --x: 15%; --y: 73%; --d: -2s; --bx: 60%; --by: -30%; }
.vsb__photo--d { --s: 150px; --x: 78%; --y: 13%; --d: -4s; --bx: -35%; --by: -25%; }
.vsb__photo--e { --s: 196px; --x: 83%; --y: 42%; --d: -1.5s; --bx: -30%; --by: 55%; }
.vsb__photo--f { --s: 120px; --x: 75%; --y: 74%; --d: -2.5s; }

/* entrada */
.js .vsb [data-in] { opacity: 0; transform: translateY(24px); }
.js .vsb.is-in [data-in] { animation: vsb-rise .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.js .vsb .vsb__photo[data-in] { transform: translate(var(--mx, 0px), var(--my, 0px)); scale: .6; }
.js .vsb.is-in .vsb__photo[data-in] { scale: 1; }
.js .vsb.is-in .vsb__photo[data-in] { animation-name: vsb-pop; }

@keyframes vsb-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes vsb-pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes vsb-float { from { translate: 0 0; } to { translate: 0 -12px; } }
@keyframes vsb-sway { from { transform: rotate(5deg); } to { transform: rotate(2deg) translateY(-3px); } }

/* cabeçalho escuro sobre a abertura clara */
.page-sobre.sobre-claro .header { --osso: var(--ink); --mute: var(--ink-mute); --line: var(--ink-line); color: var(--ink); }
.page-sobre.sobre-claro .header.is-scrolled { background: color-mix(in srgb, var(--paper) 78%, transparent); }

@media (max-width: 1100px) {
  .vsb__photo--a { --s: 100px; --x: 4%;  --y: 12%; } .vsb__photo--d { --s: 110px; --x: 82%; --y: 11%; }
  .vsb__photo--b { --s: 120px; --x: 2%; --y: 56%; } .vsb__photo--e { --s: 130px; --x: 84%; --y: 56%; }
  .vsb__photo--c, .vsb__photo--f { display: none; }
}
@media (max-width: 700px) {
  main.g > section.vsb { padding: 120px 16px 40px; min-height: 0; }
  .vsb__title { font-size: clamp(38px, 11.4vw, 56px); }
  .vsb__title > span { white-space: normal; }
  .vsb__pill { font-size: clamp(34px, 10.5vw, 52px); padding: 0 18px; border-radius: 14px; }
  .vsb__box { margin-top: 12px; padding-bottom: 46px; }
  .vsb__badge { left: auto; right: -8px; top: calc(100% - 54px); font-size: 12px; line-height: 15px; padding: 5px 12px 5px 5px; }
  .vsb__badge img { width: 28px; height: 28px; }
  .vsb__lead { font-size: 15px; margin-top: 14px; }
  .vsb > .vsb__photo { display: none; }
  .vsb__strip { display: flex !important; justify-content: center; margin-bottom: 26px; }
  .vsb__strip .vsb__photo { position: relative; left: auto; top: auto; width: 66px; transform: none; margin-left: -14px; }
  .vsb__strip .vsb__photo:first-child { margin-left: 0; }
  .vsb__strip .vsb__photo::before { display: none; }
  .vsb__strip .vsb__photo img { border-width: 3px; animation-duration: 4s; }
}
.vsb__strip { display: none; }
@media (prefers-reduced-motion: reduce) { .vsb *, .vsb *::before { animation: none !important; } .js .vsb [data-in] { opacity: 1; transform: none; } }