#f1f5f9
1<label class="group grid cursor-pointer justify-items-center gap-3 select-none">2 <input type="checkbox" class="sr-only" />3 <span class="relative block h-14 w-32">4 <span class="absolute inset-0 overflow-hidden rounded-full bg-slate-200 shadow-[inset_0_2px_6px_rgba(15,23,42,.15)] transition-colors duration-500 group-has-[:checked]:bg-orange-500">5 <span class="nuvem absolute left-6 top-3 h-2 w-7 rounded-full bg-white/0 transition-colors duration-500 group-has-[:checked]:bg-white/50"></span>6 <span class="nuvem absolute left-14 top-8 h-1.5 w-5 rounded-full bg-white/0 transition-colors duration-500 [animation-delay:.9s] group-has-[:checked]:bg-white/40"></span>7 <span class="absolute left-4 top-1/2 h-0.5 w-14 origin-left -translate-y-1/2 scale-x-0 rounded-full bg-[repeating-linear-gradient(90deg,#fff_0_6px,transparent_6px_10px)] transition-transform duration-500 ease-out group-has-[:checked]:scale-x-100 group-has-[:checked]:delay-150"></span>8 </span>9 <span class="absolute left-1.5 top-1.5 grid size-11 place-items-center rounded-full bg-white shadow-[0_6px_14px_-4px_rgba(15,23,42,.35)] transition-transform duration-500 ease-[cubic-bezier(.34,1.56,.64,1)] group-has-[:checked]:translate-x-[72px]">10 <svg viewBox="0 0 24 24" class="absolute size-6 fill-none stroke-slate-500 transition-all duration-300 group-has-[:checked]:scale-50 group-has-[:checked]:opacity-0" stroke-width="2" stroke-linecap="round"><path d="M2 9a15 15 0 0 1 20 0M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0"/><circle cx="12" cy="19.5" r="1" fill="currentColor"/></svg>11 <svg viewBox="0 0 24 24" class="absolute size-6 rotate-90 scale-0 fill-orange-500 opacity-0 transition-all duration-500 ease-[cubic-bezier(.34,1.56,.64,1)] group-has-[:checked]:rotate-45 group-has-[:checked]:scale-100 group-has-[:checked]:opacity-100 group-has-[:checked]:delay-100"><path d="M21 16v-2l-8-5V3.5a1.5 1.5 0 0 0-3 0V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5z"/></svg>12 </span>13 </span>14 <span class="grid h-4 overflow-hidden text-[11px] font-semibold uppercase leading-4 tracking-[.2em] text-slate-400">15 <span class="transition-transform duration-500 ease-[cubic-bezier(.34,1.56,.64,1)] group-has-[:checked]:-translate-y-full">conectado</span>16 <span class="text-orange-500 transition-transform duration-500 ease-[cubic-bezier(.34,1.56,.64,1)] group-has-[:checked]:-translate-y-full">em voo</span>17 </span>18</label>