Mensaje de éxito Art Deco

<div class="p-4 dark:bg-gray-900 bg-gray-50 min-h-screen flex items-center justify-center font-serif">
  <div class="max-w-md w-full mx-auto p-6 md:p-8 rounded-lg shadow-2xl relative overflow-hidden
              bg-gradient-to-br from-amber-50 dark:from-gray-800 to-amber-200 dark:to-gray-700
              border-4 border-amber-300 dark:border-amber-600
              transform transition-all duration-300 ease-in-out hover:scale-[1.01]">

    <!-- Art Deco Geometric Background Elements -->
    <div class="absolute inset-0 pointer-events-none opacity-20 dark:opacity-10">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="none">
        <defs>
          <pattern id="artDecoPattern" x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
            <path d="M0 5 L5 0 L10 5 L5 10 Z" fill="rgba(180, 150, 60, 0.5)" class="dark:fill-amber-700"></path>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#artDecoPattern)"/>
        <path d="M0 0 L100 0 L100 100 L0 100 Z" fill="none" stroke="rgba(180, 150, 60, 0.7)" stroke-width="1.5" class="dark:stroke-amber-800"/>
      </svg>
    </div>

    <div class="relative z-10 text-center">
      <!-- Diamond / Jewel Icon -->
      <div class="mb-6 mx-auto w-20 h-20 rounded-full bg-amber-400 dark:bg-amber-600 flex items-center justify-center shadow-lg transform rotate-45 border-4 border-amber-100 dark:border-amber-800 group-hover:scale-105 transition-transform duration-300">
        <svg class="w-10 h-10 text-white dark:text-amber-100 transform -rotate-45" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10 18.25L2.83 11.08l.7-.71L10 16.83l6.47-6.47.7.71L10 18.25zm0-16.5L2.83 8.92l.7.71L10 2.17l6.47 6.47.7-.71L10 1.75z" clip-rule="evenodd"/>
        </svg>
      </div>

      <h2 class="text-3xl md:text-4xl font-bold mb-4 text-amber-900 dark:text-amber-100 leading-tight tracking-wider">
        <span class="block italic text-amber-700 dark:text-amber-300 text-lg mb-1">Ritz & Glamour Presents...</span>
        Success Unlocked!
      </h2>

      <p class="text-lg text-gray-700 dark:text-gray-300 mb-6 leading-relaxed">
        Your journey into the Golden Age of entertainment just got an upgrade.
        Prepare for a cinematic experience like no other.
      </p>

      <div class="flex justify-center flex-wrap gap-4">
        <button class="flex items-center px-6 py-3 rounded-full text-lg font-semibold
                       bg-amber-600 text-white dark:bg-amber-700 dark:text-amber-50
                       shadow-lg hover:shadow-xl hover:bg-amber-700 dark:hover:bg-amber-800
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5
                       border border-amber-700 dark:border-amber-800">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
          </svg>
          Explore New Features
        </button>

        <button class="flex items-center px-6 py-3 rounded-full text-lg font-semibold
                       bg-white text-amber-700 dark:bg-gray-700 dark:text-amber-300
                       shadow-lg hover:shadow-xl hover:bg-gray-100 dark:hover:bg-gray-600
                       transition duration-300 ease-in-out transform hover:-translate-y-0.5
                       border border-amber-300 dark:border-amber-600">
          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" />
          </svg>
          Watch Now
        </button>
      </div>
    </div>
  </div>
</div>