:root {
  --eterna: #1e3a8a;
  --eterna-dark: #0f172a;
  --eterna-accent: #f59e0b;
  --eterna-gray: #f8fafc;
  --eterna-light: #e2e8f0;
}

body {
  font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  padding-top: 76px;
  color: #334155;
}

.letter-spacing {
  letter-spacing: 0.15em;
  font-size: 0.65rem;
}

.brand-logo {
  width: 52px;
  height: 52px;
  object-fit: cover;
  background: #fff;
}

.navbar-brand span {
  font-weight: 800 !important;
}

.navbar-brand span:first-child {
  font-size: 1.2rem;
}

.navbar-brand small {
  font-size: 0.7rem;
  font-weight: 700;
}

.navbar-transparent {
  background: transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

.navbar-scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.navbar-scrolled .nav-link,
.navbar-scrolled .navbar-brand {
  color: #0f172a !important;
}

.btn-eterna {
  background-color: var(--eterna-accent);
  border-color: var(--eterna-accent);
  color: #0f172a;
  font-weight: 600;
}

.btn-eterna:hover {
  background-color: #d97706;
  border-color: #d97706;
  color: #fff;
}

.btn-outline-eterna {
  border-color: var(--eterna-accent);
  color: var(--eterna-accent);
  font-weight: 600;
}

.btn-outline-eterna:hover {
  background-color: var(--eterna-accent);
  color: #0f172a;
}

.hero {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.9)), url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat;
  color: #fff;
}

.hero h1 {
  font-weight: 800;
  line-height: 1.15;
}

.hero p {
  color: rgba(255, 255, 255, 0.85);
}

.section-heading {
  font-weight: 800;
  color: var(--eterna-dark);
}

.section-subtitle {
  color: #64748b;
  max-width: 600px;
}

.badge-eterna {
  background-color: rgba(30, 58, 138, 0.1);
  color: var(--eterna);
  font-weight: 600;
  letter-spacing: 0.05em;
}

.icon-box {
  width: 64px;
  height: 64px;
  border-radius: 1rem;
  background-color: rgba(30, 58, 138, 0.08);
  color: var(--eterna);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  transition: all 0.3s ease;
}

.card-hover:hover .icon-box {
  background-color: var(--eterna);
  color: #fff;
}

.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}

.bg-eterna-dark {
  background-color: var(--eterna-dark);
}

.bg-eterna-gray {
  background-color: var(--eterna-gray);
}

.text-eterna {
  color: var(--eterna);
}

.text-eterna-accent {
  color: var(--eterna-accent);
}

.stat-card {
  border-left: 4px solid var(--eterna-accent);
}

.form-section {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}

.footer {
  background-color: var(--eterna-dark);
}

.footer-links a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 0.35rem;
}

.footer-links a:hover {
  color: var(--eterna-accent);
}

.whatsapp-float {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background-color: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 1030;
  text-decoration: none;
}

.whatsapp-float:hover {
  color: #fff;
  background-color: #1ebd59;
}

/* Admin dashboard */
.admin-body {
  padding-top: 0;
}

.admin-sidebar {
  min-height: 100vh;
  background-color: var(--eterna-dark);
  color: #fff;
  width: 260px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}

.admin-sidebar a {
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.5rem;
  margin: 0.25rem 0.75rem;
}

.admin-sidebar a:hover,
.admin-sidebar a.active {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.admin-main {
  margin-left: 260px;
  min-height: 100vh;
  background-color: var(--eterna-gray);
}

.stat-tile {
  border-radius: 1rem;
  border: none;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.table-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

@media (max-width: 991.98px) {
  .admin-sidebar {
    position: relative;
    width: 100%;
    min-height: auto;
  }
  .admin-main {
    margin-left: 0;
  }
}