:root {
  --navy: #0d1540;
  --navy2: #1a2560;
  --navy3: #050b1e;
  --pink: #ff3c9a;
  --blue: #4d9fff;
  --white: #ffffff;
  --gray: #a0aec0;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--navy3);
  color: var(--white);
  font-family: 'Arial Black', 'Helvetica Neue', sans-serif;
}

/* ── PROGRESS BAR ── */
#progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--blue));
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
}

/* ── BOTÃO DE MÚSICA ── */
#music-toggle {
  position: fixed;
  left: 54px;
  bottom: 30px;
  z-index: 9500; /* acima da moldura (9000), sempre clicável */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(13,21,64,0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
#music-toggle:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: var(--pink);
  background: rgba(13,21,64,0.78);
}
#music-toggle:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
#music-toggle svg { width: 22px; height: 22px; }
.mt-icon { display: none; }
#music-toggle:not(.muted) .mt-on { display: block; }
#music-toggle.muted .mt-off { display: block; color: rgba(255,255,255,0.6); }
/* tocando: borda rosa + anel pulsante */
#music-toggle:not(.muted) {
  border-color: rgba(255,60,154,0.6);
  animation: musicPulse 2.2s ease-out infinite;
}
@keyframes musicPulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,60,154,0.38); }
  70%  { box-shadow: 0 0 0 13px rgba(255,60,154,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,60,154,0); }
}
@media (prefers-reduced-motion: reduce) {
  #music-toggle:not(.muted) { animation: none; }
}
@media (max-width: 900px) {
  #music-toggle { left: 44px; bottom: 24px; width: 42px; height: 42px; }
}

/* ── MOLDURA GLOBAL ── */
/* ── TRANSITION OVERLAY ── */
#transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  pointer-events: none;
  clip-path: circle(0% at 50% 50%);
  background: radial-gradient(circle at 50% 50%,
    #1a2560 0%,
    #0d1540 40%,
    #050b1e 100%);
  will-change: clip-path;
}

/* ── NAV DOTS ── */
#nav-dots {
  position: fixed;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nav-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid rgba(255,255,255,0.3);
}
.nav-dot.active {
  background: var(--pink);
  transform: scale(1.5);
  border-color: var(--pink);
}
.nav-dot:hover { background: rgba(255,255,255,0.6); }

/* ── SLIDES CONTAINER ── */
#slides-container {
  position: fixed;
  inset: 0;
  border-radius: 10px;
  overflow: hidden;
}

/* ── SCENE BASE ── */
.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 60px 40px;
}
.scene.is-active {
  display: flex;
}

/* ── STICKERS DECORATIVOS (slides 1–5) ── */
.scene-sticker {
  position: absolute;
  width: clamp(90px, 11vw, 165px);
  height: auto;
  z-index: 6;
  pointer-events: none;
  opacity: 0.92;
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.45));
  transform: rotate(var(--st-rot, 0deg));
  animation: stickerFloat 6s ease-in-out infinite;
}
.scene-sticker.st-tl { top: var(--st-off, 24px);    left: var(--st-off, 24px);  }
.scene-sticker.st-tr { top: var(--st-off, 24px);    right: var(--st-off, 24px); }
.scene-sticker.st-bl { bottom: var(--st-off, 24px); left: var(--st-off, 24px);  }
.scene-sticker.st-br { bottom: var(--st-off, 24px); right: var(--st-off, 24px); }

/* Flutuação sutil — entra na rotação base via translate */
@keyframes stickerFloat {
  0%,100% { transform: rotate(var(--st-rot, 0deg)) translateY(0);     }
  50%     { transform: rotate(var(--st-rot, 0deg)) translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .scene-sticker { animation: none; }
}

/* ── SHADER CANVAS ── */
.hero-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/* ── HERO ── */
.scene-hero {
  /* background removido: o shader canvas cobre 100% da cena.
     O body (--navy3) serve de fallback se WebGL não estiver disponível. */
  z-index: 1;
}
.stars { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--dur, 3s) ease-in-out infinite;
  opacity: var(--op, 0.5);
}
@keyframes twinkle {
  0%, 100% { opacity: var(--op, 0.5); }
  50% { opacity: 0.05; }
}
.hero-frame {
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(30, 80, 160, 0.6);
  border-radius: 18px;
  pointer-events: none;
  opacity: 0.8;
  box-shadow: 0 0 18px rgba(30, 80, 180, 0.25), inset 0 0 18px rgba(20, 60, 140, 0.1);
}
.hero-side-text {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
  font-family: Arial, sans-serif;
  font-weight: 400;
}
.hero-content {
  text-align: center;
  position: relative;
  z-index: 2;
  user-select: none;
}
.hero-rocket {
  display: block;
  margin-bottom: 6px;
}
.hero-rocket-svg {
  display: block;
  margin: 0 auto;
  width: 230px;
  height: auto;
  filter:
    drop-shadow(0 0 28px rgba(255, 130, 0, 0.5))
    drop-shadow(0 0 60px rgba(255, 80, 0, 0.2));
  pointer-events: none;
}

/* ── Chama: oscila no eixo Y como fogo real ── */
.r-flames {
  transform-origin: 140px 405px;
  animation: rFlameWave 0.22s ease-in-out infinite alternate;
}
@keyframes rFlameWave {
  from { transform: scaleY(1)    scaleX(1);    }
  to   { transform: scaleY(1.16) scaleX(0.88); }
}

/* ── Fumaça: pulsa e deriva levemente ── */
.r-smoke ellipse {
  animation: rSmokePulse 3.8s ease-in-out infinite;
}
.r-smoke ellipse:nth-child(2) { animation-delay: -1.2s; }
.r-smoke ellipse:nth-child(3) { animation-delay: -2.5s; }
.r-smoke ellipse:nth-child(4) { animation-delay: -0.6s; }
.r-smoke ellipse:nth-child(5) { animation-delay: -3.2s; }
.r-smoke ellipse:nth-child(6) { animation-delay: -1.8s; }
@keyframes rSmokePulse {
  0%, 100% { transform: translateY(0)   scale(1);    opacity: 1;    }
  50%      { transform: translateY(-7px) scale(1.07); opacity: 0.75; }
}
.hero-logo-img {
  display: block;
  width: clamp(340px, 50vw, 720px);
  height: auto;
  margin: 0 auto;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(255,255,255,0.2)) drop-shadow(0 2px 12px rgba(0,0,0,0.4));
}
/* Wrapper: SEM overflow hidden — apenas movemos este elemento com GSAP.
   Assim o background-clip: text do .hub-letter nunca cria layer GPU opaco. */
.hub-letter-wrap {
  display: inline-block;
  line-height: 1;
  vertical-align: top;
}
/* Letra: branco sólido — sem background-clip, sem filter, sem GPU layer */
.hub-letter {
  display: block;
  color: #ffffff;
  line-height: 0.9;
  padding-bottom: 0.08em;
  text-shadow:
    0 0 40px rgba(255,255,255,0.25),
    0 2px 8px rgba(0,0,0,0.35);
}
/* Glow pulsante via text-shadow — não promove GPU layer */
@keyframes hubLetterGlow {
  0%, 100% {
    text-shadow: 0 0 40px rgba(255,255,255,0.25), 0 2px 8px rgba(0,0,0,0.35);
  }
  50% {
    text-shadow:
      0 0 30px rgba(255,255,255,0.6),
      0 0 60px rgba(255,60,154,0.45),
      0 0 100px rgba(77,159,255,0.25),
      0 2px 8px rgba(0,0,0,0.2);
  }
}
.hub-letter.glow-active {
  animation: hubLetterGlow 3s ease-in-out infinite;
}

/* ── COMETS ── */
.comet {
  position: absolute;
  height: 2px;
  border-radius: 100px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(100, 200, 255, 0.10) 25%,
    rgba(140, 220, 255, 0.55) 70%,
    rgba(190, 235, 255, 0.90) 100%);
  pointer-events: none;
  left: -220px;
  animation: cometFly linear infinite;
}
/* Cabeça brilhante: azul claro */
.comet::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #c8ecff;
  box-shadow: 0 0 5px 2px rgba(100, 200, 255, 0.85);
}
@keyframes cometFly {
  0%   { transform: translateX(0)      rotate(-18deg); opacity: 0;   }
  6%   { opacity: 1; }
  88%  { opacity: 0.75; }
  100% { transform: translateX(130vw)  rotate(-18deg); opacity: 0;   }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .comet              { animation: none; display: none; }
  .star               { animation: none; opacity: 0.4; }
  .r-flames           { animation: none; }
  .r-smoke ellipse    { animation: none; }
}
.hero-tagline {
  margin-top: 24px;
  font-size: clamp(20px, 2.8vw, 34px);
  letter-spacing: 9px;
  color: #5ecfff;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(60, 180, 255, 0.7), 0 0 40px rgba(40, 140, 255, 0.35);
}
.hero-sub {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 3px;
  color: rgba(235, 245, 255, 0.82);
  font-family: Arial, sans-serif;
  font-weight: 400;
}
.scroll-hint {
  display: none;
}

/* ── QUEM SOMOS ── */
.scene-about {
  background: linear-gradient(135deg, #0f1b4e 0%, #1a2560 100%);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 80px;
  align-items: center;
}
/* ── Fundo animado: Neural Vortex (WebGL, interativo) ── */
.about-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.about-neuro {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  opacity: 0.9;
}
/* Scrim sutil: garante contraste do texto (à direita) sobre o vórtice */
.about-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 56% 80% at 76% 50%, rgba(7,12,38,0.55) 0%, rgba(7,12,38,0.12) 55%, transparent 78%),
    linear-gradient(180deg, rgba(7,12,38,0.30) 0%, transparent 22%, transparent 78%, rgba(7,12,38,0.34) 100%);
}
/* Conteúdo acima do fundo */
.scene-about > .about-logo-col,
.scene-about > .about-divider,
.scene-about > .about-text-col { position: relative; z-index: 1; }
.about-logo-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hub-wordmark {
  font-size: clamp(36px, 5vw, 70px);
  font-weight: 900;
  letter-spacing: -3px;
  border: 2px solid white;
  border-radius: 100px;
  padding: 10px 28px;
  display: inline-block;
}
.wearewedo {
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.5);
  font-family: Arial, sans-serif;
}
.about-since {
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.25);
  font-family: Arial, sans-serif;
}
.about-divider {
  width: 1px;
  height: 240px;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.25), transparent);
  flex-shrink: 0;
}
.about-text-col { max-width: 520px; }
/* Estado inicial — GSAP anima tudo ao entrar; nada deve piscar */
.scene-about .about-logo-col,
.scene-about .about-divider,
.scene-about .about-label,
.scene-about .about-heading,
.scene-about .about-item { opacity: 0; }
.about-label {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--pink);
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
  font-weight: 700;
}
.about-heading {
  font-size: clamp(15px, 2.2vw, 22px);
  font-weight: 900;
  margin-bottom: 28px;
  line-height: 1.3;
}
.about-items { display: flex; flex-direction: column; gap: 16px; }
.about-item {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255,255,255,0.8);
  font-family: Arial, sans-serif;
  font-weight: 400;
  padding-left: 18px;
  border-left: 2px solid var(--pink);
}
.about-item b { color: white; }

/* ── MANIFESTO ── */
.scene-manifesto {
  background: #050b1e;
  min-height: 100vh;
  align-items: center;
  justify-content: flex-start;
  padding: 80px;
}
.manifesto-bg {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(8, 1fr);
  overflow: hidden;
}
.manifesto-tile {
  background-image: url('../assets/images/slide03.jpg');
  background-size: 1400% 800%; /* 14 cols × 100%, 8 rows × 100% */
  opacity: 0;
  will-change: transform, opacity;
}
/* Gradiente animado em cima da foto — efeito luz de palco */
.manifesto-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(5,11,30,0.92)   0%,
    rgba(30,0,80,0.65)   35%,
    rgba(0,60,160,0.50)  60%,
    rgba(5,11,30,0.85)  100%
  );
  background-size: 300% 300%;
  animation: manifestoGradient 9s ease-in-out infinite;
}
@keyframes manifestoGradient {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}
/* Raios de luz estilo palco — pseudoelemento */
.manifesto-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 70% 80%, rgba(0,180,255,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 30% 50% at 85% 90%, rgba(255,60,154,0.12) 0%, transparent 70%);
  animation: lightBeams 6s ease-in-out infinite alternate;
}
@keyframes lightBeams {
  from { opacity: 0.6; transform: scaleX(1);    }
  to   { opacity: 1.0; transform: scaleX(1.12); }
}

/* Estado inicial — GSAP anima ao entrar */
.scene-manifesto .manifesto-hub-icon,
.scene-manifesto .manifesto-title,
.scene-manifesto .manifesto-desc { opacity: 0; }
.manifesto-content { position: relative; z-index: 2; max-width: 860px; }
.manifesto-hub-icon {
  width: 52px; height: 52px;
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 32px;
}
.manifesto-title {
  font-size: clamp(34px, 6.5vw, 84px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 28px;
}
.manifesto-title .pink { color: var(--pink); }
.manifesto-desc {
  font-size: clamp(12px, 1.3vw, 16px);
  line-height: 1.7;
  color: rgba(255,255,255,0.65);
  font-family: Arial, sans-serif;
  font-weight: 400;
  max-width: 560px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── ECOSSISTEMA ── */
.scene-eco {
  background: radial-gradient(ellipse 80% 70% at 50% 50%, #0f1d50 0%, #070e2a 60%, #030818 100%);
  flex-direction: column;
  gap: 20px;
  padding: 44px 64px 36px;
  overflow: hidden;
}
/* scene-3 é denso: stickers de canto menores, sem cobrir o conteúdo */
.scene-eco .scene-sticker { width: clamp(62px, 6.6vw, 104px); opacity: 0.85; }

/* Raios de spotlight saindo do centro */
.eco-bg-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    conic-gradient(from 180deg at 50% 52%,
      transparent 0deg,
      rgba(255,60,154,0.04) 12deg,
      transparent 24deg,
      transparent 60deg,
      rgba(77,159,255,0.05) 72deg,
      transparent 84deg,
      transparent 120deg,
      rgba(255,60,154,0.03) 132deg,
      transparent 144deg,
      transparent 180deg,
      rgba(77,159,255,0.05) 192deg,
      transparent 204deg,
      transparent 240deg,
      rgba(255,60,154,0.04) 252deg,
      transparent 264deg,
      transparent 300deg,
      rgba(77,159,255,0.04) 312deg,
      transparent 324deg,
      transparent 360deg);
  animation: raysSpin 40s linear infinite;
}
@keyframes raysSpin { to { transform: rotate(360deg); } }

/* Header */
.eco-header { text-align: center; position: relative; z-index: 2; }
.eco-eyebrow {
  font-size: 10px;
  letter-spacing: 5px;
  color: var(--pink);
  font-family: Arial, sans-serif;
  font-weight: 700;
  margin-bottom: 6px;
  opacity: 0;
}
.eco-title {
  font-size: clamp(28px, 4.4vw, 58px);
  font-weight: 900;
  letter-spacing: 9px;
  text-align: center;
  text-transform: uppercase;
  opacity: 0;
}

/* Grid */
.eco-grid {
  display: grid;
  grid-template-columns: 1fr 270px 1fr;
  gap: 28px;
  align-items: center;
  width: 100%;
  max-width: 1380px;
  position: relative;
  z-index: 2;
}
.eco-col { display: flex; flex-direction: column; gap: 10px; }
.eco-col-right { text-align: right; align-items: flex-end; }

.eco-group-label {
  font-size: 10.5px;
  letter-spacing: 3.5px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 4px;
  opacity: 0.7;
}
.eco-label-pink { color: var(--pink); }
.eco-label-blue { color: var(--blue); }

.eco-item {
  font-size: 15px;
  color: rgba(255,255,255,0.75);
  font-family: Arial, sans-serif;
  padding: 12px 18px;
  border-radius: 7px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  transition: background 0.25s, color 0.25s, transform 0.25s;
  cursor: default;
  opacity: 0;
}
.eco-item-pink {
  border-left-color: rgba(255,60,154,0.4);
}
.eco-item-blue {
  border-right-color: rgba(77,159,255,0.4);
}
.eco-item-pink:hover {
  background: rgba(255,60,154,0.12);
  border-left-color: var(--pink);
  color: #fff;
  transform: translateX(4px);
}
.eco-item-blue:hover {
  background: rgba(77,159,255,0.12);
  border-right-color: var(--blue);
  color: #fff;
  transform: translateX(-4px);
}

/* Centro orbital */
.eco-center {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Linha horizontal que conecta as colunas */
.eco-beam-h {
  position: absolute;
  left: -74px; right: -74px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,60,154,0.5) 30%,
    rgba(255,255,255,0.6) 50%,
    rgba(77,159,255,0.5) 70%,
    transparent 100%);
  transform: scaleX(0);
  opacity: 0;
}
.eco-hub-circle {
  width: 212px; height: 212px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  opacity: 0;
}
/* Anel principal com glow */
.eco-hub-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,60,154,0.8);
  box-shadow:
    0 0 18px rgba(255,60,154,0.5),
    0 0 40px rgba(255,60,154,0.2),
    inset 0 0 18px rgba(255,60,154,0.08);
  animation: hubPulse 3s ease-in-out infinite;
}
@keyframes hubPulse {
  0%,100% { box-shadow: 0 0 18px rgba(255,60,154,0.5), 0 0 40px rgba(255,60,154,0.2), inset 0 0 18px rgba(255,60,154,0.08); }
  50%      { box-shadow: 0 0 28px rgba(255,60,154,0.8), 0 0 70px rgba(255,60,154,0.35), inset 0 0 28px rgba(255,60,154,0.15); }
}
/* Órbitas rotativas */
.eco-orbit {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.15);
  pointer-events: none;
}
.eco-orbit-1 {
  width: 252px; height: 252px;
  animation: spinSlow 18s linear infinite;
}
.eco-orbit-2 {
  width: 296px; height: 296px;
  border-color: rgba(77,159,255,0.12);
  animation: spinSlow 30s linear infinite reverse;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Ponto de interseção nas órbitas */
.eco-orbit-1::after {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 8px var(--pink);
}
.eco-orbit-2::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 50%;
  transform: translateX(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 8px var(--blue);
}

.eco-hub-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  z-index: 1;
  background: radial-gradient(circle, rgba(255,60,154,0.12) 0%, transparent 70%);
  width: 100%; height: 100%;
  border-radius: 50%;
  justify-content: center;
}
.eco-hub-label {
  font-size: 45px;
  font-weight: 900;
  letter-spacing: -2px;
  text-shadow: 0 0 20px rgba(255,60,154,0.6);
}
.eco-hub-sub {
  font-size: 8px;
  letter-spacing: 3px;
  color: rgba(255,255,255,0.5);
  font-family: Arial, sans-serif;
  text-transform: uppercase;
}

/* Categorias */
.eco-categories {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1380px;
  width: 100%;
  position: relative;
  z-index: 2;
}
.eco-cat {
  border-radius: 8px;
  padding: 19px 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.9);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  opacity: 0;
  transition: transform 0.25s, box-shadow 0.25s;
}
.eco-cat:hover { transform: translateY(-2px); }
.eco-cat-icon { font-size: 13px; }
.eco-cat-1 {
  background: linear-gradient(135deg, rgba(255,60,154,0.2), rgba(255,60,154,0.06));
  border: 1px solid rgba(255,60,154,0.4);
}
.eco-cat-1:hover { box-shadow: 0 4px 20px rgba(255,60,154,0.25); }
.eco-cat-2 {
  background: linear-gradient(135deg, rgba(77,159,255,0.2), rgba(77,159,255,0.06));
  border: 1px solid rgba(77,159,255,0.4);
}
.eco-cat-2:hover { box-shadow: 0 4px 20px rgba(77,159,255,0.25); }
.eco-cat-3 {
  background: linear-gradient(135deg, rgba(130,80,255,0.2), rgba(130,80,255,0.06));
  border: 1px solid rgba(130,80,255,0.4);
}
.eco-cat-3:hover { box-shadow: 0 4px 20px rgba(130,80,255,0.25); }
.eco-cat-4 {
  background: linear-gradient(135deg, rgba(0,200,180,0.2), rgba(0,200,180,0.06));
  border: 1px solid rgba(0,200,180,0.4);
}
.eco-cat-4:hover { box-shadow: 0 4px 20px rgba(0,200,180,0.2);
}

/* ── PROPOSTA ── */
.scene-proposta {
  background: #050b1e;
  height: 100vh;
  min-height: 100vh;
  align-items: stretch;
  justify-content: center;
  padding: 0 80px;
  overflow: hidden;
}
.proposta-layout {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100vh;
  gap: 0;
}
/* Fundo: mesma imagem do slide 3 */
.proposta-bg {
  position: absolute;
  inset: 0;
  background: url('../assets/images/slide03.jpg') center/cover no-repeat;
  opacity: 0.45;
  transform: scale(1.04);
  animation: manifestoBgPulse 12s ease-in-out infinite alternate;
}
/* Gradiente animado idêntico ao manifesto */
.proposta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    125deg,
    rgba(5,11,30,0.92)   0%,
    rgba(30,0,80,0.65)   35%,
    rgba(0,60,160,0.50)  60%,
    rgba(5,11,30,0.85)  100%
  );
  background-size: 300% 300%;
  animation: manifestoGradient 9s ease-in-out infinite;
}
.proposta-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 70% 80%, rgba(0,180,255,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 30% 50% at 85% 90%, rgba(255,60,154,0.12) 0%, transparent 70%);
  animation: lightBeams 6s ease-in-out infinite alternate;
}
.proposta-content {
  position: relative;
  z-index: 2;
  flex: 0 0 52%;
}
.proposta-video-wrap {
  flex: 0 0 48%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  isolation: isolate;
}
.proposta-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
.proposta-tag {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--pink);
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
  font-weight: 700;
  opacity: 0;
}
.proposta-title {
  font-size: clamp(30px, 5.5vw, 70px);
  font-weight: 900;
  line-height: 1.05;
  text-transform: uppercase;
  opacity: 0;
}
.proposta-title .pink { color: var(--pink); }

/* ── CLIENTES CAROUSEL ── */
.scene-clients {
  background:
    radial-gradient(ellipse 60% 70% at 50% 55%, rgba(255,60,154,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 100% 90% at 50% 50%, #131d56 0%, #0a1240 50%, #050b1e 100%);
  flex-direction: column;
  gap: 0;
  padding: 52px 0 36px;
  overflow: hidden;
}

/* ── Fundo elegante do slide Clientes ── */
.clients-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* Raios radiando do centro (impacto) — giram lentamente, fade no miolo p/ não lavar o carrossel */
.clients-rays {
  position: absolute;
  left: 50%; top: 52%;
  width: 160vmax; height: 160vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg,   rgba(255,60,154,0.055) 8deg,  transparent 20deg,
    transparent 50deg,  rgba(77,159,255,0.065) 60deg, transparent 74deg,
    transparent 110deg, rgba(255,60,154,0.045) 120deg, transparent 134deg,
    transparent 170deg, rgba(77,159,255,0.065) 182deg, transparent 196deg,
    transparent 230deg, rgba(255,60,154,0.050) 242deg, transparent 256deg,
    transparent 300deg, rgba(77,159,255,0.055) 312deg, transparent 326deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,0.55) 38%, transparent 72%);
          mask-image: radial-gradient(circle at center, #000 0%, rgba(0,0,0,0.55) 38%, transparent 72%);
  animation: clientsRays 64s linear infinite;
  will-change: transform;
}
@keyframes clientsRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Brilhos que respiram (profundidade) */
.clients-aurora {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 18% 26%, rgba(77,159,255,0.16), transparent 40%),
    radial-gradient(circle at 84% 74%, rgba(255,60,154,0.12), transparent 42%);
  animation: clientsAurora 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes clientsAurora {
  0%   { transform: translate3d(-2%, 1%, 0)  scale(1);    opacity: 0.7; }
  100% { transform: translate3d(3%, -2%, 0)  scale(1.08); opacity: 1;   }
}
@media (prefers-reduced-motion: reduce) {
  .clients-rays, .clients-aurora { animation: none; }
}
/* garante o carrossel acima do fundo */
.cyl-wrap { z-index: 1; }
/* stickers do slide Clientes: menores e colados nas quinas */
.scene-clients .scene-sticker { width: clamp(66px, 6.8vw, 108px); opacity: 0.9; }

/* Header */
.clients-header {
  text-align: center;
  padding: 0 60px 40px;
  position: relative;
  z-index: 2;
  opacity: 0;
}
.clients-eyebrow {
  font-size: 10px;
  letter-spacing: 6px;
  color: var(--pink);
  font-family: Arial, sans-serif;
  font-weight: 700;
  margin-bottom: 12px;
}
.clients-headline {
  font-size: clamp(26px, 4vw, 52px);
  font-weight: 900;
  letter-spacing: 5px;
  text-transform: uppercase;
}

/* Wrap cilindro */
.cyl-wrap {
  flex: 1;
  width: 100%;             /* garante largura total mesmo em flex column */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;    /* filhos esticam na horizontal */
  justify-content: center;
  overflow: visible;       /* não cortar os itens do cilindro */
}

/* Halo central pulsante */
.carousel-spotlight {
  position: absolute;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,60,154,0.16) 0%,
    rgba(77,159,255,0.08) 45%,
    transparent 72%);
  pointer-events: none;
  top: 50%; left: 50%;
  transform: translate(-50%, -55%);
  animation: spotPulse 4.5s ease-in-out infinite;
  z-index: 0;
}
@keyframes spotPulse {
  0%,100% { opacity: 0.7; transform: translate(-50%,-55%) scale(1);   }
  50%      { opacity: 1.0; transform: translate(-50%,-55%) scale(1.2); }
}

/* Palco do cilindro: largura e altura explícitas */
.cyl-scene {
  width: 100%;
  height: 290px;
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Drum: cobre 100% do palco */
.cyl-drum {
  position: absolute;
  inset: 0;
}

/* Cada face: centralizada no drum com calc() — sem dependência de margin */
.cyl-item {
  position: absolute;
  width: 180px;
  height: 134px;
  top: calc(50% - 67px);
  left: calc(50% - 90px);   /* centro horizontal do drum */
  cursor: pointer;
  will-change: transform, opacity;
  transform-origin: center center;
}

/* Card glassmorphism */
.carousel-card {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.11);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 4px 20px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.09);
  transition: border-color 0.45s, box-shadow 0.45s;
}

/* Face ativa: glow rosa */
.cyl-item.is-center .carousel-card {
  border-color: rgba(255,60,154,0.60);
  box-shadow:
    0 0 0 1px rgba(255,60,154,0.28),
    0 0 55px rgba(255,60,154,0.26),
    0 0 110px rgba(255,60,154,0.10),
    0 6px 36px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.14);
}

/* Logos em cor original — leve realce para contraste no fundo escuro */
.carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
  pointer-events: none;
  display: block;
}

/* Nome da marca */
.carousel-name {
  margin-top: 26px;
  font-size: 10px;
  letter-spacing: 6px;
  color: rgba(255,255,255,0.42);
  font-family: Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  opacity: 0;
  position: relative;
  z-index: 2;
  min-height: 18px;
}

/* Linha decorativa abaixo do nome */
.carousel-name::before {
  content: '';
  display: block;
  width: 32px;
  height: 1px;
  background: var(--pink);
  margin: 0 auto 10px;
  opacity: 0.6;
}

/* Indicadores */
.carousel-indicators {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding-top: 22px;
  opacity: 0;
  z-index: 2;
}
.carousel-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.18);
  transition: all 0.35s;
}
.carousel-dot.active {
  background: var(--pink);
  border-color: var(--pink);
  transform: scale(1.8);
}
.carousel-dot:hover:not(.active) {
  background: rgba(255,255,255,0.45);
}

/* ── Faixa de logos 2D em loop (marquee automático) ── */
.clients-marquee {
  width: 100%;
  overflow: hidden;
  padding: 8px 0 4px;
  position: relative;
  z-index: 2;
  /* fade suave nas bordas: logos entram/saem sem corte seco */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.clients-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: clientsMarquee 34s linear infinite;
  will-change: transform;
}
/* lista duplicada 2x + deslocar exatamente -50% = loop perfeito */
@keyframes clientsMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.clients-logo {
  flex: 0 0 auto;
  height: 44px;
  margin-right: 34px; /* margin (não gap) → -50% fica pixel-perfect */
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* chip claro: preserva a cor original e mantém legível sobre o navy */
  background: rgba(255,255,255,0.94);
  border-radius: 9px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.22);
}
.clients-logo img {
  height: 22px;
  width: auto;
  max-width: 116px;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .clients-track { animation: none; }
}

/* ── EXPERTISE ── */
.scene-expertise {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: var(--navy3); /* fallback enquanto o vídeo carrega — nunca preto puro */
  color: #fff;
}
/* Vídeo de fundo — 100% da tela, atrás de tudo (a moldura global fica por cima) */
.expertise-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Scrim de contraste: escurece sutilmente o vídeo sob o texto, sem virar fundo preto */
.expertise-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 64% at 50% 54%, rgba(5,11,30,0.74) 0%, rgba(5,11,30,0.40) 46%, rgba(5,11,30,0.05) 78%),
    linear-gradient(180deg, rgba(5,11,30,0.50) 0%, rgba(5,11,30,0.18) 30%, rgba(5,11,30,0.30) 68%, rgba(5,11,30,0.62) 100%);
}
.expertise-content {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4.5vh, 52px);
  /* mantém o conteúdo dentro das margens da moldura */
  padding: clamp(64px, 9vh, 110px) clamp(70px, 8vw, 120px);
}
.expertise-title {
  font-size: clamp(20px, 2.8vw, 34px);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55), 0 0 42px rgba(77,159,255,0.22);
}
/* Palco onde as frases se formam/dissolvem em partículas */
.expertise-stage {
  position: relative;
  width: min(900px, 80vw);
  height: clamp(220px, 42vh, 420px);
}
.expertise-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.expertise-dots {
  display: flex;
  gap: 12px;
}
.expertise-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.26);
  cursor: pointer;
  transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.expertise-dot:hover { background: rgba(255,255,255,0.5); }
.expertise-dot.active {
  background: var(--pink);
  box-shadow: 0 0 14px rgba(255,60,154,0.7);
  transform: scale(1.25);
}
/* Conteúdo só para leitores de tela / fallback sem JS */
.expertise-sr {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── CURSOR GLOW ── */
#cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,60,154,0.55) 0%, rgba(77,159,255,0.2) 50%, transparent 70%);
  pointer-events: none;
  z-index: 99997;
  mix-blend-mode: screen;
  will-change: transform;
}

/* ── UTILS ── */
.pink { color: var(--pink); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .scene-about { flex-direction: column; padding: 60px 40px; }
  .about-divider { width: 160px; height: 1px; }
  .eco-grid { grid-template-columns: 1fr; gap: 16px; }
  .eco-col-right { text-align: left; align-items: flex-start; }
  .eco-categories { grid-template-columns: repeat(2, 1fr); }
  .expertise-stage { width: 88vw; height: clamp(200px, 40vh, 360px); }
  .scene { padding: 40px 24px; }
}

/* ── START OVERLAY (capa de entrada) ── */
#start-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, var(--navy2) 0%, var(--navy) 45%, var(--navy3) 100%);
  cursor: pointer;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
#start-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.start-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 3vh, 32px);
  text-align: center;
  padding: 40px;
}
.start-logo {
  width: clamp(150px, 22vw, 300px);
  height: auto;
  filter: drop-shadow(0 0 45px rgba(77, 159, 255, 0.35));
  animation: start-logo-float 4s ease-in-out infinite;
}
@keyframes start-logo-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.start-tagline {
  font-family: 'Inter', 'Arial', sans-serif;
  font-size: clamp(13px, 1.6vw, 20px);
  font-weight: 700;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--blue);
}
#start-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 16px 40px;
  font-family: 'Inter', 'Arial', sans-serif;
  font-size: clamp(14px, 1.5vw, 18px);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white);
  background: linear-gradient(100deg, var(--pink), #ff6ab0);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(255, 60, 154, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: start-btn-pulse 2.4s ease-in-out infinite;
}
#start-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 40px rgba(255, 60, 154, 0.6);
}
#start-btn:active { transform: translateY(0) scale(0.99); }
.start-btn-icon { font-size: 0.8em; }
@keyframes start-btn-pulse {
  0%, 100% { box-shadow: 0 8px 30px rgba(255, 60, 154, 0.40); }
  50%      { box-shadow: 0 8px 44px rgba(255, 60, 154, 0.75); }
}
.start-hint {
  font-family: 'Inter', 'Arial', sans-serif;
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray);
  opacity: 0.75;
}