/*
Theme Name: Odyssey - Cinematic Space
Theme URI: https://rui-miranda.com
Author: AI Director & Rui Miranda
Description: Tema cinematografico para WordPress inspirado no espaco e astronautas.
Version: 1.3.0
Text Domain: odyssey
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;700&display=swap');

:root {
  --bg-space: #05070B;
  --bg-surface: #0E131F;
  --bg-surface-glass: rgba(14, 19, 31, 0.85);
  --border-glass: rgba(255, 255, 255, 0.08);
  --accent-gold: #FFB703;
  --accent-cyan: #00E5FF;
  --text-main: #CBD5E1;
  --text-title: #FFFFFF;
  --text-dim: #64748B;
  --font-title: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-hud: 'JetBrains Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background-color: var(--bg-space);
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-title); color: var(--text-title); letter-spacing: -0.02em; line-height: 1.25; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); margin-bottom: 1.2rem; }
p { margin-bottom: 1.2rem; }
a { color: var(--accent-cyan); text-decoration: none; transition: 0.2s color; }
a:hover { color: var(--accent-gold); }

.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.container-narrow { width: 90%; max-width: 860px; margin: 0 auto; }

.hud-tag {
  font-family: var(--font-hud);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 1rem;
}
.hud-tag::before {
  content: ''; width: 6px; height: 6px; background: var(--accent-cyan); border-radius: 50%; box-shadow: 0 0 8px var(--accent-cyan);
}

.glass-card {
  background: var(--bg-surface-glass);
  border: 1px solid var(--border-glass);
  backdrop-filter: blur(12px);
  border-radius: 8px;
  padding: 2.5rem;
  transition: border-color 0.3s, transform 0.3s;
}
.glass-card:hover { border-color: rgba(0, 229, 255, 0.3); }

.btn-cinema {
  display: inline-block; padding: 14px 28px; background: transparent; color: #fff;
  border: 1px solid var(--accent-gold); font-family: var(--font-hud); font-size: 0.9rem;
  text-transform: uppercase; text-decoration: none; letter-spacing: 0.1em; transition: all 0.3s;
}
.btn-cinema:hover { background: var(--accent-gold); color: #000; box-shadow: 0 0 20px rgba(255, 183, 3, 0.4); }

.nav-menu ul { list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; }
.nav-menu a { color: var(--text-main); font-family: var(--font-hud); font-size: 0.85rem; letter-spacing: 0.05em; }
.nav-menu a:hover { color: var(--accent-gold); }

@media (max-width: 768px) {
  .glass-card { padding: 1.5rem; }
  .nav-menu { display: none; }
}