/* ===== EFEITO DE PONTOS CIRCULANDO ATRÁS DA FOTO ===== */
.floating-dots {
  position: absolute;
  top: -200px;
  left: -200px;
  width: 1400px;
  height: 1000px;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.dot {
  position: absolute;
  width: 6px;
  height: 6px;
  background: rgba(150, 185, 207, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(150, 185, 207, 0.4);
}

.dot:nth-child(1) {
  animation: float1 20s infinite linear;
  animation-delay: 0s;
}

.dot:nth-child(2) {
  animation: float2 25s infinite linear;
  animation-delay: -5s;
  background: rgba(62, 94, 134, 0.6);
  box-shadow: 0 0 8px rgba(62, 94, 134, 0.4);
}

.dot:nth-child(3) {
  animation: float3 30s infinite linear;
  animation-delay: -10s;
  background: rgba(33, 59, 93, 0.6);
  box-shadow: 0 0 8px rgba(33, 59, 93, 0.4);
}

.dot:nth-child(4) {
  animation: float4 22s infinite linear;
  animation-delay: -15s;
  background: rgba(96, 125, 139, 0.6);
  box-shadow: 0 0 8px rgba(96, 125, 139, 0.4);
}

.dot:nth-child(5) {
  animation: float5 28s infinite linear;
  animation-delay: -20s;
  background: rgba(107, 117, 136, 0.6);
  box-shadow: 0 0 8px rgba(107, 117, 136, 0.4);
}

.dot:nth-child(6) {
  animation: float6 26s infinite linear;
  animation-delay: -25s;
  background: rgba(150, 185, 207, 0.6);
  box-shadow: 0 0 8px rgba(150, 185, 207, 0.4);
}

.dot:nth-child(7) {
  animation: float7 24s infinite linear;
  animation-delay: -30s;
  background: rgba(62, 94, 134, 0.6);
  box-shadow: 0 0 8px rgba(62, 94, 134, 0.4);
}

.dot:nth-child(8) {
  animation: float8 32s infinite linear;
  animation-delay: -35s;
  background: rgba(33, 59, 93, 0.6);
  box-shadow: 0 0 8px rgba(33, 59, 93, 0.4);
}

/* Animações de movimento saindo da página */
@keyframes float1 {
  0% { transform: translate(200px, 300px); opacity: 1; }
  100% { transform: translate(1600px, -200px); opacity: 0; }
}

@keyframes float2 {
  0% { transform: translate(100px, 500px); opacity: 1; }
  100% { transform: translate(1700px, -100px); opacity: 0; }
}

@keyframes float3 {
  0% { transform: translate(600px, 200px); opacity: 1; }
  100% { transform: translate(1800px, -300px); opacity: 0; }
}

@keyframes float4 {
  0% { transform: translate(800px, 400px); opacity: 1; }
  100% { transform: translate(1900px, -150px); opacity: 0; }
}

@keyframes float5 {
  0% { transform: translate(450px, 650px); opacity: 1; }
  100% { transform: translate(1650px, -250px); opacity: 0; }
}

@keyframes float6 {
  0% { transform: translate(750px, 550px); opacity: 1; }
  100% { transform: translate(1750px, -350px); opacity: 0; }
}

@keyframes float7 {
  0% { transform: translate(350px, 750px); opacity: 1; }
  100% { transform: translate(1550px, -400px); opacity: 0; }
}

@keyframes float8 {
  0% { transform: translate(950px, 650px); opacity: 1; }
  100% { transform: translate(2000px, -200px); opacity: 0; }
}

/* Responsivo */
@media (max-width: 768px) {
  .floating-dots {
    width: 100vw;
    height: 100vh;
  }
  
  .dot {
    width: 4px;
    height: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-dots {
    display: none;
  }
}
.dot:nth-child(9) {
  animation: float9 27s infinite linear;
  animation-delay: -40s;
  background: rgba(150, 185, 207, 0.5);
  box-shadow: 0 0 8px rgba(150, 185, 207, 0.3);
}

.dot:nth-child(10) {
  animation: float10 23s infinite linear;
  animation-delay: -45s;
  background: rgba(62, 94, 134, 0.5);
  box-shadow: 0 0 8px rgba(62, 94, 134, 0.3);
}

.dot:nth-child(11) {
  animation: float11 29s infinite linear;
  animation-delay: -50s;
  background: rgba(33, 59, 93, 0.5);
  box-shadow: 0 0 8px rgba(33, 59, 93, 0.3);
}

.dot:nth-child(12) {
  animation: float12 31s infinite linear;
  animation-delay: -55s;
  background: rgba(96, 125, 139, 0.5);
  box-shadow: 0 0 8px rgba(96, 125, 139, 0.3);
}

.dot:nth-child(13) {
  animation: float13 25s infinite linear;
  animation-delay: -60s;
  background: rgba(107, 117, 136, 0.5);
  box-shadow: 0 0 8px rgba(107, 117, 136, 0.3);
}

.dot:nth-child(14) {
  animation: float14 33s infinite linear;
  animation-delay: -65s;
  background: rgba(150, 185, 207, 0.5);
  box-shadow: 0 0 8px rgba(150, 185, 207, 0.3);
}

.dot:nth-child(15) {
  animation: float15 21s infinite linear;
  animation-delay: -70s;
  background: rgba(62, 94, 134, 0.5);
  box-shadow: 0 0 8px rgba(62, 94, 134, 0.3);
}

.dot:nth-child(16) {
  animation: float16 35s infinite linear;
  animation-delay: -75s;
  background: rgba(33, 59, 93, 0.5);
  box-shadow: 0 0 8px rgba(33, 59, 93, 0.3);
}

@keyframes float9 {
  0% { transform: translate(550px, 450px); opacity: 1; }
  100% { transform: translate(1850px, -180px); opacity: 0; }
}

@keyframes float10 {
  0% { transform: translate(250px, 650px); opacity: 1; }
  100% { transform: translate(1450px, -320px); opacity: 0; }
}

@keyframes float11 {
  0% { transform: translate(700px, 750px); opacity: 1; }
  100% { transform: translate(1950px, -280px); opacity: 0; }
}

@keyframes float12 {
  0% { transform: translate(1000px, 550px); opacity: 1; }
  100% { transform: translate(2100px, -220px); opacity: 0; }
}

@keyframes float13 {
  0% { transform: translate(150px, 400px); opacity: 1; }
  100% { transform: translate(1350px, -380px); opacity: 0; }
}

@keyframes float14 {
  0% { transform: translate(850px, 650px); opacity: 1; }
  100% { transform: translate(2050px, -160px); opacity: 0; }
}

@keyframes float15 {
  0% { transform: translate(500px, 800px); opacity: 1; }
  100% { transform: translate(1700px, -120px); opacity: 0; }
}

@keyframes float16 {
  0% { transform: translate(1200px, 600px); opacity: 1; }
  100% { transform: translate(2200px, -300px); opacity: 0; }
}