/* =========================================================================
   ATIVAÇÃO DE AVATARES — Experiência Puro Ser
   Tokens (mesma linguagem visual do link-in-bio)
   ========================================================================= */
:root{
  --bg-void:      #05070c;
  --bg-deep:      #0a0f1a;
  --gold:         #b99a5b;
  --gold-soft:    rgba(185,154,91,0.5);
  --silver:       #c7cdd6;
  --off-white:    #e9e5db;
  --ink:          #dfe3e8;
  --ink-dim:      rgba(223,227,232,0.62);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "Manrope", -apple-system, "Segoe UI", sans-serif;

  --edge: 1.25rem;
  --max-w: 36rem;
  --icon-box: 54px;
  --topbar-h: 60px;

  --ease-slow: cubic-bezier(.19,.7,.32,1);
}

@supports (padding: max(0px)){
  :root{ --edge: max(1.25rem, env(safe-area-inset-left)); }
}

*, *::before, *::after{ box-sizing: border-box; }

html{ background: var(--bg-void); color-scheme: dark; }

body{
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg-void);
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration: none; }

:focus-visible{
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* =========================================================================
   CENÁRIO — idêntico ao link-in-bio, para continuidade de universo
   ========================================================================= */
.scene{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 0%, #0d1524 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-void) 0%, var(--bg-deep) 55%, #060a12 100%);
}
#stars{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }

.nebula{
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.22;
  mix-blend-mode: screen;
  will-change: transform;
}
.nebula--one{
  width: 60vmax; height: 60vmax; left: -20vmax; top: -10vmax;
  background: radial-gradient(circle, rgba(120,140,190,0.35), transparent 70%);
  animation: drift-a 90s ease-in-out infinite;
}
.nebula--two{
  width: 50vmax; height: 50vmax; right: -18vmax; top: 8vmax;
  background: radial-gradient(circle, rgba(185,154,91,0.18), transparent 70%);
  animation: drift-b 110s ease-in-out infinite;
}
@keyframes drift-a{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(3vmax, 4vmax); } }
@keyframes drift-b{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(-4vmax, -2vmax); } }

.range{ position: absolute; left: 0; width: 100%; height: auto; }
.range--far{ bottom: 22vh; bottom: 22svh; opacity: 0.55; }
.range--far path{ fill: #0c1220; }
.range--near{ bottom: 16vh; bottom: 16svh; }
.range--near path{ fill: #080c15; }

.mist{
  position: absolute; left: 0; right: 0;
  bottom: 14vh; bottom: 14svh;
  height: 18vh; height: 18svh;
  background: linear-gradient(180deg, transparent, rgba(200,205,215,0.06) 40%, transparent);
  filter: blur(8px);
  animation: mist-drift 40s ease-in-out infinite;
}
@keyframes mist-drift{ 0%,100%{ transform: translateX(-2%); opacity: 0.7; } 50%{ transform: translateX(2%); opacity: 1; } }

.lake{
  position: absolute; left: 0; right: 0; bottom: 0; height: 14svh;
  background: linear-gradient(180deg, #070b13 0%, #04060a 100%);
  overflow: hidden;
}
.lake__reflection{
  position: absolute; top: -6px; left: 50%; width: 2px; height: 46px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--gold-soft), transparent);
  filter: blur(1.5px);
  animation: breathe 7s ease-in-out infinite;
}
.lake__sheen{
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(180,190,205,0.05) 50%, transparent 60%);
  animation: sheen 14s linear infinite;
}
@keyframes sheen{ 0%{ transform: translateX(-30%); } 100%{ transform: translateX(30%); } }

/* =========================================================================
   CONTEÚDO
   ========================================================================= */
.content{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: clamp(2.5rem, 10vh, 5rem) var(--edge) calc(3rem + env(safe-area-inset-bottom, 0px));
  padding-top: calc(var(--topbar-h) + clamp(1.5rem, 6svh, 3rem));
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ---- cabeçalho fixo ---- */
.topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0 var(--edge);
  padding-top: env(safe-area-inset-top, 0px);
  background: rgba(5,7,12,0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(185,154,91,0.14);
}
.topbar__brand{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--off-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__logo{
  flex: none;
  height: 22px;
  width: auto;
  max-width: 22px;
  max-height: 22px;
  display: block;
}
.topbar__brand-accent{
  color: var(--gold);
}
.topbar__nav{
  display: none;
  gap: 1.4rem;
  margin-left: auto;
}
.topbar__nav a{
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  transition: color 0.4s var(--ease-slow);
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine){
  .topbar__nav a:hover{ color: var(--gold); }
}
.topbar__cta{
  display: none;
  flex: none;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  letter-spacing: 0.03em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--off-white);
  white-space: nowrap;
  transition: border-color 0.4s var(--ease-slow), background 0.4s var(--ease-slow);
}
.topbar__cta-icon{
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--gold);
}
@media (hover: hover) and (pointer: fine){
  .topbar__cta:hover{ background: rgba(185,154,91,0.12); }
}
.topbar__toggle{
  margin-left: auto;
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}
.topbar__toggle span{
  display: block;
  width: 18px;
  height: 1px;
  background: var(--off-white);
  transition: transform 0.3s var(--ease-slow), opacity 0.3s var(--ease-slow);
}
.topbar.nav-open .topbar__toggle span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.topbar.nav-open .topbar__toggle span:nth-child(2){ opacity: 0; }
.topbar.nav-open .topbar__toggle span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.topbar.nav-open .topbar__nav{
  display: flex;
  position: fixed;
  top: var(--topbar-h);
  left: 0; right: 0;
  flex-direction: column;
  gap: 0;
  margin: 0;
  background: rgba(5,7,12,0.96);
  border-bottom: 1px solid rgba(185,154,91,0.14);
  padding: 0.5rem var(--edge) 1rem;
}
.topbar.nav-open .topbar__nav a{
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

@media (min-width: 720px){
  .topbar__nav{ display: flex; }
  .topbar__cta{ display: inline-flex; }
  .topbar__toggle{ display: none; }
}

.back{
  align-self: flex-start;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0.75;
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
  transition: opacity 0.5s var(--ease-slow), color 0.5s var(--ease-slow);
}
@media (hover: hover) and (pointer: fine){
  .back:hover{ opacity: 1; color: var(--gold); }
}

/* ---- marca / topo — campo de luz, ícone do botão Ativação de Avatares ---- */
.mark{ width: 44px; height: 44px; margin-bottom: 1.5rem; }
.mark svg{ width: 100%; height: 100%; overflow: visible; }
.mark__dot{ fill: var(--silver); }
.mark__dot--core{ fill: var(--gold); animation: breathe 6s ease-in-out infinite; }
.mark__line{
  stroke: rgba(199,205,214,0.5);
  stroke-width: 1;
  stroke-linecap: round;
}
@keyframes breathe{ 0%,100%{ opacity: 0.55; } 50%{ opacity: 1; } }

.mark--logo{
  width: 52px;
  height: auto;
}
.mark--logo img{
  width: 100%;
  height: auto;
  display: block;
  opacity: 0.95;
  animation: breathe 7s ease-in-out infinite;
}

.eyebrow{
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.eyebrow--large{
  font-size: clamp(1rem, 3.6vw, 1.25rem);
  letter-spacing: 0.16em;
}

.page-title{
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 10vw, 3.4rem);
  letter-spacing: 0.02em;
  color: var(--off-white);
  line-height: 1.1;
}

.page-subtitle{
  margin: 0.7rem 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--ink-dim);
  font-weight: 400;
}

.masthead{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.masthead__tagline{
  margin: 1.2rem auto 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.95rem, 3vw, 1.05rem);
  color: var(--ink-dim);
  max-width: 42ch;
  line-height: 1.6;
}

/* ---- painéis de texto (glass cards) ---- */
.panel{
  width: 100%;
  margin-top: clamp(2.5rem, 7svh, 4rem);
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  text-align: left;
  padding: 1.5rem 1.4rem;
  border-radius: 16px;
  border: 1px solid rgba(185,154,91,0.28);
  background: linear-gradient(150deg, rgba(30,36,48,0.5), rgba(10,14,22,0.5));
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 14px 30px -18px rgba(0,0,0,0.7);
}

.panel__icon{
  flex: none;
  width: 40px;
  height: 40px;
  margin-top: 0.15rem;
}
.panel-ico__ring{ fill: none; stroke: rgba(199,205,214,0.45); stroke-width: 0.8; }
.panel-ico__ring--dim{ stroke: rgba(185,154,91,0.4); }
.panel-ico__line{ stroke: var(--gold); stroke-width: 0.9; stroke-linecap: round; fill: none; }
.panel-ico__line--soft{ stroke: rgba(199,205,214,0.4); }
.panel-ico__core{ fill: var(--gold); }

.panel__text{
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.panel__text p{
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--ink-dim);
  font-weight: 300;
}
.panel__text em{
  font-style: normal;
  color: var(--off-white);
  font-weight: 500;
}

/* ---- como funciona ---- */
.format{
  width: 100%;
  margin-top: clamp(2.5rem, 7svh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.section-label{
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.format__dot{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px 1px var(--gold-soft);
  flex: none;
  margin-top: 0.5em;
}

.format__caption{
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-dim);
  font-weight: 300;
  text-align: center;
}

.format__note{
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-dim);
  font-weight: 300;
  text-align: left;
}

/* ---- "para quem é": três razões, cada uma com um fio dourado à esquerda ---- */
.reasons{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: left;
}
.reasons li{
  padding-left: 1.1rem;
  border-left: 1px solid rgba(185,154,91,0.35);
}
.reasons__title{
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--off-white);
  line-height: 1.4;
}
.reasons__desc{
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-dim);
  font-weight: 300;
}

/* ---- formações: lista enxuta, mesma assinatura visual do "como funciona" ---- */
.formations{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: left;
}
.formations li{
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-dim);
  font-weight: 300;
}
.formations strong{ color: var(--off-white); font-weight: 500; }

/* ---- citação/lembrete, entre seções ---- */
.reminder{
  margin: clamp(2rem, 6svh, 3rem) 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.9rem, 3vw, 1rem);
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 32ch;
}

/* ---- chamada para ação ---- */
.cta{
  margin-top: clamp(2rem, 6svh, 3rem);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  border: 1px solid var(--gold);
  color: var(--off-white);
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  background: linear-gradient(150deg, rgba(185,154,91,0.14), rgba(185,154,91,0.04));
  box-shadow: 0 0 24px -8px rgba(185,154,91,0.35);
  transition: transform 0.6s var(--ease-slow), box-shadow 0.6s var(--ease-slow), background 0.6s var(--ease-slow);
}
.cta__arrow{
  color: var(--gold);
  transition: transform 0.6s var(--ease-slow);
}
@media (hover: hover) and (pointer: fine){
  .cta:hover{
    transform: translateY(-2px);
    box-shadow: 0 0 30px -6px rgba(185,154,91,0.5);
    background: linear-gradient(150deg, rgba(185,154,91,0.2), rgba(185,154,91,0.06));
  }
  .cta:hover .cta__arrow{ transform: translateX(4px); }
}
.cta:focus-visible{
  transform: translateY(-2px);
}

/* ---- rodapé ---- */
.colophon{
  margin-top: clamp(3rem, 8svh, 4.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(223,227,232,0.5);
  overflow: visible;
}
.colophon p{ margin: 0; }
.colophon__logo{
  display: block;
  flex: none;
  height: 1.5em;
  width: auto;
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
  opacity: 0.92;
}

/* ---- avatares ativados: tira de fotos ---- */
.avatars{
  width: 100%;
  margin-top: clamp(2.5rem, 7svh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.avatars__row{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}
.avatars__slot{
  position: relative;
  flex: none;
  width: clamp(38px, 10vw, 52px);
  height: clamp(38px, 10vw, 52px);
  border-radius: 50%;
  border: 2px solid var(--bg-void);
  overflow: hidden;
  background: var(--bg-deep);
  margin-left: clamp(-15px, -4vw, -10px);
}
.avatars__slot:first-child{ margin-left: 0; }
/* cada círculo por cima do anterior, criando o efeito de corrente conectada */
.avatars__slot:nth-child(1){ z-index: 1; }
.avatars__slot:nth-child(2){ z-index: 2; }
.avatars__slot:nth-child(3){ z-index: 3; }
.avatars__slot:nth-child(4){ z-index: 4; }
.avatars__slot:nth-child(5){ z-index: 5; }
/* posição central levemente maior, dando profundidade à fileira */
.avatars__slot:nth-child(3){
  width: clamp(46px, 13vw, 62px);
  height: clamp(46px, 13vw, 62px);
  border-color: var(--bg-void);
}
.avatars__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.1s var(--ease-slow);
}
.avatars__img.is-active{ opacity: 1; }

.avatars__label{
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--off-white);
}
.avatars__caption{
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 38ch;
  line-height: 1.6;
}

.format__note--center{ text-align: center; max-width: 46ch; }

/* ---- a jornada: passos numerados ---- */
.steps{
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  text-align: left;
}
.steps__item{
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.steps__num{
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(185,154,91,0.4);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold);
}
.steps__body h3{
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--off-white);
}
.steps__body p{
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-dim);
  font-weight: 300;
}

/* ---- depoimentos: carrossel ---- */
.testimonials{
  width: 100%;
  margin-top: clamp(2.5rem, 7svh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
/* =========================================================================
   MARQUEE — rolagem contínua, de ponta a ponta da tela, com esfumaçado
   nas bordas. Usada nos depoimentos e nas três grades de nível.
   ========================================================================= */
.marquee{
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, black 48px, black calc(100% - 48px), transparent 100%);
}
.marquee__track{
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  width: max-content;
  padding: 0 var(--edge);
  animation-name: marquee-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  /* a duração real é calculada em JS, proporcional à largura do conteúdo,
     para que o ritmo pareça igual não importa quantos itens existam */
  animation-duration: 60s;
}
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (hover: hover) and (pointer: fine){
  .marquee:hover .marquee__track{ animation-play-state: paused; }
}
.marquee:focus-within .marquee__track,
.marquee.is-paused .marquee__track{
  animation-play-state: paused;
}
.marquee--level{ margin-top: 1.2rem; }

/* ---- vídeo em destaque (apresentação e comunidade) ---- */
.featured-video{
  width: 100%;
  margin-top: clamp(2rem, 6svh, 3rem);
  display: flex;
  justify-content: center;
}
.featured-video .slide__video{ max-width: 360px; }

/* ---- cartão de depoimento ---- */
.slide{
  flex: none;
  width: min(78vw, 300px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: 1.6rem 1.4rem;
  border-radius: 16px;
  border: 1px solid rgba(185,154,91,0.28);
  background: linear-gradient(150deg, rgba(30,36,48,0.5), rgba(10,14,22,0.5));
  text-align: center;
}
.slide__video{
  position: relative;
  width: 100%;
  max-width: 280px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #000;
}
.slide__video img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: opacity 0.4s var(--ease-slow);
}
.slide__play{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--off-white);
  font-size: 1.1rem;
  background: radial-gradient(circle, rgba(185,154,91,0.35), transparent 60%);
}
.slide__play::before{
  content: "";
  position: absolute;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(5,7,12,0.5);
}
@media (hover: hover) and (pointer: fine){
  .slide__video:hover img{ opacity: 1; }
}
.slide__quote{
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--off-white);
  line-height: 1.5;
  max-width: 34ch;
}
.slide__name{
  margin: 0;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  font-weight: 500;
}
.slide__tenure{
  margin: 0;
  font-size: 0.72rem;
  color: var(--ink-dim);
  font-weight: 300;
}

/* ---- cartão de imagem dos níveis ---- */
.level-carousel__slide{
  flex: none;
  width: min(52vw, 220px);
  display: flex;
  justify-content: center;
}
.level-carousel__slide img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(185,154,91,0.3);
}

/* ---- vídeo tocando embutido, no lugar da miniatura ---- */
.slide__video--playing{
  cursor: default;
  background: #000;
}
.slide__video--playing iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.slide__stop{
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(185,154,91,0.5);
  background: rgba(5,7,12,0.75);
  color: var(--off-white);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

/* ---- níveis (I, II, III) ---- */
.level{
  width: 100%;
  margin-top: clamp(3rem, 8svh, 4.5rem);
  padding-top: clamp(2rem, 6svh, 3rem);
  border-top: 1px solid rgba(185,154,91,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  scroll-margin-top: calc(var(--topbar-h) + 1rem);
}
.level__title{
  margin: 0.4rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 6vw, 2.2rem);
  color: var(--off-white);
  line-height: 1.15;
}
.level__intro{
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink-dim);
  font-weight: 300;
  max-width: 42ch;
}
.level__text{
  width: 100%;
  margin-top: clamp(2rem, 6svh, 3rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  text-align: left;
}
.level__text p{
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-dim);
  font-weight: 300;
}
.level__text em{ font-style: normal; color: var(--off-white); font-weight: 500; }
.level__lead{
  font-family: var(--font-display) !important;
  font-style: italic;
  color: var(--off-white) !important;
  font-size: 0.95rem !important;
}
.level__access{
  align-self: flex-start;
  margin: clamp(2rem, 6svh, 3rem) 0 0;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.benefits{
  width: 100%;
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  text-align: left;
}
.benefits li{
  padding-left: 1.1rem;
  border-left: 1px solid rgba(185,154,91,0.3);
}
.benefits h3{
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--off-white);
  line-height: 1.35;
}
.benefits p{
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--ink-dim);
  font-weight: 300;
}

/* ---- comunidade ---- */
.community{
  width: 100%;
  margin-top: clamp(3rem, 8svh, 4.5rem);
  padding-top: clamp(2rem, 6svh, 3rem);
  border-top: 1px solid rgba(185,154,91,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.community__lead{
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-dim);
  font-weight: 300;
}
.community__title{
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 6vw, 2.1rem);
  color: var(--off-white);
}
.community__motto{
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-dim);
  max-width: 34ch;
  line-height: 1.6;
}

.cta--secondary{
  border-color: rgba(199,205,214,0.4);
  background: linear-gradient(150deg, rgba(199,205,214,0.1), rgba(199,205,214,0.02));
  box-shadow: none;
}
.cta--secondary .cta__arrow{ color: var(--silver); }
@media (hover: hover) and (pointer: fine){
  .cta--secondary:hover{
    border-color: rgba(199,205,214,0.7);
    box-shadow: 0 0 24px -10px rgba(199,205,214,0.3);
  }
}

/* ---- encerramento ---- */
.closing{
  margin-top: clamp(3rem, 8svh, 4.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.closing p{
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ink-dim);
  font-weight: 300;
}
.closing__final{
  font-family: var(--font-display) !important;
  font-style: italic;
  color: var(--off-white) !important;
  font-size: 0.98rem !important;
}

/* ---- rodapé completo (redes sociais) ---- */
.colophon--full{
  flex-direction: column;
  gap: 0.7rem;
  text-transform: none;
  letter-spacing: 0.02em;
}
.colophon--full .colophon__logo{ margin-bottom: 0.2rem; }
.colophon__social{
  display: flex;
  gap: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
}
.colophon__social a{ color: var(--ink-dim); transition: color 0.3s var(--ease-slow); }
@media (hover: hover) and (pointer: fine){
  .colophon__social a:hover{ color: var(--gold); }
}

/* =========================================================================
   RESPONSIVO
   ========================================================================= */
@media (max-width: 359px){
  :root{ --edge: 1rem; }
  .page-title{ font-size: 2rem; }
  .panel{ padding: 1.2rem 1.1rem; gap: 0.85rem; }
  .panel__text p{ font-size: 0.85rem; }
}

@media (min-width: 720px){
  :root{ --max-w: 40rem; }
  .panel{ padding: 2rem 2rem; gap: 1.4rem; }
  .panel__text p{ font-size: 0.95rem; }
  .features li{ font-size: 0.92rem; }
  .slide__video{ max-width: 360px; }
}

@media (min-width: 1440px){
  :root{ --max-w: 44rem; }
}

@media (min-resolution: 2dppx){
  .panel-ico__ring, .mark__ring, .mark__line{
    shape-rendering: geometricPrecision;
  }
}

/* =========================================================================
   ACESSIBILIDADE — reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}