html { scroll-behavior: smooth; }
body { background: #0C0C0E; color: #F4F4F5; }

/* Tokens de la app (Tailwind CDN no carga js/tailwind-config de forma fiable) */
.bg-ink { background-color: #0C0C0E; }
.bg-ink-2 { background-color: #12121A; }
.bg-ink\/90 { background-color: rgba(12, 12, 14, 0.9); }
.bg-ink\/50 { background-color: rgba(12, 12, 14, 0.5); }
.bg-ink\/60 { background-color: rgba(12, 12, 14, 0.6); }
.bg-panel { background-color: #16161C; }
.bg-panel-2 { background-color: #1E1E26; }
.border-line { border-color: #2A2A32; }
.text-cream { color: #F4F4F5; }
.text-cream\/90 { color: rgba(244, 244, 245, 0.9); }
.text-mute { color: #A1A1AA; }
.text-amber { color: #E5A832; }
.bg-amber { background-color: #E5A832; }
.text-ink { color: #0C0C0E; }
.text-ok { color: #34D399; }
.text-info { color: #60A5FA; }
.bg-ok { background-color: #34D399; }
.bg-amber\/10 { background-color: rgba(229, 168, 50, 0.1); }
.bg-amber\/15 { background-color: rgba(229, 168, 50, 0.15); }
.bg-amber\/20 { background-color: rgba(229, 168, 50, 0.2); }
.hover\:bg-amber\/90:hover { background-color: rgba(229, 168, 50, 0.9); }
.hover\:border-amber\/40:hover { border-color: rgba(229, 168, 50, 0.4); }
.hover\:text-amber:hover { color: #E5A832; }
.border-amber\/30 { border-color: rgba(229, 168, 50, 0.3); }
.bg-ok\/10 { background-color: rgba(52, 211, 153, 0.1); }
.bg-ok\/15 { background-color: rgba(52, 211, 153, 0.15); }
.bg-info\/10 { background-color: rgba(96, 165, 250, 0.1); }
.bg-info\/15 { background-color: rgba(96, 165, 250, 0.15); }

.fade-in-up {
  animation: fadeInUp 0.7s ease-out both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fade-in-up,
  .float-slow {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}
.float-slow {
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.phone-frame {
  background: linear-gradient(180deg, #1E1E26, #12121A);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px #2A2A32;
}

.grid-dots {
  background-image: radial-gradient(rgba(229, 168, 50, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
}

.amber-ring { box-shadow: 0 0 0 1px rgba(229, 168, 50, 0.35), 0 12px 40px rgba(0, 0, 0, 0.35); }

.logo-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 999px;
  background: #0C0C0E;
  flex-shrink: 0;
}
.logo-geotactics {
  height: 28px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  opacity: 1;
  /* El PNG es gris frío; lo aclaramos para que no se lea azulado sobre el pie. */
  filter: brightness(1.55) grayscale(0.35);
}

footer {
  background-color: #171717;
  color: #B8B8B8;
}
footer a {
  color: #C8C8C8;
}
footer a:hover {
  color: #E5A832;
}

.cookie-bar {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 80;
  max-width: 42rem;
  margin: 0 auto;
  background: #1E1E26;
  border: 1px solid #2A2A32;
  border-radius: 1rem;
  padding: 1rem 1.15rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.45);
}
.cookie-bar p { color: #A1A1AA; font-size: 0.8125rem; line-height: 1.5; }
.cookie-bar a { color: #E5A832; text-decoration: underline; }

nav a.nav-link { color: #A1A1AA; }
nav a.nav-link:hover { color: #F4F4F5; }
nav a.nav-link.is-active { color: #E5A832; }

::selection { background: rgba(229, 168, 50, 0.35); color: #F4F4F5; }