/* ============================================
   NAVMOTO — CSS Global
   Tema: Corporate Light — Azul & Branco
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --azul-escuro:    #0F2147;
  --azul-medio:     #1A3A6E;
  --azul-claro:     #2563EB;
  --azul-suave:     #EFF4FF;
  --azul-borda:     #DBEAFE;

  --laranja:        #E8620A;
  --laranja-claro:  #FF7A2E;

  --bg-principal:   #FFFFFF;
  --bg-suave:       #F8FAFC;
  --bg-card:        #FFFFFF;

  --cor-texto:       #0F172A;
  --cor-texto-medio: #334155;
  --cor-texto-suave: #64748B;
  --cor-texto-claro: #94A3B8;

  --cor-borda:       #E2E8F0;
  --cor-borda-forte: #CBD5E1;

  --cor-sucesso:    #10B981;
  --cor-erro:       #EF4444;
  --cor-aviso:      #F59E0B;

  /* Compatibilidade com ficheiros antigos */
  --cor-laranja:        #E8620A;
  --cor-laranja-glow:   rgba(232,98,10,0.12);
  --cor-laranja-escuro: #C2510A;
  --cor-laranja-claro:  #FF7A2E;
  --bg-card-hover:      #F8FAFC;
  --bg-input:           #F8FAFC;
  --bg-surface:         #F1F5F9;
  --cor-borda-forte:    #CBD5E1;

  --sombra-sm:  0 1px 3px rgba(15,33,71,0.08), 0 1px 2px rgba(15,33,71,0.05);
  --sombra:     0 4px 16px rgba(15,33,71,0.10), 0 2px 6px rgba(15,33,71,0.06);
  --sombra-lg:  0 12px 40px rgba(15,33,71,0.13), 0 4px 16px rgba(15,33,71,0.07);
  --sombra-azul: 0 8px 28px rgba(37,99,235,0.22);

  --raio:    8px;
  --raio-lg: 14px;
  --raio-xl: 20px;

  --transicao:        all 0.22s cubic-bezier(0.4,0,0.2,1);
  --transicao-rapida: all 0.14s cubic-bezier(0.4,0,0.2,1);
  --transicao-lenta:  all 0.4s  cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background-color: var(--bg-principal);
  color: var(--cor-texto);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--cor-texto);
}
h1 { font-size: clamp(1.9rem, 4.5vw, 3.2rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.2rem); }
h3 { font-size: 1.05rem; font-weight: 700; }
h4 { font-size: 0.9rem; font-weight: 600; }
p  { color: var(--cor-texto-suave); font-size: 0.92rem; }

a { color: var(--azul-claro); text-decoration: none; transition: var(--transicao-rapida); }
a:hover { color: var(--azul-medio); }

/* --- Navbar --- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: #ffffff;
  border-bottom: 1px solid var(--cor-borda);
  box-shadow: 0 1px 8px rgba(15,33,71,0.08);
}

.navbar-logo {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--azul-escuro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 9px;
}
.navbar-logo::before { display: none; }
.navbar-logo span { color: var(--azul-claro); }
.navbar-logo:hover { opacity: 0.85; color: var(--azul-escuro); }

.navbar-links { display: flex; align-items: center; gap: 4px; list-style: none; }

.navbar-links a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 20px;
  color: var(--cor-texto-suave);
  font-size: 0.84rem;
  font-weight: 500;
  transition: var(--transicao);
}
.navbar-links a:hover { color: var(--azul-claro); background: var(--azul-suave); }
.navbar-links a.ativo  { color: var(--azul-claro); background: var(--azul-suave); }

.navbar-links .btn-entrar {
  background: var(--azul-claro);
  color: #fff !important;
  padding: 7px 20px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.84rem;
  margin-left: 8px;
  transition: var(--transicao);
}
.navbar-links .btn-entrar:hover {
  background: var(--azul-medio);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(37,99,235,0.35);
}
.navbar-links .btn-entrar:active { transform: translateY(0); }

.pagina { padding-top: 64px; min-height: 100vh; }

/* --- Botões --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 24px;
  border-radius: var(--raio);
  font-family: 'Inter', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: var(--transicao);
  text-decoration: none;
  letter-spacing: 0.01em;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.btn:active { transform: scale(0.975) !important; }

.btn-primario {
  background: var(--azul-claro);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.22);
}
.btn-primario:hover {
  background: #1D4ED8;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,99,235,0.32);
}

.btn-secundario {
  background: #fff;
  color: var(--cor-texto-medio);
  border: 1px solid var(--cor-borda-forte);
  box-shadow: var(--sombra-sm);
}
.btn-secundario:hover {
  border-color: var(--azul-claro);
  color: var(--azul-claro);
  background: var(--azul-suave);
  transform: translateY(-1px);
}

.btn-laranja {
  background: var(--laranja);
  color: #fff;
  box-shadow: 0 2px 10px rgba(232,98,10,0.22);
}
.btn-laranja:hover {
  background: var(--laranja-claro);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232,98,10,0.32);
}

.btn-ghost {
  background: rgba(255,255,255,0.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.btn-ghost:hover { background: rgba(255,255,255,0.22); color: #fff; }

.btn-perigo {
  background: rgba(239,68,68,0.08);
  color: var(--cor-erro);
  border: 1px solid rgba(239,68,68,0.2);
}
.btn-perigo:hover { background: var(--cor-erro); color: #fff; border-color: var(--cor-erro); }

.btn:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* --- Cards --- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg);
  padding: 22px;
  transition: var(--transicao);
  box-shadow: var(--sombra-sm);
}
.card:hover {
  border-color: #BFDBFE;
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

/* --- Formulários --- */
.campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }

.campo label {
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--cor-texto-medio);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.campo input,
.campo textarea,
.campo select {
  background: var(--bg-suave);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  color: var(--cor-texto);
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  padding: 10px 14px;
  transition: var(--transicao);
  width: 100%;
  outline: none;
}
.campo input:focus,
.campo textarea:focus,
.campo select:focus {
  border-color: var(--azul-claro);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
  background: #fff;
}
.campo input::placeholder { color: var(--cor-texto-claro); }

/* --- Mensagens --- */
.mensagem {
  padding: 11px 14px;
  border-radius: var(--raio);
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 14px;
  display: none;
  animation: slideDown 0.2s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mensagem.visivel { display: block; }
.mensagem.sucesso { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.25); color: #065F46; }
.mensagem.erro    { background: rgba(239,68,68,0.08);  border: 1px solid rgba(239,68,68,0.25);  color: #991B1B; }

/* --- Badges --- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 20px;
  font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.badge-azul    { background: var(--azul-suave); color: var(--azul-claro); border: 1px solid var(--azul-borda); }
.badge-laranja { background: rgba(232,98,10,0.08); color: var(--laranja); border: 1px solid rgba(232,98,10,0.2); }
.badge-verde   { background: rgba(16,185,129,0.08); color: var(--cor-sucesso); border: 1px solid rgba(16,185,129,0.2); }
.badge-cinza   { background: var(--bg-suave); color: var(--cor-texto-suave); border: 1px solid var(--cor-borda); }

/* Compatibilidade */
.badge-verde { background: rgba(16,185,129,0.08); }

/* --- Grids --- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

.container { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

.divisor { width: 36px; height: 3px; background: var(--azul-claro); border-radius: 2px; margin: 10px 0 22px; }

.spinner {
  width: 30px; height: 30px;
  border: 2px solid var(--cor-borda);
  border-top-color: var(--azul-claro);
  border-radius: 50%;
  animation: girar 0.65s linear infinite;
  margin: 40px auto;
}
@keyframes girar { to { transform: rotate(360deg); } }

.carregando {
  display: none; position: fixed; inset: 0;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  z-index: 9999;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 14px;
}
.carregando.visivel { display: flex; }
.carregando p { color: var(--cor-texto-suave); font-size: 0.84rem; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-up { animation: fadeUp 0.4s cubic-bezier(0.4,0,0.2,1) both; }
.fade-in { animation: fadeIn 0.3s ease both; }
.delay-1 { animation-delay: 0.06s; }
.delay-2 { animation-delay: 0.12s; }
.delay-3 { animation-delay: 0.18s; }
.delay-4 { animation-delay: 0.24s; }

::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-suave); }
::-webkit-scrollbar-thumb { background: var(--cor-borda-forte); border-radius: 3px; }
::selection { background: rgba(37,99,235,0.14); color: var(--azul-escuro); }

@media (max-width: 768px) {
  .navbar-links { display: none; }

  .navbar-mobile {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: #ffffff;
    border-top: 1px solid var(--cor-borda);
    box-shadow: 0 -2px 12px rgba(15,33,71,0.08);
    display: flex; z-index: 1000;
    padding: 6px 0 env(safe-area-inset-bottom, 12px);
  }
  .navbar-mobile a {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    color: var(--cor-texto-claro);
    font-size: 0.7rem; font-weight: 600;
    padding: 8px 4px;
    min-height: 56px;
    justify-content: center;
    transition: var(--transicao);
    -webkit-tap-highlight-color: transparent;
  }
  .navbar-mobile a.ativo,
  .navbar-mobile a:hover { color: var(--azul-claro); }
  .navbar-mobile .icone { font-size: 1.4rem; }

  .btn {
    padding: 13px 20px;
    font-size: 0.95rem;
    min-height: 48px;
  }

  .campo input,
  .campo textarea,
  .campo select {
    font-size: 1rem;
    padding: 13px 14px;
    min-height: 48px;
  }

  .pagina { padding-bottom: 80px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .card { padding: 18px; }
}
@media (min-width: 769px) { .navbar-mobile { display: none; } }