/* ================================================================
   THEME SYSTEM — Neo Puzzle Lovers
   ================================================================ */

/* ================================================================
   MOBILE NAV LAYOUT
   ================================================================ */

@media (max-width: 920px) {
  .site-nav {
    justify-content: flex-start;
    gap: 0.6rem;
  }

  .theme-picker {
    margin-left: auto;
  }
}

/* ─── Logo swap fade ─── */
#hero-logo {
  transition: opacity 0.42s ease;
}

/* ─── Transición suave al cambiar de tema ─── */
body.is-theme-changing,
body.is-theme-changing *,
body.is-theme-changing *::before,
body.is-theme-changing *::after {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease !important;
}

/* ================================================================
   THEME PICKER
   ================================================================ */

.theme-picker {
  position: relative;
  flex-shrink: 0;
}

.theme-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.42rem 0.78rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--pl-soft);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.theme-picker-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.theme-picker-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.theme-dropdown {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  min-width: 168px;
  padding: 0.45rem;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  background: rgba(10, 8, 15, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.52);
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
}

.theme-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.52rem 0.8rem;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--pl-soft);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.theme-option:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}

.theme-option.is-active {
  background: rgba(255, 255, 255, 0.11);
  color: #fff;
}

.theme-option.is-active::after {
  content: "✓";
  margin-left: auto;
  opacity: 0.7;
  font-size: 0.75rem;
}

@media (max-width: 560px) {
  .theme-picker-label {
    display: none;
  }

  .theme-picker-btn {
    padding: 0.42rem 0.6rem;
  }
}

/* ================================================================
   TEMA DARK — Deep Navy · Electric Blue · Amber
   ================================================================ */

body.theme-dark {
  --pl-cyan:      #40c4ff;
  --pl-blue:      #2979ff;
  --pl-lilac:     #7c4dff;
  --pl-pink:      #ffab40;
  --pl-deep:      #0d1829;
  --pl-void:      #050d17;
  --pl-soft:      #b0cff4;
  --pl-text:      #ddeeff;
  --pl-muted:     #6a9fcf;
  --pl-white:     #ddeeff;
  --pl-grad:      linear-gradient(135deg, #40c4ff 0%, #2979ff 25%, #7c4dff 60%, #ffab40 100%);
  --pl-grad-soft: linear-gradient(160deg, rgba(64,196,255,0.12), rgba(41,121,255,0.08), rgba(255,171,64,0.10));
  --pl-panel:     rgba(5, 16, 30, 0.88);
  --pl-panel-alt: rgba(64, 196, 255, 0.03);
  --pl-border:    rgba(64, 196, 255, 0.15);
  --shadow-glow:  0 22px 60px rgba(0, 0, 0, 0.65);
  background:
    radial-gradient(circle at top left,  rgba(41, 121, 255, 0.13), transparent 24%),
    radial-gradient(circle at 85% 14%,   rgba(64, 196, 255, 0.11), transparent 28%),
    radial-gradient(circle at 50% 92%,   rgba(255, 171, 64, 0.09), transparent 28%),
    #050d17;
}

body.theme-dark .site-nav {
  background: rgba(4, 11, 22, 0.92);
  border-color: rgba(64, 196, 255, 0.18);
}

body.theme-dark .activity-card,
body.theme-dark .member-card,
body.theme-dark .work-card,
body.theme-dark .engine-card,
body.theme-dark .faq-item,
body.theme-dark .signal-card,
body.theme-dark .fandom-badge,
body.theme-dark .contact-box {
  background: rgba(6, 18, 34, 0.86);
  border-color: rgba(64, 196, 255, 0.10);
}

body.theme-dark .hero-logo {
  width: min(100%, 415px);
}

body.theme-dark .hero-text-box {
  background: var(--pl-grad-soft), rgba(5, 16, 30, 0.72);
  border-color: rgba(64, 196, 255, 0.12);
}

body.theme-dark .hero-kicker {
  color: #40c4ff;
  border-color: rgba(64, 196, 255, 0.28);
}

body.theme-dark .section-divider {
  box-shadow: 0 0 14px rgba(41, 121, 255, 0.35);
}

body.theme-dark .scroll-progress {
  box-shadow: 0 0 14px rgba(41, 121, 255, 0.42);
}

body.theme-dark .bg-orb-a { background: radial-gradient(circle, rgba(41,121,255,0.14)  0%, transparent 72%); }
body.theme-dark .bg-orb-b { background: radial-gradient(circle, rgba(64,196,255,0.11)  0%, transparent 72%); }
body.theme-dark .bg-orb-c { background: radial-gradient(circle, rgba(255,171,64,0.09)  0%, transparent 72%); }

/* Dark: electric blue + amber */
body.theme-dark .hero-subtitle      { color: #b0cff4; }
body.theme-dark .typewriter-line    { color: #ffcc80; }
body.theme-dark .signal-label       { color: #b0cff4; }
body.theme-dark .member-name        { color: #ffcc80; }
body.theme-dark .member-desc em     { color: #40c4ff; }
body.theme-dark .timeline-item h3   { color: #90caf9; }
body.theme-dark .work-meta          { color: #40c4ff; }
body.theme-dark .faq-question       { color: #b0cff4; }
body.theme-dark .faq-answer         { color: #6a9fcf; }
body.theme-dark .contact-tagline    { color: #6a9fcf; }
body.theme-dark footer              { color: #4a7aaf; }
body.theme-dark footer span         { color: #ffcc80; }
body.theme-dark .section-intro      { color: #6a9fcf; }
body.theme-dark .scroll-cue         { color: #2979ff; }

/* ================================================================
   TEMA LIGHT
   ================================================================ */

body.theme-light {
  --pl-cyan:      #0ea5e9;
  --pl-blue:      #6366f1;
  --pl-lilac:     #8b5cf6;
  --pl-pink:      #ec4899;
  --pl-deep:      #f1f5f9;
  --pl-void:      #f8fafc;
  --pl-soft:      #334155;
  --pl-text:      #0f172a;
  --pl-muted:     #475569;
  --pl-white:     #0f172a;
  --pl-grad:      linear-gradient(135deg, #0ea5e9 0%, #6366f1 28%, #8b5cf6 62%, #ec4899 100%);
  --pl-grad-soft: linear-gradient(160deg, rgba(14,165,233,0.09), rgba(99,102,241,0.07), rgba(236,72,153,0.07));
  --pl-panel:     rgba(248, 250, 252, 0.90);
  --pl-panel-alt: rgba(0, 0, 0, 0.02);
  --pl-border:    rgba(0, 0, 0, 0.09);
  --shadow-glow:  0 10px 36px rgba(99, 102, 241, 0.10);
  background:
    radial-gradient(circle at top left,  rgba(236, 72, 153, 0.06), transparent 24%),
    radial-gradient(circle at 85% 14%,   rgba(99, 102, 241, 0.06), transparent 28%),
    radial-gradient(circle at 50% 92%,   rgba(139, 92, 246, 0.05), transparent 28%),
    #f8fafc;
}

body.theme-light .site-nav {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

body.theme-light .nav-logo-eyebrow { color: #64748b; }
body.theme-light .nav-logo-text    { background: var(--pl-grad); -webkit-background-clip: text; background-clip: text; }
body.theme-light .nav-links a      { color: #334155; }

body.theme-light .nav-links a:hover,
body.theme-light .nav-links a.active {
  color: #4c1d95;
  background: rgba(99, 102, 241, 0.08);
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.10) inset;
}

body.theme-light .nav-toggle {
  border-color: rgba(0, 0, 0, 0.10);
  background: rgba(0, 0, 0, 0.03);
}

body.theme-light .nav-toggle span { background: #334155; }

body.theme-light .activity-card,
body.theme-light .member-card,
body.theme-light .work-card,
body.theme-light .engine-card,
body.theme-light .faq-item,
body.theme-light .signal-card,
body.theme-light .fandom-badge,
body.theme-light .contact-box {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(0, 0, 0, 0.08);
}

body.theme-light .activity-card:hover,
body.theme-light .member-card:hover,
body.theme-light .work-card:hover,
body.theme-light .engine-card:hover {
  border-color: rgba(99, 102, 241, 0.28);
}

body.theme-light .fandom-badge:hover {
  border-color: rgba(99, 102, 241, 0.30);
  box-shadow: 0 8px 22px rgba(99, 102, 241, 0.10);
}

/* Contraste de texto sobre paneles blancos */
body.theme-light .hero-subtitle         { color: #1e1b4b; }
body.theme-light .signal-label          { color: #0f172a; }
body.theme-light .faq-question:hover    { color: #1e1b4b; }
body.theme-light .typewriter-line       { color: #7c3aed; }
body.theme-light .scroll-cue            { color: #6366f1; }

body.theme-light .hero-text-box {
  background: rgba(255, 255, 255, 0.80);
  border-color: rgba(0, 0, 0, 0.08);
  color: #0f172a;
}

body.theme-light .hero-text-box strong  { color: #6d28d9; }

body.theme-light .hero-kicker {
  color: #6366f1;
  background: rgba(99, 102, 241, 0.07);
  border-color: rgba(99, 102, 241, 0.18);
}

body.theme-light .hero-pills li {
  color: #4c1d95;
  background: rgba(99, 102, 241, 0.06);
  border-color: rgba(99, 102, 241, 0.14);
}

body.theme-light .btn-secondary {
  color: #1e1b4b;
  border-color: rgba(0, 0, 0, 0.14);
  background: rgba(0, 0, 0, 0.03);
}

body.theme-light .btn-secondary:hover { background: rgba(0, 0, 0, 0.07); }

body.theme-light .member-name           { color: #4c1d95; }
body.theme-light .member-title          { color: #475569; }
body.theme-light .member-desc em        { color: #7c3aed; }
body.theme-light .member-desc          { color: #334155; }
body.theme-light .timeline-item h3      { color: #4c1d95; }
body.theme-light .work-meta             { color: #6366f1; }
body.theme-light .faq-question          { color: #1e293b; }
body.theme-light .faq-answer            { color: #475569; }
body.theme-light .contact-tagline       { color: #6366f1; }
body.theme-light .section-intro         { color: #475569; }
body.theme-light footer                 { border-color: rgba(0,0,0,0.08); color: #64748b; }
body.theme-light footer span            { color: #ec4899; }
body.theme-light .footer-subline        { color: #64748b; }

body.theme-light .activity-card h3,
body.theme-light .engine-card h3,
body.theme-light .work-card h3          { color: #0f172a; }
body.theme-light .activity-card p,
body.theme-light .engine-card p,
body.theme-light .work-card p           { color: #334155; }

/* Puzzle Engine y afines: separación del fondo en claro */
body.theme-light .engine-card,
body.theme-light .activity-card,
body.theme-light .work-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.07);
}

body.theme-light .fandom-badge span:last-child { color: #334155; }

body.theme-light .bg-grid {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
}

body.theme-light .starfield { opacity: 0.12; }

body.theme-light .bg-orb-a { background: radial-gradient(circle, rgba(236,72,153,0.12) 0%, transparent 72%); }
body.theme-light .bg-orb-b { background: radial-gradient(circle, rgba(99,102,241,0.10) 0%, transparent 72%); }
body.theme-light .bg-orb-c { background: radial-gradient(circle, rgba(139,92,246,0.08) 0%, transparent 72%); }

body.theme-light .content-section-alt::before {
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(99,102,241,0.04), rgba(0,0,0,0.02));
  border-color: rgba(0, 0, 0, 0.05);
}

body.theme-light .scroll-progress {
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.30);
}

body.theme-light .section-divider {
  box-shadow: 0 0 14px rgba(139, 92, 246, 0.22);
}

body.theme-light .history-timeline::before { background: var(--pl-grad); }
body.theme-light .timeline-dot             { box-shadow: 0 0 10px rgba(139, 92, 246, 0.28); }

body.theme-light .theme-dropdown {
  background: rgba(255, 255, 255, 0.97);
  border-color: rgba(0, 0, 0, 0.09);
}

body.theme-light .theme-option           { color: #334155; }
body.theme-light .theme-option:hover     { background: rgba(99,102,241,0.08); color: #1e1b4b; }
body.theme-light .theme-option.is-active { background: rgba(99,102,241,0.12); color: #1e1b4b; }

body.theme-light .theme-picker-btn {
  border-color: rgba(0, 0, 0, 0.10);
  background: rgba(0, 0, 0, 0.04);
  color: #334155;
}

body.theme-light .theme-picker-btn:hover {
  background: rgba(0, 0, 0, 0.07);
  border-color: rgba(0, 0, 0, 0.16);
  color: #0f172a;
}

body.theme-light .hero-logo {
  width: min(100%, 415px);
}

/* Legibilidad del hero */
body.theme-light .logo-ring {
  border-color: rgba(99, 102, 241, 0.20);
}

body.theme-light .logo-ring-b {
  border-color: rgba(139, 92, 246, 0.28);
}

body.theme-light .logo-wrap {
  background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.08) 0%, transparent 68%);
}

body.theme-light .hero-logo {
  filter: drop-shadow(0 6px 24px rgba(99, 102, 241, 0.22)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.10));
}

body.theme-light .hero-spark-a {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.30) 0%, transparent 70%);
}

body.theme-light .hero-spark-b {
  background: radial-gradient(circle, rgba(139, 92, 246, 0.26) 0%, transparent 70%);
}

body.theme-light .hero-text-box {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(99, 102, 241, 0.16);
  box-shadow: 0 6px 28px rgba(99, 102, 241, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
}

/* ================================================================
   TEMA PIXEL ART — Matrix green, 8-bit
   ================================================================ */

body.theme-pixel {
  --font-heading:  "Pixelify Sans", monospace;
  --pl-cyan:       #00ff41;
  --pl-blue:       #33cc44;
  --pl-lilac:      #aaff00;
  --pl-pink:       #ff8c00;
  --pl-deep:       #0a1a0a;
  --pl-void:       #010801;
  --pl-soft:       #aaddaa;
  --pl-text:       #e0ffe0;
  --pl-muted:      #55aa55;
  --pl-white:      #e0ffe0;
  --pl-grad:       linear-gradient(135deg, #00ff41 0%, #33cc44 33%, #aaff00 66%, #ff8c00 100%);
  --pl-grad-soft:  linear-gradient(160deg, rgba(0,255,65,0.12), rgba(51,204,68,0.08), rgba(255,140,0,0.08));
  --pl-panel:      rgba(0, 20, 2, 0.94);
  --pl-panel-alt:  rgba(0, 255, 65, 0.04);
  --pl-border:     rgba(0, 255, 65, 0.45);
  --shadow-glow:   4px 4px 0px rgba(0, 160, 30, 0.70);
  background: #010801;
}

/* ── Tipografía 8-bit ── */
body.theme-pixel,
body.theme-pixel p,
body.theme-pixel a,
body.theme-pixel li,
body.theme-pixel h1,
body.theme-pixel h2,
body.theme-pixel h3,
body.theme-pixel h4,
body.theme-pixel summary,
body.theme-pixel label,
body.theme-pixel button:not(.nav-toggle) {
  font-family: "Pixelify Sans", monospace !important;
}

/* ── Escala de texto para Pixelify Sans ── */
body.theme-pixel .activity-card p,
body.theme-pixel .engine-card p,
body.theme-pixel .work-card p,
body.theme-pixel .timeline-item p,
body.theme-pixel .member-desc,
body.theme-pixel .faq-answer,
body.theme-pixel .section-intro,
body.theme-pixel .contact-box p,
body.theme-pixel .hero-text-box p {
  font-size: 0.84rem;
  line-height: 1.85;
}

body.theme-pixel .hero-subtitle         { font-size: 0.92rem; line-height: 1.7; }
body.theme-pixel .typewriter-line       { font-size: 0.96rem; }
body.theme-pixel .section-title         { font-size: clamp(0.96rem, 2.8vw, 1.22rem); letter-spacing: 0.03em; }
body.theme-pixel .signal-value          { font-size: clamp(1.3rem, 3.5vw, 2rem); }
body.theme-pixel .signal-label          { font-size: 0.80rem; line-height: 1.85; color: #aaddaa; }
body.theme-pixel .hero-kicker           { font-size: 0.72rem; letter-spacing: 0.05em; }
body.theme-pixel .nav-logo-text         { font-size: 0.92rem; letter-spacing: 0.03em; }
body.theme-pixel .nav-logo-eyebrow      { font-size: 0.68rem; letter-spacing: 0.04em; }
body.theme-pixel .nav-links a           { font-size: 0.76rem; }
body.theme-pixel .btn-primary,
body.theme-pixel .btn-secondary,
body.theme-pixel .contact-email         { font-size: 0.80rem; letter-spacing: 0.03em; }
body.theme-pixel .hero-pills li         { font-size: 0.76rem; }
body.theme-pixel .member-name           { font-size: 0.88rem; }
body.theme-pixel .member-title          { font-size: 0.72rem; }
body.theme-pixel .member-gen            { font-size: 0.70rem; }
body.theme-pixel .work-tag              { font-size: 0.68rem; }
body.theme-pixel .work-meta             { font-size: 0.74rem; }
body.theme-pixel .faq-question span     { font-size: 0.84rem; }
body.theme-pixel .faq-arrow             { font-size: 0.90rem; }
body.theme-pixel .contact-tagline       { font-size: 0.72rem; letter-spacing: 0.04em; }
body.theme-pixel footer                 { font-size: 0.76rem; }
body.theme-pixel .footer-subline        { font-size: 0.70rem; }
body.theme-pixel .theme-option          { font-size: 0.80rem; }
body.theme-pixel .theme-picker-btn      { font-size: 0.76rem; }
body.theme-pixel .scroll-cue span       { font-size: 0.74rem; }
body.theme-pixel .activity-card h3,
body.theme-pixel .engine-card h3,
body.theme-pixel .work-card h3          { font-size: 0.90rem; }

/* ── Renderizado pixelado de imágenes ── */
body.theme-pixel img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

body.theme-pixel .hero-logo {
  width: min(100%, 415px);
}

/* ── Esquinas rectas (sin border-radius) ── */
body.theme-pixel .site-nav,
body.theme-pixel .activity-card,
body.theme-pixel .member-card,
body.theme-pixel .work-card,
body.theme-pixel .engine-card,
body.theme-pixel .faq-item,
body.theme-pixel .signal-card,
body.theme-pixel .fandom-badge,
body.theme-pixel .contact-box,
body.theme-pixel .hero-kicker,
body.theme-pixel .hero-text-box,
body.theme-pixel .member-avatar,
body.theme-pixel .activity-icon,
body.theme-pixel .engine-icon,
body.theme-pixel .theme-dropdown,
body.theme-pixel .theme-option,
body.theme-pixel .theme-picker-btn,
body.theme-pixel .btn-primary,
body.theme-pixel .btn-secondary,
body.theme-pixel .contact-email,
body.theme-pixel .nav-links a,
body.theme-pixel .hero-pills li,
body.theme-pixel .member-gen,
body.theme-pixel .work-tag,
body.theme-pixel .scroll-progress,
body.theme-pixel .timeline-dot,
body.theme-pixel .section-divider {
  border-radius: 0;
}

/* ── Sombra pixel (sin blur, con offset) ── */
body.theme-pixel .activity-card,
body.theme-pixel .member-card,
body.theme-pixel .work-card,
body.theme-pixel .engine-card,
body.theme-pixel .signal-card,
body.theme-pixel .fandom-badge,
body.theme-pixel .contact-box,
body.theme-pixel .faq-item {
  box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.60);
}

body.theme-pixel .activity-card:hover,
body.theme-pixel .member-card:hover,
body.theme-pixel .work-card:hover,
body.theme-pixel .engine-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(0, 255, 65, 0.50);
  border-color: rgba(0, 255, 65, 0.65);
}

/* ── Nav ── */
body.theme-pixel .site-nav {
  background: rgba(0, 16, 0, 0.97);
  border: 3px solid rgba(0, 255, 65, 0.45);
  box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.50);
  backdrop-filter: none;
}

body.theme-pixel .nav-logo-eyebrow { color: rgba(0, 255, 65, 0.65); }
body.theme-pixel .nav-toggle {
  border: 2px solid rgba(0, 255, 65, 0.40);
  border-radius: 0;
  background: rgba(0, 20, 0, 0.50);
}
body.theme-pixel .nav-toggle span { background: #00ff41; }

body.theme-pixel .nav-links a { color: #aaddaa; }
body.theme-pixel .nav-links a:hover,
body.theme-pixel .nav-links a.active {
  color: #00ff41;
  background: rgba(0, 255, 65, 0.10);
  box-shadow: none;
  outline: 1px solid rgba(0, 255, 65, 0.35);
}

/* Nav móvil */
@media (max-width: 920px) {
  body.theme-pixel .nav-links {
    background: rgba(0, 12, 0, 0.98);
    border: 3px solid rgba(0, 255, 65, 0.40);
    border-radius: 0;
    box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.50);
  }
}

/* ── Tarjetas ── */
body.theme-pixel .activity-card,
body.theme-pixel .member-card,
body.theme-pixel .work-card,
body.theme-pixel .engine-card,
body.theme-pixel .signal-card {
  background: rgba(0, 20, 2, 0.92);
  border: 3px solid rgba(0, 255, 65, 0.30);
}

body.theme-pixel .fandom-badge {
  background: rgba(0, 15, 0, 0.94);
  border: 3px solid rgba(0, 255, 65, 0.28);
  box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.60);
}

body.theme-pixel .fandom-badge:hover {
  border-color: rgba(0, 255, 65, 0.60);
  box-shadow: 6px 6px 0px rgba(0, 160, 30, 0.60);
}

body.theme-pixel .fandom-badge span:last-child { color: #aaddaa; }

body.theme-pixel .contact-box {
  background: rgba(0, 15, 0, 0.94);
  border: 3px solid rgba(0, 255, 65, 0.28);
  box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.60);
}

body.theme-pixel .faq-item {
  background: rgba(0, 20, 2, 0.92);
  border: 3px solid rgba(0, 255, 65, 0.28);
  box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.60);
}

body.theme-pixel .faq-item[open] { border-color: rgba(0, 255, 65, 0.45); }

/* ── Hero ── */
body.theme-pixel .hero-text-box {
  background: rgba(0, 20, 2, 0.85);
  border: 3px solid rgba(0, 255, 65, 0.35);
  box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.60);
  color: #e0ffe0;
}

body.theme-pixel .hero-kicker {
  color: #00ff41;
  border: 2px solid rgba(0, 255, 65, 0.45);
  background: rgba(0, 255, 65, 0.08);
}

body.theme-pixel .hero-pills li {
  border: 2px solid rgba(0, 255, 65, 0.30);
  background: rgba(0, 255, 65, 0.06);
  color: #aaddaa;
}

/* ── Colores ── */
body.theme-pixel .typewriter-line         { color: #ff8c00; }
body.theme-pixel .hero-text-box strong    { color: #aaff00; }
body.theme-pixel .hero-subtitle           { color: #aaddaa; }
body.theme-pixel .scroll-cue             { color: #33cc44; }
body.theme-pixel .section-intro           { color: #55aa55; }
body.theme-pixel .member-name             { color: #ff8c00; }
body.theme-pixel .member-title            { color: #55aa55; }
body.theme-pixel .member-desc            { color: #aaddaa; }
body.theme-pixel .member-desc em          { color: #aaff00; }
body.theme-pixel .timeline-item h3        { color: #00ff41; }
body.theme-pixel .timeline-item p         { color: #55aa55; }
body.theme-pixel .activity-card h3,
body.theme-pixel .engine-card h3,
body.theme-pixel .work-card h3            { color: #00ff41; }
body.theme-pixel .activity-card p,
body.theme-pixel .engine-card p,
body.theme-pixel .work-card p             { color: #55aa55; }
body.theme-pixel .work-meta               { color: #00ff41; }
body.theme-pixel .faq-question            { color: #aaddaa; }
body.theme-pixel .faq-question:hover      { color: #00ff41; }
body.theme-pixel .faq-answer              { color: #55aa55; }
body.theme-pixel .contact-tagline         { color: #33cc44; }
body.theme-pixel .contact-box p           { color: #aaddaa; }
body.theme-pixel footer                   { border-color: rgba(0,255,65,0.18); color: #33cc44; }
body.theme-pixel footer span              { color: #ff8c00; }
body.theme-pixel .footer-subline          { color: #33cc44; }

/* ── Botones ── */
body.theme-pixel .btn-primary,
body.theme-pixel .contact-email {
  border: 2px solid transparent;
  box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.60);
  color: #010801;
}

body.theme-pixel .btn-primary:hover,
body.theme-pixel .contact-email:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(0, 255, 65, 0.50);
}

body.theme-pixel .btn-secondary {
  color: #00ff41;
  border: 2px solid rgba(0, 255, 65, 0.45);
  background: rgba(0, 255, 65, 0.06);
  box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.60);
}

body.theme-pixel .btn-secondary:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px rgba(0, 255, 65, 0.50);
  border-color: rgba(0, 255, 65, 0.65);
}

/* ── Tags ── */
body.theme-pixel .tag-educa {
  background: rgba(0, 255, 65, 0.12);
  border-color: rgba(0, 255, 65, 0.35);
  color: #aaddaa;
  border-radius: 0;
}

body.theme-pixel .tag-tiktok {
  background: rgba(255, 140, 0, 0.12);
  border-color: rgba(255, 140, 0, 0.35);
  color: #ffcc88;
  border-radius: 0;
}

/* ── Avatar e iconos ── */
body.theme-pixel .member-avatar {
  border: 3px solid rgba(0, 255, 65, 0.40);
  box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.60);
}

body.theme-pixel .activity-icon,
body.theme-pixel .engine-icon {
  box-shadow: 3px 3px 0 rgba(0, 160, 30, 0.60);
}

/* ── Timeline ── */
body.theme-pixel .timeline-dot {
  box-shadow: 3px 3px 0 rgba(0, 160, 30, 0.60);
}

/* ── Fondo ── */
body.theme-pixel .bg-grid {
  background-image:
    linear-gradient(rgba(0, 255, 65, 0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.10) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.75;
}

body.theme-pixel .bg-orb-a { background: radial-gradient(circle, rgba(0,255,65,0.14)  0%, transparent 72%); opacity: 0.35; }
body.theme-pixel .bg-orb-b { background: radial-gradient(circle, rgba(51,204,68,0.11) 0%, transparent 72%); opacity: 0.35; }
body.theme-pixel .bg-orb-c { background: radial-gradient(circle, rgba(255,140,0,0.09) 0%, transparent 72%); opacity: 0.35; }
body.theme-pixel .starfield { opacity: 0.25; }

/* ── Divisores y progreso ── */
body.theme-pixel .section-divider {
  box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.60);
}

body.theme-pixel .scroll-progress {
  box-shadow: none;
}

/* ── Dropdown de temas ── */
body.theme-pixel .theme-dropdown {
  background: rgba(0, 16, 0, 0.98);
  border: 3px solid rgba(0, 255, 65, 0.40);
  border-radius: 0;
  box-shadow: 4px 4px 0px rgba(0, 160, 30, 0.50);
}

body.theme-pixel .theme-picker-btn {
  border: 2px solid rgba(0, 255, 65, 0.40);
  color: #00ff41;
  background: rgba(0, 20, 0, 0.50);
  box-shadow: 3px 3px 0 rgba(0, 160, 30, 0.50);
}

body.theme-pixel .theme-picker-btn:hover {
  border-color: rgba(0, 255, 65, 0.70);
  color: #e0ffe0;
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 rgba(0, 255, 65, 0.40);
}

body.theme-pixel .theme-option           { color: #aaddaa; }
body.theme-pixel .theme-option:hover     { background: rgba(0,255,65,0.10); color: #00ff41; }
body.theme-pixel .theme-option.is-active { background: rgba(0,255,65,0.14); color: #00ff41; }

/* ── Divisores de content-section-alt ── */
body.theme-pixel .content-section-alt::before {
  background: linear-gradient(180deg, rgba(0,255,65,0.03), rgba(0,255,65,0.06), rgba(0,255,65,0.03));
  border-color: rgba(0, 255, 65, 0.08);
}

/* ================================================================
   TEMA SYNTHWAVE — secreto, 5º tema
   Magenta · Violeta eléctrico · Cian · Sol de atardecer
   Se revela con SECRET_SEQUENCE en js/nucleo/theme-switcher.js.
   ================================================================ */

body.theme-synthwave {
  --pl-cyan:      #00e5ff;
  --pl-blue:      #7c3aed;
  --pl-lilac:     #d946ef;
  --pl-pink:      #ff8a3d;
  --pl-deep:      #170a2e;
  --pl-void:      #0a0118;
  --pl-soft:      #d9b8ff;
  --pl-text:      #f5e9ff;
  --pl-muted:     #9a7bc4;
  --pl-white:     #f5e9ff;
  --pl-grad:      linear-gradient(135deg, #00e5ff 0%, #7c3aed 35%, #d946ef 65%, #ff8a3d 100%);
  --pl-grad-soft: linear-gradient(160deg, rgba(217,70,239,0.10), rgba(124,58,237,0.10), rgba(255,106,61,0.10));
  --pl-panel:     rgba(16, 6, 32, 0.86);
  --pl-panel-alt: rgba(217, 70, 239, 0.05);
  --pl-border:    rgba(0, 229, 255, 0.18);
  --shadow-glow:  0 0 46px rgba(217, 70, 239, 0.30), 0 22px 60px rgba(0, 0, 0, 0.65);
  /* Cielo de atardecer, no "morado y azul": violeta casi negro arriba y
     cada vez más cálido según baja, hasta un rojo-vino oscuro que empalma
     con el naranja del sol. El cian se deja para los acentos (bordes,
     texto, botones) — aquí de sobra ya sería "demasiado azul". */
  background:
    radial-gradient(circle at 15% 8%,  rgba(217, 70, 239, 0.16), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(124, 58, 237, 0.16), transparent 30%),
    radial-gradient(ellipse 80% 55% at 50% 100%, rgba(255, 106, 61, 0.24), transparent 62%),
    linear-gradient(180deg, #0a0118 0%, #1d0a30 38%, #3b0f34 64%, #551830 82%, #3a1118 100%);
}

/* Nav — borde reacciona a --synth-beat (js/ambiente/synth-audio.js) */
body.theme-synthwave .site-nav {
  background: rgba(10, 1, 24, 0.90);
  border-color: rgba(0, 229, 255, calc(0.16 + var(--synth-beat, 0) * 0.34));
  box-shadow:
    0 8px 32px rgba(217, 70, 239, 0.14),
    0 0 calc(6px + var(--synth-beat, 0) * 22px) rgba(0, 229, 255, calc(var(--synth-beat, 0) * 0.5));
}

body.theme-synthwave .nav-links a { color: #d9b8ff; }
body.theme-synthwave .nav-links a:hover,
body.theme-synthwave .nav-links a.active {
  color: #00e5ff;
  background: rgba(217, 70, 239, 0.10);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.16) inset;
}

/* Tarjetas */
body.theme-synthwave .activity-card,
body.theme-synthwave .member-card,
body.theme-synthwave .work-card,
body.theme-synthwave .engine-card,
body.theme-synthwave .faq-item,
body.theme-synthwave .signal-card,
body.theme-synthwave .fandom-badge,
body.theme-synthwave .contact-box {
  background: rgba(12, 4, 26, 0.88);
  border-color: rgba(0, 229, 255, calc(0.30 + var(--synth-beat, 0) * 0.4));
  box-shadow: 0 10px 30px rgba(8, 2, 18, 0.55), 0 0 calc(var(--synth-beat, 0) * 22px) rgba(0, 229, 255, calc(var(--synth-beat, 0) * 0.3));
}

body.theme-synthwave .activity-card:hover,
body.theme-synthwave .member-card:hover,
body.theme-synthwave .work-card:hover,
body.theme-synthwave .engine-card:hover {
  border-color: rgba(217, 70, 239, 0.60);
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.20), 0 14px 34px rgba(217, 70, 239, 0.22);
}

body.theme-synthwave .fandom-badge:hover {
  border-color: rgba(217, 70, 239, 0.55);
  box-shadow: 0 8px 24px rgba(217, 70, 239, 0.20);
}

body.theme-synthwave .hero-logo { width: min(100%, 415px); }

/* ── Marco de neón (degradado en el borde) ── */
body.theme-synthwave .hero-text-box,
body.theme-synthwave .cmt-wrap,
body.theme-synthwave .pl-drawer-head {
  border: 2px solid transparent;
  border-radius: 22px;
  background-origin: border-box;
  background-clip: padding-box, border-box;
  /* Halo reacciona a --synth-beat */
  box-shadow:
    0 0 calc(26px + var(--synth-beat, 0) * 16px) rgba(217, 70, 239, calc(0.30 + var(--synth-beat, 0) * 0.22)),
    0 0 calc(46px + var(--synth-beat, 0) * 20px) rgba(0, 229, 255, calc(0.16 + var(--synth-beat, 0) * 0.18));
}

body.theme-synthwave .hero-text-box {
  background-image: var(--pl-grad-soft), linear-gradient(rgba(12, 4, 26, 0.82), rgba(12, 4, 26, 0.82)), var(--pl-grad);
  background-clip: padding-box, padding-box, border-box;
}

/* Muro de comentarios (comments.css) */
body.theme-synthwave .cmt-wrap {
  background-image: linear-gradient(rgba(10, 2, 22, 0.96), rgba(10, 2, 22, 0.96)), var(--pl-grad);
}

body.theme-synthwave .pl-drawer-head {
  border-radius: 18px;
  background-image: linear-gradient(rgba(10, 2, 22, 0.9), rgba(10, 2, 22, 0.9)), var(--pl-grad);
  box-shadow: 0 0 20px rgba(217, 70, 239, 0.28), 0 0 36px rgba(0, 229, 255, 0.14);
}

/* ── Barra lateral ── */
body.theme-synthwave .pl-drawer {
  background: rgba(10, 2, 22, 0.94);
  border-right: 2px solid;
  border-image: linear-gradient(180deg, #00e5ff, #d946ef 55%, #ff8a3d) 1 100%;
  box-shadow: 18px 0 60px rgba(217, 70, 239, 0.18), 0 0 34px rgba(0, 229, 255, 0.16);
}

body.theme-synthwave .pl-role {
  border-color: rgba(0, 229, 255, calc(0.5 + var(--synth-beat, 0) * 0.4));
  color: #00e5ff;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}
body.theme-synthwave .pl-role-moderator { border-color: rgba(217, 70, 239, calc(0.6 + var(--synth-beat, 0) * 0.35)); color: #f0abfc; text-shadow: 0 0 8px rgba(217, 70, 239, 0.55); }
body.theme-synthwave .pl-role-creator   { border-color: rgba(255, 138, 61, calc(0.6 + var(--synth-beat, 0) * 0.35));  color: #ffb877; text-shadow: 0 0 8px rgba(255, 138, 61, 0.5); }

/* Menú estilo Persona (account-menu.css): el bloque de detrás, en neón */
body.theme-synthwave .pl-link:hover::after,
body.theme-synthwave .pl-link:focus-visible::after {
  background: #d946ef;
  filter: drop-shadow(0 0 8px rgba(217, 70, 239, 0.7));
}

body.theme-synthwave .pl-link-cta {
  box-shadow: 0 0 22px rgba(217, 70, 239, 0.4), 0 0 10px rgba(0, 229, 255, 0.3);
}

body.theme-synthwave .pl-avatar {
  box-shadow: 0 0 0 2px rgba(10, 2, 22, 0.9), 0 0 16px rgba(217, 70, 239, 0.5);
}

body.theme-synthwave .pl-section {
  background: #00e5ff;
  color: #0a0216;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.55));
}
body.theme-synthwave .pl-links > .pl-section:nth-of-type(even) { background: #ff8a3d; filter: drop-shadow(0 0 6px rgba(255, 138, 61, 0.5)); }

body.theme-synthwave .pl-bell {
  box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.25) inset;
}

body.theme-synthwave .hero-kicker {
  color: #00e5ff;
  border-color: rgba(0, 229, 255, calc(0.32 + var(--synth-beat, 0) * 0.4));
  background: rgba(0, 229, 255, 0.08);
  text-shadow: 0 0 calc(12px + var(--synth-beat, 0) * 10px) rgba(0, 229, 255, calc(0.55 + var(--synth-beat, 0) * 0.35));
}

/* Hero pills */
body.theme-synthwave .hero-pills li {
  background: rgba(10, 1, 24, 0.78);
  border-color: rgba(0, 229, 255, 0.30);
  color: #f5e9ff;
  box-shadow: 0 4px 16px rgba(8, 2, 18, 0.5);
}

body.theme-synthwave .scroll-cue {
  color: #f5e9ff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 229, 255, 0.5);
}
body.theme-synthwave .scroll-cue-arrow { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)); }

body.theme-synthwave .section-divider { box-shadow: 0 0 16px rgba(217, 70, 239, 0.40); }
body.theme-synthwave .scroll-progress { box-shadow: 0 0 16px rgba(0, 229, 255, 0.45); }

body.theme-synthwave .bg-orb-a { background: radial-gradient(circle, rgba(0, 229, 255, 0.16) 0%, transparent 72%); }
body.theme-synthwave .bg-orb-b { background: radial-gradient(circle, rgba(217, 70, 239, 0.14) 0%, transparent 72%); }
body.theme-synthwave .bg-orb-c { background: radial-gradient(circle, rgba(255, 138, 61, 0.12) 0%, transparent 72%); }
body.theme-synthwave .starfield { opacity: 0.5; }

/* Colores de texto */
body.theme-synthwave .hero-subtitle      { color: #d9b8ff; }
body.theme-synthwave .typewriter-line    { color: #ff8a3d; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); }
body.theme-synthwave .signal-label       { color: #d9b8ff; }
body.theme-synthwave .member-name        { color: #ff8a3d; }
body.theme-synthwave .member-desc em     { color: #00e5ff; }
body.theme-synthwave .timeline-item h3   { color: #f0abfc; }
body.theme-synthwave .work-meta          { color: #00e5ff; }
body.theme-synthwave .faq-question       { color: #f5e9ff; }
body.theme-synthwave .faq-answer         { color: #b79ae0; }
body.theme-synthwave .contact-tagline    { color: #9a7bc4; }
body.theme-synthwave footer              { color: #6b4f96; }
body.theme-synthwave footer span         { color: #ff8a3d; }
body.theme-synthwave .section-intro      { color: #b79ae0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }

/* ── Titulares con degradado de marca ── */
body.theme-synthwave .hero-title,
body.theme-synthwave .section-title,
body.theme-synthwave .signal-value {
  filter:
    drop-shadow(0 3px 10px rgba(0, 0, 0, 0.85))
    drop-shadow(0 0 20px rgba(217, 70, 239, 0.45))
    drop-shadow(0 0 34px rgba(0, 229, 255, 0.28));
}

body.theme-synthwave .theme-dropdown {
  background: rgba(12, 3, 26, 0.97);
  border-color: rgba(0, 229, 255, 0.20);
}
body.theme-synthwave .theme-option           { color: #d9b8ff; }
body.theme-synthwave .theme-option:hover     { background: rgba(217, 70, 239, 0.12); color: #f5e9ff; }
body.theme-synthwave .theme-option.is-active { background: rgba(0, 229, 255, 0.14); color: #00e5ff; }

body.theme-synthwave .theme-picker-btn {
  border-color: rgba(0, 229, 255, calc(0.24 + var(--synth-beat, 0) * 0.4));
  background: rgba(217, 70, 239, 0.06);
  color: #d9b8ff;
}
body.theme-synthwave .theme-picker-btn:hover {
  background: rgba(217, 70, 239, 0.12);
  border-color: rgba(0, 229, 255, 0.40);
  color: #f5e9ff;
}

/* Brillo de opción recién revelada, en capa aparte (::after) */
body.theme-synthwave .theme-option.is-secret-reveal,
.theme-option.is-secret-reveal {
  position: relative;
}

body.theme-synthwave .theme-option.is-secret-reveal::after,
.theme-option.is-secret-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.22), rgba(217, 70, 239, 0.22));
  box-shadow: 0 0 18px rgba(0, 229, 255, 0.5);
  animation: synthOptionGlow 2.4s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  body.theme-synthwave .theme-option.is-secret-reveal::after,
  .theme-option.is-secret-reveal::after { animation: none; }
}

/* ── Glow de neón — logo del nav y títulos con degradado parcial ── */
body.theme-synthwave .nav-logo-text,
body.theme-synthwave .gallery-title span {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 16px rgba(217, 70, 239, 0.5));
}

/* ── Botones ── */
body.theme-synthwave .btn-primary,
body.theme-synthwave .contact-email {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 8px 26px rgba(217, 70, 239, 0.32),
    0 0 calc(18px + var(--synth-beat, 0) * 16px) rgba(0, 229, 255, calc(0.22 + var(--synth-beat, 0) * 0.3));
}
body.theme-synthwave .btn-primary:hover,
body.theme-synthwave .contact-email:hover {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 10px 34px rgba(217, 70, 239, 0.48), 0 0 26px rgba(0, 229, 255, 0.36);
}

body.theme-synthwave .history-timeline::before { background: var(--pl-grad); }
body.theme-synthwave .timeline-dot             { box-shadow: 0 0 12px rgba(217, 70, 239, 0.45); }

body.theme-synthwave .content-section-alt::before {
  background: linear-gradient(180deg, rgba(0,229,255,0.03), rgba(217,70,239,0.06), rgba(0,229,255,0.03));
  border-color: rgba(0, 229, 255, 0.08);
}

/* ════════════════════════════════════════════════════════════════
   FIRMA VISUAL 1 — El sol
   ════════════════════════════════════════════════════════════════ */
body.theme-synthwave .site-bg::after,
body.theme-synthwave .engine-bg::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9rem;                  /* la mitad de abajo queda cortada por overflow:hidden */
  width: 18rem;
  height: 18rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe36e 0%, #ff8a3d 42%, #ff2ec4 78%, #7c3aed 100%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, #000 0px, #000 6px, transparent 6px, transparent 11px);
          mask-image: repeating-linear-gradient(to bottom, #000 0px, #000 6px, transparent 6px, transparent 11px);
  opacity: 0.85;
  animation: synthSunPulse 4.6s ease-in-out infinite;
  filter: drop-shadow(0 0 68px rgba(255, 46, 196, 0.58))
          drop-shadow(0 0 120px rgba(124, 58, 237, 0.38));
  box-shadow: 0 0 calc(20px + var(--synth-beat, 0) * 70px) rgba(255, 138, 61, calc(0.2 + var(--synth-beat, 0) * 0.55));
}

/* Línea de horizonte */
body.theme-synthwave .site-bg::before,
body.theme-synthwave .engine-bg::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 0.6rem;
  height: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(0, 229, 255, 0.85), rgba(217, 70, 239, 0.95),
    rgba(0, 229, 255, 0.85), transparent);
  box-shadow:
    0 0 calc(16px + var(--synth-beat, 0) * 14px) rgba(217, 70, 239, calc(0.65 + var(--synth-beat, 0) * 0.3)),
    0 0 calc(32px + var(--synth-beat, 0) * 22px) rgba(0, 229, 255, calc(0.4 + var(--synth-beat, 0) * 0.3));
  opacity: 0.9;
}

/* ════════════════════════════════════════════════════════════════
   FIRMA VISUAL 2 — La autopista
   ════════════════════════════════════════════════════════════════ */
body.theme-synthwave .bg-grid {
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.34) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 70, 239, 0.26) 1px, transparent 1px);
  background-size: 62px 62px;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 13%, transparent 24%);
          mask-image: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 13%, transparent 24%);
  opacity: 0.55;
  transform: perspective(480px) rotateX(66deg) scale(1.8);
  transform-origin: 50% 100%;
  animation: synthGridScroll 2.4s steps(24) infinite;
}

/* ════════════════════════════════════════════════════════════════
   FIRMA VISUAL 3 — Scanlines de tubo CRT
   ════════════════════════════════════════════════════════════════ */
body.theme-synthwave::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)       0px,
    rgba(0, 0, 0, 0)       2px,
    rgba(0, 229, 255, 0.03) 3px,
    rgba(0, 0, 0, 0)       4px
  );
  mix-blend-mode: overlay;
  opacity: 0.55;
  animation: synthScanFlicker 6s ease-in-out infinite;
}

/* ── Escudo inferior (atenúa el fondo ambiental, z-index 1) ── */
body.theme-synthwave::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    #050108 0%,
    rgba(5, 1, 8, 0.94) 8%,
    rgba(5, 1, 8, 0.6) 18%,
    rgba(5, 1, 8, 0.22) 28%,
    transparent 38%);
}

/* Fondo propio del footer */
body.theme-synthwave footer {
  position: relative;
  background: linear-gradient(180deg, transparent 0%, #050108 45%, #050108 100%);
  border-top-color: rgba(0, 229, 255, 0.18);
}

@media (prefers-reduced-motion: reduce) {
  body.theme-synthwave .bg-grid,
  body.theme-synthwave .site-bg::after,
  body.theme-synthwave .engine-bg::after,
  body.theme-synthwave .nav-logo-text,
  body.theme-synthwave::before {
    animation: none;
  }
}

/* Rendimiento en móvil: se congelan estas animaciones */
@media (max-width: 720px) {
  body.theme-synthwave .site-bg::after,
  body.theme-synthwave .engine-bg::after,
  body.theme-synthwave::before {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   TOQUES FINALES — detalles que solo tiene este tema
   ════════════════════════════════════════════════════════════════ */

/* Scrollbar (Chrome/Edge/Safari) */
body.theme-synthwave::-webkit-scrollbar { width: 12px; height: 12px; }
body.theme-synthwave::-webkit-scrollbar-track { background: #0a0118; }
body.theme-synthwave::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #00e5ff, #d946ef);
  border-radius: 999px;
  border: 2px solid #0a0118;
}
body.theme-synthwave::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5ff0ff, #ef7bfb);
}
body.theme-synthwave { scrollbar-color: #d946ef #0a0118; scrollbar-width: thin; }

/* Titileo ocasional del logo del nav */
body.theme-synthwave .nav-logo-text {
  animation: synthLogoFlicker 9s ease-in-out infinite;
}

@keyframes synthLogoFlicker {
  0%, 92%, 100% { opacity: 1; }
  93%           { opacity: 0.4; }
  94%           { opacity: 1; }
  95%           { opacity: 0.55; }
  96%           { opacity: 1; }
}

/* Pulso del sol (solo transform) */
@keyframes synthSunPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-50%) scale(1.045); }
}

@keyframes synthGridScroll {
  from { background-position: 0 0,  0 0; }
  to   { background-position: 0 62px, 0 0; }
}

@keyframes synthScanFlicker {
  0%, 96%, 100% { opacity: 0.55; }
  97%           { opacity: 0.32; }
  98.5%         { opacity: 0.7; }
}

/* Destello al elegir una opción */
@keyframes synthOptionGlow {
  0%   { opacity: 0.85; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   EL ESTALLIDO — momento del descubrimiento (theme-switcher.js)
   ════════════════════════════════════════════════════════════════ */
.synthwave-burst {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(circle at 50% 55%, rgba(217, 70, 239, 0.35), rgba(10, 1, 24, 0.88) 62%);
  animation: synthBurstFade 2s ease-out forwards;
}

.synthwave-burst-grid {
  position: absolute;
  inset: -20%;
  background-image:
    linear-gradient(rgba(0, 229, 255, 0.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 70, 239, 0.4) 1px, transparent 1px);
  background-size: 40px 40px;
  transform: perspective(300px) rotateX(70deg) scale(2.2);
  animation: synthGridScroll 1.1s linear infinite;
}

.synthwave-burst-label {
  position: relative;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 229, 255, 0.5);
  background: rgba(10, 1, 24, 0.75);
  color: #fff;
  font-family: "Orbitron", sans-serif;
  font-weight: 800;
  font-size: clamp(0.85rem, 2.4vw, 1.15rem);
  letter-spacing: 0.06em;
  text-align: center;
  text-shadow: 0 0 14px rgba(0, 229, 255, 0.8);
  box-shadow: 0 0 40px rgba(217, 70, 239, 0.55);
  animation: synthBurstLabel 2s cubic-bezier(.2,1,.3,1) forwards;
}

@keyframes synthBurstFade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes synthBurstLabel {
  0%   { transform: scale(0.4); opacity: 0; }
  18%  { transform: scale(1.08); opacity: 1; }
  28%  { transform: scale(1); opacity: 1; }
  82%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.04); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .synthwave-burst-grid,
  .synthwave-burst,
  .synthwave-burst-label {
    animation-duration: 0.4s;
  }
}

/* ================================================================================
   ████  TEMAS PRIVADOS  ████
   Solo visibles para la cuenta dueña. Filtro en js/nucleo/theme-switcher.js
   (lista OWNER_THEMES).

   Contrato de variables propio (además de las --pl-*):
     --t-radius        radio de las tarjetas
     --t-btn-radius    radio de los botones
     --t-card-bg       fondo de tarjeta / panel
     --t-card-border   su borde
     --t-card-shadow   su sombra
     --t-card-hover-*  qué cambia al pasar el ratón
     --t-nav-bg        fondo de la barra de navegación
     --t-nav-border    su borde inferior
     --t-heading       color de los títulos dentro de tarjetas
     --t-body          color del texto corrido dentro de tarjetas
     --t-glass         desenfoque de fondo (o `none`)

   Logos en docs/assets/:
     logo-neo-puzzle-loversmono-cropped.png
     logo-neo-puzzle-loversaurora-cropped.png
     logo-neo-puzzle-loversblueprint-cropped.png
     logo-neo-puzzle-loverssunset-cropped.png
   ================================================================================ */


/* ════════════════════════════════════════════════════════════════════════════════
   1 · ALMA MONOCROMA — indie RPG en blanco y negro
   ════════════════════════════════════════════════════════════════════════════════ */
body.theme-mono {
  --pl-cyan:      #ffffff;
  --pl-blue:      #ffffff;
  --pl-lilac:     #ffffff;
  --pl-pink:      #ff0000;
  --pl-deep:      #000000;
  --pl-void:      #000000;
  --pl-bg:        #000000;
  --pl-soft:      #ffffff;
  --pl-text:      #ffffff;
  --pl-muted:     #9a9a9a;
  --pl-white:     #ffffff;
  --pl-grad:      linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
  --pl-grad-soft: none;
  --pl-panel:     #000000;
  --pl-panel-alt: #000000;
  --pl-border:    #ffffff;
  --shadow-glow:  none;

  --t-radius:            0;
  --t-btn-radius:        0;
  --t-card-bg:           #000000;
  --t-card-border:       2px solid #ffffff;
  --t-card-shadow:       none;
  --t-card-hover-bg:     #ffffff;
  --t-card-hover-border: 2px solid #ffffff;
  --t-card-hover-shadow: none;
  --t-nav-bg:            #000000;
  --t-nav-border:        2px solid #ffffff;
  --t-heading:           #ffffff;
  --t-body:              #9a9a9a;
  --t-glass:             none;

  background: #000000;
  color: #ffffff;
}

/* Transiciones en escalones, no interpoladas */
body.theme-mono *,
body.theme-mono *::before,
body.theme-mono *::after {
  transition-timing-function: steps(2, end) !important;
  animation-timing-function: steps(6, end) !important;
  transition-duration: 90ms !important;
  border-radius: 0 !important;
  text-shadow: none !important;
}

/* Sin brillos, halos ni desenfoques */
body.theme-mono .bg-orb,
body.theme-mono .hero-spark,
body.theme-mono #cursor-glow,
body.theme-mono .section-divider,
body.theme-mono .bg-grid {
  display: none !important;
}
body.theme-mono #starfield { opacity: 0.35; filter: grayscale(1) contrast(2); }

body.theme-mono .hero-logo { width: min(100%, 415px); }

/* Hover: inversión de color en vez de brillo */
body.theme-mono .activity-card:hover,
body.theme-mono .member-card:hover,
body.theme-mono .work-card:hover,
body.theme-mono .engine-card:hover,
body.theme-mono .fandom-badge:hover {
  background: #ffffff !important;
  transform: none !important;
}
body.theme-mono .activity-card:hover *,
body.theme-mono .member-card:hover *,
body.theme-mono .work-card:hover *,
body.theme-mono .engine-card:hover *,
body.theme-mono .fandom-badge:hover * {
  color: #000000 !important;
}

body.theme-mono .btn-primary,
body.theme-mono .contact-email {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
}
body.theme-mono .btn-primary:hover,
body.theme-mono .contact-email:hover {
  background: #000000 !important;
  color: #ffffff !important;
}
body.theme-mono .btn-secondary {
  background: #000000;
  color: #ffffff;
  border: 2px solid #ffffff;
}
body.theme-mono .btn-secondary:hover { background: #ffffff; color: #000000; }

/* Rojo: solo para lo irreversible o lo que se acaba */
body.theme-mono .plc-btn.is-danger,
body.theme-mono .is-error,
body.theme-mono .inline-status.is-error,
body.theme-mono .quiz-lives,
body.theme-mono .lives-pill,
body.theme-mono .md-report.is-usuario {
  color: #ff0000 !important;
  border-color: #ff0000 !important;
}
body.theme-mono ::selection { background: #ff0000; color: #ffffff; }

body.theme-mono .typewriter-line,
body.theme-mono .member-name,
body.theme-mono .work-meta,
body.theme-mono .timeline-item h3,
body.theme-mono .hero-text-box strong { color: #ffffff; }
body.theme-mono .hero-subtitle,
body.theme-mono .section-intro,
body.theme-mono .member-desc,
body.theme-mono .faq-answer,
body.theme-mono .contact-tagline,
body.theme-mono .footer-subline,
body.theme-mono footer { color: #9a9a9a; }
body.theme-mono footer span { color: #ffffff; }
body.theme-mono .scroll-progress { background: #ffffff; }


/* ════════════════════════════════════════════════════════════════════════════════
   2 · AURORA CRISTALINA — glassmorphism pastel
   ════════════════════════════════════════════════════════════════════════════════ */
body.theme-aurora {
  --pl-cyan:      #5eb3e4;
  --pl-blue:      #7f8ff4;
  --pl-lilac:     #9d7cf0;
  --pl-pink:      #e488c8;
  --pl-deep:      #f4f0fd;
  --pl-void:      #ebe4f9;
  --pl-bg:        #ece5f9;
  --pl-soft:      #4b4266;
  --pl-text:      #2c2740;
  --pl-muted:     #6d6489;
  --pl-white:     #ffffff;
  --pl-grad:      linear-gradient(135deg, #9d7cf0 0%, #7f8ff4 34%, #5eb3e4 68%, #e488c8 100%);
  --pl-grad-soft: linear-gradient(160deg, rgba(255,255,255,0.30), rgba(255,255,255,0.10));
  --pl-panel:     rgba(255, 255, 255, 0.16);
  --pl-panel-alt: rgba(255, 255, 255, 0.10);
  --pl-border:    rgba(255, 255, 255, 0.42);
  --shadow-glow:  0 18px 50px rgba(110, 90, 170, 0.16);

  --t-radius:            22px;
  --t-btn-radius:        999px;
  --t-card-bg:           rgba(255, 255, 255, 0.16);
  --t-card-border:       1px solid rgba(255, 255, 255, 0.38);
  --t-card-shadow:       0 12px 40px rgba(110, 90, 170, 0.14);
  --t-card-hover-bg:     rgba(255, 255, 255, 0.28);
  --t-card-hover-border: 1px solid rgba(255, 255, 255, 0.60);
  --t-card-hover-shadow: 0 20px 54px rgba(110, 90, 170, 0.22);
  --t-nav-bg:            rgba(255, 255, 255, 0.22);
  --t-nav-border:        1px solid rgba(255, 255, 255, 0.42);
  --t-heading:           #33294d;
  --t-body:              #5c5378;
  --t-glass:             blur(14px) saturate(150%);

  background: #ece5f9;
  color: #2c2740;
}

/* La aurora — capa animada por transform, no background-position */
body.theme-aurora::before {
  content: "";
  position: fixed;
  inset: -45%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 28% 30%, rgba(186, 160, 250, 0.90), transparent 55%),
    radial-gradient(circle at 74% 24%, rgba(150, 205, 248, 0.85), transparent 55%),
    radial-gradient(circle at 56% 78%, rgba(248, 183, 226, 0.80), transparent 55%),
    radial-gradient(circle at 16% 74%, rgba(165, 238, 222, 0.60), transparent 52%);
  animation: auroraDrift 48s linear infinite;
  will-change: transform;
}
@keyframes auroraDrift {
  0%   { transform: rotate(0deg)   scale(1.05); }
  50%  { transform: rotate(180deg) scale(1.18); }
  100% { transform: rotate(360deg) scale(1.05); }
}

/* Contraste sobre tema claro */
body.theme-aurora .nav-logo-eyebrow { color: #6d6489; }
body.theme-aurora .nav-links a { color: #453c63; }
body.theme-aurora .nav-links a:hover,
body.theme-aurora .nav-links a.active { color: #6d28d9; }
body.theme-aurora .nav-toggle { border-color: rgba(90, 70, 140, 0.24); }
body.theme-aurora .nav-toggle span { background: #453c63; }
body.theme-aurora .hero-subtitle      { color: #443c60; }
body.theme-aurora .typewriter-line    { color: #8b5cf6; }
body.theme-aurora .hero-text-box strong { color: #7c3aed; }
body.theme-aurora .signal-label       { color: #443c60; }
body.theme-aurora .member-name        { color: #5b21b6; }
body.theme-aurora .member-title       { color: #6d6489; }
body.theme-aurora .member-desc em     { color: #8b5cf6; }
body.theme-aurora .timeline-item h3   { color: #5b21b6; }
body.theme-aurora .work-meta          { color: #6366f1; }
body.theme-aurora .faq-question       { color: #33294d; }
body.theme-aurora .faq-answer         { color: #5c5378; }
body.theme-aurora .contact-tagline    { color: #7c6bb0; }
body.theme-aurora .section-intro      { color: #5c5378; }
body.theme-aurora .scroll-cue         { color: #8b5cf6; }
body.theme-aurora footer              { border-color: rgba(90,70,140,0.12); color: #6d6489; }
body.theme-aurora footer span         { color: #c026d3; }
body.theme-aurora .footer-subline     { color: #6d6489; }
body.theme-aurora .hero-logo          { width: min(100%, 415px); }
body.theme-aurora #starfield          { opacity: 0.10; }
body.theme-aurora .bg-grid            { opacity: 0.05; }
body.theme-aurora .bg-orb-a { background: radial-gradient(circle, rgba(186,160,250,0.20) 0%, transparent 72%); }
body.theme-aurora .bg-orb-b { background: radial-gradient(circle, rgba(150,205,248,0.18) 0%, transparent 72%); }
body.theme-aurora .bg-orb-c { background: radial-gradient(circle, rgba(248,183,226,0.16) 0%, transparent 72%); }

body.theme-aurora .btn-secondary {
  background: rgba(255, 255, 255, 0.30);
  border-color: rgba(255, 255, 255, 0.55);
  color: #453c63;
}
body.theme-aurora .btn-secondary:hover { background: rgba(255, 255, 255, 0.48); }


/* ════════════════════════════════════════════════════════════════════════════════
   3 · PLANO TÁCTICO — cianotipo y papel milimetrado
   ════════════════════════════════════════════════════════════════════════════════ */
body.theme-blueprint {
  --pl-cyan:      #7fdbff;
  --pl-blue:      #48a9e6;
  --pl-lilac:     #9fd8ff;
  --pl-pink:      #ffd166;
  --pl-deep:      #0e2c47;
  --pl-void:      #081b2e;
  --pl-bg:        #0a2138;
  --pl-soft:      #c3e4f7;
  --pl-text:      #eaf6ff;
  --pl-muted:     #86aec9;
  --pl-white:     #ffffff;
  --pl-grad:      linear-gradient(135deg, #7fdbff 0%, #48a9e6 45%, #ffd166 100%);
  --pl-grad-soft: linear-gradient(160deg, rgba(127,219,255,0.10), rgba(255,209,102,0.06));
  --pl-panel:     rgba(9, 32, 53, 0.82);
  --pl-panel-alt: rgba(127, 219, 255, 0.04);
  --pl-border:    rgba(127, 219, 255, 0.32);
  --shadow-glow:  4px 4px 0 rgba(0, 229, 255, 0.30);

  --t-radius:            3px;
  --t-btn-radius:        3px;
  --t-card-bg:           rgba(9, 32, 53, 0.86);
  --t-card-border:       1px solid rgba(127, 219, 255, 0.42);
  --t-card-shadow:       4px 4px 0 rgba(0, 229, 255, 0.28);
  --t-card-hover-bg:     rgba(13, 44, 71, 0.92);
  --t-card-hover-border: 1px solid rgba(127, 219, 255, 0.78);
  --t-card-hover-shadow: 7px 7px 0 rgba(0, 229, 255, 0.42);
  --t-nav-bg:            rgba(8, 27, 45, 0.94);
  --t-nav-border:        1px solid rgba(127, 219, 255, 0.34);
  --t-heading:           #eaf6ff;
  --t-body:              #a8c9de;
  --t-glass:             none;

  color: #eaf6ff;
  background-color: #0a2138;
  /* Cuadrícula: fina cada 24px, gruesa cada 120px */
  background-image:
    repeating-linear-gradient(0deg,  rgba(127,219,255,0.30) 0 1.4px, transparent 1.4px 120px),
    repeating-linear-gradient(90deg, rgba(127,219,255,0.30) 0 1.4px, transparent 1.4px 120px),
    repeating-linear-gradient(0deg,  rgba(127,219,255,0.13) 0 1px,   transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(127,219,255,0.13) 0 1px,   transparent 1px 24px);
}

/* Halo azulado del cianotipo (estático) */
body.theme-blueprint::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(72, 169, 230, 0.22), transparent 62%);
}

body.theme-blueprint .bg-orb,
body.theme-blueprint .bg-grid { display: none !important; }
body.theme-blueprint #starfield { opacity: 0.18; }
body.theme-blueprint .hero-logo { width: min(100%, 415px); }

/* Datos numéricos y etiquetas técnicas: monoespaciada */
body.theme-blueprint .signal-value,
body.theme-blueprint .work-meta,
body.theme-blueprint .member-gen,
body.theme-blueprint .work-tag,
body.theme-blueprint .hero-kicker,
body.theme-blueprint .nav-logo-eyebrow {
  font-family: "Space Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
}

body.theme-blueprint .typewriter-line  { color: #ffd166; }
body.theme-blueprint .hero-subtitle    { color: #c3e4f7; }
body.theme-blueprint .hero-text-box strong { color: #7fdbff; }
body.theme-blueprint .signal-label     { color: #c3e4f7; }
body.theme-blueprint .member-name      { color: #ffd166; }
body.theme-blueprint .member-desc em   { color: #7fdbff; }
body.theme-blueprint .timeline-item h3 { color: #7fdbff; }
body.theme-blueprint .work-meta        { color: #7fdbff; }
body.theme-blueprint .faq-question     { color: #c3e4f7; }
body.theme-blueprint .faq-answer       { color: #86aec9; }
body.theme-blueprint .contact-tagline  { color: #7fdbff; }
body.theme-blueprint .section-intro    { color: #86aec9; }
body.theme-blueprint .scroll-cue       { color: #48a9e6; }
body.theme-blueprint footer            { border-color: rgba(127,219,255,0.16); color: #86aec9; }
body.theme-blueprint footer span       { color: #ffd166; }
body.theme-blueprint .footer-subline   { color: #86aec9; }

body.theme-blueprint .btn-primary,
body.theme-blueprint .contact-email {
  box-shadow: 4px 4px 0 rgba(0, 229, 255, 0.35);
}
body.theme-blueprint .btn-primary:hover,
body.theme-blueprint .contact-email:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(0, 229, 255, 0.5);
}
body.theme-blueprint .btn-secondary {
  border-color: rgba(127, 219, 255, 0.45);
  color: #c3e4f7;
  box-shadow: 3px 3px 0 rgba(0, 229, 255, 0.22);
}


/* ════════════════════════════════════════════════════════════════════════════════
   4 · ATARDECER CÁLIDO — lo-fi mate
   ════════════════════════════════════════════════════════════════════════════════ */
body.theme-sunset {
  --pl-cyan:      #c4703f;
  --pl-blue:      #b25c35;
  --pl-lilac:     #a9643f;
  --pl-pink:      #d9834f;
  --pl-deep:      #fdf6ec;
  --pl-void:      #f6ead9;
  --pl-bg:        #f7ecdc;
  --pl-soft:      #6b5544;
  --pl-text:      #3d2f26;
  --pl-muted:     #8a7460;
  --pl-white:     #fffaf3;
  --pl-grad:      linear-gradient(135deg, #d9834f 0%, #c4703f 40%, #a9643f 75%, #8c5a3c 100%);
  --pl-grad-soft: linear-gradient(160deg, rgba(217,131,79,0.10), rgba(255,214,165,0.14));
  --pl-panel:     #fffaf3;
  --pl-panel-alt: rgba(196, 112, 63, 0.05);
  --pl-border:    rgba(160, 120, 90, 0.20);
  --shadow-glow:  0 22px 60px rgba(196, 112, 63, 0.16);

  --t-radius:            20px;
  --t-btn-radius:        50px;
  --t-card-bg:           #fffaf3;
  --t-card-border:       1px solid rgba(160, 120, 90, 0.16);
  --t-card-shadow:       0 18px 44px rgba(196, 112, 63, 0.13), 0 3px 10px rgba(196, 112, 63, 0.07);
  --t-card-hover-bg:     #fffdf9;
  --t-card-hover-border: 1px solid rgba(196, 112, 63, 0.32);
  --t-card-hover-shadow: 0 26px 60px rgba(196, 112, 63, 0.20), 0 5px 14px rgba(196, 112, 63, 0.10);
  --t-nav-bg:            rgba(253, 246, 236, 0.92);
  --t-nav-border:        1px solid rgba(160, 120, 90, 0.16);
  --t-heading:           #3d2f26;
  --t-body:              #6b5544;
  --t-glass:             none;

  color: #3d2f26;
  background:
    radial-gradient(circle at 14% 8%,  rgba(255, 214, 165, 0.60), transparent 46%),
    radial-gradient(circle at 86% 18%, rgba(255, 183, 148, 0.42), transparent 46%),
    radial-gradient(circle at 50% 96%, rgba(238, 199, 160, 0.38), transparent 52%),
    #f7ecdc;
}

body.theme-sunset .nav-logo-eyebrow { color: #8a7460; }
body.theme-sunset .nav-links a { color: #5c483a; }
body.theme-sunset .nav-links a:hover,
body.theme-sunset .nav-links a.active { color: #b25c35; }
body.theme-sunset .nav-toggle { border-color: rgba(160, 120, 90, 0.26); }
body.theme-sunset .nav-toggle span { background: #5c483a; }
body.theme-sunset .hero-subtitle      { color: #5c483a; }
body.theme-sunset .typewriter-line    { color: #b25c35; }
body.theme-sunset .hero-text-box strong { color: #a9451f; }
body.theme-sunset .signal-label       { color: #5c483a; }
body.theme-sunset .member-name        { color: #8c4a24; }
body.theme-sunset .member-title       { color: #8a7460; }
body.theme-sunset .member-desc em     { color: #b25c35; }
body.theme-sunset .timeline-item h3   { color: #8c4a24; }
body.theme-sunset .work-meta          { color: #b25c35; }
body.theme-sunset .faq-question       { color: #3d2f26; }
body.theme-sunset .faq-answer         { color: #6b5544; }
body.theme-sunset .contact-tagline    { color: #b25c35; }
body.theme-sunset .section-intro      { color: #6b5544; }
body.theme-sunset .scroll-cue         { color: #c4703f; }
body.theme-sunset footer              { border-color: rgba(160,120,90,0.16); color: #8a7460; }
body.theme-sunset footer span         { color: #b25c35; }
body.theme-sunset .footer-subline     { color: #8a7460; }
body.theme-sunset .hero-logo          { width: min(100%, 415px); }
body.theme-sunset #starfield          { opacity: 0.07; }
body.theme-sunset .bg-grid            { opacity: 0.04; }
body.theme-sunset .bg-orb-a { background: radial-gradient(circle, rgba(255,183,148,0.28) 0%, transparent 72%); }
body.theme-sunset .bg-orb-b { background: radial-gradient(circle, rgba(255,214,165,0.24) 0%, transparent 72%); }
body.theme-sunset .bg-orb-c { background: radial-gradient(circle, rgba(214,160,120,0.18) 0%, transparent 72%); }

/* Degradado suave de arriba abajo */
body.theme-sunset .btn-primary,
body.theme-sunset .contact-email {
  background: linear-gradient(180deg, #e0955f 0%, #c4703f 100%) !important;
  color: #fffaf3 !important;
  border: none !important;
  box-shadow: 0 8px 20px rgba(196, 112, 63, 0.28);
}
body.theme-sunset .btn-primary:hover,
body.theme-sunset .contact-email:hover {
  background: linear-gradient(180deg, #e8a26e 0%, #cd7b47 100%) !important;
  box-shadow: 0 12px 28px rgba(196, 112, 63, 0.34);
}
body.theme-sunset .btn-secondary {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(253,246,236,0.85));
  border-color: rgba(160, 120, 90, 0.28);
  color: #5c483a;
}
body.theme-sunset .btn-secondary:hover { background: #fffdf9; }


/* ════════════════════════════════════════════════════════════════════════════════
   BLOQUE COMPARTIDO — el contrato de --t-* aplicado a los cuatro temas
   ════════════════════════════════════════════════════════════════════════════════ */
body.theme-mono .site-nav,
body.theme-aurora .site-nav,
body.theme-blueprint .site-nav,
body.theme-sunset .site-nav {
  background: var(--t-nav-bg);
  border-bottom: var(--t-nav-border);
  -webkit-backdrop-filter: var(--t-glass);
  backdrop-filter: var(--t-glass);
}

body.theme-mono .activity-card,
body.theme-mono .member-card,
body.theme-mono .work-card,
body.theme-mono .engine-card,
body.theme-mono .faq-item,
body.theme-mono .signal-card,
body.theme-mono .fandom-badge,
body.theme-mono .contact-box,
body.theme-mono .hero-text-box,
body.theme-aurora .activity-card,
body.theme-aurora .member-card,
body.theme-aurora .work-card,
body.theme-aurora .engine-card,
body.theme-aurora .faq-item,
body.theme-aurora .signal-card,
body.theme-aurora .fandom-badge,
body.theme-aurora .contact-box,
body.theme-aurora .hero-text-box,
body.theme-blueprint .activity-card,
body.theme-blueprint .member-card,
body.theme-blueprint .work-card,
body.theme-blueprint .engine-card,
body.theme-blueprint .faq-item,
body.theme-blueprint .signal-card,
body.theme-blueprint .fandom-badge,
body.theme-blueprint .contact-box,
body.theme-blueprint .hero-text-box,
body.theme-sunset .activity-card,
body.theme-sunset .member-card,
body.theme-sunset .work-card,
body.theme-sunset .engine-card,
body.theme-sunset .faq-item,
body.theme-sunset .signal-card,
body.theme-sunset .fandom-badge,
body.theme-sunset .contact-box,
body.theme-sunset .hero-text-box {
  background: var(--t-card-bg);
  border: var(--t-card-border);
  border-radius: var(--t-radius);
  box-shadow: var(--t-card-shadow);
  -webkit-backdrop-filter: var(--t-glass);
  backdrop-filter: var(--t-glass);
}

body.theme-mono .activity-card:hover,
body.theme-mono .member-card:hover,
body.theme-mono .work-card:hover,
body.theme-mono .engine-card:hover,
body.theme-aurora .activity-card:hover,
body.theme-aurora .member-card:hover,
body.theme-aurora .work-card:hover,
body.theme-aurora .engine-card:hover,
body.theme-blueprint .activity-card:hover,
body.theme-blueprint .member-card:hover,
body.theme-blueprint .work-card:hover,
body.theme-blueprint .engine-card:hover,
body.theme-sunset .activity-card:hover,
body.theme-sunset .member-card:hover,
body.theme-sunset .work-card:hover,
body.theme-sunset .engine-card:hover {
  background: var(--t-card-hover-bg);
  border: var(--t-card-hover-border);
  box-shadow: var(--t-card-hover-shadow);
}

body.theme-mono .activity-card h3,
body.theme-mono .engine-card h3,
body.theme-mono .work-card h3,
body.theme-aurora .activity-card h3,
body.theme-aurora .engine-card h3,
body.theme-aurora .work-card h3,
body.theme-blueprint .activity-card h3,
body.theme-blueprint .engine-card h3,
body.theme-blueprint .work-card h3,
body.theme-sunset .activity-card h3,
body.theme-sunset .engine-card h3,
body.theme-sunset .work-card h3 { color: var(--t-heading); }

body.theme-mono .activity-card p,
body.theme-mono .engine-card p,
body.theme-mono .work-card p,
body.theme-mono .contact-box p,
body.theme-mono .timeline-item p,
body.theme-aurora .activity-card p,
body.theme-aurora .engine-card p,
body.theme-aurora .work-card p,
body.theme-aurora .contact-box p,
body.theme-aurora .timeline-item p,
body.theme-blueprint .activity-card p,
body.theme-blueprint .engine-card p,
body.theme-blueprint .work-card p,
body.theme-blueprint .contact-box p,
body.theme-blueprint .timeline-item p,
body.theme-sunset .activity-card p,
body.theme-sunset .engine-card p,
body.theme-sunset .work-card p,
body.theme-sunset .contact-box p,
body.theme-sunset .timeline-item p { color: var(--t-body); }

body.theme-mono .btn-primary,
body.theme-mono .btn-secondary,
body.theme-mono .contact-email,
body.theme-mono .hero-pills li,
body.theme-mono .hero-kicker,
body.theme-aurora .btn-primary,
body.theme-aurora .btn-secondary,
body.theme-aurora .contact-email,
body.theme-aurora .hero-pills li,
body.theme-aurora .hero-kicker,
body.theme-blueprint .btn-primary,
body.theme-blueprint .btn-secondary,
body.theme-blueprint .contact-email,
body.theme-blueprint .hero-pills li,
body.theme-blueprint .hero-kicker,
body.theme-sunset .btn-primary,
body.theme-sunset .btn-secondary,
body.theme-sunset .contact-email,
body.theme-sunset .hero-pills li,
body.theme-sunset .hero-kicker { border-radius: var(--t-btn-radius); }

/* Desplegable de temas */
body.theme-mono .theme-dropdown,
body.theme-aurora .theme-dropdown,
body.theme-blueprint .theme-dropdown,
body.theme-sunset .theme-dropdown {
  background: var(--t-card-bg);
  border: var(--t-card-border);
  border-radius: var(--t-radius);
  -webkit-backdrop-filter: var(--t-glass);
  backdrop-filter: var(--t-glass);
}
body.theme-mono .theme-picker-btn,
body.theme-aurora .theme-picker-btn,
body.theme-blueprint .theme-picker-btn,
body.theme-sunset .theme-picker-btn {
  background: var(--t-card-bg);
  border: var(--t-card-border);
  color: var(--pl-text);
  -webkit-backdrop-filter: var(--t-glass);
  backdrop-filter: var(--t-glass);
}
body.theme-mono .theme-option,
body.theme-aurora .theme-option,
body.theme-blueprint .theme-option,
body.theme-sunset .theme-option { color: var(--pl-text); }
body.theme-mono .theme-option:hover,
body.theme-aurora .theme-option:hover,
body.theme-blueprint .theme-option:hover,
body.theme-sunset .theme-option:hover { background: var(--t-card-hover-bg); }
body.theme-mono .theme-option.is-active,
body.theme-aurora .theme-option.is-active,
body.theme-blueprint .theme-option.is-active,
body.theme-sunset .theme-option.is-active { color: var(--pl-pink); font-weight: 800; }

/* Modo bajo rendimiento: sin desenfoque de cristal */
body.perf-low.theme-aurora {
  --t-card-bg:       rgba(255, 255, 255, 0.62);
  --t-card-hover-bg: rgba(255, 255, 255, 0.76);
  --t-nav-bg:        rgba(255, 255, 255, 0.80);
  --t-glass:         none;
}

/* Contraste de píldoras y hero-kicker en los temas claros */
body.theme-aurora .hero-pills li,
body.theme-aurora .hero-kicker {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.70);
  color: #453c63;
}
body.theme-sunset .hero-pills li,
body.theme-sunset .hero-kicker {
  background: rgba(255, 255, 255, 0.62);
  border-color: rgba(160, 120, 90, 0.24);
  color: #5c483a;
}
body.theme-aurora .nav-logo-eyebrow { color: #5d5478; }
body.theme-sunset .nav-logo-eyebrow { color: #7a6450; }

/* ── Remates de Alma Monocroma — red de seguridad con grayscale ── */
body.theme-mono #hero-logo,
body.theme-mono .hero-pills li,
body.theme-mono .activity-icon,
body.theme-mono .engine-icon,
body.theme-mono .theme-picker-icon,
body.theme-mono .member-avatar {
  filter: grayscale(1) contrast(1.08);
}

/* Colores que quedaban en el lila del tema base */
body.theme-mono .scroll-cue,
body.theme-mono .scroll-cue span,
body.theme-mono .nav-logo-text,
body.theme-mono .signal-value,
body.theme-mono .section-title { color: #ffffff; }
body.theme-mono .nav-logo-eyebrow { color: #9a9a9a; }
body.theme-mono .nav-links a { color: #ffffff; }
body.theme-mono .nav-links a:hover,
body.theme-mono .nav-links a.active { color: #ff0000; }

/* ════════════════════════════════════════════════════════════════
   TEMA PUZZLEWEEN — Halloween 2026
   Calabaza · Negro de medianoche · Morado de bruja
   ----------------------------------------------------------------
   Se enciende para todo el mundo desde Moderación → «🎨 Temas del
   sitio», o solo lo ve la cuenta dueña mientras esté apagado
   (ver site_themes, sección 98 del esquema, y syncTemasDelSitio()
   en js/nucleo/theme-switcher.js).

   NO ES UN RECOLOR. La paleta es lo de menos: el tema monta una
   ESCENA. Cielo estrellado que titila, luna con cráteres velada por
   nubes que la cruzan, telarañas en las dos esquinas de arriba con
   una araña colgando de un hilo, murciélagos, y al pie un horizonte
   con un árbol seco, una casa encantada con las ventanas
   encendidas, una verja de púas y un cementerio, todo bajo niebla.

   Nada de eso son emoji ni imágenes: son SVG que construye
   `theme-switcher.js` en un único contenedor `.pw-noche` (una sola
   inserción en el DOM; ninguna página tiene que saber que existe).
   Un 🦇 a 14px sobre morado es una mancha marrón, y una telaraña de
   radios rectos con anillos perfectos se lee como un radar: la de
   aquí tiene los hilos COLGANDO entre radio y radio, que es la
   diferencia. Todo va detrás del contenido: `main`, `footer` y
   `.site-header` viven en z-index 2 desde styles.css, y aquí no se
   pasa de 1.

   ── SOBRE LA OPACIDAD ──────────────────────────────────────────
   Un fondo con luna, niebla y bichos volando es exactamente el
   sitio donde un panel semitransparente deja de leerse. Así que
   aquí los paneles son MÁS opacos que en el resto de temas, no
   menos: --pl-panel pasa de 0.76 a 0.94. Es al revés de lo que
   pide el instinto —«si el fondo es bonito, que se vea a través»—
   y es justo por eso que se anota: lo que se ve a través de un
   párrafo es un murciélago cruzándole las letras.

   La regla que sigue todo este bloque, y el matiz que importa:
     · el texto y los paneles van a opacidad 1;
     · todo lo decorativo lleva pointer-events: none;
     · nada decorativo se pone por encima del contenido salvo la
       viñeta, que es un degradado a negro en los bordes y no
       tapa nada legible;
     · **ningún adorno CLARO pasa de 0.35.** Los adornos oscuros sí
       pueden ir más arriba —el horizonte va a opacidad 1— porque el
       texto de este tema es claro: una silueta negra detrás de una
       letra crema la hace MÁS legible, no menos. Lo que no puede
       ser es al revés. La luna es el único adorno luminoso y es
       `fixed`: el texto le pasa por encima al hacer scroll, así
       que se queda velada, como una luna entre niebla. Subirla a
       0.9 se ve precioso en el hero y deja ilegible el párrafo que
       le pase por delante tres pantallas más abajo.
   ════════════════════════════════════════════════════════════════ */

/* ── La tipografía del evento ──────────────────────────────────
   Solo se descarga cuando hace falta: ningún selector la usa
   fuera de body.theme-puzzleween, así que el navegador no pide el
   archivo mientras el tema esté apagado. `swap` para que el texto
   se lea desde el primer momento con la fuente de siempre. */
@font-face {
  font-family: "MidnightMinutes";
  src: url("../../assets/fonts/MidnightMinutes_DEMO.otf") format("opentype");
  font-display: swap;
}

/* Toda la página, como pidió el encargo. `body *` y no solo `body`
   porque media web fija su propia font-family (los títulos usan
   var(--font-heading), las tarjetas heredan de sus componentes) y
   heredar no bastaría.

   Con dos excepciones, abajo: lo que es monoespaciado lo es por un
   motivo —una columna de código o un id que hay que copiar a mano—
   y una tipografía de terror con ancho variable lo rompe. */
body.theme-puzzleween,
body.theme-puzzleween * {
  font-family: "MidnightMinutes", "Nunito", sans-serif;
  letter-spacing: 0.04em;
}

body.theme-puzzleween code,
body.theme-puzzleween kbd,
body.theme-puzzleween samp,
body.theme-puzzleween pre,
body.theme-puzzleween .hb-mono,
body.theme-puzzleween .dict-mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0;
}

/* MidnightMinutes es de un solo grosor: pedirle negrita obliga al
   navegador a fabricarla engordando los trazos, y en una letra de
   display eso emborrona. Los títulos se distinguen por tamaño y
   por color, que es lo que ya hacen en este tema. */
body.theme-puzzleween h1,
body.theme-puzzleween h2,
body.theme-puzzleween h3,
body.theme-puzzleween h4,
body.theme-puzzleween .nav-logo-text,
body.theme-puzzleween .hall-title {
  font-weight: 500;
}

/* ── 1. Paleta ─────────────────────────────────────────────── */
body.theme-puzzleween {
  --pl-cyan:      #ff9c33;   /* calabaza: el acento principal */
  --pl-blue:      #8b2fd0;   /* morado de bruja */
  --pl-lilac:     #b45cf0;
  --pl-pink:      #ff6b1a;
  --pl-deep:      #170a1f;
  --pl-void:      #08040c;
  --pl-soft:      #f3d9bb;
  --pl-text:      #fbeee0;
  --pl-muted:     #bfa3d4;
  --pl-white:     #fff6ea;
  --pl-grad:      linear-gradient(135deg, #ffb84d 0%, #ff7a1f 34%, #b45cf0 70%, #8b2fd0 100%);
  --pl-grad-soft: linear-gradient(160deg, rgba(255, 156, 51, 0.12), rgba(139, 47, 208, 0.12), rgba(255, 107, 26, 0.10));

  /* Ver el bloque de opacidad de arriba: 0.94, no 0.76. */
  --pl-panel:     rgba(21, 9, 28, 0.94);
  --pl-panel-alt: rgba(255, 156, 51, 0.06);
  --pl-border:    rgba(255, 156, 51, 0.20);
  --shadow-glow:  0 0 40px rgba(139, 47, 208, 0.26), 0 22px 60px rgba(0, 0, 0, 0.72);

  /* Noche de octubre, en capas. La luz viene de ABAJO —de algo
     encendido a ras de suelo— y no de arriba: por eso el degradado
     se calienta según baja en vez de aclararse arriba, que es lo
     que haría un amanecer. Sobre eso:

       · el halo frío de la luna, arriba a la derecha, que es de
         donde de verdad viene la luna del adorno: sin este círculo
         el SVG parece pegado sobre el cielo en vez de estar EN él;
       · dos bolsas de morado a media altura, una a cada lado, que
         le dan volumen al cielo — un degradado vertical liso se ve
         plano en pantallas anchas;
       · una franja de bruma justo donde va el horizonte, para que
         la silueta negra no arranque de golpe;
       · el resplandor de calabaza al pie.

     `fixed` para que el cielo no haga scroll con el contenido: si
     se mueve, la luna del adorno —que sí está fija— se despega. */
  background:
    radial-gradient(circle 22rem at 82% 10%, rgba(255, 214, 150, 0.10), transparent 70%),
    radial-gradient(ellipse 46% 34% at 88% 20%, rgba(150, 60, 210, 0.16), transparent 72%),
    radial-gradient(ellipse 52% 38% at 8%  34%, rgba(96, 32, 148, 0.18), transparent 74%),
    radial-gradient(ellipse 120% 16% at 50% 84%, rgba(120, 74, 150, 0.20), transparent 76%),
    radial-gradient(ellipse 90% 30% at 50% 102%, rgba(255, 122, 31, 0.26), transparent 72%),
    linear-gradient(180deg,
      #06030a 0%,
      #0f0718 22%,
      #180b22 44%,
      #23102a 64%,
      #2e1425 82%,
      #1b0c13 100%);
  background-attachment: fixed;
}

/* ── 2. Nav ────────────────────────────────────────────────── */
body.theme-puzzleween .site-nav {
  background: rgba(10, 5, 15, 0.94);
  border-color: rgba(255, 156, 51, 0.22);
  box-shadow: 0 8px 30px rgba(139, 47, 208, 0.16);
}

body.theme-puzzleween .nav-links a { color: #e8cfa8; }
body.theme-puzzleween .nav-links a:hover,
body.theme-puzzleween .nav-links a.active {
  color: #ffb84d;
  background: rgba(255, 156, 51, 0.10);
  box-shadow: 0 0 0 1px rgba(255, 156, 51, 0.20) inset;
}

/* El logo del nav titila como una vela: nunca se apaga del todo
   (0.82 abajo), porque un logo que parpadea a negro se lee como
   un error de carga y no como una llama. */
body.theme-puzzleween .nav-logo-text {
  animation: pwVela 3.4s ease-in-out infinite;
  text-shadow: 0 0 14px rgba(255, 140, 40, 0.5);
}

/* ── 3. Tarjetas y paneles ─────────────────────────────────── */
body.theme-puzzleween .activity-card,
body.theme-puzzleween .member-card,
body.theme-puzzleween .work-card,
body.theme-puzzleween .engine-card,
body.theme-puzzleween .faq-item,
body.theme-puzzleween .signal-card,
body.theme-puzzleween .fandom-badge,
body.theme-puzzleween .contact-box,
body.theme-puzzleween .panel-card,
body.theme-puzzleween .quiz-card {
  background: rgba(24, 11, 32, 0.94);
  border-color: rgba(255, 156, 51, 0.18);
}

body.theme-puzzleween .activity-card:hover,
body.theme-puzzleween .work-card:hover,
body.theme-puzzleween .engine-card:hover {
  border-color: rgba(255, 156, 51, 0.42);
  box-shadow: 0 0 26px rgba(255, 122, 31, 0.20), 0 18px 44px rgba(0, 0, 0, 0.6);
}

/* ── 4. Texto y titulares ──────────────────────────────────── */
body.theme-puzzleween .section-title,
body.theme-puzzleween .hero-title,
body.theme-puzzleween .gradient-text {
  background-image: linear-gradient(120deg, #ffd79a, #ff9c33 46%, #b45cf0 100%);
}

body.theme-puzzleween .hero-title {
  text-shadow: 0 0 32px rgba(255, 122, 31, 0.28);
}

/* ── 5. Botones ────────────────────────────────────────────── */
body.theme-puzzleween .btn-primary {
  background: linear-gradient(135deg, #ff9c33, #ff6b1a 55%, #8b2fd0);
  color: #1a0a04;
  box-shadow: 0 10px 30px rgba(255, 107, 26, 0.32);
}
body.theme-puzzleween .btn-primary:hover {
  box-shadow: 0 12px 38px rgba(255, 122, 31, 0.46);
}
body.theme-puzzleween .btn-secondary {
  border-color: rgba(255, 156, 51, 0.42);
  color: #ffb84d;
}
body.theme-puzzleween .btn-secondary:hover {
  background: rgba(255, 156, 51, 0.12);
}

/* ── 6. El desplegable de temas ────────────────────────────── */
body.theme-puzzleween .theme-picker-btn {
  border-color: rgba(255, 156, 51, 0.34);
  background: rgba(255, 156, 51, 0.08);
}
body.theme-puzzleween .theme-dropdown {
  background: rgba(14, 6, 20, 0.97);
  border-color: rgba(255, 156, 51, 0.24);
}
body.theme-puzzleween .theme-option.is-active {
  background: rgba(255, 156, 51, 0.16);
  color: #ffb84d;
}

/* ════════════════════════════════════════════════════════════════
   LA NOCHE — el escenario de Puzzleween
   Todo esto vive dentro de .pw-noche, que inserta theme-switcher.js
   al activar el tema y retira al salir. Un solo nodo; ninguna de las
   páginas del sitio declara nada.

   Nada de esto son emoji. Un 🦇 a 14px sobre morado es una mancha
   marrón, y una telaraña de radios rectos con anillos perfectos se
   lee como un radar. Son SVG construidos: la telaraña tiene los
   hilos COLGANDO entre radio y radio, el murciélago tiene el borde
   de fuga festoneado y la araña tiene las patas dobladas.

   El orden de profundidad, de fondo a frente:
     estrellas → luna → nubes → telarañas → araña → murciélagos →
     horizonte → niebla
   ════════════════════════════════════════════════════════════════ */

.pw-noche {
  position: fixed;
  inset: 0;
  z-index: 1;                 /* el contenido va en 2 */
  pointer-events: none;
  overflow: hidden;
}

/* ── El cielo ──────────────────────────────────────────────── */
.pw-cielo { position: absolute; inset: 0; }

.pw-estrella {
  position: absolute;
  width: var(--pw-e, 2px);
  height: var(--pw-e, 2px);
  border-radius: 50%;
  background: #fff4e2;
  opacity: 0;
  box-shadow: 0 0 4px rgba(255, 236, 200, 0.8);
  animation: pwTitilar var(--pw-dur, 4s) ease-in-out infinite;
  animation-delay: var(--pw-ret, 0s);
}

/* ── La luna ───────────────────────────────────────────────── */
/* Velada, no brillante. Es el único adorno LUMINOSO y va `fixed`:
   el texto le pasa por encima al hacer scroll, y un disco color
   crema a plena opacidad deja ilegible el párrafo que le cruce. A
   0.3, con su halo, se lee como una luna entre bruma — que es
   justo la luna que quiere esta escena. */
.pw-luna {
  position: absolute;
  /* Abajo y a la izquierda de la esquina, para que libre la telaraña
     de la derecha: las dos a media opacidad y superpuestas se
     emborronan en vez de leerse como dos cosas. */
  top: 9vh;
  right: 11vw;
  width: 15rem;
  height: 15rem;
  opacity: 0.3;
  filter:
    drop-shadow(0 0 2.5rem rgba(255, 216, 150, 0.5))
    drop-shadow(0 0 7rem rgba(255, 170, 70, 0.28));
}

/* ── Nubes ─────────────────────────────────────────────────── */
/* Del color del cielo, no grises: una nube gris sobre un cielo
   morado es una mancha. Estas tienen que leerse como que TAPAN. */
.pw-nube {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%,
    rgba(22, 10, 30, 0.94), rgba(22, 10, 30, 0) 72%);
  filter: blur(7px);
}
.pw-nube.n1 { top:  7vh; width: 26rem; height: 5.5rem; animation: pwNube 58s linear infinite; }
.pw-nube.n2 { top: 12vh; width: 17rem; height: 3.6rem; animation: pwNube 82s linear infinite; animation-delay: -30s; opacity: 0.75; }
.pw-nube.n3 { top: 26vh; width: 34rem; height: 7rem;   animation: pwNube 110s linear infinite; animation-delay: -68s; opacity: 0.5; }

/* ── Telarañas ─────────────────────────────────────────────── */
/* En las esquinas de verdad (0,0), no flotando bajo la barra: una
   telaraña se agarra a un rincón, y el rincón de la página es el
   rincón de la ventana. */
.pw-tela {
  position: absolute;
  top: 0;
  width: 13rem;
  height: 13rem;
  opacity: 0.34;
  overflow: visible;
}
.pw-tela.izq { left: 0; }
.pw-tela.der { right: 0; transform: scaleX(-1); }

.pl-tela-radio,
.pl-tela-hilo {
  fill: none;
  stroke: #fff3e2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
/* Los radios sostienen la tela y son un pelo más gruesos que los
   hilos que cuelgan entre ellos. Es así en una telaraña de verdad y
   es lo que le da profundidad a esta. */
.pl-tela-radio { stroke-width: 1.1px;  opacity: 1; }
.pl-tela-hilo  { stroke-width: 0.7px;  opacity: 0.7; }

/* ── La araña, colgando de la telaraña izquierda ───────────── */
/* El hilo y la araña son dos elementos con el MISMO punto de giro,
   arriba del todo: así el hilo se mantiene recto mientras el
   conjunto se balancea, como un péndulo. */
.pw-hilo {
  position: absolute;
  top: 0;
  left: 7.5rem;
  width: 1px;
  height: 7rem;
  background: linear-gradient(to bottom,
    rgba(255, 243, 226, 0), rgba(255, 243, 226, 0.42));
  transform-origin: 50% 0;
  animation: pwColumpio 9s ease-in-out infinite;
}
.pw-arana {
  position: absolute;
  top: 7rem;
  left: 7.5rem;
  width: 2.4rem;
  height: 1.85rem;
  margin-left: -1.2rem;
  opacity: 0.7;
  transform-origin: 1.2rem -7rem;
  animation: pwColumpio 9s ease-in-out infinite;
}
.pl-arana-patas path {
  fill: none;
  stroke: #0d0812;
  stroke-width: 2.1;
  stroke-linecap: round;
}

/* ── Murciélagos ───────────────────────────────────────────── */
/* El vuelo va en el contenedor y el aleteo en el SVG: una sola
   animación no puede llevar el translate y el scale por caminos
   independientes. */
.pw-murcielago {
  position: absolute;
  left: 100%;
  width: var(--pw-tam, 34px);
  opacity: var(--pw-op, 0.55);
  animation: pwVuelo var(--pw-dur, 22s) linear infinite;
  animation-delay: var(--pw-ret, 0s);
}
.pw-bat {
  display: block;
  width: 100%;
  height: auto;
  /* Silueta oscura con un filo de luna: sin ese resplandor frío, un
     negro sobre morado oscuro desaparece y solo se intuye el
     movimiento. */
  color: #130b1c;
  filter:
    drop-shadow(0 0 2px rgba(196, 150, 255, 0.45))
    drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
  transform-origin: 50% 40%;
  animation: pwAleteo var(--pw-aleteo, 0.32s) ease-in-out infinite;
}

/* ── El horizonte ──────────────────────────────────────────── */
/* Árbol seco, casa encantada, verja y lápidas. Del mismo negro que
   el fondo de abajo: no es un dibujo pegado encima, es la silueta
   del suelo. Puede ir a opacidad alta —va a 1— porque es OSCURO y
   el texto de este tema es claro: una silueta negra detrás de una
   letra crema la hace más legible, no menos. */
.pw-horizonte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 13rem;
}
.pw-horizonte .pl-loma,
.pw-horizonte .pl-siluetas path,
.pw-horizonte .pl-verja { fill: #050208; }
.pw-horizonte .pl-loma { fill: #07030c; }
.pl-arbol path {
  fill: none;
  stroke: #050208;
  stroke-linecap: round;
}
/* Las ventanas encendidas. Son lo único cálido de toda la escena y
   por eso funcionan: dos puntos de vela en una casa negra dicen
   «hay alguien dentro» mejor que iluminar la casa entera. */
.pl-ventana {
  fill: #ffb347;
  filter: drop-shadow(0 0 6px rgba(255, 150, 40, 0.85));
  animation: pwVela 3.1s ease-in-out infinite;
}
.pl-ventana-torre { animation-duration: 4.7s; animation-delay: -1.6s; }

/* ── Niebla ────────────────────────────────────────────────── */
.pw-niebla {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: 0;
}
.pw-niebla.n1 {
  height: 15rem;
  background:
    radial-gradient(ellipse 40% 62% at 18% 92%, rgba(206, 176, 216, 0.14), transparent 70%),
    radial-gradient(ellipse 46% 56% at 60% 98%, rgba(224, 196, 232, 0.12), transparent 70%),
    radial-gradient(ellipse 34% 50% at 88% 94%, rgba(196, 166, 210, 0.11), transparent 70%);
  animation: pwNiebla 38s ease-in-out infinite alternate;
}
.pw-niebla.n2 {
  height: 8rem;
  background:
    radial-gradient(ellipse 50% 70% at 38% 100%, rgba(232, 210, 240, 0.13), transparent 72%),
    radial-gradient(ellipse 42% 64% at 78% 100%, rgba(214, 186, 226, 0.10), transparent 72%);
  animation: pwNiebla 25s ease-in-out infinite alternate-reverse;
}

/* ── Viñeta ────────────────────────────────────────────────── */
/* Lo único que va POR ENCIMA del contenido. Transparente del todo en
   el centro, así que no hay ni un píxel de texto debajo de color. */
body.theme-puzzleween::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse 82% 74% at 50% 42%,
    transparent 0%, transparent 56%, rgba(4, 2, 7, 0.5) 100%);
}

/* El footer se apoya en el horizonte en vez de taparlo. */
body.theme-puzzleween footer {
  position: relative;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 2, 8, 0.92) 60%, #050208 100%);
  border-top-color: rgba(255, 156, 51, 0.20);
}

/* ── El logo, mientras no haya uno propio ──────────────────── */
/* SOLO cuando ha caído al logo de reserva (ver swapLogo). El logo
   original va de cian a rosa y sobre este tema se ve prestado; el
   giro de tono lo lleva a violeta → magenta → rojo → naranja, que
   es la paleta de la página. En cuanto se ponga una imagen propia
   desde el panel, esta clase no se aplica y el tinte se va solo:
   sería un error teñir la imagen que alguien eligió a mano. */
body.theme-puzzleween #hero-logo.tema-logo-reserva {
  filter: hue-rotate(80deg) saturate(1.12)
          drop-shadow(0 0 26px rgba(255, 122, 31, 0.35));
}

/* ── Detalles finales ──────────────────────────────────────── */
body.theme-puzzleween ::selection {
  background: rgba(255, 122, 31, 0.35);
  color: #fff6ea;
}
body.theme-puzzleween :focus-visible { outline-color: #ffb84d; }
body.theme-puzzleween::-webkit-scrollbar { width: 12px; height: 12px; }
body.theme-puzzleween::-webkit-scrollbar-track { background: #0c0512; }
body.theme-puzzleween::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff9c33, #8b2fd0);
  border-radius: 999px;
  border: 2px solid #0c0512;
}
body.theme-puzzleween::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffb84d, #a34ee0);
}
body.theme-puzzleween { scrollbar-color: #ff9c33 #0c0512; scrollbar-width: thin; }

/* ── Animaciones ───────────────────────────────────────────── */
@keyframes pwTitilar {
  0%, 100% { opacity: 0; }
  50%      { opacity: var(--pw-max, 0.8); }
}
@keyframes pwVela {
  0%, 100% { opacity: 1; }
  42%      { opacity: 0.86; }
  47%      { opacity: 0.66; }
  52%      { opacity: 0.96; }
  70%      { opacity: 0.78; }
}
@keyframes pwNube {
  from { transform: translateX(-36rem); }
  to   { transform: translateX(112vw); }
}
@keyframes pwColumpio {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}
@keyframes pwVuelo {
  from { transform: translate(0, 0); }
  to   { transform: translate(calc(-100vw - 8rem), var(--pw-subida, -14vh)); }
}
@keyframes pwAleteo {
  0%, 100% { transform: scaleX(1)    scaleY(1); }
  50%      { transform: scaleX(0.42) scaleY(1.16); }
}
@keyframes pwNiebla {
  from { transform: translateX(-4%); }
  to   { transform: translateX(4%); }
}

/* ── Movimiento reducido ───────────────────────────────────── */
/* Se quedan la luna, las telarañas, la araña, el horizonte y la
   niebla: son la mitad de la gracia y no se mueven. Se va lo que se
   mueve, que es lo que molesta a quien pidió que no se mueva. */
@media (prefers-reduced-motion: reduce) {
  .pw-murcielago,
  .pw-nube { display: none; }
  .pw-estrella { opacity: var(--pw-max, 0.8); }
  .pw-estrella,
  .pw-niebla,
  .pw-hilo,
  .pw-arana,
  .pl-ventana,
  body.theme-puzzleween .nav-logo-text { animation: none; }
}

/* Modo bajo rendimiento: fuera el adorno entero. La paleta y la
   tipografía se quedan, que es lo que hace que el tema siga siendo
   este tema. */
body.perf-low .pw-noche { display: none !important; }

/* Móvil. Los murciélagos y la araña se van: en una pantalla de seis
   pulgadas cruzan por delante del texto más de lo que adornan, y son
   los dos únicos adornos que se mueven de lado a lado. */
@media (max-width: 720px) {
  .pw-luna  { width: 9rem; height: 9rem; top: 3vh; right: 5vw; }
  .pw-tela  { width: 8rem; height: 8rem; }
  .pw-hilo, .pw-arana, .pw-murcielago { display: none; }
  .pw-horizonte { height: 8rem; }
  .pw-nube.n3 { display: none; }
}


/* ════════════════════════════════════════════════════════════════
   TEMAS DEL EMPORIO DE PIEZAS (paletas compradas)
   ----------------------------------------------------------------
   Un tema del Emporio no trae CSS: trae seis colores que la base
   valida (sección 102.3, con contraste mínimo de texto) y que
   js/emporio/emporio-render.js convierte en las variables --emp-* de abajo,
   puestas en el <body> por theme-switcher.js. Aquí solo se traducen
   a las --pl-* de siempre, que es de lo que cuelga el sitio entero.

   Por eso un tema del Emporio no puede esconder un botón ni mover
   nada de sitio: solo cambia colores (QA-3 de la especificación).
   Las reglas de opacidad del tema Puzzleween valen aquí igual: los
   fondos animados van detrás del contenido (z-index 1; main está en
   2), sin eventos de ratón y sin pasar de 0.35 de opacidad.
   ════════════════════════════════════════════════════════════════ */

body.theme-emporio {
  --pl-cyan:      var(--emp-a1);
  --pl-blue:      var(--emp-a2);
  --pl-lilac:     var(--emp-a3);
  --pl-pink:      var(--emp-a4);
  --pl-deep:      var(--emp-panel-solido);
  --pl-void:      var(--emp-fondo);
  --pl-soft:      var(--emp-suave);
  --pl-text:      var(--emp-texto);
  --pl-muted:     var(--emp-tenue);
  --pl-white:     var(--emp-texto);
  --pl-grad:      linear-gradient(135deg, var(--emp-a1) 0%, var(--emp-a2) 28%, var(--emp-a3) 62%, var(--emp-a4) 100%);
  --pl-grad-soft: linear-gradient(160deg, var(--emp-a1-16), var(--emp-a2-10), var(--emp-a4-12));
  --pl-panel:     var(--emp-panel);
  --pl-panel-alt: var(--emp-panel-alt);
  --pl-border:    var(--emp-borde);
  background:
    radial-gradient(circle at top left, var(--emp-a4-14), transparent 24%),
    radial-gradient(circle at 85% 14%,  var(--emp-a2-14), transparent 28%),
    radial-gradient(circle at 50% 92%,  var(--emp-a3-14), transparent 28%),
    var(--emp-fondo);
}

body.theme-emporio .site-nav {
  background: var(--emp-nav);
  border-color: var(--emp-borde);
}
body.theme-emporio .bg-orb-a { background: radial-gradient(circle, var(--emp-a2-14) 0%, transparent 72%); }
body.theme-emporio .bg-orb-b { background: radial-gradient(circle, var(--emp-a1-16) 0%, transparent 72%); }
body.theme-emporio .bg-orb-c { background: radial-gradient(circle, var(--emp-a4-12) 0%, transparent 72%); }
body.theme-emporio .hero-kicker { color: var(--emp-a1); border-color: var(--emp-a1-40); }
body.theme-emporio footer       { color: var(--emp-tenue); }

/* El logo original es cian y rosa: se gira de tono hasta el primer
   acento de la paleta, para que no cante sobre un tema verde. */
body.theme-emporio #hero-logo {
  filter: hue-rotate(var(--emp-logo-giro, 0deg)) drop-shadow(0 0 18px var(--emp-a1-40));
}

/* ── Los fondos animados (una capa propia, como .pw-noche) ── */
.emp-fx {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.32;
}
.emp-fx-rejilla {
  background-image:
    linear-gradient(var(--emp-a1-16) 1px, transparent 1px),
    linear-gradient(90deg, var(--emp-a1-16) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask: linear-gradient(to top, #000, transparent 75%);
          mask: linear-gradient(to top, #000, transparent 75%);
  animation: emp-fx-rejilla 6s linear infinite;
}
@keyframes emp-fx-rejilla { to { background-position: 0 46px, 0 0; } }

.emp-fx-lluvia {
  background-image:
    repeating-linear-gradient(180deg, transparent 0 34px, var(--emp-a1-40) 34px 40px, transparent 40px 90px),
    repeating-linear-gradient(90deg, transparent 0 22px, #000 22px 23px, transparent 23px 48px);
  background-size: 48px 180px, 48px 100%;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 24px);
          mask: repeating-linear-gradient(90deg, #000 0 2px, transparent 2px 24px);
  animation: emp-fx-lluvia 3.2s linear infinite;
}
@keyframes emp-fx-lluvia { to { background-position: 0 180px, 0 0; } }

.emp-fx-scanlines {
  opacity: 0.22;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0 1px, transparent 1px 3px);
}
.emp-fx-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--emp-a1-16), transparent);
  height: 30%;
  animation: emp-fx-barrido 7s linear infinite;
}
@keyframes emp-fx-barrido { from { transform: translateY(-100%); } to { transform: translateY(400%); } }

.emp-fx-estrellas {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, var(--emp-texto), transparent),
    radial-gradient(1px 1px at 33% 64%, var(--emp-a1), transparent),
    radial-gradient(1.5px 1.5px at 58% 18%, var(--emp-texto), transparent),
    radial-gradient(1px 1px at 76% 48%, var(--emp-a3), transparent),
    radial-gradient(1.5px 1.5px at 88% 82%, var(--emp-texto), transparent),
    radial-gradient(1px 1px at 22% 88%, var(--emp-a4), transparent);
  background-size: 320px 320px;
  animation: emp-fx-titilar 5s ease-in-out infinite alternate;
}
@keyframes emp-fx-titilar { from { opacity: 0.18; } to { opacity: 0.34; } }

@media (prefers-reduced-motion: reduce) {
  .emp-fx, .emp-fx::after { animation: none !important; }
}
body.perf-low .emp-fx { display: none !important; }