Volver al principio Componente de botón - Brutalismo Tonos Tierra

<div class="fixed bottom-4 right-4 z-50">
  <!-- Outer 'Frame' Element -->
  <div class="p-2 border-2 border-stone-800 dark:border-stone-200 bg-stone-100 dark:bg-stone-900 shadow-brutalist-light dark:shadow-brutalist-dark transition-colors duration-300 md:p-3 lg:p-4">
    <!-- Inner 'Button' Element -->
    <a href="#top" aria-label="Scroll back to top" class="block w-16 h-16 md:w-20 md:h-20 lg:w-24 lg:h-24 bg-stone-700 dark:bg-stone-300 text-stone-100 dark:text-stone-900 border-2 border-stone-900 dark:border-stone-100 flex items-center justify-center relative overflow-hidden group transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-stone-500 dark:focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
      <!-- Brutalist Background Slash/Pattern -->
      <div class="absolute inset-0 bg-stone-600 dark:bg-stone-400 transform -rotate-45 scale-150 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      
      <!-- Main Arrow Icon -->
      <svg class="w-10 h-10 md:w-12 md:h-12 lg:w-16 lg:h-16 relative z-10 animate-arrow-bounce group-hover:animate-arrow-static transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
      </svg>
      
      <!-- Brutalist Text Overlay (hidden until hover/focus) -->
      <span class="absolute text-xs md:text-sm lg:text-base font-bold uppercase tracking-widest opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 z-20 -bottom-full group-hover:bottom-2 group-focus:bottom-2 transform rotate-90 origin-bottom-left group-hover:rotate-0 group-focus:rotate-0 transition-all duration-300 text-stone-100 dark:text-stone-900 bg-stone-800 dark:bg-stone-200 px-1 py-0.5 rounded-sm">TOP</span>
    </a>
  </div>
</div>

<style>
  /* Add this if you need custom keyframe animations not covered by default Tailwind */
  @keyframes arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-arrow-bounce {
    animation: arrow-bounce 1.5s infinite;
  }

  .group:hover .animate-arrow-bounce, .group:focus .animate-arrow-bounce {
    animation: none; /* Stop bounce on hover/focus */
    transform: translateY(-5px); /* Optional: slight lift on hover */
  }

  /* Custom shadow for brutalism */
  .shadow-brutalist-light {
    box-shadow: 8px 8px 0px 0px #292524; /* Color-aligned with stone-800 */
  }
  .dark .shadow-brutalist-dark {
    box-shadow: 8px 8px 0px 0px #ede9e9; /* Color-aligned with stone-200 */
  }
</style>