/* layout.css — header, nav, footer. Compartilhado: so o chat ESTRUTURA edita.
   Header e rodape sao copiados em cada HTML (nao ha include sem build). */

/* ---------- cabecalho ---------- */
.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-block: 1rem;
  transition: background var(--transicao), backdrop-filter var(--transicao),
              border-color var(--transicao), padding var(--transicao);
  border-bottom: 1px solid transparent;
}
.topo--fixo {
  background: rgba(4, 7, 15, .78);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--borda);
  padding-block: .6rem;
}
.topo__interno { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); }

/* a marca e a logo real (MOOBY TECH). Altura fixa, largura automatica. */
.marca { display: inline-flex; align-items: center; }
.marca img {
  height: 44px; width: auto;
  filter: drop-shadow(0 0 16px rgba(47, 125, 255, .45));
  transition: filter var(--transicao), transform var(--transicao);
}
.marca:hover img { filter: drop-shadow(0 0 26px rgba(34, 211, 238, .7)); transform: scale(1.03); }
.topo--fixo .marca img { height: 36px; }
.rodape .marca img { height: 52px; filter: none; opacity: .92; }

@media (max-width: 560px) {
  .marca img, .topo--fixo .marca img { height: 32px; }
}

.nav { display: flex; align-items: center; gap: var(--esp-3); }
.nav__link { color: var(--texto-suave); font-size: .95rem; position: relative; padding: .25rem 0; }
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--azul), var(--ciano));
  transition: width var(--transicao);
}
.nav__link:hover { color: var(--texto); }
.nav__link:hover::after { width: 100%; }

/* item de destaque no menu (Mooby Panel) — pilula com brilho pulsante, pra
   sair do padrao "link de texto" dos outros itens e chamar o olho. */
.nav__link--panel {
  color: var(--ciano);
  font-weight: 600;
  padding: .3rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--ciano);
  background: linear-gradient(90deg, rgba(47, 125, 255, .14), rgba(34, 211, 238, .14));
  animation: pulso-panel 2.6s ease-in-out infinite;
}
.nav__link--panel::after { display: none; }
.nav__link--panel:hover {
  color: var(--fundo);
  background: linear-gradient(90deg, var(--azul), var(--ciano));
}
@keyframes pulso-panel {
  0%, 100% { box-shadow: 0 0 0 rgba(34, 211, 238, 0); }
  50% { box-shadow: var(--brilho-ciano); }
}
@media (prefers-reduced-motion: reduce) {
  .nav__link--panel { animation: none; }
}
@media (max-width: 860px) {
  .nav__link--panel { border-bottom: none; align-self: flex-start; }
}

.menu-btn { display: none; width: 42px; height: 42px; border: 1px solid var(--borda-viva); border-radius: var(--raio-p); position: relative; }
.menu-btn span { position: absolute; left: 11px; width: 18px; height: 2px; background: var(--texto); border-radius: 2px; transition: transform var(--transicao), opacity var(--transicao); }
.menu-btn span:nth-child(1) { top: 14px; }
.menu-btn span:nth-child(2) { top: 20px; }
.menu-btn span:nth-child(3) { top: 26px; }
.menu-btn[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .nav {
    position: absolute; inset: 100% 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(7, 13, 28, .97); backdrop-filter: blur(14px);
    border-block: 1px solid var(--borda);
    padding: var(--esp-2) 1.25rem var(--esp-3);
    clip-path: inset(0 0 100% 0); opacity: 0; pointer-events: none;
    transition: clip-path var(--transicao), opacity var(--transicao);
  }
  .nav[data-aberto="true"] { clip-path: inset(0); opacity: 1; pointer-events: auto; }
  .nav__link { padding: .8rem 0; border-bottom: 1px solid var(--borda); font-size: 1.05rem; }
  .nav .btn { margin-top: var(--esp-2); justify-content: center; }
}

/* ---------- rodape ---------- */
.rodape { border-top: 1px solid var(--borda); background: var(--fundo-2); padding-block: var(--esp-5) var(--esp-3); margin-top: var(--esp-5); }
.rodape__grade { display: grid; gap: var(--esp-4); grid-template-columns: 1.4fr 1fr 1fr; }
.rodape__titulo { font-family: var(--fonte-mono); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texto-fraco); margin-bottom: var(--esp-2); }
.rodape__lista { list-style: none; padding: 0; display: grid; gap: .55rem; }
.rodape__lista a { color: var(--texto-suave); font-size: .95rem; }
.rodape__base { margin-top: var(--esp-4); padding-top: var(--esp-3); border-top: 1px solid var(--borda); display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: space-between; color: var(--texto-fraco); font-size: .85rem; }

@media (max-width: 700px) { .rodape__grade { grid-template-columns: 1fr; } }