/* Estilos personalizados que complementan Tailwind */
.site-header {
  @apply bg-white shadow-md flex items-center justify-between px-4 py-2;
}
.main-nav ul { @apply flex gap-4 text-sm font-medium; }
.main-nav a { @apply text-gray-700 hover:text-green-700; }
.main-nav .active { @apply text-green-700 font-semibold; }

.hero-slider .slide {
  @apply w-full h-[55vh] bg-cover bg-center relative;
}
.hero-slider .caption {
  @apply absolute bottom-6 left-6 bg-black/50 text-white p-4 rounded;
}

.site-footer {
  @apply grid grid-cols-1 md:grid-cols-4 gap-6 bg-gray-800 text-gray-200 p-8 text-sm;
}
.site-footer h4 { @apply text-white text-base mb-2 font-semibold; }
.site-footer a { @apply hover:text-green-400; }
.social img { @apply w-6 h-6 inline-block; }

.login-page { @apply flex items-center justify-center min-h-screen bg-gray-100; }
.login-box { @apply bg-white shadow-lg p-8 rounded-lg w-full max-w-sm; }
.login-box h1 { @apply text-xl font-bold text-center mb-4; }
.error { @apply text-red-600 mb-3 text-sm; }

body {
      background: linear-gradient(135deg, #1e3c72, #aad6ff);
      margin: 0;
      font-family: 'Inter', sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      color: #fff;
    }

.container {
  max-width: 800px;
  margin: 2em auto;
  padding: 20px;
  background: rgba(255,255,255,0.05);
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  backdrop-filter: blur(10px);
}

h1, h2 {
  text-align: center;
  font-weight: 600;
}

a.button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #fff;
  color: #2d4723;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  margin: 5px;
}

a.button:hover {
  background-color: #f0f0f0;
}

nav {
  background-color: #739f5c;
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  margin-left: 20px;
}