body {
  font-family: 'Montserrat', sans-serif !important;
}


/* ==========================================================================
   padrões de cores VIVA
   ========================================================================== */

.bg-black-viva {  background-color: #000 !important;}
.bg-white-viva {  background-color: #fff !important;}
.bg-marinho-viva {  background-color: #0a2545 !important;}
.bg-cyan-viva {  background-color: #3ca3b9 !important;}
.bg-vermelho-viva {  background-color: #8f1414 !important;}
.bg-laranja-viva {  background-color: #d47d0a !important;}
.bg-cinza1-viva {  background-color: #d9d3d3 !important;}
.bg-cinza2-viva {  background-color: #413e3e !important;}

.text-black-viva {  color: #000 !important;}
.text-white-viva {  color: #fff !important;}
.text-marinho-viva {  color: #0a2545 !important;}
.text-cyan-viva {  color: #3ca3b9 !important;}
.text-vermelho-viva {  color: #8f1414 !important;}
.text-laranja-viva {  color: #d47d0a !important;}
.text-cinza1-viva {  color: #d9d3d3 !important;}
.text-cinza2-viva {  color: #413e3e !important;}



/* ==========================================================================
   ESTILOS PADRÃO PARA SEÇÕES E TÍTULOS
   ========================================================================== */

/* Tamanho de título padronizado para todo o site */
.section-title {
  font-size: 2rem; /* 32px */
  line-height: 1.2;
}

@media (min-width: 992px) {
  .section-title {
    font-size: 2.5rem; /* 40px no Desktop */
  }
}

/* Proporção personalizada para a imagem (1920x1280 -> Proporção 3:2) */
.ratio-1920x1280 {
  --bs-aspect-ratio: calc(1280 / 1920 * 100%); /* 66.66% */
}



/* ==========================================================================
   INSCREVA-SE
   ========================================================================== */

/* Ajuste fino para o texto de apoio do Jumbotron */
.lead {
  font-size: 1.1rem;
  line-height: 1.6;
}

@media (min-width: 992px) {
  .lead {
    font-size: 1.25rem;
  }
}

/* ==========================================================================
   DEPOIMENTOS
   ========================================================================== */

/* Centralização e estilo do botão Play sobre a Thumbnail */
.video-thumbnail-container {
  position: relative;
}

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  border: none;
  border-radius: 50%;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
}

.video-play-btn svg {
  width: 28px;
  height: 28px;
  margin-left: 3px; /* Ajuste óptico do ícone play */
}

/* Ajuste das setas e indicadores */
#videoCarousel .carousel-control-prev,
#videoCarousel .carousel-control-next {
  width: 5%;
  opacity: 0.8;
}

#videoCarousel .carousel-control-prev:hover,
#videoCarousel .carousel-control-next:hover {
  opacity: 1;
}

#videoCarousel .carousel-indicators button {
  background-color: #ffffff;
}


/* ==========================================================================
   PRELETORES
   ========================================================================== */

/* Cursor de clique para os cards de preletores */
.preletor-card.cursor-pointer {
  cursor: pointer;
}

/* Ajustes da caixa modal */
.modal-content {
  background-color: #ffffff;
}

.modal-header .btn-close {
  z-index: 10;
  padding: 1.25rem;
}

/* ==========================================================================
   AGENDA
   ========================================================================== */

/* Cor de destaque para a data e horário (estilo do exemplo) */
.agenda-data {
  color: #ffc107; /* Amarelo/Dourado - altere conforme a paleta do seu projeto */
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.agenda-titulo {
  font-size: 1.1rem;
  line-height: 1.4;
}

.agenda-preletor {
  font-size: 0.9rem;
}



/* ==========================================================================
   GALERIA DE FOTOS DO LOCAL
   ========================================================================== */

.galeria-item {
  position: relative;
  cursor: pointer;
}

.galeria-img {
  transition: transform 0.4s ease;
}

.galeria-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.galeria-item:hover .galeria-img {
  transform: scale(1.05);
}

.galeria-item:hover .galeria-overlay {
  opacity: 1;
}

/* Corrige a altura da foto 02 no Desktop para alinhar perfeitamente com a foto 01 */
@media (min-width: 768px) {
  .ratio-md-h100 {
    height: 100% !important;
    --bs-aspect-ratio: 0% !important;
  }
}

/* Limita altura da foto no Modal para não vazar a tela */
.modal-img-size {
  max-height: 80vh;
}

/* Define o fundo preto com 90% de opacidade */
.modal-backdrop.show {
  opacity: 0.9 !important;
  background-color: #000000 !important;
}

/* Garante que o modal fique por cima de qualquer elemento da página */
.modal {
  background-color: rgba(0, 0, 0, 0.9);
}

/* Centraliza e destaca a foto focada */
#modalGaleria .modal-dialog {
  max-width: 90vw;
}

#modalGaleria .modal-content {
  background: transparent !important;
  box-shadow: none !important;
}


/* ==========================================================================
   SEÇÃO FAQ
   ========================================================================== */

/* Cor de Fundo Marinho (Ajuste a cor hexadecimal se necessário) */
.bg-marinho-viva {
  background-color: #03142c;
}

/* Ajustes visuais do botão do Accordion */
.faq-accordion .accordion-button {
  font-size: 1.05rem;
}

/* Seta minimalista branca no final da linha */
.faq-accordion .accordion-button::after {
  filter: brightness(0) invert(1); /* Deixa o ícone de seta 100% branco */
  background-size: 1rem;
}

/* Mantém o texto limpo ao expandir a resposta */
.faq-accordion .accordion-button:not(.collapsed) {
  color: #ffffff;
  background-color: transparent;
  box-shadow: none;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

/* Proporção personalizada para o mapa (1920 x 768px -> 1920 / 768 = 2.5 / 1) */
.ratio-footer-map {
  --bs-aspect-ratio: calc(768 / 1920 * 100%); /* Aproximadamente 40% */
  max-height: 500px; /* Evita que fique excessivamente alto em telas ultralargas */
}

/* Deixa o mapa com uma tonalidade mais escura para combinar com o tema */
.ratio-footer-map iframe {
  filter: grayscale(20%) contrast(105%);
}

/* Espaçamento entre letras no título VIVA */
.tracking-wider {
  letter-spacing: 2px;
}


/* ==========================================================================
   BOTÃO FLUTUANTE FIXO (INSCREVA-SE)
   ========================================================================== */

.btn-flutuante-inscreva {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 1050; /* Fica acima de quase todos os elementos da página */
  
  width: 80px;
  height: 80px;
  border-radius: 50%; /* Torna o botão redondo */
  
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.btn-flutuante-inscreva img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Efeito Hover (passar o mouse) */
.btn-flutuante-inscreva:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}

/* Ajuste responsivo para telas menores (smartphones) */
@media (max-width: 576px) {
  .btn-flutuante-inscreva {
    width: 65px;
    height: 65px;
    bottom: 18px;
    right: 18px;
    padding: 10px;
  }
}