/* ============================================
   EuroCloud Landing — 3 Theme System
   Aurora (Deep Ocean) + Cyberpunk (Neon) + Crimson
   ============================================ */

:root {
  --bg: #030812;
  --text: #e8e8f0;
  --text-dim: rgba(200, 200, 220, 0.6);
  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --transition: 1.2s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background var(--transition), color var(--transition);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== CURSOR GLOW ===== */
#cursor-glow {
  position: fixed;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s, background var(--transition);
  will-change: left, top;
}

/* ===== CANVAS ===== */
#hero-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

/* ===== MAIN CONTAINER ===== */
.main-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}

/* ===== AURORA BLOBS (CSS ONLY) ===== */
.aurora {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--transition);
  will-change: opacity;
}

.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.7;
  mix-blend-mode: screen;
  will-change: transform;
}

.blob-1 { width: 500px; height: 500px; top: -10%; left: 20%; }
.blob-2 { width: 400px; height: 400px; top: 20%; right: 10%; }
.blob-3 { width: 350px; height: 350px; bottom: 10%; left: 15%; }
.blob-4 { width: 300px; height: 300px; bottom: 30%; right: 25%; }

@keyframes float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(80px, 60px) scale(1.1); }
  66% { transform: translate(-40px, 30px) scale(0.9); }
}
@keyframes float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-60px, 80px) scale(1.15); }
  66% { transform: translate(50px, -40px) scale(0.95); }
}
@keyframes float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(70px, -50px) scale(0.9); }
  66% { transform: translate(-30px, -70px) scale(1.1); }
}
@keyframes float-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-80px, -30px) scale(1.05); }
  66% { transform: translate(40px, 60px) scale(0.95); }
}

/* ===== TITLE BASE ===== */
.title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 7.5vw, 8rem);
  font-weight: 200;
  letter-spacing: 0.12em;
  text-align: center;
  position: relative;
  z-index: 2;
  transition: all var(--transition);
  max-width: 95vw;
  white-space: nowrap;
  will-change: filter, transform;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Prevent selection on all pseudo-elements */
.title::before, .title::after {
  user-select: none;
  -webkit-user-select: none;
}

/* ===== SUBTITLE ===== */
.subtitle {
  font-family: var(--font-body);
  font-size: clamp(0.9rem, 2.5vw, 1.4rem);
  font-weight: 200;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-top: 1rem;
  position: relative;
  z-index: 2;
  transition: all var(--transition);
  user-select: none;
  -webkit-user-select: none;
}

/* ===== DIVIDER ===== */
.divider {
  width: 100px;
  height: 1px;
  margin: 1.5rem 0;
  position: relative;
  z-index: 2;
  transition: all var(--transition);
}

/* ===== TAGLINE ===== */
.tagline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 4px;
  position: relative;
  z-index: 2;
  transition: all var(--transition);
}

/* ===== THEME TOGGLE BUTTON ===== */
#theme-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 10000;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* transition sin 'all' para no interferir con la animation de spin (transform) */
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
  -webkit-tap-highlight-color: transparent;
}
#theme-toggle.toggling {
  /* !important necesario: las reglas .theme-X #theme-toggle tienen mayor
     especificidad (2 selectores) y aplican sus propias animations (neon-pulse, etc).
     Sin !important, mi animation toggle-spin no se ejecuta. */
  animation: toggle-spin 0.65s linear !important;
}

@keyframes toggle-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Sin rotate en hover: el efecto de giro completo se maneja via JS (.toggling class) */
/* Hover solo cambia border-color y box-shadow para feedback visual */
#theme-toggle:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}
.toggle-icon { font-size: 1.2rem; opacity: 0.6; transition: transform 0.4s ease; }
.theme-indicator {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg);
  transition: background 0.4s ease;
}

/* ============================================
   AURORA — DEEP ORGANIC (tu diseño original)
   ============================================ */
.theme-aurora {
  background: #030812;
}
.theme-aurora #cursor-glow {
  background: radial-gradient(circle, rgba(0, 200, 255, 0.1) 0%, rgba(168, 85, 247, 0.05) 40%, transparent 70%);
}
.theme-aurora .aurora { opacity: 1; }
.theme-aurora #hero-canvas { opacity: 0; }
.theme-aurora .main-container { animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.01); } }

.theme-aurora .title {
  font-weight: 200;
  letter-spacing: 0.15em;
  color: transparent;
  background: linear-gradient(135deg, #00d4ff 0%, #00ff88 25%, #a855f7 50%, #ff6b9d 75%, #00d4ff 100%);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: aurora-shift 12s ease-in-out infinite;
  filter: drop-shadow(0 0 40px rgba(0, 200, 255, 0.4));
  user-select: none;
  -webkit-user-select: none;
}
@keyframes aurora-shift {
  0%, 100% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
}

.theme-aurora .subtitle {
  color: transparent;
  background: linear-gradient(90deg, rgba(200, 220, 240, 0.5) 0%, rgba(0, 200, 255, 0.9) 50%, rgba(200, 220, 240, 0.5) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer 4s ease-in-out infinite;
  font-weight: 300;
}
@keyframes shimmer { 0%, 100% { background-position: -200% 0; } 50% { background-position: 200% 0; } }

.theme-aurora .divider {
  background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.6), rgba(168, 85, 247, 0.6), transparent);
  animation: divider-breathe 3s ease-in-out infinite;
}
@keyframes divider-breathe { 0%, 100% { width: 100px; opacity: 0.8; } 50% { width: 120px; opacity: 1; } }

.theme-aurora .tagline { color: rgba(0, 200, 255, 0.7); font-size: 0.85rem; }
.theme-aurora #theme-toggle { border-color: rgba(0, 200, 255, 0.25); }
.theme-aurora .theme-indicator { background: linear-gradient(135deg, #00d4ff, #a855f7); }

.theme-aurora .blob-1 { background: radial-gradient(circle, #00d4ff 0%, transparent 70%); animation: float-1 10s ease-in-out infinite; }
.theme-aurora .blob-2 { background: radial-gradient(circle, #a855f7 0%, transparent 70%); animation: float-2 13s ease-in-out infinite; }
.theme-aurora .blob-3 { background: radial-gradient(circle, #00ff88 0%, transparent 70%); animation: float-3 16s ease-in-out infinite; }
.theme-aurora .blob-4 { background: radial-gradient(circle, #ff6b9d 0%, transparent 60%); opacity: 0.3; animation: float-4 11s ease-in-out infinite; }

/* ============================================
   CYBERPUNK — NEON OVERRIDE (tu diseño original)
   ============================================ */
.theme-cyber {
  background: #050508;
}
.theme-cyber #cursor-glow {
  background: radial-gradient(circle, rgba(255, 0, 110, 0.12) 0%, rgba(0, 240, 255, 0.06) 40%, transparent 70%);
}
.theme-cyber .aurora { opacity: 0; }
.theme-cyber #hero-canvas { opacity: 1; }

.theme-cyber .title {
  font-weight: 900;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, #00f0ff 0%, #00f0ff 25%, #b060ff 50%, #ff006e 75%, #ff006e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9))
         drop-shadow(0 0 15px rgba(0, 240, 255, 0.8))
         drop-shadow(0 0 40px rgba(176, 96, 255, 0.6))
         drop-shadow(0 0 80px rgba(255, 0, 110, 0.5))
         drop-shadow(0 0 150px rgba(255, 0, 110, 0.3));
  animation: neon-flicker 4s infinite;
  user-select: none;
  -webkit-user-select: none;
}
@keyframes neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.8; }
}

/* RGB split glitch */
.theme-cyber .title::before,
.theme-cyber .title::after {
  content: 'EUROCLOUD';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  letter-spacing: inherit;
  font-size: inherit;
  opacity: 0;
  mix-blend-mode: screen;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none;
}
.theme-cyber .title::before { color: #00f0ff; text-shadow: 0 0 40px rgba(0, 240, 255, 0.8); animation: glitch-cyan 8s infinite; }
.theme-cyber .title::after { color: #ff006e; text-shadow: 0 0 40px rgba(255, 0, 110, 0.8); animation: glitch-pink 7s infinite; }
@keyframes glitch-cyan {
  0%, 92%  { transform: translate(0); opacity: 0; }
  93%      { transform: translate(-3px, 1px); opacity: 0.7; }
  94%      { transform: translate(3px, -1px); opacity: 0.5; }
  95%      { transform: translate(-2px, 0); opacity: 0.7; }
  96%, 100%{ transform: translate(0); opacity: 0; }
}
@keyframes glitch-pink {
  0%, 90%  { transform: translate(0); opacity: 0; }
  91%      { transform: translate(3px, -1px); opacity: 0.6; }
  92%      { transform: translate(-4px, 2px); opacity: 0.4; }
  93%      { transform: translate(2px, 0); opacity: 0.6; }
  94%, 100%{ transform: translate(0); opacity: 0; }
}

/* Terminal subtitle */
.theme-cyber .subtitle {
  color: rgba(0, 240, 255, 0.9);
  font-weight: 300;
  font-family: var(--font-mono);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.8), 0 0 30px rgba(0, 240, 255, 0.4);
  border-right: 1px solid rgba(0, 240, 255, 0.7);
  padding-right: 8px;
  animation: cursor-blink 1s step-end infinite, subtitle-glow 3s ease-in-out infinite;
}
@keyframes cursor-blink { 0%, 100% { border-color: #00f0ff; } 50% { border-color: transparent; } }
@keyframes subtitle-glow {
  0%, 100% { text-shadow: 0 0 10px rgba(0, 240, 255, 0.8), 0 0 30px rgba(0, 240, 255, 0.4); }
  50% { text-shadow: 0 0 15px rgba(0, 240, 255, 1), 0 0 40px rgba(0, 240, 255, 0.6), 0 0 60px rgba(176, 96, 255, 0.3); }
}

.theme-cyber .divider {
  background: linear-gradient(90deg, transparent, rgba(255, 0, 110, 0.7), rgba(0, 240, 255, 0.7), transparent);
  box-shadow: 0 0 10px rgba(255, 0, 110, 0.3);
}
.theme-cyber .tagline { color: rgba(0, 240, 255, 0.7); font-size: 0.85rem; }
.theme-cyber #theme-toggle { border-color: rgba(255, 0, 110, 0.3); animation: neon-pulse 2s ease-in-out infinite; }
@keyframes neon-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 0, 110, 0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 0, 110, 0.5), 0 0 40px rgba(0, 240, 255, 0.2); }
}
.theme-cyber .theme-indicator { background: linear-gradient(135deg, #ff006e, #00f0ff); }

/* Scanlines */
.theme-cyber::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.008) 2px, rgba(0,0,0,0.008) 4px);
  pointer-events: none;
  z-index: 9998;
}

/* Vignette */
.theme-cyber .main-container::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.4) 100%);
  pointer-events: none;
}

/* ============================================
   CRIMSON — Tu foto (rojo vibrante)
   ============================================ */
.theme-crimson {
  background: #0a0008;
}
.theme-crimson #cursor-glow {
  background: radial-gradient(circle, rgba(255, 23, 68, 0.15) 0%, rgba(255, 0, 80, 0.08) 40%, transparent 70%);
}
.theme-crimson .aurora { opacity: 0; }
.theme-crimson #hero-canvas { opacity: 1; }

.theme-crimson .title {
  font-weight: 900;
  letter-spacing: 0.1em;
  background: linear-gradient(90deg, #ff1744 0%, #ff4081 30%, #ff8a80 50%, #ff4081 70%, #ff1744 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: crimson-shift 4s ease-in-out infinite;
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.95))
         drop-shadow(0 0 20px rgba(255, 23, 68, 0.9))
         drop-shadow(0 0 60px rgba(255, 64, 129, 0.7))
         drop-shadow(0 0 100px rgba(255, 23, 68, 0.5));
  user-select: none;
  -webkit-user-select: none;
}
@keyframes crimson-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Crimson glitch effect */
.theme-crimson .title::before,
.theme-crimson .title::after {
  content: 'EUROCLOUD';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  letter-spacing: inherit;
  font-size: inherit;
  opacity: 0;
  mix-blend-mode: screen;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none;
}
.theme-crimson .title::before { color: #ff1744; text-shadow: 0 0 50px rgba(255, 23, 68, 0.9); animation: crimson-glitch-1 6s infinite; }
.theme-crimson .title::after { color: #ff8a80; text-shadow: 0 0 50px rgba(255, 138, 128, 0.8); animation: crimson-glitch-2 5s infinite; }
@keyframes crimson-glitch-1 {
  0%, 94%  { transform: translate(0); opacity: 0; }
  95%      { transform: translate(-4px, 2px); opacity: 0.8; }
  96%      { transform: translate(4px, -2px); opacity: 0.6; }
  97%      { transform: translate(-2px, 0); opacity: 0.8; }
  98%, 100%{ transform: translate(0); opacity: 0; }
}
@keyframes crimson-glitch-2 {
  0%, 92%  { transform: translate(0); opacity: 0; }
  93%      { transform: translate(4px, -1px); opacity: 0.7; }
  94%      { transform: translate(-3px, 2px); opacity: 0.5; }
  95%      { transform: translate(2px, 0); opacity: 0.7; }
  96%, 100%{ transform: translate(0); opacity: 0; }
}

.theme-crimson .subtitle {
  color: rgba(255, 64, 129, 0.95);
  font-weight: 300;
  font-family: var(--font-mono);
  text-shadow: 0 0 15px rgba(255, 23, 68, 0.9), 0 0 40px rgba(255, 64, 129, 0.5);
  border-right: 2px solid rgba(255, 23, 68, 0.8);
  padding-right: 8px;
  animation: crimson-cursor 0.8s step-end infinite;
}
@keyframes crimson-cursor { 0%, 100% { border-color: #ff1744; } 50% { border-color: transparent; } }

.theme-crimson .divider {
  background: linear-gradient(90deg, transparent, rgba(255, 23, 68, 0.9), rgba(255, 64, 129, 0.9), transparent);
  box-shadow: 0 0 15px rgba(255, 23, 68, 0.5), 0 0 30px rgba(255, 23, 68, 0.3);
  animation: crimson-divider-pulse 2s ease-in-out infinite;
}
@keyframes crimson-divider-pulse {
  0%, 100% { width: 100px; opacity: 0.8; }
  50% { width: 130px; opacity: 1; }
}

.theme-crimson .tagline {
  color: rgba(255, 64, 129, 0.85);
  font-size: 0.85rem;
  text-shadow: 0 0 10px rgba(255, 23, 68, 0.5);
}

.theme-crimson #theme-toggle {
  border-color: rgba(255, 23, 68, 0.4);
  animation: crimson-pulse 2s ease-in-out infinite;
}
@keyframes crimson-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 23, 68, 0.3); }
  50% { box-shadow: 0 0 25px rgba(255, 23, 68, 0.6), 0 0 50px rgba(255, 64, 129, 0.3); }
}
.theme-crimson .theme-indicator { background: linear-gradient(135deg, #ff1744, #ff4081); }

/* Crimson scanlines */
.theme-crimson::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255, 0, 50, 0.015) 3px, rgba(255, 0, 50, 0.015) 6px);
  pointer-events: none;
  z-index: 9998;
}

/* Crimson vignette */
.theme-crimson .main-container::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(10, 0, 8, 0.6) 100%);
  pointer-events: none;
}

/* ============================================
   EMBER — Fuego cálido (tema Hermes)
   ============================================ */
.theme-ember {
  background: #0d0502;
}
.theme-ember #cursor-glow {
  background: radial-gradient(circle, rgba(255, 140, 0, 0.14) 0%, rgba(255, 60, 20, 0.07) 40%, transparent 70%);
}
.theme-ember .aurora { opacity: 1; }
.theme-ember #hero-canvas { opacity: 1; }

/* Título: gradiente de brasas + latido de glow */
.theme-ember .title {
  font-weight: 700;
  letter-spacing: 0.12em;
  background: linear-gradient(135deg, #ff9f43 0%, #ffd166 20%, #ff6b35 45%, #e63946 70%, #ff9f43 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ember-shift 7s ease-in-out infinite, ember-breathe 3.2s ease-in-out infinite;
  user-select: none;
  -webkit-user-select: none;
}
@keyframes ember-shift {
  0%, 100% { background-position: 0% 50%; }
  33% { background-position: 100% 50%; }
  66% { background-position: 50% 0%; }
}
@keyframes ember-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255,159,67,.9)) drop-shadow(0 0 25px rgba(255,107,53,.7)) drop-shadow(0 0 70px rgba(230,57,70,.45)); }
  50% { filter: drop-shadow(0 0 8px rgba(255,209,102,1)) drop-shadow(0 0 45px rgba(255,107,53,.9)) drop-shadow(0 0 110px rgba(230,57,70,.6)); }
}

/* Glitch cálido sutil */
.theme-ember .title::before,
.theme-ember .title::after {
  content: 'EUROCLOUD';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  letter-spacing: inherit;
  font-size: inherit;
  opacity: 0;
  mix-blend-mode: screen;
  user-select: none !important;
  -webkit-user-select: none !important;
  pointer-events: none;
}
.theme-ember .title::before { color: #ff9f43; text-shadow: 0 0 40px rgba(255, 159, 67, 0.9); animation: ember-glitch-1 6s infinite; }
.theme-ember .title::after { color: #e63946; text-shadow: 0 0 40px rgba(230, 57, 70, 0.9); animation: ember-glitch-2 7s infinite; }
@keyframes ember-glitch-1 {
  0%, 93%  { transform: translate(0); opacity: 0; }
  94%      { transform: translate(-3px, 2px); opacity: 0.7; }
  95%      { transform: translate(3px, -2px); opacity: 0.5; }
  96%      { transform: translate(-2px, 0); opacity: 0.7; }
  97%, 100%{ transform: translate(0); opacity: 0; }
}
@keyframes ember-glitch-2 {
  0%, 91%  { transform: translate(0); opacity: 0; }
  92%      { transform: translate(3px, -1px); opacity: 0.6; }
  93%      { transform: translate(-4px, 2px); opacity: 0.4; }
  94%      { transform: translate(2px, 0); opacity: 0.6; }
  95%, 100%{ transform: translate(0); opacity: 0; }
}

.theme-ember .subtitle {
  color: rgba(255, 209, 102, 0.95);
  font-weight: 300;
  font-family: var(--font-mono);
  text-shadow: 0 0 12px rgba(255, 159, 67, 0.9), 0 0 35px rgba(230, 57, 70, 0.5);
}

.theme-ember .divider {
  background: linear-gradient(90deg, transparent, rgba(255, 159, 67, 0.9), rgba(230, 57, 70, 0.9), transparent);
  box-shadow: 0 0 15px rgba(255, 107, 53, 0.5);
  animation: ember-divider 2.4s ease-in-out infinite;
}
@keyframes ember-divider {
  0%, 100% { width: 100px; opacity: 0.85; }
  50% { width: 130px; opacity: 1; }
}

.theme-ember .tagline {
  color: rgba(255, 159, 67, 0.85);
  font-size: 0.85rem;
  text-shadow: 0 0 10px rgba(255, 107, 53, 0.5);
}

.theme-ember #theme-toggle {
  border-color: rgba(255, 159, 67, 0.4);
  animation: ember-pulse 2s ease-in-out infinite;
}
@keyframes ember-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255, 107, 53, 0.3); }
  50% { box-shadow: 0 0 25px rgba(255, 159, 67, 0.6), 0 0 50px rgba(230, 57, 70, 0.3); }
}
.theme-ember .theme-indicator { background: linear-gradient(135deg, #ff9f43, #e63946); }

/* Blobs — brasas flotantes */
.theme-ember .blob-1 { background: radial-gradient(circle, #ff9f43 0%, transparent 70%); animation: float-1 9s ease-in-out infinite; }
.theme-ember .blob-2 { background: radial-gradient(circle, #e63946 0%, transparent 70%); animation: float-2 12s ease-in-out infinite; }
.theme-ember .blob-3 { background: radial-gradient(circle, #ffd166 0%, transparent 70%); animation: float-3 15s ease-in-out infinite; }
.theme-ember .blob-4 { background: radial-gradient(circle, #ff6b35 0%, transparent 60%); opacity: 0.4; animation: float-4 10s ease-in-out infinite; }

/* Scanlines cálidas */
.theme-ember::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(255, 90, 20, 0.015) 3px, rgba(255, 90, 20, 0.015) 6px);
  pointer-events: none;
  z-index: 9998;
}

/* Vignette cálido */
.theme-ember .main-container::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(13, 5, 2, 0.65) 100%);
  pointer-events: none;
}

/* ============================================
   NEON — ClawTeam palette (rosa/amarillo/cian, scanlines CRT)
   ============================================ */
.theme-neon {
  background: #0D0D0D;
}
.theme-neon #cursor-glow {
  background: radial-gradient(circle, rgba(255, 46, 99, 0.15) 0%, rgba(8, 247, 254, 0.08) 40%, transparent 70%);
}
.theme-neon .aurora { opacity: 0; }
.theme-neon #hero-canvas { opacity: 1; }

.theme-neon .title {
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #fff;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #fff;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.8),
    0 0 15px rgba(255, 46, 99, 0.8),
    0 0 40px rgba(8, 247, 254, 0.6),
    0 0 80px rgba(255, 46, 99, 0.4);
  animation: neon-flicker 4s infinite;
  user-select: none;
  -webkit-user-select: none;
}

.theme-neon .title::before,
.theme-neon .title::after {
  display: none;
}

.theme-neon .subtitle {
  color: #08F7FE;
  font-family: var(--font-mono);
  text-shadow: 0 0 8px rgba(8, 247, 254, 0.7), 0 0 20px rgba(8, 247, 254, 0.4);
  font-weight: 400;
}

.theme-neon .divider {
  background: linear-gradient(90deg, transparent, rgba(255, 46, 99, 0.9), rgba(8, 247, 254, 0.9), transparent);
  box-shadow: 0 0 15px rgba(255, 46, 99, 0.5);
}

.theme-neon .tagline {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85rem;
}

.theme-neon #theme-toggle {
  border-color: rgba(255, 46, 99, 0.4);
  animation: neon-pulse 2s ease-in-out infinite;
}
.theme-neon .theme-indicator { background: linear-gradient(135deg, #FF2E63, #08F7FE); }

/* Scanlines CRT animadas (efecto CRT) */
.theme-neon .main-container::after {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.08) 2px, rgba(0,0,0,0.08) 4px);
  pointer-events: none;
  z-index: 9997;
  animation: scanline-move 10s linear infinite;
}
@keyframes scanline-move { 0% { background-position: 0 0; } 100% { background-position: 0 100px; } }

.theme-neon .main-container::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

/* ===== THEME NAME LABEL (junto al toggle) ===== */
.theme-name {
  position: absolute;
  bottom: -22px;
  right: 0;
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#theme-toggle:hover .theme-name,
#theme-toggle:focus-visible .theme-name {
  opacity: 1;
}
body:not(:hover) #theme-toggle .theme-name { opacity: 0.8; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
  .subtitle { letter-spacing: 0.1em; font-size: 0.6rem; }
  .tagline { font-size: 0.55rem; letter-spacing: 1px; }
  .divider { width: 40px; margin: 1rem 0; }
  #cursor-glow { width: 200px; height: 200px; }
  .blob-1 { width: 200px; height: 200px; }
  .blob-2 { width: 160px; height: 160px; }
  .blob-3 { width: 140px; height: 140px; }
  .blob-4 { width: 120px; height: 120px; }
}