/* ═══════════════════════════════════════════════════════
   DECOR — Swirls e dots decorativos Bate Estaca
   A transição de cores fica no site-bg (base.css).
   Aqui ficam apenas os detalhes gráficos sobrepostos.
═══════════════════════════════════════════════════════ */

.decor-swirl,
.decor-dots {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* SVG swirl base — espiral estilo grafite */
/* Cor branca para ser visível tanto no navy quanto no amarelo */
.decor-swirl {
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M 92,42 C 92,22 78,10 58,12 C 38,14 24,30 27,50 C 30,68 48,76 64,70 C 77,65 82,52 75,43 C 68,34 56,34 51,42 C 46,50 50,60 58,58' stroke='white' stroke-width='6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}

/* Swirl 1 — direita superior (zona navy ~20%) */
.ds1 {
  width: 150px; height: 150px;
  right: 7%; top: 8%;
  opacity: .14;
  transform: rotate(-10deg);
}

/* Swirl 2 — esquerda inferior zona amarela (~55%) */
.ds2 {
  width: 120px; height: 120px;
  left: 4%; top: 52%;
  opacity: .12;
  transform: scaleX(-1) rotate(20deg);
}

/* Swirl 3 — direita zona amarela (~65%) */
.ds3 {
  width: 100px; height: 100px;
  right: 5%; top: 62%;
  opacity: .12;
  transform: rotate(30deg);
}

/* Swirl 4 — esquerda segunda zona navy (~95%) */
.ds4 {
  width: 130px; height: 130px;
  left: 6%; top: 92%;
  opacity: .13;
  transform: scaleX(-1) rotate(-5deg);
}

/* ── DOTS — pontos espalhados em períodos do fundo ── */
.decor-dots {
  inset: 0;
  min-height: 100%;
  /* pontos brancos sutis — visíveis em ambas as zonas de cor */
  background-image:
    radial-gradient(circle 3px   at 10% 5%,   rgba(255,255,255,.35) 0%, transparent 100%),
    radial-gradient(circle 2px   at 82% 8%,   rgba(255,255,255,.28) 0%, transparent 100%),
    radial-gradient(circle 3.5px at 92% 48%,  rgba(255,255,255,.30) 0%, transparent 100%),
    radial-gradient(circle 2px   at 15% 53%,  rgba(255,255,255,.25) 0%, transparent 100%),
    radial-gradient(circle 3px   at 55% 58%,  rgba(255,255,255,.22) 0%, transparent 100%),
    radial-gradient(circle 2.5px at 38% 97%,  rgba(255,255,255,.28) 0%, transparent 100%),
    radial-gradient(circle 2px   at 75% 95%,  rgba(255,255,255,.24) 0%, transparent 100%),
    radial-gradient(circle 3px   at 5%  78%,  rgba(255,255,255,.20) 0%, transparent 100%);
}