.russo-one-regular {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.kelly-slab-regular {
  font-family: "Kelly Slab", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* <weight>: Use a value from 400 to 900 */
/* <uniquifier>: Use a unique and descriptive class name */
.font-orbitron {
  font-family: "Orbitron", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.font-tektur {
  font-family: "Tektur", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
  color: rgb(251, 239, 12);
}


header {
  background-color: #0b0f14;
  border-color: #1f2937 !important;
}

.logo {
  font-family: "Russo One", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.logo a {
  color: #e6edf3 !important;
}
.nav-actions a {
  font-family: "Orbitron", sans-serif;
  font-style: normal;
  color: #d2c63d  !important;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.15s ease, opacity 0.15s ease;
}

footer {
  background-color: #0b0f14;
  border-top: 1px solid #1f2937 !important;
  color: #9aa4af;
}

footer a {
  color: #9aa4af;
  transition: color 0.2s ease, opacity 0.2s ease;
}

footer a:hover {
  color: #c4a64f; /* dorado elegante */
  opacity: 0.9;
}

footer .link-primary {
  color: #3b82f6 !important; /* azul de marca */
}

footer .link-primary:hover {
  color: #60a5fa !important;
}

footer .link-secondary {
  color: #9aa4af !important;
}

footer .link-secondary:hover {
  color: #c4a64f !important;
}


/* Base hero */
.hero {
  min-height: 80vh;
  display: flex; align-items: center; justify-content: center;
  color: #e6edf3; text-align: center;
}

/* Capa de fondo con imagen + overlay oscuro + animación sutil */
.hero.hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,15,20,.75) 0%, rgba(11,15,20,.55) 40%, rgba(17,24,39,.85) 100%),
    url('/images/hero-bg.webp') center/cover no-repeat;
  z-index: 0;
  will-change: transform, opacity;
  transform: scale(1.02); /* pequeño zoom inicial */
  opacity: 0.95;
  animation: heroZoom 22s ease-in-out infinite alternate;
  /* iOS fallback para menor banding */
  -webkit-backface-visibility: hidden;
}

/* Sutil “glow” cromático encima del fondo para look premium */
.hero.hero-bg::after {
  content: "";
  position: absolute; inset: -10%;
  background:
    radial-gradient(40% 30% at 20% 20%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(35% 25% at 80% 25%, rgba(196,166,79,.10), transparent 60%),
    radial-gradient(50% 35% at 50% 90%, rgba(99,102,241,.08), transparent 60%);
  filter: blur(6px) saturate(120%);
  z-index: 0;
  animation: heroFloat 18s ease-in-out infinite alternate;
}

/* Contenido por encima de las capas */
.hero .container { position: relative; z-index: 1; }

/* Logo: tamaño y sutil sombra en dark */
.hero-logo {
  width: 180px; max-width: 60%;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.08));
  user-select: none;
}
.login-logo {
  width: 50px; max-width: 60%;
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.08));
  user-select: none;
}

/* Animaciones */
@keyframes heroZoom {
  0%   { transform: scale(1.02); }
  100% { transform: scale(1.06); }
}
@keyframes heroFloat {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0,-12px,0) scale(1.03); }
}

/* Respeto a usuarios con “reduce motion” */
@media (prefers-reduced-motion: reduce) {
  .hero.hero-bg::before,
  .hero.hero-bg::after { animation: none; transform: none; }
}

/* Ajustes móviles (suaviza el glow y prioriza legibilidad) */
@media (max-width: 576px) {
  .hero.hero-bg::after { opacity: .85; filter: blur(8px); }
  .hero-logo { width: 150px; }
}