/* =====================================================================
   O sistema por dentro (#telas) — carrossel de 10 screenshots numa
   moldura escura, com setas, bolinhas e autoplay de 3500ms.
   ===================================================================== */

.gc-telas {
  overflow: hidden;
}

.gc-telas__cabecalho {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}

.gc-telas__palco {
  position: relative;
  margin-top: clamp(28px, 4vw, 44px);
  padding: 0 clamp(8px, 6vw, 62px);
}

.gc-vitrine {
  background: var(--gc-cinza);
  border: 1px solid rgba(var(--gc-escuro-rgb), .6);
  border-radius: 26px;
  padding: 16px;
  box-shadow: var(--gc-sombra-vitrine);
}

.gc-vitrine__cabecalho {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 12px 18px;
}

/* O ícone é trocado pelo app.js a cada slide (mesma cadência do título). */
.gc-vitrine__ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  background: rgba(var(--gc-verde-rgb), .18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gc-verde);
}

.gc-vitrine__ico .gc-ico {
  font-size: 19px;
}

.gc-vitrine__legenda {
  flex: 1;
  min-width: 0;
}

.gc-vitrine__titulo {
  font: 700 clamp(16px, 2.3vw, 21px)/1.2 var(--gc-fonte-titulo);
  color: var(--gc-txt-branco);
}

.gc-vitrine__caption {
  font: 400 13.5px/1.4 var(--gc-fonte-texto);
  color: rgba(var(--gc-nevoa-rgb), .62);
  margin-top: 5px;
}

.gc-vitrine__contador {
  flex: none;
  font: 600 12.5px/1 var(--gc-fonte-mono);
  color: var(--gc-txt-fraco-escuro);
  letter-spacing: .06em;
}

.gc-vitrine__quadro {
  position: relative;
  border-radius: var(--gc-raio-botao-g);
  overflow: hidden;
  background: var(--gc-nevoa);
  border: 1px solid rgba(var(--gc-escuro-rgb), .4);
  aspect-ratio: 2 / 1;
  cursor: zoom-in;
}

.gc-vitrine__tela {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  opacity: 0;
  z-index: 1;
  transform: scale(1.02);
  transition: opacity var(--gc-t-slide) var(--gc-fade), transform 1.4s var(--gc-mov);
}

.gc-vitrine__tela.is-ativa {
  opacity: 1;
  z-index: 2;
  transform: none;
}

/* --- navegação ---------------------------------------------------- */

.gc-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--gc-cinza);
  border: 1px solid rgba(var(--gc-escuro-rgb), .6);
  box-shadow: var(--gc-sombra-seta);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gc-txt-claro);
  transition: background-color var(--gc-t-hover), border-color var(--gc-t-hover),
              color var(--gc-t-hover);
}

.gc-seta .gc-ico {
  font-size: 22px;
}

.gc-seta:hover {
  background: var(--gc-verde);
  border-color: var(--gc-verde);
  color: var(--gc-fundo);
}

.gc-seta--anterior {
  left: 0;
}

.gc-seta--proximo {
  right: 0;
}

.gc-bolinhas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}

.gc-bolinha {
  width: 10px;
  height: 10px;
  border-radius: var(--gc-raio-pill);
  border: 0;
  background: rgba(var(--gc-cinza-rgb), .22);
  padding: 0;
  transition: width .7s var(--gc-fade), background-color .7s ease;
}

.gc-bolinha.is-ativa {
  width: 34px;
  background: var(--gc-verde);
}

/* Nas telas estreitas as setas iriam por cima da imagem: vão para baixo. */
@media (max-width: 599px) {
  .gc-telas__palco {
    padding: 0;
  }

  .gc-seta {
    position: static;
    transform: none;
  }

  .gc-telas__navegacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 22px;
  }

  .gc-bolinhas {
    margin-top: 0;
  }
}

@media (min-width: 600px) {
  .gc-telas__navegacao {
    display: contents;
  }
}