/* ======================================================================
   LOYPIN — Tarjeta de PRESENTACIÓN de negocio (v2)
   Se usa en: inicio.php (populares / mapa), negocio.php (encabezado de
   la ficha pública), wallet.php (sugerencias). NO es la tarjeta de
   lealtad (esa vive en wallet.php con sellos y flip). Rediseñada con el
   mismo lenguaje que el carrusel de la landing: portada más alta, logo
   en placa flotante bien anclada (sin el hack de margen negativo),
   categoría en mono-font, más aire.
   Producido por Cid & Engel Studio
   ====================================================================== */

.business-card {
    display: flex;
    flex-direction: column;
    background: var(--loypin-card-bg);
    border: 1px solid var(--border, #e7e3da);
    border-radius: 18px;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(18,24,43,0.05));
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: transform 0.22s var(--ease, ease), box-shadow 0.22s var(--ease, ease), border-color 0.22s var(--ease, ease);
}
.business-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md, 0 10px 28px rgba(18,24,43,0.12));
    border-color: var(--gold-500, #e88f3e);
}

.business-card-media {
    position: relative;
    height: 132px;
    background-size: cover;
    background-position: center;
    background-color: var(--biz-accent, #eee7d8);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 10px;
}
.business-card-media::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent 55%);
    pointer-events: none;
}

.business-card-logo {
    position: relative;
    z-index: 1;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--loypin-card-bg);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800;
    font-family: var(--font-display, sans-serif);
    color: var(--ink-900, #12182b);
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
    overflow: hidden;
    flex-shrink: 0;
    /* Se ancla a la esquina inferior de la portada — sin margen negativo */
    align-self: flex-end;
    margin-top: auto;
    transform: translateY(50%);
}
.business-card-logo img { width: 100%; height: 100%; object-fit: contain; }

.business-card-body { padding: 30px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.business-card-name {
    font-family: var(--font-display, sans-serif);
    font-size: 1rem; font-weight: 700; line-height: 1.25;
    color: var(--ink-900, #12182b);
}
.business-card-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 0.75rem; color: var(--text-muted, #8991a8); }
.business-card-category {
    font-family: var(--font-body, sans-serif);
    background: var(--porcelain-dim, #efece4);
    color: var(--text-600, #565f78);
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: capitalize;
}
.business-card-distance { display: inline-flex; align-items: center; gap: 3px; }
.business-card-rating { display: inline-flex; align-items: center; gap: 3px; color: var(--gold-600, #d9740f); font-weight: 700; }

/* --- Variante compacta horizontal, para carruseles tipo "cerca de ti" --- */
.business-card--compact { min-width: 176px; flex-shrink: 0; scroll-snap-align: start; }
.business-card--compact .business-card-media { height: 78px; }
.business-card--compact .business-card-logo { width: 38px; height: 38px; border-radius: 10px; }
.business-card--compact .business-card-body { padding: 28px 13px 13px; }
.business-card--compact .business-card-name { font-size: 0.9rem; }