#flashlight {
  position: relative;
}

/* FUNDO COM PATTERN */
.flashlight-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/img/bg-pattern.png');
  background-repeat: repeat;
  background-size: 400px;
}

/* LANTERNA */
#flashlight::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  backdrop-filter: blur(1px);
  background: radial-gradient(
    circle 300px at var(--x, 50%) var(--y, 50%),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.7) 45%,
    rgba(0,0,0,0.95) 70%
  );
}

/* ========================================
   HERO UNIVERSAL - pattern + flashlight
   ======================================== */

.hero-bg {
  position: relative;
  background-image: url('/assets/img/bg-pattern.png');
  background-repeat: repeat;
  background-size: 400px;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  backdrop-filter: blur(1px);
  background: radial-gradient(
    circle 300px at var(--x, 50%) var(--y, 50%),
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.7) 45%,
    rgba(0,0,0,0.95) 70%
  );
}

/* ========================================
   NAVBAR RESPONSIVE
   ======================================== */

#nav-desktop {
  display: flex;
}

#nav-toggle {
  display: none;
  flex-direction: column;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}

#nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: transform 0.3s, opacity 0.3s;
}

#mobile-menu {
  display: none;
}

#mobile-menu.is-open {
  display: block;
}

#nav-toggle.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}
#nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 768px) {
  #nav-desktop {
    display: none !important;
  }
  #nav-toggle {
    display: flex !important;
  }
}

/* ========================================
   CARROSSEL DE CLIENTES
   ======================================== */

.client-carousel {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.client-track {
  display: flex;
  gap: 4rem;
  width: max-content;
  animation: client-scroll 30s linear infinite;
  will-change: transform;
}

.client-set {
  display: flex;
  gap: 4rem;
}

.client-carousel:hover .client-track {
  animation-play-state: paused;
}

@keyframes client-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 2rem)); }
}

/* ========================================
   CARROSSEL DE EQUIPE
   ======================================== */

.team-carousel {
  overflow: hidden;
  width: 100%;
}

.team-track {
  display: flex;
  gap: 2.5rem;
  width: max-content;
}

.team-set {
  display: flex;
  gap: 2.5rem;
}

/* ESTATICO: centraliza no desktop, empilha no mobile */
.team-carousel.is-static {
  display: flex;
  justify-content: center;
  overflow-x: auto;          /* permite scroll horizontal no mobile se necessário */
  -webkit-overflow-scrolling: touch;
  /* remove mask no mobile para não cortar */
  mask-image: none;
  -webkit-mask-image: none;
}

.team-carousel.is-static .team-track {
  animation: none;
  flex-wrap: wrap;           /* empilha os cards no mobile */
  justify-content: center;
  width: 100%;               /* ocupa a largura disponível */
}

.team-carousel.is-static .team-set {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
}

/* Cards da equipe: largura fixa no desktop, fluida no mobile */
.team-card {
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .team-card {
    width: calc(100vw - 4rem) !important; /* ocupa quase toda a largura */
    max-width: 320px;
  }

  .team-carousel.is-static .team-track {
    gap: 1.5rem;
  }
}

/* ANIMADO (4+ membros) */
.team-carousel.is-animated {
  mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10%,
    black 90%,
    transparent
  );
}

.team-carousel.is-animated .team-track {
  animation: team-scroll 40s linear infinite;
  will-change: transform;
}

.team-carousel.is-animated:hover .team-track {
  animation-play-state: paused;
}

@keyframes team-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 1.25rem)); }
}

/* ========================================
   FOOTER MOBILE
   ======================================== */

@media (max-width: 768px) {
  /* Footer grid: empilha e alinha à esquerda */
  footer .max-w-7xl > div:first-child {
    grid-template-columns: 1fr !important;
    place-items: start !important;
  }

  /* Social links: tamanho normal no mobile */
  footer .flex.gap-6.text-xl {
    font-size: 1rem !important;
    justify-content: flex-start !important;
  }

  /* Logo do footer menor no mobile */
  footer img.h-12 {
    height: 2.5rem;
  }
}

/* ========================================
   HERO MOBILE
   ======================================== */

@media (max-width: 768px) {
  /* Hero: coluna única, imagem ACIMA do texto */
  .hero-grid {
    display: flex !important;
    flex-direction: column-reverse; /* imagem primeiro (visualmente acima) */
    gap: 2rem;
  }

  .hero-grid .hero-img {
    display: flex !important;    /* sobrescreve hidden md:flex das subpáginas */
    justify-content: center;
  }

  .hero-grid .hero-img img {
    width: 220px !important;
    height: auto;
  }

  /* Reduz padding do hero no mobile */
  .hero-bg,
  section.hero-bg {
    padding-top: 6rem;
    padding-bottom: 4rem;
  }

  /* Títulos menores no mobile */
  .hero-grid h1 {
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
  }
}

/* ========================================
   FOOTER MOBILE
   ======================================== */
@media (max-width: 768px) {
  footer > div:first-child {
    place-items: start !important;
    text-align: left;
  }

  footer .flex.gap-6 {
    justify-content: flex-start !important;
  }
}

@media (max-width: 768px) {
  footer .max-w-7xl {
    text-align: left;
  }

  footer .flex.gap-6 {
    justify-content: flex-start !important;
  }
}

@media (min-width: 769px) {
  footer .max-w-7xl > div {
    align-self: start;
  }
}