/* ===== VARIÁVEIS DO TEMA DARK/NEON ===== */
:root {
  --bg-dark: #0b0f0c;
  --bg-darker: #050806;
  --neon-green: #00ff88;
  --neon-green-dim: rgba(0, 255, 136, 0.15);
  --neon-glow: 0 0 10px rgba(0, 255, 136, 0.5), 0 0 20px rgba(0, 255, 136, 0.3);

  --text-main: #e2e8e4;
  --text-muted: #a0aab2;
  --white: #ffffff;

  /* Glassmorphism */
  --glass-bg: rgba(20, 25, 20, 0.65);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

  --font-principal: "Poppins", sans-serif;
  --radius-padrao: 1.6rem;
  --transicao: all 0.3s ease;
}

/* ===== RESET E BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-principal);
  font-size: 1.6rem;
  color: var(--text-main);
  background-color: var(--bg-dark);
  line-height: 1.6;
  overflow-x: hidden;
}

ul {
  list-style: none;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Partículas no Fundo */
#tsparticles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* Fica atrás de todo o conteúdo */
}

/* ===== UTILITÁRIOS E COMPONENTES ===== */
.text-neon {
  color: var(--neon-green);
  text-shadow: var(--neon-glow);
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-padrao);
}

.border-neon {
  border: 1px solid var(--neon-green) !important;
  box-shadow: var(--neon-glow);
}

/* Botões */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.2rem 2.4rem;
  border-radius: 5rem;
  font-weight: 600;
  font-size: 1.5rem;
  cursor: pointer;
  transition: var(--transicao);
  border: 0.2rem solid transparent;
}

.btn--neon {
  background-color: var(--neon-green);
  color: var(--bg-darker);
  box-shadow: var(--neon-glow);
}

.btn--neon:hover {
  background-color: #00cc6d;
  transform: translateY(-0.2rem);
  box-shadow:
    0 0 15px rgba(0, 255, 136, 0.7),
    0 0 30px rgba(0, 255, 136, 0.5);
}

.btn--outline {
  background-color: transparent;
  color: var(--text-main);
  border-color: var(--glass-border);
}

.btn--outline:hover {
  border-color: var(--neon-green);
  color: var(--neon-green);
}

.btn--large {
  padding: 1.6rem 3.6rem;
  font-size: 1.6rem;
}

/* ===== CABEÇALHO ===== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Fundo inicial transparente, ganha cor no JS ao rolar */
  background: transparent;
  border-bottom: 1px solid transparent;
  z-index: 1000;
  transition: var(--transicao);
}

.header__container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header__logo-text {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 0.1rem;
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.header__menu-btn {
  display: none;
  background: none;
  border: none;
  font-size: 2.8rem;
  color: var(--neon-green);
  cursor: pointer;
}

.nav {
  display: flex;
  align-items: center;
}
.nav__list {
  display: flex;
  gap: 3.2rem;
}
.nav__link {
  font-weight: 500;
  color: var(--text-main);
  font-size: 1.4rem;
  transition: var(--transicao);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
}
.nav__link:hover {
  color: var(--neon-green);
  text-shadow: var(--neon-glow);
}

/* ===== SEÇÕES BASE ===== */
.section {
  padding: 10rem 2rem;
  position: relative;
}
.section__container {
  max-width: 1200px;
  margin: 0 auto;
}

.section__kicker {
  font-size: 1.3rem;
  color: var(--neon-green);
  font-weight: 600;
  letter-spacing: 0.2rem;
  margin-bottom: 1rem;
}

.section__title {
  font-size: 4rem;
  color: var(--white);
  margin-bottom: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
}

.section__subtitle {
  font-size: 1.8rem;
  color: var(--text-muted);
  margin-bottom: 4.8rem;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 8rem;
  /* background-image: url('/hackamarh-2026/assets/img/plano_fundo_hero6.png'); */
  background-image: url("/hackamarh-2026/assets/img/lobo_guara.png");
  background-size: cover;
  background-position: center bottom -20%;
  background-repeat: no-repeat;
}

.hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Gradiente escuro focado no lado esquerdo para proteger a leitura do texto */
  background: linear-gradient(
    90deg,
    rgba(11, 15, 12, 0.9) 0%,
    rgba(11, 15, 12, 0.4) 100%
  );
  z-index: 1;
}

.hero__container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-flow: column; /* Empilha o texto em cima e o contador em baixo */
  justify-content: center;
  gap: 6rem; /* Distância generosa entre os botões e o contador centralizado */
}

/* Garante que o texto fique restrito à esquerda como estavam */
.hero__content {
  max-width: 65rem;
  text-align: left;
}

.hero__badge {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  border: 1px solid var(--neon-green);
  border-radius: 5rem;
  color: var(--neon-green);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
  box-shadow: var(--neon-green-dim) 0px 0px 10px inset;
}

.hero__title {
  font-size: 7.4rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2rem;
  color: var(--white);
}
.hero__title-year {
  display: inline-block;
  color: transparent; /* Deixa o interior da fonte invisível (efeito vazado) */
  -webkit-text-stroke: 0.2rem var(--white); /* Cria a borda branca de 2px ao redor do número */

  /* Ajustes matemáticos para igualar a largura com a palavra "HACKA" */
  font-size: 10.4rem; /* Tamanho consideravelmente maior que o título principal */
  letter-spacing: 0.8rem; /* Espaçamento entre os números para esticar a palavra */

  line-height: 0.9;
  margin-top: 0.5rem;
  text-shadow: none; /* Garante que não herde brilho neon, mantendo o visual limpo */
}
.hero__subtitle {
  font-size: 2rem;
  color: var(--text-main);
  margin-bottom: 3.2rem;
  font-weight: 400;
  line-height: 1.5;
}

.hero__info {
  display: flex;
  /* flex-wrap: wrap; */
  justify-content: flex-start; /* Mantém os ícones alinhados à esquerda */
  gap: 3.2rem;
  margin-bottom: 4rem;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  width: 100%;
  max-width: 52rem;
}

.hero__info-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 1rem;
  color: var(--white);
  background-color: rgba(11, 15, 12, 0.25);
  border: 0.1px solid var(--neon-green);
  /* box-shadow: var(--neon-glow); */
  border-radius: var(--radius-padrao);
  padding: 1.2rem 2rem;
}

.hero__info-item i {
  font-size: 2.9rem; /* Trava o ícone no tamanho exato da fonte do texto */
  display: flex;
  align-items: center;
}

.hero__actions {
  display: flex;
  gap: 2rem;
  justify-content: flex-start; /* Mantém o botão alinhado à esquerda */
  width: 100%;
  max-width: 52rem;
}

.hero__btn {
  width: calc(50% - 1.6rem);
  justify-content: center;
}

/* Sub-seção apenas para centralizar o relógio */
.hero__countdown-wrapper {
  display: flex;
  width: 100%;
  justify-content: center; /* Força apenas o painel do contador a ir para o centro */
}

.countdown {
  width: 100%;
  margin: 0 auto;
  padding: 2rem 3rem;
  /* max-width: 50vw; */
  text-align: center;
  border: 1px solid var(--neon-green);
  /* box-shadow: var(--neon-glow);
  border-radius: var(--radius-padrao); */
  background-color: rgba(
    11,
    15,
    12,
    0.25
  ); /* Fundo sutil de vidro para leitura dos números */
}
.countdown__title {
  font-size: 1.4rem;
  color: var(--white);
  letter-spacing: 0.2rem;
  margin-bottom: 2.4rem;
  font-weight: 600;
}
.countdown__timer {
  display: flex;
  gap: 10vw;
  justify-content: center;
  align-items: center;
}

.countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 7rem;
  position: relative;
}

/* Mantendo o seu separador de Barra Reta (|) */
.countdown__item:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: -5vw;
  transform: translateX(50%) translateY(-50%);
  top: 2.4rem;
  font-size: 3.6rem;
  color: var(--neon-green);
  font-weight: 300;
}

.countdown__number {
  font-size: 4.8rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: none !important;
}
.countdown__label {
  font-size: 1.1rem;
  color: var(--text-muted);
  letter-spacing: 0.2rem;
  margin-top: 0.8rem;
}

/* ===== SOBRE ===== */
.sobre {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 8rem 2rem;
  background-color: rgba(11, 15, 12, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Linha neon no topo para marcar visualmente o início exato da caixa */
  /* border-top: 0.5px solid var(--neon-green);
  border-bottom: 0.5px solid var(--glass-border); */
}
.sobre .section__container {
  padding: 0;
  max-width: 1200px;
  margin: 0 auto;
}
.sobre .section__text {
  font-size: 2rem;
  color: var(--text-main);
  font-weight: 300;
  max-width: 90rem;
  margin: 0 auto;
}

/* ===== REGRAS (CARDS) ===== */
.regras .section__container {
  display: flex;
  align-items: center; /* Alinha o título e os cards pelo centro vertical [3] */
  justify-content: space-between;
  gap: 6rem; /* Espaço de distanciamento entre o texto e os cards [3] */
}

.regras .section__header {
  flex: 1; /* Define que o cabeçalho ocupe 1 parte do espaço flexível [4] */
  min-width: 32rem; /* Garante uma largura mínima para que o título não fique espremido */
}

.regras .grid-cards {
  flex: 2.5;
  margin-top: 0;
  grid-template-columns: repeat(3, 1fr);
}
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(32rem, 1fr));
  gap: 3.2rem;
  margin-top: 4.8rem;
}
.card {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: 2rem;
  padding: 3rem 2.4rem;
  transition: var(--transicao);
  height: 100%;
}
.card:hover {
  border-color: var(--neon-green);
  transform: translateY(-0.5rem);
}
.card__content {
  display: flex;
  flex-flow: column;
  gap: 1rem;
}
.card__icon-wrapper {
  width: 6.4rem;
  height: 6.4rem;
  flex-shrink: 0;
  background: var(--neon-green-dim);
  border-radius: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card__icon {
  font-size: 2.8rem;
  color: var(--neon-green);
}
.card__title {
  font-size: 2rem;
  color: var(--white);
  margin-bottom: 1rem;
}
.card__text {
  font-size: 1.5rem;
  color: var(--text-muted);
}

/* ===== DESAFIOS ===== */
.desafios {
  position: relative;
}
.desafios::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/hackamarh-2026/assets/img/fundo_simples.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scaleX(-1);
  z-index: 0;
}

/* Camada escura para não atrapalhar a leitura dos textos com o novo fundo */
.desafios__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(11, 15, 12, 0.6);
  z-index: 1;
}

.grid-desafios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  gap: 3.2rem;
  margin-top: 4.8rem;
}

.desafio-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transicao);
  position: relative;
  border-color: transparent;
}

.desafio-card:hover {
  border-color: var(--neon-green);
  transform: scale(1.02);
}

.desafio-card__content {
  padding: 4rem 3.2rem; /* Aumentamos um pouco o respiro interno */
  flex-grow: 1;
  text-align: left;

  /* Configurações da imagem de fundo injetada pelo HTML */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Técnica de mesclagem para escurecer a foto e dar leitura ao texto */
  background-color: rgba(11, 15, 12, 0.25);
  background-blend-mode: multiply;

  /* Garante que o fundo não vaze das bordas arredondadas do card */
  border-radius: inherit;
}

.desafio-card__badge {
  display: inline-block;
  padding: 0.4rem 1.2rem;
  background: var(--neon-green-dim);
  color: var(--neon-green);
  border-radius: 0.4rem;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 1.6rem;
}

.desafio-card__title {
  font-size: 2.4rem;
  color: var(--white);
  margin-bottom: 1.6rem;
  line-height: 1.3;
}
.desafio-card__text {
  font-size: 1.6rem;
  color: var(--text-muted);
}

/* Organização do novo botão centralizado usando Flexbox */
.desafios__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 6rem;
  width: 100%;
}

/* Garante a borda verde fixa e corrige a centralização */
.desafios__actions .btn--outline {
  border: 2px solid var(--neon-green); /* Borda verde visível permanentemente */
  background-color: transparent; /* Fundo vazio */
  color: var(--white); /* Cor do texto */
  width: max-content; /* Remove qualquer esticamento, forçando o botão a ficar no centro */
  transition: var(--transicao);
}

/* Efeito ao passar o mouse no botão */
.desafios__actions .btn--outline:hover {
  background-color: var(--neon-green); /* Preenche o botão de verde */
  color: #0b0f0c; /* Deixa o texto escuro para dar um bom contraste com o fundo claro */
  box-shadow: var(--neon-glow);
}
.desafio-card__text-box {
  width: 100%;
  max-width: 60%; /* Trava o crescimento do texto em exatos 50% do card */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ===== VÍDEOS ===== */
.grid-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
  gap: 3.2rem;
  margin-top: 4.8rem;
}
.video-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transicao);
}
.video-card:hover {
  border-color: var(--neon-green);
  transform: translateY(-0.5rem);
}
.video-card__iframe-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  width: 100%;
  background: #000;
}
.video-card__iframe-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.video-card__content {
  padding: 2.4rem;
}
.video-card__title {
  font-size: 2rem;
  color: var(--white);
  margin-bottom: 0.8rem;
}
.video-card__description {
  font-size: 1.4rem;
  color: var(--text-muted);
}

/* ==========================================================================
   SEÇÃO CRONOGRAMA
   ========================================================================== */

.cronograma-dark {
  padding: 10rem 2rem;
  position: relative;

  /* 1. Combina a película escura (gradiente) e a imagem na mesma propriedade */
  background-image:
    linear-gradient(
      90deg,
      rgba(11, 15, 12, 0.9) 0%,
      rgba(11, 15, 12, 0.4) 100%
    ),
    url("/hackamarh-2026/assets/img/fundo_podio.png");

  /* 2. Boas práticas para a imagem se ajustar perfeitamente à tela */
  background-size: cover; /* Faz a imagem cobrir toda a área da seção sem distorcer [3, 4] */
  background-position: center; /* Centraliza o foco da imagem [4, 5] */
  background-repeat: no-repeat; /* Evita que a imagem fique se repetindo como um mosaico [4, 6] */
}

/* ==========================================
   ESTRUTURA DA LINHA GUIA
   ========================================== */
.timeline-moderna {
  max-width: 80rem;
  margin: 6rem auto 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

/* A Linha Vertical com leve brilho */
.timeline-moderna::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2.4rem; /* Posição à esquerda para ancorar a linha */
  width: 0.2rem;
  background: linear-gradient(
    to bottom,
    rgba(0, 255, 136, 0.1),
    rgba(0, 255, 136, 0.4),
    rgba(0, 255, 136, 0.1)
  );
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
  z-index: 1;
}

/* ==========================================
   ITENS E PONTOS (DOTS)
   ========================================== */
.timeline-moderna__item {
  position: relative;
  padding-left: 6.4rem; /* Espaço para não encostar na linha */
  display: flex;
  align-items: center;
  z-index: 2;
}

/* O Ponto Básico da Timeline */
.timeline-moderna__dot {
  position: absolute;
  left: 1.7rem; /* Centraliza o ponto matematicamente sobre a linha de 2.4rem */
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background-color: #0b0f0c;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   CARDS DE CONTEÚDO (GLASSMORPHISM)
   ========================================== */
.timeline-moderna__card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.6rem;
  padding: 2.4rem;
  width: 100%;
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}

.timeline-moderna__card:hover {
  transform: translateY(-0.5rem);
  box-shadow: 0 1.2rem 2.4rem rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.15);
}

.timeline-moderna__date {
  font-size: 1.4rem;
  font-weight: 700;
  color: #a9a9a9;
  letter-spacing: 0.1rem;
  display: block;
  margin-bottom: 0.8rem;
}

.timeline-moderna__title {
  font-size: 2.2rem;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 1rem;
}

.timeline-moderna__desc {
  font-size: 1.6rem;
  color: #cccccc;
  line-height: 1.5;
}

/* ==========================================
   ⭐ DESTAQUE ESPECIAL (O HACKATHON)
   ========================================== */

/* Aumenta a escala do card do evento principal */
.timeline-moderna__item--destaque .timeline-moderna__card {
  transform: scale(1.03); /* Leve aumento de escala base */
  border-color: var(--neon-green, #00ff88);
  background: rgba(0, 255, 136, 0.05); /* Fundo levemente verde */
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.1);
  border-left: 0.6rem solid var(--neon-green, #00ff88); /* Borda direcional forte */
}

/* Interação aprimorada no destaque */
.timeline-moderna__item--destaque .timeline-moderna__card:hover {
  transform: scale(1.05) translateY(-0.5rem);
  box-shadow: 0 1.5rem 3rem rgba(0, 255, 136, 0.2);
}

/* Altera o Ponto para um Ícone Brilhante no Destaque */
.timeline-moderna__item--destaque .timeline-moderna__dot {
  width: 3.2rem;
  height: 3.2rem;
  left: 0.9rem; /* Reajuste matemático para o ícone maior centralizar na linha */
  background-color: var(--neon-green, #00ff88);
  border-color: var(--neon-green, #00ff88);
  box-shadow: 0 0 15px var(--neon-green, #00ff88);
}

.timeline-moderna__item--destaque .timeline-moderna__dot i {
  color: #0b0f0c; /* Ícone escuro para contrastar com o fundo verde neon */
  font-size: 1.4rem;
}

/* ==========================================================================
   SEÇÃO PREMIAÇÃO: PÓDIO EM CARDS
   ========================================================================== */

.premiacao-glow {
  padding: 10rem 2rem;
  background-color: #050706; /*Fundo super escuro para destacar o neon */
  position: relative;
}

/* Contêiner principal do pódio */
.podio-cards {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center; /* Alinha os cards pelo centro (efeito de órbita) */
  gap: 2rem;
  margin-top: 6rem;
}

/* Estrutura base de todos os cards */
.podio-card {
  background: rgba(255, 255, 255, 0.03); /* Glassmorphism base */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2.4rem;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* Ícones, Posições e Valores comuns */
.podio-card__icon {
  font-size: 4rem;
  margin-bottom: 1.6rem;
  transition: transform 0.3s ease;
}

.podio-card__posicao {
  font-size: 1.6rem;
  font-weight: 700;
  color: #a9a9a9; /* Cor mutada para dar foco ao 1º lugar */
  letter-spacing: 0.1rem;
  margin-bottom: 0.8rem;
}

.podio-card__valor {
  font-size: 2.2rem;
  font-weight: 800;
  color: #ffffff;
}

/* Interação global de Hover */
.podio-card:hover {
  transform: translateY(-1rem);
  background: rgba(255, 255, 255, 0.06);
}
.podio-card:hover .podio-card__icon {
  transform: scale(1.15);
}

/* ==========================================================================
   HIERARQUIA VISUAL (TAMANHOS E DESTAQUES)
   ========================================================================== */

/* 1º LUGAR (MAIOR E NO CENTRO) */
.podio-card--destaque {
  width: 26rem;
  height: 38rem;
  z-index: 3;
  border-color: var(--neon-green, #00ff88);
  box-shadow:
    0 0 30px rgba(0, 255, 136, 0.15),
    inset 0 0 20px rgba(0, 255, 136, 0.05);
  background: rgba(0, 255, 136, 0.05);
}

.podio-card--destaque .podio-card__icon {
  font-size: 6rem;
  color: var(--neon-green, #00ff88);
  filter: drop-shadow(0 0 10px rgba(0, 255, 136, 0.5));
}

.podio-card--destaque .podio-card__posicao {
  font-size: 2rem;
}
.podio-card--destaque .podio-card__valor {
  font-size: 3.2rem;
}

/* Efeito de "Pedestal" apenas no 1º lugar */
.podio-card__pedestal {
  position: absolute;
  bottom: -2rem;
  width: 80%;
  height: 4rem;
  background: var(--neon-green, #00ff88);
  filter: blur(25px);
  opacity: 0.6;
  border-radius: 50%;
  z-index: -1;
}

/* 2º e 3º LUGARES (MÉDIOS) */
.podio-card--medio {
  width: 22rem;
  height: 30rem;
  z-index: 2;
}
.podio-card--prata .podio-card__icon {
  color: #c0c0c0;
  filter: drop-shadow(0 0 8px rgba(192, 192, 192, 0.3));
}
.podio-card--bronze .podio-card__icon {
  color: #cd7f32;
  filter: drop-shadow(0 0 8px rgba(205, 127, 50, 0.3));
}

/* 4º e 5º LUGARES (MENORES) */
.podio-card--menor {
  width: 18rem;
  height: 24rem;
  z-index: 1;
  opacity: 0.6; /* Deixa-os mais discretos */
}
.podio-card--menor:hover {
  opacity: 1;
}
.podio-card--quarto .podio-card__icon,
.podio-card--quinto .podio-card__icon {
  color: #666;
}

/* ===== CTA FINAL ===== */

/* 1. SEÇÃO EM 100% DA TELA E BORDA COLADA */
.cta-final {
  width: 100%;
  margin: 0; /* Zera qualquer margem externa para colar na seção de cima */
  padding: 6rem 2rem;

  /* Movendo o efeito de vidro para ocupar a tela toda */
  background-color: rgba(11, 15, 12, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* Borda no topo que preenche de ponta a ponta sem bordas laterais */
  border-top: 1px solid var(--neon-green);
  border-bottom: 1px solid var(--glass-border);
}

/* 2. ALINHAMENTO EM LINHA ÚNICA */
.cta-final__container {
  display: flex;
  align-items: center; /* Centraliza todos os itens pelo meio da linha vertical [3-5] */
  justify-content: space-between; /* Distribui os itens para que ocupem os espaços nas extremidades e no meio [6] */
  flex-wrap: nowrap; /* Trava os elementos em uma única linha, não deixando quebrar para baixo [2] */
  gap: 4rem; /* Distância entre o título, o texto e o botão [7] */
  padding: 0;
}

.cta-final__title {
  margin: 0; /* Remove a margem padrão para manter o alinhamento central */
  flex-shrink: 0; /* Impede que o título seja esmagado pela tela */
  line-height: 1.2;
}

/* 3. TEXTO COM O DIVISOR VERTICAL (|) */
.cta-final__desc {
  font-size: 1.6rem;
  color: var(--text-muted);
  margin: 0;

  /* Linha vertical separadora à esquerda do texto */
  border-left: 2px solid var(--glass-border);
  padding-left: 4rem; /* Distância entre a linha '|' e as palavras do texto */

  flex: 1; /* Permite que o texto cresça e preencha livremente a área central */
}

/* 4. GRUPO DO BOTÃO */
.cta-final__action {
  display: flex;
  flex-direction: column; /* Empilha o botão em cima e as vagas embaixo [8] */
  align-items: center; /* Centraliza as informações do botão horizontalmente [7, 9] */
  gap: 1.6rem;
  flex-shrink: 0; /* Impede que o botão seja espremido */
}

.cta-final__vagas {
  font-size: 1.2rem;
  color: var(--neon-green);
  font-weight: 700;
  letter-spacing: 0.1rem;
  text-align: center;
}
/* ===== FOOTER ===== */

.footer {
  padding: 6.4rem 2rem 2.4rem;
  margin-top: 0; /* Garante colagem na seção anterior */
  background-color: #050706; /* Fundo extremamente escuro */
  border-top: 1px solid var(--glass-border);
  border-radius: 0;
}

/* Novo layout empilhado (Coluna) para abrigar as 7 logos */
.footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.8rem;
  margin-bottom: 4.8rem;
}

.footer__brand {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--white);
}

.footer__partners {
  width: 100%;
  text-align: center;
}

.footer__partners-title {
  font-size: 1.4rem;
  color: var(--text-muted);
  letter-spacing: 0.2rem;
  font-weight: 700;
  margin-bottom: 2.4rem;
}

.footer__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap; /* Permite que as logos pulem de linha no celular se faltar espaço */
  gap: 4rem; /* Espaço confortável entre as logos */
}

/* O SEGREDO DO DESIGN: Filtros nas logos para o Dark Mode */
.footer__logo {
  height: 5rem; /* Altura padrão para as logos não ficarem desproporcionais */

  /* Converte qualquer logo colorida em uma silhueta clara/cinza [1] */
  filter: grayscale(100%) brightness(200%) opacity(0.6);
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Restaura as cores originais da marca no hover [2] */
.footer__logo:hover {
  filter: grayscale(0%) brightness(100%) opacity(1);
  transform: scale(1.1); /* Leve aproximação 3D */
}

.footer__social {
  display: flex;
  gap: 2.4rem;
  font-size: 2.8rem;
}

.footer__social a {
  color: var(--text-muted);
  transition: all 0.3s ease;
}

/* Mantendo o brilho Neon para coesão */
.footer__social a:hover {
  color: var(--neon-green);
  transform: translateY(-0.3rem);
  text-shadow: 0 0 10px rgba(0, 255, 136, 0.4);
}

.footer__bottom {
  text-align: center;
  font-size: 1.3rem;
  color: var(--text-muted);
  border-top: 1px solid var(--glass-border);
  padding-top: 2.4rem;
}

/* ===== RESPONSIVIDADE ===== */

/* -------------------------------------------
   Telas Médias (Tablets) - Até 992px
------------------------------------------- */
@media (max-width: 992px) {
  .hero__title {
    font-size: 4.8rem;
  }
  .hero__info {
    flex-direction: column;
    gap: 1.6rem;
  }
  .regras .section__container {
    flex-direction: column; /* Coloca o título em cima e a grade embaixo */
    align-items: center;
    gap: 4rem; /* Reduz o espaço gigante de 6rem do desktop */
  }
  /* Libera o título para ocupar 100% da tela e centraliza */
  .regras .section__header {
    min-width: 100%;
    text-align: center;
  }
  .regras .section__title {
    text-align: center; /* Centraliza o texto "O que você precisa saber" no mobile */
  }

  .regras .grid-cards {
    grid-template-columns: 1fr; /* Mata a regra de 3 colunas e força 1 coluna única */
    width: 100%;
  }

  /* CTA Final: Empilhando e centralizando */
  .cta-final__container {
    flex-direction: column;
    text-align: center;
    gap: 4rem;
    padding: 4rem 2rem;
  }
  .cta-final__text h2 {
    text-align: center;
  }
  .cta-final__desc {
    border-left: none; /* Tira a barra lateral no celular */
    border-top: 1px solid var(--glass-border); /* Coloca uma linha no topo */
    padding-left: 0;
    padding-top: 2rem;
  }

  .footer__container {
    flex-direction: column;
    gap: 4rem;
  }
  .footer__logos {
    flex-wrap: wrap; /* Permite que as logos desçam para a próxima linha [1, 2] */
    overflow-x: visible; /* Desativa a rolagem horizontal que havíamos criado antes */
    justify-content: center; /* Mantém as logos centralizadas [2] */
  }

  /* Pódio Neon Responsivo: Empilhando em Cards e Forçando a Ordem Lógica */
  .podio-cards {
    flex-flow: column nowrap;
    gap: 2.4rem;
  }
  .podio-card {
    width: 100%;
    max-width: 40rem;
    height: auto;
    padding: 3.2rem;
    opacity: 1; /* Tira a transparência no celular para leitura clara */
  }

  /* Reordenando via Flexbox do 1º ao 5º lugar */
  .podio-card--ouro {
    order: 1;
  }
  .podio-card--prata {
    order: 2;
  }
  .podio-card--bronze {
    order: 3;
  }
  .podio-card--quarto {
    order: 4;
  }
  .podio-card--quinto {
    order: 5;
  }

  /* Ajustando o brilho (glow) do pedestal do 1º lugar */
  .podio-card__pedestal {
    bottom: -1rem;
    width: 90%;
    height: 2rem;
    filter: blur(15px);
  }
}

/* -------------------------------------------
   Telas Pequenas (Celulares) - Até 768px
------------------------------------------- */
@media (max-width: 768px) {
  /* Menu Mobile */
  .header__menu-btn {
    display: block;
  }
  .nav {
    position: fixed;
    top: 7.2rem;
    left: -100%;
    width: 100%;
    height: calc(100vh - 7.2rem);
    background: var(--bg-darker);
    flex-direction: column;
    justify-content: center;
    gap: 4rem;
    transition: var(--transicao);
  }
  .nav--ativo {
    left: 0;
  }
  .nav__list {
    flex-direction: column;
    text-align: center;
    gap: 3.2rem;
  }
  .nav__link {
    font-size: 2.2rem;
  }

  /* Hero & Botões */
  .hero__actions {
    flex-direction: column;
    width: 100%;
  }
  .hero__actions .btn {
    width: 100%;
  }

  /* Cronômetro Mobile */
  .countdown {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .countdown__item:not(:last-child)::after {
    display: none;
  }
  .countdown__item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 1.5rem;
    border-radius: 1rem;
    min-width: 45%;
  }

  .section__title {
    font-size: 3.2rem;
  }

  /* Cronograma Moderno (Stepper) Responsivo */
  .timeline-moderna {
    gap: 2.4rem;
  }
  .timeline-moderna__card {
    padding: 2rem 1.6rem;
  }
  .timeline-moderna__title {
    font-size: 1.8rem;
  }

  /* O card do Hackathon perde a escala extra no celular para não esmagar as bordas da tela */
  .timeline-moderna__item--destaque .timeline-moderna__card {
    transform: scale(1);
  }
  .timeline-moderna__item--destaque .timeline-moderna__card:hover {
    transform: translateY(-0.3rem);
  }
  /* ==========================================================================
   RESPONSIVIDADE COMPLETA PARA MOBILE E TELAS PEQUENAS
   ========================================================================== */

  /* -------------------------------------------
   CELULARES PADRÕES (Até 480px)
------------------------------------------- */
  @media (max-width: 480px) {
    /* 1. ESCALA GLOBAL (A MÁGICA DO REM) */
    html {
      /* Reduz a raiz para 50% (1rem = 8px). Tudo no site diminui magicamente! [1, 6] */
      font-size: 50%;
    }

    /* 2. ESPAÇAMENTOS GERAIS DAS SEÇÕES */
    .section {
      /* Reduz o padding gigante de 10rem para focar no conteúdo no celular */
      padding: 6rem 1.6rem;
    }

    .section__title {
      font-size: 3.2rem;
    }

    /* 3. SEÇÃO HERO E CRONÔMETRO */
    .hero__title {
      font-size: 4rem; /* Evita que o título ocupe a tela inteira */
    }

    .countdown {
      gap: 0.8rem;
    }

    .countdown__item {
      min-width: 47%; /* Garante que fiquem 2 quadrados por linha num celular normal */
      padding: 1.2rem 0.8rem;
    }

    /* 4. CRONOGRAMA MODERNO (Ajuste fino da linha para não esmagar o texto) */
    .timeline-moderna::before {
      left: 1.6rem; /* Puxa a linha mais para a esquerda */
    }

    .timeline-moderna__item {
      padding-left: 4.8rem; /* Reduz o recuo do card para sobrar espaço */
    }

    .timeline-moderna__dot {
      left: 0.9rem; /* Reajusta a bolinha base matematicamente sobre a nova linha */
    }

    .timeline-moderna__item--destaque .timeline-moderna__dot {
      left: 0.1rem; /* Reajusta o ícone neon de destaque */
    }

    .timeline-moderna__card {
      padding: 2rem 1.6rem; /* Remove excesso de vidro interno */
    }

    /* 5. PÓDIO NEON */
    .podio-card {
      padding: 2.4rem 1.6rem;
    }

    .podio-card__icon {
      font-size: 4.8rem; /* Ícone de troféu ligeiramente menor */
    }

    /* 6. REGRAS DO EVENTO E VÍDEOS */
    .card {
      padding: 2.4rem 1.6rem;
      align-items: center; /* Centraliza os itens do card para melhor simetria */
      text-align: center;
    }

    .video-card__content {
      padding: 1.6rem;
    }

    /* 7. CTA FINAL E RODAPÉ */
    .cta-final {
      padding: 4rem 1.6rem;
    }

    .footer {
      padding: 4rem 1.6rem 2.4rem;
    }

    .footer__container {
      gap: 3.2rem;
    }
  }

  /* -------------------------------------------
   CELULARES MUITO ESTREITOS (Até 360px)
   Ex: iPhone SE antigo e celulares básicos
------------------------------------------- */
  @media (max-width: 360px) {
    /* 1. ESCALA EXTREMA PARA NÃO QUEBRAR O LAYOUT */
    html {
      /* Reduz a base para 43.75% (1rem = ~7px). Blinda vazamentos horizontais! [7, 8] */
      font-size: 43.75%;
    }

    /* 2. AJUSTE DO CABEÇALHO PARA NÃO ESPREMER O BOTÃO */
    .header__container {
      gap: 1rem;
      padding: 1rem;
    }

    .header__logo-text {
      font-size: 2.2rem;
    }

    .header .btn,
    .nav__btn {
      font-size: 1.4rem;
      padding: 0.8rem 1.2rem;
      max-width: 100%;
      white-space: normal; /* Permite que o texto do botão quebre linha se for muito longo */
      text-align: center;
    }

    /* 3. CRONÔMETRO DE COLUNA ÚNICA */
    .countdown__item {
      min-width: 100%; /* Força 1 item por linha se a tela for menor que 360px */
    }
  }
}