/* ============================================================
   ATOMOS — Portal (atomos.br)
   Mesma identidade visual da Central de Equipamentos
   (tokens copiados do style.css da Central)
   ============================================================ */
:root {
  --ce-azul: #1565a8;
  --ce-azul-escuro: #0b3d64;
  --ce-claro: #f6f8fb;
  --ce-verde: #2e7d32;
  --ce-success: #2e7d32;
  --ce-info:    #1565c0;
  --ce-warning: #ef6c00;
  --ce-danger:  #c62828;
  --ce-roxo:    #6a1b9a;
  --ce-texto:       #1f2937;
  --ce-texto-suave: #66788a;
  --ce-borda:       #dde3ea;
  --ce-radius-card: .75rem;
  --ce-sombra-card: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --ce-sombra-hover: 0 10px 22px rgba(16,24,40,.14);
}

body {
  font-family: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--ce-claro);
  color: var(--ce-texto);
}

/* ============ NAVBAR ============ */
.atomos-nav {
  background: var(--ce-azul-escuro);
  box-shadow: 0 2px 10px rgba(11, 61, 100, .35);
}
.atomos-nav .brand-nome {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: #fff;
}
/* Logo é monocromo #111 — na navbar azul vira branco */
.atomos-nav .logo-atomos { filter: invert(1); }
.atomos-nav .btn-navbar {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  font-weight: 600;
}
.atomos-nav .btn-navbar:hover {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* ============ HERO ============ */
.hero {
  background: linear-gradient(135deg, var(--ce-azul-escuro) 0%, var(--ce-azul) 78%, #1e7ac4 100%);
  color: #fff;
  overflow: hidden;
}
.hero-titulo {
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -.5px;
}
.hero-titulo span { color: #8ec9ff; }
.hero-texto {
  font-size: 1.08rem;
  max-width: 34rem;
  color: rgba(255, 255, 255, .88);
}
.hero .btn-hero {
  background: #fff;
  color: var(--ce-azul-escuro);
  font-weight: 700;
}
.hero .btn-hero:hover { background: #e3f0fb; color: var(--ce-azul-escuro); }
.btn-hero-ghost {
  border: 1px solid rgba(255, 255, 255, .45);
  color: #fff;
  font-weight: 600;
}
.btn-hero-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hero-selo {
  display: inline-block;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  color: #dbeeff;
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  margin-bottom: 1.1rem;
}
/* ---- Atomo animado (nucleo + eletrons) ---- */
.orbita {
  position: relative;
  width: 300px;
  height: 300px;
}
.orbita .anel {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
}
.orbita .anel-2 { transform: scale(.68) rotate(30deg); border-style: dashed; }
.orbita .anel-3 { transform: scale(.4); }
.orbita .nucleo {
  position: absolute;
  top: 50%; left: 50%;
  width: 66px; height: 66px;
  margin: -33px 0 0 -33px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #9fd4ff, #1565a8 62%, #0b3d64);
  box-shadow: 0 0 40px rgba(142, 201, 255, .8);
}
.eletron {
  position: absolute;
  inset: 0;
  animation: girar 14s linear infinite;
}
.eletron::before {
  content: '';
  position: absolute;
  top: -7px; left: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: #8ec9ff;
  box-shadow: 0 0 14px rgba(142, 201, 255, .95);
}
.eletron.e2 { animation-duration: 19s; animation-direction: reverse; }
.eletron.e2::before { background: #7fe0b0; box-shadow: 0 0 14px rgba(127, 224, 176, .95); }
.eletron.e3 { animation-duration: 11s; }
.eletron.e3::before { background: #d9a6ff; box-shadow: 0 0 14px rgba(217, 166, 255, .95); }
@keyframes girar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .eletron { animation: none; }
}

/* ============ SEÇÃO DE MÓDULOS ============ */
.secao-titulo { font-weight: 700; }
.modulo-card {
  border: 1px solid var(--ce-borda);
  border-radius: var(--ce-radius-card);
  box-shadow: var(--ce-sombra-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.modulo-card:hover { transform: translateY(-4px); box-shadow: var(--ce-sombra-hover); }
.modulo-nome { font-size: 1.12rem; font-weight: 700; margin-bottom: .2rem; }
.modulo-dominio {
  color: var(--ce-texto-suave);
  font-size: .84rem;
  font-weight: 600;
  margin-bottom: .6rem;
}
.modulo-desc { color: var(--ce-texto-suave); font-size: .92rem; }

.modulo-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  font-size: 1.3rem;
  color: #fff;
}
.modulo-icone-azul  { background: var(--ce-azul); }
.modulo-icone-verde { background: var(--ce-verde); }
.modulo-icone-roxo  { background: var(--ce-roxo); }
.modulo-icone-neutro { background: var(--ce-texto-suave); border: 2px dashed var(--ce-borda); }

.selo {
  font-size: .74rem;
  font-weight: 700;
  padding: .28rem .65rem;
  border-radius: 999px;
}
.selo-on    { background: rgba(46, 125, 50, .12); color: var(--ce-success); border: 1px solid rgba(46, 125, 50, .35); }
.selo-breve { background: rgba(69, 90, 100, .1);  color: #455a64;         border: 1px solid rgba(69, 90, 100, .3); }

.btn-acessar {
  border: 1px solid var(--ce-azul);
  color: var(--ce-azul);
  font-weight: 600;
}
.btn-acessar:hover:not(:disabled) { background: var(--ce-azul); color: #fff; }
.btn-acessar:disabled { border-color: var(--ce-borda); color: var(--ce-texto-suave); }

.modulo-breve { opacity: .92; }
.modulo-breve .modulo-icone { opacity: .55; }

.modulo-novo {
  border: 2px dashed var(--ce-borda);
  background: transparent;
  box-shadow: none;
}
.modulo-novo:hover { transform: none; box-shadow: var(--ce-sombra-card); }

/* ============ RODAPÉ ============ */
.atomos-footer {
  border-top: 1px solid var(--ce-borda);
  background: #fff;
  color: var(--ce-texto-suave);
  font-size: .88rem;
  padding: 1.1rem 0;
  margin-top: 2rem;
}