{{--
  Card de orientação curta, reutilizável em todas as etapas do wizard.
  Parâmetros esperados:
  - titulo (string)
  - icone (string, classe fontawesome sem o prefixo "fas", ex.: 'fa-compass')
  - intro (string|null, aceita HTML simples como <strong>)
  - passos (array<string>, aceitam HTML simples)
--}}
@php
  $icone = $icone ?? 'fa-compass';
  $titulo = $titulo ?? 'Como funciona';
  $intro = $intro ?? null;
  $passos = $passos ?? [];
@endphp
<div class="app-card mb-4 etapa-guia border-primary border-2" @if(!empty($dataTour)) data-tour="{{ $dataTour }}" @endif>
  <div class="p-3">
    <h6 class="mb-2"><i class="fas {{ $icone }} me-1 text-primary"></i> {{ $titulo }}</h6>
    @if($intro)
      <p class="text-sm etapa-guia__intro mb-2">{!! $intro !!}</p>
    @endif
    @if(!empty($passos))
      <ol class="text-sm mb-0 ps-3">
        @foreach($passos as $passo)
          <li class="mb-1">{!! $passo !!}</li>
        @endforeach
      </ol>
    @endif
  </div>
</div>