/* =========================================================
   1. VARIÁVEIS (ver plan.md, seção 4.1)
   ========================================================= */
:root {
  /* Cores de marca */
  --cor-primaria: #6F0AD6;
  --cor-fundo-banner: #5908AB;
  --cor-secundaria: #F28000;

  /* Texto */
  --cor-texto: #1A1D23;
  --cor-texto-secundario: #5E6470;

  /* Fundos e bordas */
  --cor-fundo: #FFFFFF;
  --cor-borda: #E4E5EA;

  /* Selo "Ao Vivo" */
  --cor-fundo-selo-ao-vivo: #F0E6FF;

  /* Selo "Gravação" */
  --cor-fundo-selo-gravacao: #DDF9CC;
  --cor-texto-selo-gravacao: #2F7D32;

  /* Caixas de contato (Central de Ajuda) */
  --cor-fundo-chat: #FFF4E7;
  --cor-fundo-email: #F0F1F5;

  /* Tipografia */
  --fonte-base: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tamanho-fonte-h1: 2rem;
  --tamanho-fonte-h2: 1.5rem;
  --tamanho-fonte-titulo-card: 1.125rem;
  --tamanho-fonte-texto: 0.9375rem;
  --tamanho-fonte-rotulo: 0.75rem;
  --peso-fonte-negrito: 700;
  --peso-fonte-extra-negrito: 800;
  --peso-fonte-normal: 400;

  /* Formas */
  --raio-pequeno: 6px;
  --raio-grande: 12px;
  --raio-extra-grande: 20px;
  --raio-pilula: 999px;
  --sombra-card: 0 1px 3px rgba(0, 0, 0, .06);

  /* Espaçamento (escala base 4px) */
  --espaco-xs: 4px;
  --espaco-sm: 8px;
  --espaco-md: 16px;
  --espaco-lg: 24px;
  --espaco-xl: 40px;

  /* Largura máxima de conteúdo */
  --largura-maxima-conteudo: 1120px;
}

/* =========================================================
   2. RESET
   ========================================================= */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--fonte-base);
  font-size: var(--tamanho-fonte-texto);
  font-weight: var(--peso-fonte-normal);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

img, svg {
  display: block;
  max-width: 100%;
}

.container {
  max-width: var(--largura-maxima-conteudo);
  margin: 0 auto;
  padding: 0 var(--espaco-lg);
}

/* =========================================================
   3. MENU DE ABAS (navegação entre páginas)
   ========================================================= */
.menu-topo {
  border-bottom: 1px solid var(--cor-borda);
}

.menu-topo .container {
  display: flex;
  gap: var(--espaco-lg);
  padding-top: var(--espaco-md);
}

.aba-menu {
  display: inline-flex;
  align-items: center;
  padding: var(--espaco-sm) var(--espaco-xs);
  font-size: var(--tamanho-fonte-texto);
  font-weight: var(--peso-fonte-negrito);
  color: var(--cor-texto-secundario);
  border-bottom: 3px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.aba-menu:hover {
  color: var(--cor-primaria);
}

.aba-menu.ativa {
  color: var(--cor-primaria);
  border-bottom-color: var(--cor-primaria);
}

/* =========================================================
   4. CABEÇALHO: LOGO + BANNER
   ========================================================= */
.cabecalho-site {
  padding: var(--espaco-xl) 0 var(--espaco-lg);
}

.cabecalho-site .container {
  display: flex;
  align-items: center;
  gap: var(--espaco-xl);
  flex-wrap: wrap;
}

.logo {
  flex-shrink: 0;
}

.logo img {
  display: block;
  height: 6rem;
  width: auto;
}

.banner-destaque {
  flex: 1 1 420px;
  min-width: 280px;
  padding: var(--espaco-lg) var(--espaco-xl);
  border-radius: var(--raio-extra-grande);
  background: var(--cor-fundo-banner);
  color: #fff;
}

.selo-banner {
  display: inline-block;
  padding: var(--espaco-xs) var(--espaco-sm);
  margin-bottom: var(--espaco-sm);
  border-radius: var(--raio-pequeno);
  background: rgba(255, 255, 255, .16);
  font-size: var(--tamanho-fonte-rotulo);
  font-weight: var(--peso-fonte-negrito);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.titulo-banner {
  font-size: var(--tamanho-fonte-h1);
  font-weight: var(--peso-fonte-extra-negrito);
  margin-bottom: var(--espaco-xs);
}

.subtitulo-banner {
  font-size: var(--tamanho-fonte-texto);
  color: rgba(255, 255, 255, .85);
}

/* =========================================================
   5. SEÇÕES / TÍTULOS
   ========================================================= */
.secao {
  padding: var(--espaco-xl) 0;
}

.titulo-secao {
  font-size: var(--tamanho-fonte-h2);
  font-weight: var(--peso-fonte-negrito);
  margin-bottom: var(--espaco-xs);
}

.subtitulo-secao {
  color: var(--cor-texto-secundario);
  margin-bottom: var(--espaco-lg);
}

/* =========================================================
   6. GRADE DE MÓDULOS
   ========================================================= */
.grade-modulos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espaco-md);
}

.card-modulo {
  display: flex;
  flex-direction: column;
  padding: var(--espaco-lg);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-card);
}

.selo-modulo {
  display: inline-block;
  align-self: flex-start;
  padding: 4px var(--espaco-sm);
  margin-bottom: var(--espaco-sm);
  border-radius: var(--raio-pequeno);
  font-size: var(--tamanho-fonte-rotulo);
  font-weight: var(--peso-fonte-negrito);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}

.selo-modulo.selo-ao-vivo {
  background: var(--cor-fundo-selo-ao-vivo);
  color: var(--cor-primaria);
  border-radius: var(--raio-pilula);
  padding: var(--espaco-xs) var(--espaco-md);
}

.selo-modulo.selo-gravacao {
  background: var(--cor-fundo-selo-gravacao);
  color: var(--cor-texto-selo-gravacao);
  border-radius: var(--raio-pilula);
  padding: var(--espaco-xs) var(--espaco-md);
}

.titulo-modulo {
  font-size: var(--tamanho-fonte-titulo-card);
  font-weight: var(--peso-fonte-negrito);
  margin-bottom: var(--espaco-sm);
}

.descricao-modulo {
  color: var(--cor-texto-secundario);
  flex-grow: 1;
}

.rodape-modulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espaco-sm);
  margin-top: var(--espaco-md);
  padding-top: var(--espaco-md);
  border-top: 1px solid var(--cor-borda);
}

.info-modulo {
  font-size: var(--tamanho-fonte-rotulo);
  color: var(--cor-texto-secundario);
}

.rodape-modulo.alinhar-fim {
  justify-content: flex-end;
}

/* =========================================================
   7. BOTÕES
   ========================================================= */
.botao {
  display: inline-flex;
  align-items: center;
  gap: var(--espaco-xs);
  padding: var(--espaco-sm) var(--espaco-md);
  border: none;
  border-radius: var(--raio-pilula);
  font-size: var(--tamanho-fonte-texto);
  font-weight: var(--peso-fonte-negrito);
  color: #fff;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}

.botao:hover,
.botao:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.botao svg {
  width: 16px;
  height: 16px;
}

.botao-agendar {
  background: var(--cor-secundaria);
}

.botao-assistir {
  background: var(--cor-primaria);
}

/* =========================================================
   8. CENTRAL DE AJUDA (contato + FAQ)
   ========================================================= */
.grade-ajuda {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--espaco-md);
  align-items: start;
}

.card-ajuda {
  padding: var(--espaco-lg);
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-grande);
  box-shadow: var(--sombra-card);
}

.titulo-card-ajuda {
  font-size: var(--tamanho-fonte-titulo-card);
  font-weight: var(--peso-fonte-negrito);
  text-align: center;
}

.subtitulo-card-ajuda {
  margin-top: var(--espaco-xs);
  margin-bottom: var(--espaco-lg);
  color: var(--cor-texto-secundario);
  text-align: center;
}

.lista-contato {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-sm);
}

.item-contato {
  display: flex;
  align-items: center;
  gap: var(--espaco-md);
  padding: var(--espaco-md);
  border-radius: var(--raio-grande);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}

.item-contato:hover,
.item-contato:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.item-contato.contato-whatsapp { background: var(--cor-fundo-selo-gravacao); }
.item-contato.contato-telefone { background: var(--cor-fundo-selo-ao-vivo); }
.item-contato.contato-chat     { background: var(--cor-fundo-chat); }
.item-contato.contato-email    { background: var(--cor-fundo-email); }

.icone-contato {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--cor-texto);
}

.icone-contato svg {
  width: 20px;
  height: 20px;
}

.rotulo-contato {
  display: block;
  color: var(--cor-texto);
  font-weight: var(--peso-fonte-negrito);
  margin-bottom: 2px;
}

.valor-contato {
  display: block;
  color: var(--cor-texto-secundario);
  font-size: var(--tamanho-fonte-texto);
}

.lista-faq {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-md);
}

.pergunta-faq {
  font-weight: var(--peso-fonte-negrito);
  margin-bottom: var(--espaco-xs);
}

.resposta-faq {
  color: var(--cor-texto-secundario);
}

/* =========================================================
   9. RODAPÉ
   ========================================================= */
.rodape-site {
  padding: var(--espaco-lg) 0 var(--espaco-xl);
  color: var(--cor-texto-secundario);
  font-size: var(--tamanho-fonte-rotulo);
  text-align: center;
}

.rodape-site img {
  height: 5rem;
  width: auto;
  margin: 0 auto;
}

/* =========================================================
   10. RESPONSIVO
   ========================================================= */
@media (max-width: 860px) {
  .grade-ajuda {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .grade-modulos {
    grid-template-columns: 1fr;
  }

  .cabecalho-site .container {
    flex-direction: column;
    align-items: flex-start;
  }

  .banner-destaque {
    width: 100%;
    max-height: 18rem;
  }

  .logo {
    align-self: center;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 var(--espaco-md);
  }

  .rodape-modulo {
    flex-direction: column;
    align-items: flex-start;
  }

  .botao {
    width: 100%;
    justify-content: center;
  }
}