/* =========================================================
   Nexo Studio — Temas alternativos
   El tema oscuro (por defecto) vive en styles.css.
   Aquí se redefinen los tokens para:
     html.theme-light    → versión clara
     html.theme-colorful → versión con más color
   ========================================================= */

/* ---------------------------------------------------------
   TEMA CLARO
   --------------------------------------------------------- */
html.theme-light {
  --bg: #f7f8fc;
  --bg-soft: #eef1f7;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --border: rgba(13, 16, 40, 0.1);
  --border-strong: rgba(13, 16, 40, 0.2);
  --text: #12142c;
  --text-muted: #4a5169;
  --text-dim: #6d748c;

  --accent: #6d3bf5;
  --accent-2: #0e7fa8;
  --text-grad: linear-gradient(120deg, #6d28d9 0%, #4338ca 45%, #0e7490 100%);
  --on-accent: #08080f;
  --icon-color: #6d28d9;

  --header-bg: rgba(255, 255, 255, 0.82);
  --header-bg-solid: rgba(255, 255, 255, 0.96);
  --menu-bg: #ffffff;
  --hero-glow: radial-gradient(
    ellipse at center,
    rgba(124, 58, 237, 0.16) 0%,
    rgba(14, 165, 233, 0.1) 45%,
    transparent 70%
  );
  --page-glow: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.14), transparent 70%);
  --grid-line: rgba(13, 16, 40, 0.05);
  --stats-bg: rgba(255, 255, 255, 0.88);
  --raise: rgba(13, 16, 40, 0.04);
  --raise-strong: rgba(13, 16, 40, 0.08);
  --btn-glow: 0 10px 26px rgba(109, 59, 245, 0.22);
  --btn-glow-strong: 0 14px 34px rgba(109, 59, 245, 0.35);
  --featured-bg: linear-gradient(180deg, rgba(109, 59, 245, 0.1), rgba(255, 255, 255, 0.95));
  --featured-glow: 0 24px 50px rgba(109, 59, 245, 0.16);
  --cta-bg: linear-gradient(120deg, rgba(124, 58, 237, 0.12), rgba(8, 145, 178, 0.12));
  --cta-border: rgba(124, 58, 237, 0.3);

  --success: #059669;
  --success-text: #065f46;
  --success-bg: rgba(5, 150, 105, 0.1);
  --success-border: rgba(5, 150, 105, 0.4);
  --danger: #dc2626;
}

/* Ajustes propios del tema claro */
html.theme-light .hero::before,
html.theme-light .page-hero::before {
  filter: none;
}

html.theme-light .hero-grid {
  mask-image: radial-gradient(ellipse at 50% 30%, #000 25%, transparent 78%);
}

html.theme-light .project-thumb .thumb-art {
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.45);
}

html.theme-light .quote blockquote {
  color: var(--text);
}

html.theme-light .price-card,
html.theme-light .card,
html.theme-light .step,
html.theme-light .info-item,
html.theme-light .acc-item,
html.theme-light .project-card,
html.theme-light .form-card {
  box-shadow: 0 8px 24px rgba(18, 20, 44, 0.06);
}

html.theme-light .price-card.featured,
html.theme-light .card:hover,
html.theme-light .price-card:hover {
  box-shadow: 0 18px 40px rgba(109, 59, 245, 0.14);
}

html.theme-light .site-header {
  box-shadow: 0 1px 0 var(--border);
}

html.theme-light .card-list li::before,
html.theme-light .price-features li::before {
  color: var(--success);
}

/* ---------------------------------------------------------
   TEMA COLORIDO
   --------------------------------------------------------- */
html.theme-colorful {
  --bg: #0a0416;
  --bg-soft: #130726;
  --surface: #190b33;
  --surface-2: #221046;
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --text-muted: #cfc0f2;
  --text-dim: #a291cc;

  --accent: #ff4d9d;
  --accent-2: #ffd23f;
  --accent-grad: linear-gradient(120deg, #ff4d9d 0%, #ff8a3d 50%, #ffd23f 100%);
  --text-grad: linear-gradient(120deg, #ff5fa2 0%, #ffb020 45%, #4de0d0 100%);
  --on-accent: #17040e;
  --icon-color: #ffb3d1;

  --header-bg: rgba(10, 4, 22, 0.82);
  --header-bg-solid: rgba(10, 4, 22, 0.95);
  --menu-bg: #12062a;
  --hero-glow: radial-gradient(
    ellipse at center,
    rgba(255, 77, 157, 0.3) 0%,
    rgba(255, 138, 61, 0.18) 45%,
    rgba(77, 224, 208, 0.12) 70%,
    transparent 78%
  );
  --page-glow: radial-gradient(
    ellipse at center,
    rgba(255, 77, 157, 0.26),
    rgba(255, 210, 63, 0.14) 55%,
    transparent 76%
  );
  --grid-line: rgba(255, 255, 255, 0.05);
  --stats-bg: rgba(25, 11, 51, 0.82);
  --raise: rgba(255, 255, 255, 0.06);
  --raise-strong: rgba(255, 255, 255, 0.12);
  --btn-glow: 0 10px 30px rgba(255, 77, 157, 0.4);
  --btn-glow-strong: 0 14px 36px rgba(255, 138, 61, 0.5);
  --featured-bg: linear-gradient(
    180deg,
    rgba(255, 77, 157, 0.22),
    rgba(255, 138, 61, 0.1) 55%,
    rgba(25, 11, 51, 0.92)
  );
  --featured-glow: 0 24px 60px rgba(255, 77, 157, 0.32);
  --cta-bg: linear-gradient(
    120deg,
    rgba(255, 77, 157, 0.26),
    rgba(255, 138, 61, 0.2) 55%,
    rgba(255, 210, 63, 0.16)
  );
  --cta-border: rgba(255, 77, 157, 0.5);
}

/* Bandas de sección con degradados de color */
html.theme-colorful .section--soft {
  background: linear-gradient(180deg, rgba(255, 77, 157, 0.07), rgba(77, 224, 208, 0.07));
}

html.theme-colorful .site-footer {
  background: linear-gradient(180deg, var(--bg-soft), #1a0a3a);
}

/* Iconos de servicios con un color distinto cada uno */
html.theme-colorful .grid-3 .card:nth-child(1) .icon {
  background: rgba(255, 77, 157, 0.16);
  border-color: rgba(255, 77, 157, 0.45);
  color: #ff9ec6;
}

html.theme-colorful .grid-3 .card:nth-child(2) .icon {
  background: rgba(255, 138, 61, 0.16);
  border-color: rgba(255, 138, 61, 0.45);
  color: #ffc29b;
}

html.theme-colorful .grid-3 .card:nth-child(3) .icon {
  background: rgba(255, 210, 63, 0.16);
  border-color: rgba(255, 210, 63, 0.45);
  color: #ffe08a;
}

html.theme-colorful .grid-3 .card:nth-child(4) .icon {
  background: rgba(77, 224, 208, 0.16);
  border-color: rgba(77, 224, 208, 0.45);
  color: #a8f5ec;
}

html.theme-colorful .grid-3 .card:nth-child(5) .icon {
  background: rgba(77, 163, 255, 0.16);
  border-color: rgba(77, 163, 255, 0.45);
  color: #a9d1ff;
}

html.theme-colorful .grid-3 .card:nth-child(6) .icon {
  background: rgba(167, 139, 250, 0.18);
  border-color: rgba(167, 139, 250, 0.45);
  color: #d3c4fd;
}

/* Pasos del proceso con degradados distintos */
html.theme-colorful .step:nth-child(1)::before {
  background-image: linear-gradient(120deg, #ff4d9d, #ff8a3d);
}

html.theme-colorful .step:nth-child(2)::before {
  background-image: linear-gradient(120deg, #ff8a3d, #ffd23f);
}

html.theme-colorful .step:nth-child(3)::before {
  background-image: linear-gradient(120deg, #ffd23f, #4de0d0);
}

html.theme-colorful .step:nth-child(4)::before {
  background-image: linear-gradient(120deg, #4da3ff, #a78bfa);
}

/* Toques extra de color */
html.theme-colorful .badge {
  box-shadow: 0 8px 20px rgba(255, 138, 61, 0.45);
}

html.theme-colorful .price-card.featured {
  border-color: rgba(255, 77, 157, 0.6);
}

html.theme-colorful .cta-band h2 {
  background: linear-gradient(120deg, #ff5fa2, #ffd23f 60%, #4de0d0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}