/* BASE (só TAGS) */
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f2f2f2;
  color: #e7eef7; /* texto claro no topo */
  margin: 0;
}

/* Cabeçalho: faixa escura com logo + título */
header {
  background: #0b1020;
  color: #ffffff;
  padding: 12px 20px;
  border-bottom: 1px solid #1f2937;

  /* h1 à esquerda e (depois) nav à direita */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap; /* se faltar espaço, o menu quebra linha */
}

header h1 {
  margin: 0;
  display: inline-flex; /* logo + texto lado a lado */
  align-items: center;
  gap: 10px;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

header img {
  height: 42px;
  width: auto;
  vertical-align: middle;
  border-radius: 4px; /* 0 para remover */
}

/* ===== MENU + SUB-MENU ===== */

/* Linha do menu principal */
nav ul {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  text-align: right; /* mude para left/center se quiser */
}

/* Cada item do menu */
nav li {
  display: inline-block;
  margin: 0 8px;
  position: relative; /* base do sub-menu absoluto */
}

/* Links do menu */
nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-block;
}
nav a:hover {
  background: #18223a;
}

/* Sub-menu = uma UL dentro do LI do menu principal */
nav li ul {
  display: none; /* escondido por padrão */
  position: absolute; /* caixinha flutuante */
  right: 0;
  top: calc(100% + 6px);
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  background: #0b1020;
  border: 1px solid #1f2937;
  border-radius: 8px;
  z-index: 10;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

nav li ul li {
  display: block;
  margin: 0;
}

nav li ul a {
  display: block;
  text-align: left;
  padding: 10px 14px;
}

/* Mostra o sub-menu ao passar o mouse ou via teclado */
nav li:hover > ul,
nav li:focus-within > ul {
  display: block;
}

/* ===== RODAPÉ ===== */
footer {
  background: #0b1020;
  color: #ffffff;
  border-top: 1px solid #1f2937;
  padding: 16px 20px;
  text-align: center;
}
footer p {
  max-width: 960px;
  margin: 0 auto;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

.faixa-hero img {
  width: 100%;
  height: clamp(260px, 38vh, 460px);
  object-fit: cover;
  display: block;
}

.secao-jogos {
  margin: 24px 0;
}
.grade-jogos {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.cartao-jogo {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  flex: 1 1 300px;
  max-width: 31%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.imagem-cartao {
  display: block;
}
.imagem-cartao img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}
.conteudo-cartao {
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* contraste bom para títulos e textos dentro dos cards */
.conteudo-cartao h3 {
  color: #1a1a1a;
}
.conteudo-cartao p {
  color: #333333;
}
.botao {
  background: #22d3ee;
  color: #001018;
  padding: 8px 12px;
  text-decoration: none;
  border-radius: 6px;
  display: inline-block;
}
.botao:hover {
  background: #1bbcd3;
}
@media (max-width: 900px) {
  .cartao-jogo {
    max-width: 48%;
  }
}
@media (max-width: 600px) {
  .cartao-jogo {
    max-width: 100%;
  }
}

.secao-carrossel {
  padding: 24px 0;
}
.secao-carrossel h2 {
  text-align: center;
  margin: 0 0 12px;
  font-size: 1.4rem;
}
.faixa-carrossel {
  height: 500px;
  display: flex;
  overflow-x: hidden; /* o JS faz o scroll slide a slide */
  align-items: center;
  background: #7cc6ed33;
}
.faixa-carrossel img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 8px;
  background: transparent;
}
.controles-carrossel {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.controles-carrossel button {
  padding: 10px 18px;
  font-size: 1rem;
  border: 1px solid #cccccc;
  background: #ffffff;
  border-radius: 6px;
}

.cartao {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  padding: 16px;
  margin: 20px 0;
}
.titulo-cartao {
  margin: 0 0 12px;
  color: #1a1a1a;
}
.linha-cartao {
  display: flex;
  gap: 16px;
  align-items: center;
}
.lado-imagem {
  flex: 0 0 40%;
}
.lado-imagem img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid #eaeaea;
}
.lado-texto {
  flex: 1;
  line-height: 1.6;
  color: #333333; /* texto mais escuro */
}
.texto-imagem.invertido .linha-cartao {
  flex-direction: row-reverse;
}

.lado-wesley img {
  width: 50% !important;
  height: auto;
}

@media (max-width: 700px) {
  .linha-cartao {
    flex-direction: column;
    align-items: stretch;
  }
  .lado-imagem,
  .lado-texto {
    flex: 0 0 auto;
  }
}

/* Galeria*/

/* ===== A PARTIR DAQUI: ESTILOS DA PÁGINA "GALERIA" ===== */

/* Container padrão (usa o mesmo da Home/Seção 14)
   - Altere o max-width para deixar mais largo/estreito. */
.container {
  max-width: 1100px; /* experimente 960px / 1200px */
  margin: 0 auto;
  padding: 0 20px; /* aumente p/ 24px se quiser mais respiro nas laterais */
}

/* HERO (imagem larga no topo) */
.faixa-hero img {
  width: 100%;
  height: clamp(
    260px,
    38vh,
    460px
  ); /* mude 260/460 para outra altura mínima/máxima */
  object-fit: cover; /* cover = corta sem distorcer (troque p/ contain p/ ver!) */
  display: block;
}

/* ===== TÍTULO DA GALERIA (convidativo) ===== */
.titulo-galeria {
  margin: 24px 0 12px; /* aumente p/ 32px para mais espaço */
  text-align: center;
}
.titulo-galeria h2 {
  margin: 0 0 6px;
  font-size: clamp(1.6rem, 3vw + 1rem, 2.4rem); /* teste 1.8rem / 2.6rem */
  background: linear-gradient(
    90deg,
    #22d3ee,
    #0ea5e9
  ); /* troque as cores do degradê */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; /* mantém o degradê aparecendo no texto */
  letter-spacing: 0.5px; /* 0.3px/1px muda o “respiro” entre letras */
}
.titulo-galeria p {
  margin: 0;
  color: #555; /* troque p/ #444 ou #666 para variar contraste */
}

.subtitulo-secao {
  margin: 18px 0 8px;
  font-size: 1.2rem; /* 1.1rem/1.3rem */
  color: #1a1a1a; /* texto do subtítulo */
}

/* ===== GRID CONTROLADO (horizontais x verticais) =====
   Ajuste rápido:
   - Troque 220px por 260/180 em minmax() para mudar a quantidade de colunas. */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(220px, 1fr)
  ); /* mude 220px! */
  gap: 14px; /* 10/16/20 */
}

/* Cartões das imagens */
.item-galeria {
  background: #fff;
  border: 1px solid #e6e6e6; /* escureça p/ #ddd para dar mais contraste */
  border-radius: 10px; /* 6px/12px */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); /* 0 8px 20px ... mais sombra */
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.item-galeria:hover {
  transform: translateY(-2px); /* -1px/-3px */
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2); /* aumente/diminua a sombra */
}

/* Quantas colunas cada tipo ocupa:
   - horizontais: 2 colunas (menos por linha)
   - verticais:   1 coluna (mais por linha)
   Experimente inverter (span 1 ↔ span 2) para ver o efeito. */
.item-galeria.horizontal {
  grid-column: span 2;
}
.item-galeria.vertical {
  grid-column: span 1;
}

/* Alturas visuais (corte controlado) — troque os números! */
.item-galeria.horizontal img {
  width: 100%;
  height: 200px; /* 160px / 240px */
  object-fit: cover;
  display: block;
}
.item-galeria.vertical img {
  width: 100%;
  height: 300px; /* 240px / 360px */
  object-fit: cover;
  display: block;
}
.item-galeria figcaption {
  padding: 8px 10px;
  text-align: center;
  color: #333; /* mude p/ #222 para mais contraste */
}

/* ===== ÁUDIO — lista em “cards” ===== */
.lista-audio {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px; /* 6px / 18px */
}
.lista-audio li {
  background: #ffffff; /* #f9fafb deixa mais clarinho */
  border: 1px solid #e6e6e6; /* #ddd = mais escuro */
  border-radius: 10px; /* 4px / 14px */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  padding: 12px; /* 8px / 16px */
}
.lista-audio li strong {
  display: block;
  margin-bottom: 6px; /* 4px/10px */
  color: #1a1a1a;
}
.lista-audio audio {
  width: 100%;
  height: 36px; /* 32px/40px */
  margin: 0;
}

/* ===== VÍDEO ===== */
.secao-video {
  margin-bottom: 48px; /* 28px/64px */
}
.video-centro {
  display: flex;
  justify-content: center;
}
.video-centro video {
  width: min(960px, 100%); /* 720px/1200px */
  aspect-ratio: 16/9;
  max-height: 70vh; /* 60–80vh */
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  background: #000;
}

/* ===== ZOOM CONTROLADO (lightbox) =====
   Controle o tamanho do zoom aqui nas variáveis: */
:root {
  --zoom-largura: 880px; /* 720px/1040px */
  --zoom-altura: 80vh; /* 70–90vh */
}
.janela-imagem[hidden] {
  display: none;
}
.janela-imagem {
  position: fixed;
  inset: 0;
  z-index: 100;
}
.janela-fundo {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6); /* .5/.7 */
}
.janela-caixa {
  position: relative;
  width: min(var(--zoom-largura), 96vw);
  max-height: var(--zoom-altura);
  margin: 6vh auto; /* 8vh = mais distante do topo */
  display: flex;
  flex-direction: column;
  background: #111; /* #0f172a (slate-900) fica legal */
  border-radius: 10px; /* 8px/12px */
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}
.janela-caixa img {
  width: 100%;
  height: auto;
  max-height: calc(var(--zoom-altura) - 44px); /* reserva p/ legenda+botão */
  object-fit: contain;
  display: block;
}
.janela-legenda {
  padding: 8px 12px;
  color: #ddd; /* #eee = mais claro */
  font-size: 0.95rem; /* .9rem/1rem */
  text-align: center;
}
.fechar-janela {
  position: absolute;
  top: 6px;
  right: 6px;
  border: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.1rem; /* 1rem/1.2rem */
  padding: 6px 10px; /* 6/12 */
  border-radius: 6px; /* 4/8 */
  cursor: pointer;
}
.fechar-janela:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ===== Responsividade simples ===== */
@media (max-width: 700px) {
  /* em telas menores, horizontais podem ocupar só 1 coluna */
  .item-galeria.horizontal {
    grid-column: span 1;
  }
  .item-galeria.horizontal img {
    height: 180px;
  }
  .item-galeria.vertical img {
    height: 240px;
  }
}

/* ===== PÁGINA: QUEM SOMOS (prefixo qs-) =====
   Dica p/ aluno: pode mudar cores, tamanhos e espaçamentos aqui. */
.qs-area {
  max-width: 1100px; /* → 960px / 1200px */
  margin: 0 auto;
  padding: 16px 20px 40px; /* → mais/menos “respiro” */
}

/* Bloco base */
.qs-bloco {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px; /* → 8/16px */
  padding: 18px; /* → 14/22px */
  margin: 18px 0; /* → 14/24px */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); /* sombra do cartão */
}

.qs-intro h2 {
  margin: 4px 0 10px;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  background: linear-gradient(90deg, #22d3ee, #0ea5e9); /* → troque as cores */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.qs-intro p {
  color: #333333;
  line-height: 1.6;
}

.qs-destaque {
  background: #ecfeff; /* → troque a cor do destaque */
  border-left: 4px solid #22d3ee;
  padding: 10px 12px;
  border-radius: 8px;
}

.qs-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.qs-card {
  background: #fdfdfd;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.qs-card h3 {
  margin: 8px 0 6px;
  color: #111111;
}

.qs-card p {
  margin: 0;
  color: #444444;
}

.qs-icone {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e6faff; /* → mude o “selo” */
  font-size: 24px;
}

.qs-subtitulo {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: #0b1020;
}

.qs-galeria-mini {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.qs-mini {
  margin: 0;
  background: #fafafa;
  border: 1px solid #eeeeee;
  border-radius: 10px;
  overflow: hidden;
}

.qs-mini img {
  display: block;
  width: 100%;
  height: 200px; /* → 160/240px */
  object-fit: cover;
}

.qs-mini figcaption {
  padding: 8px 10px;
  text-align: center;
  color: #333333;
}

.qs-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 3px solid #22d3ee; /* → cor da “linha” */
}

.qs-timeline > li {
  position: relative;
  margin-left: 8px;
  padding: 10px 10px 10px 16px;
}

.qs-timeline > li::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 14px;
  width: 10px;
  height: 10px;
  background: #22d3ee;
  border-radius: 50%;
  box-shadow: 0 0 0 3px #e6faff; /* “anel” externo */
}

.qs-timeline time {
  display: inline-block;
  margin-bottom: 4px;
  font-weight: bold;
  color: #0b1020;
}

.qs-timeline strong {
  color: #22d3ee;
}

.qs-timeline p {
  margin: 4px 0 0 0;
  color: #444444;
}

.qs-equipe {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.qs-pessoa {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  align-items: center;
  background: #fdfdfd;
  border: 1px solid #ececec;
  border-radius: 10px;
  padding: 10px;
  color: #000000; /* corrigido: garante texto com cor visível */
}

.qs-pessoa img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.qs-faq {
  background: #f9fbff;
  border: 1px solid #e7eef7;
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
}

.qs-faq p {
  color: #363636;
}

.qs-faq > summary {
  cursor: pointer;
  font-weight: 600;
  color: #0b1020;
}

.qs-faq[open] {
  background: #eef7ff;
}

.qs-cta {
  text-align: center;
}

.qs-cta p {
  margin: 0 0 12px;
  color: #333333;
}

.qs-botao {
  display: inline-block;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 8px;
  background: #22d3ee;
  color: #001018;
  border: 1px solid #15bfd9;
}

.qs-botao:hover {
  background: #1bbcd3;
}

/* ===== PÁGINA: CONTATO (prefixo ct-) =====
   Este CSS é independente para evitar conflitos com outras páginas. */

.ct-area {
  max-width: 1100px; /* → 960px / 1200px */
  margin: 0 auto;
  padding: 16px 20px 40px; /* → aumente/diminua o respiro */
}

/* Bloco padrão (cartão) */
.ct-bloco {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px; /* → 8px / 16px */
  padding: 18px; /* → 14px / 22px */
  margin: 18px 0; /* → 14px / 24px */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

/* Títulos e textos da intro */
.ct-intro h2 {
  margin: 4px 0 10px;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.2rem);
  background: linear-gradient(90deg, #22d3ee, #0ea5e9); /* → troque as cores */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.ct-intro p {
  color: #333333;
  line-height: 1.6;
}

/* Cards de contato rápido */
.ct-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(220px, 1fr)
  ); /* → mude a largura mínima */
  gap: 12px;
}
.ct-card {
  background: #fdfdfd;
  border: 1px solid #ececec;
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}
.ct-card strong {
  color: #111111;
}
.ct-card p {
  color: #444444;
  margin: 6px 0 0;
}
.ct-card a {
  color: #0b5cab; /* → personalize a cor do link */
  text-decoration: none;
}
.ct-card a:hover {
  text-decoration: underline;
}
.ct-icone {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e6faff; /* → personalize a cor do selo */
  font-size: 24px;
  margin-bottom: 8px;
}

/* Formulário */
#ct-form {
  display: grid;
  gap: 12px;
}
.ct-campo {
  display: grid;
  gap: 6px;
}
.ct-campo label {
  font-weight: 600;
  color: #0b1020;
}
.ct-campo input,
.ct-campo select,
.ct-campo textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  background: #ffffff;
  color: #111111;
}
.ct-campo input:focus,
.ct-campo select:focus,
.ct-campo textarea:focus {
  border-color: #22d3ee; /* → personalize a cor do foco */
  box-shadow: 0 0 0 3px #e6faff; /* → personalize o brilho do foco */
}

/* Checkbox simples */
.ct-aceite .ct-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #333333;
}
.ct-aceite input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

/* Mensagens de erro/sucesso */
.ct-erro {
  color: #b00020; /* → personalize a cor do erro */
  min-height: 1em; /* reserva espaço mesmo sem erro */
}
.ct-sucesso {
  background: #e7fff6;
  border: 1px solid #a9f0d5;
  color: #065f46;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 12px;
}

/* Ações / botões */
.ct-acoes {
  display: flex;
  gap: 10px;
  justify-content: flex-end; /* → mude para center/space-between */
}
.ct-botao {
  background: #22d3ee; /* → mude a cor do botão principal */
  color: #001018;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #15bfd9;
  cursor: pointer;
}
.ct-botao:hover {
  background: #1bbcd3;
}
.ct-botao-sec {
  background: #ffffff;
  color: #0b1020;
  border: 1px solid #d7dee8;
}
.ct-botao-sec:hover {
  background: #f6faff;
}

/* Dicas (exercício) */
.ct-subtitulo {
  margin: 0 0 10px;
  font-size: 1.2rem;
  color: #0b1020;
}
.ct-lista {
  margin: 0;
  padding-left: 18px;
  color: #333333;
}

/* Responsividade */
@media (max-width: 640px) {
  .ct-acoes {
    justify-content: stretch;
  }
  .ct-botao,
  .ct-botao-sec {
    flex: 1;
  }
}