:root {
  --green-light: #a4ff33;
  --green-strong: #00a53a;
  --green-dark: #00581f;
  --cream: #f7fbea;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.loader-bg {
  background: radial-gradient(circle at top, var(--cream) 0, #d9ffd2 35%, var(--green-light) 70%, var(--green-strong) 100%);
  padding: 2rem 1rem;
}

/* Contenedor principal del loader */
.loader-wrapper {
  position: relative;
  width: 190px;
  height: 190px;
}

/* Aro exterior animado */
.loader-ring {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid rgba(255,255,255,0.25);
  border-top-color: var(--green-dark);
  border-right-color: var(--green-light);
  border-bottom-color: var(--green-strong);
  border-left-color: rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 15s linear infinite; /* más lento */
  box-shadow: 0 0 25px rgba(0,0,0,0.25);
  background: radial-gradient(circle, #ffffff 0, #e7ffe4 60%, #c6ffb7 100%);
}

/* Círculo interno con el logo */
.loader-inner {
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.logo-img {
  max-width: 85%;
  height: auto;
}

/* Halo luminoso inferior */
.loader-glow {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 120px;
  height: 18px;
  background: radial-gradient(circle, rgba(0,0,0,0.35) 0, rgba(0,0,0,0) 65%);
  opacity: 0.8;
  filter: blur(1px);
  animation: glowPulse 1.8s ease-in-out infinite;
}

/* Textos */
.text-container {
  max-width: 360px;
}

.loader-main-text {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--green-dark);
}

.loader-sub-text {
  font-size: 0.97rem;
  color: var(--green-dark);
  opacity: 0.9;
}

/* Animaciones */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes glowPulse {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.7; }
  50%      { transform: translateX(-50%) scaleX(1.15); opacity: 1; }
}

/* Responsivo */
@media (max-width: 576px) {
  .loader-wrapper {
    width: 160px;
    height: 160px;
  }
  .loader-inner {
    width: 120px;
    height: 120px;
  }
}