Minificador de HTML

Optimice la velocidad de carga de la página con un minificador de HTML rápido

Cuando los navegadores web modernos solicitan una página web, el servidor web responde con documentos que contienen instrucciones de estructura, diseño y estilo. Mientras que los desarrolladores dependen de sangrías estructurales espaciosas, saltos de línea extensos, comentarios de código y documentación detallada dentro de los archivos para crear arquitecturas legibles, los compiladores y navegadores de clientes no requieren estos detalles centrados en el ser humano. De hecho, cada línea en blanco, espacio, tabulador y comentario HTML/CSS cuenta como un byte adicional de sobrecarga. Para plataformas web complejas, estos elementos de formato menores pueden acumularse y aumentar el tamaño de los archivos entre un 10% y un 30%, lo que ralentiza los tiempos de carga y degrada Core Web Vitals.

Aquí es donde entra en juego un minificador de HTML. Nuestra herramienta analiza su marcado y elimina los caracteres no esenciales sin alterar el comportamiento de representación del código. Al comprimir la estructura de sus documentos HTML, puede mejorar drásticamente el tiempo hasta el primer byte (TTFB), acelerar las fases iniciales de renderizado y mejorar las velocidades de carga generales.

Comprensión de la canalización interna: cómo comprimir archivos HTML en línea de forma segura

Un desafío importante con la minificación de HTML es garantizar que el proceso no rompa elementos que dependen del espaciado. Por ejemplo, los párrafos, las listas de códigos, las áreas de entrada y los bloques preformateados requieren diseños precisos de espacios en blanco para representarse correctamente. Si un minificador colapsa ciegamente espacios dentro de etiquetas como

,  o </code>, destruirá el formato del texto de cara al usuario.</p><p>Para evitar este problema, nuestra herramienta implementa un proceso de procesamiento seguro:</p><p>Este enfoque de varios pasos garantiza que su contenido visual, elementos interactivos y formularios funcionen perfectamente mientras logra la relación de compresión más alta posible.</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">Optimización avanzada: control granular para scripts y hojas de estilo</h3><p>La mayoría de las plantillas web modernas contienen una combinación de estructura HTML sin formato, estilos incrustados y etiquetas de script en línea. Cuando utilizas esta herramienta para <strong>minimizar HTML en línea</strong>, puedes controlar cada etapa de compresión individualmente:</p><ul class="list-disc list-inside space-y-2"> <li><strong>Contraer espacios en blanco</strong>: contrae espacios redundantes, nuevas líneas y sangrías en todo el documento de diseño.</li><li><strong>Eliminar comentarios</strong>: elimina todos los comentarios HTML. Los desarrolladores suelen dejar notas sobre el anidamiento del diseño, lo que añade peso innecesario a los activos de producción. Eliminar estos comentarios mantiene el código del lado del cliente limpio y profesional.</li><li><strong>Minimizar JS en línea</strong>: elimina las notas de desarrollador en línea y los saltos de línea de las etiquetas <code><script></code>, utilizando un algoritmo seguro de eliminación de comentarios para reducir el tamaño de la carga útil de JS.</li><li><strong>Minimizar CSS en línea</strong>: comprime los estilos en línea eliminando comentarios CSS, espacios adicionales alrededor de las llaves y puntos y coma innecesarios antes de cerrar los corchetes.</li> </ul><p>Al utilizar estas cuatro opciones, puede personalizar el proceso de minificación para adaptarlo a los requisitos de su espacio de trabajo, ya sea que esté preparando código de producción, plantillas o fragmentos sin procesar.</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">Evaluación de compensaciones de compresión y casos extremos</h3><p>Si bien minimizar HTML produce claras recompensas de rendimiento, es importante comprender cuándo y cómo configurar la herramienta para proyectos complejos. Por ejemplo, cuando se utilizan marcos de renderizado del lado del servidor (SSR) o motores de plantillas como PHP, JSP o Jinja, las plantillas contienen marcadores de sintaxis especiales (por ejemplo, etiquetas con sintaxis entre corchetes). Minimizar las plantillas sin formato que contienen estos componentes de sintaxis a veces puede provocar problemas de análisis o errores visuales si el motor del servidor aplica estrictamente las reglas de espaciado. En tales escenarios, se recomienda encarecidamente ejecutar el minificador en la salida HTML estática final generada en lugar del código fuente de la plantilla. Además, cuando se utilizan estilos CSS en línea dentro de archivos HTML, los motores de diseño del navegador pueden requerir ocasionalmente un espacio específico para analizar trucos personalizados. Si nota anomalías en el estilo después de la compresión, desactive la opción de minificación de CSS en línea para verificar si el formato de la hoja de estilo fue el origen del problema. Al experimentar con opciones de alternancia individuales, puede lograr el equilibrio perfecto entre una reducción agresiva del tamaño de archivo y la estabilidad del código base.</p><h3 class="text-xl font-bold tracking-tight text-[#171717] dark:text-white font-sans">Ejecución del lado del cliente: 100% segura y privada</h3><p>La privacidad de los datos es una preocupación importante cuando se utilizan utilidades de desarrollo en línea. Muchas herramientas web cargan sus cargas de código a servidores remotos para su procesamiento, lo que corre el riesgo de exponer puntos finales de API, claves de configuración, esquemas de bases de datos o plantillas patentadas confidenciales a servidores de terceros.</p><p>Priorizamos la seguridad ejecutando todas las operaciones del lado del cliente. Nuestra herramienta se ejecuta completamente en la zona de pruebas de su navegador local. El algoritmo de minificación de HTML, la lógica de formato y el resaltado de sintaxis se ejecutan como un bucle de JavaScript local dentro del DOM. No se transmiten datos a servidores externos, lo que garantiza que sus plantillas de preproducción, formularios internos y segmentos de código permanezcan completamente privados.</p> </div> <!-- FAQ Sidebar --> <div class="space-y-6"> <h2 class="text-lg font-bold tracking-tight text-[#171717] dark:text-white font-sans"> Preguntas Frecuentes </h2> <div class="space-y-4"> <div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">¿Por qué debería minimizar el código HTML?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">La minificación reduce el tamaño del archivo HTML al eliminar caracteres innecesarios, como espacios múltiples, caracteres de nueva línea, sangrías de tabulación y comentarios de código. Al reducir la carga útil general enviada desde su servidor web o red de entrega de contenido (CDN) al navegador, se mejoran las velocidades de carga de la página. Esto se traduce directamente en un menor tiempo hasta el primer byte (TTFB), hitos de pintura más rápidos como la pintura con contenido más grande (LCP), un menor consumo de ancho de banda para los usuarios de dispositivos móviles y señales positivas generales para los algoritmos de optimización de motores de búsqueda (SEO).</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">¿Este minificador de HTML compromete la privacidad de mis datos?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">No, tu código fuente es completamente seguro. Esta utilidad de minificación de HTML procesa el código completamente dentro de su navegador web. No se carga ninguna estructura HTML, scripts en línea, estilos o datos de configuración a servidores remotos o puntos finales externos. Dado que todo el procesamiento se ejecuta en el lado del cliente mediante JavaScript, puede usarlo de forma segura en portales web corporativos, plantillas de preproducción o páginas que contengan API internas sin preocuparse por las fugas o el seguimiento de datos.</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">¿Puede la minificación HTML romper los estilos JavaScript o CSS en línea?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">Generalmente, la minificación estándar no rompe el código en línea si su sintaxis es válida. Nuestro minificador de HTML presenta distintas configuraciones de alternancia para JavaScript en línea y CSS en línea. Cuando está habilitado, aplica un ligero colapso de espacios en blanco y eliminación de comentarios dentro de las etiquetas de estilo y script, preservando al mismo tiempo la integridad sintáctica. Si su proyecto utiliza una sintaxis de plantilla compleja o secuencias de comandos estrictas, puede desactivar la minificación de JS o CSS en línea para conservar esas secciones exactamente como fueron escritas.</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">¿Cómo protege la herramienta el texto y los bloques de código preformateados?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">Los bloques de código dentro de elementos como <pre>, <code> y <textarea> dependen de caracteres de espacio en blanco literales para formatear su contenido correctamente. Colapsar espacios dentro de estas etiquetas rompería la presentación del código. Para evitar esto, nuestro motor de procesamiento extrae estos bloques y los reemplaza con marcadores de posición temporales únicos antes de la compresión. Una vez que se minimiza el diseño HTML externo, los marcadores de posición se reemplazan con los bloques de código originales sin modificar, manteniendo su formato.</p> </div><div class="border-b border-[#ebebeb] dark:border-[#1f1f1f] pb-3"> <h4 class="text-sm font-semibold text-[#171717] dark:text-white mb-1.5">¿Cuál es la diferencia entre minificación HTML y compresión Gzip?</h4> <p class="text-xs text-[#4d4d4d] dark:text-[#888] leading-relaxed">La minificación de HTML es una optimización del tiempo de compilación o del tiempo de proceso que elimina caracteres de texto redundantes (como comentarios de desarrolladores, saltos de tabulación y espacios adicionales) directamente del código fuente. La compresión Gzip (o Brotli) es un algoritmo de compresión en tiempo de ejecución del lado del servidor que comprime cargas de texto utilizando algoritmos basados ​​en diccionarios antes de transmitirlos a través de HTTP. Estos dos métodos son complementarios; Minimizar su HTML elimina tokens inútiles y luego Gzip comprime el código optimizado resultante, maximizando la velocidad de carga.</p> </div> </div> </div> </div> </div> </main> <script id="ui-translations" type="application/json">{"Input HTML":"Entrada HTML","Sample":"muestra","Clear":"Borrar","Collapse Whitespace":"Contraer espacios en blanco","Remove Comments":"Eliminar comentarios","Minify Inline JS":"Minimizar JS en línea","Minify Inline CSS":"Minimizar CSS en línea","0 chars":"0 caracteres","Minify HTML":"Minimizar HTML","Minified Output":"Salida minimizada","Copy":"Copiar","Download":"Descargar","Output will appear here…":"La salida aparecerá aquí…","Copied!":"¡Copiado!","Paste your HTML code here…":"Pega tu código HTML aquí…","Copied to clipboard!":"¡Copiado al portapapeles!","Copy failed — try Ctrl+C":"Error al copiar: intente Ctrl+C","Minified HTML file downloaded!":"¡Descargado el archivo HTML minimizado!","Failed to process":"No se pudo procesar","{0} char{1}":"{0} carácter{1}","{0} chars":"{0} caracteres","{0} chars · {1}{2}% size reduction":"{0} caracteres · {1}{2}% de reducción de tamaño","<span class=\"text-red-500 font-semibold\">✗ Minification Error</span>\\n\\n<span class=\"text-red-400\">{0}</span>":"<span class=\"text-red-500 font-semibold\">✗ Error de minificación</span>\\n\\n<span class=\"text-red-400\">{0}</span>"}</script> <footer class="w-full border-t border-[#ebebeb] bg-white dark:border-[#1f1f1f] dark:bg-[#000000] transition-colors duration-200"> <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16"> <div class="xl:grid xl:grid-cols-4 xl:gap-8"> <!-- Brand description --> <div class="space-y-4 xl:col-span-1"> <a href="/es/" class="flex items-center"> <!-- Transparent logo — works on both light & dark --> <img src="/logo-transparent.png" alt="say.tools logo" class="h-[48px] md:h-[96px] w-auto"> </a> <p class="text-sm text-[#4d4d4d] dark:text-[#888] max-w-xs"> Su destino final para herramientas de utilidad web rápidas, gratuitas y seguras. Creadas completamente del lado del cliente para máxima privacidad. </p> <div class="flex items-center gap-2 pt-2"> <span class="w-2 h-2 rounded-full bg-green-400 block flex-shrink-0"></span> <span class="text-xs font-mono text-[#888]">Todas las herramientas se ejecutan del lado del cliente</span> </div> </div> <!-- Links columns --> <div class="mt-12 grid grid-cols-3 gap-8 xl:col-span-3 xl:mt-0"> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">Herramientas</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/es/text/word-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Contador de palabras</a></li> <li><a href="/es/developer/qr-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Generador de códigos QR</a></li> <li><a href="/es/developer/password-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Generador de contraseñas</a></li> <li><a href="/es/developer/uuid-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Generador de UUID masivo en línea gratuito</a></li> <li><a href="/es/developer/epoch-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertidor de marca de tiempo de época Unix</a></li> <li><a href="/es/developer/jwt-debugger" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Depurador de tokens web JSON</a></li> <li><a href="/es/calculators/unit-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertidor de unidades</a></li> <li><a href="/es/design/color-picker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Selector de color y generador de paleta</a></li> <li><a href="/es/calculators/tip-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora de propinas en línea</a></li> <li><a href="/es/calculators/scientific-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora científica</a></li> <li><a href="/es/calculators/fraction-to-decimal" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora de fracción a decimal</a></li> <li><a href="/es/calculators/decimal-to-fraction" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora de decimales a fracciones</a></li> <li><a href="/es/developer/json-validator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Validador y analizador JSON en línea gratuito</a></li> <li><a href="/es/developer/css-minifier" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Compresor de código CSS en línea gratuito</a></li> <li><a href="/es/developer/base64-to-image" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Decodificador de imágenes a Base64 en línea gratuito</a></li> <li><a href="/es/productivity/merge-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Utilidad gratuita de fusión de PDF en línea</a></li> <li><a href="/es/productivity/word-to-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertidor gratuito de Word a PDF en línea</a></li> <li><a href="/es/productivity/split-pdf" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Divisor de PDF y extractor de páginas en línea gratuito</a></li> <li><a href="/es/developer/whois-lookup" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Herramienta gratuita de búsqueda Whois del lado del cliente</a></li> <li><a href="/es/developer/dns-lookup" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Utilidad gratuita de búsqueda de registros DNS en vivo</a></li> </ul> </div> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">Más Herramientas</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/es/calculators/date-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora de fecha</a></li> <li><a href="/es/calculators/bmi-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora de IMC</a></li> <li><a href="/es/developer/base64-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Codificador y decodificador Base64</a></li> <li><a href="/es/developer/sql-formatter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Formateador SQL</a></li> <li><a href="/es/developer/user-agent-parser" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Analizador de agente de usuario</a></li> <li><a href="/es/text/morse-code-translator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Traductor de código Morse</a></li> <li><a href="/es/design/screen-resolution" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Comprobador de pantalla y ventana gráfica</a></li> <li><a href="/es/text/text-utils" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertidor de casos de texto y utilidades</a></li> <li><a href="/es/developer/json-formatter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Formateador y validador JSON</a></li> <li><a href="/es/developer/hash-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Generador de hash</a></li> <li><a href="/es/calculators/lcm-finder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora MCM (mínimo común múltiplo)</a></li> <li><a href="/es/calculators/gcd-finder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora MCD</a></li> <li><a href="/es/calculators/prime-checker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Comprobador de números primos</a></li> <li><a href="/es/developer/url-parser" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Analizador y depurador de URL en línea gratuito</a></li> <li><a href="/es/developer/http-headers" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Visor de encabezados de solicitud HTTP gratuito en línea</a></li> <li><a href="/es/developer/qr-decoder" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Escáner y decodificador de códigos QR en línea gratuito</a></li> <li><a href="/es/developer/cron-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Generador de expresiones cron</a></li> <li><a href="/es/design/png-to-svg" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Vectorizador en línea gratuito de PNG a SVG</a></li> <li><a href="/es/calculators/metric-conversion" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Herramienta gratuita de conversión de métricas en línea</a></li> <li><a href="/es/text/markdown-to-html" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertidor de Markdown a HTML gratuito en línea</a></li> <li><a href="/es/text/html-to-markdown" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertidor HTML a Markdown en línea gratuito</a></li> <li><a href="/es/developer/json-minifier" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Minificador JSON en línea gratuito</a></li> </ul> </div> <div> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">Aún Más</h3> <ul role="list" class="mt-4 space-y-2"> <li><a href="/es/productivity/timer" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Temporizador y cronómetro en línea</a></li> <li><a href="/es/productivity/stopwatch" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Cronómetro en línea</a></li> <li><a href="/es/text/lorem-ipsum" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Generador Lorem Ipsum</a></li> <li><a href="/es/calculators/percentage-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora de porcentaje</a></li> <li><a href="/es/text/markdown-preview" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Vista previa de rebajas</a></li> <li><a href="/es/calculators/random-number" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Generador de números aleatorios</a></li> <li><a href="/es/design/image-compressor" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Compresor de imagen</a></li> <li><a href="/es/design/hex-to-rgb" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertidor hexagonal y RGB</a></li> <li><a href="/es/design/aspect-ratio-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora de relación de aspecto</a></li> <li><a href="/es/calculators/quadratic-solver" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Solucionador de ecuaciones cuadráticas</a></li> <li><a href="/es/calculators/date-difference" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora de días entre fechas</a></li> <li><a href="/es/calculators/fibonacci-generator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Generador de secuencias de Fibonacci</a></li> <li><a href="/es/design/svg-to-png" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Rasterizador de SVG a PNG en línea gratuito</a></li> <li><a href="/es/design/image-converter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertidor de imágenes locales en línea gratuito</a></li> <li><a href="/es/design/placeholder-image" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Generador de imágenes de marcador de posición gratuito en línea</a></li> <li><a href="/es/design/contrast-checker" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Comprobador de contraste de color en línea gratuito</a></li> <li><a href="/es/design/hsl-to-rgb" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Convertidor de color HSL a RGB en línea gratuito</a></li> <li><a href="/es/calculators/gratuity-calculator" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Calculadora gratuita de propinas y propinas en línea</a></li> <li><a href="/es/text/character-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Contador de caracteres en línea gratuito</a></li> <li><a href="/es/text/sentence-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Contador de frases gratuito en línea</a></li> <li><a href="/es/text/paragraph-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Contador de párrafos en línea gratuito</a></li> <li><a href="/es/text/line-counter" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Contador de líneas gratuito en línea</a></li> </ul> <div class="mt-6 space-y-2"> <h3 class="text-xs font-semibold uppercase tracking-wider text-[#171717] dark:text-white font-mono">Compañía</h3> <ul role="list" class="space-y-2"> <li><a href="/es/about" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Sobre Nosotros</a></li> <li><a href="/es/contact" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Contacto</a></li> <li><a href="/es/privacy" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Política de Privacidad</a></li> <li><a href="/es/terms" class="text-sm text-[#4d4d4d] hover:text-[#171717] dark:text-[#888] dark:hover:text-[#fff] transition-colors">Términos de Servicio</a></li> </ul> </div> </div> </div> </div> <!-- Bottom copyrights --> <div class="mt-12 border-t border-[#ebebeb] pt-8 dark:border-[#1f1f1f] flex flex-col sm:flex-row items-center justify-between gap-4"> <p class="text-xs text-[#888] dark:text-[#888] font-mono">
© 2026 say.tools. Todos los derechos reservados. Las herramientas se ejecutan 100% del lado del cliente. </p> <div class="flex flex-col sm:flex-row items-center gap-4 text-xs font-mono text-[#888] dark:text-[#888] select-none"> <span class="flex items-center gap-1.5">
Made with <span class="text-[#ff4b4b]">❤️</span> by <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="underline hover:text-[#171717] dark:hover:text-white font-semibold">NiranjanBuilds</a> <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="hover:text-[#171717] dark:hover:text-white inline-flex items-center" aria-label="X (Twitter)">𝕏</a> </span> <span class="hidden sm:inline w-px h-3 bg-[#ebebeb] dark:bg-[#1f1f1f]"></span> <a href="mailto:support@say.tools" class="hover:underline">support@say.tools</a> </div> </div> </div> </footer>  <script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"¿Por qué debería minimizar el código HTML?","acceptedAnswer":{"@type":"Answer","text":"La minificación reduce el tamaño del archivo HTML al eliminar caracteres innecesarios, como espacios múltiples, caracteres de nueva línea, sangrías de tabulación y comentarios de código. Al reducir la carga útil general enviada desde su servidor web o red de entrega de contenido (CDN) al navegador, se mejoran las velocidades de carga de la página. Esto se traduce directamente en un menor tiempo hasta el primer byte (TTFB), hitos de pintura más rápidos como la pintura con contenido más grande (LCP), un menor consumo de ancho de banda para los usuarios de dispositivos móviles y señales positivas generales para los algoritmos de optimización de motores de búsqueda (SEO)."}},{"@type":"Question","name":"¿Este minificador de HTML compromete la privacidad de mis datos?","acceptedAnswer":{"@type":"Answer","text":"No, tu código fuente es completamente seguro. Esta utilidad de minificación de HTML procesa el código completamente dentro de su navegador web. No se carga ninguna estructura HTML, scripts en línea, estilos o datos de configuración a servidores remotos o puntos finales externos. Dado que todo el procesamiento se ejecuta en el lado del cliente mediante JavaScript, puede usarlo de forma segura en portales web corporativos, plantillas de preproducción o páginas que contengan API internas sin preocuparse por las fugas o el seguimiento de datos."}},{"@type":"Question","name":"¿Puede la minificación HTML romper los estilos JavaScript o CSS en línea?","acceptedAnswer":{"@type":"Answer","text":"Generalmente, la minificación estándar no rompe el código en línea si su sintaxis es válida. Nuestro minificador de HTML presenta distintas configuraciones de alternancia para JavaScript en línea y CSS en línea. Cuando está habilitado, aplica un ligero colapso de espacios en blanco y eliminación de comentarios dentro de las etiquetas de estilo y script, preservando al mismo tiempo la integridad sintáctica. Si su proyecto utiliza una sintaxis de plantilla compleja o secuencias de comandos estrictas, puede desactivar la minificación de JS o CSS en línea para conservar esas secciones exactamente como fueron escritas."}},{"@type":"Question","name":"¿Cómo protege la herramienta el texto y los bloques de código preformateados?","acceptedAnswer":{"@type":"Answer","text":"Los bloques de código dentro de elementos como <pre>, <code> y <textarea> dependen de caracteres de espacio en blanco literales para formatear su contenido correctamente. Colapsar espacios dentro de estas etiquetas rompería la presentación del código. Para evitar esto, nuestro motor de procesamiento extrae estos bloques y los reemplaza con marcadores de posición temporales únicos antes de la compresión. Una vez que se minimiza el diseño HTML externo, los marcadores de posición se reemplazan con los bloques de código originales sin modificar, manteniendo su formato."}},{"@type":"Question","name":"¿Cuál es la diferencia entre minificación HTML y compresión Gzip?","acceptedAnswer":{"@type":"Answer","text":"La minificación de HTML es una optimización del tiempo de compilación o del tiempo de proceso que elimina caracteres de texto redundantes (como comentarios de desarrolladores, saltos de tabulación y espacios adicionales) directamente del código fuente. La compresión Gzip (o Brotli) es un algoritmo de compresión en tiempo de ejecución del lado del servidor que comprime cargas de texto utilizando algoritmos basados ​​en diccionarios antes de transmitirlos a través de HTTP. Estos dos métodos son complementarios; Minimizar su HTML elimina tokens inútiles y luego Gzip comprime el código optimizado resultante, maximizando la velocidad de carga."}}]}</script>  <script type="module" src="/_astro/html-minifier.astro_astro_type_script_index_0_lang.Gbp66YcM.js"></script>  <!-- STICKY BOTTOM NAVIGATION BAR --> <div class="lg:hidden fixed bottom-0 left-0 right-0 z-40 bg-white/80 dark:bg-black/80 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] px-6 py-1.5" style="padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px))"> <div class="flex items-center justify-around h-12"> <!-- Home Button --> <a href="/es/" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> </svg> <span class="text-[10px] font-semibold font-sans">Inicio</span> </a> <!-- Tools Button --> <button id="bottom-nav-tools-btn" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path> </svg> <span class="text-[10px] font-semibold font-sans">Herramientas</span> </button> <!-- Theme Toggle Button --> <button class="theme-toggle flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none" aria-label="Toggle Theme"> <!-- Sun Icon --> <svg class="theme-toggle-light-icon hidden w-5 h-5 mb-0.5 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m0-12.728l.707.707m12.728 12.728l.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z"></path> </svg> <!-- Moon Icon --> <svg class="theme-toggle-dark-icon hidden w-5 h-5 mb-0.5 text-current" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path> </svg> <span class="text-[10px] font-semibold font-sans">Tema</span> </button> <!-- More Button --> <button id="bottom-nav-more-btn" class="flex flex-col items-center justify-center text-[#4d4d4d] dark:text-[#888] hover:text-[#007cf0] dark:hover:text-[#007cf0] transition-colors w-16 cursor-pointer select-none"> <svg class="w-5 h-5 mb-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="1"></circle> <circle cx="12" cy="5" r="1"></circle> <circle cx="12" cy="19" r="1"></circle> </svg> <span class="text-[10px] font-semibold font-sans">Menú</span> </button> </div> </div> <!-- TOOLS DRAWER OVERLAY --> <div id="tools-sheet-backdrop" class="fixed inset-0 z-50 bg-black/40 dark:bg-black/60 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 hidden"></div> <div id="tools-sheet" class="fixed bottom-0 left-0 right-0 z-50 max-h-[82vh] bg-white/95 dark:bg-[#0a0a0a]/95 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] rounded-t-2xl shadow-2xl translate-y-full transition-transform duration-300 ease-out hidden flex flex-col"> <!-- Drag Handle style bar --> <div class="flex justify-center py-3"> <div class="w-10 h-1 rounded-full bg-[#e5e5e5] dark:bg-[#2e2e2e]"></div> </div> <!-- Drawer Header --> <div class="px-6 pb-4 border-b border-[#e5e5e5] dark:border-[#1f1f1f] flex items-center justify-between"> <h3 class="text-base font-bold text-[#171717] dark:text-white font-sans">Herramientas</h3> <button id="tools-sheet-close" class="w-7 h-7 rounded-full bg-[#f5f5f5] dark:bg-[#1f1f1f] text-[#4d4d4d] dark:text-[#888] flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer" aria-label="Close"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Drawer Search Bar --> <div class="px-6 py-3 border-b border-[#e5e5e5] dark:border-[#1f1f1f] bg-[#fafafa]/50 dark:bg-[#0a0a0a]/50"> <div class="relative flex items-center"> <svg class="absolute left-3 w-4 h-4 text-[#888] dark:text-[#555] pointer-events-none" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path> </svg> <input type="text" id="tools-search-input" placeholder="Buscar herramientas…" class="w-full pl-9 pr-8 py-2 text-sm bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-[#1f1f1f] rounded-lg text-[#171717] dark:text-white placeholder-[#888] dark:placeholder-[#555] focus:outline-none focus:border-[#007cf0] dark:focus:border-[#007cf0] focus:ring-1 focus:ring-[#007cf0] transition-all"> <button id="tools-search-clear" class="absolute right-3 hidden text-[#888] dark:text-[#555] hover:text-[#171717] dark:hover:text-white transition-colors cursor-pointer" aria-label="Clear search"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> </div> <!-- Drawer Categories and Links --> <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6"> <div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Texto y Escritura </h4> <div class="grid grid-cols-2 gap-2"> <a href="/es/text/word-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="contador de palabras"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Contador de palabras</span> </a><a href="/es/text/text-utils" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de casos de texto y utilidades"> <span class="text-sm flex-shrink-0">🔤</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de casos de texto y utilidades</span> </a><a href="/es/text/lorem-ipsum" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador lorem ipsum"> <span class="text-sm flex-shrink-0">📄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador Lorem Ipsum</span> </a><a href="/es/text/markdown-preview" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="vista previa de rebajas"> <span class="text-sm flex-shrink-0">✍️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Vista previa de rebajas</span> </a><a href="/es/text/case-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de cajas"> <span class="text-sm flex-shrink-0">🔠</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de cajas</span> </a><a href="/es/text/remove-duplicate-lines" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="eliminador de líneas duplicadas"> <span class="text-sm flex-shrink-0">🧹</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Eliminador de líneas duplicadas</span> </a><a href="/es/text/find-and-replace-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="herramienta buscar y reemplazar"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Herramienta Buscar y Reemplazar</span> </a><a href="/es/text/reverse-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="herramienta de texto inverso"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Herramienta de texto inverso</span> </a><a href="/es/text/string-length" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="buscador de longitud de cuerda"> <span class="text-sm flex-shrink-0">📏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Buscador de longitud de cuerda</span> </a><a href="/es/text/word-replacer" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="reemplazo de palabras"> <span class="text-sm flex-shrink-0">✏️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Reemplazo de palabras</span> </a><a href="/es/text/sort-list-online" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="clasificador de listas"> <span class="text-sm flex-shrink-0">🗂️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Clasificador de listas</span> </a><a href="/es/text/text-to-binary" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de texto a binario"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de texto a binario</span> </a><a href="/es/text/text-to-hex" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de texto a hexadecimal"> <span class="text-sm flex-shrink-0">🛑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de texto a hexadecimal</span> </a><a href="/es/text/hex-to-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de hexadecimal a texto"> <span class="text-sm flex-shrink-0">💬</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de hexadecimal a texto</span> </a><a href="/es/text/text-diff" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="herramienta de diferenciación de texto"> <span class="text-sm flex-shrink-0">🔀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Herramienta de diferenciación de texto</span> </a><a href="/es/text/number-to-words" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de números a palabras"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de números a palabras</span> </a><a href="/es/text/char-frequency" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="contador de frecuencia de caracteres"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Contador de frecuencia de caracteres</span> </a><a href="/es/text/binary-to-text" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de binario a texto"> <span class="text-sm flex-shrink-0">01</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de binario a texto</span> </a><a href="/es/text/rot13" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="codificador y decodificador rot13"> <span class="text-sm flex-shrink-0">🔀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Codificador y decodificador ROT13</span> </a><a href="/es/text/slug-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de url slug"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de URL Slug</span> </a><a href="/es/text/morse-code-translator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="traductor de código morse"> <span class="text-sm flex-shrink-0">📻</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Traductor de código Morse</span> </a><a href="/es/text/markdown-to-html" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de markdown a html gratuito en línea"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de Markdown a HTML gratuito en línea</span> </a><a href="/es/text/html-to-markdown" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor html a markdown en línea gratuito"> <span class="text-sm flex-shrink-0">✍️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor HTML a Markdown en línea gratuito</span> </a><a href="/es/text/character-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="contador de caracteres en línea gratuito"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Contador de caracteres en línea gratuito</span> </a><a href="/es/text/sentence-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="contador de frases gratuito en línea"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Contador de frases gratuito en línea</span> </a><a href="/es/text/paragraph-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="contador de párrafos en línea gratuito"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Contador de párrafos en línea gratuito</span> </a><a href="/es/text/line-counter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="contador de líneas gratuito en línea"> <span class="text-sm flex-shrink-0">📏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Contador de líneas gratuito en línea</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Código y Desarrollo </h4> <div class="grid grid-cols-2 gap-2"> <a href="/es/developer/qr-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de códigos qr"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de códigos QR</span> </a><a href="/es/developer/password-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de contraseñas"> <span class="text-sm flex-shrink-0">🔑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de contraseñas</span> </a><a href="/es/developer/base64-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="codificador y decodificador base64"> <span class="text-sm flex-shrink-0">🔏</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Codificador y decodificador Base64</span> </a><a href="/es/developer/json-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateador y validador json"> <span class="text-sm flex-shrink-0">📋</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateador y validador JSON</span> </a><a href="/es/developer/hash-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de hash"> <span class="text-sm flex-shrink-0">🔐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de hash</span> </a><a href="/es/developer/css-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateador css"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateador CSS</span> </a><a href="/es/developer/csv-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de csv a json"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de CSV a JSON</span> </a><a href="/es/developer/html-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateador y embellecedor html"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateador y embellecedor HTML</span> </a><a href="/es/developer/html-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="minificador de html"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Minificador de HTML</span> </a><a href="/es/developer/js-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateador de javascript"> <span class="text-sm flex-shrink-0">📜</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateador de JavaScript</span> </a><a href="/es/developer/js-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="minificador de javascript"> <span class="text-sm flex-shrink-0">📦</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Minificador de JavaScript</span> </a><a href="/es/developer/json-to-csv" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de json a csv"> <span class="text-sm flex-shrink-0">📈</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de JSON a CSV</span> </a><a href="/es/developer/json-to-xml" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de json a xml"> <span class="text-sm flex-shrink-0">🪵</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de JSON a XML</span> </a><a href="/es/developer/xml-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateador y embellecedor xml"> <span class="text-sm flex-shrink-0">📝</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateador y embellecedor XML</span> </a><a href="/es/developer/xml-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de xml a json"> <span class="text-sm flex-shrink-0">🧩</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de XML a JSON</span> </a><a href="/es/developer/sql-formatter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="formateador sql"> <span class="text-sm flex-shrink-0">🗄️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Formateador SQL</span> </a><a href="/es/developer/user-agent-parser" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="analizador de agente de usuario"> <span class="text-sm flex-shrink-0">🤖</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Analizador de agente de usuario</span> </a><a href="/es/developer/regex-tester" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="probador y depurador de expresiones regulares"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Probador y depurador de expresiones regulares</span> </a><a href="/es/developer/json-to-yaml" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de json a yaml"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de JSON a YAML</span> </a><a href="/es/developer/yaml-to-json" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de yaml a json"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de YAML a JSON</span> </a><a href="/es/developer/cron-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de expresiones cron"> <span class="text-sm flex-shrink-0">⚙️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de expresiones cron</span> </a><a href="/es/developer/html-entities" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="codificador y decodificador de entidades html"> <span class="text-sm flex-shrink-0">🏷️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Codificador y decodificador de entidades HTML</span> </a><a href="/es/developer/image-to-base64" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="imagen al codificador base64"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Imagen al codificador Base64</span> </a><a href="/es/developer/password-strength" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="comprobador de seguridad de contraseña"> <span class="text-sm flex-shrink-0">🔐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Comprobador de seguridad de contraseña</span> </a><a href="/es/developer/url-encoder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="codificador y decodificador de url"> <span class="text-sm flex-shrink-0">🔒</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Codificador y decodificador de URL</span> </a><a href="/es/developer/uuid-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de uuid masivo en línea gratuito"> <span class="text-sm flex-shrink-0">🆔</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de UUID masivo en línea gratuito</span> </a><a href="/es/developer/epoch-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de marca de tiempo de época unix"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de marca de tiempo de época Unix</span> </a><a href="/es/developer/jwt-debugger" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="depurador de tokens web json"> <span class="text-sm flex-shrink-0">🔑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Depurador de tokens web JSON</span> </a><a href="/es/developer/json-validator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="validador y analizador json en línea gratuito"> <span class="text-sm flex-shrink-0">🤖</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Validador y analizador JSON en línea gratuito</span> </a><a href="/es/developer/css-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="compresor de código css en línea gratuito"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Compresor de código CSS en línea gratuito</span> </a><a href="/es/developer/base64-to-image" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="decodificador de imágenes a base64 en línea gratuito"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Decodificador de imágenes a Base64 en línea gratuito</span> </a><a href="/es/developer/url-parser" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="analizador y depurador de url en línea gratuito"> <span class="text-sm flex-shrink-0">🔗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Analizador y depurador de URL en línea gratuito</span> </a><a href="/es/developer/http-headers" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="visor de encabezados de solicitud http gratuito en línea"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Visor de encabezados de solicitud HTTP gratuito en línea</span> </a><a href="/es/developer/qr-decoder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="escáner y decodificador de códigos qr en línea gratuito"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Escáner y decodificador de códigos QR en línea gratuito</span> </a><a href="/es/developer/whois-lookup" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="herramienta gratuita de búsqueda whois del lado del cliente"> <span class="text-sm flex-shrink-0">🌐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Herramienta gratuita de búsqueda Whois del lado del cliente</span> </a><a href="/es/developer/dns-lookup" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="utilidad gratuita de búsqueda de registros dns en vivo"> <span class="text-sm flex-shrink-0">🔍</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Utilidad gratuita de búsqueda de registros DNS en vivo</span> </a><a href="/es/developer/json-minifier" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="minificador json en línea gratuito"> <span class="text-sm flex-shrink-0">⚡</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Minificador JSON en línea gratuito</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Calculadoras </h4> <div class="grid grid-cols-2 gap-2"> <a href="/es/calculators/unit-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de unidades"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de unidades</span> </a><a href="/es/calculators/date-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora de fecha"> <span class="text-sm flex-shrink-0">📅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora de fecha</span> </a><a href="/es/calculators/bmi-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora de imc"> <span class="text-sm flex-shrink-0">⚖️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora de IMC</span> </a><a href="/es/calculators/age-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora de edad"> <span class="text-sm flex-shrink-0">🎂</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora de edad</span> </a><a href="/es/calculators/percentage-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora de porcentaje"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora de porcentaje</span> </a><a href="/es/calculators/random-number" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de números aleatorios"> <span class="text-sm flex-shrink-0">🎲</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de números aleatorios</span> </a><a href="/es/calculators/tip-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora de propinas en línea"> <span class="text-sm flex-shrink-0">💸</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora de propinas en línea</span> </a><a href="/es/calculators/lcm-finder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora mcm (mínimo común múltiplo)"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora MCM (mínimo común múltiplo)</span> </a><a href="/es/calculators/quadratic-solver" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="solucionador de ecuaciones cuadráticas"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Solucionador de ecuaciones cuadráticas</span> </a><a href="/es/calculators/scientific-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora científica"> <span class="text-sm flex-shrink-0">🧮</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora científica</span> </a><a href="/es/calculators/fraction-to-decimal" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora de fracción a decimal"> <span class="text-sm flex-shrink-0">➗</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora de fracción a decimal</span> </a><a href="/es/calculators/decimal-to-fraction" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora de decimales a fracciones"> <span class="text-sm flex-shrink-0">📊</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora de decimales a fracciones</span> </a><a href="/es/calculators/gcd-finder" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora mcd"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora MCD</span> </a><a href="/es/calculators/prime-checker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="comprobador de números primos"> <span class="text-sm flex-shrink-0">🔢</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Comprobador de números primos</span> </a><a href="/es/calculators/date-difference" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora de días entre fechas"> <span class="text-sm flex-shrink-0">📅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora de días entre fechas</span> </a><a href="/es/calculators/fibonacci-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de secuencias de fibonacci"> <span class="text-sm flex-shrink-0">🌀</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de secuencias de Fibonacci</span> </a><a href="/es/calculators/metric-conversion" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="herramienta gratuita de conversión de métricas en línea"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Herramienta gratuita de conversión de métricas en línea</span> </a><a href="/es/calculators/gratuity-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora gratuita de propinas y propinas en línea"> <span class="text-sm flex-shrink-0">💸</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora gratuita de propinas y propinas en línea</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Diseño y Gráficos </h4> <div class="grid grid-cols-2 gap-2"> <a href="/es/design/color-picker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="selector de color y generador de paleta"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Selector de color y generador de paleta</span> </a><a href="/es/design/image-compressor" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="compresor de imagen"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Compresor de imagen</span> </a><a href="/es/design/screen-resolution" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="comprobador de pantalla y ventana gráfica"> <span class="text-sm flex-shrink-0">🖥️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Comprobador de pantalla y ventana gráfica</span> </a><a href="/es/design/hex-to-rgb" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor hexagonal y rgb"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor hexagonal y RGB</span> </a><a href="/es/design/color-palette" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de paleta de colores"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de paleta de colores</span> </a><a href="/es/design/css-gradient" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de gradiente css"> <span class="text-sm flex-shrink-0">🌈</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de gradiente CSS</span> </a><a href="/es/design/favicon-generator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de favicones"> <span class="text-sm flex-shrink-0">⭐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de favicones</span> </a><a href="/es/design/rgb-to-hex" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de color rgb a hexadecimal"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de color RGB a hexadecimal</span> </a><a href="/es/design/aspect-ratio-calculator" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="calculadora de relación de aspecto"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Calculadora de relación de aspecto</span> </a><a href="/es/design/svg-to-png" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="rasterizador de svg a png en línea gratuito"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Rasterizador de SVG a PNG en línea gratuito</span> </a><a href="/es/design/image-converter" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de imágenes locales en línea gratuito"> <span class="text-sm flex-shrink-0">🔄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de imágenes locales en línea gratuito</span> </a><a href="/es/design/placeholder-image" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="generador de imágenes de marcador de posición gratuito en línea"> <span class="text-sm flex-shrink-0">🖼️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Generador de imágenes de marcador de posición gratuito en línea</span> </a><a href="/es/design/contrast-checker" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="comprobador de contraste de color en línea gratuito"> <span class="text-sm flex-shrink-0">👁️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Comprobador de contraste de color en línea gratuito</span> </a><a href="/es/design/png-to-svg" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="vectorizador en línea gratuito de png a svg"> <span class="text-sm flex-shrink-0">📐</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Vectorizador en línea gratuito de PNG a SVG</span> </a><a href="/es/design/hsl-to-rgb" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor de color hsl a rgb en línea gratuito"> <span class="text-sm flex-shrink-0">🎨</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor de color HSL a RGB en línea gratuito</span> </a> </div> </div><div class="category-section space-y-3"> <h4 class="category-title text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Productividad </h4> <div class="grid grid-cols-2 gap-2"> <a href="/es/productivity/timer" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="temporizador y cronómetro en línea"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Temporizador y cronómetro en línea</span> </a><a href="/es/productivity/stopwatch" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="cronómetro en línea"> <span class="text-sm flex-shrink-0">⏱️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Cronómetro en línea</span> </a><a href="/es/productivity/pomodoro" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="temporizador pomodoro"> <span class="text-sm flex-shrink-0">🍅</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Temporizador Pomodoro</span> </a><a href="/es/productivity/merge-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="utilidad gratuita de fusión de pdf en línea"> <span class="text-sm flex-shrink-0">📑</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Utilidad gratuita de fusión de PDF en línea</span> </a><a href="/es/productivity/word-to-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="convertidor gratuito de word a pdf en línea"> <span class="text-sm flex-shrink-0">📄</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Convertidor gratuito de Word a PDF en línea</span> </a><a href="/es/productivity/split-pdf" class="tool-item flex items-center gap-2 p-2 rounded-lg bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[11px] font-semibold text-[#171717] dark:text-white transition-all border border-zinc-200 dark:border-[#1f1f1f]" data-name="divisor de pdf y extractor de páginas en línea gratuito"> <span class="text-sm flex-shrink-0">✂️</span> <span class="line-clamp-2 leading-tight whitespace-normal text-left">Divisor de PDF y extractor de páginas en línea gratuito</span> </a> </div> </div> </div> <!-- Safe Bottom Spacing --> <div class="h-16 pb-safe-bottom"></div> </div> <!-- MORE DRAWER OVERLAY --> <div id="more-sheet-backdrop" class="fixed inset-0 z-50 bg-black/40 dark:bg-black/60 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity duration-300 hidden"></div> <div id="more-sheet" class="fixed bottom-0 left-0 right-0 z-50 max-h-[82vh] bg-white/95 dark:bg-[#0a0a0a]/95 backdrop-blur-lg border-t border-[#e5e5e5] dark:border-[#1f1f1f] rounded-t-2xl shadow-2xl translate-y-full transition-transform duration-300 ease-out hidden flex flex-col"> <!-- Drag Handle style bar --> <div class="flex justify-center py-3"> <div class="w-10 h-1 rounded-full bg-[#e5e5e5] dark:bg-[#2e2e2e]"></div> </div> <!-- Drawer Header --> <div class="px-6 pb-4 border-b border-[#e5e5e5] dark:border-[#1f1f1f] flex items-center justify-between"> <h3 class="text-base font-bold text-[#171717] dark:text-white font-sans">Menú</h3> <button id="more-sheet-close" class="w-7 h-7 rounded-full bg-[#f5f5f5] dark:bg-[#1f1f1f] text-[#4d4d4d] dark:text-[#888] flex items-center justify-center hover:opacity-80 transition-opacity cursor-pointer" aria-label="Close"> <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path> </svg> </button> </div> <!-- Drawer Links & Content --> <div class="flex-1 overflow-y-auto px-6 py-4 space-y-6"> <!-- iOS Style Link List --> <div class="rounded-xl border border-zinc-200 dark:border-[#1f1f1f] bg-zinc-50/50 dark:bg-zinc-900/30 overflow-hidden divide-y divide-[#ebebeb] dark:divide-[#1f1f1f]"> <a href="/es/about" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">Sobre Nosotros</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/es/contact" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">Contacto</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/es/privacy" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">Política de Privacidad</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> <a href="/es/terms" class="flex items-center justify-between p-3.5 hover:bg-[#f5f5f5] dark:hover:bg-[#1f1f1f] transition-colors group"> <span class="text-sm font-semibold text-[#171717] dark:text-white">Términos de Servicio</span> <svg class="w-4 h-4 text-[#888] group-hover:translate-x-0.5 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7"></path> </svg> </a> </div> <!-- Language Selector Section --> <div class="space-y-3"> <h4 class="text-[10px] font-mono font-bold uppercase tracking-wider text-[#888] dark:text-[#555] border-b border-[#f5f5f5] dark:border-[#111] pb-1"> Idioma </h4> <div class="grid grid-cols-2 gap-2"> <a href="/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>English</span>  </a><a href="/es/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-[#007cf0]/10 border-[#007cf0] text-[#007cf0] font-bold dark:bg-[#007cf0]/20"> <span>Español</span> <span class="text-xs text-[#007cf0]">✓</span> </a><a href="/fr/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Français</span>  </a><a href="/de/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>Deutsch</span>  </a><a href="/hi/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>हिन्दी</span>  </a><a href="/zh/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>中文</span>  </a><a href="/ja/developer/html-minifier/" class="flex items-center justify-between p-2.5 rounded-lg text-xs font-semibold transition-all border bg-zinc-50 hover:bg-[#f5f5f5] dark:bg-zinc-900 dark:hover:bg-[#1f1f1f] text-[#171717] dark:text-white border-zinc-200 dark:border-[#1f1f1f]"> <span>日本語</span>  </a> </div> </div> <!-- Credits Footer --> <div class="pt-6 border-t border-[#ebebeb] dark:border-[#1f1f1f] text-center space-y-2 select-none"> <p class="text-xs font-mono text-[#888] dark:text-[#888] flex items-center justify-center gap-1.5">
Made with <span class="text-[#ff4b4b]">❤️</span> by <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="underline hover:text-[#171717] dark:hover:text-white font-semibold">NiranjanBuilds</a> <a href="https://x.com/NiranjanBuilds" target="_blank" rel="noopener noreferrer" class="hover:text-[#171717] dark:hover:text-white inline-flex items-center" aria-label="X (Twitter)">𝕏</a> </p> <p class="text-xs font-mono text-[#888] dark:text-[#888]"> <a href="mailto:support@say.tools" class="hover:underline">support@say.tools</a> </p> </div> </div> <!-- Safe Bottom Spacing --> <div class="h-16 pb-safe-bottom"></div> </div> <!-- Client Script to Toggle Sheet --> <script type="module">const g=document.getElementById("bottom-nav-tools-btn"),B=document.getElementById("tools-sheet-close"),t=document.getElementById("tools-sheet-backdrop"),o=document.getElementById("tools-sheet"),b=document.getElementById("bottom-nav-more-btn"),k=document.getElementById("header-more-btn"),I=document.getElementById("header-more-btn-home"),S=document.getElementById("more-sheet-close"),s=document.getElementById("more-sheet-backdrop"),n=document.getElementById("more-sheet"),e=document.getElementById("tools-search-input"),i=document.getElementById("tools-search-clear"),w=document.querySelectorAll(".category-section"),q=()=>{t?.classList.remove("hidden"),o?.classList.remove("hidden"),document.body.style.overflow="hidden",requestAnimationFrame(()=>{t?.classList.add("opacity-100"),t?.classList.remove("pointer-events-none"),o?.classList.add("translate-y-0"),o?.classList.remove("translate-y-full"),setTimeout(()=>{e?.focus()},100)})},d=()=>{t?.classList.remove("opacity-100"),t?.classList.add("pointer-events-none"),o?.classList.remove("translate-y-0"),o?.classList.add("translate-y-full"),document.body.style.overflow="",e&&(e.value="",e.dispatchEvent(new Event("input"))),setTimeout(()=>{t?.classList.add("hidden"),o?.classList.add("hidden")},300)};g?.addEventListener("click",()=>{m(),q()});B?.addEventListener("click",d);t?.addEventListener("click",d);const r=()=>{s?.classList.remove("hidden"),n?.classList.remove("hidden"),document.body.style.overflow="hidden",requestAnimationFrame(()=>{s?.classList.add("opacity-100"),s?.classList.remove("pointer-events-none"),n?.classList.add("translate-y-0"),n?.classList.remove("translate-y-full")})},m=()=>{s?.classList.remove("opacity-100"),s?.classList.add("pointer-events-none"),n?.classList.remove("translate-y-0"),n?.classList.add("translate-y-full"),document.body.style.overflow="",setTimeout(()=>{s?.classList.add("hidden"),n?.classList.add("hidden")},300)};b?.addEventListener("click",()=>{d(),r()});k?.addEventListener("click",()=>{d(),r()});I?.addEventListener("click",()=>{d(),r()});S?.addEventListener("click",m);s?.addEventListener("click",m);e?.addEventListener("input",h=>{const a=h.target.value.toLowerCase().trim();a?i?.classList.remove("hidden"):i?.classList.add("hidden"),w.forEach(v=>{const l=v,u=l.querySelector(".category-title"),y=(u&&u.textContent?.toLowerCase()||"").includes(a),E=l.querySelectorAll(".tool-item");let L=!1;E.forEach(p=>{const c=p,f=c.getAttribute("data-name")||"";y||f.includes(a)?(c.classList.remove("hidden"),c.classList.add("flex"),L=!0):(c.classList.remove("flex"),c.classList.add("hidden"))}),L?l.classList.remove("hidden"):l.classList.add("hidden")})});i?.addEventListener("click",()=>{e&&(e.value="",e.dispatchEvent(new Event("input")),e.focus())});</script> </body> </html>