/* ---------------- HERO ---------------- */
.hero-section {
  background: linear-gradient(135deg, #8e44ad 0%, #2c3e50 100%);
  color: white;
  /* Padding reduzido para deixar o topo mais "slim" */
  padding: 20px 0 30px 0; 
}

.hero-section .display-4 {
  font-size: 2rem; 
}

.hero-section p.lead {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 10px auto;
  line-height: 1.4;
}

.hero-btn {
  border-radius: 30px;
  transition: 0.3s ease;
  font-size: 0.9rem;
}
.hero-btn:hover {
  transform: scale(1.03);
}


/* ---------------- VIDEO ---------------- */
.ratio iframe {
  border: 0;
}


/* ---------------- CAROUSEL GERAL ---------------- */

.carousel-item {
  /* Centraliza o conteúdo (texto e imagem) */
  text-align: center; 
}

/* Imagens limitadas */
.carousel-img {
  max-height: 600px; 
  object-fit: contain;
  margin: 0 auto; 
}

/* Caption acima da imagem (estático, texto escuro) */
.carousel-caption-top {
  position: relative;
  width: 100%;
  padding: 0 15px 15px 15px;
  text-align: center;
  color: #333; 
  background: transparent;
  border-radius: 0;
}

.carousel-caption-top h5 {
  font-weight: bold;
  font-size: 1.25rem;
  margin-bottom: 5px;
  color: #2c3e50; /* Cor de destaque (roxo escuro/azul) */
  text-shadow: none;
}

.carousel-caption-top p {
  margin: 0;
  font-size: 1rem;
  color: #555;
  text-shadow: none;
}


/* ---------------- CAROUSEL CONTROLS (SETAS) ---------------- */

/* Garante que os botões laterais sejam totalmente visíveis */
.carousel-control-prev,
.carousel-control-next {
  opacity: 1; 
  width: 10%; /* Área de clique lateral */
}

/* Estilo da "Bolinha" branca atrás da seta */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.95); /* Fundo branco sólido */
  border-radius: 50%; /* Transforma quadrado em círculo */
  width: 48px;
  height: 48px;
  
  /* Ajusta o tamanho da seta dentro da bolinha */
  background-size: 50%; 
  background-position: center;
  background-repeat: no-repeat;
  
  /* Sombra para destacar do fundo branco do site */
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

/* Efeito ao passar o mouse nas setas */
.carousel-control-prev:hover .carousel-control-prev-icon,
.carousel-control-next:hover .carousel-control-next-icon {
  background-color: #fff;
  transform: scale(1.1);
  transition: all 0.2s ease;
}

/* --- IMAGENS SVG DAS SETAS (ROXAS) --- */

/* ← Seta Esquerda */
.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23d7b1ff' viewBox='0 0 16 16'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L6.707 7l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z'/></svg>") !important;
}

/* → Seta Direita */
.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23d7b1ff' viewBox='0 0 16 16'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l5 5a.5.5 0 0 1 0 .708l-5 5a.5.5 0 1 1-.708-.708L9.293 7 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !important;
}


/* ---------------- NAVBAR / BRAND ---------------- */

/* Ajuste específico para Telas Pequenas (Mobile) */
@media (max-width: 575px) {
  .navbar-brand {
    font-size: 1rem !important; /* Força o tamanho que você testou */
    white-space: nowrap;        /* Garante que o texto nunca quebre de linha */
    display: flex;              /* Alinha ícone e texto perfeitamente */
    align-items: center;        /* Centraliza verticalmente */
  }

  /* Opcional: Ajustar levemente o tamanho do ícone no mobile se precisar */
  .navbar-brand img {
    height: 32px; /* Ajuste conforme a necessidade */
    width: auto;
    margin-right: 8px;
  }
}