:root {
    --primary-blue: #275aa9;
    --light-blue: #5ab2e0;
    --cream: #efd78d;
    --orange: #f9b749;
    --off-white: #f7f1e1;
    --white: #ffffff;
    --dark-gray: #333333;
    --light-gray: #666666;
	--superlight-blue: #d4eef8;
	--superlight-gray: #efefef;
	--dark-blue: #012661;
	--cyan: #43fffe;
	--black: #000000;
	--dark-glass: #50505070;
}

canvas {
  display: block;
  vertical-align: bottom;
  
} /* ---- particles.js container ---- */

#particles-js {
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

#animated-text {
	line-height: 2.75rem;
	text-transform: uppercase;
	font-size: 3.75rem;
	max-width: 32rem;
    text-align: center;
	color: var(--dark-blue);
	margin-top: 2rem !important;
}
#animated-text .space {
	margin: 0 2px;
}
#animated-text em {
	font-style: normal;
	font-weight: 400 !important;
	color: var(--cyan);
	font-size: 2.33rem;
	margin: 0 10px;
}
#animated-text span {
  opacity: 0;
  color: #ffffff;
  font-weight: 900;
  transition: opacity 0.3s ease-in-out;
  display: inline-block;
}
#animated-text .color-a {
  color: #ffffff;
}

#animated-text .color-b {
  color: #cccccc !important;
}

/*
============================================
CSS da Scrollbar Horizontal Customizada
============================================
*/
@layer components {
  .custom-scrollbar-x, .custom-scrollbar-y {
    /* --- Para Firefox --- */
    scrollbar-width: thin;
    scrollbar-color: #00d0ff rgba(2, 27, 64, 0.5); /* Cor da barra / Cor da pista */

    /* --- Para Chrome, Safari, Edge (Motores WebKit/Blink) --- */
  }

  /* A "pista" (trilho) por onde a barra corre */
  .custom-scrollbar-x::-webkit-scrollbar-track, .custom-scrollbar-y::-webkit-scrollbar-track {
    background: rgba(2, 27, 64, 0.5); /* Um azul escuro do seu design, semi-transparente */
    border-radius: 10px;
  }

  /* A própria barra "arrastável" */
  .custom-scrollbar-x::-webkit-scrollbar-thumb, .custom-scrollbar-y::-webkit-scrollbar-thumb {
    background-color: #00d0ff; /* O azul claro principal do seu design */
    border-radius: 10px;       /* Bordas arredondadas */
    border: 3px solid rgba(2, 27, 64, 0.5); /* Cria um "padding" com a cor da pista */
    background-clip: padding-box;
  }

  /* O "tamanho" da barra de scroll */
  .custom-scrollbar-x::-webkit-scrollbar, .custom-scrollbar-y::-webkit-scrollbar {
    height: 10px; /* Altura da barra horizontal */
  }
}

@layer components {
  .custom-scrollbar-x {
    /* ... (regras de scrollbar-color que já existem) ... */

    cursor: grab; /* Mãozinha "aberta" */
    cursor: -webkit-grab;
    user-select: none; /* Impede que o texto seja selecionado ao arrastar */
  }

  .custom-scrollbar-x.active-drag {
    /* --- NOVA CLASSE PARA QUANDO ESTIVER ARRASTANDO --- */
    cursor: grabbing; /* Mãozinha "fechada" */
    cursor: -webkit-grabbing;
  }

}

#bg-video-mosaico {
    height: 100%;
    width: auto !important;
    max-width: 178vh !important;
}

@media screen and (min-width: 1600px) {
#bg-video-mosaico {
    position: absolute;
    width: 100% !important;
    height: auto;
	    max-width: 100% !important;
}
}

/* Menu Mobile */
#mobile-menu {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  transform: translateX(100%);
  transition: transform 0.3s ease-in-out;
}

#mobile-menu.translate-x-0 {
  pointer-events: all;
  transform: translateX(0);
}

#mobile-menu-overlay {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
}

#mobile-menu.translate-x-0 #mobile-menu-overlay {
  opacity: 1;
}

#mobile-menu-button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  z-index: 60 !important;
  display: none; /* Esconde por padrão */
}

/* Mostra apenas em telas menores que 768px (mobile) */
@media screen and (max-width: 767px) {
  #mobile-menu-button {
    display: flex !important;
  }
}

#menu-icon,
#close-icon {
  transition: opacity 0.2s ease;
}

.mobile-menu-item {
  position: relative;
  overflow: hidden;
}

.mobile-menu-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(to bottom, #7f56d9, #00d0ff);
  transition: height 0.3s ease;
  border-radius: 0 2px 2px 0;
}

.mobile-menu-item:hover::before {
  height: 70%;
}
#slideshow-topo {
	max-height: 74vh;
}

/* iFrame */
.lity-vimeo .lity-container {
  max-width: 100% !important;
}

@media screen and (max-width: 640px) {
#animated-text {
	font-size: 2.25rem !important;
	line-height: 2.5rem !important;
    margin: 0 auto;
}
#animated-text em {
	font-size: 1.4rem !important;
}
.lity-iframe-container {
	height: 90vh !important;
}
#inicio {
	min-height: 135vh !important;
}
#inicio .absolute.inset-0.z-10 {
	padding-top: 4rem;
	align-items: flex-start !important;
}
#inicio .grid {
	padding-top: 1rem;
}
#inicio h1 {
	font-size: 2rem !important;
	line-height: 2.25rem !important;
	margin-top: 1rem;
}
.lity-vimeo .lity-container {
  max-width: 96% !important;
  margin: 0 auto;
}
.legenda {
	font-size: 0.66rem !important;
}
.titulo-depoimentos-cidades {
	font-size: 1rem !important;
	line-height: 1.5rem !important;
}
}

@media screen and (max-width: 390px) {
#inicio h1 {
	font-size: 1.75rem !important;
	line-height: 2rem !important;
}
#inicio .absolute.inset-0.z-10 {
	padding-top: 4.5rem;
}
#animated-text {
	font-size: 1.5rem !important;
	line-height: 1.8rem !important;
	max-width: 18rem !important;
}
#animated-text em {
	font-size: 0.95rem !important;
}
}

@media screen and (max-width: 320px) {
#animated-text {
	font-size: 1.3rem !important;
	line-height: 1.6rem !important;
	max-width: 16rem !important;
    margin: 0 auto;
}
#animated-text em {
	font-size: 0.85rem !important;
}
#inicio {
	min-height: 170vh !important;
}
#inicio h1 {
	font-size: 1.5rem !important;
	line-height: 1.75rem !important;
}
#inicio .absolute.inset-0.z-10 {
	padding-top: 5rem;
}
}