/* ==========================================================================
   Grade de fundo
   Figma: vector com borda 1px, linear-gradient #163E98 42% -> #FFFFFF 0%
   Implementado como camada decorativa (::before) posicionada atras do conteudo.
   ========================================================================== */

.grid-bg {
  position: relative;
  isolation: isolate;
}

.grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    repeating-linear-gradient(
      to right,
      var(--grid-line-color) 0,
      var(--grid-line-color) var(--grid-line-width),
      transparent var(--grid-line-width),
      transparent var(--grid-cell)
    ),
    repeating-linear-gradient(
      to bottom,
      var(--grid-line-color) 0,
      var(--grid-line-color) var(--grid-line-width),
      transparent var(--grid-line-width),
      transparent var(--grid-cell)
    );

  /* Centraliza a grade em relacao a viewport */
  background-position: center top;

  /* Fade suave: linhas mais visiveis nas laterais, dissolvidas ao centro e na base */
  -webkit-mask-image:
    radial-gradient(ellipse 70% 65% at 50% 38%, transparent 0%, rgba(0, 0, 0, 0.35) 55%, #000 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, #000 25%, #000 60%, transparent 100%);
  mask-image:
    radial-gradient(ellipse 70% 65% at 50% 38%, transparent 0%, rgba(0, 0, 0, 0.35) 55%, #000 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, #000 25%, #000 60%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (max-width: 640px) {
  .grid-bg::before {
    --grid-cell: 100px;
  }
}

/* Area superior: header + hero compartilham a mesma grade */
.top-area {
  position: relative;
  background: var(--color-neutral-white);
}

/* A grade fica acima do fundo branco da top-area, porem atras do conteudo */
.top-area::before {
  z-index: 0;
}

.top-area > * {
  position: relative;
  z-index: 1;
}