/* ==========================================================================
   Plani Finanzas — Ruleta de descuento (popup)
   Cargado en TODAS las páginas (como nav/footer), no solo en el home.
   Los colores de los gajos de la ruleta son fijos (marca), no cambian con
   el tema oscuro — igual que el resto de tarjetas decorativas del sitio.
   ========================================================================== */

.spin-wheel-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 17, 23, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.spin-wheel-overlay.is-open { opacity: 1; }
.spin-wheel-overlay[hidden] { display: none; }

.spin-wheel-modal {
  position: relative;
  background: var(--white);
  border-radius: 24px;
  padding: 1.75rem 1.5rem 2rem;
  width: 100%;
  max-width: 360px;
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  transform: translateY(12px) scale(0.97);
  transition: transform 0.25s ease, max-width 0.25s ease;
}

/* Una vez que ganó, en pantallas con suficiente ancho el modal pasa a
   horizontal (rueda a un lado, premio al otro) para que quepa completo
   sin necesidad de scroll ni pantallas muy altas. En pantallas angostas
   se mantiene apilado (el scroll de arriba sigue siendo la red de
   seguridad ahí). */
.spin-wheel-modal.has-result .spin-wheel-intro { display: none; }

@media (min-width: 640px) {
  .spin-wheel-modal.has-result { max-width: 640px; }
  .spin-wheel-modal.has-result .spin-wheel-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    text-align: left;
  }
  .spin-wheel-modal.has-result .spin-wheel-stage { flex-shrink: 0; margin: 0; }
  .spin-wheel-modal.has-result .spin-wheel-result { margin-top: 0; }
}

.spin-wheel-overlay.is-open .spin-wheel-modal {
  transform: translateY(0) scale(1);
}

.spin-wheel-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.spin-wheel-close:hover { background: var(--gray-200); color: var(--gray-900); }

.spin-wheel-intro h3 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}

.spin-wheel-intro p {
  color: var(--gray-500);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

/* STAGE */
.spin-wheel-stage {
  position: relative;
  width: 260px;
  height: 260px;
  margin: 0 auto;
}

.spin-wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid var(--gray-900);
  z-index: 3;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
}

.spin-wheel-svg {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 0 6px var(--white), 0 0 0 8px var(--gray-200), 0 12px 32px rgba(0, 0, 0, 0.18);
  transition: transform 4.5s cubic-bezier(0.16, 0.85, 0.15, 1);
}

@media (prefers-reduced-motion: reduce) {
  .spin-wheel-svg { transition-duration: 0.6s; }
}

.spin-wheel-segment-label { font-family: 'Inter', sans-serif; fill: white; text-anchor: middle; }
.spin-wheel-segment-label-main { font-weight: 800; font-size: 17px; }
.spin-wheel-segment-label-sub { font-weight: 600; font-size: 9px; opacity: 0.9; }

.spin-wheel-spin-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid var(--white);
  background: var(--green-dark);
  color: white;
  font-weight: 800;
  font-size: 0.8rem;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 6px 16px rgba(26, 122, 74, 0.4);
  transition: transform 0.15s, background 0.2s;
}
.spin-wheel-spin-btn:hover:not(:disabled) { background: var(--green-mid); transform: translate(-50%, -50%) scale(1.05); }
.spin-wheel-spin-btn:disabled { cursor: default; opacity: 0.85; }

/* RESULT */
.spin-wheel-result { margin-top: 1.5rem; }

.spin-wheel-result-label {
  display: inline-block;
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 0.6rem;
}

.spin-wheel-prize-intro {
  color: var(--gray-500);
  font-size: 0.85rem;
  margin-bottom: 0.15rem;
}

.spin-wheel-prize {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 0.9rem;
}

.spin-wheel-code-row {
  display: flex;
  gap: 8px;
  margin-bottom: 1rem;
}

.spin-wheel-code {
  flex: 1;
  background: var(--gray-100);
  border: 1.5px dashed var(--gray-200);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--green-dark);
}

.spin-wheel-copy-btn {
  padding: 0.6rem 1rem;
  border-radius: 10px;
  border: 1.5px solid var(--green-dark);
  background: transparent;
  color: var(--green-dark);
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.spin-wheel-copy-btn:hover { background: var(--green-light); }
.spin-wheel-copy-btn.is-copied { background: var(--green-dark); color: white; border-color: var(--green-dark); }

.spin-wheel-cta {
  display: block;
  padding: 0.85rem;
  background: var(--green-dark);
  color: white;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s;
}
.spin-wheel-cta:hover { background: var(--green-mid); }

.spin-wheel-fineprint {
  margin-top: 0.6rem;
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--gray-500);
}
.spin-wheel-fineprint a { color: var(--gray-500); text-decoration: underline; }
.spin-wheel-fineprint a:hover { color: var(--green-dark); }

@media (max-width: 420px) {
  .spin-wheel-stage { width: 220px; height: 220px; }
  .spin-wheel-spin-btn { width: 56px; height: 56px; font-size: 0.72rem; }
}