/* ==========================================================
   Webcodecol — Tema minimalista negro + un acento
   Se activa con <html data-accent="lima">
   ========================================================== */

/* ---------- Acentos ---------- */
html[data-accent="lima"]    { --accent: #C6F432; --accent-rgb: 198,244,50;  --accent-ink: #0A0A0A; --hl: #C6F432; --hl-small: #C6F432; }

/* ---------- Base negra ---------- */
html[data-accent] {
  --bg: #0A0A0A;
  --bg-2: #111111;
  --surface: rgba(255, 255, 255, 0.03);
  --surface-2: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.09);
  --text: #FAFAFA;
  --muted: #A1A1A1;
  --cyan: var(--hl-small);
  --violet: var(--accent);
  --pink: var(--accent);
  --grad: linear-gradient(var(--accent), var(--accent));
  --particle-rgb: 255, 255, 255;
  --line-rgb: var(--accent-rgb);
  --particle-alpha: .35;
  --header-bg: rgba(10, 10, 10, .78);
  --line-alpha: .16;
}

html[data-accent] ::selection { background: var(--accent); color: var(--accent-ink); }

/* Títulos: una palabra destacada, sin degradado */
html[data-accent] .gradient-text { background: none; color: var(--hl); animation: none; -webkit-text-fill-color: currentColor; }
html[data-accent] .logo__text strong { background: none; color: var(--hl); -webkit-text-fill-color: currentColor; }
html[data-accent] .logo__mark { background: var(--accent); color: var(--accent-ink); box-shadow: none; }

/* Botones */
html[data-accent] .btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 8px 24px -12px rgba(var(--accent-rgb), .55); }
html[data-accent] .btn--primary:hover { box-shadow: 0 14px 34px -12px rgba(var(--accent-rgb), .7); }
html[data-accent] .btn--primary::after { background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%); }
html[data-accent] .btn--ghost:hover { border-color: rgba(255,255,255,.3); }

/* Fondos y brillos: mucho más sutiles */
html[data-accent] .cursor-glow { background: radial-gradient(circle, rgba(var(--accent-rgb), .06), transparent 65%); }
html[data-accent] .hero__blob { background: rgba(var(--accent-rgb), 1); opacity: .08; }
html[data-accent] .hero__grid { background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); }
html[data-accent] .badge__dot { background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), .7); }
html[data-accent] .marquee__track span:nth-child(even) { color: var(--accent); }
html[data-accent] .marquee__track span:nth-child(odd) { color: rgba(250,250,250,.55); }

/* Ventana de código */
html[data-accent] .code-window { background: rgba(17,17,17,.85); box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); }
html[data-accent] .tok-k { color: #FAFAFA; font-weight: 500; }
html[data-accent] .tok-f { color: var(--hl-small); }
html[data-accent] .tok-s { color: #A1A1A1; }
html[data-accent] .tok-n, html[data-accent] .tok-p { color: var(--hl-small); }
html[data-accent] .tok-c { color: #525252; }
html[data-accent] .floating-card { background: rgba(17,17,17,.9); }

/* Tarjetas */
html[data-accent] .service-card::before { background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), .07), transparent 40%); }
html[data-accent] .service-card:hover, html[data-accent] .project:hover { border-color: rgba(255,255,255,.22); }
html[data-accent] .service-card__icon { background: var(--surface-2); border: 1px solid var(--border); color: var(--hl-small); }
html[data-accent] .project__tag { color: var(--hl-small); }

/* Proceso */
html[data-accent] .timeline__progress { box-shadow: none; }
html[data-accent] .step.is-active .step__num { border-color: var(--accent); color: var(--hl-small); box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .1); }

/* Filtros, testimonios, CTA */
html[data-accent] .filter.is-active { background: var(--accent); color: var(--accent-ink); }
html[data-accent] .avatar { background: var(--accent); color: var(--accent-ink) !important; }
html[data-accent] .cta__box { background: #111111; border-color: var(--border); }
html[data-accent] .cta__glow { background: radial-gradient(circle, rgba(var(--accent-rgb), 1), transparent 60%); opacity: .12; }

/* Formulario */
html[data-accent] .field input:focus, html[data-accent] .field textarea:focus, html[data-accent] .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .12); }

/* Footer y flotantes */
html[data-accent] .socials a:hover { background: var(--accent); color: var(--accent-ink); }
html[data-accent] .to-top { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 30px -10px rgba(var(--accent-rgb), .5); }
html[data-accent] .scroll-progress { box-shadow: none; }

/* Páginas legales */
html[data-accent] .toc a.is-active { background: rgba(var(--accent-rgb), .1); }
html[data-accent] .callout { background: rgba(var(--accent-rgb), .06); border-color: rgba(var(--accent-rgb), .25); }
html[data-accent] .steps-list > div::before { color: var(--accent-ink); }

@media (max-width: 820px) {
  html[data-accent] .nav { background: rgba(10,10,10,.97); }
}