/* Mavia Labs — página "em breve"
   Identidade: conceito 02 (hexágono laboratório). Paleta do manual da marca:
   petróleo profundo #06303A · azul petróleo #0A3D49 · petróleo vivo #0F6E80 · aço escovado #B5BDC2 → #E6EAED · grafite #4F5A61
   Acento água #60B3C3 (ponto do logo e "labs"). Tipografia: Space Grotesk (títulos) e Inter (texto). */
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --profundo: #06303A; --petroleo: #0A3D49; --vivo: #0F6E80; --agua: #60B3C3; --grafite: #4F5A61;
  --aco-1: #B5BDC2; --aco-2: #E6EAED; --texto: #E6EAED; --texto-2: #A9B8BE;
  --aco: linear-gradient(100deg, #B5BDC2 0%, #E6EAED 30%, #9EA8AE 52%, #E6EAED 74%, #B5BDC2 100%);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--petroleo); color: var(--texto);
  font: 400 17px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* Fundo: degradê petróleo, brilho de aço e malha de hexágonos */
.fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 50% 38%, rgba(15, 110, 128, .38), transparent 70%),
    radial-gradient(40rem 30rem at 85% 110%, rgba(96, 179, 195, .12), transparent 70%),
    linear-gradient(180deg, var(--petroleo) 0%, var(--profundo) 100%); }
.fundo::after { content: ""; position: absolute; inset: 0; background: url("img/hex.svg") center / 56px 97px repeat; opacity: .07;
  -webkit-mask-image: radial-gradient(closest-side at 50% 42%, #000 0%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 42%, #000 0%, transparent 100%); }

/* Topo */
.topo { width: 100%; max-width: 1120px; margin: 0 auto; padding: 28px 24px 0; }
.marca { font-family: "Space Grotesk", sans-serif; font-size: 22px; letter-spacing: -.3px; text-decoration: none; color: var(--aco-2); }
.marca .nome { font-weight: 700; }
.marca .labs { font-weight: 400; color: var(--agua); }
.marca:focus-visible, a:focus-visible { outline: 2px solid var(--agua); outline-offset: 4px; border-radius: 4px; }

/* Conteúdo central */
.palco { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 24px 48px; }
.logo img { display: block; width: 168px; height: auto; border-radius: 28px; box-shadow: 0 30px 80px rgba(2, 20, 26, .55); }
.selo { display: inline-flex; align-items: center; gap: 10px; margin: 36px 0 18px; padding: 7px 16px; border: 1px solid rgba(181, 189, 194, .28); border-radius: 999px;
  font: 600 13px/1 "Space Grotesk", sans-serif; letter-spacing: 2.5px; text-transform: uppercase; color: var(--aco-2); background: rgba(6, 48, 58, .45); }
.ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--agua); box-shadow: 0 0 0 0 rgba(96, 179, 195, .6); animation: pulso 2.4s ease-out infinite; }
h1 { margin: 0; font: 700 clamp(40px, 7.5vw, 76px)/1.04 "Space Grotesk", sans-serif; letter-spacing: -2px; color: var(--aco-2); }
.aco { background: var(--aco); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: brilho 7s ease-in-out infinite; }
.texto { max-width: 34rem; margin: 22px 0 0; color: var(--texto-2); font-size: clamp(16px, 2.2vw, 19px); }
.progresso { width: min(260px, 70vw); height: 3px; margin-top: 40px; border-radius: 3px; background: rgba(181, 189, 194, .16); overflow: hidden; }
.progresso i { display: block; width: 38%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--agua), var(--aco-2)); animation: corre 2.8s ease-in-out infinite; }

/* Rodapé */
.rodape { padding: 0 24px 28px; text-align: center; font-size: 13px; color: rgba(169, 184, 190, .75); }
.rodape p { margin: 0; }

@keyframes pulso { 0% { box-shadow: 0 0 0 0 rgba(96, 179, 195, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(96, 179, 195, 0); } }
@keyframes brilho { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes corre { 0% { transform: translateX(-110%); } 100% { transform: translateX(280%); } }
@media (prefers-reduced-motion: reduce) { .ponto, .aco, .progresso i { animation: none; } .progresso i { width: 100%; } }

@media (max-width: 600px) {
  .topo { padding: 20px 20px 0; }
  .palco { padding: 24px 20px 40px; }
  .logo img { width: 132px; border-radius: 22px; }
  .selo { margin-top: 28px; }
  h1 { letter-spacing: -1.2px; }
  .rodape { padding-bottom: calc(24px + env(safe-area-inset-bottom)); font-size: 12px; }
}

/* Página 404 */
.erro .codigo { font: 700 clamp(64px, 14vw, 120px)/1 "Space Grotesk", sans-serif; letter-spacing: -3px; margin: 0; }
.botao { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; padding: 12px 22px; border-radius: 999px; background: var(--aco); color: var(--profundo);
  font: 700 15px/1 "Space Grotesk", sans-serif; text-decoration: none; }
.botao:hover { filter: brightness(1.06); }