/* ==========================================
   PAREDE DE VIDRO COM POLÍGONOS EM FORMATO DIAMANTE
   Camada que interliga todas as seções
   ========================================== */

/* Container principal da parede de vidro */
.diamond-glass-wall {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

/* Padrão de polígonos em formato diamante usando SVG */
.diamond-glass-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 50px,
      rgba(255, 255, 255, 0.03) 50px,
      rgba(255, 255, 255, 0.03) 51px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 50px,
      rgba(255, 255, 255, 0.03) 50px,
      rgba(255, 255, 255, 0.03) 51px
    );
  background-size: 100px 100px;
  opacity: 0.6;
  mix-blend-mode: overlay;
}

/* Camada de vidro com efeito de refração */
.diamond-glass-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    linear-gradient(225deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  backdrop-filter: blur(0.5px);
  -webkit-backdrop-filter: blur(0.5px);
  opacity: 0.4;
}

/* Polígonos individuais em formato diamante */
.diamond-glass-wall::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    /* Padrão de diamantes usando clip-path pattern */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 49px,
      rgba(135, 206, 250, 0.05) 49px,
      rgba(135, 206, 250, 0.05) 50px
    ),
    repeating-linear-gradient(
      60deg,
      transparent 0px,
      transparent 49px,
      rgba(176, 224, 230, 0.05) 49px,
      rgba(176, 224, 230, 0.05) 50px
    ),
    repeating-linear-gradient(
      120deg,
      transparent 0px,
      transparent 49px,
      rgba(135, 206, 250, 0.05) 49px,
      rgba(135, 206, 250, 0.05) 50px
    );
  background-size: 100px 100px, 100px 100px, 100px 100px;
  opacity: 0.5;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Efeito de brilho sutil nos polígonos */
.diamond-glass-wall::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  opacity: 0.3;
  pointer-events: none;
  animation: diamondShimmer 8s ease-in-out infinite;
}

@keyframes diamondShimmer {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.5;
  }
}

/* Aplicar parede de vidro a todas as seções desde "sobre nós" até o rodapé */
#sobre,
#noticias,
#criar-site,
#projetos-concluidos,
#gerenciar-site,
#compare-plans,
#codigo-vivo,
#perguntas,
section.home-section-cta,
footer {
  position: relative;
}

/* Padrão SVG de diamantes para usar como background */
.diamond-pattern-svg {
  position: absolute;
  width: 0;
  height: 0;
  visibility: hidden;
}

/* Camada de vidro para cada seção com padrão de diamantes - usando elemento wrapper adicional */
#sobre .diamond-glass-layer,
#noticias .diamond-glass-layer,
#projetos-concluidos .diamond-glass-layer,
#gerenciar-site .diamond-glass-layer,
#compare-plans .diamond-glass-layer,
#codigo-vivo .diamond-glass-layer,
#perguntas .diamond-glass-layer,
section.home-section-cta .diamond-glass-layer,
footer .diamond-glass-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    /* Padrão de diamantes - linhas diagonais para criar formato de losango */
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 29px,
      rgba(255, 255, 255, 0.25) 29px,
      rgba(255, 255, 255, 0.25) 30px,
      transparent 30px,
      transparent 59px,
      rgba(255, 255, 255, 0.25) 59px,
      rgba(255, 255, 255, 0.25) 60px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 29px,
      rgba(135, 206, 250, 0.3) 29px,
      rgba(135, 206, 250, 0.3) 30px,
      transparent 30px,
      transparent 59px,
      rgba(135, 206, 250, 0.3) 59px,
      rgba(135, 206, 250, 0.3) 60px
    ),
    /* Bordas dos diamantes para criar efeito de vidro */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 59px,
      rgba(255, 255, 255, 0.35) 59px,
      rgba(255, 255, 255, 0.35) 60px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 59px,
      rgba(176, 224, 230, 0.3) 59px,
      rgba(176, 224, 230, 0.3) 60px
    );
  background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px;
  background-position: 0 0, 30px 30px, 0 0, 0 0;
  backdrop-filter: blur(0.5px) saturate(1.2);
  -webkit-backdrop-filter: blur(0.5px) saturate(1.2);
  opacity: 1;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1; /* Acima dos fundos (z-index: 0) mas abaixo do conteúdo */
}

/* Exceção: Seção Sites sob medida - parede de vidro por cima das imagens - usando elemento wrapper */
#criar-site .diamond-glass-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    /* Padrão de diamantes - linhas diagonais para criar formato de losango */
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 29px,
      rgba(255, 255, 255, 0.25) 29px,
      rgba(255, 255, 255, 0.25) 30px,
      transparent 30px,
      transparent 59px,
      rgba(255, 255, 255, 0.25) 59px,
      rgba(255, 255, 255, 0.25) 60px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 29px,
      rgba(135, 206, 250, 0.3) 29px,
      rgba(135, 206, 250, 0.3) 30px,
      transparent 30px,
      transparent 59px,
      rgba(135, 206, 250, 0.3) 59px,
      rgba(135, 206, 250, 0.3) 60px
    ),
    /* Bordas dos diamantes para criar efeito de vidro */
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 59px,
      rgba(255, 255, 255, 0.35) 59px,
      rgba(255, 255, 255, 0.35) 60px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px,
      transparent 59px,
      rgba(176, 224, 230, 0.3) 59px,
      rgba(176, 224, 230, 0.3) 60px
    );
  background-size: 60px 60px, 60px 60px, 60px 60px, 60px 60px;
  background-position: 0 0, 30px 30px, 0 0, 0 0;
  backdrop-filter: blur(0.5px) saturate(1.2);
  -webkit-backdrop-filter: blur(0.5px) saturate(1.2);
  opacity: 1;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 20; /* Acima das imagens (fundo-sites-sob-medida.png e Satélite.png) que estão em z-index: 1 e 15 */
}

/* Garantir que os fundos quadriculados existentes sejam preservados - NÃO INTERFERIR */

/* Garantir que o conteúdo das seções fique acima da parede de vidro */
.section-premium-container,
.container,
.hostinger-pricing-container,
.filmora-compare-container,
.tech-advantages-container {
  position: relative;
  z-index: 51; /* Acima da parede de vidro (z-index: 50) */
}

/* Ajustar z-index do satélite para ficar atrás da parede de vidro */
.satellite-float {
  z-index: 10 !important; /* Ajustado de 15 para 10, ficando atrás da parede (z-index: 20) */
}

/* Ajustar z-index da imagem de fundo para ficar atrás da parede de vidro */
#criar-site.section-premium-gray::after {
  z-index: 1 !important; /* Mantido, mas agora atrás da parede (z-index: 20) */
}

/* Garantir que estrelas fiquem atrás da parede de vidro */
.stars-background {
  z-index: 0 !important;
}

/* Garantir que partículas espaciais fiquem atrás da parede de vidro */
.space-particles {
  z-index: 0 !important;
}

/* Garantir que o footer tenha position relative para a parede de vidro funcionar */
footer {
  position: relative !important;
}

footer .diamond-glass-layer {
  z-index: 1 !important;
}

/* Divisória REMOVIDA - substituída pelo efeito fragmentado */
.glowing-divider,
div.glowing-divider {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Efeito fragmentado no hero section (parte inferior) - complementar ao fragmentado da seção sobre */
#inicio.home-hero {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 92%,
    96% 100%,
    91% 93%,
    85% 100%,
    79% 92%,
    73% 100%,
    67% 93%,
    61% 100%,
    55% 92%,
    49% 100%,
    43% 93%,
    37% 100%,
    31% 92%,
    25% 100%,
    19% 93%,
    13% 100%,
    7% 92%,
    4% 100%,
    0% 93%
  ) !important;
  overflow: visible !important;
  position: relative !important;
}

/* Efeito fragmentado no fundo branco da seção "sobre nós" (parte superior) - complementar ao hero */
#sobre.section-premium-light {
  clip-path: polygon(
    0% 8%,
    4% 0%,
    9% 7%,
    15% 0%,
    21% 8%,
    27% 0%,
    33% 7%,
    39% 0%,
    45% 8%,
    51% 0%,
    57% 7%,
    63% 0%,
    69% 8%,
    75% 0%,
    81% 7%,
    87% 0%,
    93% 8%,
    100% 0%,
    100% 100%,
    0% 100%
  ) !important;
  overflow: visible !important;
  position: relative !important;
  margin-top: 0 !important;
  padding-top: var(--space-24, 6rem) !important;
}