/* ==========================================================================
   HERO — fundo escuro, título grande à esquerda, órbita da equipe à direita
   (estrutura do mockup aprovado, sem fotos inventadas da escola)
   ========================================================================== */

.hero {
  --accent-line: #6A84E4;          /* azul legível sobre o preto (≥ 4.5:1 em texto grande) */
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + clamp(12px, 3svh, 40px)) var(--margin) clamp(28px, 6svh, 64px);
  overflow: clip;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(54%, 860px);
}

.hero__id {
  font-size: 12px;
  font-weight: 640;
  font-variation-settings: "wdth" 110;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__slash { color: var(--accent-line); padding: 0 .4em; }

.hero__title {
  margin-top: clamp(10px, 2.2svh, 26px);
  font-size: clamp(46px, min(7.2vw, 11.2svh), 156px);
  font-weight: 880;
  font-variation-settings: "wdth" 66;
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--paper);
  user-select: none;
  -webkit-user-select: none;
}
.hero__line { display: block; white-space: nowrap; }
.hero__line--accent { color: var(--accent-line); }

/* Palavras e letras criadas pelo JS */
.hw { display: inline-block; overflow: hidden; vertical-align: top; padding: .3em .01em .1em; margin: -.3em -.01em -.1em; }
.hw-in { display: inline-block; will-change: transform; }
.hl { display: inline-block; font-variation-settings: "wdth" 66, "wght" var(--w, 880); }

.hero__copy {
  max-width: 46ch;
  margin-top: clamp(16px, 3.2svh, 36px);
  color: var(--muted);
  font-size: clamp(15px, .3vw + 13.5px, 18px);
}
.hero__copy p + p { margin-top: .45em; }
.hero__lead {
  color: var(--paper);
  font-size: clamp(17px, .5vw + 14px, 23px);
  font-weight: 640;
  font-variation-settings: "wdth" 96;
  line-height: 1.2;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 3.6svh, 40px);
}

/* ---------- Botões em pílula (mockup) ---------- */
.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(44px, 6.4svh, 52px);
  padding: 0 28px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform .5s var(--ease-out), color .35s;
}
.pill:active { transform: scale(.96); transition-duration: .12s; }
.pill--solid { background: var(--paper); color: var(--ink); }
.pill__roll { display: block; overflow: hidden; height: 1.3em; line-height: 1.3; }
.pill__roll .pill__text { display: block; position: relative; transition: transform .55s var(--ease-out); }
.pill__roll .pill__text::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
.pill--solid:hover .pill__text,
.pill--solid:focus-visible .pill__text { transform: translateY(-100%); }

.pill--line { box-shadow: inset 0 0 0 1.5px var(--paper); color: var(--paper); }
.pill__fill {
  position: absolute; inset: 0; z-index: -1;
  background: var(--paper);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .55s var(--ease-out);
}
.pill--line:hover, .pill--line:focus-visible { color: var(--ink); }
.pill--line:hover .pill__fill, .pill--line:focus-visible .pill__fill { transform: none; }

/* ---------- Órbita da equipe ---------- */
.hero__orbit {
  position: absolute;
  top: var(--nav-h);
  bottom: 0;
  left: 46%;
  right: 0;
  z-index: 1;
}
.hero__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.hero__ring circle {
  fill: none;
  stroke: rgba(245, 243, 237, .22);
  stroke-width: 1;
}
.hero__core {
  position: absolute;
  left: 0; top: 0;
  width: 64px; height: 64px;
  color: var(--paper);
  pointer-events: none;
  will-change: transform;
}
.hero__count {
  position: absolute;
  left: 0; top: 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}
.hero__count strong { color: var(--paper); font-weight: 650; }

.orb {
  position: absolute;
  left: 0; top: 0;
  width: var(--orb, 72px);
  height: var(--orb, 72px);
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.orb__in {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: #2A2B2E;
  box-shadow: 0 0 0 3px var(--ink);
  transition: transform .45s var(--ease-snap), box-shadow .3s;
}
.orb__in img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.orb:hover .orb__in { transform: scale(1.14); box-shadow: 0 0 0 3px var(--ink), 0 0 0 4.5px var(--paper); }

.hero__tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  padding: 6px 11px;
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, calc(-100% - 14px));
  opacity: 0;
  transition: opacity .2s;
}
.hero__tip small { display: block; font-size: 11.5px; font-weight: 500; color: var(--muted-on-paper); }
.hero__tip.is-on { opacity: 1; }

/* Indicação de rolagem (canto inferior, como no mockup) */
.hero__more {
  position: absolute;
  right: var(--margin);
  bottom: clamp(20px, 4svh, 40px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 640;
  font-variation-settings: "wdth" 110;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .3s;
}
.hero__more svg { width: 18px; height: 18px; transition: transform .5s var(--ease-out); }
.hero__more:hover { color: var(--paper); }
.hero__more:hover svg { transform: translateY(4px); }

/* ---------- Tablet e celular: órbita abaixo do texto ---------- */
@media (max-width: 1023px) {
  .hero {
    flex-direction: column;
    align-items: stretch;
    min-height: auto;
    padding-bottom: 0;
  }
  .hero__content { width: 100%; max-width: 680px; }
  .hero__title { font-size: clamp(52px, 13.5vw, 120px); }
  .hero__orbit {
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    order: 2;
    height: min(96vw, 560px);
    margin: clamp(8px, 3vw, 24px) calc(-1 * var(--margin)) 0;
  }
  .hero__content { order: 1; }
  .hero__more { display: none; }
}
@media (max-width: 699px) {
  .hero { padding-top: calc(var(--nav-h) + 20px); }
  .hero__actions { flex-direction: column; }
  .hero__actions .pill { width: 100%; }
  .hero__copy { font-size: 16px; }
}