/* Bandeiras decorativas — usadas apenas em index.html, dentro do hero (.section-home1).
   position: absolute relativo ao section-home1 (position:relative definido em gk-hero.css). */

.gk-floating-flags {
  position: absolute;
  left: max(0.7rem, env(safe-area-inset-left, 0px));
  /* afastamento do topo do hero proporcional à nav fixa (~112px) + folga visual */
  top: clamp(7rem, 14vh, 9rem);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  pointer-events: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gk-floating-flags-item {
  display: block;
  line-height: 0;
}

.gk-floating-flags-item img {
  display: block;
  width: clamp(2.4rem, 5.5vw, 3.25rem);
  height: auto;
  border-radius: 3px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.55));
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 478px) {
  .gk-floating-flags {
    /* na nav mobile a nav ocupa ~70px; top relativo ao hero começa logo a seguir */
    top: clamp(5rem, 12vh, 7rem);
    gap: 0.35rem;
  }

  .gk-floating-flags-item img {
    width: clamp(1.85rem, 7vw, 2.4rem);
  }
}