Símbolos

Símbolos: selecione symbol com rapidez e contexto claro. Roda no navegador e mantém o fluxo leve. Feita para checagens rápidas antes da próxima etapa

Sem cadastro 100% gratuito Privado

Size:

Composer

Símbolos clicados acumulam aqui. Copie todos de uma vez.

</div>
            <div class="flex gap-2 mt-2">
                <button type="button" id="btn-sym-copy-all" class="ft-btn-secondary px-4 py-1.5 text-sm">
                    <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" stroke-width="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke-width="2"/></svg>
                    Copy All
                </button>
                <button type="button" id="btn-sym-clear" class="ft-btn-ghost px-4 py-1.5 text-sm">Clear</button>
            </div>
        </div>
    </div>
</div>

</div>

</div>
    </div>

<div class="mb-8">
            
<div id="feedback-widget" class="flex flex-col items-center gap-3 py-4" data-tool="symbol-picker">
    <p class="ft-text-sm text-text-muted font-medium">
        Esta ferramenta foi útil?
    </p>
    <div class="flex items-center gap-3" id="feedback-buttons">
        <button type="button"
                class="ft-btn-outline ft-btn-sm"
                data-feedback="up"
                aria-label="Sim, útil">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path d="M7 10v12m8-16.12L14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2h0a3.13 3.13 0 0 1 3 3.88Z" />
            </svg>
            Sim
        </button>
        <button type="button"
                class="ft-btn-outline ft-btn-sm"
                data-feedback="down"
                aria-label="Não, precisa melhorar">
            <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                <path d="M17 14V2M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L14 22h0a3.13 3.13 0 0 1-3-3.88Z" />
            </svg>
            Não
        </button>
    </div>
    <p id="feedback-thanks" class="ft-text-sm text-success font-medium hidden">
        Obrigado pelo seu feedback!
    </p>
</div>

</div>
</div>

<section class="bg-transparent border-t border-border/50">
        <div class="ft-container ft-section">
            <div class="ft-cartoon-card max-w-3xl mx-auto">
                <div class="ft-text-seo prose prose-sm dark:prose-invert">
                    <h2>Por que usar Símbolos</h2><p>Quem chega até aqui normalmente está atrás de uma resposta rápida e útil, porque Símbolos combina com buscas comuns como Símbolos, symbol online e uma forma prática de lidar com symbol Ela reduz rapidamente as opções de symbol, o que ajuda quando procurar manualmente só atrasa a tarefa.</p><p>Use Símbolos quando precisar achar a opção certa mais rápido sem abrir planilhas, editores pesados ou formulários demorados. Útil para escrita, revisão, limpeza e comparação de texto sem perder ritmo. A página foi estruturada para responder primeiro à dúvida prática e depois entregar contexto suficiente para revisar o resultado com confiança. Isso importa quando uma ferramenta pequena deve tirar atrito, e não criar mais um.</p><h3>Quando esta ferramenta ajuda de verdade</h3><ul><li>Resolução direta para uma forma prática de lidar com Symbol Picker</li><li>Saída clara para revisar com confiança para trabalho operacional do dia a dia</li><li>Tratamento local dos dados para Funciona bem em fluxos operacionais curtos</li></ul><p>Nas ferramentas client-side, o texto deixa claro quando tudo pode ser processado localmente e como conferir o resultado com segurança. Se esta etapa for apenas parte do fluxo, ferramentas próximas como Emojis, Buscador de Icones e Letras Diferentes ajudam a continuar sem reconstruir o contexto do zero.</p><div class="ft-seo-legacy"><h2>Símbolos Especiais — Copie e Cole</h2><h3>Encontre e Copie Símbolos Especiais Rapidamente</h3>
<p>Textos atraentes, fórmulas matemáticas, publicações em mídias sociais ou projetos de design frequentemente exigem caracteres especiais que não estão disponíveis nativamente no seu teclado físico tradicional. Tentar descobrir os códigos de atalho (como Alt + números) ou pesquisar em tabelas complexas do sistema operacional consome tempo e interrompe o fluxo de trabalho. Nosso Seletor de Símbolos online consolida centenas de caracteres gráficos, matemáticos, moedas e pontuações exóticas em uma interface ágil e organizada, a apenas um clique de distância para serem copiados.</p>
<h3>A Vantagem do Padrão Unicode</h3>
<p>Todos os símbolos disponíveis em nossa ferramenta fazem parte do conjunto de caracteres do padrão internacional Unicode. Isso significa que não são imagens, mas sim fontes textuais reconhecidas por computadores e smartphones em todo o mundo. Ao copiar um símbolo de nossa plataforma (como uma seta decorativa, o símbolo de Copyright ou moedas estrangeiras), você tem a garantia de que ele será exibido corretamente para o destinatário, seja em uma mensagem no WhatsApp, em um currículo profissional em PDF, num e-mail ou no código HTML de um site.</p>
<ul>
    <li><strong>Navegação Organizada por Categorias:</strong> Encontre rapidamente o que procura em seções bem divididas: Matemática, Moedas, Setas e Direções, Formas Geométricas, Estrelas e Decorações, e Pontuação Especial.</li>
    <li><strong>Funcionalidade de Copiar com um Clique:</strong> Esqueça o trabalho de selecionar e usar Ctrl+C. Um simples clique ou toque em qualquer caractere copia o símbolo automaticamente para a sua área de transferência, pronto para uso.</li>
    <li><strong>Design Responsivo e Rápido:</strong> A galeria carrega instantaneamente, adaptando-se perfeitamente à tela do seu smartphone ou monitor desktop, entregando praticidade onde você estiver trabalhando.</li>
    <li><strong>Melhore a Estética dos Seus Textos:</strong> Adicione sofisticação às suas biografias no Instagram, separe tópicos em textos corporativos e torne seus documentos visivelmente muito mais elegantes e profissionais.</li>
</ul>
<p>Tenha todos os caracteres do mundo na ponta dos dedos. Economize tempo e crie comunicações visualmente ricas utilizando nosso repositório de símbolos copiáveis.</p></div>
                </div>
                    <p class="ft-caption mt-4">
                        <time datetime="2026-03-14">Última atualização: 2026-03-14</time>
                    </p>
            </div>
        </div>
    </section>
    <section class="border-t border-border/50">
        <div class="ft-container ft-section">
            <h2 class="ft-h2 mb-8">Perguntas Frequentes</h2>
            
    <div class="ft-accordion">
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    O que o Símbolos faz?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Símbolos ajuda você a selecione symbol com um fluxo curto e direto. Ele foi pensado para quem precisa de resposta rápida sem perder o contexto do resultado.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Quando vale usar o Símbolos?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Use Símbolos quando a prioridade for rapidez, repetição e menos etapas manuais. Ele funciona bem em conferências rápidas, rotinas operacionais e tarefas pequenas que não justificam abrir uma aplicação completa.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    O Símbolos mantém meus dados privados?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Nas ferramentas client-side, o processamento principal acontece no navegador. Isso reduz atrito com dados sensíveis ou temporários e ajuda bastante em conferências privadas e rápidas.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Qual a diferença entre Símbolos e ferramentas próximas?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Símbolos foca em uma tarefa específica para manter a página rápida e fácil de conferir. Se o seu fluxo continua depois desta etapa, Emojis representa o tipo de ferramenta relacionada que costuma entrar em seguida.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Como copiar um símbolo?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Clique em qualquer símbolo e ele será copiado automaticamente. Depois cole onde precisar.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Posso buscar um símbolo específico?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Sim, use a caixa de busca para filtrar símbolos por nome. Os resultados atualizam em tempo real.</div>
                </div>
            </details>
            <details class="ft-accordion-item">
                <summary class="ft-accordion-trigger">
                    Posso usar esses símbolos em e-mails e documentos?
                    <svg class="ft-accordion-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
                        <path d="m6 9 6 6 6-6" />
                    </svg>
                </summary>
                <div class="ft-accordion-content">
                    <div>Sim, todos os símbolos fornecidos são caracteres Unicode padrão que funcionam em e-mails, documentos do Word, Google Docs e na maioria dos aplicativos modernos. Basta clicar para copiar e colar onde precisar. Alguns sistemas muito antigos podem não exibir todos.</div>
                </div>
            </details>
    </div>

</div>
    </section>
    <section id="related-tools" class="relative overflow-hidden border-t border-border/50">
        <div class="ft-container ft-section">
            <h2 class="ft-h2 mb-8">Ferramentas Relacionadas</h2>
            
    <div class="ft-grid-tools">
            <a href="/pt/emojis-para-copiar" class="ft-card-tool group" aria-label="Emojis">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-[14px] border-2 border-black flex items-center justify-center transition-colors duration-300"
     style="background: #EC4899; color: #FFFFFF;"
     aria-hidden="true">
    <i data-lucide="smile" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Emojis</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/pt/buscador-de-icones" class="ft-card-tool group" aria-label="Buscador de Icones">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-[14px] border-2 border-black flex items-center justify-center transition-colors duration-300"
     style="background: #0EA5E9; color: #FFFFFF;"
     aria-hidden="true">
    <i data-lucide="mouse-pointer-click" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Buscador de Icones</h3>
                <p class="ft-caption text-xs line-clamp-2">Search, copy and download Lucide icons as SVG (all standard sizes) or PNG.</p>
            </a>
            <a href="/pt/letras-diferentes" class="ft-card-tool group" aria-label="Letras Diferentes">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-[14px] border-2 border-black flex items-center justify-center transition-colors duration-300"
     style="background: #F59E0B; color: #0A0A0A;"
     aria-hidden="true">
    <i data-lucide="wand-sparkles" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Letras Diferentes</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
            <a href="/pt/contador-caracteres" class="ft-card-tool group" aria-label="Contador de Caracteres">
                <div class="w-12 h-12 flex items-center justify-center">
                    <div class="w-full h-full min-w-[2.5rem] min-h-[2.5rem] rounded-[14px] border-2 border-black flex items-center justify-center transition-colors duration-300"
     style="background: #F59E0B; color: #0A0A0A;"
     aria-hidden="true">
    <i data-lucide="type" class="w-5 h-5" style="display:block;"></i>
</div>

</div>
                <h3 class="ft-h4 text-sm font-semibold">Contador de Caracteres</h3>
                <p class="ft-caption text-xs line-clamp-2"></p>
            </a>
    </div>

</div>
    </section>

</main>
        </div>
    </div>

<footer class="mt-auto">
    <div class="ft-footer-shell">
        <a href="/pt" class="ft-footer-wordmark block mb-12 sm:mb-16" aria-label="facilita.tools início">
            facilita<span class="ft-footer-dot">.</span><span class="ft-footer-brand-accent">tools</span>
        </a>

<div class="space-y-5">
                <a href="/pt" class="flex items-center gap-2.5">
                    <img src="/images/brand/site-logo.webp" alt="" class="h-8 w-8 flex-shrink-0" width="32" height="32" loading="lazy" decoding="async" aria-hidden="true" />
                    <span class="text-lg font-bold">facilita<span class="ft-footer-dot">.</span><span class="ft-footer-brand-accent">tools</span></span>
                </a>
                <p class="text-sm leading-relaxed max-w-sm">
                    Ferramentas online gratuitas para desenvolvedores, profissionais e tarefas do dia a dia.
                </p>
                <div class="flex items-center gap-3 pt-1">
                    <a href="https://github.com/Wmedrado" target="_blank" rel="noopener noreferrer"
                       class="w-10 h-10 rounded-full border border-white/25 flex items-center justify-center text-white/70 hover:text-white hover:border-white transition-all duration-200" aria-label="GitHub">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                        <span class="sr-only">GitHub abre em nova aba</span>
                    </a>
                    <a href="https://www.linkedin.com/in/devwilliam" target="_blank" rel="noopener noreferrer"
                       class="w-10 h-10 rounded-full border border-white/25 flex items-center justify-center text-white/70 hover:text-white hover:border-white transition-all duration-200" aria-label="LinkedIn">
                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
                        <span class="sr-only">LinkedIn abre em nova aba</span>
                    </a>
                </div>
            </div>

<div>
                <p class="text-xs font-semibold uppercase mb-4">
                    Ferramentas
                </p>
                <ul class="space-y-2.5">
                        <li><a href="/pt/ferramentas/desenvolvimento" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Desenvolvedor</a></li>
                        <li><a href="/pt/ferramentas/financas" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Finanças</a></li>
                        <li><a href="/pt/ferramentas/calculadoras" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Calculadoras</a></li>
                        <li><a href="/pt/ferramentas/texto" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Texto</a></li>
                        <li><a href="/pt/ferramentas/seguranca" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Segurança</a></li>
                        <li><a href="/pt/ferramentas/data-hora" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Data e Hora</a></li>
                </ul>
            </div>

<div>
                <p class="text-xs font-semibold uppercase mb-4">
                    Recursos
                </p>
                <ul class="space-y-2.5">
                    <li><a href="/pt/favoritos" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Favoritos</a></li>
                    <li><a href="/pt/api/planos" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Planos</a></li>
                    <li><a href="/pt/api/documentacao" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Documentação API</a></li>

</ul>
            </div>

<div>
                <p class="text-xs font-semibold uppercase mb-4">
                    Empresa
                </p>
                <ul class="space-y-2.5">
                    <li><a href="/pt/sobre" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Sobre</a></li>
                    <li><a href="/pt/termos" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Termos de Uso</a></li>
                    <li><a href="/pt/privacidade" class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200">Política de Privacidade</a></li>
                    <li><button type="button" data-cookie-preferences class="text-sm opacity-70 hover:opacity-100 transition-opacity duration-200 text-left">Preferências de cookies</button></li>
                </ul>
            </div>
        </div>

<div class="border-t border-white/20 mt-12 pt-6">
        <div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-white/60">
            <p>© 2026 facilita.tools. Todos os direitos reservados.</p>

<a href="https://medradolabs.com" target="_blank" rel="noopener noreferrer"
               class="flex items-center gap-1.5 text-white/60 hover:text-white transition-colors duration-200">
                <img src="/images/brand/medrado-labs-icon.webp" alt="" width="14" height="14" class="w-3.5 h-3.5 rounded-sm" aria-hidden="true">
                Desenvolvido por Medrado Labs
            </a>

<section id="ft-chat-panel"
             class="ft-chat-panel hidden"
             role="dialog"
             aria-modal="false"
             aria-label="Assistente">
        <div class="ft-chat-header">
            <div class="min-w-0">
                <p class="ft-chat-kicker">Assistente IA</p>
                <h2 class="truncate text-base font-semibold text-text-primary">Assistente</h2>
            </div>
            <button id="ft-chat-close"
                    type="button"
                    class="ft-chat-icon-btn"
                    aria-label="Fechar">
                <i data-lucide="x" class="h-5 w-5" aria-hidden="true"></i>
            </button>
        </div>

<div id="ft-chat-thread"
             class="ft-chat-thread">
            <article class="ft-chat-bubble ft-chat-bubble-assistant">
                <p>Oi! Sou o assistente do Facilita. Posso gerar, validar e formatar CPF/CNPJ, ajudar com senhas, JSON, conversões, calculadoras e responder dúvidas sobre nossas ferramentas. Como posso te ajudar?</p>
            </article>
            <div class="ft-chat-quick-actions" aria-label="Pergunte qualquer coisa ou tente "gerar cpf"...">
                    <button type="button" class="ft-chat-chip" data-chat-message="Gerar CPF">Gerar CPF</button>
                    <button type="button" class="ft-chat-chip" data-chat-message="Validar CPF">Validar CPF</button>
                    <button type="button" class="ft-chat-chip" data-chat-message="Gerar CNPJ">Gerar CNPJ</button>
                    <button type="button" class="ft-chat-chip" data-chat-message="bom dia">Bom dia</button>
            </div>
        </div>

<div class="ft-chat-panel-actions">
            <a href="/pt/chat" class="ft-chat-full-link">
                <i data-lucide="sparkles" class="h-4 w-4" aria-hidden="true"></i>
                <span>Abrir chat completo</span>
                <i data-lucide="arrow-up-right" class="h-4 w-4" aria-hidden="true"></i>
            </a>
        </div>

<form id="ft-chat-form" class="ft-chat-form">
            <label class="sr-only" for="ft-chat-input">Pergunte qualquer coisa ou tente "gerar cpf"...</label>
            <div class="flex items-end gap-2">
                <input id="ft-chat-input"
                       type="text"
                       class="ft-chat-input"
                       placeholder="Pergunte qualquer coisa ou tente "gerar cpf"..."
                       autocomplete="off"
                       enterkeyhint="send" />
                <button id="ft-chat-send"
                        type="submit"
                        class="ft-chat-send"
                        aria-label="Enviar">
                    <i data-lucide="send-horizontal" class="h-5 w-5" aria-hidden="true"></i>
                </button>
            </div>
        </form>
    </section>

<div id="cookie-consent-banner"
     class="ft-cookie-consent translate-y-full print:hidden"
     role="dialog"
     aria-modal="false"
     aria-labelledby="cookie-consent-title"
     style="display:none;">
    <div class="ft-cookie-card">
        <div class="ft-cookie-copy">
            <div class="ft-cookie-heading">
                <span class="ft-cookie-icon" aria-hidden="true">
                    <i data-lucide="shield-check" class="h-5 w-5"></i>
                </span>
                <div>
                    <p class="ft-cookie-kicker">Privacidade</p>
                    <h2 id="cookie-consent-title">Você controla os cookies</h2>
                </div>
            </div>
            <p class="ft-cookie-message">
                Usamos cookies essenciais e preferências locais para manter o site funcionando. Medição e atribuição só ficam ativas com seu consentimento.
                <a href="/pt/privacidade">Política de Privacidade</a>.
            </p>

<div id="cookie-consent-details" class="ft-cookie-details" hidden>
                <div class="ft-cookie-choice">
                    <div>
                        <strong>Necessários</strong>
                        <p>Autenticação, segurança, idioma, consentimento e estabilidade da sessão.</p>
                    </div>
                    <span>Sempre ativo</span>
                </div>
                <div class="ft-cookie-choice">
                    <div>
                        <strong>Preferências locais</strong>
                        <p>Tema, acessibilidade, favoritos locais e cache técnico solicitado pelo usuário.</p>
                    </div>
                    <span>Sempre ativo</span>
                </div>
                <label class="ft-cookie-choice ft-cookie-choice-toggle" for="cookie-consent-analytics">
                    <div>
                        <strong>Medição e atribuição</strong>
                        <p>Ajuda a entender origem de acesso e melhorar conteúdo, sem vender dados pessoais.</p>
                    </div>
                    <input id="cookie-consent-analytics" type="checkbox" />
                    <span class="ft-cookie-switch" aria-hidden="true"></span>
                </label>
            </div>
        </div>

<div class="ft-cookie-actions">
            <button id="cookie-consent-decline" type="button" class="ft-cookie-btn ft-cookie-btn-muted">
                Recusar não essenciais
            </button>
            <button id="cookie-consent-manage"
                    type="button"
                    class="ft-cookie-btn ft-cookie-btn-ghost"
                    aria-expanded="false"
                    aria-controls="cookie-consent-details">
                Preferências
            </button>
            <button id="cookie-consent-save" type="button" class="ft-cookie-btn ft-cookie-btn-primary" hidden>
                Salvar preferências
            </button>
            <button id="cookie-consent-accept" type="button" class="ft-cookie-btn ft-cookie-btn-primary">
                Aceitar todos
            </button>
        </div>
    </div>
</div>

<div class="flex items-center justify-between p-4 border-b border-border">
        <h2 class="text-sm font-semibold text-text-primary flex items-center gap-2">
            <svg class="w-4 h-4 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <circle cx="12" cy="4" r="1" fill="currentColor" stroke="none"/>
                <path d="M7 8l5 0l5 0"/>
                <path d="M12 8l0 8"/>
                <path d="M8 20l4-4l4 4"/>
            </svg>
            Acessibilidade
        </h2>
        <button type="button"
                class="p-1 rounded-md text-text-muted hover:text-text-primary hover:bg-elevated
                       focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
                aria-label="Fechar"
                data-a11y-close>
            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                <path d="M18 6L6 18M6 6l12 12"/>
            </svg>
        </button>
    </div>

<div class="flex items-center justify-between">
            <span class="text-sm text-text-primary">Tamanho da Fonte</span>
            <div class="flex items-center gap-1">
                <button type="button"
                        class="ft-a11y-btn"
                        data-a11y-action="font-decrease"
                        aria-label="Diminuir Tamanho da Fonte">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 12h14"/></svg>
                </button>
                <span class="text-xs text-text-muted w-10 text-center font-mono" id="a11y-font-value">100%</span>
                <button type="button"
                        class="ft-a11y-btn"
                        data-a11y-action="font-increase"
                        aria-label="Aumentar Tamanho da Fonte">
                    <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
                </button>
            </div>
        </div>

<button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="high-contrast"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                    <span class="text-sm text-text-primary">Alto Contraste</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="dyslexia-font"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M4 7V4h16v3M9 20h6M12 4v16"/>
                    </svg>
                    <span class="text-sm text-text-primary">Fonte para Dislexia</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="highlight-links"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>
                    </svg>
                    <span class="text-sm text-text-primary">Destacar Links</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="reading-guide"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M4 6h16M4 12h16M4 18h7"/>
                    </svg>
                    <span class="text-sm text-text-primary">Guia de Leitura</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="big-cursor"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3zM13 13l6 6"/>
                    </svg>
                    <span class="text-sm text-text-primary">Cursor Grande</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="pause-animations"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                    </svg>
                    <span class="text-sm text-text-primary">Pausar Animações</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>
            <button type="button"
                    class="ft-a11y-toggle w-full"
                    data-a11y-action="text-spacing"
                    role="switch"
                    aria-checked="false">
                <div class="flex items-center gap-3">
                    <svg class="w-4 h-4 text-text-muted flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                        <path d="M21 6H3M3 12h18M3 18h18M8 6v12m8-12v12"/>
                    </svg>
                    <span class="text-sm text-text-primary">Espaçamento de Texto</span>
                </div>
                <div class="ft-a11y-switch" aria-hidden="true">
                    <div class="ft-a11y-switch-thumb"></div>
                </div>
            </button>

<div class="pt-2 border-t border-border">
            <button type="button"
                    class="w-full text-center text-xs text-text-muted hover:text-error transition-colors py-2
                           focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 rounded"
                    data-a11y-action="reset">
                Redefinir todas as preferências
            </button>
        </div>
    </div>
</div>