/* Paleta de Cores baseada na imagem */
:root {
  --bg-dark: #0a0a0a;
  --gold-primary: #d4af37;
  --gold-light: #f3e5ab;
  --text-light: #f8f9fa;
}

html,
body {
  overflow-x: hidden; /* Trava a rolagem horizontal */
  max-width: 100vw;
}

body {
  background-color: var(--bg-dark);
  color: var(--text-light);
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  padding-bottom: 50px;
}

html {
  scroll-behavior: smooth;
}

/* Tipografia e Destaques */
.date-text {
  letter-spacing: 2px;
  font-size: 1.2rem;
}

.main-title {
  color: var(--text-light);
  text-shadow: 2px 2px 10px rgba(212, 175, 55, 0.3);
}

.subtitle {
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.6; /* Aumenta o respiro geral entre as linhas de texto */
}

.subtitle span {
  background: linear-gradient(
    to right,
    #bf953f,
    #fcf6ba,
    #b38728,
    #fbf5b7,
    #aa771c
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 4px 12px;
  border: 1px solid var(--gold-primary);

  /* AS TRÊS LINHAS QUE RESOLVEM O PROBLEMA: */
  display: inline-block; /* Permite que o elemento aceite margens e não quebre no meio */
  margin-top: 12px; /* Distância entre "O PRIMEIRO ENCONTRO DO" e a caixa */
  margin-bottom: 5px; /* Margem de segurança na parte inferior */
}

.gold-text {
  color: var(--gold-primary);
  letter-spacing: 2px;
}

.gold-icon {
  color: var(--gold-primary);
}

/* Divisores e Bordas */
.border-center {
  border-left: 1px solid rgba(212, 175, 55, 0.3);
  border-right: 1px solid rgba(212, 175, 55, 0.3);
}

.gold-divider {
  border-top: 2px solid var(--gold-primary);
  width: 80%;
  margin: 0 auto;
  opacity: 1;
}

/* Caixa de Vagas e Botão */
.cta-box {
  background: linear-gradient(135deg, #fcf6ba, #bf953f);
  max-width: 600px;
}

.btn-sympla {
  background-color: #ff0000; /* Cor oficial do Sympla */
  color: white;
  border: none;
  border-radius: 50px;
  font-family: "Arial", sans-serif;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.btn-sympla:hover {
  background-color: #aa0303;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 152, 255, 0.4) !important;
}

.time {
  color: var(--gold-primary);
  font-weight: bold;
}

/* Responsividade Básica */
@media (max-width: 768px) {
  .border-center {
    border-left: none;
    border-right: none;
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding: 20px 0;
  }
}
/* --- Seção Quem Sou Eu --- */

.bg-darker {
  background-color: #000000; /* Um tom de preto levemente mais escuro para dar contraste entre as seções */
}

/* =========================================
   FUNDO DOURADO DESFOCADO (AMBIENT GLOW)
   ========================================= */

.ambient-glows {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* Garante que as luzes não bloqueiem os cliques na tela */
  z-index: -1; /* Mantém o efeito atrás de todo o conteúdo */
  overflow: hidden;
}

.glow {
  position: absolute;
  border-radius: 50%;
  /* Cria uma luz com o centro mais forte e as bordas sumindo */
  background: radial-gradient(
    circle,
    rgba(212, 175, 55, 0.12) 0%,
    rgba(212, 175, 55, 0) 70%
  );
  filter: blur(60px); /* Desfoque intenso */
}

/* Posições espalhadas pela tela */
.glow-1 {
  width: 700px;
  height: 700px;
  top: -15%;
  left: -10%;
}

.glow-2 {
  width: 600px;
  height: 600px;
  bottom: 10%;
  right: -10%;
}

.glow-3 {
  width: 500px;
  height: 500px;
  top: 40%;
  left: 25%;
  opacity: 0.6;
}

/* =========================================
   NOVA FOTO ESFUMAÇADA E COM VINHETA (QUEM SOU EU)
   ========================================= */

.image-vignette-container {
  display: inline-block;
  position: relative;
}

/* A camada da vinheta (sombra escura por cima da imagem) */
.image-vignette-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Gradiente que é transparente no centro e preto/escuro nas bordas */
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.85) 90%
  );
  pointer-events: none; /* Garante que a animação de hover continue funcionando */

  /* Aplica a mesma máscara de desfoque para que a sombra siga o corte da foto */
  -webkit-mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 95%
  );
  mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 95%
  );
}

.profile-img-blurred {
  max-width: 480px;
  width: 100%;
  object-fit: cover;
  display: block; /* Remove o espaço extra fantasma abaixo da imagem */

  /* A mágica da borda esfumaçada via CSS */
  -webkit-mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 95%
  );
  mask-image: radial-gradient(
    circle,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0) 95%
  );

  transition: transform 0.5s ease;
}

.profile-img-blurred:hover {
  transform: scale(
    1.02
  ); /* Leve aproximação para não perder a interatividade */
}
/* =========================================
   NOVA BORBOLETA DOURADA PREMIUM
   ========================================= */

#butterfly-system {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none; /* Não atrapalha cliques */
  z-index: 9999;
}

.premium-butterfly {
  width: 60px; /* Tamanho ligeiramente maior e mais detalhado */
  height: 60px;
  position: absolute;
  /* Centraliza a origem da transformação no corpo da borboleta */
  transform-origin: 50% 50%;

  /* Efeito de brilho dourado */
  filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.7));
  will-change: transform; /* Otimização de performance */
  opacity: 0.9;
}

/* Animação do Bater das Asas (Muito mais rápida e fluida) */
.wings-container {
  transform-origin: 50% 45%; /* Ponto de articulação central */
  animation: flapWingsPremium 0.35s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes flapWingsPremium {
  0% {
    /* Asas totalmente abertas e rotacionadas */
    transform: scaleX(1) scaleY(1) rotateY(0deg);
  }
  100% {
    /* Asas quase fechadas, simula perspectiva */
    transform: scaleX(0.15) scaleY(0.9) rotateY(15deg);
  }
}

/* =========================================
   EFEITOS DE HOVER (INTERATIVIDADE NAS SEÇÕES)
   ========================================= */

/* 1. Caixas de Diferenciais (Ícones + Texto) */
.feature-box {
  transition:
    transform 0.4s ease,
    background-color 0.4s ease,
    box-shadow 0.4s ease;
  padding: 25px 15px;
  border-radius: 12px;
  border: 1px solid transparent; /* Evita "pulos" na tela durante a transição */
}

.feature-box:hover {
  transform: translateY(-10px); /* Flutua para cima */
  background-color: rgba(212, 175, 55, 0.05); /* Fundo dourado super sutil */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /* Sombra escura para destacar */
  border: 1px solid rgba(212, 175, 55, 0.2); /* Borda dourada suave */
}

/* Animação do ícone dentro da caixa de diferencial */
.feature-box .gold-icon {
  transition:
    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    color 0.3s ease;
}

.feature-box:hover .gold-icon {
  transform: scale(1.3) rotate(5deg); /* Cresce e dá uma leve inclinada */
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.6); /* Brilho no ícone */
}

/* 2. Itens da Programação */
.schedule-section .col-md-3 {
  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
  padding: 15px;
  border-radius: 10px;
}

.schedule-section .col-md-3:hover {
  transform: translateY(-5px);
  background-color: rgba(255, 255, 255, 0.02); /* Fundo levemente mais claro */
}

.schedule-section .col-md-3 .gold-icon {
  transition:
    transform 0.3s ease,
    text-shadow 0.3s ease;
}

.schedule-section .col-md-3:hover .gold-icon {
  transform: scale(1.4);
  text-shadow: 0 0 12px var(--gold-primary);
}

/* 3. Lista de Certificados (Na seção "Quem Sou Eu") */
.cert-list li {
  transition:
    transform 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease,
    border-left-color 0.3s ease;
}

.cert-list li:hover {
  transform: translateX(
    10px
  ); /* Desliza sutilmente para a direita chamando atenção */
  background: rgba(212, 175, 55, 0.12); /* Intensifica o fundo dourado */
  box-shadow: -4px 4px 15px rgba(0, 0, 0, 0.4);
  border-left-color: #fcf6ba; /* Clareia a borda esquerda para dar destaque */
}

.cert-list li .gold-icon {
  transition: transform 0.3s ease;
}

.cert-list li:hover .gold-icon {
  transform: scale(1.2);
}

/* 4. Caixa de Vagas Limitadas (Call to Action) */
.cta-box {
  transition:
    transform 0.4s ease,
    box-shadow 0.4s ease;
}

.cta-box:hover {
  transform: scale(
    1.03
  ); /* Dá um efeito de "pulso" crescendo o bloco inteiro */
  box-shadow: 0 15px 30px rgba(212, 175, 55, 0.3);
}

/* =========================================
   SISTEMA TIPOGRÁFICO PREMIUM
   ========================================= */

body {
  background-color: var(--bg-dark);
  color: var(--text-light);
  font-family: "Montserrat", sans-serif; /* Fonte padrão para leitura fluida */
  font-weight: 300;
  line-height: 1.6;
}

/* Títulos Principais e de Destaque */
.main-title,
.schedule-section h4,
.about-section h2 {
  font-family: "Cinzel", serif;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--text-light);
  text-shadow: 2px 2px 15px rgba(212, 175, 55, 0.2);
}

.main-title {
  font-weight: 900;
  letter-spacing: -1px;
  /* Aumentei bem o tamanho: mínimo de 4.5rem (mobile) até 9rem (PC) */
  font-size: clamp(4.5rem, 15vw, 9rem) !important;

  /* ESSAS DUAS LINHAS FAZEM A MÁGICA DE JUNTAR OS TEXTOS: */
  line-height: 0.8 !important; /* Corta a sobra invisível da caixa de texto */
  margin-bottom: 0 !important; /* Remove qualquer margem para baixo */
}

/* Textos Secundários e Subtítulos Geométricos */
.date-text,
.subtitle,
.gold-text,
.time,
.location,
.cta-box h2 {
  font-family: "Montserrat", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 4px; /* Espaçamento elegante igual ao da imagem */
}

.date-text {
  font-weight: 400;
  letter-spacing: 6px;
  color: var(--text-light);
}

.subtitle {
  font-weight: 700;
  letter-spacing: 2px;
}

/* Texto de Descrição Principal (Texto do Meio do Pôster) */
.description-text {
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 1.8;
  margin-top: -15px; /* Puxa o texto para cima, colando no START */
}

/* Toque Caligráfico / Cursivo Exclusivo */
/* Dica: Caso queira usar o efeito cursivo da palavra "versão" em algum elemento do texto, basta usar esta classe */
.cursive-text {
  font-family: "Alex Brush", cursive;
  text-transform: none;
  letter-spacing: 0;
  font-size: 2rem;
  color: var(--gold-light);
}

/* Ajustes finos nos componentes existentes para harmonizar com a tipografia */
.feature-box p {
  font-weight: 500; /* Aumentei de 400 para 500 para a fonte ficar levemente mais encorpada e fácil de ler */
  font-size: 1.2rem; /* Aumentamos o tamanho (antes estava 0.95rem). Se achar muito grande, pode testar 1.1rem */
  letter-spacing: 0.5px;
  line-height: 1.5; /* Dá um respiro melhor entre as linhas caso a frase quebre no celular */
  margin-top: 10px; /* Afasta um pouco o texto do ícone dourado */
}

.cert-list li {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  letter-spacing: 0.5px;
}
/* =========================================
   FOOTER FIXO (ASSINATURA DEV)
   ========================================= */

body {
  /* Adiciona um espaço extra no fim da página para o footer não cobrir o conteúdo */
  padding-bottom: 50px;
}

.fixed-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Fundo escuro com efeito de vidro fosco (Glassmorphism) */
  background-color: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  /* Borda superior dourada sutil */
  border-top: 1px solid rgba(212, 175, 55, 0.2);
  padding: 12px 0;
  z-index: 10000; /* Garante que fique acima de tudo, inclusive da borboleta */
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
}

.footer-text {
  font-family: "Montserrat", sans-serif;
  font-size: 0.75rem;
  letter-spacing: 2px;
  color: var(--text-light);
  text-transform: uppercase;
}

.footer-text .gold-icon {
  font-size: 0.8rem; /* Ícone de código levemente menor para não desalinhar */
}

.footer-text .gold-text {
  color: var(--gold-primary);
  font-weight: 700;
  letter-spacing: 3px;
}

/* =========================================
   BANNER DE INFORMAÇÕES (DATA, HORA, LOCAL)
   ========================================= */

.info-bar-box {
  border: 1px solid var(--gold-primary);
  border-radius: 12px;
  background-color: rgba(
    10,
    10,
    10,
    0.6
  ); /* Fundo escuro levemente translúcido */
  padding: 25px 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* Sombra elegante para destacar do fundo */
}

.info-bar-title {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: var(--gold-light);
  font-size: 1.3rem;
  letter-spacing: 1px;
}

.info-bar-text {
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  color: var(--gold-primary);
  font-size: 0.85rem;
  letter-spacing: 0.5px;
  line-height: 1.4;
  text-transform: uppercase;
}
/* =========================================
   TAG / PLACA DOURADA (ESTILO SEMINÁRIO)
   ========================================= */

.gold-badge {
  /* Gradiente dourado inspirado na imagem */
  background: linear-gradient(135deg, #c59b4c 0%, #e2c079 50%, #b98a35 100%);

  /* Cor do texto escura (quase preta/marrom escuro) para contraste */
  color: #1a1105;

  /* Tipografia idêntica à da foto */
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.6;

  /* Formato da placa */
  padding: 12px 25px;
  border-radius: 6px;
  display: inline-block;
  max-width: 800px; /* Evita que fique muito esticado em telas gigantes */

  /* Sombra suave para destacar do fundo preto da página */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);

  /* Borda sutil interna para dar efeito de relevo (opcional) */
  border: 1px solid rgba(255, 255, 255, 0.3);
}
/* =========================================
   TÍTULO PRINCIPAL (ESTILO DA FOTO)
   ========================================= */

.main-title-start {
  font-family: "Cinzel", serif; /* Fonte clássica igual a da imagem */
  font-weight: 400; /* Deixamos um peso normal, sem ser muito grosso */
  font-size: clamp(
    5rem,
    15vw,
    9rem
  ); /* Fica gigante no PC e ajusta no celular */
  line-height: 0.9;
  margin-bottom: 0;

  /* Efeito de texto Dourado (Gradiente igual da imagem) */
  background: linear-gradient(to bottom, #e4c575, #b38728);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  /* Um brilho muito suave no fundo */
  filter: drop-shadow(0px 4px 15px rgba(212, 175, 55, 0.2));
}

.subtitle-start {
  font-family: "Cinzel", sans-serif;
  font-weight: 400; /* Letra fininha e elegante */
  font-size: clamp(0rem, 3vw, 1.3rem);
  letter-spacing: 0px; /* Espaçamento largo entre as letras igual da foto */
  text-transform: uppercase; /* Força tudo a ficar MAIÚSCULO */
  color: #f8f9fa; /* Cor branca/cinza bem claro */
  margin-top: -10px; /* Deixa bem coladinho no START */
}

/* =========================================
   BLOCO DE APRENDIZADO (LISTA COM LINHA LATERAL)
   ========================================= */

.learning-container {
  /* Cria a linha vertical fina do lado esquerdo */
  border-left: 2px solid rgba(212, 175, 55, 0.4);
  padding-bottom: 10px;
  margin: 20px 0;
}

.learning-title-box {
  /* Fundo dourado idêntico ao estilo da placa */
  background: linear-gradient(135deg, #c59b4c 0%, #e2c079 50%, #b98a35 100%);
  color: #1a1105;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 25px;

  /* Arredonda apenas os cantos da direita, deixando a esquerda reta */
  border-radius: 0 12px 12px 0;
  display: inline-block;
  position: relative;

  /* Puxa a caixa sutilmente para trás para cobrir e alinhar com a linha da borda */
  left: -2px;
  max-width: 95%; /* Evita que o texto vaze em celulares muito estreitos */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  margin-bottom: 25px;
}

.learning-list {
  padding-left: 25px; /* Cria o espaço entre a linha vertical dourada e as frases */
  margin-bottom: 0;
}

.learning-list li {
  display: flex; /* Mantém o ícone alinhado ao texto, mesmo se a frase quebrar linha */
  align-items: flex-start;
  margin-bottom: 15px;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 1.1rem;
  color: var(--text-light);
  line-height: 1.5;
}

.learning-list li .gold-icon {
  margin-top: 5px; /* Abaixa um pouco o ícone para ele ficar centralizado com a primeira linha */
  margin-right: 15px;
  font-size: 1.25rem;
  /* Adiciona um brilho bem leve ao redor do ícone */
  filter: drop-shadow(0 2px 5px rgba(212, 175, 55, 0.3));
}

/* =========================================
   ANIMAÇÃO DO BOTÃO DE PAGAMENTO (CADEADO E BRILHO)
   ========================================= */

/* Estado inicial: Botão apagado (trancado) */
.btn-locked {
  background: rgba(30, 30, 30, 0.8) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  transform: none !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-locked i {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Animação do estouro dourado (Glitter/Fogos) */
@keyframes glitterFireworks {
  0% {
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow:
      0 0 30px 15px rgba(212, 175, 55, 0.5),
      0 0 60px 30px rgba(212, 175, 55, 0.2);
    transform: scale(1.05); /* Dá um leve pulso para frente */
  }
  100% {
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);
    transform: scale(1);
  }
}

/* Classe aplicada via JavaScript quando o form está preenchido */
.btn-glitter {
  animation: glitterFireworks 0.8s ease-out;
}

/* =========================================
   FORMULÁRIO DE CHECKOUT E CAMPOS ESCUROS
   ========================================= */
.checkout-box {
  background-color: rgba(10, 10, 10, 0.8);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 15px;
  padding: 35px 30px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
}

.dark-input {
  background-color: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: var(--text-light) !important;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
}

.dark-input:focus {
  border-color: var(--gold-primary) !important;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4) !important;
}

.dark-input-group {
  background-color: rgba(20, 20, 20, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-right: none !important;
}

/* Deixa o ícone do calendário branco */
.dark-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

/* =========================================
   ESTILO DO BOTÃO DE PAGAMENTO (ACESO)
   ========================================= */
.btn-gold-premium {
  /* Gradiente dourado elegante */
  background: linear-gradient(
    135deg,
    #c59b4c 0%,
    #e2c079 50%,
    #b98a35 100%
  ) !important;
  color: #1a1105 !important; /* Texto escuro/preto para contraste */
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  border: none !important;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 2px;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.5) !important;
  transition: all 0.4s ease;
}

/* Garante que o ícone do cadeado acompanhe a cor escura do texto */
.btn-gold-premium i {
  color: #1a1105 !important;
}

/* Brilho extra ao passar o mouse */
.btn-gold-premium:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.8) !important;
}

/* =========================================
   LINKS DO INSTAGRAM (HOVER)
   ========================================= */
.instagram-link span {
  transition: color 0.3s ease;
}

.instagram-link:hover span {
  color: #e4c575 !important; /* O texto fica dourado ao passar o mouse */
}

/* =========================================
   SEÇÃO DE DETALHES (3 COLUNAS)
   ========================================= */
.details-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.5;
}

/* Alinhamento dos ícones para não empurrar o texto */
.details-list li i {
  margin-top: 4px;
  margin-right: 15px;
  font-size: 1.1rem;
  min-width: 20px;
  text-align: center;
}

/* Ícones da coluna do meio levemente maiores, como na imagem */
.icons-list li i {
  font-size: 1.4rem;
}

/* =========================================
   ESTILOS DA BARRA DE CONTATO E RODAPÉ
   ========================================= */
.contact-hover {
    transition: transform 0.3s ease, color 0.3s ease;
}

.contact-hover:hover {
    transform: translateY(-2px);
    color: var(--gold-light) !important;
}

/* =========================================
   EFEITO ESFUMAÇADO (PALESTRANTES NO TOPO)
   ========================================= */
.hero-speaker-img {
    max-height: 580px; /* Aumentamos o tamanho (antes era 450px) */
    width: 100%;
    object-fit: contain;
    
    /* Cria o "enuveamento": a foto é 100% visível em cima e vai apagando na base */
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    
    /* Um brilho muito leve por trás para separar a foto do fundo escuro */
    filter: drop-shadow(0px 0px 30px rgba(212, 175, 55, 0.15));
    transition: transform 0.5s ease;
}

/* Leve movimento ao passar o mouse */
.hero-speaker-img:hover {
    transform: scale(1.03);
}

@media (min-width: 768px) {
    .border-end-gold {
        border-right: 1px solid rgba(212, 175, 55, 0.3);
    }
}

/* Linhas divisórias (apenas PC e Tablets grandes) */
@media (min-width: 992px) {
  .middle-column-divider {
    border-left: 1px solid rgba(212, 175, 55, 0.2);
    border-right: 1px solid rgba(212, 175, 55, 0.2);
  }
}

/* No celular, as divisórias viram linhas horizontais elegantes */
@media (max-width: 991px) {
  .middle-column-divider {
    border-top: 1px solid rgba(212, 175, 55, 0.2);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    padding-top: 35px;
    padding-bottom: 15px;
    margin-top: 15px;
  }
}

/* Ajustes para Celular */
@media (max-width: 767px) {
  .learning-title-box {
    font-size: 0.9rem;
    padding: 10px 20px;
  }

  .learning-list li {
    font-size: 1rem;
  }
}

/* Ajuste fino para telas menores (Celular) */
@media (max-width: 767px) {
  .gold-badge {
    font-size: 0.75rem; /* Diminui a fonte levemente no celular */
    letter-spacing: 1px;
    padding: 12px 15px;
    margin: 0 15px; /* Margem lateral para não colar nas bordas da tela */
  }
}

/* Regras para PC/Tablet (Linhas divisórias verticais) */
@media (min-width: 768px) {
  .info-bar-divider {
    border-right: 1px solid rgba(212, 175, 55, 0.2);
  }

  /* Centraliza levemente o conteúdo dentro da coluna no PC */
  .ps-md-4 {
    padding-left: 2rem !important;
  }
}

/* Regras para Celular (Empilhamento, alinhamento e linhas horizontais) */
@media (max-width: 767px) {
  .info-bar-divider {
    /* No celular, a divisória vira uma linha deitada embaixo do item */
    border-right: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
  }

  .info-bar-item {
    /* Garante que o texto fique bem centralizado debaixo do ícone */
    text-align: center;
  }
}

@media (max-width: 768px) {
  .main-title {
    word-wrap: break-word; /* Força palavras gigantes a quebrarem em vez de esticar a tela */
  }
}