@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Rajdhani:wght@400;500;600;700&family=Space+Grotesk:wght@400;600;700&display=swap");

:root {
  --edge-margin: 120px; /* Bordas largas premium em Desktop */
}

@media (max-width: 991.98px) {
  :root {
    --edge-margin: 60px; /* Bordas médias em Tablets */
  }

  #topo {
    right: 20px !important; /* Fixa o botão para não sair da tela quando a borda matemática for pequena demais */
    bottom: 20px !important;
  }

  /* Reduz a altura "tela cheia" para evitar muito corte lateral em telas mais verticais */
  #carouselExampleAutoplaying .carousel-item img {
    height: auto !important; /* Permite a imagem revelar sua proporção real */
    aspect-ratio: auto !important;
  }
}

@media (max-width: 767.98px) {
  :root {
    --edge-margin: 20px; /* Bordas finas no Celular para dar espaço ao conteúdo */
  }

  /* No celular, abandona a altura baseada na tela e exibe a imagem 100% no seu tamanho e proporção reais */
  #carouselExampleAutoplaying .carousel-item img {
    height: auto !important;
    aspect-ratio: auto !important; /* Libera qualquer amarra e usa a proporção original do arquivo da imagem */
  }
}

html {
  scroll-behavior: smooth; /* Permite que o scroll até a âncora seja animado e suave */
}

/* Show it is fixed to the top */
body {
  background-color: #1c1c1c; /* Fundo cinza chumbo bem escuro, quase preto (premium) */
  color: #f4f4f5; /* Off-white gelo para descanso visual em contraste com fundo dark */
  min-height: 75rem;
  padding-top: 5.2rem; /* Aumentado para compensar a navbar maior */
  padding-left: var(--edge-margin);
  padding-right: var(--edge-margin);
  /* Anti-aliasing para deixar as fontes nítidas e premium (Padrão Apple) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -1px; /* Títulos levemente espremidos para um look moderno e compacto */
  font-weight: 700;
  color: #f0f0f0; /* Títulos mantêm branco puro para dar hierarquia de brilho */
}
#ancora {
  margin: 0;
  padding: 0;
}
/* Aumentando a altura da Navbar e adicionando textura premium */
.navbar {
  padding-top: 0.8rem !important;
  padding-bottom: 0.8rem !important;
  background-color: #1c1c1c !important; /* Mesmo fundo escuro premium do dropdown */
  /* Textura de 'Ruído/Noise' super sutil via SVG para um efeito fosco de alta qualidade */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E") !important;
}

.navbar .container-fluid {
  padding-left: var(--edge-margin);
  padding-right: var(--edge-margin);
}

.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}
.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: #0000001a;
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow:
    inset 0 0.5em 1.5em #0000001a,
    inset 0 0.125em 0.5em #00000026;
}
.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}
.bi {
  vertical-align: -0.125em;
  fill: currentColor;
}
.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.btn-bd-primary {
  --bd-violet-bg: #e50d60;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #ea2c75;
  --bs-btn-hover-border-color: #ea2c75;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #ea2c75;
  --bs-btn-active-border-color: #ea2c75;
}
.bd-mode-toggle {
  z-index: 1500;
}
.bd-mode-toggle .bi {
  width: 1em;
  height: 1em;
}

#bd-theme {
  border-radius: 50%;
  width: 44px;
  height: 44px;
  padding: 0 !important;
  justify-content: center;
}

#bd-theme::after {
  display: none;
}

.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}

.bd-mode-toggle .dropdown-item.active,
.bd-mode-toggle .dropdown-item:active {
  background-color: #ea2c75;
  color: #fff;
}

.bd-mode-toggle .dropdown-item:hover,
.bd-mode-toggle .dropdown-item:focus {
  background-color: #ea2c75;
  color: #fff;
}

/* Espaçamento extra entre a logo e os itens do menu (Desktop) */
@media (min-width: 768px) {
  .navbar-brand {
    margin-right: 3.5rem !important; /* Distância maior da logo para os links */
  }
}

/* Alinhamento perfeito da Logo */
.navbar-brand {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
  flex-shrink: 0; /* Impede totalmente que a logo seja esmagada/encolhida pela barra de busca */
}

/* Efeito Hover na Logo (Fatality) */
.navbar-brand img {
  transform: scale(1.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Animação elástica premium */
}

.navbar-brand:hover img {
  transform: scale(1.16) rotate(-1deg); /* Zoom suave com inclinação no hover */
}

/* Centralização Absoluta do Menu apenas em Telas Grandes (para não sobrepor a busca) */
@media (min-width: 1200px) {
  .navbar-nav.mx-auto {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .navbar-collapse {
    justify-content: flex-end; /* Mantém a barra de pesquisa colada na direita */
  }
}

/* Custom Navbar Links */
.navbar-dark .navbar-nav .nav-link {
  font-family:
    "Rajdhani", sans-serif; /* Fonte geométrica/quadrada (menos arredondada) */
  text-transform: uppercase;
  font-weight: 500; /* Espessura mais fina e elegante, igual à imagem */
  letter-spacing: 1.5px; /* Espaçamento bem largo igual à referência */
  color: #706c6c !important; /* Cor cinza/opaca padrão (destaca no hover) */
  transition: color 0.2s ease-in-out;
  position: relative;
}

.navbar-dark .navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  width: 0;
  height: 1.5px;
  bottom: 4px; /* Slightly above the bottom edge */
  left: 50%; /* Start from center */
  transform: translateX(-50%); /* Keep centered */
  background-color: #ea2c75; /* Matching the theme color */
  transition: width 0.3s ease-in-out;
}

.navbar-dark .navbar-nav .nav-link:hover::before,
.navbar-dark .navbar-nav .nav-link:focus::before {
  width: calc(100% - 1rem); /* Expand to full text width minus padding */
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: #f0f0f0 !important;
}

/* Icon Expand Search Area */
.search-minimalist {
  position: relative;
  display: flex;
  justify-content: flex-end; /* Grows to the left */
}

.search-minimalist-icon {
  position: absolute;
  right: 14px; /* Centered in the 44px collapsed circle */
  top: 50%;
  transform: translateY(-50%) scale(1.05); /* 5% maior */
  color: #f0f0f0; /* Brighter icon for dark navbar */

  /* Deixa o ícone mais 'cheio' (espesso) */
  stroke: currentColor;
  stroke-width: 1px; /* Aumentado para dar mais preenchimento */

  pointer-events: none; /* Clicks pass through to the input below */
  z-index: 4;
  transition:
    color 0.4s ease,
    stroke 0.4s ease;
}

.search-minimalist:focus-within .search-minimalist-icon {
  color: #ea2c75; /* Icon glows pink when expanded */
}

.search-minimalist-input {
  margin: 0 !important; /* Override bootstrap me-2 */
  width: 44px !important; /* Small circular button initially */
  height: 44px !important;
  padding: 0 !important; /* No text padding when closed */
  border-radius: 50px !important;
  background-color: transparent !important; /* Invisible closed */
  border: 1px solid transparent !important;
  color: transparent !important; /* Invisible text */
  box-shadow: none !important;
  cursor: pointer; /* Acts like a button */
  transition:
    width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.4s ease,
    border-color 0.4s ease,
    padding 0.4s ease,
    color 0.4s ease !important;
}

.search-minimalist-input::placeholder {
  color: transparent !important;
  transition: color 0.4s ease;
}

.search-minimalist-input:focus {
  width: 250px !important; /* Expands to full size */
  padding: 0 45px 0 20px !important; /* Space for icon on the right */
  background-color: transparent !important; /* Fica exatamente da cor da navbar */
  border-bottom: 2px solid #ea2c75 !important; /* User requested effect */
  color: #f0f0f0 !important; /* Show text */
  cursor: text;

  outline: none !important;
}

/* Previne que o campo de busca empurre a navbar para fora (corte) em telas menores */
@media (max-width: 1199.98px) {
  .search-minimalist-input:focus {
    width: 140px !important; /* Expansão mais contida para não faltar espaço físico */
  }
}

.search-minimalist-input:focus::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Minimalist Dropdown (Matches Search Area) */
.navbar-nav .dropdown-menu {
  background-color: #1c1c1c !important; /* Fundo sólido escuro */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E") !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important; /* Linha muito fina e simples */
  border-top: none !important; /* Sem borda superior para fundir com a navbar */
  padding: 0.35rem; /* Reduzido em 35% */
  min-width: 8.5rem !important; /* Largura reduzida mantida */
  box-shadow: none !important; /* Sem efeito de sombra */

  /* Ajuste para abrir exatamente no final da linha da navbar */
  margin-top: 0.8rem !important;

  border-radius: 0 !important; /* Reto, sem bordas arredondadas */
}

/* Divisória entre as opções do dropdown */
.navbar-nav .dropdown-menu li:not(:last-child) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Linha divisória sutil */
  margin-bottom: 0.22rem; /* Reduzido em 35% */
  padding-bottom: 0.22rem; /* Reduzido em 35% */
}

.navbar-nav .dropdown-item {
  font-family: "Rajdhani", sans-serif;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: #706c6c !important; /* Cor cinza/opaca padrão (destaca no hover) */
  transition: all 0.3s ease;
  padding: 0.22rem 0.55rem; /* Reduzido em 35% na altura e largura */
  border-radius: var(--bs-border-radius-sm) !important;
  position: relative;
  background-color: transparent !important; /* Remove solid background */
  display: inline-block; /* Shrink to fit text width */
  width: auto;
}

.navbar-nav .dropdown-item::before {
  content: "";
  position: absolute;
  width: 0;
  height: 1.7px;
  bottom: 1px; /* Afastado da palavra para dar mais respiro */
  left: 50%;
  transform: translateX(-50%);
  background-color: #ea2c75;
  transition: width 0.3s ease-in-out;
}

.navbar-nav .dropdown-item:hover::before,
.navbar-nav .dropdown-item:focus::before {
  width: calc(
    100% - 1.1rem
  ); /* Atualizado para compensar o novo padding horizontal de 0.55rem */
}

.navbar-nav .dropdown-item:hover,
.navbar-nav .dropdown-item:focus {
  background-color: transparent !important; /* Let the underline be the highlight */
  color: #f0f0f0 !important; /* Pink text on hover for premium look */
}

/* Full-Width Carousel */
#carouselExampleAutoplaying {
  margin-left: calc(
    -1 * var(--edge-margin)
  ); /* Overcome body left padding to touch edges */
  margin-right: calc(
    -1 * var(--edge-margin)
  ); /* Overcome body right padding to touch edges */
  overflow: hidden;
}

#carouselExampleAutoplaying .carousel-item img {
  width: 100%;
  /* 100vh (tela inteira) - 5.2rem (body pt) + 1.5rem (ticker mt) - 32px (ticker h) */
  height: calc(100vh - 3.7rem - 32px);
  object-fit: cover;
  object-position: center center;
}

/* Setas do Carrossel perfeitamente centralizadas nas bordas dinâmicas */
#carouselExampleAutoplaying .carousel-control-prev,
#carouselExampleAutoplaying .carousel-control-next {
  width: var(--edge-margin);
  justify-content: center;
  padding: 0;
  opacity: 1 !important; /* A caixa principal deve ser sempre 100% opaca para não bugar a animação do desfoque */
  transition: all 0.3s ease;
  z-index: 10; /* Garante que nenhum outro elemento da página (como a navbar ou letreiro) bloqueie o clique/hover */
}

#carouselExampleAutoplaying .carousel-control-prev-icon,
#carouselExampleAutoplaying .carousel-control-next-icon {
  opacity: 0.5; /* A transparência em repouso agora fica exclusivamente no ícone */
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Pseudo-elemento para criar um efeito esfumado LARGADO e SUTIL (0.02) que não afeta a nitidez do ícone */
#carouselExampleAutoplaying .carousel-control-prev::before,
#carouselExampleAutoplaying .carousel-control-next::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 250px; /* Efeito largo que avança sobre a foto */
  opacity: 0; /* Invisível por padrão */
  transition: opacity 0.3s ease; /* Animação suave perfeitamente sincronizada com o ícone */
  z-index: -1; /* Fica atrás do ícone da seta */
  pointer-events: none; /* Não atrapalha o clique na foto */
}

#carouselExampleAutoplaying .carousel-control-prev::before {
  left: 0;
  background: linear-gradient(
    to right,
    rgba(234, 44, 117, 0.02) 0%,
    transparent 100%
  );
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to right, black 0%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, transparent 100%);
}

#carouselExampleAutoplaying .carousel-control-next::before {
  right: 0;
  background: linear-gradient(
    to left,
    rgba(234, 44, 117, 0.02) 0%,
    transparent 100%
  );
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  -webkit-mask-image: linear-gradient(to left, black 0%, transparent 100%);
  mask-image: linear-gradient(to left, black 0%, transparent 100%);
}

/* Acende o botão e o efeito esfumado largo ao passar o mouse */
#carouselExampleAutoplaying .carousel-control-prev:hover::before,
#carouselExampleAutoplaying .carousel-control-next:hover::before {
  opacity: 1;
}

#carouselExampleAutoplaying
  .carousel-control-prev:hover
  .carousel-control-prev-icon,
#carouselExampleAutoplaying
  .carousel-control-next:hover
  .carousel-control-next-icon {
  opacity: 1; /* O ícone acende totalmente */
  transform: scale(1.2); /* Seta cresce */
  filter: drop-shadow(
    0 0 10px rgba(234, 44, 117, 0.8)
  ); /* Seta brilha em néon */
}

/* Ticker Animado (Letreiro) */
.news-ticker-container {
  margin-top: -1.5rem; /* Puxa o letreiro para cima para grudar na navbar */
  margin-left: calc(-1 * var(--edge-margin));
  margin-right: calc(-1 * var(--edge-margin));
  background-color: #f0f0f0; /* Fundo Branco */
  color: #1c1c1c;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 1px;
  text-transform: uppercase; /* Deixa tudo em CAIXA ALTA */
  margin-bottom: 0;

  /* Efeito Border Hover Estático (Glow Rosa) */
  border-bottom: 2px solid #ea2c75;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.05),
    0 0 0 0.25rem rgba(234, 44, 117, 0.25);

  /* Centralização Absoluta e Altura Rente */
  height: 32px;
  line-height: 40px;
  padding: 0;
  display: block;
}

.news-ticker-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: ticker-scroll 25s linear infinite;
  color: #1c1c1c;
  font-family:
    "JetBrains Mono", monospace; /* Fonte hacker/código para o letreiro */
  font-weight: 700;
  letter-spacing: 0.5px; /* Espaçamento leve para legibilidade rápida */
}

.news-ticker-container:hover .news-ticker-text {
  animation-play-state: paused;
  cursor: default;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* Botão Voltar ao Topo Flutuante */
#topo {
  position: fixed;
  bottom: 30px;
  /* Fica perfeitamente centralizado na borda em Desktop: */
  right: calc((var(--edge-margin) - 45px) / 2);
  z-index: 1000; /* Fica acima de tudo na tela */
  transition: opacity 0.3s ease;
  opacity: 0.7; /* Levemente transparente por padrão para não distrair */
}

#topo img {
  width: 45px;
  height: 45px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.5)); /* Sombra escura sutil */
}

#topo:hover {
  opacity: 1;
}

#topo:hover img {
  transform: translateY(-8px) scale(1.1); /* Saltinho elástico + Leve aumento de tamanho */
  filter: drop-shadow(
    0 0 15px rgba(255, 255, 255, 0.2)
  ); /* Brilho néon branco combinando com o menu */
}

/* --- Correções Responsivas para o Menu Mobile (Viewport Fechada) --- */
@media (max-width: 767.98px) {
  /* Remove as bordas, fundo e texturas do dropdown no celular, integrando-o ao menu aberto */
  .navbar-nav .dropdown-menu {
    border: none !important;
    background-color: transparent !important;
    background-image: none !important;
    margin-top: 0 !important;
    padding-left: 1rem !important; /* Leve recuo para identificar que são sub-itens */
  }

  /* Impede que o sublinhado animado ocupe a largura inteira da tela */
  .navbar-dark .navbar-nav .nav-link,
  .navbar-nav .dropdown-item {
    display: inline-block !important; /* Obriga o botão a ter apenas a largura da palavra */
    width: auto !important;
    padding-left: 0 !important; /* Remove padding lateral interno para a palavra ficar isolada */
    padding-right: 0 !important;
  }

  /* Garante que o sublinhado acompanhe exatamente o novo tamanho isolado da palavra */
  .navbar-dark .navbar-nav .nav-link:hover::before,
  .navbar-dark .navbar-nav .nav-link:focus::before,
  .navbar-nav .dropdown-item:hover::before,
  .navbar-nav .dropdown-item:focus::before {
    width: 100% !important;
  }

  /* Barra de pesquisa no mobile: Fica 100% expandida e alinhada por padrão */
  .search-minimalist {
    width: 100% !important;
    margin-top: 1.5rem; /* Descola dos links superiores */
    justify-content: flex-start !important;
  }

  .search-minimalist-input,
  .search-minimalist-input:focus {
    width: 100% !important; /* Expande ocupando toda a largura do menu mobile */
    background-color: #1c1c1c !important;
    border-bottom: 2px solid #ea2c75 !important;
    padding: 0 45px 0 20px !important; /* Espaço para o texto não sobrepor a lupa */
    color: #f0f0f0 !important;
    cursor: text !important;
  }

  .search-minimalist-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
  }

  .search-minimalist-icon {
    color: #ea2c75 !important; /* Lupa rosa por padrão no mobile */
  }
}

/* --- Estilos Premium do Accordion --- */
.accordion {
  margin-top: 2rem;
  margin-bottom: 4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.accordion-item {
  background-color: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.accordion-button {
  background-color: transparent !important;
  color: #f0f0f0 !important;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: none !important;
  padding: 1.1rem 0; /* Espaço interno ligeiramente reduzido para otimizar altura */
  transition: all 0.3s ease;
}

.accordion-button:hover {
  color: #ea2c75 !important; /* Efeito hover na mesma cor da navbar */
  padding-left: 0.5rem; /* Leve deslocamento pro lado premium */
}

.accordion-button:not(.collapsed) {
  color: #ea2c75 !important; /* Rosa quando aberto */
  background-color: transparent !important;
  box-shadow: none !important;
  padding-left: 0.5rem;
}

/* Alterar cor da setinha (chevron) */
.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
  transition:
    transform 0.3s ease,
    background-image 0.3s ease;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ea2c75'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-body {
  color: #f4f4f5;
  background-color: transparent;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.15rem;
  line-height: 1.6;
  padding: 1rem 0 1.2rem 0; /* Respiro inferior reduzido para manter o accordion contido */
  border-top: 1px dashed rgba(234, 44, 117, 0.3); /* Linha divisória rosa sutil */
}

/* --- Estilos da Seção Community --- */
.community-section {
  min-height: 100vh; /* Garante que a seção tenha no mínimo a altura total da tela */
  padding-top: 6rem; /* Empurra o bloco um pouco mais para baixo para parecer centralizado, descontando a navbar */
}

.community-section .accordion {
  margin-bottom: 2rem; /* Reduz a margem inferior do accordion para caber na tela */
  margin-top: 1rem; /* Aproxima um pouco mais da logo */
}

.text-pink {
  color: #ea2c75 !important;
}

.community-features-list {
  line-height: 1.8;
}

.community-link {
  color: #ea2c75;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.community-link:hover {
  color: #f0f0f0;
  padding-left: 5px; /* Leve pulinho pro lado no hover */
}

.community-req-list {
  color: #ea2c75;
}

.community-req-list span {
  color: #f4f4f5;
}

.community-footer-text {
  color: #f4f4f5;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.25rem;
  line-height: 1.6;
}

.stay-fatal-text {
  color: #ea2c75;
  text-transform: uppercase;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 2px;
  font-size: 1.6rem;
  font-weight: 400; /* Espessura normal */
  animation: neon-pulse 1.5s ease-in-out infinite alternate; /* Animação pulsante */
  display: inline-block;
}

/* --- Animação Neon Dinâmica --- */
@keyframes neon-pulse {
  0% {
    text-shadow:
      0 0 5px rgba(234, 44, 117, 0.2),
      0 0 10px rgba(234, 44, 117, 0.2);
    filter: brightness(1);
  }
  100% {
    text-shadow:
      0 0 10px rgba(234, 44, 117, 0.6),
      0 0 20px rgba(234, 44, 117, 0.4),
      0 0 30px rgba(234, 44, 117, 0.2),
      0 0 40px rgba(234, 44, 117, 0.1);
    filter: brightness(1.2); /* Aumenta o brilho da própria cor */
  }
}

/* --- Botão Voltar ao Topo (Fatality Minimalist Pattern) --- */
.back-to-top {
  position: fixed;
  bottom: calc(40px + 10vh);
  right: 40px;
  background: transparent !important; /* Retira o círculo / fundo */
  border: none;
  color: rgba(
    112,
    108,
    108,
    0.5
  ); /* Cor cinza inativa igual os ícones do footer */
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 999;
  box-shadow: none; /* Remove a sombra do botão circular */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.back-to-top svg {
  display: inline-block;
  transform: scale(2.1); /* Aumentado em 5% (ajuste fino) */
  mix-blend-mode: normal; /* Desfaz o efeito de furador do antigo botão */
  transition: inherit;
}

.back-to-top:hover {
  background: transparent !important; /* Garante que não haja fundo no hover */
  color: #f0f0f0; /* Fica Rosa Neon no hover */
  box-shadow: none;
}

.back-to-top:hover svg {
  transform: translateY(-8px) scale(2.3); /* Pulo da mola proporcional */
  filter: drop-shadow(0 0 15px rgba(234, 44, 117, 0.2)); /* Brilho neon */
}

/* Transição mola para os novos ícones SVG do carrossel */
.custom-carousel-arrow {
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- Estilos da Seção de Produtos/Preços --- */
.pricing-card {
  background-color: #1c1c1c !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}

.pricing-card-highlight {
  background-color: #1c1c1c !important;
  border: 1px solid #ea2c75 !important;
  box-shadow: 0 0 25px rgba(234, 44, 117, 0.15);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

@media (min-width: 992px) {
  .pricing-card-highlight {
    transform: scale(1.05);
  }
  .pricing-card-highlight:hover {
    transform: scale(1.07) translateY(-5px);
    box-shadow: 0 0 30px rgba(234, 44, 117, 0.25);
  }
}

.pricing-card-header {
  border-bottom: 1px dashed rgba(234, 44, 117, 0.3);
  padding: 1.5rem;
}

.pricing-card-highlight .pricing-card-header {
  border-bottom: 1px dashed rgba(234, 44, 117, 0.5);
}

.pricing-title {
  font-family: "Space Grotesk", sans-serif;
}

.pricing-price {
  color: #f0f0f0;
}

.pricing-card-body {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.15rem;
  color: #f4f4f5;
  padding: 1.5rem;
}

.pricing-card-footer {
  border-top: none;
  padding: 1.5rem;
  background: transparent;
}

.pricing-badge {
  background-color: #ea2c75;
  font-family: "Rajdhani", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.4rem 1rem;
}

.pricing-btn-outline {
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-color: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.pricing-btn-outline:hover {
  background-color: #ea2c75;
  border-color: #ea2c75;
  color: white;
  box-shadow: 0 4px 10px rgba(234, 44, 117, 0.3);
}

.pricing-btn-highlight {
  background-color: #ea2c75;
  color: white;
  border: none;
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 2px 6px rgba(234, 44, 117, 0.2);
  transition: all 0.3s ease;
}

.pricing-btn-highlight:hover {
  background-color: #f53d82;
  color: white;
  box-shadow: 0 4px 10px rgba(234, 44, 117, 0.3);
}

.premium-table {
  color: #f4f4f5;
  background-color: transparent;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.premium-table th,
.premium-table td {
  padding: 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background-color: transparent; /* fallback */
  color: #f4f4f5 !important;
}

/* Header Styling */
.premium-table thead th {
  background-color: #121212;
  border-bottom: 2px solid rgba(234, 44, 117, 0.3);
  font-family: "Space Grotesk", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1.1rem;
  font-weight: 600;
}

.premium-table tbody {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.15rem;
}

/* Base row color */
.premium-table tbody tr td {
  background-color: #181818;
}

/* Hover Effect on Rows */
.premium-table tbody tr {
  transition: all 0.3s ease;
}

.premium-table tbody tr:hover td {
  background-color: rgba(234, 44, 117, 0.05); /* very subtle pink hover */
}

/* Highlight Column (Versão Beta) */
.premium-table td:nth-child(3),
.premium-table th:nth-child(3) {
  background-color: rgba(234, 44, 117, 0.03); /* Always slightly pink */
  border-left: 1px solid rgba(234, 44, 117, 0.1);
  border-right: 1px solid rgba(234, 44, 117, 0.1);
}

.premium-table tr:hover td:nth-child(3) {
  background-color: rgba(234, 44, 117, 0.1); /* stronger pink on hover */
}

/* Table Wrapper for rounded corners and shadow */
.table-wrapper {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  background-color: #121212;
}

/* Last row no border */
.premium-table tbody tr:last-child td {
  border-bottom: none;
}

/* Responsividade da tabela */
.table-responsive {
  /* Sombra interna removida porque o wrapper já é bonito */
}

@media (max-width: 768px) {
  .premium-table {
    white-space: nowrap; /* Impede a quebra de linha nas células, ativando o scroll horizontal */
  }
}

.prev-arrow {
  transform: rotate(-90deg) scale(0.7); /* Vira para esquerda + escala exigida */
}

.next-arrow {
  transform: rotate(90deg) scale(0.7); /* Vira para direita + escala exigida */
}

/* Hover effects */
.carousel-control-prev:hover .prev-arrow {
  transform: rotate(-90deg) scale(0.75); /* Levanta mais um pouco no hover */
  filter: drop-shadow(0 0 15px rgba(206, 206, 206, 0.3));
}

.carousel-control-next:hover .next-arrow {
  transform: rotate(90deg) scale(0.75);
  filter: drop-shadow(0 0 15px rgba(206, 206, 206, 0.3));
}

/* --- Ajustes Responsivos para as Setas --- */
@media (max-width: 767.98px) {
  /* Diminui levemente as setas originais no celular para não cobrir tanto a foto */
  .prev-arrow {
    transform: rotate(-90deg) scale(0.7); /* Reduz um pouco o 1.3 original no celular */
  }
  .next-arrow {
    transform: rotate(90deg) scale(0.7);
  }

  /* Ajusta o tamanho e a posição da seta de topo para não atrapalhar no celular */
  .back-to-top {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 1.5rem;
    bottom: 20px; /* Mais perto do rodapé */
    right: var(--edge-margin); /* Segue a grade do site matematicamente */
  }
}

/* --- Footer Fatality --- */
.fatality-footer {
  background-color: transparent; /* Mantém o fundo escuro do body */
  font-family: "Space Grotesk", sans-serif;
}

.custom-footer-nav {
  border-bottom: 1px solid rgba(234, 44, 117, 0.2) !important; /* Linha rosa bem sutil em vez da cinza do bootstrap */
}

/* Custom underline for page titles */
.title-underline {
  border-bottom: 1px solid rgba(234, 44, 117, 0.2);
  padding-bottom: 0.5rem;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

.footer-link {
  color: #b1aaaa !important; /* Cinza claro/metálico */
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.footer-link:hover {
  color: #ea2c75 !important; /* Brilha rosa no hover */
  text-shadow: 0 0 10px rgba(234, 44, 117, 0.5); /* Leve neon */
}

.footer-copy {
  color: #706c6c; /* Cinza mais escuro para não chamar muita atenção */
  font-size: 1rem;
  font-family: "Rajdhani", sans-serif;
  letter-spacing: 1px;
}

/* --- Redes Sociais no Footer --- */
.footer-socials .social-icon {
  color: #706c6c;
  font-size: 1.5rem;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* A mola Fatality */
  display: inline-block;
}

.footer-socials .social-icon:hover {
  color: #f0f0f0;
  transform: translateY(-5px) scale(1.15); /* Pula e estufa */
  filter: drop-shadow(
    0 0 12px rgba(255, 255, 255, 0.07)
  ); /* Forte brilho neon branco */
}

/* --- Ajustes Globais de Responsividade --- */

/* 1. Carrossel: Força a manter altura decente em vez de encolher como uma fita */
.carousel-item img {
  height: calc(
    100vh - 5.2rem - 32px
  ); /* Altura da tela menos navbar e letreiro */
  object-fit: cover; /* Faz a imagem preencher a área sem distorcer (corta as laterais se necessário) */
}

@media (max-width: 767.98px) {
  /* Celulares e telas muito pequenas */
  .carousel-item img {
    height: 75vh; /* Ocupa 75% da tela, deixando a aba de baixo "espiar" */
  }

  /* 2. Seção Community: Desliga a trava de 100vh no celular porque o texto em telas estreitas ocupa muitas linhas verticais */
  .community-section {
    min-height: auto;
    padding-top: 5.5rem; /* Ajuste suave do topo */
    padding-bottom: 2rem; /* Respiro no final da página */
  }

  .fatality-footer {
    margin-top: 3rem !important; /* Em vez do mt-auto agressivo, usa uma margem fixa no celular */
  }
}

/* --- Ícone do Menu Mobile --- */
.custom-toggler {
  border: none !important; /* Tira aquela borda feia quadrada do Bootstrap */
  padding: 0 !important;
  color: #ea2c75 !important; /* Ícone rosa */
  font-size: 1.8rem;
  transition: all 0.3s ease;
}

.custom-toggler:focus {
  outline: none !important;
  box-shadow: none !important; /* Tira a sombra de foco padrão azul/branca */
  text-shadow: 0 0 15px rgba(234, 44, 117, 0.2); /* Brilho neon ao clicar */
}

/* --- Padronização Matemática do Menu --- */
/* Garante que a distância entre os itens seja a MESMA distância entre a Logo e o primeiro item */
.navbar-brand {
  margin-right: 1.5rem !important; /* Distância exata da Logo para o menu no desktop MANTIDA */
}

.custom-nav-spacing {
  gap: 0.65rem; /* Reduzido em mais 20% (de 0.8rem para 0.65rem) */
}

.custom-nav-spacing .nav-link {
  padding-left: 0 !important;
  padding-right: 0 !important; /* Remove o padding fantasma do bootstrap */
}

@media (max-width: 767.98px) {
  /* No celular (vertical), replica a simetria solicitada */
  .custom-nav-spacing {
    margin-top: 1.5rem !important; /* Distância vertical da Logo para o Produtos MANTIDA */
    gap: 0.1rem; /* Distância vertical reduzida em mais 20% */
    margin-bottom: 0.1rem !important; /* Padroniza a distância entre o botão 'Mais' e o Campo de Busca */
  }
}

/* --- Scroll Reveal Animations --- */
.reveal {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal.active {
  opacity: 1;
  transform: translate(0) scale(1);
}

.reveal-up {
  transform: translateY(60px);
}

.reveal-left {
  transform: translateX(-50px);
}

.reveal-right {
  transform: translateX(50px);
}

.reveal-scale {
  transform: scale(0.9);
}

/* Suaviza as animações no mobile */
@media (max-width: 767.98px) {
  .reveal-up {
    transform: translateY(30px);
  }
  .reveal-left {
    transform: translateX(-30px);
  }
  .reveal-right {
    transform: translateX(30px);
  }
}

/* --- Formulário Premium --- */
.custom-form {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.15rem;
}

.custom-input {
  background-color: #181818 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #f4f4f5 !important;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.custom-input:focus {
  border-color: #ea2c75 !important;
  box-shadow: 0 0 0 0.25rem rgba(234, 44, 117, 0.25) !important;
  background-color: #121212 !important;
}

.custom-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Custom Select Dropdown Arrow */
.custom-input.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ea2c75' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Custom Radio & Checkbox */
.custom-radio .form-check-input,
.custom-checkbox .form-check-input {
  background-color: #181818;
  border-color: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  width: 1.25em;
  height: 1.25em;
}

.custom-radio .form-check-label,
.custom-checkbox .form-check-label {
  cursor: pointer;
  margin-top: 0.1em;
}

.custom-radio .form-check-input:checked,
.custom-checkbox .form-check-input:checked {
  background-color: #ea2c75;
  border-color: #ea2c75;
}

.custom-radio .form-check-input:focus,
.custom-checkbox .form-check-input:focus {
  border-color: #ea2c75;
  box-shadow: 0 0 0 0.25rem rgba(234, 44, 117, 0.25);
}

/* ===== Password Strength Bar ===== */
.password-strength-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.password-strength-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  transition:
    width 0.3s ease,
    background-color 0.3s ease;
}

/* ===== Gallery ===== */
.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid rgba(234, 44, 117, 0.05);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

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

.gallery-item:hover img {
  transform: scale(1.08);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: #ea2c75;
  border-radius: 12px;
}

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

.gallery-item:hover {
  border-color: rgba(234, 44, 117, 0.05);
  box-shadow: 0 0 20px rgba(234, 44, 117, 0.1);
}

/* ===== Testimonial Carousel ===== */
#testimonialCarousel .carousel-indicators button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

#testimonialCarousel .carousel-indicators button.active {
  background-color: #ea2c75;
  transform: scale(1.3);
}

/* ===== Team Accordion Styles ===== */
.team-role-tag {
  color: #ea2c75;
  margin-left: 10px;
  font-size: 0.7em;
  letter-spacing: 1.5px;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(234, 44, 117, 0.1), 0 0 15px rgba(234, 44, 117, 0.2);
}

.team-profile-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #ea2c75;
  box-shadow: 0 0 10px rgba(234, 44, 117, 0.2);
}

.team-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}