/* Ajuste de paleta da página Inclusão: mais amarelo/dourado, menos azul-marinho,
   alinhado com a arte oficial "Atípicos Inclusão". Mantém a mesma estrutura do site. */
:root {
  --blue-deep: #6b4a00;
  --blue: #a97400;
  --bg-dark: #241900;
  --bg-darker: #160f00;
  --bg-blue: #2e2000;
  --bg-blue-light: #3c2900;
  --yellow: #ffb300;
  --yellow-bright: #ffd166;
  --shadow-yellow: 0 10px 40px -10px rgba(255, 179, 0, 0.45);
}

.hero-bg {
  background:
    radial-gradient(ellipse 900px 650px at 20% 25%, rgba(255, 179, 0, 0.4), transparent 60%),
    radial-gradient(ellipse 700px 550px at 85% 75%, rgba(47, 123, 255, 0.18), transparent 60%),
    linear-gradient(160deg, var(--blue-deep) 0%, var(--bg-dark) 55%, var(--bg-darker) 100%);
}

.hero-ghost-num { color: rgba(255, 179, 0, 0.08); }

/* ============ ELEMENTOS DECORATIVOS ============
   Símbolo mundial da inclusão e cordão de girassol (símbolo internacional
   de deficiências ocultas). Sempre atrás do conteúdo (z-index baixo) e
   com pointer-events desligado para nunca atrapalhar cliques. */
.deco-symbol, .deco-cord {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  height: auto;
}
.deco-symbol { opacity: 0.45; }
.deco-cord { opacity: 0.55; }

/* Hero (telas maiores que a faixa mobile, tratada abaixo em @media max-width:768px) */
.hero-symbol {
  top: 18%;
  left: 30%;
  right: auto;
  width: clamp(56px, 7vw, 120px);
}
.hero-cord {
  top: 4%;
  right: -3%;
  width: clamp(150px, 20vw, 360px);
  transform: rotate(10deg);
  opacity: 0.32;
}

/* Trajetória */
.trajetoria-cord {
  top: 6%;
  left: -6%;
  width: clamp(100px, 14vw, 240px);
  transform: rotate(-14deg) scaleX(-1);
}

/* Apoiador (cabeçalho da seção) */
.apoiador-symbol {
  top: 10%;
  left: 54%;
  right: auto;
  width: clamp(70px, 9vw, 150px);
}

/* Banner final (CTA) */
.cta-symbol {
  top: 8%;
  right: 6%;
  width: clamp(60px, 8vw, 120px);
}

@media (max-width: 1024px) {
  .hero-cord { right: -8%; width: clamp(130px, 26vw, 260px); }
  .trajetoria-cord { left: -8%; }
}

@media (max-width: 768px) {
  .deco-symbol, .deco-cord { opacity: 0.3; }
  .hero-symbol { top: 13%; left: auto; right: 4%; width: clamp(70px, 20vw, 130px); opacity: 0.55; }
  .hero-cord { top: 2%; right: -10%; width: clamp(110px, 34vw, 200px); }
  .trajetoria-cord { width: clamp(90px, 26vw, 160px); left: -10%; }
  .apoiador-symbol { top: -2%; left: auto; right: 3%; width: clamp(56px, 14vw, 100px); }
  .cta-symbol { width: clamp(48px, 12vw, 90px); }
}