{{-- Tarjeta de RECETA del catálogo (recipe-first). Imagen arriba (fm-card--flush,
     con :style OBJETO para que el binding no borre el style estático), qué es y qué
     cuesta derivado del perfil, la clásica destacada. Toca → su landing. --}}
<a :href="'/recetas/' + r.slug" class="fm-card fm-card--flush fm-card--tap" style="text-decoration:none;position:relative;display:block;">
    <div style="height:130px;background:var(--green-050);background-size:cover;background-position:center;position:relative;display:flex;align-items:center;justify-content:center;"
         :style="r.cover_image ? { backgroundImage: 'url(' + JSON.stringify(r.cover_image) + ')' } : {}">
        <span x-show="!r.cover_image" style="font-family:var(--font-display);font-weight:700;font-size:44px;color:var(--green-300);" x-text="(r.name||'?')[0].toUpperCase()"></span>
        <template x-if="r.is_official">
            <span class="fm-badge fm-badge--gold" style="position:absolute;top:10px;right:10px;">Clásica</span>
        </template>
        <template x-if="esPremium(r)">
            <span class="fm-badge fm-badge--gold" style="position:absolute;top:10px;left:10px;"><i class="fa-solid fa-lock" style="font-size:10px;"></i> Premium</span>
        </template>
    </div>
    <div style="padding:13px 16px 15px;">
        <div class="fm-title" style="font-size:15.5px;line-height:1.3;" x-text="r.name"></div>
        <div class="fm-muted" style="font-size:12.5px;margin-top:3px;">
            <span x-text="r.ferment ? r.ferment.name : ''"></span><span x-show="saborDe(r)" x-text="' · ' + saborDe(r)"></span>
        </div>
        <div class="fm-row" style="gap:12px;margin-top:8px;flex-wrap:wrap;">
            <span class="fm-muted" style="font-size:12px;"><i class="fa-regular fa-clock" style="margin-right:3px;"></i><span x-text="r.ferment ? r.ferment.duration_days + ' días' : ''"></span></span>
            <template x-if="r.usa_motor"><span style="font-size:11.5px;color:var(--green-700);"><i class="fa-solid fa-wand-magic-sparkles" style="margin-right:3px;"></i>se formula</span></template>
        </div>
    </div>
</a>