:root {
  --verde: #2e8b57;
  --azul: #1e6091;
}

body,
.site-header,
.hero,
.card,
.contact,
.countdown-screen {
  transition: background-color 0.3s ease, color 0.3s ease;
}

.site-header {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

[data-bs-theme="dark"] .site-header {
  background-color: rgba(15, 23, 42, 0.75);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.logo {
  height: 10rem;
}

.brand {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 2px;
}

.hero {
  min-height: 70vh;
  background: linear-gradient(135deg, var(--azul), var(--verde));
  color: white;
}

[data-bs-theme="dark"] .hero {
  background: linear-gradient(135deg, #020617, #0f172a);
}

@media (max-width: 768px) {
  .hero {
    min-height: 55vh;
  }
}

.accent {
  color: #a7f3d0;
}

.card {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border: none;
}

.contact {
  background-color: rgba(0,0,0,0.04);
}

[data-bs-theme="dark"] .contact {
  background-color: rgba(255,255,255,0.05);
}

.countdown-screen {
  min-height: 100vh;
  background: linear-gradient(135deg, var(--azul), var(--verde));
  color: white;
}

[data-bs-theme="dark"] .countdown-screen {
  background: linear-gradient(135deg, #020617, #0f172a);
}

.countdown {
  letter-spacing: 2px;
}