/* Card de bienvenida (misma en la web y en la vista previa del panel). */
@property --wc-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.wc-card {
  --wc-angle: 0deg;
  position: relative;
  width: min(440px, 100%);
  padding: 2px;
  border-radius: 28px;
  background: conic-gradient(from var(--wc-angle), #a4edb8, #39c6d9, #ffd36e, #ff7aa8, #a4edb8);
  box-shadow: 0 30px 80px rgba(2, 14, 30, .55), 0 0 60px rgba(57, 198, 217, .25);
  animation: wc-spin 6s linear infinite;
  overflow: hidden;
}
.wc-inner {
  position: relative;
  border-radius: 26px;
  padding: 30px 26px 26px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(57, 198, 217, .35), transparent 60%),
    radial-gradient(90% 60% at 100% 110%, rgba(255, 122, 168, .22), transparent 60%),
    linear-gradient(160deg, #071c32, #0b3a52 60%, #0f5265);
}
.wc-glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 28px;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .16) 45%, transparent 60%);
  transform: translateX(-120%);
  animation: wc-shine 4.5s ease-in-out 1s infinite;
}
.wc-media { margin: 0 auto 18px; max-width: 280px; animation: wc-float 5s ease-in-out infinite; }
.wc-media img { display: block; width: 100%; max-height: 190px; object-fit: contain; border-radius: 16px; filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .4)); }
.wc-title {
  margin: 0 0 10px;
  font: 700 clamp(1.5rem, 5vw, 2rem)/1.1 'Space Grotesk', 'Plus Jakarta Sans', Arial, sans-serif;
  letter-spacing: -.04em;
  background: linear-gradient(90deg, #fff, #a4edb8 55%, #ffd36e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.wc-text { margin: 0 0 22px; color: #cfe3ea; font-size: .95rem; line-height: 1.55; overflow-wrap: anywhere; }
.wc-btn {
  position: relative;
  border: 0;
  border-radius: 999px;
  padding: 13px 26px;
  font: 800 .92rem 'Plus Jakarta Sans', Manrope, Arial, sans-serif;
  color: #071c32;
  background: linear-gradient(135deg, #a4edb8, #5fd6c4);
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(95, 214, 196, .35);
  transition: transform .15s, box-shadow .15s;
  animation: wc-pulse 2.4s ease-in-out infinite;
}
.wc-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(95, 214, 196, .5); }
.wc-btn:focus-visible { outline: 3px solid #ffd36e; outline-offset: 3px; }
@keyframes wc-spin { to { --wc-angle: 360deg; } }
@keyframes wc-shine { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes wc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes wc-pulse { 0%, 100% { box-shadow: 0 10px 26px rgba(95, 214, 196, .35), 0 0 0 0 rgba(164, 237, 184, .45); } 50% { box-shadow: 0 10px 26px rgba(95, 214, 196, .35), 0 0 0 10px rgba(164, 237, 184, 0); } }
@media (prefers-reduced-motion: reduce) {
  .wc-card, .wc-glow, .wc-media, .wc-btn { animation: none; }
}

/* Capa que oscurece la página detrás de la card (bienvenida y colaborar). */
.wc-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow-y: auto;
  background: rgba(2, 12, 24, .62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .35s ease;
}
.wc-overlay.open { opacity: 1; }
.wc-overlay .wc-card { transform: scale(.88) translateY(14px); filter: blur(6px); transition: transform .5s cubic-bezier(.2, .9, .25, 1.2), filter .5s ease; }
.wc-overlay.open .wc-card { transform: none; filter: none; }
.wc-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.wc-close:hover { background: rgba(255, 255, 255, .22); }
.wc-close:focus-visible { outline: 3px solid #ffd36e; outline-offset: 2px; }
.wc-inner > :not(.wc-close) { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .wc-overlay, .wc-overlay .wc-card { transition: none; }
}