/*
Theme Name: Kodi4K – Rediseño Futurista / Neón (cyberpunk)
Theme URI: https://kodi4k.com
Author: Kodi4K
Description: Legal Kodi addon tier lists, 4K setup guides and troubleshooting for the technical Kodi community. Official-repo addons only — no piracy builds.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: kodi4k
*/
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');


/* ==========================================================================
   TOKENS — "Terminal" system: dark-biased, monospace-driven, dev-tool feel
   ========================================================================== */
:root{
  --bg:#F4F7F5;
  --surface:#FFFFFF;
  --surface-2:#E9EFEB;
  --border:#D7E0DA;
  --ink:#0E1613;
  --ink-muted:#4B5951;
  --ink-faint:#849089;

  --accent:#1E9A64;
  --accent-dk:#157A4E;
  --accent-ink:#FFFFFF;
  --accent-soft:#E1F3E9;

  --tier-s:#B8860B;
  --tier-s-soft:#FBF1D8;
  --tier-a:#1E9A64;
  --tier-a-soft:#E1F3E9;
  --tier-b:#2D6FB0;
  --tier-b-soft:#E3ECF6;
  --tier-c:#6B7580;
  --tier-c-soft:#EAECEE;

  --mono-tint:#E9EFEB;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 1px 2px rgba(14,22,19,.05), 0 10px 28px -16px rgba(14,22,19,.16);
  --container:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A0E0C;
    --surface:#111815;
    --surface-2:#182019;
    --border:#253028;
    --ink:#E4EDE7;
    --ink-muted:#9BAEA3;
    --ink-faint:#647169;

    --accent:#5CE6A6;
    --accent-dk:#34C285;
    --accent-ink:#052015;
    --accent-soft:rgba(92,230,166,.14);

    --tier-s:#FFD23F; --tier-s-soft:rgba(255,210,63,.14);
    --tier-a:#5CE6A6; --tier-a-soft:rgba(92,230,166,.14);
    --tier-b:#5CA6E6; --tier-b-soft:rgba(92,166,230,.14);
    --tier-c:#9BA5AE; --tier-c-soft:rgba(155,165,174,.14);

    --mono-tint:#182019;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0A0E0C; --surface:#111815; --surface-2:#182019; --border:#253028;
  --ink:#E4EDE7; --ink-muted:#9BAEA3; --ink-faint:#647169;
  --accent:#5CE6A6; --accent-dk:#34C285; --accent-ink:#052015; --accent-soft:rgba(92,230,166,.14);
  --tier-s:#FFD23F; --tier-s-soft:rgba(255,210,63,.14);
  --tier-a:#5CE6A6; --tier-a-soft:rgba(92,230,166,.14);
  --tier-b:#5CA6E6; --tier-b-soft:rgba(92,166,230,.14);
  --tier-c:#9BA5AE; --tier-c-soft:rgba(155,165,174,.14);
  --mono-tint:#182019;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.6);
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'IBM Plex Sans',-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.5;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5{ font-family:'JetBrains Mono',monospace; text-wrap:balance; margin:0; color:var(--ink); font-weight:700; letter-spacing:-.01em; }
p{ margin:0; }
ul{ margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }
.mono{ font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace; }
[hidden]{ display:none!important; }

.container{ max-width:var(--container); margin-inline:auto; padding-inline:20px; }
.section{ padding-block:60px; }
.section-alt{ background:var(--surface); }

.eyebrow{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.eyebrow::before{ content:"$ "; opacity:.6; }
.section-head{ display:flex; flex-direction:column; gap:10px; margin-bottom:32px; max-width:64ch; }
.section-head h2{ font-size:clamp(1.4rem,3vw,1.9rem); }
.section-head p{ color:var(--ink-muted); font-size:.96rem; line-height:1.6; font-family:'IBM Plex Sans',sans-serif; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'JetBrains Mono',monospace; font-weight:600; font-size:.86rem; padding:12px 20px; border-radius:var(--radius-sm); border:1px solid transparent; transition:transform .15s,background .15s,border-color .15s; }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--accent); color:var(--accent-ink); }
.btn-primary:hover{ background:var(--accent-dk); }
.btn-outline{ background:transparent; border-color:var(--border); color:var(--ink); }
.btn-outline:hover{ border-color:var(--accent); color:var(--accent); }
.btn-block{ width:100%; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); padding-top:env(safe-area-inset-top,0px); }
.header-inner{ display:flex; align-items:center; gap:24px; padding-block:14px; }
.logo{ display:flex; align-items:center; gap:9px; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:1.05rem; color:var(--ink); }
.logo .dot{ width:8px; height:8px; border-radius:2px; background:var(--accent); }
.logo span.k{ color:var(--accent); }
.main-nav{ display:flex; gap:24px; margin-inline:auto; }
.main-nav a{ font-family:'JetBrains Mono',monospace; font-size:.82rem; font-weight:500; color:var(--ink-muted); }
.main-nav a:hover{ color:var(--ink); }
.header-cta{ display:flex; align-items:center; gap:10px; }
.nav-burger{ display:none; background:none; border:none; padding:8px; }
.nav-burger span{ display:block; width:20px; height:2px; background:var(--ink); margin:4px 0; border-radius:2px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding-block:56px 50px; }
.hero-badge{ display:inline-flex; align-items:center; gap:7px; background:var(--accent-soft); color:var(--accent-dk); font-family:'JetBrains Mono',monospace; font-size:.76rem; font-weight:700; padding:7px 14px; border-radius:var(--radius-sm); margin-bottom:18px; }
.hero h1{ font-size:clamp(2rem,4.5vw,2.9rem); line-height:1.08; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero p.lead{ margin-top:16px; font-size:1.02rem; line-height:1.6; color:var(--ink-muted); max-width:64ch; font-family:'IBM Plex Sans',sans-serif; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
.hero-trust{ display:flex; flex-wrap:wrap; gap:20px; margin-top:28px; }
.hero-trust .t{ display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--ink-muted); font-family:'JetBrains Mono',monospace; }
.hero-trust svg{ width:15px; height:15px; color:var(--accent); flex-shrink:0; }

/* ==========================================================================
   TIER LIST
   ========================================================================== */
.tier-meta{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-bottom:20px; font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--ink-faint); }
.tier-row{ display:flex; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-bottom:12px; box-shadow:var(--shadow); }
.tier-label{ width:70px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:1.6rem; font-weight:800; }
.tier-label.s{ background:var(--tier-s-soft); color:var(--tier-s); }
.tier-label.a{ background:var(--tier-a-soft); color:var(--tier-a); }
.tier-label.b{ background:var(--tier-b-soft); color:var(--tier-b); }
.tier-label.c{ background:var(--tier-c-soft); color:var(--tier-c); }
.tier-items{ flex:1; background:var(--surface); display:flex; flex-wrap:wrap; gap:10px; padding:14px 16px; align-items:center; }
.tier-item{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 14px; }
.tier-item .ti-name{ font-family:'JetBrains Mono',monospace; font-size:.86rem; font-weight:600; }
.tier-item .ti-cat{ font-size:.72rem; color:var(--ink-faint); margin-top:2px; }
.tier-empty{ color:var(--ink-faint); font-size:.86rem; font-style:italic; padding:6px; }
.tier-legal-note{ background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius:var(--radius); padding:16px 18px; margin-top:16px; font-size:.86rem; line-height:1.6; color:var(--ink); }
.tier-legal-note b{ color:var(--accent-dk); }

.build-detail{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.build-detail h4{ font-size:.95rem; }
.build-detail p{ font-size:.84rem; color:var(--ink-muted); margin-top:6px; line-height:1.55; font-family:'IBM Plex Sans',sans-serif; }
.build-detail a{ font-family:'JetBrains Mono',monospace; font-size:.78rem; color:var(--accent); margin-top:8px; display:inline-block; }

/* ==========================================================================
   GUIDE CARDS / BLOG
   ========================================================================== */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.guide-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; transition:transform .15s; }
.guide-card:hover{ transform:translateY(-3px); }
.guide-thumb{ aspect-ratio:16/10; background:linear-gradient(135deg,var(--accent-soft),var(--surface-2)); display:flex; align-items:center; justify-content:center; }
.guide-thumb .flag{ font-size:2.1rem; }
.guide-body{ padding:20px; display:flex; flex-direction:column; gap:8px; flex:1; }
.guide-tag{ font-family:'JetBrains Mono',monospace; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); }
.guide-body h3{ font-size:1.02rem; line-height:1.3; font-family:'IBM Plex Sans',sans-serif; font-weight:700; }
.guide-body p{ font-size:.86rem; color:var(--ink-muted); line-height:1.55; font-family:'IBM Plex Sans',sans-serif; }
.guide-meta{ margin-top:auto; padding-top:10px; font-size:.74rem; color:var(--ink-faint); display:flex; justify-content:space-between; font-family:'JetBrains Mono',monospace; }

.post-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.pagination{ display:flex; gap:8px; justify-content:center; margin-top:40px; }
.pagination a, .pagination span{ padding:9px 15px; border-radius:var(--radius-sm); border:1px solid var(--border); font-size:.86rem; font-weight:600; font-family:'JetBrains Mono',monospace; }
.pagination .current{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* ==========================================================================
   LEAD MAGNET
   ========================================================================== */
.lead-box{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:40px; display:grid; grid-template-columns:1.2fr 1fr; gap:36px; align-items:center; }
.lead-box h2{ font-size:clamp(1.3rem,3vw,1.8rem); }
.lead-box p{ color:var(--ink-muted); margin-top:12px; line-height:1.6; max-width:48ch; font-family:'IBM Plex Sans',sans-serif; }
.lead-form{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:24px; }
.lead-form .ebook-title{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.98rem; color:var(--ink); margin-bottom:4px; }
.lead-form .ebook-sub{ font-size:.8rem; color:var(--ink-muted); margin-bottom:16px; font-family:'IBM Plex Sans',sans-serif; }
.lead-form input[type="email"]{ width:100%; padding:12px 14px; border-radius:var(--radius-sm); border:1px solid var(--border); font-size:.9rem; font-family:'JetBrains Mono',monospace; margin-bottom:10px; background:var(--bg); color:var(--ink); }
.lead-form .fine{ font-size:.7rem; color:var(--ink-faint); margin-top:10px; line-height:1.5; }
.lead-status{ font-size:.8rem; margin-top:10px; font-weight:600; font-family:'JetBrains Mono',monospace; }
.lead-status.ok{ color:var(--accent); }
.lead-status.err{ color:var(--tier-s); }

/* ==========================================================================
   MERCH
   ========================================================================== */
.merch-strip{ display:flex; align-items:center; gap:28px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:24px 30px; }
.merch-strip .mtext{ flex:1; }
.merch-strip h3{ font-size:1.1rem; }
.merch-strip p{ color:var(--ink-muted); font-size:.86rem; margin-top:6px; font-family:'IBM Plex Sans',sans-serif; }
.merch-strip .mtag{ font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:6px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{ border-top:1px solid var(--border); background:var(--surface); padding-block:44px 28px; padding-bottom:calc(28px + env(safe-area-inset-bottom,0px)); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; }
.footer-desc{ font-size:.84rem; color:var(--ink-muted); line-height:1.6; max-width:34ch; margin-top:12px; font-family:'IBM Plex Sans',sans-serif; }
.footer-col h4{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:14px; }
.footer-col a{ display:block; font-size:.86rem; color:var(--ink-muted); padding-block:6px; font-family:'IBM Plex Sans',sans-serif; }
.footer-col a:hover{ color:var(--accent); }
.footer-bottom{ margin-top:36px; padding-top:20px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.76rem; color:var(--ink-faint); font-family:'JetBrains Mono',monospace; }
.affiliate-disclosure{ font-size:.72rem; color:var(--ink-faint); line-height:1.6; max-width:80ch; margin-top:18px; padding-top:18px; border-top:1px dashed var(--border); font-family:'IBM Plex Sans',sans-serif; }

/* ==========================================================================
   SINGLE / ARCHIVE
   ========================================================================== */
.post-header{ padding-block:44px 28px; }
.post-header .eyebrow{ margin-bottom:12px; }
.post-header h1{ font-size:clamp(1.6rem,3.6vw,2.3rem); }
.post-meta{ display:flex; gap:16px; margin-top:16px; font-size:.8rem; color:var(--ink-faint); font-family:'JetBrains Mono',monospace; }
.post-content{ max-width:72ch; font-size:1.02rem; line-height:1.75; color:var(--ink); display:flex; flex-direction:column; gap:18px; font-family:'IBM Plex Sans',sans-serif; }
.post-content h2{ font-size:1.35rem; margin-top:10px; }
.post-content h3{ font-size:1.1rem; }
.post-content p{ color:var(--ink); }
.post-content ul, .post-content ol{ padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.post-content a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.post-content img{ border-radius:var(--radius-sm); }
.post-content code{ background:var(--mono-tint); padding:2px 6px; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:.9em; }
.post-cta{ margin-top:20px; background:var(--surface-2); border-radius:var(--radius); padding:24px; border:1px solid var(--border); }
.archive-header{ padding-block:44px 28px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:900px){
  .main-nav{ display:none; }
  .main-nav.open{ display:flex; position:fixed; inset:0; top:64px; padding-top:env(safe-area-inset-top,0px); background:var(--bg); flex-direction:column; gap:4px; padding:24px; z-index:39; }
  .main-nav.open a{ padding:14px 4px; border-bottom:1px solid var(--border); font-size:1rem; }
  .nav-burger{ display:block; }
  .grid-3{ grid-template-columns:1fr 1fr; }
  .lead-box{ grid-template-columns:1fr; padding:26px; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .post-list{ grid-template-columns:1fr 1fr; }
  .merch-strip{ flex-direction:column; text-align:center; }
  .tier-row{ flex-direction:column; }
  .tier-label{ width:100%; padding:8px; }
}
@media (max-width:600px){
  .grid-3{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .post-list{ grid-template-columns:1fr; }
  .hero-actions{ flex-direction:column; }
  .hero-actions .btn{ width:100%; }
}

/* === CAPA DE REDISEÑO: CYBERPUNK NEÓN === */


:root{
  --bg:#05060d;
  --surface:#0b0e1c;
  --surface-2:#111530;
  --border:#1e2a55;
  --ink:#e6f0ff;
  --ink-muted:#8fa0c8;
  --ink-faint:#5a6890;

  --accent:#00f0ff;
  --accent-dk:#00b8d4;
  --accent-ink:#04060f;
  --accent-soft:rgba(0,240,255,.12);

  --tier-s:#ff2bd6;
  --tier-s-soft:rgba(255,43,214,.14);
  --tier-a:#00f0ff;
  --tier-a-soft:rgba(0,240,255,.14);
  --tier-b:#a855f7;
  --tier-b-soft:rgba(168,85,247,.14);
  --tier-c:#7c8ab8;
  --tier-c-soft:rgba(124,138,184,.14);

  --mono-tint:#0f1430;
  --radius:4px;
  --radius-sm:2px;
  --shadow:0 0 0 1px rgba(0,240,255,.08), 0 0 24px -6px rgba(255,43,214,.35), 0 20px 50px -20px rgba(0,240,255,.25);
  --container:1180px;

  --neon-cyan:#00f0ff;
  --neon-magenta:#ff2bd6;
  --neon-violet:#a855f7;
  --neon-lime:#7cff6b;
  --glow-cyan:0 0 8px rgba(0,240,255,.7), 0 0 22px rgba(0,240,255,.35);
  --glow-magenta:0 0 8px rgba(255,43,214,.7), 0 0 22px rgba(255,43,214,.35);
  --glow-violet:0 0 8px rgba(168,85,247,.7), 0 0 22px rgba(168,85,247,.35);
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --font-body:'Inter', system-ui, sans-serif;
}

/* === BASE === */
body{
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(255,43,214,.10), transparent 60%),
    radial-gradient(1000px 600px at 90% 5%, rgba(0,240,255,.10), transparent 60%),
    linear-gradient(180deg, #05060d 0%, #070a18 40%, #05060d 100%) !important;
  background-attachment:fixed !important;
  color:var(--ink) !important;
  font-family:var(--font-body) !important;
  letter-spacing:0 !important;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  background-image:
    linear-gradient(rgba(0,240,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.045) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 0%, #000 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000 30%, transparent 85%);
}
body > *{ position:relative; z-index:1; }

h1,h2,h3{
  font-family:var(--font-display) !important;
  color:var(--ink) !important;
  font-weight:700 !important;
  letter-spacing:-0.02em !important;
  text-transform:none;
}
h1{ font-size:clamp(2rem, 4.4vw, 3.4rem) !important; line-height:1.05 !important; }
h2{ font-size:clamp(1.6rem, 3vw, 2.4rem) !important; line-height:1.1 !important; }
h3{ font-size:clamp(1.15rem, 2vw, 1.5rem) !important; letter-spacing:-0.01em !important; }
h4,h5{
  font-family:var(--font-mono) !important;
  color:var(--neon-cyan) !important;
  font-weight:600 !important;
  text-transform:uppercase;
  letter-spacing:.08em !important;
  font-size:.95rem !important;
}
p, li, .lead{ color:var(--ink-muted) !important; font-family:var(--font-body) !important; }
a{ color:var(--neon-cyan) !important; text-decoration:none; transition:color .2s ease, text-shadow .2s ease; }
a:hover{ color:var(--neon-magenta) !important; text-shadow:var(--glow-magenta); }
img{ border-radius:var(--radius-sm); }
.mono, code, pre{ font-family:var(--font-mono) !important; }

/* === DECORACIONES === */
.deco-grid{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(0,240,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.06) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg, #000, transparent);
  -webkit-mask-image:linear-gradient(180deg, #000, transparent);
}
.deco-scanline{
  position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
  background:repeating-linear-gradient(180deg, rgba(0,240,255,.035) 0 1px, transparent 1px 4px);
  opacity:.7;
}
.deco-glow{
  position:absolute; pointer-events:none; z-index:0;
  border-radius:50%; filter:blur(60px); opacity:.5;
}
.deco-glow-1{ width:340px; height:340px; top:-120px; left:-80px; background:radial-gradient(circle, var(--neon-magenta), transparent 70%); }
.deco-glow-2{ width:380px; height:380px; top:-80px; right:-120px; background:radial-gradient(circle, var(--neon-cyan), transparent 70%); }
.deco-orb{
  position:absolute; pointer-events:none; z-index:0;
  width:320px; height:320px; border-radius:50%;
  filter:blur(70px); opacity:.35;
  animation:orbFloat 12s ease-in-out infinite;
}
.deco-orb-1{ top:-80px; left:-60px; background:radial-gradient(circle, var(--neon-magenta), transparent 70%); }
.deco-orb-2{ top:20px; right:-100px; background:radial-gradient(circle, var(--neon-cyan), transparent 70%); animation-delay:-4s; }
.deco-orb-3{ bottom:-120px; left:10%; background:radial-gradient(circle, var(--neon-violet), transparent 70%); }
.deco-orb-4{ top:-60px; right:5%; background:radial-gradient(circle, var(--neon-cyan), transparent 70%); }
@keyframes orbFloat{
  0%,100%{ transform:translate3d(0,0,0) scale(1); }
  50%{ transform:translate3d(20px,-30px,0) scale(1.08); }
}
.deco-line, .deco-line-hero, .deco-line-tier, .deco-line-lead{
  position:absolute; left:0; right:0; height:1px; pointer-events:none; z-index:0;
  background:linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-magenta), transparent);
  box-shadow:0 0 12px rgba(0,240,255,.6);
}
.deco-line{ top:50%; }
.deco-line-hero{ bottom:0; }
.deco-line-tier{ top:0; }
.deco-line-lead{ top:0; }
.deco-corner{
  position:absolute; width:22px; height:22px; pointer-events:none; z-index:2;
  border:2px solid var(--neon-cyan);
  box-shadow:var(--glow-cyan);
}
.deco-corner-tl{ top:10px; left:10px; border-right:none; border-bottom:none; }
.deco-corner-br{ bottom:10px; right:10px; border-left:none; border-top:none; border-color:var(--neon-magenta); box-shadow:var(--glow-magenta); }

/* === HEADER === */
.site-header{
  background:rgba(5,6,13,.82) !important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 1px 0 rgba(0,240,255,.18), 0 10px 30px -20px rgba(0,240,255,.4);
  position:sticky; top:0; z-index:50;
}
.header-inner{ min-height:72px; }
.logo{
  font-family:var(--font-display) !important;
  font-weight:700 !important;
  letter-spacing:-0.01em !important;
  color:var(--ink) !important;
  text-transform:none;
}
.logo .dot{
  background:var(--neon-magenta) !important;
  box-shadow:var(--glow-magenta);
  border-radius:50%;
}
.logo span.k{
  color:var(--neon-cyan) !important;
  text-shadow:var(--glow-cyan);
  font-family:var(--font-mono) !important;
}
.main-nav a{
  color:var(--ink-muted) !important;
  font-family:var(--font-body) !important;
  font-weight:500;
  letter-spacing:0;
  text-transform:uppercase;
  font-size:.8rem;
  padding:8px 12px;
  border-radius:var(--radius-sm);
  transition:color .2s ease, background .2s ease, text-shadow .2s ease;
}
.main-nav a:hover{
  color:var(--neon-cyan) !important;
  background:rgba(0,240,255,.07);
  text-shadow:var(--glow-cyan);
}
.nav-burger span{ background:var(--neon-cyan) !important; box-shadow:0 0 6px rgba(0,240,255,.7); }
@media (max-width:900px){
  .main-nav.open{
    background:rgba(5,6,13,.97) !important;
    border:1px solid var(--border);
    border-top:none;
    box-shadow:0 20px 40px -20px rgba(0,240,255,.5);
  }
  .main-nav.open a{
    color:var(--ink) !important;
    border-bottom:1px solid var(--border);
    border-radius:0;
  }
}

/* === BOTONES === */
.btn{
  font-family:var(--font-mono) !important;
  font-weight:600 !important;
  text-transform:uppercase;
  letter-spacing:.1em !important;
  font-size:.78rem !important;
  border-radius:var(--radius-sm) !important;
  padding:12px 22px !important;
  transition:transform .18s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  position:relative;
}
.btn-primary{
  background:linear-gradient(135deg, var(--neon-cyan), var(--neon-violet)) !important;
  color:#04060f !important;
  border:1px solid var(--neon-cyan) !important;
  box-shadow:0 0 12px rgba(0,240,255,.55), 0 0 32px -8px rgba(168,85,247,.6) !important;
}
.btn-primary:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg, var(--neon-magenta), var(--neon-cyan)) !important;
  box-shadow:0 0 18px rgba(255,43,214,.7), 0 0 40px -6px rgba(0,240,255,.7) !important;
}
.btn-outline{
  background:transparent !important;
  color:var(--neon-cyan) !important;
  border:1px solid var(--neon-cyan) !important;
  box-shadow:inset 0 0 12px rgba(0,240,255,.15), 0 0 10px rgba(0,240,255,.25) !important;
}
.btn-outline:hover{
  background:rgba(0,240,255,.1) !important;
  color:var(--neon-magenta) !important;
  border-color:var(--neon-magenta) !important;
  box-shadow:inset 0 0 16px rgba(255,43,214,.25), 0 0 18px rgba(255,43,214,.5) !important;
  text-shadow:var(--glow-magenta);
}
.btn:active{ transform:translateY(0); }
.header-cta .btn-primary{ padding:10px 18px !important; }

/* === HERO === */
.hero{
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(255,43,214,.14), transparent 60%),
    radial-gradient(900px 500px at 85% 20%, rgba(0,240,255,.14), transparent 60%),
    linear-gradient(180deg, #05060d, #0a0e22) !important;
  border-bottom:1px solid var(--border);
  position:relative;
  overflow:hidden;
}
.hero h1{
  color:var(--ink) !important;
  text-shadow:0 0 24px rgba(0,240,255,.25);
}
.hero h1 em{
  font-style:normal !important;
  background:linear-gradient(120deg, var(--neon-cyan), var(--neon-magenta) 60%, var(--neon-violet));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 14px rgba(255,43,214,.55));
}
.hero-badge{
  background:rgba(0,240,255,.08) !important;
  color:var(--neon-cyan) !important;
  border:1px solid var(--neon-cyan) !important;
  border-radius:999px !important;
  font-family:var(--font-mono) !important;
  text-transform:uppercase;
  letter-spacing:.1em !important;
  font-size:.72rem !important;
  box-shadow:0 0 14px rgba(0,240,255,.35), inset 0 0 12px rgba(0,240,255,.12);
}
.hero p.lead{ color:var(--ink-muted) !important; }
.hero-trust .t{ color:var(--ink-muted) !important; }
.hero-trust svg{ color:var(--neon-cyan) !important; filter:drop-shadow(0 0 6px rgba(0,240,255,.7)); }

/* === SECCIONES === */
.section{ position:relative; }
.section-alt{
  background:
    linear-gradient(180deg, #070a18, #0a0e22) !important;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.section-head h2{ color:var(--ink) !important; }
.section-head p{ color:var(--ink-muted) !important; }
.eyebrow{
  font-family:var(--font-mono) !important;
  color:var(--neon-magenta) !important;
  text-transform:uppercase;
  letter-spacing:.12em !important;
  font-size:.75rem !important;
  text-shadow:var(--glow-magenta);
}
.eyebrow::before{
  background:var(--neon-magenta) !important;
  box-shadow:var(--glow-magenta);
}

/* === TIERS === */
.tier-meta{ color:var(--ink-faint) !important; font-family:var(--font-mono) !important; }
.tier-row{
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  background:linear-gradient(180deg, rgba(11,14,28,.9), rgba(7,10,24,.9)) !important;
  box-shadow:var(--shadow);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.tier-row:hover{
  border-color:var(--neon-cyan) !important;
  box-shadow:0 0 0 1px rgba(0,240,255,.3), 0 0 28px -6px rgba(0,240,255,.5);
  transform:translateY(-2px);
}
.tier-label{
  font-family:var(--font-mono) !important;
  text-transform:uppercase;
  letter-spacing:.12em !important;
  border-radius:var(--radius-sm) !important;
}
.tier-label.s{ background:var(--tier-s-soft) !important; color:var(--tier-s) !important; border:1px solid var(--tier-s); box-shadow:var(--glow-magenta); }
.tier-label.a{ background:var(--tier-a-soft) !important; color:var(--tier-a) !important; border:1px solid var(--tier-a); box-shadow:var(--glow-cyan); }
.tier-label.b{ background:var(--tier-b-soft) !important; color:var(--tier-b) !important; border:1px solid var(--tier-b); box-shadow:var(--glow-violet); }
.tier-label.c{ background:var(--tier-c-soft) !important; color:var(--tier-c) !important; border:1px solid var(--tier-c); }
.tier-item .ti-name{ color:var(--ink) !important; }
.tier-item .ti-cat{ color:var(--ink-faint) !important; font-family:var(--font-mono) !important; }
.tier-empty{ color:var(--ink-faint) !important; font-family:var(--font-mono) !important; }
.tier-legal-note{ color:var(--ink-faint) !important; }
.tier-legal-note b{ color:var(--neon-cyan) !important; }

/* === GUÍAS / CARDS === */
.guide-card{
  background:linear-gradient(180deg, rgba(11,14,28,.92), rgba(7,10,24,.92)) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  overflow:hidden;
  position:relative;
}
.guide-card::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta), var(--neon-violet));
  opacity:.7;
}
.guide-card:hover{
  transform:translateY(-4px);
  border-color:var(--neon-cyan) !important;
  box-shadow:0 0 0 1px rgba(0,240,255,.35), 0 0 34px -8px rgba(0,240,255,.6), 0 0 60px -20px rgba(255,43,214,.5);
}
.guide-thumb{
  background:linear-gradient(135deg, #0a0e22, #111530) !important;
  border-bottom:1px solid var(--border);
  position:relative;
}
.guide-thumb .flag{
  border-radius:var(--radius-sm) !important;
  font-family:var(--font-mono) !important;
  text-transform:uppercase;
  letter-spacing:.1em !important;
  background:rgba(0,240,255,.12) !important;
  color:var(--neon-cyan) !important;
  border:1px solid var(--neon-cyan) !important;
  box-shadow:var(--glow-cyan);
}
.guide-body h3{ color:var(--ink) !important; }
.guide-body p{ color:var(--ink-muted) !important; }
.guide-tag{
  background:var(--accent-soft) !important;
  color:var(--neon-cyan) !important;
  border:1px solid rgba(0,240,255,.4) !important;
  border-radius:var(--radius-sm) !important;
  font-family:var(--font-mono) !important;
  text-transform:uppercase;
  letter-spacing:.1em !important;
  font-size:.7rem !important;
}
.guide-meta{ color:var(--ink-faint) !important; font-family:var(--font-mono) !important; }

/* === LEAD BOX === */
.lead-box{
  background:linear-gradient(135deg, rgba(255,43,214,.10), rgba(0,240,255,.08)) !important;
  border:1px solid var(--neon-cyan) !important;
  border-radius:var(--radius) !important;
  box-shadow:0 0 0 1px rgba(0,240,255,.2), 0 0 40px -10px rgba(0,240,255,.5), inset 0 0 60px -30px rgba(255,43,214,.4);
  position:relative;
  overflow:hidden;
}
.lead-box h2{ color:var(--ink) !important; }
.lead-box p{ color:var(--ink-muted) !important; }
.lead-form .ebook-title{ color:var(--neon-cyan) !important; font-family:var(--font-mono) !important; text-transform:uppercase; letter-spacing:.1em !important; }
.lead-form .ebook-sub{ color:var(--ink-muted) !important; }
.lead-form input[type="email"]{
  background:rgba(5,6,13,.85) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-sm) !important;
  color:var(--ink) !important;
  font-family:var(--font-body) !important;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.lead-form input[type="email"]:focus{
  outline:none;
  border-color:var(--neon-cyan) !important;
  box-shadow:0 0 0 3px rgba(0,240,255,.18), 0 0 18px rgba(0,240,255,.4);
}
.lead-form .fine{ color:var(--ink-faint) !important; }
.lead-status{ font-family:var(--font-mono) !important; }
.lead-status.ok{ color:var(--neon-lime) !important; }
.lead-status.err{ color:var(--neon-magenta) !important; }

/* === MERCH === */
.merch-strip{
  background:linear-gradient(90deg, rgba(168,85,247,.14), rgba(0,240,255,.10)) !important;
  border:1px solid var(--neon-violet) !important;
  border-radius:var(--radius) !important;
  box-shadow:0 0 0 1px rgba(168,85,247,.25), 0 0 40px -12px rgba(168,85,247,.6);
  position:relative;
  overflow:hidden;
}
.merch-strip h3{ color:var(--ink) !important; }
.merch-strip p{ color:var(--ink-muted) !important; }
.merch-strip .mtext{ color:var(--ink-muted) !important; }
.merch-strip .mtag{
  font-family:var(--font-mono) !important;
  text-transform:uppercase;
  letter-spacing:.12em !important;
  color:var(--neon-magenta) !important;
  text-shadow:var(--glow-magenta);
}

/* === FOOTER === */
.site-footer{
  background:linear-gradient(180deg, #05060d, #0a0e22) !important;
  border-top:1px solid var(--border) !important;
  position:relative;
  overflow:hidden;
}
.site-footer::before{
  content:"";
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-magenta), transparent);
  box-shadow:0 0 14px rgba(0,240,255,.6);
}
.footer-desc{ color:var(--ink-muted) !important; }
.footer-col h4{ color:var(--neon-cyan) !important; }
.footer-col a{ color:var(--ink-muted) !important; transition:color .2s ease, text-shadow .2s ease; }
.footer-col a:hover{ color:var(--neon-magenta) !important; text-shadow:var(--glow-magenta); }
.footer-bottom{ color:var(--ink-faint) !important; border-top:1px solid var(--border); }
.affiliate-disclosure{ color:var(--ink-faint) !important; font-family:var(--font-mono) !important; font-size:.78rem !important; }

/* === POSTS === */
.post-header .eyebrow{ color:var(--neon-magenta) !important; }
.post-header h1{ color:var(--ink) !important; }
.post-meta{ color:var(--ink-faint) !important; font-family:var(--font-mono) !important; }
.post-content h2{ color:var(--ink) !important; }
.post-content h3{ color:var(--neon-cyan) !important; }
.post-content p{ color:var(--ink-muted) !important; }
.post-content a{ color:var(--neon-magenta) !important; text-shadow:var(--glow-magenta); }
.post-content code{
  background:var(--mono-tint) !important;
  color:var(--neon-cyan) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-sm) !important;
  font-family:var(--font-mono) !important;
}
.post-content img{ border:1px solid var(--border); box-shadow:0 0 24px -8px rgba(0,240,255,.5); }
.post-cta{
  background:linear-gradient(135deg, rgba(0,240,255,.10), rgba(255,43,214,.10)) !important;
  border:1px solid var(--neon-cyan) !important;
  border-radius:var(--radius) !important;
  box-shadow:0 0 30px -10px rgba(0,240,255,.6);
}

/* === ARCHIVE / PAGINATION === */
.archive-header{ position:relative; }
.pagination a, .pagination span{
  border:1px solid var(--border) !important;
  border-radius:var(--radius-sm) !important;
  background:var(--surface) !important;
  color:var(--ink-muted) !important;
  font-family:var(--font-mono) !important;
  transition:all .2s ease;
}
.pagination a:hover{
  border-color:var(--neon-cyan) !important;
  color:var(--neon-cyan) !important;
  box-shadow:var(--glow-cyan);
}
.pagination .current{
  background:linear-gradient(135deg, var(--neon-cyan), var(--neon-violet)) !important;
  color:#04060f !important;
  border-color:var(--neon-cyan) !important;
  box-shadow:0 0 16px rgba(0,240,255,.6);
}

/* === BUILD DETAIL === */
.build-detail h4{ color:var(--neon-cyan) !important; }
.build-detail p{ color:var(--ink-muted) !important; }
.build-detail a{ color:var(--neon-magenta) !important; }

/* === INLINE OVERRIDES === */
[style*="color:var(--ink-muted)"]{ color:var(--ink-muted) !important; }
[style*="linear-gradient"]{
  background:linear-gradient(135deg, rgba(0,240,255,.10), rgba(255,43,214,.10)) !important;
  border:1px solid var(--border) !important;
}
[style*="padding-top:0"]{ padding-top:0 !important; }

/* === MOBILE === */
@media (max-width:768px){
  h1{ font-size:clamp(1.7rem, 8vw, 2.2rem) !important; }
  h2{ font-size:clamp(1.35rem, 6.5vw, 1.8rem) !important; }
  .hero-actions .btn{ width:100%; }
  .deco-orb{ width:200px; height:200px; opacity:.25; }
  .deco-glow-1, .deco-glow-2{ width:220px; height:220px; opacity:.35; }
  body::before{ background-size:32px 32px; }
  .deco-corner{ width:16px; height:16px; }
}

/* Paleta nueva también para los selectores de tema/modo oscuro del tema original (si no, le ganan a la capa) */
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
  --bg:#05060d;
  --surface:#0b0e1c;
  --surface-2:#111530;
  --border:#1e2a55;
  --ink:#e6f0ff;
  --ink-muted:#8fa0c8;
  --ink-faint:#5a6890;

  --accent:#00f0ff;
  --accent-dk:#00b8d4;
  --accent-ink:#04060f;
  --accent-soft:rgba(0,240,255,.12);

  --tier-s:#ff2bd6;
  --tier-s-soft:rgba(255,43,214,.14);
  --tier-a:#00f0ff;
  --tier-a-soft:rgba(0,240,255,.14);
  --tier-b:#a855f7;
  --tier-b-soft:rgba(168,85,247,.14);
  --tier-c:#7c8ab8;
  --tier-c-soft:rgba(124,138,184,.14);

  --mono-tint:#0f1430;
  --radius:4px;
  --radius-sm:2px;
  --shadow:0 0 0 1px rgba(0,240,255,.08), 0 0 24px -6px rgba(255,43,214,.35), 0 20px 50px -20px rgba(0,240,255,.25);
  --container:1180px;

  --neon-cyan:#00f0ff;
  --neon-magenta:#ff2bd6;
  --neon-violet:#a855f7;
  --neon-lime:#7cff6b;
  --glow-cyan:0 0 8px rgba(0,240,255,.7), 0 0 22px rgba(0,240,255,.35);
  --glow-magenta:0 0 8px rgba(255,43,214,.7), 0 0 22px rgba(255,43,214,.35);
  --glow-violet:0 0 8px rgba(168,85,247,.7), 0 0 22px rgba(168,85,247,.35);
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --font-body:'Inter', system-ui, sans-serif;
}
}
:root[data-theme="dark"]{
  --bg:#05060d;
  --surface:#0b0e1c;
  --surface-2:#111530;
  --border:#1e2a55;
  --ink:#e6f0ff;
  --ink-muted:#8fa0c8;
  --ink-faint:#5a6890;

  --accent:#00f0ff;
  --accent-dk:#00b8d4;
  --accent-ink:#04060f;
  --accent-soft:rgba(0,240,255,.12);

  --tier-s:#ff2bd6;
  --tier-s-soft:rgba(255,43,214,.14);
  --tier-a:#00f0ff;
  --tier-a-soft:rgba(0,240,255,.14);
  --tier-b:#a855f7;
  --tier-b-soft:rgba(168,85,247,.14);
  --tier-c:#7c8ab8;
  --tier-c-soft:rgba(124,138,184,.14);

  --mono-tint:#0f1430;
  --radius:4px;
  --radius-sm:2px;
  --shadow:0 0 0 1px rgba(0,240,255,.08), 0 0 24px -6px rgba(255,43,214,.35), 0 20px 50px -20px rgba(0,240,255,.25);
  --container:1180px;

  --neon-cyan:#00f0ff;
  --neon-magenta:#ff2bd6;
  --neon-violet:#a855f7;
  --neon-lime:#7cff6b;
  --glow-cyan:0 0 8px rgba(0,240,255,.7), 0 0 22px rgba(0,240,255,.35);
  --glow-magenta:0 0 8px rgba(255,43,214,.7), 0 0 22px rgba(255,43,214,.35);
  --glow-violet:0 0 8px rgba(168,85,247,.7), 0 0 22px rgba(168,85,247,.35);
  --font-display:'Space Grotesk', 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;
  --font-body:'Inter', system-ui, sans-serif;
}