Minificador HTML CSS JS

Un minificador elimina de tu código fuente todo lo que no se necesita para ejecutarlo: comentarios, espacios de sobra, líneas en blanco y puntuación redundante. Archivos más pequeños significan páginas más rápidas, menor consumo de ancho de banda y mejores Core Web Vitals. Hacerlo con seguridad es más difícil de lo que parece: el espacio dentro de un literal de cadena en JavaScript es significativo, una regex contiene "/" y "//" que parecen comentarios, y el espacio HTML dentro de

 debe sobrevivir. Esta herramienta analiza cada lenguaje en tokens y elimina solo lo que es demostrablemente seguro.
Qué puede hacer
Minificar HTML, CSS o JavaScript desde una sola herramienta con pestañas
Eliminar comentarios sin tocar la cadena donde se esconden
Colapsar espacio en blanco preservando contenido de cadenas, regex y plantillas
Mantener intacto el contenido de 
/ en HTML</li><li>Mostrar bytes antes → después y el porcentaje ahorrado</li><li>Copiar o descargar el resultado minificado</li></ul><h3>Cuándo usarlo</h3><ul><li>Reducir un snippet JS, bloque CSS o HTML inline antes de publicar</li><li>Pasar una página por límites de rendimiento con menos carga</li><li>Preparar salidas de una línea para campos que rechazan saltos de línea</li><li>Reducir rápido el tamaño de un activo embebido</li></ul><p>Privacidad: la minificación ocurre por completo en tu navegador; nada de lo que pegues se sube jamás.</p></div>
</section>
<section class="mt-14 max-w-3xl mx-auto card p-6 sm:p-8">
  <h2 class="text-xl font-semibold mb-4">Minificación segura frente a trucos arriesgados</h2>
  <div class="prose prose-slate dark:prose-invert max-w-none text-sm sm:text-base"><ul><li>Primero se eliminan los comentarios, la sangría y los saltos de línea —normalmente un tercio del tamaño del script original, sin ningún riesgo.</li><li>El cambio de nombre de variables locales solo se aplica donde el ámbito garantiza su seguridad; las variables globales y los nombres de propiedades permanecen intactos para que las API externas nunca fallen.</li><li>Incluso tras aplicar gzip, el código minificado sigue siendo significativamente más pequeño —ambas capas eliminan distintos tipos de redundancia.</li></ul></div>
</section>
<section class="mt-16 max-w-4xl mx-auto">
  <h2 class="text-2xl font-bold text-center">Dónde van realmente los bytes</h2>
  <div class="mt-6 grid gap-4 sm:grid-cols-3"><div class="feature-card">
      <div class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">⚡</div>
      <h3 class="font-semibold mt-1">Tres lenguajes, una herramienta</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">HTML, CSS y JS comparten una página con pestañas, cada una con su tokenizador apropiado — sin saltar entre sitios de un solo propósito.</p>
    </div>
<div class="feature-card">
      <div class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🔒</div>
      <h3 class="font-semibold mt-1">Cadenas y regex sobreviven</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">El tokenizador entiende cadenas entrecomilladas, literales de plantilla y literales de regex, así la minificación jamás rompe "a/ b/c" ni el texto parecido a comentario que contienen.</p>
    </div>
<div class="feature-card">
      <div class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🎯</div>
      <h3 class="font-semibold mt-1">Ahorro medido</h3>
      <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed">La barra de estado reporta bytes antes y después más el porcentaje ahorrado: ves exactamente cuánta carga elimina cada minificación.</p>
    </div></div>
</section>
<section class="mt-14 max-w-3xl mx-auto">
  <h2 class="text-xl font-semibold mb-4">Preguntas frecuentes</h2>
  <div class="space-y-3"><details class="faq-item">
      <summary class="font-medium cursor-pointer list-none flex justify-between items-center gap-3">¿Es seguro para JavaScript?<span class="text-slate-400 group-open:rotate-180 transition shrink-0">⌄</span></summary>
      <p class="mt-3 text-slate-600 dark:text-slate-300 leading-relaxed">Sí. El minificador JS analiza primero en tokens, distinguiendo comentarios de literales de regex y cadenas, así los patrones "/…/" y el texto "//" dentro de cadenas se preservan byte a byte mientras solo se eliminan comentarios reales y espacio cosmético.</p>
    </details>
<details class="faq-item">
      <summary class="font-medium cursor-pointer list-none flex justify-between items-center gap-3">¿Y el espacio en blanco en HTML?<span class="text-slate-400 group-open:rotate-180 transition shrink-0">⌄</span></summary>
      <p class="mt-3 text-slate-600 dark:text-slate-300 leading-relaxed">El espacio entre etiquetas se colapsa, pero el contenido dentro de <pre> y <textarea> se conserva porque puede ser significativo, y los atributos de cadena se mantienen. La salida sigue siendo HTML válido que renderiza idéntico.</p>
    </details>
<details class="faq-item">
      <summary class="font-medium cursor-pointer list-none flex justify-between items-center gap-3">¿Esto reemplaza una canalización de build?<span class="text-slate-400 group-open:rotate-180 transition shrink-0">⌄</span></summary>
      <p class="mt-3 text-slate-600 dark:text-slate-300 leading-relaxed">Para tareas puntuales sí. Para un proyecto completo usarás esbuild/terser/CSSNano en CI; esta herramienta es ideal para llevar un snippet, una plantilla de email o un solo activo a su forma más pequeña.</p>
    </details></div>
</section>
<section class="mt-14 max-w-3xl mx-auto">
  <h2 class="text-xl font-semibold mb-4">Herramientas relacionadas</h2>
  <div class="grid gap-3 sm:grid-cols-2"><a href="/es/tools/html-beautifier" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🌐</span>
      <span class="font-medium text-sm">Embellecedor de HTML</span>
    </a>
<a href="/es/tools/css-beautifier" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🎨</span>
      <span class="font-medium text-sm">Embellecedor de CSS</span>
    </a>
<a href="/es/tools/js-beautifier" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🟨</span>
      <span class="font-medium text-sm">Embellecedor de JS</span>
    </a>
<a href="/es/tools/sql-formatter" class="feature-card card-hover flex-row items-center gap-3">
      <span class="grid place-items-center h-10 w-10 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-xl shrink-0">🗄️</span>
      <span class="font-medium text-sm">Formateador de SQL</span>
    </a></div>
</section>

<script id="mn-i18n" type="application/json">{"ui.input":"Entrada","ui.output":"Salida","ui.minify":"Minificar","ui.sample":"Cargar ejemplo","ui.clear":"Limpiar","ui.copy":"Copiar","ui.copied":"Copiado","ui.download":"Descargar","ui.html":"HTML","ui.css":"CSS","ui.js":"JavaScript","ui.placeholder":"Pega aquí HTML, CSS o JavaScript…","ui.error":"Error","ui.saved":"Ahorrado","ui.privacy":"Todo se ejecuta en tu navegador: tu código nunca sale de tu dispositivo."}</script>
<script>
(function () {
  'use strict';
  var S = JSON.parse(document.getElementById('mn-i18n').textContent);
  var mfTokenizeJs = (function mfTokenizeJs(src) {
  var tokens = [];
  var i = 0, n = src.length;
  var codeBuf = "";
  function flushCode() {
    if (codeBuf) {
      tokens.push({ text: codeBuf, kind: "code" });
      codeBuf = "";
    }
  }
  __name(flushCode, "flushCode");
  while (i < n) {
    var ch = src[i];
    if (ch === '"' || ch === "'") {
      flushCode();
      var quote = ch, start = i;
      i++;
      while (i < n) {
        if (src[i] === "\\" && i + 1 < n)
          i += 2;
        else if (src[i] === quote) {
          i++;
          break;
        } else if (src[i] === "\n") {
          i++;
          break;
        } else
          i++;
      }
      tokens.push({ text: src.slice(start, i), kind: "string" });
      continue;
    }
    if (ch === "`") {
      flushCode();
      var tplStart = i;
      i++;
      while (i < n) {
        if (src[i] === "\\" && i + 1 < n)
          i += 2;
        else if (src[i] === "`") {
          i++;
          break;
        } else
          i++;
      }
      tokens.push({ text: src.slice(tplStart, i), kind: "string" });
      continue;
    }
    if (ch === "/" && src[i + 1] === "/") {
      flushCode();
      var end = src.indexOf("\n", i);
      tokens.push({ text: src.slice(i, end === -1 ? n : end), kind: "comment" });
      i = end === -1 ? n : end;
      continue;
    }
    if (ch === "/" && src[i + 1] === "*") {
      flushCode();
      var end2 = src.indexOf("*/", i + 2);
      tokens.push({ text: src.slice(i, end2 === -1 ? n : end2 + 2), kind: "comment" });
      i = end2 === -1 ? n : end2 + 2;
      continue;
    }
    if (ch === "/" && (src[i + 1] !== "/" && src[i + 1] !== "*")) {
      var prev = src.slice(0, i).replace(/\s+$/, "").slice(-1);
      var ahead = src.slice(0, i).replace(/\s+$/, "");
      var wordM = /([A-Za-z_$][A-Za-z0-9_$]*)$/.exec(ahead);
      var prevWord = wordM ? wordM[1] : "";
      var kwRe = /^(return|typeof|case|instanceof|in|of|void|new|delete|do|else|yield|await|throw)$/.test(prevWord);
      var exprPos = prev === "" || /[(\[,;=!&|?{}]/.test(prev) || kwRe;
      if (exprPos) {
        flushCode();
        var rxStart = i;
        i++;
        var inClass = false;
        while (i < n) {
          var c = src[i];
          if (c === "\\") {
            i += 2;
            continue;
          }
          if (c === "[")
            inClass = true;
          else if (c === "]")
            inClass = false;
          else if (c === "/" && !inClass) {
            i++;
            break;
          } else if (c === "\n") {
            i++;
            break;
          }
          i++;
        }
        tokens.push({ text: src.slice(rxStart, i), kind: "regex" });
        continue;
      }
    }
    codeBuf += ch;
    i++;
  }
  flushCode();
  return tokens;
});
  var mfMinifyHtml = (function mfMinifyHtml(html) {
  var PRESERVE = ["pre", "textarea"];
  var out = "";
  var i = 0, n = html.length;
  while (i < n) {
    var tagMatch = /^<(pre|textarea)\b[^>]*>/i.exec(html.slice(i));
    if (tagMatch) {
      var tagName = tagMatch[1].toLowerCase();
      var closeIdx = html.toLowerCase().indexOf("</" + tagName, i);
      var end = closeIdx === -1 ? n : html.indexOf(">", closeIdx) + 1;
      out += html.slice(i, end);
      i = end;
      continue;
    }
    var ch = html[i];
    if (ch === " " || ch === "	" || ch === "\n" || ch === "\r") {
      var j = i;
      while (j < n && /\s/.test(html[j] || ""))
        j++;
      var prevChar = out.slice(-1);
      var nextChar = html[j] || "";
      if (prevChar === ">" && nextChar === "<") {
      } else {
        out += " ";
      }
      i = j;
      continue;
    }
    out += ch;
    i++;
  }
  return out.replace(/<!--[\s\S]*?-->/g, "").trim();
});
  var mfMinifyCss = (function mfMinifyCss(css) {
  var noComments = css.replace(/\/\*[\s\S]*?\*\//g, "");
  var strings = [];
  var placeheld = noComments.replace(/"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*'/g, function(m) {
    strings.push(m);
    return "\0" + (strings.length - 1) + "\0";
  });
  var minified = placeheld.replace(/\s*([{}:;,])\s*/g, "$1").replace(/;}/g, "}").replace(/\s+/g, " ").trim();
  return minified.replace(/\x00(\d+)\x00/g, function(_m, idx) {
    return strings[Number(idx)];
  });
});
  var mfMinifyJs = (function mfMinifyJs(src) {
  var tokens = mfTokenizeJs(src);
  var out = "";
  for (var i = 0; i < tokens.length; i++) {
    var tok = tokens[i];
    if (tok.kind === "comment")
      continue;
    if (tok.kind === "code")
      out += tok.text.replace(/\s+/g, " ");
    else
      out += tok.text;
  }
  return out.replace(/\s*([{}();,:])\s*/g, "$1").replace(/\s+/g, " ").trim();
});
  var inp = document.getElementById('mn-in'), out = document.getElementById('mn-out'), status = document.getElementById('mn-status');
  var tabs = { html: 'mn-tab-html', css: 'mn-tab-css', js: 'mn-tab-js' };
  var active = 'html';

  function setStatus(ok, msg) {
    status.textContent = msg;
    status.className = 'mt-3 text-sm ' + (ok ? 'text-emerald-600 dark:text-emerald-400' : 'text-red-600 dark:text-red-400');
  }

  function setTab(kind) {
    active = kind;
    Object.keys(tabs).forEach(function (k) {
      var el = document.getElementById(tabs[k]);
      if (k === active) { el.classList.add('bg-indigo-600', 'text-white'); el.classList.remove('text-slate-600'); }
      else { el.classList.remove('bg-indigo-600', 'text-white'); el.classList.add('text-slate-600'); }
    });
    inp.value = '';
    out.value = '';
    status.className = 'hidden';
  }
  document.getElementById('mn-tab-html').addEventListener('click', function () { setTab('html'); });
  document.getElementById('mn-tab-css').addEventListener('click', function () { setTab('css'); });
  document.getElementById('mn-tab-js').addEventListener('click', function () { setTab('js'); });

  var SAMPLES = {
    html: '<div class="box">\n  <p>Hello & welcome</p>\n  <!-- A comment to strip -->\n  <br>\n</div>',
    css: '.box { color: red; /* c */\n  margin: 0 auto;\n}',
    js: 'function add(a, b) {\n  // comment\n  return a + b;\n}\nconst x = add(1, 2);'
  };

  document.getElementById('mn-run').addEventListener('click', function () {
    var text = inp.value;
    if (!text.trim()) { setStatus(false, S['ui.error'] + ': (empty)'); return; }
    var fn = active === 'html' ? mfMinifyHtml : active === 'css' ? mfMinifyCss : mfMinifyJs;
    var before = new Blob([text]).size;
    out.value = fn(text);
    var after = new Blob([out.value]).size;
    setStatus(true, '✓ ' + S['ui.saved'] + ': ' + before.toLocaleString() + ' → ' + after.toLocaleString() + ' bytes (' + Math.round((1 - after / before) * 100) + '%)');
  });
  document.getElementById('mn-clear').addEventListener('click', function () { inp.value = ''; out.value = ''; status.className = 'hidden'; });
  document.getElementById('mn-sample').addEventListener('click', function () { inp.value = SAMPLES[active]; });
  document.getElementById('mn-copy').addEventListener('click', function () {
    navigator.clipboard.writeText(out.value).then(function () {
      var btn = document.getElementById('mn-copy');
      var orig = btn.textContent;
      btn.textContent = S['ui.copied'];
      setTimeout(function () { btn.textContent = orig; }, 1500);
    });
  });
  document.getElementById('mn-dl').addEventListener('click', function () {
    var mime = active === 'html' ? 'text/html' : active === 'css' ? 'text/css' : 'text/javascript';
    var ext = active === 'html' ? 'html' : active === 'css' ? 'css' : 'js';
    var a = document.createElement('a');
    a.href = URL.createObjectURL(new Blob([out.value], { type: mime + ';charset=utf-8' }));
    a.download = 'minified.' + ext;
    a.click();
    URL.revokeObjectURL(a.href);
  });
})();
</script><section class="mt-14 max-w-4xl mx-auto">
        <h2 class="text-xl font-semibold mb-4">Herramientas relacionadas</h2>
        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3"><a href="/es/tools/json-formatter" class="feature-card card-hover">
    <div class="flex items-start justify-between gap-2">
      <span class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🧩</span>
      <div class="flex items-center gap-1.5">
        
        <span class="badge-free">Gratis</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">Formateador JSON</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">Formatear, validar, minificar, ordenar claves — 100% en tu navegador</p>
  </a>
<a href="/es/tools/base64" class="feature-card card-hover">
    <div class="flex items-start justify-between gap-2">
      <span class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🔤</span>
      <div class="flex items-center gap-1.5">
        
        <span class="badge-free">Gratis</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">Codificar/Decodificar Base64</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">UTF-8 correcto, variante URL-safe y soporte de archivos</p>
  </a>
<a href="/es/tools/uuid-generator" class="feature-card card-hover">
    <div class="flex items-start justify-between gap-2">
      <span class="grid place-items-center h-11 w-11 rounded-xl bg-gradient-to-br from-indigo-500/10 to-fuchsia-500/10 text-2xl">🆔</span>
      <div class="flex items-center gap-1.5">
        
        <span class="badge-free">Gratis</span>
      </div>
    </div>
    <h3 class="font-semibold mt-1">Generador de UUID</h3>
    <p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed line-clamp-2">v4 aleatorio / v7 ordenado por tiempo (RFC 9562) en lote</p>
  </a></div>
      </section>
    <div class="mt-8 max-w-6xl mx-auto ad-slot ad-slot-global_footer" role="complementary" aria-label="Advertisement">
  <div class="ad-label">Publicidad</div>
  <div class="ad-content"><ins class="adsbygoogle" style="display:block" data-ad-client="pub-6594328378083782" data-ad-format="auto" data-full-width-responsive="true"></ins></div>
  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
  </main>
  <footer class="border-t border-slate-200/70 dark:border-slate-800/70 mt-8">
    <div class="mx-auto max-w-6xl px-4 py-8 space-y-5 text-sm text-slate-500 dark:text-slate-400">
      <nav class="flex flex-wrap items-center justify-center gap-x-6 gap-y-2" aria-label="Footer">
        <a href="/es/about" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Sobre nosotros</a>
        <a href="/es/contact" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Contacto</a>
        <a href="/es/pricing" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Precios</a>
        <a href="/es/guides" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Guías</a>
        <a href="/es/privacy" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Política de privacidad</a>
        <a href="/es/terms" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Términos del servicio</a>
        <a href="/es/aup" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Uso aceptable</a>
        <a href="/es/refund" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Política de reembolso</a>
        <a href="/es/ai-models" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Modelos de IA</a>
        <a href="/es/announcements" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition">Anuncios</a>
        <a id="sprite-reset-link" href="#" style="display:none" class="hover:text-slate-900 dark:hover:text-slate-100 hover:underline transition" onclick="localStorage.removeItem('sprite_hidden');location.reload()">Mostrar asistente de ayuda</a>
      </nav>
      <div class="flex flex-col sm:flex-row items-center justify-between gap-3">
        <p class="flex items-center gap-2">
          <span class="grid place-items-center h-6 w-6 rounded-lg bg-gradient-to-br from-indigo-600 to-fuchsia-600 text-white text-xs">✦</span>
          © 2026 tomai
        </p>
        <p>Herramientas en línea para tareas diarias</p>
      </div>
    </div>
  </footer>
  <script>
    // Global credit spend/refund toast — call from any tool's script as
    // window.showCreditToast(message, 'spend' | 'refund'). Auto-dismisses
    // after 3s. message is caller-provided plain text (already localized
    // and interpolated), rendered via textContent — never HTML.
    window.showCreditToast = function (message, kind) {
      var root = document.getElementById('credit-toast-root');
      if (!root) return;
      var el = document.createElement('div');
      el.className = 'credit-toast ' + (kind === 'refund' ? 'refund' : 'spend');
      var icon = document.createElement('span');
      icon.className = 'credit-toast-icon';
      icon.textContent = kind === 'refund' ? '↩️' : '🪙';
      var text = document.createElement('span');
      text.textContent = message;
      var bar = document.createElement('span');
      bar.className = 'credit-toast-bar';
      el.appendChild(icon);
      el.appendChild(text);
      el.appendChild(bar);
      root.appendChild(el);
      // The bar's own 3s CSS animation is the visual countdown; this timeout
      // (same 3000ms) is what actually removes the toast once it empties.
      setTimeout(function () {
        el.classList.add('leaving');
        setTimeout(function () { el.remove(); }, 250);
      }, 3000);
    };
  </script>
  <script>
    // Swap the login link for "My account" when the login-hint cookie is set.
    (function () {
      if (/(?:^|;\s*)li=1/.test(document.cookie)) {
        var a = document.getElementById('nav-auth');
        a.href = a.dataset.accountHref;
        a.textContent = a.dataset.accountLabel;
      }
    })();
  </script>
  <script>
    // Header membership CTA: anonymous/free users see "⚡ Upgrade" -> /pricing
    // (the prominent entry point, not just the footer link). Signed-in Pro/Max
    // members see a calm plan badge -> /account instead of a repeated upsell.
    (function () {
      if (!/(?:^|;\s*)li=1/.test(document.cookie)) return;
      var a = document.getElementById('nav-upgrade');
      if (!a) return;
      fetch('/api/credits').then(function (r) { return r.json(); }).then(function (b) {
        if (!b || !b.ok || (b.data.plan !== 'pro' && b.data.plan !== 'max')) return;
        a.href = a.dataset.accountHref;
        a.classList.add('member');
        var label = document.getElementById('nav-upgrade-label');
        if (label) label.textContent = b.data.plan.toUpperCase();
        a.setAttribute('aria-label', b.data.plan.toUpperCase());
      }).catch(function () {});
    })();
  </script>
  <script>
    // Record visit for the home page "recently used" row (local only).
    try {
      var _id = "minifier";
      var _r = JSON.parse(localStorage.getItem('recent_tools') || '[]').filter(function (x) { return x !== _id; });
      _r.unshift(_id);
      localStorage.setItem('recent_tools', JSON.stringify(_r.slice(0, 8)));
    } catch (e) {}
  </script>
  <script>
    // Announcement bar — fetches latest banner, renders inline. Ephemeral content,
    // not SEO-critical; the /announcements page IS full SSR for indexing.
    (function(){
      var bar=document.getElementById('announcement-bar');
      var link=document.getElementById('announcement-bar-link');
      var closeBtn=document.getElementById('announcement-bar-close');
      if(!bar||!link)return;
      var locale="es";
      fetch('/api/announcements/latest?lang='+encodeURIComponent(locale))
        .then(function(r){return r.json()})
        .then(function(b){
          if(!b.ok||!b.data||!b.data.banner)return;
          var ann=b.data.banner;
          try{if(sessionStorage.getItem('ab_'+ann.id)==='1')return}catch(e){}
          link.textContent=ann.title;
          if(ann.slug)link.href='/'+locale+'/announcements/'+ann.slug;
          bar.classList.remove('hidden')
        }).catch(function(){});
      closeBtn.addEventListener('click',function(){
        bar.classList.add('hidden');
        try{sessionStorage.setItem('ab_'+link.href.split('/').pop(),'1')}catch(e){}
      })
    })();
    // First-visit popup — lazy-shown 4s after load, localStorage-dismissed forever.
    (function(){
      if(false)return; // game pages: no popup over gameplay
      var locale="es";
      fetch('/api/announcements/latest?lang='+encodeURIComponent(locale))
        .then(function(r){return r.json()})
        .then(function(b){
          if(!b.ok||!b.data||!b.data.popups||!b.data.popups.length)return;
          var popup=b.data.popups[0];
          try{if(localStorage.getItem('ap_'+popup.id)==='1')return}catch(e){}
          setTimeout(function(){showPopup(popup)},4000)
        }).catch(function(){});
      function showPopup(p){
        var o=document.createElement('div');
        o.className='fixed inset-0 bg-black/50 z-[9998] flex items-center justify-center p-4';
        o.style.animation='fadeIn .25s ease';
        var slug = p.slug||'';
        var detailUrl = slug ? '/'+locale+'/announcements/'+slug : '';
        o.innerHTML='<div class="bg-white dark:bg-slate-900 rounded-2xl shadow-2xl max-w-md w-full p-6 sm:p-8 relative" style="animation:scaleIn .25s ease">'+
          '<button id="apx" class="absolute top-3 right-3 text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 text-xl leading-none">×</button>'+
          '<div class="text-3xl mb-3">📢</div>'+
          '<h2 class="text-lg font-bold mb-2"></h2>'+
          '<p class="text-sm text-slate-600 dark:text-slate-300 mb-5 leading-relaxed"></p>'+
          '<div class="flex gap-2">'+
          '<button id="apd" class="btn-primary text-sm flex-1">Got it</button>'+
          (detailUrl ? '<a href="'+detailUrl+'" class="btn-ghost text-sm flex-1 text-center">Read more →</a>' : '')+
          '</div></div>';
        document.body.appendChild(o);
        o.querySelector('h2').textContent=p.title;
        o.querySelector('p').textContent=p.content.length>200?p.content.slice(0,200)+'…':p.content;
        function close(){o.remove();try{localStorage.setItem('ap_'+p.id,'1')}catch(e){}}
        o.querySelector('#apx').addEventListener('click',close);
        o.querySelector('#apd').addEventListener('click',close);
        o.addEventListener('click',function(e){if(e.target===o)close()})
      }
    })();
  </script>
</body>
</html>