/* Fondo hero con imagen de la plaza UNPRG (mejorado) */
.hero {
  position: relative;
  background: url('../img/plaza-unprg.jpg') center center/cover no-repeat;
  color: #fff;
  padding: 5rem 0 4rem 0;
  border-radius: calc(var(--border-radius-lg) * 1.1);
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(37,99,235,0.75), rgba(16,185,129,0.75));
  z-index: 1;
  backdrop-filter: blur(4px);
}

.hero .container {
  position: relative;
  z-index: 2;
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
  text-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.hero p {
  position: relative;
  z-index: 2;
  color: var(--hero-text);
  font-size: 1.15rem;
  max-width: 820px;
  margin: 0 auto 1.5rem;
}

.hero .hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero .btn-primary {
  padding: 1rem 1.6rem;
  font-size: 1.05rem;
  border-radius: 999px;
}

.hero .btn-secondary {
  padding: 0.9rem 1.4rem;
  font-size: 1rem;
  border-radius: 999px;
}

@media (max-width: 700px) {
  .hero { padding: 3rem 1rem; }
  .hero h1 { font-size: 2rem; }
  .hero p { font-size: 1rem; }
}

/* Hero button contrast improvements */
.hero .btn-outline { /* for any remaining outline variants */
  background: var(--hero-outline-bg);
  color: var(--hero-text);
  border: 1px solid var(--hero-outline-border);
  box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}
.hero .btn-outline:hover { background: var(--hero-outline-hover); }
.hero .btn-outline:hover { background: var(--hero-outline-hover); }

.hero .btn-warning {
  background: linear-gradient(90deg, #ff6b6b, #ff8787);
  color: #fff;
  box-shadow: 0 12px 36px rgba(255,107,107,0.14);
}
.hero .btn-warning i { color: var(--hero-text); }

.hero .btn-secondary {
  background: linear-gradient(90deg, var(--secondary-color), var(--secondary-dark));
  color: #fff;
  box-shadow: 0 12px 36px rgba(16,185,129,0.12);
}
.hero .btn-secondary i { color: var(--hero-text); }

/* Slight spacing tweak for hero CTA group */
.hero .hero-buttons { gap: 1.25rem; }

/* Dark theme hero adjustments: darker, less saturated overlay and softer button shadows */
:root[data-theme="dark"] .hero::before {
  background: linear-gradient(135deg, rgba(17,46,103,0.68), rgba(6,100,74,0.62));
  backdrop-filter: blur(6px);
}
:root[data-theme="dark"] .hero { box-shadow: 0 12px 40px rgba(0,0,0,0.28); }
:root[data-theme="dark"] .hero .btn-secondary { box-shadow: 0 10px 28px rgba(6,100,74,0.08); }
:root[data-theme="dark"] .hero .btn-primary { box-shadow: 0 10px 28px rgba(24,58,120,0.08); }