/* 08-convite-comercial · H08 · o ecossistema da V1 (.ecosystem-footer) com o texto H08-A no lugar do título:
   marca, título, apoio e o botão .hero-cta da V1; abaixo, três anéis com tags e ícones dos 5 pilares girando (REV-11) (só em cena,
   pelo [data-loop] da base), brilho laranja radial e globo pontilhado em canvas.
   Fundo escuro: faz a passagem do H07 (escuro) ao FAQ (claro) e deixa o globo laranja aceso;
   o botão segue o padrão do pedido 17 (geometria do .hero-cta da V1, cor "pretinho"). */

#h08.h08 {
  position: relative;
  z-index: 3;
  isolation: isolate;
  overflow: hidden;
  background: var(--black);
  color: var(--white);
}

/* ── Topo: marca, título, apoio, botão ─────────────────────── */
#h08 .h08__topo {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(calc(100% - 3rem), 60rem);
  margin: 0 auto;
  padding-top: clamp(4.25rem, 4.8vw, 4.75rem);
  text-align: center;
}

/* marca da V1 (logo escuro invertido para o fundo escuro, na mesma opacidade discreta) */
#h08 .h08__marca {
  display: block;
  width: clamp(5.5rem, 6.3vw, 6.25rem);
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.46;
}
#h08 .h08__marca.is-in { opacity: 0.46; }

#h08 .h08__titulo {
  width: min(100%, 57rem);
  margin: clamp(2.25rem, 2.6vw, 2.5rem) 0 0;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: clamp(3.25rem, 4.72vw, 4.75rem);
  font-weight: 350;
  letter-spacing: -0.06em;
  line-height: 0.94;
  text-wrap: balance;
}

#h08 .h08__enfase {
  font-family: var(--font-serif);
  font-variation-settings: "wght" 300;
  font-weight: 300;
  letter-spacing: -0.048em;
}

#h08 .h08__apoio {
  width: min(100%, 42rem);
  margin: 1.75rem 0 0;
  color: rgb(248 248 246 / 64%);
  font-size: clamp(1rem, 1.18vw, 1.125rem);
  font-weight: 350;
  line-height: 1.5;
  text-wrap: balance;
}

#h08 .h08__acao {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(2rem, 2.8vw, 2.75rem);
}

/* ── Botão: geometria, tipografia, seta e hover do .hero-cta da V1; cor "pretinho" (pedido 17) ── */
#h08 .hero-cta {
  display: inline-flex;
  width: min(22.8rem, 22.65vw);
  min-width: 0;
  min-height: max(48px, min(4.2rem, 4.3vw));
  align-items: center;
  justify-content: center;
  gap: min(1rem, 1.02vw);
  padding: 0.9vw 1.84vw;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(10 10 10 / 78%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    0 0.85rem 2.2rem rgb(0 0 0 / 30%);
  color: var(--white);
  font-size: min(1.0625rem, 1.09vw);
  font-weight: 600;
  letter-spacing: -0.035em;
  text-decoration: none;
  backdrop-filter: blur(0.65rem) saturate(112%);
  transition:
    background-color 180ms var(--ease-out),
    border-color 180ms var(--ease-out),
    transform 180ms var(--ease-out);
}

#h08 .hero-cta svg {
  width: min(1.25rem, 1.28vw);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

#h08 .hero-cta:hover,
#h08 .hero-cta:focus-visible {
  border-color: rgb(255 255 255 / 38%);
  background: #141414;
  transform: translateY(-2px);
}

#h08 .hero-cta:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
}

/* ── Órbitas (V1: .ecosystem-orbit) ────────────────────────── */
#h08 .h08__orbita {
  --orbit-outer-size: clamp(48rem, 66vw, 62rem);
  --orbit-middle-size: clamp(38rem, 52.5vw, 49.5rem);
  --orbit-inner-size: clamp(28rem, 39vw, 37rem);
  --orbit-top: clamp(3.5rem, 4.5vw, 4.5rem);
  position: relative;
  z-index: 1;
  width: min(100%, 72rem);
  height: calc(var(--orbit-top) + var(--orbit-outer-size) * 0.52);
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
}

/* brilho laranja radial sob o globo (V1), mais presente no escuro; não é gradiente chapado de fundo */
#h08 .h08__orbita::before {
  position: absolute;
  z-index: -1;
  right: 14%;
  bottom: -34%;
  left: 14%;
  height: 66%;
  border-radius: 50%;
  background: rgb(255 108 17 / 15%);
  filter: blur(5rem);
  content: "";
  pointer-events: none;
}

#h08 .h08__anel {
  --orbit-size: 44rem;
  position: absolute;
  z-index: 1;
  top: var(--orbit-top);
  left: 50%;
  width: var(--orbit-size);
  height: var(--orbit-size);
  border: 1px solid rgb(248 248 246 / 13%);
  border-radius: 50%;
  transform: translateX(-50%);
}
#h08 .h08__anel--fora { --orbit-size: var(--orbit-outer-size); }
#h08 .h08__anel--meio {
  --orbit-size: var(--orbit-middle-size);
  top: calc(var(--orbit-top) + (var(--orbit-outer-size) - var(--orbit-middle-size)) / 2);
}
#h08 .h08__anel--dentro {
  --orbit-size: var(--orbit-inner-size);
  top: calc(var(--orbit-top) + (var(--orbit-outer-size) - var(--orbit-inner-size)) / 2);
}

#h08 .h08__braco {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  animation: h08-orbita-gira var(--duration) linear infinite;
  transform: rotate(var(--angle));
  will-change: transform;
}
#h08 .h08__anel--meio .h08__braco { animation-direction: reverse; }

#h08 .h08__no {
  position: absolute;
  top: 0;
  left: 50%;
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
}

/* o filho direto do nó contragira para ficar sempre de pé (ícone e pílula) */
#h08 .h08__no > * {
  display: block;
  animation: h08-no-contragira var(--duration) linear infinite;
  transform: rotate(calc(var(--angle) * -1));
  will-change: transform;
}
#h08 .h08__anel--meio .h08__no > * { animation-direction: reverse; }

/* ícone de pilar (REV-11): traço fino laranja no mesmo chip de vidro escuro dos avatares */
#h08 .h08__no--icone {
  width: clamp(2.8rem, 3.5vw, 3.35rem);
  height: clamp(2.8rem, 3.5vw, 3.35rem);
  border: 1px solid rgb(248 248 246 / 16%);
  border-radius: 50%;
  background: linear-gradient(160deg, rgb(255 255 255 / 10%), transparent 60%), var(--surface-dark);
  box-shadow:
    inset 0 0 0 1px rgb(255 108 17 / 6%),
    0 0.5rem 1.6rem rgb(0 0 0 / 40%);
  color: var(--orange-editorial);
}
#h08 .h08__no--icone > svg {
  width: 50%;
  height: 50%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  overflow: visible;
}

/* tag de pilar (REV-11): pílula em caixa alta das tags da V1, tingida para o fundo escuro */
#h08 .h08__no--tag { filter: drop-shadow(0 0.45rem 0.85rem rgb(0 0 0 / 35%)); }
#h08 .h08__tag {
  padding: 0.36rem 0.8rem 0.34rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: clamp(0.62rem, 0.72vw, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
#h08 .h08__tag--laranja {
  border-color: rgb(255 108 17 / 34%);
  background: linear-gradient(rgb(255 108 17 / 15%), rgb(255 108 17 / 15%)), var(--black);
  color: var(--orange-editorial);
}
#h08 .h08__tag--neutra {
  border-color: rgb(248 248 246 / 16%);
  background: var(--surface-dark);
  color: rgb(248 248 246 / 80%);
}

#h08 .h08__globo {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 50%;
  width: clamp(24rem, 36vw, 33rem);
  height: clamp(12rem, 18vw, 16.5rem);
  transform: translateX(-50%);
  pointer-events: none;
}

@keyframes h08-orbita-gira {
  from { transform: rotate(var(--angle)); }
  to { transform: rotate(calc(var(--angle) + 360deg)); }
}

@keyframes h08-no-contragira {
  from { transform: rotate(calc(var(--angle) * -1)); }
  to { transform: rotate(calc((var(--angle) + 360deg) * -1)); }
}

/* ── Cortes do botão (V1) ──────────────────────────────────── */
@media (max-width: 1050px) {
  #h08 .hero-cta {
    width: min(22.8rem, calc(100% - 2rem));
    min-height: 4rem;
    gap: 0.9rem;
    padding: 0.85rem 1.6rem;
    font-size: 1rem;
  }
  #h08 .hero-cta svg { width: 1.15rem; }
}

@media (max-width: 700px) {
  #h08 .hero-cta {
    width: min(100%, 21rem);
    min-height: 3.75rem;
    padding-inline: 1.35rem;
    font-size: 0.96rem;
  }
}

/* ── Celular (valores finais da V1 para o ecossistema) ─────── */
@media (max-width: 640px) {
  #h08 .h08__topo {
    width: calc(100% - 2.5rem);
    padding-top: 3rem;
  }
  #h08 .h08__marca { width: 4.5rem; }
  #h08 .h08__titulo {
    width: min(100%, 22rem);
    margin-top: 1.75rem;
    font-size: clamp(2.2rem, 9.5vw, 2.65rem);
    line-height: 0.96;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  #h08 .h08__apoio {
    width: min(100%, 20.5rem);
    margin-top: 1.35rem;
    font-size: 0.96rem;
    line-height: 1.45;
  }
  #h08 .h08__apoio br { display: none; }
  #h08 .h08__acao { margin-top: 1.75rem; }

  #h08 .h08__orbita {
    --orbit-outer-size: 42rem;
    --orbit-middle-size: 33rem;
    --orbit-inner-size: 24rem;
    --orbit-top: 2.75rem;
    height: calc(var(--orbit-top) + 21rem);
  }
  #h08 .h08__globo { width: 22rem; height: 9rem; }
  #h08 .h08__tag { padding: 0.3rem 0.6rem 0.28rem; font-size: 0.56rem; letter-spacing: 0.07em; }
  #h08 .h08__no--icone { width: 2.45rem; height: 2.45rem; }
}

@media (max-width: 360px) {
  #h08 .hero-cta {
    gap: 0.6rem;
    padding-inline: 1rem;
    font-size: 0.9rem;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  #h08 .h08__braco,
  #h08 .h08__no > * { animation: none; }
  #h08 .hero-cta:hover,
  #h08 .hero-cta:focus-visible { transform: none; }
}