@jjlmoya/utils-developer 1.2.0

package/src/tool/cssToInlineConverter/component.astro

@@ -0,0 +1,308 @@
+---
+import type { KnownLocale } from '../../types';
+import type { CssToInlineConverterUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as CssToInlineConverterUI;
+---
+
+<div
+  class="cssi-root"
+  data-btn-copy={t.btnCopy}
+  data-btn-copied={t.btnCopied}
+  data-msg-error={t.msgError}
+>
+  <div class="cssi-card">
+    <div class="cssi-grid">
+      <div class="cssi-field">
+        <span class="cssi-field-label">{t.labelHtml}</span>
+        <textarea
+          id="cssi-html-input"
+          class="cssi-textarea"
+          placeholder={t.placeholderHtml}
+          spellcheck="false"
+        ></textarea>
+      </div>
+      <div class="cssi-field">
+        <span class="cssi-field-label">{t.labelCss}</span>
+        <textarea
+          id="cssi-css-input"
+          class="cssi-textarea"
+          placeholder={t.placeholderCss}
+          spellcheck="false"
+        ></textarea>
+      </div>
+    </div>
+
+    <div class="cssi-actions">
+      <button id="cssi-convert-btn" class="cssi-btn">
+        <svg class="cssi-btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
+        </svg>
+        {t.btnConvert}
+      </button>
+    </div>
+
+    <div class="cssi-field">
+      <div class="cssi-output-header">
+        <span class="cssi-field-label">{t.labelOutput}</span>
+        <button id="cssi-copy-btn" class="cssi-copy-btn">{t.btnCopy}</button>
+      </div>
+      <textarea
+        id="cssi-html-output"
+        class="cssi-textarea cssi-textarea-output"
+        readonly
+        placeholder={t.placeholderOutput}
+        spellcheck="false"
+      ></textarea>
+    </div>
+  </div>
+</div>
+
+<style>
+  .cssi-root {
+    --cssi-primary: #ec4899;
+    --cssi-primary-dark: #db2777;
+    --cssi-card-bg: #fff;
+    --cssi-bg: #f8fafc;
+    --cssi-text: #0f172a;
+    --cssi-text-muted: #64748b;
+    --cssi-border: #e2e8f0;
+    --cssi-output-bg: rgba(236, 72, 153, 0.04);
+
+    max-width: 1000px;
+    margin: 2rem auto;
+    color: var(--cssi-text);
+  }
+
+  :global(.theme-dark) .cssi-root {
+    --cssi-card-bg: #1e293b;
+    --cssi-bg: #0f172a;
+    --cssi-text: #f1f5f9;
+    --cssi-text-muted: #94a3b8;
+    --cssi-border: #334155;
+    --cssi-output-bg: rgba(236, 72, 153, 0.08);
+  }
+
+  .cssi-card {
+    background: var(--cssi-card-bg);
+    border: 1px solid var(--cssi-border);
+    border-radius: 1.25rem;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .cssi-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.25rem;
+  }
+
+  @media (max-width: 768px) {
+    .cssi-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .cssi-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .cssi-output-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .cssi-field-label {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--cssi-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .cssi-copy-btn {
+    background: transparent;
+    border: 1px solid var(--cssi-border);
+    color: var(--cssi-text-muted);
+    padding: 0.2rem 0.6rem;
+    border-radius: 0.4rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .cssi-copy-btn:hover {
+    background: var(--cssi-bg);
+    color: var(--cssi-primary);
+    border-color: var(--cssi-primary);
+  }
+
+  .cssi-textarea {
+    width: 100%;
+    height: 220px;
+    padding: 1rem 1.25rem;
+    font-size: 0.875rem;
+    color: var(--cssi-text);
+    background: var(--cssi-bg);
+    border: 1px solid var(--cssi-border);
+    border-radius: 0.875rem;
+    resize: vertical;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    outline: none;
+    white-space: pre;
+    overflow: auto;
+    line-height: 1.6;
+  }
+
+  .cssi-textarea:focus {
+    border-color: var(--cssi-primary);
+    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.12);
+  }
+
+  .cssi-textarea-output {
+    border-color: var(--cssi-primary);
+    background: var(--cssi-output-bg);
+    height: 180px;
+  }
+
+  .cssi-textarea-output:focus {
+    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.12);
+  }
+
+  .cssi-actions {
+    display: flex;
+    justify-content: center;
+  }
+
+  .cssi-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: var(--cssi-primary);
+    color: #fff;
+    font-weight: 700;
+    font-size: 0.95rem;
+    padding: 0.875rem 2rem;
+    border-radius: 0.875rem;
+    border: none;
+    cursor: pointer;
+    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
+    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
+  }
+
+  .cssi-btn:hover {
+    background: var(--cssi-primary-dark);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(236, 72, 153, 0.4);
+  }
+
+  .cssi-btn-icon {
+    width: 18px;
+    height: 18px;
+  }
+</style>
+
+<script>
+  const root = document.querySelector('.cssi-root') as HTMLElement | null;
+  const htmlInput = document.getElementById('cssi-html-input') as HTMLTextAreaElement;
+  const cssInput = document.getElementById('cssi-css-input') as HTMLTextAreaElement;
+  const htmlOutput = document.getElementById('cssi-html-output') as HTMLTextAreaElement;
+  const convertBtn = document.getElementById('cssi-convert-btn');
+  const copyBtn = document.getElementById('cssi-copy-btn');
+
+  const txtCopy = root?.dataset.btnCopy ?? 'Copy';
+  const txtCopied = root?.dataset.btnCopied ?? 'Copied!';
+  const txtError = root?.dataset.msgError ?? 'Processing error.';
+
+  function countMatches(text: string, regex: RegExp): number {
+    return (text.match(regex) ?? []).length;
+  }
+
+  function getSpecificity(s: string): number {
+    let text = s;
+    const ids = countMatches(text, /#[\w-]+/g);
+    text = text.replace(/#[\w-]+/g, ' ');
+    const classes = countMatches(text, /\.[\w-]+/g);
+    text = text.replace(/\.[\w-]+/g, ' ');
+    const attrs = countMatches(text, /\[[^\]]+\]/g);
+    text = text.replace(/\[[^\]]+\]/g, ' ');
+    const pElems = countMatches(text, /::[\w-]+/g);
+    text = text.replace(/::[\w-]+/g, ' ');
+    const pClasses = countMatches(text, /:[\w-()]+/g);
+    text = text.replace(/:[\w-()]+/g, ' ');
+    const parts = text.replace(/[*+>~,]/g, ' ').trim().split(/\s+/);
+    const elems = parts[0] ? parts.length : 0;
+    return ids * 100 + (classes + attrs + pClasses) * 10 + (elems + pElems);
+  }
+
+  type CssRule = { selector: string; styles: string; spec: number };
+
+  function extractRules(rawCss: string): CssRule[] {
+    const clean = rawCss.replace(/\/\*[\s\S]*?\*\//g, '');
+    const matches = clean.match(/(?:[^{}]+)\s*\{[^}]+\}/g) ?? [];
+    const rules: CssRule[] = [];
+    for (const block of matches) {
+      const braceIdx = block.indexOf('{');
+      if (braceIdx === -1) continue;
+      const styles = block.slice(braceIdx + 1).replace('}', '').trim();
+      const selectors = block.slice(0, braceIdx).split(',').map((s) => s.trim());
+      if (!styles) continue;
+      for (const sel of selectors) {
+        if (sel && !sel.startsWith('@')) rules.push({ selector: sel, styles, spec: getSpecificity(sel) });
+      }
+    }
+    return rules.sort((a, b) => a.spec - b.spec);
+  }
+
+  function applyRule(doc: Document, rule: CssRule): void {
+    const nodes = doc.querySelectorAll(rule.selector);
+    nodes.forEach((el) => {
+      if (!(el instanceof HTMLElement)) return;
+      let existing = el.getAttribute('style') ?? '';
+      if (existing && !existing.endsWith(';')) existing += '; ';
+      el.setAttribute('style', existing + rule.styles);
+    });
+  }
+
+  function convertToInline(rawHtml: string, rawCss: string): string {
+    const rules = extractRules(rawCss);
+    const doc = new DOMParser().parseFromString(rawHtml, 'text/html');
+    for (const rule of rules) {
+      try { applyRule(doc, rule); } catch { }
+    }
+    return doc.body.innerHTML;
+  }
+
+  if (convertBtn && htmlInput && cssInput && htmlOutput) {
+    convertBtn.addEventListener('click', () => {
+      if (!htmlInput.value.trim()) return;
+      try {
+        htmlOutput.value = convertToInline(htmlInput.value, cssInput.value);
+      } catch {
+        htmlOutput.value = txtError;
+      }
+    });
+  }
+
+  if (copyBtn && htmlOutput) {
+    copyBtn.addEventListener('click', async () => {
+      if (!htmlOutput.value) return;
+      await navigator.clipboard.writeText(htmlOutput.value);
+      copyBtn.textContent = txtCopied;
+      setTimeout(() => { copyBtn.textContent = txtCopy; }, 1500);
+    });
+  }
+</script>

package/src/tool/cssToInlineConverter/i18n/en.ts

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'css-to-inline-converter';
+const title = 'CSS to Inline HTML Converter. Inliner for Emails';
+const description =
+  'Transform your stylesheets and CSS classes into automatically inlined styles in your HTML. Ideal for newsletters, transactional emails, and safe web layout.';
+
+const faqData = [
+  {
+    question: 'Why do emails need inline CSS instead of external stylesheets?',
+    answer:
+      'Email clients like Outlook, Gmail, or Apple Mail filter or ignore <link> and <style> tags for security reasons. The only guaranteed way for a style to be applied correctly in an email is to embed it directly in the style attribute of each HTML element.',
+  },
+  {
+    question: 'What happens if an element already has its own style attribute?',
+    answer:
+      'The tool respects existing inline styles and appends the new properties, simulating CSS cascade behavior: properties declared later override earlier ones in case of conflict.',
+  },
+  {
+    question: 'Does it work with complex selectors like :hover or media queries?',
+    answer:
+      'The tool processes class, id, attribute, and structural pseudo-class selectors that DOMParser can resolve. State-dependent selectors like :hover and media queries cannot be inlined (they depend on runtime environment) and are ignored.',
+  },
+  {
+    question: 'Is my HTML and CSS code sent to any server?',
+    answer:
+      'No. All processing happens 100% in your browser using the native DOMParser API. No byte of your code leaves your device, guaranteeing total privacy for templates with sensitive content.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Paste your original HTML',
+    text: 'Write or paste the HTML you want to process in the "Original HTML" field. It can be a fragment or a complete document.',
+  },
+  {
+    name: 'Add your CSS rules',
+    text: 'Paste the classes and ids you want to inject in the "CSS Rules" field. The tool applies them respecting selector specificity.',
+  },
+  {
+    name: 'Convert and copy',
+    text: 'Click "Inject CSS into HTML". The result with all inline styles will appear below, ready to copy and paste into your email manager or CMS.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'en',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: 'Original HTML',
+  labelCss: 'CSS Rules',
+  labelOutput: 'Inline HTML Result',
+  placeholderHtml: '<div class="my-class">Hello World</div>',
+  placeholderCss: '.my-class { color: red; padding: 10px; }',
+  placeholderOutput: 'Your HTML with embedded styles will appear here...',
+  btnConvert: 'Inject CSS into HTML',
+  btnCopy: 'Copy Code',
+  btnCopied: 'Copied!',
+  msgError: 'Processing error. Check that your HTML and CSS are valid.',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  bibliographyTitle: 'References and Documentation',
+  bibliography: [
+    {
+      name: 'Can I email: HTML and CSS Support Matrix for Emails',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs: The global style attribute',
+      url: 'https://developer.mozilla.org/en/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'DOMParser API: Safe in-browser parsing',
+      url: 'https://developer.mozilla.org/en/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'What Is a CSS Inliner and Why Do You Need One?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'When developing modern web applications, we are used to separating concerns: HTML builds the structure, and an external CSS file provides all the visual styling. However, not all environments trust external stylesheets or global <code>&lt;style&gt;</code> tags.',
+    },
+    {
+      type: 'paragraph',
+      html: 'The most popular and strict use case where external CSS fails is <strong>Email Template Development</strong>. In these environments, the only reliable way for a font, color, or margin to render correctly is to be nested directly in the tag: <code>&lt;span style="color: red;"&gt;</code>.',
+    },
+    {
+      type: 'title',
+      text: 'The CSS Problem in Email Clients',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Email clients like Microsoft Outlook, Apple Mail, or Gmail have notorious histories with their restrictive CSS rendering engines. Most filter or discard <code>&lt;link&gt;</code> or <code>&lt;style&gt;</code> tags for fear of code injections that could break the reading interface.',
+    },
+    {
+      type: 'tip',
+      html: 'For newsletters or transactional emails (receipts, account confirmations), using tables and <em>inline CSS</em> is the gold standard in the email marketing industry.',
+    },
+    {
+      type: 'title',
+      text: 'How This Tool Works in Your Browser',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Safe Parsing:</strong> Uses the <code>DOMParser API</code> to temporarily transform the input HTML into a safe virtual DOM inside your browser.',
+        '<strong>Cascade Simulation:</strong> Analyzes your CSS rules, applies specificity weights to selectors, and mutates the <code>style</code> attributes of selected HTML elements by injecting the code.',
+        '<strong>100% Offline:</strong> No byte of your code leaves your device. Total privacy for templates with sensitive content.',
+      ],
+    },
+  ],
+};

package/src/tool/cssToInlineConverter/i18n/es.ts

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { CssToInlineConverterUI } from '../ui';
+
+const slug = 'convertidor-css-inline';
+const title = 'Convertidor de CSS Externo a Inline HTML. Inliner para Emails';
+const description =
+  'Transforma tus hojas de estilo y clases CSS a estilos incrustados en línea automáticamente en tu HTML. Ideal para newsletters, emails transaccionales y maquetación web segura.';
+
+const faqData = [
+  {
+    question: '¿Por qué los emails necesitan CSS inline y no externo?',
+    answer:
+      'Los clientes de correo como Outlook, Gmail o Apple Mail filtran o ignoran las etiquetas <link> y <style> por razones de seguridad. La única forma garantizada de que un estilo se aplique correctamente en un email es incrustarlo directamente en el atributo style de cada elemento HTML.',
+  },
+  {
+    question: '¿Qué ocurre si un elemento tiene ya un atributo style propio?',
+    answer:
+      'La herramienta respeta los estilos inline existentes y añade las nuevas propiedades a continuación, simulando el comportamiento de la cascada CSS: las propiedades declaradas más tarde sobreescriben las anteriores en caso de conflicto.',
+  },
+  {
+    question: '¿Funciona con selectores complejos como :hover o media queries?',
+    answer:
+      'La herramienta procesa selectores de clase, id, atributos y pseudo-clases estructurales que DOMParser puede resolver. Los selectores dependientes de estado como :hover y las media queries no se pueden inlinear (ya que dependen del entorno en tiempo de ejecución) y son ignorados.',
+  },
+  {
+    question: '¿Mi código HTML y CSS se envía a algún servidor?',
+    answer:
+      'No. Todo el procesamiento ocurre 100% en tu navegador usando la DOMParser API nativa. Ningún byte de tu código sale de tu dispositivo, lo que garantiza privacidad total para plantillas con contenido sensible.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Pega tu HTML original',
+    text: 'Escribe o pega el HTML que deseas procesar en el campo "HTML Original". Puede ser un fragmento o un documento completo.',
+  },
+  {
+    name: 'Añade tus reglas CSS',
+    text: 'Pega en el campo "Reglas CSS" las clases e ids que deseas inyectar. La herramienta las aplica respetando la especificidad de los selectores.',
+  },
+  {
+    name: 'Convierte y copia',
+    text: 'Haz clic en "Inyectar CSS en el HTML". El resultado con todos los estilos inline aparecerá abajo listo para copiar y pegar en tu gestor de email o CMS.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'es',
+};
+
+const ui: CssToInlineConverterUI = {
+  labelHtml: 'HTML Original',
+  labelCss: 'Reglas CSS',
+  labelOutput: 'Resultado HTML En Línea',
+  placeholderHtml: '<div class="mi-clase">Hola Mundo</div>',
+  placeholderCss: '.mi-clase { color: red; padding: 10px; }',
+  placeholderOutput: 'Aquí aparecerá tu HTML con los estilos incrustados...',
+  btnConvert: 'Inyectar CSS en el HTML',
+  btnCopy: 'Copiar Código',
+  btnCopied: '¡Copiado!',
+  msgError: 'Error al procesar. Comprueba que el HTML y el CSS sean correctos.',
+};
+
+export const content: ToolLocaleContent<CssToInlineConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Referencias y Documentación',
+  bibliography: [
+    {
+      name: 'Can I email: La matriz de soporte HTML y CSS para Emails',
+      url: 'https://www.caniemail.com/',
+    },
+    {
+      name: 'MDN Web Docs: El atributo global de estilo (style)',
+      url: 'https://developer.mozilla.org/es/docs/Web/HTML/Global_attributes/style',
+    },
+    {
+      name: 'DOMParser API: Parseo seguro en el navegador',
+      url: 'https://developer.mozilla.org/es/docs/Web/API/DOMParser',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: '¿Qué es un CSS Inliner y por qué lo necesitas?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Al desarrollar aplicaciones web modernas, estamos acostumbrados a separar responsabilidades: el HTML construye la estructura, y un archivo CSS externo aporta todo el estilo visual. Sin embargo, no todos los entornos confían en hojas de estilo externas ni etiquetas globales <code>&lt;style&gt;</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'El caso de uso más popular y estricto donde el CSS externo falla es el <strong>Desarrollo de Plantillas de Email</strong>. En estos contextos, la única manera fiable de que una fuente, color o margen renderice correctamente es que esté anidado directamente en la etiqueta: <code>&lt;span style="color: red;"&gt;</code>.',
+    },
+    {
+      type: 'title',
+      text: 'El problema del CSS en correos electrónicos',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Los clientes de correo como Microsoft Outlook, Apple Mail o Gmail tienen historiales por sus motores de renderizado CSS restrictivos. La mayoría filtra o descarta etiquetas <code>&lt;link&gt;</code> o <code>&lt;style&gt;</code> por temor a inyecciones de código que puedan romper la interfaz de lectura.',
+    },
+    {
+      type: 'tip',
+      html: 'Para newsletters o correos transaccionales (recibos, confirmaciones de cuenta), usar tablas y estilos en línea (<em>inline CSS</em>) es el estándar oro en la industria del email marketing.',
+    },
+    {
+      type: 'title',
+      text: 'Cómo funciona esta herramienta en tu navegador',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Parseo Seguro:</strong> Utiliza la <code>DOMParser API</code> para transformar temporalmente el HTML de entrada en un DOM virtual seguro dentro de tu navegador.',
+        '<strong>Simulación de Cascada:</strong> Analiza tus reglas CSS, aplica pesos de especificidad a los selectores y muta los atributos <code>style</code> de los elementos seleccionados inyectando el código.',
+        '<strong>100% Offline:</strong> Ningún byte de tu código sale de tu dispositivo. Privacidad total para plantillas con contenido sensible.',
+      ],
+    },
+  ],
+};