html,body{font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: #222}


/* Navbar fixo */
.navbar{position:fixed; top:0; left:0; right:0; z-index:1000; backdrop-filter:saturate(180%) blur(6px); background:rgba(255,255,255,.92); box-shadow:0 2px 10px rgba(0,0,0,.06)}
.navbar a{font-weight:600}

.menu-cta{background:#222222; color:#fff!important}
.menu-cta:hover{background:#000000!important}

/* Espaçamento para compensar a navbar fixa */
main{scroll-behavior:smooth}
section{scroll-margin-top:96px}
.hero{margin-top:72px}


/* Cards de soluções */
.card:hover{transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,.08)}
.card{transition:.25s ease; border-radius:14px; overflow:hidden}
.card img{height:160px; object-fit:cover}
.tag{display:inline-block; padding:4px 10px; background:#eef2ff; color:#222222; border-radius:999px; font-size:12px; font-weight:600}

/* Forçar colunas das soluções a ter altura igual */
#solutions .w3-row-padding {
  display: flex;
  flex-wrap: wrap;
}

/* Cada coluna ocupa o mesmo espaço vertical */
#solutions .w3-col {
  display: flex;
}

/* O card expande-se para preencher a coluna */
#solutions .w3-card {
  display: flex;
  flex-direction: column;
  flex: 1;
}


/* Botão voltar ao topo */
#toTop{position:fixed; right:18px; bottom:88px; z-index:1100; display:none}


/* Menu link */
.menu-link {
    position: relative;
    padding-bottom: 6px;
    text-decoration: none;
    transition: color 0.3s;
}

.menu-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 0%;
    height: 2px;
    background-color: #000000; 
    transition: width 0.3s ease-in-out;
}

.menu-link:hover::after {
    width: 100%;
}

.menu-link.menu-active::after {
    width: 100%;
}

.menu-link.menu-active {
    color: #000000 !important;
}


/* Efeito de scroll contínuo dos logótipos */
@keyframes scrollClients {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Força o menu dropdown a ficar acima de todos os outros elementos */
#menu_drop {
  position: absolute !important;
  right: 0;
  left: auto;
  z-index: 9999 !important;
}


/* Imagem de topo */
.hero-container {
    position: relative;
    width: 100%;
    height: 600px; /* desktop */
    overflow: hidden;
}

.hero-container img {
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
}

/* Para ecrãs pequenos */
@media screen and (max-width: 600px) {
    .hero-container {
        height: 420px; /* reduz a altura do container */
    }

    .hero-container img {
        height: 100%; /* cobre todo o container reduzido */
    }
}