/* style.css - VERSÃO COMPLETA E CORRIGIDA */

/*
  Garante que o corpo da página sirva como uma "âncora" de posicionamento
  para elementos internos com `position: absolute`.
*/
body {
  position: relative;
}

/*
  Classe para a sobreposição escura na seção principal (hero).
  Pode ser útil para manter o estilo centralizado aqui em vez de inline no HTML.
*/
#blackOverlay {
  opacity: 0.75;
  background-color: #000;
}

/* ================================================================= */
/* === ESTILOS PARA OS BOTÕES DO CARROSSEL DE PROJETO === */
/* ================================================================= */

/*
  Define a aparência base dos botões de navegação (setas) do carrossel.
*/
.project-nav {
  color: white; /* Cor do ícone da seta */
  background-color: rgba(0, 0, 0, 0.3); /* Fundo semitransparente */
  width: 40px; /* Largura do botão */
  height: 40px; /* Altura do botão */
  border-radius: 50%; /* Deixa o botão redondo */
  transition: background-color 0.3s ease; /* Efeito suave ao passar o mouse */
}

/*
  Muda a cor de fundo do botão quando o mouse está sobre ele para dar feedback visual.
*/
.project-nav:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

/*
  Estiliza o pseudo-elemento '::after' que o Swiper.js usa para criar o ícone da seta.
*/
.project-nav::after {
  font-size: 1rem; /* Tamanho do ícone da seta (ex: < ou >) */
  font-weight: 700; /* Deixa o ícone da seta mais "forte" */
}

/* ================================================================= */
/* === ESTILOS PARA A IMAGEM DO CARROSSEL DE PROJETO (CORREÇÃO) === */
/* ================================================================= */

/*
  Define o tamanho e a proporção das imagens dentro dos slides do carrossel.
  Esta é a correção principal para fazer a área da imagem parecer maior.
*/
.project-swiper .swiper-slide img {
  width: 100%; /* Garante que a imagem ocupe toda a largura do contêiner */
  height: auto; /* A altura se ajusta automaticamente para manter a proporção */
  aspect-ratio: 16 / 9; /* Força a imagem a ter uma proporção de 16:9 (widescreen) */
  object-fit: cover; /* Garante que a imagem cubra toda a área definida, cortando o excesso se necessário, sem distorcer */
}

/* style.css - VERSÃO COMPLETA E FINAL */

body {
  position: relative;
}

#blackOverlay {
  opacity: 0.75;
  background-color: #000;
}

/* === ESTILOS PARA OS BOTÕES DO CARROSSEL DE PROJETO === */
.project-nav {
  color: white;
  background-color: rgba(0, 0, 0, 0.3);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
}

.project-nav:hover {
  background-color: rgba(0, 0, 0, 0.6);
}

.project-nav::after {
  font-size: 1rem;
  font-weight: 700;
}

/* === ESTILOS PARA A IMAGEM DO CARROSSEL DE PROJETO === */
.project-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ================================================================= */
/* === ESTILOS PARA O DIVISOR DE FORMA (NOVO) === */
/* ================================================================= */
.footer-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: rotate(180deg); /* Inverte a forma para a posição correta */
}

.footer-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 75px; /* Altura da onda */
}

.footer-divider .shape-fill {
  fill: #d1d5db; /* Cor cinza (bg-gray-300) para combinar com a seção */
}

#toast-notification {
  z-index: 100; /* Garante que o toast fique acima de outros elementos com z-index */
}

/* ================================================================= */
/* === ESTILOS PARA O MENU DROPDOWN DE USUÁRIO (CORREÇÃO) === */
/* ================================================================= */

/* Garante que o dropdown comece escondido e com uma transição suave */
.dropdown-menu {
  display: none; /* Começa totalmente escondido */
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(-10px); /* Efeito de "subir" sutil */
}

/* Mostra o dropdown quando a classe 'active' é adicionada via JavaScript */
.dropdown-menu.active {
  display: block; /* Torna-o visível */
  opacity: 1;
  transform: translateY(0);
}