3 planos com destaque no meio

<section class="bg-white py-20 px-6">
  <div class="max-w-5xl mx-auto">
    <div class="text-center mb-14">
      <h2 class="text-3xl font-bold text-gray-900 mb-3">Planos simples, sem surpresas</h2>
      <p class="text-gray-500">Escolha o que faz sentido para a sua equipa.</p>
    </div>
    <div class="grid md:grid-cols-3 gap-6 items-end">
      <div class="border border-gray-200 rounded-2xl p-8">
        <h3 class="font-semibold text-gray-900 mb-1">Starter</h3>
        <p class="text-sm text-gray-500 mb-5">Para começar</p>
        <div class="text-3xl font-bold mb-6">€19<span class="text-base font-normal text-gray-400">/mês</span></div>
        <a href="#" class="block text-center border border-gray-300 rounded-lg py-2.5 font-semibold mb-6 hover:bg-gray-50">Escolher</a>
        <ul class="space-y-2 text-sm text-gray-600">
          <li>✓ 1 utilizador</li><li>✓ 5 projectos</li><li>✓ Suporte por email</li>
        </ul>
      </div>
      <div class="border-2 border-orange-500 rounded-2xl p-8 shadow-xl relative">
        <span class="absolute -top-3 left-1/2 -translate-x-1/2 bg-orange-500 text-white text-xs font-semibold px-3 py-1 rounded-full">Popular</span>
        <h3 class="font-semibold text-gray-900 mb-1">Pro</h3>
        <p class="text-sm text-gray-500 mb-5">Para equipas em crescimento</p>
        <div class="text-3xl font-bold mb-6">€49<span class="text-base font-normal text-gray-400">/mês</span></div>
        <a href="#" class="block text-center bg-orange-500 text-white rounded-lg py-2.5 font-semibold mb-6 hover:bg-orange-600">Escolher</a>
        <ul class="space-y-2 text-sm text-gray-600">
          <li>✓ 10 utilizadores</li><li>✓ Projectos ilimitados</li><li>✓ Suporte prioritário</li>
        </ul>
      </div>
      <div class="border border-gray-200 rounded-2xl p-8">
        <h3 class="font-semibold text-gray-900 mb-1">Enterprise</h3>
        <p class="text-sm text-gray-500 mb-5">Para grandes operações</p>
        <div class="text-3xl font-bold mb-6">Sob consulta</div>
        <a href="#" class="block text-center border border-gray-300 rounded-lg py-2.5 font-semibold mb-6 hover:bg-gray-50">Falar com vendas</a>
        <ul class="space-y-2 text-sm text-gray-600">
          <li>✓ Utilizadores ilimitados</li><li>✓ SLA dedicado</li><li>✓ Gestor de conta</li>
        </ul>
      </div>
    </div>
  </div>
</section>