/*
Theme Name: NEO Sistemas
Theme URI: https://targos.com.br
Author: Targos Agência
Author URI: https://targos.com.br
Description: Tema desenvolvido para NEO Sistemas.
Version: 1.7.5
Text Domain: neosistemas
*/

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

#headerNeo {
    height: 100px;
    margin-bottom: -100px;
    z-index: 5;
    position: relative;
}

@media(max-width:1024px) {
    .logo-img {
        width: 120px !important
    }
}



#hero {
    background-repeat: no-repeat;
    background-position: 90%, right;
    background-size: contain;
}

.detalhe-n-outline {
    position: absolute;
    right: 3%;
    top: 0;
    width: 33%;
    transform: translateY(-20%);
    opacity: .04;
}

.img-tela-listing {
    object-fit: cover;
    height: 200px;
    width: 150%;
    margin: 0 !important;
    object-position: left top;
}

.icone-n-chamado {
    width: 18px;
}

#cta-hero {
    margin-top: -70px;
}

.anos {
    position: absolute;
    z-index: 2;
    right: calc(var(--bs-gutter-x) * .5 + 20px);
    bottom: 20px;
}

.img-empresa-home {
    margin-top: -150px;
}

.divisor {
    height: 1px;
    background: var(--bs-primary);
}

.divisor-card-segmento {
    width: 50%;
    height: 1px;
    background: var(--bs-primary);
}

.swiper-segmentos .swiper-slide {
    transition: all .4s !important;
}

.swiper-segmentos .swiper-slide:not(.swiper-slide-active) {
    transform: scale(.8);
}

.conteudo-extra-card-segmento {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity 0.3s ease;
    /* Transição suave de opacidade via CSS */
}

.custom-nav-btn {
    width: 50px;
    height: 50px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 100px;
}

.navegacao {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
}


.slide-segmentos .swiper-button-next-custom,
.slider-depoimentos .swiper-button-next-depo {
    transform: translateX(30%);
}

.slide-segmentos .swiper-button-prev-custom,
.slider-depoimentos .swiper-button-prev-depo {
    transform: translateX(-30%);
}

@media(min-width:1024px) {

    .slide-segmentos .swiper-button-next-custom,
    .slider-depoimentos .swiper-button-next-depo {
        transform: translateX(100%);
    }

    .slide-segmentos .swiper-button-prev-custom,
    .slider-depoimentos .swiper-button-prev-depo {
        transform: translateX(-100%);
    }
}


.swiper-segmentos .swiper-slide-active {
    z-index: 10;
}

.swiper-segmentos .swiper-slide {
    transition: all .3s;
}

.text-hover-dark:hover {
    color: var(--bs-dark) !important;
}

.text-hover-primary:hover {
    color: var(--bs-primary) !important;
}

.menu-rodape ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: .9rem;
}

.menu-rodape a {
    color: var(--bs-white);
    transition: all .2s;
}

.menu-rodape a:hover {
    color: var(--bs-primary);
    transition: all .2s;
}

.orbital-item {
    background: none !important;
    width: 120px;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    border: none;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    transition: all .3s;
}

@media(max-width:768px) {
    .orbital-item {
        width: 65px;
    }
}

.orbital-item:not(.active) {
    filter: grayscale(1);
    opacity: .5;
}

.isometric-img {
    transition: all .3s;
    box-shadow: none;
}

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

.isometric-text {
    transform: translate(35%, -75%) rotate(331deg) skewX(24deg);
}

.orbital-item.item-1 {
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
}

.orbital-item.item-2 {
    left: 10%;
    top: -30px;
}

.orbital-item.item-3 {
    top: 50%;
    left: -30px;
    transform: translate(0px, -50%);
}

.orbital-item.item-4 {
    left: 5%;
    bottom: -20px;
}

.orbital-item.item-5 {
    bottom: -60px;
    left: 50%;
    transform: translateX(-50%);
}

.orbital-item.item-6 {
    right: 5%;
    bottom: -20px;
}

.orbital-item.item-7 {
    top: 50%;
    right: -30px;
    transform: translate(0px, -50%);
}

.orbital-item.item-8 {
    top: -30px;
    right: 10%;
}

.conteudo-modulos {
    background-repeat: no-repeat;
    background-size: 150%;
    background-position: -60% -140%;
}

.icone-seta-modulos {
    background: var(--bs-primary);
    position: absolute;
    left: 0;
    top: 88px;
    width: 36px;
    height: 36px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    transform: translateX(-50%);
    color: var(--bs-dark);
}

.tagline-selecione {
    position: absolute;
    left: calc(var(--bs-gutter-x) * .5);
    top: -30px;
    width: 100px;
    font-size: .70rem;
    padding: 4px 10px;
    text-align: center;
    line-height: 1.1rem;
}

.card-segmento {
    height: 450px !important;
}

.conteudo-slide-segmento {
    position: absolute;
    bottom: 30px;
    z-index: 2;
    left: 30px;
    width: calc(100% - 60px);
}

.img-card-segmento {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.sombra-card-segmento {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 60%;
    background: linear-gradient(360deg, var(--bs-dark) 30%, transparent);
    left: 0;
}

.sombra-card-biblioteca {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 100%;
    background: linear-gradient(360deg, var(--bs-dark) 20%, transparent);
    left: 0;
}

.swiper-logos .swiper-wrapper {
    transition-timing-function: linear !important;
}

#personalizavelNeo {
    background-repeat: no-repeat;
    background-position: center 0%;
    background-size: 100%;
}

#funcionalidadesNeo {
    background-repeat: no-repeat;
    background-position: 130% 300px;
    background-size: 50%;
}

.img-central-atendimento {
    height: 500px;
    width: 100%;
    object-fit: cover;
}

#centralAtendimentoNeo {
    background-repeat: no-repeat;
    background-size: 50%;
    background-position: left -200%;
}

.biblioteca-item {
    height: 400px;
    background-size: cover;
    background-position: center;
}

#bibliotecaNeo {
    margin-top: -200px;
}

.content-biblioteca-item {
    position: relative;
    z-index: 2;
}

.sombra-branca-esq {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 70px;
    background: linear-gradient(90deg, white, transparent);
    z-index: 2;
}

.sombra-branca-dir {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 70px;
    background: linear-gradient(270deg, white, transparent);
    z-index: 2;
}

.img-tela {
    width: 100%;
    border-radius: 12px 12px 0 0;
}

.tagline-sistema-1 {
    position: absolute;
    top: 80px;
    left: -110px;
}

.tagline-sistema-2 {
    position: absolute;
    bottom: 80px;
    left: -80px;
}

.tagline-sistema-3 {
    position: absolute;
    bottom: 80px;
    right: -100px;
}

.tagline-sistema-4 {
    position: absolute;
    top: 80px;
    right: -50px;
}

.btn-tela {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
}

.btn-prefooter {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#preFooterNeo .container {
    margin-bottom: -57px;
    z-index: 2;
    position: relative;
}

nav.rank-math-breadcrumb {
    font-size: .825rem;
    opacity: .5;
}

nav.rank-math-breadcrumb a {
    color: var(--bs-white);
}

.sombra-img-prefooter {
    position: absolute;
    height: 100%;
    width: 50%;
    right: 0;
    top: 0;
    background: linear-gradient(270deg, var(--bs-dark), transparent);
}

.swiper-button-disabled {
    opacity: 0;
    cursor: not-allowed;
    pointer-events: none;
    transition: all .3s;
}

.swiper-funcionalidades .swiper-wrapper {
    display: flex;
}

.swiper-funcionalidades .swiper-slide {
    height: unset;
}

.item-wrapper {
    padding: 4px 20px 4px 10px;
    width: fit-content;
}

/*menu desktop*/

.neo-nav-desktop {
    display: block;
    height: 100%;
    /* Garante que a nav ocupe a altura do header */
}

.neo-nav-list {
    display: flex;
    justify-content: start;
    align-items: center;
    /* Estica os LIs para ocupar toda a altura do header */
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    gap: 30px;
}

/* 2. Itens Principais (Nível 0) */
.neo-menu-item>a {
    padding: 0;
    /* Removido padding para o link ocupar a área total */
    color: var(--bs-white);
    transition: all .3s;
}

.neo-menu-item>a:hover,
.neo-menu-item.is-active>a {

    color: var(--bs-primary);
}




/* Item pai static para o submenu ignorar o <li> e buscar o #headerNeo */
.neo-menu-item.is-mega {
    position: static !important;
}

/* Dropdown normal continua relativo ao item */
.neo-menu-item.has-children:not(.is-mega) {
    position: relative;
}

/* 4. Submenu Wrapper */
.neo-submenu-wrapper {
    display: none;
    position: absolute;
    top: 100%;
    z-index: 9999;
}

/* --- A PONTE DE HOVER --- 
   Este elemento invisível preenche qualquer gap de 1 ou 2 pixels 
   entre o header e o dropdown, impedindo que o menu feche ao mover o mouse */
.neo-submenu-wrapper::before {
    content: "";
    position: absolute;
    top: -30px;
    /* Altura da ponte para cima */
    left: 0;
    width: 100%;
    height: 30px;
    background: transparent;
}

/* Largura para Dropdown Comum */
.neo-menu-item.has-children:not(.is-mega) .neo-submenu-wrapper {
    width: 250px;
    left: 0;
}

/* Largura para MEGA MENU (100% do #headerNeo) */
.neo-menu-item.is-mega .neo-submenu-wrapper {
    width: 100%;
    left: 0;
}

/* 5. Organização Interna do Conteúdo */

/* Grid do Mega Menu */
.neo-menu-item.is-mega .neo-sub-menu {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
    margin: 0;
    row-gap: 30px;
    column-gap: 50px;
}

.neo-menu-item.is-mega .neo-sub-menu>li {
    flex: 1;
    min-width: 200px;
}

.neo-sub-menu .neo-menu-link {
    color: var(--bs-dark);
    font-weight: 600;
    transition: all .2s;
    position: relative;
    overflow: hidden;
}

.neo-sub-menu .neo-menu-link:hover {
    color: var(--bs-primary);
}

/* Estilo do Banner no Menu */
.menu-banner-item {
    flex: 0 0 300px;
    /* Define uma largura fixa para o banner não esmagar os links */
    max-width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-banner-img {
    width: 100%;
    height: 350px;
    border-radius: 8px;
    transition: transform 0.3s ease;
    object-fit: cover;
}

.menu-banner-item a:hover .menu-banner-img {
    transform: scale(1.03);
}

/* Responsivo: Esconde banner em telas menores se necessário */
@media (max-width: 1100px) {
    .menu-banner-item {
        display: none;
    }
}



/*menu mobile*/
.neo-nav-mobile {
    position: relative;
    width: 100%;
    overflow-x: hidden;
    /* Corta o que está fora */
}

.offcanvas-footer {
    padding: var(--bs-offcanvas-padding-x);
}

.neo-mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease;
    /* Efeito de deslize */
}

.neo-mobile-link {
    display: block;
    padding: 15px var(--bs-offcanvas-padding-x);
    color: var(--bs-dark);
    text-decoration: none;
    font-weight: 600;
}

.neo-mobile-link i {
    width: 30px;
    height: 20px;
    background-color: var(--bs-primary);
    color: var(--bs-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100px;
}

/* Estilo do Botão Voltar */
.neo-back-item a {
    display: block;
    padding: 15px var(--bs-offcanvas-padding-x);
    background: var(--bs-dark);
    color: var(--bs-primary);
    font-weight: bold;
    text-decoration: none;
}

/* Posicionamento dos Submenus */
.neo-mobile-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    /* Joga para fora da tela (à direita) */
    width: 100%;
    height: 100%;
    background: #fff;
    list-style: none;
    padding: 0;
    z-index: 10;
    display: none;
    /* jQuery mostra no clique */
}

/* Classe que o JS vai aplicar para mostrar */
.neo-mobile-submenu.is-active {
    display: block;
}