1<div class="pimentas w-56 pt-11 font-sans">2 <div role="radiogroup" aria-label="Quanto arde o molho?" class="fila flex justify-between rounded-md border-2 border-[#3b1d0f] bg-[#fffaf2] p-1.5 shadow-[0_3px_0_#3b1d0f]">3 <label class="group relative grid size-9 cursor-pointer place-items-center rounded text-[#ecd3bc] transition-colors hover:bg-[#f6e3cf]">4 <input type="radio" name="ardor" value="1" class="peer sr-only" />5 <svg class="size-7" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.6 9.6C5 7.8 6.4 6.5 8.1 6.9c3 .8 5.3 2.7 7.9 5.5 2 2.2 4.1 4.4 6.3 5.7-3.6 1.5-8.6.4-12.4-2.5C7.7 13.8 6.1 11.7 5.6 9.6z" fill="currentColor" stroke="#3b1d0f" stroke-width="1.2" stroke-linejoin="round"/><path d="M9.2 9.3c2.1.7 4 2.1 5.6 3.9" fill="none" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".45"/><path d="M5.2 9.2c.2-1.8 1.8-2.8 3.6-2.3M6.6 7.4C5.8 5.6 4.6 4.5 2.8 4.1" fill="none" stroke="#3f6b2a" stroke-width="1.7" stroke-linecap="round"/></svg>6 <span class="dica pointer-events-none absolute bottom-[calc(100%+10px)] left-1/2 -translate-x-1/2 translate-y-1 scale-95 whitespace-nowrap rounded bg-[#3b1d0f] px-2 py-1 text-[11px] font-bold text-[#fff3e2] opacity-0 transition duration-150 ease-out group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 peer-focus-visible:translate-y-0 peer-focus-visible:scale-100 peer-focus-visible:opacity-100 motion-reduce:translate-y-0 motion-reduce:scale-100">Nem arde<span class="absolute -bottom-1 left-1/2 size-2 -translate-x-1/2 rotate-45 bg-[#3b1d0f]"></span></span>7 </label>8 <label class="group relative grid size-9 cursor-pointer place-items-center rounded text-[#ecd3bc] transition-colors hover:bg-[#f6e3cf]">9 <input type="radio" name="ardor" value="2" class="peer sr-only" checked />10 <svg class="size-7" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.6 9.6C5 7.8 6.4 6.5 8.1 6.9c3 .8 5.3 2.7 7.9 5.5 2 2.2 4.1 4.4 6.3 5.7-3.6 1.5-8.6.4-12.4-2.5C7.7 13.8 6.1 11.7 5.6 9.6z" fill="currentColor" stroke="#3b1d0f" stroke-width="1.2" stroke-linejoin="round"/><path d="M9.2 9.3c2.1.7 4 2.1 5.6 3.9" fill="none" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".45"/><path d="M5.2 9.2c.2-1.8 1.8-2.8 3.6-2.3M6.6 7.4C5.8 5.6 4.6 4.5 2.8 4.1" fill="none" stroke="#3f6b2a" stroke-width="1.7" stroke-linecap="round"/></svg>11 <span class="dica pointer-events-none absolute bottom-[calc(100%+10px)] left-1/2 -translate-x-1/2 translate-y-1 scale-95 whitespace-nowrap rounded bg-[#3b1d0f] px-2 py-1 text-[11px] font-bold text-[#fff3e2] opacity-0 transition duration-150 ease-out group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 peer-focus-visible:translate-y-0 peer-focus-visible:scale-100 peer-focus-visible:opacity-100 motion-reduce:translate-y-0 motion-reduce:scale-100">Suave<span class="absolute -bottom-1 left-1/2 size-2 -translate-x-1/2 rotate-45 bg-[#3b1d0f]"></span></span>12 </label>13 <label class="group relative grid size-9 cursor-pointer place-items-center rounded text-[#ecd3bc] transition-colors hover:bg-[#f6e3cf]">14 <input type="radio" name="ardor" value="3" class="peer sr-only" />15 <svg class="size-7" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.6 9.6C5 7.8 6.4 6.5 8.1 6.9c3 .8 5.3 2.7 7.9 5.5 2 2.2 4.1 4.4 6.3 5.7-3.6 1.5-8.6.4-12.4-2.5C7.7 13.8 6.1 11.7 5.6 9.6z" fill="currentColor" stroke="#3b1d0f" stroke-width="1.2" stroke-linejoin="round"/><path d="M9.2 9.3c2.1.7 4 2.1 5.6 3.9" fill="none" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".45"/><path d="M5.2 9.2c.2-1.8 1.8-2.8 3.6-2.3M6.6 7.4C5.8 5.6 4.6 4.5 2.8 4.1" fill="none" stroke="#3f6b2a" stroke-width="1.7" stroke-linecap="round"/></svg>16 <span class="dica pointer-events-none absolute bottom-[calc(100%+10px)] left-1/2 -translate-x-1/2 translate-y-1 scale-95 whitespace-nowrap rounded bg-[#3b1d0f] px-2 py-1 text-[11px] font-bold text-[#fff3e2] opacity-0 transition duration-150 ease-out group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 peer-focus-visible:translate-y-0 peer-focus-visible:scale-100 peer-focus-visible:opacity-100 motion-reduce:translate-y-0 motion-reduce:scale-100">Médio<span class="absolute -bottom-1 left-1/2 size-2 -translate-x-1/2 rotate-45 bg-[#3b1d0f]"></span></span>17 </label>18 <label class="group relative grid size-9 cursor-pointer place-items-center rounded text-[#ecd3bc] transition-colors hover:bg-[#f6e3cf]">19 <input type="radio" name="ardor" value="4" class="peer sr-only" />20 <svg class="size-7" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.6 9.6C5 7.8 6.4 6.5 8.1 6.9c3 .8 5.3 2.7 7.9 5.5 2 2.2 4.1 4.4 6.3 5.7-3.6 1.5-8.6.4-12.4-2.5C7.7 13.8 6.1 11.7 5.6 9.6z" fill="currentColor" stroke="#3b1d0f" stroke-width="1.2" stroke-linejoin="round"/><path d="M9.2 9.3c2.1.7 4 2.1 5.6 3.9" fill="none" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".45"/><path d="M5.2 9.2c.2-1.8 1.8-2.8 3.6-2.3M6.6 7.4C5.8 5.6 4.6 4.5 2.8 4.1" fill="none" stroke="#3f6b2a" stroke-width="1.7" stroke-linecap="round"/></svg>21 <span class="dica pointer-events-none absolute bottom-[calc(100%+10px)] left-1/2 -translate-x-1/2 translate-y-1 scale-95 whitespace-nowrap rounded bg-[#3b1d0f] px-2 py-1 text-[11px] font-bold text-[#fff3e2] opacity-0 transition duration-150 ease-out group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 peer-focus-visible:translate-y-0 peer-focus-visible:scale-100 peer-focus-visible:opacity-100 motion-reduce:translate-y-0 motion-reduce:scale-100">Arde bem<span class="absolute -bottom-1 left-1/2 size-2 -translate-x-1/2 rotate-45 bg-[#3b1d0f]"></span></span>22 </label>23 <label class="group relative grid size-9 cursor-pointer place-items-center rounded text-[#ecd3bc] transition-colors hover:bg-[#f6e3cf]">24 <input type="radio" name="ardor" value="5" class="peer sr-only" />25 <svg class="size-7" viewBox="0 0 24 24" aria-hidden="true"><path d="M5.6 9.6C5 7.8 6.4 6.5 8.1 6.9c3 .8 5.3 2.7 7.9 5.5 2 2.2 4.1 4.4 6.3 5.7-3.6 1.5-8.6.4-12.4-2.5C7.7 13.8 6.1 11.7 5.6 9.6z" fill="currentColor" stroke="#3b1d0f" stroke-width="1.2" stroke-linejoin="round"/><path d="M9.2 9.3c2.1.7 4 2.1 5.6 3.9" fill="none" stroke="#fff" stroke-width="1.1" stroke-linecap="round" opacity=".45"/><path d="M5.2 9.2c.2-1.8 1.8-2.8 3.6-2.3M6.6 7.4C5.8 5.6 4.6 4.5 2.8 4.1" fill="none" stroke="#3f6b2a" stroke-width="1.7" stroke-linecap="round"/></svg>26 <span class="dica pointer-events-none absolute bottom-[calc(100%+10px)] left-1/2 -translate-x-1/2 translate-y-1 scale-95 whitespace-nowrap rounded bg-[#3b1d0f] px-2 py-1 text-[11px] font-bold text-[#fff3e2] opacity-0 transition duration-150 ease-out group-hover:translate-y-0 group-hover:scale-100 group-hover:opacity-100 peer-focus-visible:translate-y-0 peer-focus-visible:scale-100 peer-focus-visible:opacity-100 motion-reduce:translate-y-0 motion-reduce:scale-100">Vulcão<span class="absolute -bottom-1 left-1/2 size-2 -translate-x-1/2 rotate-45 bg-[#3b1d0f]"></span></span>27 </label>28 </div>29 <p class="mt-3 text-[#3b1d0f]"><span class="block font-serif text-[15px] font-bold italic leading-tight">Molho da casa</span><span class="text-[11px] text-[#9a4a1c]">Escolha o ardor do seu pedido.</span></p>30</div>