/* assets/css/styles.css */

/* Colores base */
:root {
  --oktania-bg-dark: #020617;   /* Muy oscuro, casi negro */
  --oktania-dark: #111827;      /* Fondo secciones */
  --oktania-primary: #facc15;   /* Amarillo */
  --oktania-light: #ffffff;
  --oktania-muted: #6b7280;
}

/* Layout general */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: var(--oktania-bg-dark);
  color: var(--oktania-light);
  padding-top: 72px; /* compensar navbar fixed */
}

/* Hero animado */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  color: var(--oktania-light);
  overflow: hidden;
}

.hero-animated-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 0%, #facc15 0, transparent 60%),
              radial-gradient(circle at 100% 0%, #4f46e5 0, transparent 60%),
              radial-gradient(circle at 0% 100%, #22c55e 0, transparent 60%),
              radial-gradient(circle at 100% 100%, #ec4899 0, transparent 60%);
  opacity: 0.18;
  animation: gradientMove 18s ease-in-out infinite alternate;
}

@keyframes gradientMove {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(-2%, -2%, 0) scale(1.05);
  }
  100% {
    transform: translate3d(3%, 3%, 0) scale(1.08);
  }
}

.hero-content {
  position: relative;
  z-index: 1;
}

/* Tarjetas */
.card-custom {
  background-color: #020617;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 1rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-custom:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45);
  border-color: var(--oktania-primary);
}

/* Secciones */
.section-dark {
  background-color: var(--oktania-dark);
}

.section-darker {
  background-color: var(--oktania-bg-dark);
}

.section-padding {
  padding: 4rem 0;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.section-subtitle {
  color: var(--oktania-muted);
  margin-bottom: 2rem;
}

/* Botones */
.btn-oktania-primary {
  background-color: var(--oktania-primary);
  color: #1f2933;
  border-radius: 999px;
  border: none;
  padding-inline: 1.8rem;
  font-weight: 600;
}

.btn-oktania-primary:hover {
  background-color: #eab308;
  color: #020617;
}

/* Links */
a {
  color: var(--oktania-primary);
}

a:hover {
  color: #eab308;
}

/* Footer */
.footer {
  border-top: 1px solid rgba(148, 163, 184, 0.3);
}

/* Listas de ventajas */
.icon-bullet {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(250, 204, 21, 0.08);
  color: var(--oktania-primary);
  margin-right: 0.5rem;
}

/* Formularios */
.form-control,
.form-select {
  background-color: #020617;
  border-color: rgba(148, 163, 184, 0.4);
  color: var(--oktania-light);
}

.form-control:focus,
.form-select:focus {
  background-color: #020617;
  border-color: var(--oktania-primary);
  color: var(--oktania-light);
  box-shadow: 0 0 0 0.25rem rgba(250, 204, 21, 0.15);
}

.form-control::placeholder {
  color: #6b7280;
}

/* Estados de navegación */
.navbar.navbar-dark {
  background-color: rgba(15, 23, 42, 0.95) !important;
  backdrop-filter: blur(12px);
}

.nav-link.active {
  color: var(--oktania-primary) !important;
}

/* Responsive */
@media (max-width: 767.98px) {
  .hero {
    min-height: 70vh;
  }
}

.card-custom h2,
.card-custom h3,
.card-custom h4 {
  color: var(--oktania-primary) !important;
}

.card-custom p,
.card-custom li,
.card-custom .text-secondary {
    color: #d1d5db !important;  /* Gris claro */
}

/* Labels */
.form-label {
    color: #d1d5db !important;
}

/* Texto dentro de inputs/select */
.form-control,
.form-select {
    color: #ffffff !important; /* texto escrito */
}

/* Placeholder más claro */
.form-control::placeholder,
.form-select::placeholder {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Texto secundario debajo del formulario */
.card-custom p.small,
.card-custom .text-secondary {
    color: #d1d5db !important;
}