/**
 * Home, inscrição e comprovante. Depende de tokens.css, base.css e
 * componentes.css.
 */

/* ---------------------------------------------------------------------
 * Cabeçalho e rodapé
 * --------------------------------------------------------------------- */

.cabecalho-site {
  background: var(--gb-branco);
  border-bottom: 1px solid var(--gb-linha);
}

.cabecalho-site__linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding-block: var(--e-3);
}

.cabecalho-site__marca img {
  height: 40px;
  width: auto;
}

.cabecalho-site__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-4);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
}

.cabecalho-site__nav a {
  text-decoration: none;
  color: var(--gb-tinta);
  padding: var(--e-2);
}

.cabecalho-site__nav a:hover {
  color: var(--gb-teal);
}

.rodape-site {
  margin-top: var(--e-16);
  padding-block: var(--e-8);
  background: var(--gb-tinta);
  color: var(--gb-branco);
}

.rodape-site a {
  color: var(--gb-branco);
}

.rodape-site p {
  margin-bottom: var(--e-2);
  font-size: var(--t-xs);
}

/* ---------------------------------------------------------------------
 * Home
 * --------------------------------------------------------------------- */

.hero {
  padding-block: var(--e-12) var(--e-8);
}

.hero__lead {
  font-size: var(--t-md);
  color: var(--gb-grafite);
}

/* Pulso suave do CTA: opacidade + halo que se expande e some. Usado só no
   mobile, onde o botão é o fim da dobra e precisa chamar o olhar. O
   prefers-reduced-motion de base.css zera duração e iterações. */
@keyframes pulso-cta {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(var(--gb-teal-rgb), .45);
  }

  50% {
    opacity: .82;
    box-shadow: 0 0 0 12px rgba(var(--gb-teal-rgb), 0);
  }
}

@media (max-width: 767px) {
  .hero__cta {
    display: flex;
    width: fit-content;
    margin-inline: auto;
    animation: pulso-cta 2s ease-in-out infinite;
  }

  /* Para o pulso na interação: a animação sobrescreveria o anel de foco,
     que também é box-shadow. */
  .hero__cta:hover,
  .hero__cta:focus-visible,
  .hero__cta:active {
    animation: none;
    opacity: 1;
  }
}

.secao-polos {
  padding-block: var(--e-8) var(--e-16);
}

.grade-polos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-6);
  margin-top: var(--e-8);
}

@media (min-width: 480px) {
  .grade-polos {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grade-polos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------------------------------------------------------------------
 * Formulário de inscrição
 * --------------------------------------------------------------------- */

.secao-formulario,
.secao-comprovante,
.secao-fechada,
.secao-em-construcao,
.secao-texto,
.secao-erro {
  padding-block: var(--e-8) var(--e-16);
}

/* Página de texto corrido (política de privacidade): largura de leitura
   confortável, sem virar uma linha de 1200px de ponta a ponta. */
.secao-texto {
  max-width: 44rem;
}

.secao-texto h2 {
  margin-top: var(--e-8);
}

.secao-formulario form {
  max-width: 34rem;
}

/* Lista de cursos com caixas de marcar (permitir_multiplos_cursos). Alvo de
   toque generoso: o público usa celular antigo, muitas vezes de pé. */
.campo-cursos {
  border: 1px solid var(--gb-linha);
  border-radius: var(--raio-sm);
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-6);
  background: var(--gb-branco);
}

.campo-cursos legend {
  padding-inline: var(--e-2);
  font-weight: var(--peso-medio);
}

.campo-cursos.campo--erro {
  border-color: var(--gb-erro);
  background: var(--gb-erro-bg);
}

/* Um curso por linha. O seletor precisa ser mais específico que o
   ".campo label { display: block }" de componentes.css, senão o rótulo
   perde o alinhamento entre caixa e texto. */
.campo-cursos .opcao-curso {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 48px;
  margin-bottom: 0;
  padding: var(--e-1) 0;
  cursor: pointer;
}

.opcao-curso input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--gb-teal);
}

/* Container das caixas de marcar. NÃO reaproveita a classe .lista-cursos:
   aquela é a lista de chips dos cards da home (flex em linha), e herdá-la
   colocava dois cursos na mesma linha no celular. */
.cursos-marcaveis {
  display: block;
}

.cursos-marcaveis__polo {
  border: 0;
  padding: 0;
  margin: 0 0 var(--e-4);
}

.cursos-marcaveis__polo legend {
  padding: 0;
  font-size: var(--t-xs);
  color: var(--gb-grafite);
}

.lista-cursos-comprovante {
  margin: 0;
  padding-left: var(--e-4);
}

/* Campo-armadilha do anti-spam: fica fora da tela em vez de display:none,
   que muitos robôs reconhecem e pulam. Leitor de tela também não lê — o
   HTML marca o bloco com aria-hidden. */
.campo-armadilha {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* ---------------------------------------------------------------------
 * Comprovante
 * --------------------------------------------------------------------- */

.secao-comprovante {
  max-width: 40rem;
}

@media print {
  .cabecalho-site,
  .rodape-site,
  .pular-para-conteudo,
  .secao-comprovante .botao {
    display: none !important;
  }

  body {
    background: var(--gb-branco);
    color: #000;
  }

  .secao-comprovante::after {
    content: "gbala.com.br";
    display: block;
    margin-top: var(--e-8);
    font-size: var(--t-xs);
    color: var(--gb-grafite);
  }
}