/* --- ESTILOS GERAIS E DESKTOP --- */
body, html {
    margin: 0;
    padding: 0;
    font-family: Montserrat;
    /* Previne estouro de largura no mobile */
    max-width: 100vw;
    overflow-x: hidden;
}

/* ===== CORREÇÕES DE RESPONSIVIDADE PARA MOBILE ===== */

/* Previne estouro de largura geral */
body, html {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Correções para container-fluid que podem estourar */
.container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}

.counterdown__number-item {
    position: relative !important;
    padding-left: 62px !important;
}

/* Ajustes para o contador no mobile */
@media (max-width: 991px) {
  .banner-content {
    top: 89%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .counterdown__number-content {
    width: 90% !important;
    max-width: 320px !important;
    min-width: auto !important;
    margin: 0 auto !important;
    padding: 20px !important;
  }
  
  .counterdown__number-item-title {
    font-size: 2.5rem !important;
  }
  
  /* Ajusta o banner para não estourar */
  .hero-banner {
    width: 100%;
    overflow-x: hidden;
  }
  
  /* Ajusta o menu mobile */
  #menu .nav-wrapper {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box;
  }
  
  /* Ajusta grid de palestrantes */
  .palestrantes-swiper {
    width: 100% !important;
    max-width: 100vw;
  }
  
  /* Ajusta tabela de preços */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
    max-width: 100vw;
  }
  
  .pricing-card {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
  }
}

ul {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif; 
}

/* Aplicando ao ID #menu do seu HTML */
#menu {
  /* 1. O Fundo PRECISA ter alguma transparência */
  background-color: rgba(255, 255, 255, 0.5); /* Branco com 50% de transparência */

  /* 2. Esta é a propriedade correta para o efeito "vidro" */
  -webkit-backdrop-filter: blur(10px); /* Para Safari */
  backdrop-filter: blur(10px); /* O efeito "vidro fosco" */
  
  /* --- O resto do seu CSS --- */
  display: flex; 
  align-items: center;
  justify-content: space-between;
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; 
  padding: 15px 5%; 
  box-sizing: border-box; 
  border-bottom: 1px solid #b2aca3; /* Linha sutil para o vidro */
  transition: padding 0.2s ease, background-color 0.2s ease;
}
.logo img {
    height: 45px; 
}

/* Este é o 'pai' dos links e do botão no seu HTML */
.nav-wrapper {
    display: flex;
    align-items: center;
}

.nav-links {
    display: flex;
    list-style: none; 
    gap: 30px;
    margin: 0; /* Reset */
    padding: 0; /* Reset */
}

.nav-links a {
    text-decoration: none;
    color: #4a4a4a; 
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: color 0.3s ease; /* Efeito suave */
}

.nav-links a:hover {
    color: #f08a5d; /* Cor do botão */
}

.btn-ingresso {
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9rem;
    color: white;
    font-family: Montserrat;
    /* NOVO: Cor "fade" (gradiente) */
    background: linear-gradient(135deg, #f0a25d, #e87a4a); 
    
    padding: 12px 20px;
    border-radius: 5px;
    transition: all 0.3s ease; /* Transição de tudo */
    margin-left: 30px; 
    border: none; /* Garante que não há borda */
}

.btn-ingresso:hover {
    /* NOVO: Gradiente mais escuro no hover */
    background: linear-gradient(135deg, #e0924d, #d86a3a);
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Efeito de sombra no hover */
}

/* --- LÓGICA DO HAMBURGUER E RESPONSIVO --- */

/* 1. ESCONDE o hamburguer no DESKTOP */
#menu .hamburger {
    display: none; 
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1000; /* Garante que fique na frente */
}

/* 2. Estilo das linhas do ÍCONE (o que faltava) */
#menu .hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    border-radius: 4px;
    background: #4a4a4a; /* Cor escura para as linhas */
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* 3. Animação do "X" quando o menu está aberto */
#menu.open .hamburger span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}
#menu.open .hamburger span:nth-child(2) {
    opacity: 0;
}
#menu.open .hamburger span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

  .counterdown__number-content {

    gap: 62px !important;
  }

@media (max-width: 991px) {
  .counterdown__number-content { display: grid !important; grid-template-columns: repeat(4, 1fr); justify-items: center; align-items: center; gap: 16px; width: 100%; max-width: 95vw; margin: 0 auto; padding: 0 16px; background: transparent !important; border: 0 !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .counterdown__number-item { padding: 0 12px; }
  .counterdown__number-item:not(:first-child) { border-left: 1px solid rgba(255,255,255,0.5); }
  
  /* 1. O container principal do contador */
  .counterdown__number-content {
    /* Linha única em 4 colunas (grid 1x4) */
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    align-items: center;
    gap: 16px;
    padding: 0 16px; 
    width: 100%; 
    max-width: 95vw; 
    background: transparent !important; 
    border: 0 !important;
    box-sizing: border-box;
  }

  /* 2. Esconde os separadores '|' no mobile */
  .counterdown__number-content h1 {
    display: none;
  }

  /* 3. Ajusta o NÚMERO (ex: 280) */
  .counterdown__number-item-title {
    font-size: 1.9rem; 
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); 
    line-height: 1.1;
  }

  /* 4. Ajusta o TEXTO (ex: DIAS) */
  .counterdown__number-item-subtitle {
    font-size: 0.8rem; 
    font-weight: 300; 
    letter-spacing: 1.5px; 
    font-family: Montserrat;
    opacity: 0.9; 
  }
}


/* 4. MEDIA QUERY (Regras para o Mobile) */
@media (max-width: 991px) {



    /* 4a. MOSTRA o hamburguer no mobile */
    #menu .hamburger {
        display: flex;
    }

    /* 4b. ESCONDE o menu horizontal no mobile (por padrão) */
    #menu .nav-wrapper {
        position: absolute;
        top: 70px; /* Altura do seu navbar, ajuste se precisar */
        right: 0;
        left: 0;
        background: #fff; /* Fundo branco para o menu dropdown */
        flex-direction: column; /* Empilha os itens */
        align-items: flex-start;
        padding: 16px 24px;
        gap: 16px;
        display: none; /* ESCONDIDO */
        z-index: 999;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1); /* Sombra */
    }

    /* 4c. MOSTRA o menu quando o .open é adicionado (via JS) */
    #menu.open .nav-wrapper {
        display: flex;
    }

    /* 4d. Empilha os links de navegação */
    #menu .nav-links {
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }
    
    /* 4e. O botão ocupa 100% no mobile */
    #menu .btn-ingresso {
        width: 100%;
        text-align: center;
        margin-left: 0; /* Reseta a margem */
    }
}

/* --- Estilos do Contador Regressivo (Seu código original) --- */
.banner-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8vh;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

.counterdown__number-content {
    display: grid;
    grid-template-columns: repeat(4, minmax(90px, auto));
    justify-items: center;
    align-items: center;
    gap: 24px;
    color: white;
    text-align: center;
    margin: 0 auto;
}
.counterdown__number-content h1 { display: none; }

.counterdown__number-item { position: relative; padding-left: 16px; }
.counterdown__number-item:not(:first-child) { border-left: 1px solid rgba(255,255,255,0.6); }

.counterdown__number-item-title {
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: bold;
    display: block; 
    line-height: 1.1;
    margin: 0;
}

.counterdown__number-item-subtitle {
    font-size: clamp(0.8rem, 1.8vw, 1rem);
    font-weight: bold;
    font-family: Montserrat;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}


/* ===============================
   ESTILOS DOS PALESTrantes (com SWIPER.JS)
================================= */

#palestrantes {
  background-color: #8fbcbb; 
  background-image: repeating-linear-gradient( -45deg, transparent, transparent 8px, rgba(255, 255, 255, 0.08) 8px, rgba(255, 255, 255, 0.08) 9px );
  padding: 80px 0; 
  overflow: hidden; 
  font-family: Arial, sans-serif;
}

/* Título (sem mudança) */
#palestrantes h2 {
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #2a3d3d; 
  margin-bottom: 50px;
  max-width: 1100px; 
  margin-left: auto;
  margin-right: auto;
  text-align: left; 
  padding: 0 15px; 
}
#palestrantes h2 .titulo-linha { 
  color: #0098aa; 
  margin-right: 10px;
  font-weight: 900; 
}

/* --- Estilos do Swiper --- */

/* O container do Swiper */
.palestrantes-swiper {
  max-width: 1260px; /* Alinha com o título */
  margin: 0 auto;
  overflow: visible; /* IMPORTANTE: Para a sombra da bolinha não cortar */
  padding-top: 15px; /* Espaço para a sombra */
}

/* Cada Slide (nosso antigo .palestrante-item) */
.swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* O Swiper cuida da largura (width) */
}

/* Bolinhas e fotos (sem mudança) */
.palestrante-foto-wrapper {
  position: relative; 
  width: 220px; 
  height: 220px;
  border-radius: 50%;
  margin-bottom: 20px;
  box-shadow: 0 0 0 10px rgba(223, 239, 239, 0.4);
  overflow: hidden; 
}
.palestrante-foto-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: 50%;
  display: block;
}

/* Overlay laranja (sem mudança) */
.palestrante-social-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background-color: #f08a5d; 
  display: flex; justify-content: center; align-items: center; gap: 15px; 
  opacity: 0; visibility: hidden;
  transform: translateY(100%); 
  transition: all 0.3s ease;
}
.palestrante-foto-wrapper:hover .palestrante-social-overlay {
  opacity: 1; visibility: visible; transform: translateY(0); 
}
.palestrante-social-overlay a {
  color: white; text-decoration: none; font-size: 1.5rem; 
  transition: transform 0.2s ease;
}
.palestrante-social-overlay a:hover { transform: scale(1.2); }

/* Informações (sem mudança) */
.palestrante-info { width: 100%; }
.palestrante-info .nome {
  font-weight: bold; text-transform: uppercase; font-size: 1rem; 
  color: #2a3d3d; margin: 0; line-height: 1.4;
}
.palestrante-info .cargo {
  font-size: 0.9rem; text-transform: uppercase; color: #556e6e; 
  margin: 5px 0 0 0;
}

/* Ajustes responsivos para as bolinhas */
@media (max-width: 991px) {
  .palestrante-foto-wrapper {
    width: 200px; height: 200px;
  }
}
@media (max-width: 768px) {
  .palestrante-foto-wrapper {
    width: 180px; height: 180px;
  }
}


/* ===============================
   ESTILOS CORRIGIDOS DO CRONOGRAMA
================================= */

#cronograma {
  padding: 80px 0;
  background-color: #fff;
  font-family: Arial, sans-serif;
}

/* Título alinhado com o texto do botão */
#cronograma h2 {
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 30px;
  text-align: left; /* Garante o alinhamento */
  
  /* A LINHA QUE FALTAVA: 
     Alinha o título com o padding dos botões */
  padding-left: 0px; 
}

.tabs-container {
  /* Não precisa de nada especial */
}

/* 1. Botões das Abas (Navegação) */
.tabs-nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tab-button {
  background-color: #aedadd; 
  color: white;
  border: none;
  padding: 20px 10px;
  text-align: left; /* Alinhado à esquerda como na imagem */
  padding-left: 25px; /* Espaço interno */
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.tab-button:last-child { border-right: none; }
.tab-button strong { display: block; font-size: 1rem; }
.tab-button span { font-size: 0.8rem; }
.tab-button.active {
  background-color: #de5331; 
}

/* 2. Barra de "Auditório" (ESTILO CORRIGIDO) */
.tabs-subtitles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background-color: #f7f7f7; /* Fundo cinza claro para os inativos */
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
}

.tab-subtitle {
  color: #aaa; /* Cor cinza inativa */
  font-style: normal;
  font-size: 0.8rem;
  text-align: left;
  padding: 15px 25px;
  /* Todos são visíveis por padrão */
}

/* Subtítulo ATIVO */
.tab-subtitle.active {
  background-color: #fff; /* Fica branco, igual ao content-pane */
  color: #3cafc8; /* Cor vermelha/laranja */
  font-weight: bold; /* Um pouco mais de destaque */
  position: relative;
}

/* A Seta (apontando para cima) */
.tab-subtitle.active::before {
  content: '';
  position: absolute;
  top: -10px; /* Puxa para cima */
  left: 50%; /* Centraliza no seu quadrante */
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #fff; /* Branco, para "cortar" a linha */
}

/* 3. Painéis de Conteúdo */
.tab-pane {
  display: none; 
  background-color: #fff;
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  /* Borda superior é controlada pelo .tabs-subtitles agora */
}
.tab-pane.active {
  display: block;
}

/* 4. Layout do Item do Cronograma (Correto) */
.schedule-item {
  display: flex;
  align-items: center; 
  gap: 25px; 
  padding: 30px 25px; 
  border-bottom: 1px solid #f0f0f0;
}
.schedule-item:last-child { border-bottom: none; }

.schedule-avatar {
  width: 100px; 
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0; 
}
.schedule-info { flex-grow: 1; }

.schedule-time {
  font-size: 0.9rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px; 
}
.schedule-name {
  margin: 0;
  text-transform: uppercase;
  font-weight: bold;
  color: #333;
  font-size: 1rem;
}
.schedule-description {
  margin: 5px 0 0 0;
  color: #666;
  font-size: 0.9rem;
}
.schedule-bloco {
  background-color: #f7f7f7;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 0.8rem;
  color: #777;
  display: inline-block;
  margin-top: 15px;
}


/* ===============================
   ESTILOS DA GALERIA DE FOTOS
================================= */

#gallery-strip {
  /* Remove qualquer padding da seção */
  padding: 0;
  margin: 0;
  /* (Você pode adicionar um margin-top/bottom 
     se quiser espaço, ex: margin: 80px 0;) */
}

.gallery-grid {
  display: grid;
  /* 1. DESKTOP: Cria 5 colunas de largura igual */
  grid-template-columns: repeat(5, 1fr); 
  
  /* Defina uma altura fixa para a faixa no desktop */
  height: 350px; 
}

.gallery-item {
  position: relative; /* Necessário para o overlay */
  overflow: hidden;   /* Garante que a imagem não vaze */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  
  /* A MÁGICA:
    'object-fit: cover;' faz a imagem cobrir todo 
    o espaço, sem distorcer. Ela corta o excesso.
  */
  object-fit: cover;
  display: block; /* Remove espaço extra de 'inline' */
  transition: transform 0.3s ease;
}

/* Efeito de zoom sutil no hover */
.gallery-item:hover img {
  transform: scale(1.05);
}

/* O Bloco de Texto (Overlay) */
.item-with-overlay .gallery-overlay-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%; 
  background-color: #1a8a9a; 
  color: white;
  padding: 20px 25px;
  box-sizing: border-box; 
  font-family: Arial, sans-serif;
  
  /* 1. ESCONDIDO POR PADRÃO */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px); /* Efeito de "subir" leve */
  
  /* 2. TRANSIÇÃO SUAVE */
  transition: all 0.3s ease;
}

/* 3. MOSTRAR NO HOVER (Desktop) */
.item-with-overlay:hover .gallery-overlay-text {
   background-color: #146c7a; /* Tom mais escuro */
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

/* 4. MOSTRAR NO CLICK (Mobile/JS) */
.item-with-overlay.overlay-active .gallery-overlay-text {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

/* (O resto dos seus estilos .gallery-overlay-text h3 e p 
  podem ficar exatamente como estavam) */
.gallery-overlay-text h3 {
  margin: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1rem;
}

.gallery-overlay-text p {
  margin: 5px 0 0 0;
  font-size: 0.85rem;
  font-weight: normal;
  text-transform: uppercase;
}

.gallery-overlay-text h3 {
  margin: 0;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1rem;
}

.gallery-overlay-text p {
  margin: 5px 0 0 0;
  font-size: 0.85rem;
  font-weight: normal;
  text-transform: uppercase;
}


/* ===============================
   RESPONSIVO (MOBILE)
================================= */
@media (max-width: 991px) {
  
  .gallery-grid {
    /* 2. MOBILE: Muda o grid para 1 coluna */
    grid-template-columns: 1fr;
    
    /* Remove a altura fixa */
    height: auto; 
  }
  
  /* No mobile, cada item precisa de uma altura.
    Você pode usar uma altura fixa (ex: 300px)
    ou a propriedade 'aspect-ratio'
  */
  .gallery-item {
     height: 300px;
     /* Alternativa moderna: 
     aspect-ratio: 16 / 9; 
     */
  }
  
}


/* ===============================
   ESTILOS DA SEÇÃO DE NOTÍCIAS
================================= */

#noticias {
  background-color: #fff;
  padding: 80px 0;
}

#noticias h2 {
  font-family: Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 40px;
}

/* 1. O Grid (Desktop) */
.noticias-grid {
  display: grid;
  /* Cria 3 colunas de tamanho igual */
  grid-template-columns: repeat(3, 1fr);
  /* Espaço entre os cards */
  gap: 30px;
}

/* 2. O Card Individual */
.noticia-card {
  background-color: #ffffff;
  border-radius: 8px; /* Cantos arredondados */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Sombra suave */
  overflow: hidden; /* Garante que a imagem não vaze */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito de "levantar" no hover */
.noticia-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

/* 3. A Imagem do Card */
.noticia-imagem {
  /* PASSO 1: O PAI PRECISA SER RELATIVO */
  position: relative;
  height: 220px; /* Altura fixa para todas as imagens */
}

.noticia-imagem img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Garante que a imagem cubra sem distorcer */
}

/* 4. O Emblema da Data */
.noticia-data {
  /* PASSO 2: O FILHO É ABSOLUTO */
  position: absolute;
  top: 15px;
  right: 15px;
  
  /* Cor padrão (vermelho/laranja) */
  background-color: #e07a5f; 
  color: white;
  
  padding: 8px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  line-height: 1.1;
  width: 50px; /* Largura fixa */
  box-sizing: border-box;
}

/* Classes de cor para os outros emblemas */
.noticia-data.badge-azul-claro {
  background-color: #34a0a4; /* Tom da imagem */
}
.noticia-data.badge-azul-escuro {
  background-color: #1a8a9a; /* Tom da imagem */
}

.noticia-data .dia {
  display: block;
  font-size: 1.5rem; /* "02" */
}

.noticia-data .mes {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase; /* "AGO" */
}

/* 5. Conteúdo de Texto do Card */
.noticia-conteudo {
  padding: 25px;
}

.noticia-titulo {
  font-family: Arial, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  color: #333;
  margin: 0 0 10px 0;
  line-height: 1.4;
}

.noticia-texto {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* ===============================
   RESPONSIVO (MOBILE)
================================= */
@media (max-width: 991px) {
  .noticias-grid {
    /* No mobile, vira 1 coluna */
    grid-template-columns: 1fr;
    gap: 40px; /* Mais espaço quando empilhado */
  }
}


/* ===============================
   ESTILOS DA SEÇÃO DE PREÇOS
================================= */

#pricing {
  background-color: #f7f7f7; /* Fundo da seção (cinza claro) */
  padding: 80px 0;
}

#pricing h2 {
  font-family: Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase;
  color: #333;
  margin-bottom: 40px;
  text-align: center;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* 1. Estilo Padrão (Cinza) do Card */
.pricing-card {
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden; /* Para o header arredondar */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
  border: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column; /* Para o footer ficar sempre embaixo */
}

.card-header {
  background-color: #d1d1d1; /* Cor cinza padrão */
  color: #585858;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease; /* Transição para o hover */
}

.card-header h3 {
  margin: 0;
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
}

.card-body {
  padding: 30px;
  flex-grow: 1; /* Faz o corpo crescer e empurrar o footer */
}

.card-price {
  font-family: Montserrat;
  font-size: 2.5rem;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 25px;
}

.card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.card-features li {
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  color: #777;
  line-height: 1.6;
  margin-bottom: 10px;
}

.card-footer {
  padding: 0 30px 30px 30px;
}

/* 2. Estilo Padrão (Cinza) do Botão */
.btn-pricing {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 12px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 0.9rem;
  text-transform: uppercase;
  font-family: Arial, sans-serif;
  
  /* Estilo "Outlined" (vazado) */
  border: 2px solid #ccc;
  background-color: transparent;
  color: #888;
  
  transition: all 0.3s ease;
}

/* 3. Estilo do Card em Destaque (LOTE 01) */
.pricing-card.featured .card-header {
  background-color: #de5331; /* Cor predominante */
  color: white;
}

.pricing-card.featured .btn-pricing {
  background-color: #de5331; /* Cor predominante */
  border-color: #de5331;
  color: white;
}

/* 4. O EFEITO HOVER (A MÁGICA) */
/* "Quando passar o mouse em um card QUE NÃO É o featured..." */

.pricing-card:not(.featured):hover .card-header {
  background-color: #de5331; /* ... mude o header */
  color: white;
}

.pricing-card:not(.featured):hover .btn-pricing {
  background-color: #de5331; /* ... mude o botão */
  border-color: #de5331;
  color: white;
}


/* ===============================
   RESPONSIVO (MOBILE)
================================= */
@media (max-width: 991px) {
  .pricing-grid {
    /* Vira 1 coluna */
    grid-template-columns: 1fr;
    gap: 40px; /* Mais espaço quando empilhado */
  }
}


/* ===============================
   ESTILOS DA SEÇÃO DE VÍDEO
================================= */

#video-sobre {
  /* Espaçamento acima e abaixo da seção */
  padding: 80px 0; 
}

/* 1. O Placeholder do Vídeo */
.video-placeholder {
  position: relative; /* O PAI: para ancorar o botão */
  width: 100%;
  
  /* Defina uma altura. 
     60vh = 60% da altura da tela. Ajuste como preferir.
     Você também pode usar uma altura fixa, ex: height: 500px;
  */
  height: 60vh;
  
  background-color: #eeeeee; /* Cor cinza da sua imagem */
  
  /* Centraliza o filho (o botão) */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 2. O Botão de Play */
.play-button {
  /* O FILHO: posicionado no centro */
  /* (O 'display: flex' do pai já está centralizando, 
     mas 'position: absolute' também é uma opção) */
  
  width: 80px;
  height: 80px;
  background-color: white;
  border-radius: 50%; /* Círculo perfeito */
  color: #333; /* Cor do ícone de "play" */
  
  /* Centraliza o ícone (o <i class="fas fa-play">) */
  display: flex;
  justify-content: center;
  align-items: center;
  
  font-size: 1.5rem; /* Tamanho do ícone de "play" */
  text-decoration: none;
  
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

/* Efeito hover */
.play-button:hover {
  transform: scale(1.1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  color: #de5331; /* Sua cor predominante */
}



/* ===============================
   ESTILOS DO RODAPÉ (LARGURA TOTAL)
================================= */

.site-footer {
  background-color: #0098AA; 
  color: #E6F7F9; 
  font-family: Arial, sans-serif;
  
  /* APLICA O PADDING AQUI:
    60px (topo), 5% (laterais), 0 (baixo)
    O "5%" garante que o conteúdo não cole nas bordas
  */
  padding: 60px 5% 0; 
  
  /* Isso "anula" o .container que estava dentro */
  box-sizing: border-box;
}

/* Como o .container foi anulado, removemos 
  qualquer 'max-width' ou 'margin' do grid.
*/
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr; 
  gap: 40px;
}

/* Removemos o padding do .container, então 
  não precisamos de 'padding: 0 15px;' aqui.
*/

.footer-col {
  /* ... */
}

/* Coluna 1: Sobre */
.footer-logo {
  height: 105px;
  margin-bottom: 20px;
}
.footer-col-about p {
  font-size: 0.9rem;
  line-height: 1.6;
  max-width: 350px; /* Mantemos isso para a legibilidade */
}
.footer-socials {
  margin-top: 25px;
  display: flex;
  gap: 15px;
}
.footer-socials a {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  font-size: 1.1rem;
  transition: all 0.3s ease;
}
.footer-socials a:hover {
  background-color: #007c8a; 
  color: #fff;
  transform: scale(1.1);
}

/* Colunas 2 e 3 */
.footer-col h4 {
  font-size: 1rem;
  text-transform: uppercase;
  color: #fff;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 20px;
}

/* Coluna 2: Links */
.footer-col-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col-links li {
  margin-bottom: 10px;
}
.footer-col-links a {
  color: #E6F7F9;
  text-decoration: none;
  transition: all 0.2s ease;
}
.footer-col-links a:hover {
  color: #fff;
  padding-left: 5px;
}

/* Coluna 3: Info */
.footer-col-info p {
  font-size: 0.9rem;
  line-height: 1.7;
}
.btn-footer-ingresso {
  display: inline-block;
  background-color: #007c8a;
  color: #fff;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 5px;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 0.9rem;
  margin-top: 20px;
  transition: background-color 0.3s ease;
}
.btn-footer-ingresso:hover {
  background-color: #006576;
}

/* Barra de Copyright */
.footer-bottom {
  border-top: 1px solid #007c8a; 
  margin-top: 40px;
  padding: 25px 0;
  text-align: center;
  
  /* Faz a linha do copyright ficar "dentro" do padding de 5% 
    que definimos no .site-footer
  */
  margin-left: -5%;
  margin-right: -5%;
}
.footer-bottom p {
  margin: 0;
  font-size: 0.85rem;
  color: #E6F7F9;
}


/* ===============================
   RESPONSIVO (MOBILE)
================================= */
@media (max-width: 991px) {
  .site-footer {
    padding-top: 40px; /* Menos padding no mobile */
  }
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-col-about p {
    max-width: 100%; 
  }
  .footer-socials {
    justify-content: center; 
  }
  .footer-col h4 {
    margin-top: 30px; 
  }
}
@media (max-width: 991px) {
  .counterdown__number-content {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 100% !important;
    max-width: 95vw !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    box-sizing: border-box;
  }
  .counterdown__number-content h1 { display: none !important; }
  .counterdown__number-item-title { font-size: clamp(1.6rem, 6.5vw, 2.2rem) !important; }
}